body {
  font-family: "Arial" !important;
  overflow-x: hidden !important;
  height: 100% !important;
}

.t-end {
  text-align: end;
  color: black;
  font-weight: bold;
}

.pos-sales-summ-box {
  border:  1px solid gray;
  border-radius: 5px;
}

.pos-sales-summ-bo {
  margin-top: -20px;
  margin-left: 12px;
  margin-right: -30px;
  padding-right: 37px;
}

.page-title {
  font-weight: 300 !important;
  font-family: "Arial"; 
  color: #062942;
  font-size: 30px;
  padding-right: 70px;
}

.page-title-tab {
  font-weight: 300 !important;
  font-family: "Arial";
  color: #062942;
  font-size: 30px;
  padding-right: 200px;
}

.page-title-reserve {
  font-weight: 300 !important;
  font-family: "Arial";
  color: #062942;
  font-size: 30px;
  padding-right: 181px;
}

.btn {
  font-weight: 300 !important;
  font-family: "Arial";
  text-align: center !important;
}

/*FIXED TABLE HEADER*/
.fix-table-head-mob {
    overflow-y: auto;
    height: 60vh;
}

.fix-table-head-mob thead th {
    position: sticky;
    top: 0;
}

.fix-table-head-po-order {
    overflow-y: auto;
    height: 45vh;
}

.fix-table-head-po-order thead th {
    position: sticky;
    top: 0;
}

.fix-table-head-pba {
    overflow-y: auto;
    height: 55vh;
}

.fix-table-head-pba thead th {
    position: sticky;
    top: 0;
}

.fix-table-head-mob-50 {
    overflow-y: auto;
    height: 50vh;
}

.fix-table-head-mob-50 thead th {
    position: sticky;
    top: 0;
    font-size: .8rem;
}

.fix-table-head-mob-40 {
    overflow-y: auto;
    height: 40vh !important;
}

.fix-table-head-mob-40 thead th {
    position: sticky;
    top: 0;
    font-size: .8rem;
}


.pos-table-mob {
    border-collapse: collapse;
    width: 100%;
}

.pos-table-mob th, td {
    padding: 3px !important;
    border-bottom: 1px solid #ccc;
}

.pos-table-mob th {
    background: #274f8d;
}

@media (max-width: 767px) {
  .content-2 {
    margin: 0px -55px !important;
  }

  .btn-header {
    margin-left: 20px;
    margin-bottom: 30px;
  }

  .mr-3, .mx-3 {
    margin-right: 0px !important
  }
  .filter-btn {
    text-align: center;
  }

  .btn-footer a {
    width: 100%;
    margin-bottom: 3px;
  }

  /*P/WATER/SA/POS_RESERVE.HTML*/
  .search-btn-prod {
    text-align: right;
    max-width: 100% !important;
    min-width: 100%;
  }

  .search-btn-prod button {
    width: 100% !important;
    margin-bottom: 5px;
  }
}

.content h4 {
  font-weight: 300 !important;
  margin-bottom: 20px;
  color: #fff;
}

.text-primary-header {
  color: #fff !important;
  font-weight: 400 !important;
}

.input-filter input {
  border-radius: 30px;
}

/*web*/
.content-web {
  margin: 10px -10px -55px;
}

.content-web-body {
  margin: 10px;
}

.page-not-found {
  font-size: 150px;
  margin-top: -60px;
  font-family: "Arial";
  font-weight: 500;
  color: #0d83dd
}


/*PEAK WEB*/
.bg-blue {
  background-color: #006eff !important
}

.table-content thead th {
  color: #fff;
}

.bg-login-image {
  background: url(../img/bg-login.jpg);
  background-position: center;
  background-size: cover;
}

.bg-login-image-cashier {
  background: url(../img/bg-login-cashier.jpg);
  background-position: center;
  background-size: cover;
}

.hr-custom {
  border: .5px solid #d6d6d6 !important;
  margin-right: 20px;
  margin-left: 30px;
  margin-top: 50px
}

.po-rec-hr {
  border: .5px solid #d6d6d6 !important;
  margin-right: 20px !important;
  margin-left: 30px !important;
  margin-top: 90px !important;
}

.po-rec-dets {
  margin-top: 2rem;
}

.po-rec-dets h6 {
  font-weight: normal;
  font-size: 2.3vh;
  margin-bottom: 5px;
}

.search-project {
  margin-top: -20px;
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item, .sidebar .nav-item .collapsing .collapse-inner .collapse-item {
  padding: 0.5rem 1rem;
  margin: 0 0.5rem;
  display: block;
  color: #3a3b45;
  text-decoration: none;
  border-radius: 0.35rem;
  white-space: break-spaces;
}

/*TABLE*/
.table thead th {
  vertical-align: top;
  border-bottom: 2px solid #dddfeb;
  font-size: 14px;
  font-weight: 100;
  padding: 5px;
  white-space: break-spaces;
}

.table tbody td {
  white-space: break-spaces;
  font-size: 14px;
  color: black;
}

.thead-custom thead th {
  font-size: 11px !important;
}

.thead-custom th,
.thead-custom td {
  padding: 5px !important;
  border-bottom: 1px solid #fff0 !important;
  border-top: 1px solid #ffffff00 !important;
}


/*SEARCH BUTTONS*/
.search-btn-client {
  width: 76px;
}

.search-btn-prod button {
  width: 79.5px;
}

.search-btn-bundle button {
  width: 79.5px;
}

.search-btn-poss button {
  width: 259.5px;
}

.search-btn-psbc button {
  width: 166.5px;
}

.search-btn-res button {
  width: 66px;
}

.search-btn-porec button {
  width: 167px;
}

.search-btn-prod-branch button {
    width: 141.7px;
}

.search-btn-sc button {
    width: 141.7px;
}

.search-btn-ts button {
    width: 141.7px;
}

.search-btn-am button {
    width: 121.5px;
}

.search-btn-ps button {
    width: 121.5px;
}

.search-btn-reb button {
    width: 121.5px;
}

.search-btn-level button {
    width: 76.5px;
}

.search-btn-group button {
    width: 109.7px;
}

.search-btn-bfip button {
    width: 166.5px;
}

.search-btn-bflogin button {
    width: 121.5px;
}

.search-btn-mp button {
  width: 49px;
}

.search-btn-po-order button {
  width: 76.5px;
}

.search-btn-pm button {
   width: 111.4px;
}

.search-btn-ch button {
  width: 10rem;
}

.search-btn-gc button {
  width: 7rem;
}

.search-btn-joc button {
  width: 8.5rem;
}

.search-btn-client-balance button {
  width: 11.6rem;
}

.btn-success-cust {
  background-color: green;
  color: white;
}

.btn-success-cust:hover {
  background-color: darkgreen;
  color: white;
}

/*FOOTER*/
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30px;
  line-height: 60px;
  background-color: #f8f9fc;
}

/*SIDEBAR*/
.sidebar-dark .nav-item .nav-link {
    color: rgb(255 255 255);
}

.sidebar-dark .nav-item .nav-link i {
    color: rgb(255 255 255);
}

.sidebar-dark .nav-item .nav-link:active, 
.sidebar-dark .nav-item .nav-link:focus, 
.sidebar-dark .nav-item .nav-link:hover {
    color: #ffffff !important;
    background: #1164d2 !important;
}

.sidebar .nav-item.active .nav-link {
    background: #1164d2 !important;
    font-weight: normal;
}

/*MODAL-PRODUCT*/
.container-custom {
  padding: 0px !important;
  margin-left: 10px;
  margin-right: 0px !important;
  max-width: 98%;
}

.modal-body-prod {
  padding: 10px 0px;
}

.tab-content {
  margin-top: 15px;
  margin-left: 0px;
  margin-right: 0px;
}

.form-group {
  margin-bottom: 10px;
}

/*POS SHIFT*/
.pos-shift-date {
  margin-left: -10px
}

.pos-shift-date-2 {
  margin-left: 0px
}

.pos-shift-input {
  width: 280px !important;
  padding-right: 15px;
  margin-left: 0px;
}

.ps-div {
  margin: 0px !important;
  padding: 0px !important;
}

.total-sales{
  margin-bottom: 25px;
  margin-top: -20px;
  margin-left: 0px;
}

.total-sales h3 {
  color: #8c8c8c;
}

.total-sales span {
  font-weight: bold;
  color: #000;
}

/*SALES*/
.branch-sales {
    width: 100%;
}

.branch-filter {
    padding-right: 0px;
}

.date-filter {
    padding-right: 0px;
}

.date-from {
    padding-right: 0px;
}

.date-to {
    padding-right: 0px;
}

.date-filter label {
    margin-left: 12px;
}

.tf-fdtp-sales {
    width: 105%;
}

.tf-tdtp-sales {
    margin-left: 23px;
    width: 100%;
    padding-left: 0px;
}

.textarea-remarks textarea {
    height: 38px !important;
    resize: none !important;
}

/*March 11*/
.prod-modal {
  height: 98%;
}

.modal-body-prod {
  height: 80%;
}

.modal-header-custom {
  padding: 5px 10px
}

.nav-tabs .nav-item {
    margin-bottom: -3px;
}

.bootstrap-select .dropdown-menu li {
  padding-left: 5px;
  padding-right: 5px
}

/*DASHBOARD*/
.card-header-custom {
  background-color: #ffffff;
  border-bottom: 1px solid #f8f9fc00;
  color: #000;
}

.card-header-custom h1 {
  font-weight: bold;
  font-size: 30px;
  margin-top: 10px;
  margin-bottom: 15px;
  color: #343440;
}

.table-custom th {
  border-top: 1px solid #edf5f8;
  border-bottom: 1px solid #edf5f8;
}

.table-custom td {
  font-size: 15px;
}

.bg-light-blue {
  background-color: #b7e5ec;
}

.bg-light-green {
  background-color: #bce497;
}

.bg-light-orange {
  background-color: #f58d35
}

.bg-light-purple {
  background-color: #a661e4
}

.table-custom thead th {
  vertical-align: middle;
  border-bottom: 2px solid #edf5f8;
  font-size: 15px;
  font-weight: 100;
  color: #000;
}

.table-custom tbody td {
  padding: 5px !important;
}

.card-body-scroll {
  overflow-y: auto;
  max-height: 290px;
  padding: 10px 20px;
  margin-top: -15px;
}

.card-body-height {
  height: 400px;
}

.card-body-height-chart {
  height:280px;
}

.piechart {
  display: block;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

.total-sales-card h1 {
  color: #fff;
  margin-bottom: 0px;
}

/*FILTER DIV*/
.filter-div {
  margin-top: 10px;
  margin-bottom: 10px
}

.card-total-sales {
  background-color: #006eff;
  color: #fff;
}

/*PURCHASE ORDER*/
.footer-po {
  justify-content: flex-start !important;
}

.approved {
  margin-left: -10px
}

.modalclose-btn {
  margin-right: -45px;
}

.save-close {
  text-align: right;
}

/*PURCHASE ORDER LIST*/
.po-list {
  margin-top: 20px;
  margin-bottom: 70px;
}

.po-list h1 {
  font-size: 17px;
  color: #636363;
}

.po-list span {
  font-weight: bold;
  color: #4f5967;;
}

.card-po {
  margin: 50px 40px 70px;
  border-radius: 20px
}

.hr-custom-2 {
  border: .5px solid #cfdbea !important;
  margin-right: 30px !important;
  margin-left: 30px !important;
  margin-top: 0px;
  margin-bottom: -10px;
}
.approve-btn {
  margin-top: 60px;
  margin-bottom: -60px;
  float: right;
  margin-right: 5px;
}

.approve-btn button {
  margin-left: 5px
}

/*PO List*/
.table-polist {
  overflow-y: auto;
  height: 290px;
  /*padding: 10px 20px;*/
  margin-top: 0px;
}

/*SCROLL BAR CUSTOM - PO LIST*/
.table-polist::-webkit-scrollbar {
  width: 12px;               /* width of the entire scrollbar */
}

.table-polist::-webkit-scrollbar-track {
  background: #fff;        /* color of the tracking area */
}

.table-polist::-webkit-scrollbar-thumb {
  background-color: #ebebeb;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: 3px solid #fff;  /* creates padding around scroll thumb */
}

.table-polist::-webkit-scrollbar-thumb:hover {
  background-color: #cacaca  ;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: 3px solid #fff;  /* creates padding around scroll thumb */
}

/*03-16-2021*/
.select-pbn {
  margin-left: -7px
}

.search-btn-pbn-add button {
  width: 193px;
}

.search-btn-pbn-save button {
  width: 193px;
  margin-top: 10px
}

.header-checkbox, .body-checkbox{
  margin-left: 8px !important;
}

/* Styling Checkbox Starts */
.checkbox-label {
  /*display: block;*/
  position: relative;
  margin: auto;
  cursor: pointer;
  font-size: 22px;
  line-height: 24px;
  height: 24px;
  width: 24px;
  clear: both;
}

.checkbox-label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkbox-label .checkbox-custom {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 20px;
  width: 20px;
  background-color: #fff;
  border-radius: 5px;
  transition: all 0.2s ease-out;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  border: 2px solid #bfbfbf;
}

.checkbox-label input:checked ~ .checkbox-custom {
  background-color: #f6c23e;
  border-radius: 5px;
  -webkit-transform: rotate(0deg) scale(1);
  -ms-transform: rotate(0deg) scale(1);
  transform: rotate(0deg) scale(1);
  opacity:1;
  border: 2px solid #bfbfbf;
}


.checkbox-label .checkbox-custom::after {
  position: absolute;
  content: "";
  left: 12px;
  top: 12px;
  height: 0px;
  width: 0px;
  border-radius: 5px;
  border: solid #009BFF;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(0deg) scale(0);
  -ms-transform: rotate(0deg) scale(0);
  transform: rotate(0deg) scale(0);
  opacity:1;
  transition: all 0.2s ease-out;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
}

.checkbox-label input:checked ~ .checkbox-custom::after {
  -webkit-transform: rotate(45deg) scale(1);
  -ms-transform: rotate(45deg) scale(1);
  transform: rotate(45deg) scale(1);
  opacity:1;
  left: 6px;
  top: 1px;
  width: 5px;
  height: 10px;
  border:solid #404142;
  border-width: 0 2px 2px 0;
  background-color: transparent;
  border-radius: 0;
}

.inputdate input[type="date"]::before {
  color: #999999;
  content: attr(placeholder);
}

.inputdate input[type="date"] {
  color: #ffffff;
}

.inputdate input[type="date"]:focus,
.inputdate input[type="date"]:valid {
  color: #666666;
}

.inputdate input[type="date"]:focus::before,
.inputdate input[type="date"]:valid::before {
  content: "" !important;
}

.prodbranch .form-control {
  display: inherit !important;
}

.tbody-sc {
  display: block;
}

.stockcard-t tbody {
  display:block;
  height:400px;
  overflow-y: scroll
}
.stockcard-t thead, .stockcard-t tbody tr {
  display:table;
  width:100%;
  table-layout:fixed;
}
.stockcard-t thead {
  width: calc( 100% - 1em )
}
.stockcard-t table {
  width:100%;
}

.mainprod tbody {
  display:block;
  height:300px;
  overflow:auto;
}

.mainprod-page tbody {
  display:block;
  height:450px;
  overflow:auto;
}

.mainprod-page-pos-res tbody {
  display: block;
  height: 380px;
  overflow: auto;
}

/*SCROLL BAR CUSTOM - PRODUCT*/
.prodbody::-webkit-scrollbar {
  width: 12px;               /* width of the entire scrollbar */
}

.prodbody::-webkit-scrollbar-track {
  background: #f8f9fc;        /* color of the tracking area */
}

.prodbody::-webkit-scrollbar-thumb {
  background-color: #ebebeb;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: 3px solid #f8f9fc;  /* creates padding around scroll thumb */
}

.prodbody::-webkit-scrollbar-thumb:hover {
  background-color: #cacaca  ;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: 3px solid #f8f9fc;  /* creates padding around scroll thumb */
}


/*PRINT PO ORDER*/
@media print {
  body {
    background-color: #fff !important;
  }

  #content-wrapper {
    background-color: #ffffff !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  .navbar-nav {
    display: none !important;
  }

  .card-po {
    margin: 0px !important;
    border-radius: 0px !important;
  }

  .sticky-footer {
    display: none !important;
  }

  .approve-btn {
    display: none !important;
  }

  .table thead th {
    color: #fff !important;
    background-color: #006eff !important;
  }

  #PO_ORDER_LIST_DGV_HEADER_DELETE_CMD {
    display: none !important;
  }

  .delbtn {
    display: none !important;
  }

  .delbtn button {
    display: none !important;
  }

  .hr-custom-2 {
    display: none !important;
  }

  #PO_ORDER_LIST_DGV_HEADER_REC_PORDER_LIST_QUANTITY_RECEIVE {
    display: none !important;
  }

  #PO_ORDER_LIST_DGV_HEADER_REC_PORDER_DESCRIPANCY {
    display: none !important;
  }

  #PO_ORDER_LIST_DGV_ROW_REC_PORDER_LIST_QUANTITY_RECEIVE {
    display: none !important;
  }

  .received-qty {
    display: none !important;
  }

  .discrepancy {
    display: none !important
  }

  #PO_ORDER_LIST_DGV_ROW_REC_PORDER_DESCRIPANCY {
    display: none !important;
  }

  .card {
    border: none !important
  }

  .inputprint {
    border: 1px solid #d1d3e200 !important;
  }

  .textareaprint {
    resize: none !important;
  }

  .col-lg-2 {
    width: 10% !important;
  }

  .col-lg-5 {
    width: 40% !important;
  }

  .po-qr img {
    width: 200px !important;
    margin-left: -40px !important
  }

  .shadow {
    box-shadow:0 0.15rem 1.75rem 0 rgb(58 59 69 / 0%) !important;
  }

  .page_date {
    border: 0px solid !important;
    font-weight: bold !important;
    color: #000 !important;
    background-color: #fff !important;
    border: 0px !important;
  }

  input[type="date"]::-webkit-inner-spin-button,
  input[type="date"]::-webkit-calendar-picker-indicator {
      display: none !important;
      -webkit-appearance: none !important;
  }
  
  .table-responsive {
      overflow: hidden !important;
  }

  .pol-total-po {
    margin-left: 50px !important;
  }

  .empty-cell-pol {
    width: .01rem !important;

  }

  .approve-btn-2 button {
    display: none !important;
  }

  .sp-print {
    display: none !important;
  }

  .bargraph-hsm {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    margin-top: 20px !important;
  }

  .report-title {
    display: block !important;
    text-align: center !important;
    font-size: 35px !important;
    color: black !important;
  }

}

.report-title {
  display: none;
}

.empty-cell-pol {
  width: 6.3rem;
}
/*
.po_list_total label {
    margin-right: 125px;
}*/

.po-qr img {
  width: 110%;
  margin-top: -30px;
  margin-left: -5px;
}


.table-pos-prod table {
  border-collapse: collapse;
  width: 100%;
  overflow-x: scroll;
  display: block;
}

.table-pos-prod thead {
  background-color: #EFEFEF;
}

.table-pos-prod thead,
.table-pos-prod tbody {
  display: block;
}

.table-pos-prod tbody {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 370px;
}

.table-pos-prod td,
.table-pos-prod th {
  min-width: 100px;
  height: 25px;
  overflow: hidden;
  /*text-overflow: ellipsis;*/
  max-width: 100px;
}

.table-pos-prod-02 table {
  border-collapse: collapse;
  width: 100%;
  overflow-x: scroll;
  display: block;
}

.table-pos-prod-02 thead {
  background-color: #EFEFEF;
}

.table-pos-prod-02 thead,
.table-pos-prod-02 tbody {
  display: block;
}

.table-pos-prod-02 tbody {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 300px;
}

.table-pos-prod-02 td,
.table-pos-prod-02 th {
  min-width: 100px;
  height: 25px;
  overflow: hidden;
  /*text-overflow: ellipsis;*/
  max-width: 100px;
}

.table-pos-prod .prod-tb {
  min-width: 200px;
  max-width: 200px;
}

.table-pos-prod .tfs-prod-tb {
  min-width: 230px;
  max-width: 230px;
}

.table-pos-prod .tfs-uom {
  min-width: 50px;
  max-width: 50px;
}

.table-pos-prod .tb-num {
  min-width: 40px;
  max-width: 40px;
}

.prod-name {
  width: 250px;
}

.prod-cat {
  width: 130px;
}

/*
.table-pos-prod .tb-tdisc {
  min-width: 110px;
  max-width: 110px;
}

.table-pos-prod .tb-novat {
  min-width: 170px;
  max-width: 170px;
}

.table-pos-prod .tb-otherv {
  min-width: 170px;
  max-width: 170px;
}*/
/*
.table-pos-prod .tb-tex {
  min-width: 200px;
  max-width: 200px;
}

.table-pos-prod .tb-zero {
  min-width: 160px;
  max-width: 160px;
}*/

/*Trans Flow Summary*/

.transflowsum {
  margin-bottom: 25px;
  margin-top: 20px;
  margin-left: 0px;
  border: 2px solid #d7d6ea;
  border-radius: 10px;
  padding: 10px;
}

.transflowsum h4 {
  color: #8c8c8c;
}

.transflowsum span {
  font-weight: bold;
  color: #000;
}

.table-tfs {
  text-align: right !important;
  font-weight: bold !important;
  color: #000 !important;
}

.po_list_pg input {
  font-weight: bold;
  color: #000;
}

.po_list_pg {
  margin-bottom: -10px !important
}

.tfs-btn {
  text-align: right;
}

.tfs-btn button {
  width: 105px
}

/*5/15/21*/
.scroll-table {
  height: 350px;
  overflow-y: scroll;
  display: block;
}

/* 5/21/2021 - michaela */
.select2-container .select2-selection--single {
  height: 38px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 38px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 38px;
}

/*P/WATER/SA/POS_RESERVE.HTML*/
/*@media (max-width: 580px) {
  .search-btn-prod button {
    width: 415px;
  }
}*/

.fix-table-head {
  overflow-y: auto;
  height: 70vh;
  border-radius: 4px;
}

.fix-table-head thead {
  position: sticky;
  top: -1px !important;
}

.pos-table {
  border-collapse: collapse;
  width: 100%;
}

.fix-table-head-50 {
    overflow-y: auto;
    height: 50vh;
}

.fix-table-head-50 thead th {
    position: sticky;
    top: 0;
}

.fix-table-head-40 {
    overflow-y: auto;
    height: 40vh;
}

.fix-table-head-40 thead th {
    position: sticky;
    top: 0;
}

.fix-table-head-30 {
    overflow-y: auto;
    height: 30vh;
}

.fix-table-head-30 thead th {
    position: sticky;
    top: 0;
}

.fix-table-head-35 {
    overflow-y: auto;
    height: 35vh;
}

.fix-table-head-35 thead th {
    position: sticky;
    top: 0;
}

.pos-table-cb {
    border-collapse: collapse;
    width: 100%;
}

.pos-table-cb th, td {
    padding: 8px 15px;
    border-bottom: 1px solid #ccc;
}

.pos-table-cb th {
    background: #006eff;
}

/*SCROLLING TABLE IN REPORTS*/

.fix-table-head-rep {
    overflow-y: auto;
    height: 63vh;
    border: 2px solid #d0d0d0;
    border-radius: 4px;
}

.fix-table-head-rep thead th {
    position: sticky;
    top: 0;
}

.fix-table-head-poss {
    overflow-y: auto;
    height: 75vh;
    border: 2px solid #d0d0d0;
    border-radius: 4px;
}

.fix-table-head-poss thead th {
    position: sticky;
    top: 0;
}

.pos-table-rep {
    border-collapse: collapse;
    width: 100%;
}

.pos-table-rep th, td {
    padding: 8px 15px;
    border-bottom: 1px solid #ccc;
}

.pos-table-rep th {
    background: #006eff;
    color: #fff;
    font-weight: normal;
    /*border-color: #006eff;*/
}


/*CENTRAK PEAKWEB PAGE*/
.div-btn {
  background-color: #fff;
  border-radius: .7rem;
  height: auto;
  text-align: center;
  padding: 30px;
}

.cpw {
  margin: 5rem;
}

.div-logo {
  display: block;
  width: 80%;
  height: auto;
  padding: 0px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
}

.posc-title {
  margin-top: 50px;
  margin-bottom: -30px;
}

.posc-title span {
  font-size: 3.5rem;
  font-weight: bold;
}

.navbar-brand img {
  width: 60%;
}

/*sdsd*/
.width112 {
  width: 112.5%;
}

/*08172021*/
.disabled-link {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.disabled-link:hover {
  cursor: not-allowed !important;
}

.disabled-link:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #23232394;
  border-radius: .7rem;
}

/*08182021*/
.header-cards {
  margin-top: -20px;
}

.vertical-center {
  margin: 0;
  position: absolute;
  top: 55%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}


/*SEPTEMBER 28, 2021 CSS UPDATE*/
/*MOBILE RESPONSIVE CSS*/
@media (max-width: 576px) {
  .content-web-body {
    margin: 0px !important;
    padding: 10px !important;
  }
  
  .content-web {
    margin: -5px -40px -75px;
  }

  .sidebar .sidebar-brand .sidebar-brand-text {
    display: block !important;
  }

  .sidebar-brand-text img {
    height: 27px !important;
    margin-left: -15px !important;
  }

  .hr-custom {
    border: .5px solid #d6d6d6 !important;
    margin-right: 10px;
    margin-left: 10px;
    margin-top: 60px;
    margin-bottom: 20px;
  }

  .table .widthtable20 {
    width: 40px !important;
  }

  .tsa-mob {
    width: 49% !important;
  }

  .ts-mob {
    font-size: 15px !important;
    width: 51% !important;
    padding-top: 4px !important;
  }

  .tsa-mob h1 {
    font-size: 20px !important;
  }

  .card-body-mob {
    padding: 10px;
  }

  .card-header-custom h1 {
    font-size: 20px !important;
  }

  .search-project {
    margin-top: 0px !important;
  }

  .search-proj-mobile {
    width: 100% !important;
    border-radius: 12px !important;
    margin-top: 5px !important;
    border: 4px solid #bdbdbd !important;
    padding: 20px 0px !important;
  }

  /*PAGE TITLES*/
  .page-title {
    font-weight: 300 !important;
    font-size: 25px !important;
    padding-right: 70px !important;
    white-space: nowrap !important;
    margin-top: 5px;
  }

  .pt-res {
    padding-right: 110px !important;
  }

  .pt-jol {
    padding-right: 100px !important;
  }

  .pt-mp {
    padding-right: 80px !important;
  }

  .pt-sc {
    padding-right: 120px !important;
  }

  .pt-ts {
    padding-right: 80px !important;
  }

  .pt-ia {
    padding-right: 90px !important;
  }

  .pt-po {
    padding-right: 80px !important;
  }

  .pt-cebi {
    font-size: 18px !important;
    padding-right: 70px !important;
    margin-top: 9px !important;
  }

  .pt-reb {
    padding-right: 120px !important;
  }

  .pt-sbtd {
    font-size: 20px !important;
    margin-top: 3px;
  }

  .pt-dpsb {
    font-size: 22px !important;
    margin-top: 9px;
  }

  .pt-hpsb {
    font-size: 21px !important;
    margin-top: 6px;
  }

  .pt-hpstock {
    font-size: 21px !important;
    margin-top: 8px;
  }

  .pt-gc {
    padding-right: 110px !important;
  }

  .pt-cs {
    padding-right: 110px !important;
  }

  .pt-b {
    padding-right: 180px !important;
  }
  
  .pt-sf {
      padding-right: 130px !important;
  }

  .pt-cus {
    padding-right: 120px !important;
  }

  .pt-disc {
    padding-right: 140px !important;
  }

  .pt-bank {
    padding-right: 180px !important;
  }

  .pt-dashboard {
    padding-right: 120px !important;
  }

  .pt-at {
    padding-right: 130px !important;
  }

  .pt-ua {
    padding-right: 90px !important;
  }

  .pt-posd {
    padding-right: 90px !important;
  }

  .pt-bfip {
    padding-right: 110px !important;
  }

  .pt-reservations {
    font-size: 18px !important;
  }

  .pt-posres {
    font-size: 25px !important;
    padding-right: 120px !important;
  }
  /*END PAGE TITLES*/

  /*MARGIN/PADDING*/
  .marb5 {
    margin-bottom: 5px !important;
  }

  .marl-10 {
    margin-left: -10px !important;
  }

  .marl10 {
    margin-left: 10px !important;
  }

  .marl-6 {
    margin-left: -6px !important;
  }

  .marl0 {
    margin-left: 0px !important;
  }

  .mart10 {
    margin-top: 10px !important;
  }

  .marb20 {
    margin-bottom: 20px !important;
  }

  .marb15 {
    margin-bottom: 15px !important;
  }

  .marb10 {
    margin-bottom: 10px !important;
  }

  .marb3 {
    margin-bottom: 3px !important;
  }

  .mart-25 {
    margin-top: -25px !important;
  }

  .mart-15 {
    margin-top: -15px !important;
  }

  .mart-8 {
    margin-top: -8px !important;
  }

  .marb-20 {
    margin-bottom: -20px !important;
  }

  .marb-5 {
    margin-bottom: -5px !important;
  }

  .marb-10 {
    margin-bottom: -10px !important;
  }

  .marb-8 {
    margin-bottom: -8px !important;
  }

  .pad0 {
    padding: 0px !important;
  }

  .padr5 {
    padding-right: 5px;
  }

  .padl0 {
    padding-left: 0px;
  }

  .pad05 {
    padding: 0px 5px !important;
  }

  .pad10-0 {
    padding: 10px 0px !important;
  }

  .padr0 {
    padding-right: 0px !important;
  }

  /*END MARGIN/PADDING*/

  /*SEARCH BUTTONS*/
  .search-btn-res button {
    width: 166.7px;
    margin-bottom: 5px;
  }
  
  .search-btn-prod-branch button {
    width: 166.7px;
    margin-bottom: 5px;
  }

  .search-btn-sc button {
    width: 166.7px;
    margin-bottom: 5px;
  }

  .search-btn-ts button {
    width: 166.7px;
    margin-bottom: 5px;
  }

  .search-btn-po-order button {
    width: 166.7px !important;
  }

  .search-btn-porec button {
    width: 166.5px !important;
  }

  .search-btn-am button {
    width: 166.5px !important;
  }

  .search-btn-ps button {
    width: 169px !important; 
  }

  .search-btn-reb button {
    width: 166.5px !important;
  }

  .search-btn-cus-inv button {
    width: 109.5px !important;
  }

  .btn-go-hs {
    width: 99px !important;
  }

  .search-btn-gc button {
    width: 10.4rem;
  }

  .search-btn-ch button {
    width: 10.4rem;
  }

  .search-btn-client {
    width: 3.9rem;
  }

  .search-btn-pm button {    
    width: 109.4px;
  }

  .search-btn-sas button {
    width: 109.4px; 
  }

  .search-btn-target button {
    width: 109.4px;
  }

  .search-btn-level button {
    width: 166.5px !important;
  }

  .search-btn-bflogin button {
    width: 166.5px !important;
  }

  .search-btn-pbn-add button {
    width: 103%;
    margin-left: -12px;
  }

  /*END SEARCH BUTTONS*/

  .table-responsive {
    margin-top: 10px !important;
  }

  .table thead th {
    width: 70px !important;
  }

  .table tbody td {
    width: 70px !important;
  }

  .width106 {
    width: 106% !important;
  }

  .sidebar .nav-item .collapse .collapse-inner, .sidebar .nav-item .collapsing .collapse-inner {    
    min-width: 15rem !important;
  }

  .sidebar {
    width: 6.5rem !important;
    min-height: 175vh !important;
  }

  .row-mob-2 {
    padding: 0px !important;
    margin-left: -4px !important;
    margin-top: -11px !important;
  }

  .st label {
    margin-bottom: -5px !important;
  }

  .st-branch {
    padding-right: 8px !important;
  }

  .st-user {
    padding-right: 0px;
  }

  .tf-fdtp-sales {
    width: 105%;
  }

  .tf-tdtp-sales-mob {
    margin-left: 0px !important;
    width: 105% !important;
    padding-left: 0px !important;
  }

  .total-sales {
    margin-bottom: 25px !important;
    border-bottom: 1px solid !important;
    padding-bottom: 0px !important;
  }

  .total-sales h3 {
    font-size: 20px !important;
  }

  .psl-container {
    padding: 0px 10px;
    margin-top: -10px;
    margin-bottom: 15px;
  }

  .card-body-ts {
    padding: 0px 10px;
  }

  .h70 {
    height: 70px;
  }

  .ts-table {
    padding: 0px 10px 0px 0px !important;
  }

  .fs20 {
    font-size: 20px;
  }

  .psc-card-mob {
    height: 8vh !important;
    margin-bottom: 10px !important;
  }

  .load-page-mob {
    width: 235px !important;
  }

  .cf-desktop {
    margin-right: 0rem !important;
    margin-left: 0rem !important;
    padding: 10px 0px !important;
  }

  .pagination-mob {
    width: 220px !important;
    height: 45px;
  }

  .pagination-cont {
    padding: 0px !important;
    margin: 5px !important;
  }

  .modal-foot-mob {
    padding: 10px 0px !important;
    margin: 15px 0px -15px 5px !important;
  }

  #JSOC_DIALOG_SELECT_MODAL_RECORD_CLIENT_DIV {
    background-color: #00000080 !important;
  }

  .nav-mob {
    flex-wrap: nowrap !important;
  }
  
  .prod-modal {
    height: 100% !important;
  }
  
  .mod-foot-mob {
    margin-top: 45px !important;
    margin-bottom: 20px !important;
  }

  .card-po {
    margin: 5px !important;
    padding: 0px 20px !important;
  }

  .po-qr img {
    width: 60% !important;
    margin: 0px 60px 25px 60px !important;
  }

  .approve-btn {
    margin-left: -15px !important;
    margin-right: -25px !important;
    margin-top: -5px !important;
    margin-bottom: 0px !important;
    float: right !important;
  }

  .approve-btn button {
    width: 155px !important;
    margin-bottom: 5px;
  }

  .approve-btn-2 button {
    width: 107% !important;
    margin-bottom: 5px !important;
  }

  .tr-mob {
    margin-left: -20px !important;
    width: 110% !important;
  }

  .btn-danger-cust {
    margin-left: 2px !important;
  }

  .pol-remarks {
    margin-top: 30px !important;
  }

  .pagination-sec {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .modal-header {
    border-bottom: 1px solid #9f9f9f !important;
  }

  .modal-title-level {
    font-size: 20px !important;
    color: #000 !important;
    margin-bottom: -20px !important;
  }
  
  /*.tab-content {*/
  /*  overflow-y: scroll !important;*/
  /*  height: 500px !important;*/
  /*  overflow-x: hidden !important;*/
  /*}*/
}

.sidebar.toggled .sidebar-brand .sidebar-brand-text {
  display: block;
}

.sidebar-brand-text img {
  height: 27px !important;
}

.sidebar .nav-item .collapse .collapse-inner, .sidebar .nav-item .collapsing .collapse-inner {
  padding: .5rem 0;
  min-width: 15rem;
  font-size: 0.85rem;
  margin: 0 0 1rem 0;
}

.sidebar {
    min-height: 215vh;
}

.padb20 {
  padding-bottom: 20px;
}

/*END MOBILE RESPONSIVE CSS*/

/*NEW - OCTOBER 08, 2021*/
.cf-desktop {
  padding: 0px 10px;
}

.widthtable20 {
  width: 20px;
}

.widthtable60 {
  width: 60px;
}

.marl0 {
  margin-left: 0px;
}

.approve-btn-2 {
  width: 100%;
  justify-content: end;
}

.approve-btn-2 button {
  width: 125px;
  margin-bottom: 5px;
  margin-right: 5px;
}

/*12 7 2021*/
.tfoot-po-order-list {
  border-top: .07rem solid #d3d3d3;
  border-bottom: .07rem solid #d3d3d3;
}

.pol-remarks {
  margin: 100px 40px 40px;
}

.bargraph-hsm {
  margin-left: 180px;
  margin-right: auto;
  display: block;
  width: 90%;
}

/*.bargraph-hsm canvas {
  height: 600px;
}*/

.cust_name_cb h6 {
  color: black;
  margin-top: 9px;
  font-weight: bold;
}

.modal-header-cb {
    margin-top: 10px;
    font-size: 30px;
    color: black;
    font-weight: bold;
}

.modal-title-cb {
  margin-top: 18px;
}

/*LANDING PAGE - FEB. 24*/
.lp-custom label {
  text-align: center;
  font-weight: bold;
  color: #003e90;
}

.lp-custom {
  height: 25rem;
  border: none;
}

.lp-custom a:hover {
  text-decoration: none;
}

.lp-custom button {
  font-size: 20px;
  /*border-radius: 25px;*/
}

.lp-custom i {
  font-size: 3rem;
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: 30%;
  text-align: center;
}

/*.lp-page-header {
  margin-left: auto;
  margin-right: auto;
}*/

.lp-page-header h3 {
  font-weight: bold;
  text-align: left;
  color: #000;
  margin-left: 10px;
  margin-top: auto;
  margin-bottom: auto;
}

.lp-page-logo img {
  height: 4rem;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.lp-inv button {
  color: #2e2d2d !important;
}

.card-name {
  margin: auto;
  width: 60%;
  padding: 10px;
}

.card-name h5 {
  margin-bottom: 0px;
}

.card-icon {
  padding: 20px 15px;
}

.vertical-border {
  border-left: 1px solid #0000003b;
  height: 5rem;
  margin-top: auto;
  margin-bottom: auto;
}

.bg-warning-custom {
  background-color: #ffb400;
  color: #000;
  border-radius: 15px;
}

.bg-warning-custom:hover {
  background-color: #c28b08;
  color: #000;
}

.bg-primary-custom {
  background-color: #006eff;
  color: #fff;
  border-radius: 15px;
}

.bg-primary-custom:hover {
  background-color: #0060de;
  color: #fff;
}

.bg-success-custom {
  background-color: #1d9c1c;
  color: #fff;
  border-radius: 15px;
}

.bg-success-custom:hover {
  background-color: #198018;
  color: #fff;
}

.hr-custom-ql {
  margin-top: 0px;
}

.lp-page-header img {
  width: 7rem;
  height: auto;
}

.content-web-2 {
  margin: 10px 6px -55px;
}

.footer-lp {
  margin-left: auto;
  margin-right: auto;
  display: block;
  padding-top: 20px;
}

/*
.media-body {
  border-left: 1px solid red;
}*/

.btn-custom-po {
  margin-top: 0px;
  margin-bottom: -70px;
  margin-left: 42px;
  width: 100px;
  border-radius: 20px;
  background: #fff;
  color: #636363;
  border: 2px solid #acacac;
}

/*knowledge base*/
.kb-user-guide h3 {
  color: #000000;
  font-weight: bold;
  margin-bottom: 2rem;
}

.kb-user-guide h5 {
  color: #002060;
  font-weight: bold;
  margin-bottom: 2rem;
}

.kb-user-guide h6 {
  color: #ed7d31;
  font-weight: bold;
  margin-bottom: .5rem;
  font-size: 20px;
}

.kb-user-guide p {
  color: #000000;
  margin-bottom: 2rem;
}

.kb-shorcuts h4 {
  color: black;
}

.nav-link-kb {
  padding: 7px 0px !important; 
}

.kb-sub-text p {
  margin-bottom: 15px;
}

.h-30 {
  height: 30px;
}

.h-20 {
  height: 20px;
}

.text-secondary-custom {
  color:  #4c4c4c;
}

.kb-img {
  padding: 5px;
  border-radius: 3px;
  border: 1px solid #c0c0c0 !important;
  margin: -20px 0px 20px 0px;
}

.w-60 {
  width: 60%;
}

.w-70 {
  width: 70%;
}

.w-80 {
  width: 80%;
}

.ml-6, .mx-6 {
  margin-left: 2.5rem !important;
}

.cp0-mt-1 {
  margin-top: -10px;
}

.cp0-mt-2 {
  margin-top: -20px;
}

.cp0-mt-3 {
  margin-top: -30px;
}

.cp0-mt-4 {
  margin-top: -40px;
}

.cp0-mt-5 {
  margin-top: -50px;
}

.sidebar-kb .nav-item-kb .nav-link-kb i {
  font-size: 0.85rem;
  margin-right: -4.85rem;
  justify-content: end;
  float: right;
}

.sidebar-kb .nav-item-kb .nav-link-kb {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem;
  width: 14rem;
  color: #006eff;
}

.sidebar-kb ul li {
  border-bottom: 1px dashed #e7e7e7;;
  width: 50vh;
}

.submenu-kb li {
  border-bottom: 0px dashed !important;
  width: 40vh !important;
  list-style-type: square;
}


/*NEW - APRIL 21, 2022*/
.no-wrap {
  white-space: nowrap !important;
}

.selmodal-sp {
  display: none;
  width: 85%;
  padding: 20px;
  border-style: groove;
  border-color: #dfdfdf;
  border-radius: 15px;
  max-height: 95%;
}

.sm-prev-btn {
  float: left;
  height: 45px;
  margin-right: 5px;
}

.sm-next-btn {
  float: right;
  height: 45px;
  margin-left: 5px;
}

.sm-select {
  float: left;
  width: 120px;
  height: 45px;
}

.col-form-label {
  color: black;
  font-size: 15px;
}