.login-action-login #loginform,
.login-action-lostpassword #lostpasswordform,
.login-action-register #registerform {
    width: auto !important;
}

#login_error,
.message {
    width: auto !important;
}

.login .button-primary {
    background: #EA2328 !important;
    border-color: #EA2328 !important;
}

.login h1 a {
    height: inherit !important;
    font-size: inherit !important;
}

.login #login_error,
.login .message,
.login .success {
    border-left-color: #EA2328 !important;
}

#loginform .submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 10px !important;
}


/* New login style */
html{
    overflow: hidden;
}
.login {
    position: relative;
    background: url(../img/bg-vector.png) no-repeat 65px top/contain;
    overflow-x: hidden;
}

#lostpasswordform,
#loginform{
    position: relative;
    overflow: visible;
}

#login:after,
#login:before,
.login:before,
#lostpasswordform:before,
#loginform:before {
    position: absolute;
    content: '';
    z-index: -1;
}

#login:after {
    background: url(../img/full-database.svg) no-repeat center center/contain;
    width: 207px;
    height: 195px;
    right: -90px;
    top: 210px;
    z-index: -2;
}

.login h1 a {
    width: 100% !important;
    height: 42px !important;
    margin-bottom: 23px !important;
}

#login {
    padding-top: 30px;
    position: relative;
}

.login form {
    margin-top: 0;
    padding: 30px 24px;
}

.login label {
    margin-bottom: 4px;
}

#lostpasswordform .submit,
#loginform .submit {
    margin-top: 22px !important;
    padding: 0 !important;
    position: relative;
    overflow: hidden;
    background: #000;
    border-radius: 3px;
}

#lostpasswordform .submit{
    margin-top: 0 !important;
}

.login form .forgetmenot {
    float: none;
}

.login .button-primary {
    background: transparent !important;
    border-color: transparent !important;
    width: 100%;
    height: 39px;
    z-index: 1;
    font-size: 16px;
    line-height: 20px;
    font-weight: 800;
    position: relative;
}

.login .button-primary:hover{
    color: #fff;
}

#lostpasswordform .submit:after,
#loginform .submit:after {
    position: absolute;
    content: '';
    background: #EC1218;
    width: 0;
    top: -1px;
    bottom: -1px;
    left: -15px;
    z-index: 0;
    transition: all 0.3s;
    border-radius: 20px;
    transition: all .5s;
}

#lostpasswordform .submit:hover:after,
#loginform .submit:hover:after {
    width: calc(100% + 30px);
}

#lostpasswordform:before,
#loginform:before{
    background: url(../img/curly-black.png) no-repeat center center/contain;
    width: 26px;
    height: 86px;
    right: 23px;
    top: -27px;
}

#login::before {
    background: url(../img/Capella-stars.png) no-repeat center center/contain;
    width: 38px;
    height: 38px;
    top: 37px;
    right: -30px;

}

.heateorSlLogin {
    height: 24px;
    width: 24px;
    border-radius: 3px !important;
    overflow: hidden;
    background: #FC9C0C !important;
    border: none;
}

.login .button.wp-hide-pw:focus{
    background: none;
    border-color: unset;
    border: none;
    box-shadow: none;
    outline: none;
}

.login input[type=checkbox]{
    width: 16px;
    height: 16px;
}

.login #backtoblog a:hover, 
.login #nav a:hover, 
.login h1 a:hover{
    color: var(--black);
}

.login #backtoblog a, .login #nav a, .login h1 a{
    color: var(--black);
    font-size: 12px;
}

.dashicons-visibility:before{
    background: url(../img/mdi_eye.svg) no-repeat center center/contain;
    width: 20px;
    height: 20px;
    content: '';
    display: block;
}

.heateorSlGoogleLoginSvg{
    background: url(../img/g.png) no-repeat center center / 18px !important;
}
.heateorSlFacebookLogoContainer{
    background: none;
    margin: 0;
}
.heateorSlFacebookLoginSvg{
background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%22-5%20-5%2042%2042%22%3E%3Cpath%20d%3D%22M17.78%2027.5V17.008h3.522l.527-4.09h-4.05v-2.61c0-1.182.33-1.99%202.023-1.99h2.166V4.66c-.375-.05-1.66-.16-3.155-.16-3.123%200-5.26%201.905-5.26%205.405v3.016h-3.53v4.09h3.53V27.5h4.223z%22%20fill%3D%22%23ffffff%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E') left no-repeat
}

input[type=checkbox]:checked::before {
    content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%233582c4%27%2F%3E%3C%2Fsvg%3E");
    margin: -.1875rem 0 0 -.25rem !important;
    height: 1.3125rem !important;
    width: 1.3125rem !important;
}

@media only screen and (max-width: 767px){
    .login form.shake{
        transform: none;
        animation: none;
    }
}

@media all and (min-width:576px){
    .login {
       background-position:  right top;
    }

    #login:after{
        right: -250px;
        top: 270px;
    }

}
@media all and (min-width: 768px) {
    .login {
        background-size: 490px;
        background-position: right top;
    }

    .login:before {
        background: url(../img/full-multi-plus.png) no-repeat center center/contain;
        width: 266px;
        height: 317px;
        top: -38px;
        left: -38px;
    }

    #login {
        padding-top: 92px;
    }

    #login::before {
        width: 49px;
        height: 48px;
        top: 60px;
        right: -193px;
    }

    #lostpasswordform:before,
    #loginform:before {
        width: 33px;
        height: 110px;
        right: -126px;
        top: -57px;
    }


    .notice + #lostpasswordform:before,
    .notice + #loginform:before {
        top: -160px;
    }

    .notice + .notice + #lostpasswordform:before{
        top: -240px;
    }

    #login:after {
        width: 266px;
        height: 250px;
        right: -320px;
        bottom: auto;
        top: 284px;
    }

}

@media all and (min-width: 1180px) {
    .login {
        background-size: 855px;
    }

    
    .login:before {
        width: 432px;
        height: 515px;
        left: 0;
    }

    #login:after {
        width: 432px;
        height: 407px;
        right: -585px;
        top: auto;
        bottom: -245px;
    }

    #login::before {
        width: 80px;
        height: 79px;
        top: 120px;
        right: -390px;
    }

    #lostpasswordform:before,
    #loginform:before {
        width: 54px;
        height: 180px;
        right: -280px;
        top: 30px;
    }
    #lostpasswordform:before{
        top: -100px;
    }

    .notice + #lostpasswordform:before,
    .notice + #loginform:before {
        top: -72px;
    }

    .notice + .notice + #lostpasswordform:before{
        top: -154px;
    }
}