body {
    font-size: small;
    background-color: var(--background-color);
    color: var(--text-color);
}

a {
    color: var(--link-color);
}

.screener-de {
    margin-left:-25px;
    margin-right:3px;
    width:55px;
}
.screener-ate {
    margin-left: 3px;
    margin-right: 3px;
    width: 55px;
}
.sreener-div-label {
    text-align:right;
}
.screener-filtro-item-mercado {
    width: 310px;
    margin-bottom:5px;
}

.screener-filtro-item-rentabilidade {
    width: 280px;
    margin-bottom: 5px;
    margin-left: -45px;
}

.screener-filtro-item-endividamento {
    width: 360px;
    margin-bottom: 5px;
}

.screener-filtro-item-performance {
    width: 355px;
    margin-bottom: 5px;
    margin-left:-60px;
}

.icone-ordenacao-tabela {
    width: 15px;
    height: 15px;
    margin-left:2px;
}
.required:after {
    content: "*";
    color: red;
}

.footer {
    position: absolute;
    bottom: 0;
    text-align: center;
    font-size: 11.8px;
    background-color: var(--background-color);
    color: var(--text-color)
}

.divGeral {
    height:100vh;
}

.divMetade {
    height: 50vh;
}


.overflowRow1 {
    height: 48vh;
}

.tableFixHead thead th {
    position: sticky;
    top: 0;
    background-color: white;
}

.btnPeriodo{
    height:31px;
}

.rz-tabview-panel {
    background-color: var(--background-color);
}

/* Estilo para navegadores baseados em WebKit (Chrome, Safari, Edge) */
.overflow-auto::-webkit-scrollbar {
    width: 12px; /* Largura da barra de rolagem */
}

.overflow-auto::-webkit-scrollbar-track {
    background: var(--background-color); /* Cor de fundo da trilha da barra de rolagem */
}

.overflow-auto::-webkit-scrollbar-thumb {
    background: var(--background-color); /* Cor de fundo da barra de rolagem */
}

/* Estilo para Firefox */
.overflow-auto {
    scrollbar-width: thin; /* ou 'auto' ou 'thin' */
    scrollbar-color: #88888 var(--background-color); /* cor da barra de rolagem e cor da trilha */
}


/* Aumentando a especificidade e usando !important para forçar a sobreposição */
body.dark .table.table-striped.table-hover thead.header th,
body.dark .table.tableFixHead thead th,
body.dark .table.table-striped thead.header th,
body.dark .table.table-striped.tableFixHead thead th /* Novo seletor adicionado */ {
    background-color: #1c2025 !important; /* Força o fundo escuro */
    color: #e7e7e7 !important; /* Força a cor do texto claro */
    padding: 12px !important;
    border-bottom: 2px solid #484e55 !important;
    text-align: left;
}

    body.dark .table.table-striped.table-hover thead.header th:first-child,
    body.dark .table.tableFixHead thead th:first-child,
    body.dark .table.table-striped thead.header th:first-child,
    body.dark .table.table-striped.tableFixHead thead th:first-child /* Novo seletor adicionado */ {
        border-top-left-radius: 4px !important;
    }

    body.dark .table.table-striped.table-hover thead.header th:last-child,
    body.dark .table.tableFixHead thead th:last-child,
    body.dark .table.table-striped thead.header th:last-child,
    body.dark .table.table-striped.tableFixHead thead th:last-child /* Novo seletor adicionado */ {
        border-top-right-radius: 4px !important;
    }





    body.dark .table-striped tbody tr:nth-of-type(odd) {
        background-color: #32383e; /* Cor de fundo para linhas ímpares no modo escuro */
    }

    body.dark .table-striped tbody tr:nth-of-type(even) {
        background-color: #2c3136; /* Cor de fundo para linhas pares no modo escuro */
    }



.tr-hover-effect.tr-clicked {
    background-color: lightblue !important;
}

body.light .table-striped tbody tr:hover td,
body.light .table-striped tbody tr:hover th {
    background-color: #ecf3f8
}
body.dark .table-hover tbody tr:hover,
body.dark .tr-hover-effect:hover {
    background-color: #41474d !important;  
}

body.dark .tr-hover-effect.tr-clicked {
    background-color: #3B4252 !important; /* Cor de fundo mais destacada para linha clicada no modo escuro */
}








    /* Estilização opcional para cabeçalho da tabela em modo escuro */
    body.dark .thead-light.header {
        background-color: #1c2025; /* Cor de fundo do cabeçalho no modo escuro */
        color: #e7e7e7; /* Cor da fonte do cabeçalho no modo escuro */
    }

    /* Aplicando estilos gerais da tabela somente no modo escuro, se necessário */
    body.dark .table {
        border-collapse: collapse;
        width: 100%;
    }

        body.dark .table th, body.dark .table td {
            text-align: left;
            padding: 8px;
        }

        /* Estilização adicional para melhorar a visibilidade e estética no modo escuro */
        body.dark .table th {
            border-bottom: 2px solid #e7e7e7;
        }

        body.dark .table td {
            border-bottom: 1px solid #484e55;
        }

        body.dark .table tr, body.dark .table td {
            color: var(--text-color); /* Aplica a cor do texto definida na variável */
        }



/* Estilos para input.rz-textbox e input#ModalAtivoIndicadorInput quando body tem a classe .dark */
body.dark input.inputSpanValor,
body.dark .rz-textbox,
body.dark .rz-textarea,
body.dark input#ModalAtivoIndicadorInput {
    background-color: var(--background-color-componente) !important; /* Usa a cor de fundo definida para o tema escuro */
    color: var(--text-color) !important; /* Cor do texto */
    border: 1px solid var(--border-color) !important; /* Cor da borda */
    padding: 2px 5px; /* Espaçamento interno para conforto na digitação */
    border-radius: 4px; /* Borda arredondada para estética moderna */
    transition: border-color 0.3s; /* Transição suave para mudanças de estado */
}

    body.dark input.inputSpanValor:focus,
    body.dark .rz-textbox:focus,
    body.dark .rz-textarea:focus,
    body.dark input#ModalAtivoIndicadorInput:focus {
        border-color: var(--focus-border-color) !important; /* Cor da borda ao focar */
        outline: none; /* Remove o contorno padrão para usar a borda personalizada */
    }

    body.dark input.inputSpanValor::placeholder,
    body.dark .rz-textbox::placeholder,
    body.dark .rz-textarea::placeholder,
    body.dark input#ModalAtivoIndicadorInput::placeholder {
        color: var(--placeholder-color) !important; /* Cor para o placeholder, para distinção sem distrair */
    }

input.rz-textbox:-webkit-autofill,
input.rz-textbox:-webkit-autofill:hover,
input.rz-textbox:-webkit-autofill:focus,
input#ModalAtivoIndicadorInput:-webkit-autofill,
input#ModalAtivoIndicadorInput:-webkit-autofill:hover,
input#ModalAtivoIndicadorInput:-webkit-autofill:focus {
    border: 1px solid var(--border-color) !important;
    -webkit-text-fill-color: var(--text-color) !important;
    box-shadow: 0 0 0px 1000px var(--background-color-componente) inset;
    transition: background-color 5000s ease-in-out 0s;
}


/* Estilo para o contêiner principal do dropdown no modo escuro */
body.dark .rz-dropdown {
    background-color: var(--background-color-componente);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 4px; /* Ajuste conforme necessidade para bordas arredondadas */
    width: auto; /* Ajuste conforme necessidade, ou mantenha o estilo inline */
    margin-right: 5px;
    margin-left: 0px;
}

/* Estilo para o label do dropdown no modo escuro */
body.dark .rz-dropdown-label {
    color: var(--text-color); /* Assegura que o texto é facilmente legível */
}

/* Estilo para o trigger do dropdown no modo escuro */
body.dark .rz-dropdown-trigger {
    cursor: pointer; /* Indica que o elemento é clicável */
}

/* Estilo para o ícone do trigger no modo escuro */
body.dark .rz-dropdown-trigger-icon {
    color: var(--text-color); /* Assegura visibilidade adequada */
}

/* Estilo para a lista de opções do dropdown no modo escuro */
body.dark .rz-dropdown-items-wrapper {
    background-color: var(--background-color);
    max-height: 200px;
    overflow-x: hidden; /* Assegura que o scroll só apareça quando necessário */
}

/* Estilo para os itens individuais da lista no modo escuro */
body.dark .rz-dropdown-item {
    color: var(--text-color);
    padding: 8px 12px; /* Espaçamento para conforto na seleção */
}

    /* Estilo para os itens da lista ao passar o mouse no modo escuro */
    body.dark .rz-dropdown-item:hover {
        background-color: var(--item-hover-bg-color); /* Destaca o item sob o mouse */
    }

/* Estilo para o dropdown desabilitado no modo escuro */
body.dark .rz-dropdown.rz-state-disabled {
    opacity: 0.5; /* Reduz a opacidade para indicar estado desabilitado */
    background-color: var(--background-color-dim); /* Fundo levemente mais escuro para distinção */
}

    body.dark .rz-dropdown.rz-state-disabled .rz-dropdown-label,
    body.dark .rz-dropdown.rz-state-disabled .rz-dropdown-trigger-icon {
        color: var(--text-color-disabled); /* Cor de texto para indicar desabilitado */
    }

    body.dark .rz-dropdown.rz-state-disabled .rz-dropdown-trigger {
        cursor: not-allowed; /* Altera o cursor para indicar ação não permitida */
    }


/* Estilo para o contêiner principal do spinner no modo escuro */
body.dark .rz-spinner {
    background-color: var(--background-color-componente);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 4px; /* Ajuste conforme necessário */
    width: auto; /* Ajuste conforme necessário */
    padding: 5px; /* Para melhor espaçamento */
    margin-right: 5px;
    margin-left: 0px;
}

/* Estilo para o campo de entrada do spinner no modo escuro */
body.dark .rz-spinner-input {
    background-color: var(--background-color);
    color: var(--text-color);
    border: none;
    padding: 8px 12px; /* Espaçamento para conforto na edição */
    width: 100%; /* Para ocupar o contêiner */
    outline: none; /* Remove a borda ao focar */
}

/* Estilo para o spinner em estado desabilitado no modo escuro */
body.dark .rz-spinner.rz-state-disabled {
    opacity: 0.5; /* Reduz a opacidade para indicar estado desabilitado */
    background-color: var(--background-color-dim); /* Fundo levemente mais escuro */
}

    body.dark .rz-spinner.rz-state-disabled .rz-spinner-input {
        color: var(--text-color-disabled); /* Cor de texto para indicar desabilitado */
    }

/* Estilo para o trigger do spinner (botões de incremento/decremento) no modo escuro */
body.dark .rz-spinner .rz-spinner-button {
    background-color: var(--background-color-componente);
    color: var(--text-color);
    border: none;
    cursor: pointer;
}

    body.dark .rz-spinner .rz-spinner-button:hover {
        background-color: var(--item-hover-bg-color); /* Destaca o botão sob o mouse */
    }

/* Estilo para o ícone do trigger (setas) no modo escuro */
body.dark .rz-spinner .rz-spinner-button-icon {
    color: var(--text-color);
}


/* Estilo para <select> no modo escuro, aplicado apenas quando o body tem a classe .dark */
body.dark select {
    background-color: var(--background-color-componente); /* Cor de fundo escura para o modo escuro */
    color: var(--text-color); /* Cor de texto claro para contraste e legibilidade */
    border: 1px solid #484e55; /* Cor de borda sutil, compatível com o fundo escuro */
    padding: 0px; /* Espaçamento interno adequado para conforto na seleção */
    border-radius: 4px; /* Borda arredondada para uma estética suave e moderna */
    /*width: 100%; */ /* Opcional: Ajusta a largura para preencher o contêiner pai */
    box-sizing: border-box; /* Garante que padding e border estejam incluídos na largura total */
    -webkit-appearance: none; /* Remove o estilo padrão do navegador para o Chrome e Safari */
    -moz-appearance: none; /* Remove o estilo padrão do navegador para o Firefox */
    appearance: none; /* Remove o estilo padrão do navegador para os navegadores modernos */
    cursor: pointer; /* Muda o cursor para indicar que o elemento é clicável */
}

/* Para adicionar um ícone de seta personalizado aos selects no modo escuro */
body.dark select {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z" fill="%23e7e7e7"/></svg>');
    background-repeat: no-repeat;
    background-position: right 8px top 50%; /* Posiciona o ícone à direita, centrado verticalmente */
    background-size: 16px; /* Tamanho do ícone de seta */
}


body.dark .form-control.mb-2.mr-sm-2.inputData.input-sm#inlineFormInputData,
body.dark #inputDe,
body.dark #inputAte {
    background-color: var(--background-color-componente); /* Cor de fundo mais escura */
    color: var(--text-color); /* Cor do texto claro */
    border: 1px solid #4E5D6C; /* Borda com cor mais clara para destaque */
}

    body.dark .form-control.mb-2.mr-sm-2.inputData.input-sm#inlineFormInputData::placeholder,
    body.dark #inputDe::placeholder,
    body.dark #inputAte::placeholder {
        color: #B1B1B1; /* Cor do placeholder mais clara */
    }

    body.dark .form-control.mb-2.mr-sm-2.inputData.input-sm#inlineFormInputData:focus,
    body.dark #inputDe:focus,
    body.dark #inputAte:focus {
        outline: none; /* Removendo o outline padrão */
        border-color: #819FF7; /* Cor de borda ao focar */
        box-shadow: 0 0 8px #719ECE; /* Sombra leve para destacar o foco */
    }



body.dark .btn-light {
    background-color: #4a4a4a; /* Cor de fundo mais escura para o tema dark */
    color: #fff; /* Cor do texto ajustada para branco para contraste */
    border-color: #4a4a4a; /* Cor da borda ajustada para combinar com o fundo, se necessário */
}

body.dark .btn-light,
body.dark .btnPeriodo.btn-secondary,
body.dark .btn-secondary {
    background-color: #343a40; /* Cor de fundo unificada para o tema dark */
    color: #ccc; /* Cor do texto ajustada para um cinza claro para melhor contraste */
    border-color: #343a40; /* Cor da borda unificada para combinar com o fundo */
}


.highcharts-button-box.dark-theme {
    fill: var(--background-color); /* Cor de fundo mais escura para o tema dark */
}



 Aplica estilos da barra de rolagem para todas as divs, selects e rz-dropdown quando o body tem a classe .dark 
body.dark .overflow-auto::-webkit-scrollbar,
/*body.dark select::-webkit-scrollbar,*/
body.dark .rz-dropdown::-webkit-scrollbar {
    width: 8px !important;  Largura da barra de rolagem 
}

body.dark .overflow-auto::-webkit-scrollbar-track,
/*body.dark select::-webkit-scrollbar-track,*/
body.dark .rz-dropdown::-webkit-scrollbar-track {
    background: #2e2e2e !important;  Cor de fundo da trilha da barra de rolagem 
}

body.dark .overflow-auto::-webkit-scrollbar-thumb,
/*body.dark select::-webkit-scrollbar-thumb,*/
body.dark .rz-dropdown::-webkit-scrollbar-thumb {
    background-color: #5e5e5e !important;  Cor do thumb (a parte móvel da barra) 
    border-radius: 4px !important;  Arredondamento das bordas do thumb 
}

    body.dark .overflow-auto::-webkit-scrollbar-thumb:hover,
    /*body.dark select::-webkit-scrollbar-thumb:hover,*/
    body.dark .rz-dropdown::-webkit-scrollbar-thumb:hover {
        background-color: #707070 !important;  Cor do thumb ao passar o mouse 
    }

body.dark .overflow-auto,
/*body.dark select,*/
body.dark .rz-dropdown {
     Estiliza a barra de rolagem (o manipulador da rolagem) 
    scrollbar-width: thin !important;  Para Firefox 
    scrollbar-color: #5e5e5e #2e2e2e !important;  Para Firefox, thumb e track respectivamente 
    margin-left:-2px;
}

.lightskyblue {
    background-color: lightskyblue;
}

.coral {
    background-color: coral;
}

.thistle {
    background-color: thistle;
}

.beige {
    background-color: beige;
}

.darkgray {
    background-color: darkgray;
}




/* Aplica estilos apenas quando o body tem a classe 'dark' */
body.dark .rz-tabview.rz-tabview-top {
    background-color: var(--background-color); /* Cor de fundo escura para o container das tabs */
    color: #ccc; /* Cor do texto claro para compatibilidade */
}

/* Estilo para os itens da lista não ativos dentro de um body.dark */
body.dark .rz-tabview-nav li {
    background-color: #222; /* Cor de fundo mais escura para itens não ativos */
    border: 1px solid #444; /* Borda sutil */
}

    body.dark .rz-tabview-nav li a {
        color: #ccc; /* Cor do texto claro para itens não ativos */
    }

    /* Estilo para o item da lista ativo dentro de um body.dark */
    body.dark .rz-tabview-selected,
    body.dark .rz-tabview-nav li.rz-tabview-selected {
        background-color: #444; /* Cor de fundo para o item ativo */
        border-bottom: 2px solid white; /* Borda inferior para destacar o item ativo */
    }

        body.dark .rz-tabview-selected a,
        body.dark .rz-tabview-nav li.rz-tabview-selected a {
            color: #fff; /* Cor do texto para o item ativo */
            font-weight: bold; /* Texto do item ativo mais grosso */
        }

    /* Estilo para hover em itens não ativos dentro de um body.dark */
    body.dark .rz-tabview-nav li:not(.rz-tabview-selected):hover {
        background-color: #383838; /* Cor de fundo ao passar o mouse sobre itens não ativos */
    }

    body.dark .rz-tabview-nav li:not(.rz-tabview-selected) a:hover {
        color: #ddd; /* Cor do texto ao passar o mouse sobre itens não ativos */
    }

body.dark .rz-tabview.rz-tabview-top .rz-tabview-nav {
    border-color: #303030; /* Cor da borda mais escura */
}

body.dark .rz-tabview.rz-tabview-top .rz-tabview-panels {
    border: 1px solid #303030; /* Cor da borda mais escura */
}




/* Estilos aplicados somente quando o body tem a classe 'dark' */
body.dark .rz-radiobutton-box {
    border: 2px solid #555; /* Borda mais clara para a caixa do radiobutton */
    background-color: #222; /* Cor de fundo escura para a caixa */
    width: 20px; /* Largura ajustável da caixa do radiobutton */
    height: 20px; /* Altura ajustável da caixa do radiobutton */
    display: flex; /* Utiliza flex para centralizar conteúdos */
    align-items: center; /* Alinha verticalmente o conteúdo ao centro */
    justify-content: center; /* Alinha horizontalmente o conteúdo ao centro */
    border-radius: 50%; /* Borda arredondada */
    position: relative; /* Posicionamento relativo para pseudo-elementos */
}

    /* Esconde o ícone nos radiobuttons que não estão selecionados */
    body.dark .rz-radiobutton-box .rz-radiobutton-icon {
        display: none; /* Esconde o ícone por padrão */
    }

    /* Exibe o ícone apenas no radiobutton selecionado */
    body.dark .rz-radiobutton-box.rz-state-active .rz-radiobutton-icon {
        display: block; /* Mostra o ícone */
        width: 10px; /* Largura do ícone */
        height: 10px; /* Altura do ícone */
        border-radius: 50%; /* Faz o ícone ser redondo */
        background-color: #fff; /* Cor de fundo do ícone (branco) */
    }

    /* Ao passar o mouse sobre a caixa do radiobutton */
    body.dark .rz-radiobutton-box:hover {
        border-color: #888; /* Cor da borda ao passar o mouse */
    }

    /* Para foco no radiobutton (opcional) */
    body.dark .rz-radiobutton-box:focus-within {
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); /* Sombra ao redor da caixa quando em foco */
    }


html body.dark input.form-check-input[type="checkbox"] {
    /* Cores e estilo mais sóbrios para o tema escuro com maior especificidade */
    accent-color: #607D8B !important; /* Cor sóbria com !important para garantir aplicação */
    /* Definição de fundo e borda com !important para assegurar a sobreposição de estilos conflitantes */
    background-color: #2C3E50 !important; /* Cor de fundo sóbria */
    border: 2px solid #34495E !important; /* Borda sutil e discreta */

    width: 16px; /* Largura ajustada */
    height: 16px; /* Altura ajustada */

    transition: background-color 0.2s, border-color 0.2s;
}

    html body.dark input.form-check-input[type="checkbox"]:checked {
        /* Estilo para o estado marcado com maior especificidade e !important */
        background-color: #34495E !important; /* Fundo para o estado marcado */
        border-color: #607D8B !important; /* Cor de borda complementar */
    }










body.dark .rz-multiselect-panel {
    background-color: #333; /* Painel de fundo */
}

body.dark .rz-lookup-panel,
body.dark .rz-data-grid,
body.dark .rz-data-grid-data,
body.dark .rz-grid-table {
    background-color: #222; /* Fundo do quadro, grade de dados, e tabela ajustado */
    color: #ddd; /* Cor do texto para garantir visibilidade */
}

    body.dark .rz-grid-table th,
    body.dark .rz-grid-table td {
        border-bottom: 1px solid #555; /* Bordas inferiores para cabeçalho e células */
        color: #ccc; /* Cor do texto das células e cabeçalho */
    }

    body.dark .rz-grid-table th {
        background-color: #222; /* Fundo do cabeçalho da tabela */        
    }

    body.dark .rz-grid-table td {
        background-color: #2e2e2e; /* Fundo das células da tabela */        
    }

body.dark .rz-multiselect-panel .rz-cell-data {
    color: #E0E0E0; /* Ajuste para uma cor de texto claro visível contra o fundo escuro */
}

body.dark .rz-multiselect-panel .rz-column-title {
    color: #AED6F1; /* Define a cor da fonte para claro */
}

body.dark .rz-multiselect-panel .rz-grid-table tr:hover .rz-cell-data {
    color: #FFFFFF; /* Cor da fonte mais clara quando o mouse está sobre o item */
}


/* Especifica a cor de fundo para linhas pares e ímpares */
body.dark .rz-datatable-even {
    background-color: #2b2b2b;
}

body.dark .rz-datatable-odd {
    background-color: #323232;
}

/* Estilo para a barra de navegação */
body.dark .rz-paginator {
    background-color: #222; /* Ajuste para combinar com o quadro de lookup */
    color: #ccc;
    border-top: 1px solid #555; /* Bordas superiores visíveis em cor clara */
}

/* Ajustes nos checkboxes para garantir visibilidade */
body.dark .rz-chkbox-box {
    border-color: #717171;
    background-color: #555;
}

    body.dark .rz-chkbox-box .rz-chkbox-icon {
        color: #ddd;
    }

/* Ícones de ordenação */
body.dark .rz-sortable-column-icon {
    color: #aaa;
}

/* Ajustes finais para garantir que todas as bordas estejam visíveis e alinhadas com o tema */
body.dark .rz-grid-table th:last-child,
body.dark .rz-grid-table td:last-child {
    border-right: 1px solid #555; /* Garante que a borda direita das últimas células seja visível */
}

body.dark .rz-grid-table {
    border-collapse: separate;
    border-spacing: 0;
}



.card {
    background-color: var(--background-color);
}

.card-body.cardgeral {
    background-color: var(--background-color-card);
    border: 1px  #ccc;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}


body.dark .card-body.cardgeral {
    background-color: var(--background-color-card) !important;
    border: 1px  #ccc;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}


/*body.dark .btn {
    color: var(--text-color); /* Um azul esverdeado claro, bom para temas escuros */
/*}*/

    /* Se você quiser que apenas os botões com a classe 'btn-link' tenham essa cor, e deixar os outros botões com a cor padrão, você pode especificar mais: */
    body.dark .btn.btn-link {
        color: #8abeb7;
    }
    body.dark .btn.btn-outline-primary.btn-sm {
        border-color: #4a8d8a; /* Cor da borda padrão */
        color: #8abeb7; /* Cor da fonte padrão */
    }

        body.dark .btn.btn-outline-primary.btn-sm:hover {
            background-color: #357D75; /* Um azul esverdeado mais profundo para o fundo */
            border-color: #5fa297; /* Um azul esverdeado um pouco mais claro para a borda */
            color: #c3e0dd; /* Um tom claro de teal para a fonte, para garantir legibilidade */
        }



body.dark .footer {
    color: var(--text-color); /* Um azul esverdeado claro, bom para temas escuros */
    background-color: var(--backgound-color);
}



/* Estilos para o tema escuro do Radzen Dialog */
body.dark .rz-dialog {
    background-color: var(--background-color);
    color: var(--text-color);
}

    body.dark .rz-dialog .rz-dialog-titlebar {
        background-color: var(--background-color-card);
        color: var(--text-color);
    }

    body.dark .rz-dialog .rz-dialog-title {
        color: var(--text-color);
    }

    body.dark .rz-dialog .rz-dialog-titlebar .rz-dialog-titlebar-close {
        color: var(--text-color);
    }

        body.dark .rz-dialog .rz-dialog-titlebar .rz-dialog-titlebar-close .rzi {
            color: var(--text-color);
        }







/* Estilo base que se aplica em ambos os temas, removido para focar nas diferenças de tema */

/* Estilo para tema light aplicado apenas dentro de divs com classe rz-dialog e mensagem */
body.light .rz-dialog .welcome {
    font-family: Arial, sans-serif;
    margin: 0px;
    padding: 20px;
    background-color: #f8f8f8;
}

    body.light .rz-dialog .welcome {
        background-color: #ffffff;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    }

        body.light .rz-dialog .welcome h4,
        body.light .rz-dialog .welcome h5 {
            color: #333366;
        }

        body.light .rz-dialog .welcome p,
        body.light .rz-dialog .welcome ul {
            color: #666666;
        }

        body.light .rz-dialog .welcome .important {
            color: #ff3366;
            font-weight: bold;
        }

/* Estilo para tema dark aplicado apenas dentro de divs com classe rz-dialog e mensagem */
body.dark .rz-dialog .welcome {
    font-family: Arial, sans-serif;
    margin: 0px;
    padding: 20px;
    background-color: #121212;
    color: #e0e0e0; /* Adicionado para garantir legibilidade no tema escuro */
}

    body.dark .rz-dialog .welcome {
        background-color: #333333;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.1);
    }

        body.dark .rz-dialog .welcome h4,
        body.dark .rz-dialog .welcome h5,
        body.dark .rz-dialog .welcome p,
        body.dark .rz-dialog .welcome ul {
            color: #cccccc; /* Ajustado para melhor contraste no tema escuro */
        }

        body.dark .rz-dialog .welcome .important {
            color: #ff6699; /* Ajuste sutil na cor para melhor destaque no tema escuro */
        }


/* Estilo padrão para o botão */
.custom-upload-button {
    display: inline-block;
    padding: 9px 15px;
    color: #ffffff;
    background-color: #007bff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    font-size: 14px;
}

/* Tema claro */
.custom-upload-button {
    background-color: #007bff;
    color: #ffffff;
}

    .custom-upload-button:hover {
        background-color: #0056b3;
    }

/* Tema escuro */
body.dark .custom-upload-button {
    background-color: #333333;
    color: #ffffff;
}

    body.dark .custom-upload-button:hover {
        background-color: #444444;
    }


body.dark pre code.language-json {
    background-color: #1e1e1e; /* Fundo escuro */
    color: #d4d4d4; /* Texto claro */
    font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
    padding: 10px;
    border-radius: 5px;
    display: block;
    white-space: pre-wrap;
    word-wrap: break-word;
}

    body.dark pre code.language-json .key {
        color: #9cdcfe; /* Azul para chaves */
    }

    body.dark pre code.language-json .string {
        color: #ce9178; /* Marrom para strings */
    }

    body.dark pre code.language-json .number {
        color: #b5cea8; /* Verde claro para números */
    }

    body.dark pre code.language-json .boolean {
        color: #569cd6; /* Azul claro para booleanos */
    }

    body.dark pre code.language-json .null {
        color: #dcdcaa; /* Amarelo claro para nulos */
    }

/* Para melhorar a legibilidade */
body.dark pre {
    overflow: auto;
}



/* Estilo geral para o contêiner de paginação no modo escuro */
body.dark .rz-paginator {
    background-color: var(--background-color-componente);
    padding: 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Estilo para os botões de paginação (Primeiro, Anterior, Próximo, Último) no modo escuro */
body.dark .rz-paginator-element {
    color: var(--text-color);
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    padding: 6px 10px;
    border-radius: 4px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Remove margem entre os botões "Primeira página" e "Voltar" */
body.dark .rz-paginator-first,
body.dark .rz-paginator-prev {
    margin-right: 2px; /* Margem menor entre esses botões */
}

/* Remove margem entre os botões "Próxima página" e "Última página" */
body.dark .rz-paginator-next,
body.dark .rz-paginator-last {
    margin-left: 2px; /* Margem menor entre esses botões */
}

/* Efeito de hover para os botões de paginação no modo escuro */
body.dark .rz-paginator-element:hover {
    background-color: var(--item-hover-bg-color);
    color: var(--text-hover-color);
}

/* Estilo para o botão de página ativa no modo escuro */
body.dark .rz-paginator-page.rz-state-active {
    background-color: var(--active-bg-color);
    color: var(--active-text-color);
    border-color: var(--active-border-color);
}

/* Estilo para os ícones de paginação no modo escuro */
body.dark .rz-paginator-icon {
    color: var(--text-color);
}

/* Efeito de desativado para os botões de paginação no modo escuro */
body.dark .rz-paginator-element[tabindex="-1"] {
    opacity: 0.5;
    cursor: not-allowed;
}





.cursor-pointer {
    cursor: pointer;
}

.sidebar-expandido {
    width: 192px;
}

.sidebar-recuado {
    width: 80px;
}