/* ==========================================
   Form
========================================== */

.register-form{

    display:flex;

    flex-direction:column;

    gap:24px;

}

/* ==========================================
   Form Group
========================================== */

.form-group{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.form-group label{

    font-weight:600;

    color:var(--register-title);

    font-size:15px;

}

/* ==========================================
   Input Wrapper
========================================== */

.input-wrapper{

    display:flex;

    align-items:center;

    background:#ffffff;

    border:1px solid var(--register-border);

    border-radius:14px;

    overflow:hidden;

    transition:var(--register-transition);

}

.input-wrapper:hover{

    border-color:var(--register-primary);

}

.input-wrapper:focus-within{

    border-color:var(--register-primary);

    box-shadow:0 0 0 4px rgba(10,147,150,.12);

}

/* ==========================================
   Icon
========================================== */

.input-icon{

    width:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--register-primary);

}

.input-icon svg{

    width:22px;

    height:22px;

}

/* ==========================================
   Input
========================================== */

.input-wrapper input{

    flex:1;

    border:none;

    outline:none;

    background:transparent;

    padding:18px;

    font-size:15px;

    color:#1F2937;

}

.input-wrapper input::placeholder{

    color:#94A3B8;

}

/* ==========================================
   Small Text
========================================== */

.password-note{

    color:#6B7280;

    font-size:13px;

}

#emailStatus{

    text-align:right;

    font-size:13px;

    font-weight:600;

}