/* =========================================================================
   TEMA
   Toda cor da moldura (topo e menu lateral) sai destas variaveis. Trocar de
   tema so redefine os mesmos nomes: nenhuma regra de layout precisa saber
   em que tema esta. O atributo data-tema vai no <html>, escrito pelo
   Funcoes.js antes da tela pintar.

   Sao tres niveis de superficie, e a ordem entre eles da a profundidade:
       moldura  -> topo e menu lateral
       fundo    -> a area de trabalho
       cartao   -> os cartoes dentro dela
   ========================================================================= */
:root {
    --lateral: 240px;
    --topo: 64px;

    --moldura: #ffffff;
    --moldura-texto: #4a5769;
    --moldura-texto-forte: #16233a;
    --moldura-hover: #f2f6fb;
    --moldura-botao: #f1f5fa;
    --moldura-botao-texto: #4a5769;
    --moldura-linha: #e9eef5;
    --moldura-borda: #dde5f0;
    --moldura-rotulo: #9aa7bb;
    --marca-opacidade: .72;

    --fundo: #eef1f6;
    --cartao: #ffffff;
    --cartao-2: #f8fafd;
    --cartao-3: #f3f7fc;
    --borda: #e3e9f2;
    --borda-suave: #eef2f7;

    --texto: #24344f;
    --texto-medio: #4a5769;
    --texto-fraco: #8b98ad;
    --texto-apagado: #c9d5e5;

    --azul: #0c71de;
    --azul-claro: #1f93f2;
    --azul-escuro: #0b5fbd;
    --azul-veu: #eaf2fe;
    --azul-borda: #bcd8f8;
    --desabilitado: #cfd8e5;

    --hero: linear-gradient(120deg, #0b5fbd 0%, #0c71de 55%, #1f93f2 100%);

    --ok: #1c9e65;
    --ok-forte: #27cb84;
    --ok-veu: #e6f9f1;
    --ok-borda: #b9ecd4;
    --atencao: #a9701a;
    --atencao-forte: #e0a32e;
    --atencao-veu: #fff5e2;
    --atencao-borda: #ffe3b0;
    --critico: #c9433a;
    --critico-forte: #e2584f;
    --critico-veu: #fdeceb;
    --roxo: #6b41c7;
    --roxo-veu: #f2ecfd;

    --sombra: 0 18px 44px rgba(16, 39, 73, .18);

    /* Tela de entrada (Default/Recuperar_Senha): o palco da marca. Fica aqui
       junto dos outros tokens para o login mudar de tema pelo mesmo caminho
       que o resto do portal. */
    --palco: linear-gradient(140deg, #0a4f9e 0%, #0c71de 45%, #1f93f2 100%);
    --palco-brilho-1: rgba(255, 255, 255, .20);
    --palco-brilho-2: rgba(120, 200, 255, .30);
    --palco-malha: rgba(255, 255, 255, .13);
    --vidro: rgba(255, 255, 255, .13);
    --vidro-forte: rgba(255, 255, 255, .17);
    --vidro-borda: rgba(255, 255, 255, .24);
    --vidro-texto: rgba(255, 255, 255, .82);
    --cidade: .13;
    --mural-altura: 112px;
}

/* No escuro a moldura fica MAIS escura que a area de trabalho, nao quase
   igual: e isso que impede o topo e o menu de sumirem no fundo. A escada
   vira #0e1014 (moldura) -> #16191f (area) -> #1e222a (cartao), com um fio
   de luz de 1px marcando a divisa. */
html[data-tema="escuro"] {
    --moldura: #0e1014;
    --moldura-texto: rgba(255, 255, 255, .72);
    --moldura-texto-forte: #ffffff;
    --moldura-hover: rgba(255, 255, 255, .06);
    --moldura-botao: rgba(255, 255, 255, .08);
    --moldura-botao-texto: #d6dae2;
    --moldura-linha: rgba(255, 255, 255, .07);
    --moldura-borda: rgba(255, 255, 255, .09);
    --moldura-rotulo: rgba(255, 255, 255, .32);
    --marca-opacidade: .6;

    --fundo: #16191f;
    --cartao: #1e222a;
    --cartao-2: #242932;
    --cartao-3: #262b36;
    --borda: #333a46;
    --borda-suave: #282e38;

    --texto: #e6eaf2;
    --texto-medio: #b9c2d0;
    --texto-fraco: #8a94a6;
    --texto-apagado: #4a5260;

    /* O azul do tema claro e escuro demais para servir de tinta aqui: sobre
       o cartao escuro ele da 3,1 de contraste e o icone parece preto (era o
       caso do PDF na assinatura). Neste tom vai para 4,5 e o branco por cima
       dele, nos botoes cheios, continua legivel. */
    --azul: #1f93f2;
    --azul-veu: rgba(31, 147, 242, .15);
    --azul-borda: rgba(31, 147, 242, .35);
    --desabilitado: #333a46;

    /* O degrade escurece: o azul claro sobre fundo escuro brilha demais e
       rouba o olho do conteudo. */
    --hero: linear-gradient(120deg, #0a4785 0%, #0b5a9e 55%, #126fb5 100%);

    /* Os veus de estado viram a propria cor a 14%, em vez de pastel: pastel
       sobre escuro embranquece e perde contraste. */
    --ok: #4fd39b;
    --ok-veu: rgba(39, 203, 132, .14);
    --ok-borda: rgba(39, 203, 132, .3);
    --atencao: #e2ab4e;
    --atencao-veu: rgba(224, 163, 46, .14);
    --atencao-borda: rgba(224, 163, 46, .3);
    --critico: #f0776d;
    --critico-forte: #f0776d;
    --critico-veu: rgba(226, 88, 79, .14);
    --roxo: #a98bf0;
    --roxo-veu: rgba(107, 65, 199, .18);

    --sombra: 0 18px 44px rgba(0, 0, 0, .5);

    /* O palco do login vira azul-noite: o mesmo lugar, com a luz apagada. */
    --palco: linear-gradient(140deg, #070d16 0%, #0a1f38 45%, #0d3a63 100%);
    --palco-brilho-1: rgba(31, 147, 242, .22);
    --palco-brilho-2: rgba(12, 113, 222, .26);
    --palco-malha: rgba(255, 255, 255, .06);
    --vidro: rgba(255, 255, 255, .06);
    --vidro-forte: rgba(255, 255, 255, .09);
    --vidro-borda: rgba(255, 255, 255, .11);
    --vidro-texto: rgba(255, 255, 255, .72);
    --cidade: .05;
}

body {
    background-color: var(--fundo);
    /* Sem isto o texto que nao tem cor propria fica com o preto padrao do
       navegador e some no tema escuro. */
    color: var(--texto);
    font-family: 'Montserrat', sans-serif;
    overflow-x: hidden;
    position: relative;
}

.menu {
    padding: 10px 0px;
    width: 100%;
    background: rgb(48,106,103);
    background: linear-gradient(90deg, rgba(48,106,103,1) 0%, rgba(39,203,132,1) 100%);
    position: fixed;
    z-index: 999;
}

.menu img {
    width: 200px;
    padding-right: 10px;
    margin-right: 10px;
    border-right: 1px solid rgba(0, 0, 0, 0.17);
}

.menuContainer {
    display: flex;
    justify-content: space-between;
    padding: 0px 20px !important;
    margin: 0px;
}
.userLeft{
    display:flex;
}
.userNotifications {
    margin: 0px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    border-right: 1px solid;
    border-color: rgba(0, 0, 0, 0.17);
    position:relative;
}
.userNotifications > svg{
    color:white;
    font-size:20px;
    cursor: pointer;
}
.user {
    position: relative;
    display: flex;
    cursor: pointer;
    border-radius: 30px;
    transition: all .2s;
    background-color: rgba(255, 255, 255, 0.00);
    padding: 0px 5px 0px 10px;
}
.user:hover {
    background-color: rgba(255, 255, 255, 0.23);
}
.user .userPhoto {
    background-color: #515151;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-left: 10px;
    position: relative;
    top: 4px;
    border: 1px solid white;
    overflow: hidden;
}
.userPhoto svg {
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.userName {
    display: flex;
    align-items: center;
}
.userName p {
    color: white;
    font-size: 16px;
    margin: 0;
    display: table-cell;
    vertical-align: middle;
}
.userOptions {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.91);
    width: 200px;
    top: 60px;
    right: 0px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    display: block;
    opacity: 1;
    transition: all .3s;
    border: 2px solid #f1f1f1;
    border-top: 0px;
}
.userOptions a {
    display: block;
    padding: 10px;
    text-align: center;
    color: #333;
    text-decoration: none;
    transition: all .2s;
    background-color: transparent;
    border-bottom:1px solid #f1f1f1;
}
.userOptions a:first-child {
    padding-top: 20px;
}
.userOptions a:first-child::before {
    content: '';
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    background-color: transparent;
    border: 10px solid #2aba7f;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
}
.userOptions a:last-child {
    border-bottom: 0px;
}
.userOptions a:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.userOptionsHidden {
    pointer-events: none !important;
    opacity: 0 !important;
}

/*.sideMenu {
    width: 50px;
    height: 100vh;
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: #222;
    display: inline-block;
    padding-top: 70px;
    z-index: 998;
    transition: all .3s;
    box-shadow: -4px 0px 3px 0px rgba(0, 0, 0, 0.25) inset;
}

.toggleSideMenu {
    width: 210px !important;
}

    .toggleSideMenu .textBox {
        opacity: 1;
        width: initial !important;
    }*/

.sideMenu {
    width: 50px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #222;
    display: inline-block;
    padding-top: 70px;
    z-index: 998;
    transition: all .3s;
    box-shadow: -4px 0px 3px 0px rgba(0, 0, 0, 0.25) inset;
}

.toggleSideMenu {
    width: 210px !important;
}

    .toggleSideMenu .textBox {
        opacity: 1;
        width: initial !important;
    }

.sideBoxMenu {
    display: flex;
    height: 50px;
}

.sideBoxMenuActive {
    background-color: rgba(255, 255, 255, 0.13) !important;
    position: relative;
}
.sideBoxMenuActive:before {
    content: '';
    background-color: white;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 3px;
    height: 100%;
}

.sideBoxMenu a {
    width: 100%;
    position: relative;
    transition: all .2s;
    display: flex;
    text-decoration: none;
}

    .sideBoxMenu a:hover {
        background-color: rgba(255, 255, 255, 0.13);
    }

    .sideBoxMenu a svg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        color: white;
        font-size: 20px;
    }

.textBox {
    position: relative;
    display: flex;
    align-items: center;
    opacity: 0;
    width: 0px;
    transition: all .3s;
}

    .textBox p {
        margin: 0;
        color: white;
        font-size: 13px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0px;
        white-space: nowrap;
        overflow: hidden;
        pointer-events:none;
    }

.iconsSide {
    width: 100%;
}

.largeContainer {
    padding: 0px 30px;
    position: relative;
}

/*.openMenuContainer {
    width: 100%;
    position: relative;
    left: 0;
    margin: 0px 0px 0px 50px;
    padding: 0px 20px !important;
    transition: all .3s;
}

.openMenuContainerActive {*/
    /*left: 110px !important;*/
    /*left: 150px !important;
}*/

.openMenuContainer {
    position: relative;
    margin-left: var(--lateral);
    width: calc(100% - var(--lateral));
    padding: 0 20px !important;
    overflow-x: auto;
}

/* A barra nao recolhe mais no desktop. A classe continua existindo porque
   as telas a carregam no markup, mas agora tem a mesma medida da outra. */
.openMenuContainerActive {
    margin-left: var(--lateral);
    width: calc(100% - var(--lateral));
}

.content {
    padding-top: calc(var(--topo) + 26px);
}

.tableTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    min-height:50px;
}

    .tableTitle h4 {
        margin: 0;
    }

.tableContent {
    padding: 20px;
    background-color: white;
    border-radius: 5px;
    padding-bottom:60px;
}

.forUploadDocs {
    margin-top: 40px;
}

.tableContent-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.file-upload-wrapper {
    position: relative;
    overflow: hidden;
    display: flex;
    border: 1px solid #d9d9d9;
    padding: 10px;
    align-items: center;
    width: 500px;
    border-radius: 10px;
    box-shadow: 2px 1px 5px 1px #e5e5e5;
    margin-bottom: 25px;
}

.content-mid-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.file-upload-label {
    border: 2px solid #007BFF;
    color: white;
    background-color: #007BFF;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    margin-bottom: 0;
}

.doc-item {
    display: flex;
    flex-direction: column;
    min-width: 224px;
    text-align: center;
    align-items: center;
    gap: 10px;
    border: 1px solid #e7e7e7;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 2px 2px 10px 2px #ebebeb;
    width: calc(20% - 24px);
}

.doc-item p {
    margin-bottom: initial;
}

.doc-item svg {
    height: 50px !important;
    width: 50px !important;
    color: #307069;
}

.span-title-docs {
    color: #2aac7b;
    font-weight: bold;
}

#contentGed {
    overflow-x: initial;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    grid-gap: 30px;
}
/*.file-upload-wrapper input[type="file"] {
    font-size: 100px;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}*/
.file-upload-name {
    margin-left: 20px;
    font-size: 16px;
}

    .tableContent-top p {
        margin: 0;
        color: #333;
    }

    .tableContent-top > div {
        position: relative;
    }

        .tableContent-top > div svg {
            color: #ddd;
            position: absolute;
            right: 10px;
            top: 10px;
        }

.customInput {
    padding: 5px 10px;
    padding-right: 30px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.customInput:focus {
    outline: none !important;
    border: 1px solid #007bff;
}

.customInput::placeholder {
    color: #b9b9b9;
}
.tableContent-middle, .tableContent-middle table {
    width: 100%;
}

.tableContent-middle {
    overflow-x: auto;
}

.tableContent-middle table thead tr {
    background-color: rgba(39, 203, 132, 0.11);
}

.tableContent-middle table thead th:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.tableContent-middle table thead th:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.tableContent-middle table thead th, .tableContent-middle table tbody td {
    font-size: 12px;
    padding: 10px;
}

.tableContent-middle table tbody tr {
    border-bottom: 1px solid #f1f1f1;
    transition: all .2s;
    background-color: white;
    cursor: pointer;
}

.tableContent-middle table tbody tr:hover {
    background-color: #f1f1f1;
}

.tableContent-middle table tbody td {
    padding-bottom: 20px;
    padding-top: 20px;
}
.tr-familia{
    display:none;
}
.table-row{
    display:table-row !important;
    opacity:0;
    transition:all .5s;
}

/*Buttons*/
.btn-custom {
    position: relative;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin: 0px 5px;
    transition: all .2s;
    opacity: 1;
    box-shadow: 0px 0px 4px 0px rgba(0, 105, 217, 0.66);
}

    .btn-custom:hover {
        opacity: .7;
    }

    .btn-custom svg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }

.btn-infos, .btn-infos:hover, .btn-infos:focus, .btn-infos:active {
    position: relative;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
.btn-infos svg {
    color: #ddd;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #b9b9b9;
}
.btn-InclurDep {
    position: relative;
    border-radius: 20px;
    margin: 0px 5px;
    transition: all .2s;
    opacity: 1;
    box-shadow: 0px 0px 4px 0px rgba(0, 105, 217, 0.66);
    font-size: 10px;

    background-color: #ffffff;
    border-color: transparent;
    color: #383838;
}
#PanelButtonsTitular > div{
    margin-bottom:20px;
    display:flex;
    justify-content:flex-end;
}
#PanelButtonsTitular .btn-InclurDep {
    position: relative;
    border-radius: 20px;
    margin: 0px 5px;
    transition: all .2s;
    opacity: 1;
    box-shadow: 0px 0px 4px 0px rgba(0, 105, 217, 0.66);
    font-size: 10px;
    background-color: #ffffff;
    border-color: transparent;
    color: #383838;
    max-height:35px;
}
.btn-Salvar {
    position: relative;
    border-radius: 20px;
    margin: 0px 5px;
    transition: all .2s;
    opacity: 1;
    box-shadow: 0px 0px 4px 0px rgba(0, 105, 217, 0.66);
}
.btn-Salvar:hover {
    opacity: .7;
}
.btn-Salvar svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.btn-Excluir {
    position: relative;
    border-radius: 20px;
    margin: 0px 5px;
    transition: all .2s;
    opacity: 1;
    box-shadow: 0px 0px 4px 0px rgba(255, 0, 0, 0.66);
}
.btn-Excluir:hover {
    opacity: .7;
}
.btn-Fechar {
    position: relative;
    border-radius: 20px;
    margin: 0px 5px;
    transition: all .2s;
    opacity: 1;
    background-color: #ffffff;
    border-color: transparent;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.10);
    color: #383838;
}
.btn-copy {
    width: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px;
}
.td-copy {
    display: flex;
    align-items: center;
    gap: 10px;
}
.btn-Fechar:hover, .btn-Fechar:focus, .btn-Fechar:active {
    border-color: transparent !important;
    background-color: #ffffff !important;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.10);
    outline: none !important;
    color: #383838 !important;
    opacity: .7;
}
.btn-Fechar svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.btn-salvar {
    position: relative;
    border-radius: 20px;
    margin: 0px 5px;
    transition: all .2s;
    opacity: 1;
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
    border-color: transparent;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.10);
}

/*Status*/
.statusCircle {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
    margin-top: 2px;
}
.statusBox {
    background-color: rgba(0, 227, 19, 0.15);
    padding:5px;
    display:flex;
    border-radius:20px;
}
.statusBox p{
    color:#04c314;
}

.statusBoxCor_01 {
    background-color: rgba(82, 82, 82, 0.10);
    padding: 5px;
    display: flex;
    border-radius: 20px;
}
.statusBoxCor_02 {
    background-color: rgba(159, 73, 227, 0.10);
    padding: 5px;
    display: flex;
    border-radius: 20px;
}
.statusBoxCor_03 {
    background-color: rgba(255, 255, 0, 0.10);
    padding: 5px;
    display: flex;
    border-radius: 20px;
}
.statusBoxCor_04 {
    background-color: rgba(4, 195, 20, 0.10);
    padding: 5px;
    display: flex;
    border-radius: 20px;
}
.statusBoxCor_05 {
    background-color: rgba(255, 0, 0, 0.10);
    padding: 5px;
    display: flex;
    border-radius: 20px;
}
.statusBoxCor_06 {
    background-color: rgba(14, 122, 241, 0.10);
    padding: 5px;
    display: flex;
    border-radius: 20px;
}
.statusBoxCor_07 {
    background-color: rgba(199, 199, 199, 0.10);
    padding: 5px;
    display: flex;
    border-radius: 20px;
}
.statusBoxCor_08 {
    background-color: rgba(255, 181, 0, 0.10);
    padding: 5px;
    display: flex;
    border-radius: 20px;
}
.statusBoxCor_09 {
    background-color: rgba(13, 196, 185, 0.10);
    padding: 5px;
    display: flex;
    border-radius: 20px;
}

.cor_01 {
    background-color: white;
}

/*.cor_01 ~ p {
    color: white;
}*/

.cor_02 {
    background-color: #9f49e3;
}

/*.cor_02 ~ p {
    color: #9f49e3;
}*/

.cor_03 {
    background-color: yellow;
}

/*.cor_03 ~ p {
    color: yellow;
}*/

.cor_04 {
    background-color: #04c314;
}

/*.cor_04 ~ p {
    color: #04c314;
}*/

.cor_05 {
    background-color: #ff0000;
}

/*.cor_05 ~ p{
    color: #ff0000;
}*/

.cor_06 {
    background-color: #0e7af1;
}

/*.cor_06 ~ p {
    color: #0e7af1;
}*/

.cor_07 {
    background-color: #c7c7c7;
}

/*.cor_07 ~ p {
    color: #c7c7c7;
}*/

.cor_08 {
    background-color: #ffb500;
}

/*.cor_08 ~ p {
    color: #ffb500;
}*/

.cor_09 {
    background-color: #0dc4b9;
}

/*.cor_09 ~ p {
    color: #0dc4b9;
}*/

hr {
    border: 0;
    border-top: 1px solid #094CFA;
}

/*Modal*/
.modal label {
    font-size: 12px;
}
.modal-dialog {
    overflow-y: initial !important
}
.modal-body {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}
.modal .customInput {
    margin-bottom: 20px;
    width:100%;
    height:36px;
}
.modal-footer {
    justify-content:space-between !important;
}
.footer-inclusao-dependentes {
    flex-direction: column;
    width: 100%;
}
.footer-inclusao-dependentes .div-captcha{
    margin-right: auto;
    margin-bottom: 15px;
}
.div-btns-form {
    display: flex;
    width: 100%;
    place-content: flex-end;
}
.disabled-bg {
    background-color: #e9e9e9;
}
.modal-footer-align-right {
    display: inline-block;
}
#IncluirAssocErroText {
    display: none;
}
#IncluirAssocErroText span {
    color: red;
}
#IncluirDepErroText {
    display: none;
}
#IncluirDepErroText span {
    color: red;
}

/*Dashboard*/
.dashboard-box {
    position: relative;
    padding: 20px;
    border-radius: 10px;
    background-color: white;
    width: 100%;
    top: 0;
    transition: all .5s;
    box-shadow: 0px 0px 0px 0px #ddd;
    cursor: pointer;
    margin-bottom: 20px;
    min-height: 100%;
}
.flexing-dashboard-box {
    display: flex;
    justify-content: space-between;
    gap: 25px;
    flex-direction: column-reverse;
    place-items: center;
    text-align: center;
}
.column-dash-boxes {
    padding: 20px 0px;
}
.column-dash-boxes .dashboard-box {
    text-align: center;
}
.dashboard-empresa {
    background-color: rgba(153, 173, 226, 0.23);
}
.col-md-4 .dashboard-box {
    height: calc(100% - 20px);
}
.dashboard-box:hover{
    top:-10px;
    box-shadow:0px 10px 10px 0px #ddd;
}
.dashboard-box p{
    margin-top:20px;
}
.dashboard-box h2{
    margin-top:30px;
}
.news-text{
    color:#9b9b9b !important;
    margin-bottom:10px;
}
.icon-background ~ div{
    flex-direction:column;
}
.news-box {
    margin-bottom: 60px;
}
.notification {
    content: '';
    position: absolute;
    background-color: #db3232;
    border: 3px solid white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    top: 0px;
    right: 0px;
    animation: myAnimation 1s infinite;
}
.notification-bell {
    content: '';
    position: absolute;
    background-color: #db3232;
    border: 1px solid #28bd80;
    border-radius: 50%;
    width: 13px;
    height: 13px;
    top: 12px;
    right: 14px;
    cursor: pointer;
    animation: myAnimation 1s infinite;
}
.notifications-box {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.91);
    width: 200px;
    top: 60px;
    right: -70px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    display: block;
    opacity: 1;
    transition: all .3s;
    padding:10px;
    padding-top:20px;
    min-height:100px;
    border:2px solid #f1f1f1;
    border-top:0px;
    opacity:1;
    transition:all .3s;
}
.notifications-box-hidden{
    opacity:0;
    pointer-events:none;
}
.notifications-box label {
    font-size: 16px;
    text-align: center;
    color: #b9b9b9;
}
.notifications-box svg{
    font-size:50px;
    text-align:center;
    color:#b9b9b9;
    display:block;
    margin:0 auto;
    margin-bottom:10px;
}
.notifications-box::before {
    content: '';
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    background-color: transparent;
    border: 10px solid #2aba7f;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
}
.icon-background {
    background-color: rgba(20, 112, 214, 0.13);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    min-height: 60px;
    border-radius: 50%;
    max-height: 60px;
    max-width: 60px;
}
.icon-background svg{
    font-size:20px;
    color:rgb(20, 112, 214);
}
.largeContainer .row .col-md-4:nth-child(1) .icon-background {
    background-color: rgba(214, 127, 20, 0.11);
}
.largeContainer .row .col-md-4:nth-child(1) .icon-background svg {
    color: rgb(214, 127, 20);
}
.largeContainer .row .col-md-4:nth-child(2) .icon-background {
    background-color: rgba(117, 20, 214, 0.11);
}
.largeContainer .row .col-md-4:nth-child(2) .icon-background svg{
    color:rgb(117, 20, 214);
}
.largeContainer .row .col-md-4:nth-child(3) .icon-background {
    background-color: rgba(20, 214, 54, 0.11);
}
.largeContainer .row .col-md-4:nth-child(3) .icon-background svg{
    color:rgb(33, 174, 57);
}
.dashboard-empresa {
    overflow: hidden;
}
.dashboard-empresa .icon-background {
    background-color: rgba(20, 112, 214, 0.13);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-bottom: 20px;
    top:initial;
    right:initial;
    position:relative;
}
.dashboard-empresa p{
    margin-top:10px;
}
.dashboard-description {
    opacity: .5;
    margin: 0;
    padding: 0;
    font-size: 14px;
}
.icon-before{
    position:absolute;
    bottom:-18px;
    right:20px;
    z-index:-1;
    width:50%;
}
.icon-before img {
    opacity:.1;
    width:100%;
}
.label-count {
    font-weight: bold;
    font-size: 40px;
    margin: 0px;
}
.menu-app {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 50px;
    background-color: #222;
    display: none;
    justify-content: space-between;
}
.menu-app > div{
    width:60px;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}
.menu-app > div svg{
    font-size:20px;
    color:white;
}
.box-pago {
    padding: 5px 20px;
    background-color: rgba(20, 214, 54, 0.11);
    display:inline-block;
    margin-left: 20px;
    border-radius: 20px;
}
.box-pago p, .box-pago i {
    margin: 0px !important;
    color: #09b03f;
}
.box-em-aberto {
    padding: 5px 20px;
    background-color: rgba(19, 151, 238, 0.11);
    display:inline-block;
    margin-left: 20px;
    border-radius: 20px;
}
.box-em-aberto p, .box-em-aberto i {
    margin: 0px !important;
    color: #0c71de;
}
.modal-header-tab {
    padding-bottom: 0px !important;
}
.tab-button:first-child{
    border-right:0px;
}
.tab-button {
    padding: 10px;
    border: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    background-color: #f5f5f5;
    color: #bebebe;
    position: relative;
    top: 1px;
    cursor:pointer;
    border-radius:3px 3px 0px 0px;
}
.tab-button h5 {
    margin: 0;
}
.tab-active {
    background-color: white;
    border-bottom: 1px solid white;
    color: #333;
}
.modal-planos, .modal-visualizar, .modal-documentos {
    display: none;
}
.portal-box{
    width:50%;
}
.portal-flex {
    display: flex;
    flex-wrap:wrap;
}
.portal-textbox{
    margin-right:40px;
}
.selecionado {
    background-color: #ffeaea !important;
}
.tr-familia td {
    padding-left: 25px !important;
}

.modal-remove .modal-body td {
    padding-bottom: 20px;
    padding-top: 20px;
    padding: 10px;
}

.modal-remove .modal-body th {
    font-size: 12px;
    padding: 10px;
}

#table-removerAsso {
    width: 100%;
    border-collapse: collapse;
}

#table-removerAsso th, #table-removerAsso td {
    padding: 8px;
}

#table-removerAsso tr {
    font-size: 12px;
}

#RemoverAsso thead tr {
    background-color: rgba(39, 203, 132, 0.11);
}

.modal-remove .modal-body {
    transition: all 1.2s;
}

.inputs-search-date {
    display: flex;
    text-align: end;
    place-content: space-between;
}
/*#table-removerAsso tr:nth-child(even) {
    background-color: #f2f2f2;
}*/
#table-removerAsso tr:hover {
    background-color: #f1f1f1;
}

.custom-height-swal {
    height: 730px;
}

.remove-date {
    display: none;
}

.fa-exclamation-triangle {
    color: #e78c54 !important;
}

#RemoverAsso.disabled {
    pointer-events: none;
    opacity: 0.6;
    cursor: not-allowed;
}

#table-removerAsso th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4CAF50;
    color: white;
}

.info-exclusao .row {
    align-items: center;
}

#confirmation-details .titular-row {
    /*background-color: white !important;*/
    background-color: #3d8de3 !important;
    color: white;
    font-size: 15px;
}

.titular-row {
    background-color: white; /* Light blue background for titular */
    cursor: pointer;
    transition: all .2s;
/*    border-bottom: 1px solid #f1f1f1;*/
}

.toggle-dependentes {
    text-align: end;
    cursor: pointer;
}

.toggle-dependentes::after {
    content: "▶";
    font-size: 12px;
    transition: transform 0.2s;
}

.dependente-row .disabled::after {
    content: initial;
}

.toggle-dependentes.expanded::after {
    content: "▼";
}

.toggle-single-dep {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 10px;
    justify-content: right;
}

.table-striped .dependente-row {
    background-color: #3d8de3 !important;
    color: white;
    font-size: 15px;
}

.dependente-row {
    background-color: rgb(234, 234, 234) !important; /*Light gray background for dependents 
    */
    font-style: italic;
}

/* Tabela da exclusão manual. Acabamento provisório: a tela vai ser
   redesenhada, aqui só para ela parar de destoar e funcionar no escuro. */
.table-remoasso {
    width: 100%;
    margin-top: 14px;
    border-collapse: separate;
    border-spacing: 0;
}

    .table-remoasso thead tr {
        background: var(--cartao-3);
    }

    .table-remoasso thead th {
        padding: 11px 10px;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .5px;
        text-transform: uppercase;
        color: var(--texto-fraco);
        border-bottom: 1px solid var(--borda);
        text-align: left;
        white-space: nowrap;
    }

        .table-remoasso thead th:first-child {
            border-top-left-radius: 10px;
            padding-left: 14px;
        }

        .table-remoasso thead th:last-child {
            border-top-right-radius: 10px;
            padding-right: 14px;
        }

    .table-remoasso tbody td {
        padding: 11px 10px;
        font-size: 12.5px;
        color: var(--texto-medio);
        border-bottom: 1px solid var(--borda-suave);
        vertical-align: middle;
    }

        .table-remoasso tbody td:first-child {
            padding-left: 14px;
        }

.inputs-search-date .col-search {
    flex: 1;
    padding: 0;
}

    .inputs-search-date .col-search .customInput {
        width: 100%;
        max-width: 320px;
        padding: 9px 14px;
        border: 1px solid var(--borda);
        border-radius: 20px;
        background: var(--cartao);
        color: var(--texto);
    }

.header-relatiorio {
    display: flex;
    align-items: center;
    place-content: space-between;
    border-bottom: 1px solid #b7b7b7;
}

.contentDados h3 {
    margin-top: 25px;
}

.contentDados {
    overflow: auto;
}

.header-relatiorio p {
    margin-bottom: 5px;
}

.detalhes-abertos {
    border: 1px solid #e3e3e3;
    box-shadow: 0px 0px 2px 2px #efefef;
}

.detalhes-row {
    border: 1px solid rgb(227, 227, 227);
    box-shadow: #efefef 4px 8px 6px 5px;
}

@media (min-width: 992px) {
    .modal-remove {
        max-width: 1000px !important;
    }
}

@media (max-width: 992px){
    .column-dash-boxes .col-md-3 {
        max-width: 100%;
        flex: 0 0 100%;
    }
    .column-dash-boxes {
        gap: 20px;
    }
}

@keyframes myAnimation {
    0% {
        transform:scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

.file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.file-item span {
    flex: 1;
}

.file-name-remocao {
    font-weight: 500;
    max-width: 325px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.div-bloc-docs {
    margin-top: 70px;
}

.remove-button {
    background: none;
    color: #dc3545;
    border: none;
    font-size: 20px;
    cursor: pointer;
    padding: 0 5px;
}

    .remove-button:hover {
        background: #c82333;
    }


.file-item {
    display: flex;
    align-items: center;
}

.file-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}


@import url(https://fonts.googleapis.com/css?family=Roboto:300,400);

/*body {
    height: 100%;
    padding: 0px;
    margin: 0px;
    background: #333;
    font-family: 'Roboto', sans-serif !important;
    font-size: 1em;
}*/


/*.row {
    max-width: 950px;
    margin: 0 auto;
}*/



/** SPINNER CREATION **/

.loader {
    position: relative;
    text-align: center;
    margin: 15px auto 35px auto;
    z-index: 9999;
    display: block;
    width: 80px;
    height: 80px;
    border: 10px solid rgba(0, 0, 0, .3);
    border-radius: 50%;
    border-top-color: #000;
    animation: spin 1s ease-in-out infinite;
    -webkit-animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to {
        -webkit-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    to {
        -webkit-transform: rotate(360deg);
    }
}


/** MODAL STYLING **/

.modal-content {
    border-radius: 0px;
    box-shadow: 0 0 20px 8px rgba(0, 0, 0, 0.7);
}

.modal-backdrop.show {
    opacity: 0.75;
}

.modal_load {
    /*Classe criada somente para ser utilizada como identificador da modal loader que aparece sempre que uma página está sendo solicitada. o objeto dessa identificação é para esconder a modal toda vez que a página termina de ser carregada*/
}

@media (max-width: 768px) {
    .customInput {
        font-size: 12px; /* Reduz o tamanho da fonte em telas pequenas */
        padding: 8px; /* Reduz o padding em telas pequenas */
    }

    /* Os 50px eram a faixa do menu antigo, que no celular ficava encostado
       na lateral. A barra de hoje sai da tela (regra dos 992px) e o conteudo
       ocupa a largura inteira, mas o !important daqui passava por cima dela
       e empurrava a tela 50px para a direita. */
    .openMenuContainer,
    .openMenuContainerActive {
        left: 0 !important;
        padding: 0 10px !important;
    }
}

/* Aviso da regra de movimentacao (acima da linha do titulo da Lista de vidas) */
.avisoMovimentacao {
    margin-top: -50px; /* aproveita o padding-top de 130px do .content para encostar o aviso no cabecalho fixo (70px) */
    margin-bottom: 1%;
    text-align: center;
    font-size: 13px;
    line-height: 1.35;
    color: #664d03;
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 5px;
    padding: 8px 12px;
}

    .avisoMovimentacao i {
        color: #e0a800;
        margin-right: 6px;
    }

/* Aproxima a tabela da linha do titulo (usado somente na Lista de vidas) */
.tableTitle.tableTitle-compacto {
    margin-bottom: 12px;
}

/* Ajuste de estilo para telas muito pequenas (extra-small devices) */
@media (max-width: 480px) {
    .customInput {
        font-size: 10px; /* Reduz ainda mais o tamanho da fonte em telas extra pequenas */
        padding: 6px; /* Reduz ainda mais o padding */
    }
}

/*=====================================================================
  MODAL DE DETALHES DO ASSOCIADO (lupa do Cadastro de Associados)
  Prefixo .ad- para nao colidir com o restante do portal.
=====================================================================*/
.ad-content {
    border: none;
    border-radius: 18px;
    overflow: hidden;
}

/*--------- Cabecalho ---------*/
.ad-hero {
    position: relative;
    padding: 26px 30px 0;
    background: var(--hero);
    color: #fff;
    overflow: hidden;
}

.ad-hero::after {
    content: "";
    position: absolute;
    right: -60px;
    top: -90px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
}

.ad-hero::before {
    content: "";
    position: absolute;
    right: 70px;
    bottom: -120px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(39, 203, 132, .18);
}

.ad-close {
    position: absolute;
    right: 18px;
    top: 18px;
    z-index: 3;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: all .2s;
}

    .ad-close:hover {
        background: rgba(255, 255, 255, .3);
        color: #fff;
    }

.ad-identity {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
}

.ad-identity-info {
    min-width: 0;
}

.ad-avatar {
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
    margin-right: 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
}

.ad-name {
    margin: 4px 0 6px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

.ad-chips {
    display: flex;
    flex-wrap: wrap;
}

.ad-chip {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    padding: 3px 10px;
    margin-right: 6px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .28);
}

/*A situacao repete texto e cor da situacao do grid. A cor vem do .cor_0X (a mesma da bolinha), aplicada
  cheia no elemento e clareada pelo veu branco do ::before - o .statusBoxCor_0X do grid nao serve aqui
  porque seus 10% so sao percebidos ao lado da linha branca da tabela, sobre o azul do cabecalho somem.*/
.ad-chip-situacao {
    position: relative;
    display: inline-flex;
    margin-right: 6px;
    border-radius: 20px;
    overflow: hidden;
}

    .ad-chip-situacao::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(255, 255, 255, .78);
    }

    .ad-chip-situacao-cor {
        position: relative;
        z-index: 1;
        display: inline-flex;
        align-items: center;
        padding: 3px 10px;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: .6px;
        text-transform: uppercase;
        color: var(--texto);
    }

    .ad-chip-situacao .statusCircle {
        width: 9px;
        height: 9px;
        margin-top: 0;
        margin-right: 6px;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
    }

.ad-keyline {
    display: flex;
    flex-wrap: wrap;
    margin-top: 4px;
    font-size: 12px;
    color: rgba(255, 255, 255, .85);
}

    .ad-keyline span {
        margin-right: 18px;
    }

    .ad-keyline b {
        font-weight: 600;
        color: #fff;
    }

    .ad-keyline .ad-copy {
        float: none;
        color: rgba(255, 255, 255, .6);
    }

        .ad-keyline .ad-copy:hover {
            color: #fff;
        }

/*--------- Abas ---------*/
.ad-tabs {
    position: relative;
    z-index: 2;
    display: flex;
    margin-top: 22px;
}

.ad-tab {
    border: none;
    background: none;
    padding: 0 0 12px;
    margin-right: 26px;
    color: rgba(255, 255, 255, .7);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    transition: color .2s;
}

    .ad-tab i {
        margin-right: 6px;
    }

    .ad-tab:hover, .ad-tab:focus {
        color: #fff;
        outline: none;
    }

    .ad-tab.ad-tab-ativa {
        color: #fff;
    }

        .ad-tab.ad-tab-ativa::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 3px;
            border-radius: 3px 3px 0 0;
            background: var(--ok-forte);
        }

.ad-count {
    display: inline-block;
    min-width: 18px;
    padding: 1px 5px;
    margin-left: 6px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .2);
    font-size: 10px;
}

/*--------- Corpo ---------*/
.ad-body {
    padding: 26px 30px;
    background: var(--cartao);
}

.ad-pane {
    display: none;
}

    .ad-pane.ad-pane-ativa {
        display: block;
    }

#ListPlanos, #ListDocumentos {
    display: block;
}

.ad-section + .ad-section {
    margin-top: 26px;
}

.ad-section-title {
    display: flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--azul);
    margin-bottom: 14px;
}

    .ad-section-title i {
        margin-right: 8px;
    }

    .ad-section-title::after {
        content: "";
        flex: 1;
        height: 1px;
        margin-left: 8px;
        background: var(--fundo);
    }

.ad-grid {
    display: flex;
    flex-wrap: wrap;
    margin: -7px;
}

.ad-field {
    width: calc(33.333% - 14px);
    margin: 7px;
    background: var(--cartao-2);
    border: 1px solid var(--cartao-3);
    border-radius: 10px;
    padding: 10px 12px;
    min-width: 0;
}

    .ad-field.w6 {
        width: calc(50% - 14px);
    }

    .ad-field.w12 {
        width: calc(100% - 14px);
    }

.ad-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--texto-fraco);
    margin-bottom: 3px;
}

.ad-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--texto);
    word-break: break-word;
    min-height: 19px;
}

    .ad-value.ad-vazio {
        color: var(--texto-apagado);
        font-weight: 500;
        font-style: italic;
    }

.ad-copy {
    float: right;
    border: none;
    background: none;
    color: var(--texto-apagado);
    cursor: pointer;
    font-size: 12px;
    padding: 0;
    transition: color .2s;
}

    .ad-copy:hover {
        color: var(--azul);
    }

    .ad-copy:focus {
        outline: none;
    }

    .ad-copy.ad-copiado {
        color: var(--ok-forte);
    }

/*--------- Planos ---------*/
.ad-plano {
    border: 1px solid var(--cartao-3);
    border-radius: 12px;
    overflow: hidden;
}

    .ad-plano + .ad-plano {
        margin-top: 14px;
    }

.ad-plano-head {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: rgba(39, 203, 132, .1);
}

    .ad-plano-head i {
        color: var(--ok);
        margin-right: 10px;
    }

    .ad-plano-head h6 {
        margin: 0;
        font-size: 13px;
        font-weight: 700;
        color: var(--texto);
        flex: 1;
    }

.ad-plano-vidas {
    font-size: 12px;
    font-weight: 700;
    color: var(--ok);
    white-space: nowrap;
}

.ad-table {
    width: 100%;
    border-collapse: collapse;
}

    .ad-table th {
        font-size: 10px;
        font-weight: 600;
        letter-spacing: .6px;
        text-transform: uppercase;
        color: var(--texto-fraco);
        text-align: left;
        padding: 10px 16px;
        border-bottom: 1px solid var(--fundo);
    }

    .ad-table td {
        font-size: 12.5px;
        color: var(--texto);
        padding: 11px 16px;
        border-bottom: 1px solid var(--fundo);
    }

    .ad-table tbody tr:last-child td {
        border-bottom: none;
    }

    .ad-table tbody tr:hover {
        background: var(--cartao-2);
    }

    .ad-table .ad-num {
        text-align: right;
        font-weight: 600;
    }

/*--------- Documentos ---------*/
.ad-doc {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--cartao-3);
    border-radius: 12px;
    text-decoration: none;
    transition: all .2s;
}

    .ad-doc + .ad-doc {
        margin-top: 10px;
    }

    .ad-doc:hover {
        border-color: var(--azul-borda);
        background: var(--cartao-2);
        text-decoration: none;
    }

.ad-doc-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    margin-right: 14px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: var(--cartao-3);
    color: var(--azul);
}

    .ad-doc-icon.ad-doc-pdf {
        background: var(--critico-veu);
        color: var(--critico);
    }

    .ad-doc-icon.ad-doc-img {
        background: var(--atencao-veu);
        color: var(--atencao);
    }

    .ad-doc-icon.ad-doc-word {
        background: var(--azul-veu);
        color: var(--azul);
    }

    .ad-doc-icon.ad-doc-excel {
        background: var(--ok-veu);
        color: var(--ok);
    }

.ad-doc-info {
    flex: 1;
    min-width: 0;
}

.ad-doc-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ad-doc-meta {
    font-size: 11px;
    color: var(--texto-fraco);
    margin-top: 2px;
}

.ad-doc-go {
    color: var(--texto-apagado);
    font-size: 13px;
    margin-left: 10px;
}

.ad-doc:hover .ad-doc-go {
    color: var(--azul);
}

/*--------- Estado vazio ---------*/
.ad-empty {
    text-align: center;
    padding: 40px 10px;
    color: var(--texto-fraco);
}

    .ad-empty i {
        font-size: 34px;
        margin-bottom: 12px;
        color: var(--texto-apagado);
        display: block;
    }

    .ad-empty p {
        margin: 0;
        font-size: 13px;
    }

/*--------- Rodape ---------*/
.ad-foot {
    padding: 14px 30px;
    background: var(--cartao-2);
    border-top: 1px solid var(--fundo);
}

.ad-foot-info {
    font-size: 11px;
    color: var(--texto-fraco);
}

    .ad-foot-info i {
        margin-right: 6px;
    }

/*--------- Responsivo ---------*/
@media (max-width: 767px) {
    .ad-content {
        border-radius: 0;
    }

    .ad-hero {
        padding: 20px 18px 0;
    }

    .ad-avatar {
        width: 50px;
        height: 50px;
        margin-right: 12px;
        border-radius: 14px;
        font-size: 16px;
    }

    .ad-name {
        font-size: 16px;
    }

    .ad-tabs {
        margin-top: 18px;
    }

    .ad-tab {
        flex: 1;
        margin-right: 0;
        font-size: 11px;
    }

        .ad-tab i {
            display: block;
            margin: 0 0 4px;
            font-size: 14px;
        }

    .ad-count {
        display: none;
    }

    .ad-body {
        padding: 20px 18px;
    }

    .ad-field, .ad-field.w6 {
        width: calc(100% - 14px);
    }

    .ad-foot {
        padding: 12px 18px;
    }

    .ad-foot-info {
        display: none;
    }

    .ad-table th:nth-child(4), .ad-table td:nth-child(4) {
        display: none;
    }
}

/* =========================================================================
   MOLDURA: TOPO E MENU LATERAL
   Substitui o .menu e o .sideMenu antigos. As regras daqueles ficaram no
   arquivo mas nao pegam mais em nada: o markup do Menu.ascx e do
   SideMenu.ascx passou a usar estes nomes.
   ========================================================================= */

.topo {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--topo);
    display: flex;
    align-items: center;
    padding-right: 20px;
    background: var(--moldura);
    border-bottom: 1px solid var(--moldura-borda);
    z-index: 999;
}

/* Este bloco tem exatamente a largura do menu lateral: e isso que deixa o
   tracinho divisor caindo em cima da borda da area de conteudo. */
.topo-identidade {
    flex: 0 0 auto;
    width: var(--lateral);
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 18px;
    overflow: hidden;
}

.topo-logo img {
    display: block;
    width: auto;
    height: 42px;
}

/* Cada tema tem a sua logo: a negativa sumiria no branco. */
html[data-tema="claro"] .so-escuro {
    display: none;
}

html[data-tema="escuro"] .so-claro {
    display: none;
}

.topo-divisor {
    flex: 0 0 auto;
    width: 1px;
    height: 28px;
    background: var(--moldura-borda);
}

/* So aparece quando o menu vira sobreposicao (ate 992px). */
.topo-menu-botao {
    display: none;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    margin-left: 10px;
    border: none;
    border-radius: 10px;
    background: var(--moldura-botao);
    color: var(--moldura-texto-forte);
    font-size: 15px;
    cursor: pointer;
}

    .topo-menu-botao:focus {
        outline: none;
    }

.topo-produto {
    flex: 1;
    min-width: 0;
    margin-left: 20px;
    font-size: 15px;
    font-weight: 600;
    color: var(--moldura-texto-forte);
    white-space: nowrap;
    line-height: 1.2;
}

    .topo-produto small {
        display: block;
        font-size: 10px;
        font-weight: 500;
        letter-spacing: .8px;
        text-transform: uppercase;
        color: var(--moldura-rotulo);
    }

.topo-marca {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    opacity: var(--marca-opacidade);
}

    .topo-marca img {
        display: block;
        width: auto;
        height: 21px;
    }

/* ---------- Menu lateral ---------- */
/* Nao acompanha o tamanho do conteudo: ocupa a janela do topo ate o rodape
   e fica ali. Quem rola e so a area de trabalho. */
.lateral {
    position: fixed;
    top: var(--topo);
    bottom: 0;
    left: 0;
    width: var(--lateral);
    background: var(--moldura);
    border-right: 1px solid var(--moldura-borda);
    display: flex;
    flex-direction: column;
    padding-top: 14px;
    z-index: 998;
}

/* Espaco da logo dentro da barra: so existe no responsivo. */
.lateral-logo {
    display: none;
}

/* Se a lista passar da altura da janela ela rola por dentro, e o rodape
   (usuario e tema) continua preso embaixo. */
.lateral-itens {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.lateral-grupo {
    padding: 14px 20px 6px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--moldura-rotulo);
}

.lateral-item {
    display: flex;
    align-items: center;
    padding: 11px 20px;
    color: var(--moldura-texto);
    font-size: 13px;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background .15s, color .15s;
}

    .lateral-item:hover {
        background: var(--moldura-hover);
        color: var(--moldura-texto-forte);
        text-decoration: none;
    }

    .lateral-item.on {
        background: var(--azul-veu);
        border-left-color: var(--azul-claro);
        color: var(--azul);
        font-weight: 600;
    }

    .lateral-item i, .lateral-item svg {
        flex: 0 0 auto;
        width: 17px;
        margin-right: 12px;
        font-size: 14px;
        text-align: center;
    }

html[data-tema="escuro"] .lateral-item.on {
    color: #fff;
}

.lateral-rodape {
    position: relative;
    padding: 12px;
    border-top: 1px solid var(--moldura-linha);
}

.lateral-sino {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 6px;
    border: none;
    border-radius: 10px;
    background: none;
    color: var(--moldura-texto);
    font-family: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

    .lateral-sino:hover {
        background: var(--moldura-hover);
        color: var(--moldura-texto-forte);
    }

    .lateral-sino:focus {
        outline: none;
    }

    .lateral-sino i, .lateral-sino svg {
        flex: 0 0 auto;
        width: 17px;
        margin-right: 12px;
        font-size: 14px;
        text-align: center;
    }

.lateral-usuario {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 10px;
    background: var(--moldura-botao);
    color: var(--moldura-texto-forte);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

    .lateral-usuario:hover {
        background: var(--moldura-hover);
    }

    .lateral-usuario:focus {
        outline: none;
    }

.lateral-avatar {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    margin-right: 10px;
    border-radius: 8px;
    background: var(--azul);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}

.lateral-usuario-texto {
    min-width: 0;
    flex: 1;
    line-height: 1.2;
}

.lateral-usuario-nome {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lateral-usuario-papel {
    font-size: 10px;
    letter-spacing: .4px;
    text-transform: uppercase;
    opacity: .55;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Seletor de tema ---------- */
.tema-titulo {
    padding: 14px 8px 6px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--moldura-rotulo);
}

.tema-grupo {
    display: flex;
}

.tema-botao {
    flex: 1;
    margin-right: 4px;
    padding: 7px 4px;
    border: 1px solid var(--moldura-borda);
    border-radius: 8px;
    background: none;
    color: var(--moldura-texto);
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}

    .tema-botao:last-child {
        margin-right: 0;
    }

    .tema-botao:hover {
        background: var(--moldura-hover);
        color: var(--moldura-texto-forte);
    }

    .tema-botao:focus {
        outline: none;
    }

    .tema-botao.on {
        background: var(--azul);
        border-color: var(--azul);
        color: #fff;
    }

/* ---------- Paineis do sino e do usuario ---------- */
.painel-lateral {
    position: absolute;
    bottom: 52px;
    left: 12px;
    width: 268px;
    background: var(--cartao);
    border: 1px solid var(--borda);
    border-radius: 14px;
    box-shadow: var(--sombra);
    overflow: hidden;
    z-index: 1001;
}

    .painel-lateral[hidden] {
        display: none !important;
    }

.painel-topo {
    padding: 14px 16px;
    background: var(--cartao-2);
    border-bottom: 1px solid var(--borda);
}

.painel-nome {
    font-size: 13px;
    font-weight: 700;
    color: var(--texto);
    word-break: break-word;
}

.painel-sub {
    margin-top: 2px;
    font-size: 11px;
    color: var(--texto-fraco);
}

.painel-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: none;
    color: var(--texto);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

    .painel-item:hover {
        background: var(--cartao-2);
        color: var(--texto);
        text-decoration: none;
    }

    .painel-item:focus {
        outline: none;
    }

    .painel-item i, .painel-item svg {
        width: 16px;
        margin-right: 11px;
        color: var(--texto-fraco);
        font-size: 13px;
    }

    .painel-item.sair, .painel-item.sair i, .painel-item.sair svg {
        color: #c0394a;
    }

.painel-separador {
    height: 1px;
    background: var(--borda);
}

.painel-vazio {
    padding: 22px 16px;
    text-align: center;
    font-size: 12px;
    color: var(--texto-fraco);
}

    .painel-vazio i, .painel-vazio svg {
        display: block;
        margin: 0 auto 8px;
        font-size: 22px;
        color: var(--borda);
    }

/* Veu do menu no celular */
.veu-menu {
    display: none;
    position: fixed;
    top: var(--topo);
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(16, 24, 40, .5);
    z-index: 997;
}

body.menu-aberto .veu-menu {
    display: block;
}

/* =========================================================================
   RESPONSIVO DA MOLDURA
   Mesmo comportamento do portal do Certdata: acima de 992px a barra fica
   sempre aberta e nao recolhe; de 992px para baixo ela sai da tela e o
   botao do topo a traz por cima do conteudo.
   ========================================================================= */
@media screen and (max-width: 992px) {

    /* No topo fica so o botao; a logo passa a morar na barra. */
    .topo {
        padding-left: 14px;
        padding-right: 14px;
    }

    .topo-identidade {
        display: none;
    }

    .topo-divisor {
        display: none;
    }

    .topo-produto {
        display: none;
    }

    .topo-menu-botao {
        display: block;
        margin-left: 0;
    }

    .topo-marca {
        margin-left: auto;
    }

    .lateral-logo {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
        padding: 13px 14px;
        margin-bottom: 6px;
        border-bottom: 1px solid var(--moldura-linha);
    }

        /* A logo ocupa a largura util da barra e a altura vem da proporcao
           dela: vale para qualquer entidade, sem acertar altura por arquivo. */
        .lateral-logo .topo-logo {
            flex: 1;
            min-width: 0;
        }

            .lateral-logo .topo-logo img {
                width: 100%;
                height: auto;
            }

    .lateral {
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: var(--sombra);
    }

    body.menu-aberto .lateral {
        transform: translateX(0);
    }

    .openMenuContainer, .openMenuContainerActive {
        margin-left: 0;
        width: 100%;
    }
}

/* =========================================================================
   COMPLEMENTOS DO TEMA ESCURO

   As telas passaram a usar os tokens, entao elas viram sozinhas. Sobraram
   tres coisas que os tokens nao alcancam.
   ========================================================================= */

/* 1. A sombra some no escuro. Sombra e luz batendo em papel branco: sobre
      fundo escuro ela vira mancha. Quem separa o cartao do fundo passa a
      ser a borda, que no claro nao existe porque a sombra ja da conta. */
html[data-tema="escuro"] .fin-card,
html[data-tema="escuro"] .as-card,
html[data-tema="escuro"] .in-card,
html[data-tema="escuro"] .ged-card,
html[data-tema="escuro"] .cop-card,
html[data-tema="escuro"] .dec-card,
html[data-tema="escuro"] .exp-card,
html[data-tema="escuro"] .lot-card,
html[data-tema="escuro"] .termo-card,
html[data-tema="escuro"] .ra-card,
html[data-tema="escuro"] .in-kpi {
    border: 1px solid var(--borda);
}

/* 2. As modais vem do Bootstrap com fundo branco fixo. */
html[data-tema="escuro"] .modal-content {
    background-color: var(--cartao);
    border: 1px solid var(--borda);
    color: var(--texto);
}

html[data-tema="escuro"] .modal-header,
html[data-tema="escuro"] .modal-footer {
    border-color: var(--borda);
}

html[data-tema="escuro"] .modal-header .close {
    color: var(--texto);
    text-shadow: none;
    opacity: .8;
}

/* 3. Campos e tabelas herdados que as telas ainda usam. */
html[data-tema="escuro"] .customInput,
html[data-tema="escuro"] .form-control {
    background-color: var(--cartao-2);
    border-color: var(--borda);
    color: var(--texto);
}

    html[data-tema="escuro"] .customInput::placeholder,
    html[data-tema="escuro"] .form-control::placeholder {
        color: var(--texto-fraco);
    }

html[data-tema="escuro"] .tableContent,
html[data-tema="escuro"] .tableContent-middle {
    background-color: transparent;
    color: var(--texto);
}

html[data-tema="escuro"] .tableContent-middle table tbody tr {
    background-color: var(--cartao);
    border-bottom-color: var(--borda-suave);
}

    html[data-tema="escuro"] .tableContent-middle table tbody tr:hover {
        background-color: var(--cartao-2);
    }

html[data-tema="escuro"] .tableContent-middle table thead tr {
    background-color: var(--cartao-3);
}

/* =========================================================================
   CARREGANDO

   Um so para todo o portal: o markup vive no Menu.ascx, entao toda tela
   interna ja nasce com ele. Mantive os ids divCarregar e lblCarregar, que
   sao os que o page_termo e o page_termo_associados ja chamavam.

   Antes cada tela repetia esse CSS com a caixa laranja. Agora e azul, do
   padrao das telas, e acompanha o tema.
   ========================================================================= */
.loading-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background: rgba(16, 24, 40, .25);
    z-index: 1060;
    align-items: center;
    justify-content: center;
    display: none;
}

.loading-box {
    position: relative;
    width: 240px;
    padding: 28px 20px 24px;
    background: var(--cartao);
    border: 1px solid var(--borda);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(16, 39, 73, .28);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

    /* A faixa azul do topo substitui o retangulo laranja que ficava atras
       da caixa: mesma ideia de destaque, sem o bloco de cor. */
    .loading-box::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        border-radius: 16px 16px 0 0;
        background: var(--hero);
    }

    .loading-box i, .loading-box svg {
        font-size: 44px;
        color: var(--azul-claro);
        margin-bottom: 16px;
    }

    .loading-box h5 {
        margin: 0;
        font-size: 13.5px;
        font-weight: 600;
        color: var(--texto);
    }

/* A tela de login e as de senha tem o proprio loading, estilizado no
   Page.css, e nao carregam este arquivo: nao ha conflito. */

/* =========================================================================
   COMBOS E CALENDARIO

   A lista que abre num <select> e desenhada pelo sistema operacional, nao
   pelo CSS: por isso ela vinha branca com o item azul do Windows mesmo no
   tema escuro. O color-scheme e o unico jeito de avisar o navegador do
   tema; o resto e acabamento das opcoes.
   ========================================================================= */
:root {
    color-scheme: light;
}

html[data-tema="escuro"] {
    color-scheme: dark;
}

select option {
    background: var(--cartao);
    color: var(--texto);
}

/* O datepicker do jQuery UI vem com o tema cinza de fabrica. */
.ui-datepicker {
    padding: 10px !important;
    background: var(--cartao) !important;
    border: 1px solid var(--borda) !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 44px rgba(16, 39, 73, .22) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12.5px !important;
    z-index: 1070 !important;
}

    .ui-datepicker .ui-datepicker-header {
        padding: 2px 0 8px !important;
        background: none !important;
        border: none !important;
        border-radius: 0 !important;
        color: var(--texto) !important;
        font-weight: 600 !important;
    }

    .ui-datepicker select.ui-datepicker-month,
    .ui-datepicker select.ui-datepicker-year {
        padding: 6px 8px !important;
        margin: 0 3px !important;
        border: 1px solid var(--borda) !important;
        border-radius: 8px !important;
        background: var(--cartao) !important;
        color: var(--texto) !important;
        font-family: inherit !important;
        font-size: 12px !important;
    }

    .ui-datepicker .ui-datepicker-prev,
    .ui-datepicker .ui-datepicker-next {
        top: 4px !important;
        width: 26px !important;
        height: 26px !important;
        border: 1px solid var(--borda) !important;
        border-radius: 8px !important;
        background: var(--cartao-2) !important;
        cursor: pointer !important;
    }

        .ui-datepicker .ui-datepicker-prev span,
        .ui-datepicker .ui-datepicker-next span {
            /* os icones sao um sprite de imagem clara: no escuro sumiriam */
            filter: var(--filtro-seta, none);
        }

    .ui-datepicker .ui-datepicker-prev-hover,
    .ui-datepicker .ui-datepicker-next-hover {
        top: 4px !important;
        border-color: var(--azul-borda) !important;
        background: var(--azul-veu) !important;
    }

html[data-tema="escuro"] {
    --filtro-seta: invert(1) brightness(1.6);
}