body.page-template-buddypress-login-page,
body.registration{
    --wp--style--global--content-size-vw: clamp(500px, 80vw, 1440px);
    --container-space-vw : calc((100vw - var(--wp--style--global--content-size-vw)) / 2);
}
.page-template-buddypress-login-page footer,
.registration footer{
    display: none;
}
.bp-required-field-label{
    font-size: 0px;
}
.bp-required-field-label:after{
content: "*";
font-size: var(--small-font);
}
#buddypress.buddypress-login-signup-template,
body.login{
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: calc(var(--gap) * 5);
    grid-row-gap: var(--gap);
    background: var(--wp--preset--gradient--circular-dark-secondary);
    position: relative;
    min-height: 100vh;
    height: fit-content;
    background-size: 100%, 100%;
    background-color: #1f0a2a;
    background-repeat: no-repeat;
    padding-top: var(--gap);
    padding-bottom: var(--gap);
}

#buddypress.buddypress-login-signup-template #register-page,
#login {
    grid-area: 1 / 7 / 1 / 13;
    background: #00000070;
    padding: var(--gap);
    border-radius: calc(var(--radius)* 2);
    z-index: 1;
    height: fit-content;
    margin: auto 0;
}
#login {
    margin: auto;
}
#buddypress.buddypress-login-signup-template h1{
    font-size: var(--large-font);
    color: var(--white);
    text-align: center;
 }
.switch-to-signup-login{
    font-size: var(--small-font);
    color: var(--white);
    text-align: center;
    margin-bottom: var(--gap);
}
#buddypress.buddypress-login-signup-template #register-page > form,
#lostpasswordform{
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) / 2);
    padding: var(--gap);
    background-color: var(--white);
    border-radius: var(--radius);
}
#profile-details-section{
    order: 0;
    gap: calc(var(--gap) / 2);
    display: flex;
    flex-direction: row;
}
#basic-details-section{
    order: 1;
    gap: calc(var(--gap) / 2);
}
#register-page > form .submit{
    order: 1;
    margin-top: calc(var(--gap) / 2);
}

/* IMG BKG */
.login-signup-bkg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.1;
    overflow: hidden;
    pointer-events: none;
}
.login-signup-bkg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
}


.forgot-password{
    color: var(--white);
}


/* STRENGHT */
.password-strength-container{
    position: relative;
}
div#pass-strength-result {
    font-size: 0px;
    height: 3px;
    width: 100%;
    background: var(--blue-border);
    margin-bottom: calc(var(--gap) / 4);
    margin-top: calc(var(--gap) / 4);
    border-left: 5px solid var(--white);
    border-right: 5px solid var(--white);
    border-radius: 90px;
    overflow: hidden;
    position: relative;
}
div#pass-strength-result::after{
    content : "";
    position: absolute;
    left: 0;
    top : 0;
    height: 100%;
    z-index: 1;
}
.separator-strength-1,
.separator-strength-2{
    position: absolute;
    top: 0;
    height: 100%;
    width: 5px;
    background-color: var(--white);
    z-index: 2;
}
.separator-strength-1{
    left: 33%;
}
.separator-strength-2{
    left: 66%;
}

div#pass-strength-result.short::after{
    width: 33%;
    background-color: var(--blue-border);
}
div#pass-strength-result.bad::after{
    width: 33%;
    background-color: red;
}
div#pass-strength-result.good::after{
    width: 66%;
    background-color: rgb(255, 172, 19);
}
div#pass-strength-result.strong::after{
    width: 100%;
    background-color: rgb(0, 231, 0);
}

/* DEFAULT LOGIN PAGE */
.login{
    display: flex;
    flex-direction: column;
}
.login .indicator-hint{
    font-size: var(--small-font);
}
.login .clear{
    display: none;
}
.login #login{
    margin: var(--gap) auto auto auto;
}
.login > svg{
    max-height: 55px;
    width: 100%;
    margin: auto auto 0 auto;
}
#login .notice.notice-info.message,
#login .message{
    border: none;
    border-radius: calc(var(--radius) / 2);
    background-color: #FFFFFF20;
    color: var(--white);
    text-align: center;
    font-size: var(--small-font);
}
.login #login form{
    margin-top: 0;
    background-color: var(--white);
    border: none;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    border-radius: var(--radius);
}

.login input[type=text], .login input[type=password] {
    background: #fff;
    position: relative;
    display: flex;
    align-self: stretch;
    background: rgba(255, 255, 255, 0.3);
    background: var(--white);
    border: none;
    border-radius: calc(var(--radius) / 2);
    width: 100%;
    font-family: inherit;
    font-size: calc(var(--medium-font)*0.85);
    padding: calc(var(--gap)* 1.75) calc(var(--gap)* 1) calc(var(--gap)* 0.75) calc(var(--gap)* 1);
    z-index: 2;
    border: 1px solid var(--blue-border);
    margin: 0;
}
.login .button-primary {
    background: var(--primary);
    border: none;
    color: var(--white);
    text-decoration: none;
    text-shadow: none;
    padding: var(--gap)!important;
    border-radius: calc(var(--radius) / 2);
}
#login .notice.notice-info.message p{
    font-size: var(--small-font);
}
#login h1{display: none;}
#login #nav a,
#login .privacy-policy-page-link a,
#login #backtoblog a{
    color: var(--white)!important;
    font-size: var(--small-font);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
#login #backtoblog{
    border-top: 1px solid #FFFFFF50 ;
    border-bottom: 1px solid #FFFFFF50 ;
    padding: var(--gap) 0;
    text-align: center;
}
#login #nav {
    display: flex;
    justify-content: space-around;
}
#login #nav a{
    background-color: #FFFFFF20;
    padding: calc(var(--gap) / 2) var(--gap);
    border-radius: calc(var(--radius) / 2);
}
#login .privacy-policy-page-link {
    margin: var(--gap) 0!important;
}
.language-switcher{display: none;}



#login {
    width: clamp(198px, calc(100vw - (var(--container-space-vw) * 2)), 342px) !important;
    padding: var(--gap) !important;
    max-width: calc(100% - (var(--container-space-vw) * 2));
    margin: auto;
}
.buddypress-login-signup-template #template-notices{
    text-align: center;
}
.password-input-wrapper {
    display: inline-block;
    width: 100%;
    margin-bottom: var(--gap) !important;
}



/* RESET PASSWORD */
.login-action-lostpassword .privacy-policy-page-link,
.login-action-lostpassword #backtoblog,
.login-action-checkemail .privacy-policy-page-link,
.login-action-checkemail #backtoblog,
.login-action-checkemail #nav
 {
    display: none !important;
}
.login-action-checkemail #login-message{
    margin-bottom: 0;
}
div#login-message p a {
    color: inherit;
    position: relative;
    background-image: linear-gradient(transparent calc(100% - 2px), var(--blue-light) 5px);
    background-size: 0;
    background-repeat: no-repeat;
    background-position: bottom left;
    padding-bottom: 3px;
    text-decoration: none;
    transition: background-size .4s ease, text-decoration 0s ease;
}
div#login-message p a::after {
    background: var(--blue-border);
    content: "\293B";
    height: 15px;
    display: inline-flex;
    width: 15px;
    border-radius: 100px;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
    margin-right: 5px;
    color: var(--primary);
}

/* **************** */
/* RESPONSIVE */
/* **************** */

@media (max-width: 1440px) {
}
@media (max-width: 1280px) {
}
@media (max-width: 1200px) {
}
@media (max-width: 1024px) {
    #buddypress.buddypress-login-signup-template, body.login {
        grid-column-gap: calc(var(--gap)* 1);
        grid-row-gap: var(--gap);
    }    
    #buddypress.buddypress-login-signup-template #register-page,
    #login {
        grid-area: 1 / 3 / 1 / 11;
    }
 
}
@media (max-width: 992px) {
    #buddypress.buddypress-login-signup-template, body.login {
        grid-column-gap: calc(var(--gap)* 0.2);
        grid-row-gap: var(--gap);
    } 
    #buddypress.buddypress-login-signup-template #register-page,
    #login {
        grid-area: 1 / 1 / 1 / 13;
    }
    .switch-to-signup-login{
        flex-direction: column;
        display: flex;
    }
    #buddypress.buddypress-login-signup-template #register-page, #login{
        border-radius: calc(var(--radius)* 1);
    }
}
@media (max-width: 768px) {
}
@media (max-width: 575px) {
    .buddypress-login-signup-template #template-notices{
        font-size: var(--small-font);
    }

}