:root {
  --blue: #3c4b64;
  --white: #ffffff;
  --Reportblue: rgba(13, 16, 44, 1);
}
.table-hover > tbody > tr:hover {
  background-color: #ffffff !important; /* Assuming you want the hover color to be white */
}
.footer {
  height: 30px !important;
  margin: 0px !important;
}
.nav-link {
  font-size: 12px !important;
}
.noselect {
  user-select: none;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
  -o-user-select: none;
}

.card {
  padding-bottom: 5px !important;
}
.no-select {
  user-select: none;
  -o-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
}
label {
  margin-bottom: 0px !important;
  font-size: 12px;
}
.form-control {
  font-size: smaller !important;

  margin-bottom: 0px !important;
}

.TextBoxClass {
  font-size: 12px;
}

.highcharts-credits {
  display: none !important;
}

.selected td {
  background-color: #bab9b9;
  color: #ffffff !important;
}

tbody tr:hover td {
  background: none repeat scroll 0 0 #bab9b9;
  color: #ffffff !important;
  cursor: pointer;
}
.card {
  box-shadow: 0 1px 9px 0 rgba(0, 0, 0, 0.09), 0 6px 20px 0 rgba(0, 0, 0, 0);
  margin-bottom: 0px !important;
}
.table-bordered {
  border: 1px solid #dfe7f3 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 10px !important;
  /* DO NOT add `overflow: hidden` (or clip/auto/scroll) here. A non-visible
     overflow on the <table> makes the table its own scroll container, which
     silently breaks `position: sticky` on every <th> inside it — the header
     row then scrolls away instead of freezing. Rounded corners are kept via
     the border-radius rules on the first/last cells below and in the grid
     JS styler (DT_ENGINE_UI.js). This has regressed many times; leave it. */
  background-color: #ffffff !important;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif !important;
  font-size: 13px !important;
}

/* Freeze the header row of EVERY .table-bordered grid (forms, modals, reports,
   lookup tables) whenever it sits in a scrolling ancestor. This is intentionally
   not scoped to .table-responsive so it also covers modal bodies and any custom
   scroll wrapper. Cells need an opaque background + z-index so body rows do not
   bleed through while scrolling. */
.table-bordered thead th,
.table-bordered thead td {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 25 !important;
}

/* Keep the rounded look now that the table no longer clips its overflow. */
.table-bordered thead tr:first-child th:first-child,
.table-bordered thead tr:first-child td:first-child {
  border-top-left-radius: 10px !important;
}
.table-bordered thead tr:first-child th:last-child,
.table-bordered thead tr:first-child td:last-child {
  border-top-right-radius: 10px !important;
}
.table-bordered tbody tr:last-child td:first-child {
  border-bottom-left-radius: 10px !important;
}
.table-bordered tbody tr:last-child td:last-child {
  border-bottom-right-radius: 10px !important;
}
.table-bordered thead th,
.table-bordered thead td {
  background-color: #eef6ff !important;
  color: #28476f !important;
  text-transform: uppercase !important;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.2 !important;
  height: 35px !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px solid #dfe7f3 !important;
}
.table-bordered tbody tr {
  height: 35px !important;
  background-color: #ffffff !important;
}
  .table-bordered tbody td {
    height: 35px !important;
    color: #1f2937 !important;
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid #dfe7f3 !important;
  }

/* Give every table cell a consistent left/right breathing space so values are
   never flush against the cell edge. Applies to header, body and footer of any
   grid (form grids, report grids, modal lookup grids, ...). */
.table-bordered th,
.table-bordered td {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* In-cell editors (the input/select that beginEdit* swaps in) match the cell padding. */
.table-bordered td input,
.table-bordered td select,
.table-bordered td textarea {
  padding-left: 6px;
  padding-right: 6px;
  box-sizing: border-box;
}

/* Report grid rows are built as HTML strings whose <td>/<th> carry only an inline
   text-align, and the legacy `td { padding: 0 }` above was winning on that page.
   Pin the padding on the report table ids so values are not flush. */
#IDinvReport th,
#IDinvReport td,
.report-grand-total-inner th,
.report-grand-total-inner td {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* Freeze all table header rows while the table body scrolls. */
.table-responsive {
  position: relative;
  overflow: auto !important;
  max-height: 46vh;
}

.table-responsive table thead,
.table-responsive table thead tr,
.table-responsive table thead th,
.table-responsive table thead td {
  position: sticky !important;
  top: 0 !important;
}

.table-responsive table thead {
  z-index: 20 !important;
}

.table-responsive table thead tr {
  z-index: 21 !important;
}

.table-responsive table thead th,
.table-responsive table thead td {
  z-index: 22 !important;
  background: #eef6ff !important;
  box-shadow: 0 1px 0 0 #dfe7f3;
}
.Thuvamodal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1500; /* Sit on top */
  padding-top: 65px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
  transition: 1.5s;
}
.Thuvamodal-content {
  background-color: #d9d9d9;
  margin: auto;
  padding: 05px;
  border: 1px solid #888;
  width: 92vw;
  max-width: 1400px;
  border-radius: 10px;
}
.Thuvaclose {
  color: #2b2b2b;
  /*float: right;*/
  /*font-size: 28px;*/
  font-weight: bold;
}

.Thuvaclose:hover,
.Thuvaclose:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
.Branchmodal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1500; /* Sit on top */
  padding-top: 65px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
  color: #000;
}
.BranchModalcontent {
  background-color: #fefefe;
  margin: auto;
  padding: 05px;
  border: 1px solid #888;
  width: 20%;
  height: 130px;
  border-radius: 10px;
  color: #000;
  margin-top: 50px;
}
/* Modal Content */

/* The Close Button */

@media screen and (max-width: 600px) {
  .separator {
    height: 1px;
    background: #dedede;
    margin: 2px 0px 2px 0px;
  }
}
@media (min-width: 600px) and (max-width: 768px) {
  .Thuvamodal-content {
    width: 96vw !important;
  }
}
table {
  background: #ffffff;
  border-radius: 0.25em;
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  font-family: Verdana;
  position: relative;
}
th {
  border-bottom: 1px solid #364043;
  color: #000000;
  font-size: 12px;
  font-weight: 100;
  padding: 2px 1px;
  text-align: center !important;
  /* Catch-all header freeze for any plain <table> not covered by the
     .table-bordered rule above. */
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 25;
  background: white;
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
  resize: horizontal !important;
}
td {
  color: #3c4b64;
  font-weight: 400;
  padding: 0;
  font-size: 11px;
}
.disabled td {
  color: #4f5f64;
}
tbody tr {
  background: #ffffff;
  color: #3c4b64;
}
tbody tr:hover {
  background: #ffffff;
}
#addiconimage {
  color: #282828;
  border-width: 0px;
}
#addiconNewLine {
  color: #282828;
  border-width: 0px;
}
#addiconBarcodeimage {
  color: #282828;
  border-width: 0px;
}
#addiconChequeimage {
  color: #282828;
  border-width: 0px;
}
#addiconPaymentimage {
  color: #282828;
  border-width: 0px;
}
#addiconJounalEntryimage {
  color: #282828;
  border-width: 0px;
}

/* --erp-* color tokens live in a single place now: src/scss/_custom.scss's
   :root block. CSS custom properties are visible to every stylesheet in the
   document regardless of which file defines them, so this legacy file (loaded
   outside the webpack bundle) can safely reference var(--erp-*) below without
   redefining them here. */

.selected td,
tbody tr.selected td {
  background-color: var(--erp-selected-row-blue) !important;
  color: var(--erp-header-button-blue) !important;
}

tbody tr:hover td {
  background: var(--erp-selected-row-blue) !important;
  color: var(--erp-header-button-blue) !important;
}

.table-bordered thead th,
.table-bordered thead td,
.table-bordered .table-header-cell,
.table-header-cell {
  background-color: var(--erp-editable-blue) !important;
  color: var(--erp-header-button-blue) !important;
}

.table-bordered tbody tr:nth-child(even),
tbody tr:nth-child(even) {
  background-color: var(--erp-alternate-row-blue) !important;
}

.table-bordered tbody tr:nth-child(even) td,
tbody tr:nth-child(even) td {
  background-color: var(--erp-alternate-row-blue);
}

td[style*="rgb(233, 236, 255)"],
td[style*="#bab9b9"],
input[style*="rgb(233, 236, 255)"],
select[style*="rgb(233, 236, 255)"],
textarea[style*="rgb(233, 236, 255)"] {
  background-color: var(--erp-editable-blue) !important;
  color: #111827 !important;
}

table {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

.jsdragtable-contents {
  background: #fff;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  box-shadow: 2px 2px 5px #aaa;
  padding: 0;
}

.jsdragtable-contents table {
  margin-bottom: 0;
}
#resp-table {
  display: table;
}
#resp-table-body {
  display: table-row-group;
}
.resp-table-row {
  display: table-row;
}
.table-body-cell {
  display: table-cell;
  border: 0;
  border-bottom: 1px solid #dfe7f3;
  padding: 6px 10px 6px 6px;
  color: #1f2937;
  background-color: white;
  vertical-align: middle;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
}
.table-header-cell {
  display: table-cell;
  border: 0;
  border-bottom: 1px solid #dfe7f3;
  padding: 0 14px;
  color: #28476f;
  text-transform: uppercase;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 12px;
  height: 35px;
  vertical-align: middle;
  background-color: #eef6ff;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

/* Compact modal ("Add Payment" popup in partner payment / credit-memo / debit-memo):
   it only holds Pay Mode + Amount, so size it to its content instead of the
   full-screen lookup-grid dimensions. Toggled from GenarateModal (#Modalcontent). */
.Thuvamodal-content.Thuvamodal-content--compact {
  width: auto;
  max-width: 620px;
}

.Thuvamodal-content--compact .table-responsive.card {
  height: auto !important;
  max-height: 80vh !important;
  overflow: visible !important;
}

/* HR approval modal (#HrApprovalModal in approvalattandance / addmissedemployee):
   its body sits directly in .table-responsive.card, which is locked to 78vh with
   overflow:hidden - so a tall approval (many punches / breakdown rows) gets
   clipped with no way to reach it. Let the box grow to its content and scroll
   vertically once it would exceed the viewport. */
#HrApprovalModal .table-responsive.card {
  height: auto !important;
  max-height: 90vh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* Modal search box: pad the right edge too (inline style only sets padding-left). */
.Thuvamodal-content input.deletable {
  padding-right: 10px;
}

/* ---------------------------------------------------------------------------
   bootstrap-daterangepicker: shield its calendar from the unscoped table
   rules in this file. The picker renders a real <table><tbody><tr><td>, so
   `tbody tr:hover td { background/color !important }`, the nth-child striping
   and the sticky/resize `th` rules above all leak into it. On hover the row
   `!important` background painted straight over the selected start/end dates
   and the in-range shading, so the current selection looked like it vanished.
   Re-assert the picker's own look with matching specificity + !important. */
.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  box-shadow: none !important;
  resize: none !important;
}

.daterangepicker .calendar-table tbody tr:hover td,
.daterangepicker .calendar-table tbody tr:nth-child(even),
.daterangepicker .calendar-table tbody tr:nth-child(even) td,
.daterangepicker .calendar-table td.available {
  background: #fff !important;
  /* color: inherit !important; */
  color:#282828;
}

.daterangepicker .calendar-table td.available:hover {
  background-color: #eee !important;
  /* color: inherit !important; */
  color:#282828;
}

.daterangepicker .calendar-table td.in-range,
.daterangepicker .calendar-table tbody tr:hover td.in-range {
  background-color: #ebf4f8 !important;
  color: #000 !important;
}

/* Selected start/end date keeps the selected colour in EVERY state - hovering
   it (row hover + cell hover) must never fall back to the grey available:hover.
   Listed last and with the highest specificity so it wins every permutation. */
.daterangepicker .calendar-table td.active,
.daterangepicker .calendar-table td.active.available,
.daterangepicker .calendar-table tbody tr td.active,
.daterangepicker .calendar-table tbody tr td.active.available{
  background-color: #357ebd !important;
  color: #fff !important;
}

.daterangepicker .calendar-table td.off,
.daterangepicker .calendar-table td.off.in-range,
.daterangepicker .calendar-table td.off.start-date,
.daterangepicker .calendar-table td.off.end-date,
.daterangepicker .calendar-table tbody tr:hover td.off {
  background-color: #fff !important;
  color: #999 !important;
}