body{

    margin: 0;
    padding: 20px;

    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    box-sizing: border-box;

    background:
    linear-gradient(
        rgba(57,122,44,.65),
        rgba(22,58,18,.85)
    ),
    url("/assets/img/bg_juquia.jpg") center center/cover;
}

.login-card{
    display: flex;

    width: min(950px, 95%);
    min-height: 520px;

    background: #fff;

    border-radius: 22px;
    overflow: hidden;

    box-shadow: 0 25px 60px rgba(0,0,0,.25);
}

.login-left{

    width:45%;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:45px;

}

.logo{

    text-align:center;
    margin-bottom:15px;

}

.logo img{

    width:75px;

}

.login-left h2{

    text-align:center;

    margin:0;

    color:#2c5c2f;

}

.subtitle{

    text-align:center;

    color:#777;

    margin-bottom:35px;

}

.input-group{

    margin-bottom:20px;

}

.input-group label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

    color:#444;

}

.input-icon{

    display:flex;
    align-items:center;

    background:#f4f5f6;

    border-radius:12px;

    border:1px solid #ddd;

    transition:.25s;

}

.input-icon:focus-within{

    border-color:#3f8d37;

    box-shadow:0 0 0 3px rgba(63,141,55,.18);

}

.input-icon span{

    margin-left:14px;

    color:#666;

}

.input-icon input{

    flex:1;

    border:none;

    background:none;

    padding:15px;

    font-size:15px;

    outline:none;

}

.toggle-password{

    border:none;
    background:none;

    cursor:pointer;

    margin-right:12px;

}

.toggle-password span{

    color:#666;

}

.btn-login{

    margin-top:25px;

    height:48px;

    border:none;

    border-radius:12px;

    background:#2d7c35;

    color:white;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

    transition:.25s;

}

.btn-login:hover{

    background:#25642b;

}

.login-right{

    flex:1;

    background:

    linear-gradient(
    160deg,
    #4a9440,
    #235c24
    );

    color:white;

    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;

    padding:60px;

    text-align:center;

}

.logo-big{

    width:160px;

    margin-bottom:25px;

    opacity:.95;

}

.login-right h2{

    font-size:34px;

    margin-bottom:15px;

}

.login-right p{

    line-height:28px;

    font-size:17px;

    opacity:.9;

}


/* ===========================
    RESPONSIVIDADE DA TELA
    ========================== */
@media (max-width: 900px){

    .login-card{

        width: 100%;
        min-height: auto;

    }

    .login-left{

        width: 50%;
        padding: 35px;

    }

    .login-right{

        padding: 35px;

    }

    .login-right h2{

        font-size: 28px;

    }

}

@media (max-width: 700px){

    .login-card{

        flex-direction: column;
        border-radius: 18px;

    }

    .login-left{

        width: auto;
        order: 2;

        padding: 30px 25px;

    }

    .login-right{

        order: 1;

        min-height: 230px;

        padding: 30px 20px;

    }

    .logo-big{

        width: 90px;
        margin-bottom: 15px;

    }

    .login-right h2{

        font-size: 24px;

        margin-bottom: 10px;

    }

    .login-right p{

        font-size: 15px;
        line-height: 24px;

    }

}

@media (max-width: 420px){

    body{

        padding: 10px;

    }

    .login-left{

        padding: 20px;

    }

    .btn-login{

        width: 100%;

    }

    .input-icon input{

        font-size: 14px;

    }

}