﻿@import url("theme-base.css");

/* ========================================================================
   Component: layout
 ========================================================================== */
/*Fundo*/
body, .wrapper .section-container {
  background-color: var(--color-8);
  color: var(--color-9);
}

.wrapper .aside-container {
  background-color: var(--color-8);
}

/*Cabeçalho das páginas*/
.content-heading {
  background-color: var(--color-10);
  color: var(--color-9);
  border-bottom: 1px solid var(--color-11);
}

/*Rodapé*/
.footer-container {
  background-color: var(--color-10);
  border-top: 1px solid var(--color-11) !important;
}

/* ========================================================================
   Component: top-navbar
 ========================================================================== */
.topnavbar {
  background-color: var(--color-1);
}

@media (min-width: 992px) {
  .topnavbar .navbar-nav > .nav-item.show > .nav-link, .topnavbar .navbar-nav > .nav-item.show > .nav-link:hover, .topnavbar .navbar-nav > .nav-item.show > .nav-link:focus {
    box-shadow: 0 -3px 0 var(--color-2) inset;
  }
}

.topnavbar .navbar-nav > .nav-item > .navbar-text {
  color: var(--color-23);
}

.topnavbar .navbar-nav > .nav-item > .nav-link,
.topnavbar .navbar-nav > .nav-item.show > .nav-link {
  color: var(--color-23);
}

  .topnavbar .navbar-nav > .nav-item > .nav-link:hover, .topnavbar .navbar-nav > .nav-item > .nav-link:focus,
  .topnavbar .navbar-nav > .nav-item.show > .nav-link:hover,
  .topnavbar .navbar-nav > .nav-item.show > .nav-link:focus {
    color: var(--color-24);
  }

.topnavbar .dropdown-item.active, .topnavbar .dropdown-item:active {
  background-color: var(--color-1);
}

/* ========================================================================
   Component: sidebar (menu esquerdo)
 ========================================================================== */
.sidebar {
  background-color: var(--color-10);
}

  .sidebar .sidebar-nav > li > a, .sidebar-nav > li > .nav-item {
    color: var(--color-9);
  }

    .sidebar .sidebar-nav > li > a:focus, .sidebar-nav > li > a:hover, .sidebar-nav > li > .nav-item:focus, .sidebar-nav > li > .nav-item:hover {
      color: var(--color-1);
    }

    .sidebar .sidebar-nav > li > a > em, .sidebar-nav > li > .nav-item > em {
      color: inherits;
    }

  .sidebar .sidebar-nav > li:hover a > svg > path, .sidebar .sidebar-nav > li:focus a > svg > path {
    fill: var(--color-1);
  }

  .sidebar .sidebar-nav > li.active, .sidebar-nav > li.active > a, .sidebar-nav > li.active > .nav-item, .sidebar-nav > li.active .sidebar-nav, .sidebar-nav > li.open, .sidebar-nav > li.open > a, .sidebar-nav > li.open > .nav-item, .sidebar-nav > li.open .sidebar-nav {
    background-color: var(--color-10);
    color: var(--color-1);
  }

    .sidebar .sidebar-nav > li.active > .nav-item > em, .sidebar-nav > li.active > a > em, .sidebar-nav > li.open > .nav-item > em, .sidebar-nav > li.open > a > em {
      color: var(--color-1);
    }

  .sidebar .sidebar-nav > li.active {
    border-left-color: var(--color-1);
  }

  .sidebar .sidebar-subnav {
    background-color: var(--color-10);
  }

    .sidebar .sidebar-subnav > .sidebar-subnav-header {
      color: var(--color-9);
    }

    .sidebar .sidebar-subnav > li > a, .sidebar-subnav > li > .nav-item {
      color: var(--color-9);
    }

      .sidebar .sidebar-subnav > li > a:focus, .sidebar-subnav > li > a:hover, .sidebar-subnav > li > .nav-item:focus, .sidebar-subnav > li > .nav-item:hover {
        color: var(--color-1);
      }

    .sidebar .sidebar-subnav > li.active > a, .sidebar-subnav > li.active > .nav-item {
      color: var(--color-1);
    }

      .sidebar .sidebar-subnav > li.active > a:after, .sidebar-subnav > li.active > .nav-item:after {
        border-color: var(--color-1);
        background-color: var(--color-1);
      }

  .sidebar:after {
    background: var(--color-66);
  }

.sidebar-nav > li > a:focus, .sidebar-nav > li > a:hover,
.sidebar-nav > li > .nav-item:focus,
.sidebar-nav > li > .nav-item:hover {
  color: var(--color-1);
}

.sidebar-nav > li > a, .sidebar-nav > li > .nav-item {
  color: var(--color-9);
  background-color: var(--color-10);
}

.sidebar-subnav {
  background-color: var(--color-10);
}

.divRelatorioSidebar {
  background-color: var(--color-10);
  padding: 6px 15px;
  color: var(--color-9);
  cursor: pointer;
}

  .divRelatorioSidebar:focus, .divRelatorioSidebar:hover {
    color: var(--color-1);
  }

.br, .b, .ba {
  border-right: 1px solid var(--color-11);
}

.bl, .b, .ba {
  border-left: 1px solid var(--color-11);
}

.bt, .b, .ba {
  border-top: 1px solid var(--color-11);
}

.bb, .b, .ba {
  border-bottom: 1px solid var(--color-11);
}

/* ========================================================================
   Component: offsidebar (menu direito)
 ========================================================================== */
.offsidebar {
  border-left: 1px solid var(--color-11) !important;
  background-color: var(--color-10);
  color: var(--color-9);
}

/* ========================================================================
   Component: list-group (Menus edição)
 ========================================================================== */
.list-group {
  background-color: var(--color-10);
  color: var(--color-9);
}

.list-group-item {
  background-color: var(--color-10);
  color: var(--color-9);
  border: 1px solid var(--color-11);
}

.list-group-item-action:hover {
  background-color: var(--color-10);
  color: var(--color-1) !important;
}

.list-group-item.active {
  background-color: var(--color-1);
  color: var(--color-23);
}

  .list-group-item.active:hover {
    color: var(--color-23) !important;
  }

/* ========================================================================
   Component: btn-padrao (Background-color de acordo com o tema, cor das letras branca, hover de acordo com o tema)
 ========================================================================== */
.btn-padrao {
  color: var(--color-23);
  background-color: var(--color-1);
  border-color: var(--color-3);
}

  .btn-padrao:hover {
    color: var(--color-23);
    background-color: var(--color-4);
    border-color: var(--color-5);
  }

  .btn-padrao:focus, .btn-padrao.focus {
    box-shadow: 0 0 0 0.2rem var(--color-2);
  }

  .btn-padrao:not(:disabled):not(.disabled):active, .btn-padrao:not(:disabled):not(.disabled).active,
  .show > .btn-padrao.dropdown-toggle {
    color: var(--color-23);
    background-color: var(--color-4);
    border-color: var(--color-4);
  }

    .btn-padrao:not(:disabled):not(.disabled):active:focus, .btn-padrao:not(:disabled):not(.disabled).active:focus,
    .show > .btn-padrao.dropdown-toggle:focus {
      box-shadow: 0 0 0 0.2rem var(--color-2);
    }

/*Checkbox*/
.c-checkbox input[type=checkbox]:checked + span {
  background-color: var(--color-1);
  border-color: var(--color-4);
  color: var(--color-23);
}

.c-checkbox input[type=checkbox]:disabled + span, .c-checkbox input[type=radio]:disabled + span, .c-radio input[type=checkbox]:disabled + span, .c-radio input[type=radio]:disabled + span {
  background-color: var(--color-12);
  border-color: var(--color-67);
  color: var(--color-1);
  pointer-events: none;
  opacity: 0.65;
}

.c-checkbox:hover span,
.c-radio:hover span {
  border-color: var(--color-1);
}

/* ========================================================================
   Component: btn-outline (Background-color transparente, cor das letras de acordo com o tema, hover de acordo com o tema)
 ========================================================================== */
.btn-outline {
  color: var(--color-1);
  border-color: var(--color-1);
}

  .btn-outline:hover {
    color: var(--color-23);
    background-color: var(--color-1);
    border-color: var(--color-3);
  }

  .btn-outline:focus, .btn-outline.focus {
    box-shadow: 0 0 0 0.2rem var(--color-4);
  }

  .btn-outline.disabled, .btn-outline:disabled {
    color: var(--color-4);
    background-color: transparent;
  }

  .btn-outline:not(:disabled):not(.disabled):active, .btn-outline:not(:disabled):not(.disabled).active,
  .show > .btn-outline.dropdown-toggle {
    color: var(--color-23);
    background-color: var(--color-1);
    border-color: var(--color-3);
  }

    .btn-outline:not(:disabled):not(.disabled):active:focus, .btn-outline:not(:disabled):not(.disabled).active:focus,
    .show > .btn-outline.dropdown-toggle:focus {
      box-shadow: 0 0 0 0.2rem var(--color-4);
    }

/* ========================================================================
   Component: btn-secondary
 ========================================================================== */
.btn-secondary {
  background-color: var(--color-15);
  border-color: var(--color-16) !important;
  color: var(--color-19);
}

  .btn-secondary:hover {
    color: var(--color-19);
    background-color: var(--color-18);
  }

  .btn-secondary:focus {
    box-shadow: 0 0 0 0 !important;
  }

  .btn-secondary:disabled {
    background-color: var(--color-18);
    color: var(--color-19);
    pointer-events: none;
  }

  .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, .show > .btn-secondary.dropdown-toggle {
    background-color: var(--color-18);
    box-shadow: 0 0 0 0 !important;
  }

/* ========================================================================
   Component: btn-outline-secondary
 ========================================================================== */
.btn-outline-secondary {
  border-color: var(--color-26) !important;
  color: var(--color-69);
}

  .btn-outline-secondary:hover {
    color: var(--color-4);
    background-color: var(--color-15) !important;
    border-color: var(--color-4) !important;
  }

  .btn-outline-secondary:focus {
    color: var(--color-4);
    box-shadow: 0 0 0 0 !important;
    border-color: var(--color-4) !important;
    background-color: var(--color-20) !important;
  }

  .btn-outline-secondary:disabled {
    background-color: var(--color-13);
    color: var(--color-19);
    pointer-events: none;
  }

  .btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active, .show > .btn-outline-secondary.dropdown-toggle {
    background-color: var(--color-15);
    color: var(--color-4) !important;
    border-color: var(--color-4) !important;
  }

/* ========================================================================
   Component: botões
 ========================================================================== */
/*Botões do controle de acesso (Cor texto, sem borda)*/
.btn-icon {
  color: var(--color-9);
}

  .btn-icon:hover {
    color: var(--color-1);
  }

  .btn-icon:disabled {
    pointer-events: none;
  }

  .btn-icon:focus {
    box-shadow: 0 0 0 0;
  }

/*Botão pesquisar cabeçalho*/
.btn-pesquisar {
  color: var(--color-23);
}

/* ========================================================================
   Component: swal-modal/modal-content
 ========================================================================== */
.swal-modal {
  background-color: var(--color-27) !important;
  border: 1px solid var(--color-80);
  color: var(--color-9);
}

.swal-content__input:focus {
  border-color: var(--color-1);
}

.swal-content__input, .swal-content__textarea {
  background-color: var(--color-64);
}

.swal-title, .swal-text {
  color: var(--color-9);
}

/*Modal*/
.modal-content {
  background-color: var(--color-10);
  border: 1px solid var(--color-80);
  color: var(--color-9);
}

/* ========================================================================
   Component: swal-button
 ========================================================================== */
.swal-button {
  box-shadow: 0 0 0 0;
}

.swal-button--confirm, .swal-button--no, .swal-button--sim, .swal-button--nao, .swal-button--outro {
  background-color: var(--color-1);
  border-color: var(--color-1);
  box-shadow: 0 0 0 0.2px var(--color-1) !important;
}

  .swal-button--confirm:not([disabled]):hover, .swal-button--no:not([disabled]):hover, .swal-button--sim:not([disabled]):hover, .swal-button--nao:not([disabled]):hover, .swal-button--outro:not([disabled]):hover {
    background-color: var(--color-4);
    border-color: var(--color-4);
    box-shadow: 0 0 0 0.5px var(--color-1) !important;
  }

.swal-button.swal-button--confirm:active, .swal-button.swal-button--no:active, .swal-button.swal-button--sim:active, .swal-button.swal-button--nao:active, .swal-button.swal-button--outro:active {
  box-shadow: 0 0 0 0.2rem var(--color-2) !important;
}

.swal-button--cancel {
  background-color: var(--color-27);
  color: var(--color-9);
  box-shadow: 0 0 0 0.5px var(--color-68) !important;
}

  .swal-button--cancel:not([disabled]):hover {
    background-color: var(--color-14);
    box-shadow: 0 0 0 0.5px var(--color-68) !important;
  }

/* ========================================================================
   Component: float button
 ========================================================================== */
.fab button.main {
  background-color: var(--color-1);
  border-color: var(--color-1);
}

/* ========================================================================
   Component: borda padrao
 ========================================================================== */
.borderColor {
  border-color: var(--color-1);
}

  .borderColor:focus {
    border-color: var(--color-1);
  }

  .borderColor:active {
    border-color: var(--color-1);
  }

  .borderColor:hover {
    border-color: var(--color-1);
  }

/* ========================================================================
   Component: DevExtreme
 ========================================================================== */
/*RichTextEditor início*/
/*Cor fundo (borda) texto*/
:not(.dx-datagrid) .dxrePage,
:not(.dx-datagrid) .dxreColumn {
  background-color: var(--color-21) !important;
}

/*Cor fundo texto*/
:not(.dx-datagrid) .dxrePageArea {
  background-color: var(--color-21) !important;
}

/*Cor fundo das abas*/
:not(.dx-datagrid) .dx-tabs,
:not(.dx-datagrid) .dx-tabs-wrapper {
  background-color: var(--color-12) !important;
}

/*Cor fundo das abas secundárias*/
:not(.dx-datagrid) .dx-tab {
  background-color: var(--color-12) !important;
}

  :not(.dx-datagrid) .dx-tab .dx-state-hover {
    background-color: var(--color-17) !important;
  }

  /*Cor fundo da aba selecionada*/
  :not(.dx-datagrid) .dx-tab.dx-tab-selected {
    background-color: var(--color-21) !important;
  }

/*Cor fundo subabas*/
.dx-tabpanel-container .dx-toolbar {
  background-color: var(--color-21) !important;
}

/*Cor fundo botão mais opções*/
:not(.dx-datagrid) .dx-tabpanel-container .dx-multiview-wrapper .dx-button-mode-contained {
  background-color: inherit !important;
}

/*Cor do ícone botão mais opções*/
.dx-tabpanel-container .dx-button-mode-contained .dx-icon {
  color: var(--color-22) !important;
}

/*Cor texto dropdown botão mais opções*/
.dx-toolbar-menu-section .dx-toolbar-hidden-button .dx-button {
  color: var(--color-9) !important;
}

/*Delimitador do submenu*/
:not(.dx-datagrid) .dx-context-menu-content-delimiter {
  background-color: var(--color-21) !important;
}
/*RichTextEditor fim*/

/*Cor fundo componente data que estão fora do datagrid*/
:not(.dx-datagrid) .dx-texteditor.dx-editor-outlined {
  background-color: var(--color-21) !important;
}

/*Cor texto que estão fora do datagrid*/
:not(.dx-datagrid) .dx-placeholder,
:not(.dx-datagrid) .dx-searchbox .dx-icon-search {
  color: var(--color-28) !important;
}

/*Hover botão que estão fora do datagrid*/
:not(.dx-datagrid) .dx-dropdowneditor.dx-state-active .dx-dropdowneditor-icon,
:not(.dx-datagrid) .dx-dropdowneditor.dx-state-hover:not(.dx-custom-button-hovered) .dx-dropdowneditor-icon {
  background-color: var(--color-18) !important;
  border-color: transparent;
}

/*Cor ícone botão clear que estão fora do datagrid*/
#engeman-data-component .dx-show-clear-button .dx-icon-clear {
  color: var(--color-22) !important;
}

#engeman-data-component .dx-dropdowneditor-input-wrapper {
  background-color: var(--color-12);
  border: 1px solid var(--color-16);
  border-radius: 0.25rem;
}

#engeman-data-component .dx-dropdowneditor-icon {
  color: var(--color-19) !important;
}

#engeman-data-component .dx-texteditor-input,
#engeman-data-component .dx-texteditor-buttons-container {
  background-color: var(--color-25);
}

/*Início Tabelas Datagrid*/
/*Cor fundo geral*/
.dx-datagrid {
  color: var(--color-29) !important;
}

  /*Cor fundo e cor texto ao selecionar um registro*/
  .dx-datagrid > .dx-datagrid-rowsview, .dx-datagrid > .dx-datagrid-total-footer,
  .dx-datagrid-headers .dx-datagrid-content .dx-datagrid-table .dx-row > td.dx-datagrid-group-space,
  .dx-datagrid-rowsview .dx-row .dx-command-expand,
  .dx-datagrid .dx-datagrid-header-panel .dx-toolbar,
  .dx-datagrid .dx-toolbar,
  .dx-datagrid-rowsview .dx-master-detail-row:not(.dx-datagrid-edit-form) .dx-master-detail-cell,
  .dx-datagrid-rowsview .dx-master-detail-row:not(.dx-datagrid-edit-form) > .dx-datagrid-group-space,
  .dx-editor-cell .dx-texteditor, .dx-editor-cell .dx-texteditor .dx-texteditor-input,
  .dx-datagrid-search-panel .dx-texteditor-input,
  .dx-treeview-search .dx-texteditor-input,
  .dx-datagrid-search-panel .dx-texteditor-input-container {
    background-color: var(--color-10) !important;
    color: var(--color-29) !important;
  }

  /*Cor fundo e cor texto cabeçalho*/
  .dx-datagrid > .dx-datagrid-headers {
    background-color: var(--color-10) !important;
    color: var(--color-28) !important;
  }

  /*Segunda cor fundo (linhas)*/
  .dx-datagrid .dx-row-alt > td, .dx-datagrid .dx-row-alt > tr > td,
  .dx-datagrid-rowsview .dx-row-alt .dx-command-expand {
    background-color: var(--color-8) !important;
  }

/*Cor fundo ao selecionar um registro*/
.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > td,
.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > tr > td,
.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused) > td,
.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused) > tr > td,
.dx-datagrid-rowsview .dx-row-focused.dx-data-row > td:not(.dx-focused),
.dx-datagrid-table .dx-data-row.dx-state-hover:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row):not(.dx-row-focused) > td:not(.dx-focused) {
  background-color: var(--color-70) !important;
  color: inherit !important;
}

/*Borda superior e inferior ao selecionar linha*/
.dx-datagrid-rowsview .dx-row-focused.dx-data-row:not(.dx-row-lines) > td,
.dx-datagrid-rowsview .dx-row-focused.dx-data-row:not(.dx-row-lines) > tr:first-child > td {
  border-top: 1px solid var(--color-1) !important;
  border-bottom: 1px solid var(--color-1) !important;
}

/*Cor das bordas entre colunas*/
.dx-datagrid-rowsview,
.dx-datagrid-rowsview .dx-row > td,
.dx-datagrid-headers .dx-row > td {
  border-color: var(--color-30) !important;
}

/*Cor da borda inferior cabeçalho*/
.dx-datagrid-header-panel,
.dx-datagrid-headers .dx-datagrid-table .dx-row > td {
  border-bottom: 1px solid var(--color-30) !important;
}

/*Cor da borda superior rodapé*/
.dx-datagrid .dx-pager,
.dx-datagrid .dx-pagination {
  border-top: 1px solid var(--color-30) !important;
}

/*Cor fundo Carregando*/
.dx-loadpanel-content {
  background-color: var(--color-61) !important;
}

/*Cor da borda superior do Carregando*/
.dx-datagrid-headers::before {
  border-bottom: 1px solid var(--color-30) !important;
}

/*Retirando a borda do carregando*/
.dx-loadpanel-content {
  border: none !important;
}

/*Cor do texto Carregando*/
.dx-loadpanel-message {
  color: var(--color-29);
}

/*Cor do ícone Carregando*/
.dx-loadindicator-content-circle .dx-loadindicator-segment {
  background: var(--color-72) !important;
}

/*Cor fundo dos ícones*/
.dx-datagrid-content .dx-datagrid-table .dx-row .dx-command-edit.dx-command-edit-with-icons {
  background-color: var(--color-10);
}

/*Cor fundo ícones ao clicar*/
.dx-datagrid-rowsview .dx-row-focused.dx-data-row .dx-command-edit .dx-link:focus {
  background-color: transparent !important;
}

/*Cor da borda do grid expandido*/
.dx-master-detail-cell > .dx-tabpanel {
  border: 1px solid var(--color-1) !important;
}

  /*Retirar borda branca do grid expandido*/
  .dx-master-detail-cell > .dx-tabpanel .dx-multiview-wrapper {
    border: none !important;
  }

/*Cor fundo grid expandido região dos abas de títulos*/
.dx-datagrid .dx-tabs-wrapper {
  background-color: var(--color-31) !important;
}

/*Bordas grid expandido região dos abas de títulos*/
.dx-tabpanel-tabs-position-left > .dx-tabpanel-tabs .dx-tabs-wrapper {
  border-inline-start: 1px solid var(--color-30) !important;
  border-inline-end: 1px solid var(--color-30) !important;
}

/*Cor fundo item selecionado grid expandido região dos abas de títulos*/
.dx-datagrid .dx-tab.dx-tab-selected {
  background-color: var(--color-10) !important;
}

/*Borda item selecionado grid expandido região dos abas de títulos*/
.dx-tabpanel-tabs-position-left > .dx-tabpanel-tabs .dx-tab-selected {
  border-inline-end: 1px solid var(--color-30) !important;
}

/*Cor do texto item selecionado grid expandido região dos abas de títulos*/
.dx-datagrid .dx-tab.dx-tab-selected .dx-icon, .dx-tab.dx-tab-selected .dx-tab-text {
  color: var(--color-1) !important
}

/*Borda geral grid expandido região dos abas de títulos*/
.dx-datagrid .dx-tabs-wrapper::after {
  border-block-start: 1px solid var(--color-30) !important;
  border-inline-end: 1px solid var(--color-30) !important;
  border-block-end: 1px solid var(--color-30) !important;
  border-inline-start: 1px solid var(--color-30) !important;
}

/*Borda item ativo/hover grid expandido região dos abas de títulos*/
.dx-datagrid .dx-tabs-vertical .dx-tab.dx-state-hover::after,
.dx-datagrid .dx-tabs-vertical .dx-tab.dx-state-active::after {
  border-inline-end: 1px solid var(--color-30) !important;
  border-inline-start: 1px solid var(--color-30) !important;
  border-block-start: 1px solid var(--color-30) !important;
  border-block-end: 1px solid var(--color-30) !important;
}

/*Borda item selecionado grid expandido região dos abas de títulos*/
.dx-datagrid .dx-tabpanel.dx-state-focused .dx-tabpanel-tab.dx-state-focused::after {
  border-color: var(--color-30) !important;
}

/*Bordas item selecionado grid expandido região dos abas de títulos*/
.dx-datagrid .dx-tabs-vertical .dx-tab.dx-tab-selected::after {
  border-block-start: 1px solid var(--color-30) !important;
  border-inline-end: 1px solid var(--color-30) !important;
  border-block-end: 1px solid var(--color-30) !important;
  border-inline-start: 1px solid var(--color-30) !important;
}

/*Cor fundo item não selecionados grid expandido região dos abas de títulos*/
.dx-datagrid .dx-tab {
  background-color: var(--color-10) !important;
  color: var(--color-32) !important;
}

/*Cor letras paginação*/
.dx-pager .dx-page-sizes, .dx-pagination .dx-page-sizes, .dx-pager .dx-pages, .dx-pagination .dx-pages {
  color: var(--color-28) !important;
}

  .dx-pager .dx-page-sizes .dx-selection, .dx-pager .dx-pages .dx-selection, .dx-pagination .dx-page-sizes .dx-selection, .dx-pagination .dx-pages .dx-selection {
    color: var(--color-32) !important;
    background-color: var(--color-10) !important;
    border: 1px solid var(--color-73) !important;
  }

/*Cor de fundo dos botões toolbar*/
.dx-datagrid .dx-button-mode-contained {
  background-color: var(--color-10) !important;
  border: 1px solid var(--color-71) !important;
}

  /*Cor dos ícones dos botões toolbar*/
  .dx-datagrid .dx-button-mode-contained .dx-icon {
    color: var(--color-32) !important;
  }

/*Borda dos checkboxs*/
.dx-checkbox-icon {
  border: 1px solid var(--color-77) !important;
  background-color: var(--color-44) !important;
}

/*Hover dos checkboxs*/
.dx-checkbox.dx-state-hover .dx-checkbox-icon,
.dx-checkbox.dx-state-focused .dx-checkbox-icon {
  border-color: var(--color-1) !important;
}

/*Cor dos checkboxs*/
.dx-checkbox-checked .dx-checkbox-icon,
.dx-checkbox-indeterminate .dx-checkbox-icon {
  color: var(--color-1) !important;
}

  /*Cor do checkbox Todos*/
  .dx-checkbox-indeterminate .dx-checkbox-icon::before {
    background-color: var(--color-1) !important;
  }

/*Cor fundo das colunas: checkbox*/
.dx-datagrid .dx-datagrid-sticky-column,
.dx-datagrid .dx-datagrid-sticky-column-left,
.dx-datagrid .dx-datagrid-sticky-column-right {
  background-color: var(--color-10) !important;
}

/*Cor do separador das colunas ao selecionar*/
.dx-datagrid-columns-separator {
  background-color: var(--color-6) !important;
}

/*Cor do separador das colunas*/
.dx-datagrid-columns-separator-transparent {
  background-color: transparent !important;
}

/*Cor dos indicadores (setinhas) quando coluna estiver ordenada, seguindo a cor do tema*/
.dx-datagrid .dx-column-indicators {
  color: var(--color-1);
}

/*Cor do ícone do filtro, somente quando estiver filtrado, seguindo a cor do tema*/
.dx-datagrid .dx-header-filter:not(.dx-header-filter-empty) {
  color: var(--color-1);
}

/*Cor item selecionado botão exportar cabeçalho do grid*/
.dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-state-active {
  background-color: var(--color-6) !important;
}

/*Símbolo de expansão do grid (fechado)*/
.dx-datagrid-group-closed {
  color: var(--color-32) !important;
}

/*Símbolo de expansão do grid (aberto)*/
.dx-datagrid-group-opened {
  color: var(--color-1) !important;
}

/*Borda ao clicar/focar no campo pesquisar das colunas*/
.dx-datagrid-focus-overlay {
  border: none !important;
  border-bottom: 1px solid var(--color-1) !important;
}

/*Borda do pesquisar geral*/
.dx-texteditor.dx-state-active.dx-editor-filled,
.dx-texteditor.dx-state-active.dx-editor-outlined,
.dx-texteditor.dx-state-active.dx-editor-underlined,
.dx-texteditor.dx-state-focused.dx-editor-filled,
.dx-texteditor.dx-state-focused.dx-editor-outlined,
.dx-texteditor.dx-state-focused.dx-editor-underlined {
  border-color: var(--color-1) !important;
}

/*Borda dos botões de pesquisa das colunas do grid*/
.dx-datagrid-filter-row .dx-menu-item.dx-state-focused::after {
  border: none !important;
}

/*Cor texto selecionado ao pesquisar*/
.dx-datagrid-search-text {
  background-color: var(--color-6) !important;
}

/*Cor fundo pesquisar das colunas*/
.dx-datagrid .dx-texteditor.dx-editor-outlined {
  background-color: var(--color-10) !important;
}

/*Borda pesquisar título tabela*/
.dx-datagrid .dx-toolbar-items-container .dx-texteditor.dx-editor-outlined {
  border: 1px solid var(--color-71) !important;
  border-radius: 0px !important;
}

/*Retirando border-radius pesquisar Column Chooser*/
.dx-texteditor.dx-editor-outlined {
  border: none !important;
}

/*Retirando border-radius pesquisar Column Chooser*/
.dx-treeview-search .dx-texteditor-container {
  border-radius: 0px !important;
  border: 1px solid var(--color-71) !important;
  background-color: var(--color-10) !important;
}

  /*Cor ícone pesquisar e filtro das colunas do grid*/
  .dx-datagrid .dx-datagrid-container.dx-filter-menu .dx-menu-item-has-icon .dx-icon,
  .dx-datagrid .dx-datagrid.dx-filter-menu .dx-menu-item-has-icon .dx-icon,
  .dx-datagrid .dx-header-filter-empty, .dx-datagrid .dx-dropdowneditor-icon,
  .dx-datagrid .dx-texteditor.dx-editor-outlined,
  .dx-datagrid .dx-show-clear-button .dx-icon-clear,
  .dx-treeview-search .dx-texteditor-container .dx-show-clear-button .dx-icon-clear {
    color: var(--color-28) !important;
  }

/*Borda botão data pesquisar dentro do DataGrid */
.dx-datagrid .dx-dropdowneditor.dx-state-active .dx-dropdowneditor-icon,
.dx-datagrid .dx-dropdowneditor.dx-state-hover:not(.dx-custom-button-hovered) .dx-dropdowneditor-icon {
  border: 1px solid var(--color-1) !important;
  background-color: var(--color-10) !important;
}

/*Cor fundo botão data pesquisar dentro do DataGrid ao clicar/foco*/
.dx-datagrid .dx-dropdowneditor.dx-state-active .dx-dropdowneditor-icon,
.dx-datagrid .dx-dropdowneditor-button.dx-state-active .dx-dropdowneditor-icon,
.dx-datagrid .dx-dropdowneditor.dx-dropdowneditor-active .dx-dropdowneditor-icon {
  background-color: var(--color-33) !important;
}

/*Cor fundo e borda hover dos botões de pesquisa nas colunas*/
.dx-datagrid-filter-row .dx-menu-item-has-submenu.dx-menu-item-expanded.dx-state-hover {
  background-color: var(--color-10) !important;
  border: 1px solid var(--color-1) !important;
}

/*Cor fundo hover botão pesquisar colunas*/
.dx-menu .dx-menu-item-expanded {
  background-color: var(--color-10) !important;
}

/*Retirando borda botão pesquisar colunas*/
.dx-context-menu-container-border {
  border: none !important;
}

/*Menu botão pesquisar colunas*/
.dx-context-menu .dx-submenu {
  background-color: var(--color-10) !important;
  border: 1px solid var(--color-30) !important;
  box-shadow: none !important;
}

/*Menu botão pesquisar colunas selecionado*/
.dx-menu-item-selected {
  background-color: var(--color-34) !important;
  color: var(--color-35) !important;
}

/*Cor texto menu botão pesquisar colunas*/
.dx-menu-item {
  color: var(--color-36) !important;
}

  /*Menu botão pesquisar colunas*/
  .dx-menu-item.dx-state-hover {
    background-color: var(--color-37) !important;
    color: var(--color-35) !important;
  }

.dx-menu-item-selected {
  color: var(--color-35) !important;
}

/*Cor fundo popups*/
.dx-popup-wrapper > .dx-overlay-content {
  border: 1px solid var(--color-38) !important;
  background: var(--color-65) !important;
}

/*Cor fonte popups*/
.dx-popup-title,
.dx-checkbox-text,
.dx-treeview-item-with-checkbox .dx-treeview-item,
.dx-datagrid .dx-button-mode-text .dx-icon,
.dx-overlay-content .dx-button-mode-text .dx-icon,
.dx-list .dx-empty-message,
.dx-list-item,
.dx-dialog-message,
.dx-button-mode-contained,
.dx-list-select-all-label,
.dx-overlay-wrapper {
  color: var(--color-32) !important;
}

.dx-button-mode-outlined {
  border: 1px solid var(--color-79) !important;
}

/*Cor fundo popups*/
.dx-overlay-shader {
  background-color: var(--color-39) !important;
}

/*Botões popus*/
.dx-button-mode-contained {
  background-color: transparent !important;
  border-color: var(--color-28) !important;
}

  .dx-button-mode-contained:hover {
    background-color: transparent !important;
    border-color: var(--color-1) !important;
    color: var(--color-1) !important;
  }

/*Botões popus*/
.dx-button-mode-outline {
  border-color: var(--color-1) !important;
  color: var(--color-1) !important;
}

  .dx-button-mode-outline:hover {
    background-color: var(--color-1) !important;
    color: var(--color-23) !important;
    border-color: var(--color-2) !important;
  }

/*Borda popup ao focar*/
.dx-popup-wrapper .dx-state-focused.dx-overlay-content {
  border: 1px solid var(--color-1) !important;
}

/*Background-color hover botão fechar popup*/
.dx-button-mode-text .dx-state-hover {
  background-color: none !important;
}

/*Borda inferior*/
.dx-list-select-all,
.dx-treeview-select-all-item {
  border-bottom: 1px solid var(--color-75) !important;
}
/*Cor calendário*/
.dx-widget dx-calendar-navigator,
.dx-calendar,
.dx-datebox-datetime-time-side {
  background-color: var(--color-74) !important;
  color: var(--color-32) !important;
}
/*Cor texto hover popups exportar*/
.dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-state-hover .dx-list-item-icon-container .dx-icon {
  color: var(--color-35) !important;
}
/*Cor fundo hover popups exportar*/
.dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-state-hover {
  background-color: var(--color-33) !important;
}
/*Borda hover dos checkbox*/
.dx-list.dx-list-select-decorator-enabled .dx-list-item.dx-state-hover .dx-checkbox-icon, .dx-list.dx-list-select-decorator-enabled .dx-list-item.dx-state-hover .dx-radiobutton-icon, .dx-list.dx-list-select-decorator-enabled .dx-list-select-all.dx-state-hover .dx-checkbox-icon, .dx-list.dx-list-select-decorator-enabled .dx-list-select-all.dx-state-hover .dx-radiobutton-icon {
  border-color: var(--color-1);
}
/*Cor dos botões grid - Datagrid Devexpress*/
.bg-grid {
  color: var(--color-35) !important;
  border-color: var(--color-41);
}

  .bg-grid:not([disabled]):hover {
    color: var(--color-40) !important;
    border-color: var(--color-42);
  }

  .bg-grid:focus, .bg-grid.focus {
    box-shadow: 0 0 0 0.2rem var(--color-43);
  }

.dx-datagrid-rowsview .dx-row-focused.dx-data-row .dx-command-edit:not(.dx-focused) .dx-link,
.dx-datagrid-rowsview .dx-row-focused.dx-data-row > td:not(.dx-focused),
.dx-datagrid-rowsview .dx-row-focused.dx-data-row > tr > td:not(.dx-focused) {
  border-color: var(--color-41);
}

/*Cor dos botões Salvar e Cancelar do Grid Editável*/
.dx-datagrid-rowsview .dx-icon-save,
.dx-datagrid-rowsview .dx-link-cancel {
  color: var(--color-41) !important;
}

/*Cor do texto abas secundárias MasterDetails*/
.dx-tab .dx-tab-text {
  color: var(--color-24) !important;
}
/*Cor texto para quando não conter dados*/
.dx-datagrid-nodata {
  color: var(--color-28) !important;
}
/* ========================================================================
   Diversos
 ========================================================================== */
/*Cor de fundo do botão pesquisar cabeçalho*/
.backgroundClaro {
  background-color: var(--color-78) !important;
}
/*Cor das letras cabeçalho grid*/
.bootgrid-table th > .column-header-anchor {
  color: var(--color-9) !important;
  font-weight: normal;
}
/*Hover do check do grid*/
.bootgrid .table > thead > tr > .select-cell:hover {
  background-color: var(--color-10) !important;
}
/*Cor das letras linhas grid*/
.table {
  background-color: var(--color-10);
  color: var(--color-9);
}
  /*Linha da tabela (grids)*/
  .table tbody tr,
  .table.dataTable tbody tr {
    background-color: var(--color-10);
    color: var(--color-9);
  }
    /*Segunda cor de fundo linha da tabela*/
    .table tbody tr:nth-of-type(odd) {
      background-color: var(--color-8);
      color: var(--color-9);
    }
  /*Removendo bordas tabela*/
  .table th, .table td {
    border-top: none;
  }
  /*Fundo do checkbox - título da tabela (grids)*/
  .table thead tr > .select-cell {
    background-color: var(--color-10) !important;
  }
/*Paginação do grid*/
.page-link {
  color: var(--color-9);
  background-color: var(--color-10);
  border: 1px solid var(--color-46);
}

  .page-link:hover {
    background-color: var(--color-76);
    border: 1px solid var(--color-46);
  }
/*Texto informação página do grid(mostrando...)*/
.infos {
  color: var(--color-9);
}
/*Botões paginação/colunas grid*/
.bootgrid-header .btn-default {
  color: var(--color-9);
}
  /*Hover botões grid*/
  .bootgrid-header .btn-default:hover {
    color: var(--color-55);
  }
/*Letras dropdown paginação*/
.bootgrid-header .dropdown-menu > li {
  color: var(--color-47);
}
/*Letras dropdown paginação ativa*/
.bootgrid-header .dropdown .active > .dropdown-item {
  color: var(--color-1);
}
/*Fundo grid sem resultados*/
.bootgrid-table td.loading, .bootgrid-table td.no-results {
  background: var(--color-65) !important;
}
/*Fundo da página*/
.card {
  background-color: var(--color-10);
}

  .card.card-default {
    border: 1px solid var(--color-11);
  }

.card-flat {
  border: 1px solid var(--color-11);
}
/*SubTítulos dos páginas*/
.bg-gray-lighter {
  background-color: var(--color-8);
  color: var(--color-9);
}
/*Ícone dos botões tela login*/
.bg-gray-light {
  color: var(--color-24) !important;
}
/*Borda*/
.bordalight {
  border: 1px solid var(--color-11);
}
/*Borda left*/
.bordalightLeft {
  border-left: 1px solid var(--color-11);
}
/*Inputs*/
.form-control {
  background-color: var(--color-25);
  color: var(--color-19);
  border: 1px solid var(--color-16);
}

  .form-control:disabled, .form-control[readonly] {
    background-color: var(--color-12);
    color: var(--color-48);
  }

  .form-control:focus {
    background-color: var(--color-25);
    color: var(--color-19);
    border-color: var(--color-1);
  }

  .form-control::placeholder {
    color: var(--color-62);
  }
/*form-control sem borda*/
.form-control-semBorda {
  border-color: var(--color-67);
}

  .form-control-semBorda:focus {
    border-color: var(--color-67);
  }
/*Mesma cor fundo do form-control*/
.backgroundIgualDoFormControl {
  background-color: var(--color-25);
}
/*Input-group with-focus com class with-focus(tem na tela login)*/
.input-group.with-focus .form-control:focus + .input-group-append > .input-group-text {
  border-color: var(--color-1);
}
/*Cor preenchimento automático usuário e senha login*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--color-49) inset !important;
}
/*Grupo de botões SearchTextBox*/
.input-group-append {
  background-color: var(--color-12);
  border-radius: 0.25rem;
}
/*Cor fundo input cores*/
#colordatalabels, #bordercolordatalabels, #backgroundcolordatalabels {
  background-color: var(--color-12);
}
/*Cor fundo input cores Dashboard (Preferências Usuário)*/
.colordatalabels, .bordercolordatalabels, .backgroundcolordatalabels {
  background-color: var(--color-12);
}
/*Combobox*/
.custom-select {
  background-color: var(--color-25);
  color: var(--color-50);
  border: 1px solid var(--color-16);
}

  .custom-select:focus, .custom-select:hover {
    border-color: var(--color-1);
    box-shadow: 0 0 0 0;
  }
/*Combobox idioma tela Login*/
.ulcustomCombobox {
  background-color: var(--color-12);
  color: var(--color-50);
  border: 1px solid var(--color-67);
}

  .ulcustomCombobox li:hover {
    background-color: var(--color-51);
    color: var(--color-9);
  }
/*Itens rotina configurar atalhos personalizados*/
.itemMenu {
  background-color: var(--color-10);
}

  .itemMenu:hover {
    background-color: var(--color-45);
  }

.itemMenuPrincipal {
  background-color: var(--color-10);
}

  .itemMenuPrincipal:hover {
    background-color: var(--color-45);
  }

.divIcone {
  border: 0.5px solid var(--color-52);
}

  .divIcone:hover {
    background-color: var(--color-64);
    color: var(--color-63);
  }
/*Botão fechar modal*/
.close {
  color: var(--color-9);
  text-shadow: 0 0 0 var(--color-9);
}

  .close:hover {
    color: var(--color-9);
  }
/*Cor do texto Logout*/
.user-block-role > a {
  color: var(--color-1) !important;
}
/*Fundo preto (usado nas TreeViews)*/
.backgroundColorTreeView {
  background-color: var(--color-10) !important;
  border: 1px solid var(--color-11);
}
/*Cor > TreeView*/
.gj-tree-material-icons-expander {
  color: var(--color-53);
}
/*Cor texto TreeView*/
ul.gj-list-md li [data-role="display"] {
  color: var(--color-9) !important;
}
/*Cor linha selecionada TreeView*/
.gj-list-md-active {
  background-color: var(--color-54) !important;
}
/*Cor linha selecionada TreeView filiais*/
.corLinhaFilialIdLogout {
  background-color: var(--color-54);
}

.link {
  color: var(--color-9);
}
/*Cor do texto mensagens de alarmes do cabeçalho*/
.media-body > a {
  color: var(--color-9);
}
/*Dropdown-menu*/
.dropdown-menu {
  background-color: var(--color-10);
  color: var(--color-9);
  border: 1px solid var(--color-56) !important;
}

  .dropdown-menu > a {
    cursor: pointer;
  }

.dropdown-item {
  color: var(--color-9);
}

  .dropdown-item:hover {
    background-color: var(--color-45);
    color: var(--color-9);
  }

.dropdown-divider {
  border-top: 1px solid var(--color-11) !important;
}
/*Dropdown-menu pesquisa do cabeçalho*/
.topnavbar .dropdown .dropdown-menu {
  background-color: var(--color-10);
}

.dropdownUl .dropdownUl .dropdownUl {
  border: 1px solid var(--color-79);
  background-color: var(--color-10);
  color: var(--color-9);
}

.dropdownUl .dropdownUl {
  border: 1px solid var(--color-56);
  background-color: var(--color-10);
  color: var(--color-9);
}

.dropdownUl {
  background-color: var(--color-10);
  color: var(--color-9);
}

  .dropdownUl .dropdownLi a:hover {
    color: var(--color-1);
  }

/*Cabeçalho e rodapé modal tom mais escuro*/
.modal-header {
  background-color: var(--color-57);
  border-bottom: 1px solid var(--color-11);
}

.modal-footer {
  background-color: var(--color-57);
  border-bottom: 1px solid var(--color-11);
}

.card-header {
  border-bottom: 1px solid var(--color-11);
  background-color: var(--color-57);
}

.card-footer {
  background-color: var(--color-57);
}

/*NNF*/
.breadcrumb {
  background-color: var(--color-27);
  color: var(--color-9);
}

.breadcrumb-item {
  opacity: 0.3;
}

  .breadcrumb-item.active {
    color: var(--color-9);
    opacity: 1;
  }

/*Dashboard*/
.bordaDashboard {
  box-shadow: 0.1rem 0.1rem 0.3rem 0px var(--color-68);
}

/*Accordion*/
.accordion .card-header p:hover {
  color: var(--color-1);
}

.accordionTextColor {
  color: var(--color-1);
}

.accordion .collapse {
  border: 1px solid var(--color-58);
}

.accordion .card-header {
  border: none;
}

/*Mensagens IAChat*/
.messageUser {
  border-color: var(--color-1);
}

.bordalightColor {
  border: 1px solid var(--color-1);
}

/*Dropdown que abre a partir de um botão*/
a:not([href]):not([tabindex]) {
  color: var(--color-9);
}

/*Nav-tabs (tem no planejamento de serviços/botão gerar requisição)*/
.nav-tabs {
  border-bottom: 1px solid var(--color-26);
}

  .nav-tabs > .nav-item > .nav-link {
    color: var(--color-9);
    background-color: var(--color-27);
    border: 1px solid var(--color-26);
  }

    .nav-tabs > .nav-item > .nav-link.active {
      color: var(--color-1);
      border: 1px solid var(--color-1);
    }

/*Cor para destacar uma linha seguindo o tema*/
.rowselected,
.row-selected {
  background-color: var(--color-2) !important;
}

/*Borda note-editor seguindo tela escolhido*/
.note-editor:focus {
  border: 1px solid var(--color-1);
}

/*Historico de OS - bordas*/
.card-obs {
  border: 1px solid var(--color-11);
}

.card-lateral .card-body {
  border: 1px solid var(--color-11);
}

.dados .card-body {
  border: 1px solid var(--color-11);
}

/*Loader aplicado no input do ChatIA (3 bolinhas)*/
.loader {
  color: var(--color-9);
}

/*Barra de rolagem personalizada - cores*/
::-webkit-scrollbar-track {
  background: var(--color-65);
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-59);
}

/*Encontro do final do overflow-x com overflow-y */
::-webkit-scrollbar-corner {
  background-color: var(--color-10);
}

/*Cor fundo para selecionar cor na configuração do Calendário OS: Configurações Gerais - Ordem de Serviço - Geral*/
.formControl-color {
  background-color: var(--color-10);
}

/*Spinner de carregamento das telas*/
.spinner-grow {
  color: var(--color-1);
}

#spinner:before {
  border-top-color: var(--color-1);
}

/*Spinner geral - cor fundo*/
.spinnerBar {
  background-color: var(--color-60);
}

/*Cor botão seguindo tema atual*/
.bg-temaAtual {
  color: var(--color-1) !important;
}

/*Histórico de OS: cor dos > seguindo o tema*/
.tree-engeman a {
  color: var(--color-1);
}

/*Botão que direciona para a respectiva O.S. na tela: Aplicação > Histórico de O.S.*/
.ir-para-tela-os-icon {
  color: var(--color-1) !important;
}

/*Contador de alertas da Navbar*/
#navbarButtonsRight > #alertBar > #alertcount > .badge {
  background-color: var(--color-5);
}

/*Cor das mensagens de alerta seguindo cor do tema*/
.alert-notificationMessage {
  color: var(--color-9);
  background-color: var(--color-1);
  border-color: var(--color-3);
}

.textAlert-notificationMessage {
  color: var(--color-1);
}

/*Cor de fundo das notificações Toast DevExpress (Seguindo as cores dos temas)*/
.dx-toast-success {
  background-color: rgba(63, 176, 124, 1) !important;
}

.dx-toast-error {
  background-color: rgba(244, 71, 51, 1) !important;
}

.dx-toast-warning {
  background-color: rgba(255, 149, 3, 1) !important;
}

.dx-toast-info {
  background-color: rgba(38, 182, 169, 1) !important;
}

/*Colorir o fundo de acordo com o tema dos inputs tipo checkbox (Exemplo: Configurar atalhos personalizados)*/
input[type="checkbox"] {
  accent-color: var(--color-1);
}

/*Campo de multiseleção (tem nas Configurações gerais -> SS multiple_CORRIGESS)*/
.multiselect {
  background-color: var(--color-25);
  color: var(--color-50);
  border: 1px solid var(--color-16);
}

/*Popup de informação das Interações*/
.popover {
  /*box-shadow: 0 0 0 #000;
  border-color: #eee;
  border-bottom: 2px solid #e4eaec;*/
  background-color: var(--color-25);
  color: var(--color-19);
  border: 1px solid var(--color-16);
}

/*Título popup de informação das Interações*/
.popover-header {
  background-color: var(--color-25);
  color: var(--color-19);
}

/*Cor do ícones das mensagens Interações seguindo as cores dos temas*/
.timeline > li > .timeline-badge.primary,
.timeline-alt > li > .timeline-badge.primary {
  background-color: rgba(38, 182, 169, 1);
  color: var(--color-23);
}

.timeline > li > .timeline-badge.success,
.timeline-alt > li > .timeline-badge.success {
  background-color: rgba(63, 176, 124, 1);
  color: var(--color-23);
}

.timeline > li > .timeline-badge.warning,
.timeline-alt > li > .timeline-badge.warning {
  background-color: rgba(255, 149, 3, 1);
  color: var(--color-23);
}

.timeline > li > .timeline-badge.danger,
.timeline-alt > li > .timeline-badge.danger {
  background-color: rgba(244, 71, 51, 1);
  color: var(--color-23);
}

.timeline > li > .timeline-badge.info,
.timeline-alt > li > .timeline-badge.info {
  background-color: rgba(139, 114, 229, 1);
  color: var(--color-23);
}

/*Hiperlink seguindo a cor do tema*/
a {
  color: var(--color-3);
}

  /*Hover hiperlink seguindo a cor do tema*/
  a:hover {
    color: var(--color-1);
  }

/*Botões do cabeçalho da rotina Calendário de OS*/
.fc .fc-button {
  border: 1px solid var(--color-3);
}

.fc .fc-button-primary {
  color: var(--color-23);
  color: var(--fc-button-text-color, var(--color-23));
  background-color: var(--color-1);
  background-color: var(--fc-button-bg-color, var(--color-1));
  border-color: var(--color-3);
  border-color: var(--fc-button-border-color, var(--color-3));
}

  .fc .fc-button-primary:hover {
    color: var(--color-23);
    color: var(--fc-button-text-color, var(--color-23));
    background-color: var(--color-4);
    background-color: var(--fc-button-hover-bg-color, var(--color-4));
    border-color: var(--color-5);
    border-color: var(--fc-button-hover-border-color, var(--color-5));
  }

  .fc .fc-button-primary:focus {
    box-shadow: 0 0 0 0.2rem rgba(76, 91, 106, 0.5);
  }

  .fc .fc-button-primary:not(:disabled):active,
  .fc .fc-button-primary:not(:disabled).fc-button-active {
    color: var(--color-23);
    color: var(--fc-button-text-color, var(--color-23));
    background-color: var(--color-4);
    background-color: var(--fc-button-bg-color, var(--color-4));
    border-color: var(--color-5);
    border-color: var(--fc-button-border-color, var(--color-5));
  }

    .fc .fc-button-primary:not(:disabled):active:focus,
    .fc .fc-button-primary:not(:disabled).fc-button-active:focus {
      box-shadow: 0 0 0 0.2rem rgba(76, 91, 106, 0.5);
    }

.fc-theme-standard .fc-popover {
  border: 1px solid var(--color-38);
  border: 1px solid var(--fc-border-color, var(--color-38));
  background: var(--color-65);
  background: var(--fc-page-bg-color, var(--color-65));
}

.fc-theme-standard .fc-popover-header {
  background: rgba(208, 208, 208, 0.3);
  background: var(--fc-neutral-bg-color, rgba(208, 208, 208, 0.3));
}

/*Focus componente de tags*/
.tagify--focus {
  border-color: var(--color-1) !important;
}

.bordaSeguindoTema {
  box-shadow: 0 0 0 0.1rem var(--color-1) !important;
  border: 1px solid var(--color-1);
}

.linhaSeparadorCardBody {
  border-bottom: 1px solid var(--color-58);
  padding-top: 0.8rem;
  width: 100%;
}

/*Borda da imagem seguindo a cor do tema*/
#tdDxic {
  border: 1px solid var(--color-11) !important;
}
