@font-face {
    font-family: 'Nimbus Sans L';
    src: url(../fonts/NimbusSanL/NimbusSanL-Reg.woff);
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Nimbus Sans L';
    src: url(../fonts/NimbusSanL/NimbusSanL-Bol.woff);
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Nimbus Sans L';
    src: url(../fonts/NimbusSanL/NimbusSanL-RegIta.woff);
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'Nimbus Sans L';
    src: url(../fonts/NimbusSanL/NimbusSanL-BolIta.woff);
    font-weight: bold;
    font-style: italic;
}


:root
{
    --window-background: #f7f7f4;
    --border-background: #e5e3dc;
    --border-brush: #766f57;
    --cor-barra-titulo-1: #0CCBF5;
    --cor-barra-titulo-2: #0034af;
    --cor-text-hover: #6B4591;
    --cor-item-ativo: #575b75;
    --cor-item-hover: #b9bbcb;
    --cor-item-hover-texto: black;
    --cor-item-selecionado: #40358b;
    --cor-item-selecionado-texto: white;
    
    --default-font-size: 14px;

    --accent-fill-rest: #766f57 !important;
    --accent-fill-hover: transparent !important;
    --accent-fill-active: transparent !important;
    --accent-fill-focus: transparent !important;
    
}

*
{
    font-family: 'Nimbus Sans L', Verdana, Tahoma, Arial, Helvetica, sans-serif !important;
    font-style: normal; /* italic */
    font-weight: normal; /* bold */
    font-variant: normal; /* small-caps */
    font-size: var(--default-font-size);
    /* PADDING PADRÃO */
    /* padding-top: 2pt;
    padding-left: 4pt;
    padding-bottom: 2pt;
    padding-right: 2pt;
    margin-left: 4pt;
    margin-top: 2pt;
    margin-right: 4pt;
    margin-bottom: 2pt; */
}

html
{
    scrollbar-width: auto;
}

body
{
    scrollbar-width: auto;
    overflow: hidden;
}

/* ============================================ TEMA ======================================= */
.w3-theme-l5 {
    color: #000 !important;
    background-color: #fefefe !important
}

.w3-theme-l4 {
    color: #000 !important;
    background-color: #fdfdfd !important
}

.w3-theme-l3 {
    color: #000 !important;
    background-color: #fcfcfa !important
}

.w3-theme-l2 {
    color: #000 !important;
    background-color: #fafaf8 !important
}

.w3-theme-l1 {
    color: #000 !important;
    background-color: #f8f8f6 !important
}

.w3-theme-d1 {
    color: #000 !important;
    background-color: #e2e2d7 !important
}

.w3-theme-d2 {
    color: #000 !important;
    background-color: #cdcdba !important
}

.w3-theme-d3 {
    color: #000 !important;
    background-color: #b9b99e !important
}

.w3-theme-d4 {
    color: #fff !important;
    background-color: #a4a482 !important
}

.w3-theme-d5 {
    color: #fff !important;
    background-color: #8e8e67 !important
}

.w3-theme-light {
    color: #000 !important;
    background-color: #fefefe !important
}

.w3-theme-dark {
    color: #fff !important;
    background-color: #8e8e67 !important
}

.w3-theme-action {
    color: #fff !important;
    background-color: #8e8e67 !important
}

.w3-theme {
    color: #000 !important;
    background-color: #f7f7f4 !important
}

.w3-text-theme {
    color: #f7f7f4 !important
}

.w3-border-theme {
    border-color: #f7f7f4 !important
}

.w3-hover-theme:hover {
    color: #000 !important;
    background-color: #f7f7f4 !important
}

.w3-hover-text-theme:hover {
    color: #f7f7f4 !important
}

.w3-hover-border-theme:hover {
    border-color: #f7f7f4 !important
}


/* ============================================ LAYOUTS ======================================= */
.stack-layout
{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items:stretch;
    flex-wrap: wrap;
    border: 0px none;
}

.stack-layout-center
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    border: 0px none;
}

.list-stack-layout
{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items:stretch;
    flex-wrap: wrap;
    border: 0px none;
    background-color: white;
}

.flow-layout
{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
    border: 0px none;
    /*margin: 8px 8px 0px 0px;*/
}

.flow-layout-start
{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    border: 0px none;
    /*margin: 8px 8px 0px 0px;*/
}

.grid-layout-3c
{
    display: grid;
    grid-template-columns: 0.43fr 0.14fr 0.43fr;
}

.view-grid-container
{
    display: grid;
    grid-template-columns:150px 1fr;
    height: 100%;
    position: relative;
}

.view-grid-container-lista
{
    display: grid;
    grid-template-columns:200px 1fr;
    height: 100%;
    position: relative;
}

.view-grid-container-1C
{
    display: grid;
    grid-template-columns:1fr;
    height: 100%;
    position: relative;
}

.view-grid-container-modulo-2C
{
    display: grid;
    grid-template-columns:1fr 250px ;
    height: 100%;
    position: relative;
}

.view-grid-layout
{
    display: grid;
    grid-template-columns: auto 1fr;
}

.view-grid-layout-3c
{
    display: grid;
    grid-template-columns: 0.5fr auto 0.5fr;
}

.view-grid-layout-3c-auto
{
    display: grid;
    grid-template-columns: auto auto auto;
}

.view-grid-layout-3c-numericos
{
    display: grid;
    grid-template-columns: 70px 110px 70px;
}

.view-col1{
    background-color: white !important;
    height: 460px;
}


/* ============================================ WINDOW ======================================= */
.window-titulo
{
    background: blue;
    height: 10px;
}

.window-mensagem
{
    background: var(--window-background);
}

.window-botoes
{
    background: var(--border-background);
}
.window-grid-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items:flex-start;
    flex-wrap: wrap;
    width: 100%;
    border: 6px ridge #D4D4D2;
    background-color: var(--window-background);
}

.window-barra-titulo {
    display: grid;
    grid-template-columns: 0.5fr 0.5fr;
    background-image: linear-gradient(90deg, #0034af 25%, #0CCBF5 100%);
    color: white;
    width: 100%;
    height: 24px;
    align-content: center;
    padding-left: 4px;
    /*border-bottom: 1px solid #656564;*/
}
.window-barra-titulo-botoes
{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items:center;
}
.window-barra-titulo span
{
    font-size: 14px;
    font-weight: 510;
    margin-top: 4px;
}
.window-btn-fechar
{
    padding: 0px !important;
    margin: 0px;
    border: 0px none !important;
    background-color: transparent;
    height: 24px;
    box-shadow: none !important;
    /*min-width: 24px;*/
}
.window-btn-fechar img
{
    width: 21px;
    margin-bottom: 4px;
    margin-right: 4px;
}
.mud-dialog{
    min-width: 260px;
    min-height: 160px;
    background-color: var(--window-background);
}
.mud-dialog-title
{
    padding-left: 4px !important;
    padding-right: 2px !important;
}
/* ============================================ COMPONENTES ======================================= */
.borda
{
    border: 1px solid var(--border-brush);
    background-color: var(--border-background);
    border-radius: 5px;
}
.borda-padrao
{
    border: 1px solid var(--border-brush);
    background-color: var(--border-background);
    border-radius: 5px;
    margin: 8px 4px 8px 4px;
}
.borda-nula
{
    border: 0px none transparent;
}

.borda-rodape
{
    margin-bottom: 8px !important;
}

.campo {
    margin: 8px 8px 0px 8px;
}

.campo-inline
{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items:center;
    flex-wrap: wrap;
    width: 100%;
    height: 30px;
    margin-top: 8px;
    margin-left: 4px;
    padding-top: 4px;
    padding-right: 4px;
    overflow: auto;
    border: 0px none;
    /*font-size: 12px;*/
}

.separator
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items:center;
    flex-wrap: wrap;
}

.separator hr
{
    border-top: 1px solid var(--border-brush);
    width: 97%;
    margin-top: 8px;
}

/* ============================================ CAMPO DE TEXTO ======================================= */
input
{
    padding: 6px 6px 2px 6px !important;
    border: 1px solid var(--border-brush);
    border-radius: 3px;
}

input:hover
{
    border: 1px solid var(--cor-item-hover);
    outline: none;
}

input:focus
{
    border: 2px solid var(--cor-item-selecionado);
    outline: none;
}

input[type=text]
{
    width: 100%;
    text-overflow: ellipsis;
}

.text-box
{
    padding: 6px 6px 2px 6px !important;
    width: 100% !important;
    text-align: justify;
    resize: none;
    border: 1px solid var(--border-brush);
    border-radius: 3px;
}

textarea:hover
{
    border: 1px solid var(--cor-item-hover);
    outline: none;
}

textarea:focus
{
    border: 2px solid var(--cor-item-selecionado);
    outline: none;
}



/* ============================================ DATEPICKER ======================================= */
input[type=date]
{
    width: 160px;
    height: 34px;
    border: 1px solid var(--border-brush);
    border-radius: 3px;
    margin: 8px 8px 0px 8px;
}

/* ============================================ NUMERICUPDOWN ======================================= */
input[type=number]
{
    width: 120px;
    height: 32px;
    border: 1px solid var(--border-brush);
    border-radius: 3px;
    margin: 8px 8px 0px 8px;
}

/* ============================================ COMBOBOX ======================================= */
.combo-box
{
    margin-top: 2px;
    padding-top: 4px;
    height: 26px;
    background-image: linear-gradient(0deg, #cdcdba, #fcfcfa, #cdcdba);
    border: 1px solid var(--border-brush);
    border-radius: 3px;
}

/* ============================================ LABEL ======================================= */
.label {
    user-select: none;
}

/* ============================================ BARRA DE TÍTULO ======================================= */
.barra-titulo
{
    position: fixed;
    top: 32px;
    left: 0px;
    display: inline-grid;
    grid-template-columns:auto 1fr;
    background-image: linear-gradient(0deg, #0034af, #0CCBF5 88%);
    box-shadow: 0px 3px 3px 0px #777672;
    height: 80px;
    align-items: center;
    color: white;
    font-size: 18px;
}

.barra-titulo span
{
    font-size: 28px;
    font-weight: bold;
    margin-left: -5px;
}

.barra-titulo-img
{
    margin-left: 6px;
    width: 64px;
    height: 64px;
}


/* ============================================ COMPONENTES ======================================= */
.no-hover{
    pointer-events: none;
}

/* ======================================== BOTÕES DO MÓDULO DE COMANDO =================================== */
.btn-mod-grande
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    border: none !important;
}

.btn-mod-grande-img {
    margin-right: auto;
    margin-left: auto;
    height: 40px;
    width: 40px;
}

.btn-mod-grande-span
{
    margin-top: 4px;
    font-size: 13px;
}

.btn-mod-grande:hover, .btn-mod-medio:hover
{
    background-color: var(--cor-item-hover);
}

.btn-mod-grande:active, .btn-mod-medio:active
{
    background-color: var(--cor-item-selecionado);
    color: white;
}

.btn-mod-medio
{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    height: 40px;
    border: none !important;
}

.btn-mod-medio-img {
    margin-right: 8px;
    height: 20px;
    width: 20px;
}

.btn-mod-medio-span
{
    margin: 4px 0px 0px 2px;
    font-size: 14px;
}


/* ============================================ TOGGLE BUTTON ======================================= */
.toggle-button
{
    width: 95%;
    height: 48px;
    margin-top: 4px;
    border-radius: 5px;
    background-color: #e5e4e6;
    border: none;
}

.toggle-button-ativo
{
    background-color: var(--cor-item-ativo);
    color: white;
    font-weight: bold;
}

.toggle-button:hover
{
    background-color: var(--cor-item-hover);
}

.toggle-button:active
{
    background-color: var(--cor-item-ativo);
}

.list-toggle-buttons
{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items:center;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    overflow: auto;
    border: 0px none;
}

/* ============================================ DATAGRID ======================================= */
.datagrid
{
    overflow-y: auto;
    background-color: white;
}


table
{
    width:100%;
}

tr:nth-child(odd)
{
    background-color: #e3e3db;
}

tr:hover
{
    background-color: var(--cor-item-hover);
    color: var(--cor-item-hover-texto);
}

th
{
    /*background-color: white;*/
    background-image: linear-gradient(0deg, #e3e3db, white);
    font-weight: bold;
    padding: 5px 5px;
}

td
{
    background-color: transparent;
}

th, td
{
    display: table-cell;
    text-align: left;
    vertical-align: top;
    border-right: 1px solid #cdcdbf;
    border-bottom: 1px solid #cdcdbf;
}

td input
{
    border: none;
    background-color: transparent;
}

td input:focus
{
    border: none;
    background-color: white;
    color: black !important;
}

.data-table-selected {
     background-color: var(--cor-item-ativo) !important;
 }

.data-table-selected .mud-table-cell {
    color: white !important;     
    font-weight: bold !important;  
}

.data-table-selected > td {
    color: white !important;
}

.data-table-selected > td .mud-input {
    color: white !important;
}


/* ============================================ MODULO ======================================= */
.mod-grid-container
{
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    /*min-height: 600px;*/
    /*max-height: 100%;*/
}

.mod-comandos
{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;

    border: 1px solid var(--border-brush);
    background-color: var(--border-background);
    border-radius: 5px;
    margin: 2px 4px 4px 4px;
    padding-top: 4px;
    padding-bottom: 10px;
}

.mod-grid-comandos
{
    display: grid;
    grid-template-columns: auto auto auto auto;
    align-items: center;
    justify-items: start;
    grid-column-gap: 10px;
    margin: 4px 0px 4px 0px;
}

.mod-grid-comandos select
{
    width: 160px;
}

.mod-label
{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items:end;
    flex-wrap: wrap;
    width: 100px;
    height: 30px;
    margin-top: 2px;
    margin-left: 4px;
    padding-top: 0px;
    padding-right: 0px;
    overflow: auto;
    border: 0px none;
    font-size: 14px;
}

.mod-campo-pesquisa
{
    display: grid;
    grid-template-columns: 1fr auto auto;
    justify-items: stretch;
    align-items: center;
    background-color: white;
    width: 99%;
}

.mod-campo-pesquisa-input
{
    border: none !important;
    padding: 0px !important;
    margin-bottom: 4px !important;
    outline: none !important;

}
.mod-campo-pesquisa-input:focus
{
    border: none !important;
    padding: 0px !important;
    margin-bottom: 4px !important;
    outline: none !important;
    
}

.mod-campo-pesquisa-btn
{
    display: flex;
    padding: 0px !important;
    margin: 4px 0px 4px 4px !important;
    border: 1px solid transparent !important;
    background-color: transparent !important;
}

.mod-btn-pesquisa
{
    border: none !important;
}




/* ============================================ FILTROS ======================================= */
.img-disable
{
    filter: grayscale(1);
}

.desabilitar-componentes
{
    filter: brightness(80%);
}

/* ============================================ ANIMAÇÕES ======================================= */
.animaBlink
{
    animation-name: blink;
    animation-duration: 0.25s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: none;
}
@keyframes blink {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0.4;
    }

    100% {
        opacity: 1;
    }
}

.anima-giro
{
    display: inline-block;

    animation-name: girarElemento;
    animation-duration: 2.6s;
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;
}
@keyframes girarElemento {
    0%{
        transform: rotate(0deg);
    }
    23%{
        transform: rotate(0deg);
    }
    50%
    {
        transform: rotate(180deg);
    }
    72%
    {
        transform: rotate(180deg);
    }
    100%
    {
        transform: rotate(360deg);
    }
}




/* ============================================ MUDBLAZOR ======================================= */

input.mud-input-slot {
    text-transform: uppercase;
}

.mud-input
{
    text-transform: uppercase;
}

.decimal-numeric-field input{
    text-align: right;
}

.numeric-field-base {
    width: 100px;
    height: 30px;
    background-color: white;
    border: 1px solid var(--border-brush);
    border-radius: 5px;margin: 8px 4px 8px 8px;
}

.mud-input-showspin input
{
    padding-right: 28px !important;
}

.text-field
{
    border: 1px solid var(--border-brush);
    background-color: white;
    border-radius: 5px;
    margin: 10px 8px 4px 8px;
}

.date-picker
{
    width: 140px;
    border: 1px solid var(--border-brush);
    background-color: white;
    border-radius: 5px;
    margin: 11px 4px 8px 8px;
}

.date-picker input
{
    text-align: right;
}

.date-picker >div >div >div
{
    background-color: var(--border-background);
    border: 1px;
    border-radius: 5px;
}

.tel-picker
{
    width: 120px;
    border: 1px solid var(--border-brush);
    background-color: white;
    border-radius: 5px;
    margin: 10px 4px 4px 8px;
}


.mud-tab
{
    text-transform: none;
    font-weight: bold;
    font-size: 15px;
}

.mud-table
{
    
}

.mud-table-cell
{
    display: table-cell;
    padding: 10px;
    font-size: 11pt;
    text-align: start;
    font-weight: 400;
    line-height: 1.4;
    order-bottom: 1px solid rgba(224,224,224,1);
    letter-spacing: .01071em;
    vertical-align: inherit;
}

.mud-table-root .mud-table-head .mud-table-cell
{
    font-weight: 600;
    line-height: 1.5rem;
}
.mud-button
{
    text-transform: none;
    min-width: 10px;
    font-size: var(--default-font-size);
    border: 1px outset var(--border-brush);
    /*box-shadow: 1px 1px 0px 0px #000000;*/
}
.mud-button-text
{
    padding: 2px 4px;
}

.mud-input-root
{
    background: white !important;
}

.mud-toolbar
{
    height: 48px;
    background-color: #CDCDCB;
}

.mud-toolbar-gutters
{
    padding-left: 0px;
    padding-right: 0px;
}

.mud-table-cell
{
    font-size: var(--default-font-size);
}


/* MudExpansionPanels */

.botao-comando-texto
{
    font-size: 14px;
    font-style: normal;
    text-decoration: none;
    text-decoration-thickness: unset;
    color: black;
}

.list-item-mod-selecionado
{
    font-weight: bold;
}

.mud-expand-panel-text
{
    font-size: 15px;
    font-weight: bold;
}

.mud-expand-panel-selected-text
{
    /*color: #0034af;*/
}

.mud-expand-panel-selected-text > div > div
{
    /*font-style: italic;*/
    /*text-decoration: underline;*/
    /*text-decoration-thickness: 2px;*/
}


.list-item-selected
{
    font-weight: bold;
}

.mud-divider
{
    margin: 1px 0px 1px 0px;
}

.mud-divider-vertical
{
    margin: 0px 2px 0px 2px;
}

.mud-overlay .mud-overlay-scrim.mud-overlay-dark
{
    /*border-color: var(--mud-palette-overlay-dark);*/
    background-color: rgba(0, 0, 0, 0.22);
    /*background: radial-gradient(#575B75 0%, #00000000 40%);*/
}