:root {
    --bs-primary: var(--bs-purple);
    --option-highlighted-color: var(--bs-black);
    --option-highlighted-bg: var(--bs-gray-200);
    --option-selected-color: var(--bs-white);
    --option-selected-bg: var(--bs-blue);

    --sidebar-bg: #dcdce0;
    --sidebar-linear-bg: linear-gradient(142deg,rgba(220, 220, 224, 0.7) 13%, rgba(193, 203, 227, 0.77) 100%);

    --navbar-bg: #dcdce0;
    --navbar-linear-bg: linear-gradient(142deg,rgba(220, 220, 224, 0.7) 13%, rgba(193, 203, 227, 0.77) 100%);
    --nav-item-bg: rgba(112, 116, 142, 0.1);
}

    :root[data-bs-theme="dark"] {
        --sidebar-bg: #979EC3;
        --sidebar-linear-bg: linear-gradient(159deg, rgba(151, 158, 195, 1) 0%, rgba(0, 1, 13, 1) 39%);
        --navbar-bg: #d1d5e8;
        --navbar-linear-bg: linear-gradient(120deg,rgba(209, 213, 232, 1) 7%, rgba(0, 1, 13, 1) 55%);
        --nav-item-bg: rgba(112, 116, 142, 0.3);
    }

        :root[data-bs-theme="dark"] .bootstrap-datetimepicker-widget table td span.disabled, .bootstrap-datetimepicker-widget table td i.disabled, .bootstrap-datetimepicker-widget table td span.disabled:hover, .bootstrap-datetimepicker-widget table td i.disabled:hover {
            color: var(--bs-gray);
        }

        :root[data-bs-theme="dark"] .bootstrap-datetimepicker-widget table td.disabled, .bootstrap-datetimepicker-widget table td.disabled:hover {
            color: var(--bs-gray);
        }

    :root[data-bs-theme="auto"] thead {
        --bs-table-bg: var(--bs-light);
        --bs-table-color: var(--bs-dark);
    }

    :root[data-bs-theme="dark"] thead {
        --bs-table-bg: var(--bs-tertiary-bg);
        --bs-table-color: var(--bs-light);
    }

.navbar {
    background: var(--navbar-bg);
    background: var(--navbar-linear-bg);
}

#sidebar {
    background: var(--sidebar-bg);
    background: var(--sidebar-linear-bg);
}

/*sidebar navigation shadow*/
    #sidebar .nav-item .nav-link:not(.active):not(.disable-hover):hover {
        background: var(--nav-item-bg);
    }

    #sidebar .nav-item.has-tree-view.active {
        background: var(--nav-item-bg);
    }

    #sidebar .nav-item.has-tree-view:has(.show) {
        background: var(--nav-item-bg);
    }

    #sidebar .nav-link.expanded {
        background: var(--nav-item-bg);
    }

#sidebar .nav-link.active {
    background-color: var(--bs-primary);
    color: #fff !important;
}

/* select 2 */
/* disabled */
.select2-container--bootstrap-5.select2-container--disabled .select2-selection, .select2-container--bootstrap-5.select2-container--disabled.select2-container--focus .select2-selection {
    background-color: var(--bs-secondary-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    opacity: 1;
}

/* widget */
.select2-container--bootstrap-5 .select2-dropdown {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
}

.select2-container--bootstrap-5 .select2-selection {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
}

/* option disabled */
    .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--disabled, .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-disabled=true] {
        color: var(--bs-gray);
    }

/* search */
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
}

/* item selected */
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: var(--bs-body-color);
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    color: var(--bs-body-color);
    border: var(--bs-border-width) solid var(--bs-border-color);
}

/* option selected */
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected, .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
    color: var(--option-selected-color);
    background-color: var(--option-selected-bg);
}

/* option highlited */
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
    color: var(--option-highlighted-color);
    background-color: var(--option-highlighted-bg);
}

/* datepicker */
/* option selected */
.bootstrap-datetimepicker-widget table td.active, .bootstrap-datetimepicker-widget table td.active:hover {
    color: var(--option-selected-color);
    background-color: var(--option-selected-bg);
    text-shadow: none;
}

.bootstrap-datetimepicker-widget table td span.active, .bootstrap-datetimepicker-widget table td i.active {
    color: var(--option-selected-color);
    background-color: var(--option-selected-bg);
    text-shadow: none;
}

/* option highlited */
.bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    color: var(--option-highlighted-color);
    background-color: var(--option-highlighted-bg);
    text-shadow: none;
}

.bootstrap-datetimepicker-widget table td span:hover, .bootstrap-datetimepicker-widget table td i:hover {
    color: var(--option-highlighted-color);
    background-color: var(--option-highlighted-bg);
    text-shadow: none;
}

.bootstrap-datetimepicker-widget table td.day:hover, .bootstrap-datetimepicker-widget table td.hour:hover, .bootstrap-datetimepicker-widget table td.minute:hover, .bootstrap-datetimepicker-widget table td.second:hover {
    color: var(--option-highlighted-color);
    background-color: var(--option-highlighted-bg);
    text-shadow: none;
}