EDU/Website/NEducation/Content/assets/css/main-grammar.css

:root{
    --main-color-1: #053561;
    --main-color-2a: #ff5a4d;
    --main-color-2b: #ff5a4d;
    --main-color-3a: #00c2f4;
    --main-color-3b: #15d2f2;
    --main-color-4a: #8dd22e;
    --main-color-4b: #9de42b;
    --main-color-5: #f6bd00;
    --main-color-6: #474747;
    --main-color-7: #4c87ed;
    --main-color-8: #7ac60c;  
    --icon-img: url(../img/icon.png);
    --icon-flashcard-img: url(../img/icon-flashcard.png);
    --home-bg-img: url(../img/home-bg.png);
    --grammar-logo-img: url(../img/grammar-logo.png);

    --color-default-bg: #15C39A;
    --color-default-text: #15C39A;
    --max-width: 1470px;

    --color-text-black: #231F20;
    --color-text-gray: #AFAFAF;

    --color-button-red: #ff5a4d;
    --color-button-green: #7AC60C;
    --color-button-orange: #FFB020;
    --color-button-gray: #DDDDDD;
}
@font-face{
 font-family: opensanslight;
 src: url(../fonts/opensans-light.ttf);
}
@font-face{
 font-family: opensansbold;
 src: url(../fonts/opensans-bold.ttf);
 font-weight:800;
}
@font-face{
 font-family: opensansregular;
 src: url(../fonts/opensans-regular.ttf);
 font-weight:400;
}
@font-face{
 font-family: opensansitalic;
 src: url(../fonts/opensans-italic.ttf);
 font-weight:400;
}
@font-face{
 font-family: opensanssemibold;
 src: url(../fonts/opensans-semibold.ttf);
 font-weight:600;
}
@font-face{
 font-family: opensanssemibolditalic;
 src: url(../fonts/opensans-semibolditalic.ttf);
 font-weight:600;
}
@font-face{
 font-family: RobotoBold;
 src: url(../fonts/roboto-bold.ttf);
}
@font-face{
 font-family: uvnvan;
 src: url(../fonts/uvnvan.ttf);
}
@font-face{
 font-family: uvnvanbold;
 src: url(../fonts/uvnvan-bold.ttf);
}
@font-face{
 font-family: svnsteady;
 src: url(../fonts/svn-steady.otf);
}
@font-face{
 font-family: sfuregular;
 src: url(../fonts/sfu-regular.ttf);
}
@font-face{
 font-family: sfumedium;
 src: url(../fonts/sfu-medium.ttf);
}
@font-face{
 font-family: amazone;
 src: url(../fonts/amazone.ttf);
}

@font-face{
 font-family: RobotoBold;
 src: url(../fonts/roboto-bold.ttf);
}

@font-face{
 font-family: robotoitalic;
 src: url(../fonts/Roboto-Italic.ttf);
}
@font-face{
 font-family: robotolight;
 src: url(../fonts/Roboto-Light.ttf);
}
@font-face{
 font-family: robotomedium;
 src: url(../fonts/Roboto-Medium.ttf);
}
@font-face{
 font-family: robotosemibold;
 src: url(../fonts/Roboto-Medium.ttf);
}
@font-face{
 font-family: robotoregular;
 src: url(../fonts/Roboto-Regular.ttf);
}


html{
    height: 100%;
}

body{
    font-family: opensansregular;
    color: #3c3c3c;
    font-size: 14px;
    height: 100%;
    padding-right: 0!important;
}
b, strong{
    font-weight: 100;
    font-family: opensanssemibold;
}
a:focus{
    outline: none;
}
.body-container{
    min-height: 800px;
}
.reset-password{
    max-width: 455px;
    margin: 100px auto;
    border: 1px solid #ededed;
    border-radius: 4px;
    padding: 30px 30px 0px;
}
.reset-password-title{
    color: var(--main-color-6);
    font-family: opensanssemibold;
    font-size: 16px;
    text-align: center;
    text-transform: uppercase;
}
.new-pass{
    height: 45px;
    margin-top: 20px;
    margin-bottom: 10px;
}
.creat-new-pass{
    width: 100%;
    font-family: opensansbold;
    font-size: 15px;
    color: #ffffff;
    border-radius: 4px;
    border: 1px solid #f7b30a;
    background-color: #f6bd00;
    height: 45px;
    margin-top: 5px;
    cursor: default;
    transition: all 0.2s ease;
    text-transform: uppercase;
    margin-bottom: 20px;
}
/* Modal LOGIN, REGISTER, RESET PASSWORD */
#loginModal .modal-dialog, #forgotPasswordModal .modal-dialog, #registerModal .modal-dialog, #activeCodeModal .modal-dialog{
    max-width: 455px;
}
#loginModal button:focus{
    outline: 0;
}

#registerModal button:focus{
    outline: 0;
}

#forgotPasswordModal button:focus, #activeCodeModal button:focus{
    outline: 0;
}

.formAuth{
    max-width: 555px;

}

.formAuth .modal-content{
    border-bottom: 3px solid #f6bd00;
    min-height: 350px;
}

.loginModalHeader{
    height: 60px;
    background: var(--main-color-5);
    border-radius: 5px 5px 0px 0px;
    text-align: center;
    position: relative;
}
.loginModalHeader img{
    width: 105px;
}
.helperMiddel{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.loginModalHeader img{
    vertical-align: middle;
}

.closeModalLogin{
    background: var(--icon-img) -221px -53px;
    background-repeat: no-repeat;
    width: 26px;
    height: 26px;
    top: 13px;
    right: 13px;
    display: inline-block;
    float: right;
    position: absolute;
    cursor: pointer;
}

.arrowLoginModal{
    border: #fff solid;
    border-top: 15px var(--main-color-5) solid;
    border-right-width: 10px;
    border-left-width: 10px;
    width: 0px;
    margin: auto;
}

.loginModalTitle{
    color: var(--main-color-6);
    font-family: opensanssemibold;
    font-size: 16px;
    text-align: center;
    text-transform: uppercase;
}

.loginModalBody{
    padding-top: 25px;
}

.coverLoginModal{
    max-width: 470px;
    padding: 0px 50px;
    margin: auto;
}

.loginInputText{
    width: 100%;
    border: 0px solid #cccecf;
    border-bottom-width: 1px;
    padding: 3px 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 13px;
    outline: 0px;
    color: #231f20;
    transition: all 0.2s;
    padding-left: 0px;
}

.loginInputText::-webkit-input-placeholder{
    color: #bcbcbc;
    font-size: 13px;
}
#forgotPasswordModal .loginInputText::-webkit-input-placeholder, 
#activeCodeModal .loginInputText::-webkit-input-placeholder,
#registerModal .loginInputText::-webkit-input-placeholder{
    text-transform: none;
}

.loginRememberPassword input{
    display: none;
}

.loginRememberPassword span{
    display: inline-block;
    background: #d1d3d4;
    width: 13px;
    height: 13px;
    margin-left: 5px;
    margin-right: 8px;
    vertical-align: -1px;
}

.loginRememberPassword{
    cursor: pointer;
    font-size: 13px;
    font-family: opensansregular;
    font-weight: normal;
    color: #4b4b4b;
    transition: all 0.2s;
}

.loginRememberPassword input:checked + span{
    background: var(--icon-img) 0px 0px;
}

.loginForgotPassword{
    font-size: 13px;
    font-family: opensansregular;
    color: var(--main-color-2a);
    float: right;
    cursor: pointer;
}

.loginForgotPassword:hover{
    color: var(--main-color-2b);
}

.loginForgotPassword span{
    display: inline-block;
    background: var(--icon-img) -13px 0px;
    width: 14px;
    height: 15px;
    margin-right: 7px;
    vertical-align: -2px;
}

.loginButtonSubmit{
    width: 100%;
    font-family: opensansbold;
    font-size: 15px;
    color: #c69904;
    border-radius: 4px;
    border: 1px solid #f7b30a;
    background-color: #f6bd00;
    height: 45px;
    margin-top: 5px;
    margin-bottom: 15px;
    cursor: default;
    transition: all 0.2s ease;
    text-transform: uppercase;
}

.loginButtonSubmit.loginSuccess{
    color: #ffffff;
    cursor: pointer;
}


.loginDontAccount{
    font-family: opensansregular;
    font-size: 13px;
    color: #4b4b4b;
}

.loginDontAccount a{
    color: var(--main-color-7);
}

.loginDontAccount a:hover{
    color: var(--main-color-7);
    text-decoration: none;
}

.loginOr{
    font-family: opensansbold;
    font-size: 11px;
    color: #a7a9ac;
    text-transform: uppercase;
    text-align: center;
    margin: 10px 0px;
}

.loginByGoogle{
    width: 100%;
    height: 45px;
    border-radius: 4px;
    background-color: #ffffff;
    border: 1px solid #ffc2bd;
    font-size: 14px;
    font-family: opensanssemibold;
    color: #ff5a4d;
    margin-bottom: 15px;
    transition: all 0.2s ease;
}


.loginByGoogle span{
    background: url(../img/icon.png) 0px -15px;
    display: inline-block;
    width: 33px;
    height: 33px;
    vertical-align: middle;
    margin-right: 11px;
}

.loginByFacebook{
    width: 100%;
    height: 50px;
    border-radius: 4px;
    border: 1px solid #175197;
    background-color: #074590;
    color: #fff;
    font-size: 14px;
    font-family: opensanssemibold;
    margin-bottom: 25px;
    transition: all 0.2s ease;
}

.loginByFacebook span{
    background: url(../img/icon.png) -35px -18px;
    display: inline-block;
    width: 28px;
    height: 28px;
    vertical-align: middle;
    margin-right: 8px;
}
.voca-commitment{
    font-size: 13px;
    font-family: opensansbold;
    text-align: center;
    color: #bcbec0;
    margin-bottom: 20px;
}
.loginCoverInputText{
    position: relative;
    margin-bottom: 10px;
}

.loginNameInputText{
    position: absolute;
    color: #bcbcbc;
    font-size: 13px;
    top: 15px;
    left: 0px;
    background-color: #fff;
    transition: all 0.3s ease;
    cursor: text;
    width: 100%;
}



.loginNameInputText.loginHasText{
    opacity: 0;
    z-index: -1;
}

.loginNameInputText.loginFocusInput{
    font-family: opensansregular;
    font-size: 11px;
    color: #4285f4;
    opacity: 1;
    z-index: 1;
    top: -10px;
}


.loginLineInputText{
    display: inline-block;
    width: 0%;
    height: 2px;
    background-color: #4285f4;
    position: absolute;
    top: 33px;
    transition: all 0.3s ease;
    transform: translate(-50%, 0%);
    left: 50%;
}

.loginCoverInputText .loginInputText:focus ~ .loginLineInputText{
    width: 100%;
}

.loginErrorInput{
    position: absolute;
    top: 15px;
    right: 0px;
}

.loginErrorInput p{
    background-color: #ffffff;
}

.loginErrorInput .loginIconError{
    display: inline-block;
    background: url(../img/icon.png) -149px -37px;
    width: 13px;
    height: 14px;
    vertical-align: -2px;
    margin-left: 6px;
    transition: all 0.2s ease;
}

.registerTitleFree{
    text-align: center;
    font-family: opensansregular;
    font-size: 13px;
    color: #4c87ed;
    margin-top: -10px;
}

.registerResetCaptcha{
    display: inline-block;
    background:  var(--icon-img) -46px 0px;
    width: 13px;
    height: 14px;
    margin-left: 3px;
    vertical-align: middle;
    cursor: pointer;
}

.registerCaptcha img{
    width: 130px;
    height: 30px;
}

.registerCoverInputCaptcha{
    width: calc(100% - 170px);
    display: inline-block;
}

.registerCaptcha{
    display: inline-block;
    float: right;
    margin-top: 5px;
}

.registerRule{
    color: var(--main-color-7);
}

.registerRule:hover{
    cursor: pointer;
    color: var(--main-color-7);
    text-decoration: none;
}

.registerAgreeVocaRule input{
    display: none;
}

.registerAgreeVocaRule .registerCheckboxAgree{
    display: inline-block;
    background: #d1d3d4;
    width: 13px;
    height: 13px;
    margin-left: 5px;
    margin-right: 8px;
    vertical-align: -1px;
}

.registerAgreeVocaRule{
    font-size: 14px;
    font-family: opensansregular;
    font-weight: normal;
    color: #4b4b4b;
    transition: all 0.2s;
}

.registerAgreeVocaRule input:checked + .registerCheckboxAgree{
    background: var(--icon-img) 0px 0px;
}

.registerButtonSubmit{
    width: 100%;
    font-family: opensansbold;
    font-size: 15px;
    color: #c69904;
    border-radius: 4px;
    border: 1px solid #f7b30a;
    background-color: #f6bd00;
    height: 45px;
    margin-top: 5px;
    cursor: default;
    transition: all 0.2s ease;
    text-transform: uppercase;
}

.registerByGoogle{
    width: 100%;
    max-width: 174px;
    height: 45px;
    border-radius: 4px;
    background-color: #ffffff;
    border: 1px solid #ffc2bd;
    font-size: 14px;
    font-family: opensanssemibold;
    color: #ff5a4d;
    margin-bottom: 15px;
    padding-right: 20px;
    transition: all 0.2s ease;
}

.registerByGoogle span{
    background: url(../img/icon.png) 0px -15px;
    display: inline-block;
    width: 33px;
    height: 33px;
    vertical-align: middle;
    margin-right: 20px;
}

.registerByFacebook{
    max-width: 174px;
    width: 100%;
    height: 45px;
    border-radius: 4px;
    border: 1px solid #175197;
    background-color: #074590;
    color: #fff;
    font-size: 14px;
    font-family: opensanssemibold;
    margin-bottom: 25px;
}

.registerByFacebook span{
    background: var(--icon-img) -35px -18px;
    display: inline-block;
    width: 28px;
    height: 28px;
    vertical-align: middle;
    margin-right: 20px;
}

.registerCheckSuccess{
    display: block;
    background: url(../img/icon.png) -29px -1px;
    width: 13px;
    height: 13px;
    position: absolute;
    right: 4px;
    bottom: 20px;
    opacity: 0;
    transition: all 0.2s ease;
}


.registerButtonSubmit.registerSuccess{
    color: #ffffff;
    cursor: pointer;
}


.forgotPasswordTitle, .activeCodeTitle{
    text-transform: none;
}

.forgotPasswordTitleDetail, .activeCodeTitleDetail{
    font-size: 13px;
    color: #4991ea;
    text-align: center;
    margin-top: -5px;
}

.forgotPasswordCaptcha img, .activeCodeCaptcha img{
    width: 130px;
    height: 30px;
}

.forgotPasswordCaptcha, .activeCodeCaptcha{
    display: inline-block;
    float: right;
    margin-top: 5px;
}

.forgotPasswordButtonSubmit, .activeCodeButtonSubmit{
    width: 100%;
    font-family: opensansbold;
    font-size: 15px;
    color: #c69904;
    border-radius: 4px;
    border: 1px solid #f7b30a;
    background-color: #f6bd00;
    height: 45px;
    margin-top: 20px;
    margin-bottom: 25px;
    cursor: default;
    transition: all 0.2s ease;
    text-transform: uppercase;
}

.forgotPasswordButtonSubmit.forgotPasswordSuccess, .activeCodeButtonSubmit.activeCodeSuccess{
    color: #ffffff;
    cursor: pointer;
}

#forgotPasswordSuccessModal .formAuth .modal-content, #acttiveCodeSuccessModal .formAuth .modal-content{
    min-height: 200px;
}

#forgotPasswordErrorModal .formAuth .modal-content, #activeCodeErrorModal .formAuth .modal-content{
    min-height: 250px;
}

.forgotPasswordResultTitle, .activeCodeResultTitle{
    font-family: opensansbold;
    font-size: 20px;
    text-align: center;
}

#forgotPasswordSuccessModal .forgotPasswordResultTitle, #activeCodeSuccessModal .activeCodeResultTitle{
    color: #7ac60c;
}

#forgotPasswordErrorModal .forgotPasswordResultTitle, #activeCodeErrorModal .activeCodeResultTitle{
    color: var(--main-color-2a);
}

#forgotPasswordSuccessModal .loginModalBody, #forgotPasswordErrorModal .loginModalBody,
#activeCodeSuccessModal .loginModalBody, #activeCodeErrorModal .loginModalBody{
    padding: 35px 0px;
}

.forgotPasswordResultDetail, .activeCodeResultDetail{
    font-family: opensansregular;
    font-size: 14px;
    margin-bottom: 15px;
    text-align: justify;
    text-align-last: center;
}

.forgotPasswordEnterAgain, .activeCodeEnterAgain{
    font-family: opensansregular;
    font-size: 16px;
    color: var(--main-color-7);
    text-align: center;
    cursor: pointer;
}

.forgotPasswordIconBack, .activeCodeIconBack{
    display: inline-block;
    background:  var(--icon-img) -46px 0px;
    width: 13px;
    height: 14px;
    margin-right: 7px;
    vertical-align: -1px;
}

.loginError{
    color: var(--main-color-2a);
    text-align: center;
    font-size: 11px;
}

.dontEnterEmail{
    display: none;
}

.dontEnterPassword{
    display: none;
}

.loginValidationError{
    display: none;
}
.error-msg{
    border: 1px solid #ff5a4d;
    border-radius: 4px;
    padding: 10px;
    font-size: 11px;
    margin-top: 20px;
    margin-bottom: 20px;
    color: #ff5a4d;
    background: #f4e4e4;
    display: none;
}
.error-msg strong{
    font-family: opensansbold;
}
.success-msg{
    border: 1px solid #b2dba1;
    border-radius: 4px;
    padding: 10px;
    font-size: 11px;
    margin-top: 20px;
    margin-bottom: 20px;
    color: #7ac60c;
    background: #ebfcca;
    display: none;
}
.success-msg strong{
    font-family: opensansbold;
}
.forgotPasswordDontEnterEmail, .forgotPasswordEmailInvalid, .forgotPasswordDontEnterCaptcha, .forgotPasswordCaptchaIncorrect, .loginEmailInvalid, .registerDontEnterName, .registerNameShort, .registerNameLong, .registerDontEnterEmail, .registerEmailInvalid, .registerDontEnterPassword, .registerPasswordShort, .registerPasswordLong, .registerDontEnterCaptcha, .registerCaptchaIncorrect, .registerDontConfirm, .registerEmailExist, .activeCodeDontEnterEmail, .activeCodeEmailInvalid, .activeCodeDontEnterCaptcha, .activeCodeCaptchaIncorrect{
    display: none;
}

/* End Modal LOGIN, REGISTER, RESET PASSWORD */

.main-container{
    background: #fff;
    min-height: 100%;
    float: left;
    width: 100%;
}

.header-container-library{
    height: 50px;
    width: 100%;
    background-color: #f6bd00;
    position: fixed;
    top: 0px;
    z-index: 1000;
}

.header-container-library-left{
    height: 50px;
    display: flex;
}

.header-container-library-icon-bar{
    font-size: 20px;
    color: #fff;
    margin: auto 0px;
    padding-left: 10px;
}
.header-container-library-icon-bar:hover{
    cursor: pointer;
}
.header-container-library-logo{
    margin: auto 15px;
    padding-top: 3px;
}
.header-container-library-logo img{
    width: 184px;
}
.header-container-library-logo span{
    background: var(--grammar-logo-img);
    width: 184px;
    height: 20px;
    display: inline-block;
}
.header-container-library-left .head-menu-item{
    display: inline-block;
    height: 30px;
    margin-top: 10px;
    text-align: center;
    line-height: 30px;
    min-width: 100px;
    padding: 0px 10px;
    color: #fff;
}
.header-container-library-left .head-menu-item:hover{
    text-decoration: none;
}
.header-container-library-left .head-menu-item:focus{
    text-decoration: none;
    outline: none;
}
.header-container-library-left .head-menu-item.head-menu-item-home{
    margin-left: 35px;
}
.header-container-library-left .head-menu-item.head-menu-item-active{
    background: #ebb502;
    border-radius: 2px;
    font-family: opensanssemibold;
}
.header-container-library-search{
    margin: auto 0px;
    width: 35%;
    position: relative;
    max-width: 500px;
}

.header-container-library-search input{
    width: 100%;
    height: 30px;
    outline: 0;
    border-radius: 2px;
    border: 0;
    padding-left: 10px;
    padding-right: 30px;
}

.header-container-library-search input::-webkit-input-placeholder{
    font-family: opensansregular;
    color: #37474f;
    opacity: 0.5;
}

.header-container-library-search input:focus{
    box-shadow: 0px 0px 2px 2px #053561;
}

.header-container-library-search span.glyphicon-search{
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translate(0, -50%);
    cursor: pointer;
    transition: 0.2s font-size ease;
    font-size: 15px;
    color: #3c3c3c;
}

.header-container-library-search span.glyphicon-search:hover{
    font-size: 17px;
}

.header-container-library-right{
    display: inline-flex;
    padding-top: 1px;
}

.header-container-library-notification, .header-container-library-me-coin, .header-container-library-mission{
    margin: auto 0px;
    position: relative;
    margin-right: 35px;
	
}

.header-container-library-me-coin{
    margin-right: 5px;
}

.header-container-library-me-coin span{
    font-size: 13px;
    color: #fff;
    font-family: opensansregular;
    vertical-align: 2px;
    text-decoration: none;
    display: inline-block;
    min-width: 20px;
    margin-left: 2px;
    margin-right: 7px;
    text-align: left;
    margin-top: -25px;
    opacity: 0;
}
.header-container-library-me-coin.coin-icon-active span{
    opacity: 1;
}
.header-container-library-me-coin a:hover, .header-container-library-me-coin a:focus{
    text-decoration: none;
}

.header-container-library-account{
    margin: 0px;
    position: relative;
    cursor: pointer;
    text-align: left;
    margin-left: -20px;
    padding: 5px 0px 10px;
   
}
.dropdown-avatar-menu.dropdown:hover .dropdown-menu{
    display: block;
}
.header-container-library-account a:hover, .header-container-library-account a:focus{
    text-decoration: none;
}

.header-container-library-notification-icon{
    background: url('../img/icon.svg?n=1') -0px -560px;
    width: 40px;
    height: 40px;
    cursor: pointer;
}
.notification-icon-active .header-container-library-notification-icon{
    background: url('../img/icon.svg?n=1') -0px -660px;
}
.header-container-library-notification-icon:hover{
    background: url('../img/icon.svg?n=1') -0px -660px;
}
.header-container-library-me-coin-icon{
    background: url('../img/icon.svg?n=1') -0px -610px;
    width: 40px;
    height: 40px;
    display: inline-block;
    vertical-align: -15px;

}
.header-container-library-me-coin.coin-icon-active .header-container-library-me-coin-icon{
    background: url('../img/icon.svg?n=1') -0px -710px;
}
.header-container-library-me-coin-icon:hover{
    background: url('../img/icon.svg?n=1') -0px -710px;
}
.header-container-library-mission-icon{
    display: none;
    background: url('../imgs/icon-bg-home.svg?n=1') -0px -540px;
    width: 31px;
    height: 31px;
    cursor: pointer;
}

.header-container-library-account-icon{
    background: var(--icon-img) -141px -61px;
    width: 28px;
    height: 28px;
}

.header-container-library-icon-number{
     position: absolute;
    display: inline-block;
    min-width: 14px;
    min-height: 14px;
    color: #fff;
    background-color: #ffbb00;
    border-radius: 50%;
    font-size: 10px;
    text-align: center;
    vertical-align: middle;
    font-family: opensanssemibold;
    width: 18px;
    height: 18px;
    line-height: 18px;
    top: 5px;
    right: -12px;
}
.header-container-library-mission-icon .header-container-library-icon-number{
    background-color: #ff5a4d;
}
.header-container-library-notification-icon .header-container-library-icon-number {
    display: none;
    background-color: #7AC60C;
}

.show-number-session .header-container-library-notification-icon .header-container-library-icon-number{
    display: block;
    
}

.header-container-library-account img{
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #fff;

}


.header-container-library-account-no-image{
    display: inline-block;
    width: 40px;
    height: 40px;
    border: solid 1px #fff;
    border-radius: 50%;
    background: #e23838;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    font-family: opensanssemibold;
    font-size: 23px;
    vertical-align: middle;
    line-height: 38px;
}

/* Header Search */

.header-search-container{
    border: solid 1px #4c87ed;
    background: #fff;
        position: absolute;
    top: 30px;
    width: 100%;
    padding: 20px 15px;
    display: none;
}

.header-search-show{
    display: block!important;
}

.header-search-hide{
    display: none!important;
}

.header-search-top-title{
    font-size: 25px;
    font-family: opensansregular;
    color: #000;
    text-align: center;
}

.header-search-list-cate{
    width: 100%;
    padding: 15px;
    padding-top: 5px;
    border: dotted 1px #ddd;
    display: inline-block;
    list-style-type: none;
}

.header-search-list-cate li a{
    display: inline-block;
    text-decoration: none;
    color: #6b6b6b;
    font-family: opensansbold;
    font-size: 14px;
    margin-top: 10px;
    padding: 10px 20px;
    background: #ededed;
    border-radius: 20px;
    width: 100%;
    transition: 0.2s all ease;
}

.header-search-list-cate li a:focus{
    text-decoration: none;
}

.header-search-list-cate li{
    width: 100%;
}

.header-search-list-cate li a:hover{
    background: #7ac60c;
    color: #fff;
}

.header-search-result-title{
        font-size: 14px;
    border-bottom: 1px solid #ededed;
    padding-bottom: 5px;
    margin-bottom: 20px;
}

.header-search-list-result{
    list-style-type: none;
    padding: 0px;
}

.header-search-list-result li a{
    display: inline-block;
    text-decoration: none;
    color: #6b6b6b;
    font-family: opensansbold;
    font-size: 14px;
    padding: 10px 20px;
    background: #ededed;
    border-radius: 20px;
    width: 100%;
    transition: 0.2s all ease;
}

.header-search-list-result li a:focus{
    text-decoration: none;
}

.header-search-list-result li a:hover{
    background: #7ac60c;
    color: #fff;
}

.header-search-list-result li{
    padding: 10px 0px;
    border-bottom: 1px dashed #ededed;
}

.header-search-result-all{
    display: inline-block;
    text-decoration: none;
    color: #fff;
    font-family: opensansbold;
    font-size: 14px;
    padding: 10px 20px;
    background: #7ac60c;
    border-radius: 20px;
    width: 100%;
    transition: 0.2s all ease;
    text-transform: uppercase;
    text-align: center;
}

.header-search-result-all:hover, .header-search-result-all:focus{
    background-color: #75ba24;
    text-decoration: none;
    color: #fff;
}

.header-search-result-all:active{
    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
}

.header-search-top-title-icon{
    display: inline-block;
    background: var(--icon-img) -249px -15px;
    width: 22px;
    height: 29px;
    margin-right: 6px;
}


/* END Header Search */

/**Begin task**/
.open>.dropdown-menu.task-menu{
    right: -78px;
    border-radius: 5px!important;
    position: absolute;
    top: 43px;
    max-width: 400px;
    left: auto;
    min-width: 400px;
    background: #fff;
}
.task-menu .tooltip-arrow{
    top: 0;
    right: 82px;
    border-bottom-color: #fff;
    border-width: 0px 10px 10px;
    margin-top: -5px;
    width: 20px;
    height: 10px;
    margin-top: -10px;
}
.task-menu .task-title{
    color: #4c87ed;
    font-size: 18px;
    font-family: opensanssemibold;
    margin-top: 10px;
    text-align: center;
    margin-bottom: 0px;
    text-transform: uppercase;
}
.task-line{
    display: inline-block;
    width: 100%;
    height: 3px;
    background: var(--icon-img);
    background-position: 0px -261px;
}
.task-menu a, .task-menu a:hover{
    text-decoration: none;
}
.task-review-group{
    min-height: 65px;
    margin-top: -5px;
    border-bottom: 1px solid #ddd;
    margin-bottom: -5px;
}
.task-review-group .task-icon{
    width: 45px;
    height: 45px;
    display: inline-block;
    float: left;
    margin-left: 20px;
    margin-top: 10px;
    margin-right: 10px;
    background: url(../img/icon.png);
    background-position: -797px -288px;
}
.task-review-group .task-chevron{
    width: 10px;
    height: 19px;
    display: inline-block;
    background: var(--icon-img);
    background-position: -895px -301px;
    margin-top: 24px;
    float: right;
    margin-right: 30px;
}
.task-review-group .task-content{
    font-size: 13px;
    color: #414042;
    line-height: 65px;
}
.task-review-group .task-content strong{
    font-weight: 100;
    font-family: opensanssemibold;
    color: #ff5a4d;
}

.task-improve-group{
    min-height: 65px;
    margin-bottom: -5px;
    border-radius: 5px;
}
.task-improve-group .task-icon{
    width: 45px;
    height: 45px;
    display: inline-block;
    float: left;
    margin-left: 20px;
    margin-top: 10px;
    margin-right: 10px;
    background: url(../img/icon.png);
    background-position: -844px -288px;
}
.task-improve-group .task-chevron{
    width: 10px;
    height: 19px;
    display: inline-block;
    background: var(--icon-img);
    background-position: -895px -301px;
    margin-top: 24px;
    float: right;
    margin-right: 30px;
}
.task-improve-group .task-content{
    font-size: 13px;
    color: #414042;
    line-height: 65px;
}
.task-improve-group .task-content strong{
    font-weight: 100;
    font-family: opensanssemibold;
    color: #7ac70c;
}
.no-task-icon{
    width: 45px;
    height: 47px;
    display: inline-block;
    background: #f00;
    margin-top: 40px;
    background: url(../img/icon.png);
    background-position: -520px -192px;
}
.no-task-content{
    text-align: center;
    font-size: 13px;
    color: #cfd0d1;
    margin-bottom: 20px;
}
/**End task**/

/** Begin Notification Menu **/
.open>.dropdown-menu.notification-menu{
    border-radius: 3px;
    position: absolute;
    top: 50px;
    right: -207px;
    left: auto;
    width: 400px;
    background: #fff;
    padding-bottom: 0px;
    min-height: 190px;
}

.open>.dropdown-menu.notification-menu.no-notification{
    border: 0px;
}

.notification-menu-tooltip-arrow{
    width: 20px;
    height: 10px;
    border: 10px solid transparent;
    border-width: 0px 10px 10px 10px;
    border-bottom: #fff 10px solid;
    position: absolute;
    bottom: -14px;
    left: 4px;
    z-index: 1001;
    display: none;
}

.header-container-library-notification.dropdown.open .notification-menu-tooltip-arrow{
    display: inline-block;
}

.notification-menu-header-title{
    font-family: opensanssemibold;
    font-size: 18px;
    color: #4c87ed;
    text-align: center;
    text-transform: uppercase;
    margin: auto;
}

.notification-menu-header{
    border-bottom: 2px solid #4C87ED;
    width: 100%;
    height: 50px;
    display: flex;
}

.notification-menu-body{
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

.notification-menu-body li{
    display: flex;
    width: 100%;
    height: 65px;
    padding: 0px 30px;

    border-bottom: 1px solid #e6e6e6;
}
.notification-menu-body li:hover{
    cursor: pointer;
}
.notification-menu-body li:nth-last-child(1){
    border-bottom: 0px;
}

.notification-menu-item-title{
    font-size: 13px;
    color: #414042;
    transition: 0.2s all ease;
    margin: auto 0px;
    padding: 0px 20px;
    width: calc(100% - 36px);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.notification-menu-body li:hover .notification-menu-item-title{
    color: #17acf1;
}

.notification-menu-left-icon{
    display: inline-block;
    background: var(--icon-img) -672px -222px;
    width: 30px;
    height: 30px;
    margin: auto 0px;
}

.notification-menu-right-icon{
    display: inline-block;
    background: #fff;
    width: 13px;
    height: 13px;
    border: 0px #777 solid;
    border-width: 2px 2px 0px 0px;
    transform: rotate(45deg);
    margin: auto 0px;
    transition: 0.2s all ease;
}

.notification-menu-body li:hover .notification-menu-right-icon{
    border-color: #17acf1
}

#modal-nofitication-detail .modal-dialog{
    width: 100%;
    max-width: 790px;
    padding: 20px;
    margin: 30px auto;
}

#modal-nofitication-detail .modal-content{
    padding: 20px 30px;
}

.notification-detail-title{
    font-family: opensansbold;
    font-size: 18px;
    color: #4991ea;
    text-align: center;
    max-width: 450px;
    margin: 10px auto 25px;
}

.notification-detail-body{
    max-width: 600px;
    margin: auto;
    padding: 30px 0px;
    border-top: 1px dashed #bdbfc1;
    font-size: 15px;
    color: #474747;
}

.notification-menu-no-notification p{
    font-family: opensansregular;
    font-size: 16px;
    color: #cfd0d1;
    text-align: center;
    margin-top: 10px;
}

.notification-menu-no-notification-icon{
    background: var(--icon-img) -600px -191px;
    width: 70px;
    height: 70px;
    margin: auto;
}

.notification-menu-no-notification{
    padding: 40px 0px;
}

.notification-main p:nth-child(1){
    margin: 0px;
}

/** End Notification Menu **/

.stairs-level-modal-close{
    position: absolute;
    display: inline-block;
    background: #c9c9c9;
    border-radius: 50%;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 26px;
    color: #fff;
    text-align: center;
    line-height: 1;
    padding: 0px 6px;
    width: 26px;
    height: 26px;
    z-index: 10;
}

.notification-main{
    position: relative;
    background: #ffffff;
    height: 30px;
}
.notification-main marquee{
    height: 30px;
    line-height: 30px;
}
.notification-main .close{
    background: gray;
    border-radius: 50%;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translate(0, -50%);
    width: 20px;
    height: 20px;
    text-align: center;
    font-size: 17px;
    line-height: 20px;
}


/** Begin left menu **/
.menu-left{
    --left-menu-color: #4c87ed;
}

.menu-left{
    position: fixed;
    top: 0px;
    left: 0px;
    background: #fff;
    width: 270px;
    z-index: -1;
    border: 1px solid #ddd;
}

.menu-left-top{
    width: 100%;
    height: 49px;
    background: var(--left-menu-color);
}

.menu-left-avatar{
    width: 28px;
    height: 28px;
    margin: auto 10px;
    border-radius: 14px;
    border: 1px #fff solid;
    overflow: hidden;
}

.menu-left-top a{
    display: flex;
    width: 100%;
    height: 100%;
}

.menu-left-avatar img{
    width: 100%;
    height: 100%;
}

.menu-left-name-user{
    font-family: opensanslight;
    font-size: 12px;
    color: #fff;
    margin: auto 0px;
    text-decoration: none;
}

.menu-left a:hover, .menu-left a:focus{
    text-decoration: none;
    outline: 0;
}

.menu-left-category{
    list-style-type: none;
    padding: 0px;
    padding-bottom: 30px;
}

.menu-left-category li{
    height: 40px;
    background: #fff;
    transition: 0.15s all ease;
}

.menu-left-category .set-sound-body li{
    margin-left: 50px;
}

.menu-left-category li:hover{
    background: var(--left-menu-color);
}

.menu-left-category li a{
    display: flex;
    padding-left: 15px;
    width: 100%;
    height: 100%;
}

.menu-left-category li a p{
    font-family: opensansregular;
    font-size: 13px;
    color: #3c3c3c;
    margin: auto 0px;
    width: calc(100% - 57px);
        text-transform: capitalize;
}

.menu-left-category li:hover a p{
    color: #ffffff;
}

.menu-left-category li a i{
    margin: auto 0px;
    margin-right: 10px;
    font-size: 14px;
    color: #3c3c3c;
    width: 20px;
    text-align: center;
}

.menu-left-category li:hover a i{
    color: #fff;
}

body.menu-open #close-menu-overlay {
    position: fixed;
    top: 0px;
    left: 270px;
    bottom: 0px;
    right: 0px;
    z-index: 100;
    cursor: default;
    display: block;
}

.menu-left-body{
    height: calc(100% - 49px);
}

.menu-left, .menu-left-cover{
    height: 100%;
}

body.menu-open{
    height: 100%;
}

.menu-left .header-container-library-account-no-image{
    width: 26px;
    height: 26px;
    border: 0px;
    border-radius: 13px;
}

.menu-left-category span.number-personal-library{
    background: #ffce0f;
    height: 15px;
    padding: 2px 5px;
    line-height: 11px;
    border-radius: 1px;
    font-size: 9px;
    color: #fff;
        margin: auto 0px;
    margin-right: 10px;
}

.menu-left-category span.number-voca-library{
    background: #4a90e2;
    height: 15px;
    padding: 2px 5px;
    line-height: 11px;
    border-radius: 1px;
    font-size: 9px;
    color: #fff;
        margin: auto 0px;
    margin-right: 10px;
}

.menu-left-category span.set-sound-icon{
    font-size: 18px;
    color: #3c3c3c;
        margin: auto 0px;
    margin-right: 10px;
    width: 20px;
    text-align: center;
}

.menu-left-category .set-sound-body .checked-sound-cover{
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1px solid #aaa;
    border-radius: 50%;
    margin: auto 10px auto 33px;
    position: relative;
}

.menu-left-category .set-sound-body .checked-sound-cover .checked-sound{
    background: #85cb21;
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.menu-open .fa-bars:before {
    content: "\f053";
}


/** End left menu **/
@media (max-width: 991px){
    .header-container-library-left .head-menu-item{
        display: none;
    }
}
@media (max-width: 590px){

    .header-container-library-notification, .header-container-library-me-coin, .header-container-library-mission{
        display: none;
    }

    .header-container-library-search {
        width: calc(100% - 220px);
    }

    
}

.header-container-library-button-login{
    font-family: opensanssemibold;
    font-size: 13px;
    display: inline-block;
    padding: 0px 10px;
    height: 30px;
    line-height: 28px;
    text-align: center;
    color: #3c2415;
    min-width: 90px;
    margin: 5px;
    border-radius: 2px;
    outline: 0;
}

.header-container-library-button-login:hover{
    text-decoration: none;
    outline: 0;
    color: #ffffff
}
.header-container-library-button-login:focus{
    text-decoration: none;
    outline: 0;
    color: #3c2415;
}

.header-container-library-button-register{
    font-family: opensanssemibold;
    font-size: 13px;
    border: 1px solid #fff;
    background: #fff;
    display: inline-block;
    padding: 0px 10px;
    height: 30px;
    line-height: 28px;
    text-align: center;
    color: #3c2415;
    min-width: 90px;
    margin: 5px;
    border-radius: 2px;
    outline: 0;
}
.header-container-library-button-register:hover, .header-container-library-button-register:focus{
    text-decoration: none;
    outline: 0;
    color: #3c2415;
}
/**begin footer**/
.footer-container{
    padding: 0px 15px;
    position: relative;
    background: #fff;
	border-top: 1px solid #efefef;
}

.footer-cover{
    max-width: var(--max-width);
    margin: auto;
    position: relative;
    padding: 10px 0px 70px;
}

.footer-title{
    margin: 35px 0px 0px;
    font-family: opensansbold;
    font-size: 16px;
    line-height: 22px;
    color: #414141;
    min-height: 44px;
}

.footer-container .footer-link{
    font-family: opensansregular;
    font-size: 13px;
    line-height: 21px;
    color: #414141;
    margin: 15px 0px 0px;
    display: block;
    text-decoration: none;
    outline: 0px;
}   
.footer-container .footer-link.footer-bold{
    font-family: opensanssemibold;
}

.footer-bottom{
    font-family: opensansregular;
    font-size: 12px;
    color: #414141;
    line-height: 38px;
    margin: 0px;
    text-align: center;
    border-top: 1px solid #C4C4C4;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
}
/**end footer**/
/**Begin hot line**/
.hotline{
    bottom: 0px;
    LEFT: 10px;
    position: fixed;
    width: 21%;
    z-index: 5;
}
.hotline-rotate {
    display: block;
    animation-name: hotline-rotate;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 12; 
    animation-iteration-count: 12;
    animation-duration: 0.7s;
    animation-direction: alternate;
    margin-right: 5px;
    
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

 @keyframes hotline-rotate {
      0% {
      opacity:1;
    }
    45% {
    opacity:1;
    }
    55% {
    transform: rotate(100deg);
    }
    100% {
    transform: rotate(100deg);
    }
    } 
    
/**End hot line**/
/*begin facebook chat*/
.facebook-chat-group{
    height: 35px;
    background: #7ac70c;
    width: 225px;
    padding-left: 10px;
    border-radius: 4px 4px 0px 0px;
    position: fixed;
    bottom: 0;right: 10px;
    margin-bottom: 0;
}
.facebook-chat-group:hover{
    cursor:pointer;
}
.facebook-chat-box{
    position: fixed; 
    bottom: -585px;
    right: 10px;
    z-index: 10;
}
.facebook-chat-box-top{
    width: 300px; 
    height: 35px;
    background: #7ac70c;
    border-radius: 4px 4px 0px 0px;
    padding-left: 10px;
}
.facebook-chat-box-hide{
    float: right;
    color: #fff;
    font-size: 20px;
    margin-top: 5px;
    margin-right: 10px;
}
.facebook-chat-box-hide:hover{
    cursor: pointer;
}
.facebook-support{
    float: right;
    margin-right: 90px;
    font-size: 16px;
    font-family: opensansbold;
    color: #fff;
    margin-top: 6px;
}
/*end facebook chat*/

.menu-open.modal-open .modal-backdrop{
    display: none;
}

/************************* New template *******************************/
.main-body-container{
    margin: auto;
    max-width: 1170px;
    box-shadow: 0 0 25px rgba(0,0,0,.04);
    background: #fff;
    border-radius: 10px;
}

.effect-product:hover{
    transition-duration: 0.2s!important;
    /*transform: translate3d(0, -3px, 0)!important;*/
    box-shadow: 0 5px 20px 1px rgba(0,0,0,0.15)!important;
}
.main-header-top{
    height: 30px;
    width: 100%;
    background: #000;
    padding: 0px 15px;
    overflow: hidden;
 
}
.main-cover {
    width: 100%;
    height: 100%;
    max-width: var(--max-width);
    margin: auto;
}
.main-header-top .left{
    float: left;
}

.main-header-top .right{
    float: right;
}

.main-header-top .left .link{
    font-size: 11px;
    color: #888;
    line-height: 30px;
    float: left;
    display: inline-block;
    height: 30px;
    text-decoration: none;
    margin: 0px 15px;
    font-family: opensanssemibold;
}

.main-header-top .left .link:first-child{
    margin-left: 0px;
    position: relative;
}

.main-header-top .left .link:first-child::after{
    content: "";
    display: inline-block;
    width: 1px;
    height: 13px;
    background: #888;
    position: absolute;
    top: 50%;
    right: 0px;
    transform: translate(15px, -50%);
}

.main-header-top .left .link.link-active{
    font-family: opensanssemibold;
    color: #fff;
}

.main-header-top .right .link{
    float: left;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    color: #888;
    font-size: 13px;
    margin: 0px 20px;
    text-decoration: none;
}

.main-header-top .right .link:last-child{
    margin-right: 0px;
}

.main-header-top .right .link.phone{
    font-family: opensansbold;
    color: #fff;
}

.main-header-top .right .link.language button.dropdown-toggle{
    border: 0px;
    outline: 0px;
    background: transparent;
    padding: 0px;
    height: 35px;
    line-height: 35px;
    border-radius: 0px;
    margin-top: -5px;
    text-shadow: none;
    box-shadow: none;
}

.main-header-top .right .link.language .icon-dropdown{
    font-size: 18px;
    color: #fff;
    vertical-align: middle;
    margin-left: 5px
}

.main-header-top .right .link .icon{
    margin-right: 3px;
    vertical-align: inherit;
}
.main-header{
    background: var(--color-default-bg);
    padding: 0px 15px;
    position: relative;
	width: 100%;
    
    z-index: 1002;
    padding: 0px 15px;
}
.main-header-skin{
    height: 65px;
}

.main-header-cover{
    max-width: var(--max-width);
    width: 100%;
    margin: auto;
    display: table;
    min-height: 65px;
    padding: 0px;
    position: relative;
}

.main-header-cover .header-left{
    display: table-cell;
    vertical-align: middle;
    text-align: left;
}

.main-header-cover .header-right{
    display: table-cell;
    vertical-align: middle;
    text-align: right;
    min-width: 250px;
}

.main-header-cover .header-logo{
    vertical-align: middle;
    display: inline-block;
    margin: 4px 30px 0px 0px;
}

.main-header-cover .header-logo svg{
    float: left;
}

.main-header-cover .header-menu{
    display: inline-block;
    vertical-align: middle;
}

.main-header-cover .header-menu-link{
    display: inline-block;
    padding: 0px 18px;
    height: 32px;
    line-height: 30px;
    border-radius: 30px;
    font-family: opensanssemibold;
    font-size: 13px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    outline: 0px;
    border: 0px;
}

.main-header-cover .header-menu-link:hover{
    background: rgba(0, 0, 0, 0.1);
}

.main-header-cover .header-menu-link.head-menu-item-active{
    background: rgba(0, 0, 0, 0.2);
    font-family: opensanssemibold;
}

.main-header-cover .header-menu-link.head-menu-item-upgrade{
    border-radius: 4px;
    background: #7AC60C;
    color: #fff;
    height: 26px;
    line-height: 26px;
    padding: 0px 12px;
    margin-left: 18px;
}

.main-header-cover .avatar-cover{
    display: inline-block;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 3px;
    border: 1px solid #fff;
    vertical-align: middle;
    margin-left: 5px;
}

.main-header-cover .avatar-cover img{
    width: 100%;
    height: 100%;
    
}

.main-header-cover .button-dropdown{
    color: #fff;
    vertical-align: middle;
    font-size: 25px;
}

.main-body{
    overflow: hidden;
}

.main-body-container{
    margin: auto;
    max-width: var(--max-width);
    box-shadow: 0 0 25px rgba(0,0,0,.04);
    background: #fff;
    border-radius: 10px;
}

.main-header-cover .header-button-login{
    display: inline-block;
    width: 115px;
    height: 38px;
    line-height: 38px;
    border-radius: 30px;
    text-align: center;
    text-decoration: none;
    background: #fff;
    color: var(--color-default-text);
    font-family: opensanssemibold;
    font-size: 13px;
    outline: 0px;
}

.main-header-cover .header-button-login.button-login{
    background: transparent;
    color: #fff;
}

.main-header-cover .header-language{
    display: inline-block;
}

.main-header-cover .header-language:hover .dropdown-menu{
    display: block;
}

.main-header-cover .header-language button {
    font-family: opensanssemibold;
    font-size: 13px;
    border: 0px;
    background: transparent;
    outline: 0px;
    text-decoration: none;
    color: #fff;
    text-align: center;
    position: relative;
    margin-right: 30px;
    padding: 22px 0px;
}

.main-header-cover .header-language button::after{
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border: 2px solid #fff;
    border-color: transparent #fff #fff transparent;
    transform: rotate(45deg);
    vertical-align: 2px;
    margin-left: 5px;
}

.main-header-cover .header-language .dropdown-menu{
    min-width: 180px;
    padding: 15px 0px;
    border-radius: 10px;
    left: auto;
    right: 4px;
    top: 56px;
}

.main-header-cover .header-language .dropdown-menu::after{
    content: "";
    display: inline-block;
    width: 16px;
    height: 9px;
    border-style: solid;
    border-width: 0px 8px 9px 8px;
    border-color: transparent transparent #fff transparent;
    position: absolute;
    right: 21px;
    top: -9px;
}

.main-header-cover .header-language .dropdown-menu li a{
    width: 100%;
    height: 35px;
    line-height: 30px;
    padding-left: 20px;
    background: transparent;
    color: #231F20;
    font-family: opensansregular;
    font-size: 15px;
    cursor: pointer;
    display: inline-block;
}

.main-header-cover .header-language .dropdown-menu li a:hover{
    color: #fff;
    background: var(--color-default-bg);
}

.main-header-cover .header-language .dropdown-menu li.language-active a{
    font-family: opensanssemibold;
    color: #fff;
    background: var(--color-default-bg);
    cursor: default;
}

.notification-main-cover{
    width: 100%;
    position: absolute;
    left: 0px;
    top: 64px;
}

.modal-button-close {
    display: inline-block;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: url('../imgs/learning-icon-bg.svg?n=1') 0px -240px;
    text-decoration: none;
    outline: 0px;
    position: absolute;
    top: -10px;
    right: -10px;
    cursor: pointer;
}


@media (min-width: 1111px){
    .main-header-cover .header-right{
        display: table-cell!important;
    }

    .main-header-cover .header-menu{
        display: inline-block!important;
    }

    .main-header-large-hide{
        display: none!important;
    }
}

@media (max-width: 1110px){

    .main-header-cover .header-menu-link.head-menu-item-upgrade{
        background: transparent;
        margin-left: 0px;
        padding: 0px 18px;
    }

    .main-header-large-hide{
        display: block;
    }

    .main-header-cover .header-logo{
        margin-right: 0px;
    }

    .main-header-cover .header-menu{
        position: absolute;
        width: calc(100% + 30px);
        left: -15px;
        /*bottom: 1px;*/
        /*transform: translate(0%, 100%);*/
        background: var(--color-default-bg);
        display: none;
        padding-top: 0px;
        padding-left: 15px;
        padding-right: 15px;
        box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
        z-index: 2;
        padding-top: 10px;
    }

    .main-header-cover .header-menu-link{
        display: block;
        margin-bottom: 10px;
        border-radius: 0;
        text-align: left!important;
    }

    .main-header-cover .header-language{
        display: block;
        text-align: left;
    }

    .main-header-cover .header-right{
        display: none;
        position: absolute;
        left: 0px;
        width: 100%;
        bottom: 0px;
        transform: translate(0, 100%);
        text-align: left;
        z-index: 2;
    }
    .header-middle{
        display: table-cell;
        vertical-align: middle;
        text-align: right;
        cursor: pointer;
    }

    .header-menu-icon{
        display: inline-block;
        position: relative;
        width: 30px;
        height: 4px;
        background-color: #fff;
        border-radius: 100px;
        transition: transform .4s ease;
        outline: none;
        cursor: pointer;
    }

    .header-menu-icon::before{
        content: '';
        display: block;
        width: 100%;
        position: absolute;
        height: 4px;
        background-color: #fff;
        border-radius: 100px;
        transition: all .2s ease;
        bottom: 200%;
        right: 0;
    }

    .header-menu-icon::after{
        content: '';
        display: block;
        width: 100%;
        position: absolute;
        height: 4px;
        background-color: #fff;
        border-radius: 100px;
        transition: all .2s ease;
        top: 200%;
        right: 0;
    }
    .main-header-cover .header-right .header-button-login{
        font-family: opensansregular;
        font-size: 15px;
        color: #fff;
        text-align: left;
        text-decoration: none;
        outline: 0px;
        border: 0px;
        width: 100%;
        background: transparent;
        text-transform: none;
        padding: 0px 18px;
    }

    .main-header-cover .header-right .header-button-login:hover{
        background: rgba(0, 0, 0, 0.1);
    }

    .main-header-cover .header-language button{
        padding: 10px 0px;
        margin: 0px;
        margin-top: 5px;
        text-align: left;
    }

    .main-header-cover .header-language .dropdown-menu{
        left: 0px;
        right: auto;
        top: 50px;
    }

    .main-header-cover .header-language .dropdown-menu::after{
        right: auto;
        left: 50%;
        top: -9px;
        transform: translate(-50%);
    }

    .header-menu-lang-cover{
        padding-left: 50px;
        display: none;
    }

    .header-menu-lang-cover a{
        position: relative;
    }

    .header-menu-lang-cover a .icon-language-check{
        width: 12px;
        height: 12px;
        border: 1px solid #fff;
        border-radius: 50%;
        display: inline-block;
        position: absolute;
        right: 0px;
        top: 50%;
        transform: translate(0px, -50%);
        display: flex;
    }

    .header-menu-lang-cover a .icon-language-check::before{
        width: 6px;
        height: 6px;
        border-radius: 50%;
        display: inline-block;
        content: "";
        background-color: #fff;
        margin: auto;
    }
}

.home-modal-close{
    display: inline-block;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: url('../imgs/icon-home.svg?n=1') 0px -610px;
    position: absolute;
    right: -8px;
    top: -9px;
    cursor: pointer;
    z-index: 1;
}
.main-errors{
    background: #ffd4cc; 
    border-radius: 10px; 
    margin: 20px 0px;
    padding: 15px;
}

.main-success{
    background: #dcefc3; 
    border-radius: 10px; 
    margin: 20px 0px;
    padding: 15px;
}
.main-errors p, .main-success p{
    margin: 0px;
    font-size: 16px;
    font-family: opensansregular;
}
.u1{
    background-image: url('../img/icon-underline.svg?n=1');
    background-size: 7.5px 5px;
    background-position: left bottom;
    background-repeat: repeat no-repeat;
    padding-bottom: 5px;
}

.toast-msg{
    font-family: opensanssemibold;
    font-size: 13px;
    color: #fff;
    background: #000;
    min-width: 245px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    position: fixed;
    z-index: 1002;
    left: 50%;
    bottom: 100px;
    transform: translate(-50%, 0%);
    border-radius: 30px;
    display: none;
    padding-left: 15px;
    padding-right: 15px;
}

/* Header product */
.main-header-cover.header-product{
    display: flex;
    position: relative;
}

.header-product-left{
    height: 100%;
    margin: auto auto auto 0px;
}

.header-product-right{
    height: 100%;
    margin: auto 0px auto auto;
}

.header-product .header-product-middle{
    display: inline-block;
    text-decoration: none;
    outline: 0px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.header-product .header-product-middle svg{
    float: left;
}

.header-product .header-link-back{
    font-family: opensanssemibold;
    font-size: 13px;
    color: #fff;
    text-decoration: none;
    outline: 0px;
}

.header-product .header-link-back::before{
    content: "";
    display: inline-block;
    width: 22px;
    height: 20px;
    background: url('../imgs/main-icon-bg.svg?n=1') 0px -140px;
    vertical-align: top;
    margin-right: 19px;
}

/* End header product */