/*Tema vermelho com body branco*/
/* ========================================================================
   Component: layout
 ========================================================================== */
/*Fundo*/
body, .wrapper .section-container {
  background-color: #f5f7fa;
}

.wrapper .aside-container {
  background-color: #f5f7fa;
}

/*Cabeçalho das páginas*/
.content-heading {
  background-color: #fff;
  color: #656565;
  border-bottom: 1px solid #d9d9d9;
}

/*Rodapé*/
.footer-container {
  background-color: #fff;
  color: #656565;
  border-top: 1px solid #d9d9d9 !important;
}

/* ========================================================================
   Component: top-navbar
 ========================================================================== */
.topnavbar {
  background-color: #F44733;
  background-image: linear-gradient(to right, #FF7464 0%, #F44733 100%);
}

@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 rgba(244, 71, 51, 0.5) inset;
  }
}

.topnavbar .navbar-nav > .nav-item > .navbar-text {
  color: #fff;
}

.topnavbar .navbar-nav > .nav-item > .nav-link,
.topnavbar .navbar-nav > .nav-item.show > .nav-link {
  color: #fff;
}

  .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: #656565;
  }

.topnavbar .dropdown-item.active, .topnavbar .dropdown-item:active {
  background-color: #F44733;
}

/* ========================================================================
   Component: sidebar (menu esquerdo)
 ========================================================================== */
.sidebar {
  background-color: #fff;
}

.sidebar-nav > li > a, .sidebar-nav > li > .nav-item {
  color: #505050;
}

  .sidebar-nav > li > a:focus, .sidebar-nav > li > a:hover, .sidebar-nav > li > .nav-item:focus, .sidebar-nav > li > .nav-item:hover {
    color: #F44733;
  }

  .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: #F44733;
}

.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: #fff;
  color: #F44733;
}

  .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: #F44733;
  }

.sidebar-nav > li.active {
  border-left-color: #F44733;
}

.sidebar-subnav {
  background-color: #fff;
}

  .sidebar-subnav > .sidebar-subnav-header {
    color: #505050;
  }

  .sidebar-subnav > li > a:focus, .sidebar-subnav > li > a:hover, .sidebar-subnav > li > .nav-item:focus, .sidebar-subnav > li > .nav-item:hover {
    color: #F44733;
  }

  .sidebar-subnav > li.active > a, .sidebar-subnav > li.active > .nav-item {
    color: #F44733;
  }

    .sidebar-subnav > li.active > a:after, .sidebar-subnav > li.active > .nav-item:after {
      border-color: #F44733;
      background-color: #F44733;
    }

.sidebar:after {
  background: #d9d9d9;
}

.divRelatorioSidebar {
  padding: 6px 15px;
  cursor: pointer;
}

  .divRelatorioSidebar:focus, .divRelatorioSidebar:hover {
    color: #F44733;
  }

.br, .b, .ba {
  border-right: 1px solid #d9d9d9;
}

.bl, .b, .ba {
  border-left: 1px solid #d9d9d9;
}

.bt, .b, .ba {
  border-top: 1px solid #d9d9d9;
}

.bb, .b, .ba {
  border-bottom: 1px solid #d9d9d9;
}

/* ========================================================================
   Component: offsidebar (menu direito)
 ========================================================================== */
.offsidebar {
  border-left: 1px solid #d9d9d9 !important;
  background-color: #fff;
  color: #505050;
}

/* ========================================================================
   Component: list-group (Menus edição)
 ========================================================================== */
.list-group, .list-group-item {
  background-color: #fff;
  color: #656565;
}

.list-group-item-action:hover {
  background-color: #ededed;
}

.list-group-item.active {
  background-color: #F44733;
  border-color: #F44733;
  color: #fff;
}

/* ========================================================================
   Component: btn-padrao (Background-color de acordo com o tema, cor das letras branca, hover de acordo com o tema)
 ========================================================================== */
.btn-padrao {
  color: #fff;
  background-color: #F44733;
  border-color: #DB3F2D;
}

  .btn-padrao:hover {
    color: #fff;
    background-color: #C33828;
    border-color: #AA3123;
  }

  .btn-padrao:focus, .btn-padrao.focus {
    box-shadow: 0 0 0 0.2rem rgba(244, 71, 51, 0.5);
  }

  .btn-padrao:not(:disabled):not(.disabled):active, .btn-padrao:not(:disabled):not(.disabled).active,
  .show > .btn-padrao.dropdown-toggle {
    color: #fff;
    background-color: #C33828;
    border-color: #C33828;
  }

    .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 rgba(244, 71, 51, 0.5);
    }

/*Checkbox*/
.c-checkbox input[type=checkbox]:checked + span {
  background-color: #F44733;
  border-color: #C33828;
}

.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: #ddd;
  border-color: #ddd;
  color: #656565;
  pointer-events: none;
  opacity: 0.65;
}

.c-checkbox:hover span,
.c-radio:hover span {
  border-color: #F44733;
}

/*Btn-default do rodapé*/
.modal-footer .btn-default {
  background-color: #e0e0e0;
  box-shadow: 0 0 0 0.5px #838383 !important;
}

  .modal-footer .btn-default:not([disabled]):hover {
    background-color: rgba(0, 0, 0, 0.05);
    box-shadow: 0 0 0 0.5px #505050 !important;
  }

/* ========================================================================
   Component: btn-outline (Background-color transparente, cor das letras de acordo com o tema, hover de acordo com o tema)
 ========================================================================== */
.btn-outline {
  color: #DB3F2D;
  border-color: #DB3F2D;
}

  .btn-outline:hover {
    color: #fff;
    background-color: #F44733;
    border-color: #DB3F2D;
  }

  .btn-outline:focus, .btn-outline.focus {
    box-shadow: 0 0 0 0.2rem #C33828;
  }

  .btn-outline.disabled, .btn-outline:disabled {
    color: #C33828;
    background-color: transparent;
  }

  .btn-outline:not(:disabled):not(.disabled):active, .btn-outline:not(:disabled):not(.disabled).active,
  .show > .btn-outline.dropdown-toggle {
    color: #fff;
    background-color: #F44733;
    border-color: #DB3F2D;
  }

    .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 #C33828;
    }

/* ========================================================================
   Component: calendar-app
 ========================================================================== */
.calendar-app .fc-button {
  background-color: #fff;
  border-color: #dde6e9;
  color: #333;
}

  .calendar-app .fc-button:hover {
    background-color: #edf1f2;
  }

  .calendar-app .fc-button:not(:disabled):not(.disabled):active, .calendar-app .fc-button:not(:disabled):not(.disabled).active,
  .calendar-app .show > .dropdown-toggle.fc-button {
    background-color: #edf1f2;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  }

/* ========================================================================
   Component: btn-secondary (Background-color branco, cor das letras preta, hover cinza claro) usado nos botões pesquisa
 ========================================================================== */
.btn-secondary {
  background-color: #fff;
  border-color: #d9d9d9 !important;
  color: #505050;
}

  .btn-secondary:hover {
    color: #505050;
    background-color: #ededed;
  }

  .btn-secondary:focus {
    box-shadow: 0 0 0 0 !important;
  }

  .btn-secondary:disabled {
    background-color: #ededed;
    color: #939393;
    pointer-events: none;
  }

  .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, .show > .btn-secondary.dropdown-toggle {
    background-color: #ededed;
    box-shadow: 0 0 0 0 !important;
  }

/* ========================================================================
   Component: btn-outline-secondary (Background-color cinza, cor das letras cinza escuro, hover de acordo com o tema para borda e letras)
 ========================================================================== */
.btn-outline-secondary {
  border-color: #d9d9d9 !important;
  color: #a1a1a1;
}

  .btn-outline-secondary:hover {
    color: #C33828;
    background-color: #fff !important;
    border-color: #C33828 !important;
  }

  .btn-outline-secondary:focus {
    color: #C33828;
    box-shadow: 0 0 0 0 !important;
    border-color: #C33828 !important;
    background-color: #ededed !important;
  }

  .btn-outline-secondary:disabled {
    background-color: #ededed;
    color: #939393;
    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: #ededed;
    color: #C33828 !important;
    border-color: #C33828 !important;
  }

/* ========================================================================
   Component: botões
 ========================================================================== */
/*Botões do controle de acesso (Cor texto, sem borda)*/
.btn-icon {
  color: #656565;
}

  .btn-icon:hover {
    color: #F44733;
  }

  .btn-icon:disabled {
    pointer-events: none;
  }

  .btn-icon:focus {
    box-shadow: 0 0 0 0;
  }

/*Botão pesquisar cabeçalho*/
.btn-pesquisar {
  color: #fff;
}

/*Botões do SearchTextBox (mostrar somente itens da filial corrente) e do Grid (exibir todos os registros)*/
.btn-light-notsel {
  color: #656565;
  background-color: #fff;
  border-color: #fff;
}

  .btn-light-notsel:disabled {
    pointer-events: none;
  }

.btn-light-select {
  color: #656565;
  background-color: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.2);
}

  .btn-light-select:hover {
    background-color: rgba(0, 0, 0, 0.05);
    border-color: #cfdbe2;
  }

  .btn-light-select:disabled {
    pointer-events: none;
  }

/* ========================================================================
   Component: swal-modal
 ========================================================================== */
.swal-modal {
  background-color: #fff !important;
}

.swal-content__input:focus {
  border-color: #F44733;
}

/* ========================================================================
   Component: swal-button
 ========================================================================== */
.swal-button {
  box-shadow: 0 0 0 0;
}

.swal-button--confirm {
  background-color: #F44733;
  border-color: #F44733;
  box-shadow: 0 0 0 0.2px #F44733 !important;
}

  .swal-button--confirm:not([disabled]):hover {
    background-color: #C33828;
    border-color: #C33828;
    box-shadow: 0 0 0 0.5px #F44733 !important;
  }

.swal-button.swal-button--confirm:active {
  box-shadow: 0 0 0 0.2rem rgba(244, 71, 51, 0.5) !important;
}

.swal-button.swal-button--cancel {
  background-color: #e0e0e0;
  box-shadow: 0 0 0 0.5px #838383 !important;
}

  .swal-button.swal-button--cancel:not([disabled]):hover {
    background-color: rgba(0, 0, 0, 0.05);
    box-shadow: 0 0 0 0.5px #505050 !important;
  }

/* ========================================================================
   Component: swal-fire
 ========================================================================== */
.swal2-styled.swal2-confirm {
  color: #fff;
  background-color: #F44733 !important;
  border-color: #F44733 !important;
  font-size: 14px !important;
}

  .swal2-styled.swal2-confirm:active {
    color: #fff;
    background-color: #C33828;
    border-color: #C33828;
  }

  .swal2-styled.swal2-confirm:not([disabled]):hover {
    color: #fff;
    background-color: #C33828;
    border-color: #C33828;
    box-shadow: 0 0 0 3px #F44733;
  }

  .swal2-styled.swal2-confirm:focus {
    box-shadow: 0 0 0 0;
  }

.swal2-styled.swal2-cancel {
  color: #555;
  background-color: #efefef;
  font-size: 14px !important;
}

  .swal2-styled.swal2-cancel:not([disabled]):hover {
    background-color: #e8e8e8;
    color: #C33828;
    box-shadow: 0 0 0 2px #C33828;
  }

  .swal2-styled.swal2-cancel:active {
    background-color: #d7d7d7;
  }

  .swal2-styled.swal2-cancel:focus {
    box-shadow: 0 0 0 2px #fff;
  }

/* ========================================================================
   Component: float button
 ========================================================================== */
.fab button.main {
  background-color: #F44733;
  border-color: #F44733;
}

/* ========================================================================
   Component: borda padrao
 ========================================================================== */
.borderColor {
  border-color: #F44733;
}

  .borderColor:focus {
    border-color: #F44733;
  }

  .borderColor:active {
    border-color: #F44733;
  }

  .borderColor:hover {
    border-color: #F44733;
  }

/* ========================================================================
   Component: DevExtreme
 ========================================================================== */
/*Componente data - borda*/
.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: #F44733 !important;
}

/*Cor fundo ao selecionar linha no dropdown tabelas Datagrid*/
.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) {
  background-color: #F44733 !important;
  color: #fff;
}

/*Borda ao selecionar linha no dropdown tabelas Datagrid*/
.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 #F44733 !important;
  border-bottom: 1px solid #F44733 !important;
}

/*Borda ao clicar/focar no campo tabelas Datagrid*/
.dx-datagrid-focus-overlay {
  border: 2px solid #F44733 !important;
}

/*Borda após selecionar valor no campo tabelas Datagrid*/
.dx-datagrid-rowsview .dx-data-row .dx-cell-modified.dx-cell-modified::after, .dx-datagrid-rowsview .dx-data-row .dx-cell-modified.dx-datagrid-invalid::after {
  border-color: rgb(244 71 51 / 50%) !important;
}

/* ========================================================================
   Diversos
 ========================================================================== */
/*Cor do cabeçalho da coluna de botões fixa do grid pesquisa (SearchTextBox)**/
.fixed-header-right {
  background-color: #fff;
}

/*Cor do cabeçalho da coluna de botões fixa do grid pesquisa (Expression)**/
.fixed-header-left {
  background-color: #fff;
}

/*Cabeçalho do grid*/
.fixedHeader {
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

/*Cor das linhas grid*/
.table {
  background-color: #fff;
}

  /*Linha do cabeçalho (grids)*/
  .table thead tr {
    border-bottom: 1px solid #eee;
  }

  /*Linha da tabela (grids)*/
  .table tbody tr,
  .table.dataTable tbody tr {
    background-color: #fff;
    border-bottom: 1px solid #eee;
  }

    /*Hover linha da tabela (grids)*/
    .table tbody tr:hover {
      background-color: #ededed !important;
      color: #656565;
    }

    /*Segunda cor de fundo linha da tabela*/
    .table tbody tr:nth-of-type(odd) {
      background-color: #fafafa;
    }

  /*Fundo do checkbox - título da tabela (grids)*/
  .table thead tr > .select-cell {
    background-color: #fff !important;
  }

  /*Removendo bordas tabela*/
  .table th, .table td {
    border-top: none;
  }

/*Texto informação página do grid(mostrando...)*/
.infos {
  color: #656565;
}

/*Hover do check do grid*/
.bootgrid .table > thead > tr > .select-cell:hover {
  background-color: #fff !important;
}

/*Letras dropdown paginação ativa*/
.bootgrid-header .dropdown .active > .dropdown-item {
  color: #F44733;
}

/*Borda dos inputs*/
.form-control {
  border: 1px solid #d9d9d9;
}

  .form-control:focus {
    border-color: #F44733;
  }

  /*Inputs desabilitados*/
  .form-control:disabled, .form-control[readonly] {
    background-color: #edf1f2;
  }

/*form-control sem borda (cor branca)*/
.form-control-semBorda {
  border-color: #FFFFFF;
}

  .form-control-semBorda:focus {
    border-color: #FFFFFF;
  }

/*form-control com outra cor de borda*/
.backgroundIgualDoFormControl {
  border: 1px solid #d9d9d9;
}

/*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: #F44733;
}

/*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 #dde6e9 inset !important;
}

/*Borda do combobox*/
.custom-select:focus, .custom-select:hover {
  border-color: #F44733;
  box-shadow: 0 0 0 0;
}

/*Combobox idioma tela Login*/
.ulcustomCombobox {
  background-color: #fff;
  color: #656565;
  border: 1px solid #dde6e9;
}

  .ulcustomCombobox li:hover {
    background-color: #dde6e9;
  }

/*Itens rotina configurar atalhos personalizados*/
.itemMenu {
  background-color: white;
}

  .itemMenu:hover {
    background-color: #d5d8d9;
  }

.itemMenuPrincipal {
  background-color: white;
}

  .itemMenuPrincipal:hover {
    background-color: #d5d8d9;
  }

.divIcone {
  border: 0.5px solid #cbcfd0;
}

  .divIcone:hover {
    background-color: #656565;
    color: white;
  }

/*Cor do texto Logout*/
.user-block-role > a {
  color: #F44733 !important;
}

/*Borda*/
.bordalight {
  border: 1px solid rgba(0, 0, 0, 0.1);
}

/*Fundo preto (usado nas TreeViews)*/
.backgroundColorTreeView {
  border: 1px solid #d9d9d9;
}

/*Cor > TreeView*/
.gj-tree-material-icons-expander {
  color: #d9d9d9;
}

/*Cor linha selecionada TreeView filiais*/
.corLinhaFilialIdLogout {
  background-color: #edf1f2;
}

/*Hover botões grid*/
.bootgrid-header .btn-default:hover {
  color: #cfdbe2;
}

.link {
  color: #656565;
}

/*Cor do texto mensagens de alarmes do cabeçalho*/
.media-body > a {
  color: #656565;
}

/*Dropdown-menu*/
.dropdown-item:hover {
  background-color: #edf1f2;
}

.dropdown-menu > a {
  cursor: pointer;
}

/*Dropdown-menu pesquisa do cabeçalho*/
.dropdownUl .dropdownUl .dropdownUl {
  border: 1px solid #fff;
  background-color: #fff;
}

.dropdownUl .dropdownUl {
  border: 1px solid #d9d9d9;
  background-color: #fff;
}

.dropdownUl {
  background-color: #fff;
}

  .dropdownUl
  .dropdownLi
  a:hover {
    color: #F44733;
  }

/*Cabeçalho e rodapé modal tom mais escuro*/
.modal-header {
  background-color: rgba(0, 0, 0, 0.03);
}

.modal-footer {
  background-color: rgba(0, 0, 0, 0.03);
}

.card-header {
  border-bottom: 1px solid #d9d9d9;
  background-color: rgba(0, 0, 0, 0.03);
}

.dropdown-divider {
  border-top: 1px solid #d9d9d9;
}

.card.card-default {
  border: 1px solid #d9d9d9;
}

.card-flat {
  border: 1px solid #d9d9d9;
}

/*NNF*/
.breadcrumb {
  background-color: #fff;
  color: #d9d9d9;
}

.breadcrumb-item {
  opacity: 0.9;
}

  .breadcrumb-item.active {
    color: #656565;
    opacity: 1;
  }

/*Dashboard*/
.bordaDashboard {
  box-shadow: 0.1rem 0.1rem 0.3rem 0px #838383;
}

/*Accordion*/
.accordion .card-header p:hover {
  color: #F44733;
}

.accordionTextColor {
  color: #F44733;
}

.accordion .collapse {
  border: 1px solid rgba(0, 0, 0, 0.05);
}

/*Mensagens IAChat*/
.messageUser {
  border-color: #F44733;
}

.bordalightColor {
  border: 1px solid #F44733;
}

/*Nav-tabs (tem no planejamento de serviços/botão gerar requisição)*/
.nav-tabs > .nav-item > .nav-link {
  color: #656565;
  border: 1px solid #dee2e6;
}

  .nav-tabs > .nav-item > .nav-link.active {
    color: #F44733;
    border: 1px solid #F44733;
  }

/*Cor para destacar uma linha seguindo o tema*/
.rowselected {
  background-color: #FF7464 !important;
  color: #fff;
}

/*Borda note-editor seguindo tela escolhido*/
.note-editor:focus {
  border: 1px solid #F44733;
}

/*Historico de OS - bordas*/
.card-obs {
  border: 1px solid #d9d9d9;
}

.card-lateral .card-body {
  border: 1px solid #d9d9d9;
}

.dados .card-body {
  border: 1px solid #d9d9d9;
}

/*Loader aplicado no input do ChatIA (3 bolinhas)*/
.loader {
  color: #656565;
}

/*Barra de rolagem personalizada - cores*/
::-webkit-scrollbar-track {
  background: #ffffff;
}

::-webkit-scrollbar-thumb {
  background-color: #cbcfd0;
}

/*Encontro do final do overflow-x com overflow-y */
::-webkit-scrollbar-corner {
  background-color: #ffffff;
}

/*Cor fundo para selecionar cor na configuração do Calendário OS: Configurações Gerais - Ordem de Serviço - Geral*/
.formControl-color {
  background-color: #fff;
}