/* ==========================================================================
   PAINEL DE CARDS - DASHBOARD PREMIUM v1.0
   Padrão ANAK - Vermelho #a61e20
   Aplicação: 
   ========================================================================== */

/* === Variáveis Globais === */
:root {
    /* Cores Principais ANAK */
    --cor-principal: #a61e20;
    --cor-principal-anak: #a61e20;
    --cor-principal-hover: #8a1a1c;
    
    /* Cores dos Cards */
    --cor-card-1: #a61e20;      /* Alunos Cadastrados */
    --cor-card-2: #28a745;      /* Alunos Ativos */
    --cor-card-3: #17a2b8;      /* Alunos Novos */
    --cor-card-4: #fd7e14;      /* Matrículas Ativas */
    
    /* Cores de Interface */
    --cor-texto-titulo: #1e2022;
    --cor-texto-legenda: #6c757d;
    --cor-borda-card: #e9ecef;
    --cor-fundo-card: #ffffff;
    
    /* Sombras */
    --sombra-card-base: 0 2px 8px rgba(0, 0, 0, 0.06);
    --sombra-card-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
    
    /* Fontes */
    --fonte-sistema: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* === Container Principal do Painel === */
 {
    padding: 1rem 0 !important;
    background: transparent !important;
    position: relative !important;
}

 .col-xl-12.inimacao {
    padding: 0 15px !important;
}

/* === Row Container === */
 .row.des {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: -10px !important;
    gap: 0 !important;
}

/* === Cards Base === */
 .cascading-admin-card {
    background: var(--cor-fundo-card) !important;
    border: 1px solid var(--cor-borda-card) !important;
    border-radius: 12px !important;
    padding: 24px !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: var(--sombra-card-base) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-height: 140px !important;
    margin: 10px !important;
    flex: 1 1 calc(25% - 20px) !important;
}

/* === Hover Elegante === */
 .cascading-admin-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--sombra-card-hover) !important;
}

/* === Indicador de Cor Superior === */
 .cascading-admin-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: var(--cor-card-default, var(--cor-principal-anak)) !important;
}

/* === Cores Específicas por ID === */
 #tur01::before {
    background: var(--cor-card-1) !important;
}

 #tur02::before {
    background: var(--cor-card-2) !important;
}

 #tur03::before {
    background: var(--cor-card-3) !important;
}

 #tur04::before {
    background: var(--cor-card-4) !important;
}

/* === Container Admin-up === */
 .admin-up {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 10px !important;
}

/* === Ícones - Marca d'água Sutil === */
 .admin-up > i.fa,
 .admin-up > i[class*="fa-"] {
    position: absolute !important;
    right: 12px !important;
    bottom: -8px !important;
    font-size: 48px !important;
    color: rgba(0, 0, 0, 0.04) !important;
    transform: rotate(-8deg) !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

/* === Container de Dados === */
 .data {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
}

/* === Textos Labels === */
 .data p,
 .text-uppercase {
    font-family: var(--fonte-sistema) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: var(--cor-texto-legenda) !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.2 !important;
}

/* === Números Principais === */
 .data h4,
 .font-weight-bold {
    font-family: var(--fonte-sistema) !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    color: var(--cor-texto-titulo) !important;
    margin: 0 !important;
    line-height: 1 !important;
    letter-spacing: -1px !important;
}

/* === Container DRTY (Números com Infinito) === */
 .drty {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    font-family: var(--fonte-sistema) !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    color: var(--cor-texto-titulo) !important;
    line-height: 1 !important;
}

/* === Símbolo Infinito === */
 .drty .label-default {
    font-size: 24px !important;
    font-weight: 400 !important;
    color: var(--cor-texto-legenda) !important;
    background: none !important;
    padding: 0 !important;
    border: none !important;
    margin: 0 !important;
    opacity: 0.5 !important;
}

/* === Barra Separadora === */
 .drty::after {
    content: '/' !important;
    font-size: 20px !important;
    color: var(--cor-texto-legenda) !important;
    margin: 0 4px !important;
    opacity: 0.3 !important;
    font-weight: 300 !important;
}

/* === Número Success === */
 .drty .label-success {
    background: none !important;
    color: var(--cor-texto-titulo) !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    padding: 0 !important;
    border: none !important;
    margin: 0 !important;
}

/* === Limpar Card Body Vazio === */
 .card-body-cascade:empty {
    display: none !important;
}

/* === Desabilitar Animações Pesadas === */
 .animated,
 .bounceInDown,
 .shake {
    animation: none !important;
}

/* === Animação Sutil de Entrada === */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

 .cascading-admin-card {
    opacity: 1 !important;
}

 .cascading-admin-card.animate-on-load {
    animation: fadeInUp 0.4s ease forwards !important;
}

 #tur01.animate-on-load { animation-delay: 0.05s !important; }
 #tur02.animate-on-load { animation-delay: 0.1s !important; }
 #tur03.animate-on-load { animation-delay: 0.15s !important; }
 #tur04.animate-on-load { animation-delay: 0.2s !important; }

/* === Classes de Espaçamento === */
 .quadro_espace {
    margin-bottom: 20px !important;
}

 .quadro_espace_centro {
    margin-bottom: 20px !important;
}

/* === Responsividade === */
@media (max-width: 1200px) {
     .cascading-admin-card {
        flex: 1 1 calc(50% - 20px) !important;
    }
}

@media (max-width: 768px) {
     .cascading-admin-card {
        flex: 1 1 100% !important;
        min-height: 120px !important;
        padding: 20px !important;
    }
    
     .data h4,
     .drty {
        font-size: 28px !important;
    }
    
     .admin-up > i.fa {
        font-size: 40px !important;
    }
}

@media (max-width: 480px) {
     .cascading-admin-card {
        min-height: 100px !important;
        padding: 16px !important;
    }
    
     .data h4,
     .drty {
        font-size: 24px !important;
    }
    
     .data p {
        font-size: 10px !important;
    }
}

/* === Performance Optimization === */
 .cascading-admin-card {
    will-change: transform, box-shadow !important;
    backface-visibility: hidden !important;
}

/* === Desabilitar Script de Shake Aleatório === */
 i.shake {
    animation: none !important;
}

.admin-up {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-around !important;
    gap: 10px !important;
    flex-wrap: wrap !important; 
    align-content: space-between;
}


.card.features.main-features.wow.fadeInUp.gg {
    height: 100% !important;
}



/* ==========================================================================
   SOBREPOSIÇÃO DE ESTILOS - FORMULÁRIOS
   Autor: Gemini AI
   Descrição: Estilização profissional para todos os elementos de formulário,
              mantendo a identidade visual premium do dashboard.
   ========================================================================== */

/* === Estilo do Card que contém o formulário === */
#page-wrapper .card.baixo {
    background: var(--cor-fundo-card) !important;
    border: 1px solid var(--cor-borda-card) !important;
    border-radius: 16px !important;
    box-shadow: var(--sombra-card-sutil) !important;
}

#page-wrapper .card.baixo .card-header {
    background-color: transparent !important;
    border-bottom: 1px solid var(--cor-borda-card) !important;
    font-family: var(--fonte-principal-ui) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--cor-texto-titulo) !important;
}

/* === Títulos de Seção do Formulário (Ex: "Detalhes Pessoais") === */
#page-wrapper form#cadastro h5.cad_ac {
    font-family: var(--fonte-principal-ui) !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: var(--cor-texto-titulo) !important;
    margin: 20px 0 10px 0 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
}
#page-wrapper form#cadastro h5.cad_ac .fa {
    margin-right: 10px !important;
    color: var(--cor-principal-anak) !important;
}

/* Remove a linha antiga para um visual mais limpo */
#page-wrapper form#cadastro .tarja {
    display: none !important;
}

/* === Estilo dos Rótulos (Labels) === */
#page-wrapper form#cadastro .form-group .control-label {
    font-family: var(--fonte-principal-ui) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--cor-texto-legenda) !important;
    margin-bottom: 8px !important;
}

/* === Estilo dos Campos de Input e Select === */
#page-wrapper form#cadastro .form-control {
    height: 48px !important;
    padding: 0 15px !important;
    font-size: 15px !important;
    font-family: var(--fonte-principal-ui) !important;
    color: var(--cor-texto-titulo) !important;
    background-color: #f8f9fa !important; /* Fundo sutilmente cinza */
    border: 1px solid var(--cor-borda-card) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    transition: all 0.2s ease-in-out !important;
}

/* Estilo do campo em foco */
#page-wrapper form#cadastro .form-control:focus {
    background-color: #ffffff !important;
    border-color: var(--cor-principal-anak) !important;
    box-shadow: 0 0 0 3px rgba(166, 30, 32, 0.15) !important;
}

/* Placeholder (texto de dica) */
#page-wrapper form#cadastro .form-control::placeholder {
    color: #adb5bd !important;
}

/* Campo desabilitado */
#page-wrapper form#cadastro .form-control:disabled {
    background-color: #e9ecef !important;
    cursor: not-allowed !important;
}

/* === Estilo do Botão Principal === */
#page-wrapper form#cadastro #botao button#btn {
    background: var(--cor-principal-anak) !important;
    color: #ffffff !important;
    font-family: var(--fonte-principal-ui) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 12px 30px !important;
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(166, 30, 32, 0.2) !important;
    transition: all 0.3s ease !important;
    margin-top: 20px !important;
}

#page-wrapper form#cadastro #botao button#btn:hover {
    background: var(--cor-principal-hover) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 7px 20px rgba(166, 30, 32, 0.3) !important;
}

/* ==========================================================================
   SOBREPOSIÇÃO DE ESTILOS - LISTA DE ALUNOS v6.2 (CONTEÚDO COMPLETO)
   Autor: Gemini AI
   Descrição: Versão final que restaura todo o conteúdo, garante altura dinâmica
              e estiliza as seções de reenvio de credenciais.
   ========================================================================== */

/* === Card Principal do Aluno === */
.search-result-item {
    background-color: var(--cor-fundo-card) !important;
    border: 1px solid var(--cor-borda-card) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    margin-bottom: 25px !important;
    display: flex !important;
    gap: 20px !important;
    align-items: flex-start !important; /* Alinha colunas no topo */
    box-shadow: var(--sombra-card-sutil) !important;
    transition: all 0.3s cubic-bezier(0.2, 0.7, 0.3, 1) !important;
    height: auto !important; /* ALTURA DINÂMICA PARA NÃO CORTAR NADA */
}

.search-result-item:hover {
    transform: translateY(-5px) !important;
    box-shadow: var(--sombra-card-hover) !important;
    border-color: rgba(166, 30, 32, 0.4) !important;
}

/* === Perfil e Avatar do Aluno (Coluna Esquerda) === */
.search-result-item .user_perfil {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 80px !important;
}

.search-result-item .user_perfil .avatar {
    width: 60px !important; height: 60px !important;
    border-radius: 50% !important; font-size: 24px !important;
    font-weight: 600 !important; display: flex !important;
    align-items: center !important; justify-content: center !important;
    color: #fff !important;
}

.search-result-item .user_perfil .status_matricula {
    font-family: var(--fonte-principal-ui) !important; font-size: 11px !important;
    font-weight: 600 !important; padding: 4px 10px !important;
    border-radius: 20px !important; text-transform: uppercase !important;
    letter-spacing: 0.5px !important; background-color: #d4edda !important;
    color: #155724 !important;
}

/* === Corpo Principal do Card (Coluna Direita) === */
.search-result-item .search-result-item-body {
    width: 100% !important;
}
#nome_aluno {
    font-size: 1.2rem !important; font-weight: 600 !important;
    color: var(--cor-texto-titulo) !important; margin-bottom: 8px !important;
}
#aluno_e_mail, #aluno_date {
    font-size: 14px !important; color: var(--cor-texto-legenda) !important;
    line-height: 1.6 !important; margin-bottom: 16px !important;
}

/* === Seção de Cursos e Progresso === */
#comb { display: flex !important; align-items: center !important; gap: 15px !important; }
.avatar_curso {
    width: 40px !important; height: 40px !important; min-width: 40px !important;
    border-radius: 50% !important; font-weight: 600 !important; font-size: 14px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    color: #fff !important;
}
.progress {
    height: 12px !important; border-radius: 12px !important;
    background-color: var(--cor-borda-card) !important; width: 100% !important;
}
.progress-bar { background: var(--cor-principal-anak) !important; border-radius: 12px !important; }
.progress .show { display: none !important; }

/* === CONTEÚDO RESTAURADO: Seção de Reenvio de Credenciais (.mdtr) === */
.mdtr {
    display: block !important; /* Garante que a seção esteja visível */
    margin-top: 25px !important;
    padding-top: 20px !important;
    border-top: 1px solid var(--cor-borda-card) !important;
}
.mdtr table {
    width: 100% !important;
    text-align: center !important;
    font-family: var(--fonte-principal-ui) !important;
    margin-bottom: 20px !important;
}
.mdtr table td[colspan="2"] {
    font-weight: 600 !important;
    color: var(--cor-texto-titulo) !important;
    padding-bottom: 15px !important;
}
.mdtr table td {
    color: var(--cor-texto-legenda) !important;
    font-size: 14px !important;
    padding: 4px !important;
}
.mdtr table span.yaa {
    color: #28a745 !important; font-weight: 700 !important;
}
.mdtr table span.nno {
    color: #dc3545 !important; font-weight: 700 !important;
}
.mdtr table button.renviar, .mdtr table button.renviar_whatsapp {
    background: var(--cor-fundo-hover) !important;
    color: var(--cor-texto-padrao) !important;
    font-family: var(--fonte-principal-ui) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 8px 18px !important;
    border: 1px solid var(--cor-borda-card) !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin-top: 10px !important;
}
.mdtr table button.renviar:hover, .mdtr table button.renviar_whatsapp:hover {
    background: var(--cor-principal-anak) !important;
    color: #fff !important;
    border-color: var(--cor-principal-anak) !important;
}

/* === Ações (Status, Menu Dropdown) === */
.bnt_des {
    float: right !important;
}
.bnt_des a {
    font-family: var(--fonte-principal-ui) !important; font-size: 11px !important;
    font-weight: 600 !important; padding: 4px 10px !important;
    border-radius: 20px !important; text-transform: uppercase !important;
    letter-spacing: 0.5px !important; background-color: #e9ecef !important;
    color: var(--cor-texto-legenda) !important; text-decoration: none !important;
}
.bnt_des a.ative { /* Estilo para o status "Ativo" */
    background-color: #d4edda !important;
    color: #155724 !important;
}
.user_config .dropdown-menu {
    border-radius: 12px !important; border: 1px solid var(--cor-borda-card) !important;
    box-shadow: var(--sombra-card-hover) !important; padding: 8px !important;
}
.user_config .dropdown-menu a {
    font-family: var(--fonte-principal-ui) !important; font-weight: 500 !important;
    padding: 8px 12px !important; border-radius: 8px !important;
    color: var(--cor-texto-padrao) !important;
}
.user_config .dropdown-menu a:hover {
    background-color: var(--cor-fundo-hover) !important; color: var(--cor-principal-anak) !important;
}

.status_aluno {
    float: right;
    font-size: 14px;
    position: absolute;
    background-color: #fff;
    margin-left: 63px;
    width: 66px;
    margin-top: -16px !important;
}
.form-check.form-check-inline.botom {
    background-color: #ffffff;
    width: 47px;
    color: #757575 !important;
    border-radius: 5px;
    text-align: center;
    height: 34px;
    padding-left: 6px;
    display: none;
    /* margin-left: 19px; */
}
.status {
    width: 10px;
    height: 10px;
    background-color: #adadad;
    border-radius: 50px;
    margin-top: 3px;
    position: absolute;
    border: 2px solid #e3e3e3;
    border-radius: 4px;
    margin-left: 62px;
}












/* ==========================================================================
   SOBREPOSIÇÃO DE ESTILOS - FORMULÁRIOS COMPLETOS v6.2
   Autor: Gemini AI
   Descrição: Estilização completa e premium para todos os elementos de
              formulário, incluindo inputs, selects, botões e checkboxes.
   ========================================================================== */

/* === Estrutura e Títulos do Formulário === */
#page-wrapper form#cadastro .form-group,
#page-wrapper form#upload_forme .form-group {
    margin-bottom: 24px !important; /* Espaçamento vertical consistente */
}

#page-wrapper form h5.cad_ac {
    font-family: var(--fonte-principal-ui) !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    color: var(--cor-texto-titulo) !important;
    margin: 25px 0 15px 0 !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid var(--cor-borda-card) !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
}

#page-wrapper form h5.cad_ac .fa {
    margin-right: 12px !important;
    color: var(--cor-principal-anak) !important;
}

/* === Rótulos (Labels) e Textos de Ajuda === */
#page-wrapper form .control-label {
    font-family: var(--fonte-principal-ui) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--cor-texto-legenda) !important;
    margin-bottom: 8px !important;
    display: block !important;
}

#page-wrapper form .help-block {
    font-size: 13px !important;
    color: #999 !important;
    margin-top: 8px !important;
}

/* === Estilo Padrão para Campos (Inputs, Selects) === */
#page-wrapper form .form-control {
    height: 50px !important;
    padding: 0 18px !important;
    font-size: 15px !important;
    font-family: var(--fonte-principal-ui) !important;
    color: var(--cor-texto-titulo) !important;
    background-color: #f8f9fa !important;
    border: 2px solid #f8f9fa !important; /* Borda da mesma cor do fundo */
    border-radius: 12px !important;
    box-shadow: none !important;
    transition: all 0.2s ease-in-out !important;
}

/* Efeito de Foco */
#page-wrapper form .form-control:focus {
    background-color: #ffffff !important;
    border-color: var(--cor-principal-anak) !important;
    box-shadow: 0 0 0 3px rgba(166, 30, 32, 0.1) !important;
}

/* Tratamento do Select2 para parecer com os outros inputs */
#page-wrapper form .select2-container--default .select2-selection--single {
    height: 50px !important;
    background-color: #f8f9fa !important;
    border: 2px solid #f8f9fa !important;
    border-radius: 12px !important;
}
#page-wrapper form .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 48px !important;
    padding-left: 18px !important;
    color: var(--cor-texto-titulo) !important;
}
#page-wrapper form .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 48px !important;
}

/* === Botões === */
/* Botão Principal (Salvar / Cadastrar) */
#page-wrapper form button.criar,
#page-wrapper form button.salvacao_p {
    background: var(--cor-principal-anak) !important;
    color: #ffffff !important;
    font-family: var(--fonte-principal-ui) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 14px 35px !important;
    border: none !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(166, 30, 32, 0.2) !important;
    transition: all 0.3s ease !important;
    margin-top: 20px !important;
}
#page-wrapper form button.criar:hover,
#page-wrapper form button.salvacao_p:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 7px 20px rgba(166, 30, 32, 0.3) !important;
}

/* Botões Secundários ("Cadastrar Empresas", "Gerar Senha") */
#page-wrapper form .btn-custom,
#page-wrapper form .gerar {
    background-color: var(--cor-fundo-hover) !important;
    color: var(--cor-texto-padrao) !important;
    border: 1px solid var(--cor-borda-card) !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
    transition: all 0.2s ease !important;
    margin-left: 10px !important;
}
#page-wrapper form .btn-custom:hover,
#page-wrapper form .gerar:hover {
    background-color: var(--cor-principal-anak) !important;
    color: #fff !important;
    border-color: var(--cor-principal-anak) !important;
}




.data h4, .font-weight-bold {
    font-family: var(--fonte-sistema) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #616366 !important;
    margin: 0 !important;
    line-height: 1 !important;
    letter-spacing: -1px !important;
}



.form-check.form-check-inline.botom {
    background-color: #fff;
    width: 47px;
    color: #757575 !important;
    border-radius: 5px;
    text-align: center;
    height: 34px;
    padding-left: 6px;
    display: flex
;
}







.card.card-cascade.cascading-admin-card.espaco_d.single-course.filter.super.oms {
    height: 682px;
}

/* ==========================================================================
   SOBREPOSIÇÃO DE ESTILOS - CARDS INFORMATIVOS (FUNCIONALIDADES / IMPORTAR)
   Autor: Gemini AI
   Descrição: Estilização premium para os cards de conteúdo estático,
              alinhando-os com a identidade visual do dashboard.
   ========================================================================== */

/* === Card Base para Funcionalidades e Importação === */
.card.frfrfe.efefwe {
    background-color: var(--cor-fundo-card) !important;
    border: 1px solid var(--cor-borda-card) !important;
    border-radius: 16px !important;
    box-shadow: var(--sombra-card-sutil) !important;
    margin-bottom: 30px !important;
    overflow: hidden; /* Garante que os cantos arredondados sejam aplicados ao header */
}

/* === Cabeçalho dos Cards === */
.card.frfrfe.efefwe .card-header {
    background-color: #f8f9fa !important; /* Um fundo sutil para o cabeçalho */
    color: var(--cor-texto-titulo) !important;
    font-family: var(--fonte-principal-ui) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    text-align: left !important; /* Alinhamento mais profissional */
    padding: 18px 25px !important;
    border-bottom: 1px solid var(--cor-borda-card) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.card.frfrfe.efefwe .card-header .fa {
    color: var(--cor-principal-anak) !important;
}

/* === Corpo do Card e Alinhamento do Conteúdo === */
.card.frfrfe.efefwe .card-body {
    padding: 25px !important;
    font-family: var(--fonte-principal-ui) !important;
}

.card.frfrfe.efefwe .card-body .row {
    align-items: flex-start !important; /* Alinha o ícone com o topo do texto */
}

.card.frfrfe.efefwe .ferfee {
    text-align: center !important;
}

.card.frfrfe.efefwe .ferfee img {
    width: 50px !important;
    height: auto !important;
    opacity: 0.7 !important;
}

/* === Listas de Instruções (UL e OL) com Estilo Premium === */
.card.frfrfe.efefwe ul.frrefrefe,
.card.frfrfe.efefwe ol {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

.card.frfrfe.efefwe ul.frrefrefe li,
.card.frfrfe.efefwe ol li {
    padding-left: 28px !important;
    position: relative !important;
    margin-bottom: 15px !important;
    font-size: 15px !important;
    color: var(--cor-texto-padrao) !important;
    line-height: 1.6 !important;
}

/* Marcador personalizado para as listas */
.card.frfrfe.efefwe ul.frrefrefe li::before,
.card.frfrfe.efefwe ol li::before {
    content: '✔' !important; /* Ícone de check */
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    font-weight: 600 !important;
    color: var(--cor-principal-anak) !important;
}

/* Numeração para a lista ordenada (OL) */
.card.frfrfe.efefwe ol {
    counter-reset: item !important;
}
.card.frfrfe.efefwe ol li::before {
    content: counter(item) !important;
    counter-increment: item !important;
    background-color: var(--cor-principal-anak) !important;
    color: white !important;
    border-radius: 50% !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    text-align: center !important;
}

/* === Estilização do Texto Interno === */
#importacao p, #importacao li {
    color: var(--cor-texto-padrao) !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
}

#importacao strong {
    color: var(--cor-texto-titulo) !important;
    font-weight: 600 !important;
}

#importacao a {
    color: var(--cor-principal-anak) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-bottom: 2px solid rgba(166, 30, 32, 0.2) !important;
    transition: all 0.2s ease !important;
}

#importacao a:hover {
    background-color: rgba(166, 30, 32, 0.1) !important;
    border-bottom-color: var(--cor-principal-anak) !important;
}











/* ==========================================================================
   SOBREPOSIÇÃO DE ESTILOS - TABELA DE ORDENAÇÃO v2 (PREMIUM E RESPONSIVA)
   Autor: Gemini AI
   Descrição: Design refinado para a tabela de ordenação, com quebra de linha
              inteligente para evitar rolagem horizontal e manter a elegância.
   ========================================================================== */

/* === Card Container e Título da Seção === */
#page-wrapper .card-body.ordena {
    padding: 20px !important;
}

#page-wrapper #titulo_link.col-12 {
    font-family: var(--fonte-principal-ui) !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: var(--cor-texto-titulo) !important;
    margin-bottom: 15px !important;
    padding: 0 !important;
}

/* === Tabela Principal (Estrutura e Visual) === */
#myDestaquesTable {
    width: 100% !important;
    border: 1px solid var(--cor-borda-card) !important;
    border-radius: 16px !important;
    padding: 10px !important;
    background-color: var(--cor-fundo-card) !important;
    box-shadow: var(--sombra-card-sutil) !important;
    border-collapse: separate !important;
    border-spacing: 0 5px !important; /* Espaçamento vertical entre as linhas */
}

/* === Linhas da Tabela (TR) === */
#myDestaquesTable tr.ui-sortable-handle {
    background-color: #f8f9fa !important;
    border-radius: 12px !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}

#myDestaquesTable tr.ui-sortable-handle:hover {
    background-color: #f1f3f5 !important;
    transform: scale(1.01);
}

/* Linha sendo arrastada */
#myDestaquesTable tr.ui-sortable-helper {
    background-color: #fff !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    border-radius: 12px !important;
    display: table;
}

/* === Células da Tabela (TD) - Controle de Quebra de Linha === */
#myDestaquesTable td {
    padding: 15px !important;
    vertical-align: middle !important;
    font-family: var(--fonte-principal-ui) !important;
    font-size: 14px !important; /* Texto um pouco menor para caber melhor */
    color: var(--cor-texto-padrao) !important;
    border: none !important; /* Removemos as bordas internas para um look de lista */
}

/* Célula do Ícone de Arrastar (primeira coluna) */
#myDestaquesTable td:first-child {
    width: 40px !important; /* Largura fixa */
    text-align: center;
}
#myDestaquesTable td:first-child .move {
    cursor: grab !important;
    opacity: 0.6 !important;
    transition: opacity 0.2s ease !important;
}
#myDestaquesTable tr:hover .move {
    opacity: 1 !important;
}

/* Célula do Texto do Curso (coluna do meio) */
#myDestaquesTable td:nth-child(2) {
    font-weight: 500 !important;
    color: var(--cor-texto-titulo) !important;
    word-break: break-word !important; /* Força a quebra de palavras longas se necessário */
    white-space: normal !important; /* Permite a quebra de linha natural */
}

/* Célula do Checkbox (última coluna) */
#myDestaquesTable td:last-child {
    width: 50px !important; /* Largura fixa */
    text-align: right;
}

/* === Checkboxes Personalizados === */
#myDestaquesTable .form-check-label {
    padding-left: 30px !important;
    position: relative !important;
    cursor: pointer !important;
    display: inline-block;
    height: 20px;
}
#myDestaquesTable .form-check-input {
    display: none !important;
}
#myDestaquesTable .form-check-label::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 20px !important;
    height: 20px !important;
    border: 2px solid var(--cor-borda-card) !important;
    background: #fff !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}
#myDestaquesTable .form-check-label::after {
    content: '✔' !important;
    position: absolute !important;
    left: 4px !important;
    top: -1px !important;
    font-size: 16px !important;
    color: #fff !important;
    opacity: 0 !important;
    transform: scale(0.8) !important;
    transition: all 0.2s ease !important;
}
#myDestaquesTable .form-check-input:checked + .form-check-label::before {
    background-color: var(--cor-principal-anak) !important;
    border-color: var(--cor-principal-anak) !important;
}
#myDestaquesTable .form-check-input:checked + .form-check-label::after {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* === Texto de Ajuda (Help Block) === */
.card-body .help-block {
    margin-top: 15px !important;
    font-size: 13px !important;
    color: var(--cor-texto-legenda) !important;
}
.card-body .help-block .fa {
    margin-right: 5px;
}

/* ==========================================================================
   SOBREPOSIÇÃO DE ESTILOS - FORMULÁRIO E TABELA DE CATEGORIAS
   Autor: Gemini AI
   Descrição: Aplica o design premium aos campos de texto e à tabela de
              ordenação de categorias, mantendo a consistência visual.
   ========================================================================== */

/* === Campos de Input (Título, Subtítulo) === */
#page-wrapper .card-body .campo_g {
    width: 100% !important;
    height: 48px !important;
    padding: 0 18px !important;
    font-size: 15px !important;
    font-family: var(--fonte-principal-ui) !important;
    color: var(--cor-texto-titulo) !important;
    background-color: #f8f9fa !important;
    border: 2px solid #f8f9fa !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    transition: all 0.2s ease-in-out !important;
}
#page-wrapper .card-body .campo_g:focus {
    background-color: #ffffff !important;
    border-color: var(--cor-principal-anak) !important;
    box-shadow: 0 0 0 3px rgba(166, 30, 32, 0.1) !important;
}

/* === Título da Seção da Tabela === */
#page-wrapper .card-body #titulo_link.col-12 {
    font-family: var(--fonte-principal-ui) !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: var(--cor-texto-titulo) !important;
    margin-bottom: 15px !important;
    padding: 0 !important;
}

/* === Tabela Principal (Aplicando o mesmo estilo da anterior) === */
#myDumaastarmyTable {
    width: 100% !important;
    border: 1px solid var(--cor-borda-card) !important;
    border-radius: 16px !important;
    padding: 10px !important;
    background-color: var(--cor-fundo-card) !important;
    box-shadow: var(--sombra-card-sutil) !important;
    border-collapse: separate !important;
    border-spacing: 0 5px !important;
}

/* === Linhas da Tabela (TR) === */
#myDumaastarmyTable tr.ui-sortable-handle {
    background-color: #f8f9fa !important;
    border-radius: 12px !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}
#myDumaastarmyTable tr.ui-sortable-handle:hover {
    background-color: #f1f3f5 !important;
    transform: scale(1.01);
}
#myDumaastarmyTable tr.ui-sortable-helper {
    background-color: #fff !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    border-radius: 12px !important;
    display: table;
}

/* === Células da Tabela (TD) === */
#myDumaastarmyTable td {
    padding: 18px 15px !important;
    vertical-align: middle !important;
    font-family: var(--fonte-principal-ui) !important;
    font-size: 14px !important;
    color: var(--cor-texto-padrao) !important;
    border: none !important;
}
#myDumaastarmyTable tr:last-child td {
    border-bottom: none !important;
}
#myDumaastarmyTable td:first-child {
    width: 40px !important;
    text-align: center;
}
#myDumaastarmyTable td:nth-child(2) {
    font-weight: 500 !important;
    color: var(--cor-texto-titulo) !important;
    word-break: break-word !important;
    white-space: normal !important;
}
#myDumaastarmyTable td:last-child {
    width: 50px !important;
    text-align: right;
}
#myDumaastarmyTable .move {
    cursor: grab !important;
    opacity: 0.6 !important;
    transition: opacity 0.2s ease !important;
}
#myDumaastarmyTable tr:hover .move {
    opacity: 1 !important;
}

/* === Checkboxes Personalizados na Tabela === */
#myDumaastarmyTable .form-check-label {
    padding-left: 30px !important;
    position: relative !important;
    cursor: pointer !important;
    display: inline-block;
    height: 20px;
}
#myDumaastarmyTable .form-check-input {
    display: none !important;
}
#myDumaastarmyTable .form-check-label::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 20px !important;
    height: 20px !important;
    border: 2px solid var(--cor-borda-card) !important;
    background: #fff !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}
#myDumaastarmyTable .form-check-label::after {
    content: '✔' !important;
    position: absolute !important;
    left: 4px !important;
    top: -1px !important;
    font-size: 16px !important;
    color: #fff !important;
    opacity: 0 !important;
    transform: scale(0.8) !important;
    transition: all 0.2s ease !important;
}
#myDumaastarmyTable .form-check-input:checked + .form-check-label::before {
    background-color: var(--cor-principal-anak) !important;
    border-color: var(--cor-principal-anak) !important;
}
#myDumaastarmyTable .form-check-input:checked + .form-check-label::after {
    opacity: 1 !important;
    transform: scale(1) !important;
}


#myDumaastarmyTable .form-check-label {
    padding-left: 59px !important;
    position: relative !important;
    cursor: pointer !important;
    display: inline-block;
    height: 34px;
}

#page-wrapper .card.baixo {
    background: #ffffff00 !important;
    border: 1px solid #e9ecef00 !important;
    border-radius: 16px !important;
    box-shadow: none;
}

#myDestaquesTable .form-check-label {
    padding-left: 57px !important;
    position: relative !important;
    cursor: pointer !important;
    display: inline-block;
    height: 20px;
}

#myDumaastarmyTable .form-check-label::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 7px !important;
    width: 25px !important;
    height: 24px !important;
    border: 2px solid var(--cor-borda-card) !important;
    background: #fff !important;
    border-radius: 6px !important;
    transition: all 0.2s 
ease !important;
}


#myDumaastarmyTable .form-check-label::after {
    content: '✔' !important;
    position: absolute !important;
    left: 12px !important;
    top: 1px !important;
    font-size: 16px !important;
    color: #fff !important;
    opacity: 0 !important;
    transform: scale(0.8) !important;
    transition: all 0.2s 
ease !important;
}


#myDestaquesTable .form-check-label::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 7px !important;
    width: 25px !important;
    height: 24px !important;
    border: 2px solid var(--cor-borda-card) !important;
    background: #fff !important;
    border-radius: 6px !important;
    transition: all 0.2s 
ease !important;
}


#myDestaquesTable .form-check-label::after {
    content: '✔' !important;
    position: absolute !important;
    left: 12px !important;
    top: 1px !important;
    font-size: 16px !important;
    color: #fff !important;
    opacity: 0 !important;
    transform: scale(0.8) !important;
    transition: all 0.2s 
ease !important;
}
#myDestaquesTable .form-check-label {
    padding-left: 69px !important;
    position: relative !important;
    cursor: pointer !important;
    display: inline-block;
    height: 61px !important;
}

.card.card-cascade.cascading-admin-card.espaco_d.single-course.filter.pessonalizado.oms

 {
    height: 728px !important;
}
.card.card-cascade.cascading-admin-card.espaco_d.single-course.filter.pessonalizado.oms

 {
    height: 728px !important;
}



.progress .show {
    display: inline !important;
    margin-top: -9px;
}


/* ==========================================================================
   SOBREPOSIÇÃO DE ESTILOS - ABAS DE NAVEGAÇÃO (ESTILO CINEMA)
   Autor: Gemini AI
   Descrição: Design sofisticado para abas, com animações suaves e foco
              visual para uma experiência premium.
   ========================================================================== */

/* === Container Principal das Abas === */
.nav-tabs#myTab {
    border-bottom: 2px solid var(--cor-borda-card) !important; /* Linha de base */
    padding: 0 !important;
    margin-bottom: 30px !important;
}

/* === Estilo Geral dos Itens e Links da Aba === */
.nav-tabs#myTab .nav-item {
    margin-bottom: -2px !important; /* Alinha o indicador com a linha de base */
    margin-right: 30px !important; /* Espaçamento entre os itens */
}

.nav-tabs#myTab .nav-link {
    font-family: var(--fonte-principal-ui) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--cor-texto-legenda) !important;
    background: none !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    padding: 15px 5px !important; /* Aumenta a área de clique vertical */
    position: relative !important;
    transition: color 0.3s ease !important;
    white-space: nowrap; /* Evita que o texto quebre a linha */
}

/* === O Indicador Animado (A Mágica do Cinema) === */
.nav-tabs#myTab .nav-link::after {
    content: '' !important;
    position: absolute !important;
    bottom: -2px !important; /* Posiciona sobre a linha de base */
    left: 0 !important;
    width: 0 !important; /* Começa invisível */
    height: 3px !important;
    background: var(--cor-principal-anak) !important;
    border-radius: 3px !important;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Animação suave */
}

/* === Efeitos de Hover e Ativo === */

/* Efeito no texto ao passar o mouse */
.nav-tabs#myTab .nav-link:not(.active):hover {
    color: var(--cor-texto-titulo) !important;
}

/* Ativa a animação do indicador no hover */
.nav-tabs#myTab .nav-link:hover::after {
    width: 100% !important;
}

/* Estilo final para a aba ATIVA */
.nav-tabs#myTab .nav-link.active,
.nav-tabs#myTab .nav-link.active:hover {
    color: var(--cor-principal-anak) !important;
    background-color: transparent !important;
    border-color: transparent !important;
}

/* Garante que o indicador da aba ativa esteja sempre 100% visível */
.nav-tabs#myTab .nav-link.active::after {
    width: 100% !important;
}

/* ==========================================================================
   SOBREPOSIÇÃO DE ESTILOS - FORMULÁRIO DE MATRÍCULA (CINEMA)
   Autor: Gemini AI
   Descrição: Estilização completa para o formulário de detalhes da matrícula,
              unificando todos os campos e controles com a identidade visual premium.
   ========================================================================== */



.container-fluid.inimacao .data h4, .container-fluid.inimacao .font-weight-bold {
    font-family: var(--fonte-principal) !important;
    font-weight: 700 !important;
    font-size: 25px !important;
    color: var(--cor-texto-titulo) !important;
    margin: 0 !important;
    line-height: 1 !important;
}



.container-fluid.inimacao .drty .label-success {
    background: none !important;
    color: var(--cor-texto-titulo) !important;
    font-size: 25px !important;
    font-weight: 700 !important;
    padding: 0 !important;
}
#page-wrapper .card.baixo {
    background: #ffffff !important;
    border: 1px solid #e9ecef00 !important;
    border-radius: 16px !important;
    box-shadow: none;
}

/* ==========================================================================
   SOBREPOSIÇÃO DE ESTILOS - TABELA DE TICKETS DE ATENDIMENTO
   Autor: Gemini AI
   Descrição: Estilização premium para a lista de tickets de suporte,
              com foco em clareza, status visuais e ações intuitivas.
   ========================================================================== */

/* === Container da Tabela e Geral === */
.barra {
    background-color: var(--cor-fundo-card) !important;
    border: 1px solid var(--cor-borda-card) !important;
    border-radius: 16px !important;
    padding: 10px 20px 20px 20px !important;
    box-shadow: var(--sombra-card-sutil) !important;
}

#target-content {
    border-collapse: separate !important;
    border-spacing: 0 10px !important; /* Espaçamento vertical entre as linhas */
    margin-top: 10px !important;
}

/* === Cabeçalho da Tabela (Thead) === */
#target-content thead {
    border-bottom: 2px solid var(--cor-borda-card) !important;
}

#target-content thead th {
    font-family: var(--fonte-principal-ui) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--cor-texto-legenda) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 15px !important;
    border: none !important;
    text-align: left !important;
}

/* === Linhas da Tabela (TR) === */
#target-content tbody tr {
    transition: background-color 0.2s ease, transform 0.2s ease !important;
}

#target-content tbody tr:hover {
    background-color: #f8f9fa !important;
    transform: scale(1.015);
    z-index: 2;
    position: relative;
}

/* === Células da Tabela (TD) === */
#target-content tbody td {
    padding: 20px 15px !important;
    vertical-align: middle !important;
    font-family: var(--fonte-principal-ui) !important;
    font-size: 15px !important;
    color: var(--cor-texto-padrao) !important;
    border: none !important;
    border-bottom: 1px solid var(--cor-borda-card) !important;
}
#target-content tbody tr:last-child td {
    border-bottom: none !important;
}

/* === Conteúdo Específico das Células === */
/* Número do Ticket */
#target-content #nome_aluno {
    font-weight: 700 !important;
    color: var(--cor-texto-titulo) !important;
}

/* Título e Botão "Responder" */
#target-content .changer_chamado {
    background: transparent !important;
    border: none !important;
    color: var(--cor-texto-legenda) !important;
    padding: 5px !important;
    margin-left: 10px !important;
    opacity: 0.5 !important;
    transition: all 0.2s ease !important;
}
#target-content tr:hover .changer_chamado {
    opacity: 1 !important;
    color: var(--cor-principal-anak) !important;
}

/* === Status (Aberto / Fechado) === */
.deletar_reverso.ative, .deletar_reverso.off_aluno {
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 5px 12px !important;
    border-radius: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: inline-block !important;
    cursor: pointer;
}
/* Status "Aberto" */
.deletar_reverso.ative {
    background-color: #d4edda !important;
    color: #155724 !important;
}
/* Status "Fechado" */
.deletar_reverso.off_aluno {
    background-color: #f8d7da !important;
    color: #721c24 !important;
}

/* === Menu de Ações (...) === */
.user_config .menu_triha {
    color: var(--cor-texto-legenda) !important;
    padding: 10px !important;
}
.user_config .dropdown-menu {
    border-radius: 12px !important;
    border: 1px solid var(--cor-borda-card) !important;
    box-shadow: var(--sombra-card-hover) !important;
    padding: 8px !important;
}
.user_config .dropdown-menu a {
    font-family: var(--fonte-principal-ui) !important;
    font-weight: 500 !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    color: var(--cor-texto-padrao) !important;
}
.user_config .dropdown-menu a:hover {
    background-color: var(--cor-fundo-hover) !important;
    color: var(--cor-principal-anak) !important;
}


.deletar_reverso.ative, .deletar_reverso.off_aluno {
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 1px 12px !important;
    border-radius: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: inline-block !important;
    cursor: pointer;
}

.fa, .fa-brands, .fa-regular, .fa-solid, .fab, .far, .fas {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display, inline-block);
    font-style: normal;
    font-variant: normal;
    line-height: 0.5;
    text-rendering: auto;
}

#target-content tbody td {
    padding: 20px 15px !important;
    vertical-align: middle !important;
    font-family: var(--fonte-principal-ui) !important;
    font-size: 12px !important;
    color: var(--cor-texto-padrao) !important;
    border: none !important;
    border-bottom: 1px solid var(--cor-borda-card) !important;
}


.fa, .fa-brands, .fa-regular, .fa-solid, .fab, .far, .fas {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display, inline-block);
    font-style: normal;
    font-variant: normal;
    line-height: 0.5 !important;
    text-rendering: auto;
}


/* ==========================================================================
   SOBREPOSIÇÃO DE ESTILOS - CARDS DE CHAMADOS (DESIGN DESRRUPTIVO)
   Autor: Gemini AI
   Descrição: Redesign completo dos cards de estatísticas com foco em
              tipografia de impacto, layout vertical e uma estética
              premium inspirada em design gráfico.
   ========================================================================== */

/* === Variáveis de Cor para os Cards === */
:root {
    --cor-chamado-novo: #0d6efd;   /* Azul para 'Novos' */
    --cor-chamado-aberto: #fd7e14; /* Laranja para 'Abertos' */
    --cor-chamado-fechado: #6c757d;/* Cinza para 'Fechados' */
}



/* === Estilo Base do Card === */
.combo_grafic .card {
    background: #ffffff !important;
    border: 1px solid var(--cor-borda-card) !important;
    border-radius: 16px !important;
    padding: 25px !important;
    box-shadow: 0 4px 25px rgba(0,0,0,0.05) !important;
    transition: all 0.3s cubic-bezier(0.2, 0.7, 0.3, 1) !important;
    display: flex !important;
    flex-direction: column !important; /* LAYOUT VERTICAL */
    height: 100% !important; /* Permite que os cards tenham a mesma altura */
}

.combo_grafic .card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08) !important;
}

/* === Seção Superior (Ícone e Título) === */
.combo_grafic .admin-up {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
    flex-grow: 1 !important; /* Empurra o card-body para baixo */
}

.combo_grafic .admin-up .lar, .combo_grafic .admin-up .fas {
    font-size: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    background: none !important;
    z-index: auto !important;
}

.combo_grafic .admin-up .data {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px; /* Espaço entre título e número */
}

.combo_grafic .admin-up .data p.text-uppercase {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--cor-texto-legenda) !important;
    margin: 0 !important;
    text-transform: none !important;
    line-height: 1 !important;
}

/* === O NÚMERO (Elemento Principal) === */
.combo_grafic .admin-up .data h4 {
    font-family: var(--fonte-principal-ui) !important;
    font-size: 64px !important; /* Tipografia de impacto */
    font-weight: 700 !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

/* === Seção Inferior (Progresso e Texto) === */
.combo_grafic .card-body.card-body-cascade {
    padding: 0 !important;
    margin-top: 20px !important;
    border-top: 1px solid var(--cor-borda-card) !important;
    padding-top: 20px !important;
}

.combo_grafic .card-body p.card-text {
    font-size: 13px !important;
    color: var(--cor-texto-legenda) !important;
    text-align: left !important;
    margin: 0 0 15px 0 !important;
}

/* Barra de Progresso Gráfica */
.combo_grafic .card-body .progress {
    height: 8px !important;
    border-radius: 8px !important;
    background-color: #e9ecef !important;
    overflow: visible !important;
}



/* === Cores e Estilos Específicos por Card === */

/* Card 1: Novos Chamados */
#tur01 .admin-up .lar { color: var(--cor-chamado-novo) !important; }
#tur01 .admin-up h4 { color: var(--cor-chamado-novo) !important; }
#tur01 .progress-bar { background: var(--cor-chamado-novo) !important; }

/* Card 2: Chamados Abertos */
#tur02 .admin-up .lar { color: var(--cor-chamado-aberto) !important; }
#tur02 .admin-up h4 { color: var(--cor-chamado-aberto) !important; }
#tur02 .progress-bar { background: var(--cor-chamado-aberto) !important; }

/* Card 3: Chamados Fechados */
#tur03 .admin-up .lar { color: var(--cor-chamado-fechado) !important; }
#tur03 .admin-up h4 { color: var(--cor-chamado-fechado) !important; }
#tur03 .progress-bar { background: var(--cor-chamado-fechado) !important; }



/* ==========================================================================
   SOBREPOSIÇÃO DE ESTILOS - CARDS DE CHAMADOS v5.2 (ÍCONE PROTAGONISTA)
   Autor: Gemini AI
   Descrição: Redesign artístico com o ícone e o número como um único
              elemento visual de impacto, com rotação sutil para um
              acabamento "Super Premium".
   ========================================================================== */

/* === Variáveis de Cor para os Cards === */
:root {
    --cor-chamado-novo: #0d6efd;   /* Azul para 'Novos' */
    --cor-chamado-aberto: #fd7e14; /* Laranja para 'Abertos' */
    --cor-chamado-fechado: #6c757d;/* Cinza para 'Fechados' */
}


/* === Estilo Base do Card === */
.combo_grafic .card {
    background: #ffffff !important;
    border: 1px solid var(--cor-borda-card) !important;
    border-radius: 16px !important;
    padding: 25px !important;
    box-shadow: 0 4px 25px rgba(0,0,0,0.05) !important;
    transition: all 0.3s cubic-bezier(0.2, 0.7, 0.3, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    text-align: center !important; /* Centraliza todo o texto */
}

.combo_grafic .card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08) !important;
}

/* === Seção Superior (agora apenas o título) === */
.combo_grafic .admin-up {
    padding: 0 !important;
    margin-bottom: auto !important; /* Empurra o resto para o centro/baixo */
    flex-grow: 1; /* Permite que o conteúdo central se expanda */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.combo_grafic .admin-up .data p.text-uppercase {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--cor-texto-legenda) !important;
    margin: 0 auto !important; /* Centraliza o título */
    text-transform: none !important;
    line-height: 1 !important;
}

/* === ÍCONE E NÚMERO COMO ELEMENTO CENTRAL === */
.combo_grafic .admin-up .data {
    position: relative; /* Container para o ícone */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px; /* Espaço do título para o número */
}

.combo_grafic .admin-up .data h4 {
    font-family: var(--fonte-principal-ui) !important;
    font-size: 72px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding-right: 65px; /* Abre espaço para o ícone não sobrepor */
}

/* O ÍCONE (agora posicionado ao lado do número) */
.combo_grafic .admin-up > i {
    position: absolute !important;
    font-size: 55px !important; /* Tamanho próximo ao do número */
    right: 0px; /* Alinhado à direita do container */
    bottom: 5px; /* Alinhamento vertical com a base do número */
    opacity: 0.8 !important;
    transform: rotate(-12deg) !important; /* A "leve curvatura" */
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1) !important;
}
.combo_grafic .card:hover .admin-up > i {
    transform: rotate(5deg) scale(1.1) !important; /* Efeito de hover no ícone */
}


/* === Seção Inferior (Progresso e Texto) === */
.combo_grafic .card-body.card-body-cascade {
    padding: 0 !important;
    margin-top: 20px !important;
    border-top: 1px solid var(--cor-borda-card) !important;
    padding-top: 20px !important;
}
.combo_grafic .card-body p.card-text {
    font-size: 13px !important;
    color: var(--cor-texto-legenda) !important;
    text-align: center !important;
    margin: 0 0 15px 0 !important;
}
.combo_grafic .card-body .progress {
    height: 8px !important;
    border-radius: 8px !important;
    background-color: #e9ecef !important;
}
.combo_grafic .card-body .progress-bar { border-radius: 8px !important; }

/* === Cores e Estilos Específicos por Card === */
#tur01 .admin-up i, #tur01 .admin-up h4 { color: var(--cor-chamado-novo) !important; }
#tur01 .progress-bar { background: var(--cor-chamado-novo) !important; }

#tur02 .admin-up i, #tur02 .admin-up h4 { color: var(--cor-chamado-aberto) !important; }
#tur02 .progress-bar { background: var(--cor-chamado-aberto) !important; }

#tur03 .admin-up i, #tur03 .admin-up h4 { color: var(--cor-chamado-fechado) !important; }
#tur03 .progress-bar { background: var(--cor-chamado-fechado) !important; }



.combo_grafic .admin-up .lar, .combo_grafic .admin-up .fas {
    font-size: 94px !important;
    margin: 27px !important;
    padding: 0px !important;
    box-shadow: none !important;
    background: none !important;
    z-index: auto !important;
    /* margin-left: -10px !important; */
}



/* ==========================================================================
   SOBREPOSIÇÃO DE ESTILOS - FILTROS E SELETORES (ANIMAÇÃO FLUIDA)
   Autor: Gemini AI
   Descrição: Estilização premium para os campos de filtro, com foco em
              seletores (selects) com animações fluidas e botões de alternância.
   ========================================================================== */

/* === Container Principal e Labels === */
.card-body.rerew {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.card-body.rerew label#opa strong {
    display: block !important;
    font-family: var(--fonte-principal-ui) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--cor-texto-titulo) !important;
    margin-bottom: 12px !important;
}

/* === Estilo "Super Premium" para os Selects === */
.card-body.rerew .custom-select {
    width: 100% !important;
    height: 52px !important;
    padding: 0 45px 0 20px !important; /* Espaço para a seta personalizada */
    font-size: 16px !important;
    font-family: var(--fonte-principal-ui) !important;
    font-weight: 500 !important;
    color: var(--cor-texto-padrao) !important;
    background-color: #ffffff !important;
    border: 1px solid var(--cor-borda-card) !important;
    border-radius: 12px !important;
    box-shadow: var(--sombra-card-sutil) !important;
    
    /* Remove a seta padrão do navegador */
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;

    /* Seta personalizada como imagem de fundo */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23888' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 20px center !important;
    background-size: 12px 12px !important;
    
    transition: all 0.3s cubic-bezier(0.2, 0.7, 0.3, 1) !important; /* Transição fluida */
}

/* === Animação Fluida no Foco === */
.card-body.rerew .custom-select:focus {
    border-color: var(--cor-principal-anak) !important;
    box-shadow: 0 0 0 4px rgba(166, 30, 32, 0.15) !important;
    transform: scale(1.02); /* Efeito "pop" sutil */
}

/* === Grupo de Botões (antiga List-Group) === */
.card-body.rerew .list-group {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    margin-top: 15px !important;
}

.card-body.rerew .list-group a.list-group-item {
    flex: 1 !important; /* Ocupam espaço igual */
    text-align: center !important;
    font-family: var(--fonte-principal-ui) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 10px !important;
    border: 1px solid var(--cor-borda-card) !important;
    border-radius: 10px !important;
    background-color: var(--cor-fundo-card) !important;
    color: var(--cor-texto-padrao) !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.card-body.rerew .list-group a.list-group-item:hover {
    background-color: var(--cor-fundo-hover) !important;
    color: var(--cor-texto-titulo) !important;
    border-color: #ccc !important;
}

/* Adicione a classe "active" no seu JS para o item clicado */
.card-body.rerew .list-group a.list-group-item.active {
    background-color: var(--cor-principal-anak) !important;
    border-color: var(--cor-principal-anak) !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(166, 30, 32, 0.2);
}

.card-body.rerew .list-group a.list-group-item.disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    background-color: #f8f9fa !important;
}


/* ==========================================================================
   SOBREPOSIÇÃO DE ESTILOS - GESTÃO DE ALUNOS E MEU PLANO
   Autor: Gemini AI
   Descrição: Design completo e isolado para a seção, incluindo cards
              de estatísticas e o painel "Meu Plano", com foco em clareza,
              hierarquia e um visual premium.
   ========================================================================== */

/* === Título Principal da Página === */

/* === Cards de Estatísticas (Correção e Estilo) === */
.mae_css #painel_mostrar .row.des {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 25px !important;
    margin-bottom: 40px !important;
}

.mae_css #painel_mostrar .card {
    background: #ffffff !important;
    border: 1px solid var(--cor-borda-card, #e9ecef) !important;
    border-radius: 16px !important;
    padding: 25px !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: var(--sombra-card-sutil, 0 4px 15px rgba(0,0,0,0.04)) !important;
    transition: all 0.3s cubic-bezier(0.2, 0.7, 0.3, 1) !important;
    height: 160px !important;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.mae_css #painel_mostrar .card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 6px !important;
    background-color: var(--cor-padrao, #ccc) !important;
}

#tur01::before { --cor-padrao: var(--cor-card-1, #a61e20) !important; }
#tur02::before { --cor-padrao: var(--cor-card-2, #28a745) !important; }
#tur03::before { --cor-padrao: var(--cor-card-3, #17a2b8) !important; }
#tur04::before { --cor-padrao: var(--cor-card-4, #fd7e14) !important; }

.mae_css #painel_mostrar .card .admin-up .fa {
    position: absolute !important;
    right: 15px !important;
    bottom: 5px !important;
    font-size: 55px !important;
    color: rgba(0, 0, 0, 0.06) !important;
    z-index: 1 !important;
    transform: rotate(-10deg) !important;
}

.mae_css #painel_mostrar .card .data p {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--cor-texto-legenda, #6c757d) !important;
}

.mae_css #painel_mostrar .card .data h4,
.mae_css #painel_mostrar .card .drty {
    font-size: 48px !important;
    font-weight: 700 !important;
    color: var(--cor-texto-titulo, #1e2022) !important;
    line-height: 1.2 !important;
    justify-content: center;
}


/* === Seção "Meu Plano" === */
.mae_css .header h1 {
    font-family: var(--fonte-principal-ui) !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    color: var(--cor-texto-titulo) !important;
    margin-bottom: 20px !important;
}

.mae_css .creditos-totais,
.mae_css .creditos-usados,
.mae_css .creditos-disponiveis {
    display: inline-block !important;
    margin-right: 30px !important;
    margin-bottom: 30px !important;
}

.mae_css .creditos-totais h2,
.mae_css .creditos-usados h2,
.mae_css .creditos-disponiveis h2 {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: var(--cor-texto-padrao, #495057) !important;
}



.mae_css .credito-box {
    background-color: var(--cor-fundo-card, #fff) !important;
    border: 1px solid var(--cor-borda-card, #e9ecef) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: var(--sombra-card-sutil) !important;
}


.mae_css .credito-info .icon {
    font-size: 20px !important;
    color: var(--cor-texto-legenda) !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #f8f9fa !important;
    border-radius: 50% !important;
}

.mae_css .credito-details span {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: var(--cor-texto-titulo) !important;
}

/* Barra de Progresso Personalizada */
.mae_css .progress-container {
    grid-column: 1 / -1 !important; /* Ocupa todas as colunas da grid */
    height: 10px !important;
    background-color: #e9ecef !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    margin-top: 15px !important;
}
.mae_css .progress-container .progress-bar {
    height: 100% !important;
    border-radius: 10px !important;
    background-color: var(--cor-card-2) !important; /* Verde padrão */
}





.mae_css #painel_mostrar .row.des {
    display: flex !important
;
    gap: unset !important;
    margin-bottom: 40px !important;
}

.mae_css #painel_mostrar .card {
    background: #ffffff !important;
    border: 1px solid var(--cor-borda-card, #e9ecef) !important;
    border-radius: 16px !important;
    padding: 25px !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: var(--sombra-card-sutil, 0 4px 15px rgba(0, 0, 0, 0.04)) !important;
    transition: all 0.3s 
cubic-bezier(0.2, 0.7, 0.3, 1) !important;
    height: 160px !important;
    display: flex !important
;
    justify-content: space-around;
    flex-direction: column;
    text-align: center;
    align-content: stretch;
    align-items: center;
}

.mae_css #painel_mostrar .card .admin-up .fa {
    position: relative !important;
    right: -227px !important;
    bottom: -86px !important;
    font-size: 55px !important;
    color: rgba(0, 0, 0, 0.06) !important;
    z-index: 1 !important;
    transform: rotate(-10deg) !important;
}


.admin-up {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important
;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-around !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    align-content: space-between;
    margin-top: -90px;
}


.combo_grafic .admin-up .data {
    position: relative;
    display: flex
;
    justify-content: center;
    align-items: center;
    margin-top: 92px;
}





/* Status "Aprovado" e datas finalizadas */
#target-content .verde {
    background-color: #d4edda !important;
    color: #155724 !important;
}

/* Status "Em andamento" */
#target-content .azul {
    background-color: #cce5ff !important;
    color: #004085 !important;
}

/* === Estilo da Célula de Nota Média (para alinhar com progresso) === */
#target-content .notas {
    background: linear-gradient(135deg, #6c757d 0%, #adb5bd 100%) !important; /* Gradiente cinza */
}

/* ==========================================================================
   ACRESCENTO: Centralização de Texto na Barra de Progresso
   Autor: Gemini AI
   Descrição: Garante que o texto de porcentagem (%) fique sempre
              perfeitamente centralizado na vertical e horizontal.
   ========================================================================== */

.progress-bar {
    display: flex !important;
    justify-content: center !important; /* Centraliza na horizontal */
    align-items: center !important;     /* Centraliza na vertical */
}



.progress-bar {
    background: var(--cor-principal-anak) !important;
    border-radius: 7px !important;
}
/* ==========================================================================
   FORÇAR CENTRALIZAÇÃO DE TEXTO NA BARRA DE PROGRESSO
   ========================================================================== */


/* ========== CENTRALIZAÇÃO DAS BARRAS DE PROGRESSO E NOTA ========== */

/* Centralizar células da tabela com barras de progresso */
td:has(.progress) {
    text-align: center !important;
    vertical-align: middle !important;
    padding: 10px 5px !important;
}

/* Container de progresso centralizado */
.progress {
    margin: 0 auto !important;
    width: 90% !important;
    max-width: 150px !important;
    display: block !important;
    height: 18px !important;
    border-radius: 50px !important;
    background: #f0f0f0 !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1) !important;
    position: relative !important;
}

/* Barra de progresso */
.progress-bar {
    height: 100% !important;
    border-radius: 50px !important;
    background: linear-gradient(135deg, #a61e20 0%, #e74c3c 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    transition: width 2s ease !important;
}

/* Barra de progresso 100% - Verde */
.progress-bar.color_100 {
    background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%) !important;
}

/* Barras parciais - Amarelo/Laranja */
.progress-bar[class*="color_"]:not(.color_100) {
    background: linear-gradient(135deg, #f39c12 0%, #f1c40f 100%) !important;
}

/* Texto dentro da barra */
.progress-bar span {
    position: absolute !important;
    width: 100% !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 2 !important;
    line-height: 1 !important;
}

.progress-bar span small {
    color: #fff !important;
    font-size: 11px !important;
    font-weight: bold !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}

.progress-bar span small strong {
    color: #fff !important;
    font-size: 11px !important;
}

/* Para barras de nota (notas class) */
.progress-bar.notas {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%) !important;
}

/* Ajustar colunas específicas da tabela */
th:nth-child(8), /* Coluna Nota média */
td:nth-child(8),
th:nth-child(9), /* Coluna Progresso */
td:nth-child(9) {
    text-align: center !important;
    vertical-align: middle !important;
    padding: 8px !important;
}

/* Títulos das colunas centralizados */
th.educar02 {
    text-align: center !important;
    vertical-align: middle !important;
    font-weight: 600 !important;
    color: #333 !important;
}

/* Ajustar largura das colunas de progresso */
th:nth-child(8),
th:nth-child(9) {
    width: 150px !important;
    min-width: 150px !important;
}

/* Container do texto da porcentagem quando vazio */
.progress-bar[style*="width: %"],
.progress-bar[style*="width: 0%"] {
    min-width: 40px !important;
    background: #e0e0e0 !important;
}

/* Animação shimmer para as barras */
.progress-bar::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent) !important;
    animation: shimmer 2s infinite !important;
}

@keyframes shimmer {
    0% { transform: translateX(-100%) !important; }
    100% { transform: translateX(100%) !important; }
}

/* Garantir centralização em todas as situações */
.table td > div.progress,
.table-responsive td > div.progress,
.dataTable td > div.progress {
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
    display: block !important;
}

/* Remover text-center da div e aplicar diretamente */
div.progress.text-center {
    text-align: center !important;
}

/* Status coloridos na tabela */
.verde {
    color: #27ae60 !important;
    font-weight: 600 !important;
}

.azul {
    color: #3498db !important;
    font-weight: 600 !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .progress {
        width: 100% !important;
        max-width: 100px !important;
    }
    
    th:nth-child(8),
    th:nth-child(9) {
        width: 100px !important;
        min-width: 100px !important;
    }
}

/* Forçar alinhamento central para todas as células com progresso */
.table-hover td,
.table-sm td,
.table-responsive td {
    vertical-align: middle !important;
}

/* CSS específico para garantir centralização absoluta */
td:nth-child(8) > *,
td:nth-child(9) > * {
    margin: 0 auto !important;
    display: block !important;
    text-align: center !important;
}

/* Remover transformação que pode estar desalinhando */
td > .progress,
td > div > .progress {
    position: relative !important;
    left: 0 !important;
    transform: none !important;
    display: block !important;
    margin: 5px auto !important;
}

.progress .show {
    display: inline !important;
    margin-top: 0px  !important;
}
a.dow.btn.margim.btn-warning {
    width: 31px;
    height: 24px;
    padding-top: 7px;
}
.el-button::before {
  
    background: rgb(46 125 50 / 0%)  !important;

}


.form-check-label {
  display: inline-block !important;
  white-space: nowrap !important;
  width: auto !important;
  vertical-align: middle !important;
}
.form-check {
  display: flex !important;
  align-items: center !important;
}

.drty .label-success {
    background: none !important;
    color: var(--cor-texto-titulo) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 0 !important;
    border: none !important;
    margin: 0 !important;
}

.container-fluid.inimacao {
    min-height: 100vh !important;
    padding: 0px !important;
    position: relative !important;
}
.container-fluid.inimacao {
    min-height: 100vh !important;
    padding: 0rem !important;
    position: relative !important;
}





#ball-1 { animation-delay: 0s; }
#ball-2 { animation-delay: 0.3s; }
#ball-3 { animation-delay: 0.6s; }
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-30px); }
}

body {
    background: var(--light);
    font-family: var(--poppins);
    padding: 0px !important;
}


#page-wrapper form .form-control {
    height: 50px !important;
    padding: 7px 18px !important;
    font-size: 12px !important;
    font-family: var(--fonte-principal-ui) !important;
    color: var(--cor-texto-titulo) !important;
    background-color: #f8f9fa !important;
    border: 2px solid #f8f9fa !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    transition: all .2s 
ease-in-out !important;
    padding-left: 44px !important;
}