/* ==========================================================================
   rz-css-global.css — folha global da biblioteca, carregada por todos os aplicativos.

   O QUE MORA AQUI:
   - reset e base do documento (body, tipografia, titulos, links);
   - estilo de componente da lib que NAO cabe em CSS isolado (.razor.css), porque a classe e aplicada
     no markup do aplicativo ou por codigo C# (RenderTreeBuilder), que nao recebe o atributo de
     isolamento;
   - barra superior (AppBar), modais, toasts, barra de filtros e grades.

   O QUE NAO MORA AQUI:
   - cor literal: toda cor sai das variaveis --Rz* dos temas (css/temas/<tema>/tokens.css; o default
     carrega sempre e e a reserva de todos);
   - estilo que o proprio componente desenha e ninguem usa fora dele: vai no .razor.css dele;
   - estilo de um unico aplicativo: vai no app.css daquele aplicativo.

   ORDEM DE CARGA: esta folha vem ANTES do app.css do aplicativo, entao o aplicativo sempre consegue
   sobrepor. Em empate de especificidade, vence quem carrega por ultimo.
   ========================================================================== */

/* Estilos dos componentes "_Novo" (nativos). Importados aqui para que os projetos nao precisem
   acrescentar um <link> proprio: quem ja carrega o rz-css-global.css passa a ter os componentes
   novos estilizados automaticamente. */
@import url('rz-componentes-novos.css');

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

body {
    background: var(--RzPageBackground) !important;
    -webkit-font-smoothing: antialiased !important;
    color: var(--RzLabel);
}

/* Target iOS devices */
@supports (-webkit-touch-callout: none) {
    #app {
        padding-top: env(safe-area-inset-top); /* Space for status bar/notch */
        padding-left: env(safe-area-inset-left); /* Space for left notch (if any) */
        padding-right: env(safe-area-inset-right); /* Space for right notch (if any) */
        padding-bottom: env(safe-area-inset-bottom); /* Space for home indicator */
    }
    /* Optional: If you have a fixed top navbar/header in Blazor, pad it specifically 
    If you have a fixed top bar inside Blazor */
    /*.top-bar, .navbar, header {
        padding-top: env(safe-area-inset-top);*/
    /*Add matching background color to blend with status bar if desired */
    /*background-color: var(--status-bar-bg, #f8f9fa);  Light mode default; use CSS vars for themes 
    }*/
    /* Adicione esta classe em divs que são fixadas no topo, por exemplo o modal do menu principal quando aberto para adicionar o padding-top correto no iOS. */
    .ios-safe-area-top {
        padding-top: env(safe-area-inset-top); /* Space for status bar/notch */
    }

    .ios-safe-area-bottom {
        padding-bottom: env(safe-area-inset-bottom); /* Space for home indicator */
    }

    .ios-safe-area-container {
        padding-top: env(safe-area-inset-top); /* Space for status bar/notch */
        padding-left: env(safe-area-inset-left); /* Space for left notch (if any) */
        padding-right: env(safe-area-inset-right); /* Space for right notch (if any) */
        padding-bottom: env(safe-area-inset-bottom); /* Space for home indicator */
    }
}

.bold-text {
    font-weight: bold;
}

.table {
    color: var(--RzLabel) !important;
}

body, input, textarea, button {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 400;
}

/* Corrigido na origem em 09/09/2026, ao consolidar o CSS duplicado no rz-global.css de cada app: os 18
   apps traziam, sem excecao, uma regra local que DESFAZIA o Impact/italico daqui e punha Roboto normal.
   O visual real do produto sempre foi este; o Impact so existia no arquivo. Em vez de mover 18 copias
   do "desfazer" para ca, a regra passa a nascer certa. */
h1, h2, h3, h4, h5, h6, strong {
    color: var(--RzTitleCustomColor);
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    text-align: center;
    font-weight: 500;
}

strong {
    font-weight: bolder;
}

button, a {
    cursor: pointer;
}

[disabled],
[readonly],
.form-control:disabled,
.form-control[readonly] {
    opacity: 0.6;
    cursor: not-allowed !important;
    /*background: #eee !important;*/
    background: var(--RzNumPageBg) !important;
}


.dxbl-btn.dxbl-disabled, .dxbl-btn:disabled {
    color: var(--RzNumPageColor);
}

/*metodo para alterar cor disabled option de um select 2*/
.select2-results__option--disabled {
    background: var(--RzSelect2Desabilitado) !important;
    cursor: not-allowed;
    color: darkgray;
}

.form-control {
    font-size: 0.875rem !important;
}


/* font-size = 16px */
@media(max-width: 1080px) {
    html {
        font-size: 93.75%; /* font-size = 15px */
    }
}

@media(max-width: 720px) {
    html {
        font-size: 87.5%; /* font-size = 14px */
    }
}

@media(max-width: 480px) {
    html {
        font-size: 81.25%; /* font-size = 13px */
    }
}

button:focus {
    outline: 0;
}

button {
    cursor: pointer;
}

.rz-container {
    max-width: 1366px;
    margin: 0 auto;
}

/* Retira a cor padrão de fundo na opção de auto completar do navegador. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--shape-up-color) inset !important;
    border-radius: 0px !important;
}

.btn:focus {
    box-shadow: var(--shadow-focus-btn);
}

/* Remove o foco laranja do tema DevExpress (office-white) -> verde RZ */
.dxbl-text-edit {
    --dxbl-text-edit-focus-border-color: var(--RzDestaque);
    --dxbl-text-edit-focus-shadow-color: var(--RzDestaqueSombraFocoLeve);
}

.dxbl-btn {
    --dxbl-btn-focus-outline-color: var(--RzDestaque);
}

/* Pager: remove o laranja do fundo das opcoes (Tamanho da pagina) e do botao ativo -> azul do pager */
.dxbl-pager {
    --dxbl-pager-page-btn-hover-bg: var(--bs-primary);
    --dxbl-pager-page-btn-hover-color: var(--RzTextoSobreDestaque);
    --dxbl-pager-active-page-btn-bg: var(--bs-primary);
    --dxbl-pager-active-page-btn-color: var(--RzTextoSobreDestaque);
}

/* Hover do botao de pagina (o tema define o laranja no proprio botao, entao a variavel em .dxbl-pager nao alcanca) */
.dxbl-pager-page-btn:not(.dxbl-disabled):not(:disabled):hover {
    background-color: var(--bs-primary) !important;
    color: var(--RzTextoSobreDestaque) !important;
}

/* Dropdown/listbox (ex.: Tamanho da pagina do grid): o item selecionado/hover recebe o laranja do tema (no <li> e/ou no ::before). Forca azul, cobrindo as duas grafias de classe (list-box e listbox). */
.dxbl-list-box-item-selected,
.dxbl-list-box-item-selected::before,
.dxbl-listbox-item-selected::before,
.dxbl-listbox tr.dxbl-listbox-item-selected > td::before {
    background-color: var(--bs-primary) !important;
    color: var(--RzTextoSobreDestaque) !important;
}

.dxbl-list-box-item-active:not(.dxbl-list-box-item-selected),
.dxbl-list-box-item-active:not(.dxbl-list-box-item-selected)::before,
.dxbl-listbox-item-active:not(.dxbl-listbox-item-selected)::before,
.dxbl-listbox tr.dxbl-listbox-item-active:not(.dxbl-listbox-item-selected) > td::before {
    background-color: var(--RzPrimariaSelecao) !important;
}

/* O tema office-white colore todos os <a> em laranja (a{color:#34b18c} e a:hover). Forca a cor de link padrao (--RzLink). */
a {
    color: var(--RzLink);
}

a:hover {
    color: var(--RzLink);
}

/* O mesmo tema office-white colore o hover dos links com classe .btn-link (ex.: link "Recomendacoes sobre imagem" da tela de usuario) em laranja. Forca --RzLink (azul padrao) em todos os estados. */
.btn-link,
.btn-link:hover,
.btn-link:focus,
.btn-link:active {
    --bs-btn-color: var(--RzLink);
    --bs-btn-hover-color: var(--RzLink);
    --bs-btn-active-color: var(--RzLink);
    color: var(--RzLink) !important;
}

/* Botao Bootstrap "primary" (ex.: "Publicar versao no servidor"): o tema office-white.bs4 usa laranja no hover/focus/active. Forca verde RZ. */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):hover,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--RzDestaqueHoverForte) !important;
    border-color: var(--RzDestaqueHoverForte) !important;
    color: var(--RzTextoSobreDestaque) !important;
}

.btn-primary:focus,
.btn-primary.focus {
    box-shadow: 0 0 0 0.2rem var(--RzDestaqueSombraFoco) !important;
}

/* Barra de progresso do Bootstrap (RzProgressBar usa .progress-bar): o tema pinta o preenchimento de laranja. Forca verde RZ. */
.progress-bar {
    background-color: var(--RzDestaque) !important;
}

table.dataTable tbody > tr.selected, table.dataTable tbody > tr > .selected {
    background-color: var(--RzDestaqueSelecaoLeve);
    color: var(--text-color-l);
}

/* DxGrid de selecao (ex.: filtros do tipo "radio" via RzFiltroAtivoRadio, que usam um DxGrid de selecao unica):
   o tema office-white.bs4 pinta a linha selecionada/focada com o laranja do tema (--primary #34b18c). Forca verde RZ. */
.dxbl-grid {
    --dxbl-grid-selection-bg: var(--RzDestaqueSelecao);
    --dxbl-grid-selection-color: inherit;
    --dxbl-grid-selection-focus-bg: var(--RzDestaque);
    --dxbl-grid-selection-focus-color: var(--RzTextoSobreDestaque);
    --dxbl-grid-focused-row-bg: var(--RzDestaqueSelecao);
    --dxbl-grid-focused-row-color: inherit;
}

.dxbl-grid .dxbl-grid-table tr.dxbl-grid-focused-row > td::before,
.dxbl-grid .dxbl-grid-table tr.dxbl-selected > td::before {
    background-color: var(--RzDestaqueSelecao) !important;
}

/* Radio/checkbox MARCADO do DevExpress (ex.: filtros "Atendido/Todos/Presentes/Faltantes" e a coluna de
   selecao unica do DxGrid no modal "Selecione o Psicologo Responsavel"): o tema office-white pinta o
   marcador com o laranja do tema (--dxbl-checkbox-check-element-checked-bg: #34b18c). Forca verde RZ. */
.dxbl-checkbox,
.dxbl-grid {
    /* Checkbox (quadrado) marcado */
    --dxbl-checkbox-check-element-checked-bg: var(--RzDestaque);
    --dxbl-checkbox-check-element-checked-hover-bg: var(--RzDestaqueHoverForte);
    --dxbl-checkbox-check-element-checked-color: var(--RzTextoSobreDestaque);
    /* Radio (bolinha) marcado: ponto + borda */
    --dxbl-checkbox-radio-check-bg: var(--RzDestaque);
    --dxbl-checkbox-radio-checked-border-color: var(--RzDestaque);
    --dxbl-checkbox-radio-checked-hover-bg: var(--RzDestaqueHoverForte);
    --dxbl-checkbox-radio-checked-hover-border-color: var(--RzDestaqueHoverForte);
    /* Switch (toggle) marcado */
    --dxbl-checkbox-switch-checked-bg: var(--RzDestaque);
    --dxbl-checkbox-switch-checked-hover-bg: var(--RzDestaqueHoverForte);
    /* Sombra de foco (evita o brilho laranja) */
    --dxbl-checkbox-checked-focus-shadow-color: var(--RzDestaqueSombraFoco);
    --dxbl-checkbox-unchecked-focus-shadow-color: var(--RzDestaqueSombraFoco);
}

/* Radios/checkboxes nativos (input) e do Bootstrap: garantir que o estado marcado tambem seja verde, nunca laranja. */
input[type="radio"], input[type="checkbox"] {
    accent-color: var(--RzDestaque);
}

.form-check-input:checked {
    background-color: var(--RzDestaque) !important;
    border-color: var(--RzDestaque) !important;
}

/* User para ocultar um elemento. */
.rz-hidden {
    display: none !important;
}

/* Use para fazer um elemento ocupar todo o comprimento disponível para ele. */
.rz-full-width {
    width: 100%;
}

/* Diminuir o tamanho normal de 24px para um tamanho menor para os ícones no menu lateral esquerdo ficarem do mesmo tamanho dos outros.
    Talvez seja necessário limitar para somente fazer isso se é no menu lateral.
*/
.feather {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}


body::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body::-webkit-scrollbar-track {
    background-color: var(--RzBarraRolagemTrilho);
    border-radius: 10px;
}

body::-webkit-scrollbar-thumb {
    background-color: var(--RzBarraRolagem);
    border-radius: 10px;
}

    body::-webkit-scrollbar-thumb:hover {
        background: var(--RzBarraRolagemHover);
        cursor: pointer;
    }

div::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

div::-webkit-scrollbar-track {
    background-color: var(--RzBarraRolagemTrilho);
    border-radius: 10px;
}

div::-webkit-scrollbar-thumb {
    background-color: var(--RzBarraRolagem);
    border-radius: 10px;
}

    div::-webkit-scrollbar-thumb:hover {
        background: var(--RzBarraRolagemHover);
        cursor: pointer;
    }

/* Correção para o ícone do menu dropdown lateral ser branco em contraste com o fundo. */
div.nav div.dx-nav-menu-bar.right a.nav-link:first-child svg.dxbl-image:first-child {
    color: var(--RzTextoSobreDestaque) !important;
}

/* Correção para o menu dropdown do devexpress ter width maior para o texto dos botões não ir além da área do dropdown. */
.dropdown-menu.dxbs-dm.dx-dropdown-menu.show.top-radius-0 {
    width: 340px;
}

/* Move um elemento para a direita. */
.rz-right-align {
    float: right !important;
}

/* Move um elemento para a esquerda. */
.rz-left-align {
    float: left !important;
}

/* Centraliza um elemento. */
.rz-center-align {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: auto; /* 28/09/2021-Thiago: Adicionado pois estou querendo centralizar verticalmente um botão, se estragar outros lugares que estavam ok, pode-se remover esta linha. */
    margin-bottom: auto; /* 28/09/2021-Thiago: Adicionado pois estou querendo centralizar verticalmente um botão, se estragar outros lugares que estavam ok, pode-se remover esta linha. */
}

.dxbl-btn dxbl-btn-danger rz-center-align #id9f3cca30-6fbe-4a97-a57f-ffa057f1be4d {
    margin-top: 15px;
}

/* Correção para no filtro de datetime mostrar primeiro o botão de data e por último o botão de filtro. */
dxbl-date-edit div.dxbl-btn-group-right {
    flex-flow: row-reverse;
}

dxbl-modal-dialog {
    border: 3px solid var(--RzDestaque);
    border-radius: 10px;
}

.dxbl-grid .dxbl-grid-table > tbody > tr > .dxbl-grid-command-cell >
.dxbl-btn, .dxbl-grid .dxbl-grid-table > tbody > tr > .dxbl-grid-command-cell >
.dxbl-grid-header-content > .dxbl-btn, .dxbl-grid .dxbl-grid-table > tbody > tr >
.dxbl-grid-selection-cell > .dxbl-btn, .dxbl-grid .dxbl-grid-table > tbody > tr >
.dxbl-grid-selection-cell > .dxbl-grid-header-content > .dxbl-btn, .dxbl-grid .dxbl-grid-table > tfoot > tr >
.dxbl-grid-command-cell > .dxbl-btn, .dxbl-grid .dxbl-grid-table > tfoot > tr > .dxbl-grid-command-cell > .dxbl-grid-header-content >
.dxbl-btn, .dxbl-grid .dxbl-grid-table > tfoot > tr > .dxbl-grid-selection-cell > .dxbl-btn, .dxbl-grid .dxbl-grid-table > tfoot > tr >
.dxbl-grid-selection-cell > .dxbl-grid-header-content > .dxbl-btn, .dxbl-grid .dxbl-grid-table > thead > tr > .dxbl-grid-command-cell > .dxbl-btn,
.dxbl-grid .dxbl-grid-table > thead > tr > .dxbl-grid-command-cell > .dxbl-grid-header-content > .dxbl-btn, .dxbl-grid .dxbl-grid-table > thead > tr >
.dxbl-grid-selection-cell > .dxbl-btn, .dxbl-grid .dxbl-grid-table > thead > tr > .dxbl-grid-selection-cell > .dxbl-grid-header-content > .dxbl-btn {
    /*    border: 0;
    border-radius: 5px;
    position: relative;
    margin: 0.5px;
    background-color: var(--RzDestaque);
    color: #ffffff;*/
    background-color: var(--RzGridBtnEditBg);
    color: var(--RzGridBtnEditColor);
    height: 35px;
    border: 0;
    border-radius: 5px;
    position: relative;
    margin: 5px;
    width: 37px;
}

.dxbl-grid-table > tbody > tr > .dxbl-grid-command-cell > .dxbl-btn :hover {
    color: var(--RzTextoForte);
}

/*Essa classe pode ser usada quando você quiser alinhar botões na horizontal*/
.buttons-inline {
    display: flex !important;
    flex-direction: row !important;
}

/* Thiago: Comentado para corrigir para os botões de upload não ficarem desalinhados. */
/*.dxbs-uc .dxuc-button-container {*/
/*height: 0rem !important;*/
/*margin-top: 15px;*/
/*}*/

.dxuc-file-list-view pt-3 pb-3 {
    margin-top: 10px;
}

.pt-3, .py-3 {
    padding-top: 2.5rem !important;
    align-items: center;
    margin-right: 10px;
}

.btn-clean {
    margin-top: 17px;
}


/* Classe para desenhar um ícone caret em inputs de enums. */
/* Icone de ajuda do RzTextBoxPassword posicionado dentro do campo, a esquerda do olho.

   Existe porque a posicao padrao do icone vem do CSS ISOLADO do componente, que depende de haver um
   elemento posicionado por perto na tela; onde nao ha, o icone cai no fluxo normal e aparece solto
   embaixo do campo. Esta classe e CSS comum (nao isolado) e acompanha a mesma referencia de posicao
   que a tela ja usa para o olho, entao vale independente disso.

   Passe em IconHelpCssClass, junto com o EyeClassCustom da tela. Os !important sao necessarios para
   vencer o top/left do CSS isolado do componente. */
.info-help-custom-class {
    zoom: 1.5;
    position: absolute;
    top: 28px !important;
    right: 46px !important;
    left: auto !important;
}

.rz-enum-select-container {
    position: relative;
}
/* Classe para desenhar um ícone caret em inputs de enums. */
.rz-enum-select-icon-caret {
    position: absolute;
    offset-position: right;
    top: 10px;
    left: auto;
    right: 10px;
    /*float: right;*/
}

/* Classes CSS para botões de relatórios, coloquei aqui pois não estava funcionando
    mas vi que era porque faltava dar ctrl + r, então acho que dá para remover daqui.
*/

.div-input-pesquisar {
    display: flex;
    flex-flow: row;
    text-align: center;
    align-items: center;
}

.area-dos-botoes-dos-relatorios {
    margin: 0rem 1.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.botao-de-relatorio {
    align-items: center !important;
    padding: 3% 0 !important;
    background-color: var(--RzReportButtonBg) !important;
    color: var(--RzReportButtonColor) !important;
    cursor: pointer !important;
    border-radius: 12px !important;
    margin: 15px !important;
    text-align: center !important;
}

    .botao-de-relatorio:hover {
        background-color: var(--RzReportButtonHoverBg) !important;
        color: var(--RzReportButtonHoverColor) !important;
    }

    .botao-de-relatorio img {
        /*width: 100%;*/
        height: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
    }

    .botao-de-relatorio.fullImg {
        padding: 0 !important;
    }

        .botao-de-relatorio.fullImg img {
            object-fit: cover !important;
        }


.botao-de-relatorio-folder {
    background-color: var(--RzReportFolderBg) !important;
    color: var(--RzReportFolderColor) !important;
}

    .botao-de-relatorio-folder:hover {
        background-color: var(--RzReportFolderHoverBg) !important;
        color: var(--RzReportFolderHoverColor) !important;
    }

/*Aplicado borderadios de 5px nos botões salvar, voltar, filtrar e novo*/
.dxbl-btn:not(.dxbl-disabled):not(:disabled) {
    border-radius: 5px;
}

/*Oculta botão copiar da tela de aviso*/
#idbe68a186-0fda-44ae-b001-cc7065a9820c {
    display: none;
}


/*CÓDIGO APENAS PARA DISPOSITIVOS MOBILE*/
@media screen and (max-width: 768px) {
    .dxbl-fl .dxbl-fl-gd, .dxbl-fl .dxbl-fl-gt {
        width: 100%
    }

    .dxbl-col-xl-6, .dxbl-col-lg-6, .dxbl-col-md-6, 
    .dxbl-col-sm-6, .dxbl-col-xs-6, .dxbl-col, .dxbl-fl-item {
        width: 100%
    }
}



.dxbl-modal {
    --dxbl-popup-font-size: 1.9rem;
    --dxbl-popup-line-height: 2.4285;
    font-weight: bold 500;
}

.dxbl-btn-light {
    --dxbl-btn-bg: var(--RzExcluir);
    --dxbl-btn-color: var(--RzExcluirTexto);
    --dxbl-btn-hover-bg: var(--RzExcluirFundoClaro);
    --dxbl-btn-hover-color: var(--RzExcluir);
    font-size: 1.2rem;
    border-radius: 0.7rem !important;
}

.dxbl-btn-danger {
    --dxbl-btn-bg: var(--RzExcluir);
    --dxbl-btn-border-color: var(--RzExcluir);
    --dxbl-btn-color: var(--RzTextoSobreDestaque);
    --dxbl-btn-active-border-color: var(--RzExcluirBorda);
    --dxbl-btn-hover-bg: var(--RzExcluirHover);
    --dxbl-btn-hover-color: var(--RzTextoSobreDestaque);
    --dxbl-btn-hover-border-color: var(--RzExcluirBorda);
    --dxbl-btn-disabled-bg: var(--RzExcluirDesabilitado);
    --dxbl-btn-disabled-color: var(--RzTextoSobreDestaque);
    font-size: 1.2rem;
    border-radius: 0.7rem !important;
}

/* RzGridButtonDelete: forca o vermelho do tema (mesmo tom usado em .dxbl-btn-light,
   #e81123), sem depender das variaveis --dxbl-btn-* do tema DevExpress. */
.rz-grid-btn-delete,
.rz-grid-btn-delete:disabled {
    background-color: var(--RzExcluir) !important;
    border-color: var(--RzExcluir) !important;
    color: var(--RzTextoSobreDestaque) !important;
}

.rz-grid-btn-delete:hover,
.rz-grid-btn-delete:focus,
.rz-grid-btn-delete:active {
    background-color: var(--RzExcluirHover) !important;
    border-color: var(--RzExcluirBorda) !important;
    color: var(--RzTextoSobreDestaque) !important;
}

/* O icone (lixeira) fica achatado dentro da celula do RzQuickGrid, provavelmente por
   herdar uma altura de linha/box diferente da usada no DxGrid original. Fixa um box
   quadrado com o glifo centralizado, independente do contexto ao redor. */
.rz-grid-btn-delete .dxbl-image,
.rz-grid-btn-delete i {
    width: 1.1rem !important;
    height: 1.1rem !important;
    font-size: 1.1rem !important;
    line-height: 1.1rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
}

/* O tema padrao do QuickGrid usa padding: 0.1rem nas celulas, apertado demais para
   abrigar botoes (ex.: RzGridButtonDelete). Restaura um respiro compativel com o Bootstrap.

   white-space: nowrap (04/09/2026) - sem isto o texto de uma celula (ex.: nome de cliente longo)
   quebra em varias linhas e infla a altura so daquela linha, enquanto as demais colunas da mesma
   linha ficam centralizadas verticalmente (vertical-align acima) num espaco vazio enorme — o efeito
   visual e de grade desalinhada, mesmo as colunas tendo exatamente a mesma largura no cabecalho e no
   corpo (confirmado via DevTools: largura identica, so a altura da linha varia). O RzQuickGrid ja tem
   rolagem horizontal propria (rz-quickgrid-scroll-outer/inner) para conteudo largo, que e o
   comportamento equivalente ao grid antigo baseado em DevExpress — dane-se a quebra de linha. */
.quickgrid.table > tbody > tr > td {
    padding: 0.5rem !important;
    vertical-align: middle !important;
    white-space: nowrap;
}

/* Alinhamento cabecalho x dado (04/09/2026): o <th> nativo do QuickGrid embrulha o titulo num
   .col-title interno com o SEU PROPRIO padding-esquerdo (tema "default": 0.4rem), somado ao
   padding do proprio <th> (0.5rem, igual ao <td> acima) — o rotulo do cabecalho nascia ~0.4rem
   mais a direita do que o dado correspondente, mesmo <th> e <td> tendo exatamente a mesma largura
   (confirmado via DevTools: 185.63px nos dois). Zera o padding-esquerdo do .col-title para sobrar
   so o padding do proprio <th>, que ja bate com o do <td>. */
.quickgrid[theme=default] .col-title {
    padding-left: 0;
}

/* Colunas com Class="text-center" (ex.: datas): o texto do <td> centraliza normalmente (text-align
   simples), mas o titulo do <th> fica dentro de .col-title, que e display:flex e IGNORA
   text-align — o rotulo continuava colado a esquerda enquanto o dado ia para o centro da coluna,
   parecendo desalinhado. Centraliza o conteudo do flex tambem quando o <th> leva a classe
   text-center. */
.quickgrid.table > thead > tr > th.text-center .col-title {
    justify-content: center;
}

/* O QuickGrid preenche a pagina com linhas <tr> totalmente vazias ate completar
   Pagination.ItemsPerPage (proposito oficial: evitar "pulo" de layout na ultima
   pagina). Como nossas listas costumam ter poucos itens e Pagination.ItemsPerPage
   vem da opcao "QtdItensPorPaginaDoGrid" (tipicamente bem maior que a quantidade real),
   isso sobra como um bloco grande de linhas em branco. Essas linhas nao tem classe
   propria, mas todas as celulas ficam vazias (diferente de uma linha real, que sempre
   tem texto ou o botao de Acoes) — usamos isso para escondê-las. */
.quickgrid.table > tbody > tr:not(:has(> td:not(:empty))) {
    display: none;
}

.dxbl-grid-confirm-dialog-buttons {
    justify-content: right;
}


@media screen and (max-width: 480px) {
    .dxbl-modal {
        --dxbl-popup-font-size: 0.8rem;
        --dxbl-popup-line-height: 2.4285;
        font-weight: bold;
    }

    .dxbl-btn-light {
        --dxbl-btn-bg: var(--RzExcluir);
        --dxbl-btn-color: var(--RzExcluirTexto);
        --dxbl-btn-hover-bg: var(--RzExcluirFundoClaro);
        --dxbl-btn-hover-color: var(--RzExcluir);
        font-size: 1rem;
        border-radius: 0.7rem !important;
    }

    .dxbl-btn-danger {
        --dxbl-btn-bg: var(--RzExcluir);
        --dxbl-btn-border-color: var(--RzExcluir);
        --dxbl-btn-color: var(--RzTextoSobreDestaque);
        --dxbl-btn-active-border-color: var(--RzExcluirBorda);
        --dxbl-btn-hover-bg: var(--RzExcluirHover);
        --dxbl-btn-hover-color: var(--RzTextoSobreDestaque);
        --dxbl-btn-hover-border-color: var(--RzExcluirBorda);
        --dxbl-btn-disabled-bg: var(--RzExcluirDesabilitado);
        --dxbl-btn-disabled-color: var(--RzTextoSobreDestaque);
        font-size: 1rem;
        border-radius: 0.7rem !important;
    }

    .dxbl-grid-confirm-dialog-buttons {
        justify-content: right;
    }
}

.dxbl-modal > .dxbl-modal-root > .dxbl-popup
{
    max-width: 100%!important;    
}

/* Permite adicionar um ícone dentro de um elemento input na direita por exemplo um caret. */
.rz-text-box-icon {
    position: relative;
    right: 16px;
    bottom: 2px;
}

/* Sem isso o botão de filtros ocupa o comprimento inteiro da sanfona pois o display era flex, com isso ele fica pequeno na direita. */
.dxbl-group > .dxbl-group-body {
    display: block !important;
}
.dxbl-expandable-container {
    display: block !important;
}


/* Corrigindo para as opções do RzTagBox dentro de flyout de filtro serem mostradas em vez de ficar em baixo do flyout. */
.dxbl-popup-cell {
    z-index: 9999999999 !important;
}


.rzalign-botton {
    position: absolute !important;
    bottom: 15px !important;
    left: 0 !important;
    right: 0 !important;
    overflow-x: hidden !important;
}

/*Este é o estilo do botão padrão para os grids*/
rz-grid-button-default {
    background-color: var(--RzDestaque);
    color: var(--RzTextoSobreDestaque);
    height: 35px;
    border: 0;
    border-radius: 5px;
    position: relative;
    margin: 5px;
    width: 37px;
}

.title-version {
    color: var(--RzTextVersionTitle);
}

.det-version {
    color: var(--RzTextVersionDet);
}

.card-extraconfig {
    color: var(--RzPageShortcutColor);
    background-color: var(--RzPageShortcutBackColor);
    border-color: var(--RzPageShortcutBorderColor);
}

.dx-chart-title {
    color: var(--RzTitleGraphicColor);
    /*background-color: var(--RzTitleGraphicBg);*/
}

.dx-chart-subtitle {
    color: var(--RzSubTitleGraphicColor);
    /*background-color: var(--RzSubTitleGraphicBg);*/
}

.dx-blazor-widget .dx-chart-with-legend-container {    
    color: var(--RzLegendGraphicColor);    
    /*background-color: var(--RzGraphicBg);*/
}

.accordion-body {
    background-color: var(--RzAccordionBodyBg);
    padding-left: 2px;
    padding-right: 2px;
}

/* RzAccordionItem/RzAccordionItemButtonClickable com AllowExpand=false (14/09/2026): item sempre
   aberto, sem seta de retração nenhuma - a classe some com a seta do Bootstrap (::after) e tira a cara
   de clicável do botão, já que clicar nele não faz mais nada. */
.rz-accordion-no-toggle {
    cursor: default;
}

.rz-accordion-no-toggle::after {
    display: none;
}

/* Pedido do DEV (14/09/2026): o padding lateral padrao do Bootstrap (1.25rem) somava com a margem
   da propria pagina e sobrava espaço inutil nas bordas do conteudo do acordeao (RzAccordionItemButtonClickable),
   visivel em qualquer tema. No mobile a régua e ainda mais apertada. */
@media (max-width: 800px) {
    .accordion-body {
        padding-left: 1px;
        padding-right: 1px;
    }
}

.alert-info {
    color: var(--RzAlertInfoColor);
    background-color: var(--RzAlertInfoBg);
    border-color: var(--RzAlertInfoBorderColor);
}


.dxbl-grid .dxbl-grid-table > thead .dxbl-grid-header-row > th:not(.dxbl-grid-empty-cell) {
    background-color: var(--RzGridTitleColumnBg) !important;
    color: var(--RzGridTitleColumnColor) !important;
}

.dxbl-grid {
    --dxbl-grid-bg: var(--RzGridItenColumnBg);
    --dxbl-grid-color: var(--RzGridItenColumnColor);
}

.btn-secondary {
    color: var(--RzBtnManageReportColor);
    background-color: var(--RzBtnManageReportBg);
    border-color: var(--RzBtnManageReportBorderColor);
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .2);
}

.btn-view-grid {
    background-color: var(--RzBtnGridViewBg) !important;
    color: var(--RzBtnGridViewColor) !important;
}

.text-danger {
    color: var(--RzModalHeaderIconTrash) !important;
}

.filter-btn-back {
    height: 35px;
    max-height: 52px;
    margin-top: 0 !important;
    z-index: 4;
    margin-left: 6px;
    font-size: 0.88rem;
    width: 135px;
    color: var(--RzBtnBackFilterColor) !important;
    background-color: var(--RzBtnBackFilterBg) !important;
    border-color: var(--RzBtnBackFilterBorderColor) !important;
}

    .filter-btn-back:hover {
        color: var(--RzBtnFilterColor) !important;
        background-color: var(--RzBtnFilterHoverBg) !important;
        border-color: var(--RzBtnFilterHoverBg) !important;
    }

.custom-button-mail {
    border: none;
    background-color: var(--RzBtnSecondaryBg);
    border-radius: 5px;
    color: var(--RzBtnSecondaryColor);
    padding: 3px 7px;
}

.space-fields {
    padding-left: 20%; 
    padding-right: 20%;
}

.card {
    border: 0;
}

.custom-image-item {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjYgMjYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI2IDI2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6IzNEM0QzRDt9PC9zdHlsZT48Zz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMjUsN2MwLTAuMi0wLjEtMC42LTAuMy0wLjdDMjQuNiw2LjEsMjQuNCw2LDI0LjIsNkgxNnY1LjdsMS45LDEuN0wyNSw3eiIvPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xLDIybDE0LDNWMUwxLDRWMjJ6IE04LDEwYzEuNywwLDMsMS44LDMsNGMwLDIuMi0xLjMsNC0zLDRzLTMtMS44LTMtNEM1LDExLjgsNi4zLDEwLDgsMTB6Ii8+PHBhdGggY2xhc3M9InN0MCIgZD0iTTE4LDE1bC0yLTJsMCw4bDguMiwwYzAuMiwwLDAuNC0wLjEsMC42LTAuM2MwLjItMC4yLDAuMi0wLjQsMC4yLTAuNkwyNSw5TDE4LDE1TDE4LDE1eiIvPjxlbGxpcHNlIGNsYXNzPSJzdDAiIGN4PSI4IiBjeT0iMTQiIHJ4PSIyIiByeT0iMyIvPjwvZz48L3N2Zz4NCg==);
    background-repeat: no-repeat;
}

.icon-copiar {
    display: flex !important;
    align-items: center;
    background-color: inherit;
    font-size: 18px;
    margin-right: 4px;
    margin-left: 4px;
    cursor: pointer;
}

.rz-quickgrid-loading-overlay,
.rz-quickgrid-empty-overlay {
    inset: 0;
    background: var(--RzVeuClaro);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    z-index: 50;
    text-align: center;
    height: 10dvh;
}

/* ============================================================================
   RzQuickGridComDetalhe: linha mestre-detalhe expansível (ver RzQuickGridComDetalhe.razor.cs)

   O QuickGrid nativo renderiza uma <table>/<tr>/<td> de verdade, sem colspan nem ponto de
   extensão para linha extra. A pseudo-linha de detalhe (classe .rz-quickgrid-detail-row) vira
   position:relative e reserva --rz-quickgrid-detail-height de altura; o painel em si
   (.rz-quickgrid-detalhe-painel) é position:absolute com inset:0, então o <tr> (sempre com a
   largura inteira da tabela) é o ancestral posicionado usado para resolver a largura/altura do
   painel — por isso ele cobre a linha inteira, não só a coluna onde está a <td> que o hospeda.
   ============================================================================ */
.rz-quickgrid-detalhe-toggle-col {
    width: 2.5rem;
    text-align: center;
}

.rz-quickgrid-detalhe-toggle {
    padding: 0.15rem 0.4rem;
    border: none;
    background: none;
    color: inherit;
    cursor: pointer;
}

    .rz-quickgrid-detalhe-toggle:hover {
        color: var(--RzPrimaryColor, #34b18c);
    }

.rz-quickgrid-detail-row {
    position: relative;
    height: var(--rz-quickgrid-detail-height, 220px);
}

    .rz-quickgrid-detail-row > td {
        border: none !important;
        padding: 0 !important;
        background-color: transparent !important;
    }

.rz-quickgrid-detalhe-painel {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow-y: auto;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
    padding: 0.6rem 1rem;
    background-color: var(--bs-body-bg, #fff);
    border-top: 1px solid var(--bs-border-color);
    border-bottom: 1px solid var(--bs-border-color);
}

/* ============================================================================
   RzQuickGridComGrupo: cabecalho de grupo full-width (ver RzQuickGridComGrupo.razor.cs)

   Mesma tecnica do bloco RzQuickGridComDetalhe acima (o QuickGrid nativo nao tem colspan
   nem ponto de extensao para linha extra): a pseudo-linha de cabecalho de grupo (classe
   .rz-quickgrid-group-header-row) vira position:relative e reserva
   --rz-quickgrid-group-header-height de altura; o painel em si (.rz-quickgrid-grupo-painel)
   e position:absolute com inset:0, entao o <tr> (sempre com a largura inteira da tabela) e
   o ancestral posicionado usado para resolver a largura/altura do painel - por isso ele cobre
   a linha inteira, nao so a coluna (estreita, largura 0) onde esta a <td> que o hospeda.
   ============================================================================ */
.rz-quickgrid-grupo-header-col {
    width: 0;
    padding: 0 !important;
}

.rz-quickgrid-group-header-row {
    position: relative;
    height: var(--rz-quickgrid-group-header-height, 56px);
}

    .rz-quickgrid-group-header-row > td {
        border: none !important;
        padding: 0 !important;
        background-color: transparent !important;
    }

.rz-quickgrid-grupo-painel {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.4rem 0.75rem;
    background-color: var(--bs-tertiary-bg, #f4f4f4);
    border-top: 1px solid var(--bs-border-color);
    border-bottom: 1px solid var(--bs-border-color);
    font-weight: 500;
}

#loadingModal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 999999 !important;
}

    #loadingModal .modal-dialog {
        margin: 0 !important;
        width: 100vw !important;
        max-width: none !important;
        min-height: 100vh !important;
    }

    #loadingModal .modal-content {
        width: 100vw !important;
        min-height: 100vh !important;
        margin: 0 !important;
    }

/* ============================================================================
   ACCENT DO TEMA DEVEXPRESS (office-white.bs4) -> VERDE RZ

   O tema office-white usa LARANJA como cor de destaque (#fe7109, e #FD7E14 nos
   botoes Bootstrap), espalhado por cerca de 160 variaveis - a ponto de o proprio
   --blue do tema ser laranja. O padrao visual da RZ nao usa laranja em lugar
   nenhum, entao aqui o accent inteiro passa a ser o verde RZ (#34b18c).

   Por que funciona: este arquivo e carregado DEPOIS do tema no App.razor, entao
   basta repetir os mesmos seletores do tema para vencer no cascade (mesma
   especificidade + declarado depois). Nao use :root para as variaveis abaixo:
   o tema as define dentro do seletor de cada componente, que e mais especifico
   e ganharia do :root.

   Onde o tema usa VARIAVEL, sobrescrevemos a variavel. Onde ele usa cor FIXA
   (caso do ::before do dia selecionado no calendario e dos utilitarios do
   Bootstrap), sobrescrevemos a propriedade.

   ATENCAO ao atualizar o pacote DevExpress.Blazor.Themes: se um componente novo
   voltar a aparecer laranja, o tema deve ter introduzido outra regra com
   #fe7109/#FD7E14 - procure a cor no office-white.bs4.min.css e acrescente o
   seletor correspondente aqui.
   ============================================================================ */

:root {
    --primary: var(--RzDestaque);
    --blue: var(--RzDestaque); /* O tema define --blue como laranja; mantemos o nome dele e corrigimos a cor. */
    --dxbl-client-component-palette-primary: var(--RzDestaque);
}

/* ---------- Botoes DevExpress ---------- */

.dxbl-btn {
    --dxbl-btn-link-hover-color: var(--RzDestaque);
}

/* IMPORTANTE - especificidade: o tema separa os botoes em dois grupos, e o grupo
   "standalone" usa SELETOR COMPOSTO (.dxbl-btn-standalone.dxbl-btn-primary = duas
   classes). Um override so com .dxbl-btn-primary (uma classe) PERDE para ele, por
   mais que venha depois. Por isso os dois grupos aparecem abaixo.
   Os botoes Rz* (RzButton, RzGridButtonUpdate...) renderizam como standalone. */

.dxbl-btn-primary,
.dxbl-btn-standalone.dxbl-btn-primary {
    --dxbl-btn-color: var(--RzTextoSobreDestaque);
    --dxbl-btn-bg: var(--RzDestaque);
    --dxbl-btn-border-color: var(--RzDestaque);
    --dxbl-btn-hover-bg: var(--RzDestaqueHoverForte);
    --dxbl-btn-hover-color: var(--RzTextoSobreDestaque);
    --dxbl-btn-hover-border-color: var(--RzDestaqueHoverForte);
    --dxbl-btn-active-bg: var(--RzDestaqueAtivoForte);
    --dxbl-btn-active-color: var(--RzTextoSobreDestaque);
    --dxbl-btn-active-border-color: var(--RzDestaqueAtivoForte);
    --dxbl-btn-disabled-bg: var(--RzDestaqueDesabilitado);
    --dxbl-btn-disabled-color: var(--RzTextoSobreDestaque);
    --dxbl-btn-disabled-border-color: var(--RzDestaqueDesabilitado);
    --dxbl-btn-focus-bg: var(--RzDestaque);
    --dxbl-btn-focus-color: var(--RzTextoSobreDestaque);
    --dxbl-btn-focus-border-bg: var(--RzDestaque);
    --dxbl-btn-focus-outline-color: var(--RzDestaque);
}

.dxbl-btn-outline-primary,
.dxbl-btn-text-primary,
.dxbl-btn-standalone.dxbl-btn-outline-primary,
.dxbl-btn-standalone.dxbl-btn-text-primary {
    --dxbl-btn-color: var(--RzDestaque);
    --dxbl-btn-border-color: var(--RzDestaque);
    --dxbl-btn-hover-bg: var(--RzDestaqueHoverForte);
    --dxbl-btn-hover-color: var(--RzTextoSobreDestaque);
    --dxbl-btn-hover-border-color: var(--RzDestaqueHoverForte);
    --dxbl-btn-active-bg: var(--RzDestaqueAtivoForte);
    --dxbl-btn-active-color: var(--RzTextoSobreDestaque);
    --dxbl-btn-active-border-color: var(--RzDestaqueAtivoForte);
    --dxbl-btn-disabled-color: var(--RzDestaqueDesabilitado);
    --dxbl-btn-disabled-border-color: var(--RzDestaqueDesabilitado);
    --dxbl-btn-focus-color: var(--RzDestaque);
    --dxbl-btn-focus-border-bg: var(--RzDestaque);
    --dxbl-btn-focus-outline-color: var(--RzDestaque);
    --dxbl-btn-link-hover-color: var(--RzDestaque);
}

/* O tema pinta de laranja apenas o anel de foco destes botoes; a cor propria deles e mantida. */
.dxbl-btn-danger,
.dxbl-btn-dark,
.dxbl-btn-info,
.dxbl-btn-light,
.dxbl-btn-secondary,
.dxbl-btn-standalone,
.dxbl-btn-success,
.dxbl-btn-warning,
.dxbl-btn-outline-danger,
.dxbl-btn-outline-dark,
.dxbl-btn-outline-info,
.dxbl-btn-outline-light,
.dxbl-btn-outline-none,
.dxbl-btn-outline-secondary,
.dxbl-btn-outline-success,
.dxbl-btn-outline-warning,
.dxbl-btn-text-danger,
.dxbl-btn-text-dark,
.dxbl-btn-text-info,
.dxbl-btn-text-light,
.dxbl-btn-text-none,
.dxbl-btn-text-secondary,
.dxbl-btn-text-success,
.dxbl-btn-text-warning,
.dxbl-btn-dropdown-popup,
.dxbl-btn-standalone.dxbl-btn-danger,
.dxbl-btn-standalone.dxbl-btn-dark,
.dxbl-btn-standalone.dxbl-btn-info,
.dxbl-btn-standalone.dxbl-btn-light,
.dxbl-btn-standalone.dxbl-btn-secondary,
.dxbl-btn-standalone.dxbl-btn-success,
.dxbl-btn-standalone.dxbl-btn-warning,
.dxbl-btn-standalone.dxbl-btn-outline-danger,
.dxbl-btn-standalone.dxbl-btn-outline-dark,
.dxbl-btn-standalone.dxbl-btn-outline-info,
.dxbl-btn-standalone.dxbl-btn-outline-light,
.dxbl-btn-standalone.dxbl-btn-outline-none,
.dxbl-btn-standalone.dxbl-btn-outline-secondary,
.dxbl-btn-standalone.dxbl-btn-outline-success,
.dxbl-btn-standalone.dxbl-btn-outline-warning,
.dxbl-btn-standalone.dxbl-btn-text-danger,
.dxbl-btn-standalone.dxbl-btn-text-dark,
.dxbl-btn-standalone.dxbl-btn-text-info,
.dxbl-btn-standalone.dxbl-btn-text-light,
.dxbl-btn-standalone.dxbl-btn-text-none,
.dxbl-btn-standalone.dxbl-btn-text-secondary,
.dxbl-btn-standalone.dxbl-btn-text-success,
.dxbl-btn-standalone.dxbl-btn-text-warning,
.dxbl-rollers-footer > .dxbl-btn,
.dxbl-filter-builder .dxbl-btn.dxbl-filter-builder-node-group-btn,
.dxbl-filter-builder .dxbl-btn.dxbl-filter-builder-node-operation-btn,
.dxbl-filter-builder .dxbl-btn.dxbl-filter-builder-node-property-btn,
.dxbl-filter-builder .dxbl-btn.dxbl-filter-builder-node-value-btn {
    --dxbl-btn-focus-outline-color: var(--RzDestaque);
    --dxbl-btn-link-hover-color: var(--RzDestaque);
}

/* O botao de grupo do filter builder usa a cor de destaque no texto e na borda. */
.dxbl-filter-builder .dxbl-btn.dxbl-filter-builder-node-group-btn {
    --dxbl-btn-color: var(--RzDestaque);
    --dxbl-btn-border-color: var(--RzDestaque);
    --dxbl-btn-focus-color: var(--RzDestaque);
    --dxbl-btn-focus-border-bg: var(--RzDestaque);
}

/* Funil de filtro preenchido (grid e pivot) - o tema deixa o icone laranja. */
.dxbl-btn.dxbl-grid-filter-menu-funnel-btn.dxbl-grid-filter-menu-funnel-btn-filled,
.dxbl-pivot-table .dxbl-btn.dxbl-pivot-table-filter-menu-funnel-btn.dxbl-pivot-table-filter-menu-funnel-btn-filled,
.dxbl-pivot-table-field-list-content .dxbl-btn.dxbl-pivot-table-filter-menu-funnel-btn.dxbl-pivot-table-filter-menu-funnel-btn-filled {
    --dxbl-btn-color: var(--RzDestaque);
    --dxbl-btn-hover-color: var(--RzDestaqueHoverForte);
}

/* ---------- Calendario (RzDateEdit / DxCalendar) ---------- */

.dxbl-calendar {
    --dxbl-calendar-today-border-color: var(--RzDestaque);
    --dxbl-calendar-item-focus-outline-color: var(--RzDestaque);
}

/* O dia selecionado e pintado por um ::before com cor FIXA e opacidade de 20%
   (laranja a 20% = o tom pessego). Mantendo a opacidade, o verde vira verde claro. */
.dxbl-calendar .dxbl-calendar-content .dxbl-calendar-selected-item::before,
.dxbl-calendar:not(.dxbl-disabled):not(:disabled) .dxbl-calendar-content > table > tbody > tr:not(.dxbl-calendar-days-of-week) td:not(.dxbl-calendar-disabled-item):not(.dxbl-calendar-week-number).dxbl-calendar-selected-item:not(.dxbl-disabled):not(:disabled):hover::before,
.dxbl-calendar:not(.dxbl-disabled):not(:disabled) .dxbl-calendar-content > table > tbody > tr:not(.dxbl-calendar-days-of-week) td:not(.dxbl-calendar-disabled-item):not(.dxbl-calendar-week-number).dxbl-calendar-selected-range::before,
.dxbl-calendar:not(.dxbl-disabled):not(:disabled) .dxbl-calendar-content > table > tbody > tr:not(.dxbl-calendar-days-of-week) td:not(.dxbl-calendar-disabled-item):not(.dxbl-calendar-week-number).dxbl-calendar-selected-range:not(.dxbl-disabled):not(:disabled):hover::before {
    background-color: var(--RzDestaque);
}

/* ---------- Checkbox, radio e switch ---------- */

.dxbl-checkbox {
    --dxbl-checkbox-check-element-checked-bg: var(--RzDestaque);
    --dxbl-checkbox-radio-check-bg: var(--RzDestaque);
    --dxbl-checkbox-radio-checked-border-color: var(--RzDestaque);
    --dxbl-checkbox-switch-checked-bg: var(--RzDestaque);
}

.dxbl-treeview {
    --dxbl-treeview-checkbox-checked-hover-bg: var(--RzDestaque);
    --dxbl-treeview-item-focus-outline-color: var(--RzDestaque);
}

/* ---------- Grid, pager e listas ---------- */

.dxbl-grid {
    --dxbl-grid-focus-frame-color: var(--RzDestaque);
}

.dxbl-grid-column-chooser-dialog {
    --dxbl-grid-column-chooser-focus-frame-color: var(--RzDestaque);
}

/* O PAGER NAO ENTRA NO VERDE: por decisao de layout ele usa o azul primario
   (var(--bs-primary)), definido no bloco "Pager" mais acima neste arquivo. Nao
   redefina --dxbl-pager-active-page-btn-bg nem --dxbl-pager-page-btn-hover-bg
   aqui - este bloco vem depois e sobrescreveria aquele azul.
   Abaixo so o hover do botao de pagina ATIVO, onde o tema crava o laranja num
   seletor mais especifico que o .dxbl-pager e por isso escapa daquele bloco. */
.dxbl-pager > .dxbl-btn.dxbl-btn-outline-secondary.dxbl-pager-active-page-btn {
    --dxbl-pager-page-btn-hover-bg: var(--bs-primary);
}

.dxbl-list-box,
.dxbl-list-box-render-container {
    --dxbl-list-box-focus-frame-color: var(--RzDestaque);
}

/* ---------- Navegacao (abas, menus, toolbar, acordeao) ---------- */

.dxbl-tabs {
    --dxbl-tabs-tab-selected-color: var(--RzDestaque);
    --dxbl-tabs-tab-focus-outline-color: var(--RzDestaque);
}

.dxbl-fl {
    --dxbl-fl-tab-group-tab-selected-color: var(--RzDestaque);
}

.dxbl-menu,
.dxbl-menu.dxbl-menu-horizontal {
    --dxbl-menu-item-focus-outline-color: var(--RzDestaque);
}

.dxbl-menu-dropdown {
    --dxbl-menu-dropdown-item-focus-outline-color: var(--RzDestaque);
}

.dxbl-context-menu,
.dxbl-context-menu-submenu {
    --dxbl-context-menu-item-focus-outline-color: var(--RzDestaque);
}

.dxbl-toolbar {
    --dxbl-toolbar-dropdown-btn-focus-outline-color: var(--RzDestaque);
    --dxbl-btn-toolbar-focus-outline-color: var(--RzDestaque);
}

.dxbl-toolbar-dropdown {
    --dxbl-toolbar-dropdown-btn-focus-outline-color: var(--RzDestaque);
}

.dxbl-accordion {
    --dxbl-accordion-focus-outline-color: var(--RzDestaque);
}

.dxbl-edit-dropdown {
    --dxbl-edit-dropdown-btn-focus-outline-color: var(--RzDestaque);
    --dxbl-btn-dropdown-btn-focus-outline-color: var(--RzDestaque);
}

/* ---------- Janelas, avisos e indicadores de carga ---------- */

.dxbl-window {
    --dxbl-window-focus-outline-color: var(--RzDestaque);
}

.dxbl-loading-panel {
    --dxbl-loading-panel-message-color: var(--RzDestaque);
}

.dxbl-wait-indicator {
    --dxbl-wait-indicator-color: var(--RzDestaque);
}

.dxbl-message-box.dxbl-message-box-theme-auto.dxbl-message-box-render-primary,
.dxbl-message-box.dxbl-message-box-theme-dark.dxbl-message-box-render-primary,
.dxbl-message-box.dxbl-message-box-theme-light.dxbl-message-box-render-primary {
    --dxbl-message-box-header-icon-color: var(--RzDestaque);
}

.dxbl-toast-portal .dxbl-toast.dxbl-toast-theme-auto.dxbl-toast-render-primary,
.dxbl-toast-portal .dxbl-toast.dxbl-toast-theme-dark.dxbl-toast-render-primary,
.dxbl-toast-portal .dxbl-toast.dxbl-toast-theme-light.dxbl-toast-render-primary,
.dxbl-toast-portal .dxbl-toast.dxbl-toast-theme-pastel.dxbl-toast-render-primary,
.dxbl-toast-portal .dxbl-toast.dxbl-toast-theme-saturated.dxbl-toast-render-primary {
    --dxbl-toast-accent-line-color: var(--RzDestaque);
    --dxbl-toast-icon-color: var(--RzDestaque);
}

/* No tema "saturated" o toast primary e preenchido inteiro com a cor de destaque. */
.dxbl-toast-portal .dxbl-toast.dxbl-toast-theme-saturated.dxbl-toast-render-primary {
    --dxbl-toast-background-color: var(--RzDestaque);
}

.dxbl-progress-bar {
    --dxbl-progress-bar-indicator-color: var(--RzDestaque);
    --dxbl-progress-bar-track-color: var(--RzDestaque);
}

/* Cor de destaque do scheduler. A --dxbl-scheduler-orange-color NAO entra aqui de
   proposito: ela e a opcao de cor "laranja" da paleta de compromissos (uma escolha
   explicita de quem usa o componente), e nao a cor de destaque do tema. */
.dxbl-scheduler-color {
    --dxbl-scheduler-primary-color: var(--RzDestaque);
}

/* ---------- Demais componentes DevExpress ---------- */

.dxbl-carousel {
    --dxbl-carousel-button-icon-color-hover: var(--RzDestaque);
    --dxbl-carousel-focus-outline-color: var(--RzDestaque);
    --dxbl-carousel-page-active-background-color: var(--RzDestaque);
}

.dxbl-color-palette {
    --dxbl-color-palette-color-tile-outline-selected-color: var(--RzDestaque);
}

.dxbl-chart-root {
    --dxbl-chart-focus-outline-color: var(--RzDestaque);
}

.dxbl-chatui-root {
    --dx-chatui-empty-icon-color: var(--RzDestaque);
}

.dxbl-html-editor,
.dx-popup-wrapper.dx-suggestion-list-wrapper {
    --dxbl-html-editor-primary-color: var(--RzDestaque);
}

.dxreRoot {
    --dxre-primary-color: var(--RzDestaque);
}

.dxbrv-wrapper {
    --dxbrv-primary-color: var(--RzDestaque);
}

dxbl-range-selector {
    --dxbl-range-selector-selected-range-color: var(--RzDestaque);
    --dxbl-range-selector-slider-handle-color: var(--RzDestaque);
    --dxbl-range-selector-slider-marker-color: var(--RzDestaque);
}

.dxbl-splitter {
    --dxbl-splitter-separator-active-bg: var(--RzDestaque);
    --dxbl-splitter-separator-focused-bg: var(--RzDestaque);
}

.dxbl-roller {
    --dxbl-roller-item-focus-outline-color: var(--RzDestaque);
}

/* ============================================================================
   CORES FIXAS (::before) - grid, list-box e menu de contexto

   Estes realces nao passam por variavel: o tema pinta um pseudo-elemento
   ::before com a cor CRAVADA no CSS mais uma opacidade (ex.: laranja a 20% =
   o tom pessego do dia selecionado no calendario). So da para corrigir
   repetindo o seletor e trocando o background-color - a opacidade continua
   vindo do tema, entao o verde fica no mesmo tom claro/escuro que o laranja era.

   Os seletores sao copiados IDENTICOS aos do tema de proposito. Eles usam muitos
   :not(), e cada :not() soma especificidade; encurtar o seletor faria a regra
   perder para a do tema. Como este arquivo carrega depois, empatar basta.

   COBERTURA CONHECIDA: ficaram de fora as variantes ".dxSafari ..." destes mesmos
   realces (o DevExpress emite regras separadas para Safari, usando td em vez de
   li). Em Safari/iOS esses pontos seguem laranja. Para trata-las, procure
   "dxSafari" junto de #fe7109 no office-white.bs4.min.css.
   ============================================================================ */

/* Linha focada / selecionada do grid. */
.dxbl-grid .dxbl-grid-table .dxbl-grid-focused-row.dxbl-grid-selected-row:not(.dxbl-grid-touch-selection):not(.dxbl-grid-touch-selection-edge) > td:not(.dxbl-grid-empty-cell):not(.dxbl-grid-indent-cell)::before,
.dxbl-grid .dxbl-grid-table .dxbl-grid-focused-row:not(.dxbl-grid-touch-selection):not(.dxbl-grid-touch-selection-edge) > td:not(.dxbl-grid-empty-cell):not(.dxbl-grid-indent-cell)::before,
.dxbl-grid-table.dxbl-grid-row-hover-enabled > tbody > tr.dxbl-grid-focused-row:not(.dxbl-grid-group-row):not(.dxbl-grid-group-footer-row):not(.dxbl-grid-edit-row):not(.dxbl-grid-empty-row):hover > td:not(.dxbl-grid-edit-form):not(.dxbl-grid-indent-cell):not(.dxbl-grid-detail-cell):not(.dxbl-grid-empty-data-area):not(.dxbl-grid-empty-cell)::before {
    background-color: var(--RzDestaque);
}

/* Texto "carregando" do grid vazio. */
.dxbl-grid .dxbl-grid-empty-data-area span.dxbl-grid-empty-data-loading {
    color: var(--RzDestaque);
}

/* Item ativo do menu de contexto. */
.dxbl-context-menu-submenu.dxbl-context-menu-dropdown > .dxbl-dropdown-body ul li:not(.dxbl-context-menu-separator) > .dxbl-context-menu-item:not(.dxbl-disabled):not(:disabled):active::before,
.dxbl-context-menu.dxbl-context-menu-dropdown > .dxbl-dropdown-body ul li:not(.dxbl-context-menu-separator) > .dxbl-context-menu-item:not(.dxbl-disabled):not(:disabled):active::before {
    background-color: var(--RzDestaque);
}

/* Item selecionado do list-box - e o realce do RzComboBox, RzTagbox e RzLookup. */
.dxbl-list-box-render-container:not(.dxbl-disabled):not(:disabled):not(.dxbl-readonly):not(.dxbl-list-box-multi-select):not([data-dx-focus-hidden]) > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > :not(.dxbl-list-box-empty-data-container) > li:not(.dxbl-list-box-item-disabled):not(.dxbl-list-box-group-item):not([dxbl-top-virtual-spacer-element]):not([dxbl-bottom-virtual-spacer-element]):hover.dxbl-list-box-item-selected:hover:not(.dxbl-list-box-item-focused):not(:focus)::before,
.dxbl-list-box-render-container:not(.dxbl-disabled):not(:disabled):not(.dxbl-readonly):not(.dxbl-list-box-multi-select)[data-dx-focus-hidden] > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > :not(.dxbl-list-box-empty-data-container) > li:not(.dxbl-list-box-item-disabled):not(.dxbl-list-box-group-item):not([dxbl-top-virtual-spacer-element]):not([dxbl-bottom-virtual-spacer-element]).dxbl-list-box-item-selected:hover::before,
.dxbl-list-box-render-container:not([data-dx-focus-hidden]):not(.dxbl-list-box-multi-select) > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li.dxbl-list-box-item-selected.dxbl-list-box-item-disabled::before,
.dxbl-list-box-render-container:not([data-dx-focus-hidden]):not(.dxbl-list-box-multi-select) > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li.dxbl-list-box-item-selected.dxbl-list-box-item-focused::before,
.dxbl-list-box-render-container:not([data-dx-focus-hidden]):not(.dxbl-list-box-multi-select) > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li.dxbl-list-box-item-selected:focus::before,
.dxbl-list-box-render-container:not([data-dx-focus-hidden]):not(.dxbl-list-box-multi-select) > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li.dxbl-list-box-item-selected:not(.dxbl-list-box-item-disabled)::before,
.dxbl-list-box-render-container > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li.dxbl-list-box-item-selected.dxbl-list-box-item-disabled::before,
.dxbl-list-box-render-container > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li.dxbl-list-box-item-selected:not(.dxbl-list-box-item-disabled)::before,
.dxbl-list-box:not(.dxbl-disabled):not(:disabled):not(.dxbl-readonly):not(.dxbl-list-box-multi-select):not([data-dx-focus-hidden]) > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > :not(.dxbl-list-box-empty-data-container) > li:not(.dxbl-list-box-item-disabled):not(.dxbl-list-box-group-item):not([dxbl-top-virtual-spacer-element]):not([dxbl-bottom-virtual-spacer-element]):hover.dxbl-list-box-item-selected:hover:not(.dxbl-list-box-item-focused):not(:focus)::before,
.dxbl-list-box:not(.dxbl-disabled):not(:disabled):not(.dxbl-readonly):not(.dxbl-list-box-multi-select)[data-dx-focus-hidden] > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > :not(.dxbl-list-box-empty-data-container) > li:not(.dxbl-list-box-item-disabled):not(.dxbl-list-box-group-item):not([dxbl-top-virtual-spacer-element]):not([dxbl-bottom-virtual-spacer-element]).dxbl-list-box-item-selected:hover::before,
.dxbl-list-box:not([data-dx-focus-hidden]):not(.dxbl-list-box-multi-select) > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li.dxbl-list-box-item-selected.dxbl-list-box-item-disabled::before,
.dxbl-list-box:not([data-dx-focus-hidden]):not(.dxbl-list-box-multi-select) > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li.dxbl-list-box-item-selected.dxbl-list-box-item-focused::before,
.dxbl-list-box:not([data-dx-focus-hidden]):not(.dxbl-list-box-multi-select) > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li.dxbl-list-box-item-selected:focus::before,
.dxbl-list-box:not([data-dx-focus-hidden]):not(.dxbl-list-box-multi-select) > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li.dxbl-list-box-item-selected:not(.dxbl-list-box-item-disabled)::before,
.dxbl-list-box > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li.dxbl-list-box-item-selected.dxbl-list-box-item-disabled::before,
.dxbl-list-box > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li.dxbl-list-box-item-selected:not(.dxbl-list-box-item-disabled)::before {
    background-color: var(--RzDestaque);
}

/* ---------- Botoes Bootstrap que o tema repintou de laranja ----------
   O bloco mais acima neste arquivo ("Botao Bootstrap primary") ja tratava
   hover/focus/active, mas o tema tambem pinta o estado NORMAL e o desabilitado
   de laranja (.btn-primary{background-color:#fe7109}), que ficavam de fora. */

.btn-primary {
    color: var(--RzTextoSobreDestaque);
    background-color: var(--RzDestaque);
    border-color: var(--RzDestaque);
}

.btn-primary.disabled,
.btn-primary:disabled {
    color: var(--RzTextoSobreDestaque);
    background-color: var(--RzDestaque);
    border-color: var(--RzDestaque);
}

.btn-outline-primary {
    color: var(--RzDestaque);
    border-color: var(--RzDestaque);
}

.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
    color: var(--RzDestaque);
}

.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active {
    color: var(--RzTextoSobreDestaque);
    background-color: var(--RzDestaque);
    border-color: var(--RzDestaque);
}

/* ---------- Utilitarios do Bootstrap que o tema repintou de laranja ---------- */

.bg-primary {
    background-color: var(--RzDestaque) !important;
}

.border-primary {
    border-color: var(--RzDestaque) !important;
}

.badge-primary {
    background-color: var(--RzDestaque);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--RzDestaque);
}

.custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
    background-color: var(--RzDestaque);
    border-color: var(--RzDestaque);
}

.custom-range::-webkit-slider-thumb {
    background-color: var(--RzDestaque);
}

.custom-range::-moz-range-thumb {
    background-color: var(--RzDestaque);
}

.custom-range::-ms-thumb {
    background-color: var(--RzDestaque);
}

.custom-select > option:checked,
select.form-control > option:checked {
    background-color: var(--RzDestaque);
}

/* Borda de foco de TODO input/select do Bootstrap - o tema office-white.bs4 usa laranja aqui.

   O !important e OBRIGATORIO: o tema declara ".form-control:focus{border-color:#fe7109!important}",
   entao uma regra normal perde dele por mais tarde que venha na ordem de carregamento. E o mesmo
   motivo pelo qual .bg-primary, .border-primary e .text-primary, logo acima neste arquivo, tambem
   usam !important.

   Nao ha box-shadow aqui de proposito: o tema zera o brilho do foco (box-shadow:none), e a correcao
   e so trocar a cor da borda, sem inventar um realce que o sistema nao tinha. */
.form-control:focus,
.form-select:focus,
.custom-select:focus,
select.form-control:focus,
select.form-select:focus {
    border-color: var(--RzDestaqueBordaFoco) !important;
}

.text-primary {
    color: var(--RzDestaque) !important;
}

/* Abas, pills, paginacao e list-group do Bootstrap. */
.list-group-item.active {
    background-color: var(--RzDestaque);
    border-color: var(--RzDestaque);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--RzDestaque);
}

.page-item.active .page-link {
    background-color: var(--RzDestaque);
    border-color: var(--RzDestaque);
}

.show > .btn-outline-primary.dropdown-toggle {
    color: var(--RzTextoSobreDestaque);
    background-color: var(--RzDestaque);
    border-color: var(--RzDestaque);
}

/* ---------- Realces restantes do DevExpress ---------- */

/* DxListBox (dxbl-listbox) - e um componente diferente do list-box do combo/lookup. */
.dxbl-listbox div.dxbl-listbox-item-selected::before,
.dxbl-listbox tr.dxbl-listbox-item-selected > td::before {
    background-color: var(--RzDestaque);
}

/* Separador de colunas e indicador de destino ao arrastar coluna no grid. */
.dxbl-grid .dxbl-grid-columns-separator:not(.dxbl-disabled):not(:disabled).dxbl-active,
.dxbl-grid .dxbl-grid-drop-target-indicator:not(.dxbl-disabled):not(:disabled).dxbl-active {
    background-color: var(--RzDestaque);
}

/* Linha em edicao no proprio grid (o tema pinta com opacidade bem baixa). */
.dxbl-grid .dxbl-grid-table > tbody > tr.dxbl-grid-edit-row.dxbl-grid-editor-inplace-container > td:not(.dxbl-grid-empty-cell):not(.dxbl-grid-indent-cell)::before,
.dxbl-grid .dxbl-grid-table > tfoot > tr.dxbl-grid-edit-row.dxbl-grid-editor-inplace-container > td:not(.dxbl-grid-empty-cell):not(.dxbl-grid-indent-cell)::before,
.dxbl-grid .dxbl-grid-table > thead > tr.dxbl-grid-edit-row.dxbl-grid-editor-inplace-container > td:not(.dxbl-grid-empty-cell):not(.dxbl-grid-indent-cell)::before {
    background-color: var(--RzDestaque);
}

/* Celula selecionada do seletor de cor. */
.dxbl-blazor-colorpicker-cell.dxbl-blazor-colorpicker-selected-color,
.dxbl-blazor-colorpicker-cell:hover {
    border-color: var(--RzDestaque);
}



/* ==========================================================================
   Colunas do Bootstrap: position: relative
   --------------------------------------------------------------------------
   O Bootstrap 4 dava position:relative a TODA coluna (.col, .col-*); o Bootstrap 5
   removeu essa propriedade. O tema office-white.bs4.min.css do DevExpress era bs4 e
   reintroduzia a regra — por isso dezenas de telas posicionam com bottom/top/left/right
   inline dentro de colunas e funcionavam.
   Ao remover o DevExpress (31/08/2026) as colunas viraram static e os 99 deslocamentos
   espalhados por 34 arquivos pararam de valer DE UMA VEZ. O sintoma visivel foi o titulo
   da barra superior descer e cortar, mas o efeito era geral.
   Esta regra devolve APENAS essa propriedade, sem trazer o tema de volta — e o que
   restaura o layout anterior em todas as telas com uma linha, em vez de reescrever os 34.

   Exclusao de "col-justify-*" (04/09/2026): o QuickGrid nativo nomeia a classe de alinhamento
   de cada <td> como "col-justify-start"/"col-justify-center"/"col-justify-end", que tambem
   comeca com "col-" e caia neste seletor por acidente. Isso dava position:relative ao <td>
   da coluna de alternar do RzQuickGridComDetalhe/RzQuickGridComGrupo, que passava a ser o
   ancestral posicionado mais proximo do painel (position:absolute; inset:0) no lugar do <tr> —
   o painel de detalhe/cabecalho de grupo ficava confinado a largura estreita daquela
   coluna (as vezes 0), em vez de cobrir a linha inteira (ver comentario da secao
   "RzQuickGridComDetalhe" mais acima). Confirmado com o componente real via Playwright
   (grade de itens do pedido, RzErpWeb): o painel media a largura da coluna do botao (40px)
   em vez da linha inteira (1376px) ate esta exclusao entrar.
   ========================================================================== */
.col,
[class^="col-"]:not(.col-form-label):not([class*="col-justify-"]),
[class*=" col-"]:not(.col-form-label):not([class*="col-justify-"]) {
    position: relative;
}


/* ==========================================================================
   Tamanho base da fonte
   --------------------------------------------------------------------------
   CAUSA RAIZ da quebra visual apos a remocao do DevExpress (31/08/2026).
   O tema office-white.bs4.min.css nao era so cosmetico: ele redefinia
   body { font-size: .88rem }, ou seja, ENCOLHIA a fonte base de todo o sistema
   em 12% em relacao ao Bootstrap 5 (--bs-body-font-size: 1rem).
   Ao remover o tema, TODO texto de TODA tela passou a renderizar ~14% maior.
   O sintoma mais visivel foi a barra superior: o titulo deixou de caber na
   altura de 48px e o icone do menu (fa-3x = 3em) saltou de ~42px para 48px.
   Mas o efeito era global, nao da barra — por isso remendar a navbar nao
   resolvia.
   Esta regra devolve so o tamanho base. O font-family do tema comecava por
   "Segoe UI", que no Windows e o que o system-ui do Bootstrap 5 ja resolve,
   entao nao precisa ser replicado.
   ========================================================================== */
body {
    font-size: .88rem;
}


/* ==========================================================================
   Altura e fonte do .form-control
   --------------------------------------------------------------------------
   Segunda peca da quebra visual pos-remocao do DevExpress (31/08/2026).
   O tema office-white.bs4.min.css era Bootstrap 4, e o bs4 define ALTURA
   EXPLICITA para o campo:
       .form-control { height: calc(1.5em + .75rem + 2px); padding: .375rem .6rem; font-size: .88rem }
   O Bootstrap 5 removeu a altura explicita e mantem font-size 1rem no campo
   (o --bs-body-font-size nao alcanca o .form-control). Resultado: os campos
   ficaram mais altos e com texto maior do que quando foram desenhados.
   Isso quebra tudo que posiciona por cima do campo com offset em pixel — o caso
   visivel foi o RzTextBoxPassword, cujos icones (chave, olho, ajuda) usam
   position:absolute com top/right calibrados para a altura antiga e passaram a
   cair embaixo do campo, por cima do texto de forca da senha.
   Restaurar a regra original conserta a causa, em vez de recalibrar cada offset.
   ========================================================================== */
.form-control {
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .6rem;
    font-size: .88rem;
}

/* textarea/select multiplo nao podem ter altura fixa de uma linha. */
textarea.form-control,
select.form-control[multiple],
select.form-control[size]:not([size="1"]) {
    height: auto;
}

/* As variantes de tamanho PRECISAM vir junto: a regra .form-control acima carrega depois do
   Bootstrap e tem a mesma especificidade que .form-control-sm/-lg, entao sem isto ela roubaria
   a altura das duas. E nao e detalhe: sao 612 usos de -sm e 592 de -lg no ecossistema.
   Valores identicos aos do tema bs4 que saiu. */
.form-control-sm {
    height: calc(1.5em + .5rem + 2px);
    padding: .25rem .5rem;
    font-size: .77rem;
    line-height: 1.5;
}

.form-control-lg {
    height: calc(1.5em + 1rem + 2px);
    padding: .5rem 1rem;
    font-size: 1.1rem;
    line-height: 1.5;
}

textarea.form-control-sm,
textarea.form-control-lg {
    height: auto;
}

hr.margin-row {
    border: none;
}

#menuIcon {
    top: 15%;
    left: 5%;
}

.btn-success {
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .2);
}

.btn-secondary:hover {
    color: var(--RzBtnSecondaryHoverColor);
    background-color: var(--RzBtnSecondaryHoverBg);
    border-color: var(--RzBtnSecondaryHoverBorderColor);
}

.list-group-item {
    padding: .65rem 1.25rem;
}

/* ============================================================================
   NUCLEO COMPARTILHADO — classes aplicadas por componentes desta lib (RzModal, RzMsg, RzToast,
   RzButton, RzLayoutColumn, RzTextBoxPassword, RzFiltros e a barra superior) que NAO cabem em CSS
   isolado, porque quem aplica a classe e o markup do aplicativo ou codigo C#, fora do alcance do
   atributo [b-xxxxx].
   ============================================================================ */

/* ---------- Botoes de dialogo (RzMsg / RzToast passam estas classes ao RzButton) ---------- */

.CSSForButtonCopiar,
.CSSForButtonNo {
    border-radius: 5px;
    border: none;
    color: var(--RzBlack);
    background-color: var(--RzButtonCopyBg);
    margin-top: .5rem !important;
    padding: .5rem 1rem;
    font-size: 1.1rem;
    line-height: 1.5;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    --bs-btn-color: var(--RzWhite);
    --bs-btn-bg: var(--RzBtnSecondaryGrayBg);
    --bs-btn-border-color: var(--RzBtnSecondaryGrayBg);
    --bs-btn-hover-color: var(--RzWhite);
    --bs-btn-hover-bg: var(--RzBtnSecondaryGrayHoverBg);
    --bs-btn-hover-border-color: var(--RzBtnSecondaryGrayActiveBg);
    --bs-btn-focus-shadow-rgb: 130,138,145;
    --bs-btn-active-color: var(--RzWhite);
    --bs-btn-active-bg: var(--RzBtnSecondaryGrayActiveBg);
    --bs-btn-active-border-color: var(--RzBtnSecondaryGrayActiveBorderColor);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--RzWhite);
    --bs-btn-disabled-bg: var(--RzBtnSecondaryGrayBg);
    --bs-btn-disabled-border-color: var(--RzBtnSecondaryGrayBg);
}

.CSSForButtonAvisoOK {
    width: 106px;
    border-radius: 5px;
    border: none;
    box-shadow: 0 1px 4px 0 rgba(0,0,0,.2);
    color: var(--RzWhite);
    background-color: var(--RzBtnAvisoOkBg);
    margin-top: .5rem !important;
    padding: .5rem 1rem;
    font-size: 1.1rem;
    line-height: 1.5;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    --bs-btn-color: var(--RzWhite);
    --bs-btn-bg: var(--RzBtnSuccessBg);
    --bs-btn-border-color: var(--RzBtnSuccessBg);
    --bs-btn-hover-color: var(--RzWhite);
    --bs-btn-hover-bg: var(--RzBtnSuccessHoverBg);
    --bs-btn-hover-border-color: var(--RzBtnSuccessHoverBorderColor);
    --bs-btn-focus-shadow-rgb: 60,153,110;
    --bs-btn-active-color: var(--RzWhite);
    --bs-btn-active-bg: var(--RzBtnSuccessActiveBg);
    --bs-btn-active-border-color: var(--RzBtnSuccessActiveBorderColor);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--RzWhite);
    --bs-btn-disabled-bg: var(--RzBtnSuccessBg);
    --bs-btn-disabled-border-color: var(--RzBtnSuccessBg);
}

.CSSForButtonCopiar:not(:disabled):not(.disabled),
.CSSForButtonNo:not(:disabled):not(.disabled),
.CSSForButtonAvisoOK:not(:disabled):not(.disabled) {
    cursor: pointer;
}

.CSSForButtonAvisoOK:active {
    color: var(--RzWhite);
    background-color: var(--RzBtnAvisoOkActiveBg);
    border-color: var(--RzBtnAvisoOkActiveBorderColor);
}

/* ---------- Cabecalho e corpo de dialogo (parametros CSSFor* do RzModal/RzMsg) ---------- */

.CSSForHeader {
    background-color: var(--RzModalHeaderBg);
    color: var(--RzModalHeaderIcon);
}

.CSSForTitle {
    color: var(--RzWhite) !important;
}

.modal-title {
    color: var(--RzModalHeaderTitle) !important;
}

.modal-content {
    border: 0 !important;
}

.cssformodal {
    border-radius: 15px !important;
}

.CSSForAlertWarningContentModal,
.text-aligne {
    text-align: center;
    padding-top: 30px;
    background-color: unset !important;
    font-size: 17px;
}

.CSSForAlertWarningContentModal {
    padding-bottom: 30px;
}

.no-padding {
    padding: 0;
}

/* Precisa ser GLOBAL, e nao morar no RzLayoutColumn.razor.css. Em 09/09/2026 ela foi consolidada la
   por engano, com a justificativa de que so o RzLayoutColumn aplicava a classe — mas o AppBar de 14
   aplicativos tambem aplica, e o AppBar mora no Client de cada app, nao nesta lib. CSS isolado so
   alcanca o que o proprio componente renderiza, entao a regra deixou de valer na barra superior e a
   coluna do usuario voltou a herdar o padding de gutter do Bootstrap. Enquanto o AppBar nao for
   promovido para a lib, este e o unico lugar que alcanca os dois usos. */
.remove-padding {
    padding: 0 !important;
}

/* ---------- Barra de filtros (RzFiltros_Novo) ---------- */

.btn-extra-filters {
    height: 35px;
    max-height: 52px;
    margin-top: 0 !important;
    z-index: 4;
    margin-left: 6px;
    font-size: 0.88rem;
    width: 135px;
    color: var(--RzBtnFilterColor) !important;
    background-color: var(--RzBtnFilterBg) !important;
    border-color: var(--RzBtnFilterBg) !important;
    border: none;
    border-radius: 5px;
    padding: 0px;
    padding-top: 2px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .2);
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
}

    .btn-extra-filters:hover {
        background-color: var(--RzBtnFilterHoverBg) !important;
        border-color: var(--RzBtnFilterHoverBg) !important;
    }

@media (max-width: 1080px) {
    .btn-extra-filters {
        height: 32px;
        width: 120px;
    }
}

@media (max-width: 800px) {
    .btn-extra-filters {
        width: 30px;
    }

    .align-icon {
        display: flex;
        justify-content: center;
    }

    .hidden-btn-Text {
        display: none !important;
    }

    .hidden-btn-icon {
        display: none !important;
    }
}

.width-caption {
    width: 190px;
}

.align-caption {
    margin-left: 0 !important;
    padding-left: 8px;
}

/* Corrigido em 09/09/2026: faltava o PONTO em dxbl-calendar-table-container, entao o seletor casava uma
   TAG inexistente e a regra estava morta nos 17 apps que a traziam. Ao passar a valer, o numero da
   semana some dos calendarios que usam a classe — que e o comportamento que o nome dela promete. */
.hide-week-number .dxbl-calendar-table-container table tr td:first-child {
    opacity: 0 !important;
}

/* ---------- Login (RzLoginPage / EsqueciMinhaSenha / RedefinirSenha) ---------- */

.custom-senha-login {
    height: 45px !important;
}

/* Olho do campo de senha das telas de login: centralizado na ALTURA do campo, que aqui tem 45px
   (.custom-senha-login). Antes era zoom: 1.5 + top: 28px — e o zoom multiplica TAMBEM o top, então o olho
   ficava em ~42px, abaixo do texto digitado (visto no login do VmCommerce em 12/09/2026, e o mesmo par de
   regras vale para o RzLoginPage de todos os apps). É a mesma troca que o RzTextBoxPassword.razor.css já fez
   em 01/09/2026 para o campo de 35px: tamanho por font-size e centro por translateY(-50%). */
.eye-custom-class {
    zoom: normal !important;
    font-size: 1.4rem;
    position: absolute;
    top: 22.5px !important;
    right: 16px !important;
    transform: translateY(-50%) !important;
}

.btn-login .btn {
    background-color: var(--RzBtnSubmitBg) !important;
    color: var(--RzBtnSubmitColor) !important;
    border-color: var(--RzBtnSubmitBg) !important;
}

.login .btn-back {
    display: block;
    width: fit-content;
    margin: 0 auto;
}

/* Font-size de 18px nos inputs em telas pequenas evita o zoom automatico do iOS ao focar o campo. */
@media only screen and (max-width: 768px) {
    .Inputs-font-size {
        font-size: 18px !important;
    }
}

/* ---------- Barra superior: avatar e nome do usuario ---------- */
/* Fica aqui, e nao no .razor.css do RzAppBar, porque as mesmas classes sao usadas pelas barras
   proprias de alguns aplicativos (CentralSuporte, VmCommerce, VmCRepreOffline): CSS isolado so
   alcancaria o que o RzAppBar desenha. */

.icon-user-header {
    max-width: 35px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: var(--RzIconUserColor) 2px solid;
    color: var(--RzIconUserColor);
    font-size: 18px;
    margin-right: 0;
}

/* Folga de 4px entre o avatar e a borda direita da barra. O prefixo .navbar (2 classes, sem
   !important) é o que vence o .fa-user do rz-top-navbar.css, carregado depois. */
.navbar .icon-user-header {
    font-size: 18px;
    margin-right: 4px;
}

.nome-user-header {
    color: var(--RzNameUserColor);
    margin-right: 5px;
    padding-top: 4px;
    font-size: medium;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* Nome do usuario e titulo ficam dentro da propria coluna: o que nao couber termina em reticencias, em
   uma linha so, para um nao passar por cima do outro em tela estreita nem descer para fora da barra.
   O titulo so e limitado dentro da .navbar — .titlePag/.titleText tambem sao titulo de conteudo em
   telas de configuracao, que devem poder quebrar. */
.nome-user-header {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
}

.nome-user-header p {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navbar .titlePag .titleText {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mesma folga de 4px do avatar sem foto: a barra fica igual com e sem imagem de usuario. */
.icon-user-img {
    object-fit: cover;
    width: 35px !important;
    height: 35px !important;
    border-radius: 50%;
    border: var(--RzMainLayoutColorTitlePag) 2px solid;
    margin-right: 4px;
}

/* Desfaz a margem negativa de gutter que o .row do Bootstrap deixa a direita, para o bloco do usuario
   (nome + avatar) parar onde a barra termina. A compensacao fica no container do avatar, e nao na
   coluna: o container e o ultimo item de um flex com justify-content:end, entao a margem move o grupo
   inteiro; a coluna varia de um aplicativo para outro, o container nao. Nao use position:relative aqui
   — ativaria o `bottom: 13px` inline que a barra do CentralSuporte tem nessa coluna. */
.icon-user-container {
    padding-left: 2%;
    margin-right: calc(var(--bs-gutter-x, 1.5rem) * -.5);
}

/* ---------- Outros ---------- */

.custom-accordion-body {
    padding: 0 !important;
}