:root {
  --dt-row-hover: 0, 0, 100;
  --dt-row-hover-alpha: 0.1;
  --dt-row-stripe: 0, 0, 100;
  --dt-row-stripe-alpha: 0.04;
  --dt-row-selected: 209, 224, 246;
  --dt-row-selected-text: 84, 84, 84; 
	--dt-button-fill: #7c7c7c;  
}

/* cell font size and padding */
table.dataTable>thead>tr>th, 
table.dataTable>thead>tr>td,
table.dataTable>tbody>tr>th, 
table.dataTable>tbody>tr>td,
table.dataTable>tfoot>tr>th, 
table.dataTable>tfoot>tr>td {
  font-size: 0.9em;
}
table.dataTable>thead>tr>th, 
table.dataTable>thead>tr>td {
  padding: 10px 6px;
}
table.dataTable>tbody>tr>th, 
table.dataTable>tbody>tr>td,
table.dataTable>tfoot>tr>td {
  padding: 4px 6px;
}

table.dataTable>tbody>tr>th.dt-no-padding, 
table.dataTable>tbody>tr>td.dt-no-padding,
table.dataTable>tfoot>tr>td.dt-no-padding {
  padding: 0px 6px;
}

table.dataTable>thead>tr>th {
  vertical-align:middle;
}
table.dataTable tr td.dt-selector {
  line-height: 0;
}
table.dataTable tr:not(.selected) td.dt-selector svg {
  fill: #dcdcdc;
}
table.dataTable tr:not(.selected) td.dt-selector:hover svg {
  fill: #9e9e9e;
}
table.dataTable tr.selected td.dt-selector svg {
  fill: #75ade7;
}
table.dataTable tr.selected td.dt-selector:hover svg {
  fill: #4291e6;
}

.dt-container {
  padding-left: 5px;
  padding-right: 5px;
}

.dt-container .toolbar,
.dataTables_wrapper .toolbar {
  display: flex;
  align-items: center;
  margin: 5px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.dt-container .dt-edit-controls,
.dt-container .toolbar .group,
.dataTables_wrapper .toolbar .group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  flex-basis: content;
  margin: 5px;
}
div.dt-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.dt-container,
.dataTables_wrapper {
  overflow-x: auto;
  padding-bottom: 10px;
}
.dt-container label,
.dataTables_wrapper label {
  font-weight: normal;
  font-size: 1em;
}
.dt-container .dt-length,
.dataTables_wrapper .dataTables_length {
  padding-top: 0.25em;
  font-size: 0.9em;
}
.dt-container:has(table.dt-fullscreen) {
  min-height: 300px;
  width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  box-sizing: border-box;
}

.dataTable>tbody>tr.child span.dtr-title {
  font-weight: 400;
}
.dataTable>tbody>tr.child ul.dtr-details {
  width: 100%;
}
.dataTable>tbody>tr.child ul.dtr-details>li {
  display: flex;
}
.dataTable>tbody>tr.child span.dtr-title {
  flex: 1;
  margin-right: 15px;
}
.dataTable>tbody>tr.child span.dtr-data {
  flex: 1;
  white-space: normal;
}

.dataTable tr td {
  cursor: pointer;
}

.dataTable tr td img.dt-image {
  width: 50px;
  height: 50px;
  object-fit: contain;
  border-radius: 50%;
  margin: 4px 0;
}
.dataTable tr td img.dt-icon {
  width:20px;
  height:20px;
  object-fit: contain;
}

.dataTable>thead>tr>th, 
.dataTable>thead>tr>td {
  color: var(--table-header-color);
}
.dataTable>thead>th.text-center, 
.dataTable>thead>td.text-center {
  text-align: center;
}
.dataTable>thead>th.text-right, 
.dataTable>thead>td.text-right {
  text-align: right;
}
.dataTable>thead>th.text-left, 
.dataTable>thead>td.text-left {
  text-align: left;
}

table.dataTable>tfoot>th, 
table.dataTable>tfoot>td {
  font-weight: normal;
}

table.dataTable>tfoot>tr>th {
  text-align: right;
  white-space: break-spaces;
}

table.dataTable.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #f5f5f5;
}

.dataTable input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.dataTable input[type="checkbox"]:checked {
  background: #75ade7;
}
.dataTable input[type="checkbox"].status:checked {
  background: var(--green-color);
}
.dataTable input[type="checkbox"]:checked::after {
  top: 0;
  left: 0;
  content: "";
  border: 3px solid white;
  width: 16px;
  height: 16px;
}
.dataTable input[type="checkbox"]:focus {
  border-color: #acc8e5; 
}

.pane-button {
  display: flex;
  align-items: center;
}
.pane-button svg {
  width: 24px;
  height: 24px;
}
.pane-button span {
  margin-left: 5px;
}
.dtsp-titleRow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.dtsp-title {
  flex: 1;
  text-align: left;
  white-space: nowrap;
}

/* processing */
div.dt-processing,
.dataTables_processing {
  color: transparent!Important;
  z-index: -1;
  display: none!Important;
}

div.dt-processing>div:last-child>div:nth-child(1),
div.dt-processing>div:last-child>div:nth-child(2),
div.dt-processing>div:last-child>div:nth-child(3),
div.dt-processing>div:last-child>div:nth-child(4),
div.dataTables_processing>div:last-child>div:nth-child(1),
div.dataTables_processing>div:last-child>div:nth-child(2),
div.dataTables_processing>div:last-child>div:nth-child(3),
div.dataTables_processing>div:last-child>div:nth-child(4) {
  margin-top: 20px;
  background-color: var(--menu-color);
}

/* searchPanes */
div.dtsp-searchPane:has(tr.selected) div.dtsp-topRow.dtsp-bordered {
  border: 1px solid red;
}
div.dtsp-panesContainer div.dtsp-searchPanes div.dtsp-searchPane {
  position: relative;
}
div.dtsp-panesContainer div.dtsp-searchPanes div.dtsp-searchPane div.dt-container,
div.dtsp-panesContainer div.dtsp-searchPanes div.dtsp-searchPane div.dataTables_wrapper {
  position: absolute;
  z-index: 2;
  background: #fff;
  box-shadow: 5px 5px 5px #e2e2e2;
}
div.dtsp-panesContainer .dtsp-showAll {
  /* hide show all panes */
  display: none;
}

/* buttons */
.dt-column-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 4px;
  padding: 8px;
  background: none;
  cursor: pointer;
  font-size: 0.9em;
  color: var(--table-header-color);
  width: 100%;
  border: 1px solid #adadad;
  svg {
    fill: var(--table-header-color);
    width: auto;
    height: 18px;
    cursor: pointer;    
  }
  &:hover {
    background-color: #cacaca;
    border-color: #adadad;
  }
}
div.dt-buttons>.dt-button, 
div.dt-buttons>div.dt-button-split .dt-button {
  background: none;
  border: none;
  border-radius: 4px;
  min-width: 36px;
  min-height: 36px;
  line-height: 0;
  margin: 0;
  padding: 0 4px;
}
td>div.dt-buttons>.dt-button, 
td>div.dt-buttons>div.dt-button-split .dt-button {
  border: 1px solid transparent;
}
td>div.dt-buttons>.dt-button:hover:not(.disabled):not([disabled]),
td>div.dt-buttons>div.dt-button-split .dt-button:hover:not(.disabled):not([disabled]) {
  border: 1px solid lightgray;
  background-color: #fff;
}

div.dt-buttons>.dt-button svg {
  height: 20px;
  fill: var(--dt-button-fill);
}
td>div.dt-buttons>.dt-button svg {
  height: 18px;
}


div.dt-buttons>.dt-button[disabled],
div.dt-buttons>.dt-button.disabled,
div.dt-buttons>.dt-button[disabled]:hover, 
div.dt-buttons>.dt-button.disabled:hover, 
div.dt-buttons>div.dt-button-split .dt-button[disabled]:hover, 
div.dt-buttons>div.dt-button-split .dt-button.disabled:hover {
  background: none;
  background-color: transparent;
  cursor:not-allowed;
  border: none;
}
div.dt-buttons>.dt-button:hover:not(.disabled):not([disabled]), 
div.dt-buttons>div.dt-button-split .dt-button:hover:not(.disabled):not([disabled]) {
  background: none;
  background-color:#e3e3e3;
  border: none;
}
div.dt-buttons>.dt-button[disabled] svg,
div.dt-buttons>.dt-button.disabled svg,
div.dt-buttons>.dt-button[disabled]:hover svg, 
div.dt-buttons>.dt-button.disabled:hover svg, 
div.dt-buttons>div.dt-button-split .dt-button[disabled]:hover svg, 
div.dt-buttons>div.dt-button-split .dt-button.disabled:hover svg {
  fill: var(--disabled-button-color);
}

td>.dt-buttons {
  float: right;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

/* buttons container */
div.dt-buttons > div.dt-buttons {
  opacity: 0;
  position: absolute;
  right: 0;
  background-color: white;
  box-shadow: 0 4px 10px rgb(0 0 0 / 50%);
  border: 1px solid rgb(0 0 0 / 11%);
  border-radius: 5px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;  
  transition: all 0.3s ease-in-out;
}
div.dt-buttons:hover > div.dt-buttons,
div.dt-buttons > div.dt-buttons:hover {
  opacity: 1;
}
.dt-buttons .dt-switch {
  display: flex;
  align-items: center;
}
.dt-buttons .dt-switch .dt-switch-label {
  margin-left: 0;
  margin-right: 10px;
}
.dt-buttons .dt-switch .switch {
  margin: 0;
}

.dt-edit-controls .dt-switch {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
.dt-edit-controls .dt-switch>.switch {
  margin: 5px 15px 5px 10px;
}
label.dt-switch-label {
  font-size: 0.88em;
  margin-bottom: 0;
  margin-left: 10px;
}

/* add button */
.dt-buttons>.dt-button.dt-add-button svg {
  fill: #1ec10e;
}
/* edit button */
.dt-buttons>.dt-button.dt-edit-button svg {
  fill: #f5a05e;
}
/* excel export button */
.dt-buttons>.dt-button.dt-excel-button svg {
  fill: #107C41;
}

.dt-buttons>.dt-button>.dt-edit-button {
  height: 36px;
  background-color: #f5a05e;
  -webkit-mask: url(/../image/icons/edit.svg) no-repeat center;
  mask: url(/../image/icons/edit.svg) no-repeat center;  
}
  /* info button */
.dt-buttons>.dt-button.dt-info-button svg {
  fill: #4abaf5;
}
/* delete button */
.dt-buttons>.dt-button>.dt-del-button {
  height: 16px;
  background-color: #E97777;
  -webkit-mask: url(/../image/icons/delete.svg) no-repeat center;
  mask: url(/../image/icons/delete.svg) no-repeat center;  
}
.dt-buttons>.dt-button.dt-del-button svg {
  fill: #E97777;
}
/* close button */
.dt-buttons>.dt-button.dt-close-button svg {
  fill: #E97777;
}
/* unlock button */
.dt-buttons>.dt-button.dt-unlock-button svg {
  fill: #E97777;
}
/* save button */
.dt-buttons>.dt-button.dt-save-button svg {
  fill: #4abaf5;
}
/* print button */
.dt-buttons>.dt-button.dt-print-button svg {
  fill: #4a8af5;
}
.dt-buttons>.dt-button.dt-print-original-button svg {
  fill: #5cb85c;
}
.dt-buttons>.dt-button.buttons-pdf svg,
.dt-buttons>.dt-button.dt-pdf-button svg {
  fill: #f54a53;
}
/* popup button */
.dt-buttons .dt-popup-button {
  height: 36px;
  background-color: var(--dt-button-fill);
  -webkit-mask: url(/../image/icons/popup.svg) no-repeat center;
  mask: url(/../image/icons/popup.svg) no-repeat center;  
}

/* changed cell */
td.dt-changed{
  outline: 2px solid #f00;
  outline-offset: -2px;
}

/* page */
div.dt-container .dt-paging .dt-paging-button.current, 
div.dt-container .dt-paging .dt-paging-button.current:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.current, 
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: none;
  border: 1px solid #ccc;
  border-radius: 4px;
}

div.dt-container .dt-paging .dt-paging-button,
.dataTables_paginate .paginate_button {
  font-size: 0.9em;
  padding: 6px 10px;
}
div.dt-container .dt-paging .dt-paging-button:not(.disabled) svg,
.dataTables_paginate .paginate_button:not(.disabled) svg { 
  fill: #7c7c7c;
}
div.dt-container .dt-paging .dt-paging-button.disabled svg,
.dataTables_paginate .paginate_button.disabled svg { 
  fill: #d5d5d5;
}
div.dt-container .dt-paging .dt-paging-button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: unset!Important;
  border: 1px solid #ccc;
  background: none;
  background-color: #adb5bd;
}

/* info */
.dt-info,
.dataTables_info {
  font-size: 0.9em;
}

table.table.dataTable table.table.dataTable.child-table {
  padding-left: 50px;
  width:100%;
  font-size:0.9em;
  background-color: var(--child-table-backcolor);
}
table.table.dataTable>tbody>tr:has(table.table.dataTable.child-table) {
  background-color: var(--child-table-backcolor);
}

table.dataTable.no-header thead {
  display:none;
}

table.dataTable.no-padding-right tbody td {
  padding-right: 0;
}

table.dataTable.no-border tbody td,
table.dataTable.no-border {
  border: none;
}

/* hide column and cell selected info */
div.dt-container span.select-item:nth-child(2), 
div.dt-container span.select-item:nth-child(3),
div.dataTables_wrapper span.select-item:nth-child(2), 
div.dataTables_wrapper span.select-item:nth-child(3) {
  display: none;
}
/*
div.dt-button-collection {
  padding: 4px 0px;
}
  */

div.dt-button-collection[role="dialog"] {
  width: auto;
  margin-right: 10px;
  padding: 4px 0px;
}
div.dt-button-collection .dt-button.buttons-columnVisibility {
  font-size: 0.9em;
  padding: 4px 8px;
}
div.dt-button-collection .dt-button.buttons-columnVisibility span {
  margin-right: 30px;
}

@media screen and (max-width: 767px) {
  .pane-button span {
      display: none;
  }
}

.dt-edit-select {
  color: #000;
}

table.dataTable td label.switch {
  margin: 2px;    
}

.dataTables_filter {
  font-size: 0.9em;
}

table.dataTable div.dt-column-header {
  flex-direction: row!important;
}

table.dataTable span.dt-column-order {
  margin-right: 5px!important;
}

/* search panes */
div.dtsp-searchPane div.dt-container div.dt-scroll-body div.dtsp-nameCont span.dtsp-name,
div.dtsp-searchPane div.dt-container div.dt-scroll-body div.dtsp-nameCont span.dtsp-pill {
  cursor: pointer;
}

td .table-status-cell {
  border-radius: 4px;
  padding: 4px 6px;
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8em;  
  line-height: 1.3rem;
  margin: 4px;
  max-width: 300px;
}
td .table-balance-cell {
  border-radius: 4px;
  padding: 4px 6px;
  text-align: right;
  font-weight: 700;
  font-size: 0.9em; 
  line-height: 1.3rem;
  margin: 4px;
  color: #fff;
  max-width: 11em;
}
td.dt-right .table-balance-cell {
  margin-left: auto;
  margin-right: 0;
}
td.dt-left .table-balance-cell {
  margin-left: 0;
  margin-right: auto;
}
td .red-cell {
  color: #fff;
  background-color: #dc5f5f;
}
td .green-cell {
  color: #fff;
  background-color: #44c762;
}
.dt-searchable-input+button.form-button>svg {
  fill: var(--table-header-color);
}
.dt-searchable-input::placeholder {
  color: var(--table-header-color);
}

/* Highlight header when column has active filter */
th.dt-searchable.dt-column-filtered {
  background-color: #e3f2fd !important;
  border-bottom: 2px solid #2196f3 !important;
}

/* Granular permissions styling */
td.dt-restricted {
  cursor: not-allowed !important;  
}

td.dt-restricted:hover {
  background-color: #f0f0f0 !important;
}

.dt-filters-modal .help-block {
  font-size: 1em;
  margin-bottom: 20px;
}

.dt-filters-modal .btn-group {
  margin-bottom: 10px;
  margin-top: 20px;
}

.dt-filters-modal .form-group-v2:has(select) {
  max-width: 400px;
  min-width: 250px;
}
.dt-filters-modal .input-bill-number {
  max-width: 200px;
  min-width: 150px;
}
.dt-filters-modal .input-customers {
  max-width: 500px;
  min-width: 250px;
}
.dt-filters-modal .quick-date-buttons {
  margin-bottom: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.dt-filters-modal .quick-date-buttons .btn-group-sm {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.dt-filters-modal .quick-date-buttons .quick-date-btn {
  font-size: 11px;
  padding: 4px 8px;
  white-space: nowrap;
  border-radius: 3px;
  transition: all 0.2s ease;
}

.dt-filters-modal .quick-date-buttons .quick-date-btn:hover {
  background-color: #ed9c28 !important;
  color: white !important;
  border-color: #d68910 !important;
}

.dt-filters-modal .quick-date-buttons .quick-date-btn.active {
  background-color: #f39c12 !important;
  color: white !important;
  border-color: #e67e22 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.dt-filter-button:not(.has-filters):not(.disabled):not([disabled]) {
  background-color: transparent;
  border-color: transparent;
}
.dt-filter-button:not(.has-filters):not(.disabled):not([disabled]) svg {
  fill: var(--dt-button-fill);
}

.dt-buttons>.dt-filter-button:not(.has-filters):hover:not(.disabled):not([disabled]) {
  background-color: #e3e3e3;
}
.dt-buttons>.dt-filter-button:not(.has-filters):hover:not(.disabled):not([disabled]) svg {
  fill: var(--dt-button-fill);
}

.dt-filter-button.has-filters:not(.disabled):not([disabled]) {
  background-color: #d9534f !important;
  border-color: #d43f3a !important;    
}
.dt-filter-button.has-filters:not(.disabled):not([disabled]) svg {
  fill: white !important;
}
.dt-filter-button.has-filters:hover:not(.disabled):not([disabled]) svg {
  fill: white !important;
}
.dt-filter-button.has-filters:hover:not(.disabled):not([disabled]) {
  background-color: #c9302c !important;
  border-color: #ac2925 !important;
}

@keyframes oscillate {
  0% {
    transform: translateX(var(--uib-center)) scale(0);
    opacity: 0.25;
  }

  100% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}