body {
    font-family: "Open Sans", sans-serif;
    background: url('/img/areaCliente/login.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: #444444;
    min-height: 100vh;
    position: relative;
  }

  a {
    color: #1acc8d;
    text-decoration: none;
  }

  a:hover {
    color: #34e5a6;
    text-decoration: none;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: "Montserrat", sans-serif;
  }

/* Login */
.logo-site{
    width: 100px;
}
#header{
    padding: .3em;
}
.login {
    background-size: cover;
    height: 100%;
    position: relative;
}

.login .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: auto;
    padding: 5rem 2rem;
    position: relative;
    z-index: 2;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 67, 102, 0.59);
}

.login .overlay.danger {
    background: rgba(102, 0, 0, 0.59)
}

.login .icone {
    font-size: 4rem;
    color: #fff
}

/* TODO Aterar o link da imagem externa */
.login::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("https://www.transparenttextures.com/patterns/blizzard.png");
    top: 0;
    left: 0;
}

.login .title {
    font-size: 2.6rem;
}

.login .subtitle {
    font-size: 23px;
    font-weight: 300;
}

.login .form-group label {
    color: #fff;
}

.entrar{
    text-align: center;
}
.btn-entrar{
    background-color: #01226f;
    color: #fff;
    margin-top: .5em;
}
.btn-entrar:hover{
    background-color: #01143f;
    color: #fff;
}
.btn-primeiro-login{
    background-color: #004c73;
    color: #fff;
}
.btn-primeiro-login:hover{
    background-color: #013149;
    color: #fff;
}
.btn-redefinir-senha{
    background-color: #0883c0;
    color: #fff;
    margin-top: .5em;
}
.btn-redefinir-senha:hover{
    background-color: #1357a4;
    color: #fff;
}

.btn-redefinir-senha:focus {
    color: #fff;
    background-color: #1357a4;
}
.btn-entrar:focus{
    color: #fff;
    background-color: #02143f;
}
.btn-primeiro-login:focus{
    color: #fff;
    background-color: #013149;
}

.input-area-cliente{
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    white-space: nowrap;
    border: 1px solid transparent;
    background: #E8F0FE;
    border-top-left-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
}

/* .primeiro-login{
    z-index: 10;
    position: absolute;
    right: 0.5em;
} */

.trick{
    position: relative;
}

.trick-senha{
    position: absolute;
    right: 5px;
    top: 5px;
}
.trick-senha-redefinicao{
    position: absolute;
    right: 10px;
    top: 35px;
}
.img-trick-senha{
    width: 25px;
    height: 25px;
    cursor: pointer;
}

.email-cliente{
    font-size: 14px;
}

.senha-cliente, .email-cliente{
    border: none;
    border-radius: 0;
    padding: 0.44em;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.senha-redefinicao{
    width: 300px;
}

.erro-redefinicao{
    color: #fff;
}

/* FOOTER */
#footer{
    background-color: #001851;
    z-index: 20;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.logo-contratante{
    width: 100px;
}

.informacoes-contratante p{
    font-size: 14px;
    line-height: 8px;
}

.logo-footer{
    width: 100px;
    vertical-align: none;
}

/* RESPONSIVO */
@media (max-width: 992px) {
    .login .title, .login .subtitle{text-align: center;}
}

@media (max-width: 768px) {
    #footer .container{
        flex-direction: column;
    }
    .logo-footer{
        margin-top: 1em;
    }
}

@media (max-width: 650px) {
    .contratante{
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .logo-contratante{margin-bottom: 1.5em;}
}