/* Configurações da área total da tela de login */

#login {
    height: 100%;
}

#login .col{
    height: 100%;
}



/* Configurações da área da logo */

.logo-area {
    display: flex;
    background-color: var(--blue);
    padding: 0 2em;
    height: 100%;
}

    .logo-area img {
        width: 300px;
        margin-left: auto;
        margin-right: auto;
    }


/* Configuração da área de login input */

.login-box{
    position: relative;
    display: block;
    width: 450px;
    margin-left: auto;
    margin-right: auto;
    top: 33.3333%;
}

    .login-box h1 {
        font-family: font-medium, Arial, Helvetica, sans-serif;
        font-size: 22px;
        color: var(--black);
        margin-bottom: 1.8em;
    }

    .login-box h6 {
        font-family: font-light, Arial, Helvetica, sans-serif;
        font-size: 15px;
        color: var(--dark);
        margin-bottom: 0.5em;
    }

    .login-box .input-box {
        margin-top: 0.8em;
    }

        .login-box .input-box input {
            font-family: font-regular, Arial, Helvetica, sans-serif;
            font-size: 15px;
            padding: 10px;
            border: 2px solid var(--gray);
            border-radius: 3px;
            width: 100%;
            height: 50px;
        }

            .login-box .input-box input:focus {
                border: none;
                outline: 2px solid var(--blue);
            }

    .login-box button {
        font-family: font-semiBold, Arial, Helvetica, sans-serif;
        font-size: 15px;
        color: var(--white);
        background: var(--green);
        border: none;
        border-radius: 3px;
        width: 100%;
        height: 50px;
        margin: 1em 0 2em 0;
    }

        .login-box button:hover {
            background: var(--green);
            filter: opacity(80%);
            transition: 1s;   
            cursor: pointer;
        }


    .login-box a {
        font-family: font-regular, Arial, Helvetica, sans-serif;
        font-size: 15px;
        color: var(--blue);
    }



/* Configuração do layout responsivo */

@media (max-width: 728px){
    #login .col{
        height: 20%;
    }

    .logo-area img {
        padding: 1em 0;
    }

    .login-box {
        width: 300px;
    }
}