/*@import url(http://fonts.googleapis.com/css?family=Roboto);*/
/*FREE GOOGLE FONT */

span.text>.pesquisar {
    background     : url(../img/search.svg) no-repeat center;
    height         : 2rem;
    width          : 2rem;
    background-size: contain;
}

* {
    box-sizing: border-box;
    margin    : 0;
    padding   : 0;
}

html,
body {
    margin       : 0;
    padding      : 0;
    font-size    : 1rem;
    font-family  : Arial;
    /*font-family: 'Roboto', sans-serif;*/
}

body {
    overflow: auto;
}

p {
    margin    : 0.5rem 0;
    text-align: justify;
}

span.destaque p {
    background: #e3e2e2;
    padding   : 0.5rem 1rem;
    margin    : 0;
}

body.modal {
    overflow: hidden;
}

body>header {
    height       : 3rem;
    display      : -webkit-box;
    display      : -ms-flexbox;
    display      : flex;
    -ms-flex-wrap: wrap;
    flex-wrap    : wrap;
    background   : white;
    width        : 100%;
}

body>header>* {
    display: block;
}

body>header>.titulo-sistema {
    background-color: #ffc20e;
    width           : calc(100% - 6rem);
    height          : 3rem;
    line-height     : 3rem;
    overflow        : hidden;
    padding         : 0 10px 0 20px;
    font-weight     : bold;
    font-size       : 1.2rem;
}

body>header>.separador {
    background-color          : #ffc20e;
    height                    : 3rem;
    width                     : 3rem;
    -webkit-transform         : skew(-40deg);
    transform                 : skew(-40deg);
    margin-left               : -1.5rem;
    margin-right              : 0.5rem;
    border-bottom-right-radius: 4px;
}

body>header>#logo {
    height         : 2.3rem;
    width          : 3rem;
    background     : url(../img/logo.svg) no-repeat center;
    background-size: 80% 80%;
    margin-right   : 0.25rem;
}

@media (min-width: 680px) {

    body>header>.titulo-sistema {
        padding: 0 10px 0 40px;
        width  : calc(100% - 13.5rem);
    }

    body>header>#logo {
        width          : 9rem;
        background     : url(../img/logo-ect.svg) no-repeat center;
        background-size: contain;
    }

}

body>#header-fixo {
    height       : 2.5rem;
    line-height  : 2.5rem;
    display      : -webkit-box;
    display      : -ms-flexbox;
    display      : flex;
    -ms-flex-wrap: wrap;
    flex-wrap    : wrap;
    background   : white;
    border-bottom: 2px solid #ffc20e;
    width        : 100%;
    padding      : 0 20px;
}

@media (min-width: 680px) {

    body>#header-fixo {
        padding: 0 20px 0 40px;
    }

}

body>#header-fixo>* {
    display: block;
}

body>#header-fixo>#nav-menu {
    height         : calc(2.5rem - 2px);
    width          : 2.5rem;
    background     : url(../img/nav-menu.png) no-repeat center;
    background-size: 75% 50%;
}

body>#header-fixo>#home {
    height         : calc(2.5rem - 2px);
    width          : 2.5rem;
    background     : url(../img/home.png) no-repeat center;
    background-size: 75% 75%;
}

body>#header-fixo>#nav-menu:hover,
body>#header-fixo>#home:hover {
    background-color: #eee;
}

body>#header-fixo>.usuario {
    height     : calc(2.5rem - 2px);
    line-height: calc(2.5rem - 2px);
    width      : calc(100% - 7.5rem);
    color      : #bcb3aa;
    text-align : right;
    font-size  : 0.9rem;
    overflow   : hidden;
    visibility : hidden;
}

body>#header-fixo>.usuario .lotacao {
    display: none;
}

@media (min-width: 1024px) {

    body>#header-fixo>.usuario .lotacao {
        display: inline;
    }

}

body>#header-fixo>.entrar {
    height         : calc(2.5rem - 2px);
    width          : 5.5rem;
    display        : none;
    background     : url(../img/entrar.png) no-repeat left center;
    background-size: 2rem 2rem;
    padding-left   : 40px;
    color          : #bcb3aa;
    font-size      : 0.9rem;
}

body>#header-fixo>.sair {
    height         : calc(2.5rem - 2px);
    width          : 5.5rem;
    display        : none;
    background     : url(../img/sair.png) no-repeat left center;
    background-size: 1.75rem 1.75rem;
    padding-left   : 40px;
    color          : #bcb3aa;
    font-size      : 0.9rem;
}

body>#header-fixo>.ajuda {
    height         : calc(2.5rem - 2px);
    width          : 5.5rem;
    display        : none;
    background     : url(../img/ajuda.png) no-repeat left center;
    background-size: 1.75rem 1.75rem;
    padding-left   : 40px;
    color          : #bcb3aa;
    font-size      : 0.9rem;
}

body>#header-fixo>.detalhes-usuario {
    height    : calc(2.5rem - 2px);
    width     : 2.5rem;
    background: url(../img/more-vert.png) no-repeat right 5px center;
}

body>#header-fixo>#opcoes-usuario-logado {
    position  : absolute;
    z-index   : 10;
    top       : 3.5rem;
    right     : 3.25rem;
    max-width : calc(100vw - 4rem);
    background: white;
    border    : 1px solid #bdbfc1;
    display   : block;
    text-align: right;
    padding   : 1rem;
    color     : #bcb3aa;
    font-size : 0.8rem;
}

body>#header-fixo>#opcoes-usuario-logado>a {
    display    : block;
    min-height : 2.5rem;
    line-height: 2.5rem;
}

body>#header-fixo>#opcoes-usuario-logado.fixo {
    top: 0.5rem;
}

body>#header-fixo>#opcoes-usuario-logado.none {
    display: none;
}

@media (min-width: 680px) {

    body>#header-fixo>.usuario {
        width        : calc(100% - 17.5rem);
        visibility   : visible;
        padding-right: 20px;
    }

    body>#header-fixo>.entrar,
    body>#header-fixo>.sair,
    body>#header-fixo>.ajuda {
        display: block;
    }

    body>#header-fixo>.detalhes-usuario {
        display: none;
    }
}

body>#header-fixo.fixo {
    position: fixed;
    z-index : 10;
    top     : 0;
    left    : 0;
}

@media (min-width: 768px) {
    body>#header-fixo.fixo {
        position: static;
        top     : auto;
        left    : auto;
    }
}

#breadcrumb {
    height     : 2.5rem;
    line-height: 2.5rem;
    overflow   : hidden;
    font-size  : 0.8rem;
    color      : #bcb3aa;
    margin     : 0 20px;
}

@media (min-width: 680px) {
    #breadcrumb {
        width : calc(100% - 80px);
        margin: 0 40px;
    }
}

#breadcrumb.fixo {
    margin-top: 2.5rem;
}

@media (min-width: 768px) {
    #breadcrumb.fixo {
        margin-top: 0;
    }
}

#geral {
    min-height: calc(100vh - 7.5rem);
}

@media (min-width: 768px) {
    #geral {
        height    : calc(100vh - 10.5rem);
        min-height: calc(100vh - 10.5rem);
        overflow  : auto;
    }
}

input,
select,
textarea {
    display              : block;
    font-family          : Arial;
    font-size            : 1rem;
    outline              : none;
    height               : 2rem;
    line-height          : 2rem;
    margin               : 0;
    padding              : 0 0.25rem;
    border               : 1px solid #b3b3b3;
    width                : 100%;
    -webkit-border-radius: 0;
    background           : white;
}

input.nao-preenchido,
select.nao-preenchido,
textarea.nao-preenchido {
    background: #fcf8e3;
    border    : 1px solid #faebcc;
}

input[type=text],
textarea {
    -webkit-appearance: none;
}

input[type=checkbox],
input[type=radio] {
    display: inline-block;
    width  : auto;
}

textarea {
    overflow   : auto;
    height     : 4.5rem;
    resize     : none;
    line-height: 1.5rem;
}

input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
    background: #f1f2f2;
}

label {
    height        : 2rem;
    line-height   : 2rem;
    display       : inline-block;
    vertical-align: top;
}

a {
    color          : steelblue;
    cursor         : default;
    text-decoration: none;
}

a[href] {
    cursor: pointer;
}

a:hover {
    text-decoration: underline;
}

body>footer {
    height          : 2.5rem;
    background-color: #ffc20e;
}

div.icones {
    min-height   : 3rem;
    display      : -webkit-box;
    display      : -ms-flexbox;
    display      : flex;
    -ms-flex-wrap: wrap;
    flex-wrap    : wrap;
}

div.icones>a {
    height             : 3rem;
    width              : 3rem;
    border-radius      : 50%;
    background-position: center;
    background-repeat  : no-repeat;
    background-size    : 80% 80%;
    background-color   : transparent;
}

div.icones>a:hover {
    background-color: #eee;
}

div.icones>a:active {
    background-color: #ddd;
}

div.icones>a.alterar {
    background-image: url(../img/alterar.png);
}

div.icones>a.alterar:active {
    background-image: url(../img/alterar-active.png);
}

div.icones>a.contato {
    background-image: url(../img/contato.svg);
}

div.icones>a.contato:active {
    background-image: url(../img/contato-active.svg);
}

div.icones>a.excluir {
    background-image: url(../img/excluir.png);
}

div.icones>a.msg-s {
    background-image: url(../img/msg-s.png);
}

div.icones>a.excluir:active {
    background-image: url(../img/excluir-active.png);
}

div.icones>a.msg-s:active {
    background-image: url(../img/msg-s.png);
}

div.icones>a.detalhes {
    background-image: url(../img/detalhes.png);
}

div.icones>a.detalhes:active {
    background-image: url(../img/detalhes-active.png);
}

div.icones>a.visualizar {
    background-image: url(../img/visualizar.png);
    background-size : contain;
}

div.icones>a.visualizar:active {
    background-image: url(../img/visualizar-active.png);
}

div.icones>a.mais {
    background-image: url(../img/more-vert.png);
    background-size : contain;
    background-size : auto 70%;
}

div.icones>a.mais:active {
    background-image: url(../img/more-vert.png);
}

div.icones>a.imprimir {
    background-image: url(../img/print.png);
}

div.icones>a.on {
    background-image: url(../img/on.svg);
}

div.icones>a.off {
    background-image: url(../img/off.svg);
}

.botoes {
    display   : flex;
    flex-wrap : wrap;
    min-height: 3rem;
    width     : 100%;
}

.botoes>a,
.botoes>button {
    height             : 3rem;
    line-height        : 3rem;
    padding            : 0 1rem;
    display            : block;
    cursor             : default;
    font-size          : 1rem;
    width              : 100%;
    margin             : 0.1rem 0.2rem;
    text-align         : center;
    -webkit-user-select: none;
    -moz-user-select   : none;
    -ms-user-select    : none;
    user-select        : none;
}

.botoes>a.botao,
.botoes>a.botao-principal,
.botoes>a.botao-perigo,
.botoes>button.botao-principal,
.botoes>button.botao {
    font-weight: bold;
}

.botoes>a.botao,
.botoes>button.botao {
    background: #d2d3d4;
    color     : #0d426b;
}

.botoes>a.botao-principal,
.botoes>button.botao-principal {
    background: #0d426b;
    color     : white;
}

.botoes>a.botao:hover,
.botoes>button.botao:hover {
    background     : #c5c6c7;
    text-decoration: none;
}

.botoes>a.botao-principal:hover,
.botoes>button.botao-principal:hover {
    background     : #092c47;
    text-decoration: none;
}

.botoes>a.botao:active,
.botoes>button.botao:active {
    background: #b8b8b9;
}

.botoes>a.botao-principal:active,
.botoes>button.botao-principal:active {
    background: #061c2e;
}

.botoes>a.botao-perigo {
    background: #fb9678;
    color     : white;
}

.botoes>a.botao-perigo:hover {
    background     : #fbab93;
    text-decoration: none;
}

.botoes>a.botao-perigo:active {
    background: #d9947f;
}

.form.escuro .botoes>a,
.form.escuro .botoes>a.botao,
.form.escuro .botoes>a.botao-principal,
.form.escuro .botoes>button,
.form.escuro .botoes>button.botao-principal,
.botoes>button.botao {
    width       : 100%;
    margin-left : 0;
    margin-right: 0;
}

.form.escuro .botoes>a,
.form.escuro .botoes>button {
    color: #818285;
}

.form.escuro .botoes>a.botao,
.form.escuro .botoes>button.botao {
    background: #d2d3d4;
    color     : #0d426b;
}

.form.escuro .botoes>a.botao-principal,
.form.escuro .botoes>button.botao-principal {
    background: #0d426b;
    color     : white;
}

@media (min-width: 768px) {

    #corpo {
        height: 100%;
    }

    div.icones,
    .botoes {
        min-height: 30px;
    }

    div.icones>a {
        height: 30px;
        width : 30px;
    }

    .botoes {
        justify-content: flex-end;
    }

    .botoes.centro {
        justify-content: center;
    }

    .botoes>a,
    .botoes>a.botao,
    .botoes>a.botao-principal,
    .botoes>button,
    .botoes>button.botao-principal,
    .botoes>button.botao {
        height     : 40px;
        line-height: 40px;
        font-size  : 0.8rem;
        width      : auto;
        border     : none;
    }

}

#alerta {
    position  : fixed;
    z-index   : 11;
    top       : 2.5rem;
    padding   : 1rem;
    left      : 50%;
    transform : translateX(-50%);
    background: white;
    border    : 1px solid whitesmoke;
    width     : calc(100vw - 2rem);
    min-width : 300px;
    text-align: center;
    display   : none;
    font-size : 1rem;
}

#alerta.aberto {
    display: flex;
}

#alerta>div {
    flex: 1 1 auto;
}

#alerta>a {
    flex       : 0 0 1rem;
    height     : 1rem;
    margin-left: 1rem;
}

#alerta.info {
    border    : 1px solid #bce8f1;
    color     : #31708f;
    background: #d9edf7;
}

#alerta.sucesso {
    border    : 1px solid #d6e9c6;
    color     : #3c763d;
    background: #dff0d8;
}

#alerta.erro {
    border    : 1px solid #ebccd1;
    color     : #a94442;
    background: #f2dede;
}

#alerta.erro>a {
    background: url("../img/alerta-close-erro.svg") no-repeat center;
}

#alerta.info>a {
    background: url("../img/alerta-close-info.svg") no-repeat center;
}

#alerta.sucesso>a {
    background: url("../img/alerta-close-sucesso.svg") no-repeat center;
}

#alerta>a:hover {
    background: url("../img/close-menu.svg") no-repeat center;
}

@media (min-width: 768px) {
    #alerta {
        width: auto;
    }
}

menu {
    position       : fixed;
    top            : 0;
    left           : 0;
    width          : 100vw;
    background     : #bbb3aa;
    display        : flex;
    flex-wrap      : wrap;
    align-items    : flex-start;
    justify-content: flex-end;
    z-index        : 10;
}

menu.none {
    display: none;
}

menu>* {
    display: block;
}

menu>header {
    height          : 3rem;
    line-height     : 3rem;
    padding         : 0 20px 0 20px;
    width           : calc(100% - 5rem);
    background-color: #ffc20e;
    font-weight     : bold;
    font-size       : 1.2rem;
    overflow        : hidden;
}

@media (min-width: 680px) {
    menu>header {
        padding: 0 40px 0 40px;
    }
}

menu>.diagonal {
    width                     : 3rem;
    height                    : 3rem;
    background                : #ffc20e;
    -webkit-transform         : skew(-40deg);
    transform                 : skew(-40deg);
    margin-left               : -1.5rem;
    margin-right              : 0.5rem;
    border-bottom-right-radius: 4px;
}

menu>.close {
    height         : 3rem;
    width          : 3rem;
    background     : white;
    background     : url(../img/close-white.svg) no-repeat center;
    background-size: 2rem 2rem;
}

menu>nav {
    display       : flex;
    flex-wrap     : wrap;
    flex-direction: row;
    width         : 100%;
    max-height    : calc(100vh - 3rem);
    overflow      : auto;
}

menu>nav a,
menu>nav div {
    display: block;
    width  : 100%;
}

menu>nav a {
    min-height     : 3rem;
    line-height    : 3rem;
    color          : white;
    width          : 100%;
    text-decoration: none;
    padding        : 0 20px;
    border-bottom  : 1px solid transparent;
    cursor         : default;
}

menu nav a:hover {
    text-decoration: none;
}

menu>nav a[href] {
    cursor: pointer;
}

menu>nav .submenu {
    margin: 0;
}

menu>nav .submenu.none {
    display: none;
}

menu>nav .submenu a {
    background   : #818385;
    padding      : 0 40px;
    border-bottom: 1px solid #8c8c8c;
    font-size    : 0.9rem;
    min-height   : 2.5rem;
    line-height  : 2.5rem;
}

menu>nav .submenu .submenu a {
    padding  : 0 70px;
    font-size: 0.8rem;
}

@media (min-width: 1024px) {

    menu>nav>a:hover {
        background: #83b2c6;
    }

    menu>nav>a:active {
        background: #788b95;
    }

    menu>nav .submenu a:hover {
        background-color: #6699b0;
    }

    menu>nav .submenu a:active {
        background: #788b95;
    }

}

menu>nav a.expandir {
    background-image   : url(../img/expandir-menu.png);
    background-repeat  : no-repeat;
    background-position: right 20px center;
}

menu>nav a.recolher {
    background-image   : url(../img/recolher-menu.png);
    background-repeat  : no-repeat;
    background-position: right 20px center;
    background-color   : #6699b0;
}

@media (min-width: 680px) {

    menu>nav {
        max-height: calc(100vh - 5.5rem);
    }

    menu>nav a {
        padding: 0 40px;
    }

    menu>nav .submenu a {
        padding: 0 60px;
    }
}

@media (min-width: 768px) {
    menu {
        width: 425px;
    }
}

.acoes-grid {
    height         : 2.5rem;
    line-height    : 2.5rem;
    background     : #d2d3d4;
    padding        : 0 20px;
    transition     : ease-in 10s all;
    display        : flex;
    align-items    : center;
    justify-content: center;
}

.acoes-grid>* {
    display: block;
}

.acoes-grid>a {
    font-size      : 0;
    height         : 2.5rem;
    width          : 2.5rem;
    background     : no-repeat center;
    background-size: 1.5rem 1.5rem;
    margin         : 0 0.5rem;
    flex           : 0 0 2.5rem;
}

.acoes-grid a:hover {
    background-color: #c5c6c7;
}

.acoes-grid a:active {
    background-color: #b8b8b9;
}

.acoes-grid a.texto {
    font-size      : 1rem;
    flex           : 0 1 auto;
    padding        : 0 0.5rem;
    color          : #00b1eb;
    font-weight    : bold;
    text-decoration: none;
}

.acoes-grid a.texto[href] {
    text-decoration: underline;
}

.acoes-grid>a.pesquisar {
    background-image: url(../img/pesquisar.png);
}

.acoes-grid>a.novo,
.acoes-grid>a.nova {
    background-image: url(../img/novo.png);
}

.acoes-grid>a.opcoes {
    background-image: url(../img/settings.png);
    background-image: url(../img/tune.svg);
}

.acoes-grid.fixo {
    position: fixed;
    top     : 2.5rem;
    left    : 0;
    width   : 100%;
    z-index : 1;
}

.grid {
    text-align: center;
}

.grid.fixo {
    text-align: center;
    margin-top: 2.5rem;
}

@media (min-width: 768px) {

    .acoes-grid {
        padding: 0 40px;
    }

    .acoes-grid input {
        max-width: 400px;
    }

    .grid {
        height  : calc(100% - 2.5rem);
        overflow: auto;
        padding : 0.5rem;

    }
}

.painel-opcoes {
    position        : fixed;
    z-index         : 10;
    top             : 0;
    right           : -75vw;
    width           : 75vw;
    height          : 100vh;
    background-color: white;
    transition      : 0.15s ease-in-out all;
    padding         : 1rem;
    overflow        : auto;
}

.painel-opcoes.visivel {
    right: 0;
}

@media (min-width: 768px) {

    .painel-opcoes {
        right: -400px;
        width: 400px;
    }

    .painel-opcoes .botoes>a.botao,
    .painel-opcoes .botoes>a.botao-principal,
    .painel-opcoes .botoes>button.botao-principal,
    .painel-opcoes .botoes>button.botao {
        width: 100%;
    }

}

.vidro {
    position       : fixed;
    top            : 0;
    left           : 0;
    width          : 100vw;
    height         : 100vh;
    background     : rgba(0, 0, 0, 0.5);
    display        : none;
    z-index        : 10;
    justify-content: center;
    align-items    : center;
}

body.modal .vidro {
    display: flex;
}

.container {
    display        : flex;
    flex-wrap      : wrap;
    overflow       : auto;
    justify-content: center;
}

.container>div {
    display: block;
    width  : 100%;
    padding: 10px 20px;
}

.container>div.p {
    width: 100%;
}

.container>div.m {
    width: 100%;
}

.container>div.g {
    width: 100%;
}

@media (min-width: 768px) {

    .container>div {
        width: 50%;
    }

    .container>div.p {
        width: 50%;
    }

    .container>div.m {
        width: 50%;
    }

    .container>div.g {
        width: 100%;
    }
}

@media (min-width: 1024px) {

    .container>div {
        width: 50%;
    }

    .container>div.p {
        width: 33.333333%;
    }

    .container>div.m {
        width    : 50%;
        max-width: 750px;
    }

    .container>div.g {
        width: 100%;
    }
}

.card {
    background-color: white;
    padding         : 1rem;
    box-shadow      : 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    box-shadow      : 0 2px 5px rgba(0, 0, 0, .4);
    width           : 100%;
    display         : block;
    height          : 100%;
    text-align      : center;
}

h1,
h2,
h3 {
    margin: 0.5rem 0;
}

h1 {
    color    : #0d426b;
    font-size: 1.25rem;
}

h2 {
    font-size: 1.1rem;
}

h3 {
    font-size: 1rem;
}

.form>h1,
.form>h2,
.form>h3 {
    width: 100%;
}

.form .campos {
    display: block;
    width  : 100%;
}

.form .campos.horizontais {
    display  : flex;
    flex-flow: row wrap;
}

.form .campos .campo {
    display      : block;
    width        : 100%;
    margin-bottom: 0.75rem;
}

.form .campos.horizontais .campo {
    padding      : 0 1rem;
    display      : block;
    width        : auto;
    flex         : 1 1 auto;
    margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
    .form .campos .horizontais {
        display        : flex;
        flex-flow      : row wrap;
        justify-content: flex-start;
    }

    .form .campos .horizontais .campo {
        width        : auto;
        flex         : 0 1 auto;
        padding-right: 0.75rem;
        /*TODO definição de Arivaldo que precisa ser testada em todos os devices.*/
    }
}

.form input,
.form select,
.form textarea,
.form .dado {
    border: 1px solid #b3b3b3;
}

.form .mensagem {
    color     : #bcb3aa;
    font-style: italic;
    font-size : 0.8rem;
}

.form .mensagem {
    color     : #bcb3aa;
    font-style: italic;
    font-size : 0.8rem;
}

.form .rotulo span,
.form .rotulo a,
.form .controle span {
    display       : inline-block;
    height        : 2rem;
    line-height   : 2rem;
    vertical-align: top;
}

.form .controle span {
    height    : auto;
    min-height: auto;
}

.form .rotulo span.required {
    color      : #e60000;
    font-weight: bold;
    font-size  : 1.1rem;
}

.form .campo.erro input,
.form .campo.erro select,
.form .campo.erro textarea {
    border: 1px solid #ed1c24;
}

input:focus,
select:focus,
textarea:focus {
    border: 1px solid #00b1eb;
}

.form .campo.erro .mensagem {
    color: #ed1c24;
}

.form .dado {
    padding: 0 0.5rem;
}

.form {
    display: block;
    width  : 100%;
}

.form.escuro {
    background: #d2d3d4;
    padding   : 1rem;
    border-top: 2px solid #ffc90c;
}

.form.escuro input,
.form.escuro select,
.form.escuro textarea {
    border: none;
}

.form .controle {
    display: flex;
}

.form .controle a {
    min-height         : 2rem;
    min-width          : 2rem;
    line-height        : 2rem;
    margin             : 0 0.2rem;
    background-repeat  : no-repeat;
    background-position: center;
    text-decoration    : none;

}

.form .controle a:hover {
    background-color: #eee;
}

.form .controle a.calendar {
    background-image: url(../img/calendar.svg);
}

.form .controle a.clock {
    background-image: url(../img/clock.svg);
}

.form .controle a.pesquisar {
    background-image: url(../img/search.svg);
}

.form .controle a.fechar {
    background-image: url(../img/close-blue.svg);
}

.form .controle .radios,
.form .controle .checks {
    display: block;
    width  : 100%;
}

table {
    background: white;
    display   : block;
    padding   : 0.25rem 0;
}

table tbody {
    display: block;
}

table thead {
    display: none;
}

table tbody tr {
    background  : white;
    display     : flex;
    flex-wrap   : wrap;
    margin      : 0 0.5rem 0.5rem 0.5rem;
    padding     : 0.5rem;
    /*box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);*/
    box-shadow  : 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    /*box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);*/
    /*box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);*/
    /*box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);*/
    /*box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);*/

}

table th {
    text-align: left;
}

table td:before {
    display    : block;
    text-align : left;
    content    : attr(data-titulo);
    color      : #0d426b;
    font-weight: bold;
}

table td {
    flex         : 1 1 100%;
    order        : 1;
    display      : block;
    text-align   : left;
    margin-bottom: 0.5rem;

}

table td:not([data-titulo]) {
    order : 2;
    border: none;
}

@media (min-width: 1024px) {

    table {
        display        : table;
        margin         : 0 auto;
        border-collapse: collapse;
        font-size      : 0.8rem;
    }

    table tbody {
        display: table-row-group;
    }

    table thead {
        display: table-header-group;
    }

    table tbody tr {
        display      : table-row;
        border       : none;
        border-bottom: 1px solid #e6e6e5;
        box-shadow   : none;
    }

    table th {
        background-color: #fff;
        color           : #666;
        border-bottom   : 1px solid #e6e6e5;
        border-top      : 1px solid #e6e6e5;
        padding         : 0.5rem 0.25rem 0.5rem 0;
        font-size       : 0.9rem;
    }

    table th:first-child {
        padding: 0.25rem;
    }

    table th.ordem-natural,
    table th.ordem-crescente,
    table th.ordem-decrescente {
        cursor             : default;
        -webkit-user-select: none;
        -moz-user-select   : none;
        -ms-user-select    : none;
        user-select        : none;
        padding-right      : 1rem;
        background-position: center right 5px;
        background-repeat  : no-repeat;
    }

    table th.ordem-natural {
        background-image: url(../img/ordem-natural.png);
    }

    table th.ordem-crescente {
        background-image: url(../img/ordem-crescente.png);
    }

    table th.ordem-decrescente {
        background-image: url(../img/ordem-decrescente.png);
    }

    table td:before {
        display: none;
    }

    table td {
        display: table-cell;
        padding: 0.25rem 1rem 0.25rem 0;
        color  : #666;
    }

    table td.numero {
        text-align: right;
    }

}

/*div.modal, div.modal-flutuante {
    position: fixed;
    z-index: 11;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    overflow: auto;
    display: none;
    max-width: calc(100vw - 1rem);
    max-height: calc(100vh - 1rem);
    transition: 0.15s ease-in-out all;
}*/

@media (min-width: 1024px) {

    div.modal-flutuante {
        position : absolute;
        top      : 0;
        left     : 0;
        transform: none;
    }

}

div.modal-flutuante.visivel {
    display: block;
}

div.modal.aberto {
    display: block;
}

div.modal>header {
    height : 2rem;
    display: flex;
}

div.modal>header h2 {
    font-size  : 1rem;
    height     : 2rem;
    line-height: 2rem;
    overflow   : hidden;
    padding    : 0 1rem;
}

div.modal>header .fechar {
    margin-left: auto;
    height     : 2rem;
    width      : 2rem;
    background : url(../img/close-blue.svg) no-repeat center;
}

div.modal>header .fechar:hover {
    background-color: #eee;
}

div.modal>section {
    padding : 1rem;
    height  : calc(100% - 2rem);
    overflow: auto;
}

div.modal.p {
    padding: 1rem;
}

div.g {
    width     : 100vw;
    height    : 100vh;
    max-width : 100vw;
    max-height: 100vh;
    border    : none;
}

@media (min-width: 1024px) {
    div.g {
        width : calc(100vw - 4rem);
        height: calc(100vh - 4rem);
    }
}

div.modal.lateral {
    display   : block;
    left      : auto;
    top       : 0;
    right     : -75vw;
    width     : 75vw;
    transform : none;
    height    : 100vh;
    max-height: 100vh;
    margin    : 0;
    padding   : 1rem;
}

div.modal.lateral.aberto {
    right: 0;
}

@media (min-width: 768px) {
    div.modal.lateral {
        right: -400px;
        width: 400px;
    }
}

div.imagens {
    display       : flex;
    flex-wrap     : wrap;
    flex-direction: column;
    font-size     : 0.8rem;
    font-style    : italic;
}

div.imagens>div {
    margin: 0.5rem;
}

div.imagens img {
    width: 100%;
}

.data {
    text-align: center;
}

.inteiro {
    text-align: right;
}

@media (min-width: 1024px) {

    div.imagens {
        flex-direction : row;
        justify-content: space-between;
    }

    div.imagens>div {
        width: calc(50% - 1rem);
    }

    div.imagens>div img {
        margin: auto;
    }
}

@media (min-width: 768px) {

    .data {
        width: 100px;
    }

    .inteiro {
        width: 150px;
    }

    .campo-hora {
        text-align: center;
        width     : 100px;
    }

}

.calendario {
    background         : white;
    width              : calc(100vw - 2rem);
    height             : calc(100vh - 5rem);
    border             : 1px solid #ccc;
    box-shadow         : 0 2px 5px rgba(0, 0, 0, .4);
    margin             : auto;
    -webkit-user-select: none;
    -moz-user-select   : none;
    -ms-user-select    : none;
    user-select        : none;
    display            : none;
    z-index            : 999;
}

@media (min-width: 768px) {

    .calendario {
        width : 400px;
        height: 400px;
    }
}

@media (min-width: 1024px) {
    .calendario {
        width : 300px;
        height: 300px;
    }
}

.calendario.visivel {
    display: block;
}

.calendario a {
    color          : black;
    text-decoration: none;
}

.calendario a:hover {
    background: #eee;
}

.calendario .ctn-mes {
    height       : 100%;
    width        : 100%;
    display      : flex;
    flex-wrap    : wrap;
    align-content: flex-start;
}

.calendario .ctn-mes>* {
    height         : 11.111111111111111111111111111111%;
    display        : flex;
    justify-content: center;
    align-items    : center;
}

.calendario .ctn-mes .mes-anterior,
.calendario .ctn-mes .mes-seguinte {
    background     : brown;
    width          : 14.285714285714285714285714285714%;
    background     : no-repeat center;
    background-size: contain;
}

.calendario .ctn-mes .mes-anterior {
    background-image: url(../img/esquerda.svg);
}

.calendario .ctn-mes .mes-anterior:hover,
.calendario .ctn-mes .mes-seguinte:hover {
    background-color: #eee;
}

.calendario .ctn-mes .mes-seguinte {
    background-image: url(../img/direita.svg);
}

.calendario .ctn-mes .mes {
    width: 71.428571428571428571428571428571%;
}

.calendario .dia-semana {
    width: 14.285714285714285714285714285714%;
}

.calendario .dia-mes {
    width: 14.285714285714285714285714285714%;
}

.calendario .dia-mes.fora {
    color: #CCC;
}

.calendario .dia-mes.selecionado {
    background: #337ab7;
    color     : white;
}

.calendario div.controles {
    width          : 100%;
    height         : 11.111111111111111111111111111111%;
    display        : flex;
    justify-content: flex-end;
}

.calendario .controles>* {
    height         : 100%;
    display        : flex;
    align-items    : center;
    justify-content: center;
}

.calendario .controles a.ok,
.calendario .controles a.cancelar {
    padding: 0 1rem;
}

.calendario .controles .clock {
    width     : 14.285714285714285714285714285714%;
    background: url(../img/clock.svg) center no-repeat;
}

.calendario .controles .clock:hover {
    background-color: #eee;
}

.calendario .controles .calendar {
    width     : 14.285714285714285714285714285714%;
    background: url(../img/calendar.svg) center no-repeat;
}

.calendario .controles .calendar:hover {
    background-color: #eee;
}

.calendario .ctn-anos {
    width    : 100%;
    height   : 100%;
    display  : flex;
    flex-wrap: wrap;
}

.calendario .ctn-anos>* {
    height         : 16.666666666666666666666666666667%;
    display        : flex;
    align-items    : center;
    justify-content: center;
    width          : 25%;
}

.calendario .ctn-anos .esquerda,
.calendario .ctn-anos .direita {
    background-size    : contain;
    background-repeat  : no-repeat;
    background-position: center;
}

.calendario .ctn-anos .esquerda:hover,
.calendario .ctn-anos .direita:hover {
    background-color: #eee;
}

.calendario .ctn-anos .esquerda {
    background-image: url(../img/esquerda.svg);
}

.calendario .ctn-anos .direita {
    background-image: url(../img/direita.svg);
}

.calendario .voltar-mes {
    width: 50%;
}

.calendario .ctn-horas {
    width    : 100%;
    height   : 100%;
    display  : flex;
    flex-wrap: wrap;
}

.calendario .ctn-horas>* {
    height         : 29.62962962962962962962962962963%;
    width          : 33.333333333333333333333333333333%;
    font-size      : 3rem;
    display        : flex;
    align-items    : center;
    justify-content: center;
}

.calendario .ctn-horas .controles {
    font-size: 1rem;
}

.calendario .ctn-horas .cima,
.calendario .ctn-horas .baixo {
    background     : center no-repeat;
    background-size: 50% 50%;
}

.calendario .ctn-horas .cima:hover,
.calendario .ctn-horas .baixo:hover {
    background-color: #eee;
}

.calendario .ctn-horas .cima {
    background-image: url(../img/cima.svg);
}

.calendario .ctn-horas .baixo {
    background-image: url(../img/baixo.svg);
}

.calendario .ctn-seletor-horas {
    width    : 100%;
    height   : 100%;
    display  : flex;
    flex-wrap: wrap;
}

.calendario .ctn-seletor-horas>* {
    display        : flex;
    justify-content: center;
    align-items    : center;
    width          : 25%;
}

.calendario .ctn-seletor-minutos {
    width    : 100%;
    height   : 100%;
    display  : flex;
    flex-wrap: wrap;
}

.calendario .ctn-seletor-minutos>* {
    display        : flex;
    justify-content: center;
    align-items    : center;
    width          : 25%;
}

@keyframes giroloading {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

#loading,
.loading {
    width           : 2rem;
    height          : 2rem;
    box-shadow      : 0 0 10px #ccc;
    border-radius   : 50%;
    margin          : 10px;
    animation       : giroloading 1s linear infinite;
    background-color: white;
    display         : block;
}

.loading {
    margin: auto;
}

#loading {
    position: absolute;
    z-index : 4;
    top     : 0px;
    right   : 0px;
    display : none;
}

#loading.visivel {
    display: block;
}

#loading circle,
.loading circle {
    stroke           : steelblue;
    stroke-width     : 5px;
    fill             : none;
    stroke-linecap   : round;
    stroke-dasharray : 154px;
    stroke-dashoffset: 33px;
}

.qbe {
    display        : flex;
    justify-content: center;
}

.qbe>a {
    height             : 2rem;
    line-height        : 2rem;
    width              : 2rem;
    background-repeat  : no-repeat;
    background-position: center;

}

.qbe>a:hover {
    background-color: #eee;
}

.qbe>a.pesquisar {
    background-image: url(../img/search.svg);
}

@media (min-width: 768px) {
    .qbe>input {
        width: 75%;
    }
}

div.erro-inline {
    min-height         : 2rem;
    line-height        : 2rem;
    margin-bottom      : 2px;
    background         : #e6e7e8;
    padding            : 0 0.25rem 0 2.25rem;
    background-position: 2px center;
    background-repeat  : no-repeat;
    background-size    : 1.75rem 1.75rem;
    color              : #c1282d;
}


/* ############################################# */



.azul-comum {
    color            : #fff;
    background-image : linear-gradient(to bottom, #0083ca 0px, #0083ca 100%);
    background-repeat: repeat-x;
    border-color     : #0083ca;
    box-shadow       : 0 1px 3px rgba(0, 0, 0, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
}

.azul1 {
    color            : #fff;
    background-image : linear-gradient(to bottom, #00416B 0px, #00416B 100%);
    background-repeat: repeat-x;
    border-color     : #00416B;
    box-shadow       : 0 1px 3px rgba(0, 0, 0, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
}

.azul2 {
    background-image : linear-gradient(to bottom, #bee0f4 0px, #bee0f4 100%);
    background-repeat: repeat-x;
    border-color     : #bee0f4;
    box-shadow       : 0 1px 3px rgba(0, 0, 0, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
}

.azul3 {
    background-image : linear-gradient(to bottom, #0083CA 0px, #0083CA 100%);
    background-repeat: repeat-x;
    border-color     : #0083CA;
    box-shadow       : 0 1px 3px rgba(0, 0, 0, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
    color            : #fff;
}

.azul4 {
    background-image : linear-gradient(to bottom, #3F99D3 0px, #3F99D3 100%);
    background-repeat: repeat-x;
    border-color     : #3F99D3;
    box-shadow       : 0 1px 3px rgba(0, 0, 0, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
    color            : #fff;
}

.azul5 {
    background-image : linear-gradient(to bottom, #007BCA 0px, #007BCA 100%);
    background-repeat: repeat-x;
    border-color     : #007BCA;
    box-shadow       : 0 1px 3px rgba(0, 0, 0, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
    color            : #fff;
}

.azul6 {
    background-image : linear-gradient(to bottom, #16364A 0px, #16364A 100%);
    background-repeat: repeat-x;
    border-color     : #16364A;
    box-shadow       : 0 1px 3px rgba(0, 0, 0, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
    color            : #fff;
}

.azul7 {
    background-image : linear-gradient(to bottom, #005C97 0px, #005C97 100%);
    background-repeat: repeat-x;
    border-color     : #005C97;
    box-shadow       : 0 1px 3px rgba(0, 0, 0, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
    color            : #fff;
}

.amarelo4 {
    background-image : linear-gradient(to bottom, #CD992B 0px, #CD992B 100%);
    background-repeat: repeat-x;
    border-color     : #CD992B;
    box-shadow       : 0 1px 3px rgba(0, 0, 0, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
    color            : #fff;
}

.amarelo5 {
    background-image : linear-gradient(to bottom, #FFE600 0px, #FFE600 100%);
    background-repeat: repeat-x;
    border-color     : #FFE600;
    box-shadow       : 0 1px 3px rgba(0, 0, 0, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
}

.amarelo6 {
    background-image : linear-gradient(to bottom, #FFC20E 0px, #FFC20E 100%);
    background-repeat: repeat-x;
    border-color     : #FFC20E;
    box-shadow       : 0 1px 3px rgba(0, 0, 0, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
}

.cinza5 {
    background-image : linear-gradient(to bottom, #f5f5f5 0px, #f5f5f5 100%);
    background-repeat: repeat-x;
    border-color     : #f5f5f5;
    box-shadow       : 0 1px 3px rgba(0, 0, 0, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
}

.cinza6 {
    background-image : linear-gradient(to bottom, #dddddd 0px, #dddddd 100%);
    background-repeat: repeat-x;
    border-color     : #dddddd;
    box-shadow       : 0 1px 3px rgba(0, 0, 0, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
}


.cinza7 {
    background-image : linear-gradient(to bottom, #D1CCC7 0px, #D1CCC7 100%);
    background-repeat: repeat-x;
    border-color     : #D1CCC7;
    box-shadow       : 0 1px 3px rgba(0, 0, 0, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
}

.cinza8 {
    background-image : linear-gradient(to bottom, #BDB4AB 0px, #BDB4AB 100%);
    background-repeat: repeat-x;
    border-color     : #BDB4AB;
    box-shadow       : 0 1px 3px rgba(0, 0, 0, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
}

.roxoClaro {
    background-image : linear-gradient(to bottom, #eee8f5 0px, #eee8f5 100%);
    background-repeat: repeat-x;
    border-color     : #eee8f5;
    box-shadow       : 0 1px 3px rgba(0, 0, 0, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
}

.vermelho {
    background-image : linear-gradient(to bottom, #660000 0px, #660000 100%);
    background-repeat: repeat-x;
    border-color     : #660000;
    box-shadow       : 0 1px 3px rgba(0, 0, 0, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
    color            : #fff;
}

a:hover {
    text-decoration: none;
}

.div-assuntos {
    min-height: 100px;
}

.page-head-line {
    font-weight   : 600;
    padding-bottom: 12px;
    border-bottom : 2px solid #00416B;
    text-transform: uppercase;
    color         : #00416B;
    /*font-size   : 20px;*/
    margin-bottom : 30px;
}

.texto-centralizado {
    text-align: center;
}

a.lupa {
    background-image: url(../img/search.svg);
}

.texto-nao-autenticado {
    color: red;
}