body {
    /*    -ms-overflow-style: scrollbar;
        --primary-color: #018075;
    --primary-color-Opacity-20: #bfe7e3;
    --secondary-color: #F5A224;
    --light-primary-color: #19AF94;
    --hover-primary-color: #229087;
    --active-primary-color: #009e8f;
    --focus-primary-color: rgb(5, 100, 92);
    --calendar-primary-color: #018075;
    --calendar-active-color: #F5A224;
    --primary-opacaty-color: 1, 128, 117;
    --dark-primary-color: #073931;
    --dark-bright-color: #017e73;

*/
    --primary-color: #115c74;
    --primary-color-Opacity-20: rgba(41, 134, 204, 0.2);
    --light-primary-color: #115c74;
    --hover-primary-color: #115c74;
    --active-primary-color: #1585a9;
    --focus-primary-color: #1585a9;
    --calendar-primary-color: #2986cc;
    --calendar-active-color: #1585a9;
    --primary-opacaty-color: 41, 134, 204;
    --dark-primary-color: #0062c5;
    --dark-bright-color: #35a9ff;
    --darkmode-primary-color: #3da6f4;
    --primary-color-gradint: linear-gradient(90deg, #d4e7f5 0%, #115c74 100%);
}

/*************** Side Accessiblity Menu *****************/
#darkmode-toggle[type="checkbox"] {
    height: 0;
    visibility: hidden;
    width: 0;
}

    #darkmode-toggle[type="checkbox"] + label::before {
        display: none !important;
    }

    #darkmode-toggle[type="checkbox"] + label {
        align-items: center;
        display: inline-flex;
        justify-content: space-around;
        margin-bottom: 0;
        margin-left: 0;
    }

.darkmode-label {
    background: #fff;
    border-radius: 100px;
    cursor: pointer;
    display: block;
    height: 33px;
    position: relative;
    min-width: 70px;
    border: 0.01rem solid #b9b9b9;
}

    .darkmode-label .material-icons-outlined::after, .darkmode-label .material-icons::after {
        color: navajowhite;
        font-size: 45px;
    }

    .darkmode-label .material-icons-outlined::after {
        text-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
    }

    .darkmode-label::after {
        background: #f7f7f7;
        border: 0.01rem solid #b9b9b9;
        box-shadow: 0 0 0 0 transparent;
        border-radius: 90px;
        content: "";
        height: 26px;
        left: 3px;
        position: absolute;
        top: 2px;
        transition: 0.3s;
        width: 26px;
    }

#darkmode-toggle:checked + label::after {
    background: #fff;
}

#darkmode-toggle:checked + label {
    background: gray;
}

    #darkmode-toggle:checked + label .material-icons-outlined::after, #darkmode-toggle:checked + label .material-icons::after {
        color: #ffd69a;
    }

    #darkmode-toggle:checked + label:after {
        box-shadow: -19px 0 5px 0 rgba(0, 0, 0, 0.3);
        left: calc(100% - 5px);
        transform: translateX(-100%);
    }

.darkmode-label:active:after {
    width: 130px;
}

.darkmode-toggle-container {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    padding-bottom: 8px;
    text-align: center;
}

.prevent-select {
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

.settings-tools-container {
    background: radial-gradient(var(--lighter-black, #f6f6f6) 15%, transparent 16%, transparent 49%, var(--lighter-black, #f6f6f6) 50%, transparent 51%), radial-gradient(circle at top left, var(--lighter-black, #f6f6f6) 10%, transparent 10%, transparent 39%, var(--lighter-black, #f6f6f6) 40%, transparent 41%), radial-gradient(circle at top right, var(--lighter-black, #f6f6f6) 10%, transparent 10%, transparent 39%, var(--lighter-black, #f6f6f6) 40%, transparent 41%), radial-gradient(circle at bottom left, var(--lighter-black, #f6f6f6) 10%, transparent 10%, transparent 39%, var(--lighter-black, #f6f6f6) 40%, transparent 41%), radial-gradient(circle at bottom right, var(--lighter-black, #f6f6f6) 10%, transparent 10%, transparent 39%, var(--lighter-black, #f6f6f6) 40%, transparent 41%);
    background-color: var(--light-black, #ffffff);
    background-size: 1em 1em;
    box-shadow: 0 0 5px rgba(0, 0, 0, .5);
    height: 100vh;
    left: -300px;
    opacity: 1;
    position: fixed;
    top: 0;
    transition-duration: 0.5s, 0.3s;
    transition-property: visibility, opacity, left;
    width: 300px;
    z-index: 9999;
}

    .settings-tools-container[style*="left: -300px"] {
        opacity: 0;
        visibility: hidden;
    }

    .settings-tools-container[style*="left: 0px"] {
        opacity: 1;
        visibility: visible;
    }

.settings-tools-buttons {
    align-content: center;
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: end;
    margin-left: 8px;
    margin-right: 8px;
    margin-top: 16px;
    padding-left: 0 !important;
    text-align: center;
}

    .settings-tools-buttons a {
        background-color: #f7f7f7;
        border: 0 !important;
        border-radius: 6px;
        color: #606060;
        cursor: pointer;
        height: 30px;
        margin-left: 5px;
        padding: 0;
        text-decoration: none;
        width: 30px;
    }
        .settings-tools-buttons a i::before {
            font-size: 16px;
        
        }
        .settings-tools-buttons a i::after {
            font-size: 29px;
            position: relative;
            top: 5px;
        }

        .settings-tools-buttons a:hover {
            border-color: transparent;
            color: #fff;
            transition: 0.6s;
        }

    .settings-tools-buttons .close-button:hover {
        background: darkred;
    }

    .settings-tools-buttons .reset-button:hover {
        background: var(--light-primary-color);
    }

.settings-item {
    background: transparent;
    border-radius: 0;
    margin: 0 20px;
    padding: 8px 16px 0;
}
.settings-item-item {
    background-color: #f7f7f7;
/*    padding: 20px 24px;*/
    margin: 0 15px;
    border-radius: 15px;
}
    .settings-item-item .settings-item .setting-title {
        margin-bottom: 0;
    }
.settings-item-item  .settings-item.setting-item-color {
    display: block;
}
.settings-item-item .settings-item.setting-item-color .setting-title {
    margin-bottom: 16px;
}
    .settings-item-item .settings-item {
        border-bottom: 1px solid #d1d2d2;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        padding: 11px 3px;
        margin: 5px;
        direction: rtl;
    }
.settings-item .setting-title {
    font-family: 'Cairo' !important;
    font-size: var(--font-16, 16px);
    margin-bottom: 16px;
}

.setting-item.accessiblity-container {
    display: flex;
    padding-bottom: 8px;
}

.settings-item .accessiblity {
    cursor: pointer;
    font-family: 'Cairo' !important;
    transition: all 0.3s ease-in-out;
    font-size: 12px;
    background-color: transparent;
    width: auto;
    border: 1px solid var(--active-primary-color);
    padding: 3px 6px;
    color: var(--active-primary-color);
    border-radius: 50px;
}

    .settings-item .accessiblity:first-child {
        margin-left: 8px;
    }

    .settings-item .accessiblity:hover {
        background: #f2f2f2;
        transition: all 0.3s ease-in-out;
    }

    .settings-item .accessiblity.active {
        background: var(--active-primary-color);
        color: #ffffff;
    }

.setting-range-labels {
    display: flex;
    justify-content: space-between;
    list-style: none;
    margin-right: -8px;
    padding: 0;
    text-align: center;
}

.range-label {
    color: #000;
    font-size: 12px;
    width: 14.286%;
}

    .range-label.selected {
        color: var(--primary-color);
    }

.setting-slider {
    -webkit-appearance: none;
    -webkit-transition: 0.2s;
    background: #a6a6a6;
    border-radius: 5px;
    direction: rtl;
    height: 7px;
    opacity: 1;
    outline: none;
    transition: opacity 0.2s;
    width: 100%;
}

    .setting-slider ::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        background: var(--primary-color);
        border: none;
        border-radius: 50%;
        cursor: pointer;
        height: 13px;
        width: 13px;
    }

    .setting-slider::-moz-range-thumb {
        background: var(--primary-color);
        border: none;
        border-radius: 50%;
        cursor: pointer;
        height: 13px;
        width: 13px;
    }

.color-box {
    background-color: var(--primary-color);
    cursor: pointer;
    display: inline-block;
    height: 30px;
    margin-left: 4px;
    width: 30px;
    border-radius: 6px;
}

    .color-box:hover, .color-box:focus {
        filter: brightness(0.8);
    }

    .color-box.selected {
        border: 2px solid #fff;
    }

    .color-box.lightblue {
        background-image: linear-gradient(to right, #2986cc 50%, #67AFE5 50%);
    }

    .color-box.blue {
        background-image: linear-gradient(to right, #086271 50%, #1C9EB9 50%);
    }

    .color-box.darkblue {
        background-image: linear-gradient(to right, #1f6e86 50%, #33a1ab 50%);
    }

    .color-box.purple {
        background-image: linear-gradient(to right, #7846a8 50%, #9B6BB3 50%);
    }

    .color-box.pink {
        background-image: linear-gradient(to right, #d56073 50%, #EB6579 50%);
    }

    .color-box.caramel {
        background-image: linear-gradient(to right, #e69138 50%, #F0B06C 50%);
    }

    .color-box.darkred {
        background-image: linear-gradient(to right, #7a1322 50%, #BB3145 50%);
    }

    .color-box.darkyellow {
        background-image: linear-gradient(to right, #665628 50%, #CEA93C 50%);
    }

    .color-box.green {
        background-image: linear-gradient(to right, #018075 50%, #19AF94 50%);
    }
    .color-box.golden {
        background-image: linear-gradient(to right, #C19605 50%, #FFC605 50%);
    }

.sticky-side-container {
    align-content: center;
    align-items: center;
    display: flex;
    flex-direction: row;
    left: -161px;
    position: fixed;
    text-align: center;
    top: 255px;
    transform: rotate(90deg);
    transition: all 0.3s ease-in-out;
    width: 275px;
}

    .sticky-side-container a {
        -ms-user-select: none;
        -webkit-user-select: none;
        background-color: rgba(var(--primary-opacaty-color), 0.5);
        border-radius: 13px;
        bottom: 1px;
        color: #fff;
        cursor: pointer !important;
        font-family: 'Cairo' !important;
        font-size: var(--font-14, 14px);
        height: 100px;
        padding: 5px 6px;
        padding-top: 3px;
        position: relative;
        text-decoration: none;
        transition: all 0.1s ease-in;
        user-select: none;
        width: 38%;
        z-index: 999;
    }

        .sticky-side-container a:first-child {
            margin-left: 3px;
        }

        .sticky-side-container a:hover, .sticky-side-container a:focus {
            background-color: var(--hover-primary-color);
            bottom: 11px;
            color: navajowhite;
            font-size: var(--font-16, 16px);
            padding-top: 9px;
            transition: all 0.1s ease-out;
        }





/* #region DefaultTheme */
html.green,
body.green {
    -ms-overflow-style: scrollbar;
    --primary-color: #018075;
    --primary-color-Opacity-20: #01807521;
    --secondary-color: #f5a224;
    --light-primary-color: #19AF94;
    --hover-primary-color: #229087;
    --active-primary-color: #009e8f;
    --focus-primary-color: rgb(5, 100, 92);
    --calendar-primary-color: #018075;
    --calendar-active-color: #f5a224;
    --primary-opacaty-color: 1, 128, 117;
    --dark-primary-color: #014d40;
    --dark-bright-color: #017e73;
    --darkmode-primary-color: #00a597;
}

    /* #endregion DefaultTheme */

    /*#region blue theme*/
    html.blue,
    body.blue {
        --primary-color: #086271;
        --primary-color-Opacity-20: #659EB0 ;
        --light-primary-color: #1C9EB9;
        --hover-primary-color: #3995aa;
        --active-primary-color: #8debff;
        --focus-primary-color: #11a5be;
        --calendar-primary-color: #086271;
        --calendar-active-color: #8debff;
        --primary-opacaty-color: 7, 97, 113 ; 
        --dark-primary-color: #005f70;
        --dark-bright-color: #1dceec;
        --darkmode-primary-color: #11a5be;
    }

        body.blue h1 {
            color: var(--primary-color) !important;
        }

        body.blue .search_links {
            color: var(--primary-color) !important;
        }

            body.blue .search_links:hover {
                color: var(--active-primary-color) !important;
            }

        body.blue .SubMenuItem.active {
            color: #fff !important;
        }

        body.blue .select2-container--default .select2-results__option--highlighted[aria-selected] {
            background-color: var(--primary-color) !important;
        }

        body.blue .btn.focus,
        body.blue .btn:focus,
        body.blue .btn-primary:not(:disabled):not(.disabled).active:focus,
        body.blue .btn-primary:not(:disabled):not(.disabled):active:focus,
        body.blue .show > .btn-primary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(96, 174, 227, 0.35);
        }

        body.blue .radioButtonList .radio-input-container input[type="radio"]:checked + label::before {
            color: #fff;
        }

        body.blue .progressbar li.Bactive::before {
            border-color: var(--primary-color) !important;
            color: var(--primary-color);
        }

        body.blue .progressbar li.Bactive:not(li.Nactive) {
            color: var(--primary-color) !important;
        }

        body.blue .ProgressBarContainer .progressbar li.Bactive a {
            color: var(--primary-color) !important;
        }

        body.blue a[style="color:#009E8F;"] {
            color: var(--primary-color) !important;
        }

        body.blue .Instructions {
            color: var(--secondary-color);
        }

        body.blue .calendar > table > thead > tr:first-child > td {
            color: #fff !important;
        }

        body.blue #Calendar1 > tbody > tr:first-child > td {
            background: var(--calendar-primary-color) !important;
        }

        body.blue .progress {
            background: rgba(var(--primary-opacaty-color), 0.3);
        }

        body.blue .schedule-wedgit-select .select2-container--default .select2-selection--single {
            background: rgba(var(--primary-opacaty-color), 0.3);
        }

        body.blue .MiladiHijiriTap.nav-tabs.nav > li.nav-item > a.active {
            color: #fff !important;
        }


    /*#endregion blue theme*/

    /*#region darkblue theme*/
html.darkblue,
body.darkblue {
    --primary-color: #206e87;
    --primary-color-Opacity-20: rgba(32, 110, 135, 0.2);
    --light-primary-color: #4e92aa; /* lighter shade */
    --hover-primary-color: #1b6078; /* slightly darker hover */
    --active-primary-color: #155068; /* darker active */
    --focus-primary-color: #1b6078; /* match hover */

    --calendar-primary-color: #206e87;
    --calendar-active-color: #155068;
    --primary-opacaty-color: 32, 110, 135;
    --dark-primary-color: #184e6a; /* deeper dark tone */
    --dark-bright-color: #2fa4d7; /* bright highlight color */
    --darkmode-primary-color: #3b8bb2; /* balanced for dark mode */
}

        body.darkblue h1 {
            color: var(--primary-color) !important;
        }

        body.darkblue .search_links {
            color: var(--dark-primary-color) !important;
        }

            body.darkblue .search_links:hover {
                color: var(--active-primary-color) !important;
            }


        body.darkblue .SubMenuItem.active {
            color: #fff !important;
        }

        body.darkblue .select2-container--default .select2-results__option--highlighted[aria-selected] {
            background-color: var(--primary-color) !important;
        }

        body.darkblue .btn.focus,
        body.darkblue .btn:focus,
        body.darkblue .btn-primary:not(:disabled):not(.disabled).active:focus,
        body.darkblue .btn-primary:not(:disabled):not(.disabled):active:focus,
        body.darkblue .show > .btn-primary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(213, 96, 115, 0.35);
        }

        body.darkblue .radioButtonList .radio-input-container input[type="radio"]:checked + label::before {
            color: #fff;
        }

        body.darkblue .progressbar li.Bactive::before {
            border-color: var(--primary-color) !important;
            color: var(--primary-color);
        }

        body.darkblue .progressbar li.Bactive:not(li.Nactive) {
            color: var(--primary-color) !important;
        }

        body.darkblue .ProgressBarContainer .progressbar li.Bactive a {
            color: var(--primary-color) !important;
        }

        body.darkblue a[style="color:#009E8F;"] {
            color: var(--primary-color) !important;
        }

        body.darkblue .Instructions {
            color: var(--secondary-color);
        }

        body.darkblue .calendar > table > thead > tr:first-child > td {
            color: #fff !important;
        }

        body.darkblue #Calendar1 > tbody > tr:first-child > td {
            background: var(--calendar-primary-color) !important;
        }

        body.darkblue .progress {
            background: rgba(var(--primary-opacaty-color), 0.3);
        }

        body.darkblue .schedule-wedgit-select .select2-container--default .select2-selection--single {
            background: rgba(var(--primary-opacaty-color), 0.3);
        }

        body.darkblue .MiladiHijiriTap.nav-tabs.nav > li.nav-item > a.active {
            color: #fff !important;
        }

    /* #endregion darkblue theme */

    /*#region lightblue theme*/
html.lightblue,
body.lightblue {
    --primary-color: #2986cc;
    --primary-color-Opacity-20: rgba(41, 134, 204, 0.2);
    --light-primary-color: #67AFE5;
    --hover-primary-color: #1e6bb8;
    --active-primary-color: #106cc9;
    --focus-primary-color: #106cc9;
    --calendar-primary-color: #2986cc;
    --calendar-active-color: #106cc9;
    --primary-opacaty-color: 41, 134, 204;
    --dark-primary-color: #0062c5;
    --dark-bright-color: #35a9ff;
    --darkmode-primary-color: #3da6f4;
    --primary-color-gradint: linear-gradient(90deg, #84CBFD 0%, #0376C6 100%);
}

        body.lightblue .AatharSchoolDataWidget .buttons-container button:disabled {
            background: none;
        }

        body.lightblue .search_links {
            color: var(--primary-color) !important;
        }

            body.lightblue .search_links:hover {
                color: var(--active-primary-color) !important;
            }

        body.lightblue .SubMenuItem.active {
            color: #fff !important;
        }

        body.lightblue .select2-container--default .select2-results__option--highlighted[aria-selected] {
            background-color: var(--primary-color) !important;
        }

        body.lightblue .btn.focus,
        body.lightblue .btn:focus,
        body.lightblue .btn-primary:not(:disabled):not(.disabled).active:focus,
        body.lightblue .btn-primary:not(:disabled):not(.disabled):active:focus,
        body.lightblue .show > .btn-primary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(213, 96, 115, 0.35);
        }

        body.lightblue .radioButtonList .radio-input-container input[type="radio"]:checked + label::before {
            color: #fff;
        }

        body.lightblue .progressbar li.Bactive::before {
            border-color: var(--primary-color) !important;
            color: var(--primary-color);
        }

        body.lightblue .progressbar li.Bactive:not(li.Nactive) {
            color: var(--primary-color) !important;
        }

        body.lightblue .ProgressBarContainer .progressbar li.Bactive a {
            color: var(--primary-color) !important;
        }

        body.lightblue a[style="color:#009E8F;"] {
            color: var(--primary-color) !important;
        }

        body.lightblue .Instructions {
            color: var(--secondary-color);
        }

        body.lightblue .calendar > table > thead > tr:first-child > td {
            color: #fff !important;
        }

        body.lightblue #Calendar1 > tbody > tr:first-child > td {
            background: var(--calendar-primary-color) !important;
        }

        body.lightblue .progress {
            background: var(--light-primary-color);
        }

        body.lightblue .schedule-wedgit-select .select2-container--default .select2-selection--single {
            background: rgba(var(--primary-opacaty-color), 0.3);
        }

        body.lightblue .MiladiHijiriTap.nav-tabs.nav > li.nav-item > a.active {
            color: #fff !important;
        }

    /* #endregion lightblue theme */

    /*#region pink theme*/
html.pink,
body.pink {
    --primary-color: #d56073;
    --primary-color-Opacity-20: #e9b6b6;
    --light-primary-color: #EB6579;
    --hover-primary-color: #e16e81;
    --active-primary-color: #EB6579;
    --focus-primary-color: #b84d69;
    --calendar-primary-color: #d56073;
    --calendar-active-color: #F5A224;
    --primary-opacaty-color: 213, 96, 115;
    --dark-primary-color: hsla(220, 47%, 34%, 0.87);
    --dark-bright-color: #ff5a75;
    --darkmode-primary-color: #d55a6e;
    --primary-color-gradint: linear-gradient(90deg, #e9b6b6 0%, #d56073 100%);
}

        body.pink .search_links {
            color: var(--primary-color) !important;
        }

            body.pink .search_links:hover {
                color: var(--active-primary-color) !important;
            }

        body.pink .SubMenuItem.active {
            color: #fff !important;
        }

        body.pink .select2-container--default .select2-results__option--highlighted[aria-selected] {
            background-color: var(--primary-color) !important;
        }

        body.pink .btn.focus,
        body.pink .btn:focus,
        body.pink .btn-primary:not(:disabled):not(.disabled).active:focus,
        body.pink .btn-primary:not(:disabled):not(.disabled):active:focus,
        body.pink .show > .btn-primary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(213, 96, 115, 0.35);
        }

        body.pink .radioButtonList .radio-input-container input[type="radio"]:checked + label::before {
            color: #fff;
        }

        body.pink .progressbar li.Bactive::before {
            border-color: var(--primary-color) !important;
            color: var(--primary-color);
        }

        body.pink .progressbar li.Bactive:not(li.Nactive) {
            color: var(--primary-color) !important;
        }

        body.pink .ProgressBarContainer .progressbar li.Bactive a {
            color: var(--primary-color) !important;
        }

        body.pink a[style="color:#009E8F;"] {
            color: var(--primary-color) !important;
        }

        body.pink .Instructions {
            color: var(--secondary-color);
        }

        body.pink .calendar > table > thead > tr:first-child > td {
            color: #fff !important;
        }

        body.pink #Calendar1 > tbody > tr:first-child > td {
            background: var(--calendar-primary-color) !important;
        }

        body.pink .AatharSchoolDataWidget .buttons-container button:disabled/*,
        body.pink .progress*/ {
            background: none;
        }

        body.pink .schedule-wedgit-select .select2-container--default .select2-selection--single {
            background: rgba(var(--primary-opacaty-color), 0.3);
        }

        body.pink .MiladiHijiriTap.nav-tabs.nav > li.nav-item > a.active {
            color: #fff !important;
        }

    /* #endregion pink theme */

    /*#region darkyellow theme*/
html.darkyellow,
body.darkyellow {
    --primary-color: #665628;
    --primary-color-Opacity-20: rgba(102, 86, 40, 0.2);
    --light-primary-color: #CEA93C;
    --hover-primary-color: #f1e099;
    --active-primary-color: #c9b14f;
    --focus-primary-color: #665628;
    --calendar-primary-color: #836f34;
    --calendar-active-color: #f2e5b1;
    --primary-opacaty-color: 102, 86, 40;
    --dark-primary-color: #7a621e;
    --dark-bright-color: #ffd45a;
    --darkmode-primary-color: #b79a47;
    --primary-color-gradint: linear-gradient(90deg, #e0ddd4 0%, #665628 100%)
}

        body.darkyellow .search_links {
            color: var(--dark-primary-color) !important;
        }

            body.darkyellow .search_links:hover {
                color: var(--active-primary-color) !important;
            }

        body.darkyellow .sticky-side-container a:hover {
            color: var(--primary-color) !important;
        }

        /*body.darkyellow .noData-img-container {
            background: rgba(102, 86, 40, 0.5) !important;
        }*/

        body.darkyellow .accordian_child_list_search a {
            color: var(--dark-primary-color) !important;
        }

            body.darkyellow .accordian_child_list_search a:hover {
                color: var(--light-primary-color) !important;
            }

        body.darkyellow .SubMenuItem.active {
            color: #fff !important;
        }

        body.darkyellow .select2-container--default .select2-results__option--highlighted[aria-selected] {
            background-color: var(--primary-color) !important;
        }

        body.darkyellow .btn.focus,
        body.darkyellow .btn:focus,
        body.darkyellow .btn-primary:not(:disabled):not(.disabled).active:focus,
        body.darkyellow .btn-primary:not(:disabled):not(.disabled):active:focus,
        body.darkyellow .show > .btn-primary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(213, 96, 115, 0.35);
        }

        body.darkyellow .radioButtonList .radio-input-container input[type="radio"]:checked + label::before {
            color: #fff;
        }

        body.darkyellow .progressbar li.Bactive::before {
            border-color: var(--primary-color) !important;
            color: var(--primary-color);
        }

        body.darkyellow .progressbar li.Bactive:not(li.Nactive) {
            color: var(--primary-color) !important;
        }

        body.darkyellow .ProgressBarContainer .progressbar li.Bactive a {
            color: var(--primary-color) !important;
        }

        body.darkyellow a[style="color:#009E8F;"] {
            color: var(--primary-color) !important;
        }

        body.darkyellow .Instructions {
            color: var(--secondary-color);
        }

        body.darkyellow .calendar > table > thead > tr:first-child > td {
            color: var(--secondary-color) !important;
        }

        body.darkyellow #Calendar1 > tbody > tr:first-child > td {
            background: var(--calendar-primary-color) !important;
        }

        body.darkyellow .AatharSchoolDataWidget .buttons-container button:disabled/*,
        body.darkyellow .progress*/ {
            background: none;
        }

        body.darkyellow .schedule-wedgit-select .select2-container--default .select2-selection--single {
            background: rgba(var(--primary-opacaty-color), 0.3);
        }

        body.darkyellow .MiladiHijiriTap.nav-tabs.nav > li.nav-item > a.active {
            color: var(--secondary-color) !important;
        }

    /* #endregion darkyellow theme */

    /* #region darkred theme */
html.darkred,
body.darkred {
    --primary-color: #7a1322;
    --primary-color-Opacity-20: rgba(122, 19, 34, 0.2);
    --light-primary-color: #BB3145;
    --hover-primary-color: #ad3244;
    --active-primary-color: #872433;
    --focus-primary-color: #ad3244;
    --calendar-primary-color: #872433;
    --calendar-active-color: #ad3244;
    --primary-opacaty-color: 122, 19, 34;
    --dark-primary-color: #770b1b;
    --dark-bright-color: #d81432;
    --darkmode-primary-color: #ce364d;
    --primary-color-gradint: linear-gradient(90deg, #e4d0d3 0%, #7a1322 100%);
}

        body.darkred .SubMenuItem.active {
            color: #fff !important;
        }

        body.darkred .accordian_child_list_search a {
            color: var(--primary-color) !important;
        }

            body.darkred .accordian_child_list_search a:hover {
                color: var(--hover-primary-color) !important;
            }

        body.darkred .select2-container--default .select2-results__option--highlighted[aria-selected] {
            background-color: var(--primary-color) !important;
        }

        body.darkred .btn.focus,
        body.darkred .btn:focus,
        body.darkred .btn-primary:not(:disabled):not(.disabled).active:focus,
        body.darkred .btn-primary:not(:disabled):not(.disabled):active:focus,
        body.darkred .show > .btn-primary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(213, 96, 115, 0.35);
        }

        body.darkred .radioButtonList .radio-input-container input[type="radio"]:checked + label::before {
            color: #fff;
        }

        body.darkred .progressbar li.Bactive::before {
            border-color: var(--primary-color) !important;
            color: var(--primary-color);
        }

        body.darkred .progressbar li.Bactive:not(li.Nactive) {
            color: var(--primary-color) !important;
        }

        body.darkred .ProgressBarContainer .progressbar li.Bactive a {
            color: var(--primary-color) !important;
        }

        body.darkred a[style="color:#009E8F;"] {
            color: var(--primary-color) !important;
        }

        body.darkred .Instructions {
            color: var(--secondary-color);
        }

        body.darkred .calendar > table > thead > tr:first-child > td {
            color: #fff !important;
        }

        body.darkred #Calendar1 > tbody > tr:first-child > td {
            background: var(--calendar-primary-color) !important;
        }

        body.darkred .AatharSchoolDataWidget .buttons-container button:disabled/*,
        body.darkred .progress*/ {
            background: none;
        }

        body.darkred .schedule-wedgit-select .select2-container--default .select2-selection--single {
            background: rgba(var(--primary-opacaty-color), 0.3);
        }

        body.darkred .MiladiHijiriTap.nav-tabs.nav > li.nav-item > a.active {
            color: #fff !important;
        }

    /* #endregion darkred theme */

    /* #region caramel theme */
html.caramel,
body.caramel {
    --primary-color: #e69138;
    --primary-color-Opacity-20: rgba(230, 145, 56, 0.2);
    --light-primary-color: #F0B06C;
    --hover-primary-color: #fda13e;
    --active-primary-color: #e28623;
    --focus-primary-color: #e69138;
    --calendar-primary-color: #e69138;
    --calendar-active-color: #eeac65;
    --primary-opacaty-color: 230, 145, 56;
    --dark-primary-color: #b57028;
    --dark-bright-color: #ff9b33;
    --darkmode-primary-color: #e69138;
    --primary-color-gradint: linear-gradient(90deg, #fae9d7 0%, #e69138 100%);
}

        body.caramel .search_links {
            color: var(--dark-primary-color) !important;
        }

            body.caramel .search_links:hover {
                color: var(--active-primary-color) !important;
            }

        body.caramel .SchoolDataWidget::before {
            background: var(--primary-color) 0 0 no-repeat padding-box !important;
        }

        body.caramel .SchoolDataWidget::after {
            background: #ffe7cc 0 0 no-repeat padding-box !important;
        }

        body.caramel .Grades-widget-knob .nav-tabs.nav .nav-link.active,
        body.caramel .MiladiHijiriTap.nav-tabs.nav .nav-link.active {
            color: #fff !important;
        }

        body.caramel .accordian_child_list_search a {
            color: var(--primary-color) !important;
        }

            body.caramel .accordian_child_list_search a:hover {
                color: var(--hover-primary-color) !important;
            }

        body.caramel .select2-container--default .select2-results__option--highlighted[aria-selected] {
            background-color: var(--primary-color) !important;
        }

        body.caramel .btn.focus,
        body.caramel .btn:focus,
        body.caramel .btn-primary:not(:disabled):not(.disabled).active:focus,
        body.caramel .btn-primary:not(:disabled):not(.disabled):active:focus,
        body.caramel .show > .btn-primary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(213, 96, 115, 0.35);
        }

        body.caramel .radioButtonList .radio-input-container input[type="radio"]:checked + label::before {
            color: #fff;
        }

        body.caramel .progressbar li.Bactive::before {
            border-color: var(--primary-color) !important;
            color: var(--primary-color);
        }

        body.caramel .progressbar li.Bactive:not(li.Nactive) {
            color: var(--primary-color) !important;
        }

        body.caramel .ProgressBarContainer .progressbar li.Bactive a {
            color: var(--primary-color) !important;
        }

        body.caramel a[style="color:#009E8F;"] {
            color: var(--primary-color) !important;
        }

        body.caramel .Instructions {
            color: var(--secondary-color);
        }

        body.caramel .calendar > table > thead > tr:first-child > td {
            color: var(--secondary-color) !important;
        }

        body.caramel #Calendar1 > tbody > tr:first-child > td {
            background: var(--calendar-primary-color) !important;
        }

        body.caramel .AatharSchoolDataWidget .buttons-container button:disabled/*,
        body.caramel .progress*/ {
            background: none;
        }

        body.caramel .schedule-wedgit-select .select2-container--default .select2-selection--single {
            background: rgba(var(--primary-opacaty-color), 0.3);
        }

        body.caramel .MiladiHijiriTap.nav-tabs.nav > li.nav-item > a.active {
            color: var(--secondary-color) !important;
        }

    /* #endregion caramel theme */

    /*#region purple theme*/
html.purple,
body.purple {
    --primary-color: #7846a8;
    --primary-color-Opacity-20: rgba(120, 70, 168, 0.2);
    --light-primary-color: #9B6BB3;
    --hover-primary-color: #9B6BB3;
    --active-primary-color: #8c58bd;
    --focus-primary-color: #8c58bd;
    --calendar-primary-color: #7846a8;
    --calendar-active-color: #8c58bd;
    --primary-opacaty-color: 120, 70, 168;
    --dark-primary-color: #8e46d2;
    --dark-bright-color: #c384ff;
    --darkmode-primary-color: #8c58bd;
    --primary-color-gradint: linear-gradient(90deg, #e4daee 0%, #7846a8 100%);
}

        body.purple .accordian_child_list_search a {
            color: var(--dark-primary-color) !important;
        }

            body.purple .accordian_child_list_search a:hover {
                color: var(--hover-primary-color) !important;
            }

        body.purple .Menuhidden .SidebarContainer .menu > li.active a i {
            color: var(--dark-bright-color) !important;
        }

        body.purple .SubMenuItem.active {
            color: #fff !important;
        }

        body.purple .select2-container--default .select2-results__option--highlighted[aria-selected] {
            background-color: var(--primary-color) !important;
        }

        body.purple .btn.focus,
        body.purple .btn:focus,
        body.purple .btn-primary:not(:disabled):not(.disabled).active:focus,
        body.purple .btn-primary:not(:disabled):not(.disabled):active:focus,
        body.purple .show > .btn-primary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(213, 96, 115, 0.35);
        }

        body.purple .radioButtonList .radio-input-container input[type="radio"]:checked + label::before {
            color: #fff;
        }

        body.purple .progressbar li.Bactive::before {
            border-color: var(--primary-color) !important;
            color: var(--primary-color);
        }

        body.purple .progressbar li.Bactive:not(li.Nactive) {
            color: var(--primary-color) !important;
        }

        body.purple .ProgressBarContainer .progressbar li.Bactive a {
            color: var(--primary-color) !important;
        }

        body.purple a[style="color:#009E8F;"] {
            color: var(--primary-color) !important;
        }

        body.purple .Instructions {
            color: var(--secondary-color);
        }

        body.purple .calendar > table > thead > tr:first-child > td {
            color: #fff !important;
        }

        body.purple #Calendar1 > tbody > tr:first-child > td {
            background: var(--calendar-primary-color) !important;
        }

        body.purple .AatharSchoolDataWidget .buttons-container button:disabled/*,
        body.purple .progress*/ {
            background: none;
        }

        body.purple .schedule-wedgit-select .select2-container--default .select2-selection--single {
            background: rgba(var(--primary-opacaty-color), 0.3);
        }

        body.purple .MiladiHijiriTap.nav-tabs.nav > li.nav-item > a.active {
            color: #fff !important;
        }

    /*#endregion purple theme*/
     
    /*#region green theme*/
html.green,
body.green {
    --primary-color: #018075;
    --primary-color-Opacity-20: #01807521;
    --light-primary-color: #19AF94;
    --hover-primary-color: #229087;
    --active-primary-color: #009e8f;
    --focus-primary-color: rgb(5, 100, 92);
    --calendar-primary-color: #018075;
    --calendar-active-color: #F5A224;
    --primary-opacaty-color: 1, 128, 117;
    --dark-primary-color: #005e56;
    --dark-bright-color: #00b9a9;
    --darkmode-primary-color: #009f91;
    --primary-color-gradint: linear-gradient(90deg, #deefed 0%, #018075 100%);

}

        body.green .AatharSchoolDataWidget .buttons-container button:disabled {
            background: none;
        }

        body.green .Menuhidden .SidebarContainer .menu > li.active a i {
            color: var(--dark-bright-color) !important;
        }

        body.green .SubMenuItem.active {
            color: #fff !important;
        }

        body.green .select2-container--default .select2-results__option--highlighted[aria-selected] {
            background-color: var(--primary-color) !important;
        }

        body.green .btn.focus,
        body.green .btn:focus,
        body.green .btn-primary:not(:disabled):not(.disabled).active:focus,
        body.green .btn-primary:not(:disabled):not(.disabled):active:focus,
        body.green .show > .btn-primary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(var(--primary-opacaty-color), 0.25);
        }

        body.green .radioButtonList .radio-input-container input[type="radio"]:checked + label::before {
            color: #fff;
        }

        body.green .progressbar li.Bactive::before {
            border-color: var(--primary-color) !important;
            color: var(--primary-color);
        }

        body.green .progressbar li.Bactive:not(li.Nactive) {
            color: var(--primary-color) !important;
        }

        body.green .ProgressBarContainer .progressbar li.Bactive a {
            color: var(--primary-color) !important;
        }

        body.green a[style="color:#009E8F;"] {
            color: var(--primary-color) !important;
        }

        body.green .Instructions {
            color: var(--secondary-color);
        }

        body.green .calendar > table > thead > tr:first-child > td {
            color: #fff !important;
        }

        body.green #Calendar1 > tbody > tr:first-child > td {
            background: var(--calendar-primary-color) !important;
        }


        body.green .schedule-wedgit-select .select2-container--default .select2-selection--single {
            background: rgba(var(--primary-opacaty-color), 0.3);
        }

        body.green .MiladiHijiriTap.nav-tabs.nav > li.nav-item > a.active {
            color: #fff !important;
        }

        body.green .search_links {
            color: var(--primary-color) !important;
        }

            body.green .search_links:hover {
                color: var(--active-primary-color) !important;
            }

    /*#endregion green theme*/

/*#region golden theme*/
html.golden,
body.golden {
    --primary-color: #C19605; /* Main dark color */
    --primary-color-Opacity-20: rgba(193, 150, 5, 0.2); /* 20% opacity */
    --light-primary-color: #FFC605; /* Light color */
    --hover-primary-color: #D4A705; /* Hover effect color */
    --active-primary-color: #B58805; /* Active state color */
    --focus-primary-color: rgb(180, 140, 5); /* Focus state color */
    --calendar-primary-color: #C19605; /* Calendar primary color */
    --calendar-active-color: #F5B324; /* Calendar active color */
    --primary-opacaty-color: 193, 150, 5; /* For use in `rgba` */
    --dark-primary-color: #8E7004; /* Darker shade */
    --dark-bright-color: #FFC805; /* Brighter shade */
    --darkmode-primary-color: #A68004; /* Dark mode primary */
}

    body.green .AatharSchoolDataWidget .buttons-container button:disabled {
        background: none;
    }

    body.green .Menuhidden .SidebarContainer .menu > li.active a i {
        color: var(--dark-bright-color) !important;
    }

    body.green .SubMenuItem.active {
        color: #fff !important;
    }

    body.green .select2-container--default .select2-results__option--highlighted[aria-selected] {
        background-color: var(--primary-color) !important;
    }

    body.green .btn.focus,
    body.green .btn:focus,
    body.green .btn-primary:not(:disabled):not(.disabled).active:focus,
    body.green .btn-primary:not(:disabled):not(.disabled):active:focus,
    body.green .show > .btn-primary.dropdown-toggle:focus {
        box-shadow: 0 0 0 0.2rem rgba(var(--primary-opacaty-color), 0.25);
    }

    body.green .radioButtonList .radio-input-container input[type="radio"]:checked + label::before {
        color: #fff;
    }

    body.green .progressbar li.Bactive::before {
        border-color: var(--primary-color) !important;
        color: var(--primary-color);
    }

    body.green .progressbar li.Bactive:not(li.Nactive) {
        color: var(--primary-color) !important;
    }

    body.green .ProgressBarContainer .progressbar li.Bactive a {
        color: var(--primary-color) !important;
    }

    body.green a[style="color:#009E8F;"] {
        color: var(--primary-color) !important;
    }

    body.green .Instructions {
        color: var(--secondary-color);
    }

    body.green .calendar > table > thead > tr:first-child > td {
        color: #fff !important;
    }

    body.green #Calendar1 > tbody > tr:first-child > td {
        background: var(--calendar-primary-color) !important;
    }


    body.green .schedule-wedgit-select .select2-container--default .select2-selection--single {
        background: rgba(var(--primary-opacaty-color), 0.3);
    }

    body.green .MiladiHijiriTap.nav-tabs.nav > li.nav-item > a.active {
        color: #fff !important;
    }

    body.green .search_links {
        color: var(--primary-color) !important;
    }

        body.green .search_links:hover {
            color: var(--active-primary-color) !important;
        }

/*#endregion golden theme*/
    /*#region FontSizes*/

    body.font-size-xxs {
        --font-12: 8px;
        --font-13: 9px;
        --font-14: 10px;
        --font-15: 11px;
        --font-16: 12px;
        --font-17: 13px;
        --font-18: 14px;
        --font-19: 15px;
        --font-20: 16px;
        --font-21: 17px;
        --font-22: 18px;
        --font-23: 19px;
        --font-24: 20px;
        --font-25: 21px;
        --font-26: 22px;
        --font-27: 23px;
        --font-28: 24px;
        --font-29: 25px;
        --font-30: 26px;
        --font-31: 27px;
        --font-32: 28px;
        --font-33: 29px;
        --font-34: 30px;
        --font-35: 31px;
        --font-36: 32px;
    }

    body.font-size-xs {
        --font-12: 9px;
        --font-13: 10px;
        --font-14: 11px;
        --font-15: 12px;
        --font-16: 13px;
        --font-17: 14px;
        --font-18: 15px;
        --font-19: 16px;
        --font-20: 17px;
        --font-21: 18px;
        --font-22: 19px;
        --font-23: 20px;
        --font-24: 21px;
        --font-25: 22px;
        --font-26: 23px;
        --font-27: 24px;
        --font-28: 25px;
        --font-29: 26px;
        --font-30: 27px;
        --font-31: 28px;
        --font-32: 29px;
        --font-33: 30px;
        --font-34: 31px;
        --font-35: 32px;
        --font-36: 33px;
    }

    body.font-size-s {
        --font-12: 10px;
        --font-13: 11px;
        --font-14: 12px;
        --font-15: 13px;
        --font-16: 14px;
        --font-17: 15px;
        --font-18: 16px;
        --font-19: 17px;
        --font-20: 18px;
        --font-21: 19px;
        --font-22: 20px;
        --font-23: 21px;
        --font-24: 22px;
        --font-25: 23px;
        --font-26: 24px;
        --font-27: 25px;
        --font-28: 26px;
        --font-29: 27px;
        --font-30: 28px;
        --font-31: 29px;
        --font-32: 30px;
        --font-33: 31px;
        --font-34: 32px;
        --font-35: 33px;
        --font-36: 34px;
    }

    body.font-size-m {
        --font-12: 12px;
        --font-13: 13px;
        --font-14: 14px;
        --font-15: 15px;
        --font-16: 16px;
        --font-17: 17px;
        --font-18: 18px;
        --font-19: 19px;
        --font-20: 20px;
        --font-21: 21px;
        --font-22: 22px;
        --font-23: 23px;
        --font-24: 24px;
        --font-25: 25px;
        --font-26: 26px;
        --font-27: 27px;
        --font-28: 28px;
        --font-29: 29px;
        --font-30: 30px;
        --font-31: 31px;
        --font-32: 32px;
        --font-33: 33px;
        --font-34: 34px;
        --font-35: 35px;
        --font-36: 36px;
    }

    body.font-size-l {
        --font-12: 14px;
        --font-13: 15px;
        --font-14: 16px;
        --font-15: 17px;
        --font-16: 18px;
        --font-17: 19px;
        --font-18: 20px;
        --font-19: 21px;
        --font-20: 22px;
        --font-21: 23px;
        --font-22: 24px;
        --font-23: 25px;
        --font-24: 26px;
        --font-25: 27px;
        --font-26: 28px;
        --font-27: 29px;
        --font-28: 30px;
        --font-29: 31px;
        --font-30: 32px;
        --font-31: 33px;
        --font-32: 34px;
        --font-33: 35px;
        --font-34: 36px;
        --font-35: 37px;
        --font-36: 38px;
    }

    body.font-size-xl {
        --font-12: 16px;
        --font-13: 17px;
        --font-14: 18px;
        --font-15: 19px;
        --font-16: 20px;
        --font-17: 21px;
        --font-18: 22px;
        --font-19: 23px;
        --font-20: 24px;
        --font-21: 25px;
        --font-22: 26px;
        --font-23: 27px;
        --font-24: 28px;
        --font-25: 29px;
        --font-26: 30px;
        --font-27: 31px;
        --font-28: 32px;
        --font-29: 33px;
        --font-30: 34px;
        --font-31: 35px;
        --font-32: 36px;
        --font-33: 37px;
        --font-34: 38px;
        --font-35: 39px;
        --font-36: 40px;
    }

    body.font-size-xxl {
        --font-12: 18px;
        --font-13: 19px;
        --font-14: 20px;
        --font-15: 21px;
        --font-16: 22px;
        --font-17: 23px;
        --font-18: 24px;
        --font-19: 25px;
        --font-20: 26px;
        --font-21: 27px;
        --font-22: 28px;
        --font-23: 29px;
        --font-24: 30px;
        --font-25: 31px;
        --font-26: 32px;
        --font-27: 33px;
        --font-28: 34px;
        --font-29: 35px;
        --font-30: 36px;
        --font-31: 37px;
        --font-32: 38px;
        --font-33: 39px;
        --font-34: 40px;
        --font-35: 41px;
        --font-36: 42px;
    }

    /*#endregion FontSizes*/

    /*#region grayscale*/

    body.grayscale::before {
        -moz-backdrop-filter: grayscale(100%);
        -ms-backdrop-filter: grayscale(100%);
        -o-backdrop-filter: grayscale(100%);
        -webkit-backdrop-filter: grayscale(100%);
        backdrop-filter: grayscale(100%);
        content: "";
        height: 100%;
        left: 0;
        pointer-events: none;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 10000;
    }


    /*#endregion grayscale*/

    /*#region darkmode*/
    body.dark {
        --dark-gray: #2f3033;
        --light-gray: #45474c;
        --lighter-gray: #5e6169;
        --main-text: #ececec;
        --dark-red: #4d0000;
        --border: #434343;
    }

        body.dark .Course-menu {
            background-color: var(--dark-gray);
        }

        body.dark .Course-menu-ul.teacher-course-menu a {
            color: #fff;
        }

        body.dark .writePostWarper {
            border: 1px solid #4f4d4d;
        }

        body.dark .folder-wedgit-header,
        body.dark .tab__label, body.dark .tab__close {
            background-color: var(--lighter-gray);
        }

        body.dark .box-tools .btn:not(.circleBtn) > i::before {
            color: var(--primary-color);
        }

        body.dark .CoursePageContainer .page-title-container {
            background: var(--dark-gray) !important;
            color: #fff;
        }

        body.dark .writePostWarper .pull-right i.fa::before,
        body.dark .writePostWarper .pull-right a span {
            color: #eee;
        }

        body.dark .coursepage .widget-block .img-circle i {
            color: #fff;
        }

        body .dark .collapeslist::before, body.dark .accordion > .card > .card-header {
            background: var(--primary-color) !important;
            color: #fff !important;
        }

            body.dark .accordion > .card > .card-header::after, .accordion > .card > .card-header::before {
                background: #fff;
            }

        body.dark .accordion > .card .card-body {
            background: #35363a !important;
            color: var(--main-text) !important;
        }

            body.dark .accordion > .card .card-body .text-medium-black {
                color: #fff !important;
            }


        body.dark .search_links {
            color: var(--primary-color) !important;
        }

            body.dark .search_links:hover {
                color: var(--active-primary-color) !important;
            }

        body.dark #assessmentDragableContainer #assessment-right-side,
        body.dark #assessmentDragableContainer #assessment-left-side,
        body.dark .assessmentHeader,
        body.dark .QuestionNumber,
        body.dark .QuestionGrayHeader,
        body.dark .assessment-left-side,
        body.dark #assessmentDragableContainer + .assessmentFooter,
        body.dark .MainHeader .HeaderProfile,
        body.dark .NotificationList,
        body.dark .NotificationList .MaterialsContent,
        body.dark .eu-cookies.eu-cookies-panel,
        body.dark .topnav,
        body.dark .widget_overlay .widget_overlay_content,
        body.dark .radioButtonList .radio-input-container input[type="radio"] + label,
        body.dark .menu-tooltip,
        body.dark .select2-container--classic .select2-results__option--highlighted[aria-selected],
        body.dark #ctl00_PlaceHolderMain_divSearchList,
        body.dark .contentContainer,
        body.dark .pagesection,
        body.dark .TransitionalContainer,
        body.dark .MenuHamButt,
        body.dark .Menuhidden .SidebarContainer .menu > li a > i,
        body.dark .nav-tabs,
        body.dark .absent-box-container,
        body.dark .box-header-icon.circleBtn,
        body.dark {
            background: var(--light-gray) !important;
            background-color: var(--light-gray) !important;
            color: var(--main-text) !important;
        }

            body.dark .AssesBoxTool,
            body.dark .AssesBoxContent,
            body.dark .row .section-header,
            body.dark .section-header,
            body.dark .form-ModalPopup,
            body.dark .info-item,
            body.dark .general-progress-info,
            body.dark .form-mandatory-field table td,
            body.dark .childrensListInfo,
            body.dark .SubMenuContainer,
            body.dark:not(.Menuhidden) .SidebarContainer::before,
            body.dark .main-section,
            body.dark .SidebarContainer,
            body.dark .box-header-icon.circleBtn,
            body.dark .MainHeader,
            body.dark #mCSB_1_container,
            body.dark .course-report-box,
            body.dark #divNoSchedule,
            body.dark .panel.box.box-primary .box-header.no-border,
            body.dark .SidebarContainer .tabs-container .tab-content .mCustomScrollBox.mCSB_vertical.mCSB_outside {
                background-color: var(--dark-gray) !important;
            }

            body.dark .exams-details .exam-name,
            body.dark .course-chart-container,
            body.dark .SidebarContent .tooltip .tooltip-inner,
            body.dark .ProfileInfo,
            body.dark .custom-file-label,
            body.dark .form-control:not([id*="rv"]),
            body.dark input.StandardFontPlain,
            body.dark .form-input-container .select_date_table,
            body.dark .select2-container--default .select2-results__option[aria-selected=true],
            body.dark .select2-container--default.select2-container--disabled .select2-selection--multiple,
            body.dark .select2-container--default .select2-selection--multiple .select2-selection__choice__remove,
            body.dark .select2-container--default .select2-selection--multiple,
            body.dark .select2-container--default .select2-selection--single,
            body.dark .select2-close-mask,
            body.dark .select2-container--default .select2-search--dropdown .select2-search__field,
            body.dark .search_item_header,
            body.dark .widget_overlay_content.active .course_gradebook_sub li {
                background-color: var(--lighter-gray) !important;
            }

            body.dark .topnav,
            body.dark .chart-mark-details {
                border-color: var(--dark-gray) !important;
            }

            body.dark .iFrm,
            body.dark .SearchDIV,
            body.dark .eduwaveWrapper,
            body.dark .itg_dashboard_textarea,
            body.dark .courseposts .box-footer,
            body.dark .box-footer.box-comments,
            body.dark .coursepagecontent.content:not(.coursepage),
            body.dark .courseleftSide .courses-boxes-container .course-box,
            body.dark .coursepage .page-title-box,
            body.dark .exams-details,
            body.dark .class-avg-details,
            body.dark .row-item,
            body.dark .settings-item,
            body.dark .select2-container--default.select2-container--disabled .select2-selection--single,
            body.dark .accordian_child_list_search,
            body.dark .main_ul_links,
            body.dark .custom-chart-grades,
            body.dark .box:not(.absent-box-container, .absent-box-container .box, .SchoolDataWidget, .Dashboard-info-widget) {
                background-color: var(--dark-gray) !important;
            }

            body.dark .MainHeader .dropdown .dropdown-menu {
                border: 1px solid var(--light-gray) !important;
            }

            body.dark .ContainerDIV,
            body.dark .info-item,
            body.dark .settings-tools-container,
            body.dark .radioButtonList .radio-input-container input[type="radio"] + label,
            body.dark .table-Style > tbody > tr:not(.pagination-container) > td,
            body.dark .select2-container--classic .select2-selection--single,
            body.dark .select2-container--default .select2-selection--multiple .select2-selection__choice,
            body.dark .select2-dropdown,
            body.dark .header-icons li > a:not(.header-icons .dropdown-menu li a),
            body.dark .MainHeader .dropdown .dropdown-menu,
            body.dark .item-with-avatar,
            body.dark .people-list-item,
            body.dark .switchUser,
            body.dark .custom-chart-container .progress,
            body.dark .panel.box.box-primary .box-header.no-border,
            body.dark .header-icons ul ul.e31_InstantMessages .item,
            body.dark .section.wrapper.eduwaveContent,
            body.dark .dropdown #collapse1,
            body.dark .dropdown #collapse2,
            body.dark .Instant_messages_container > table > tbody > tr:nth-child(1) > td > div:nth-child(1),
            body.dark textarea,
            body.dark .Instant_messages_container > table > tbody > tr:nth-child(1) > td table > tbody > tr:nth-child(3) > td:nth-child(1),
            body.dark input[type="text"], input[type="password"],
            body.dark .RadComboBoxDropDown_Default,
            body.dark .accordion-container .manageNotifications,
            body.dark .fullSearchArea .FilterBar-content {
                background: var(--light-gray) !important;
            }

                body.dark .select2-container--classic .select2-dropdown,
                body.dark .select2-container--classic .select2-selection--multiple .select2-selection__choice,
                body.dark .select2-container--classic .select2-selection--single .select2-selection__arrow,
                body.dark .nav-buttons-container button:not(.active) {
                    background-color: var(--light-gray) !important;
                }

            body.dark .dropdown li {
                border-color: #313131;
            }

            /***********main-text***************/

            body.dark .iFrm,
            body.dark .AssesBoxContent,
            body.dark .labelsStyle,
            body.dark .Course-menu-ul li i::before,
            body.dark .Course-menu-ul a,
            body.dark .btn,
            body.dark textarea,
            body.dark .form-control::placeholder,
            body.dark .text-muted,
            body.dark .postsContainer .box-header,
            body.dark .latestPostsWidget .products-list.posts-list .product-description,
            body.dark .topnav li:not(li span),
            body.dark .form-ModalPopup li,
            body.dark .info-item .info-value,
            body.dark .info-item .info-name,
            body.dark .SidebarContent .tooltip .tooltip-inner,
            body.dark .text-primary.schedule-title,
            body.dark .section-title,
            body.dark .section-title i::after,
            body.dark .settings-tools-buttons a,
            body.dark .setting-item.accessiblity-container a,
            body.dark .setting-item .range-label,
            body.dark .settings-item .setting-title,
            body.dark .Start-end-days div,
            body.dark [for*="cb"],
            body.dark .DataEditButton .material-icons-outlined[data-icon]::after,
            body.dark .DataEditButton .material-icons[data-icon]::after,
            body.dark .schedule-timeline-item > div:first-child,
            body.dark .TransitionalSub::before,
            body.dark .TransitionalSub,
            body.dark .custom-file-label span,
            body.dark .custom-file-label::after,
            body.dark .help-text,
            body.dark .form-control,
            body.dark .StandardFontPlain,
            body.dark .childInfoDescription,
            body.dark .select2-container--default .select2-selection--multiple .select2-selection__placeholder,
            body.dark .select2-container--default .select2-selection--single .select2-selection__arrow b::before,
            body.dark .select2-container--default .select2-selection--single,
            body.dark .select2-container--default .select2-selection--single .select2-selection__rendered,
            body.dark .form-mandatory-field table td,
            body.dark label.form-label,
            body.dark .form-label,
            body.dark .collapse-icon.btn i,
            body.dark .sectionTitle,
            body.dark .title-with-buttons .section-title,
            body.dark .section-header .section-title,
            body.dark .SearchAreaTitle,
            body.dark .search_item_header,
            body.dark .itg-icons.Notification:before,
            body.dark .SuperStudentNoData,
            body.dark .ValidationClassNoData,
            body.dark .Page-Title,
            body.dark .Transitional,
            body.dark .MenuHamButt .HamButt::after,
            body.dark .SidebarContainer .menu > li a,
            body.dark .header-user-des,
            body.dark .HeaderTitle,
            body.dark .item-with-avatar,
            body.dark .people-list-item,
            body.dark .Remain-days,
            body.dark .Start-end-days,
            body.dark .noDataText,
            body.dark .custom-chart-item,
            body.dark .nav-tabs .nav-link,
            body.dark .absent-box-container .box,
            body.dark .SchoolDataWidget .box-title,
            body.dark .SchoolDataWidget li,
            body.dark .MainHeader .dropdown .dropdown-menu.switchUserMenu a,
            body.dark .SidebarContainer .tabs-container .menu li a:before,
            body.dark ul#ulAssisstantType li i,
            body.dark .box .course-report-box:hover .clearfix .group-info-container .widget-title .OpenIcon i:before,
            body.dark #notificationMenu .slimScrollDiv li a,
            body.dark .e31_InstantMessages li.titlebar a:hover,
            body.dark .dropdown #collapse1 a:hover,
            body.dark .dropdown #collapse2 .child-item a:hover,
            body.dark .TitleWithButtons span,
            body.dark .TitleWithButtons,
            body.dark input[type="text"], input[type="password"],
            body.dark TABLE A:hover,
            body.dark LI,
            body.dark .ui-widget-content,
            body.dark .tab__label, body.dark .tab__close,
            body.dark .TitleBarDiv.tab i,
            body.dark .TableGridstyle .TabelGrid > tbody > tr > td,
            body.dark .BookDesc,
            body.dark .lessonOutcomeTitle,
            body.dark .folder-wedgit-header,
            body.darker ul#ulAssisstantType li i,
            body.dark .tab-content #menLessonOutcom,
            body.dark .SettingLeaderBoard .label-text,
            body.dark #optionsMenu .text-container .label-text,
            body.darker .SettingLeaderBoard .label-text,
            body.darker #optionsMenu .text-container .label-text,
            body.darker .OptionsContextMenu li,
            body.darker .TitleWithButtons span,
            body.darker .TitleWithButtons,
            body.darker .TitleBarDiv.tab i,
            body.darker .tab__label,
            body.darker .RadComboBoxDropDown_Default,
            body.darker .RadComboBoxDropDown_Default .rcbHovered, body.darker .RadComboBoxDropDown_Default .rcbCheckAllItemsHovered,
            body.darker LI,
            body.darker input[type="text"], body.darker input[type="password"],
            body.darker .ui-widget-content,
            body.darker textarea,
            body.darker #notificationMenu .slimScrollDiv li a,
            body.darker .course_gradebook_description,
            body.dark .course_gradebook_description,
            body.darker .box .course-report-box:hover .clearfix .group-info-container .widget-title .OpenIcon i:before,
            body.dark .box .course-report-box:hover .clearfix .group-info-container .widget-title .OpenIcon i:before {
                color: var(--main-text) !important;
            }

                body.dark .info-item .info-value span,
                body.dark .dropdown-menu.show a:hover,
                body.dark .childInfoItem a:hover,
                body.dark .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
                body.dark .accordian_child_list_search a:hover,
                body.dark .Menuhidden .SidebarContainer .menu > li.active a i,
                body.dark .header-icons a::before,
                body.dark .header-icons li > a:not(.header-icons .dropdown-menu li a),
                body.dark .mobile_button.lftbtn.glyphicon.glyphicon-menu-hamburger:after,
                body.dark .switchUser .dropdown-toggle .username,
                body.dark .switchUser .dropdown-toggle::after {
                    color: var(--dark-bright-color) !important;
                }

            body.dark .Dashboard-info-widget {
                background-image: none;
            }

            body.dark .iFrm,
            body.dark .AssesBoxTool,
            body.dark .AssesBoxContent,
            body.dark .coursepagecontent.content:not(.coursepage) .TitleWithButtons,
            body.dark .eduwaveWrapper,
            body.dark .Course-menu-ul a,
            body.dark #assessmentDragableContainer + .assessmentFooter,
            body.dark .Course-menu-ul li,
            body.dark .itg_dashboard_textarea,
            body.dark .box-comments .box-comment,
            body.dark .courseposts .box-footer,
            body.dark .ProfileInfo,
            body.dark .ProfileInfo table tr,
            body.dark .two-factor-container .box:not(.steps-list-box),
            body.dark #footer,
            body.dark .select2-container--classic .select2-search--dropdown .select2-search__field,
            body.dark .select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow,
            body.dark .select2-container--classic .select2-selection--single .select2-selection__arrow,
            body.dark .select2-container--classic .select2-selection--single,
            body.dark .select2-container--default .select2-search--dropdown .select2-search__field,
            body.dark .select2-container--default.select2-container--focus .select2-selection--multiple,
            body.dark .select2-container--default .select2-selection--single,
            body.dark .select2-dropdown,
            body.dark .select2-container--default .select2-search--dropdown .select2-search__field,
            body.dark .SidebarContainer,
            body.dark .widget-header,
            body.dark .custom-chart-grades,
            body.dark .MainHeader {
                border-color: var(--border) !important;
            }

            /***********--border***************/

            body.dark .Remain-days,
            body.dark .SchoolDataWidget:before {
                background: #b47008;
            }

            body.dark .SchoolDataWidget:after {
                background: #7f530f;
            }

            body.dark .nav-tabs .nav-link.active {
                color: var(--secondary-color) !important;
            }

            body.dark .Dashboard-info-widget,
            body.dark .setting-item.accessiblity-container a,
            body.dark .chart-mark-details,
            body.dark .chart-mark-details-popup {
                background: var(--dark-gray) !important;
                background-color: var(--dark-gray) !important;
            }

            body.dark body:not(.Menuhidden) .SidebarContainer .logo {
                filter: brightness(1.6);
            }

            body.dark .select_date_table tr td input[type="image"] {
                filter: contrast(0) brightness(1.5);
            }

            body.dark .select2-container--default .select2-search--dropdown .select2-search__field {
                background: var(--lighter-gray);
                border: 1px solid #e8e8e8;
                border-radius: 4px;
            }

            body.dark table.tblOptions tr td .form-label,
            body.dark .childInfoItem a {
                color: var(--light-primary-color) !important;
            }

            body.dark .childrensListInfo {
                outline: 0.1px solid var(--dark-gray);
            }

            body.dark .childItem.girl {
                background: #fb9090;
            }

            body.dark .childItem.boy {
                background: #6a9fdf;
            }

            body.dark [id*="ReportViewer"],
            body.dark [id*="fixedTable"] {
                background: #fff !important;
            }

            body.dark .select2-container--default.select2-container--disabled .select2-selection--single b::before {
                color: var(--border) !important;
            }

            body.dark .radioButtonList .radio-input-container input[type="radio"]:checked + label {
                border-color: var(--primary-color);
            }

            body.dark .select2-container--default.select2-container--focus .select2-selection--multiple:focus-visible {
                border-color: var(--primary-color) !important;
            }

            body.dark .SchoolDataWidget {
                background: var(--dark-primary-color);
            }

            body.dark .SidebarContainer .menu > li a i {
                background: none !important;
                background-color: unset !important;
                background-image: none !important;
            }

            body.dark .setting-item.accessiblity-container a {
                background: #515151 !important;
            }

                body.dark .setting-item.accessiblity-container a:hover {
                    color: #fff !important;
                }

            body.dark #ctl00_PlaceHolderMain_AttendanceAndAbsentMainDiv {
                filter: brightness(0.95);
            }

            body.dark .menu-tooltip::after {
                border-color: transparent transparent transparent var(--light-gray);
            }

            body.dark .menu-tooltip::before {
                border-right: 8px solid var(--light-gray);
            }

            body.dark .setting-item.accessiblity-container a.active {
                background: var(--dark-bright-color) !important;
            }

            body.dark .row.no-gutters.main-page-section .box:not(.SchoolDataWidget),
            body.dark .box-footer,
            body.dark .TableGridstyle .TabelGrid > tbody > tr,
            body.dark .TableGridstyle .TabelGrid > tbody > tr.tableHeaderCell > th,
            body.dark #myTabContent .active, .dot:hover,
            body.dark .MainHeader.without-sidebar::before,
            body.dark .Filter-bar,
            body.dark .CoursePageContainer .courseleftSide .Course-menu-ul li.active,
            body.dark .CoursePageContainer .courseleftSide .Course-menu-ul li.active a,
            body.dark table[id*='gvNotifications'],
            body.dark .TableGridstyle .TabelGrid > tbody > tr.GridPagination td,
            body.dark .fc th,
            body.dark .ui-widget-content:not(.ui-state-highlight):not(.fc-today),
            body.darker .course-report-box {
                background-color: var(--dark-gray) !important;
            }
            body.dark .TableGridstyle .TabelGrid > tbody > tr
             {
                border-color: var(--light-gray) !important;
            }
            body.dark .Filter-bar,
            body.dark .courses-content,
            body.dark .header-title-container, body.dark .courses-header-container,
            body.dark .box.box-widget.widget-user .widget-user-header,
            body.dark .box.box-widget.widget-user {
                border-color: var(--lighter-gray) !important;
            }
            body.darker .TableGridstyle .TabelGrid > tbody > tr{
                border-color: var(--light-black) !important;
            }
body.darker .dropdown #collapse1 a,
body.darker .dropdown #collapse2 .child-item a,
body.darker .Filter-bar,
body.darker .coursepagecontent.content:not(.coursepage) .TitleWithButtons,
body.darker .TitleStyle, body.darker .TitleWithButtons,
body.darker .courses-content,
body.darker .header-title-container, body.darker .courses-header-container,
body.darker .box.box-widget.widget-user .widget-user-header,
body.darker .box.box-widget.widget-user {
    border-color: var(--lighter-black) !important;
}
body.dark .box-footer {
    border-top: var(--light-gray);
}
            body.dark .assist-item {
                border-bottom: 8px solid #6a676785;
            }
            body.dark .row.no-gutters.main-page-section .box:not(.SchoolDataWidget) .gradeDetailsItem.box,
            body.dark .row.no-gutters.main-page-section .box:not(.SchoolDataWidget) .assist-item,
            body.dark .row.no-gutters.main-page-section .box:not(.SchoolDataWidget) .course-box {
                background-color: var(--light-gray) !important;
                box-shadow: none !important;
            }

            body.dark .row.no-gutters.main-page-section .box .events-item.box,
            body.dark .row.no-gutters.main-page-section .box .todo-item {
                background-color: var(--light-gray) !important;
            }

                body.dark .row.no-gutters.main-page-section .box .todo-item-title,
                body.dark .row.no-gutters.main-page-section .box .events-item.box .course-time,
                body.dark .row.no-gutters.main-page-section .box:not(.SchoolDataWidget) .course-box .course-title {
                    color: #fff !important;
                }

            body.dark .DivsGridContainer .table-row,
            body.dark .DivsGridContainer .table-row-col {
                background: var(--light-gray) !important;
                background-color: var(--light-gray) !important;
            }

            body.dark .CourseNameTitle::after {
                border: 1px solid #fff;
                color: #fff;
            }

            body.dark .CourseNameTitle span {
                color: #fff;
            }

            body.dark #slidorion .eduwaveWrapper .courseContentTabs .tab-pane {
                background: transparent;
                padding: 10px 15px;
            }

            body.dark .CourseColapsedMenu .panel-default > .panel-heading a.collapseArrow::before {
                color: #eee !important;
            }

            body.dark .CourseColapsedMenu .SelectedSection,
            body.dark .CourseColapsedMenu .panel-default > .panel-heading {
                background-color: transparent !important;
                color: #eee !important;
            }

            body.dark #accordion.twoswitchaccordion {
                background-color: rgba(255, 255, 255, 0.15);
            }

            body.dark .CourseColapsedMenu .panel-default > .panel-heading a {
                color: #ddd;
            }

            body.dark #accordion.twoswitchaccordion,
            body.dark .CourseColapsedMenu {
                background: var(--dark-gray) !important;
            }

            body.dark #accordion .panel-group .panel-heading + .panel-collapse > .panel-body {
                background: var(--dark-gray) !important;
            }

            body.dark .ColapsedMenuItem span {
                color: #d5d5d5 !important;
            }

            body.dark .start-course-header .bread-crumb-links {
                color: #fff;
            }

            body.dark #slider > div .eduwaveWrapper {
                background: var(--dark-gray) !important;
            }

            body.dark #slider > div {
                background: var(--light-gray) !important;
            }

            body.dark #slidorion .eduwaveWrapper .courseContentTabs .tab-pane.active {
                color: #fff;
            }

            body.darker #Calendar_New td[role="gridcell"] a,
            body.dark #Calendar_New td[role="gridcell"] a,
            body.dark .course_gradebook_sub li,
            body.darker .course_gradebook_sub li .pull-left {
                color: #d0d0d0 !important;
            }

            body.darker #Calendar_New .k-footer a.k-link,
            body.dark #Calendar_New .k-footer a.k-link,
            body.darker #Calendar_New thead tr[role="row"] th[scope="col"],
            body.dark #Calendar_New thead tr[role="row"] th[scope="col"] {
                color: #fff !important;
            }

            body.darker #Calendar_New .k-header .k-link:not(.k-state-hover) span.k-icon:before,
            body.dark #Calendar_New .k-header .k-link:not(.k-state-hover) span.k-icon:before,
            body.darker #Calendar_New .k-header a,
            body.dark #Calendar_New .k-header a {
                color: #fff !important;
            }

    /*#endregion darkmode*/

    /*#region darkermode*/

    body.darker {
        --dark-black: #181a1b;
        --light-black: #1d2021;
        --lighter-black: #35363a;
        --main-text: #dddad6;
        --dark-red: #4d0000;
        --border: #282121;
    }

        body.darker .collapeslist::before,
        body.darker .accordion > .card > .card-header {
            background: var(--primary-color) !important;
            color: #fff !important;
        }

            body.darker .accordion > .card > .card-header::after, .accordion > .card > .card-header::before {
                background: #fff;
            }

        body.darker .accordion > .card .card-body {
            background: #35363a !important;
            color: var(--main-text) !important;
        }

            body.darker .accordion > .card .card-body .text-medium-black {
                color: #fff !important;
            }

        body.darker a.search_links {
            color: var(--dark-bright-color) !important;
        }

            body.darker a.search_links:hover {
                color: var(--active-primary-color) !important;
            }

        body.darker .NotificationList,
        body.darker .NotificationList .MaterialsContent,
        body.darker .eu-cookies.eu-cookies-panel,
        body.darker .topnav,
        body.darker .menu-tooltip,
        body.darker .select2-container--classic .select2-results__option--highlighted[aria-selected],
        body.darker #ctl00_PlaceHolderMain_divSearchList,
        body.darker .contentContainer,
        body.darker .pagesection,
        body.darker .TransitionalContainer,
        body.darker .MenuHamButt,
        body.darker .Menuhidden .SidebarContainer .menu > li a > i,
        body.darker .nav-tabs,
        body.darker .absent-box-container,
        body.darker .box-header-icon.circleBtn,
        body.darker {
            background: var(--light-black) !important;
            background-color: var(--light-black) !important;
            color: var(--main-text) !important;
        }

            body.darker .courseleftSide .courses-boxes-container .course-box,
            body.darker .row .section-header,
            body.darker .section-header,
            body.darker .form-ModalPopup,
            body.darker .info-item,
            body.darker .general-progress-info,
            body.darker .form-mandatory-field table td,
            body.darker .childrensListInfo,
            body.darker .SubMenuContainer,
            body.darker:not(.Menuhidden) .SidebarContainer::before,
            body.darker:not(.Menuhidden) .SidebarContainer .logo,
            body.darker .main-section,
            body.darker .SidebarContainer,
            body.darker .box-header-icon.circleBtn,
            body.darker .MainHeader,
            body.darker #myTabContent .active,
            body.darker .dot:hover,
            body.darker .box-footer,
            body.darker .accordion-container .manageNotifications,
            body.darker .dropdown #collapse1,
            body.darker .manageNotificationItem,
            body.darker .SearchDIV,
            body.darker .TableGridstyle .TabelGrid > tbody > tr.tableHeaderCell > th,
            body.darker .TableGridstyle .TabelGrid > tbody > tr,
            body.darker .coursepage .page-title-box,
            body.darker .RadComboBoxDropDown_Default,
            body.darker .fc th,
            body.darker .ui-widget-content,
            body.darker #mCSB_1_container,
            body.darker .SidebarContainer .tabs-container .tab-content .mCustomScrollBox.mCSB_vertical.mCSB_outside {
                background-color: var(--dark-black) !important;
            }

            body.darker .exams-details .exam-name,
            body.darker .course-chart-container,
            body.darker .SidebarContent .tooltip .tooltip-inner,
            body.darker .ProfileInfo,
            body.darker .custom-file-label,
            body.darker .form-control:not([id*="rv"]),
            body.darker input.StandardFontPlain,
            body.darker .form-input-container .select_date_table,
            body.darker .select2-container--default .select2-results__option[aria-selected=true],
            body.darker .select2-container--default.select2-container--disabled .select2-selection--multiple,
            body.darker .select2-container--default .select2-selection--multiple .select2-selection__choice__remove,
            body.darker .select2-container--default .select2-selection--multiple,
            body.darker .select2-container--default .select2-selection--single,
            body.darker .select2-close-mask,
            body.darker .select2-container--default .select2-search--dropdown .select2-search__field,
            body.darker .search_item_header,
            body.darker .tab__label,
            body.darker .tab__close,
            body.darker .widget_overlay .widget_overlay_content {
                background-color: var(--lighter-black) !important;
            }

            body.darker .radio-input-container input[type="radio"]:checked + span {
                color: var(--secondary-color) !important;
            }

                body.darker .radio-input-container input[type="radio"]:checked + span::before {
                    background-color: var(--secondary-color) !important;
                }

            body.darker .chart-mark-details {
                border-color: var(--dark-black) !important;
            }

            body.darker .Course-menu-ul li,
            body.darker .box-footer.box-comments,
            body.darker .courseposts .box-footer,
            body.darker .coursepagecontent.content:not(.coursepage),
            body.darker .exams-details,
            body.darker .class-avg-details,
            body.darker .row-item,
            body.darker .settings-item,
            body.darker .select2-container--default.select2-container--disabled .select2-selection--single,
            body.darker .accordian_child_list_search,
            body.darker .main_ul_links,
            body.darker .custom-chart-grades,
            body.darker .box:not(.absent-box-container, .absent-box-container .box, .SchoolDataWidget, .Dashboard-info-widget) {
                background-color: var(--dark-black) !important;
            }

            body.darker .MainHeader .dropdown .dropdown-menu {
                border: 1px solid var(--light-black) !important;
            }

            body.darker .MainHeader .HeaderProfile,
            body.darker .ContainerDIV,
            body.darker .info-item,
            body.darker .settings-tools-container,
            body.darker .radioButtonList .radio-input-container input[type="radio"] + label,
            body.darker .table-Style > tbody > tr:not(.pagination-container) > td,
            body.darker .select2-container--classic .select2-selection--single,
            body.darker .select2-container--default .select2-selection--multiple .select2-selection__choice,
            body.darker .select2-dropdown,
            body.darker .header-icons li > a:not(.header-icons .dropdown-menu li a),
            body.darker .MainHeader .dropdown .dropdown-menu,
            body.darker .item-with-avatar,
            body.darker .people-list-item,
            body.darker .switchUser,
            body.darker .custom-chart-container .progress,
            body.darker .panel.box.box-primary .box-header.no-border,
            body.darker .nav-buttons-container button:not(.active),
            body.darker .OptionsContextMenu,
            body.darker .dropdown #collapse1,
            body.darker .dropdown #collapse2,
            body.darker .Filter-bar,
            body.darker input[type="text"], body.darker input[type="password"],
            body.darker textarea,
            body.darker .header-icons ul ul.e31_InstantMessages .item a,
            body.darker .Instant_messages_container > table > tbody > tr:nth-child(1) > td > div:nth-child(1),
            body.darker .widget_overlay_content.active .course_gradebook_sub li {
                background-color: var(--light-black) !important;
            }

            body.darker .dropdown li {
                border-color: #313131;
            }

            body.darker .coursepagecontent.content:not(.coursepage) body.darker .select2-container--classic .select2-dropdown,
            body.darker .select2-container--classic .select2-selection--multiple .select2-selection__choice,
            body.darker .select2-container--classic .select2-selection--single .select2-selection__arrow {
                background-color: var(--light-black) !important;
            }

            /***********main-text***************/

            body.darker .Course-menu-ul li i::before,
            body.darker .Course-menu-ul li span,
            body.darker .Course-menu-ul a,
            body.darker .Course-menu-ul li,
            body.darker .postsContainer .box-header,
            body.darker .writePostWarper .pull-right a span,
            body.darker .latestPostsWidget .products-list.posts-list .product-description,
            body.darker .form-ModalPopup li,
            body.darker .info-item .info-value,
            body.darker .info-item .info-name,
            body.darker .SidebarContent .tooltip .tooltip-inner,
            body.darker .text-primary.schedule-title,
            body.darker .section-title,
            body.darker .section-title i::after,
            body.darker .settings-tools-buttons a,
            body.darker .setting-item.accessiblity-container a,
            body.darker .setting-item .range-label,
            body.darker .settings-item .setting-title,
            body.darker .Start-end-days div,
            body.darker [for*="cb"],
            body.darker .DataEditButton .material-icons-outlined[data-icon]::after,
            body.darker .DataEditButton .material-icons[data-icon]::after,
            body.darker .schedule-timeline-item > div:first-child,
            body.darker .TransitionalSub::before,
            body.darker .TransitionalSub,
            body.darker .custom-file-label span,
            body.darker .custom-file-label::after,
            body.darker .help-text,
            body.darker .form-control,
            body.darker .StandardFontPlain,
            body.darker .childInfoDescription,
            body.darker .select2-container--default .select2-selection--multiple .select2-selection__placeholder,
            body.darker .select2-container--default .select2-selection--single .select2-selection__arrow b::before,
            body.darker .select2-container--default .select2-selection--single,
            body.darker .select2-container--default .select2-selection--single .select2-selection__rendered,
            body.darker .form-mandatory-field table td,
            body.darker label.form-label,
            body.darker .form-label,
            body.darker .collapse-icon.btn i,
            body.darker .sectionTitle,
            body.darker .title-with-buttons .section-title,
            body.darker .section-header .section-title,
            body.darker .SearchAreaTitle,
            body.darker .search_item_header,
            body.darker .itg-icons.Notification:before,
            body.darker .SuperStudentNoData,
            body.darker .ValidationClassNoData,
            body.darker .Page-Title,
            body.darker .Transitional,
            body.darker .MenuHamButt .HamButt::after,
            body.darker .SidebarContainer .menu > li a,
            body.darker .header-user-des,
            body.darker .HeaderTitle,
            body.darker .item-with-avatar,
            body.darker .people-list-item,
            body.darker .Remain-days,
            body.darker .Start-end-days,
            body.darker .noDataText,
            body.darker .custom-chart-item,
            body.darker .nav-tabs .nav-link,
            body.darker .absent-box-container .box,
            body.darker .SchoolDataWidget .box-title,
            body.darker .SchoolDataWidget li,
            body.darker .MainHeader .dropdown .dropdown-menu.switchUserMenu a {
                color: var(--main-text) !important;
            }

                body.darker .info-item .info-value span,
                body.darker .dropdown-menu.show a:hover,
                body.darker .childInfoItem a:hover,
                body.darker .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
                body.darker .accordian_child_list_search a:hover,
                body.darker .Menuhidden .SidebarContainer .menu > li.active a i,
                body.darker .header-icons a::before,
                body.darker .header-icons li > a:not(.header-icons .dropdown-menu li a),
                body.darker .mobile_button.lftbtn.glyphicon.glyphicon-menu-hamburger:after,
                body.darker .switchUser .dropdown-toggle .username,
                body.darker .switchUser .dropdown-toggle::after {
                    color: var(--dark-bright-color) !important;
                }

            body.darker .Dashboard-info-widget {
                background-image: none;
            }

            /***********--border***************/

            body.darker .Course-menu-ul li,
            body.darker .courseposts .box-footer,
            body.darker .writePostWarper,
            body.darker .ProfileInfo,
            body.darker .ProfileInfo table tr,
            body.darker .two-factor-container .box:not(.steps-list-box),
            body.darker #footer,
            body.darker .select2-container--classic .select2-search--dropdown .select2-search__field,
            body.darker .select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow,
            body.darker .select2-container--classic .select2-selection--single .select2-selection__arrow,
            body.darker .select2-container--classic .select2-selection--single,
            body.darker .select2-container--default .select2-search--dropdown .select2-search__field,
            body.darker .select2-container--default.select2-container--focus .select2-selection--multiple,
            body.darker .select2-container--default .select2-selection--single,
            body.darker .select2-dropdown,
            body.darker .select2-container--default .select2-search--dropdown .select2-search__field,
            body.darker .SidebarContainer,
            body.darker .widget-header,
            body.darker .custom-chart-grades,
            body.darker .MainHeader {
                border-color: var(--border) !important;
            }

            /***********--border***************/

            body.darker .Remain-days,
            body.darker .SchoolDataWidget:before {
                background: #b47008;
            }

            body.darker .SchoolDataWidget:after {
                background: #7f530f;
            }

            body.darker .Dashboard-info-widget,
            body.darker .setting-item.accessiblity-container a,
            body.darker .chart-mark-details,
            body.darker .chart-mark-details-popup {
                background: var(--dark-black) !important;
                background-color: var(--dark-black) !important;
            }


            body.darker .childImage .image-container img,
            body.darker .box-header-icon .box-header-image img,
            body.darker .SuperStudentNoData::before,
            body.darker .ValidationClassNoData::before,
            body.darker .SidebarContainer .logo,
            body.darker .noData-img-container img {
                filter: brightness(0.9);
            }

            body.darker body:not(.Menuhidden) .SidebarContainer .logo {
                filter: brightness(1.6);
            }

            body.darker .select_date_table tr td input[type="image"] {
                filter: contrast(0) brightness(1.5);
            }

            body.darker .select2-container--default .select2-search--dropdown .select2-search__field {
                background: var(--lighter-black);
                border: 1px solid #e8e8e8;
                border-radius: 4px;
            }

            body.darker table.tblOptions tr td .form-label,
            body.darker .childInfoItem a,
            body.darker .CoursePageContainer .courseleftSide .Course-menu-ul li.active,
            body.darker .CoursePageContainer .courseleftSide .Course-menu-ul li.active a,
            body.dark .CoursePageContainer .courseleftSide .Course-menu-ul li.active,
            body.dark .CoursePageContainer .courseleftSide .Course-menu-ul li.active a {
                color: var(--primary-color) !important;
            }

            body.darker .childrensListInfo {
                outline: 0.1px solid var(--dark-black);
            }

            body.darker .childItem.girl {
                background: #fb9090;
            }

            body.darker .childItem.boy {
                background: #6a9fdf;
            }

            body.darker [id*="ReportViewer"],
            body.darker [id*="fixedTable"] {
                background: #fff !important;
            }

            body.darker .select2-container--default.select2-container--disabled .select2-selection--single b::before {
                color: var(--border) !important;
            }

            body.darker .radioButtonList .radio-input-container input[type="radio"]:checked + label {
                border-color: var(--primary-color);
            }

            body.darker .select2-container--default.select2-container--focus .select2-selection--multiple:focus-visible {
                border-color: var(--primary-color) !important;
            }

            body.darker .SchoolDataWidget {
                background: var(--dark-primary-color);
            }

            body.darker .SidebarContainer .menu > li a i {
                background: none !important;
                background-color: unset !important;
                background-image: none !important;
            }

            body.darker .setting-item.accessiblity-container a {
                background: #515151 !important;
            }

                body.darker .setting-item.accessiblity-container a:hover {
                    color: #fff !important;
                }

            body.darker #ctl00_PlaceHolderMain_AttendanceAndAbsentMainDiv {
                filter: brightness(0.90);
            }

            body.darker .menu-tooltip::after {
                border-color: transparent transparent transparent var(--light-black);
            }

            body.darker .menu-tooltip::before {
                border-right: 8px solid var(--light-black);
            }

            body.darker .setting-item.accessiblity-container a.active {
                background: var(--dark-bright-color) !important;
            }

            body.darker .row.no-gutters.main-page-section .box:not(.SchoolDataWidget) {
                background-color: var(--dark-black) !important;
            }

                body.darker .row.no-gutters.main-page-section .box:not(.SchoolDataWidget) .gradeDetailsItem.box,
                body.darker .row.no-gutters.main-page-section .box:not(.SchoolDataWidget) .assist-item,
                body.darker .row.no-gutters.main-page-section .box:not(.SchoolDataWidget) .course-box {
                    background-color: var(--light-black) !important;
                    box-shadow: none !important;
                }

            body.darker .row.no-gutters.main-page-section .box .todo-item,
            body.darker .row.no-gutters.main-page-section .box .events-item.box {
                background-color: var(--light-black) !important;
            }

                body.darker .row.no-gutters.main-page-section .box .todo-item .todo-item-title,
                body.darker .row.no-gutters.main-page-section .box .events-item.box .course-time,
                body.darker .row.no-gutters.main-page-section .box:not(.SchoolDataWidget) .course-box .course-title {
                    color: #fff !important;
                }

            body.darker .DivsGridContainer .table-row,
            body.darker .DivsGridContainer .table-row-col {
                background: var(--light-black) !important;
                background-color: var(--light-black) !important;
            }

            body.darker .CourseNameTitle::after {
                border: 1px solid #fff;
                color: #fff;
            }

            body.darker .CourseNameTitle span {
                color: #fff;
            }

            body.darker #slidorion .eduwaveWrapper .courseContentTabs .tab-pane {
                background: transparent;
                padding: 10px 15px;
            }

            body.darker .CourseColapsedMenu .panel-default > .panel-heading a.collapseArrow::before {
                color: #eee !important;
            }

            body.darker .CourseColapsedMenu .SelectedSection,
            body.darker .CourseColapsedMenu .panel-default > .panel-heading {
                background-color: transparent !important;
                color: #eee !important;
            }

            body.darker #accordion.twoswitchaccordion {
                background-color: rgba(255, 255, 255, 0.15);
            }

            body.darker .CourseColapsedMenu .panel-default > .panel-heading a {
                color: #ddd;
            }

            body.darker #accordion.twoswitchaccordion,
            body.darker .CourseColapsedMenu {
                background: var(--dark-black) !important;
            }

            body.dark .converter-wrapper .fields_title,
            body.darker .converter-wrapper .fields_title,
            body.darker .converter-wrapper .forms_title,
            body.dark .converter-wrapper .forms_title {
                color: #4f4f4f !important;
            }

            body.darker #accordion .panel-group .panel-heading + .panel-collapse > .panel-body {
                background: var(--dark-black);
            }

            body.darker .ColapsedMenuItem span {
                color: #d5d5d5 !important;
            }

            body.darker .start-course-header .bread-crumb-links {
                color: #fff;
            }

            body.darker #slider > div .eduwaveWrapper {
                background: var(--dark-black) !important;
            }

            body.darker #slider > div {
                background: var(--light-black) !important;
            }

            body.darker #slidorion .eduwaveWrapper .courseContentTabs .tab-pane.active {
                color: #fff;
            }


            /*#endregion darkermode*/

            /*#region shared between more than one theme*/

            body.darker .ContainerDIV,
            body.dark .ContainerDIV {
                box-shadow: none !important;
            }

    body .instructions-line.note.note-secondry,
    body .instructions-line.note.note-primary,
    body .instructions-line.note.note-validation {
        background-color: transparent !important;
    }

    body #ctl00_PlaceHolderMain_divPledgeTransferRequestContent p.StandardFont {
        color: var(--primary-color) !important;
    }

    body.dark .instructions-line span,
    body.darker .instructions-line span {
        color: #181a1b !important;
    }

    body.dark .instructions-line,
    body.darker .instructions-line {
        background-color: #ffe5ac !important;
    }

    body.darker .radio-input-container input[type="radio"]:not(input[type="radio"]:checked) + span,
    body.darker .radio-input-container input[type="radio"]:not(input[type="radio"]:checked) + span::before,
    body.dark .radio-input-container input[type="radio"]:not(input[type="radio"]:checked) + span,
    body.dark .radio-input-container input[type="radio"]:not(input[type="radio"]:checked) + span::before {
        color: #181a1b !important;
    }

    body.darker .widget_overlay_text .col-md-12.text-center span,
    body.dark .widget_overlay_text .col-md-12.text-center span,
    body.darker .radio-input-container input[type="radio"]:checked + span,
    body .dark .radio-input-container input[type="radio"]:checked + span {
        color: #fff !important;
    }

        body.darker .radio-input-container input[type="radio"]:checked + span::before,
        body.dark .radio-input-container input[type="radio"]:checked + span::before {
            background-color: #fff !important;
        }

    body.darker .radio-input-container input[type="radio"]:not(input[type="radio"]:checked) + span,
    body.dark .radio-input-container input[type="radio"]:not(input[type="radio"]:checked) + span {
        background: #d5d5d5 !important;
    }

    body.darker .MainHeader,
    body.dark .MainHeader {
        border-bottom: none;
    }

    body.dark .SubMenuItem::before,
    body.darker .SubMenuItem::before {
        background: #5e5e5e;
    }

    body.dark .select2-results__option,
    body.darker .select2-results__option {
        color: #fff !important;
    }

    body.dark .progressbar li::before,
    body.darker .progressbar li::before {
        background-color: #565656 !important;
        color: #d5d4d4 !important;
    }

    body.dark .progressbar li.active::before,
    body.darker .progressbar li.active::before {
        background-color: #f5f5f5 !important;
        color: var(--secondary-color) !important;
    }

    body .progressbar li::before {
        height: 33px;
        width: 32px;
    }

    body.darker .select2-search__field::placeholder,
    body.dark .select2-search__field::placeholder {
        color: #fff !important;
    }

    body.darker,
    body.dark {
        --primary-color: var(--darkmode-primary-color) !important;
    }

        body.darker .box.item-with-avatar .text-small-black,
        body.dark .box.item-with-avatar .text-small-black {
            color: #fff !important;
        }

        body.darker .absent-title.p-1,
        body.dark .absent-title.p-1 {
            color: #fff !important;
        }

        body.darker .ajax__tab_xp .ajax__tab_header > ::before,
        body.dark .ajax__tab_xp .ajax__tab_header > ::before,
        body.darker .ajax__tab_xp .ajax__tab_outer,
        body.dark .ajax__tab_xp .ajax__tab_outer,
        body.darker #ConfirmBox, body.darker #MessageBox, body.darker #NotificationBox,
        body.dark #ConfirmBox, body.dark #MessageBox, body.dark #NotificationBox,
        body.darker .box-body.ExamsScheduleWidget.py-1 .box.item-with-avatar,
        body.dark .box-body.ExamsScheduleWidget.py-1 .box.item-with-avatar {
            background: #404247 !important;
            background-color: #404247 !important;
        }

        body.darker .footer_line1,
        body.darker .footer_line2,
        body.dark .footer_line1,
        body.dark .footer_line2 {
            color: #fff !important;
        }

        body.darker .box.card-box .text-small-lightgray,
        body.dark .box.card-box .text-small-lightgray {
            color: #e7e7e7 !important;
        }

        body.darker .ajax__tab_xp .ajax__tab_body table tr .dvfHeaderStyle,
        body.dark .ajax__tab_xp .ajax__tab_body table tr .dvfHeaderStyle,
        body.dark .timer-container #timer,
        body.darker .timer-container #timer,
        body.dark .survey-title-box .survey-title,
        body.darker .survey-title-box .survey-title,
        body.dark .survey-title-box .survey-title::before,
        body.darker .survey-title-box .survey-title::before,
        body.dark .table-Style.GradeView th[scope="col"][rowspan="2"],
        body.darker .table-Style.GradeView th[scope="col"][rowspan="2"],
        body.dark .table-Style tbody tr th span,
        body.darker .table-Style tbody tr th span,
        body.dark button.close,
        body.darker button.close,
        body.dark .close,
        body.darker .close,
        body.darker .box.card-box .text-medium-black,
        body.dark .box.card-box .text-medium-black {
            color: #fff !important;
        }

        body.dark .row.row-cols-3.cards-container .box.card-box {
            background: #53565f !important;
            background-color: #53565f !important;
        }

        body.darker .row.row-cols-3.cards-container .box.card-box {
            background: #35363a !important;
            background-color: #35363a !important;
        }

            body.darker .ajax__tab_xp .ajax__tab_body .mb-2.px-0.py-2.title-with-buttons.with-border,
            body.dark .ajax__tab_xp .ajax__tab_body .mb-2.px-0.py-2.title-with-buttons.with-border,
            body.darker #ConfirmBox, body.darker #MessageBox, body.darker #NotificationBox,
            body.dark #ConfirmBox, body.dark #MessageBox, body.dark #NotificationBox,
            body.darker .row.row-cols-3.cards-container .box.card-box .card-box-footer,
            body.dark .row.row-cols-3.cards-container .box.card-box .card-box-footer,
            body.darker .row.row-cols-3.cards-container .box.card-box .title-with-buttons.with-border,
            body.dark .row.row-cols-3.cards-container .box.card-box .title-with-buttons.with-border {
                border-color: #7a7a7a !important;
            }

        body.darker .ajax__tab_xp .ajax__tab_body table tr td:not(.dvfHeaderStyle),
        body.dark .ajax__tab_xp .ajax__tab_body table tr td:not(.dvfHeaderStyle),
        body.darker LABEL,
        body.dark LABEL {
            color: var(--main-text) !important;
        }

        body.darker .custom-chart-grades,
        body.dark .custom-chart-grades,
        body.darker hr,
        body.dark hr {
            border-color: #484848 !important;
        }

        body.darker #footer,
        body.dark #footer {
            border-color: var(--main-text) !important;
        }

        body.darker .survey-qs-box,
        body.dark .survey-qs-box,
        body.darker .col-md-10 #ctl00_PlaceHolderMain_UpdatePanel4,
        body.dark .col-md-10 #ctl00_PlaceHolderMain_UpdatePanel4,
        body.darker .custom-chart-grades:not(#ctl00_PlaceHolderMain_divMarkDetails .custom-chart-container .custom-chart-grades),
        body.dark .custom-chart-grades:not(#ctl00_PlaceHolderMain_divMarkDetails .custom-chart-container .custom-chart-grades),
        body.darker .custom-chart-container:not(#ctl00_PlaceHolderMain_divMarkDetails .custom-chart-container),
        body.dark .custom-chart-container:not(#ctl00_PlaceHolderMain_divMarkDetails .custom-chart-container),
        body.darker .popover,
        body.dark .popover,
        body.dark .modal-body,
        body.dark .modal-content,
        body.darker .modal-body,
        body.darker .modal-content {
            background: #35363a !important;
            background-color: #35363a !important;
        }

        body.darker .survey-qs-box,
        body.dark .survey-qs-box,
        body.darker .col-md-10 #ctl00_PlaceHolderMain_UpdatePanel4,
        body.dark .col-md-10 #ctl00_PlaceHolderMain_UpdatePanel4,
        body.darker .chart-mark-details-popup,
        body.dark .chart-mark-details-popup {
            border-color: #35363a !important;
        }

        body.darker .widget_overlay_text .col-md-12.text-center .form-control::placeholder,
        body.dark .widget_overlay_text .col-md-12.text-center .form-control::placeholder,
        body.darker .popover-navigation .btn.btn-sm.btn-default:not(:disabled),
        body.dark .popover-navigation .btn.btn-sm.btn-default:not(:disabled) {
            color: var(--main-text) !important;
        }

        body.darker .popover .arrow::after, body.darker.popover .arrow::before,
        body.dark .popover .arrow::after, body.dark.popover .arrow::before {
            border-bottom-color: #35363a !important;
        }

        body.dark .modal-header,
        body.darker .modal-header {
            border-bottom-color: #494949 !important;
        }

        body.dark .gradeDetailsItem.box,
        body.darker .gradeDetailsItem.box {
            border-color: transparent !important;
        }

        body.darker .ajax__tab_xp .ajax__tab_body,
        body.dark .ajax__tab_xp .ajax__tab_body,
        body.darker .ajax__tab_xp .ajax__tab_body table tr,
        body.dark .ajax__tab_xp .ajax__tab_body table tr {
            background-color: transparent !important;
        }

        body.darker .ajax__tab_xp .ajax__tab_header > ::before,
        body.darker .ajax__tab_xp .ajax__tab_header,
        body.dark .ajax__tab_xp .ajax__tab_header > ::before,
        body.dark .ajax__tab_xp .ajax__tab_header {
            background-color: #35363a !important;
        }

        body.darker div[id*="_ReportViewer"],
        body.dark div[id*="_ReportViewer"] {
            background-color: #35363a !important;
        }

        body.darker div[id*="_oReportDiv"] > table:first-of-type,
        body.dark div[id*="_oReportDiv"] > table:first-of-type,
        body.darker .ToolBarButtonsCell,
        body.dark .ToolBarButtonsCell,
        body.darker div[id*="_ReportViewer"],
        body.dark div[id*="_ReportViewer"] {
            background-color: #35363a !important;
        }

            body.darker .ToolBarButtonsCell .ToolbarPageNav.WidgetSet input,
            body.dark .ToolBarButtonsCell .ToolbarPageNav.WidgetSet input {
                background-color: #45474c !important;
                border-color: #181a1b !important;
                color: #fff;
            }

            body.darker .ToolBarButtonsCell .ToolbarFind.WidgetSet input.form-control,
            body.dark .ToolBarButtonsCell .ToolbarFind.WidgetSet input.form-control {
                background-color: #45474c !important;
                border-color: #181a1b !important;
                color: #fff;
            }

            body.darker .ToolBarButtonsCell .ToolbarFind.WidgetSet .DisabledLink,
            body.dark .ToolBarButtonsCell .ToolbarFind.WidgetSet .DisabledLink {
                color: #f6f6f6 !important;
            }

            body.darker .ToolBarButtonsCell .ToolbarFind.WidgetSet .ActiveLink,
            body.dark .ToolBarButtonsCell .ToolbarFind.WidgetSet .ActiveLink {
                color: VAR(--primary-color) !important;
            }

        body.darker .MSRS-RVC .ToolbarExport.WidgetSet,
        body.darker .MSRS-RVC .ToolbarFind.WidgetSet,
        body.darker .MSRS-RVC .ToolbarZoom.WidgetSet,
        body.darker .MSRS-RVC .ToolbarPageNav.WidgetSet,
        body.darker .MSRS-RVC .ToolbarRefresh.WidgetSet,
        body.darker .MSRS-RVC .ToolbarPrint.WidgetSet,
        body.darker .MSRS-RVC .ToolbarBack.WidgetSet,
        body.darker .MSRS-RVC .ToolbarPowerBI.WidgetSet,
        body.dark .MSRS-RVC .ToolbarExport.WidgetSet,
        body.dark .MSRS-RVC .ToolbarFind.WidgetSet,
        body.dark .MSRS-RVC .ToolbarZoom.WidgetSet,
        body.dark .MSRS-RVC .ToolbarPageNav.WidgetSet,
        body.dark .MSRS-RVC .ToolbarRefresh.WidgetSet,
        body.dark .MSRS-RVC .ToolbarPrint.WidgetSet,
        body.dark .MSRS-RVC .ToolbarBack.WidgetSet,
        body.dark .MSRS-RVC .ToolbarPowerBI.WidgetSet {
            border-color: #35363a !important;
        }

        body.dark div[id*="_oReportDiv"] {
            background-color: #2f3033 !important;
        }

        body.darker div[id*="_oReportDiv"] {
            background-color: #181a1b !important;
        }

        body.darker .DivsGridContainer.LectureLabel .table-row .table-row-col,
        body.dark .DivsGridContainer.LectureLabel .table-row .table-row-col,
        body.darker .DivsGridContainer.LectureLabel .table-row .table-row-col span,
        body.dark .DivsGridContainer.LectureLabel .table-row .table-row-col span,
        body.darker table[id*="PlaceHolderMain_rv"] .HoverButton a.Footer,
        body.dark table[id*="PlaceHolderMain_rv"] .HoverButton a.Footer,
        body.darker table[id*="PlaceHolderMain_rv"] .glyphui,
        body.dark table[id*="PlaceHolderMain_rv"] .glyphui,
        body.darker div[id*="PlaceHolderMain_rv"] td[height="28px"] span[style*="font-family:Verdana"],
        body.dark div[id*="PlaceHolderMain_rv"] td[height="28px"] span[style*="font-family:Verdana"] {
            color: #fff !important;
        }

        body.darker table[id*="PlaceHolderMain_rv"] .HoverButton,
        body.dark table[id*="PlaceHolderMain_rv"] .HoverButton {
            background-color: #35363a !important;
        }

        body.darker .courseContentTabs .nav.nav-tabs a:not(.active, .btn:hover),
        body.dark .courseContentTabs .nav.nav-tabs a:not(.active, .btn:hover),
        body.darker .nav-link.btn.btn-primary:not(.active, .btn:hover),
        body.dark .nav-link.btn.btn-primary:not(.active, .btn:hover) {
            background-color: #3a3c41 !important;
        }

        body.darker .gradeDetailsItem.box .grade-title,
        body.dark .gradeDetailsItem.box .grade-title {
            background-color: var(--primary-color) !important;
        }

        body.darker .eduwaveWrapper.box .courseContentTabs .nav.nav-tabs,
        body.dark .eduwaveWrapper.box .courseContentTabs .nav.nav-tabs {
            background-color: transparent !important;
        }

        body.dark .LectureLabel,
        body.darker .LectureLabel {
            color: var(--main-text);
        }

        body.dark #accordion .panel-body .ColapsedMenuItem,
        body.darker #accordion .panel-body .ColapsedMenuItem {
            margin-right: 0 !important;
            padding-left: 0 !important;
            padding-right: 8px !important;
        }

            body.dark #accordion .panel-body .ColapsedMenuItem.currentItem,
            body.darker #accordion .panel-body .ColapsedMenuItem.currentItem,
            body.dark #accordion .panel-body .ColapsedMenuItem.currentItem:hover,
            body.darker #accordion .panel-body .ColapsedMenuItem.currentItem:hover,
            body.dark #accordion .panel-body .ColapsedMenuItem:hover,
            body.darker #accordion .panel-body .ColapsedMenuItem:hover {
                background-color: #35363a !important;
                border-bottom-left-radius: 7px !important;
                border-color: #35363a !important;
                border-top-left-radius: 7px !important;
            }

        body.dark .panel-collapse.collapse.show,
        body.darker .panel-collapse.collapse.show {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        body.dark .popover-content,
        body.darker .popover-content,
        body.dark .popover-content ul li,
        body.darker .popover-content ul li,
        body.dark a.GetSectionLink,
        body.darker a.GetSectionLink {
            color: #fff !important;
        }

        body.dark .dvSectionsOverView,
        body.darker .dvSectionsOverView {
            color: var(--main-text) !important;
        }

        body.dark .progress,
        body.darker .progress {
            background: #4f4f4f !important;
            background-color: #4f4f4f !important;
        }

        body.dark .row.no-gutters .box.col-md-6 div {
            background: var(--light-gray) !important;
            background-color: var(--light-gray) !important;
        }

        body.darker .row.no-gutters .box.col-md-6 div {
            background: #1d2021 !important;
            background-color: #1d2021 !important;
        }

html {
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) #f8f8f8;
    
}
    html:has(.darker) {
        scrollbar-color: var(--primary-color) var(--dark-gray) !important;
    }
/*#endregion shared between more than one theme*/
body.dark .course-report-box {
    border: 1px solid #241d1db3;
    box-shadow: 1px 1px 4px 1px #241d1db3;
}
body.darker .course-report-box {
    border: 1px solid #00000057;
    box-shadow: 1px 1px 4px 1px #000000;
}
    body.dark .itg_dashboard_dropdown-menu > li {
        border-color: var(--dark-bright-color);
    }
.briefcasesidemenu ul li a:hover{
    color: var(--primary-color) !important;
}
body.dark .RadComboBox_Default .rcbInputCell,
body.dark .RadComboBox_Default .rcbArrowCell {
    background: none;
}
body.dark .ui-widget-content:not(.ui-state-highlight):not(.fc-today) {
    background: var(--dark-gray) !important;
}
    body.dark .ui-state-highlight, body.dark .ui-widget-content .ui-state-highlight, body.dark .ui-widget-header .ui-state-highlight {
        border: 1px solid #f9dd34;
        background: #ffef8f url(ui-bg_highlight-soft_25_ffef8f_1x100.png) repeat-x 50% top;
        color: #363636 !important;
    }
.WideGrid .TabelGrid .OptionsContextMenu a.aspNetDisabled:hover {
    color: #888 !important;
}
body.dark .TabelGrid .TableRowStyle td a:not(.btn-primary):hover {
    color: var(--primary-color) !important;
}
body.dark a[disabled=disabled]:hover,
body.dark a[disabled=disabled] {
    color: rgb(155, 153, 153) !important;
}
body.dark [id*="ReportViewer"], body.dark [id*="fixedTable"]{
    background: transparent !important;
}
body.dark .folder-wedgit-header,
body.darker .box-footer,
body.dark .tab__content li {
    border-color: var(--gray) !important;
}
body.darker .OptionsContextMenu,
body.darker .tab__content li {
    border-color: var(--dark) !important;
}
span.jqTransformCheckboxWrapper:has(.jqTransformChecked) + .darkmode-label::after {
    left: 53% !important;
}
.darkmode-toggle-container a.jqTransformCheckbox {
    width: 115px;
    background: transparent;
    height: 50px;
    position: absolute;
    top: -29px;
    border: none;
    /* outline: none; */
    box-shadow: none;
    /* background: red; */
    right: 6px;
}
.darkmode-toggle-container a.jqTransformCheckbox:before{
    content: none;
}
#dialog #slidorion #slider #slide2 #iFrmL{
    background-color: transparent !important;
}
body.darker .SearchDIV {
    border: 1px solid var(--light-black);
    box-shadow: 1px 1px 4px 1px var(--dark-black);
}
body.darker .dropdown #collapse2 .child-item a:hover{
    color: white !important;
}
body.darker #accordion .panel-group .panel-heading + .panel-collapse > .panel-body,
body.darker .section.wrapper.eduwaveContent,
body.darker .RadComboBox_Default .rcbInputCell, body.darker .RadComboBox_Default .rcbArrowCell,
body.darker [id*="ReportViewer"], body.darker [id*="fixedTable"],
body.darker .fullSearchArea .FilterBar-content,
body.darker .FilterBar-content,
body.darker .courses-content,
body.dark .courses-content,
body.dark .products-list > .item,
body.darker .products-list > .item {
    background: transparent !important;
}
body.darker .ui-widget-content{
    background-image: none !important;
}
body.darker .widget_overlay_content.active .course_gradebook_sub li {
    box-shadow: 0 0px 3px var(--light-black) !important;
}
body.dark .widget_overlay_content.active .course_gradebook_sub li {
    box-shadow: 0 0px 3px var(--lighter-gray);
}
:is(body.dark, body.darker) .settings-tools-buttons a {
    background: var(--light-gray) !important;
}

:is(body.dark, body.darker) .settings-item-item,
:is(body.dark, body.darker) .settings-toolss {
    background: var(--dark-gray) !important;
}

:is(body.dark, body.darker) .passed {
    background: var(--dark-bright-color);
}

:is(body.dark, body.darker) .pending {
    background: var(--primary-color-Opacity-20) !important;
}

:is(body.dark, body.darker)
#newAdjustable-courselayout .content-tabs .tab-content.bg-white,
:is(body.dark, body.darker)
#newAdjustable-courselayout #newAdjustable-layout-content .main-lecture-content .content-tabs ul.nav,
:is(body.dark, body.darker)
#newAdjustable-courselayout #newAdjustable-layout-content .start-course-header,
:is(body.dark, body.darker)
#newAdjustable-courselayout .tabs-sidebar .lessonsSideBar,
:is(body.dark, body.darker)
.tabs-sidebar .sideBarTabs .nav-link.active {
    background: var(--dark-gray, var(--dark-black)) !important;
}
:is(body.dark, body.darker) .divContainerCourseAndAdminNames,
:is(body.dark, body.darker)
#newAdjustable-courselayout .tabs-sidebar .accordion-item .accordion-button,
:is(body.dark, body.darker)
#newAdjustable-courselayout .tabs-sidebar .accordion-item .accordion-button:not(.collapsed),
:is(body.dark, body.darker)
#newAdjustable-courselayout .tabs-sidebar .accordion-item .accordion-button:focus {
    background: var(--dark-gray, var(--dark-black)) !important;
    color: white !important;
}

:is(body.dark, body.darker)
#newAdjustable-courselayout .tabs-sidebar .accordion-item .accordion-body .list-group .list-group-item,
:is(body.dark, body.darker)
#newAdjustable-courselayout .tabs-sidebar .accordion-item .accordion-body .list-group .list-group-item.active {
    background: var(--light-gray, var(--light-black)) !important;
    color: white !important;
}

:is(body.dark, body.darker)
#newAdjustable-courselayout .content-tabs .tab-content
.tab-pane .homework-card[style*="background:#fff;"] {
    background: var(--dark-gray) !important;
    background: var(--dark-gray, var(--dark-black)) !important;
}
:is(body.dark, body.darker) .divContainerCourseAndAdminNames {
    background: var(--dark-gray, var(--dark-black)) !important;
}
:is(body.dark, body.darker) .learningstandard.coursesearch .Filter-bar .Filter-bar-butt {
    background: var(--dark-gray, var(--dark-black)) !important;
}
:is(body.dark, body.darker) #ctl00_cphPageBody_divReportContent {
    background: none;
}
:is(body.dark, body.darker) #assessmentDragableContainer + .assessmentFooter,
:is(body.dark, body.darker) #assessmentDragableContainer #assessment-right-side,
:is(body.dark, body.darker) #assessmentDragableContainer #assessment-left-side {
    background: var(--light-gray, var(--light-black)) !important;
    border: 0;
}
    :is(body.dark, body.darker) #ctl00_cphPageBody_divReportContent .ReportContainerAR .single-chartAR,
    :is(body.dark, body.darker) #ctl00_cphPageBody_divReportContent .ReportContainerAR {
        background: var(--light-gray, var(--light-black)) !important;
        color: white !important;
    }
        :is(body.dark, body.darker) #ctl00_cphPageBody_divReportContent .ReportContainerAR .text-contentAR {
            color: white !important;
        }
:is(body.dark, body.darker) #timeLineContainer .courses-report-conrainer .course-title span {
    color: white !important;
}
:is(body.dark, body.darker) .timeLineContainer .courses-report-conrainer .course-report-box .section-container > div:last-child {
    color: #9f9f9f;
}
:is(body.dark, body.darker) .FiltersTimeLine .RadComboBox_Default .rcbInput,
:is(body.dark, body.darker) .FiltersTimeLine .RadComboBox_Default .rcbInputCell {
    background: var(--light-gray, var(--light-black)) !important;
}
:is(body.dark, body.darker) .SidebarContainer .logoSmall {
    background-image: url(../../Images/AjyalLogoColor.svg) !important;
}
:is(body.dark, body.darker).CoursePageContainer .courseRightSide .recentActivity.box ul.products-list li {
    color: white !important;
}
:is(body.dark, body.darker) .TableRowStyle:nth-child(even) {
    background: var(--light-gray, var(--light-black)) !important;
}
:is(body.dark, body.darker)
h1,
:is(body.dark, body.darker)
h2,
:is(body.dark, body.darker)
h3,
:is(body.dark, body.darker)
h4,
:is(body.dark, body.darker)
h5,
:is(body.dark, body.darker)
h6,
:is(body.dark, body.darker)
span,
:is(body.dark, body.darker)
label,
:is(body.dark, body.darker)
p,
:is(body.dark, body.darker)
div,
:is(body.dark, body.darker)
tr,
:is(body.dark, body.darker)
td {
    color: white !important;
    
}

body.word-spacing-xl {
    word-spacing: 0.32em;
}

body.word-spacing-l {
    word-spacing: 0.16em;
}

body.word-spacing-m {
    word-spacing: normal;
}

body.word-spacing-sm {
    word-spacing: -0.075em;
}

body.word-spacing-xs {
    word-spacing: -0.15em;
}