/*==========================================================
        VARIABLES
==========================================================*/

:root{

    --primary:#1565C0;
    --primary-dark:#0D47A1;
    --secondary:#E53935;
    --accent:#FBC02D;

    --white:#FFFFFF;

    --text:#243852;

}

/*==========================================================
        FORMULARIOS
==========================================================*/

.form-group{

    display:flex;

    flex-direction:column;

}

.form-group label{

    font-size:15px;

    font-weight:700;

    color:#16386F;

    margin-bottom:10px;

}

.form-group input,

.form-group textarea,

.form-group select{

    width:100%;

    border:1px solid #D9E2EC;

    border-radius:14px;

    background:#FAFCFF;

    font-family:'Poppins',sans-serif;

    font-size:15px;

    color:#22324D;

    padding:16px 18px;

    transition:.30s;

    outline:none;

    box-sizing:border-box;

}

.form-group input{

    height:58px;

}

.form-group textarea{

    resize:vertical;

}

/*==========================================================
        PLACEHOLDER
==========================================================*/

.form-group input::placeholder,

.form-group textarea::placeholder{

    color:#9AA5B1;

}

/*==========================================================
        FOCUS
==========================================================*/

.form-group input:focus,

.form-group textarea:focus,

.form-group select:focus{

    border-color:#1565C0;

    background:#ffffff;

    box-shadow:0 0 0 4px rgba(21,101,192,.10);

}

/*==========================================================
        INPUTS CON ICONOS
==========================================================*/

.input-icon{

    position:relative;

}

.input-icon i{

    position:absolute;

    left:18px;

    top:50%;

    transform:translateY(-50%);

    color:#A9B7C8;

    font-size:18px;

    transition:.30s;

    pointer-events:none;

}

.input-icon input{

    padding-left:52px;

}

.input-icon:focus-within i{

    color:#1565C0;

}


/*==========================================================
        TEXTAREA CON ICONO
==========================================================*/

.textarea-icon{

    position:relative;

}

.textarea-icon i{

    position:absolute;

    top:18px;

    left:18px;

    color:#A9B7C8;

    font-size:18px;

    transition:.30s;

    pointer-events:none;

}

.textarea-icon textarea{

    padding-left:52px;

    padding-top:18px;

}

.textarea-icon:focus-within i{

    color:#1565C0;

    transform:scale(1.1);

}