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

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

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

.table {
    color: var(--text-color-l) !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);*/
}

button, a {
    cursor: pointer;
}

[disabled],
[readonly],
.form-control:disabled,
.form-control[readonly] {
    opacity: 0.6;
    cursor: not-allowed !important;
    background: #eee !important;
}


/*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: #fe7109;
    color: white;
    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;
}