ul.nav-tabs {
    border-bottom: 3px solid #dee2e6;
}

.dark-mode ul.nav-tabs {
    border-bottom: 3px solid #7b7e82;
}

.nav-tabs .nav-item {
    margin-bottom: -3px;
    font-size: 14px;
}

.nav-tabs .nav-link {
    color: #737373;
    border: none;
    display: block;
    padding: 0.5rem 1rem;
}

.nav-tabs .nav-link.active {
    color: black;
    font-weight: bold;
    background-color: transparent;
    border-bottom: 3px solid rgb(var(--primary));
}

.dark-mode .nav-tabs .nav-link.active {
    color: white;
    background-color: transparent;
    border-bottom: 3px solid rgb(var(--primary));
}

.tab-content-container {
    padding: 1.25rem; 
    margin-top: 1.5rem; 
    border-radius: 0.8rem; 
    background-color: white; 
    box-shadow: 0 10px 16px 0 rgba(0,0,0,0.1),0 6px 20px 0 rgba(0,0,0,0.09);
}

.dark-mode .tab-content-container {
    background-color: #1d1d1d;
    /* box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12); */
    border: 1px solid hsla(0,0%,100%,.04);
    box-shadow: inset 0px 2px 20px 20px rgba(var(--dark-light), 0.1);
}

.page-link {
    border: none !important;
    border-radius: 0.6rem !important;
    background-color: transparent;
    padding: 0.3rem 0.65rem;
}

.page-link:focus {
    box-shadow: none !important;
}

.page-item.disabled .page-link {
    background-color: transparent !important;
}

.dark-mode .dataTables_wrapper .dataTables_info {
    color: #D0D0D0;
}

div:has(> table.table) {
    padding: 0;
    margin: 6px 0;
    /* border-radius: 0.8rem; */
    /* border: 1px solid #e5e5e5; */
    border: none;
    /* box-shadow: 0 1px 2px 0 rgba(0,0,0,.05); */
    /* background-color: white; */
}

table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_desc_disabled:before {
    right: 0.75em;
    /* content: "\2191"; */
    /* content: "\2BC5"; */
    content: "\1F891";
    bottom: 50%;
}

table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after {
    right: 0.75em;
    /* content: "\2193"; */
    /* content: "\2BC6"; */
    content: "\1F893";
    top: 50%;
}

/* 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, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:before, table.dataTable thead .sorting_desc_disabled:after {
    bottom: 50%;
    transform: translateY(50%);
} */

.table.dataTable th {
    /* border-top: none !important; */
    border: none !important;
    align-content: center;
    color: #666666;
    text-transform: uppercase;
}

.dark-mode .table.dataTable th {
    color: rgba(255, 255, 255, 0.5);
}

.table.dataTable {
    margin: 0 !important;
    font-size: 14px;
    font-family: 'Inter';
}

.table.dataTable tbody {
    /*color: #343a40;*/
    color: #737373;
}

.dataTable.table-hover tbody tr:hover {
    background-color: rgba(var(--primary), 0.1);
}

.dark-mode .dataTable.table-hover tbody tr:hover {
    background-color: rgba(var(--primary), 0.05);
    color: #c8c8c8;
}

.table.dataTable th, .table.dataTable td {
    padding: 0.6rem 0.75rem;
}

table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child:before, table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child:before {
    background-color: rgb(var(--primary));
}

.table.dataTable button.btn.dropdown-toggle {
    color: rgb(var(--primary));
}

.table.dataTable .dropdown-menu .dropdown-item {
    cursor: pointer;
    font-size: 14px;
}

.dark-mode .table th, .dark-mode .table td {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.dropdown-menu {
    min-width: 9rem;
}

.dark-mode .dropdown-menu {
    background-color: rgb(var(--dark));
    box-shadow: 0 0.5rem 1rem 0px rgba(255, 255, 255, 0.1);
}

.dark-mode .dropdown-menu .dropdown-item {
    color: #d0d0d0;
}

.dark-mode .dropdown-menu .dropdown-item:hover {
    background-color: #424242;
}

.status-info {
    position: absolute;
    right: 235px;
    top: 50%;
    transform: translateY(-70%);
    cursor: pointer;
    z-index: 1;
}

.status-info.config-right-1 {
    right: 235px;
}

.status-info.config-right-2 {
    right: 265px;
}

.status-info i {
    color: rgb(var(--primary));
}

.status-info .status-info-container {
    padding: 0.75rem 1.25rem;
    border-radius: 0.8rem;
    /* background: #fcfcfc; */
    background: rgba(252, 252, 252, 0.85);
    backdrop-filter: blur(2px);
    box-shadow: 0 10px 25px 0 rgba(var(--primary),0.3),0 -5px 25px 0 rgba(var(--primary),0.3);
    display: none;
    position: absolute;
    top: 250%;
    right: -20px;
}

.dark-mode .status-info .status-info-container {
    background: rgba(var(--dark), 0.85);
}

.status-info .status-info-container:after {
    content: "";
    position: absolute;
    border-width: 7.5px;
    border-style: solid;
    border-color: transparent transparent rgba(252, 252, 252, 1) transparent;
    bottom: 100%;
    right: 20px;
    /* transform: rotateY(180deg); */
}

.dark-mode .status-info .status-info-container:after {
    border-color: transparent transparent rgba(var(--dark), 1) transparent;
}

.status-info:hover .status-info-container {
    display: block;
}

.status-info .status-info-container .status-info-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.25rem;
}

.status-info .status-info-container .status-info-item label {
    text-decoration: none;
    margin-bottom: 0;
    margin-left: 0.75rem;
    text-wrap: nowrap;
    font-weight: normal;
    /* color: #737373; */
    color: #666666;
}

.dark-mode .status-info .status-info-container .status-info-item label {
    color: white;
}

.column-control {
    position: absolute;
    right: 265px;
    top: 50%;
    transform: translateY(-70%);
    cursor: pointer;
    z-index: 1;
}

.column-control.config-right-1 {
    right: 235px;
}

.column-control.config-right-2 {
    right: 265px;
}

.column-control i {
    color: rgb(var(--primary));
}

.column-control .dropdown-menu {
    border: none;
    border-radius: 0.8rem;
    background: rgba(252, 252, 252, 0.85);
    backdrop-filter: blur(2px);
    box-shadow: 0 10px 25px 0 rgba(var(--primary),0.3),0 -5px 25px 0 rgba(var(--primary),0.3);
}

.dark-mode .column-control .dropdown-menu {
    background: rgba(var(--dark), 0.85);
}

.column-control .dropdown-menu.show {
    left: auto !important;
    right: -100% !important;
    top: 50% !important;
}

.column-control .dropdown-menu .dropdown-item {
    font-size: 14px;
}

.column-control .dropdown-menu .dropdown-item span {
    margin-left: 0.5rem;
    color: #666666;
}

.dark-mode .column-control .dropdown-menu .dropdown-item span {
    color: white;
}

.column-control .dropdown-menu .dropdown-item:hover {
    background-color: #f2f4f5;
}

/* Float-in Animation */
@keyframes floatIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.table tbody tr.hidden-row {
    opacity: 0;
}

.table tbody tr.float-in {
    animation: floatIn 0.5s ease-out;
}
/* End of Float-in Animation */

/* Toolbar info for detail table */
.modal .toolbar-card {
    display: flex; 
    flex-direction: column;
}

.modal .toolbar-card-header {
    padding: 0 0.5rem; 
    z-index: 2;
}

.modal .toolbar-card-label-container {
    background: linear-gradient(180deg, rgb(var(--info-light)), rgb(var(--info))) repeat-x; 
    color: white; 
    padding: 0.25rem 0.5rem; 
    border-radius: 0.5rem; 
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2); 
    margin-bottom: -1rem; 
    width: fit-content; 
    max-width: 100%;
}

.modal .toolbar-card-label-container label {
    margin-bottom: 0; 
    font-weight: normal; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: nowrap; 
    max-width: 100%;
}

.modal .toolbar-card-body {
    color: #343a40; 
    border-radius: 0.5rem; 
    background: white; 
    padding: 1.5rem 1rem 0.5rem 1rem; 
    font-size: 20px; 
    /*border: 1px solid rgba(0, 0, 0, 0.1);*/ 
    box-shadow: 0 0.15rem 0.5rem 0.1rem rgba(0, 0, 0, 0.1);
}

.modal .toolbar-card-body label {
    margin-bottom: 0;
}
/* End of Toolbar info for detail table */