html {
    background: #556370 url("../img/bg.jpg") bottom right no-repeat;
    background-size: cover;
}

body, #publicoAll {
    display: flex;
}


#offlineContainer {
    width: 450px;
    margin: auto;
}

#publicoAll {
    width: 100%;
    overflow: auto;
    padding: 20px 10px;
}

#publicoContainer {
    max-width: 900px;
    margin: 0px auto;
}


#logotipo, #logotipo:hover {
    margin: 0 auto 30px auto;
    padding: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    font-size: 0;
    width: 250px;
    height: 150px;
    background: transparent url("../img/logotipo.png") center center no-repeat;
    background-size: contain;
}


div#blackForm, div#blackestForm, div#innerForm {
    box-shadow: 0 0 3px 0px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0 3px 0px rgba(0, 0, 0, 0.5);
}

div#blackForm, div#blackestForm {
    background: rgba(255,255,255,.4);
    padding: 8px;
}

div#whiteForm {
    box-shadow: 0 0 0;
    -webkit-box-shadow: 0 0 0;
    background-color: #fff;
    background-image: url("../img/bordah.png"), url("../img/bordah.png"), url("../img/logotipobg.png");
    background-position: top left, bottom left, center center;
    background-repeat: repeat-x, repeat-x, no-repeat;
    border: 1px solid #fff;
}

div#whiteForm.conteudo {
    padding: 20px;
}

div#whiteForm.conteudo h1 {
    color: #355F85;
    font-size: 22px;
    text-transform: uppercase;
}

div#whiteForm.conteudo .ttab .tab-menu li.active a {
    font-size: 15px;
}

div#whiteForm h2 {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    color: #333;
    font-style: normal;
    border: 0;

}

.pequeno div#whiteForm h2 {
    margin: 15px auto 0 auto;
}

div#whiteForm p {
    color: #333;
    text-align: justify;
}

#entrarSistema, #whiteForm.competicao input.enviar {
    position: relative;
    float: none;
    bottom: auto;
    right: auto;
    margin: 30px auto;
}

#whiteForm.competicao {
    max-width: 350px;
/*
    overflow: hidden;
*/
}

#whiteForm.competicao label {
    margin: 30px 0;
}


div#whiteForm h2.titulo-pagina, p.pagina-descricao {
    display: none;
}

@media screen and (min-width: 1360px) {

    #loginContainer, #atualizarContainer, #offlineContainer {
        width: 450px;
    }

    #loginContainer {
        padding-top: 60px;
    }

    #logotipo, #logotipo:hover {
        width: 250px;
        height: 150px;
        margin-bottom: 30px;
    }
    
    div#blackForm, div#blackestForm {
        padding: 15px;
    }

    #blackForm.pequeno #whiteForm form label {
        margin-top: 25px;
        width: 300px;
    }

    #blackForm.pequeno {
        width: 400px;
    }

    #lembrardeMim {
        padding-top: 30px;
    }  

    #entrarSistema {    
        margin: 30px auto;
    }

    div#whiteForm p.erro, div#whiteForm p.aviso, div#whiteForm p.sucesso {
        padding: 20px;
    }     
}

@media (max-width: 800px) {

    .ttab ul.tab-menu {
        white-space: normal;
    }

    .ttab ul.tab-menu li {
        float: left;
    }

    .ttab ul.tab-menu li a {
        box-shadow: 0 0 0;
        -webkit-box-shadow: 0 0 0;
        border: 1px solid transparent;
    }

    .ttab ul.tab-menu li.active a {
        font-size: 12px;
        border: 1px solid #29567F;
        text-decoration: none;
        box-shadow: 0 2px 3px 0px #00000045;
        border-radius: 2px;
    }
    
}


@media screen and (max-width: 640px) {   
    div#whiteForm.conteudo {
        width: 350px;
        padding: 20px 5px;
    }

    p.msg-impressao {
        display: none;
    }
}

@media screen and (max-width: 400px) {
    div#whiteForm.conteudo {
        width: 300px;
    }
}


@media screen and (max-width: 400px) {
    .mob-oculto {
        display: none;
    }
}

@font-face {
    font-family: 'Pragati Narrow';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Pragati Narrow'), local('PragatiNarrow-Regular'), url(https://fonts.gstatic.com/s/pragatinarrow/v5/vm8vdRf0T0bS1ffgsPB7WZ-mD275wNJHMw.woff2) format('woff2');
    unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}

/* latin-ext */
@font-face {
    font-family: 'Pragati Narrow';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Pragati Narrow'), local('PragatiNarrow-Regular'), url(https://fonts.gstatic.com/s/pragatinarrow/v5/vm8vdRf0T0bS1ffgsPB7WZ-mD272wNJHMw.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Pragati Narrow';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Pragati Narrow'), local('PragatiNarrow-Regular'), url(https://fonts.gstatic.com/s/pragatinarrow/v5/vm8vdRf0T0bS1ffgsPB7WZ-mD274wNI.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


@media screen and (max-width: 400px) {
    div#whiteForm.conteudo {
        width: 300px;
    }
}

@media screen and (max-width: 640px) {
    table {
        font-family: 'Pragati Narrow';
    }
}