/*@font-face {
    font-family: 'OPTIMA';
    src: url('../fonts/OPTIMA.TTF') format('truetype'), url('../fonts/OPTIMA_B.ttf') format('truetype'), url('../fonts/Optima-Bold.ttf') format('truetype');
}*/

:root {
    /*Main Colors*/
    --mainColor: #0E508B;
    --secondaryColor: #F6921E;
    --pageHeaderTextColor: #000000;
    --buttonText: #fff;
    --textWhiteColor: #fff;
    --textBlackColor: #00000;
    /*Tab navigation*/
    --tabBorderBottom: #2982da;
    --tabBackgroundColor: transparent;
    --tabTextColor: #2f4050;
    --personalDetailPropertyTitle: #555;
    --personalDetailProperty: #656d78;
    /*Blue button*/
    --blueButtonColor: #034da1;
    --blueButtonText: #fff;
    /*Change password modal*/
    --inputTextColor: #676a6c;
    /*Domain signin*/
    --signinTextColor: #0E508B;
    --domainTextColor: #444;
    --domainPara: #848484;
    --signinBackgroundCard: #fff;
    --forgotPassword: #828282;
    --colorInputLabelblack: #676a6c;
    --signinBtnColor: #0E508B;
    --signinBtnTextColor: #fff;
    --signinLanguageText: #2f4050;
    --signinRightsideBackground: #0E508B;
    /*reset password*/
    --resetBtnColor: #0E508B;
    --resetBtnTextColor: #fff;
    /*domain signin - language dropdown*/
    --languageDropdownSelectedBackground: #007bff;
    --languageDropdownSelectedText: #fff;
    --languageDropdownBackground: #fff;
    --languageDropdownText: #000;
    /*footer*/
    --footerBack: #0E508B;
    --footerTextColor: #F6921E;
    /*sidenav*/
    --sidenavBack: #0E508B;
    --sidenavColor: #fff;
    --sidenavHover: #F6921E;
    --sidenavHoverLeftborder: #F6921E;
    --sidenavActive: #354052;
    /*--sideNavBarHoverColor: #F6921E;
    --sideNavBarSecondMenuBackgroundColor: #354052;
    --sideNavBarSecondMenuHoverBackgroundColor: #F6921E;*/
    /*Top bar*/
    --topBarText: #fff;
    --topBarBackground: #0E508B;
    --btnBlueBackground: #034da1;
    --btnNormalColor: #999c9e;
    --dropdownText: #4c4848;
    --dropdownLanguageText: #000;
    --dropdownLanguageBackground: #fff;
    --dropdownLanguageBackgroundSelected: #007bff;
    --appSearchBorder: #ccd1d9;
    --progressBarBackgroundColor: #3cc480;
    --progressBarTextColor: #fff;
    /*Label notification*/
    --emailNotification: #f8ac59;
    --emailNotificationText: #FFFFFF;
    /*Notification icon label*/
    --labelColor: #4665ff;
    --otpFormExpiredColor: #ff0000;
    /*landing page*/
    --HeroTitle: #444444;
    --landingSearchBack: #a8d4fb;
    --mainColorIcon: invert(84%) sepia(98%) saturate(3481%) hue-rotate(197deg) brightness(83%) contrast(89%);
    --navIconFilter: invert(59%) sepia(1%) saturate(1700%) hue-rotate(6deg) brightness(85%) contrast(91%);
    --headerIconFilter: invert(74%) sepia(5%) saturate(29%) hue-rotate(340deg) brightness(99%) contrast(90%);
    --progressBarBackgroundColor: #3cc480;
    --signinTextColorupdated: #505050;
    --signinformcontrolcolor: #6d6d6d;
    --pageLoarderFilter: brightness(72%) contrast(300%) hue-rotate(26deg) saturate(64%);
}



/*body {
    font-family: "OPTIMA" !important;
}*/

/*Loader*/
/*.loader-wrapper {
    fill: var(--mainColor) !important;
    color: var(--mainColor) !important;
    background: var(--mainColor) !important;
    accent-color: var(--mainColor) !important;
}*/

/*My profile*/
.btn-default, .btn-primary {
    color: var(--buttonText) !important;
    background-color: var(--mainColor) !important;
    border-color: var(--mainColor) !important;
}

.profile-name-role .user-name, .profile-name-role .user-role {
    color: var(--pageHeaderTextColor) !important;
}

.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
    border-bottom: 2px solid var(--tabBorderBottom) !important;
    background-color: var(--tabBackgroundColor) !important;
    color: var(--tabTextColor) !important
}

.display-properties .property-title {
    color: var(--personalDetailPropertyTitle) !important;
}

.display-properties .property {
    color: var(--personalDetailProperty) !important;
}

.section-actions .btn-primary {
    color: var(--blueButtonText) !important;
    background-color: var(--mainColor) !important;
    border-color: var(--mainColor) !important;
}


/*change password modal, edit modal*/
.modal-dialog .modal-content .modal-body {
    color: var(--inputTextColor) !important;
}



/*Domain signIn*/
#form-control1, .form-control1 {
    color: var(--signinTextColorupdated) !important;
}

#designationDropdown {
    color: var(--colorInputLabelblack) !important;
}

.sign-in-title.selected {
    border-bottom: 2px solid var(--signinBtnColor) !important;
    color: var(--signinBtnColor) !important;
}

/*.sign-in-title:hover {
    color: var(--signinBtnColor) !important;
}*/

/*.text.text-large.w3-red.sign-in-title.w3-red {
    color: var(--signinBtnColor) !important;
}

.text.text-large.w3-red.sign-in-title {
    color: var(--colorInputLabelblack) !important;
}*/

.progreeslvl, .progreespoint {
    color: var(--te) !important;
}

.wel1 {
    color: var(--signinTextColor) !important;
}

.wel {
    color: var(--domainTextColor) !important;
}

.para {
    color: var(--domainPara) !important;
}

.wrapper1 {
    background-color: var(--signinBackgroundCard) !important;
    color: var(--colorInputLabelblack) !important;
}

.forgot {
    color: var(--forgotPassword) !important;
    text-align: center;
}

.input-control .input-submit {
    background-color: var(--signinBtnColor) !important;
    color: var(--signinBtnTextColor) !important;
}

    .input-control .input-submit:hover {
        background-color: var(--signinBtnColor) !important;
        color: var(--signinBtnColor) !important;
        border: 1px solid var(--signinBtnColor) !important;
    }

#edit-user-details .input-control .input-submit:hover {
    background-color: transparent !important;
}

/*#btn-help {*/
/*border: 1px solid var(--signinBtnTextColor) !important;*/
/*color: var(--pageHeaderTextColor) !important;
}

.sidenav_bottom_sec #btn-help {
    color: #fff !important;
}*/

#page-wrapper.non-profile-page .language-bar .bootstrap-select button.btn {
    color: var(--signinLanguageText) !important;
    background-color: transparent !important;
}

.language-bar .bootstrap-select button.btn {
    background-color: #2f4050 !important;
    background: var(--secondaryColor) !important;
    border-color: #2f4050 !important;
    color: var(--signinLanguageText) !important;
}

.rightimg {
    background: var(--signinRightsideBackground) !important;
}

.domain_signin_background {
    background-color: var(--signinRightsideBackground) !important;
}

.language-barnew-container {
    background-color: var(--signinRightsideBackground) !important;
}

#login_form .form-control:focus, .single-line:focus {
    border-color: var(--mainColor) !important;
}

/*#otp-form-expired {
    color: var(--otpFormExpiredColor) !important;
}*/

/*reset password*/
.loginbtn {
    background: var(--resetBtnColor) !important;
    color: var(--resetBtnTextColor) !important;
}

#resendOTPBtn {
    color: var(--mainColor) !important;
}

#SignInWithOTP #resendOTPBtn.loginbtn {
    color: var(--mainColor) !important;
}

/*domain signin - language dropdown*/
.language-bar li.selected {
    background-color: var(--languageDropdownSelectedBackground) !important;
}

    .language-bar li.selected a {
        color: var(--languageDropdownSelectedText) !important;
    }

.language-bar ul li a {
    color: var(--languageDropdownText) !important;
}

.language-bar ul li {
    background: var(--languageDropdownBackground) !important;
}

.language-bar .bootstrap-select.btn-group .dropdown-menu li:hover {
    background-color: var(--languageDropdownSelectedBackground) !important;
    color: var(--languageDropdownSelectedText) !important;
}



/*footer*/
#contactUS {
    background: var(--footerBack) !important;
    border-top: 5px solid var(--secondaryColor) !important;
}

#copyright {
    background: var(--footerBack) !important;
    color: var(--buttonText) !important;
}

.footer-top a {
    color: var(--footerTextColor) !important;
}

.signinFooterContainerResponsive a, .signin_footer_mobile a {
    color: var(--secondaryColor) !important;
}
/*sidenav*/
#pullTOPmenu .nav > li > a:hover {
    color: var(--mainColor) !important;
}

.nav.metismenu > li:active {
    border-left: 4px solid var(--sideNavBarHoverColor) !important;
}

/*.metismenu a {
    background-color: var(--sidenavBack) !important;
}*/

.fixed-nav #wrapper {
    background-color: var(--sidenavBack) !important;
}

/*#pullTOPmenu .nav > li > a {
    color: var(--sidenavColor) !important;
}*/

#pullTOPmenu .nav > li.active {
    border-left: 4px solid var(--sidenavHoverLeftborder) !important;
    background: #fff !important;
}

/*#pullTOPmenu .navbar-default .nav > li > a:hover, .navbar-default .nav > li > a:active, .navbar-default .nav > li > a:focus {
    background-color: var(--sidenavHover) !important;
    color: var(--buttonText) !important;
}*/

#pullTOPmenu .nav > li.active > a {
    /*color: var(--buttonText) !important;*/
    background-color: var(--mainColor) !important;
}

#pullTOPmenu .nav > li > a {
    border-top: 0px solid var(--sidenavBack) !important;
}

/*Header (top bar)*/
.btn-primary, .btn-default {
    color: var(--topBarText) !important;
    background-color: var(--topBarBackground) !important;
    border-color: var(--topBarBackground) !important;
}

/*ul.nav.navbar-top-links.navbar-right li.dropdown:hover {
    background-color: var(--topBarBackground) !important;
}*/

#insidemvcHEADER .nav.navbar-right > li.dropdown > a:hover .header_icons {
    filter: var(--mainColorIcon) !important;
}

.count-info .label {
    background-color: var(--mainColor) !important;
}

#insidemvcHEADER .nav > li > a.support-link:hover {
    background-color: var(--mainColor) !important;
    color: var(--topBarText) !important;
}

#insidemvcHEADER .nav > li > a.support-link {
    color: var(--btnNormalColor) !important;
}

.progbar {
    background-color: var(--progressBarBackgroundColor) !important;
    background-image: none !important;
}

#insidemvcHEADER .navbar-right .topprogressbar .progress .progress-bar {
    color: var(--progressBarTextColor) !important;
}

/*.dropdown-menu li > a {
    color: var(--dropdownText) !important;
}*/

.language-bar ul li a {
    color: var(--dropdownLanguageText) !important;
}

.language-bar ul li {
    background: var(--dropdownLanguageBackground) !important;
}

.language-bar li.selected {
    background-color: var(--dropdownLanguageBackgroundSelected) !important;
    color: var(--topBarText) !important;
}

    .language-bar li.selected a {
        color: var(--topBarText) !important;
    }

.language-bar .bootstrap-select.btn-group .dropdown-menu li:hover {
    background-color: var(--dropdownLanguageBackgroundSelected) !important;
    color: var(--topBarText) !important;
}

    .language-bar .bootstrap-select.btn-group .dropdown-menu li:hover a {
        color: var(--topBarText) !important;
    }

#app-search {
    border: 1px solid var(--appSearchBorder) !important;
}

.label-warning, .badge-warning {
    background-color: var(--emailNotification) !important;
    color: var(--emailNotificationText) !important;
}

.label-primary, .badge-primary {
    background-color: var(--labelColor) !important;
    color: var(--emailNotificationText) !important;
}



/*gelp sidenav*/

.project_login_btn, .project_login_btn:hover, .project_login_btn:active, .project_login_btn:focus {
    background-color: var(--mainColor) !important;
    color: white !important;
}


/*landing page*/
.watsan_gelp_hero_title {
    color: var(--HeroTitle) !important;
}

.watsan_gelp_hero_subtitle {
    color: var(--HeroTitle) !important;
}

.hero_watsan_gelp_proj_des {
    background-color: var(--mainColor) !important;
}

.course_cat_blacktext {
    color: var(--pageHeaderTextColor) !important;
}

.course_cat_projtext {
    color: var(--mainColor) !important;
}

.LandingPageCourseSearch {
    background-color: var(--landingSearchBack) !important;
    color: var(--mainColor) !important;
}

.PageColordCardBg {
    background-color: var(--mainColor) !important;
}

.LandingPageColordCardNo {
    color: var(--mainColor) !important;
}

.partnership_projectname {
    color: var(--mainColor) !important;
}

.partnership_project_info {
    color: var(--HeroTitle) !important;
}

.form-control {
    color: var(--textBlackColor) !important;
}


/*#pullTOPmenu .nav > li > ul > li > a {
    background: radial-gradient(var(--sideNavBarSecondMenuBackgroundColor), var(--sideNavBarSecondMenuBackgroundColor)) !important;
    background-color: var(--sideNavBarSecondMenuBackgroundColor) !important;*/
    /*background: #354052;*/
/*}

#pullTOPmenu .nav > li > ul > li > a:active {
    background: radial-gradient(var(--sideNavBarSecondMenuHoverBackgroundColor), var(--sideNavBarSecondMenuHoverBackgroundColor)) !important;
    background-color: var(--sideNavBarSecondMenuHoverBackgroundColor) !important;
}*/

/*Orange Blue Theme Responsive*/

/*.sidenav_bottom_sec a {
    font-size: 13px !important;
}
*/
.language-bar .bootstrap-select.btn-group .dropdown-toggle .filter-option {
    font-size: 13px !important;
}

.manageTenantResources-lableOr {
    color: #6b6b6b;
    font-size: 14px;
}

#designationDropdown {
    border-bottom: 2px solid #c1c1c1;
    border-radius: 0;
    margin-bottom: 12px;
    padding-left: 0px;
    appearance: auto;
}

#Email-error {
    color: #ff0000 !important;
}

/*Header icons position*/

@media only screen and (min-device-width: 1024px) {
    .language-barnew-container {
        background-color: #F65A5B;
    }
}


/*sidenav*/
/*.sidenav_bottom_sec {
    background-color: var(--secondaryColor) !important;
}*/

#page-wrapper.non-profile-page .language-bar .bootstrap-select button.btn {
    background-color: white !important;
}

#page-wrapper.profile-page .language-bar .bootstrap-select button.btn {
    background-color: transparent !important;
}

.sidenav_bottom_sec .dropdown-menu > li > a {
    /* background-color: #C1C7CD; */
    background-color: transparent !important;
}

.no-touch .dropdown-menu li > a:hover,
.no-touch .dropdown-menu li > a:focus,
.no-touch .dropdown-menu li > a:active {
    color: #262626 !important;
    background-color: #f5f5f5 !important;
}

.sidenav_bottom_sec a {
    background-color: transparent !important;
}

.sidenav_bottom_sec a {
    font-size: 18px !important;
}

#mainNAVNAV #pullTOPmenu .nav > li.currentpg > a::before {
    background-color: var(--mainColor) !important;
}

#pullTOPmenu .nav > li.currentpg > a {
    color: var(--mainColor) !important;
}

#pullTOPmenu .nav > li.currentpg > a .nav-icon-images {
    filter: var(--mainColorIcon) !important;
}

/*#mainNAVNAV .metismenu {
    background-color: #0E508B;
}*/

.myacc_font a {
    color: #343a3b !important;
}

.progress-bar {
    color: var(--buttonText) !important;
}

.forLIA li a:hover {
    /*background: #f08f8f !important;*/
    background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%) !important;
}

/*Header*/
#insidemvcHEADER .nav.navbar-top-links a {
    color: #999c9e !important;
}


/*Media Queries for top Header*/

.domain_signin_background_container .sign-in-left-side-container .image-conatiner {
    /*height: 60px;*/
    height: 54px;
    /*aspect-ratio: 142 / 27;
    width: 284px;*/
}

.language-bar .bootstrap-select button.btn {
    color: #fff !important;
}

.LandingPageCopyRight span {
    color: #fff !important;
}

.modal-header .close {
    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

.navbar-default {
    background-image: linear-gradient(to bottom, #0E508B 0%, #0E508B 100%) !important;
}

#insidemvcHEADER .navbar-header .mainlogo { /*Navbar Image*/
    padding-left: 0px !important;
    padding: 0px !important;
    float: left !important;
    max-width: 218px !important;
    max-height: 44px !important;
}

.non-profile-page #copyright {
    border-top: 5px solid var(--secondaryColor) !important;
}

.sign-in-with-efass:hover {
    border: 1px solid var(--mainColor) !important;
}

.sign-in-with-efass {
    border-radius:5px;
}

.inter-icon {
    filter: var(--mainColorIcon) !important;
}

.EmailDomainPart {
    color: var(--mainColor);
}

.tenent-search {
    border: 0px solid #ccc !important;
    border-bottom: 1px solid #c1c1c1 !important;
}

.inter-icon-signup {
    filter: var(--mainColorIcon) !important;
}

.inter-icon-signup {
    filter: var(--mainColorIcon) !important;
}

@media only screen and (max-device-width: 460px) {
    #insidemvcHEADER #toggleNavigationBtn {
        padding-top:25px !important;
    }
}

.loginbtn:hover {
    border: 1px solid var(--mainColor) !important;
    color: var(--mainColor) !important;
}

.landing_page_aboutus {
    padding-top: 17px !important;
}

.non-profile-page .nav-bar a:hover {
    background-color: var(--mainColor) !important;
}

[type=radio]:checked + label:after {
    background: var(--mainColor) !important;
}

.ForgotPasswordOTPBtn, .ResetBtn {
    background: var(--mainColor) !important;
}

    .ForgotPasswordOTPBtn:hover, .ResetBtn:hover {
        background-color: transparent !important;
        border: 1px solid var(--mainColor) !important;
        color: var(--mainColor) !important;
    }

    .ForgotPasswordOTPBtn:focus {
        color: var(--mainColor) !important;
        background-color: transparent !important;
        border: 1px solid var(--mainColor) !important;
    }

.ForgotPasswordResendOTPBtn {
    color: var(--mainColor) !important;
}

#edit-user-details .forgot {
    color: var(--mainColor) !important;
}

#otp-form .twoF_submit {
    background-color: var(--mainColor) !important;
}

    #otp-form .twoF_submit:hover {
        background-color: transparent !important;
        border: 1px solid var(--mainColor) !important;
        color: var(--mainColor) !important;
    }

    #otp-form .twoF_submit:focus {
        color: var(--mainColor) !important;
        background-color: transparent !important;
        border: 1px solid var(--mainColor);
    }

.ResetBtn:focus {
    color: var(--mainColor) !important;
    background-color: transparent !important;
    border: 1px solid var(--mainColor);
}

.twoFAresendOTPBtn {
    color: var(--mainColor) !important;
}

.ForgotPasswordWith2FA .form-control {
    color: var(--signinformcontrolcolor) !important;
}

.input-group-addon img {
    filter: var(--mainColorIcon) !important;
}

input[type="radio"] {
    accent-color: var(--mainColor);
}

#pullTOPmenu .nav > li > a:hover .nav-icon-images {
    filter: var(--mainColorIcon) !important;
}

.nav-icon-images {
    filter: var(--navIconFilter) !important;
}

#pullTOPmenu .nav > li > a:hover .nav-toggle-images {
    filter: var(--mainColorIcon) !important;
}

.language_dropdown_arrow li:hover {
    color: var(--mainColor);
    background-color: transparent;
}

    .sidenav_bottom_sec li:hover a {
        color: var(--mainColor);
    }

    .sidenav_bottom_sec li:hover img {
        filter: var(--mainColorIcon) !important;
    }

.sidenav_bottom_sec .language_dropdown_arrow .proIMGstyle:hover {
    color: var(--mainColor);
}

.sidenav_bottom_sec .language_dropdown_arrow:hover {
    color: #676a6c !important;
}

    .sidenav_bottom_sec .language_dropdown_arrow:hover a {
        color: var(--mainColor);
    }

    .sidenav_bottom_sec .language_dropdown_arrow:hover img {
        filter: var(--mainColorIcon) !important;
    }

.myprofiletext .nav-icon-images {
    filter: var(--mainColorIcon) !important;
}

.logout_sidenav .myprofiletext {
    color: var(--mainColor);
}


    .progreeslvl {
        color: var(--mainColor);
    }


.header_icons, .menu_header {
    filter: var(--headerIconFilter);
}

@media only screen and (min-width: 767px) {
    #insidemvcHEADER .nav.navbar-right > li.dropdown > a:hover .header_icons {
        filter: none;
    }
}

@media only screen and (max-width: 767px) {
    #mainNAVNAV .progress .progress-bar {
        background-color: var(--mainColor) !important;
    }
}

.continue-with-microssoft-account:hover {
    border: 1px solid var(--mainColor) !important;
}

.progbar {
    background-color: var(--progressBarBackgroundColor) !important;
}

#insidemvcHEADER .progpresenatge .progbar {
    background-color: var(--mainColor) !important;
}

#edit-user-details #SignInWithOTP #OTPInputForm .OTPInputFormInputContainer img {
    filter: var(--mainColorIcon) !important;
}

#edit-user-details #reset_paswd_2fa .ForgotPasswordWith2FA .OTPFormInputContainer-2fa img {
    filter: var(--mainColorIcon) !important;
}

#edit-user-details #sign_in_with_2fa #otp-form .twofa-OTPFormInputContainer img {
    filter: var(--mainColorIcon) !important;
}

.input-field-container-with-2fa .input-icon.inter-icon-signup-pw {
    filter: var(--mainColorIcon) !important;
}

#btnUploadImage {
    background-color: transparent !important;
    border: 1px solid var(--mainColor) !important;
}

.inter-icon-signup-pw {
    filter: var(--mainColorIcon) !important;
}

.signup_multiple_upload_btn {
    border: 1px solid var(--mainColor) !important;
    color: var(--mainColor) !important;
}

.signup_upload_btn {
    border: 1px solid var(--mainColor) !important;
    color: var(--mainColor) !important;
}

#angularModal .close_icon {
    color: var(--mainColor) !important;
}

#angularModal .learner-header h3 {
    color: var(--mainColor) !important;
}

.signin-pure-form #sign-up .form-control1:focus {
    border-color: var(--mainColor) !important;
}

.pure-signup-card-body #searchInput:focus {
    border-color: var(--mainColor) !important;
}

.multiple-signup-inner #organization-hierarchy2 #searchInput:focus {
    border-color: var(--mainColor) !important;
}

.multiple-signup-inner #designationDropdown:focus {
    border-bottom: 1px solid var(--mainColor) !important;
    border-top: 0px solid transparent !important;
    border-left: 0px solid transparent !important;
    border-right: 0px solid transparent !important;
}

.tenent-selection:focus {
    border-color: var(--mainColor)   !important;
}

.se-pre-con img {
    filter: var(--pageLoarderFilter) !important;
}

.dot-pulse span {
    background-color: var(--mainColor);
}

.mobile-header-menu-icon {
    color: var(--pageHeaderTextColor) !important;
}

.input-control .sign-in-with-efass.eadvisor-btn {
    border-color: var(--mainColor) !important;
    background-color: var(--mainColor) !important;
    color: var(--resetBtnTextColor) !important;
}

.input-control .sign-in-with-efass.eadvisor-btn:hover {
    border-color: var(--mainColor) !important;
    background-color: var(--resetBtnTextColor) !important;
    color: var(--mainColor) !important;
}

.input-control .sign-in-with-efass.eadvisor-btn .input-submit1.input-submit-btn-text {
    color: var(--resetBtnTextColor) !important;
}

.input-control .sign-in-with-efass.eadvisor-btn:hover .input-submit1.input-submit-btn-text {
    color: var(--mainColor) !important;
}

.notification-bell-icon {
    filter: var(--mainColorIcon) !important;
}

.mark-read-btn, .mark-all-read {
    color: var(--mainColor) !important;
}

.notification-dropdown-wrapper .mark-all-read {
    color: var(--mainColor) !important;
}

.notification-dropdown-wrapper .notif-item:hover {
    color: var(--mainColor) !important;
}

.notification-dropdown-wrapper .notif-item:hover .notif-time {
    color: var(--mainColor) !important;
}

.mark-read-btn.mark-read-hover-btn:hover {
    color: var(--mainColor) !important;
}

.mark-read-btn.mark-read-hover-btn {
    color: var(--mainColor) !important;
}