:root {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

/* O seletor ocupa o mesmo fluxo dos demais itens e nao altera a altura do cabecalho. */
.theme-switch-item {
  display: block;
  height: 56px;
  padding: 9px 9px 0 4px;
}

.theme-switch {
  position: relative;
  display: block;
  width: 36px;
  height: 36px;
  padding: 0;
  color: #fff;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: none;
  transition: background-color 180ms ease, border-color 180ms ease;
}

.theme-switch:hover,
.theme-switch:focus {
  background-color: rgba(0, 0, 0, 0.26);
  border-color: rgba(255, 255, 255, 0.75);
}

.theme-switch:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 2px !important;
}

.theme-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 24px;
  height: 24px;
  font-family: Arial, sans-serif;
  font-size: 21px;
  font-style: normal;
  font-weight: normal;
  line-height: 24px;
  text-align: center;
  transform: translate(-50%, -50%);
  transition: opacity 180ms ease, transform 180ms ease;
}

.theme-icon-sun {
  color: #fff;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-45deg) scale(0.65);
}

.theme-icon-moon {
  color: #fff;
  opacity: 1;
}

html[data-theme="dark"] .theme-icon-sun {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0) scale(1);
}

html[data-theme="dark"] .theme-icon-moon {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(45deg) scale(0.65);
}

/* Paleta grafite mais clara, mantendo intactas as cores e imagens institucionais. */
html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] .portal-logged-app,
html[data-theme="dark"] .portal-logged-app .app-content,
html[data-theme="dark"] .portal-logged-app .app-content > .box,
html[data-theme="dark"] .portal-logged-app .app-content > .box > .box-row,
html[data-theme="dark"] .portal-logged-app .app-content > .box > .box-row > .box-cell {
  color: #f1f3f6;
  background-color: #292e37;
}

html[data-theme="dark"] .portal-logged-app .box-inner.padding {
  background-color: transparent;
}

html[data-theme="dark"] .portal-home-background {
  background-color: #454c57;
}

html[data-theme="dark"] .portal-home-background img {
  opacity: 0.42;
  filter: contrast(0.72) saturate(0.75);
  transition: opacity 180ms ease, filter 180ms ease;
}

html[data-theme="dark"] .app-aside .left,
html[data-theme="dark"] .app-aside .box,
html[data-theme="dark"] .app-aside .box-row,
html[data-theme="dark"] .app-aside .box-cell,
html[data-theme="dark"] .app-aside .box-inner,
html[data-theme="dark"] .app-aside .bg-white {
  color: #e9ecf1 !important;
  background-color: #303640 !important;
}

html[data-theme="dark"] .app-aside .nav > li > a {
  color: #e0e4ea;
}

html[data-theme="dark"] .app-aside .nav > li > a:hover,
html[data-theme="dark"] .app-aside .nav > li > a:focus,
html[data-theme="dark"] .app-aside .nav > li.active > a,
html[data-theme="dark"] .app-aside .nav > li.active-nocolor > a,
html[data-theme="dark"] .app-aside .nav-sub > li.active > a {
  color: #fff !important;
  background-color: #71305b !important;
}

html[data-theme="dark"] .app-aside .nav-sub {
  background-color: #292e37;
}

html[data-theme="dark"] .projects-menu-item {
  border-top-color: #565f6d;
}

html[data-theme="dark"] .projects-menu-item .projects-menu-icon {
  color: inherit !important;
}

html[data-theme="dark"] .breadcrumb {
  color: #e3e7ed;
  background-color: #353b46;
  border-color: #4b5360;
}

html[data-theme="dark"] .breadcrumb a,
html[data-theme="dark"] .breadcrumb .active {
  color: #e3e7ed;
}

html[data-theme="dark"] .panel,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .well,
html[data-theme="dark"] pre,
html[data-theme="dark"] .tab-content {
  color: #f0f2f5;
  background-color: #343a45;
  border-color: #505865;
}

html[data-theme="dark"] .panel-heading,
html[data-theme="dark"] .panel-footer,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
  color: #fff;
  background-color: #3c434f;
  border-color: #555e6b;
}

html[data-theme="dark"] .dropdown-menu > li > a {
  color: #edf0f4 !important;
}

html[data-theme="dark"] .dropdown-menu > li > a:hover,
html[data-theme="dark"] .dropdown-menu > li > a:focus {
  color: #fff !important;
  background-color: #4a5260;
}

html[data-theme="dark"] label,
html[data-theme="dark"] legend,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
  color: #fff !important;
}

html[data-theme="dark"] #content .box-inner p,
html[data-theme="dark"] #content .box-inner small,
html[data-theme="dark"] #content .box-inner strong,
html[data-theme="dark"] #content .box-inner .panel-title,
html[data-theme="dark"] #content .box-inner .control-label,
html[data-theme="dark"] #content .box-inner [style*="color"]:not(.btn):not(.label) {
  color: #f3f5f8 !important;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] input:not([type="button"]):not([type="submit"]):not([type="reset"]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .select2-selection,
html[data-theme="dark"] .select2-dropdown,
html[data-theme="dark"] .chosen-container .chosen-single,
html[data-theme="dark"] .chosen-container .chosen-choices,
html[data-theme="dark"] .chosen-container .chosen-drop {
  color: #f5f6f8 !important;
  background-color: #2d333d !important;
  border-color: #697383 !important;
}

/* O summernote define color:#000 e background:#fff fixos no proprio CSS da lib. */
html[data-theme="dark"] .note-editor,
html[data-theme="dark"] .note-editable {
  color: #f5f6f8 !important;
  background-color: #2d333d !important;
  border-color: #697383 !important;
}

/* Grifos aplicados pelo backColor do navegador fixam so o fundo; sem isso o texto claro fica ilegivel sobre a cor do grifo. */
html[data-theme="dark"] .note-editable [style*="background-color"],
html[data-theme="dark"] .note-editable font[style*="background-color"] {
  color: #1a1a1a !important;
}

html[data-theme="dark"] .dropdown-display,
html[data-theme="dark"] .dropdown-display-label,
html[data-theme="dark"] .dropdown-main,
html[data-theme="dark"] .dropdown-main ul,
html[data-theme="dark"] .dropdown-main li,
html[data-theme="dark"] .dropdown-clear-all,
html[data-theme="dark"] .multiselect,
html[data-theme="dark"] button.multiselect,
html[data-theme="dark"] .multiselect-container {
  color: #f4f6f8 !important;
  background-color: #2d333d !important;
  border-color: #697383 !important;
}

html[data-theme="dark"] .dropdown-display .placeholder,
html[data-theme="dark"] .dropdown-display-label .placeholder,
html[data-theme="dark"] .dropdown-chose-list,
html[data-theme="dark"] .dropdown-search input {
  color: #d5dae1 !important;
  background-color: transparent !important;
}

html[data-theme="dark"] .dropdown-display:after,
html[data-theme="dark"] .dropdown-display-label:after {
  border-top-color: #dce1e7;
}

html[data-theme="dark"] .dropdown-multiple-label.active .dropdown-display-label:after,
html[data-theme="dark"] .dropdown-multiple-label.active .dropdown-display:after,
html[data-theme="dark"] .dropdown-multiple.active .dropdown-display-label:after,
html[data-theme="dark"] .dropdown-multiple.active .dropdown-display:after,
html[data-theme="dark"] .dropdown-single.active .dropdown-display-label:after,
html[data-theme="dark"] .dropdown-single.active .dropdown-display:after {
  border-bottom-color: #dce1e7;
}

html[data-theme="dark"] .select2-results__option,
html[data-theme="dark"] .chosen-results li {
  color: #eef1f5;
}

html[data-theme="dark"] .select2-container .select2-selection--single .select2-selection__rendered,
html[data-theme="dark"] .select2-container .select2-selection--multiple .select2-selection__choice,
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__rendered,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
  color: #fff !important;
}

html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #444c58 !important;
  border-color: #778292 !important;
}

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__clear,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: #dce1e7 !important;
}

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-top-color: #dce1e7 !important;
}

html[data-theme="dark"] .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-bottom-color: #dce1e7 !important;
}

html[data-theme="dark"] .select2-results__option--highlighted,
html[data-theme="dark"] .chosen-results li.highlighted {
  color: #fff;
  background-color: #71305b !important;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
  border-color: #a9b3c1 !important;
  box-shadow: 0 0 0 2px rgba(169, 179, 193, 0.22);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] .select2-selection__placeholder {
  color: #b7bec8 !important;
  opacity: 1;
}

html[data-theme="dark"] .btn-default {
  color: #f4f5f7 !important;
  background-color: #454c58;
  border-color: #656f7e;
}

html[data-theme="dark"] .btn-default:hover,
html[data-theme="dark"] .btn-default:focus,
html[data-theme="dark"] .btn-default:active {
  color: #fff !important;
  background-color: #525b68 !important;
  border-color: #7b8696 !important;
}

/* Bootstrap pinta as celulas, nao apenas as linhas; por isso os seletores chegam ate td/th. */
html[data-theme="dark"] .table,
html[data-theme="dark"] table.dataTable {
  color: #f3f5f7 !important;
  background-color: #343a45 !important;
}

html[data-theme="dark"] .table > thead > tr > th,
html[data-theme="dark"] table.dataTable > thead > tr > th {
  color: #fff !important;
  background-color: #414955 !important;
  border-color: #697382 !important;
}

html[data-theme="dark"] .table > tbody > tr > td,
html[data-theme="dark"] .table > tbody > tr > th,
html[data-theme="dark"] table.dataTable > tbody > tr > td,
html[data-theme="dark"] table.dataTable > tbody > tr > th {
  color: #f0f2f5 !important;
  background-color: #353c47 !important;
  border-color: #596270 !important;
}

html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td,
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > th,
html[data-theme="dark"] table.dataTable.stripe > tbody > tr.odd > td,
html[data-theme="dark"] table.dataTable.display > tbody > tr.odd > td {
  color: #f5f6f8 !important;
  background-color: #3c4450 !important;
}

html[data-theme="dark"] .table-hover > tbody > tr:hover > td,
html[data-theme="dark"] .table-hover > tbody > tr:hover > th,
html[data-theme="dark"] table.dataTable.hover > tbody > tr:hover > td,
html[data-theme="dark"] table.dataTable.display > tbody > tr:hover > td {
  color: #fff !important;
  background-color: #485260 !important;
}

html[data-theme="dark"] .table .text-muted,
html[data-theme="dark"] table.dataTable .text-muted {
  color: #c5cbd4 !important;
}

/* Permissoes de usuario: diferencia modulos liberados dos bloqueados. */
html[data-theme="dark"] .permissoes tbody tr > td {
  transition: background-color 160ms ease, color 160ms ease, opacity 160ms ease;
}

html[data-theme="dark"] .permissoes tbody tr.permission-disabled > td {
  color: #929ba8 !important;
  background-color: #292e36 !important;
  opacity: 0.72;
}

html[data-theme="dark"] .permissoes tbody tr:not(.permission-disabled) > td {
  color: #f3f5f8 !important;
  background-color: #3a424e !important;
}

html[data-theme="dark"] .permissoes select:disabled,
html[data-theme="dark"] .permissoes .form-control:disabled {
  color: #818b99 !important;
  background-color: #22272e !important;
  border-color: #434b57 !important;
  cursor: not-allowed;
}

html[data-theme="dark"] .permissoes select:not(:disabled) {
  color: #fff !important;
  background-color: #343c47 !important;
  border-color: #758091 !important;
}

html[data-theme="dark"] .permissoes .permission-disabled .ui-checks > i {
  background-color: #252a31;
  border-color: #59616d;
}

/* Tabela de Vendas: componentes proprios desta tela. */
html[data-theme="dark"] .tv-line-title {
  color: #edbfdb !important;
}

html[data-theme="dark"] .tv-group-title {
  color: #fff !important;
  background-color: #85406c !important;
  border-color: #a85e8d !important;
}

html[data-theme="dark"] .tv-group-body,
html[data-theme="dark"] .tv-scroll {
  color: #f4f6f8 !important;
  background-color: #343a45 !important;
}

html[data-theme="dark"] .tv-report,
html[data-theme="dark"] .tv-report th,
html[data-theme="dark"] .tv-report td,
html[data-theme="dark"] .tv-report span,
html[data-theme="dark"] .tv-report .tv-subhead,
html[data-theme="dark"] .tv-report .tv-values {
  color: #fff !important;
}

html[data-theme="dark"] .tv-report .tv-subhead {
  border-color: #7b8593 !important;
}

/* Carregamento deve ficar acima do cabecalho e da linha institucional. */
.modal {
  z-index: 1500 !important;
}

#modal-loading.modal-loading {
  z-index: 1510 !important;
}

#modal-loading.modal-loading .modal-dialog {
  position: relative;
  z-index: 1501;
}

#modal-loading .loading-modal-card {
  height: 100px;
  padding-top: 12px;
}

#modal-loading .loading-gif {
  border-top-color: #a85e8d;
}

.modal-backdrop {
  z-index: 1400 !important;
}

/* Avisos do jquery-confirm precisam acompanhar o tema, nao apenas o backdrop. */
html[data-theme="dark"] .jconfirm .jconfirm-box,
html[data-theme="dark"] .jconfirm.jconfirm-light .jconfirm-box,
html[data-theme="dark"] .jconfirm.jconfirm-white .jconfirm-box {
  color: #f3f5f8 !important;
  background-color: #343a45 !important;
  border-color: #65d59a;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.42);
}

html[data-theme="dark"] .jconfirm .jconfirm-title,
html[data-theme="dark"] .jconfirm .jconfirm-content,
html[data-theme="dark"] .jconfirm .jconfirm-content p,
html[data-theme="dark"] .jconfirm .jconfirm-content div {
  color: #f3f5f8 !important;
}

html[data-theme="dark"] .jconfirm .jconfirm-closeIcon,
html[data-theme="dark"] .jconfirm .jconfirm-closeIcon span,
html[data-theme="dark"] .jconfirm .jconfirm-closeIcon i {
  color: #e7ebf0 !important;
  opacity: 1;
}

html[data-theme="dark"] .jconfirm .jconfirm-box .jconfirm-buttons button.btn-default {
  color: #fff !important;
  background-color: #71305b !important;
}

html[data-theme="dark"] .dataTables_wrapper,
html[data-theme="dark"] .dataTables_info,
html[data-theme="dark"] .dataTables_length,
html[data-theme="dark"] .dataTables_filter {
  color: #e9ecf1;
}

html[data-theme="dark"] .pagination > li > a,
html[data-theme="dark"] .pagination > li > span {
  color: #eef1f4;
  background-color: #3a414c;
  border-color: #5d6674;
}

html[data-theme="dark"] hr,
html[data-theme="dark"] fieldset,
html[data-theme="dark"] .b,
html[data-theme="dark"] .b-t,
html[data-theme="dark"] .b-r,
html[data-theme="dark"] .b-b,
html[data-theme="dark"] .b-l {
  border-color: #565f6d !important;
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .help-block {
  color: #bec5cf !important;
}

body,
.app,
.app-content,
.panel,
.modal-content,
.dropdown-menu,
.form-control,
.table,
.well,
.breadcrumb {
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

@media (max-width: 991px) {
  .theme-switch-item {
    padding: 10px 3px 0 2px;
  }

  .theme-switch {
    width: 34px;
    height: 34px;
  }
}