@import url('Cores.css');

.skip-link {
    position: absolute;
    left: 16px;
    top: -48px;
    z-index: 20000;
    padding: 10px 14px;
    border: 2px solid #b55f00;
    border-radius: 8px;
    background-color: #ffffff;
    color: #7a4300;
    font-weight: bold;
    box-shadow: 0 10px 24px -16px rgba(0, 0, 0, 0.8);
}

.skip-link:focus,
.skip-link:active {
    top: 12px;
}

body {
    background-color: #f4f5f7;
    color: #262626;
    line-height: 1.5;
}

div#mainContent,
div#divConteudo {
    box-sizing: border-box;
    width: auto !important;
    max-width: 1440px;
    margin: 0 auto;
    padding: 20px 16px 32px !important;
    scroll-margin-top: 24px;
}

div#divConteudo {
    min-height: 480px;
    background-color: #ffffff;
    box-shadow: 0 24px 48px -36px rgba(28, 38, 54, 0.55);
}

div#divBanner div.divLogin {
    box-sizing: border-box;
    min-height: 30px;
}

div#divBanner div.divLogin a {
    display: inline-block;
}

div#divBanner div#divMenu ul#ulMenu {
    padding: 0 16px 16px;
}

div#divBanner div#divMenu li.botao {
    margin-bottom: 4px;
}

div#divBanner .providencia {
    right: 24px;
    margin-left: 0 !important;
}

.DivMenuProvidencia {
    left: auto !important;
    right: 16px;
    width: auto;
    max-width: 520px;
}

ul.bloco {
    height: auto;
}

ul.bloco li.bloco {
    width: 100%;
    max-width: 340px;
    vertical-align: top;
}

#bloco02,
#ulEsqueci {
    padding-left: 0 !important;
}

#ulEsqueci li.bloco {
    max-width: 480px;
}

.AvisoDeErro {
    line-height: 1.5;
    border-color: #e3bd47;
    border-radius: 10px;
    background-color: #fff8db;
    box-shadow: 0 10px 20px -18px rgba(100, 76, 0, 0.75);
}

.Validator {
    line-height: 1.4;
}

a:focus,
input:focus,
select:focus,
textarea:focus,
button:focus,
[tabindex]:focus {
    outline: 3px solid #f08a00 !important;
    outline-offset: 2px;
}

@media screen and (max-width: 980px) {
    div#divBanner {
        height: auto;
        min-height: 159px;
    }

    div#divBanner div.divLogin {
        float: none;
        display: block;
        padding: 10px 16px;
        text-align: right;
    }

    div#divBanner div#divMenu ul#ulMenu {
        padding: 12px 16px 16px;
    }

    .DivMenuProvidencia {
        right: 12px;
        max-width: calc(100vw - 24px);
    }
}

@media screen and (max-width: 720px) {
    div#divLogoSistema table,
    div#divLogoSistema tbody,
    div#divLogoSistema tr,
    div#divLogoSistema td {
        display: block;
        width: 100%;
    }

    .divLogoSistemaL {
        width: 100%;
        background-position: left center;
    }

    .divLogoSistemaR {
        width: 100%;
        background-size: auto 96px;
    }

    div#divBanner div#divMenu li.botao {
        display: block;
        min-height: 28px;
        padding-right: 0;
    }

    ul.bloco li.bloco {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .blocoConteudo {
        padding: 18px 16px;
    }

    div#mainContent,
    div#divConteudo {
        padding: 16px 12px 28px !important;
    }
}