/* ===========================
   LOGIN
=========================== */

.login-container{

    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;

}

.login-card{

    width:100%;
    max-width:520px;

    background:white;

    border-radius:24px;

    padding:45px;

    box-shadow:
        0 15px 45px rgba(0,0,0,.08);

    animation:fadeUp .5s;

}

.login-card h1{

    margin:0;

    font-size:34px;

    color:#14345d;

    font-weight:700;

}

.subtitle{

    color:#7b8794;

    margin-top:10px;

    margin-bottom:35px;

    font-size:17px;

}

.form-group{

    margin-bottom:25px;

}

.form-group label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

    color:#14345d;

}

.input-icon{

    display:flex;

    align-items:center;

    border:2px solid #e7edf5;

    border-radius:14px;

    overflow:hidden;

    transition:.25s;

    background:white;

}

.input-icon:focus-within{

    border-color:#19c15f;

    box-shadow:0 0 0 4px rgba(25,193,95,.15);

}

.input-icon i{

    width:55px;

    text-align:center;

    color:#14345d;

    font-size:18px;

}

.input-icon input{

    flex:1;

    border:none;

    outline:none;

    font-size:17px;

    padding:18px 15px;

    font-family:Poppins,sans-serif;

}

.input-icon input::placeholder{

    color:#9aa6b2;

}

.alert-error{

    background:#ffe8e8;

    color:#c62828;

    border-left:5px solid #e53935;

    border-radius:10px;

    padding:15px;

    margin-bottom:25px;

    font-weight:500;

}

.btn-login{

    width:100%;

    border:none;

    cursor:pointer;

    border-radius:14px;

    padding:18px;

    font-size:18px;

    font-weight:600;

    color:white;

    background:linear-gradient(
        90deg,
        #14345d,
        #19c15f
    );

    transition:.25s;

}

.btn-login:hover{

    transform:translateY(-2px);

    box-shadow:
        0 10px 25px rgba(20,52,93,.25);

}

.btn-login i{

    margin-right:10px;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
