@charset "utf-8";
/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media (max-width: 812px)  {
	.table-vertical { 
	  width: 100%; 
	}
	/* Zebra striping */
	.table-vertical>tbody>tr:nth-of-type(odd) { 
	  background: #f5f5f5;
	}
	.table-vertical>thead>tr>th { 
	  background: #fff; 
	  color: #595959; 
	  font-weight: bold; 
	}
	.table-vertical>tbody>tr>td, .table-vertical>thead>tr>th { 
	  padding:0px 6px; 
	  border-top: 0px solid #ddd; 
	  text-align: left; 
	  vertical-align: middle;
	}
	/* Force table to not be like tables anymore */
	.table-block, .thead-block, .tbody-block, .th-block, .td-block, .tr-block { 
		display: block ; 
	}	
	/* Hide table headers (but not display: none;, for accessibility) */
	.table-vertical thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	.table-bordered td, .table-bordered th {
		border: 0px solid #c0b08c !Important;
	}	
	.table-vertical>thead>tr,  .table-vertical>tbody>tr{ border: 1px solid #c0b08c;}	 
	.table-vertical>thead>tr>td,  .table-vertical>tbody>tr>td{ 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 0px solid #5f5f5f; 
		position: relative;
		padding-left: 35%;
		word-break: break-all;
		display:block;
		height:auto;
		padding-top:6px;
		padding-bottom:6px;
		font:normal 12px 'Roboto', sans-serif;
	}	
	.table-vertical>tbody>tr>td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 0px;
		left: 15px; 
		font-weight:bold;
		color:#595959;
		padding-top:6px;
		padding-bottom:6px;
	}
		
	/*	Label the data	*/
	
	.table-vertical>tbody>tr>td:before {content:attr(data-th);}
	.table-value {
		font:normal 12px 'Roboto', sans-serif;
		color:#595959;
		text-decoration:none;
	}
	.table-value a:link{
		font:normal 12px 'Roboto', sans-serif;
		color:#595959;
		text-decoration:none;
	}
	.table-value:before,.table-value a:link:before{content:':   ';margin-left:0px}
	.table-value font:before{content:':   ';margin-left:0px}

	.table-vertical-big { 
	  width: 100%; 
	}
	/* Zebra striping */
	.table-vertical-big>tbody>tr:nth-of-type(odd) { 
	  background: #f5f5f5;
	}
	.table-vertical-big>thead>tr>th { 
	  background: #fff; 
	  color: #595959; 
	  font-weight: bold; 
	}
	.table-vertical-big>tbody>tr>td, .table-vertical-big>thead>tr>th { 
	  padding:0px 6px; 
	  border-top: 0px solid #ddd; 
	  text-align: left; 
	  vertical-align: middle;
	}

	
	/* Force table to not be like tables anymore */
	.table-block-big, .thead-block-big, .tbody-block-big, .th-block-big, .td-block-big, .tr-block-big { 
		display: block ; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	.table-vertical-big thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	.table-vertical-big>thead>tr,  .table-vertical-big>tbody>tr{ border: 1px solid #c0b08c; }
	
	 
	.table-vertical-big>thead>tr>td,  .table-vertical-big>tbody>tr>td{ 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 0px solid #5f5f5f; 
		position: relative;
		padding-left: 35%;
		word-break: break-all;
		display:block;
		height:auto;
		padding-top:6px;
		padding-bottom:6px;
	}
	
	.table-vertical-big>tbody>tr>td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 0px;
		left: 6px; 
		font-weight:bold;
		color:#595959;
		padding-top:6px;
		padding-bottom:6px;
	}
		
	/*	Label the data	*/
	.table-vertical-big>tbody>tr>td:before {content:attr(data-th);}

	.table-value-big {
		font:normal 12px 'Roboto', sans-serif;
		color:#595959;
		text-decoration:none;
	}
	.table-value-big a:link{
		font:normal 12px 'Roboto', sans-serif;
		color:#595959;
		text-decoration:none;
	}

	.table-value-big:before,.table-value-big a:link:before{content:':   ';}

	.table-value-big font:before{content:':   ';}

	@media print{@page {size:landscape}}
}

@media (min-width:770px) and (max-width:1020px) {	
	.value-text-font::before{content:':   ';}
	.header-links-secondrow{
		margin:0;
		padding-top:9px !important;
	}
	.header-links-secondrow i{
		color:#535352;
		font-size:15px;
	}
	.selectcompany-center-box{
		margin-top:8% !important;		
	}
	#content {
		padding-bottom:100px; /* Height of the footer element */
	}
	.sch-width{width:88.7% !important;}
	.col-form-label,.form-control,.custom-select,.form-control-plaintext,.form-check-label{font-size:13px!important;}
	.form-control-plaintext a{font-size:13px}
	.form-control-plaintext a:hover{font-size:13px}
	.page-title{
		font-size: 16px !important;
		text-align:left;	
	}
}

/* $$$$$$$$$$$$$$$$$$$$$$$$ I Pads (Landscape)	$$$$$$$$$$$$*/
@media only screen and (max-width:1024px), only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape)
{
	
	.outer-page-center-box{		
		margin-top:12%;		
		border:2px solid #ccc;	
	}
	.selectcompany-center-box{
		margin-top:20%;
	}
	.header-links-secondrow{
		margin:0;
		padding-top:18px;
	}
	.badge-notify{
	   background-color:#fff;
	   border:1px solid #595959;
	   position:absolute;
	   top: 3px;
	   left: 5px;
	   color:#595959;
	   padding:1px;
	   font:normal 10px 'Roboto', sans-serif;
	 }

	.sch-width{width:90.1%;}/* used in Scheduleing Appointment */

	.col-form-label,.form-control,.custom-select,.form-control-plaintext,.form-check-label{font-size:13px}
	
	.form-control-plaintext a{font-size:13px}

	.form-control-plaintext a:hover{font-size:13px}

	.page-title{
		font-size: 18px !important;
		text-align:left;	
	}
	.icon-text-font{font:bold 16px 'Roboto', sans-serif !important;}
	
	@media print{@page {size:landscape}}

	.bottom-buttons{
		padding:5px !important;
	}



}

/* $$$$$$$$$$$$$$$$$$$$$$$$$ I Pads (Portrait)	$$$$$$$$$$$$$$$$$$$$$$ */
@media only screen and (max-width:768px), only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait)
{
	
	.value-text-font::before{content:':   ';}
	.headercompany-title{	
		font-size:16px;		
	}
	.outer-page-center-box{		
		margin-top:20%;		
	}	
	.selectcompany-center-box{
		margin-top:30%;
	}
	.header-links-secondrow{
		margin:0;
		padding-top:8px;
	}
	.header-links-secondrow i{
		color:#535352;
		font-size:15px;
	}	
	.badge-notify{
	   background-color:#fff;
	   border:1px solid #595959;
	   position:absolute;
	   top: 5px;
	   left: 5px;
	   color:#595959;
	   padding:1px 2px;
	   font:normal 9px 'Roboto', sans-serif;
	 }
	.sch-width{width:88.2% !Important;}/* used in Scheduleing Appointment */	
	.col-form-label,.form-control,.custom-select,.form-control-plaintext,.form-check-label{font-size:13px!Important;}
	.form-control-plaintext a{font-size:13px}
	.form-control-plaintext a:hover{font-size:13px}
	.reports-link-box{
		height:auto !important;	
	}	
	.page-title{
		font-size: 16px !important;
		text-align:left;	
	}
	.icon-text-font{font:bold 13px 'Roboto', sans-serif !important;}

	@media print{@page {size:Portrait}}

	.searchBox {
		position: auto !important;
		top:100%;
		left:97%;
		transform:  translate(-100%,0%);
		background: #545454;
		height: 45px;
		border-radius: 0px ;
		padding: 12px 30px 12px 20px;
	}

	.searchButton {
		color: white;
		float: right;
		border-radius: 10;
		background: #545454;
		transition: 0.4s;
		padding-left:10px;
	}
	.searchBox:hover > .searchInput1 {
		width: 605px;
		padding: 0 0px;
	}

	.searchBox:hover > .searchButton {
		background: white;
		color: #545454;
		position: auto;
		left: 93%;
		border-radius: 5px;
		padding: 0px 10px;
		
	}
	
	
}

@media only screen and (max-width:812px), only screen and (min-device-width:375px) and (max-device-width:812px) and (orientation:landscape)
{
	
	
}

@media (max-width:767px) {
	.value-text-font::before{content:':   ';}
	.pref-Button-Box a{
		display:block;
		margin:1% 0%;
	}
	#content {
		padding-bottom:100px; /* Height of the footer element */
	}
	.headercompany-title{	
		font-size:16px;		
		height:21px;		
		padding:0px 0px 25px 1px;
	}	
	.page-title{
		font-size: 16px !important;
		text-align:left;	
	}	
	.outer-page-center-box{		
		margin-top:20%;		
		border:1px solid #ccc;	
	}	
	.selectcompany-center-box{
		margin-top:5%;
	}
	.header-links-secondrow{
		margin:0;
		padding-top:8px;
	}
	.header-links-secondrow i{
		color:#535352;
		font-size:15px;
	}
	.badge-notify{
	   background-color:#fff;
	   border:1px solid #595959;
	   position:absolute;
	   top: 5px;
	   left: 5px;
	   color:#595959;
	   padding:1px 2px;
	   font:normal 9px 'Roboto', sans-serif;
	 }	
	.pagerResult-box {
		line-height:25px;
	}	
	.sch-width{width:86%;}/* used in Scheduleing Appointment */
	.col-form-label,.form-control,.custom-select,.form-control-plaintext,.form-check-label{font-size:13px!Important;}
	.col-form-label{font-weight:bold; color:#595959}	
	.width-responsive{width:100%}
	.form-control-plaintext a{font-size:13px}
	.form-control-plaintext a:hover{font-size:13px}
	
	.jump-to-row-links span.active{font-family:'Roboto', sans-serif;font-size:14px; font-weight:bold;display:inline-block;min-width:100px; text-align:center; border-top:0px solid #DEDBD6 !Important; border-bottom:0px solid #DEDBD6 !Important; height:40px; line-height:40px; margin:3% 3%; background-color:#8EA3B8 !Important; padding:0px 10px}

	.jump-to-row-links span.active a{color:#fff !Important;}

	@media print { @page {size: auto !important} }
}

@media (max-width:450px) {
	.dashboard-right-box {
		padding-left:10px !important;
	}
	.menu-toggle{	
		list-style:none;
		float:left;
		left:0;
		display:none;
		margin:0%;
		padding:0%;
		z-index:999999;
		position:absolute;
	}

	.menu-toggle ul{
		float:left;
		display:block;
	}

	#content {
		padding-bottom:80px; /* Height of the footer element */
	}
	.headercompany-title{
		font-size:16px;		
		height:21px;		
		padding:0px 0px 25px 1px;
	}	
	.outer-page-center-box{		
		margin-top:20%;		
		border:1px solid #ccc;	
	}
	.selectcompany-center-box{
		margin-top:50%;
	}
	.header-links-secondrow i{
		color:#535352;
		font-size:21px;
	}
	.badge-notify{
	   background-color:#fff;
	   border:1px solid #595959;
	   position:absolute;
	   top: 5px;
	   left: 5px;
	   color:#595959;
	   padding:1px 2px;
	   font:normal 9px 'Roboto', sans-serif;
	 }	
	.sch-width{width:75%;}/* used in Scheduleing Appointment */
	.table-vertical>thead>tr>td,  .table-vertical>tbody>tr>td{ 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 0px solid #5f5f5f; 
		position: relative;
		padding-left: 55%;
		word-break: break-all;
		display:block;
		height:auto;
		padding-top:6px;
		padding-bottom:6px;
		font:normal 12px 'Roboto', sans-serif;
	}	
	
	.bootstrap-select {
	  width: 260px \0;
	  /*IE9 and below*/
	}	
	.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
	  width: 260px !important;
	}
	.dorder-radiu-all{
		-moz-border-radius:0px;
		-webkit-border-radius:0px;
		border-radius:0px;
	}
	.dorder-left{
		-moz-border-radius: 0px 0px 0px 0px;
		-webkit-border-radius:0px 0px 0px 0px;
		border-radius:0px 0px 0px 0px;
	}
	.dorder-right{
		-moz-border-radius:0px 0px 0px 0px;
		-webkit-border-radius:0px 0px 0px 0px;
		border-radius:0px 0px 0px 0px;
	}
	.dorder-left{
		-moz-border-radius: 0px 0px 0px 0px;
		-webkit-border-radius:0px 0px 0px 0px;
		border-radius:0px 0px 0px 0px;
	}
	.login-left-bg-color{background-color:#fff;border-right:0px solid #000}
	.responsive-image {
	  width: 100%;
	  max-width: 100px;
	  height: auto;
	}
	.icon-text-font{font:bold 9px 'Roboto', sans-serif !important;text-transform: uppercase;padding:10px 0px 20px 0px;text-align:center;display:block;}

	@media print { @page {size: auto !important} }

	.searchBox {
		position: absolute;
		top:100%;
		left:96%;
		transform:  translate(-100%,0%);
		background: #545454;
		height: 45px;
		border-radius: 10px ;
		padding: 12px 20px;
	}
	.searchBox:hover > .searchInput1 {
		width: 308px;
		padding: 0 0px;
	}

	.filterbox{		
		border-radius: 5px 5px 5px 5px;
	}

	.filterbox-icon{
		border-radius: 5px 5px 5px 5px;
	}

	.filterbox-input{
		border-radius: 5px 5px 5px 5px;
	}
}

@media (max-width:320px) {
	.dashboard-right-box {
		padding-left:10px !important;	
	}
	#content {
		padding-bottom:50px; /* Height of the footer element */
	}
	.headercompany-title{		
		font-size:14px;		
		height:21px;		
		padding:0px 0px 19px 1px;
	}	
	.page-title{
		text-align:left;	
	}
	.outer-page-center-box{		
		margin-top:5%;		
		border:1px solid #ccc;	
	}
	.badge-notify{
	   background-color:#fff;
	   border:1px solid #595959;
	   position:absolute;
	   top: 5px;
	   left: 5px;
	   color:#595959;
	   font:normal 9px 'Roboto', sans-serif;
	 }	
	.prefnormalButton{text-align:left !Important}
	.icon-text-font{font:normal 9px 'Roboto', sans-serif !important; text-transform: uppercase;padding:10px 0px 20px 0px;text-align:center;display:block;}

	@media print { @page {size: auto !important} }
}