.dark-mode {
    /*Lime Opacity (green-900 base, dark selected-accent recipe)*/
    --lime-opacity-1: #2A422533;
    --lime-opacity-3: #2A422588;
    --lime-opacity-4: #2A4225aa;
    /*Black/White*/
    --black: #fff;
    --white: #000;
    --light: #1a1a1a;
    /*Grey (DS 2.0 dark zinc ramp)*/
    --grey-1: #52525C;
    --grey-2: #3F3F46;
    --grey-3: #27272A;
    --grey-4: #09090B;
    /*Buttons (DS 2.0: primary stays green-600 in dark)*/
    --primary: #4B7C3D;
    /*Tertiary*/
    --tertiary: #7CB26C;
    --tertiary-hover: #AED2A3;
    --tertiary-active: #4B7C3D;
    --tertiary-disabled: #9c9ca0;
    /*Dark*/
    --dark-1: #aaa;
    --dark-2: #ccc;
    /*Misc*/
    /*Border (DS 2.0 dark border)*/
    --border: #27272A;
    /*Shadow*/
    --shadow-1: 0px 6px 10px rgba(0,0,0,0.04);
    --shadow-2: 0px 8px 14px rgba(90,90,90,0.1);
    --shadow-3: 0px 10px 20px rgba(90,90,90,0.12);
    /*colors*/
    --text-grey-1: #e4e3ef;
    --text-grey-2: #d2d1dc;
    --text-grey-3: #b7b6be;
    --text-grey-4: #a3a3aa;
    /*Page overlays*/
    --overlay-1: rgb(76 76 76 / 45%);
    --overlay-2: rgb(0 0 0 / 0.40);
    --overlay-3: rgb(0 0 0 / 0.60);
    --overlay-4: rgb(0 0 0 / 0.80);
    --overlay-light-1: rgb(0 0 0 / 40%);
}

    .dark-mode .range-slider {
        --progress-background: #36363e;
    }

    .dark-mode sidebar {
        border-right: 1px solid var(--border) !important;
    }

    .dark-mode .btn {
        box-shadow: none !important;
        font-weight: bold;
    }

    /*Dark --white flips to #000; primary buttons must keep white text on green-600*/
    .dark-mode .btn-primary, .dark-mode .btn-primary:hover, .dark-mode .btn-primary:active {
        color: #fff !important;
    }

    .dark-mode .btn-primary:disabled {
        background-color: #27272A;
        border-color: #27272A;
        color: #71717B;
    }

    /*Active pills use --tertiary + --white, which in dark resolve to green-400 + #000*/
    .dark-mode .btn-pill.active {
        background: var(--primary) !important;
        color: #fff !important;
    }

    .dark-mode .btn-light {
        border-color: var(--grey-1);
        background: var(--grey-3);
        color: var(--text-grey-3);
    }
    .dark-mode .badge-info {
        background: var(--skyblue-opacity-1);
    }

    .dark-mode .btn-light:hover {
        background: var(--grey-3);
        color: var(--black) !important;
    }

        .dark-mode .btn-light:focus, .dark-mode .btn-light:active {
            background: var(--grey-1) !important;
            color: var(--text-grey-1) !important;
        }
        .dark-mode .btn-light:active {
            border-color: var(--black) !important;
            color: var(--black) !important;
        }

    .dark-mode .btn-dark {
        color: var(--white);
    }

    .dark-mode header .search-input.form-control {
        background: rgb(255 255 255 / 0.10);
    }

    .dark-mode body.min-sidebar sidebar div.menu-nav.active {
        /*Dark --white is #000; active nav sits on green-600 and needs white text*/
        color: #fff !important;
    }

.dark-show {
    display: none;
}
.dark-hide {
    display: block;
}
.dark-mode .dark-show {
    display: block;
}
.dark-mode .dark-hide {
    display: none;
}

.dark-mode .form-control.hidden-input {
    background: transparent;
}

.dark-mode .form-control:focus {
    border-color: var(--lime-opacity-3) !important;
    box-shadow: 0 0 0 0.2rem var(--lime-opacity-1) !important;
}

.dark-mode .el-switch > input[type="checkbox"][disabled] + .el-switch-style {
    background-color: var(--grey-1);
}

.dark-mode .bg-tile {
    background-image: url('/Media/Img/Misc/tile-dark.svg');
}

.dark-mode .stage-object {
    border: 1px solid var(--border)
}

.dark-mode .menu-nav {
    font-weight: bold;
    color: var(--black) !important;
}
    .dark-mode .menu-nav:hover {
        background: var(--grey-3);
        color: var(--black) !important;
    }

    .dark-mode .menu-nav.active {
        background: var(--primary);
        /*Dark --white is #000; active nav sits on green-600 and needs white text*/
        color: #fff !important;
    }

    /*Light theme colors the active icon green-600, invisible on the dark solid-green bg*/
    .dark-mode .menu-nav.active svg {
        color: #fff;
    }
    .dark-mode .menu-nav:before {
        background: transparent !important;
    }

    .dark-mode .menu-nav:focus {
        background: var(--lime-opacity-3);
        color: unset;
    }

.dark-mode .menu-accordian .menu-nav.sm{
    color: var(--black)
}

.dark-mode .menu-accordian .menu-nav.sm:hover {
    background: var(--lime-opacity-3);
    color: unset;
}

.dark-mode .alert-primary {
    color: #b8daff;
    background-color: #004085;
    border-color: #004085;
}

.dark-mode .badge-primary {
    color: #b8daff;
    background-color: #004085;
}

.dark-mode .header-btns .btn {
    color: var(--white);
}

.dark-mode .edit-box {
    background: var(--grey-4) !important;
    box-shadow: none !important;
}
    .dark-mode .edit-box:hover {
        border-color: var(--tertiary-hover) !important;
        box-shadow: 0px 0px 0rem 0rem rgb(0 0 0 / 0%);
    }
    dark-mode .edit-box:active {
        border-color: var(--tertiary-active) !important;
    }

.dark-mode .calendar-object {
    background: var(--lime-2) !important;
}


.dark-mode .shadow-lg, .dark-mode .shadow, .dark-mode .shadow-sm {
    border: 1px solid var(--border);
    box-shadow: none !important
}

.dark-mode .el-switch .el-switch-style {
    background: var(--grey-2)
}

.dark-mode .fr-toolbar {
    color: var(--text-grey-1);
}

.dark-mode .nav-item.active .nav-item-text {
    /*Green-400 reads as the accent on dark surfaces where green-600 lacks contrast*/
    color: #7CB26C;
}

.dark-mode .form-control:focus {
    color: var(--text-grey-1);
}

.dark-mode .table-basic .table-header {
    background: var(--grey-4);
}

/*Shell restyle: top bar, sidebar accordion, collapse control*/
.dark-mode header .search-input {
    border-color: var(--grey-2);
}

.dark-mode header .header-profile-chip p {
    color: var(--text-grey-1);
}

.dark-mode #sidebar-collapse-btn {
    color: var(--tertiary);
}

.dark-mode li.open .menu-accordian {
    background: var(--lime-opacity-1);
}

.dark-mode #SidebarMenu > li.open > .menu-block > div.menu-nav.active {
    background: transparent;
    color: var(--tertiary) !important;
}

    .dark-mode #SidebarMenu > li.open > .menu-block > div.menu-nav.active svg {
        color: var(--tertiary);
    }

.dark-mode .menu-accordian .menu-nav.sm.active {
    background: var(--lime-opacity-3) !important;
    color: #AED2A3 !important;
}