/*==============================================================
URL's REFERENCIA LESS
    https://coderwall.com/p/4u7x0g/linear-gradient-usando-less
==============================================================*/
/*==============================================================
ARQUIVOS EXTERNOS
==============================================================*/
/* Fonte padrão do site - tipografia*/
/* @import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');*/
/* Ícones do Google para o site */
/* Url referencias: https://material.io/tools/icons/?style=baseline */
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
@import url('icoMoon.css');
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNZ.ttf) format('truetype');
}
.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
}
/*==============================================================
BLOCO ESTRUTURA DO CORPO DAS PÁGINAS
==============================================================*/
/* Reseta os estilos padrões dos navegadores */
* {
    /*margin: 0px;
        padding: 0px;*/
    outline-style: none;
    outline: none;
    font-family: 'Open Sans', sans-serif;
    box-sizing: border-box;
}
/* Configura o HTML e o BODY */
html, body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    background-color: #FFFFFF;
}
p {
    margin: 15px 0 15px 0;
}
p:first-child {
    margin-top: 0px !important;
}
p:last-child {
    margin-bottom: 0px !important;
}
/* torna o body flexível/responsivo */
body {
    display: flex;
    flex-direction: column;
}
/* largura padrão da páginas */
.largura_padrao {
    max-width: 800px;
    margin: auto;/*background-color: #F4D0D1;*/
}
/* barra superior principal que agrupa o conteúdo */
.barra_superior_principal {
    background-color: #c7c0b8;
}
/* conteúdo da barra superior principal */
.barra_superior_principal_conteudo {
    color: #FFFFFF;
    font-size: 16px;
    padding: 10px 0px 10px 0px;
}
/* cabeçalho principal */
.cabecalho_principal {
    background-color: #FFFFFF;
}
/* conteúdo do cabeçalho */
.cabecalho_principal_conteudo {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: stretch;
    align-items: center;
}
/* logotipo do cabeçaho */
.logo_cabecalho {
    margin: auto;
    text-align: center;/*        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content:center;
        align-content: center;
        align-items: center;*/
}
/* miolo principal que agrupa os conteúdos */
.miolo_principal {
    flex: auto;
    /* faz com que o elemento ocupe todo o espaço vertical que sobrar */
    background-color: #FFFFFF;
    padding-bottom: 15px;
}
/* título da página (conteúdo) */
.miolo_principal_titulo .titulo {
    font-family: Times, "Times New Roman", "serif";
    color: #646363;
    font-size: 20px;
    font-weight: bolder;
    text-transform: uppercase;
    padding: 15px;
    border-bottom: solid 1px #721917;
    width: 50%;
}
.miolo_principal_titulo .titulo::first-letter {
  font-size: 28px;
}
/* Conteúdo da página */
.miolo_principal_conteudo {
    color: #26282B;
    __margin-top: 5px;
    padding: 25px;
    font-size: 18px;
}
.miolo_principal_conteudo p {
    text-align: justify;
}
.miolo_principal_conteudo p ~ p {
    margin-top: 20px;
}
/* rodapé principal */
.rodape_principal {
    background-color: #c7c0b8;
}
/* conteúdo do rodapé */
.rodape_principal_conteudo {
    color: #333333;
    font-size: 14px;
    padding: 10px 0 10px 0;
    text-align: center;
}
/* barra inferior principal */
.barra_inferior_principal {
    background-color: #212121;
}
/* conteúdo da barra inferior */
.barra_inferior_principal_conteudo {
    text-align: center;
    padding: 6px 5px 2px 5px;
}
/*==============================================================
BLOCO FORMULÁRIOS E SEUS ELEMENTOS
==============================================================*/
/* Agrupa todos os elementos usados no formulário */
.form_principal {
    margin: auto;
    background-color: #FFFFFF;
    padding: 10px;
}
/* Aplica estilo ao form_principal e form */
.form_principal, form {
    border-radius: 5px;
}
/* Cabeçalho do formulário */
.form_cabecalho {
    padding: 3px;
    font-weight: bolder;
    border-bottom: solid 1px #CECECE;
}
/* Título do formulário */
.form_titulo {
    color: #FFFFFF;
    background-color: #000000;
    padding: 7px 5px;
}
/* Rodapé do formulário */
.form_rodape {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-content: stretch;
    align-items: center;
}
/* Tag label dos inputs */
label {
    color: #24222A;
    font-size: 14px;
    margin-bottom: 3px;
}
/* Inputs em estado normal */
input[type=text], input[type=email], input[type=password], input[type=url], input[type=tel], input[type=search], input[type=number], input[type=color], input[type=month], input[type=week], input[type=date], input[type=time], input[type=datetime], input[type=datetime-local], input[type=file], textarea, select {
    min-height: 35px;
    border: 1px solid #B3C1D0;
    border-radius: 3px;
    box-shadow: inset 0px 0px 2px 1px #D7DDFB;
    background-color: #FFFFFF;
    font-size: 17px;
    padding: 2px 2px 2px 4px;
    resize: vertical;
}
/* Inputs ao receber o foco */
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, input[type=url]:focus, input[type=tel]:focus, input[type=search]:focus, input[type=number]:focus, input[type=color]:focus, input[type=month]:focus, input[type=week]:focus, input[type=date]:focus, input[type=time]:focus, input[type=datetime]:focus, input[type=datetime-local]:focus, input[type=file]:focus, textarea:focus, select:focus {
    border: 1px solid #00aea3;
    box-shadow: none;
}
/* Placeholder dos inputs */
::placeholder {
 color: #74839E;
 font-size: 16px;
}
/* Sinal que chama a atenção para campos cujo o preenchimento é obrigatório */
.sinal_campo_obrigatorio {
    font-size: 16px;
    font-weight: bold;
    color: #FF0000;
    line-height: 0.6;
}
.destaca_input_obrigatorio {
    border: solid 1px #FF0000 !important;
}
/* Usado para abrigar um campo input */
.input_linha {
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    flex: auto;
}
/* Configurações dos inputs checkpox e radio */
input[type=checkbox], input[type=radio] {
    width: 20px;
    height: 20px;
    margin-right: 5px;
}
/* Links esqueceu sua senha */
a.esqueceu_sua_senha {
    font-size: 15px;
    margin: 10px 0px 10px 0px;
    color: #176eb7;
    text-decoration: none;
}
/* Elemento que agrupa o chekbox e a frase lembrar usuário e senha */
.lembrar_usuario_e_senha {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: center;
}
/*==============================================================
BLOCO CAPTCHA - NÃO SOU UM ROBÔ
==============================================================*/
        .captcha {
            font-weight: 700;
            border: solid 1px #d7d7d7;
            margin: auto;
            margin-top: 10px;
            padding: 10px;
            border-radius: 3px;
            cursor: pointer;            
            display: flex;
            flex-direction: row;    
            justify-content: space-between;
            align-content: stretch;
            align-items: stretch;
            background-color: #f9f9f9;
        }
        .captcha-esquerdo {
            color: #828282;
            font-size: 13px;
            font-weight: 700;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-content: stretch;
            align-items: center;
        }
        .captcha-direito {
            color: #4e8ef5;
        }
        .captcha-check-box-vazio {
            border: solid 2px #c1c1c1;
            border-radius: 2px;
        }
        .captcha-check-box-ticado {
            color: #009e55;
            font-weight: 700;
            display: none;
        }
        .captcha-check-box-vazio, .captcha-check-box-ticado {
            margin-right: 8px;
            width: 22px;
            height: 22px;
        }/* Captcha principal agrupa todos os elementos */


/*==============================================================
BLOCO BOTÕES
==============================================================*/
/* elementos less */
/* elemento onde os botões ficam dentro */
.bt_grupo {
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-content: stretch;
    align-items: stretch;
}
/* aplica margem (espaçamento) a todos os botões após o primeiro */
.bt_grupo input ~ input, a.bt {
    margin-left: 10px;
}
/* botões em estado normal */
input[type=button], input[type=submit], input[type=reset], a.bt {
    color: #455166;
    font-size: 15px;
    text-decoration: none;
    min-width: 60px;
    border: solid 1px #abb2bf;
    border-radius: 3px;
    padding: 7px 10px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-color: #D7DAE3;
    background: linear-gradient(to bottom, #f2f3f7 0%, #d7dae3 100%);
}
/* botões ao passar (hover) o ponteiro do mouse */
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover, a.bt:hover {
    color: #000000;
    background: linear-gradient(to top, #f2f3f7 0%, #d7dae3 100%);
}
/* botões desabilitados - desabled */
input[type=button]:disabled, input[type=submit]:disabled, input[type=reset]:disabled, a.bt:disabled {
    color: #7C8BA6;
    text-shadow: 1px 1px #FFFFFF;
    background: linear-gradient(to top, #f2f3f7 0%, #d7dae3 100%);
    cursor: not-allowed;
}
/*==============================================================
BLOCO JANELA MODAL
==============================================================*/
/* janela principal, ocupa a tela inteira  */
.modal_principal {
    background-color: rgba(255, 255, 255, 0.3);
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 1000;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: stretch;
    align-items: center;
}
/* agrupa todos os elementos */
.modal_box {
    width: 290px;
    border: solid 1px #ACAEB8;
    background-color: #FFFFFF;
    box-shadow: 0px 0px 10px #77767C;
}
/* título da modal_box */
.modal_box_titulo {
    font-size: 18px;
    text-align: center;
    line-height: 46px;
    color: #FFFFFF;
    background-color: #000000;
}
/* contém os conteúdo texto e outros */
.modal_box_conteudo {
    padding-top: 20px;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 20px;
    text-align: center;
    line-height: 20px;
}
/* rodapé - agrupa os botões */
.modal_box_rodape {
    line-height: 46px;
    text-align: center;
    border-top: 1px solid #E2E2E2;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: stretch;
    align-items: center;
}
/* botão ok e cancelar - configurações gerais */
.modal_box_bt_ok, .modal_box_bt_cancelar {
    color: #000000;
    font-size: 18px;
    text-align: center;
    width: 50%;
    cursor: pointer;
}
/* botão ok - atribui borda esquerda */
.modal_box_bt_ok {
    border-left: 1px solid #E2E2E2;
}
/* botão cancelar - ao passar (hover) o ponteiro do mouse */
.modal_box_bt_cancelar:hover {
    color: #1048FF;
    font-weight: bolder;
}
/* botão ok - ao passar (hover) o ponteiro do mouse */
.modal_box_bt_ok:hover {
    color: #FF0004;
    font-weight: bolder;
}
/*==============================================================
BLOCO MENSAGENS DE ALERTA
==============================================================*/
/* Mensagem alerta principal agrupa todos os elementos  */
.msg_alerta_principal {
    border: solid 1px;
    border-radius: 4px;
    padding: 10px;
    text-align: center;
    font-size: 14px;
    margin: 5px auto 5px auto;
    max_width: 600px;
}
/* Msg alerta sucesso */
.msg_alerta_sucesso {
    color: #2e722e;
    border-color: #C0DDB1;
    background-color: #eaf6e4;
}
/* Msg alerta informação */
.msg_alerta_info {
    color: #236a95;
    border-color: #A5D8F1;
    background-color: #e5f4fa;
}
/* Msg alerta atenção */
.msg_alerta_atencao {
    color: #8e662d;
    border-color: #F1DEAB;
    background-color: #fdfbed;
}
/* Msg alerta perigo */
.msg_alerta_vermelho {
    color: #b63633;
    border-color: #E8BBC2;
    background-color: #f7e9e9;
}
/*==============================================================
BLOCO TABLE GRID - LISTAGEM DADOS DO DB
==============================================================*/
.table_grid_principal {
    border-collapse: collapse;
    margin: auto;
    background-color: #FFFFFF;
    border-style: solid;
    border-color: #A4B4C3;
    border-width: 1px 1px 1px 1px;
}
/* Caption da table */
.table_grid_principal caption {
    text-align: left;
    color: #606378;
    font-size: 19px;
    border-style: solid;
    border-color: #A4B4C3;
    border-width: 1px 1px 0px 1px;
    padding: 3px 5px 3px 5px;
    background: linear-gradient(to bottom, #f2f3f7 0%, #d7dae3 100%);
}
/* Corpo do cabeçalho da thead */
.table_grid_principal thead {
    border-bottom: solid 1px #B4B5B8;
}
/* Th do cabeçalho da thead */
.table_grid_principal thead th {
    color: #000000;
    padding: 5px;
}
/*Tr do corpo da tbody */
.table_grid_principal tbody tr {
    border-bottom: solid 1px #B4B5B8;
}
/* Colore a tr da tbody ao passar o mouse */
table.table_grid_principal tbody tr:hover {
    /*color: #FFFFFF;*/
    cursor: default;
    background-color: #DDDEE3;
}
/* Td (conteúdos) da tbody */
.table_grid_principal tbody td {
    color: #000000;
    padding: 5px 10px 5px 10px;
}
/* Colore as tr ímpares dentro da tbody */
.table_grid_principal tbody tr:nth-child(even) {
    background-color: #EBEBEB;
}
/* Grifa a tr dentro da tbody, referente ao registro que será escluído */
.grifa_tr td {
    color: #FFFFFF !important;
    background-color: #FF0000 !important;
}
/*==============================================================
BLOCO BARRA DE FERRAMENTAS AÇÕES: ex. editar, excluir, ver detalhes
==============================================================*/
/* A barra de ferramentas */
.table_grid_principal .barra_ferramentas_acoes {
    background-color: rgba(0, 0, 0, 0.79);
    z-index: 1;
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 3px;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: stretch;
    align-items: stretch;
    display: none;
}
/* Torna a barra de ferramentas visível ao passar o mouse sobre a tr da tbody */
.table_grid_principal tbody tr:hover td .barra_ferramentas_acoes {
    display: flex;
}
/* Última td da tr no tbody que acomoda a barra de ferramentas */
.table_grid_principal tbody td:last-child {
    text-align: center;
    position: relative;
}
/* Ícones da barra de ferramentas em estado normal */
.table_grid_principal .barra_ferramentas_acoes .icon {
    color: #FFFFFF;
    font-size: 18px;
    cursor: pointer;
    padding: 3px;
}
/* Ao passar o ponteiro do mouse sobre o ícone editar dentro da barra de ferramentas */
.table_grid_principal .barra_ferramentas_acoes .icon-pencil:hover {
    color: #0eff29;
}
/* Ao passar o ponteiro do mouse sobre o ícone excluir dentro da barra de ferramentas */
.table_grid_principal .barra_ferramentas_acoes .icon-cross:hover {
    color: #FF0000;
}
/* Aplica a todos os elementos que não sejam o primeiro dentro da barra de ferramentas */
.table_grid_principal .barra_ferramentas_acoes .icon ~ .icon {
    margin-left: 15px;
}
/*==============================================================
BLOCO SPINNER - AGUARDE ÍCONES ANIMADOS RODANDO
==============================================================*/
/* Tipografia
    --------------------------------------------------------------*/
@font-face {
    font-family: 'icomoon';
    /*src:url('https://s3.amazonaws.com/icomoon.io/4/Loading/icomoon.eot?-9haulc');
        src:url('https://s3.amazonaws.com/icomoon.io/4/Loading/icomoon.eot?#iefix-9haulc') format('embedded-opentype'),
            url('https://s3.amazonaws.com/icomoon.io/4/Loading/icomoon.woff?-9haulc') format('woff'),
            url('https://s3.amazonaws.com/icomoon.io/4/Loading/icomoon.ttf?-9haulc') format('truetype'),
            url('https://s3.amazonaws.com/icomoon.io/4/Loading/icomoon.svg?-9haulc#icomoon') format('svg');*/
    src: url('icomoon.ttf?-9haulc') format('truetype');
    font-weight: normal;
    font-style: normal;
}
[class^="icon_"], [class*=" icon_"] {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
}
.icon_spinner:before {
    content: "\e000";
}
.icon_spinner_2:before {
    content: "\e001";
}
.icon_spinner_3:before {
    content: "\e002";
}
.icon_spinner_4:before {
    content: "\e003";
}
.icon_spinner_5:before {
    content: "\e004";
}
.icon_spinner_6:before {
    content: "\e005";
}
.icon_spinner_7:before {
    content: "\e006";
}
.icon_spinner_8:before {
    content: "\e007";
}
@keyframes anim-rotate {
 0% {
 transform: rotate(0);
}
 100% {
 transform: rotate(360deg);
}
}
.spinner {
    display: inline-block;
    font-size: 4em;
    height: 1em;
    line-height: 1;
    margin: .5em;
    animation: anim-rotate 2s infinite linear;
}
.spinner_steps {
    animation: anim-rotate 1s infinite steps(8);
}
.spinner_steps2 {
    animation: anim-rotate 1s infinite steps(12);
}
/* Janela principal ocupa a tela inteira  */
.spinner_principal {
    background-color: rgba(255, 255, 255, 0.9);
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 1000;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: stretch;
    align-items: center;
}
/* Agrupa todos os elementos */
.spinner_box {
    max-width: 290px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-content: stretch;
    align-items: flex-start;/*border: solid 1px #C38586;*/
}
/* Ícone do icon_spinner - esta class tem o nome definido dentro da spinner.css */
.icon_spinner, .spinner {
    font-size: 70px;
    text-align: center;
    color: #000000 !important;
    margin: 0px auto 0px auto;
    padding: 0px;
}
/* Texto do spinner */
.spinner_texto {
    color: #000000;
    font-size: 18px;
    text-align: center;
    margin: auto;/*border: solid 1px #C38586;*/
}
/*==============================================================
BLOCO MENU DE NAVEGAÇÃO
==============================================================*/
.barra-navegacao {
    display: flex;
    flex-direction: column;
    background-color: #d9d5cf;
    z-index: 1100;
}
/* RESETA */
.barra-menu ul, .barra-menu li, .barra-menu a {
    text-decoration: none;
    list-style: none;
    padding: 0;
    margin: 0;
}
/* Configurações do menu */
.barra-menu ul {
    margin: auto;
    background-color: #d9d5cf;
    display: flex;
    flex-direction: row;
    justify-content: center; /* Alinha o menu a esquerda (flex-start) centro (center) ou direita (Flex-end) */
}
.barra-menu li {
    position: relative;
}
/* Configurações icon dentro dos itens do menu */
.barra-menu .material-icons {
    font-size: 36px;
    line-height: 1px;
    margin-top: 3px;
}
/* Bordas li menu */
.barra-menu > ul > li ~ li {
    border-left: dotted 1px #8b8181;
}
/* Link em estado normal - para todos */
.barra-menu ul li a {
    font-size: 18px;
    color: #2C2C2C;
    padding: 10px;
    display: flex;
    align-items: center;
}
/* Link ao passar o mouse - para todos */
.barra-menu a:hover {
    color: #FFFFFF;
    /*background-color: #444444;*/
    background-color: #393837;
    padding: 10px;
}
/* SUBMENU */
        /* Configurações do submenu */
.barra-menu > ul > li > ul {
    min-width: 200px;
    position: absolute;
    border: solid 1px #E3E3E3;
    background-color: #FFFFFF;
    flex-direction: column;
    display: none;
}
/* Exibe o submenu ao passar o mouse */
.barra-menu li:hover > ul {
    display: flex;
}
/* Bordas li submenu */
.barra-menu li > ul li ~ li {
    border-top: solid 1px #E3E3E3;
}
.barra-mobile, .icon-ocultar-menu {
    display: none;
}

/* MEDIA sreen ############################ */
@media screen and (max-width: 900px) {
    .miolo_principal_titulo .titulo {
        padding: 5px;
    }
    .largura_padrao {
        width: 100%;
    }
    
/* Configurações menu mobile */
.barra-mobile {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    background-color: #5a5856;
}
.barra-mobile .material-icons {
    color: #FFFFFF;
    font-size: 30px;
    font-weight: normal;
    cursor: pointer;
    margin: 8px 8px;
}
/* Oculta o menu */
.barra-menu {
    display: none;
}
/* Bordas li menu */
.barra-menu > ul > li ~ li {
    border-left: none;
    border-top: dotted 1px #8b8181;
}
.barra-menu ul {
    width: 100%;
    flex-direction: column;
}
.barra-menu li > ul li {
    border-top: solid 1px #E3E3E3;
}
.barra-menu ul li a {
    font-size: 22px;
}
.barra-menu ul li ul li a, .barra-menu ul li ul li a:hover {
    padding-left: 35px;
}
/* Configurações do submenu */
.barra-menu .submenu-b {/*> ul > li > ul {*/
    position: static;
    border: none;
}
} /* Fim media screen */
/*==============================================================
BLOCO ROLAR A PÁGINA ATÉ O TOPO
==============================================================*/
/* Configurações gerais */
.ir_para_topo {
    color: #FFF;
    background-color: #612322;
    font-size: 26px;
    text-align: center;
    position: fixed;
    z-index: 1000;
    cursor: pointer;
    border-radius: 100px;
    right: 10px;
    bottom: 40px;
    padding: 10px;
    display: none;
}
.ir_para_topo:hover {
    color: #FFFFFF;
    background-color: #340908;
}
/*==============================================================
BLOCO MISCELÂNIA
==============================================================*/
/* Razão social no cabeçalho */
.razao_social_cabecalho {
    color: #c7c0b8;
    font-size: 16px;
    font-weight: bolder;
    margin-left: 10px;
}

@media screen and (max-width: 990px) {
.razao_social_cabecalho {
    font-size: 16px;
    margin-left: 0px;
    text-align: center;
}
/* logotipo do cabeçaho */
.logo_cabecalho img {
    width: 90%;
    height: auto;
    text-align: center;
}
/* Conteúdo cabeçalho principal */
.cabecalho_principal_conteudo {
    flex-direction: column;
    justify-content: center;
}
/* título da página (conteúdo) */
.miolo_principal_titulo .titulo {
    width: auto;
}
/* slogan do cabeçalho*/
.slogan img {
    max-width: 100%;
    height: auto;
}
.barra_inferior_principal_conteudo img {
    width: 100%;
    height: auto;
}
}