@media (max-width: 767px) {
    .main-header .navbar-custom-menu {
        float: none !important;
        display: block !important;
    }
    .main-header .navbar-custom-menu .dropdown-menu {
        left: auto !important;
    }
    .skin-blue-light .main-header .navbar .dropdown-menu li a {
        color: #777;
    }
    .main-header .navbar {
      height: auto;
    }
}
.bg-danger {
    background-color: #f2dede !important;
}
.btn-big {
    padding: 10px 30px;
    font-size: 18px;
    line-height: 1.3333333;
}

.of-visible {
    overflow: visible !important;
}

#online_indicator {
  font-size: 8px;
  vertical-align: middle;
}

.dataTables_wrapper .dataTables_paginate .previous .page-link, .dataTables_wrapper .dataTables_paginate .next .page-link {
  /* padding-top: 6% !important; */
  justify-content: center;
  display: flex;
  align-items: center;
}

.pt-0 {
  padding-top: 0px;
}
.f-right {
  float: right;
}
.mb-10 {
  margin-bottom: 10px;
}
.discount-badge {
  position: absolute;
  top: 6px;
  right: 10px;
  font-size: 18px;
  padding: 7px;
}

.discount-badge-small {
  position: absolute;
  top: -2px;
  left: 10px;
  font-size: 12px;
  padding: 6px;
}
.product-info-table td, .product-info-table th {
  font-size: 12px;
}
.catalogue {
  max-height: 127px;
  margin: auto;
  margin-bottom: 18px;
}
.catalogue-title {
  display: inline-block;
  font-size: 18px;
  margin: 0;
  line-height: 1;
  margin-bottom: 10px;
}
.bg-light-gray {
  background-color: #f8f8f8 !important;
}
.p-5-5 {
  padding: 5px 5px !important;
}
.m-4 {
  margin: 4px;
}
.skin-black .main-header, .skin-black-light .main-header {
  color: #525f7f !important;
}
.skin-black .main-header .navbar .nav .open>a {
  color: #999 !important;
}
.skin-black .main-header .navbar .nav>li>a:hover{
  color: #999 !important;
}
.skin-black .main-header .navbar > .sidebar-toggle:hover {
  color: #999 !important;
}
.mt-0{
  margin-top: 0 !important;
}
.table-pdf thead tr{
  background-color: #357ca5 !important;
  color: #fff;
}
.table-pdf thead tr th {
  color: #fff !important;
}
.blue-heading {
  background-color: #357ca5;
  color: #fff;
}

.table-pdf .odd {
    background-color: #DCE6F1;
}
.p-4{
  padding: 4px;
}
.p-10{
  padding: 10px !important;
}
.jquery-top-scrollbar{
    height: 6px !important;
}
.jquery-top-scrollbar div {
    height: 6px !important;
}
.scroll-top-bottom {
  width: 100%;
  overflow: scroll;
}
.scroll-top-bottom::-webkit-scrollbar {
    height: 6px;
}

.scrolltop {
  display:none;
  width:100%;
  margin:0 auto;
  position:fixed;
  bottom:20px;
  right:10px;
}
.scroll {
  position:absolute;
  right:20px;
  bottom:20px;
  background:#b2b2b2;
  background:rgba(178,178,178,0.7);
  padding:7px;
  text-align: center;
  margin: 0 0 0 0;
  cursor:pointer;
  transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  border-radius: 6px;
}
.scroll:hover {
  background:rgba(178,178,178,1.0);
  transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
}
.scroll:hover .fas {
  padding-top:-10px;
}
.scroll .fas {
  font-size:25px;
  margin-top:-5px;
  margin-left:1px;
  transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
}

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

.table-pdf {
  border-collapse: collapse;
  width: 100%;
  border-spacing: 8px 10px;
}
.td-border td, .td-border th{
  border-bottom: 1px solid lightgrey;
  padding: 8px 5px;
}

.ws-nowrap {
  white-space:nowrap;
}

.btn-app>.fas, .btn-app>.fab{
    font-size: 20px;
    display: block;
}
.dropdown-menu>li>a>.fas{
    margin-right: 6px;
}
.mt-5 {
  margin-top: 5px !important;
}
.pos-form-actions{
  height: auto;
  padding-top: 12px;
  padding-bottom: 20px;
  position: fixed;
  bottom: 0px;
  background-color: #D1D5DC;
  width: 100%;
  z-index: 1000;
}
.mb-12 {
  margin-bottom: 12px !important;
}
.pb-0{
  padding-bottom: 0px !important;
}
.pr-12{
  padding-right: 12px !important;
}
.main-header .sidebar-toggle:before {
    content: "" !important;
}
.ui-autocomplete {
    max-height: 300px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
}
.margin-bottom-20 {
  margin-bottom: 20px !important;
}
.text-white {
  color: #fff;
}
.wizard > .steps > ul > li {
  width: 33.33% !important;
}
.wizard > .content {
  background: #445867 !important;
}
legend {
  color: #fff;
  margin-bottom: 6px;
  border-bottom: none;
}
.left-col {
  background: linear-gradient(0deg,rgba(0, 0, 0, 0.76),rgba(51, 51, 51, 0.32)),url(../img/home-bg.jpg);
  text-align: center;
  background-size: cover;
  background-position: center;
}
.left-col-content {
  color: #1A7BF9;
  width: 100%;
}
.login-header {
  font-size: 27px;
  font-weight: 600;
}
.login-header a {
  color: #fff;
}
.form-header {
  font-size: 18px;
  margin: 16px 0;
}
.btn-login {
  padding: 6px 52px !important;
}
.right-col {
  background-color: #243949;
  height: 100%;
  min-height: 100vh;
}

.right-col label {
  color: #fff;
}

.right-col a, .text-white a {
  color: #fff;
  font-weight: 600;
  font-size: 15px
}
.right-col a:hover, .text-white a:hover {
  color: #ccc;
}
.right-col-content {
  padding: 10% 16%;
  padding-bottom: 3%;
}
.right-col-content-register {
  padding: 2% 8%;
}

.input_inline {
  width: 100%;
  display: inline-flex;
}
.input_inline input, .input_inline span {
  width: 50%;
}
.bg-manufacturing {
  background-color: #ff851b;
}
.img-thumbnail {
  position: relative;
  width: 70px;
  height: 70px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 2px;
  transition: border .2s ease-in-out;
  padding: 4px;
  margin: 3px;
  text-align: center;
}
.img-thumbnail>.badge{
  position: absolute;
  top: -7px;
  right: -7px;
  width: 20px;
  height: 20px;
  padding: 0;
  font-size: 9px;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  opacity: .9;
  cursor: pointer;
  transition: opacity .15s ease-in-out, transform .15s ease-in-out;
}
.img-thumbnail>.badge:hover{
  opacity: 1;
  transform: scale(1.15);
}
/*
 * The icon needs an explicit size: the global `.fa-times` rule below sets 30px
 * on the <i> itself, which the badge's inherited font-size cannot override.
 */
.img-thumbnail>.badge>.fa-times{
  font-size: 10px;
  line-height: inherit;
  vertical-align: top;
}
/* Keep non-square uploads from being stretched into the fixed-size tile */
.img-thumbnail img{
  object-fit: cover;
  border-radius: 2px;
}
/*
 * Uploaded documents that have no image preview (pdf, doc, ...) are shown as a
 * file icon + extension inside the same tile as image thumbnails.
 */
.uploaded-media{
  margin-bottom: 10px;
}
.img-thumbnail .media-file-icon{
  display: block;
  margin-top: 10px;
  font-size: 26px;
  color: #8a8a8a;
}
.img-thumbnail .media-file-ext{
  display: block;
  margin-top: 2px;
  font-size: 10px;
  color: #8a8a8a;
}
.navbar-nav>.notifications-menu>.dropdown-menu>li .menu {
  max-height: 350px;
}
.bg-aqua-lite {
  background-color: #7FFFD4;
}
.navbar-nav>.notifications-menu>.dropdown-menu>li .menu>li>a {
  white-space: normal;
}
.spacer {
  margin-top: 20px;
}
#product_list_body {
    max-height: 485px;
    overflow-y: scroll;
    overflow-x: hidden;
}
.div-overlay {
    cursor: not-allowed;
    background: #e9e9e9;
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.5;
}

.d-inline-table {
  display: inline-table;
}

.label-round{
  font-size: 8px;
  border-radius: 44%;
}
.table>tbody+tbody{
  border-top: 0;
}
.table-pl-12 td, .table-pl-12 th{
  padding-left: 12px !important;
}
table tbody td.pl-20-td{
  padding-left: 20px !important;
}
table.table-border-center > tbody > tr > td:first-child,
table.table-border-center > thead > tr > th:first-child,
table.table-border-center > tfoot > tr > td:first-child
{
  border-right: 1px solid darkgray;
}
table.table-border-center-col > tbody > tr > td:nth-child(2),
table.table-border-center-col > thead > tr > th:nth-child(2),
table.table-border-center-col > tfoot > tr > td:nth-child(2)
{
  border-right: 1px solid darkgray;
  border-left: 1px solid darkgray;
}
.bg-transparent{
  background-color: transparent !important;
}
.mb-0{
  margin-bottom: 0;
}

.nav-tabs>li>a{
  font-size: 18px;
  font-weight: 600;
}
.table-transparent, .table-transparent th {
    background-color: transparent !important;
    color: #000 !important;
}
.td-full-width {
  white-space:nowrap;
}
.font-17{
    font-size: 17px !important;
}
table.dataTable tbody>tr.selected{
    background-color: #B0BED9;
}
tr.footer-total > td {
    vertical-align: middle !important;
}
.error{
	color: red !important;
}
/*  pos tab */
div.pos-tab-container{
  z-index: 10;
  background-color: #ffffff;
  padding: 0 !important;
  border-radius: 4px;
  -moz-border-radius: 4px;
  border:1px solid #ddd;
    margin-bottom: 28px;
  -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
  box-shadow: 0 6px 12px rgba(0,0,0,.175);
  -moz-box-shadow: 0 6px 12px rgba(0,0,0,.175);
  background-clip: padding-box;
}
div.pos-tab-menu{
  padding-right: 0;
  padding-left: 0;
  padding-bottom: 0;
}
div.pos-tab-menu div.list-group{
  margin-bottom: 0;
}
div.pos-tab-menu div.list-group>a{
  margin-bottom: 0;
}
div.pos-tab-menu div.list-group>a .glyphicon,
div.pos-tab-menu div.list-group>a .fa {
  color: #5A55A3;
}
div.pos-tab-menu div.list-group>a:first-child{
  border-top-right-radius: 0;
  -moz-border-top-right-radius: 0;
}
div.pos-tab-menu div.list-group>a:last-child{
  border-bottom-right-radius: 0;
  -moz-border-bottom-right-radius: 0;
}
div.pos-tab-menu div.list-group>a.active,
div.pos-tab-menu div.list-group>a.active .glyphicon,
div.pos-tab-menu div.list-group>a.active .fa{
  background-color: #D9BB54;
  color: #ffffff;
    border-color: #D9BB54;
}
div.pos-tab-menu div.list-group>a.active:after{
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  margin-top: -13px;
  border-left: 0;
  border-bottom: 13px solid transparent;
  border-top: 13px solid transparent;
  border-left: 10px solid #D9BB54;
}

div.pos-tab-content{
  background-color: #ffffff;
  /* border: 1px solid #eeeeee; */
  padding-left: 20px;
  padding-top: 20px;
}

div.pos-tab div.pos-tab-content:not(.active){
  display: none;
}

/* --- pos tab: phones / small tablets -------------------------------------
 * The tab shell (settings screens) is `.col-2` menu + `.col-10` body. Those
 * are Bootstrap 4 classes with no breakpoint prefix, so they kept their
 * 16.6% / 83.3% max-width all the way down to a 412px phone: the menu became
 * a ~60px strip in which every tab label broke to one word per line, and the
 * form sat in the remaining sliver. Below the md breakpoint the two stack to
 * full width and the vertical menu becomes a horizontally scrollable tab
 * strip, which is what fits 17 tabs on a phone.
 */
@media (max-width: 767px) {
  div.pos-tab-container > div.pos-tab-menu,
  div.pos-tab-container > div.pos-tab {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    float: none;
  }

  div.pos-tab-menu {
    border-bottom: 1px solid #ddd;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* Lay the list-group out as one non-wrapping row that is as wide as its
     items, so the parent scrolls horizontally instead of squashing them. */
  div.pos-tab-menu div.list-group {
    display: flex;
    /* Bootstrap 4's own .list-group is a column flex box, so the direction has
       to be reset explicitly or the items keep stacking. */
    flex-direction: row;
    flex-wrap: nowrap;
    width: -moz-max-content;
    width: max-content;
    min-width: 100%;
  }

  div.pos-tab-menu div.list-group > a {
    flex: 0 0 auto;
    white-space: nowrap;
    border-radius: 0;
    /* BS3 list items overlap vertically via margin-bottom:-1px; in a row the
       equivalent is collapsing the horizontal seam instead. */
    margin-bottom: 0;
    margin-right: -1px;
    padding: 10px 14px;
  }

  /* The caret is a pointer from the vertical menu into the panel on its
     right; there is no panel to the right once the menu is a top strip. */
  div.pos-tab-menu div.list-group > a.active:after {
    display: none;
  }

  div.pos-tab-content {
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 15px;
  }

  /* Settings fields are a mix of `.col-sm-4` (already stacks here) and plain
     `.col-3`/`.col-4`, which have no breakpoint and would otherwise hold a
     3- or 4-across grid on a phone. Stack every field for consistency. */
  div.pos-tab-content .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    float: none;
  }

  /* The settings page header holds the title and the (100%-wide on mobile)
     settings search in one flex row; let the search drop to its own line
     instead of being crushed against the breadcrumb. */
  .settings-page-header {
    flex-wrap: wrap;
  }

  .settings-page-header .settings-search {
    margin-left: 0;
    margin-top: 8px;
  }

  .sub-header-container .navbar-nav,
  .settings-page-header .navbar-nav {
    margin-left: 0;
    margin-right: 0;
  }

  /* Full-width primary action reads better than a floated button that ends
     up alone on a line. */
  .settings-submit-wrapper .btn {
    float: none !important;
    display: block;
    width: 100%;
    margin: 0 !important;
  }
}

/* --- Page breadcrumb bar on phones ------------------------------------------
   Two theme behaviours combined to mangle the `.sub-header-container` breadcrumb
   below 576px, on every page that has one (215 blade files, all using this same
   wrapper):

   1. all.css hides `.breadcrumb-item:not(.active)` and the `/` separator at this
      width, collapsing the trail to the current page alone — so "Barcodes /
      Manage your barcode settings" lost its parent, and pages whose only item
      is *not* marked `.active` lost their title entirely.
   2. The sub-header's duplicate hamburger — padded `0 13px 0 16px` by all.css at
      this width, and hidden everywhere by app.css (see
      `.sub-header-container .sidebarCollapse` below) — was what kept Bootstrap
      3's `.navbar-nav { margin: 7.5px -15px }` (vendor.css) off the text. With
      the button gone that negative margin eats the header's own 18px padding
      and the first character is clipped at the screen edge.

   So: show the whole trail with its separators, cancel the negative margin so
   the trail starts inside the header's padding, and let it wrap instead of
   overflowing — a three-level trail takes two lines on a phone rather than
   running off-screen. Applied to `.sub-header-container` itself, so this holds
   for every page's breadcrumb without a per-page hook class. The selectors
   outrank the all.css rules on specificity, and app.css loads after it. */
@media (max-width: 575px) {
  .sub-header-container .breadcrumb-one .breadcrumb-item,
  .sub-header-container .breadcrumb-one .breadcrumb-item:not(.active) {
    display: inline-block;
  }

  .sub-header-container
    .breadcrumb-one
    .breadcrumb-item
    + .breadcrumb-item::before {
    display: block;
  }

  .sub-header-container .navbar-nav {
    margin-left: 0;
    margin-right: 0;
  }

  /* all.css bumps the active item's span to 15px here — it was the only item on
     screen. Match the parent links to it so a restored trail reads as one line
     of text rather than two sizes. */
  .sub-header-container .breadcrumb-one .breadcrumb-item a {
    font-size: 15px;
  }

  /* The trail is a flex row; without a wrap it would push past the viewport
     once every item is shown again. */
  .sub-header-container .breadcrumb-one .breadcrumb {
    flex-wrap: wrap;
  }
}

.add-product-price-table th{
	background-color: #5cb85c;
    color: white;
}
.blue-header th {
	background-color: #D9BB54;
    color: white;
}
.table-th-green th{
	background-color: #5cb85c;
    color: white;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}
.active-cell {
    border: 2px dotted #D9BB54 !important;
}
.cursor-pointer{
    cursor: pointer !important;
}
/* The sale line pane grows with the rows it holds. It carries no min-height:
   a viewport-relative floor is what produced the blank band under the table
   whenever the browser was zoomed out. Only the POS screen clamps the pane,
   via .pos_product_div_fixed below. */
.pos_product_div{
    min-height: 0;
    margin-bottom: 15px;
}

/* POS screen only: the line list scrolls so the totals and payment actions stay
   reachable next to the product grid. max-height without min-height means the
   pane still shrinks to its content when there are only a few rows. */
.pos_product_div_fixed{
    max-height: 57vh;
    overflow-y: auto;
}
.bg-lightgray{
    background-color: #F0EDED !important;
}
.balance_due_box >li{
    padding: 11px 5px 0px 5px;
}
.option-div {
    padding: 15px;
    background-color: #d2d6de;
    color: #333;
    border:1px solid #d2d6de;
    cursor: pointer;
}
.option-div input[type="radio"]{
    display: none;
}
.option-div-group .icon {
    color: #d33724;
    display: none;
}
.option-div-group .option-div:hover{
    border:1px solid gray;
}
.option-div-group .active .icon{
    display: block;
}
.margin-left-10 {
    margin-left: 10px;
}
.margin-bottom-12{
    margin-bottom: 12px;
}
.bg-info{
    background-color: #00c0ef !important;
}
.bg-info > a{
    color: #FFFFFF !important;
}
.bg-info>a:hover{
    background-color: #D9BB54 !important;
}
ul.dt-button-collection{
    background-color: #00c0ef;
}
td.details-control {
    background: url('/img/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.details td.details-control {
    background: url('/img/details_close.png') no-repeat center center;
}
.icheckbox_square-blue, .iradio_square-blue{
    margin-right: 10px;
}
.header-right-div{
    right: 10px;
    float: right;
    position: absolute;
    top: 15px;
}
.header-left-div{
    margin-top: 15px;
    display: inline-flex;
}
.m-8 {
    margin: 8px;
}
.mt-10{
    margin-top: 10px;
}
.mt-15{
    margin-top: 15px;
}
.m-5 {
    margin: 5px;
}
.icon-link{
  text-align:center;
  display:block;
  margin-bottom: 18px;
}
.icon-link > a {
    display:grid;
}
.icon-link > .badge{
    position: absolute;
    top: 20px;
    right: 67px;
}
.link-des {
    display: inline-block;
    text-align: left;
}

.navbar-nav>.user-menu>.dropdown-menu>li.user-header>img {
    border: none;
    height: auto;
    width: 100%;
    max-height: 120px;
}
.bg-light-green{
    background-color: #98D973 !important;
    color: #fff !important
}
.hover-q {
    font-size: 16px;
    margin-left: 3px;
    cursor: help;
}
.input-group-addon .hover-q{
    margin-left: 0px;
}
.text-bold{
    font-weight: bold;
}
.tour .popover-content{
    padding: 18px 14px;
}
.table-slim>tbody>tr>td, .table-slim>tbody>tr>th, .table-slim>tfoot>tr>td, .table-slim>tfoot>tr>th, .table-slim>thead>tr>td, .table-slim>thead>tr>th{
    padding: 1px;
}

/* Custom scroll bar start*/

/* width */
::-webkit-scrollbar {
    width: 7px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Custom scroll bar end*/

.product_cell{
    height: 100px;
    padding: 1%;
}
.product_cell_div{
    height: 100% !important;
    width: 100% !important;
    text-align: center;
    vertical-align: middle;
    padding-top: 5px;
    cursor: pointer;
    overflow: hidden;
}

/*CSS to print receipts*/
.print_section{
    display: none;
}
@media print{
    .print_section{
        display: inline !important;
    }
    .modal-xl{
        width: 100% !important;
    }
    ::-webkit-scrollbar{
        display: none !important;
    }
    #toast-container {
      display: none;
    }

    /* Transient widgets that jQuery/Bootstrap append to <body> sit outside the
       screens' .no-print wrappers, so they survive into the printed page. They
       are position:absolute against the on-screen layout too, so once the rest
       of the page is hidden they land wherever the receipt happens to be - the
       keyboard-shortcut popover printed on top of POS invoices this way.
       Nothing here is ever printable content. */
    .popover,
    .tooltip,
    .ui-autocomplete,
    #ui-datepicker-div,
    .daterangepicker,
    .bootstrap-datetimepicker-widget,
    .select2-container--open,
    .swal-overlay,
    .sweet-alert,
    .modal-backdrop {
      display: none !important;
    }
}

.input-number .btn-default{
    background-color: white;
    padding: 6px 9px;
}

.width-50{
    width: 50% !important;
}
.width-40{
    width: 40% !important;
}
.width-60{
    width: 60% !important;
}
.width-100{
    width: 100% !important;
}

.font-30{
    font-size: 30px !important;
}

.font-23{
    font-size: 23px !important;
}
.padding-5{
    padding: 5px !important;
}
.padding-10{
    padding: 10px !important;
}
.padding-side-15{
    /*padding-left: 15px !important;
    padding-right: 15px !important;*/
}
.text-muted-imp{
    color: #A3A3A3 !important;
}

.table-no-top-cell-border td{
    border-top: 0px !important;
    border-bottom: 0px !important;
}
.table-no-top-cell-border th{
    border-top: 0px !important;
    border-bottom: 0px !important;
}

.table-no-side-cell-border td{
    border-left: 0px !important;
    border-right: 0px !important;
}
.table-no-side-cell-border th{
    border-left: 0px !important;
    border-right: 0px !important;
}

.color-555 {
    color: #555555 !important;
}
.color-555 *{
    color: #555555 !important;
}
.color-white {
    color: white !important;
}
.col-no-padding{
    padding-left: 0px;
    padding-right: 0px;
}
.col-2px-padding{
    padding: 2px;
}

.pos-express-btn{
    font-size: 23px !important;
    overflow: hidden !important;
    height: 73px !important;
    white-space: normal;
}
.word-wrap{
    word-wrap: break-word !important;
}

.modal-xl{
    width: 90%; /* respsonsive width */
    margin-left: auto !important;
    margin-right: auto !important;
}
table.ajax_view tbody tr{
    cursor: pointer;
}
.bg-white{
    background-color: #fff;
}

.product-thumbnail-small{
    height: 50px;
    width: 50px;
}

table.table-text-center td, table.table-text-center th{
    vertical-align: middle !important;
}
.product_list{
    padding-left: 8px;
    padding-right: 8px;
}
.product_box{
  width: 100%;
  /*padding-top: 5px;
  padding-bottom: 2px;*/
  margin-bottom: 10px;
  text-align: center;
  cursor: pointer;
  /*border: 1px solid darkgray;*/
  font-weight: 600;
  background-color: #fff;
  border-radius: 2px;
  padding-top: 3px;
}
.product_box .image-container{
  /*width: 95%;*/
  height: 55px;
  margin: auto;
  /*padding-top: 5px;*/

}
.product_box .image-container img{
    height: 45px;
    /*width: 45px*/
}
.eq-height-row{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:flex;
    flex-wrap: wrap;
}
.eq-height-col{
    display: flex;
}

.product_box .text_div{
    margin-top: 3px;
}
.product_box .text{
    width: 100%;
    overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1; /* number of lines to show */
   line-height: 14px;        /* fallback */
   max-height: 14px;       /* fallback */
}
.small-box.bg-gray:hover{
    color: #000;
    text-decoration: none;
}

#calendar table tbody td {
    cursor: pointer;
}

.min-height-90hv{
    min-height: 90vh !important;
}

/* Grow Shadow */
.hvr-grow-shadow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow, transform;
  transition-property: box-shadow, transform;
}
.hvr-grow-shadow:hover, .hvr-grow-shadow:focus, .hvr-grow-shadow:active {
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.text-link{
    cursor: pointer;
}

.text-link:hover{
    text-decoration: underline;
}

.v-center{
    vertical-align: middle !important;
}

.bg-woocommerce{
  background-color: #9E458B !important;
}

/*.box, .info-box, .nav-tabs-custom, .external-event{
  box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2) !important;
}*/

.user_avatar {
  border-radius: 50%;
  width: 25px;
  height: 25px;
  margin: 1px;
}

.fs-10 {
  font-size: 10px;
}

.timeline-lode-more-btn {
  margin-left: 50px;
  margin-top: 25px;
  padding-right: 12px;
  padding-left: 12px;
}

.pa-0 {
  padding: 0px !important;
}

.mt-56{
  margin-top: 56px !important;
}

.m-2{
  margin: 2px !important;
}

.treeview-menu i{
  display: none !important;
}
.treeview-menu a{
  padding-left: 25px !important;
  font-size: 95% !important;
}
.treeview-menu a::before{
  content: "\2192 ";
}

@media only screen and (max-width: 600px) {
  .pos-form-actions{
    position: absolute;
  }
}
.mr-8 {
  margin-right: 8px !important;
}

@media (max-width: 1024px) {
   .pos_form_totals{
        margin-bottom: 40px;
    }
}

.swal-modal .swal-text {
    text-align: center;
}

.pos-total {
    display: inline-block;
    padding: 8px 10px;
    vertical-align: middle;
    margin-left: 5px;
    margin-right: 5px;
}
.pos-total span.number{
    font-size: 26px;
    vertical-align: middle;
    font-weight: bolder;
}

.pos-total span.text{
    font-weight: bolder;
    display: inline-block;
    width: 60px;
    vertical-align: middle;
}
.mb-40 {
    margin-bottom: 40px !important;
}

@media print {
    a:after { content:''; }
    a[href]:after { content: none !important; }
}

.fa-times{
    font-size: 30px
}
/*
 * The icon needs an explicit size: the rule above sets 30px on the <i> itself, which the
 * button's font-size cannot override, so the cross rendered far larger than the label and
 * the sibling download icon. Inherited rather than a fixed size, so it tracks whatever
 * button size the markup uses.
 */
.existing-document .fa-times{
  font-size: inherit;
  line-height: 1;
}
.mb-5{
  margin-bottom: 5px !important;
}
.tree-actions {
  margin-left: 20px;
  display: none;
}
.jstree-hovered .tree-actions {
  display: inherit;
}

/* Capitalize form labels across admin forms (display only) */
.form-group > label,
.form-group > .control-label,
.form-group .checkbox > label,
.form-group .radio > label,
.form-group .checkbox label,
.form-group .radio label {
    text-transform: capitalize;
}

label {
    text-transform: capitalize !important;
}
/*
 * Read-only date / time / date-range picker inputs must not show a "blocked"
 * (not-allowed) cursor on hover — they are read-only, not disabled, and are
 * meant to be clicked to open the picker. Applies project-wide.
 * (!important is required to override third-party picker/framework CSS.)
 */
input.form-control[readonly]:not([disabled]),
textarea.form-control[readonly]:not([disabled]),
.input-group.date .form-control[readonly],
.datepicker[readonly],
.datetimepicker[readonly],
.date_picker[readonly],
.datetime_picker[readonly],
.date_range_picker[readonly],
.daterange[readonly] {
  cursor: pointer !important;
}

/*
 * Uploaded file preview (e.g. product brochure on the product edit form).
 * Reuses .img-thumbnail so the shared .delete-media handler can remove the box,
 * but that class is a fixed 70x70 image tile — reset the size so a filename and
 * its action buttons fit, and drop it onto its own line below the label.
 */
.img-thumbnail.file-preview {
  display: block;
  width: auto;
  height: auto;
  margin: 0 0 5px 0;
  padding: 8px;
  text-align: left;
}

.img-thumbnail.file-preview .file-preview-name {
  display: block;
  margin-bottom: 5px;
  word-break: break-all;
}

/* Hierarchical category tables (product & HRM categories, expense categories, CLAIMS categories):
   a parent row expands to reveal its sub categories. */
td.category-tree-control {
  width: 32px;
  text-align: center;
  cursor: pointer;
  color: #888;
}

td.category-tree-control i {
  display: inline-block;
  transition: transform 0.15s ease-in-out;
}

tr.expanded td.category-tree-control i {
  transform: rotate(90deg);
}

.category-tree-count {
  font-weight: normal;
}

/* Sub category rows are real rows of the same table, so they line up with its columns
   and share the parent rows' look (striping, borders); only the level-down icon of the
   name cell marks them as sub categories. */

/* ---- select2 inside a bootstrap .input-group ---------------------------- *
 * select2's default width mode ("resolve") freezes the widget at the pixel
 * width measured when it was initialised. Changing the browser zoom re-flows
 * the column but not that frozen width, so the widget (and the addon/button
 * next to it) spills out of its column and paints over the neighbouring field.
 * Force the widget to stay fluid and to behave like the table cell the
 * input-group expects. */
.input-group > .select2-container,
.input-group .select2-container--default {
  position: relative;
  z-index: 2;
  display: table;
  table-layout: fixed;
  float: left;
  width: 100% !important;
  max-width: 100%;
  margin-bottom: 0;
}

.input-group > .select2-container .select2-selection {
  width: 100%;
}

/* The addon / "+" button must keep its own cell instead of being pushed out. */
.input-group > .select2-container + .input-group-btn,
.input-group > .select2-container + .input-group-addon {
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
}

/* ---- select2 as the ONLY control in an .input-group --------------------- *
 * A Bootstrap 3 .input-group is `display: table` with no width of its own — it
 * only spans its column because the `.form-control` cell inside it is
 * `width: 100%`. select2 hides the real <select> (it shrinks to 1px), so a
 * group whose sole control is a select2 has no such cell left and the table
 * falls back to shrink-to-fit: it sizes itself to the widest option label.
 * On POS > Multiple Pay the "Payment Account" widget sized itself to
 * "ICICI Bank (Balance: 89,545.00)", spilling out of its column, over the
 * neighbouring field and past the popup — and the open dropdown, which select2
 * matches to the widget's width, got cut off with it.
 * Pinning the group to its column restores the `.form-control` behaviour, and
 * the widget ellipsises long labels instead of growing. */
.input-group:has(> .select2-container) {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 100%;
}

/* The addon keeps its natural width; the table-cell sizing above no longer
   applies once the group is a flex container. */
.input-group:has(> .select2-container) > .input-group-addon,
.input-group:has(> .select2-container) > .input-group-btn {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  width: auto;
}

/* The widget absorbs whatever is left. `min-width: 0` is what actually fixes
   the overflow: a flex item refuses to shrink below its content's min-content
   width by default, which for this widget is the full "ICICI Bank (Balance:
   89,545.00)" label. Zeroing it lets the box shrink to the column and the label
   ellipsise. `width` needs !important because select2 copies the <select>'s
   inline `width:100%` onto the container as an inline style. */
.input-group:has(> .select2-container) > .select2-container {
  display: block;
  float: none;
  flex: 1 1 auto;
  min-width: 0;
  width: auto !important;
  max-width: 100%;
}

/* Single-select only — on a multi-select `__rendered` is the <ul> of tag chips,
   which must stay free to wrap onto more lines. */
.input-group > .select2-container .select2-selection--single .select2-selection__rendered {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Split fields (pay term number + type) must never total more than the row. */
.multi-input .width-40,
.multi-input .width-60 {
  max-width: 100%;
}

/* ---- Bootstrap 4 validation for select2 --------------------------------- *
 * select2 keeps the real <select> at 1x1px and draws its own widget, so the
 * `.is-invalid` Bootstrap puts on a control paints nothing. common.js mirrors the
 * class onto the widget (span.select2-container); these rules give it the same
 * red border and focus ring Bootstrap gives a native invalid .form-control.
 * The theme sets the default border with `border: 1px solid #aaa`, so match its
 * specificity rather than reaching for !important. */
.select2-container.is-invalid .select2-selection,
.select2-container--default.is-invalid .select2-selection--single,
.select2-container--default.is-invalid .select2-selection--multiple {
  border-color: #dc3545 !important;
}

.select2-container.is-invalid.select2-container--focus .select2-selection,
.select2-container.is-invalid.select2-container--open .select2-selection {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.form-control.is-invalid,
.custom-select.is-invalid,
select.form-control.is-invalid {
  border-color: #dc3545 !important;
}

.form-control.is-invalid:focus {
  border-color: #dc3545 !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* Valid state (used by the live mobile check in user/form.blade.php). */
.form-control.is-valid {
  border-color: #28a745 !important;
}

.form-control.is-valid:focus {
  border-color: #28a745 !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
}

/* jQuery Validation writes the message as a sibling of the field it belongs to.
   For a select2 / input-group it lands after the wrapper instead, where Bootstrap's
   `.is-invalid ~ .invalid-feedback` rule cannot reach it — hence the `d-block` that
   common.js adds to errorClass. Keep the spacing consistent with a native field. */
.invalid-feedback.d-block {
  margin-top: 0.25rem;
}

/* Horizontal scrollbar mirrored above a datatable, synced with the native one below.
   The inner div only exists to give the container something wide enough to scroll.
   Unscoped on purpose: for tables that scroll via .table-responsive the bar is inserted
   above that wrapper, which sits outside .dataTables_wrapper. */
.top-scrollbar {
  overflow-x: auto;
  overflow-y: hidden;
  /* It is inserted directly before the table wrapper, so without this the bar sits flush
     against the "Show entries" / export-buttons row below it and reads as part of that row.
     Only applies when the bar is shown - common.js toggles it off for narrow tables. */
  margin-bottom: 10px;
}

.top-scrollbar > div {
  height: 1px;
}

/* Browsers with overlay scrollbars hide the bar until scrolled, which defeats the purpose */
.top-scrollbar::-webkit-scrollbar {
  -webkit-appearance: none;
  height: 10px;
}

.top-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, .35);
  border-radius: 5px;
}

/* Jump-to-bottom button. Mirrors the theme's .scroll-top-arrow, anchored top-right instead
   so the two never overlap. Offset clears the fixed header. */
.scroll-bottom-arrow {
  cursor: pointer;
  position: fixed;
  top: 60px;
  right: 10px;
  z-index: 1050;
  background: var(--main-color);
  height: 35px;
  width: 35px;
  /* Hidden until there is something below to scroll to; common.js adds .visible */
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 20px;
  color: #fff;
}

.scroll-bottom-arrow.visible {
  display: flex;
}

/* ==========================================================================
   Sticky footer
   --------------------------------------------------------------------------
   The copyright footer sits inside #content, after @yield('content'). On a
   short page it used to stop wherever the content stopped, floating in the
   middle of the screen with blank space beneath it.

   .main-container is already `display:flex; min-height:100vh`, so #content is
   a flex item that already stretches to full height. Making #content a column
   flex container therefore costs no layout change, and `margin-top:auto` on
   the footer pushes it to the bottom of that full-height box. On a long page
   the auto margin collapses to nothing and the footer flows normally after
   the content, as before.

   This applies to layouts/app.blade.php and layouts/sign.blade.php, which
   share the same #content > include.footer structure — i.e. every admin
   module screen.
   ========================================================================== */
#content.main-content {
    display: flex;
    flex-direction: column;
}

/* Children must not be squashed when the column has spare room: without this,
   flex would shrink tall content to fit rather than letting the page scroll. */
#content.main-content > * {
    flex-shrink: 0;
}

#content.main-content > .footer-wrapper {
    margin-top: auto;
}

/* The POS footer lives in the same slot and needs the same treatment. */
#content.main-content > .main-footer {
    margin-top: auto;
}

/* A pinned footer must not force a second page when printing. */
@media print {
    #content.main-content {
        display: block;
    }

    #content.main-content > .footer-wrapper,
    #content.main-content > .main-footer {
        margin-top: 0;
    }
}

/* --- Side-menu toggle (hamburger) -------------------------------------------
   assets/css/all.css ships `.sidebarCollapse { display: none }` with a single
   `@media (max-width: 575px)` block flipping it back to `display: block`. Two
   elements carry that class on every admin page: the one in the top header
   (include/header.blade.php) and a second copy inside each page's own
   `.sub-header-container` breadcrumb bar (~96 blade files). The result was that
   the toggle was hidden at every normal viewport and BOTH copies appeared below
   576px — which is what browser zoom lands you in, since zoom shrinks the CSS
   viewport (e.g. a 1440px window is ~960px at 150% and ~576px at 250%).

   The header toggle is the canonical one, so show it at all widths; the
   sub-header duplicate is suppressed everywhere. Both rules need !important to
   beat the max-width:575px block in all.css. */
.header .navbar-item.theme-brand .sidebarCollapse {
    display: inline-flex !important;
    align-items: center;
}

.sub-header-container .sidebarCollapse {
    display: none !important;
}

/* --- Side-menu scrim: invisible click-blocker on desktop --------------------
   all.js toggles `show` on `.overlay` on every `.sidebarCollapse` click, at
   every viewport width. all.css only *styles* that state below 992px
   (`@media (max-width: 991px) { .overlay.show { display: block; opacity: .7 } }`);
   its base rule is `display: none`, so above 991px the class was meant to be
   inert. It is not: css/vendor.css (Bootstrap 3) ships the helper class
   `.show { display: block !important }`, which the overlay picks up at any
   width. So on desktop the first hamburger click laid a
   `position: fixed; inset: 0; z-index: 1035` layer at `opacity: 0` over the
   whole page — invisible, but above the header (`.fixed-top`, z-index 1030).
   The next click on the hamburger therefore hit the scrim instead of the
   toggle, and all.js's own overlay handler simply re-closed the sidebar, so
   the button read as dead and the rest of the page was unclickable too.

   Above 991px the sidebar pushes #content aside and needs no scrim at all, so
   keep it hidden. The two-class selector plus !important outranks Bootstrap's
   single-class `.show` regardless of stylesheet order. Below 992px nothing
   changes — the off-canvas sidebar keeps its tap-to-dismiss scrim. */
@media (min-width: 992px) {
    .overlay,
    .overlay.show {
        display: none !important;
    }
}

/* --- Brand row: logo + toggle alignment -------------------------------------
   all.css lays the brand <ul> out with `justify-content: space-between` and a
   fixed `li.theme-text { margin-right: 47px }`, both tuned for the old logo.
   space-between is the actual positioning bug: the gap between logo and toggle
   is whatever is left over, so it grows and shrinks with the viewport and the
   toggle drifts away from the logo instead of sitting beside it. Pack the row
   from the left with a fixed gap instead, and centre both items on the logo's
   full height. Scoped to `.header` so the sidebar's own brand row is untouched. */
.header .navbar-item.theme-brand {
    justify-content: flex-start !important;
    align-items: center;
    gap: 10px;
    padding: 0.9px 0 0.9px 20px !important;
}

/* Pin the toggle to a fixed x-position instead of letting it ride the end of
   the logo/business-name box — otherwise a small logo or a short business name
   drags it left and it no longer lines up with the sidebar edge. The brand
   block is held to the sidebar's own width (235px, all.css `.sidebar-wrapper`)
   and the toggle is pushed to that block's right edge, so it sits just inside
   the sidebar's right edge whatever the branding is. `min-width` rather than a
   fixed width so an unusually long business name still pushes out instead of
   being clipped. Desktop only — below 992px the sidebar is off-canvas and
   all.css hides the business name entirely, so the reservation is pointless. */
@media (min-width: 992px) {
    .header .navbar-item.theme-brand {
        min-width: 235px;
        box-sizing: border-box;
        padding-right: 12px !important;
    }

    /* The auto margin belongs on the <li> — that is the flex child of the row,
       not the <a> inside it. */
    .header .navbar-item.theme-brand > li.sidebar-toggle-item {
        margin-left: auto;
    }
}

.header .navbar-item.theme-brand li.theme-logo,
.header .navbar-item.theme-brand li.theme-text {
    align-self: center;
    margin-right: 0;
    /* beats all.css `li.theme-text { margin-right: 47px }` */
}

/* Preserve the new logo's aspect ratio — all.css pins `width: 100%` alongside a
   fixed height, which stretches it to whatever the flex row hands the <li>. */
.header .navbar-item.theme-brand li.theme-logo img.navbar-logo {
    width: auto;
    height: 34px;
    display: block;
}

/* --- Side-menu toggle: appearance -------------------------------------------
   One control in two states: hamburger when the menu is open, X when closed.
   The hover/active tints resolve from --main-color, the accent token set by
   layouts/partials/theme_color.blade.php from the Business Settings theme, so
   the toggle re-tints with the rest of the UI. No hardcoded accent fallback is
   used here — the variable is always defined by that partial. The resting
   stroke is a neutral slate (the template's own body-text colour) so the icon
   reads as chrome rather than as a stray coloured element on the white header. */
.header .navbar-item.theme-brand .sidebarCollapse {
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 10px;
    background: transparent;
    color: #3b3f5c;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.header .navbar-item.theme-brand .sidebarCollapse:hover,
.header .navbar-item.theme-brand .sidebarCollapse:focus-visible,
.header .navbar-item.theme-brand .sidebarCollapse.is-open {
    color: var(--main-color);
}

/* No background on any state — the bars alone carry the hover/open feedback
   through the colour shift above. */
.header .navbar-item.theme-brand .sidebarCollapse:hover,
.header .navbar-item.theme-brand .sidebarCollapse:focus-visible {
    transform: scale(1.06);
}

.header .navbar-item.theme-brand .sidebarCollapse:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--main-color) 45%, transparent);
}

.header .navbar-item.theme-brand .sidebarCollapse:active {
    transform: scale(0.96);
}


/* Three horizontal bars — same shape in both states. */
.header .navbar-item.theme-brand .sidebarCollapse-icon {
    position: relative;
    display: block;
    width: 20px;
    height: 14px;
}

.header .navbar-item.theme-brand .sidebarCollapse-icon span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background-color: currentColor;
    transition: background-color 180ms ease;
}

.header .navbar-item.theme-brand .sidebarCollapse-icon span:nth-child(1) {
    top: 0;
}

.header .navbar-item.theme-brand .sidebarCollapse-icon span:nth-child(2) {
    top: 6px;
}

.header .navbar-item.theme-brand .sidebarCollapse-icon span:nth-child(3) {
    top: 12px;
}

/* The bars stay three horizontal bars in both states — no fold-into-X. The open
   state is signalled by the background tint and colour shift above only. */

/* Dark mode: light neutral at rest (all.css does the same for the sub-header
   copy), lifted theme colour on hover/open so the tint still reads. */
.darkmode .header .navbar-item.theme-brand .sidebarCollapse {
    color: #e0e6ed;
}

.darkmode .header .navbar-item.theme-brand .sidebarCollapse:hover,
.darkmode .header .navbar-item.theme-brand .sidebarCollapse:focus-visible,
.darkmode .header .navbar-item.theme-brand .sidebarCollapse.is-open {
    color: color-mix(in srgb, var(--main-color) 65%, #fff);
}

/* Side menu itself — all.css ships a 0.6s catch-all transition, which reads as a
   slow drift rather than a snap-free open. Match the toggle's timing. */
.main-container .sidebar-wrapper {
    transition: left 180ms ease, width 180ms ease;
}

.main-container > #content {
    transition: margin-left 180ms ease;
}

/* Narrow viewports (and high zoom, which shrinks the CSS viewport the same way)
   — tighten the brand inset to match all.css's own <=991px value. Below 767px
   all.css hides `li.theme-text`, so flex-start keeps the toggle beside the logo
   instead of leaving it stranded where space-between used to put it. */
@media (max-width: 991px) {
    .header .navbar-item.theme-brand {
        gap: 8px;
        padding: 0.9px 0 0.9px 14px !important;
    }
}

@media (prefers-reduced-motion: reduce) {

    .header .navbar-item.theme-brand .sidebarCollapse,
    .header .navbar-item.theme-brand .sidebarCollapse-icon span,
    .main-container .sidebar-wrapper,
    .main-container > #content {
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
   Sale line table (POS, Add sale, Edit sale, Duplicate sale)

   The table carries three extra columns (issued quantity/date/status) on top of
   the original ones. The goal here is that every column stays on screen: the
   controls are condensed so the full set fits the pane at normal desktop widths,
   and the wrapper only falls back to scrolling when the viewport is genuinely
   too narrow. Note that Bootstrap's own .table-responsive rule is not part of
   this build's desktop stylesheet, so the overflow is declared explicitly -
   without it the table simply spilled out of .pos_product_div and the trailing
   columns were clipped out of view.
   --------------------------------------------------------------------------- */
.pos_product_div .table-responsive {
    width: 100%;
    overflow-x: auto;
    border: 0;
    margin-bottom: 0;
}

#pos_table {
    width: 100%;
    table-layout: auto;
}

#pos_table > thead > tr > th,
#pos_table > tbody > tr > td {
    vertical-align: middle;
    white-space: normal;
    padding: 5px 4px;
}

/* Condensed controls: this is what buys the room for all the columns. */
#pos_table .form-control {
    height: 30px;
    padding: 4px 6px;
    font-size: 13px;
}

#pos_table textarea.form-control {
    height: auto;
}

#pos_table .input-group-addon,
#pos_table .input-number .btn {
    padding: 4px 7px;
    font-size: 13px;
}

/* Quantity: the spinner buttons take only what they need so the input, and the
   number inside it, stay fully readable. */
#pos_table > tbody > tr > td.pos_quantity_td {
    width: 125px;
    min-width: 125px;
}

#pos_table .input-number.pos_quantity_group {
    display: table;
    width: 100%;
    margin: 0;
}

#pos_table .input-number.pos_quantity_group > .input-group-btn {
    width: 1%;
    white-space: nowrap;
}

#pos_table .input-number.pos_quantity_group > input.pos_quantity {
    width: 100%;
    min-width: 50px;
    text-align: center;
}

#pos_table > tbody > tr > td.pos_issued_quantity_td {
    width: 85px;
    min-width: 85px;
}

#pos_table > tbody > tr > td.pos_issued_quantity_td input {
    text-align: center;
}

#pos_table > tbody > tr > td.pos_issued_date_td {
    width: 150px;
    min-width: 150px;
}

#pos_table > tbody > tr > td.pos_issued_date_td .input-group {
    width: 100%;
    margin: 0;
}

#pos_table > tbody > tr > td.pos_issued_status_td {
    width: 110px;
    min-width: 110px;
}

/* Tax and price-inc-tax: with `table-layout: auto` these two carry the least
   content of any column, so the browser squeezed them down to a sliver where the
   tax dropdown was unreadable. They keep a floor wide enough to read; when inline
   tax is off the `hide` class still removes them entirely. */
#pos_table > thead > tr > th.pos_tax_td,
#pos_table > tbody > tr > td.pos_tax_td {
    width: 130px;
    min-width: 130px;
}

#pos_table > thead > tr > th.pos_price_inc_tax_td,
#pos_table > tbody > tr > td.pos_price_inc_tax_td {
    width: 110px;
    min-width: 110px;
}

/* Discount: the cell stacks the amount input over a "Fixed / Percentage" select. It
   carried no width of its own while the columns on either side of it do, so the browser
   settled the leftover width on it and cut "Percentage" off mid-word. The floor is what
   the longer of the two labels needs at this font size, plus the dropdown arrow. */
#pos_table > thead > tr > th.pos_discount_td,
#pos_table > tbody > tr > td.pos_discount_td {
    width: 120px;
    min-width: 120px;
}

/* Bootstrap 3 gives `select.input-sm` a 30px line-height (an old IE height workaround).
   Against the condensed 30px control height above that leaves a 20px content box holding
   a 30px line box, so the label was drawn taller than the space it had and came out
   clipped - "Lot & Expiry" lost its lower edge. Let the line box match its container. */
#pos_table select.form-control {
    line-height: normal;
}

/* Lot & Expiry sits in the product cell, which has no width of its own either - it takes
   whatever the other columns leave. `.form-control` stretches the select to 100% of that,
   so it shrank with the cell and clipped its own label. */
#pos_table select.lot_number {
    min-width: 150px;
}

/* select2 inside a table cell collapses to 0px until it is told otherwise. */
#pos_table .select2-container {
    width: 100% !important;
    min-width: 90px;
}

#pos_table .select2-container .select2-selection--single {
    height: 30px;
}

#pos_table .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 28px;
    font-size: 13px;
}

#pos_table .select2-container .select2-selection--single .select2-selection__arrow {
    height: 28px;
}

/* Validation messages wrap in place instead of widening their column. */
#pos_table label.error {
    display: block;
    white-space: normal;
    font-size: 12px;
}

/* Below tablet width the columns cannot all fit, so scroll rather than clip. */
@media (max-width: 991px) {
    .pos_product_div {
        overflow-x: auto;
    }
}

/* ---------------------------------------------------------------------------
   Return line table (Sell return > Add sale return)

   The screen was rebuilt on the same widget/grid markup as Edit sale, so the
   line table is given the same treatment as #pos_table above: condensed
   controls, vertically centred cells and a wrapper that scrolls instead of
   clipping. The columns are declared here rather than in the row partial
   because purchase_return/partials/product_table_row is shared with the
   purchase return screen and must keep rendering unchanged there.
   --------------------------------------------------------------------------- */
.sell_return_product_div .table-responsive {
    width: 100%;
    overflow-x: auto;
    border: 0;
    margin-bottom: 0;
}

#sell_return_product_table {
    width: 100%;
    table-layout: auto;
}

#sell_return_product_table > thead > tr > th,
#sell_return_product_table > tbody > tr > td {
    vertical-align: middle;
    white-space: normal;
    padding: 5px 4px;
}

#sell_return_product_table .form-control {
    height: 30px;
    padding: 4px 6px;
    font-size: 13px;
    display: inline-block;
    width: 100%;
}

/* The row partial prints the unit short name ("Pc(s)", "Kg", ...) straight
   after the quantity input. A full-width block .form-control pushed that label
   onto a line of its own, so the input is sized to leave room for it. */
#sell_return_product_table > thead > tr > th:nth-last-child(4),
#sell_return_product_table > tbody > tr > td:nth-last-child(4) {
    width: 140px;
    min-width: 140px;
}

#sell_return_product_table > tbody > tr > td input.product_quantity {
    width: 75px;
    margin-right: 4px;
    text-align: center;
}

/* The two amount columns carry the least content, so with `table-layout: auto`
   the browser squeezed them under the product name. They keep a floor wide
   enough to read a formatted amount. */
#sell_return_product_table > thead > tr > th:nth-last-child(2),
#sell_return_product_table > tbody > tr > td:nth-last-child(2),
#sell_return_product_table > thead > tr > th:nth-last-child(3),
#sell_return_product_table > tbody > tr > td:nth-last-child(3) {
    width: 130px;
    min-width: 130px;
}

#sell_return_product_table > tbody > tr > td input.product_unit_price,
#sell_return_product_table > tbody > tr > td input.product_line_total {
    text-align: right;
}

/* The delete column only holds an icon; without a width of its own it took a
   share of the leftover space and left the icon floating in an empty cell. */
#sell_return_product_table > thead > tr > th:last-child,
#sell_return_product_table > tbody > tr > td:last-child {
    width: 40px;
    min-width: 40px;
    text-align: center;
}

/* Validation messages wrap in place instead of widening their column. */
#sell_return_product_table label.error {
    display: block;
    white-space: normal;
    font-size: 12px;
}

@media (max-width: 991px) {
    .sell_return_product_div {
        overflow-x: auto;
    }
}

/* ---------------------------------------------------------------------------
   Sale line table in the "View sale / View sales order" modal
   (sale_pos/show + sale_pos/res_show -> partials/sale_line_details).

   The row carries up to thirteen columns. Bootstrap's own .table-responsive rule
   is not part of this build's desktop stylesheet, so the wrapper never scrolled:
   the table was forced down to the modal width and the browser resolved that by
   breaking header text mid-word, which is what made "Product" collapse to a
   letter-per-line stack running into the cell beside it. Restoring the overflow
   on the wrapper, and keeping the headers on one line, lets the table take the
   width it actually needs. Nothing is hidden - the wrapper scrolls instead.
   --------------------------------------------------------------------------- */
.sale-line-details-wrapper {
    width: 100%;
    overflow-x: auto;
}

.sale-line-details-table {
    width: 100%;
    table-layout: auto;
}

.sale-line-details-table > tbody > tr > th,
.sale-line-details-table > tbody > tr > td {
    vertical-align: top;
    padding: 6px 8px;
    /* Long words (SKUs, unbroken product names) wrap inside their own cell
       rather than spilling over the neighbouring column. */
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Headers stay on a single line: they are what the column width is measured
   against, so this is what stops them being crushed in the first place. */
.sale-line-details-table > tbody > tr > th {
    white-space: nowrap;
    vertical-align: middle;
}

/* Value columns need a readable floor - amounts must not wrap onto two lines. */
.sale-line-details-table > tbody > tr > td {
    min-width: 80px;
}

/* Product carries by far the most text (name, variation, SKU, brand, note,
   descriptions, warranty, kitchen status), so it gets the room to show it. */
.sale-line-details-table > tbody > tr > th.sale-line-product-col,
.sale-line-details-table > tbody > tr > td.sale-line-product-col {
    min-width: 240px;
    white-space: normal;
}

/* The serial-number column only ever holds a couple of digits. */
.sale-line-details-table > tbody > tr > td:first-child {
    min-width: 32px;
}

/* Printing has no scrollbar to fall back on, so let everything wrap there. */
@media print {
    .sale-line-details-wrapper {
        overflow-x: visible;
    }

    .sale-line-details-table > tbody > tr > th,
    .sale-line-details-table > tbody > tr > td {
        min-width: 0;
        white-space: normal;
    }
}

.form-grid-field {
    margin-bottom: 24px;
}

.form-grid-field > .form-group,
.form-grid-field > .form-grid-panel {
    margin-bottom: 0;
}

/* Labels: identical height and bottom spacing in every column. */
.form-grid > [class*="col-"] > .form-group > label,
.form-grid .form-grid-label {
    display: inline-block;
    margin-bottom: 8px;
    min-height: 22px;
    line-height: 22px;
    font-weight: 600;
    font-size: 13px;
}

/* Info icons rendered by the show_tooltip directive sit right after the label
   text; give them one consistent gap across the whole form. */
.form-grid .hover-q {
    margin-left: 6px;
    vertical-align: middle;
}

/* One height for every single-value control so input groups, plain inputs and
   select2 line up across columns. */
.form-grid .form-control:not(textarea):not([multiple]),
.form-grid .select2-container .select2-selection--single {
    height: 38px;
}

.form-grid .select2-container .select2-selection--multiple {
    height: auto;
    min-height: 38px;
}

.form-grid .select2-container {
    width: 100% !important;
}

.form-grid textarea.form-control {
    min-height: 38px;
}

/* Inline add-on / button cells vertically centred against the control. */
.form-grid .input-group-addon,
.form-grid .input-group-btn {
    vertical-align: middle;
}

.form-grid .input-group-addon {
    height: 38px;
    line-height: 1;
    text-align: center;
}

.form-grid .input-group-btn > .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding-top: 0;
    padding-bottom: 0;
}

/* Two controls sharing one field (e.g. pay term = number + unit), previously
   two floated `.form-control`s separated by a <br>. */
.form-grid-split {
    display: flex;
    align-items: center;
}

.form-grid-split > .width-40 {
    flex: 0 0 40%;
    max-width: 40%;
    margin-right: 8px;
}

.form-grid-split > .width-60 {
    flex: 1 1 auto;
}

/* Checkbox / radio groups that must line up with the inputs beside them. */
.form-grid-inline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-height: 38px;
    margin: 0;
}

.form-grid-inline > label {
    margin-bottom: 0;
    margin-right: 16px;
    font-weight: 400;
}

.form-grid-inline > label:last-child {
    margin-right: 0;
}

/* Labelled section card, for grouping related fields inside a form. */
.form-grid-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px;
    border: 1px solid #e0e6ed;
    border-radius: 6px;
    background-color: #fbfcfe;
}

.form-grid-panel-title {
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e6ed;
    font-size: 14px;
    font-weight: 600;
}

.form-grid-panel .form-group:last-child {
    margin-bottom: 0;
}

.form-grid .form-text {
    margin-top: 6px;
    margin-bottom: 0;
    font-size: 12px;
}

/* Read-only address summary (billing / shipping on the Add Sale screen). */
.address-summary {
    padding: 16px;
    border: 1px solid #e0e6ed;
    border-radius: 6px;
    background-color: #fbfcfe;
    font-size: 13px;
    line-height: 1.6;
}

.address-summary-item + .address-summary-item {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed #e0e6ed;
}

/* Full-width variant: the two addresses sit side by side and share a vertical
   rule, so the card stays one input-row tall instead of towering over the
   fields beside it. */
.address-summary-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0 32px;
}

.address-summary-inline > .address-summary-item {
    flex: 1 1 240px;
    min-width: 0;
}

.address-summary-inline > .address-summary-item + .address-summary-item {
    margin-top: 0;
    padding-top: 0;
    padding-left: 32px;
    border-top: 0;
    border-left: 1px dashed #e0e6ed;
}

/* Stacked again once the two columns would be too narrow to read. */
@media (max-width: 575.98px) {
    .address-summary-inline > .address-summary-item + .address-summary-item {
        margin-top: 14px;
        padding-top: 14px;
        padding-left: 0;
        border-top: 1px dashed #e0e6ed;
        border-left: 0;
    }
}

.address-summary-label {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #888ea8;
}

.address-summary-value {
    color: #515365;
    word-break: break-word;
}

.address-summary-value:empty::before {
    content: "\2014";
    color: #b0b6c4;
}

/* Collapse to a single column without losing the rhythm or alignment. */
@media (max-width: 767.98px) {
    .form-grid-field {
        margin-bottom: 20px;
    }

    .form-grid-split {
        flex-wrap: nowrap;
    }
}

/* ---------------------------------------------------------------------------
   POS TOP TOOLBAR (layouts/partials/header-pos.blade.php)
   Lives here rather than in the POS create page's <style> block because the same
   partial renders on pos/create, pos/{id}/edit, pos/payment and pos/duplicate-sale.
   Only the create page carried the styles, so on the other three the quick-action
   buttons fell back to `float-right` + mixed m-5/m-6/mt-10 margins and overlapped
   the location line. Every selector here is POS-only markup, so it cannot leak.
   --------------------------------------------------------------------------- */
.pos-header {
    padding: 10px 16px;
    background: #ffffff;
    border-bottom: 1px solid #e8eaf0;
    box-shadow: 0 1px 4px rgba(16, 24, 40, .04);
}

.pos-header > .row {
    align-items: center;
}

.pos-header p,
.pos-header .pos-header-location {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.pos-header .m-6 {
    margin: 0 !important;
    align-items: center;
}

/* The location select is wrapped in a `style="width:45%"` div in the markup;
   inside the flex line that percentage resolves against the whole line and
   crowded the date beside it. A width floor keeps it readable and lets the
   date and keyboard hint sit after it. */
.pos-header .pos-header-location-select {
    width: auto !important;
    min-width: 190px;
    margin-bottom: 0 !important;
}

.pos-header #select_location_id {
    min-width: 180px;
}

.pos-header .curr_datetime {
    color: #475467;
    font-weight: 500;
    background: #f2f4f7;
    border-radius: 3px;
    padding: 3px 10px;
    font-size: 16px;
    white-space: nowrap;
}

.pos-header .fa-keyboard {
    font-size: 22px;
    margin-left: 5px;
    cursor: help;
}

/* Right-hand quick actions: one flex row, uniform buttons, no floats. */
.pos-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.pos-header-actions .btn {
    float: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 8px;
    height: 40px;
    min-width: 40px;
    padding: 0 13px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-weight: 600;
    color: #fff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .16);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.pos-header-actions .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(16, 24, 40, .22);
    filter: brightness(1.05);
    color: #fff;
}

.pos-header-actions .btn:active {
    transform: translateY(0);
    filter: brightness(.97);
}

.pos-header-actions .btn strong {
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.pos-header-actions .btn i {
    font-size: 15px !important;
    margin: 0;
    line-height: 1;
}

/* The ripple effect needs `overflow: hidden` on these buttons, which means a
   label that wraps is silently cut in half. Keeping labels on one line lets the
   button grow to fit instead - "Add Expense" and "Checkout Multi Pay" were both
   being cropped. */
.pos-header-actions .btn,
.pos-form-actions .btn {
    white-space: nowrap;
}

.pos-header-actions .btn strong,
.pos-form-actions .btn strong {
    white-space: nowrap;
}

@media (max-width: 991px) {
    .pos-header-actions {
        justify-content: flex-start;
        margin-top: 8px;
    }
}

@media (max-width: 767px) {
    .pos-header .m-6 {
        flex-wrap: wrap;
    }

    .pos-header-actions {
        justify-content: center;
    }
}

/* ---------------------------------------------------------------------------
   Phone-width horizontal overflow.

   At 375px the admin header forced the whole document to ~434px wide, so every
   page carried a horizontal scrollbar and content sat partly off-screen. The
   cause was .navbar-item.flex-row: it is flex/nowrap and its items measure more
   than the viewport, so it could not shrink and instead stretched the page.
   DataTables' .pagination (≈368px of page links) did the same on list screens.

   Confining both to the viewport - the nav scrolls within itself, the pager
   wraps onto a second line - keeps the page itself at device width. Scoped to
   phones so tablet/desktop layout is untouched.
   --------------------------------------------------------------------------- */
@media (max-width: 575.98px) {

    .header .navbar-item.flex-row {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .header,
    .header-container {
        max-width: 100vw;
        overflow-x: hidden;
    }

    .dataTables_wrapper .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* DataTables' pager is display:inline-flex/nowrap from the vendor bundle, which beat
   the wrap rule above, so on a phone its ~368px of page links still stretched the
   document to 434px. !important is deliberate: this is the narrow phone-only override
   of a vendor declaration we do not otherwise control. */
@media (max-width: 575.98px) {

    .dataTables_wrapper .pagination,
    ul.pagination {
        display: flex !important;
        flex-wrap: wrap !important;
        max-width: 100%;
    }
}

/* The DataTables search box is a fixed-width input inside a col-md-3. From ~768px up
   the column is narrower than the input, so the input hung ~50px past it and pushed a
   scrollbar onto the page. Capping it at the column width costs nothing on wide
   screens, where the column is already the larger of the two. */
.dataTables_filter input.form-control,
.dataTables_filter input[type="search"] {
    max-width: 100%;
}

/* .box-body pads 10px but a Bootstrap .row pulls -15px, so a row placed directly in a
   box escapes 5px each side - enough to put a horizontal scrollbar on the POS
   open-register screen at every width. Matching the row's gutters to the padding that
   is actually there keeps it inside. Scoped to this form rather than all .box-body
   rows so no other screen shifts. */
#add_cash_register_form .box-body > .row {
    margin-left: -10px;
    margin-right: -10px;
}

/* A flex item of the page header's .navbar, which lays its children out from
   flex-start; the auto margin eats the free space between the title and here,
   parking the widget on the trailing edge (the left one under dir="rtl", which
   is the mirrored equivalent). The navbar centres its items, so no top margin
   is needed to line it up with the heading. */
.settings-search {
    width: 360px;
    max-width: 100%;
    margin-left: auto;
}

.settings-search .input-group {
    width: 100%;
}

/* The select2 widget is taller than a bare input; match the addon to it so the
   icon cell does not sit short against the box. */
.settings-search .select2-container .select2-selection--single {
    height: 38px;
}

.settings-search .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 36px;
}

.settings-search .select2-container .select2-selection--single .select2-selection__arrow {
    height: 36px;
}

@media (max-width: 767px) {
    .settings-search {
        width: 100%;
    }
}

.sidebar-wrapper {
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
}

#sidebar .sidebar-menu-search {
    box-sizing: border-box;
    height: 46px;
    padding: 8px 12px 6px;
}

#sidebar.has-menu-search ul.menu-categories {
    height: calc(100vh - 127px - 46px) !important;
}

#sidebar.has-menu-search ul.menu-categories.ps {
    height: calc(100vh - 63px - 46px) !important;
}

/* Below 992px all.css re-pins the list to calc(100vh - 10px); same correction. */
@media (max-width: 991px) {
    #sidebar.has-menu-search ul.menu-categories.ps {
        height: calc(100vh - 10px - 46px) !important;
    }
}

#sidebar.has-menu-search ul.menu-categories li.menu:first-child > .dropdown-toggle {
    margin-top: 2px;
}


#sidebar .sidebar-menu-search-box {
    position: relative;
    display: block;
    background-color: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 6px;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

#sidebar .sidebar-menu-search-box:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

#sidebar .sidebar-menu-search-box:focus-within {
    background-color: rgba(255, 255, 255, 0.24);
    border-color: rgba(255, 255, 255, 0.65);
}

#sidebar .sidebar-menu-search-box .sidebar-menu-search-icon {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    color: rgba(255, 255, 255, 0.75);
    pointer-events: none;
}

#sidebar .sidebar-menu-search input {
    width: 100%;
    height: 30px;
    padding: 0 26px 0 28px;
    border: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    color: #fff;
    font-size: 13px;
    letter-spacing: 1px;
}

#sidebar .sidebar-menu-search input::placeholder {
    color: rgba(255, 255, 255, 0.65);
}

#sidebar .sidebar-menu-search-clear {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 6px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

#sidebar .sidebar-menu-search-clear:hover {
    color: #fff;
}

#sidebar .sidebar-menu-search-empty {
    padding: 2px 14px 6px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
}

/* A dropdown that only survived the filter because of its children is force
   expanded while searching; the arrow would otherwise still point right. */
#sidebar ul.menu-categories li.menu-search-expanded > .dropdown-toggle .sidemenu-right-icon {
    transform: rotate(90deg);
    transition: all ease 0.4s;
}

/* Mirror the icon/clear button for the RTL locales (<html dir="rtl">). */
[dir="rtl"] #sidebar .sidebar-menu-search-box .sidebar-menu-search-icon {
    left: auto;
    right: 8px;
}

[dir="rtl"] #sidebar .sidebar-menu-search input {
    padding: 0 28px 0 26px;
}

[dir="rtl"] #sidebar .sidebar-menu-search-clear {
    right: auto;
    left: 2px;
}

[dir="rtl"] #sidebar ul.menu-categories li.menu-search-expanded > .dropdown-toggle .sidemenu-right-icon {
    transform: rotate(-90deg);
}

/* all.css forces every sidebar element onto one clipped line
   (#sidebar * { overflow: hidden; white-space: nowrap; }), so long submenu
   labels like "Import Sales Commission Agents" were silently cut at the
   sidebar edge. Let submenu link text wrap onto further lines instead; the
   bullet (a:before, absolutely positioned) stays on the first line. */
#sidebar ul.menu-categories ul.submenu > li a {
    white-space: normal;
    overflow: visible;
    overflow-wrap: break-word;
}


@media (max-width: 400px) {
    .sub-header-container {
        padding: 0 12px !important;
    }

    .sub-header-container .navbar {
        flex-wrap: wrap;
    }

    .sub-header-container .navbar > .navbar-nav {
        flex: 1 1 auto;
        min-width: 0;
    }

    .sub-header-container .navbar > .navbar-nav > li {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
    }

    .sub-header-container .page-header,
    .sub-header-container .breadcrumb-one .breadcrumb {
        min-width: 0;
        max-width: 100%;
    }

    .sub-header-container .breadcrumb-one {
        display: block;
        min-width: 0;
        max-width: 100%;
    }

    .sub-header-container .breadcrumb-one .breadcrumb {
        flex-wrap: wrap;
    }

    .sub-header-container .breadcrumb-one .breadcrumb-item {
        min-width: 0;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .sub-header-container .breadcrumb-one .breadcrumb-item .h4,
    .sub-header-container .breadcrumb-one .breadcrumb-item a,
    .sub-header-container .breadcrumb-one .breadcrumb-item span {
        font-size: 1.05rem;
        line-height: 1.35;
    }
}

@media (max-width: 767px) {
    .header-container.fixed-top {
        position: sticky;
    }

    #content {
        margin-top: 0;
    }
}

/* ------------------------------------------------------------------
 * Pay Due modal - due breakdown
 *
 * The modal used to show a partial "due" (purchase only) beside an amount box
 * prefilled with purchase due + opening balance due, with nothing labelled as
 * the total. These rows are a single reconciled column that ends in the one
 * figure matching both the amount box and the ledger's balance due.
 * ------------------------------------------------------------------ */
.due-summary {
    border: 1px solid #e0e6ed;
    border-radius: 6px;
    background: #fff;
    margin-bottom: 18px;
    overflow: hidden;
}

.due-summary__party {
    padding: 12px 16px;
    background: #fbfcfe;
    border-bottom: 1px solid #e0e6ed;
}

.due-summary__party-role {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8a8a8a;
}

.due-summary__party-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    line-height: 1.35;
    word-break: break-word;
}

.due-summary__party-sub {
    font-size: 13px;
    color: #888;
    word-break: break-word;
}

.due-summary__lines {
    padding: 4px 16px 14px;
}

.due-summary__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    font-size: 14px;
}

.due-summary__label {
    color: #555;
}

/* Tabular figures so the column of amounts lines up digit for digit. */
.due-summary__value {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
    text-align: right;
    white-space: nowrap;
    color: #333;
}

.due-summary__op {
    color: #999;
    margin-right: 3px;
}


.due-summary__row--subtotal {
    border-top: 1px solid #e0e6ed;
    margin-top: 3px;
    padding-top: 10px;
    font-weight: 600;
}

.due-summary__row--subtotal .due-summary__label {
    color: #333;
}

.due-summary__row--total {
    align-items: center;
    border-top: 2px solid #D9BB54;
    margin-top: 5px;
    padding-top: 11px;
}

.due-summary__row--total .due-summary__label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #333;
}

/* Dark on white rather than the gold itself - the accent carries in the rule
   above, which does not have to pass a contrast ratio. */
.due-summary__row--total .due-summary__value {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: #222;
}

.due-amount-hint {
    margin-top: 6px;
    margin-bottom: 0;
    font-size: 12px;
    line-height: 1.45;
}

.due-amount-hint__text {
    display: block;
}

/* The reset sits inside muted help text, so it needs its own colour to read as
   something you can click rather than more of the sentence above it. */
.due-amount-hint a.pay_full_due {
    display: inline-block;
    margin-top: 3px;
    color: #357ca5;
    font-weight: 600;
    white-space: nowrap;
}

.due-amount-hint a.pay_full_due:hover,
.due-amount-hint a.pay_full_due:focus {
    color: #2a6488;
    text-decoration: underline;
}

.due-amount-hint a.pay_full_due .fa-sync {
    font-size: 10px;
    margin-right: 2px;
}

[dir="rtl"] .due-amount-hint a.pay_full_due .fa-sync {
    margin-right: 0;
    margin-left: 2px;
}

/* The modal is narrow; let the total wrap under its label instead of
   squeezing the amount on small screens. */
@media (max-width: 480px) {
    .due-summary__row--total {
        display: block;
    }

    .due-summary__row--total .due-summary__value {
        display: block;
        text-align: left;
        margin-top: 2px;
    }
}

[dir="rtl"] .due-summary__op {
    margin-right: 0;
    margin-left: 3px;
}

[dir="rtl"] .due-summary__value {
    text-align: left;
}

[dir="rtl"] .due-summary__row--total .due-summary__value {
    text-align: left;
}

@media (max-width: 480px) {
    [dir="rtl"] .due-summary__row--total .due-summary__value {
        text-align: right;
    }
}

#sidebar ul.menu-categories ul.submenu li > [data-active="true"]:before {
    background-color: #fff !important;
}

#sidebar ul.menu-categories ul.submenu > li.active > a,
#sidebar ul.menu-categories ul.submenu > li > a[data-active="true"],
#sidebar ul.menu-categories ul.submenu > li ul.sub-submenu > li.active > a,
#sidebar ul.menu-categories ul.submenu > li ul.sub-submenu > li > a[data-active="true"] {
    background-image: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.2),
        rgba(255, 255, 255, 0)
    );
    color: #fff;
    font-weight: 600;
    border-radius: 0;
}