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

.signin-form{

    display:flex;

    flex-direction:column;

    gap:24px;

}

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

.form-group{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.form-group label{

    font-size:15px;

    font-weight:600;

    color:var(--signin-title);

}

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

.input-wrapper{

    display:flex;

    align-items:center;

    background:#ffffff;

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

    border-radius:14px;

    overflow:hidden;

    transition:var(--signin-transition);

}

.input-wrapper:hover{

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

}

.input-wrapper:focus-within{

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

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

}

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

.input-icon{

    width:58px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--signin-primary);

}

.input-icon svg{

    width:22px;

    height:22px;

}

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

.input-wrapper input{

    flex:1;

    border:none;

    outline:none;

    padding:18px;

    font-size:15px;

    background:transparent;

    color:#1F2937;

}

.input-wrapper input::placeholder{

    color:#94A3B8;

}