@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}}

	.tbox{top:200px !important; right:0px !important; left:0px !important;}
	.tinner{width:800px !important;right:0px !important; left:0px !important;}
}
@media (min-device-width:1024px) and (max-device-width:1365px) {
	.tbox{top:200px !important; right:0px !important; left:0px !important;}
	.tinner{width:1000px !important;right:0px !important; left:0px !important;}
}
@media (min-width:770px) and (max-width:1020px) {	
	.value-text-font::before{content:':   ';}
	#content {
		padding-bottom:100px; /* Height of the footer element */
	}
	.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)
{
	.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}}	

	.tbox{top:200px !important; right:0px !important; left:0px !important;}
	.tinner{width:995px !important;right:0px !important; left:0px !important;}
}

/* $$$$$$$$$$$$$$$$$$$$$$$$$ I Pads (Portrait)	$$$$$$$$$$$$$$$$$$$$$$ */
@media only screen and (max-width:768px), only screen and (min-device-width:768px) and (max-device-width:1023px) and (orientation:portrait)
{
	.value-text-font::before{content:':   ';}
	.headercompany-title{	
		font-size:19px !Important;		
	}
	.outer-page-center-box{		
		margin-top:20%;		
	}	
	.col-form-label,.form-control,.custom-select,.form-control-plaintext,.form-check-label{font-size:14px!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;	
	}
	
	.card-header, .card-banner-regular{	
		font-size:16px !Important;
	}

	.card-body, .card-background-regular{		
		padding:10px !important;
	}
	
	.message-page-top h1{font-size: 26px !Important;}
	.message-page-bottom{height:45vh !Important}
	.help-box{padding:5px 50px !Important}

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

	.tbox{top:200px !important; right:0px !important; left:0px !important;}
	.tinner{width:735px !important;right:0px !important; left:0px !important;}
}

@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:':   ';}
	#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;	
	}	
	.pagerResult-box {
		line-height:25px;
	}	
	.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}
	.form-control-plaintext a{font-size:13px}
	.form-control-plaintext a:hover{font-size:13px}
	@media print{@page {size:auto}}
}

@media (max-width:450px) {	
	.main-header-box{height:145px !Important;}
	
	.headercompany-title{
		font-size:20px !Important;
		padding:0px 0px 35px 0px;
		letter-spacing:2px !Important;
	}
	.page-title{			
		font-size:16px !Important;		
	}
	
	.col-form-label,.form-control,.custom-select,.form-control-plaintext,.form-check-label{font-size:14px!Important;}
	
	.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;
	}
	
	.login-left-bg-color{background-color:#fff;border-right:0px solid #000}
	.responsive-image {
	  width: 100%;
	  max-width: 100px;
	  height: auto;
	}
	
	@media print{@page {size:auto}}

	.card-header, .card-banner-regular{	
		font-size:16px !Important;
	}

	.customize-label-box {		
		font-size:12px !Important;
		min-width: 75px !Important;
	}
	.customize-label-box:hover {		
		font-size:12px !Important;
		min-width: 75px !Important;
	}

	.message-page-top h1{font-size: 18px !Important; }
	.message-page-top img{width:150px !Important; height:150px !Important}
	.message-page-bottom{height:53vh !Important}
	.message-text{font-size:16px !Important; line-height:21px !Important}

	.help-box{padding:5px 10px !Important}

	.help-box-heading{font-size: 18px !Important; font-weight: 400;}
	.help-box-font-one{font-size: 16px !Important; font-weight: 400;}
	.help-box-font-two{font-size: 14px !Important; font-weight: 400;}

	.save-button, .confirm-button, .completed-button, .submit-button, .green-button, .done-button, .delete-button, .cancel-button, .remove-button, .close-button, .red-button, .edit-button, .reset-button, .update-button, .erase-button, .post-button, .clear-button, .send-button, .add-button, .blue-button, .print-button, .comments-button, .orange-button, .auditinfo-button, .yellow-button, .view-button, .fax-button, .scan-button, .notify-button, .upload-button, .download-button, .graph-button, .search-button, .barcode-button, .hold-button, .back-button, .next-button, .QR-button, .common-button{min-width:90px !important; font-size:12px !important}

	.tbox{top:200px !important; right:0px !important; left:0px !important;}
	.tinner{width:350px !important;right:0px !important; left:0px !important;}
}

@media (max-width:320px) {	
	.headercompany-title{		
		font-size:14px !Important;
		padding:10px 0px 30px 1px;
	}	
	.page-title{
		font-size:14px !Important;
		text-align:center;	
	}
	.outer-page-center-box{		
		margin-top:5%;		
		border:1px solid #ccc;	
	}
	
	.card-header, .card-banner-regular{	
		font-size:14px !Important;
	}

	.customize-label-box {		
		font-size:14px !Important;
		min-width: 60px !Important;
	}
	.customize-label-box:hover {		
		font-size:14px !Important;
		min-width: 60px !Important;
	}

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

	.save-button, .confirm-button, .completed-button, .submit-button, .green-button, .done-button, .delete-button, .cancel-button, .remove-button, .close-button, .red-button, .edit-button, .reset-button, .update-button, .erase-button, .post-button, .clear-button, .send-button, .add-button, .blue-button, .print-button, .comments-button, .orange-button, .auditinfo-button, .yellow-button, .view-button, .fax-button, .scan-button, .notify-button, .upload-button, .download-button, .graph-button, .search-button, .barcode-button, .hold-button, .back-button, .next-button, .QR-button, .common-button{min-width:82px !important}

	.tbox{top:130px !important; right:0px !important; left:0px !important;}
	.tinner{width:300px !important;right:0px !important; left:0px !important;}
}