/*set default color*/
:root {
    --left-font-color: #fff;
    --font-color: #55626e;
    --default-color: #01abde;
    --background-default: #fff;
    --color-checkbox: #b9d7ea;

    /*for cemex*/
    --default-color-cemex: #e34a52;
    --font-color-cemex: #293064;

    /*for drzdrowie*/
    --default-color-drzdrowie: #52bab2;;
    --font-color-drzdrowie: #007880;
}

/*logo in login page*/
#page-login-index #page .login .col-md-3 .left-login-box .logo-login {
    background: url(img/logo.png) no-repeat center;
}

/*image for left box*/
#page-login-index #page .login .col-md-3 .left-login-box {
    background: url(img/loginpage.png) no-repeat center;
    background-size: cover ;
}

/*Don't touch*/
#page-login-index #page .login .right-login-box .login-title {
    color: var(--font-color);
}
#page-login-index #page .login .right-login-box input:checked + .slider {
    color: var(--color-checkbox);
}
#page-login-index #page .login .right-login-box .rememebrpassword {
    color: var(--font-color);
}
#page-login-index #page .login .right-login-box .forgetpass a:hover {
    color: var(--default-color);
}
#page-login-index #page .login .right-login-box .btn-login, #page-login-index #page .login .right-login-box input:checked + .slider:before {
    background-color: var(--default-color);
}
#page-login-index #page .login .right-login-box .btn-login:hover {
    border: 1px solid var(--default-color);
    color: var(--default-color);
    background-color: var(--background-default);
}
#page-login-index #page .login .col-md-3 .left-login-box .description-login {
    color: var(--left-font-color);
}
#page-login-forgot_password .login .my-header1 {
    color: var(--default-color);
}
#page-login-forgot_password .login legend.ftoggler {
    color: var(--default-color);
}
#page-login-forgot_password .login .my-homelink a:hover {
    color: var(--default-color);
}
#page-login-forgot_password .login .continuebutton .btn-primary {
    background-color: var(--default-color);
}
#page-login-forgot_password .login .continuebutton .btn-primary:hover {
    border: 1px solid var(--default-color);
    color: var(--default-color);
    background-color: var(--background-default);
}
#page-login-forgot_password .login .my-header1 {
    color: var(--font-color);
}
#page-login-forgot_password .login legend.ftoggler {
    color: var(--default-color);
}
#page-login-forgot_password .login #id_submitbutton {
    background-color: var(--default-color);
}
#page-login-forgot_password .login #id_submitbutton:hover {
    border: 1px solid var(--default-color);
    color: var(--default-color);
    background-color: var(--background-default);
}
#page-login-forgot_password .login .col-md-3 .my-card-info {
    background: url(img/loginpage.png) no-repeat center;
    background-size: cover ;
}
#page-login-forgot_password .login .col-md-3 .my-card-info .logo-login {
    background: url(img/logo.png) no-repeat center;
}

/*arrow left*/
#page-login-forgot_password .login .my-homelink a:hover .my-left-arrow {
    background: url(img/arrow-left-color.png) no-repeat;
    background-size: cover;
    transform: unset;
    width: 11px;
    height: 11px;
}
@media only screen and (max-width: 769px) {
    #page-login-forgot_password .felement input.btn-primary#id_submitbuttonusername, #page-login-forgot_password .felement input.btn-primary#id_submitbuttonemail {
        left: -15px;
    }
    #page-login-index #page .login .right-login-box #loginbtnprevpage {
        background: url(img/arrow-left-mobile.png) no-repeat scroll;
    }
    #page-login-forgot_password .felement input.btn-primary {
        left: -100px;
    }
    #page-login-forgot_password .felement input#id_cancel {
        top: -38px;
        left: 55px;
    }
    .my-header1 {
        font-size: 32px;
    }
}
@media only screen and (max-width: 767px) and (min-width: 320px) {
    span.my-blue-arrow {
        background: url(img/arrow-left-mobile.png) no-repeat;
    }
}

/*css for domain cemex*/
#page-login-index #page .login.cemex .col-md-3 .left-login-box {
    background-image: url(img/cemex_loginpage.png);
}
#page-login-index #page .login.cemex .dropdown-toggle::after {
    color: var(--default-color-cemex);
}
#page-login-index #page .login.cemex a {
    color: var(--default-color-cemex);
}
#page-login-index #page .login.cemex #langChange .dropdown .open {
    color: #657d95;
}

#page-login-forgot_password #page .login.cemex .dropdown-toggle::after {
    color: var(--default-color-cemex);
}

#page-login-forgot_password #page .login.cemex #langChange .dropdown .open {
    color: #657d95;
}

#page-login-index #page .login.cemex .col-md-3 .left-login-box .logo-login {
    background-image: url(img/logo-cemex.png);
    height: 62px;
}
#page-login-index #page .login.cemex .right-login-box .login-title, #page-login-forgot_password .login.cemex .my-header1 {
    color: var(--font-color-cemex);
}
#page-login-index #page .login.cemex .right-login-box input:checked+.slider {
    background-color: var(--font-color-cemex);
}
#page-login-index #page .login.cemex .right-login-box .forgetpass a:hover, #page-login-forgot_password .login.cemex legend.ftoggler {
    color: var(--default-color-cemex);
}
#page-login-index #page .login.cemex .right-login-box .btn-login, #page-login-forgot_password .login.cemex .continuebutton .btn-primary, #page-login-index #page .login.cemex .right-login-box input:checked + .slider:before {
    background-color: var(--default-color-cemex);
}
#page-login-index #page .login.cemex .right-login-box .btn-login:hover, #page-login-forgot_password .login.cemex .continuebutton .btn-primary:hover {
    background-color: #fefefe;
    border-color: var(--default-color-cemex);
    color: var(--default-color-cemex);
}
#page-login-forgot_password .login.cemex .my-homelink a:hover {
    color: var(--default-color-cemex);
}

#page-login-forgot_password .login.cemex .my-homelink a:hover .my-left-arrow {
    background: url(img/arrow-left-cemex.png) no-repeat;
    background-size: cover;
    transform: unset;
}
#page-login-forgot_password .login.cemex .col-md-3 .my-card-info .logo-login {
    background-image: url(img/logo-cemex.png);
    height: 62px;
}
#page-login-forgot_password .login.cemex .col-md-3 .my-card-info {
    background-image: url(img/cemex_loginpage.png);
}
#page-login-forgot_password #page .login.cemex .dropdown-toggle {
    color: var(--default-color-cemex);
}
@media only screen and (max-width: 769px) {
    #page-login-index #page .login.cemex .right-login-box #loginbtnprevpage {
        background: url(img/arrow-cemex-mobile.png) no-repeat scroll;
    }
    #page-login-index #page .login.cemex .col-md-3 .left-login-box .description-login {
        padding-top: 85px;
    }
}
@media only screen and (max-width: 767px) and (min-width: 320px) {
    .cemex span.my-blue-arrow {
        background: url(img/arrow-cemex-mobile.png) no-repeat;
    }
}

/*css for domain drzdrowie*/
#page-login-index #page .login.drzdrowie .col-md-3 .left-login-box {
    background-image: url(img/drzdrowie_loginpage.png);
    padding-top: 40px;
}
#page-login-index #page .login .right-login-box .rememebrpassword {
    color: var(--font-color-drzdrowie);
}
#page-login-index #page .login.drzdrowie .dropdown-toggle::after {
    color: var(--default-color-drzdrowie);
}
#page-login-index #page .login.drzdrowie a {
    color: var(--default-color-drzdrowie);
}
#page-login-index #page .login.drzdrowie #langChange .dropdown .dropdown-menu .dropdown-item {
    color: #657d95;
}
#page-login-index #page .login.drzdrowie #langChange .dropdown .dropdown-menu .dropdown-item:hover {
    color: var(--default-color-drzdrowie);
}
#page-login-index #page .login.drzdrowie #langChange .dropdown .open {
    color: #657d95;
}

#page-login-forgot_password #page .login.drzdrowie #langChange .dropdown .dropdown-menu .dropdown-item {
    color: #657d95;
}
#page-login-forgot_password #page .login.drzdrowie #langChange .dropdown .dropdown-menu .dropdown-item:hover {
    color: var(--default-color-drzdrowie);
}
#page-login-forgot_password #page .login.drzdrowie .dropdown-toggle::after {
    color: var(--default-color-drzdrowie);
}
#page-login-forgot_password #page .login.drzdrowie #langChange .dropdown .open {
    color: #657d95;
}

#page-login-index #page .login.drzdrowie .col-md-3 .left-login-box .logo-login {
    background-image: url(img/logo-drzdrowie.png) ;
    height: 85px;
    background-size: contain;
}
#page-login-index #page .login.drzdrowie .right-login-box .img-bottom, #page-login-forgot_password #page .login.drzdrowie .right-box .img-bottom  {
    position: absolute;
    bottom: 0;
    right: 0;
    background: url(img/icon-right-down.png) no-repeat;
    height: 238px;
    width: 288px;
    z-index: 0;
}
#page-login-index #page .login-form, #page-login-index #page .forgetpass {
    z-index: 1;
}

#page-login-index #page .login.drzdrowie .right-login-box .login-title, #page-login-forgot_password .login.cemex .my-header1 {
    color: var(--font-color-drzdrowie);
}
#page-login-index #page .login.drzdrowie .right-login-box input:checked+.slider {
    background-color: var(--font-color-drzdrowie);
}
#page-login-index #page .login.drzdrowie .right-login-box .forgetpass a:hover, #page-login-forgot_password .login.drzdrowie legend.ftoggler {
    color: var(--default-color-drzdrowie);
}
#page-login-index #page .login.drzdrowie .right-login-box .btn-login, #page-login-forgot_password .login.drzdrowie .continuebutton .btn-primary, #page-login-index #page .login.drzdrowie .right-login-box input:checked + .slider:before {
    background-color: var(--default-color-drzdrowie);
}
#page-login-index #page .login.drzdrowie .right-login-box .btn-login:hover, #page-login-forgot_password .login.drzdrowie .continuebutton .btn-primary:hover {
    background-color: #fefefe;
    border-color: var(--default-color-drzdrowie);
    color: var(--default-color-drzdrowie);
}
#page-login-forgot_password .login.drzdrowie .my-homelink a:hover {
    color: var(--default-color-drzdrowie);
}

#page-login-forgot_password #page .login.drzdrowie .dropdown-toggle {
    color: var(--default-color-drzdrowie);
}

#page-login-forgot_password .login.drzdrowie .my-homelink a:hover .my-left-arrow {
    background: url(img/arrow-left-drzdrowie.png) no-repeat;
    background-size: cover;
    transform: unset;
}
#page-login-forgot_password .login.drzdrowie .col-md-3 .my-card-info .logo-login {
    background-image: url(img/logo-drzdrowie.png);
    height: 85px;
    background-size: contain;
}
#page-login-forgot_password .login.drzdrowie .col-md-3 .my-card-info {
    background-image: url(img/drzdrowie_loginpage.png);
    padding-top: 40px;
}

@media only screen and (max-width: 1100px) and (min-width: 770px) {
    #page-login-index #page .login.drzdrowie .left-login-box .img-bottom, #page-login-index #page .login.drzdrowie .right-login-box .img-bottom, #page-login-forgot_password #page .login.drzdrowie .right-box .img-bottom {
        height: 88px;
        width: 106px;
        background-size: contain;
    }
    #page-login-forgot_password .login .my-header1 {
        margin-top: 40px;
    }
    #langChange .dropdown .dropdown-menu {
        left: -30px;
    }
    #page-login-index #page .login.drzdrowie .right-login-box {
        padding-bottom: 20px;
        padding-top: 20px;
    }
    .drzdrowie span.my-blue-arrow {
        background: url(img/arrow-drzdrowie-mobile.png) no-repeat;
    }
    #page-login-forgot_password .login.drzdrowie .my-homelink a:hover .my-left-arrow {
        background: url(img/arrow-drzdrowie-mobile.png) no-repeat;
        height: 18px;
        width: 29px;
    }
}

@media only screen and (max-width: 769px) {
    #page-login-forgot_password .login.drzdrowie .my-homelink a:hover .my-left-arrow {
        background: url(img/arrow-drzdrowie-mobile.png) no-repeat;
        height: 18px;
        width: 29px;
    }
    #page-login-index #page .login.drzdrowie .right-login-box #loginbtnprevpage {
        background: url(img/arrow-drzdrowie-mobile.png) no-repeat scroll;
    }
    #page-login-index #page .login.drzdrowie .col-md-3 .left-login-box .description-login {
        padding-top: 0px;
        margin-top: 115px;
    }
    #page-login-index #page .login.drzdrowie .col-md-3 .left-login-box .logo-login {
        background-image: url(img/logo-drzdrowie-mobile.png);
        height: 240px;
        background-size: contain;
    }
    #page-login-index #page .login.drzdrowie .col-md-3 .left-login-box {
        background-color: #fff;
        background-image: unset;
        padding-top: 40px;
    }
    #page-login-index #page .login.drzdrowie .col-md-3 .left-login-box .description-login {
        color: #000;
    }
    #page-login-index #page .login.drzdrowie .left-login-box .img-bottom {
        position: absolute;
        bottom: 0;
        right: 0;
        background: url(img/icon-right-down.png) no-repeat;
        height: 238px;
        width: 288px;
        z-index: 0;
    }
    #page-login-index #page .login.drzdrowie .col-md-3 .left-login-box .btn-login-page .btn-login {
        z-index: 1;
        background-color: var(--default-color-drzdrowie);
        color: #fff;
    }
    #page-login-index #page .login.drzdrowie .col-md-3 .left-login-box .btn-login-page .btn-login:hover, #page-login-index #page .login.drzdrowie .col-md-3 .left-login-box .btn-login-page .btn-login:active {
        color: var(--default-color-drzdrowie);
        background-color: #fff;
        border: 1px solid var(--default-color-drzdrowie);
    }
}
@media only screen and (max-width: 767px) and (min-width: 320px) {
    .drzdrowie span.my-blue-arrow {
        background: url(img/arrow-drzdrowie-mobile.png) no-repeat;
    }
}

@media only screen and (max-width: 500px) {
    #page-login-index #page .login.drzdrowie .col-md-3 .left-login-box .logo-login {
        height: 120px;
    }
    #page-login-index #page .login.drzdrowie .col-md-3 .left-login-box .description-login {
        margin-top: 50px;
        z-index: 1;
    }
    #page-login-index #page .login.drzdrowie .left-login-box .img-bottom, #page-login-index #page .login.drzdrowie .right-login-box .img-bottom, #page-login-forgot_password #page .login.drzdrowie .right-box .img-bottom {
        height: 88px;
        width: 106px;
        background-size: contain;
    }
}