:root {
    /*Main Colors*/
    --mainColor: #F65A5B;
    --pageHeaderTextColor: #000000;
    --buttonText: #fff;
    /*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: #676a6c;
    --domainTextColor: #444;
    --domainPara: #848484;
    --signinBackgroundCard: #fff;
    --forgotPassword: #828282;
    --colorInputLabelblack: #676a6c;
    --signinBtnColor: #F65A5B;
    --signinBtnColorHoverBackgroundColor: #fffff;
    --signinBtnTextColor: #fff;
    --signinLanguageText: #2f4050;
    --signinRightsideBackground: #F65A5B;
    /*reset password*/
    --resetBtnColor: #F65A5B;
    --resetBtnTextColor: #fff;
    /*domain signin - language dropdown*/
    --languageDropdownSelectedBackground: #007bff;
    --languageDropdownSelectedText: #fff;
    --languageDropdownBackground: #fff;
    --languageDropdownText: #000;
    /*footer*/
    --footerBack: #212529;
    /*sidenav*/
    --sidenavBack: #000;
    --sidenavColor: #a7b1c2;
    --sidenavHover: #2f3949;
    --sidenavHoverLeftborder: #f82f30;
    --sidenavActive: #354052;
    /*Top bar*/
    --topBarText: #fff;
    --topBarBackground: #f65a5b;
    --btnBlueBackground: #034da1;
    --btnNormalColor: #999c9e;
    --dropdownText: #4c4848;
    --dropdownLanguageText: #000;
    --dropdownLanguageBackground: #fff;
    --dropdownLanguageBackgroundSelected: #007bff;
    --appSearchBorder: #ccd1d9;
    /*Label notification*/
    --emailNotification: #f8ac59;
    --emailNotificationText: #FFFFFF;
    /*Notification icon label*/
    --labelColor: #4665ff;
    --otpFormExpiredColor: #ff0000;
    /*landing page*/
    --HeroTitle: #444444;
    --landingSearchBack: #a8d4fb;
    --mainColorIcon: invert(54%) sepia(78%) saturate(4460%) hue-rotate(329deg) brightness(111%) contrast(93%);
    --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;
    --signinformcontrolcolor: #6d6d6d;
}



/*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(--signinTextColor) !important;
}

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

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

.non-profile-page .language-bar .bootstrap-select.btn-group .dropdown-toggle .filter-option {
    font-family: Montserrat-regular,Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
}

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

.input-control .input-submit {
    background-color: var(--signinBtnColor) !important;
    color: var(--signinBtnTextColor) !important;
    /*border-radius: 40px !important;*/
}

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

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

/*#btn-help {
    color: var(--pageHeaderTextColor) !important;*/
    /*display: contents !important;*/
/*}

.sidenav_bottom_sec #btn-help {
    color: var(--sidenavColor) !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: var(--signinLanguageText) !important;
    background: var(--signinLanguageText) !important;
    border-color: var(--signinLanguageText) !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(--mainColor) !important;
}

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

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

.fixed-nav #wrapper {
    background-color: var(--sidenavBack) !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: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;
}

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

/*Gelp Responsive*/

.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*/

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

/*sidenav*/
/*.sidenav_bottom_sec {
    background-color: #2f4050 !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;
}

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

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

.progress-bar {
    color: var(--buttonText) !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 !important;
    aspect-ratio: 142 / 27 !important;
    width: 284px !important;
}

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

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

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

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

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

@media only screen and (min-width:760px) and (max-device-width: 770px) {
    #insidemvcHEADER .navbar-right {
        left: 41% !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;
}

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

.ForgotPasswordWith2FA .form-control {
    color: var(--signinformcontrolcolor) !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;
}

#insidemvcHEADER .navbar-header .mainlogo {
    padding-left: 0px !important;
    padding: 0px !important;
    float: left !important;
    max-width: 218px !important;
    height: 38px;
    max-height: 75px;
}

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

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

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

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

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

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

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

.tenant-domain {
    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;
}

.heading {
    display: flex;
    justify-content: center;
    align-items: center;
    /* flex-direction: column; */
    width: 245px !important;
    margin: 0 auto;
}

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