.btn-fp-home {  
  color: white;
  background-color: #00B4CB;
}
.btn-fp-home:hover {
  color: white;
}

.ps-client-login {
  text-align: center;
  margin-top: 50px;
}

.ps-client-login > h1 {
  color: white;
}

.ps-client-login > a > img {
  width: 50px;
  margin-left: 20px;
  margin-right: 20px;
}

.inline-block { display: inline-block; }
.error, .color-red { color: red !important; font-size: 11pt; }
#detail_detail_id { padding: 0px 20px; border-bottom: 1px solid black; margin-bottom: 20px; }

.form-group.hidden { display: none; }
.uppercase {text-transform: uppercase;}
.hidden { display: none; }

.align-left { text-align: left; }
.align-right { text-align: right; }


@font-face {
  font-family: Calibri-Light;
  src: url(fonts/calibril.ttf);
}
@font-face {
  font-family: ArialBlack;
  src: url(fonts/ArialBlack.ttf);
}


body { font-family:Calibri-Light !important;min-width: 1360px;overflow-x: auto; 
background-image: url('/public/assets/images/bg.jpg');
}

h1 { text-transform:uppercase; font-size: 20px; color: black;}
h2 { text-transform:uppercase; font-size: 18px; color: black;}
h3 { text-transform:uppercase; font-size: 16px; color: black;}
h4 { text-transform:uppercase; font-size: 14px; color: black;}
h5 { text-transform:uppercase; font-size: 12px; color: black;}
h6 { text-transform:uppercase; font-size: 10px; color: black;}

/*div { margin: 5px 0 0 5px; padding:5px; }*/

.pull-left { float:left; }

.form-group { margin-bottom:8px; } /*margin-bottom:5px;*/
input[type=checkbox] { height:10px;}
select,
input[type=password],
input[type=date], 
input[type=text],
input[type=datetime-local],
input[type=time] { font-size: 9pt !important; height:30px !important; } /*font-size:10px;height:25px*/

/* Checkbox no label custom*/
.no-label { text-align: center; }
.no-label input[type=checkbox] {height:12px !important; width:12px !important;}

.dismiss-btn {
  position: absolute;
  right: 0;
  top: 0;
  padding: 5px;
  cursor: pointer;
}

.alert-success .dismiss-btn,
.alert-danger .dismiss-btn {
  color: inherit;
}

textarea { font-size:11pt !Important; } /*font-size:10px*/
table { margin-top: 20px; }
table td { border:1px solid #ccc; }
a { text-decoration:none !important;}
div.collapse-menu-heading { color: #f0f0f0 }  
ul, li, span, div, p { font-size: 8pt; color: black; } /*font-size:12px; color: #808080;*/
label { font-size: 9pt; margin-bottom:0; text-transform:uppercase; } /*font-size:12px*/ /*font-weight: bold;*/
th, td { padding: 5px !important; vertical-align: top !important; }
th { font-weight:100; border-bottom: 0 !important; font-size:8pt; text-align: center;} /*font-size:10px*/
thead > tr { background: linear-gradient(#00b4cb , #00f4db); color: black; text-transform:uppercase; height: 40px; }




/* ================= OVER RIDE ============== */

table tbody > tr{ height: 30px; }
table tbody > tr:hover{ background: yellow; }

.table-striped tbody tr:nth-of-type(odd),table tbody > tr:nth-of-type(odd){
  background: white;
}
.table-striped tbody tr:nth-of-type(even),table tbody > tr:nth-of-type(even){
  background-color: #f8f8f8;
}
.table-striped tbody tr:nth-of-type(even):hover,table tbody > tr:nth-of-type(even):hover{
  background-color: #07fff326;
}
.table-striped tbody tr:nth-of-type(odd):hover,table tbody > tr:nth-of-type(odd):hover{
  background-color: #07fff326;
}
table thead tr th{border: 1px solid #cccccc}
table thead tr th a{ font-size: 9pt; }
.btn-primary,.dw-edit-btn{
  padding: 2px !important;
}
.btn-primary:hover{ background: black; border-radius: 50%; }
.dw-edit-btn:hover, .dw-delete-btn:hover, .dw-action-page-btn:hover, .button.red:hover, .dw-insert-btn:hover{
  color: #07fff326 !important;
  border-radius: 50%;
  background: white;
}
div{ font-size: 9pt; }
.btn-primary,.dw-edit-btn,.dw-delete-btn,.dw-action-page-btn,.button.red,.dw-insert-btn, .dw-add2-btn{
  border: 1px solid #cccccc !important;
}

.table td, .table th{
  /*width: 100px;*/
}


 /* ----- PAGINATION ------ */
 ul.pagination li a span:hover{ color: white !important; }










/* ================= OVER RIDE ENDS =========== */















.form-group.inline { margin-right: 5px; }
.inline { display: inline-block; }

.mt-0 { margin-top: 0 !important; }
.mt-5 { margin-top: 5px !important; }
.mt-10 { margin-top: 10px !important; }
.mt-15 { margin-top: 15px !important; }
.mt-20 { margin-top: 20px !important; }
.mt-30 { margin-top: 30px !important; }
.mt-40 { margin-top: 40px !important; }
.mt-60 { margin-top: 60px !important; }

.mb-0 { margin-bottom: 0px !important; }
.mb-5 { margin-bottom: 5px !important; }
.mb-10 { margin-bottom: 10px !important; }
.mb-15 { margin-bottom: 15px !important; }
.mb-30 { margin-bottom: 30px !important; }
.mb-40 { margin-bottom: 40px !important; }
.mb-45 { margin-bottom: 45px !important; }
.mb-60 { margin-bottom: 60px !important; }

.ml-0  {margin-left: 0 !important;}
.ml-5 { margin-left: 5px !important; }
.ml-15 { margin-left: 15px !important; }
.ml-30 { margin-left: 30px !important; }
.ml-40 { margin-left: 40px !important; }

.mr-0  {margin-right: 0 !important;}
.mr-5 { margin-right: 5px !important; }
.mr-15 { margin-right: 15px !important; }
.mr-30 { margin-right: 30px !important; }
.mr-40 { margin-right: 40px !important; }

.m-md { margin: 0 7.5px !important; }

.p-region { padding-top: 50px !important; }

.pb-15 { padding-bottom: 15px !important; }
.pb-30 { padding-bottom: 30px !important; }

.pl-0 { padding-left: 0 !important; }
.pl-5 { padding-left: 5px !important; }
.pl-10 {padding-left: 10px;}
.pl-row { padding-left: 7.5px !important; }
.pl-15 { padding-left: 15px !important; }
.pl-30 { padding-left: 30px !important; }
.pl-40 { padding-left: 40px !important; }

.pr-0 { padding-right: 0 !important; }
.pr-5 { padding-right: 5px !important; }
.pr-row { padding-right: 7.5px !important; }
.pr-15 { padding-right: 15px !important; }
.pr-30 { padding-right: 30px !important; }
.pr-40 { padding-right: 40px !important; }

#codeigniter_profiler { z-index: 99; position:absolute; width:50%; right: 0; }

#main_menu ,
#main_menu #main_menu-menu { height:100%; }

/*.btn.pt-0 { transition: all ease .5s; padding:5px 10px !important; min-width: 80px; text-align: center; font-size: 12px !important; border-radius: 0;  }*/

.dw-action-page-btn,
.dw-edit-btn,
.btn-primary,
.button { margin:2px 0; text-transform:uppercase; border-radius:5px; cursor:pointer; transition: all ease .5s;  color: white; padding: 4px 8px !important; text-align: center; min-width: 24px; font-size:8pt; } /*font-size:10px;padding: 2px 5px*/

.btn-primary,
.button.black { border: 1px solid black; background: black; }
.button.red { /*border: 1px solid red; */}

.black { background:black; }
.red { color: black; background:white;  /*border: 1px solid #00B4CB !important;*/  }

.btn-primary:hover,
.button.black:hover { /*background: #424242;*/ border-color:#424242;  }

.btn-danger:hover,
/*.button.red:hover { color: black; background: red ; }*/

.dw-insert-btn img,
.dw-delete-btn img,
.dw-action-page-btn img,
.dw-pickup-btn img,
.dw-loc-btn img,
.dw-edit-btn img,
.dw-add2-btn img,
.dw-msgr-btn img,
.dw-sign-btn img { width: 15px; }


.dw-edit-btn, .dw-add2-btn { color: black; background: white !important; }
.dw-action-page-btn,
.dw-pickup-btn,
.dw-loc-btn,
.dw-msgr-btn,
.dw-sign-btn { color: black; background: white !important; /*border: 1px solid #00B4CB !important;*/ }
/*.dw-action-page-btn:hover,
.dw-edit-btn:hover,
.dw-pickup-btn:hover,
.dw-loc-btn:hover,
.dw-msgr-btn:hover,
.dw-sign-btn:hover { /*color: black !important;*/ /*background: black !important;  }*/

.dw-insert-btn { color: black; background: white !important; /*border: 1px solid #00B4CB !important; */}
/*.dw-insert-btn:hover { color: black !important; background: black !important;  }*/


.menu-btn-toogle { cursor: pointer; position: fixed; z-index: 1; background: #242526; padding: 5px 12px; font-size: 20px; line-height: 0; color: #00B4CB; left:0; top: 0; border-radius:0 3px 0 0; width: 30px;}

/* logo */

.wf-logo img {}
.wf-logo { text-align: center; }
.wf-form-login { max-width: 400px; margin: auto; height: 350px; position: relative;}
.wf-form-login > .col { position: fixed; top: 50%; transform: translate(-50%,-50%); left: 50%; }

.collapse-menu-link, .collapse-menu-heading { padding: 2px 20px !important; }

.collapse-menu-body,
.collapse-menu-link,
.collapse-menu-heading { background:#242526; }

/*a.collapse-menu-link:after,*/
/*.collapse-menu-heading:after { content: ''; border-bottom: 1px solid #6f6f6f; display: block; width: 100%; position: absolute; right: 0; bottom: 1px; }*/
a.collapse-menu-link,
.collapse-menu-heading { border-bottom: 1px solid #303030; }

a.collapse-menu-link:after,
.collapse-menu-heading:after { content: ''; border-bottom: 1px solid #171717; display: block; position: absolute; width: 100%; left: 0; bottom: 0; }

.collapse-menu.child a.collapse-menu-link,
.collapse-menu.child .collapse-menu-heading ,
.collapse-menu.child a.collapse-menu-link:after,
.collapse-menu.child .collapse-menu-heading:after { border: 0 !important; }
div#main_menu.hidden-menu .messages-wrapper { display: none; }

.collapse-menu-body { padding-left:0 !important; }
.collapse-menu.child .collapse-menu-link { padding-left: 25px;}
.collapse-menu.child .collapse-menu-heading { padding-left: 30px !important;}
.collapse-menu-wrapper > .collapse-menu-body > .collapse-menu.child > .collapse-menu-wrapper > .collapse-menu-heading { background:#313131 !important;}
.collapse-menu-wrapper > .collapse-menu-body > .collapse-menu.child > .collapse-menu-wrapper > .collapse-menu-body > .collapse-menu.child > .collapse-menu-wrapper > .collapse-menu-heading { padding-left:40px !important; background:#3a3a3a !important;}
.collapse-menu-wrapper > .collapse-menu-body > .collapse-menu.child > .collapse-menu-wrapper > .collapse-menu-body > .collapse-menu.child > .collapse-menu-wrapper > .collapse-menu-body > .collapse-menu-link-wrapper,
.collapse-menu-wrapper > .collapse-menu-body > .collapse-menu.child > .collapse-menu-wrapper > .collapse-menu-body > .collapse-menu.child > .collapse-menu-wrapper > .collapse-menu-body > .collapse-menu-link-wrapper > .collapse-menu-link { background: #424242 !important; }
.collapse-menu-wrapper > .collapse-menu-body > .collapse-menu.child > .collapse-menu-wrapper > .collapse-menu-body > .collapse-menu.child > .collapse-menu-wrapper > .collapse-menu-body > .collapse-menu-link-wrapper > .collapse-menu-link:after { border:0; }
.collapse-menu-wrapper > .collapse-menu-body > .collapse-menu.child > .collapse-menu-wrapper > .collapse-menu-body > .collapse-menu.child > .collapse-menu-wrapper > .collapse-menu-body > .collapse-menu-link-wrapper > .collapse-menu-link  { padding-left:50px !important; border:0; }
a.collapse-menu-link { color: #f0f0f0; } /*color: #808080;*/

.collapse-menu-link:hover, .collapse-menu-heading:hover { background:#242526 !important; }
.collapse-menu-link:hover, .collapse-menu-heading:hover { background:#3a3a3a; }
/*.collapse-menu-link:hover  { padding-left:35px !Important; }*/
/*.collapse-menu-heading:hover { padding-left:25px !Important; }*/
/*#main_menu-menu > .collapse-menu-link-wrapper > .collapse-menu-link:hover,*/
/*#main_menu-menu > .collapse-menu > div > .collapse-menu-heading:hover { padding-left: 15px !important;}*/

.field-length-150 { width:150px; }
.field-length-200 { width:200px; }
.field-length-250 { width:250px; }
.field-length-300 { width:300px; }
.field-length-350 { width:350px; }
.field-length-400 { width:400px; }
.field-length-450 { width:450px; }

.datawindow-form { clear:both; }
#se_apr_searcher .form-group {max-width: 200px;display: inline-block;margin-right: 5px;}

.tab-header-col { max-height: 40vh; overflow-y: auto; }

#de_customer_header .tab-header-col {
  max-height: 450px;
}

#de_contact_person .tab-header-col {
  max-height: 450px;
}

#main_menu #main_menu-menu { background: #242526; }
#main_menu { width: 330px }
div#main_menu.hidden-menu { width:0 !important;  }
div#main_menu.show-menu { width: 330px;  }
.menu-btn-toogle.active { left: 315px;  }
.menu-btn-toogle.active i:before { content: "\f0d9"; }
.wf-menu-wrap { position: relative; }

/* APR */
.separator { border-bottom: 1px solid #ccc;}


.deleted,
.deleted input,
.deleted textarea,
.deleted button,
.deleted select,
.deleted a,
.deleted input:hover,
.deleted textarea:hover,
.deleted button:hover,
.deleted select:hover,
.deleted a:hover,
.deleted input:active,
.deleted textarea:active,
.deleted button:active,
.deleted select:active,
.deleted a:active {
  background-color: rgba(0,0,0,.075) !important;
  border-color: rgba(0,0,0,.075) !important;
}

select option:disabled {
  background-color: rgba(0,0,0,.075) !important;
}

.dw-file-preview-wrapper {
  margin: 10px 0px;
}



.submit-btn,
.add-btn {
  display: inline-block;
  margin-right: 10px;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #dddddd !important;
}

input::-moz-placeholder,
textarea::-moz-placeholder { /* Firefox 19+ */
  color: #dddddd !important;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder { /* IE 10+ */
  color: #dddddd !important;
}

input:-moz-placeholder,
textarea:-moz-placeholder { /* Firefox 18- */
  color: #dddddd !important;
}

.dw-add-btn,
.dw-save-add-btn,
.dw-submit-btn,
.dw-save-btn,
.dw-save2-btn,
.dw-approve-btn,
.dw-post-btn,
.dw-post2-btn,
.dw-disapprove-btn,
.dw-cancel-btn,
.dw-return-btn,
.dw-reverse-btn,
.dw-reverse2-btn,
.dw-print-btn,
.dw-redirect-print-btn,
.dw-qr-btn,
.dw-gps-btn,
.dw-msg-btn,
.dw-for-payment-btn,
.dw-for-pkup-btn,
.dw-download-gpdata-btn,
.dw-download-gp-trans-per-day-btn,
.dw-for-bu-btn,
.dw-box-uti-btn,
.dw-add-js-btn
 {
  margin-bottom: 10px;
}

.submit-btn.inline {
  margin-top: 20px;
}

.markup-wrapper {
  white-space: pre-wrap;
}


/* SELECT SEARCH */
.select2-container {display: block;width: 100% !important;}
.selectOptions {position: relative;}
.selectOptions a.option{cursor:pointer;}
.dropdown-content:not(.show) {display: none;background: white;height: auto !important;position: absolute;box-shadow: 0 3px 3px 1px #333;width: 100%;padding: 10px; max-height: 200px;overflow-y: auto;}
.dropdown-content a {display: block;}
.selectBtn {background: white;border: 1px solid #ccc;border-radius: 4px;padding: 2px 5px;}
#searchInput {display: block;width: 100%;padding: 5px;}

.comment-picture, .comment-details {
  display: inline-block;
  vertical-align: top;
}

.comment-picture img {
  border-radius: 50%;
  width: 70px;
  margin: 8px 10px 10px 10px;
}

.comment-details {
  padding: 8px 10px;
}

.side-message {
  position: fixed;
  bottom: -5px;
  width: 15%;
  left: 8px;
}

img.dw-file-preview {
  max-width: 300px;
}

table thead tr th a:hover { font-weight: bold; color: black; text-align: center;}
table thead tr th a { transition: all ease .5s; color: black; text-align: center;}


/* login */
.wf-logo-text .wf-main-text { font-family: ArialBlack; font-size: 30px; color: black; letter-spacing: 1px; font-weight: bold; line-height: initial; margin-top: 10px; }

.wf-logo-subtext.text-center { font-size: 14px; color: black; }
div#dw_user_login { max-width: 180px; margin: auto; margin-top: 20px; }
div#dw_user_login > h2 { color: white; text-align: center; }
div#dw_user_login > .submit-btn { text-align: center; margin-right: 0; width: 100%; margin-top: 10px; }

sup.tm-text { font-family: Calibri-Light; font-size: 10px; top: -15px; font-weight: 100; color: black; }
.dw_user_login-row label { color: white; }
body.page-user-fy_login,
body.page-user-login,
body.user-fy_login { background: #00B4CB ; }


body.page-user-fy_login .window-controls.btn-group ,
body.user-fy_login .window-controls.btn-group ,
.page-user-login .window-controls.btn-group { display: none; }


/* inner */


.main-menu-container { z-index: 1334; }
.main-content-wrapper > h2 { position: fixed; top: 0; width: 100%; left: 280px;  z-index: 1333; border-bottom: 5px solid #242526; padding: 10px; background: #00B4CB; text-align: left; color: white; font-weight: bold; padding-left: 90px; }
.main-content-wrapper-modal > h2 { width: 100%; left: 280px;  border-bottom: 5px solid #242526; padding: 10px; background: #00B4CB; text-align: left; color: white; font-weight: bold; padding-left: 90px; }
.main-content-wrapper.col-12 > h2 { z-index: 1333; position: fixed; top: 0; left: -15px; padding-left: 50px; width: calc(100% + 15px) }

.main-content-wrapper > .container-fluid > .row > .col-6,
.main-content-wrapper > .container-fluid > .row > .col { margin-top: 60px; }
.window-controls.btn-group { z-index: 1335; }

ul.pagination li a span:hover,
ul.pagination li.active a span { background: #00B4CB !important; color: black; border-color: #dee2e6 !important; }

ul.pagination li a span { color: #242526; }

.window-controls.btn-group > a,
.window-controls.btn-group > button { display: block; border-radius: 0px 0px 5px 0; width: 30px; border: 0; margin: 0 !important; padding: 5px; }
.window-controls.btn-group { display: block; position: fixed !important; z-index: 999; left: 315px; top: 30px !important; right: initial !important; }
.wf-menu-wrap.hide-wf-menu .window-controls.btn-group { left: 0; }

/* .wf-logo img { width: 200px; height: auto; } */
.wf-stores-logo > .wf-s-logo img { width: 160px; } .wf-stores-logo { text-align: center; }
.wf-links a { padding: 5px 10px; color: black; } .wf-links { text-align: center; padding: 10px; }
.wf-links a:hover { text-decoration: underline !important; }
/*.wf-logo img:hover {  transform: rotate(720deg);  transition: all ease 1s; }*/
.wf-logo-text { margin-top: 20px; }

.nav-tabs .nav-link { border-color: #dee2e6 #dee2e6 #fff; color: black; font-size: 8pt; }
.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover { background: #00B4CB; color: white; /*text-transform:uppercase;*/ font-size: 8pt; }





.main-container-modal {
  position: fixed;
  background-color: rgba(0,0,0,0.1);
  height: 100vh;
  z-index: 10000;
  width: 100%;
  display: none;
}

.main-container-modal > div {
  margin: auto;
  position: relative;
  width: 700px;
  height: calc(100vh - 500px);
  top: 200px;
  background-color: white;
}

 /* css styling for dashboard */
 .dashboard-container > .col-12 {
  text-align: center;
  opacity: 0.6;
  padding-top: 20em;
}

.dashboard-container > .col-12 > h1 {
  text-transform: none;
  font-family: arial narrow;
  font-weight: bold;
  font-size: 20pt;
}

.dashboard-container > .col-12 > img {
  width: 550px;
}


.select-text {
  position: relative;
  height: 30px;
}

.select-text > select {
  position: absolute;
  top: 0;
  left: 0;
}

.select-text > .select-text-input {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: calc(100% - 30px);
  height: 100%;
  border: 1px solid transparent;
}

.select-text > .select-text-input > input[type="text"] {
  border: none;
  height: 100% !important;
  padding-left: 0.5rem;
  border-radius: .2rem;
  width: 100%;
}

.select-text > .select-text-input > input[type="text"]:focus {
  outline: none;
}

.false-select-focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

@media print { 
  .main-content-wrapper > h2 ,
  .dw-wrapper.dt_soa_grid, .submit-btn,
  .main-menu-container { display: none !important; }
  .dw-print, .submit-btn { display: none !important; }
  .main-content-wrapper.col-9 { max-width : 100% !important; flex: initial !Important; }
  .grid_waybill_printout{margin: 0;padding: 0;}
  table td { border: 0 !important; }

  table thead {
    display: table-header-group;
  }

  table tfoot {
    display: table-footer-group;
  }

  tr.tr-ud-top { border-top: 1px solid; } .tr-ud-bottom { border-bottom: 1px solid; }

  /* .trip-ticket-print-out *, .waybill-print-out *, .transfer-slip-print-out * {
    font-family: arial;
  } */

  /* .trip-ticket-print-out th, .trip-ticket-print-out td, .waybill-print-out *, .transfer-slip-print-out * {
    padding: 0 !important;
  } */

  div.col {
    margin-top: 0 !important;
  }

 
}