* {
    --topbar-height: 3rem;
    --sidebar-width: 12rem;
    transition: 0.45s;

    .App {
        min-height: 100vh;
        display: grid;
        grid-template-columns: var(--sidebar-width) auto;
        grid-template-rows: var(--topbar-height) auto;
    }

    .add-menu {
        display: flex;
        flex-direction: row;
        gap: 10px;

        form {
            width: 100%;
        }

        .btn-group {
            min-width: 12rem;
        }
    }

    .sidebar-toggle-button {
        display: none !important;
    }

    .htmx-indicator {
        display: none !important;
    }
    .htmx-request .htmx-indicator {
        display: grid !important;
        opacity: 0.5 !important;
    }
    .htmx-request.htmx-indicator {
        display: grid !important;
        opacity: 0.5 !important;
    }
    .sidebar > ul {
        li.list-group-item {
            background-color: unset;
            padding: unset;
            border: unset;
            --bs-list-group-active-bg: rgb(225, 80, 0);
        }
        li.list-group-item.active {
            background-color: var(--bs-list-group-active-bg);
            padding: unset;
            border: unset;
        }
    }

    .item-list > li.list-group-item.active::after {
        position: absolute;
        min-width: 1rem;
        content: "◆";
        right: -0.6rem;
    }

    td:hover > i.opacity-0,
    td:hover > span > i.opacity-0 {
        opacity: 1 !important;
    }

    .dt-length > label {
        margin-left: 10px;
    }

    .dt-search > label {
        margin-right: 10px;
    }
    div.dt-container .dt-paging .dt-paging-button.disabled,
    div.dt-container .dt-paging .dt-paging-button.disabled:hover,
    div.dt-container .dt-paging .dt-paging-button.disabled:active {
        color: unset !important;
    }
}

body[data-bs-theme="dark"] {
    --bg-sidebar: black;
    --bs-light-rgb: 33, 37, 41;
    --bs-light: #212529;
    --bs-light-text-emphasis: #495057;
    --bs-light-bg-subtle: #ced4da;
    --bs-light-border-subtle: #adb5bd;
    --bs-dark-rgb: 248, 249, 250;
    --bs-dark: #f8f9fa;
    --bs-dark-text-emphasis: #495057;
    --bs-dark-bg-subtle: #fcfcfd;
    --bs-dark-border-subtle: #e9ecef;
    
    .btn-outline-dark {
        --bs-btn-color: #f8f9fa;
        --bs-btn-border-color: #f8f9fa;
        --bs-btn-hover-color: #000;
        --bs-btn-hover-bg: #f8f9fa;
        --bs-btn-hover-border-color: #f8f9fa;
        --bs-btn-focus-shadow-rgb: 248, 249, 250;
        --bs-btn-active-color: #000;
        --bs-btn-active-bg: #f8f9fa;
        --bs-btn-active-border-color: #f8f9fa;
        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        --bs-btn-disabled-color: #f8f9fa;
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: #f8f9fa;
        --bs-gradient: none;
    }

    .btn-outline-light {
        --bs-btn-color: #212529;
        --bs-btn-border-color: #212529;
        --bs-btn-hover-color: #fff;
        --bs-btn-hover-bg: #212529;
        --bs-btn-hover-border-color: #212529;
        --bs-btn-focus-shadow-rgb: 33, 37, 41;
        --bs-btn-active-color: #fff;
        --bs-btn-active-bg: #212529;
        --bs-btn-active-border-color: #212529;
        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        --bs-btn-disabled-color: #212529;
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: #212529;
        --bs-gradient: none;
    }

    .sidebar-button:hover {
        color: black;
        background-color: white;
    }
    table.dataTable.stripe > tbody > tr:nth-child(2n + 1) > * {
        box-shadow: inset 0 0 0 9999px rgb(52, 58, 70) !important;
    }
    table.dataTable.stripe > tbody > tr.active > * {
        box-shadow: inset 0 0 0 9999px rgb(225, 80, 0) !important;
    }

    select.dt-input > option {
        color: black;
    }

    .select2-container--default .select2-selection--single {
        background-color: unset;
        border: unset;
        border-radius: unset;
    }

    .select2-container--default
        .select2-selection--single
        .select2-selection__rendered {
        line-height: 28px;
        display: block;
        width: 100%;
        padding: 0.25rem;
        padding-left: 0.5rem;
        padding-right: 1rem;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: var(--bs-body-color);
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: var(--bs-body-bg);
        background-clip: padding-box;
        border: var(--bs-border-width) solid var(--bs-border-color);
        border-radius: var(--bs-border-radius);
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
}
body[data-bs-theme="light"] {
    --bg-sidebar: #ddd;
    --bs-table-striped-bg: #ddd;

    .sidebar-button:hover {
        background-color: black;
        color: white;
    }

    table.dataTable.stripe > tbody > tr:nth-child(2n + 1) > * {
        box-shadow: inset 0 0 0 9999px rgb(210, 224, 233) !important;
    }
    table.dataTable.stripe > tbody > tr.active > * {
        box-shadow: inset 0 0 0 9999px rgb(225, 80, 0) !important;
    }
}

@media (max-width: 1199.98px) {
    .modal-fullscreen-xl-down {
        height: unset;
    }
}

@media screen and (max-width: 1081px) {
    .App {
        min-height: 100vh;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: var(--topbar-height) auto;
    }

    .add-menu {
        display: flex;
        flex-direction: column;

        .btn-group {
            width: 80%;
            margin: 0px auto;
        }
    }
    .sidebar {
        position: absolute;
        height: 100%;
        top: 0px;
        left: calc(-1 * var(--sidebar-width));
    }

    .sidebar-toggle-button {
        display: block !important;
    }

    td > i.opacity-0 {
        opacity: 1 !important;
        float: inline-end !important;
    }

    td > span:has(i.opacity-0) {
        display: inline-block;
        width: 80%;
    }
    td > span > i.opacity-0 {
        opacity: 1 !important;
        float: inline-end !important;
    }
}

@media screen and (max-width: 767px), screen and (max-width: 640) {
    div.dt-container div.dt-layout-cell.dt-full,
    div.dt-container div.dt-layout-cell.dt-start,
    div.dt-container div.dt-layout-cell.dt-end,
    .dt-length,
    .dt-search {
        text-align: left !important;
    }
}