:root,
.light,
.light-theme {
    --yellow-1: #fefdf9;
    --yellow-2: #fffbe9;
    --yellow-3: #fff6c2;
    --yellow-4: #ffee97;
    --yellow-5: #ffe572;
    --yellow-6: #f3d76c;
    --yellow-7: #e1c867;
    --yellow-8: #ceb13b;
    --yellow-9: #ffdd24;
    --yellow-10: #fcd412;
    --yellow-11: #907600;
    --yellow-12: #433c20;

    --yellow-a1: #98653005;
    --yellow-a2: #fff6d280;
    --yellow-a3: #fff4b6;
    --yellow-a4: #ffec92;
    --yellow-a5: #ffe26f;
    --yellow-a6: #e7b70295;
    --yellow-a7: #ca9f019a;
    --yellow-a8: #bc9701c8;
    --yellow-a9: #ffd900;
    --yellow-a10: #f8d000;
    --yellow-a11: #8d7300;
    --yellow-a12: #282001df;

    --yellow-contrast: #282109;

    --gray-1: #fdfdfb;
    --gray-2: #faf9f7;
    --gray-3: #f1f0ed;
    --gray-4: #eae8e4;
    --gray-5: #e3e1dc;
    --gray-6: #dbd9d2;
    --gray-7: #d1cec6;
    --gray-8: #bebbb0;
    --gray-9: #918c7f;
    --gray-10: #868276;
    --gray-11: #656359;
    --gray-12: #222018;

    --white: #ffffff;
    --white-a9: #ffffffb3;

    --color-background: #fdfdfb;
    --color-black: #12110f;

    --bts-primary: #fad20a;
    --bts-primary-hover: var(--yellow-9);
    --bts-primary-active: var(--yellow-11);

    --bts-accent: var(--color-black);
    --bts-on-accent: var(--yellow-1);
    --bts-accent-hover: var(--gray-12);

    --bts-warning: #ed8731;
    --bts-warning-dark: #eb7514;

    --bts-text: var(--yellow-contrast);
    --bts-text-subtle: var(--yellow-12);
    --bts-text-muted: var(--gray-11);

    --bts-border-color: var(--gray-8);
    --bts-border-color-subtle: var(--gray-6);

    --bts-corner-radius: 8px;

    --bts-input-padding-x: 0.875rem;
    --bts-input-padding-y: 0.3125rem;
}
/*
.dark,
.dark-theme {
    --color-background: #12110f;

    --yellow-1: #13110a;
    --yellow-2: #1b180f;
    --yellow-3: #2b2305;
    --yellow-4: #382b00;
    --yellow-5: #443500;
    --yellow-6: #524300;
    --yellow-7: #655513;
    --yellow-8: #806c1b;
    --yellow-9: #fad20a;
    --yellow-10: #f0c800;
    --yellow-11: #fdd517;
    --yellow-12: #faebb1;

    --yellow-contrast: #282109;
    --yellow-surface: #251f0e80;
    --yellow-indicator: #fad20a;
    --yellow-track: #fad20a;

    --gray-1: #12110f;
    --gray-2: #1a1917;
    --gray-3: #23221f;
    --gray-4: #2b2a26;
    --gray-5: #32312c;
    --gray-6: #3c3a34;
    --gray-7: #4a4840;
    --gray-8: #636055;
    --gray-9: #716e61;
    --gray-10: #7f7b6e;
    --gray-11: #b7b4a8;
    --gray-12: #efeeea;

    --gray-contrast: #ffffff;
    --gray-surface: rgba(0, 0, 0, 0.05);
    --gray-indicator: #716e61;
    --gray-track: #716e61;
} */

body {
    --bg: var(--color-background);
    --fg: var(--gray-1);

    --muted: var(--gray-6);
    --muted-fg: var(--gray-8);
    --footer-height: 80px;
}

/* header */
.navbar-nav > .user-menu .user-image {
    margin: 0;
}

.main-header .nav-link {
    display: flex;
    align-items: center;
    padding: 0;
}

.main-header .nav-link i {
    font-size: 20px;
}

/* modal */
.modal-dialog {
    height: 100%;
    display: flex;
    align-items: center;
}

/* Layout */
.content-wrapper {
    background-color: var(--gray-1);
    position: relative;
}
.content-header,
.content-wrapper > .content {
    padding-inline: 1rem;
}

.content-header {
    padding-bottom: 5px;
}

/* .content-wrapper > .content {
    padding-bottom: var(--footer-height);
} */

.btn-rounded.btn-sm,
.btn-rounded.btn-lg {
    border-radius: 99px;
    padding-inline: 0.75rem;
}

/* Sidebar */
aside[class*="sidebar-dark-"] {
    background-color: #465162;
}

[class*="sidebar-dark-"] .sidebar a {
    color: var(--gray-3);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active {
    background-color: var(--yellow-12);
    color: #ffffff;
}

.btn-warning.btn-rounded {
    color: #ffffff;
    background: var(--bts-warning);
    border: var(--bts-warning);
}

.btn-warning.btn-rounded:not(:disabled):not(:disabled):hover,
.btn-warning.btn-rounded:not(:disabled):not(:disabled):active {
    color: #ffffff;
    background-color: var(--bts-warning-dark);
}
/* Setting sidebar */
.nav a > .fas {
    width: 20px;
    display: inline-flex;
    justify-content: center;
}

.card.sub_sidebar-wrapper {
    background: #fff;
    padding: 0;
}

.sub_sidebar-wrapper .nav {
    flex-direction: column;
}

.sub_sidebar-wrapper .nav li + li {
    border-top: 1px solid #e4e4e4;
}

.sub_sidebar-wrapper .nav li a {
    color: #000;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 0.625rem 1rem;
}

.sub_sidebar-wrapper .nav li a.active {
    color: #007bff;
}

.sub_sidebar-wrapper .nav li a:hover {
    text-decoration: none;
    background: rgba(0, 0, 0, 0.05);
}

.sub_sidebar-wrapper .nav a:not(.active) .fas {
    opacity: 0.5;
}

/* Office Time */
.col-md-6:has(> .day-row) {
    --gap-y: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--gap-y);
}

.col-md-6:nth-child(2):has(> .day-row) {
    justify-content: flex-end;
}

.day-row {
    width: calc(49% - (var(--gap-y) / 2));
}
.break-time {
    border-block: 1px solid #efefef;
    padding-block: 16px 24px;
}

/* Salary settings */
.salary-benefits {
    display: flex;
    flex-wrap: wrap;
    --gap-y: 1.5rem;
    --gap-x: 0.5rem;
    gap: var(--gap-x) var(--gap-y);
}
.salary-benefits .form-group {
    width: calc(50% - (var(--gap-y) / 2));

    p:empty {
        display: none;
    }
}

.page-title {
    color: #212529;
    font-size: 1.15rem !important;
    font-weight: bold;
    margin-bottom: 0.25rem !important;
}

.allowance {
    padding-block: 1rem 0.5rem;
    margin-block: 1rem;
    border-block: 1px solid #efefef;
}

.label-subtext {
    font-size: 12px;
    font-weight: 400;
}

.remove-tds-field {
    width: 90px;
    height: calc(2.25rem + 2px);
}

.tds-percent {
    width: min(25%, 80px);
}

.add-button-wrapper .btn {
    width: 90px;
    height: calc(2.25rem + 2px);
}

/* Data Tables */
div:has(> .dataTable) {
    width: 100%;
    overflow: auto;
}
.dataTable {
    width: 100% !important;
}
.dataTable tbody tr:nth-child(even) {
    background-color: var(--gray-2);
}
table.dataTable {
    margin-top: 12px !important;
}

table.dataTable tbody td {
    vertical-align: middle;
    padding-block: 4px;
}

.content table.dataTable thead :is(.sorting, .sorting_asc, .sorting_desc) {
    background-image: none;
}

.content table.dataTable thead th {
    border-bottom-color: var(--bts-border-color);
    background-color: var(--gray-3);
    white-space: nowrap;
}

.content table.dataTable.no-footer {
    border-bottom-color: var(--bts-border-color);
}

.content table.dataTable thead th,
.content table.dataTable thead td {
    padding: 10px 8px;
}

.content table.dataTable thead th:first-child,
.content table.dataTable tbody td:first-child {
    padding-inline-start: 20px;
}

.content table.dataTable thead th:last-child,
.content table.dataTable tbody td:last-child {
    padding-inline-end: 20px;
}

.table-filter {
    display: flex;
    gap: 8px;
}

.dataTables_length label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.dataTables_wrapper .row:nth-child(2) {
    margin-inline: -20px;
}

.dataTables_wrapper .row:nth-child(2) .col-sm-12 {
    padding-inline: 0px;
}

.content
    table.dataTable
    thead
    :is(
        .sorting:before,
        .sorting:after,
        .sorting_asc:before,
        .sorting_asc:after,
        .sorting_desc:before,
        .sorting_desc:after,
        .sorting_asc_disabled:before,
        .sorting_asc_disabled:after,
        .sorting_desc_disabled:before,
        .sorting_desc_disabled:after
    ) {
    bottom: 1em;
}

/* Buttons */
.bts-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    -webkit-user-select: none;
    user-select: none;
    text-align: center;
    font-size: 0.875rem;
    border-radius: var(--bts-corner-radius);
    padding: var(--bts-input-padding-y) var(--bts-input-padding-x);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    font-weight: 600;
}

.bts-btn-sm {
    font-size: 0.875rem;
}

.bts-btn-lg {
    font-size: 1.25rem;
}

.bts-btn:where(.bts-btn-solid),
a.bts-btn:where(.bts-btn-solid) {
    color: var(--bts-text);
    background-color: var(--bts-primary);
    border: 1px solid var(--bts-primary);
}

.bts-btn:where(.bts-btn-solid):hover {
    background-color: var(--bts-primary-hover);
}

.bts-btn:where(.bts-btn-accent) {
    color: var(--bts-on-accent);
    background-color: var(--bts-accent);
    border: none;
}

.bts-btn:where(.bts-btn-accent):hover {
    background-color: var(--bts-accent-hover);
}

/* Form Controls */
.form-control {
    --bts-input-padding-x: 0.75em;
    --bts-input-border-width: 1px;
    --bts-input-border-color: var(--bts-border-color);
    --bts-input-focus-border-color: var(--yellow-8);
    --bts-input-focus-border-width: 2px;
    font-size: 14px;
    display: inline-flex;
    flex-shrink: 0;
    height: auto;
    -webkit-user-select: none;
    user-select: none;
    border: 0;
    box-shadow: inset 0 0 0 var(--bts-input-border-width)
        var(--bts-input-border-color);
    border-radius: var(--bts-corner-radius);
    padding: var(--bts-input-padding-y) var(--bts-input-padding-x);
}

.form-control:focus {
    box-shadow: inset 0 0 0 var(--bts-input-focus-border-width)
        var(--bts-input-focus-border-color);
}

select.form-control {
    padding-inline-end: 24px;
}

/* Card */
.content .card {
    min-height: 657px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.1);
}

.content .card:not(.sub_sidebar-wrapper) {
    padding: 12px 20px;
}

.status-button {
    display: inline-flex;
    align-items: center;
    background-color: var(--gray-3);
    border: 1px solid var(--bts-border-color-subtle);
    border-radius: 15px;
    padding: 5px 10px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    color: var(--bts-text-muted);
}

.status-button .status-icon {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
}

.status-button .active .status-icon {
    background-color: #10b981;
}

.status-button .inactive .status-icon {
    background-color: #ef4444;
}

.status-button .review .status-icon {
    background-color: #ffc107;
}

/* Table menu */
.dataTable .dropdown-menu {
    --dropdown-paddding: 3px;
    --dropdown-item-radius: calc(
        var(--bts-corner-radius) - var(--dropdown-paddding)
    );
    border-radius: var(--bts-corner-radius);
    border-color: var(--gray-4);
    padding: var(--dropdown-paddding);

    .dropdown-item {
        color: var(--bts-text-subtle);
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 5px 9px;
        border-radius: var(--dropdown-item-radius);

        &:hover {
            background-color: var(--gray-3);
            color: var(--bts-text);
        }

        i {
            color: var(--bts-text-muted);
            font-size: 13px;
        }
    }
}

/* pagination */
.dataTables_wrapper .dataTables_paginate {
    .paginate_button {
        border: 0 !important;
        margin: 0 !important;

        &.disabled .page-link {
            color: var(--bts-text-muted);
            opacity: 0.6;
        }

        .page-link {
            color: var(--bts-text-muted);
            padding-block: 0.375rem;
            font-weight: 600;
        }
    }

    .paginate_button.active .page-link {
        background-color: var(--bts-primary);
        color: var(--bts-text) !important;
        border-color: var(--bts-primary);
        transition: background-color 0.3s ease;

        &:hover {
            background-color: var(--bts-primary-hover);
        }
    }

    .paginate_button:first-child .page-link {
        border-radius: var(--bts-corner-radius) 0 0 var(--bts-corner-radius);
    }

    .paginate_button:last-child .page-link {
        border-radius: 0 var(--bts-corner-radius) var(--bts-corner-radius) 0;
    }
}

aside img {
    width: 100%;
}

/* ATTENDANCE EDIT */
.card {
    margin: 0;
}

.table thead th {
    border: none;
    background-color: #f8f9fa;
}
.table th,
.table td {
    border: none;
}
.table {
    margin-bottom: 0;
}
body {
    counter-reset: section;
}
.sn:before {
    counter-increment: section;
    content: counter(section);
}
td[colspan="4"] {
    align-content: center;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 0.75rem;
}

.gap-4 {
    gap: 1rem;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.card:has(.dataTable) {
    font-size: 13px;
    padding-block: 12px;
}

.card .profile-image {
    height: 36px;
    width: 36px;
}

.content .card .form-control {
    --bts-input-padding-y: 0.5em;
    font-size: 100%;
}

.dataTables_filter label {
    margin: 0;
    font-size: 14px;
}

td .btn {
    font-size: 13px;
    padding: 0.5em 0.75em;
}

label:not(.form-check-label):not(.custom-file-label) {
    font-weight: 600;
    font-size: 14px;
}

.filter-by-date label {
    margin-bottom: 4px;
}

.leave-container {
    font-size: 14px;

    thead th:first-child {
        border-radius: 4px 0 0 4px;
    }

    thead th:last-child {
        border-radius: 0 4px 4px 0;
    }

    td {
        vertical-align: middle;
        padding-block: 0.5rem;
    }

    tr:nth-child(even) {
        background-color: var(--gray-2);
    }
}

.generate-slip-open-modal {
    border-radius: 0.5rem;
}

.actions .btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: grid;
    place-content: center;
    transition: all 0.3s ease;

    &:hover {
        background: var(--gray-3);
    }
}

td i {
    white-space: nowrap;
}

body {
    font-size: 0.875rem;
    --sidebar-width: 200px;
}

.main-sidebar {
    width: var(--sidebar-width);
}

body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav)
    .content-wrapper,
body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav)
    .main-footer,
body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav)
    .main-header {
    margin-left: var(--sidebar-width);
}

.sidebar-mini .main-sidebar .nav-link,
.sidebar-mini-md .main-sidebar .nav-link,
.sidebar-mini-xs .main-sidebar .nav-link {
    width: calc(var(--sidebar-width) - 0.5rem * 2);
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--bts-accent);
    border-color: var(--bts-accent);
}

.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
    background-color: var(--bts-text-subtle);
    border-color: var(--bts-text-subtle);
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    background-color: var(--bts-on-accent);
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: inset 0 0 0 transparent, 0 0 0 1px #fff,
        0 0 0 0.2rem var(--yellow-8);
}

input[type="file"] {
    border: var(--bts-border-color) 1px solid;
    border-radius: 0.5rem;
}
::-webkit-file-upload-button {
    background-color: var(--bts-accent);
    color: var(--bts-on-accent);
    border-radius: 0.5rem;
    padding: 6px 12px;
    border: 0;
    margin-right: 6px;
}

body:not(.layout-fixed) .main-sidebar {
    height: inherit;
    min-height: 100%;
    position: fixed;
    top: 0;
}

.container-fluid {
    padding: 0 !important;
}

.status-container {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.footer {
    position: static !important;
}

@media (max-width: 991px) {
    body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav)
        .content-wrapper,
    body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav)
        .main-footer,
    body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav)
        .main-header {
        margin: 0;
    }
}

table.dataTable tbody tr:has(.item-inactive) {
    background: #ff000036;
}
table.dataTable tbody tr:has(.reversed) {
    background: #ffff0036;
}
table.dataTable tbody tr:has(.start-balance) {
    background: #9fffa436;
}

.student-detail {
    flex-wrap: wrap;
    padding: 0.85rem;
    border: 1px solid var(--gray-3);
    border-radius: var(--bts-corner-radius);
    background-color: var(--gray-2);
    WIDTH: min(60%, 720px);
    column-gap: 1rem;
    margin-bottom: 2rem !important;
}

.student-detail>div {
    display: flex;
    gap: 1rem;
    min-width: 48%;
    font-size: 14px;
    padding: 3px;
}

.student-detail>div:nth-child(odd) {
    border-right: 1px solid var(--gray-4);
}

.student-detail>div:last-child>div:last-child {
    font-weight: bold;
    background: var(--gray-4);
    padding-inline: 9px;
    border-radius: var(--bts-corner-radius);
}

.student-detail>div>div:first-child {
    min-width: 120px;
    color: var(--bts-text-muted);
}

.student-detail>div>div:first-child::after {
    content: ":";
}


.nav-tabs {
    margin-bottom: 12px;
}

.nav-tabs .nav-link.active {
    border-color: transparent transparent var(--bts-primary);
    border-bottom-width: 4px;
    background: var(--gray-3);
    color: var(--bts-text);
}

.nav-tabs .nav-link {
    color: var(--gray-9);
    font-size: 16px;
}

.nav-tabs .nav-link:not(.active):hover {
    border-color: transparent;
    color: var(--bts-text);
}

.card-header-with-tab {
    position: relative;
}

.card-header-with-tab .add-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.card-header-with-tab .add-btn button {
    margin: 0 !important;
}
.person-name{
    font-size: large;
}