:root{
  --table-bg:#f6f8fb;
  --table-text:#0f172a;

  --border:rgba(0,0,0,.10);
  --border-soft:rgba(0,0,0,.06);

  --row-hover:#eef2f6;

  --header-text:#ffffff;

  --radius:18px;
  --radius-sm:12px;

  --shadow:0 10px 30px rgba(0,0,0,.06);

  --control-bg:#fbfcff;
  --control-border:rgba(0,0,0,.40);
}

/********** Header & Sidebar colors **********/
.header-gradient-bg{
  background: linear-gradient(
    var(--theme-gradient-direction),
    var(--theme-color),
    color-mix(in srgb, var(--theme-color) 90%, white)
  ) !important;

  color:#fff !important;
}

.gradient-bg{
  background: linear-gradient(
    var(--theme-gradient-direction),
    var(--theme-color),
    color-mix(in srgb, var(--theme-color) 80%, white)
  ) !important;

  color:#fff !important;
}

/************** Buttons color **************/
.tw-dw-btn:not(table .tw-dw-btn):not(.tw-dw-btn-xs),
.input-group-btn .btn:not(.btn-flat),
.btn-success,
.pos-tab-menu .list-group-item.active,
.btn-primary,
.btn-info{
  background: linear-gradient(
    var(--theme-gradient-direction),
    var(--theme-color),
    color-mix(in srgb, var(--theme-color) 80%, white)
  ) !important;

  color:#fff !important;
  border:none !important;
}

.tw-dw-btn:not(table .tw-dw-btn):not(.tw-dw-btn-xs):hover,
.input-group-btn .btn:not(.btn-flat):hover,
.btn-success:hover,
.pos-tab-menu .list-group-item.active:hover,
.btn-primary:hover,
.btn-info:hover{
  background: linear-gradient(
    var(--theme-gradient-direction),
    var(--theme-color),
    color-mix(in srgb, var(--theme-color) 90%, white)
  ) !important;
}

/* for info-icon inside the tab menu item (nav in settings) */
.pos-tab-menu .list-group-item.active i {
  background: transparent !important;
  color: #fff !important;
}

/* fix 'add' button position in rtl */
html[dir="rtl"] .box-header .box-tools{
  float: left !important;
}


/********************* New Tables UI *********************/

.dataTables_scroll{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  background:var(--table-bg);
}

.dataTables_scrollHead,
.dataTables_scrollHeadInner,
.dataTables_scrollHead table{
  border:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}

.dataTables_scrollHeadInner{
  padding:0 !important;
}

.dataTables_scrollHead table{
  border-collapse:collapse !important;
  border-spacing:0 !important;
}

table.dataTable{
  border-collapse:separate !important;
  border-spacing:0 !important;
  width:100% !important;
  background:transparent !important;
}

table.dataTable.no-footer{border-bottom:none !important;}

table.dataTable thead{
background:linear-gradient(
    var(--theme-gradient-direction),
    var(--theme-color),
    color-mix(in srgb, var(--theme-color) 80%, white)
  ) !important;
}
table.dataTable thead th{
  /* background:linear-gradient(
    var(--theme-gradient-direction),
    var(--theme-color),
    color-mix(in srgb, var(--theme-color) 80%, white)
  ) !important; */
  color:var(--header-text) !important;

  font-weight:800;
  font-size:13px;

  padding:14px 16px !important;
  padding-inline-end:46px !important;

  white-space:nowrap;
  vertical-align:middle;
  position:relative !important;
}

/* Sorting icons */
table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc:after{
  color:rgba(255,255,255,.92) !important;
  opacity:1 !important;
  right:14px !important;
}

html[dir="rtl"] table.dataTable thead .sorting:before,
html[dir="rtl"] table.dataTable thead .sorting:after,
html[dir="rtl"] table.dataTable thead .sorting_asc:before,
html[dir="rtl"] table.dataTable thead .sorting_asc:after,
html[dir="rtl"] table.dataTable thead .sorting_desc:before,
html[dir="rtl"] table.dataTable thead .sorting_desc:after{
  right:auto !important;
  left:14px !important;
}

/* Scroll bar */
.dataTables_scrollBody{
  scrollbar-width:thin;
  scrollbar-color:rgba(0,0,0,.30) rgba(0,0,0,.06);
}

table.dataTable tbody td{
  background:var(--table-bg) !important;
  padding:14px 16px !important;
  font-size:14px;

  border-bottom:1px solid rgba(0,0,0,.06) !important;
  border-top:0 !important;

  vertical-align:middle;
  transition:background-color .15s ease;
}

table.dataTable tbody tr:hover td{background:var(--row-hover) !important;}
table.dataTable tbody tr.selected td{background:rgba(13,33,69,.10) !important;}

.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td{
  border-color:var(--border-soft) !important;
}

/* .dataTables_filter,
.dataTables_length{padding:12px 8px;} */

/* Make the search field full width */
.dataTables_filter label {
  width: 100%;
  display: block;
}

.dataTables_filter input{
  width:100% !important;
  height:30px !important;
  border-radius:14px !important;
  border:1px solid var(--control-border) !important;
  outline:none !important;
  margin:5px;
}

.dataTables_length select{
  height:30px !important;
  border-radius:14px !important;
  border:1px solid var(--control-border) !important;
  margin:5px;
}

.dataTables_info{
  color:rgba(15,23,42,.70);
  font-weight:700;
}

.dt-buttons{
  gap: 8px;
  margin:5px;
}

.dt-buttons .tw-dw-btn-xs{
  height:30px !important;
  margin:0 !important;
}

.dataTables_wrapper .dataTables_paginate{padding:12px 8px;}
.dataTables_wrapper .pagination{margin:10px 0;}

.dataTables_wrapper .pagination > li > a,
.dataTables_wrapper .pagination > li > span{
  border-radius:var(--radius-sm) !important;
  border:1px solid rgba(0,0,0,.12) !important;
  margin:0 3px !important;
  padding:7px 12px !important;
  color:var(--table-text) !important;
  background:#fff !important;
}

.dataTables_wrapper .pagination > .active > a,
.dataTables_wrapper .pagination > .active > span{
  background:linear-gradient(
    var(--theme-gradient-direction),
    var(--theme-color),
    color-mix(in srgb, var(--theme-color) 80%, white)
  ) !important;
  color:#fff !important;
}

/* remove bottom gap under table controls row */
.dataTables_wrapper > .row.margin-bottom-20{
  margin-bottom: 0px !important;
}

/**** remove the fake empty "row" in scroll body without breaking column widths ***/
.dataTables_scrollBody > table{
  table-layout:auto !important;
}

.dataTables_scrollBody > table > thead{
  visibility:collapse !important;
}

.dataTables_scrollBody > table > thead *{
  border:0 !important;
  padding:0 !important;
}

/*******  table border + radius (excluding inner tables) *******/
table.dataTable:not(.dataTables_scroll table.dataTable){
  background:var(--table-bg) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius) !important;
  overflow: hidden;
}