html, body {
    height: unset !important;
}

#login {
    padding: 0 5%;
    margin-top: 20vh;
}

@media screen and (min-width: 980px) {
    #login {
        padding-left: calc((100% - 640px)/2);
        padding-right: calc((100% - 640px)/2);
    }
}

#login img {
    margin-left: 0;
    margin-bottom: 15px;
}

#login #content {
    padding: 15px 7.5%;
    background-color: #ffffffe3;
    border-radius: 10px;
    -webkit-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
    box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
}

    #login #content h3 {
        margin: 0;
        padding: 0;
        color: #3D6D98;
    }

    #login #content p {
        margin: 0;
        padding: 0;
        color: #3e7aab;
        font-size: 0.8em;
    }

    #login #content #linhaLogin {
        border-bottom: 1px solid #bec9d5;
        border-top: 1px solid #bec9d5;
        margin: 5px auto;
    }

        #login #content #linhaLogin #formLogin {
            margin: 0 auto;
            padding: 30px 0 20px 0;
        }

            #login #content #linhaLogin #formLogin .contentForm {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                row-gap: 10px;
            }

@media screen and (min-width: 980px) {
    #login #content #linhaLogin #formLogin .contentForm {
        padding: 0 100px;
        margin-bottom: 10px;
    }
}

#login #content #linhaLogin #formLogin .contentForm .title {
    grid-row: 1;
    grid-column: 1 / span 3;
}

    #login #content #linhaLogin #formLogin .contentForm .title p {
        margin: 0;
        padding: 0;
        color: #5B5F63;
        font-size: 1.05em;
        font-weight: 600;
    }

#login #content #linhaLogin #formLogin .contentForm .field {
    grid-row: 2;
    grid-column: 1 / span 3;
}

@media screen and (min-width: 980px) {
    #login #content #linhaLogin #formLogin .contentForm .title {
        grid-row: 1;
        grid-column: 1;
    }

    #login #content #linhaLogin #formLogin .contentForm .field {
        grid-row: 1;
        grid-column: 2 / span 2;
    }
}

#login #content #linhaLogin #formLogin .contentForm .field input {
    width: 98%;
}

@media screen and (min-width: 980px) {
    #login #content #linhaLogin #formLogin .contentForm .field input {
        width: 90%;
    }
}

#login #content #linhaLogin #formLogin .contentForm .field span {
    margin-bottom: 15px;
}

@media screen and (min-width: 980px) {
    #login #content #linhaLogin #formLogin .contentForm .field span {
        margin-bottom: 0;
    }
}

#login #content #linhaLogin #formLogin .contentButton {
    padding: 10px 0;
    text-align: right;
    margin-bottom: 10px;
}

@media screen and (min-width: 980px) {
    #login #content #linhaLogin #formLogin .contentButton {
        padding: 0 117px;
    }
}

#login #content #linhaLogin #formLogin .contentError {
    font-size: 0.95em;
    font-weight: 600;
    color: #BF3030;
}

#login #content .contentRecSenha {
    padding-top: 2px;
    text-align: right;
    font-size: 0.8em;
}

    #login #content .contentRecSenha a:hover {
        text-decoration: underline;
    }

.tema_natal h3 {
    color: darkred !important;
}

.tema_natal p,
.tema_natal a {
    color: green !important;
}

.tema_natal .title--usuario p,
.tema_natal .title--senha p,
.tema_natal .title--chapa p {
    color: #3e7aab !important;
}