@use "@project-sunbird/sb-styles/assets/mixins/mixins" as *;

html[data-mode='darkmode'] {
    // --primary-theme: var(--primary-theme);
    // --primary-theme-hsl: 49.3, 100%;
    --primary-theme-contrast: var(--white);
    --primary-color: hsl(var(--primary-theme-hsl), 58.24%);
    --primary-0: hsl(var(--primary-theme-hsl), 88%); // #fffcee;
    --primary-100: hsl(var(--primary-theme-hsl), 82%); // #fff8db; // default button bg
    --primary-200: hsl(var(--primary-theme-hsl), 76%); // #fffd2a; // divider
    --primary-250: hsl(var(--primary-theme-hsl), 70%); // #f1f1c7;
    --primary-300: hsl(var(--primary-theme-hsl), 64%); // #ffeb2a; // outline, focus fields
    --primary-400: var(--primary-color); // button bg, heading, table titles, links, toggles
    --primary-600: hsl(var(--primary-theme-hsl), 52%); // #ffc72a; // on press
    --primary-800: hsl(var(--primary-theme-hsl), 46%); //  #ffb62a; // hover
    --secondary-200: var(--primary-color);
    --secondary-color: var(--primary-color);
    --gray-800: var(--white);
    --color-000: #000000;
    --color-111: #111111;
    --color-222: #222222;
    --color-333: #333333;
    --color-444: #444444;
    --color-5c5c5c: #5c5c5c;
    --sb-search-btn-bg: var(--color-333);
    --sb-search-btn-text: var(--primary-color);
    --sbt-primary-bg: var(--primary-theme);
    --sbt-border-chapter: var(--primary-100);
    --sbt-body-bg: var(--color-000);
    --sbt-body-bg2: var(--color-333) !important;
    --sbt-header-bg: var(--color-333);
    --sbt-filter-bar-bg: var(--color-333);
    --sb-container-bg: var(--black);
    --sbt-footer-bg: var(--color-333);
    --sbt-box-shadow-black: rgba(var(--rc-rgba-black), 0.2);
    --sbt-theme-purple-selectbox: var(--white);
    --sbt-theme-green-selectbox: var(--white);
    --sbt-theme-blue-selectbox: var(--white);
    --sbt-theme-light-blue-selectbox: var(--white);
    --sbt-theme-purple-selectbox-lbg: var(--color-222);
    --sbt-theme-green-selectbox-lbg: var(--color-222);
    --sbt-theme-blue-selectbox-lbg: var(--color-222);
    --sbt-theme-light-blue-selectbox-lbg: var(--color-222);
    --sbt-pill-hs: 212, 100%;
    --sbt-pill-bg: var(--color-5c5c5c);
    --sbt-pill-bg-active: var(--primary-color); // #0076FE
    --sbt-pill-text: var(--white);
    --sbt-pill-text-hover: var(--color-222);
    --sbt-compt-bg: var(--color-333);
    --sbfield-label-text: var(--gray-100);
    --sb-linkmenu-icon-bg-hover: var(--black);
    --sbt-pill-hs: 212, 100%;
    --sb-pill-bg: var(--color-222);
    // new styles
    --sbt-badge-bg: var(--color-222);
    --sbt-sidemenu-overlay-bg: 34, 34, 34;
    --sbt-sidemenu-bg: var(--color-333);
    --sidebar-profil-header-bg: var(--color-222);
    --sb-linkmenu-bg: var(--color-333);
    --sb-linkmenu-text: var(--white);
    --sb-linkmenu-active-text: var(--primary-color);
    --sb-linkmenu-text-hover: var(--color-222);
    --sb-btn-default-color: var(--black);

    //header
    --sb-menu-bg: var(--black);
    --sb-menu-item: var(--gray-0);
    --sb-header-bg: var(--color-333);
    --sb-notification-bg: var(--gray);
    --bell-icon: var(--white);
    --sb-header-qrcode-btn-bg: var(--color-333);
    --sb-header-qrcode-btn-border: var(--primary-300);
    --sb-search-input-bg: var(--color-222);
    --sb-search-input-text: var(--white);
    --sb-qrcode-divider: var(--primary-0);
    --sb-language-dropdown-bg: var(--black);
    --sb-language-dropdown-item: var(--white);
    --sb-language-dropdown-item-active: var(--gray);
    --sb-search-auto-select: var(--black);
    --sb-footer-bg: var(--gray);
    --sbt-green-bg: var(--color-222);
    --sbt-class-bar-label-text: var(--gray-100);
    --sbt-theme-green-selectbox: var(--white);
    --sb-search-input-bg: var(--color-222);
    --sb-sidebar-menu-bg-active: var(--sbt-filter-bar-bg);
    --sb-sidebar-menu-text: var(--primary-600);
    --sb-graph-section-bg: var(--sbt-body-bg2);

//cc
    --cc-accordion-panel-br: var(--primary-300);
    --cc-accordion-panel-bg: var(--color-222);
    --cc-accordion-panel-header-bg: var(--color-333);
    --cc-accordion-panel-header-br: var(--primary-300);
    --cc-accordion-panel-header-title: var(--primary-400);
    --cc-progress-circle-stroke: var(--secondary-200);
    --cc-sbcard-meta1: var(--rc-979797);
    --cc-sbcard-metaC-data: var(--rc-FAFAFA);
    --cc-sbcard-course-curi-title: var(--white);
    --cc-sbcard-img-label: #284C3F;
    --cc-sbcard-img-label-bg: #B3EBD7;
    --cc-sbcard-img-badge-bg: var(--black);
    --cc-sbcard-img-badge-text: var(--white);
    --cc-sblabel-badge-br: var(--secondary-color);
    --cc-sblabel-badge-text: var(--secondary-color);
    --cc-pill-border: var(--secondary-color);
    --cc-pill-text: var(--secondary-color);
    --cc-pill-bg-hover: var(--secondary-color);
    --cc-pill-text-hover: var(--black);
    --cc-grade-pill-container-bg: var(--color-333);
    --cc-grade-pill-text: var(--white);
    --cc-grade-pill-bg-hover: var(--primary-color);
    --cc-grade-pill-text-hover: var(--color-222);
    --cc-grade-pill-svg-fill: var(--color-222);
    --cc-sbcard-data1-2-text: var(--primary-color);
    --cc-sbcard-bg: var(--color-333);
    --cc-sbcard-img-container-bg: var(--gray-100);
    --cc-sbcard-title: var(--white);
    --cc-sbcard-meta-text: var(--gray-800);
    --cc-sbcard-dot-divider: var(--gray-200);
    --cc-sbcard-moreinfo-bg: none;
    --cc-sbcard-moreinfo-bordertop: #cacbce;
    --cc-sbcard-meta2-text: var(--gray-800);
    --cc-sbcard-org-text: var(--gray-200);
    --cc-sbcard-type-text: var(--white);
    --cc-sbcard-rv-img-container-bg: var(--gray-100);
    --cc-sbcard-selected-border: var(--primary-color);
    --cc-sbcard-img-br: var(--color-222);
    --cc-sbcard-offline-bg: var(--tertiary-color);
    --cc-sbcard-offline-img-text: var(--white);
    --cc-sbcard-card__progressbar-bg: var(--gray-100);
    --cc-sbcard-card__progressbar-span-bg: var(--secondary-200);
    --cc-sbcard-type-br: var(--black);
    --cc-sbcard-hover-text: var(--white);
    --cc-sbcard-hover-bg: var(--primary-color);
    --cc-sbcard-org-text: var(--balck);
    --cc-sbcard-data1-bg: var(--color-444);
    --cc-sbcard-data1-bg-active: var(--primary-300);
    --cc-sbcard-data2-bg: var(--color-444);
    --cc-sbcard-data2-bg-active: var(--primary-300);
    --cc-sbcard-data0-bg: var(--color-444);
    --cc-sbcard-data0-bg-active: var(--primary-300);
    --cc-sbcard-type-bg: var(--black);
    --cc-sbcard-type-text: var(--white);
    --cc-listView-compt-title: var(--white);
    --cc-listView-compt-itemText: var(--white);
    --cc-carousel-title: var(--white);
    --cc-faq-yesbtn-bg: var(--primary-color) !important;
    --cc-faq-yesbtn-text: var(--color-000) !important;
    --cc-faq-nobtn-bg: var(--color-222);
    --cc-faq-nobtn-text: var(--white);

    // cc pills box
    --cc-pills-grid-item: var(--color-222) !important;
    --cc-pills-grid-item-hover: #f2f2f2;
    --cc-pills-grid-item-img-bg: #f2f2f2;
    --cc-pills-grid-icon-head-img-bg: var(--white);
    --cc-viewbtn-border: #94CCF5;
    --cc-viewbtn-text: #0076FE;
    --cc-viewbtn-hover: var(--white);

    //member card
    --cc-members-list-item-selected: var(--black);
    --cc-members-list-item-selected-border: var(--primary-color);
    --cc-members-list-item-menu-text: var(--gray-200);
    --cc-members-list-item-status-text: var(--secondary-200);
    --cc-members-list-item-status-br: var(--secondary-200);
    --cc-members-list-item-status-bg: var(--primary-color);

    // notification
    --cc-notification-list-bg: var(--color-222);
    --cc-notification-list-br: var(--color-222);
    --cc-notification-status-bg: var(--white);
    --cc-notification-date-text: var(--white);
    --cc-notification-logo-bg: var(--gray-0);
    --cc-notification-title-text: var(--gray-400);
    --cc-notification-title-active: var(--primary-color);
    --cc-notification-subtitle-text: var(--white);

    // toc 
    --cc-toc-card-item-bg: var(--color-333);
    --cc-toc-card-item-hover: var(--primary-color);
    --cc-toc-card-item-br: var(--color-222);
    --cc-toc-card-item-bs: var(--rc-rgba-primary);
    --cc-toc-card-item-img-bg: var(--rc-dddddd);
    --cc-toc-card-item-title: var(--white);
    --cc-toc-card-item-title-hover: var(--color-333);
    --cc-toc-card-item-score-text: #3F19C3;

    //toc item
    --cc-chapter-br: var(--gray-100);
    --cc-chapter-bg: var(--color-222);
    --cc-chapter-title: var(--gray-800);
    --cc-chapter-item-bg: varvar(--white);
    --cc-chapter-item-bs: var(--rc-rgba-primary);
    --cc-chapter-item-br: var(--rc-rgba-primary);
    --cc-chapter-item-title-text: var(--primary-400);
    --cc-chapter-item-open-br: #e0e0e0;
    --cc-chapter-item-open-title-text: var(--primary-400);
    --cc-chapter-item-topic-title-text: var(--primary-400);
    --cc-chapter-item-topic-title-text-active: var(--primary-100);
    --cc-chapter-item-topic-title-text-hover: var(--gray-0);

    //toc curriculum
    --cc-curriculum-br-bg: var(--white);
    --cc-curriculum-bg: var(--white);
    --cc-curriculum-br: var(--primary-200);
    --cc-curriculum-active-bs: var(--rc-009D53);
    --cc-curriculum-title-text: #3A3A3A;

    //faq
    --cc-faq-yesbtn-text: var(--secondary-color);
    --cc-faq-helpheader-text: var(--white);
    --cc-faq-helpheader-bg: var(--primary-color);
    --cc-faq-panel-title-text: var(--primary-color);
    --cc-faq-info-msg-bg: var(--primary-0);
    --cc-faq-panelheader-bg: var(--white);
    --cc-faq-panel-body-bg: var(--color-222);
    --cc-faq-panel-interact-bg: var(--color-222);
    --cc-faq-yesbtn-bg: inherit;
    --cc-faq-yesbtn-text: var(--color-000);

    //layout
    --cc-lb-card-hlist-title: var(--black);
    --cc-lb-card-grid-title: var(--white);
    --cc-badge-bg: var(--color-222);
    --cc-badge-text: var(--white);
    --cc-lb-card-stack-title: var(--primary-color);
    --cc-lb-card-stack-btn-bg: var(--primary-100);
    --cc-lb-card-stack-btn-text: var(--primary-color);

    --cc-listView-compt-title: var(--white);
    --cc-listView-compt-itemText: var(--white);
    --cc-carousel-title: var(--white);
    --cc-sbcard-data2-bg: var(--color-444);
    --cc-sbcard-data2-bg-active: var(--primary-300);

    //Joy theme header
    --sbt-header-bg: var(--color-333);
    --sbt-page-header-bg: var(--sbt-header-bg);
    --sbt-theme-green-selectbox: var(--gray-200);
    --sbt-language-dropdown-icon: var(--primary-color);
    --sbt-language-dropdown-bg: var(--black);
    --sbt-language-dropdown-item-hover-bg: var(--color-333);
    --sbt-language-dropdown-item-hover-text: var(--primary-color);
    --sbt-language-selectbox: var(--primary-color);
    --sbt-filter-bar-bg: var(--color-333);
    --sb-notification-bg: var(--black);
    --sb-footer-bg: var(--gray);
    --sbt-footer-info-links: var(--white);
    --sbt-footer-info-links-hover: var(--primary-color);
    --sbt-language-dropdown-item: var(--white);
    --sbt-filter-switcher-bg: var(--primary-color);
    --sbfaq-compt-bg: var(--color-222);

//Modal
    --sb-modal-header-text: var(--black);
    --sb-modal-content-bg: var(--sbt-compt-bg);
    --sb-modal-actions-bg: var(--sbt-compt-bg);

    //landing page
    --sb-landing-page-bg: var(--black);
    --sb-landing-page-segments: var(--color-333);
    --sb-landing-page-cards: var(--black);
    --sb-landing-page-cards-desc: var(--white);
    --sb-landing-page-btn: var(--sb-landing-page-segments);

    //profile page
    --sb-profile-certificate-bg: var(--color-333);
    --sb-course-progress-status-label: var(--black);
    --sb-list-data: var(--gray-100);
    --sb-list-items: var(--white);
    --sb-profile-bg-c-4: var(--color-444);
    --sb-profile-page-basic-label-bg: var(--color-333);

    //black header bar
    --brand-header-tail-bg: var(--color-000);
    --brand-header-tail-text: var(--white);
    --primary-menu-link-active: #ff714a;

    // joy theme
    --themeflower-bg: #1a1a1a;
    //pagination
    --sb-pagination-bg: var(--color-333);
    --sb-pagination-item-bg: var(--sb-pagination-bg);
    --sb-pagination-item: var(--white);
    --sb-pagination-item-active: var(--gray-400);

    //filters
    --sb-prominent-filter-bg: var(--color-444);
    --sb-prominent-filter-title: var(--white);
    --sb-multiple-dropdown-border: var(--gray-100);
    --sb-multiple-dropdown-border-hover: var(--gray-200);
    --sb-multiple-dropdown-bg: var(--color-222);
    --sb-prominent-filter-field-color: var(--white);
    --sb-dropdown-menu-bg: var(--sb-multiple-dropdown-bg);
    --sb-dropdown-menu-item: var(--white);
    --sb-drodown-selection-active: var(--primary-300);
    --ui-seleted-label-bg: var(--color-222);
    --ui-seleted-label-bg-hover: var(--black);
    --state-medium-container-bg: var(--color-444);
    --sb-class-bar-bg: var(--color-333);
    --sb-dropdown-menu-text: var(--white);
    --ui-dropdown-menu-selected-item-bg: var(--color-444);
    --ui-dropdown-menu-selected-item: var(--white);
    --sb-filter-selected-dropdown-hover: var(--black);

    //slick slide card
    --sb-card-bg: var(--color-222);
    --sb-card-border: 0.0625rem solid transparent;
    --sb-card-text: var(--white);
    --sb-card-slick-arrows-bg: var(--color-444);
    --sb-profile-page-container: var(--color-333);

    //myGroups
    --sb-mygroups-bg: var(--color-444);
    --groups-content-header: var(--color-444);
    --kabab-menu-hover-bg: var(--black);
    --kabab-menu-dropdown-bg: var(--color-444);
    --kabab-menu-dropdown-item-active: var(--color-333);

    --sbfaq-compt-bg: var(--color-222);

    --visit-helpcenter-bg: var(--color-333);

    //SDK
    --sdk-end-page-title: var(--white);
    --sdk-end-page-replay-icon: var(--white);
    --sdk-end-page-replay-section-bg: var(--color-333);
    --sdk-end-page-replay-section-hover: var(--color-222);
    --sdk-end-page-title-span: var(--white);
    //QUML
    --quml-main-bg: var(--color-333);
    --quml-color-primary-contrast: var(--white);
    --quml-scoreboard-sub-title: #f2f2f2;
    --quml-mcq-title-txt: var(--white);
    --quml-option-card-bg: var(--color-222);
    --quml-btn-border: var(--color-222);
    --quml-option-selected-checkmark: var(--color-333);
    --quml-navigation-btns: var(--color-333);
    --quml-question-bg: var(--color-333);
    --quml-scoreboard-unattempted: var(--white);
    --quml-info-icon: var(--color-000) !important;
    --quml-close-icon: var(--white);

    --signup-panel-bg: var(--sbt-body-bg2);
    //explore-page 
    --sb-explore-hr: #000;
    --sb-section-preference: var(--white);
    --slick-dots-active-color: var(--gray-200);
    --slick-dots-color: var(--gray-800);


    // lazy loading
    --lazyload-bg: var(--color-333);
    --grey-nuance-lighter: var(--color-333);
    --grey-nuance-darker: var(--color-111);
    --fade-grey: #f2f2f2;

    .mat-dropdown__options .mat-pseudo-checkbox {
        border-color: var(--primary-color);
        background: transparent;
    }
    .mat-primary .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-full::after, .mat-primary .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-full::after {
        color: var(--primary-color);
    }
    .mat-mdc-option:hover:not(.mdc-list-item--disabled) {
        background-color: var(--color-444);
    }
    .mat-select-placeholder {
        color: rgba(255,255,255,.4);
    }
    .sbhelp_container__left {
        border-radius: 1.5rem;
    }

    .listView-compt__btn {
        button {
            background-color: var(--primary-color);
            color: var(--black);

            &:hover {
                background-color: var(--primary-300);
            }
        }
    }

    .sbt-filter-text {
        background: var(--color-222) !important;
    }

    .multi-select-container .list-border,
    sb-form .sb-textbox,
    sb-form .async-text {
        border-radius: 1.75rem;
    }

    .sbt-back-header .content-header {
        background-color: var(--color-444) !important;
    }

    .ui.selection.sbt-dropdown.dropdown.sbt-green {
        color: var(--white);
    }

    .profile-bg-c-4 {
        background: var(--color-222) !important;
        color: var(--white);
    }

    .content-preference__info {
        @media screen and (max-width: 992px) {
            background: var(--color-222) !important;
            color: var(--white);
        }
    }

    .ui.selection.sbt-dropdown.dropdown .menu>div .item:hover,
    .ui.selection.sbt-dropdown.dropdown .menu>div .item.active {
        background: var(--primary-color) !important;
        color: var(--black);
    }

    .notification-bell {
        box-shadow: var(--sbt-box-shadow-6px);
    }

    .sbaccordion__panel-header .icon-svg,
    .help-page__content .panel-heading .icon-svg {
        background: var(--color-222);
    }

    .sbt-footer-title {
        color: var(--black) !important;
    }

    .add-adminrole__content {
        background: var(--sbt-compt-bg) !important;
    }

    .no-result-container {
        border-radius: 1.5rem;
        background: var(--sbt-compt-bg) !important;

        .no-result-text {
            color: var(--white);
        }
    }

    .cfe-multiselect-label {
        color:hsl(var(--gray-hs), 80%);
     }
    input.sb-form-control:-internal-autofill-selected {
        color-scheme: dark;
        box-shadow: 0 0 0 1000px var(--color-333) inset;
    }

    .profile-bg-c-4 {
        color: var(--white);
    }

    app-signup {
        .sb-checkbox.sb-checkbox-primary label:before {
            border-color: var(--primary-color);
        }
    }

    .sbt-theme-bg-img .st0 {
        fill: #999;
    }

    .faq-report-container {
        h6 {
            color: #f2f2f2;
        }
        sb-form .multi-select-section-app .multi-select-container {
            sb-caret-down svg {
                filter: none;
            }
    
            .list-border ul {
                color: var(--black);
            }
        }
    }

    ::placeholder {
        color: var(--white) !important;
        opacity: 1 !important;
        /* Firefox */
    }

    :-ms-input-placeholder,
    ::-ms-input-placeholder {
        /* Internet Explorer 10-11 */
        color: var(--white) !important;
    }

    .sb-btn-link-primary:hover,
    .sb-btn-link-primary:active,
    .sb-btn-link-primary.active {
        background-color: var(--primary-800);
    }

    sb-pills-grid[ng-reflect-title='Browse by Categories'] {
        .sb-label-grid.sb-pills-grid .item {
            background-color: var(--color-222) !important;
        }
    }

    .sb-label-grid .item:hover {
        background: var(--color-333);
    }

    .sb-btn-round {
        background: var(--color-444);
    }

    .sbt-inside-page-container,
    app-my-groups .sbt-center-container,
    app-group-details .sbt-center-container,
    app-add-activity-content-types .sbt-center-container,
    app-activity-search .sbt-center-container,
    app-activity-details .sbt-center-container,
    app-add-member .sbt-center-container,
    .sbt-fluid-content-bg,
    .sbt-page-content-area {
        background: rgba(17, 17, 17, 1);
    }

    .sbt-page-content-area {
        background: none !important;
    }

    .terms-and-cond-form iframe,
    sb-caret-down svg,
    .sb-form-control:focus+i.icon-input-close,
    .sb-btn-nolayer img,
    .enter-qr-code-body img,
    .flex-ai-jc-center.add-member-content img,
    .sb-multi-rows img,
    .player-endpage__right-panel .user-options img {
        filter: invert(1);
    }

    .no-content-container .board-title,
    .no-content-container .sub-title,
    .ui.semi-circular.update.basic.label,
    .ui.semi-circular.basic.label {
        color: var(--gray-100) !important;
    }

    .sb-epub-reading-status,
    .sb-label-grid .item:hover,
    .sb-notification-modal .ui.modal,
    .flex-ai-jc-center.add-member-content {
        background: var(--color-333);
    }

    .sb-player-header__panel .player-pagenumber .page-count:focus~.focus-arrow,
    .batch-details__dropdown .selection.ui.dropdown {
        background: var(--color-222);
    }

    .ui.star.rating .icon {
        color: rgba(var(--rc-rgba-black), .5);
    }

    .sbchapter__item--active,
    .sbchapter__item--active:hover,
    .sbchapter__item:hover {
        border: calculateRem(1px) solid var(--cc-toc-card-item-br);

        .icon-svg svg.icon.icon-svg--primary {
            fill: var(--color-000) !important;
        }
    }

    .sb-btn-disabled {
        color: var(--color-000) !important;

        &:hover {
            color: var(--color-333) !important;
        }
    }

    .sbt-welcome-theme-container .joy-modal-footer {
        background: var(--color-333) !important;
    }

    //avtar
    .avatar-content {
        background: var(--color-222) !important;
        border: calculateRem(1px) solid var(--color-222) !important;
        color: var(--white) !important;
    }

    .sb-search-box .sb-btn {
        background: var(--primary-color);
        color: var(--color-000);
    }

    .sb-modal .ui.modal>.close {
        color: var(--color-000);
    }

    .sbchapter__item .sbchapter__img--inprogress .icon-svg svg.icon.icon-svg--primary {
        fill: var(--color-000);
    }

    .sb-manage-section .sb-multi-rows:nth-child(odd) {
        background: var(--color-222) !important;
        border: none;
    }

    .sb-notification-container .sb-notification-header,
    .multi-select-container .list-border .placeholder {
        color: var(--white) !important;
    }

    .menu:hover::after,
    .sb-members-list-item .menu:hover::after {
        background: var(--kabab-menu-hover-bg) !important;
    }

    .sb-members-list-item .status {
        color: var(--black) !important;
    }

    .no-clicked,
    .yes-clicked {
        background: var(--color-222);
    }

    .help-page__content .panel .panel-info {
        .input-text {
            background: var(--black);
            color: var(--white);
        }

        .submit-button {
            color: var(--black);
        }
    }

    app-add-member {
        .ui.container {
            .sb-bg-color-white {
                background: var(--color-333) !important;
            }
        }
    }

    .certificate-course-content {
        .sbchapter__item__score {
            color: var(--white);
        }
    }

    .sbchapter__item--active,
    .sbchapter__item--active:hover,
    .sbchapter__item:hover {
        .sbchapter__item__score {
            color: var(--black);
        }
    }

    .sb-notification-container .clear-text a {
        color: var(--primary-color) !important;
    }

    .sb-bg-color-white.sb-back-btn-panel {
        background: var(--color-444) !important;
    }

    .sb-bg-color-white.sb-modal-content {
        background-color: var(--color-333) !important;
    }

    //chatbot
    .lib-chat-panel {
        background: var(--color-222);

        .lib-chat-header {
            background: var(--color-000);
            color: var(--white);
        }

        .lib-chat-body,
        .messages-container {
            background-color: var(--color-333);
        }

        .chat-msg.recieved {
            background: var(--color-222);

            div {
                color: var(--white);
            }

            .btn-primary {
                background: var(--white);
                border: calculateRem(1px) solid var(--primary-color);
                color: var(--color-000);

                &:hover {
                    background: var(--primary-color);
                }
            }
        }

        .msg-input {
            background: var(--color-222);
            color: var(--white);
        }

        .chat-msg.sent {
            background: var(--primary-color) !important;
            color: var(--color-222) !important;
        }

        .btn-info {
            background: transparent !important;
            color: #fff !important;
            border: 0px solid red !important;

            &:hover {
                background: var(--primary-800) !important;
                color: var(--color-333) !important;
            }
        }

        .lib-chat-footer .send-btn img {
            filter: invert(1);
        }

        .lib-chat-footer {
            border-top: calculateRem(1px) solid var(--color-333);
        }

    }

    .chatbox-cover {
        .chatbox {
            border: calculateRem(1px) solid var(--primary-color) !important;
            background-color: var(--primary-color) !important;
            &::after {
                border-color: var(--primary-color) var(--primary-color) transparent transparent !important;
            }
        }
        .chatboxText {
            background: var(--primary-color) !important;
            color: var(--color-000) !important;
        }
    }

    .overlay-sidebar {
        background: rgba(var(--sbt-sidemenu-overlay-bg), 0.8);
    }

    // .logo.sbt-logo,
    .five.wide.column .d-flex.logo,
    .sb-onboard .brand-logo,
    .terms-modal-logo {
        padding: 0.5rem;
        border-radius: 0 0 1rem 1rem;
        //background: var(--white);
    }

    .terms-modal-logo {
        max-width: 14rem;
        text-align: center;
        margin: 0 auto;
    }

    .add-user--horizontal {
        background-color: var(--primary-color);

        .add-user__label {
            color: var(--black) !important;
        }
    }

    .user-profile-box,
    .sb-members-list-item,
    .sbt-welcome-theme-container .joy-modal-footer {
        background: var(--color-333);
    }

    .members-inline .sb-members-list-item,
    .sb-modal-dropdown-web ul li:hover,
    .sb-toc-child-item,
    .cc-player__btn-back {
        background: var(--color-222);
    }

    .sb-btn-outline-primary,
    .df-back-btn-container .sb-btn {
        img {
            filter: invert(1);
        }

        &:hover {
            img {
                filter: grayscale(1);
            }
        }
    }

    .add-user__icon img {
        filter: grayscale(1);
    }

    .ui.segment {
        background: var(--color-333);
    }

    .sb-members-list-item--medium .selected img {
        filter: invert(1);
    }

    .sb-form-control {
        color: var(--white) !important;
        background: var(--color-333) !important;

        &::placeholder {
            color: var(--white);
        }

        &::selection {
            color: var(--white) !important;
        }
    }

    .sb-field.ui.left.icon.input {
        i.icon {
            color: var(--white);
        }
    }

    .sb-rating.ui.star.rating .icon {
        color: var(--color-444);
    }

    .sb-checkbox label:before,
    .sb-radio-btn-checkbox label:before {
        background: var(--black);
    }

    .sb-checkbox input:checked~.box:after,
    .sb-checkbox input:checked~label:after {
        color: var(--black);
    }

    .ui.selection.sbt-dropdown.dropdown.sbt-purple--lbg .sbt-dropdown-section .item:hover,
    .ui.selection.sbt-dropdown.dropdown.sbt-purple--lbg .sbt-dropdown-section .item.active {
        background: var(--primary-color) !important;
        color: var(--black);
    }

    .sb-modal-dropdown-web {
        ul {
            background-color: var(--black);
            color: var(--white);
            border: calculateRem(2px) solid var(--black);
            box-shadow: none;
        }
        .selected-option {
            background: var(--primary-color) !important;
            color: var(--black);
        }
    }    

    .sb-onboard sb-form .sb-textbox,
    sb-form .sb-textbox,
    sb-form .async-text {
        background: var(--color-333);
        border: calculateRem(.5px) solid var(--gray-400);
        color: var(--white);
    }

    .sb-onbrd-g-box__guest__item {
        box-shadow: 0 1.25rem 2.5rem -0.625rem #191818;
        background-color: var(--color-222);
        border: 0.125rem solid var(--color-222);

        &:hover,
        &.active {
            .title {
                color: var(--color-333);
            }
        }
    }

    .sb-members-list-item:hover,
    .sb-members-list-item.active {
        border-radius: 0rem;
    }

    .sb-group-container {
        background: var(--color-333) !important;
    }

    .batch-row .batch-name {
        color: var(--gray-800);
    }

    .ui.styled.accordion .accordion .active.title,
    .ui.styled.accordion .accordion .title:hover,
    .ui.styled.accordion .active.title,
    .ui.styled.accordion .title:hover {
        color: rgba(255, 255, 255, .75);
    }

    .sb-color-gray-400 {
        color: var(--gray-800) !important;
    }

    .notification-bell {
        box-shadow: none;
    }

    .back-btn-container.cc-player__btn-back {
        background: var(--sbt-compt-bg) !important;
    }

    .cc-player__content-header {
        background: var(--color-444);
    }

    .content-video__player__details {
        background: transparent;
    }
    .player-fullscreen .content-video__player__details {
        background: var(--color-444);
    }
    .content-metadeta,
    .ui.styled.accordion,
    .ui.styled.accordion .accordion,
    .sb-accordion-content.sb-bg-color-white,
    .sb-groups-members-card,
    .sb-toc-credits .sbaccordion__panel-header,
    .sb-toc-credits .sbaccordion__panel-content {
        background: var(--color-333) !important;
    }

    .sb-back-header {
        .sb-back-btn-panel {
            background: var(--color-222) !important;
        }
    }

    .training-relevant .sb-color-gray-400 {
        color: var(--white) !important;
    }

    .sbchapter__item.disabled-toc-card {
        background-color: var(--gray-200) !important;

        .sbchapter__item__title {
            opacity: 1;
        }

        .sbchapter__item__score {
            color: var(--black) !important;
        }
    }

    .cc-player {
        .ui.info.message {
            background-color: var(--color-222) !important;
            color: var(--primary-color) !important;
            box-shadow: none;
        }
    }

    //buttons 

    .sb-btn-primary,
    .sb-btn-link-primary,
    .sb-btn-secondary {

        &:hover,
        &:active,
        &.active {
            color: var(--black);
        }
    }

    .sb-btn-primary {
        .icon-svg--white {
            fill: var(--black);
        }
    }

    .sb-btn-outline-primary,
    .sb-btn-outline-secondary {
        background-color: var(--sbt-filter-bar-bg);

        &:hover,
        &:active,
        &.active {
            color: var(--black);
        }
    }

    .sb-btn-outline-primary {

        &:hover,
        &:active,
        &.active {
            background-color: var(--primary-800);
            i.icon{
                color: var(--black) !important;
            }
        }
    }

    .sb-btn-outline-secondary {

        &:hover,
        &:active,
        &.active {
            background-color: var(--secondary-400);
        }
    }

    .sb-btn-link-gray {

        &:hover,
        &:active,
        &.active {
            background-color: var(--primary-color);
            color: var(--black);
        }
    }

    .sb-btn-link-primary,
    .sb-btn-link-gray {

        &:hover,
        &:active,
        &.active {
            .icon-svg--primary {
                fill: var(--black);
            }
        }
    }

    .batch-deatils__button .sb-btn-disabled {
        color: var(--color-444);

        &:hover {
            color: var(--color-444) !important;
        }
    }

    .sb-btn-square,
    .content-video__player__tools .sb-btn-square {
        color: var(--white);

        &:hover {
            color: var(--black);
        }
    }

    app-faq .sb-btn-round.sb-btn-link-primary {
        background-color: inherit !important;

        &:hover,
        &:active,
        &.active {
            background-color: var(--primary-color) !important;
            color: var(--black);
        }
    }

    .ui.styled.accordion .title:hover {
        color: var(--primary-color);
    }

    .sb-toc-child-item {
        background: var(--cc-chapter-bg);
    }

    .help-page__header.sb-bg-color-white {
        background: var(--cc-accordion-panel-header-bg) !important;
    }

    .help-page__content .panel {

        .panel-heading,
        .panel-interact {
            background: var(--cc-accordion-panel-header-bg);
        }
    }

    .sb-toc-child-item .toc-child-item,
    .sb-toc-child-item .child-content-padding,
    .side-toc-content.chapter-box .toc-child-item,
    .side-toc-content.chapter-box .child-content-padding {
        background: var(--color-222) !important;
    }

    .cc-player__list {
        background-color: var(--color-222);
    }

    .sb-course-details .sb-course-details__info .sb-bg-color-white {
        background: var(--color-333) !important;
    }

    .sb-course-details .certified-course__certificate {
        background-color: var(--color-222) !important;
    }

    .sb-bg-color-white.certified-course__progress {
        background: var(--sbt-compt-bg) !important;
    }

    // Pdf Player
    sunbird-pdf-player .sunbird-pdf-palyer-container,
    sunbird-epub-player .sunbird-epub-container {
        .sb-pdf-main-header .sb-player-header {
            background: var(--sbt-compt-bg);
            z-index: 1;
            position: relative;

            .player-icon {
                background: var(--black) !important;
            }
        }

    }

    // player header
    sb-player-header .sb-player-header {
        background: var(--sbt-compt-bg) !important;
        z-index: 1;
        position: relative;

        .icon_rotate {
            img {
                filter: invert(1);
            }
        }

        .navigation-arrows {
            background-color: var(--white);
            border-color: unset !important;
        }

        .paginate.left,
        .paginate {
            i {
                background-color: var(--black);
            }
        }

        .paginate.left:hover i {
            background: var(--black);
        }

    }

    // Hamburger menu for pdf, epub, player etc
    sb-player-side-menu-icon {
        #overlay-button span {
            background: var(--white) !important;

            &:before,
            &:after {
                background: var(--white) !important;
            }
        }

        input[type=checkbox]:checked~#overlay-button {

            span,
            &:hover span {
                background: 0 0 !important;
            }

            span:before {
                background: var(--black) !important;
            }

            &:hover span:before {
                background: var(--white) !important;
            }

            span:after {
                background: var(--black) !important;
            }

            &:hover span:after {
                background: var(--white) !important;
            }
        }
    }

    .navBlock {
        background: var(--color-222) !important;

        ul li {
            background: var(--color-222) !important;
            color: var(--white) !important;

            .player-icon {
                background: var(--white) !important;
            }

            &:hover {
                color: var(--black) !important;
                background: var(--gray-0) !important;

                .player-icon {
                    background: var(--black) !important;
                }
            }
        }
    }

    .navBlock .player-nav-unit {
        color: var(--black) !important;
    }

    .sb-player-header__panel .player-zoom-btns__zoombtn {
        color: var(--white) !important;

        &:hover {
            color: var(--black) !important;
        }
    }

    .sb-pdf-reading-status {
        color: var(--black) !important;
        background: var(--primary-color) !important;

        span {
            background: var(--black) !important;
        }
    }

    sui-multi-select.ui.selection.dropdown,
    sui-select.ui.selection.dropdown {
        background: var(--sb-dropdown-menu-bg) !important;
    }

    .ui.selection.dropdown .menu>.item {
        color: var(--ui-dropdown-menu-selected-item);
    }

    .ui.selection.dropdown .menu>.item:hover {
        background: var(--primary-color);
        color: var(--black);
    }

    .ui.multiple.dropdown .label {
        background: var(--color-222);
        color: var(--white);
    }

    .ui.dimmer {
        background-color: rgba(var(--rc-rgba-black), 0.5);
    }

    .training-modules__title .sb-btn.sb-btn-outline-primary,
    .forum-btn {
        img {
            filter: invert(1);
        }

        &:hover {
            img {
                filter: unset;
            }
        }
    }

    .content-header__buttons {
        .sb-btn.sb-btn-normal.sb-btn-outline-primary {
            &:hover {
                img.mr-4.pt-2 {
                    filter: unset;
                }
            }

            img.mr-4.pt-2 {
                filter: invert(1);
            }
        }
    }

    app-loader {
        .ui.icon.message {
            background: var(--color-444);
        }

        .notched.circle.loading.icon {
            color: var(--white) !important;
        }

        .content {

            .header,
            p {
                color: var(--white) !important;
            }
        }
    }

    .course-complete-para,
    .content-metadeta__title {
        color: var(--white) !important;
    }

    .sb-onboard__container {
        background: var(--color-333);
    }

    .help-page__header.sb-bg-color-white,
    .sbt-header-menu-bar {
        background: var(--color-222) !important;
    }

    .content-metadeta__title {
        color: var(--white);
    }

    .sb-md-container {
        background: var(--color-333) !important;
    }


    .sbaccordion__panel-content .heading,
    .data-labels,
    .ui.selection.dropdown .menu>.message {
        color: var(--white);
    }

    sb-card-hover.card-hover .action-item {
        .sb-btn-grow {
            color: var(--black) !important;

            .icon-svg svg.icon {
                filter: invert(1) !important;
            }
        }
    }

    .add-adminrole__content {
        background: var(--sbt-compt-bg) !important;
    }

    //   Data tables

    table.dataTable thead th,
    .sb-table tbody td {
        background-color: var(--gray);
        color: var(--white);
    }

    .dataTables_wrapper {
        label {
            color: var(--white);
        }

        .dataTables_length select {
            color: var(--white);
            background-color: var(--gray);
        }

        .dataTables_info {
            color: var(--white);
        }

        .dataTables_paginate .paginate_button {
            color: var(--white) !important;

            &.current {
                color: var(--white) !important;
                background-color: #585858;
                background: linear-gradient(to bottom, #585858 0%, #111 100%);
            }
        }
    }

    // Date picker
    .md-drppicker {
        background: var(--color-444);
        color: var(--white);

        .ranges ul li button {
            &[disabled] {
                opacity: .6;
            }

            color: var(--white);
        }

        .calendar-table {
            background: var(--color-444);
            border-color: var(--color-444);
        }

        td.available.prev,
        th.available.prev,
        td.available.next,
        th.available.next {
            filter: invert(1);
        }

        .btn {
            color: var(--gray);
        }
    }

    table.dataTable.no-footer {
        background: var(--primary);
        border: 1px solid var(--black);

        thead th {
            background-color: var(--primary) !important;
            color: var(--black);
        }

        tbody tr {
            background-color: var(--color-444);
            color: var(--white);

            &:nth-child(odd) {
                background-color: var(--color-333) !important;
            }
        }
    }

    .field>label,
    .inline.fields>label,
    .ui.modal .ui.radio.checkbox .box,
    .ui.radio.checkbox label {
        color: var(--black);
    }
    .sb-btn-secondary, .sb-btn-primary {
        color: var(--sb-btn-default-color);
    }
}