.main-content{
margin:0 auto;
background:#FFF;
padding:0 0 0 0;
}
.mx-row {
    height: 30px;
    padding: 2px;
    border-bottom: 1px solid #CCC;
	max-width:100%;
    }

.mx-main-wrapper{
max-width: 100%S;
border:1px solid #ccc;
padding:5px;
overflow:hidden;
}

.mx-left-main, .mx-right-main{
	width:48%;
	height:30px;
margin-bottom:3px;
	font-size: 13px;
font-weight: 600;
color: #5F2500;
}

.mx-left-main{
float:left;
text-align:right;
}
.mx-right-main{
float:right;
text-align:right;
}
.mx-left-sub{
width: 450px;
height: 30px;
margin-bottom: 3px;
text-align: right;
font-size: 12px;
}
.view-sub-form{
width: 170px;
float: right;
background: none repeat scroll 0% 0% #FFF;
height: 25px;
padding: 3px 0 0 5px;
text-align: left;
font-size: 14px;
font-weight: 700;
}

.mx-lable{
width: 120px;
float: left;
padding-left: 10px;
font-size: 12px;
line-height: 1.2;
}
.mx-lable-remove{
	width:305px;
	float: left;
font-size: 13px;
color: #5f5f5f;
height: 31px;
color:#000;
}
.mx-lable-view{
width: 120px;
float: left;
padding-left: 0px;
font-size: 12px;
line-height: 1.2;
}

.add{
	width: 320px;
}
.mldesc-add{
	color:#400;
}
.mlcode-add{
	color:#000;
	width: 85px;
display: inline-block;
}

.base-head{
	float:left;
	width:330px;
}
.mx-textbox{
width:90px;
text-align: right;
}

.view-top-form{
width: 270px;
float: right;
background: none repeat scroll 0% 0% #FFF;
height: 25px;
padding: 3px 0 0 5px;
text-align: left;
}

.mx-row{
height: 30px;
padding: 2px;
}

.login-out{
background: white;margin-top: 10px;
text-align: center;position: absolute;margin-left: 230px;
padding:0 5px;
}
.mx-detail{
float: left;
width: 70px;
border-right: 1px solid #B7B7B7;
font-size: 13px;
text-align: right;
color: #5f5f5f;
height: 31px;
}
.detail-head{
	background: #E6E6E6;
font-size: 11px;
height: 19px;
padding: 5px 5px 5px 0;
width: 64px;
}
.working-txtbox{background:#fcfcbf;display: inline-block;padding: 0 3px 0 0;}
.mx-total-table{max-width: 800px;text-align: right;}
.mx-total-table thead{	background:#CCC;}
.mx-total-table td{	text-align:center;}
.mx-total-table td strong{text-align:left;}
.button-wrapper{
	position: absolute;
	background: #FFF;
    padding: 7px;
    right: 2px;
    margin-top: -38px;
}
.entry-header{
	display:none;
}
.base-desc{
	display:none;
}
.pagination {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
}
.table-footer {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}
.pagination .prev img {
	margin-right: 6px;
}

.pagination .next img {
	margin-left: 6px;
}
.home-action-menu {
	margin-bottom: 0;
	margin-left: 0;
	display: flex;
	flex-direction: row;
	gap: 6px;
	align-items: center;
}
ul.home-action-menu li{
	width: auto;
    float: left;
	list-style:none;
	margin: 0 2px 0 1px;
}
ul.home-action-menu li a{
	text-decoration: none;
}
ul.home-action-menu li input {
	vertical-align: top;
}
label{display:block;}
td.mx-total-td{
	text-align:left;
	padding-left: 50px !important;
}
.rows-per-page-form {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	flex-grow: 1;
	padding-right: 15px;
}
.main-add-butt-wrapper{
border: 1px solid #E8E8E8;
padding: 10px 5px 10px 15px;
margin: 0 0 5px 0;
text-align: center;
background: #E8E8E8;
display: flex;
flex-direction: row;
align-items: center;
}
.create-edit-info{
	font-size: 11px;
}
#TotEntVal{
background: #fcfcbf;
text-align: right;
padding: 3px 5px 3px 30px;
font-weight: 600;
}
.mx-percent{
	font-weight: 600;
padding: 10px;
font-size: 20px;
}
.tr_cprice td, .tr_bprice td, .tr_aprice td{
	font-size: 17px;
	font-weight:600;
}
.tr_cprice{	background: #ffcaca;}
.tr_bprice{	background: #d1ffeb;}
.tr_aprice{	background: #dad6ff;}
.review-header{
padding: 5px;
margin: 5px 0;
text-align: right;
max-width: 950px;
background: #fff7e2;
font-size: 20px;
}
.home-search-wh {
	font-size:8px;
	height:20px;
	width: 53px !important;
	padding: 0 0 0 4px !important;
}
.home-search-ref {
	width:75px;
	height: 25px;
	padding: 0;
	margin: 0;
}
.qview, .gview, .pview, .poview,.gtview, .qviewrm, .gviewrm, .pviewrm, .poviewrm,.gtviewrm{
height: inherit;
display: inherit;
color: #000;
padding: 0 3px 0 0;
}
.cpgview, .perview, .ppgview{
height: inherit;
display: inherit;
padding: 0 5px 0 0;
}
.qview{background: #ffd4af;}
.gview{background: #ffec94;}
.pview{background: #ddfca9;}
.poview{background: #c1deff;}
.gtview{background: #d8d8d8;;}

.qviewrm{background: #e4ccb6;}
.gviewrm{background: #e9e1bb;}
.pviewrm{background: #ccddaf;}
.poviewrm{background: #b7cae0;}
.gtviewrm{background: #d8d8d8;;}

.qview::before{
	opacity:0.5;
}

.bcdhighlight{
	font-weight:600;
	font-size:15px;
}
.po2view{font-size: 11px;
position: relative;
top: -18px;
color: #2d2d2d;}
.ounce
{
float:left;
width:100px;
border:1px solid #fff;
text-align:center;
font-size:12px;
color: #636363;
padding: 5px 0px;
background: #CCC;
}

@media print {
	body  
{ 
     margin: 0px;
	 color:#000000;
} 
.base-wrapper, .mx-row, .ounce-head{
	width:1100px;
}
.ounce-head, .mx-row{
width:100% !important;
}

.mx-left-main {
    width: 48%;
    float: left;
    height: 30px;
    margin-bottom: 3px;
    text-align: right;
    font-size: 13px;
}
.mx-right-main {
    width: 48%;
    float: right;
    height: 30px;
    margin-bottom: 3px;
    text-align: right;
    font-size: 13px;
}
.view-top-form {
    width: 270px;
    float: right;
    background: none repeat scroll 0% 0% #FFF;
    height: 25px;
    padding: 3px 0px 0px 5px;
    text-align: left;
    font-size: 13px;
}
.mx-main-wrapper {
    width: 100%;
    border: 1px solid #CCC;
    padding: 5px;
    overflow: hidden;
    font-size: 15px;
    font-size: 13px;
}
.login-out, button, input[type="button"], title, .back-button, .add-new-button, h1{
display:none;
}
.main-content {
margin-top:-80px;
}
.ounce{background:#333 !important;}

}

h1.mx-h1{
text-align:center;
}
body{
/*font-family: 'Slabo 27px', serif;*/
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
.ounce-head{

}

.working-txt{
	float:left;
	width:113px;
	text-align:center;
}

h3{
color: #810202;
padding: 0 0 0 3px;
}

.lable-top-form{
width:80px;
background:red;
}


input.textbox-top-form, select.textbox-top-form, .datepickr, .textbox-top-form{
width: 300px;
font-size: 15px;
height: 26px;
display: inline-block;
text-align: left;
color: #000;
background: #FFF;
}

input.textbox-top-form-ref{
width: 215px;
font-size: 13px;
height: 26px;
}

.success{
padding:10px;
width:80%;
background:#F4FFEA;
color:#004800;
margin:5px auto;
text-align:center;
}

ul{
list-style-type: none;
}

li {
height: 25px;
float: left;
margin-right: 0px;
border-right: 1px solid #AAA;
padding: 0px 20px;
width: 150px;
}
.navi{
overflow:hidden;
margin:0 auto;
text-align:center;
background:#ddd;
}

			
.list-col-wrapper{
width: 100%;
overflow: hidden;
padding: 2px;
margin: 10px 0;


}
.list-col-row{
overflow:hidden;
padding:2px;
border:1px solid #E1E1E1;
}	

.list-col-row.header-row a {
	font-size: 14px;
}
.base-price{
	height:30px;
}

.list-col-row:hover{
background:#FBF4F4;
}

.list-col-column { 
float:left;
padding:3px;
margin:1px;
height: auto;
font-size: 12px;
border-right:1px solid #EAE9E9;
}	

.list-col-column input[type="date"],
.list-col-column input[type="text"],
.list-col-column select {
	font-size: 12px;
	height: 26px;
	border: solid 1px #000;
	border-radius: 2px;
	width: 100%;
	padding: 4px 8px;
}

.list-col-row {
	align-items: center;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	border-top: 0;
}

.list-col-row form {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.list-col-column input[type="text"]{
	padding: 4px 8px;
	width: 100%;
}

#ID {width:3.5%;}
#MLCode {width:6.5%;}
#ReimerCode {width:9%;}
#BaseHead {width:10%;}
#baseCode {width:7%;}
#BaseDesc {width:19%;}
#PricePerGram {width:4%;}
#PricePerGallon {width:4%;}
#GramsPerGallon {width:5%;}
#SpecificGravity {width:4%;}
#FillLevel {width:5%;}
#Supplier {width:4%;}

.update-button {
	margin-left: 8px;
}

#Ref{
width:9%;
display: flex;
flex-direction: row;
align-items: center;
}

#base{
width:20%;
}

#Customer{
width:22%;
}

#Date{
	width:15%;
	display: flex;
	flex-direction: row;
	gap: 8px;
}

#Stain {
	width: 6%;
}

#Supplier {
	width: 6%;
}

#Date input[type="date"]{
	width: calc(50% - 4px);
}
#Color{
width: 18%;
}
#Contact{
width:100px;
}
#wh, #baseId{
width:50px;
}

.total-box{
padding-top:10px;
background:#EFEFEF;
}	

.form-view-all{
width: 72px;
float: left;
}

.delete-button, .update-button,.update-button-home, .view-button,.remove_field, .add-new-button, .save-button{
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 5% 50%; 
background-clip: border-box;
background-origin: padding-box;
background-size: auto auto;
padding: 7px 5px 7px 22px !important;
font-weight: 400 !important;
color: #000 !important;
font-size: 10px !important;;
min-width: 10px;
vertical-align: top;
}
.delete-form {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.delete-button, .remove_field{
background-image: url("/src/delete.png");
background-color: #F2EAEA !important;
max-width:70px;
}

.update-button{
background-image: url("/src/edit.png");
background-color: #CEAC5180 !important;
}
a.update-button-home{
background-image: url("/src/edit.png");
background-color: #F1E9D3 !important;
text-decoration: none !important;
padding: 3px 6px 3px 28px !important;
background-position: 8px;
}

.update-button-home input {
	pointer-events: none;
}

.add-new-button{
background-image: url("/src/add.png");
background-color: #CAF4CA !important;
}

.view-button{
background-image: url("/src/view.png");
background-color: #E6EDF7 !important;
}

.delete-button:hover{
background-image: url("/src/delete.png");
background-color: #F1D8D8 !important;
}

.update-button:hover{
background-image: url("/src/edit.png");
background-color: #EADDBB !important;
}
.view-button:hover{
background-image: url("/src/view.png");
background-color: #CBDAEF !important;
}
.save-button{
background-image: url("/src/save.png");
background-color: #FFDB7E   !important;
background-position: 15% 50%;
font-size: 13px !important;
padding: 5px 15px 5px 40px !important;
margin: 0 0 0 10px;
}

a.add-button{
background-color: #24890D;
border: 0px none;
border-radius: 2px;
color: #FFF;
font-size: 12px;
font-weight: 700;
padding: 6px 20px;
text-transform: uppercase;
vertical-align: bottom;
text-decoration:none !important;
margin: 0 0 0 1px;
right: 30px;
}
a.add-button:hover, a.back-button:hover{
background-color: #41A62A;
color: #FFF;
}

.actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.ml-auto {
	margin-left: auto;
}

a.back-button{
	background-color: #24890D;
	border: 0px none;
	border-radius: 2px;
	color: #FFF;
	font-size: 12px;
	font-weight: 700;
	padding: 4.5px 20px;
	text-transform: uppercase;
	text-decoration:none !important;
}

a.icon-button {
	display: inline-flex;
	align-items: center;
}

.align-self-end {
	align-self: flex-end;
}

.page-wrapper{
text-align:right;
}

.mx-search-form{
line-height:2;
}
.view-sing-head{
float: left;
text-align: center;
border: 1px solid  #B7B7B7;
padding: 5px 0;
font-size:10px;
background: #595959;
color: #FFF;
}
#vsh-working, #vsh-ppg, #vsh-cpg, #vsh-per, #vsh-galtop, #vsh-quart, #vsh-gallon, #vsh-pail, #vsh-pailoz{
	cursor:pointer;
}
#vsh-working:hover, #vsh-ppg:hover, #vsh-cpg:hover, #vsh-per:hover, #vsh-galtop:hover, #vsh-quart:hover, #vsh-gallon:hover, #vsh-pail:hover, #vsh-pailoz:hover{
	background:#333;
}
#vsh-cq, #vsh-cg, #vsh-cp{
	cursor:pointer;
}
#vsh-cq:hover, #vsh-cg:hover, #vsh-cp:hover{
 background:#A6A6A6;
}
#vsh-mlcode{width:120px;} 
#vsh-stain-base{width:185px;} 
#vsh-working{width:66px;}
#vsh-ppg{width:70px;}
#vsh-cpg{width:69px;}
#vsh-per{width:69px;}
#vsh-galtop{width:69px;}
#vsh-quart{width:69px;}
#vsh-gallon{width:69px; }
#vsh-pail{width:69px;}
#vsh-pailoz{width:69px;}

.makeopacity{
	display:none;	
}
.makeopacityorig{
	display:block;
}
.mix-all-butt-wrapper{
	text-align:right;
	padding:5px;
}
.sel-style{
font-size: 11px;
padding: 4px 0px;
}

@media screen and (max-width: 1008px) {
a.add-button{
position:static;
}
}

@media screen and (max-width: 568px) {
.mx-left-main{
width:100%;
height:30px;
margin-bottom:3px;
text-align:right;
}
.mx-right-main{
width:100%;
height:30px;
margin-bottom:3px;
text-align:right;
}
input.textbox-top-form, select.textbox-top-form, .datepickr{
width: 160px;
font-size: 13px;
height: 26px;
}
input.textbox-top-form-ref{
width: 140px;
font-size: 13px;
height: 26px;
}
.ounce-head{
float:left;
width:460px;
margin-top: -40px;
margin-left:105px;
}
.ounce
{
float:left;
width:55px;
border:1px solid #fff;
text-align:center;
font-size:12px;
color:#6E6E6E;
padding:5px 0px;
background:#EFEFEF;
}
.mx-textbox{
width:55px;
}
.mx-lable{
width: 75px;
float: left;
padding-left: 5px;
font-size: 12px;
line-height: 1.2;
}
}