:root {
    --bs-body-color: #f4f4f4;
    --bs-body-bg: #201f1e;
    --bs-body-hover-color: #525150;
    /*Top Menu*/
    --show-dot-grid-white: block;
    --show-dot-grid-black: none;
    /*Sidebar*/
    --b-bar-dark-background: #3b3a39;
    --b-bar-dropdown-dark-background: #474645;
    --b-bar-brand-dark-background: var(--b-bar-dark-background);
    --b-bar-item-dark-active-color: var(--bs-body-color);
    --b-bar-item-dark-active-background: var(--bs-body-hover-color);
    --b-bar-item-dark-hover-background: var(--bs-body-hover-color);
    /*Table*/
    --table-hover-color: var(--bs-body-color);
    --table-hover-background: #3b3a39;
    --table-border-color: #5c5c5c;
    --table-row-selected-color: var(--bs-body-color);
    --table-row-selected-background: #525151;
    --list-part-table-row-selected-color: var(--table-row-selected-color);
    --list-part-table-row-selected-background: var(--table-row-selected-background);
    /*Card*/
    --card-color: var(--bs-body-color);
    --card-background: #3b3a39;
    --card-header-color: var(--bs-body-color);
    --card-header-background: #201f1e;
    --card-header-hover-color: var(--card-header-color);
    --card-header-hover-background: var(--card-header-background);
    --card-border-color: var(--table-border-color);
    /*Form*/
    --form-color: var(--bs-body-color);
    --form-background: var(--bs-body-bg);
    --form-active-background-color: #303030;
    --form-disabled-color: #b3b0b0;
    --form-disabled-background: #343433;
    --form-border-color: var(--table-border-color);
    /*Loading Indicator*/
    --blazor-base-loading-indicator-color: var(--bs-body-color);
    --blazor-base-loading-indicator-background: var(--bs-body-bg);
    /*Chrome/Edge Scrollbar*/
    --scrollbar-thumb-color: #888;
    --scrollbar-thumb-hover-color: #adadad;
    --scrollbar-background-color: #4e4e4e;
}

body {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
}


.b-bar-vertical-inline.b-bar-dark .b-bar-brand .b-bar-link, .b-bar-vertical-popout.b-bar-dark .b-bar-brand .b-bar-link, .b-bar-vertical-small.b-bar-dark .b-bar-brand .b-bar-link {
    color: var(--bs-body-color);
}

.b-bar-vertical-inline.b-bar-dark .b-bar-link, .b-bar-vertical-popout.b-bar-dark .b-bar-link, .b-bar-vertical-small.b-bar-dark .b-bar-link {
    color: var(--bs-body-color);
}

.b-bar-vertical-inline .b-bar-dropdown .b-bar-dropdown-menu .b-bar-dropdown-item, .b-bar-vertical-popout .b-bar-dropdown .b-bar-dropdown-menu .b-bar-dropdown-item, .b-bar-vertical-small .b-bar-dropdown .b-bar-dropdown-menu .b-bar-dropdown-item {
    color: var(--bs-body-color);
}

.b-bar-vertical-inline .b-bar-dropdown .b-bar-dropdown-menu, .b-bar-vertical-popout .b-bar-dropdown .b-bar-dropdown-menu, .b-bar-vertical-small .b-bar-dropdown .b-bar-dropdown-menu {
    padding: 0px;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1b6ec2;
}

.table {
    color: var(--bs-body-color);
}

.table-hover tbody tr:hover {
    color: var(--table-hover-color);
    background-color: var(--table-hover-background);
}

.table td, .table th {
    border-bottom-color: var(--table-border-color);
}

.modal-content {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
}

.modal-header {
    border-bottom-color: var(--card-border-color);
}

.modal-footer {
    border-top-color: var(--card-border-color);
}

.card {
    color: var(--card-color);
    background-color: var(--card-background);
}

.card-header, .card-header button {
    color: var(--card-header-color);
    background-color: var(--card-header-background);
}

    .card-header button:hover {
        color: var(--card-header-hover-color);
        background-color: var(--card-header-hover-background);
    }

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: var(--card-header-color);
    background-color: var(--card-header-background);
    border-color: var(--card-border-color);
}

.nav-tabs {
    border-bottom-color: var(--card-border-color);
    background-color: var(--card-header-background);
}

.form-control:disabled, .form-control[readonly] {
    color: var(--form-disabled-color);
    background-color: var(--form-disabled-background);
    border-color: var(--form-border-color);
}

.form-control, .custom-select, .custom-file-label, .custom-file-label[data-browse]::after {
    color: var(--form-color);
    background-color: var(--form-background);
    border-color: var(--form-border-color);
}

    .form-control:focus {
        color: var(--form-color);
        background-color: var(--form-active-background-color);
    }

    .custom-select.is-invalid, .was-validated .custom-select:invalid {
        background-color: var(--form-background);
    }

input[type=date],
input[type=datetime],
input[type=datetime-local] {
    color-scheme: dark;
}

.fas {
    color: var(--bs-body-color);
}

button.close {
    color: var(--bs-body-color);
}

    button.close:hover {
        color: var(--bs-body-hover-color);
    }

.nav-link {
    color: var(--bs-body-color);
}

    .nav-link:hover {
        color: var(--bs-body-hover-color);
    }

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-background-color);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-color);
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--scrollbar-thumb-hover-color);
    }