/* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$ LOGIN Form stylings $$$$$$$$$$$$$$$$$ */

.greet-heading-login,
.greet-heading-register{
    font-size: 3.6rem;
    position: relative;
    text-align: center;
    color: #404040;
}

.login-divider,
.register-divider{
    border-bottom: none;
    border-top: .5rem dotted #00000075;
    width: 55%;
    margin: .4rem auto;
}

.login-form-container,
.register-form-container{
    max-width: 100%;
    height: calc(100vh - 7rem);
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-form{
    width: 35rem;
    background-color: #0067d590;
    padding: 1.8rem;
    box-shadow: 2px 2px 15px 2px #00000010;
}

.login-form a{
    color: #404040;
    text-decoration: none;
    font-size: 1.2rem;
}

.login-form input,
.register-form input{
    font-size: 1.6rem;
    padding: .5rem 1rem;
    text-align: center;
    border: none;
    font-weight: 500;
    font-family: inherit;
    height: 4rem;
    background-color: #ffffff75;
}

.login-form input:active,
.login-form input:focus,
.register-form input:active,
.register-form input:focus{
    outline: none;
}

#btn-login,
#btn-register{
    background-color: #fff;
    border: none;
    color: #0051d4;
    height: 4rem;
    font-size: 1.6rem;
    cursor: pointer;
    transition: all 100ms ease-out;
}

#btn-login:active,
#btn-register:active{
    scale: 0.99;
}

.login-links{
    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$ REGISTER Form stylings $$$$$$$$$$$$$$$$$ */

.register-form-container{
    flex-direction: column;
}

.register-form{
    background-color: #0067d590;
    width: 60%;
    padding: 2.4rem;
    box-shadow: 2px 2px 15px 2px #00000010;
}

.register-divider{
    margin: .4rem auto 2.4rem ;
    width: 40%;
}

#btn-register{
    grid-column: 1/3;   
}

.credit-card-option{
    grid-column: 1/3;   
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;

}

/* forget password screen */
.forget-pwd{
    inset: 0;
    position: absolute;
    height: 100vh;
    width: 100vw;
    background-color: #e1e1e1;
    z-index: 1;
}

.main-heading{
    font-size: 2.8rem;
    text-align: center;
    text-transform: uppercase;
}

.scr-1{
    padding: .8rem;
    background-color: #404040;
    color: #fff;
    height: 28rem;
    width: 45rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.confirm-form{
    width: 80%;
    margin: 4rem auto;
}

.confirm-form input,
.confirm-form button{
    height: 4rem;
    padding-inline: .8rem;
    font-size: 1.6rem;
}

.confirm-form button{
    background-color: #0051d4;
    text-transform: uppercase;
    cursor: pointer;
    color: #fff;
}

.scr-1 p{
    color: #fff;
    text-align: center;
    font-size: 1.6rem;
    margin-bottom: 4rem;


}