#login-page,
#register-page,
#lost-pwd-page,
#user-confirm-page,
#reset-pwd-page {
    --body-bg-color: #FAFAFA;
 
    --text-heading: #070E1F;
    --text-sub-heading: #070E1F;
    --text-link-color: #3F29CC;
    --text-link-hover-color: #5831F5;
    --text-link-active-color: #94B4FF;
    --text-link-focus-color: #5E4DFF;
 
    --form-input-focus-color: #F27A82;
    --form-input-bg-color: #FFFFFF;
    --form-input-border-color: #79859F;
    --form-input-invalid-color: #BA1122;
    --form-input-text-color: #070E1F;
    --form-input-label-color: #4F5870;
    --form-input-label-invalid-color: #BA1122;
    --checkbox-border-color: #4F5870;
    --checkbox-active-color: #F27A82;
    --checkbox-icon-color: #FFFFFF;
 
    --toast-banner-bg-color: #D2FADF;
    --toast-banner-font-color: #013D14;
 
    --submit-btn-bg-color: #BA1122;
    --submit-btn-border-color: #BA1122;
    --submit-btn-text-color: #FFFFFF;
    --submit-btn-focus-color: #BA1122;
 
    background-color: var(--body-bg-color)!important;
    input:not([type="checkbox"]) {
        background-color: var(--form-input-bg-color)!important;
        border-color: var(--form-input-border-color)!important;
        color: var(--form-input-text-color)!important;
    }
    input.invalid {
        border-color: var(--form-input-invalid-color)!important;
    }
 
    .form-input-label {
        color: var(--form-input-label-color)!important;
    }
 
    .invalid .form-input-label {
        color: var(--form-input-label-invalid-color)!important;
    }
 
    .fieldset:focus-within .form-input-label {
        color: var(--form-input-focus-color)!important;
    }
 
    input:focus {
        outline-color: var(--form-input-focus-color)!important;
    }
 
    div:has(> input[type="checkbox"]) {
        background-color: var(--form-input-bg-color)!important;
        border-color: var(--checkbox-border-color)!important;
    }
 
    div:has(> input[type="checkbox"]:checked) {
        background-color: var(--checkbox-active-color)!important;
        border-color: var(--checkbox-active-color)!important;
 
        wc-icon {
            color: var(--checkbox-icon-color)!important;
        }
    }
 
    .text-link,a {
        color: var(--text-link-color)!important;
    }
 
    .text-link:active {
        color: var(--text-link-active-color)!important;
    }
 
    .text-link:focus,
    a:focus {
        outline-color: var(--text-link-focus-color)!important;
    }
    .text-link:hover {
        color: var(--text-link-hover-color)!important;
    }
 
    legend .title {
        color: var(--text-heading)!important;
    }
 
    .calendar-info *:not(a) {
        color: var(--text-sub-heading)!important;
    }
 
    wc-info-banner {
        .banner {
            background: var(--toast-banner-bg-color)!important;
            color: var(--toast-banner-font-color)!important;
        }
    }
    button[type="submit"] {
        background: var(--submit-btn-bg-color)!important;
        border-color: var(--submit-btn-border-color)!important;
        color: var(--submit-btn-text-color)!important;
    }
    button[type="submit"]:focus {
        outline-color: var(--submit-btn-focus-color)!important;
    }
}

app-desktop-theme-2024,
app-mobile-theme-2024 {
    --header-bg-color: #fff;
    --content-bg-color: #FAFAFA;
    --footer-bg-color: #fff;
 
    --btn-bg-color: #F27A82;
    --btn-font-color: #FFF;
    --btn-bg-hover-color: #F27A82;
    --btn-font-hover-color: #FFF;
 
    --border-line-color: #C4CBDE;
 
    --notification-toast-error-bg-color: #ffb8b8;
 
    --focus-color: #F27A82;
 
    --text-link-color: #252d42;
    --text-link-hover-color: #F27A82;
    --text-color: #070e1f;
 
    --sidebar-menu-font-color: #252b37;
    --sidebar-bg-color: #fff;
    --sidebar-menu-hover-bg-color: #F27A82;
    --sidebar-menu-hover-font-color: #fff;
    --sidebar-menu-inactive-color: #C4CBDE;
    --sidebar-menu-active-bg-color: #BA1122;
    --sidebar-menu-active-font-color: #fff;
    --sidebar-qna-tab-btn-bg-color: #fff;
    --sidebar-qna-tab-btn-font-color: #252D42;
    --sidebar-qna-tab-btn-active-bg-color: #EBEDF5;
    --sidebar-qna-tab-btn-active-font-color: #070E1F;
 
    --sidebar-download-tab-list-item-bg-color: #fff;
    --sidebar-download-tab-lsit-item-border-color: #E1E5F0;
    --sidebar-download-tab-list-item-hover-bg-color: #fff;
    --sidebar-download-tab-lsit-item-hover-border-color: #ABB4CC;
    --sidebar-download-tab-list-item-font-color: #070e1f;
    --sidebar-download-tab-list-item-sub-title-font-color: #606a85;
 
    --sidebar-mobile-download-tab-list-item-bg-color: #fff;
    --sidebar-mobile-download-tab-lsit-item-border-color: #E1E5F0;
    --sidebar-mobile-download-tab-list-item-font-color: #070e1f;
    --sidebar-mobile-download-tab-list-item-sub-title-font-color: #606a85;
 
    --sidebar-menu-mobile-active-bg-color: #BA1122;
    --sidebar-menu-mobile-active-icon-color: #fff;
    --sidebar-menu-mobile-active-font-color: #252b37;
    --sidebar-sub-menu-bg-color: #fff;
    --sidebar-sub-menu-font-color: #252b37;
    --sidebar-sub-menu-active-bg-color: #e6ecfa;
    --sidebar-sub-menu-active-font-color: #252b37;
    --sidebar-tooltip-bg-color: #252d42;
    --sidebar-tooltip-font-color: #c5cce0;
 
    --player-control-btn-bg-color: transparent;
    --player-control-btn-font-color: #252D42;
    --player-control-btn-hover-bg-color: #EBEDF5;
    --player-control-btn-hover-font-color: #070E1F;
    --player-control-volume-bg-color: #e1e5f0;
    --player-control-volume-tracker-color: #c5cce0;
    --player-control-volume-handle-color: #BA1122;
    --player-control-volume-level-color: #F27A82;
    --player-control-progress-tracker-bg-color: #C5CCE0;
    --player-control-progress-tracker-level-color: #F27A82;
    --player-control-progress-tracker-handle-color: #BA1122;
    --player-control-porgress-time-line-bg-color: #E1E5F0;
 
    --slider-navigation-btn-bg-color: transparent;
    --slider-navigation-btn-font-color: #070e1f;
 
    --footer-slider-bg-color: #f5f8ff;
    --footer-slider-color: #C4CBDE;
    --footer-slider-active-color: #F27A82;
    --footer-slider-nav-btn-bg-color: transparent;
    --footer-slider-nav-btn-hover-bg-color: transparent;
    --footer-slider-nav-btn-font-color: #070E1F;
    --footer-slider-nav-btn-hover-font-color: #070E1F;
 
    a:not(.documents-tab-list-item) {
        color: var(--text-link-color)!important;
    }
 
    a:not(.documents-tab-list-item):hover {
        color: var(--text-link-hover-color)!important;
    }
 
    *:not(
    wc-button,
    wc-button *,
    app-tooltip *,
    .menu-item *,
    app-documents-window *,
    app-documents-tab-window *,
    wc-icon,
    a
    ){
        color: var(--text-color)!important;
    }
 
    wc-button:focus,
    a:focus {
        outline-color: var(--focus-color)!important;
    }
 
    wc-button,
    .qna-join-btn,
    app-qna-window:not(*){
        background: var(--btn-bg-color)!important;
        color: var(--btn-font-color)!important;
    }
 
    wc-button:hover,
   .qna-join-btn:hover {
        background: var(--btn-bg-hover-color)!important;
        color: var(--btn-font-hover-color)!important;
    }
 
    .presentation__wrapper--controls-area {
        wc-button {
            background: var(--slider-navigation-btn-bg-color)!important;
            color: var(--slider-navigation-btn-font-color)!important;
        }
    }
 
    app-desktop-header header,
    app-mobile-header > div {
        border-color: var(--border-line-color)!important;
        background-color: var(--header-bg-color)!important;
    }
 
    .presentation-area-container,
    .presentation-area__wrapper {
        background-color: var(--content-bg-color)!important;
    }
 
    .tab-view__wrapper {
        border-color: var(--border-line-color);
 
        .tab-list {
            background-color: var(--sidebar-bg-color)!important;
 
            .tab-list-item.active {
                wc-icon {
                    background-color: var(--sidebar-menu-mobile-active-bg-color)!important;
                    color: var(--sidebar-menu-mobile-active-icon-color)!important;
                }
 
                .title {
                    color: var(--sidebar-menu-mobile-active-font-color)!important;
                }
            }
 
            .sub-tab-menu__wrapper {
                background-color: var(--sidebar-sub-menu-bg-color)!important;
                .sub-menu-list-item {
                    background-color: var(--sidebar-sub-menu-bg-color)!important;
                    color: var(--sidebar-sub-menu-font-color)!important;
 
                    wc-icon, * {
                        background-color: var(--sidebar-sub-menu-bg-color)!important;
                        color: var(--sidebar-sub-menu-font-color)!important;
                    }
                }
 
                .sub-menu-list-item.active {
                    background-color: var(--sidebar-sub-menu-active-bg-color)!important;
                    color: var(--sidebar-sub-menu-active-font-color)!important;
 
                    wc-icon, * {
                        background-color: var(--sidebar-sub-menu-active-bg-color)!important;
                        color: var(--sidebar-sub-menu-active-font-color)!important;
                    }
                }
            }
 
            .tab-list-item:not(.active) {
                wc-icon {
                    color: var(--sidebar-menu-font-color)!important;
                }
 
                .title {
                    color: var(--sidebar-menu-font-color)!important;
                }
            }
        }
    }
 
    .tabmenu--list {
        background-color: var(--sidebar-bg-color)!important;
 
        .menu-item.active {
            background-color: var(--sidebar-menu-active-bg-color)!important;
            border-right-color: var(--sidebar-menu-active-bg-color)!important;
            color: var(--sidebar-menu-active-font-color)!important;
 
            .label {
                color: var(--sidebar-menu-active-font-color)!important;
            }
        }
 
        .menu-item:not(.active),
        .leave-space {
            color: var(--sidebar-menu-font-color)!important;
            border-right-color: var(--sidebar-menu-inactive-color)!important;
 
            .label {
                color: var(--sidebar-menu-font-color)!important;
            }
        }
 
        .menu-item:not(.active):hover {
            background-color: var(--sidebar-menu-hover-bg-color)!important;
            color: var(--sidebar-menu-hover-font-color)!important;
 
            .label {
                color: var(--sidebar-menu-hover-font-color)!important;
            }
        }
 
        app-tooltip {
            .tooltip-message {
                background-color: var(--sidebar-tooltip-bg-color)!important;
                color: var(--sidebar-tooltip-font-color)!important;
            }
            .tooltip-message:before {
                border-bottom-color:  var(--sidebar-tooltip-bg-color)!important;
                border-left-color:  var(--sidebar-tooltip-bg-color)!important;
            }
        }
    }
    app-qna-window {
        wc-button {
            background: var(--sidebar-qna-tab-btn-bg-color)!important;
            color: var(--sidebar-qna-tab-btn-font-color)!important;
        }
        wc-button:hover {
            background: var(--sidebar-qna-tab-btn-active-bg-color)!important;
            color: var(--sidebar-qna-tab-btn-active-font-color)!important;
        }
    }
 
    app-live-controls,
    app-replay-controls,
    app-live-qna-controls {
        .volume-slider__wrapper {
            background-color: var(--player-control-volume-bg-color)!important;
 
            .slider-tracker {
                background-color: var(--player-control-volume-tracker-color)!important;
 
                .slider-tracker--level-indicator {
                    background-color: var(--player-control-volume-level-color)!important;
                }
 
                .slider-tracker--handler {
                    border-color: var(--player-control-volume-handle-color)!important;
                }
            }
 
            wc-button{
                background-color: var(--player-control-volume-bg-color)!important;
                color: var(--player-control-btn-font-color)!important;
            }
 
            wc-button:hover {
                background-color: var(--player-control-volume-bg-color)!important;
                color: var(--player-control-btn-hover-font-color)!important;
            }
 
        }
 
        .replay-slider__wrapper {
            .replay-slider-tracker {
                background: var(--player-control-progress-tracker-bg-color)!important
            }
 
            .replay-slider-level-indicator {
                background-color: var(--player-control-progress-tracker-level-color)!important;
            }
 
            .replay-slider-thumb {
                border-color: var(--player-control-progress-tracker-handle-color)!important
            }
 
            .time-line-info {
                background-color: var(--player-control-porgress-time-line-bg-color)!important;
            }
        }
 
        wc-button {
            background-color: var(--player-control-btn-bg-color)!important;
            color: var(--player-control-btn-font-color)!important;
        }
 
        wc-button:hover {
            background: var(--player-control-btn-hover-bg-color)!important;
            color: var(--player-control-btn-hover-font-color)!important;
        }
    }
 
    app-documents-window {
        a {
            background-color: var(--sidebar-download-tab-list-item-bg-color)!important;
            border-color: var(--sidebar-download-tab-lsit-item-border-color)!important;
 
            wc-icon,.title {
                color: var(--sidebar-download-tab-list-item-font-color)!important;
            }
            .info {
                color: var(--sidebar-download-tab-list-item-sub-title-font-color)!important;
            }
        }
        a:hover {
            background-color: var(--sidebar-download-tab-list-item-hover-bg-color)!important;
            border-color: var(--sidebar-download-tab-lsit-item-hover-border-color)!important;
        }
    }
 
    app-documents-tab-window {
        a {
            background-color: var(--sidebar-mobile-download-tab-list-item-bg-color)!important;
            border-color: var(--sidebar-mobile-download-tab-lsit-item-border-color)!important;
 
            wc-icon,.title {
                color: var(--sidebar-mobile-download-tab-list-item-font-color)!important;
            }
            .info {
                color: var(--sidebar-mobile-download-tab-list-item-sub-title-font-color)!important;
            }
        }
    }
 
    app-2024-slider > div {
        background-color: var(--footer-slider-bg-color)!important;
 
        .active-slide {
            border-color: var(--footer-slider-active-color)!important;
        }
 
        wc-button {
            background-color: var(--footer-slider-nav-btn-bg-color)!important;
            color: var(--footer-slider-nav-btn-font-color)!important;
        }
 
        wc-button:hover {
            background-color: var(--footer-slider-nav-btn-hover-bg-color)!important;
            color: var(--footer-slider-nav-btn-hover-font-color)!important;
        }
        .swiper-slide:not(.active-slide) > img {
            border-color: var(--footer-slider-color)!important;
        }
    }
 
    app-banner-item > .error {
        background-color: var(--notification-toast-error-bg-color)!important;
    }
 
    .desktop-footer__wrapper {
        border-color: var(--border-line-color)!important;
        background-color: var(--footer-bg-color)!important;
    }
}