@font-face {
  font-family: 'Khmer OS Moul';
  src: url('../fonts/KhmerOSMuol.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'Battambang';
  src: url('../fonts/Battambang-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* The same file again, but declared for the Khmer block ONLY. Naming this family
   FIRST in a stack (see the Khmer text section further down) hands every Khmer
   codepoint to Battambang and leaves every other codepoint to the families after
   it — the unicode-range makes the browser skip this face for Latin outright.

   Why it matters: with Battambang named LAST the browser only reached it if no
   earlier family had the glyph. That held on this machine, but on a machine that
   HAS a Khmer-capable font earlier in the stack (a locally installed Inter build
   with Khmer, an OS whose system-ui covers Khmer, a legacy non-Unicode Khmer font
   picked up as the generic sans-serif), Khmer was drawn by that font instead —
   and a font without the Khmer OpenType shaping tables draws coeng (subscript)
   as a loose sign next to the consonant instead of stacking it underneath. Which
   font won differed per stack, so one region of the UI could stack correctly
   while another (the side menu, whose stack is menu-modal.css's, not this one)
   did not. Pinning by unicode-range takes the OS out of the decision. */
@font-face {
  font-family: 'Khmer';
  src: url('../fonts/Battambang-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  /* Khmer + Khmer Symbols, plus the zero-width space Khmer uses as a word break
     and the dotted circle a renderer shows for an orphan mark. */
  unicode-range: U+1780-17FF, U+19E0-19FF, U+200B, U+25CC;
}

@font-face {
  font-family: 'Yeaksa write';
  src: url('../fonts/Yeaksawrite.ttf') format('truetype');

}

@font-face {
  font-family: 'Yeaksa khema';
  src: url('../fonts/Yeaksakhema.ttf') format('truetype');

}

@font-face {
  font-family: 'Yeaksa hema';
  src: url('../fonts/Yeaksahema.ttf') format('truetype');

}

@font-face {
  font-family: 'Yeaksa lima';
  src: url('../fonts/Yeaksalima.ttf') format('truetype');

}

@font-face {
  font-family: 'Yeaksa sychan';
  src: url('../fonts/Yeaksasychan.ttf') format('truetype');

}

@font-face {
  font-family: 'Yeaksa thema';
  src: url('../fonts/Yeaksathema.ttf') format('truetype');

}

@font-face {
  font-family: 'Yeaksa title';
  src: url('../fonts/Yeaksatitle.ttf') format('truetype');

}

@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: var(--mk-gray-600-2);
  }

  .main-header .navbar {
    height: auto;
  }
}

.bg-danger {
  background-color: var(--mk-rose-200-2) !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;
}

.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: var(--mk-gray-50-7) !important;
}

.p-5-5 {
  padding: 5px 5px !important;
}

.m-4 {
  margin: 4px;
}

.skin-black .main-header,
.skin-black-light .main-header {
  color: var(--mk-slate-700-6) !important;
}

.skin-black .main-header .navbar .nav .open>a {
  color: var(--mk-gray-500-2) !important;
}

.skin-black .main-header .navbar .nav>li>a:hover {
  color: var(--mk-gray-500-2) !important;
}

.skin-black .main-header .navbar>.sidebar-toggle:hover {
  color: var(--mk-gray-500-2) !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.table-pdf thead tr {
  background-color: var(--mk-cyan-600) !important;
  color: var(--mk-white);
}

.table-pdf thead tr th {
  color: var(--mk-white) !important;
}

.blue-heading {
  background-color: var(--mk-cyan-600);
  color: var(--mk-white);
}

.table-pdf .odd {
  background-color: var(--mk-blue-200-32);
}

.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: var(--mk-gray-400-19);
  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: var(--mk-slate-300-32); */
  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: var(--mk-white);
}

.wizard>.steps>ul>li {
  width: 33.33% !important;
}

.wizard>.content {
  /* background: var(--mk-slate-700-14) !important; */
}

legend {
  color: var(--mk-white);
  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: var(--mk-blue-500-23);
  width: 100%;
}

.login-header {
  font-size: 27px;
  font-weight: 600;
}

.login-header a {
  color: var(--mk-white);
}

.form-header {
  font-size: 18px;
  margin: 16px 0;
}

.btn-login {
  padding: 6px 52px !important;
}

/* .right-col {
  background-color: var(--mk-blue-900-4);
  height: 100%;
  min-height: 100vh;
} */

/* Background color added by Prashant */
.right-col {
  background: linear-gradient(to right, var(--mk-blue-400), var(--mk-blue-500-3));
  height: 100%;
}

/* .right-col label {
  color: var(--mk-white);
}

.right-col a, .text-white a {
  color: var(--mk-white);
  font-weight: 600;
  font-size: 15px
}
.right-col a:hover, .text-white a:hover {
  color: var(--mk-gray-300);
}
.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: var(--mk-orange-500-9);
}

.img-thumbnail {
  position: relative;
  width: 70px;
  height: 70px;
  background-color: var(--mk-white);
  border: 1px solid var(--mk-gray-200);
  border-radius: 2px;
  transition: border .2s ease-in-out;
  padding: 4px;
  margin: 3px;
  text-align: center;
}

.img-thumbnail>.badge {
  position: absolute;
  top: -5px;
  right: -7px;
  font-size: 9px;
  font-weight: 400;
  cursor: pointer;
}

.navbar-nav>.notifications-menu>.dropdown-menu>li .menu {
  max-height: 350px;
}

.bg-aqua-lite {
  background-color: var(--mk-green-400-9);
}

.navbar-nav>.notifications-menu>.dropdown-menu>li .menu>li>a {
  white-space: normal;
}

.spacer {
  margin-top: 20px;
}

#product_list_body {
  max-height: calc(100vh - 185px);
  overflow-y: scroll;
  overflow-x: hidden;
}

/* Index tables: the action buttons (.box-tools — AI / import / help / +) and the
   DataTable toolbar (search / length / export) share ONE line on desktop — the
   buttons overlay the top-right so the toolbar row flows up beside them. On mobile
   they stay stacked (buttons on top). Scoped to boxes that contain a DataTable and
   whose header is action-buttons-only (no title), so form/detail pages are untouched. */
@media (min-width: 992px) {
  .box-primary:has(.dataTables_wrapper) {
    position: relative;
  }
  .box-primary:has(.dataTables_wrapper) .box-header:not(:has(.box-title)) {
    padding: 0 !important;
    min-height: 0 !important;
  }
  .box-primary:has(.dataTables_wrapper) .box-header:not(:has(.box-title)) .box-tools {
    position: absolute !important;
    top: 8px;
    right: 12px;
    margin: 0 !important;
    z-index: 4;
  }
}

.div-overlay {
  cursor: not-allowed;
  background: var(--mk-gray-200-4);
  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: var(--mk-black) !important;
}

.td-full-width {
  white-space: nowrap;
}

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

table.dataTable tbody>tr.selected {
  background-color: var(--mk-blue-300-10);
}

tr.footer-total>td {
  vertical-align: middle !important;
}

.error {
  color: red !important;
}

/*  pos tab */
div.pos-tab-container {
  z-index: 10;
  background-color: var(--mk-white);
  padding: 0 !important;
  border-radius: 4px;
  -moz-border-radius: 4px;
  border: 1px solid var(--mk-gray-200);
  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: var(--mk-blue-600-32);
}

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: var(--mk-cyan-600-2);
  color: var(--mk-white);
    border-color: var(--mk-cyan-600-2);
} */

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: linear-gradient(to right, var(--mk-blue-400), var(--mk-blue-500-3));
  color: var(--mk-white);
  border-color: transparent;
}


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 var(--mk-cyan-600-2);
}

div.pos-tab-content {
  background-color: var(--mk-white);
  /* border: 1px solid var(--mk-gray-100); */
  padding-left: 20px;
  padding-top: 20px;
}

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

.add-product-price-table th {
  background-color: var(--mk-green-500);
  color: white;
}

.blue-header th {
  background-color: var(--mk-cyan-600-2);
  color: white;
}

.table-th-green th {
  background-color: var(--mk-green-500);
  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 var(--mk-cyan-600-2) !important;
}

.cursor-pointer {
  cursor: pointer !important;
}

.pos_product_div {
  /* Fills available vertical space — but a touch shorter than full-bleed
     so the Items/Total row and action buttons are always visible without
     scrolling the page. Was: height: 40vh. */
  overflow-y: auto;
  min-height: 55vh;
  height: calc(100vh - 320px);
  max-height: calc(100vh - 260px);
}

/* On small screens (mobile) reduce the reserved space so the table still fills well. */
@media (max-width: 767px) {
  .pos_product_div {
    min-height: 50vh;
    height: calc(100vh - 250px);
    max-height: calc(100vh - 200px);
  }
}

.bg-lightgray {
  background-color: var(--mk-gray-100-20) !important;
}

.balance_due_box>li {
  padding: 11px 5px 0px 5px;
}

.option-div {
  padding: 15px;
  background-color: var(--mk-slate-300-4);
  color: var(--mk-gray-900);
  border: 1px solid var(--mk-slate-300-4);
  cursor: pointer;
}

.option-div input[type="radio"] {
  display: none;
}

.option-div-group .icon {
  color: var(--mk-rose-600-11);
  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: var(--mk-cyan-600-4) !important;
}

.bg-info>a {
  color: var(--mk-white) !important;
}

.bg-info>a:hover {
  background-color: var(--mk-blue-600-3) !important;
}

ul.dt-button-collection {
  background-color: var(--mk-cyan-600-4);
}

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: var(--mk-green-400-10) !important;
  color: var(--mk-white) !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: var(--mk-gray-100-9); 
} */

/* Handle */
/* ::-webkit-scrollbar-thumb {
    background: var(--mk-gray-500-3); 
} */

/* Handle on hover */
/* ::-webkit-scrollbar-thumb:hover {
    background: var(--mk-gray-700-2); 
} */

/* 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;
  }
}

.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: var(--mk-gray-500-21) !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: var(--mk-gray-700-2) !important;
}

.color-555 * {
  color: var(--mk-gray-700-2) !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: var(--mk-white);
}

.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: 3px;
  padding-right: 3px;
}

.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: var(--mk-white);
  border-radius: 12px;
  padding: 8px;
}

.product_box .image-container {
  height: 50px;
  margin: auto;
  width: 100%;
  margin-bottom: 4px;

}

.product_box .image-container img {
  height: 100%;
  width: 100%;
  border-radius: 12px;
}

.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: var(--mk-black);
  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: var(--mk-violet-600-5) !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
}

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

.tree-actions {
  margin-left: 20px;
  display: none;
}

.jstree-hovered .tree-actions {
  display: inherit;
}
@font-face {
  font-family: 'Koulen';
  src: url('../fonts/Koulen_0.ttf') format('truetype');
}

/* Always-visible scrollbar (restores the styled bar from app.scss; macOS
   otherwise uses overlay scrollbars that only flash while scrolling). */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  background-color: var(--mk-gray-100-2);
}

::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: var(--mk-gray-100-2);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: var(--mk-gray-400-4);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

* {
  scrollbar-width: auto;
  scrollbar-color: var(--mk-gray-400-4) var(--mk-gray-100-2);
}

/* === Theme-colour taskbar gradients + hovers — completes ALL theme colours.
   The Tailwind build only compiled some (blue's gradient was missing entirely),
   so changing Theme color in /settings/system had no effect for those. === */
.tw-from-blue-800{--tw-gradient-from:var(--mk-blue-700) var(--tw-gradient-from-position);--tw-gradient-to:#1e40af00 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.tw-to-blue-900{--tw-gradient-to:var(--mk-blue-800) var(--tw-gradient-to-position)}
.tw-bg-blue-700{background-color:var(--mk-blue-600)}
.hover\:tw-bg-blue-700:hover{background-color:var(--mk-blue-600)}
.tw-from-black-800{--tw-gradient-from:var(--mk-slate-900) var(--tw-gradient-from-position);--tw-gradient-to:#1f293700 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.tw-to-black-900{--tw-gradient-to:var(--mk-black) var(--tw-gradient-to-position)}
.tw-bg-black-700{background-color:var(--mk-slate-800-2)}
.hover\:tw-bg-black-700:hover{background-color:var(--mk-slate-800-2)}
.tw-from-purple-800{--tw-gradient-from:var(--mk-indigo-600-4) var(--tw-gradient-from-position);--tw-gradient-to:#4a1fb800 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.tw-to-purple-900{--tw-gradient-to:var(--mk-indigo-700-4) var(--tw-gradient-to-position)}
.tw-bg-purple-700{background-color:var(--mk-indigo-600-2)}
.hover\:tw-bg-purple-700:hover{background-color:var(--mk-indigo-600-2)}
.tw-from-green-800{--tw-gradient-from:var(--mk-green-900-8) var(--tw-gradient-from-position);--tw-gradient-to:#085d3a00 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.tw-to-green-900{--tw-gradient-to:var(--mk-green-900-9) var(--tw-gradient-to-position)}
.tw-bg-green-700{background-color:var(--mk-green-800-5)}
.hover\:tw-bg-green-700:hover{background-color:var(--mk-green-800-5)}
.tw-from-red-800{--tw-gradient-from:var(--mk-rose-600-7) var(--tw-gradient-from-position);--tw-gradient-to:#ff000000 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.tw-to-red-900{--tw-gradient-to:var(--mk-rose-500-12) var(--tw-gradient-to-position)}
.tw-bg-red-700{background-color:var(--mk-rose-700-4)}
.hover\:tw-bg-red-700:hover{background-color:var(--mk-rose-700-4)}
.tw-from-yellow-800{--tw-gradient-from:var(--mk-amber-600-4) var(--tw-gradient-from-position);--tw-gradient-to:#f2df0000 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.tw-to-yellow-900{--tw-gradient-to:var(--mk-amber-500-4) var(--tw-gradient-to-position)}
.tw-bg-yellow-700{background-color:var(--mk-amber-700)}
.hover\:tw-bg-yellow-700:hover{background-color:var(--mk-amber-700)}

/* Plain -800 backgrounds for the profile-menu business header box
   (tw-bg-{theme}-800); blue & black were missing so those themes showed no colour. */
.tw-bg-blue-800{background-color:var(--mk-blue-700)}
.tw-bg-black-800{background-color:var(--mk-slate-900)}

/* ---------------------------------------------------------------------------
   Inline yes/no switch for list tables (first used by the "Sale Online?" column
   on /products). Global on purpose: any list that needs a one-click boolean
   should reuse .so-switch rather than invent its own control.
   --------------------------------------------------------------------------- */
.so-switch{position:relative;display:inline-block;width:42px;height:22px;margin:0;vertical-align:middle;cursor:pointer;}
.so-switch input{position:absolute;opacity:0;width:0;height:0;}
.so-slider{position:absolute;inset:0;background:var(--mk-slate-300-2);border-radius:22px;transition:background .18s;}
.so-slider:before{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;background:var(--mk-white);
                  border-radius:50%;transition:transform .18s;box-shadow:0 1px 2px rgba(0,0,0,.25);}
.so-switch input:checked + .so-slider{background:var(--mk-green-700);}
.so-switch input:checked + .so-slider:before{transform:translateX(20px);}
.so-switch input:focus-visible + .so-slider{outline:2px solid var(--mk-blue-500);outline-offset:2px;}
.so-switch input:disabled + .so-slider{opacity:.55;}
/* read-only mark for users without the update permission */
.so-static{display:inline-block;min-width:22px;font-size:13px;}
.so-static.on{color:var(--mk-green-700);}
.so-static.off{color:var(--mk-slate-300-2);}

/* ---------------------------------------------------------------------------
   Khmer text.

   Inter (the Tailwind stack) and the AdminLTE stack carry no Khmer glyphs, so
   every Khmer label was drawn by whatever font the browser happened to fall back
   to — different shapes from page to page, and coeng (subscript) marks clipped by
   the tight Latin line-height. Battambang ships with the app (@font-face at the
   top of this file) but nothing named it, so it was never even downloaded.

   'Khmer' is the same Battambang file restricted to the Khmer unicode-range (see
   the @font-face at the top of this file), so naming it FIRST costs Latin nothing
   — the browser skips that face for any codepoint outside the range — while making
   Khmer resolve to a font we ship instead of to whatever the machine happens to
   offer. Battambang is kept at the end as the plain-family fallback.
   Settings ▸ System Font still wins: that rule is !important and already carries
   Battambang as its own fallback.
   --------------------------------------------------------------------------- */
body, .thetop, #sidebar, .content-wrapper, .main-header, .main-sidebar, .modal, .box,
.sm-menu, .grid-menu, .nav, .dropdown-menu, table, .btn, .form-control,
h1, h2, h3, h4, h5, h6, p, label, td, th, li, a,
button, input, select, textarea,
span:not([class*="fa"]):not([class*="glyphicon"]):not([class*="icon"]) {
    font-family: "Khmer", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, "Battambang", sans-serif;
}

/* Khmer stacks glyphs above and below the line; at the Latin 1.25 line-height the
   marks are cut off by any box that hides its overflow (every truncating menu row). */
#sidebar .tw-truncate, .sm-menu .sm-app-name, .sm-menu .sm-cat, .grid-menu .home-label,
.menu-modal .tw-truncate {
    line-height: 1.65;
}

/* ---------------------------------------------------------------------------
   Row action menu (contacts, and anything else that reuses it).

   The toggle was a bare grey caret and the entries were plain glyphs; the owner
   asked for an icon with a colourful background. The toggle is now a gradient
   icon button, and every entry carries a small coloured tile whose colour IS the
   meaning — blue reads, amber edits, red destroys — so the menu can be scanned
   without reading it. The colours are written inline by core/views/contact.py
   (ACT_COLOURS); this file only gives them their shape.
   --------------------------------------------------------------------------- */
.act-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 28px; padding: 0; border: 0; border-radius: 8px;
    color: var(--mk-white); font-size: 13px; line-height: 1; cursor: pointer;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .25);
    transition: filter .15s, transform .15s;
}
.act-toggle:hover, .act-toggle:focus { color: var(--mk-white); filter: brightness(1.08); }
.act-toggle:active { transform: scale(.94); }
.act-menu.open .act-toggle { filter: brightness(.92); }

/* The list carries its OWN class, not a descendant selector: while open, the menu is
   portalled to <body> (layouts/partials/table_dropdown.html moves it out so the table's
   overflow cannot clip it), which strips every ancestor a rule could hang off. */
.act-list.dropdown-menu { padding: 6px; border-radius: 12px; border: 1px solid var(--mk-slate-200);
                          box-shadow: 0 12px 30px rgba(15, 23, 42, .16); min-width: 214px; }
/* A menu entry can be a <button> where the page's JS binds a button (the user
   list's delete), or a <button> inside its own <form> (the usual delete: POST +
   _method=DELETE + the CSRF input). Both have to look exactly like the links. */
.act-list > li > form { margin: 0; display: block; }
.act-list > li > form > button,
.act-list > li > button {
    display: flex !important; align-items: center; gap: 10px; width: 100%;
    padding: 7px 9px; border-radius: 9px; font-size: 13px; font-weight: 500;
    color: var(--mk-slate-800); white-space: nowrap;
    background: none; border: 0; text-align: left; cursor: pointer;
}
.act-list > li > form > button:hover, .act-list > li > form > button:focus,
.act-list > li > button:hover, .act-list > li > button:focus { background: var(--mk-blue-100-2); }
.act-list > li > a {
    display: flex !important; align-items: center; gap: 10px; padding: 7px 9px;
    border-radius: 9px; font-size: 13px; font-weight: 500; color: var(--mk-slate-800);
    white-space: nowrap;
}
.act-list > li > a:hover,
.act-list > li > a:focus { background: var(--mk-blue-100-2); color: var(--mk-blue-950); }
.act-list > li.divider { margin: 5px 4px; background: var(--mk-blue-100); }
.act-ico {
    flex: 0 0 26px; width: 26px; height: 26px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--mk-white); font-size: 12px; line-height: 1;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .22);
}
.act-ico i { color: var(--mk-white); }