h1{
    float: left;
    font-size: 24px;
    color: #333;
}

h2{
    font-size: 18px;
}

p{

}

a{
    text-decoration: none;
    color: #4063a7;
}

a:hover{

}

div.spacer{
    float: left;
    width: 100%;
    height: 1px;
}

label input[type=checkbox]{
    float: left;
    margin-right: 10px;
    height: 13px;
}

label{
    float: left;
    width: 6%;
    padding: 5px 12px;
    margin: 0 10px 10px 0;
    font-weight: bold;
}

input[type=submit], .exbtn{
    float: left;
    padding: 5px 10px;
    border: 1px solid #4063a7;
    transition: all .2s ease;
    background-color: #fff;
    color: #4063a7;
    cursor: pointer;
    margin: 0 10px 10px 0;
}

input[type=submit]:hover, .exbtn:hover{
    color: #fff;
    background-color: #4063a7;
}

select{
    float: left;
    width: calc(14% + 22px);
    padding: 5px 10px;
    margin: 0 10px 10px 0;
    transition: all .2s ease;
    border: 1px solid #d0d0d0;
}

input[type=text], input[type=password]{
    float: left;
    width: 14%;
    padding: 5px 10px;
    margin: 0 10px 10px 0;
    transition: all .2s ease;
    border: 1px solid #d0d0d0;
}

input[type=text]:focus, select:focus{
    border: 1px solid #4063a7;
}

input[type=checkbox]{

}

textarea{

}

ul.tbl.half{
    width: 50%;
    clear: both;
}

ul.tbl{
    float: left;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.tbl li{
    float: left;
    width: 100%;
    padding: 5px 0;
    border-bottom: 1px solid #d0d0d0;
    transition: all .2s ease;
}

ul.tbl li:not(:first-child):hover{
    background-color: #a6e3e9!important;
}

ul.tbl li span{
    float: left;
}
ul.tbl li span.blue {
	color: #fff;
	background-color: rgba(0,143,247,1.00);
	min-height: 50px;
}
ul.tbl li span.red {
	color: #fff;
	background-color:rgba(255,0,4,1.00);
	min-height: 50px;
}
ul.tbl li span.red a {
	color: #fff;
}

ul.tbl li:first-child{
    padding: 10px 0;
    border-top: 2px solid #333;
    border-bottom: 2px solid #333;
}

ul.tbl li:first-child span{
    float: left;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 14px;
}

ul.tbl li:nth-of-type(even){
    background-color: #cecece;
}

ul.tbl li:nth-of-type(odd){
    background-color: #fff;
}

ul.tbl li.divider{
    text-align: center;
    font-weight: bold;
    background-color: #5aea5a !important;
}

ul.tbl li.divider.unfinished{
    background-color: #fffe88 !important;
}

.internid{
    width: 3%;
}

.ordernummer{
    width: 7%;
}
.ordernummer em{
    display: block;
    font-size: 10px;
}
.ordernummer.small{
    width: 4%;
}
.klantnaam{
    width: 3%;
}

.orderdate{
    width: 5%;
}

.orderstatus{
    width: 5%;
}

.omzet{
    width: 3%;
}

.kostprijs{
    width: 3%;
}

.marge{
    width: 3%;
}

.artikelen{
    width: 15%;
}
.extracharge{
    width: 15%;
}

.merken{
    width: 5%;
}

.leverancier{
    width: 5%;
}

.productaantal{
    width: 2%;
}

.land{
    width: 3%;
}

.verzenddatum{
    width: 9%;
}

.shipper{
    width: 3%;
    cursor: pointer;
}

.track{
    width: 5%;
}

.pstatus{
    float: right!important;
    width: 1%;
    height: 100%;
    text-align: right;
}

.afrekening{
    width: 4%;
}

.shipping{
    width: 4%;
}

.vat{
    width: 4%;
}

.netto{
    width: 4%;
}

.chk{
    width: 3%;
}

.options{
    width: 6%;
}

.brnd_options{
    width: 8%;
}

.brnd_supplier{
    width: 35%;
}
.brnd_status{
    width: 10%;
}

.options a, .deb_options a{
    float: left;
    margin-right: 10px;
}

.options a.green i{
    color: #429117!important;
}

.options a i, .deb_options a i, .shop_options a i, .batch i{
    font-size: 24px;
    color: #000;
    transition: all .2s ease;
}

.options a:hover i, .deb_options a:hover i, .shop_options a:hover i{
    color: #4063a7;
}

.filters h2{
    cursor: pointer;
}

.splitter{
    width: 5%;
}

.artcode{
    width: 13%;
    position: relative;
}

.artid{
    width: 5%;
}

.artnaam{
    width: 38%;
}

.artnaam.small{
    width: 28%;
}

.redemprecid{
    width: 10%;
}

.artnumber{
    width: 7%;
}

.prodstatus{
    width: 10%;
}

.prodsupplier{
    width: 10%;
}

.lineoptions{
    width: 10%;
}

.productname{
    padding: 0 15px;
    width: calc(15% - 30px);
}
.shipper {
    width: 3%
}
.prodartcode{
    width: 6%;
}

.levcode{
    width: 6%;
}

.ean{
    width: 7%;
}

.altered{
    width: 75%;
}

.inkoop{
    width: 5%;
}

.stock{
    width: 3%;
}

.reserved{
    width: 3%;
}

.inbound{
    width: 3%;
}

.minsupply{
    width: 3%;
}

.moq{
    width: 3%;
}

.weight{
    width: 3%;
}

.volume{
    width: 3%;
}

.dimensions{
    width: 4%;
}

.brand{
    width: 5%;
}

.supplier{
    width: 5%;
}

.usr_id{
    width: 5%;
}

.usr_type{
    width: 10%;
}

.usr_username{
    width: 10%;
}

.usr_email, .usr_name{
    width: 15%;
}

.ink_id{
    width: 5%;
}

.brnd_id{
    width: 10%;
}

.brnd_name{
    width: 35%;
}

.sup_id{
    width: 3%;
}

.sup_moq{
    width: 5%;
}

.topx_klant, .topx_productcode, .topx_ean, .topx_leverancier, .topx_merk, .topx_inkoop, .topx_inkoop_totaal, .topx_omzet_totaal, .topx_marge_totaal{
    width: 7%;
}
.topx_inkoop, .topx_inkoop_totaal, .topx_omzet_totaal, .topx_marge_totaal{
	text-align: right;
}
.topx_productnaam {
    width: 18%;
}
.topx_aantal {
    width: 5%;
}
.topx_stock {
    width: 5%;
}

.topx_promo {
	background-color: rgb(0, 143, 247);
	color: #fff;
}

.topx_eol {
	background-color: rgba(255,0,4,1.00);
	color: #fff;
}

.inkoop_ttov{
    width: 3%;
}

.inkoop_min{
    width: 3%;
}

.sup_name, .sup_email, .sup_straat, .sup_nummer, .sup_toev, .sup_plaats, .sup_land{
    width: 10%;
}
.sup_zip {
    width: 5%;
}
.sup_status {
    width: 5%;
    text-align: center;
}

.zone_id{
    width: 3%;
}
.zone_name{
    width: 10%;
}
.zone_info{
    width: 20%;
}
.zone_option{
    width: 67%;
}


.ink_datum, .ink_voorgesteld, .ink_ingekocht, .ink_geleverd{
    width: 20%;
}

.inkoop_inkoop{
    width: 4%;
}

.inkoop_inkoop_totaal{
    width: 5%;
}

.inkoop_code, .inkoop_levcode, .inkoop_ean{
    width: 8%;
    position: relative;
}

.inkoop_product{
    width: 9%;
}
.inkoop_product.blue{
	background-color: rgb(0, 143, 247);
	color: #fff;
}

.inkoop_stock, .inkoop_reserved, .inkoop_suggested, .inkoop_moq{
    width: 3%;
    text-align: center;
}

.inkoop_teontvangen{
    width: 3%;
}

.inkoop_totaalontvangen{
    width: 5%;
}

.inkoop_ingekocht{
    width: 3%;
}

.inkoop_ontvangen{
    width: 4%;
}

.inkoop_totaalontvangenwaarde{
    width: 4%;
}

.inkoop_leverdatum {
    width: 6%;
}
.inkoop_opmerking{
    width: 8%;
}

.bolitem, .oasitem{
    width: 2%;
}

.activeprod{
    width: 3%;
}

.batch{
    width: 3%;
}

.addnew{
    width: 2%;
    text-align: right;
}

.addnew i{
    cursor: pointer;
    transition: all .2s ease;
}

.addnew i:hover{
    color: #4063a7;
}

.btn{
    float: left;
    padding: 5px 10px;
    background-color: #fff;
    color: #4063a7;
    border: 1px solid #4063a7;
    transition: all .2s ease;
    cursor: pointer;
}

.btn.lst{
    clear: left;
    margin-bottom: 10px;
}

.btn:hover{
    color: #fff;
    background-color: #4063a7;
}

.inactive .btn, .inactive .btn:hover{
    background-color: #bababa;
    color: #000;
}



.tbl li.last{
    background-color: #fff!important;
    border-top: 2px solid #333;
    border-bottom: none;
}

span.value{
    float: left;
    width: 40%;
    padding: 5px 12px;
    margin: 0 10px 10px 0;
    border-bottom: 1px solid #fff;
}

span.value:after{
    content: " ";
    white-space: pre;
}

.autoresults{
    position: absolute;
    top: 100%;
    left: 0;
    padding: 15px;
    background-color: #fff;
    z-index: 15;
    min-width: 350px;
    -webkit-box-shadow: 5px 5px 5px 0px rgba(87,87,87,0.29);
    -moz-box-shadow: 5px 5px 5px 0px rgba(87,87,87,0.29);
    box-shadow: 5px 5px 5px 0px rgba(87,87,87,0.29);
    border: 1px solid #d0d0d0;
}

.autoresults ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

.autoresults ul li{
    cursor: pointer;
    transition: all .2s ease;
}

.autoresults ul li:hover{
    background-color: #a2bbea;
}

.autoresults ul li:first-child{
    padding: 5px 0;
    border-bottom: 1px solid #d0d0d0;
}

.orderdetails input[name=delivery_straat], .orderdetails input[name=invoice_straat]{
    width: calc(30% - 32px);
}

.orderdetails input[name=delivery_housenumber], .orderdetails input[name=invoice_housenumber]{
    width: calc(10% - 22px);
}

.orderdetails input[name=delivery_zip], .orderdetails input[name=invoice_zip]{
    width: calc(15% - 32px);
}

.orderdetails input[name=delivery_city], .orderdetails input[name=invoice_city]{
    width: calc(25% - 22px);
}

.shop_name{
    width: 10%;
}

.shop_uses{
    width: 10%;
}

.shop_token{
    width: 10%;
}

.shop_active{
    width: 5%;
}

.shop_options{
    width: 10%;
}

.bo_productname{
    width: 25%;
}

.bo_code{
    width: 10%;
}

.bo_aantal{
    width: 7%;
}

.bo_orders{
    width: 10%;
}

.bo_date{
    width: 10%;
}

.bo_inkoop{
    width: 10%;
}

.bo_leverdatum{
    width: 10%;
}

.mail_subj{
    width: 25%;
}

.mail_body{
    width: 60%;
}

.inv_id{
    width: 3%;
}

.inv_nummer{
    width: 10%;
}

.inv_debiteurnaam{
    width: 15%;
}

.inv_datum{
    width: 7%;
}

.inv_subtotaal{
    width: 7%;
}

.inv_totaal{
    width: 7%;
}

.inv_betaaldatum{
    width: 6%;
}

.inv_options{
    width: 10%;
}

.inv_artnummer{
    width: 10%;
}

.inv_wzh{
    width: 25%;
}

.inv_wzh textarea{
    width: calc(100% - 26px)
}

.inv_uren{
    width: 10%;
}

.inv_tarief{
    width: 10%;
}

.inv_prijs{
    width: 10%;
}

.inv_btw{
    width: 8%;
}

.inv_btw select{
    width: calc(100% - 22px);
}

.countryname{
    width: 10%;
}

.cntryactive{
    width: 5%;
}

.inbest_datum{
    width: 10%;
}

.inbest_product{
    width: 20%;
}

.inbest_ingekocht{
    width: 10%;
}

.inbest_leverancier{
    width: 10%;
}

.inbest_merk{
    width: 10%;
}

.inbest_openstaand{
    width: 10%;
}

.program_name{
    width: 25%;
}

.program_formats{
    width: 35%;
}

.program_mails{
    width: 15%;
}

.program_mails select{
    width: calc(100% - 22px);
}

.program_options{
    width: 25%;
}


@media only screen and (max-width: 900px) {
	.login form {
		width: calc(100% - 50px);
	}
}