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

:root {
    --vh: 1vh;
}

body {
    background: var(--RzPageBackground) !important;
    -webkit-font-smoothing: antialiased !important;
    color: var(--RzLabel);
    min-height: 100vh; /* Every page should occupy at minimum 100% of the device's height. */
    padding-bottom: 20vh; /* Extra space for virtual keyboard */
}

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

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

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

h1, h2, h3, h4, h5, h6, strong {
    color: #fe7109;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-style: italic;
    text-align: center;
    font-weight: 500;
    /*color: var(--text-title-color-d);*/
}

/* Fazer o link 'Reconectar' do overlay branco quando é perdida a conexão ao rodar em Blazor Server ser mais destacado 
   em relação ao resto do texto. */
#components-reconnect-modal h5 a {
    color: #FF0000; /* CSS link color */
}

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: #f3f2f1 !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);
}

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

/* 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: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
}

body::-webkit-scrollbar-thumb {
    background-color: #bbb;
    border-radius: 10px;
}

    body::-webkit-scrollbar-thumb:hover {
        background: #999;
        cursor: pointer;
    }

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

div::-webkit-scrollbar-track {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
}

div::-webkit-scrollbar-thumb {
    background-color: #bbb;
    border-radius: 10px;
}

    div::-webkit-scrollbar-thumb:hover {
        background: #999;
        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: white !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 #f4700c;
    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: #ff6600;
    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: #000000ff;
}

/*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. */
.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: #1E1E1E !important;
    color: #fff !important;
    cursor: pointer !important;
    border-radius: 12px !important;
    margin: 15px !important;
    text-align: center !important;
}

    .botao-de-relatorio:hover {
        background-color: #cecece !important;
        color: black !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: #F8D775 !important;
    color: black !important;
}

    .botao-de-relatorio-folder:hover {
        background-color: #FFE9A2 !important;
        color: black !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: rgb(232, 17, 35);
    --dxbl-btn-color: #f6f7f8;
    --dxbl-btn-hover-bg: #f9fafb;
    --dxbl-btn-hover-color: #e81123;
    font-size: 1.2rem;
    border-radius: 0.7rem !important;
}

.dxbl-btn-danger {
    --dxbl-btn-bg: #e0e0e0;
    --dxbl-btn-border-color: #f8f9fa;
    --dxbl-btn-color: #000000ff;
    --dxbl-btn-active-border-color: #f9fafb;
    --dxbl-btn-hover-bg: #fe7109;
    --dxbl-btn-hover-color: #f8f9fa;
    --dxbl-btn-hover-border-color: #f9fafb;
    --dxbl-btn-disabled-bg: #fbfbfc;
    --dxbl-btn-disabled-color: #000;
    font-size: 1.2rem;
    border-radius: 0.7rem !important;
}

.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: rgb(232, 17, 35);
        --dxbl-btn-color: #f6f7f8;
        --dxbl-btn-hover-bg: #f9fafb;
        --dxbl-btn-hover-color: #e81123;
        font-size: 1rem;
        border-radius: 0.7rem !important;
    }

    .dxbl-btn-danger {
        --dxbl-btn-bg: #e0e0e0;
        --dxbl-btn-border-color: #f8f9fa;
        --dxbl-btn-color: #000000ff;
        --dxbl-btn-active-border-color: #f9fafb;
        --dxbl-btn-hover-bg: #fe7109;
        --dxbl-btn-hover-color: #f8f9fa;
        --dxbl-btn-hover-border-color: #f9fafb;
        --dxbl-btn-disabled-bg: #fbfbfc;
        --dxbl-btn-disabled-color: #000;
        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: #fe7109;
    color: white;
    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);
}

.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);
}

.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: #212529 !important;
        background-color: #f2f2f2 !important;
        border-color: #f2f2f2 !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;
}