:root{
    --bd-dark-color: #8c6e40;
    --bd-light-color: #cfb696;
    --bd-focus-color: #c9a058;

    --bg-dark-color: #cfb696;
    --bg-light-color: #f0e3cd;
    --bg-transparent: transparent;
    --bg-transparent50: rgba(172, 140, 71, 0.5);

    --font-dark-color: #4e3e28;
    --white-color: #ffffff;

    --bg-danger-color: #f5d3d3;
    --bg-success-color: #d3f5e4;

    --bg-btn-dark-color: #ccaa7a;
    --bg-btn-light-color: #dbc19d;
    --bg-btn-hover-color: #8c6e40;
}
/* ==================== Configuração Geral da Página ===================== */
html, body {
    height: 100vh;
}
body {
    margin: 0;
    padding: 0;
    color: var(--bd-dark-color);
    background-color: var(--bg-light-color);
}
.container {
    padding: 0px;
    background-color: var(--white-color);
}
.header, .footer {
    height: 80px;
    background-color: var(--bg-dark-color);
}
#login .headerLogin, #login .footerLogin {
    height: 50px;
    border-radius: 10px;
    background-color: var(--bg-dark-color);
}
/* ==================== Configuração da Tela de Login ======================= */
main{
    width: 400px;
	border-radius: 10px;
	background-color: var(--bg-light-color);
}
form {
    padding: 0 40px;
}
.login {
    height: 73.6vh;
}
main h4,main input,main img, main .btn {
    margin: 20px 0;
}
main input {
    text-align: center;
    border: 1px solid var(--bg-btn-light-color) !important;
}

main input:focus {
    color: var(--font-dark-color);
    background-color: var(--white-color);
    border-color: var(--bg-btn-light-color) !important;
    outline: 0;
    box-shadow: 0 0 0 .2rem var(--bg-transparent50) !important;
}

main .msgError {
    text-align: center;
    margin-bottom: 20px;
}
/* ================== Fim Configuração da Tela de Login ======================= */

@media (max-width: 767px) {
   
     main {
      padding: 20px; 
    }
}

@media only screen and (max-width: 980px) {
    
    .header, .footer {
        display: none !important;
    }
    .container {
        padding: 0 20px;
        height: 100vh;
    }
    main{
        width: 800px;
    }
    #login .headerLogin, #login .footerLogin {
        height: 100px;
    }
    main .form-control {
        margin: 30px 0;
        font-size: 2.5rem;
    }
    form {
        padding: 0 80px;
    }
}