/*#region founding-day theme*/
body.founding-day {
    --primary-color: #4a403b;
    --primary-color-Opacity-20: #4a403bc7;
    --light-primary-color: #d8c2ac;
    --hover-primary-color: #4a403b;
    --active-primary-color: #997766;
    --focus-primary-color: #997766;
    --calendar-primary-color: #997766;
    --calendar-active-color: #997766;
    --primary-opacaty-color: 168, 128, 108;
    --dark-primary-color: #d95f21;
    --dark-bright-color: #e06020;
    --darkmode-primary-color: #a8806c;
}
/*#endregion founding-day theme*/
/*#region blue theme*/
body.blue {
    --primary-color: #086271;
    --primary-color-Opacity-20: #659EB0;
    --light-primary-color: #40a4b9;
    --hover-primary-color: #3995aa;
    --active-primary-color: #3dcbea;
    --focus-primary-color: #4d69b8;
    --calendar-primary-color: #086271;
    --calendar-active-color: #3dcbea;
    --primary-opacaty-color: 96, 174, 227;
    --dark-primary-color: hsla(89, 25%, 60%, 0.02);
    --dark-bright-color: #4cbcce;
    --darkmode-primary-color: #3898a7;
}

    body.blue .search_links:not(.search_links[disabled="disabled"]) {
        color: var(--primary-color) !important;
    }

        body.blue .search_links:not(.search_links[disabled="disabled"]):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 .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*/
body.darkblue {
    --primary-color: #192655;
    --primary-color-Opacity-20: rgba(25, 38, 85, 0.2);
    --light-primary-color: #5ea7c4;
    --hover-primary-color: #1e6bb8;
    --active-primary-color: #1e6bb8;
    --focus-primary-color: #1e6bb8;
    --calendar-primary-color: #192655;
    --calendar-active-color: #1e6bb8;
    --primary-opacaty-color: 30, 107, 184;
    --dark-primary-color: #183cbe;
    --dark-bright-color: #1335b0;
    --darkmode-primary-color: #061e73;
}

body.dark.darkblue {
    --dark-bright-color: #1489e0;
    --active-primary-color: #2491ff;
    --darkmode-primary-color: #169cff;
}

body.darkblue.darker {
    --dark-bright-color: #1489e0;
    --darkmode-primary-color: #119aff;
}

body.darkblue .search_links:not(.search_links[disabled="disabled"]) {
    color: var(--dark-primary-color) !important;
}

    body.darkblue .search_links:not(.search_links[disabled="disabled"]):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 .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*/
body.lightblue {
    --primary-color: #2986cc;
    --primary-color-Opacity-20: rgba(41, 134, 204, 0.2);
    --light-primary-color: #94c2e5;
    --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: #4aaaf0;
    --darkmode-primary-color: #3e93d1;
}

    body.lightblue .search_links:not(.search_links[disabled="disabled"]) {
        color: var(--primary-color) !important;
    }

        body.lightblue .search_links:not(.search_links[disabled="disabled"]):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 .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: rgba(var(--primary-opacaty-color), 0.3);
    }

    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*/
body.pink {
    --primary-color: #d56073;
    --primary-color-Opacity-20: #e9b6b6;
    --light-primary-color: #eb7d8d;
    --hover-primary-color: #e16e81;
    --active-primary-color: #eb7d8d;
    --focus-primary-color: #b84d69;
    --calendar-primary-color: #d56073;
    --calendar-active-color: #eb7d8d;
    --primary-opacaty-color: 213, 96, 115;
    --dark-primary-color: hsla(220, 47%, 34%, 0.87);
    --dark-bright-color: #fc546f;
    --darkmode-primary-color: #ff657e;
}

    body.pink .search_links:not(.search_links[disabled="disabled"]) {
        color: var(--primary-color) !important;
    }

        body.pink .search_links:not(.search_links[disabled="disabled"]):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 .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 .progress {
        background: rgba(var(--primary-opacaty-color), 0.3);
    }

    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*/
body.darkyellow {
    --primary-color: #665628;
    --primary-color-Opacity-20: rgba(102, 86, 40, 0.2);
    --light-primary-color: #ceb364;
    --hover-primary-color: #c6b46b;
    --active-primary-color: #f1d460;
    --focus-primary-color: #f2e5b1;
    --calendar-primary-color: #665628;
    --calendar-active-color: #f1d460;
    --primary-opacaty-color: 102, 86, 40;
    --dark-primary-color: #7a621e;
    --dark-bright-color: #d1bd51;
    --darkmode-primary-color: #af9f49;
}

    body.darkyellow .search_links:not(.search_links[disabled="disabled"]) {
        color: var(--dark-primary-color) !important;
    }

        body.darkyellow .search_links:not(.search_links[disabled="disabled"]):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:not(a[disabled="disabled"]) {
        color: var(--dark-primary-color) !important;
    }

        body.darkyellow .accordian_child_list_search a:not(a[disabled="disabled"]):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 .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 .progress {
        background: rgba(var(--primary-opacaty-color), 0.3);
    }

    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 */
body.darkred {
    --primary-color: #7a1322;
    --primary-color-Opacity-20: rgba(122, 19, 34, 0.2);
    --light-primary-color: #bb4355;
    --hover-primary-color: #ad3244;
    --active-primary-color: #872433;
    --focus-primary-color: #ad3244;
    --calendar-primary-color: #7a1322;
    --calendar-active-color: #872433;
    --primary-opacaty-color: 122, 19, 34;
    --dark-primary-color: #770b1b;
    --dark-bright-color: #cb394e;
    --darkmode-primary-color: #d53a50;
}

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

    body.darkred .accordian_child_list_search a:not(a[disabled="disabled"]) {
        color: var(--primary-color) !important;
    }

        body.darkred .accordian_child_list_search a:not(a[disabled="disabled"]):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 .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 .progress {
        background: rgba(var(--primary-opacaty-color), 0.3);
    }

    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 */
body.caramel {
    --primary-color: #e69138;
    --primary-color-Opacity-20: rgba(230, 145, 56, 0.2);
    --light-primary-color: #f0bd87;
    --hover-primary-color: #fda13e;
    --active-primary-color: #e28623;
    --focus-primary-color: #e69138;
    --calendar-primary-color: #e69138;
    --calendar-active-color: #e28623;
    --primary-opacaty-color: 230, 145, 56;
    --dark-primary-color: #b57028;
    --dark-bright-color: #ff9b33;
    --darkmode-primary-color: #e69138;
}

    body.caramel .search_links:not(.search_links[disabled="disabled"]) {
        color: var(--dark-primary-color) !important;
    }

        body.caramel .search_links:not(.search_links[disabled="disabled"]):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:not(a[disabled="disabled"]) {
        color: var(--primary-color) !important;
    }

        body.caramel .accordian_child_list_search a:not(a[disabled="disabled"]):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 .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: #fff !important;
    }

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

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

    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*/
body.purple {
    --primary-color: #7846a8;
    --primary-color-Opacity-20: rgba(120, 70, 168, 0.2);
    --light-primary-color: #b995d9;
    --hover-primary-color: #a17db3;
    --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: #b07cde;
}

    body.purple .accordian_child_list_search a:not(a[disabled="disabled"]) {
        color: var(--dark-primary-color) !important;
    }

        body.purple .accordian_child_list_search a:not(a[disabled="disabled"]):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 .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 .progress {
        background: rgba(var(--primary-opacaty-color), 0.3);
    }

    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*/
body.green {
    --primary-color: #018075;
    --primary-color-Opacity-20: #bfe7e3;
    --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: #00c9b7;
}

    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 .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) !important;
    }

    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 .progress {
        background: rgba(var(--primary-opacaty-color), 0.3);
    }

    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:not(.search_links[disabled="disabled"]) {
        color: var(--primary-color) !important;
    }

        body.green .search_links:not(.search_links[disabled="disabled"]):hover {
            color: var(--active-primary-color) !important;
        }

/*#endregion green theme*/

/*#region FontSizes*/

body.font-size-xxs {
    --font-8: 6.5px;
    --font-9: 7.5px;
    --font-10: 8.5px;
    --font-11: 9.5px;
    --font-12: 10.5px;
    --font-13: 11.5px;
    --font-14: 12.5px;
    --font-15: 13.5px;
    --font-16: 14.5px;
    --font-17: 15.5px;
    --font-18: 16.5px;
    --font-19: 17.5px;
    --font-20: 18.5px;
    --font-21: 19.5px;
    --font-22: 20.5px;
    --font-23: 21.5px;
    --font-24: 22.5px;
    --font-25: 23.5px;
    --font-26: 24.5px;
    --font-27: 25.5px;
    --font-28: 26.5px;
    --font-29: 27.5px;
    --font-30: 28.5px;
    --font-31: 29.5px;
    --font-32: 30.5px;
    --font-33: 31.5px;
    --font-34: 32.5px;
    --font-35: 33.5px;
    --font-36: 34.5px;
}

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

body.font-size-s {
    --font-8: 7.5px;
    --font-9: 8.5px;
    --font-10: 9.5px;
    --font-11: 10.5px;
    --font-12: 11.5px;
    --font-13: 12.5px;
    --font-14: 13.5px;
    --font-15: 14.5px;
    --font-16: 15.5px;
    --font-17: 16.5px;
    --font-18: 17.5px;
    --font-19: 18.5px;
    --font-20: 19.5px;
    --font-21: 20.5px;
    --font-22: 21.5px;
    --font-23: 22.5px;
    --font-24: 23.5px;
    --font-25: 24.5px;
    --font-26: 25.5px;
    --font-27: 26.5px;
    --font-28: 27.5px;
    --font-29: 28.5px;
    --font-30: 29.5px;
    --font-31: 30.5px;
    --font-32: 31.5px;
    --font-33: 32.5px;
    --font-34: 33.5px;
    --font-35: 34.5px;
    --font-36: 35.5px;
}

body.font-size-m {
    --font-8: 8px;
    --font-9: 9px;
    --font-10: 10px;
    --font-11: 11px;
    --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-8: 8.9px;
    --font-9: 9.9px;
    --font-10: 10.9px;
    --font-11: 11.9px;
    --font-12: 12.9px;
    --font-13: 13.9px;
    --font-14: 14.9px;
    --font-15: 15.9px;
    --font-16: 16.9px;
    --font-17: 17.9px;
    --font-18: 18.9px;
    --font-19: 19.9px;
    --font-20: 20.9px;
    --font-21: 21.9px;
    --font-22: 22.9px;
    --font-23: 23.9px;
    --font-24: 24.9px;
    --font-25: 25.9px;
    --font-26: 26.9px;
    --font-27: 27.9px;
    --font-28: 28.9px;
    --font-29: 29.9px;
    --font-30: 30.9px;
    --font-31: 31.9px;
    --font-32: 32.9px;
    --font-33: 33.9px;
    --font-34: 34.9px;
    --font-35: 35.9px;
    --font-36: 36.9px;
}

body.font-size-xl {
    --font-8: 9.4px;
    --font-9: 10.4px;
    --font-10: 11.4px;
    --font-11: 12.4px;
    --font-12: 13.4px;
    --font-13: 14.4px;
    --font-14: 15.4px;
    --font-15: 16.4px;
    --font-16: 17.4px;
    --font-17: 18.4px;
    --font-18: 19.4px;
    --font-19: 20.4px;
    --font-20: 21.4px;
    --font-21: 22.4px;
    --font-22: 23.4px;
    --font-23: 24.4px;
    --font-24: 25.4px;
    --font-25: 26.4px;
    --font-26: 27.4px;
    --font-27: 28.4px;
    --font-28: 29.4px;
    --font-29: 30.4px;
    --font-30: 31.4px;
    --font-31: 32.4px;
    --font-32: 33.4px;
    --font-33: 34.4px;
    --font-34: 35.4px;
    --font-35: 36.4px;
    --font-36: 37.4px;
}

body.font-size-xxl {
    --font-8: 9.9px;
    --font-9: 10.9px;
    --font-10: 11.9px;
    --font-11: 12.9px;
    --font-12: 13.9px;
    --font-13: 14.9px;
    --font-14: 15.9px;
    --font-15: 16.9px;
    --font-16: 17.9px;
    --font-17: 18.9px;
    --font-18: 19.9px;
    --font-19: 20.9px;
    --font-20: 21.9px;
    --font-21: 22.9px;
    --font-22: 23.9px;
    --font-23: 24.9px;
    --font-24: 25.9px;
    --font-25: 26.9px;
    --font-26: 27.9px;
    --font-27: 28.9px;
    --font-28: 29.9px;
    --font-29: 30.9px;
    --font-30: 31.9px;
    --font-31: 32.9px;
    --font-32: 33.9px;
    --font-33: 34.9px;
    --font-34: 35.9px;
    --font-35: 36.9px;
    --font-36: 37.9px;
}

    body.font-size-xxl .__container:not(._calendar-holder) .accessiblity-container .accessiblity:last-of-type {
        padding-inline: 12px !important;
    }

/*#endregion FontSizes*/

/*#region grayscale*/

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

body.grayscale {
    --primary-color: #222 !important;
    --calendar-primary-color: #222 !important;
}

    body.grayscale.darker,
    body.grayscale.dark {
        --light-primary-color: #aaa !important;
        --hover-primary-color: #fff !important;
        --active-primary-color: #ffaab7 !important;
        --focus-primary-color: #bd999e !important;
        --calendar-primary-color: var(--border) !important;
        --calendar-active-color: var(--lighter-black) !important;
        --primary-opacaty-color: 122, 19, 34 !important;
        --dark-primary-color: #770b1b !important;
        --dark-bright-color: #fff !important;
        --darkmode-primary-color: #ae4353 !important;
    }

        body.grayscale.dark * {
            --primary-color: #ddd !important;
            --calendar-active-color: var(--lighter-gray) !important;
        }

        body.grayscale.darker .invalid-feedback,
        body.grayscale.dark .invalid-feedback {
            color: #fff !important;
        }

        body.grayscale.darker * {
            --primary-color: #aaa !important;
            --calendar-active-color: var(--lighter-gray) !important;
        }

        body.grayscale.dark .btn {
            --primary-color: #aaa !important;
        }

        body.grayscale.darker .btn:hover {
            color: #222 !important;
        }


    body.grayscale.darker {
        --primary-color: var(--lighter-black) !important;
    }

        body.grayscale.dark .form-label.manditoryStar::after,
        body.grayscale.darker .form-label.manditoryStar::after {
            color: #fff !important
        }

    body.grayscale .select2-container--default .select2-results__option--highlighted[aria-selected] {
        background-color: #ddd !important;
        color: #111 !important
    }

    body.grayscale input[type="search"].select2-search__field:focus,
    body.grayscale input[type="search"].select2-search__field:focus-visible,
    body.grayscale input[type="search"].select2-search__field:focus-within,
    body.grayscale input[type="search"].select2-search__field:focus-visible {
        outline: 2px solid #333 !important
    }

    body.grayscale.darker .radio-input-container input[type="radio"]:checked + span,
    body.grayscale.dark .radio-input-container input[type="radio"]:checked + span {
        color: #222 !important;
        border: none !important;
    }

    body.grayscale.darker .custom-file-label::after,
    body.grayscale.dark .custom-file-label::after {
        background: transparent !important;
        color: #fff !important;
        border: 1px solid var(--main-text);
    }

/*#endregion grayscale*/

/*#region darkmode*/
body.dark {
    --dark-gray: #2d3037;
    --light-gray: #454e57;
    --lighter-gray: #5c6771;
    --main-text: #fff;
    --border: #4e5f6a;
    --border-light: #94abbf;
}

    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:not(.search_links[disabled="disabled"]) {
        color: var(--primary-color) !important;
    }

        body.dark .search_links:not(.search_links[disabled="disabled"]):hover {
            color: var(--active-primary-color) !important;
        }

    html:has(body.dark),
    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 .course-chart-container,
        body.dark .SidebarContainer .search2,
        body.dark .SidebarContainer .search2::before,
        body.dark .row .section-header,
        body.dark .section-header,
        body.dark .form-ModalPopup,
        body.dark .info-item,
        body.dark .general-progress-info,
        body.dark .childrensListInfo,
        body.dark .SubMenuContainer,
        body.dark:not(.Menuhidden) .SidebarContainer::before,
        body.dark:not(.Menuhidden) .SidebarContainer .logo,
        body.dark .main-section,
        body.dark .SidebarContainer,
        body.dark .box-header-icon.circleBtn,
        body.dark .MainHeader {
            background-color: var(--dark-gray) !important;
        }

        body.dark .form-input-container .select_date_table:has(input[type="image"]) input[type="text"],
        body.dark .form-input-container .select_date_table:has(input[type="image"]),
        body.dark .form-mandatory-field table td,
        body.dark .profile-pic-background,
        body.dark .exams-details .exam-name,
        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 .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 {
            background-color: var(--lighter-gray) !important;
        }

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

        body.dark .form-input-container .select_date_table:not(:has(input[type="image"])) input,
        body.dark .form-input-container .select_date_table:not(:has(input[type="image"])),
        body.dark .select2-dropdown,
        body.dark .form-control[readonly="readonly"],
        body.dark .form-control[disabled="disabled"],
        body.dark .switch_footer a,
        body.dark .switch_body.divscrollbar_vertical li,
        body.dark .exams-details,
        body.dark .class-avg-details,
        body.dark .row-item,
        body.dark .settings-tools-container .__container .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, .Dashboard-info-widget, ._login-states) {
            background-color: var(--dark-gray) !important;
            background: var(--dark-gray) !important;
        }

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

        body.dark .info-item,
        body.dark .settings-tools-container,
        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 .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 {
            background: var(--light-gray) !important;
        }

            body.dark .settings-tools-buttons a,
            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 {
                background-color: var(--light-gray) !important;
            }

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

        /***********main-text***************/
        body.dark .course-title,
        body.dark .switch_header span,
        body.dark .switch_body li a,
        body.dark .popover-content,
        body.dark .popover-content li,
        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:not(.colored-titles .section-title, .primary-color-titles .section-title, .colored-boxes-container .section-title),
        body.dark .section-title:not(.colored-titles .section-title, .primary-color-titles .section-title, .colored-boxes-container .section-title) i::after,
        body.dark .settings-tools-buttons a,
        body.dark .font-button i::after,
        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 span.form-label,
        body.dark .collapse-icon.btn i,
        body.dark .sectionTitle,
        body.dark .title-with-buttons .section-title:not(.colored-titles .section-title, .primary-color-titles .section-title, .colored-boxes-container .section-title),
        body.dark .section-header .section-title:not(.colored-titles .section-title, .primary-color-titles .section-title, .colored-boxes-container .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 .switchUser .dropdown-toggle .username,
        body.dark .MainHeader .dropdown .dropdown-menu.switchUserMenu a {
            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:not(a[disabled="disabled"]):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::after {
                color: var(--dark-bright-color) !important;
            }

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

        /***********--border***************/
        body.dark .profile-pic-background,
        body.dark .ProfileInfo,
        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-container--default .select2-search--dropdown .select2-search__field,
        body.dark .widget-header,
        body.dark .custom-chart-grades,
        body.dark .MainHeader {
            border-color: var(--border) !important;
        }

        body.dark .SidebarContainer {
            border-color: var(--light-gray) !important;
        }

        body.dark .nav-tabs .nav-link.active {
            color: #fff !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(70%) brightness(0.4);
        }

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

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

        body.dark .settings-tools-buttons a:focus,
        body.dark .settings-tools-buttons a:hover {
            background: var(--dark-gray) !important;
        }

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

        body.dark .setting-item.accessiblity-container a:hover:not(:disabled, .active),
        body.dark .setting-item.accessiblity-container a:focus:not(:disabled, .active),
        body.dark .font-button:hover,
        body.dark .font-button:focus {
            background: var(--lighter-gray) !important;
        }

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

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

        body.dark [id*="ReportViewer"],
        body.dark [id*="fixedTable"] {
            background: transparent !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.Menuhidden .SidebarContainer .menu > li.active a i {
            color: var(--primary-color) !important;
            background: rgba(255, 255, 255, .15) !important;
            background-color: rgba(255, 255, 255, .15) !important;
            background-image: rgba(255, 255, 255, .15) !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 .setting-item.accessiblity-container a.active {
            background: var(--primary-color) !important;
            border: 1px solid transparent;
        }

        body.dark .__container,
        body.dark .settings-item {
            border-color: #3e3e3e !important;
        }

/*#endregion darkmode*/

/*#region darkermode*/
body.darker {
    --dark-black: #131518;
    --light-black: #1b1f25;
    --lighter-black: #363e4a;
    --main-text: #eee;
    --border: #64738a;
    --border-light: #4a5669;
}

    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;
        }

    html:has(body.darker),
    body.darker div.row.with-background,
    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.dark .course-chart-container,
        body.darker .SidebarContainer .search2,
        body.darker .SidebarContainer .search2::before,
        body.darker .form-input-container .select_date_table:not(:has(input[type="image"])) input,
        body.darker .form-input-container .select_date_table:not(:has(input[type="image"])),
        body.darker .switch_footer a,
        body.darker .switch_body.divscrollbar_vertical li,
        body.darker .row .section-header,
        body.darker .section-header,
        body.darker .form-ModalPopup,
        body.darker .info-item,
        body.darker .general-progress-info,
        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 {
            background-color: var(--dark-black) !important;
        }

        body.darker .form-mandatory-field table td,
        body.darker .exams-details .exam-name,
        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:has(input[type="image"]) input[type="text"],
        body.darker .form-input-container .select_date_table:has(input[type="image"]),
        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 {
            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 .form-control[readonly="readonly"],
        body.darker .form-control[disabled="disabled"],
        body.darker .exams-details,
        body.darker .class-avg-details,
        body.darker .row-item,
        body.darker .settings-tools-container .__container .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, .Dashboard-info-widget, ._login-states) {
            background-color: var(--dark-black) !important;
            background: var(--dark-black) !important;
        }

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

        body.darker .darkmode-label::after,
        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 {
            background: var(--light-black) !important;
        }

        body.darker .darkmode-label {
            background: var(--lighter-black) !important;
            border-color: var(--main-text);
            cursor: not-allowed;
        }

            body.darker .darkmode-label::after {
                background: var(--dark-black) !important;
                border-color: var(--main-text);
                cursor: not-allowed;
            }

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

        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 .switch_header span,
        body.darker .switch_body li a,
        body.darker .font-button i::after,
        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:not(.colored-titles .section-title, .primary-color-titles .section-title, .colored-boxes-container .section-title),
        body.darker .section-title:not(.colored-titles .section-title, .primary-color-titles .section-title, .colored-boxes-container .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 span.form-label,
        body.darker .collapse-icon.btn i,
        body.darker .sectionTitle,
        body.darker .title-with-buttons .section-title:not(.colored-titles .section-title, .primary-color-titles .section-title, .colored-boxes-container .section-title),
        body.darker .section-header .section-title:not(.colored-titles .section-title, .primary-color-titles .section-title, .colored-boxes-container .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 .course-title,
        body.darker .SchoolDataWidget li,
        body.darker .switchUser .dropdown-toggle .username,
        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:not(a[disabled="disabled"]):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::after {
                color: var(--dark-bright-color) !important;
            }

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

        /***********--border***************/
        body.darker .profile-pic-background,
        body.darker .ProfileInfo,
        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-container--default .select2-search--dropdown .select2-search__field,
        body.darker .widget-header,
        body.darker .custom-chart-grades,
        body.darker .MainHeader {
            border-color: var(--border) !important;
        }

        body.darker .SidebarContainer {
            border-color: var(--light-black) !important;
        }

        body.darker .settings-tools-buttons a,
        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 .select_date_table tr td input[type="image"] {
            filter: contrast(90%) brightness(0.31);
        }

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

        body.darker table.tblOptions tr td .form-label:not([disabled="disabled"]),
        body.darker .childInfoItem a:not([disabled="disabled"]) {
            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 .setting-item.accessiblity-container a,
        body.darker .settings-tools-buttons a,
        body.darker .font-button {
            background: var(--light-black) !important;
        }

            body.darker .setting-item.accessiblity-container a.active,
            body.darker .settings-tools-buttons a.active,
            body.darker .font-button.active {
                background: var(--lighter-black) !important;
            }

            body.darker .setting-item.accessiblity-container a:not(:disabled, .active):focus,
            body.darker .setting-item.accessiblity-container a:not(:disabled, .active):hover,
            body.darker .settings-tools-buttons a:focus,
            body.darker .settings-tools-buttons a:hover {
                border-color: var(--main-text) !important;
                background-color: var(--lighter-black) !important;
            }

        body.darker .__container,
        body.darker .settings-item {
            border-color: var(--border) !important;
        }

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

        body.darker .profile-pic-background,
        body.darker .font-button:hover,
        body.darker .font-button:focus {
            background: var(--lighter-black) !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 .SidebarContainer .menu > li a i {
            background: none !important;
            background-color: unset !important;
            background-image: none !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 .setting-item.accessiblity-container a.active {
            background: var(--primary-color) !important;
            border: 1px solid transparent;
        }

/*#endregion darkermode*/

/*#region shared between more than one theme*/
body .instructions-line.note.note-secondry,
body .instructions-line.note.note-primary,
body .instructions-line.note.note-validation {
    background-color: transparent !important;
}

body.darker .instructions-line:not(.note, .instructions-red),
body.dark .instructions-line:not(.note, .instructions-red),
body.darker .instructions-line:not(.note, .instructions-red),
body.dark .instructions-line:not(.note, .instructions-red) {
    background: rgba(255,255,255,.05) !important;
    color: #fff !important;
}

    body.darker .instructions-line:not(.note, .instructions-red) span,
    body.dark .instructions-line:not(.note, .instructions-red) span {
        color: #fff !important;
    }

body.darker .instructions-line.instructions-red::before,
body.dark .instructions-line.instructions-red::before,
body.darker .instructions-line.instructions-red,
body.dark .instructions-line.instructions-red {
    background: #c2b2b2 !important;
    color: #a8100e !important;
}

body.darker .instructions-line.instructions-blue,
body.dark .instructions-line.instructions-blue {
    background: #aebec6 !important;
    color: #102835 !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.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 {
    color: #181a1b !important;
}

    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::before {
        border: none;
    }

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: transparent !important;
    color: #fff !important;
    border: 1px solid var(--border-light);
}

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.darker .progressbar li::before,
body.dark .progressbar li::before {
    background-color: var(--drak-black, var(--dark-gray)) !important;
    color: var(--border-light) !important;
    border-color: var(--border) !important;
}

body.dark .progressbar li.active::before,
body.darker .progressbar li.active::before {
    background-color: var(--lighter-black, var(--lighter-gray)) !important;
    color: var(--primar-color) !important;
    border-color: var(--secondary-color) !important;
}

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

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.dark .invalid-feedback:not(.box .invalid-feedback),
    body.dark .instructions-line.note.note-validation:not(.box .note-validation),
    body.dark .ValidationClass:not(.box .ValidationClass) {
        color: #ff4f44;
        text-shadow: 2px 2px 16px #000;
    }

    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-color: #404247 !important;
        background: #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 .table-Style.GradeView th .form-label,
    body.dark .table-Style.GradeView th .form-label,
    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.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: var(--border) !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 .QRCodeSteps .form-ModalPopup,
    body.dark .modal-body,
    body.dark .modal-content,
    body.darker .modal-body,
    body.darker .modal-content {
        background-color: var(--dark-gray, var(--dark-black)) !important;
        background: var(--dark-gray, var(--dark-black)) !important;
    }

    body.darker .QRCodeIcon,
    body.dark .QRCodeIcon {
        background-color: #fff;
    }

    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: var(--border) !important;
    }

    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: transparent !important;
    }

    body.dark .popover.right > .arrow::after {
        border-right-color: var(--dark-gray) !important;
    }

    body.dark .popover.left > .arrow::after {
        border-left-color: var(--dark-gray) !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 .ToolBarButtonsCell,
    body.dark .ToolBarButtonsCell {
        background-color: var(--dark-black, var(--dark-gray)) !important;
        border-color: var(--border) !important;
    }

        body.darker .ToolBarButtonsCell *,
        body.dark .ToolBarButtonsCell * {
            border-color: var(--border) !important;
            color: var(--main-text) !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,
        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 table[id*="PlaceHolderMain_rv"] .ToolbarExport .MenuBarBkGnd .DisabledButton,
    body.dark table[id*="PlaceHolderMain_rv"] .ToolbarExport .MenuBarBkGnd .DisabledButton,
    body.darker table[id*="PlaceHolderMain_rv"] .ToolbarExport .MenuBarBkGnd .HoverButton,
    body.dark table[id*="PlaceHolderMain_rv"] .MenuBarBkGnd .HoverButton {
        background-color: var(--light-black, var(--light-gray)) !important;
    }

    body.darker table[id*="PlaceHolderMain_rv"] .ToolbarExport .MenuBarBkGnd .DisabledButton,
    body.dark table[id*="PlaceHolderMain_rv"] .ToolbarExport .MenuBarBkGnd .DisabledButton,
    body.darker table[id*="PlaceHolderMain_rv"] .ToolbarExport .MenuBarBkGnd .HoverButton {
        border-bottom-left-radius: 13px !important;
        border-bottom-right-radius: 13px !important;
    }

.font-size-xxl .__container .settings-item:nth-of-type(3) .setting-title {
    top: 16px
}

.font-size-xxl .__container .settings-item {
    margin-inline: -20px;
}

.font-size-xxl .accessiblity,
.font-size-xl .accessiblity,
.font-size-l .accessiblity {
    white-space: pre-line;
    padding: 6px;
}

body.darker.grayscale .setting-item.accessiblity-container a.active,
body.dark.grayscale .setting-item.accessiblity-container a.active {
    background-color: #7d7d7d !important;
    color: #fff !important;
}

body.darker.grayscale .btn:not(:disabled,.collapse-icon):focus,
body.dark.grayscale .btn:not(:disabled,.collapse-icon):hover {
    background-color: #737373 !important;
    color: #fff !important;
}

body.dark .radioButtonList .radio-input-container input[type="radio"]:not(:checked) + label,
body.darker div.row input,
body.dark div.row input,
body.darker .custom-file-label,
body.dark .custom-file-label,
body.darker div.row .form-control,
body.dark div.row .form-control,
body.darker .select2-container--default .select2-selection--single:not(.schedule-wedgit-select .select2-container--default .select2-selection--single, .widget-header .select2-container--default .select2-selection--single),
body.dark .select2-container--default .select2-selection--single:not(.schedule-wedgit-select .select2-container--default .select2-selection--single, .widget-header .select2-container--default .select2-selection--single) {
    border-color: var(--border-light) !important;
}

body.darker .form-input-container .select_date_table,
body.dark .form-input-container .select_date_table {
    border-color: var(--border-light) !important;
}

body.dark .box,
body.darker .box {
    box-shadow: 8.0px 1.0px 16.0px hsl(0deg 0% 0% / 0.25) !important;
}

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

body.darker .box {
    border: 1px solid var(--lighter-black) !important;
}

body.dark .MainHeader,
body.darker .MainHeader {
    box-shadow: 0.0px 12.0px 24.0px hsl(0deg 0% 0% / 0.18) !important;
}

body.darker .select2-dropdown,
body.dark .select2-dropdown,
body.dark .SearchAreaContainer .section.section-with-title:not(.section:first-child),
body.darker .SearchAreaContainer .section.section-with-title:not(.section:first-child),
body.dark .form-ModalPopup-footer,
body.darker .form-ModalPopup-footer,
body.dark #footer,
body.darker #footer,
body.dark .accordian_child_list_search,
body.darker .accordian_child_list_search {
    border-color: var(--border-light) !important;
}

body.darker #LoadBackGround,
body.darker #ConfirmBackGround,
body.darker #MessageBoxBackGround,
body.dark #LoadBackGround,
body.dark #ConfirmBackGround,
body.dark #MessageBoxBackGround {
    background-color: rgb(0 0 0 /50%);
    backdrop-filter: blur(100px);
    border-color: transparent;
}

body.dark .loadingGif::before,
body.darker .loadingGif::before {
    background-color: rgb(0 0 0 /10%);
}

body.dark .loadingGif,
body.darker .loadingGif {
    background-color: rgb(0 0 0 /5%);
    backdrop-filter: blur(5px);
}

body.dark .select2-container--default .select2-search--dropdown .select2-search__field,
body.darker .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: rgb(0 0 0 /5%) !important;
    border-radius: 14px;
    padding: 4px 8px;
    color: #fff;
}

input.select2-search__field:not([disabled="disabled"], [readonly="readonly"]):focus,
input.select2-search__field:not([disabled="disabled"], [readonly="readonly"]):focus-within,
input.select2-search__field:not([disabled="disabled"], [readonly="readonly"]):focus-visible {
    outline: 2px solid rgba(var(--primary-opacaty-color),.2) !important;
}

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