@import url('https://fonts.googleapis.com/css?family=Kanit:300,400,500,600,700');
body, .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{ font-family:'Kanit'; }

.login-page{ background-color:#000; }
.login-box{ position:fixed; right:10%; top:0; width:500px; height:100%; background:#fff; z-index: 10; margin:0 auto; padding-top:16%; }
.login-box .box-header .box-title{ font-size:28px; font-weight:600; color:#C69C6D; }
.login-box input[type=submit]{ background-color:#C69C6D; border-color:#C69C6D; }
.login-box-body{ box-shadow: none; padding-left:50px; padding-right:50px; }
.login-logo{ position: fixed; top:50%; left:15%; margin-top:-100px; }
.login-logo img{ width:400px; }

.main-sidebar{ background-color:#000; }
.mt-0{ margin-top: 0 !important; }
.mt-1{ margin-top:0.5rem; }
.mt-2{ margin-top:1rem !important; }
.mt-3{ margin-top:1.25rem; }
.mt-4{ margin-top:1.5rem; }
.mt-5{ margin-top:2rem; }
.ml-1{ margin-left:0.5rem; }
.ml-2{ margin-left:1rem; }
.ml-3{ margin-left:1.25rem; }
.ml-auto{ margin-left:auto; }
.mr-1{ margin-right:0.5rem; }
.mr-2{ margin-right:1rem; }
.mr-3{ margin-right:1.25rem; }
.mr-4{ margin-right:1.5rem; }
.mb-0{ margin-bottom: 0 !important; }
.mb-1{ margin-bottom:0.5rem !important; }
.mb-2{ margin-bottom:1rem !important; }
.mb-3{ margin-bottom:1.25rem !important; }
.mb-4{ margin-bottom:1.5rem !important; }
.pt-2{ padding-top:1rem; }
.pt-3{ padding-top:1.25rem; }
.pt-4{ padding-top:1.5rem; }
.pt-5{ padding-top:2rem; }
.pb-2{ padding-bottom:1rem !important; }
.pb-3{ padding-bottom:1.25rem !important; }
.pl-4{ padding-right:1.5rem; }
.pl-5{ padding-left:2rem; }
.pl-2{ padding-left:1rem; }
.pr-0{ padding-right:0 !important; }
.pr-2{ padding-right:1rem; }
.pr-3{ padding-right:1.25rem; }
.pr-4{ padding-left:1.5rem; }
.pr-5{ padding-right:2rem; }
.pt-1{ padding-top:0.5rem; }
.pb-1{ padding-bottom:0.5rem; }
.pb-5{ padding-bottom:2rem; }
.p-3{ padding:1rem; }
.d-flex{ display:flex; flex-wrap:wrap; }
.d-inline-block{ display:inline-block !important; }
.align-items-center{ -ms-flex-align: center; align-items: center; }
.justify-content-between{ -ms-flex-pack: justify !important; justify-content: space-between !important; }
.justify-content-end{ -webkit-box-pack: end !important; -ms-flex-pack: end !important; justify-content: flex-end !important; }
.position-relative{ position:relative; }
.position-absolute{ position:absolute; }
.right-0{ right:0; }
.top-0{ top:0; }
.cursor-pointer{ cursor:pointer; }
.text-center{ text-align:center; }
.float-none{ float:none; }

#packing-info-box .info-box-text{ padding:7px 0; }
#packing-info-box .progress-description{ padding-top:5px; font-size:100%; }

#rider-emergency-nav a{ color:#fff !important; }
#rider-emergency-nav .info-box-text{ padding-top:10px; }
#rider-emergency-nav .progress-description{ font-size:30px; font-weight: bold; }
#rider-emergency-nav .power-off{ bottom:30px; right:20px; }

.bg-blue-sky{ background-color:#79EAFF; }
.bg-green-light{ background-color:#55DB2D; }
.bg-yellow-light{ background-color:#FFCE00; }
.bg-danger{ background-color:#FF0000 ;}
.bg-brown{ background-color:#C69C6D !important; }
.bg-navy-blue{ background-color:#506BFF; }
.bg-white{ background-color:#fff !important; }
.bg-blue-sea{ background-color:#3093DB; }
.bg-green-leaf{ background-color:#58C48A; }
.bg-orange{ background-color:#FF8A00; }
.bg-purple{ background-color:#C97EF0; }
.bg-brown-earth{ background-color:#D8A74B; }
.bg-red-burgundy{ background-color:#AF0000; }
.bg-gray{ background-color:#F4F4F4; }

.border-brown{ border-color:#C69C6D !important; }
.text-white{ color:#fff; }
.text-brown{ color:#C69C6D !important; }
.text-yellow{ color:#FFCE00; }
.w-100{ width:100%; }
.btn{ font-family: 'Kanit'; }
.btn-w-100{ width:100px; }
.border-padding{ border-top:1px #ccc solid; border-bottom:1px #ccc solid; padding:10px 0; }
.nopadding-top{ padding-top:0; } 
.nopadding-bottom{ padding-bottom:0; }
.with-border{ border-color:#ccc !important; }
.nav-tabs-gray > .nav-tabs > li > a{ border-color:#ddd; }
.nav-tabs-gray > .nav-tabs > li.active > a{ background-color:#C9C9C9 !important; color:#fff; }
.btn-link, 
.data-form button[type="submit"].btn-link{ display:inline-block; background:#F4F4F4 !important; border:1px solid #E5E5E5  !important; padding:7px 25px !important; color:#000; font-size:12px; }
.btn-disable{ opacity: 0.3; text-decoration: none !important; }
.border-bottom{ border-bottom: 1px solid #333; }

.font-18{ font-size:18px !important; }
.font-16{ font-size:16px !important; }
.font-14{ font-size:14px !important; }
.font-12{ font-size:12px !important; }

table.dataTable thead > tr > th.text-center{ padding-right:8px; }

.opt-button-left{ position:absolute; top:8px; left:10px }
.input-lg select{ padding:10px; height:46px; font-size:18px; }

.swal2-popup button:focus{ box-shadow:none !important; }
.swal2-container{ z-index:99999; }

.rounded{ border-radius:5px; }

.box-list{
   display:flex; flex-wrap:wrap; 
   -ms-flex-align: center; align-items: center;
   -ms-flex-pack: justify !important; justify-content: space-between !important; 
}
.box-list > *{ border:1px solid #ccc; padding-right:10px; margin-bottom:10px; }
.box-list .col-2{ width:16%; }
.box-list .col-3{ width:24%; }
.box-list .col-4{ width:32%; }
.box-list .col-6{ width:49.5%; }
.box-list .col-12{ width:100%; }
.box-list-5 > *{ width:19%; }
.box-list .col-header{ 
   display:flex; flex-wrap:wrap; 
   -ms-flex-align: center; align-items: center;
   border-bottom:1px solid #ccc;
   padding:10px 0 10px 10px;
}
.box-list .col-header .title{ color:#555; }
.box-list .col-header .unit{ margin-left:auto; font-weight:bold; font-size:12px; -ms-flex-align: center; align-items: center; }
.box-list .col-body{ text-align: right; font-size:28px; padding:10px 0; }

.report-filter-tool{ padding-top:20px; }
.report-filter-tool label{ top:-20px; left:0; font-weight:400; }
.report-filter-tool .filter-date-group input{ width:100px !important; }

@media (max-width: 1600px){
   .login-box{ padding-top:18%; }
}

@media (max-width: 1200px){

   .login-box{ background:transparent; right:50%; margin-right:-250px; }
   .login-logo{ position: static; margin-bottom:55px; }
   .login-logo img{ width:200px; }
}

@media (max-width: 1024px){
   .login-box{ top:10%; }
}

@media (max-width: 767px){ 
   .login-box-body{ padding-left:20px; padding-right:20px; }
   .login-logo{ margin-top:0; }
   .login-box{ position: static; margin:0 auto; width:90%; }
}