.login-wrap{
    width: 100%;
    height: 100vh;
}
.login{
    width: 351px;
    height: 573px;
    border: 1px solid rgba(24, 24, 28, 0.15);
    border-radius: 48px;
    padding: 16px;
}
.first-title{
    color: var(--purple-color);
    font-weight: var(--fw-large);
    font-size: var(--fs-4);
}
.login span,
.password-link,
form p{
    font-size: var(--fs);
    font-weight: var(--fw-regular);
    color: rgba(24, 24, 28,  0.4);
}

.input-field {
    width:309px;
    height: 66px;
    background-color: rgba(248, 248, 249, 1);
    border-radius: 24px;
}
form{
    margin-top:50px;
}
form ::placeholder{
    font-size: var(--fs-1);
    font-weight: var(--fw-regular);
    color: rgba(24, 24, 28, 0.4);
}
input{
    width: 100%;
    height: 66px;
    font-size: var(--fs-2);
}
.form-btn{
    width: 100%;
    height: 66px;
    border-radius: 24px;
    background-color: var(--purple-color);
    color: var(--text-color2);
    font-size: var(--fs-2);
    font-weight: var(--fw-large);
}
.form-link {
    margin-top: 50px;
}
.form-link a,
.confirmation{
    color: var(--purple-color);
    font-size: var(--fs);
    font-weight: var(--fw-medium);
}
.confirmation{
    color: rgba(24, 24, 28,  0.4);
}
.login-footer{
    height: 128px;
    width: 100%;
    background-color:rgba(248, 248, 249, 1);
    padding: 20px;
}
.info span{
    color: var(--purple-color);
    font-weight:var(--fw-regular);
    font-size: var(--fs);
}
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(24, 24, 28,  0.12) ;
    border-radius: 10px;
    transition: all 0.2s ease-in-out;
    background-color: transparent;
  }
@media (min-width: 768px){
    .login{
        width: 696px;
        height: 644px;
        padding: 40px;
    }
    .input-field {
        width:600px;
        height: 80px;
    }
    .form-btn{
        height: 80px;
    }
    input{
        height: 89px;
    }
}


/******************* forget password*********************/
.forget-password-login{
    height: 460px;
}

/***************** register **************/
.register{
    height: 125vh;
}
.register-boxes{
    height: 788px;
}
@media (min-width: 768px){
    .register-boxes{
        height: 868px;
    }
}