.datatable-hidden {
     display: none;
}
.mobileTables th[style] {
    width: unset !important;
}
 .mobileTables th {
    align-content: center;
    min-width: 15ch;
    background: var(--brand-color6);
    color: #fff;
    width: 100%;
    height: 100%;
    text-align: left !important;
    border: none;
    position: relative;
    font-weight: 600;
    padding-right: 1.75rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
}
 .mobileTables th button {
     color:#fff;
     width: 100%;
     height: 100%;
     text-align: left !important;
     border: none;
     background: none;
     position: relative;
     font-weight: 600;
     padding-right: 1rem;
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
     position: relative;
}
 .mobileTables th button:is(:hover,:focus,:focus-within), .mobileTables [role="gridcell"]:focus, .mobileTables [role="gridcell"] *:focus, .mobileTables [role="grid"] [tabindex="0"]:focus {
     outline: inherit;
     outline-style: dotted;
     outline-width: 1px;
     outline-offset: 7px;
}
 /* common arrow styles */
 .mobileTables th button.datatable-sorter {
  position: relative;
  padding-right: 1.5rem;              /* space for arrows */
}

/* base arrow styles */
.mobileTables th button.datatable-sorter::before,
.mobileTables th button.datatable-sorter::after {
  content: "";
  position: absolute;
  right: 0.15rem;                     /* adjust horizontally as needed */
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  /* center the stack */
  top: 50%;
}

/* up arrow (above center) */
.mobileTables th button.datatable-sorter::before {
  border-bottom: 6px solid #ffffff;
  transform: translateY(calc(-50% - 4px));  /* half button height + small offset up */
}

/* down arrow (below center) */
.mobileTables th button.datatable-sorter::after {
  border-top: 6px solid #ffffff;
  transform: translateY(calc(-50% + 4px));  /* half button height + small offset down */
}
 .mobileTables th[aria-sort="ascending"] button:before, .mobileTables th[aria-sort="descending"] button:after {
     opacity: 0.95 !important;
}
 .mobileTables th[aria-sort="ascending"] button:after, .mobileTables th[aria-sort="descending"] button:before {
     opacity: 0.45 !important;
}
 .mobileTables .table-responsive select {
     height: 2.5rem;
     border-radius: 9999px;
     padding: 0 2rem 0 1.5rem;
}
 .mobileTables .table-responsive select+label {
     font-weight: 500;
     font-size: .9rem;
}
 .mobileTables .table {
     width: 100%;
     table-layout: fixed;
}
 .mobileTables table.dataTable > tbody > tr > th, .mobileTables table.dataTable > tbody > tr > td {
     padding: .75rem;
}
 .mobileTables table.dataTable > thead > tr > th, .mobileTables table.dataTable > thead > tr > td {
     padding: .75rem;
     border-bottom: 1px solid;
}
 .mobileTables table.dataTable > tbody > tr > th:focus-visible, .mobileTables table.dataTable > tbody > tr > td:focus-visible {
     outline: 2px solid #000;
}
 .mobileTables table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:before, .mobileTables table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:after, table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:before, table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:after, table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:after, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:after, table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order:before, table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order:after, table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order:before, table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order:after, table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:before, table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:after, table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:before, table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:after {
     left: 0;
     opacity: 0.25;
     line-height: .7;
     font-size: 0.8em;
}
 .mobileTables .card:is(:hover,:focus) {
     box-shadow:unset 
}
 .mobileTables .row:last-child {
     justify-content: start!important;
}
 .mobileTables .datatable-search input {
     min-width:300px 
}
 .mobileTables .form-control:hover {
     border-color: #86b7fe;
     outline: 0;
     box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}
 .mobileTables .page-link {
     font-size:1rem;
     font-weight:500;
     height:100%;
     display:flex!important;
     align-items:center;
     color: var(--brand-color6);
}
 .mobileTables .active>.page-link, .mobileTables .page-link.active {
     background: var(--brand-color6);
     border-color: var(--brand-color6);
     color:#fff;
}
 .mobileTables .page-link:is(.first,.previous,.next,.last) {
     font-size: 1.25rem;
}
 .mobileTables .table-bordered.no-collapse-table>:not(caption)>*:not(th,tr) {
     border-width: 0 !important;
}
 .mobileTables .table-bordered.no-collapse-table>:not(caption)>*>*:not(th,tr) {
     border-width: 0 var(--bs-border-width);
}
 .mobileTables .table.no-collapse-table>:not(caption)>*>*:not(th,tr) {
     background: unset;
     color: unset;
}
 .mobileTables :is(.datatable-top, .datatable-bottom) {
     padding: .5rem .625rem;
     align-items: center;
     display: flex;
     margin-bottom: .5rem;
}
 .mobileTables .datatable-dropdown {
     margin-right: auto;
}
 .mobileTables .form-select:hover {
     border-color: #86b7fe;
     outline: 0;
     box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}
/***************** Reset Sort Button ***********************************/
[id^="reset-sort-table"] {
    background-color: unset;
    border: var(--bs-border-width) solid var(--bs-border-color);
}
[id^="reset-sort-table"]:is(:hover,:focus-visible) {
    border-color: #86b7fe!important;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .2);
    background-color: #fff!important;
}

 @media (max-width: 992px) {
     .mobileTables .datatable-header {
         display: block !important;
    }
     .mobileTables .datatable-header > * {
         margin-bottom: 1.25rem;
    }
}
 @media all and (max-width: 991px) {
    /*****************Mobile Table***********/
     .mobileTables .responsiveTablesLarge colgroup {
         width:0;
    }
     .mobileTables .responsiveTables colgroup {
         width:0;
    }
     .mobileTables table:is(.responsiveTablesLarge, .dataTable) {
         display: flex;
         overflow:hidden;
         width: 100%;
         position:relative;
         justify-content:center 
    }
     .mobileTables table>:not(:first-child) {
         border-top: unset;
    }
     .mobileTables table:is(.responsiveTablesLarge, .dataTable) thead {
         display: flex;
         flex-shrink: 0;
         min-width: -webkit-min-content;
         min-width: -moz-min-content;
         min-width: min-content;
         float: left;
         overflow-x:scroll;
         overflow-y:hidden;
         scrollbar-color:var(--brand-color1 var(--background-gray));
         scrollbar-width: thin;
    }
     .mobileTables table.one-row-table thead {
         overflow-x:hidden;
    }
     .mobileTables table:is(.responsiveTablesLarge, .dataTable) tbody {
         display: flex;
         position: relative;
         overflow-x: auto;
         overflow-y: hidden;
         scrollbar-color: var(--brand-color1, gray) transparent;
         scrollbar-width: thin;
    }
     .mobileTables table:is(.responsiveTablesLarge, .dataTable) :is(thead, tbody) tr {
         display: flex;
         flex-direction: column;
         min-width: -webkit-min-content;
         min-width: -moz-min-content;
         min-width: min-content;
         flex-shrink: 0;
         max-width: 50vw;
         text-wrap: auto;
         flex:1 1 100%;
         border-width: 0;
    }
     .mobileTables table:is(.responsiveTablesLarge, .dataTable) th {
         min-width: 12ch;
         max-width: 33vw;
    }
     .mobileTables table:is(.responsiveTablesLarge, .dataTable) td {
         max-width:50vw;
    }
     .mobileTables table.dataTable:is(.responsiveTablesLarge, .dataTable) :is(th,td) {
         text-align: left!important;
         border-width: 1px;
         white-space: normal;
    }
     .mobileTables table.dataTable:is(.responsiveTablesLarge, .dataTable) th[colspan]:not([colspan="1"]), .mobileTables table.dataTable:is(.responsiveTablesLarge, .dataTable) tfoot {
         display: none;
    }
     .mobileTables table:is(.responsiveTablesLarge, .dataTable) thead th:last-child{
         border-bottom: none;
    }
     .mobileTables table.dataTable:is(.responsiveTablesLarge, .dataTable) > tbody > tr:last-of-type {
         z-index: 1;
         position: relative;
    }
     .mobileTables table.dataTable:is(.responsiveTablesLarge, .dataTable) > tbody > tr:last-child > * {
         border-bottom: inherit;
    }
     .mobileTables table:is(.responsiveTablesLarge, .dataTable) td, .mobileTables table:is(.responsiveTablesLarge, .dataTable) th {
         padding: .5rem;
         vertical-align: middle;
         box-sizing: border-box;
         font-size: .9rem;
         text-overflow: ellipsis;
         display:flex;
         flex-flow: row wrap;
         overflow-y:auto;
         overflow-x:hidden;
         scrollbar-width: thin;
         flex:1 1 100%;
         min-height: 60px;
         justify-content: start;
         align-items: start;
    }
     .mobileTables .table-bordered>:not(caption)>*>* {
         border-width:0 0 1px;
    }
     .mobileTables table:not(.desktopView).dataTable:is(.responsiveTablesLarge, .dataTable) > tbody > tr:last-of-type {
         z-index: 10;
         position: relative;
    }
}
 @media (max-width: 768px) {
     .datatable-footer {
         flex-direction: column;
    }
     .datatable-info {
         margin-bottom: 2rem !important;
        /* !important needed to override BS */
         width: 100%;
    }
}