html.dark-mode {
  --dm-blue:       #00a3d3;
  --dm-bg:         #0a1a24;
  --dm-surface:    #0f2430;
  --dm-surface-2:  #14303f;
  --dm-surface-3:  #1b3e4f;
  --dm-border:     #24505f;
  --dm-border-2:   #2e6173;
  --dm-text:       #e7f3f8;
  --dm-text-muted: #9dc3d1;
  --dm-input-bg:   #122b39;

  --dm-paper:      #0f2430;
  --dm-paper2:     #14303f;
  --dm-input-disabled: #0c1f2a;
  --dm-amber-soft:   rgba(246, 194, 62, .14);
  --dm-red-soft:     rgba(231, 74, 59, .16);
  --dm-red-border:   rgba(231, 74, 59, .45);
  --dm-red-text:     #ff7b6e;
  --dm-green-soft:   rgba(28, 200, 138, .12);
  --dm-green-soft-2: rgba(28, 200, 138, .22);
  --dm-green-border: rgba(28, 200, 138, .4);
  --dm-green-text:   #3ddc9f;
  --dm-purple-soft:  rgba(138, 109, 241, .18);
  --dm-glass:        rgba(15, 36, 48, .85);
  --dm-glass-blue:   rgba(27, 62, 79, .85);

  color-scheme: dark;
}

html.dark-mode,
html.dark-mode body,
html.dark-mode #bodyContainer,
html.dark-mode #colContent,
html.dark-mode #content,
html.dark-mode #content-wrapper,
html.dark-mode #wrapper {
  background-color: var(--dm-bg) !important;
  color: var(--dm-text);
}

html.dark-mode [style*="#ededed" i],
html.dark-mode [style*="#f7f7f7" i],
html.dark-mode [style*="#f8f9fc" i],
html.dark-mode [style*="#f6f6f6" i],
html.dark-mode [style*="#eeeeee" i],
html.dark-mode [style*="#fafafa" i],
html.dark-mode [style*="#f5f5f5" i],
html.dark-mode [style*="#f9f9f9" i],
html.dark-mode [style*="#fbfbfb" i],
html.dark-mode [style*="background-color: #fff" i],
html.dark-mode [style*="background-color:#fff" i],
html.dark-mode [style*="background: #fff" i],
html.dark-mode [style*="background:#fff" i],
html.dark-mode [style*="background-color: white" i],
html.dark-mode [style*="background-color:white" i],
html.dark-mode [style*="background: white" i],
html.dark-mode [style*="background:white" i],
html.dark-mode [style*="rgb(234, 236, 244)"],
html.dark-mode [style*="rgb(234,236,244)"],
html.dark-mode [style*="#eaecf4" i] {
  background-color: var(--dm-surface) !important;
  color: var(--dm-text);
}

html.dark-mode p,
html.dark-mode span:not(.stage-header span),
html.dark-mode label,
html.dark-mode li,
html.dark-mode td,
html.dark-mode th,
html.dark-mode dt,
html.dark-mode dd,
html.dark-mode h1, html.dark-mode h2, html.dark-mode h3,
html.dark-mode h4, html.dark-mode h5, html.dark-mode h6 {
  color: var(--dm-text);
}

html.dark-mode .text-dark,
html.dark-mode .text-black,
html.dark-mode .text-body,
html.dark-mode .text-secondary,
html.dark-mode .active_page_content h1,
html.dark-mode .active_page_content p,
html.dark-mode .active_page_content a {
  color: var(--dm-text) !important;
}

html.dark-mode .text-muted,
html.dark-mode small.text-muted {
  color: var(--dm-text-muted) !important;
}

html.dark-mode .text-danger {
  color: #ff6b6b !important;
}

html.dark-mode .text-success {
  color: #1cc88a !important;
}

html.dark-mode .text-warning {
  color: #f6c23e !important;
}

html.dark-mode .text-info {
  color: #36b9cc !important;
}

html.dark-mode .text-primary {
  color: #5cc6ec !important;
}

html.dark-mode .ag-row.text-danger .ag-cell,
html.dark-mode .ag-row.text-danger .ag-cell span,
html.dark-mode .ag-cell.text-danger,
html.dark-mode .ag-cell.text-danger span {
  color: #ff6b6b !important;
}

html.dark-mode .ag-row.text-success .ag-cell,
html.dark-mode .ag-row.text-success .ag-cell span,
html.dark-mode .ag-cell.text-success,
html.dark-mode .ag-cell.text-success span {
  color: #1cc88a !important;
}

html.dark-mode .ag-row.text-warning .ag-cell,
html.dark-mode .ag-row.text-warning .ag-cell span,
html.dark-mode .ag-cell.text-warning,
html.dark-mode .ag-cell.text-warning span {
  color: #f6c23e !important;
}

html.dark-mode .ag-row.text-info .ag-cell,
html.dark-mode .ag-row.text-info .ag-cell span,
html.dark-mode .ag-cell.text-info,
html.dark-mode .ag-cell.text-info span {
  color: #36b9cc !important;
}

html.dark-mode a:not(.btn) {
  color: #5cc6ec;
}

html.dark-mode .navbar.topbar,
html.dark-mode .topbar.bg-white,
html.dark-mode .navbar-light.bg-white {
  background-color: var(--dm-surface) !important;
  border-bottom: 1px solid var(--dm-border);
}

html.dark-mode .topbar .nav-item .nav-link,
html.dark-mode .topbar .topbar-divider {
  color: var(--dm-text);
  border-color: var(--dm-border) !important;
}

html.dark-mode #sidebar,
html.dark-mode #sidebar .sidebar-header {
  background: var(--dm-surface) !important;
}

html.dark-mode #sidebar,
html.dark-mode #sidebar a,
html.dark-mode #sidebar a:hover,
html.dark-mode #sidebar a:focus,
html.dark-mode #sidebar p,
html.dark-mode #sidebar span,
html.dark-mode #sidebar li,
html.dark-mode #sidebar i,
html.dark-mode #sidebar .nav-link {
  color: #00a3d3 !important;
}

html.dark-mode #sidebar ul li a:hover,
html.dark-mode #sidebar ul li.active > a,
html.dark-mode #sidebar a[aria-expanded="true"] {
  background: var(--dm-surface-3) !important;
  color: #00a3d3 !important;
}

html.dark-mode .popper-popup,
html.dark-mode #sidebar li.submenu-1 ul,
html.dark-mode li.submenu-1 ul {
  background-color: var(--dm-surface-2) !important;
  color: #fff !important;
}

html.dark-mode .popper-popup a,
html.dark-mode .popper-popup span,
html.dark-mode .popper-popup li,
html.dark-mode .popper-popup i {
  color: #fff !important;
}

html.dark-mode .popper-arrow,
html.dark-mode .popper-arrow::before {
  background: var(--dm-surface-2) !important;
}

html.dark-mode #sidebar .submenuItem > ul > li > a,
html.dark-mode #sidebar.top > ul > li > div.submenuItem > ul > li > a {
  background: var(--dm-surface-3) !important;
  color: #fff !important;
}

html.dark-mode #sidebar .submenuItem > ul > li > a:hover,
html.dark-mode #sidebar.top > ul > li > div.submenuItem > ul > li > a:hover {
  background: var(--dm-surface) !important;
  color: #fff !important;
}

html.dark-mode ::-webkit-scrollbar-track {
  background: var(--dm-surface-2) !important;
}

html.dark-mode #sidebar::-webkit-scrollbar,
html.dark-mode #sidebar::-webkit-scrollbar-track {
  background: var(--dm-surface) !important;
  background-color: var(--dm-surface) !important;
}

html.dark-mode #sidebar::-webkit-scrollbar-thumb {
  background: var(--dm-surface-3) !important;
  background-color: var(--dm-surface-3) !important;
}

html.dark-mode .redirect-button,
html.dark-mode .redirect-button:hover,
html.dark-mode .redirect-button:focus {
  background-color: var(--dm-surface) !important;
  border-color: #00a3d3 !important;
  color: #00a3d3 !important;
}

html.dark-mode .redirect-button .fas.fa-external-link-alt,
html.dark-mode .dtTemplate.dataTable .redirect-button .fas.fa-external-link-alt {
  color: #00a3d3 !important;
}

html.dark-mode .card,
html.dark-mode .card-header,
html.dark-mode .card-body,
html.dark-mode .card-footer,
html.dark-mode .panel,
html.dark-mode .well,
html.dark-mode .bg-white,
html.dark-mode .bg-light,
html.dark-mode .list-group-item {
  background-color: var(--dm-surface) !important;
  color: var(--dm-text);
  border-color: var(--dm-border) !important;
}

html.dark-mode .new-wrapper,
html.dark-mode .bridge-lower,
html.dark-mode #wrapper_main {
  background-color: var(--dm-bg) !important;
  color: var(--dm-text);
}

html.dark-mode .modal-content {
  background-color: var(--dm-surface) !important;
  color: var(--dm-text);
  border: 1px solid var(--dm-border);
}

html.dark-mode .modal-header,
html.dark-mode .modal-footer {
  border-color: var(--dm-border) !important;
}

html.dark-mode .modal-backdrop.show {
  opacity: 0.7;
}

html.dark-mode .dropdown-menu {
  background-color: var(--dm-surface-2) !important;
  border-color: var(--dm-border) !important;
}

html.dark-mode .ag-filter, html.dark-mode .ag-picker-field-wrapper {
  background-color: var(--dm-surface-2) !important;
  border-color: var(--dm-border) !important;
}

html.dark-mode .dropdown-item {
  color: var(--dm-text) !important;
}

html.dark-mode .dropdown-item:hover,
html.dark-mode .dropdown-item:focus,
html.dark-mode .dropdown-item.active {
  background-color: var(--dm-surface-3) !important;
  color: #fff !important;
}

html.dark-mode .dropdown-divider {
  border-color: var(--dm-border) !important;
}

html.dark-mode .form-control,
html.dark-mode .custom-select,
html.dark-mode input:not([type]),
html.dark-mode input[type="text"],
html.dark-mode input[type="number"],
html.dark-mode input[type="email"],
html.dark-mode input[type="password"],
html.dark-mode input[type="search"],
html.dark-mode input[type="date"],
html.dark-mode input[type="tel"],
html.dark-mode select,
html.dark-mode .ag-picker-field-display,
html.dark-mode textarea {
  background-color: var(--dm-input-bg) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border-2) !important;
}

html.dark-mode .form-control:focus,
html.dark-mode select:focus,
html.dark-mode textarea:focus {
  background-color: var(--dm-input-bg) !important;
  border-color: #00a3d3 !important;
  box-shadow: 0 0 0 0.15rem rgba(0, 163, 211, 0.35) !important;
}

html.dark-mode .form-control::placeholder,
html.dark-mode textarea::placeholder {
  color: var(--dm-text-muted) !important;
}

html.dark-mode .input-group-text {
  background-color: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border-2) !important;
}

html.dark-mode input[type="file"],
html.dark-mode .form-control-file {
  background-color: var(--dm-input-bg) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border-2) !important;
}

html.dark-mode input[type="file"]::-webkit-file-upload-button {
  background-color: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
  border: 1px solid var(--dm-border-2) !important;
  border-radius: 4px;
}

html.dark-mode .form-control:disabled,
html.dark-mode .form-control[readonly],
html.dark-mode input:disabled:not([type="checkbox"]):not([type="radio"]),
html.dark-mode input[readonly]:not([type="checkbox"]):not([type="radio"]),
html.dark-mode select:disabled,
html.dark-mode select[readonly],
html.dark-mode textarea:disabled,
html.dark-mode textarea[readonly] {
  background-color: var(--dm-input-disabled) !important;
  color: var(--dm-text-muted) !important;
  -webkit-text-fill-color: var(--dm-text-muted) !important;
  border-color: var(--dm-border) !important;
  opacity: 1 !important;
}

html.dark-mode .custom-control-label::before {
  background-color: var(--dm-input-bg) !important;
  border-color: var(--dm-border-2) !important;
}

html.dark-mode .custom-switch .custom-control-label::after {
  background-color: var(--dm-text-muted) !important;
}

html.dark-mode .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #00a3d3 !important;
  border-color: #00a3d3 !important;
}

html.dark-mode .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  background-color: #fff !important;
}

html.dark-mode .custom-control-input:disabled ~ .custom-control-label,
html.dark-mode .custom-control-input[disabled] ~ .custom-control-label {
  color: var(--dm-text-muted) !important;
}

html.dark-mode .table,
html.dark-mode table.dataTable {
  color: var(--dm-text);
  background-color: var(--dm-surface) !important;
}

html.dark-mode .table thead th,
html.dark-mode table.dataTable thead th,
html.dark-mode table.dataTable thead td {
  background-color: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}

html.dark-mode .table td,
html.dark-mode .table th,
html.dark-mode table.dataTable td,
html.dark-mode table.dataTable th {
  border-color: var(--dm-border) !important;
}

html.dark-mode .table-striped tbody tr:nth-of-type(odd),
html.dark-mode table.dataTable.stripe tbody tr.odd {
  background-color: rgba(255, 255, 255, 0.03) !important;
}

html.dark-mode .table-hover tbody tr:hover,
html.dark-mode table.dataTable tbody tr:hover {
  background-color: var(--dm-surface-3) !important;
}

html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--dm-text) !important;
}

html.dark-mode .btn-light,
html.dark-mode .btn-white,
html.dark-mode .btn-default,
html.dark-mode .btn-outline-secondary {
  background-color: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border-2) !important;
}

html.dark-mode .close {
  color: var(--dm-text) !important;
  text-shadow: none;
}

html.dark-mode hr,
html.dark-mode .border,
html.dark-mode .border-top,
html.dark-mode .border-bottom,
html.dark-mode .border-left,
html.dark-mode .border-right {
  border-color: var(--dm-border) !important;
}

html.dark-mode .nav-tabs {
  border-color: var(--dm-border) !important;
}

html.dark-mode .nav-tabs .nav-link {
  background-color: var(--dm-surface) !important;
  color: var(--dm-text-muted) !important;
  border-color: var(--dm-border) !important;
}

html.dark-mode .nav-tabs .nav-link:hover {
  background-color: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border-2) !important;
}

html.dark-mode .nav-tabs .nav-link.active {
  background-color: #00a3d3 !important;
  color: #fff !important;
  border-color: #00a3d3 !important;
}

html.dark-mode .select2-container--default .select2-selection--single,
html.dark-mode .select2-container--default .select2-selection--multiple {
  background-color: var(--dm-input-bg) !important;
  border-color: var(--dm-border-2) !important;
  color: var(--dm-text) !important;
}

html.dark-mode .select2-container--default .select2-selection__rendered {
  color: var(--dm-text) !important;
}

html.dark-mode .select2-container--default .select2-selection__placeholder {
  color: var(--dm-text-muted) !important;
}

html.dark-mode .select2-container .select2-search__field {
  background-color: transparent !important;
  color: var(--dm-text) !important;
}

html.dark-mode .select2-container .select2-search__field::placeholder {
  color: var(--dm-text-muted) !important;
}

html.dark-mode .select2-container--default .select2-selection__arrow b {
  border-color: var(--dm-text-muted) transparent transparent transparent !important;
}

html.dark-mode .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--dm-surface-3) !important;
  border-color: var(--dm-border-2) !important;
  color: var(--dm-text) !important;
}

html.dark-mode .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--dm-text-muted) !important;
}

html.dark-mode .select2-dropdown {
  background-color: var(--dm-surface-2) !important;
  border-color: var(--dm-border-2) !important;
  color: var(--dm-text) !important;
}

html.dark-mode .select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: var(--dm-input-bg) !important;
  border-color: var(--dm-border-2) !important;
  color: var(--dm-text) !important;
}

html.dark-mode .select2-container--default .select2-results__option {
  color: var(--dm-text) !important;
}

html.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected],
html.dark-mode .select2-container--default .select2-results__option--highlighted {
  background-color: var(--dm-surface-3) !important;
  color: #fff !important;
}

html.dark-mode .select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--dm-surface) !important;
  color: var(--dm-text) !important;
}

html.dark-mode .account-item .account-name {
  color: var(--dm-text) !important;
}

html.dark-mode .account-item .account-company {
  color: var(--dm-text-muted) !important;
}

html.dark-mode .account-item:hover {
  background-color: var(--dm-surface-2) !important;
}

html.dark-mode .account-item.active {
  background-color: var(--dm-surface-3) !important;
}

html.dark-mode .account-item.active .account-name,
html.dark-mode .account-item.active .account-company {
  color: #5cc6ec !important;
}

html.dark-mode .account-footer {
  background-color: var(--dm-surface-2) !important;
  border-top-color: var(--dm-border) !important;
}

html.dark-mode .account-list-header {
  border-bottom-color: var(--dm-border) !important;
}

.darkModeToggle { cursor: pointer; }

html.dark-mode .ag-theme-quartz {
  --ag-background-color:              #0f2430;
  --ag-foreground-color:              #e7f3f8;
  --ag-data-color:                    #e7f3f8;
  --ag-secondary-foreground-color:    #b6d6e2;
  --ag-disabled-foreground-color:     #6f93a1;

  --ag-header-background-color:       #14303f;
  --ag-header-foreground-color:       #e7f3f8;

  --ag-border-color:                  #24505f;
  --ag-row-border-color:              #1b3e4f;
  --ag-odd-row-background-color:      #122a37;
  --ag-row-hover-color:               #1b3e4f;
  --ag-selected-row-background-color: #1d4a5e;

  --ag-control-panel-background-color: #14303f;
  --ag-subheader-background-color:     #14303f;
  --ag-input-background-color:         #122b39;
  --ag-input-border-color:             #24505f;
  --ag-input-disabled-background-color:#0d1f29;

  --ag-modal-overlay-background-color: rgba(8, 20, 28, 0.66);
  --ag-menu-background-color:          #14303f;
  --ag-tooltip-background-color:       #14303f;
}

html.dark-mode .ag-theme-quartz .ag-paging-panel {
  color: var(--dm-text) !important;
  border-top-color: var(--dm-border) !important;
}

html.dark-mode .ag-theme-quartz .ag-paging-page-size .ag-picker-field-wrapper,
html.dark-mode .ag-theme-quartz .ag-picker-field-wrapper {
  background-color: var(--dm-input-bg) !important;
  border-color: var(--dm-border-2) !important;
  color: var(--dm-text) !important;
}

html.dark-mode .ag-theme-quartz .ag-picker-field-display,
html.dark-mode .ag-theme-quartz .ag-paging-page-size .ag-picker-field-display {
  color: var(--dm-text) !important;
}

html.dark-mode .ag-theme-quartz .ag-picker-field-wrapper:focus-within {
  border-color: #00a3d3 !important;
  box-shadow: 0 0 0 0.15rem rgba(0, 163, 211, 0.35) !important;
}

html.dark-mode .ag-theme-quartz .ag-picker-field-icon .ag-icon {
  color: var(--dm-text-muted) !important;
}

html.dark-mode .ag-select-list,
html.dark-mode .ag-theme-quartz .ag-select-list {
  background-color: var(--dm-surface-2) !important;
  border-color: var(--dm-border-2) !important;
  color: var(--dm-text) !important;
}

html.dark-mode .ag-select-list .ag-list-item,
html.dark-mode .ag-theme-quartz .ag-select-list .ag-list-item {
  color: var(--dm-text) !important;
}

html.dark-mode .ag-select-list .ag-list-item.ag-active-item,
html.dark-mode .ag-select-list .ag-list-item:hover,
html.dark-mode .ag-theme-quartz .ag-select-list .ag-list-item.ag-active-item,
html.dark-mode .ag-theme-quartz .ag-select-list .ag-list-item:hover {
  background-color: var(--dm-surface-3) !important;
  color: #fff !important;
}

html.dark-mode .ag-theme-quartz .ag-row.tx-total-row {
  background-color: rgba(246, 194, 62, 0.16) !important;
}

html.dark-mode .ag-theme-quartz .ag-row.tx-total-row .ag-cell,
html.dark-mode .ag-theme-quartz .ag-row.tx-total-row .ag-tx-cell {
  color: var(--dm-text) !important;
}

html.dark-mode .colInStockQty,
html.dark-mode .ag-cell.lineInStockQty {
  background-color: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
}

html.dark-mode .month-picker.ui-widget-content,
html.dark-mode .month-picker .ui-widget-header {
  background: var(--dm-surface) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}

html.dark-mode .month-picker .ui-button {
  background: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}

html.dark-mode .month-picker .ui-button:hover {
  background: var(--dm-surface-3) !important;
  color: var(--dm-text) !important;
}

html.dark-mode .month-picker .ui-state-active {
  background: #00a3d3 !important;
  color: #fff !important;
  border-color: #00a3d3 !important;
}

html.dark-mode .month-picker .ui-state-highlight {
  background: var(--dm-surface-3) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border-2) !important;
}

html.dark-mode .month-picker .ui-state-disabled {
  opacity: 0.45;
}

html.dark-mode .month-picker .ui-icon {
  filter: invert(1) brightness(1.4);
}

html.dark-mode .fc {
  --fc-border-color: var(--dm-border);
  --fc-page-bg-color: var(--dm-surface);
  --fc-neutral-bg-color: var(--dm-surface-2);
  --fc-today-bg-color: rgba(0, 163, 211, 0.12);
  --fc-list-event-hover-bg-color: var(--dm-surface-3);
  --fc-neutral-text-color: var(--dm-text);
  color: var(--dm-text);
}

html.dark-mode .fc-view-harness.fc-view-harness-active,
html.dark-mode .fc-toolbar-chunk,
html.dark-mode .fc .fc-col-header-cell,
html.dark-mode .fc .fc-daygrid-day,
html.dark-mode .fc .fc-timegrid-slot,
html.dark-mode .fc .fc-list,
html.dark-mode .fc .fc-list-day-cushion {
  background-color: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
}

html.dark-mode .fc .fc-col-header-cell-cushion,
html.dark-mode .fc .fc-daygrid-day-number,
html.dark-mode .fc .fc-toolbar-title,
html.dark-mode .fc .fc-list-day-text,
html.dark-mode .fc .fc-list-day-side-text,
html.dark-mode .fc a {
  color: var(--dm-text) !important;
}

html.dark-mode .spd-gauge-charts .highcharts-background {
  fill: transparent !important;
}

html.dark-mode .spd-gauge-charts text,
html.dark-mode .spd-gauge-charts .highcharts-title tspan,
html.dark-mode .spd-gauge-charts .highcharts-axis-labels text {
  fill: var(--dm-text) !important;
}

html.dark-mode .ds-highcharts .highcharts-background,
html.dark-mode .ds-highcharts .highcharts-plot-background {
  fill: transparent !important;
}

html.dark-mode .ds-highcharts text,
html.dark-mode .ds-highcharts .highcharts-title tspan,
html.dark-mode .ds-highcharts .highcharts-axis-labels text,
html.dark-mode .ds-highcharts .highcharts-legend-item text {
  fill: var(--dm-text) !important;
}

html.dark-mode .ds-highcharts .highcharts-grid-line {
  stroke: var(--dm-border) !important;
}

html.dark-mode .ds-highcharts .highcharts-axis-line,
html.dark-mode .ds-highcharts .highcharts-tick {
  stroke: var(--dm-border-2) !important;
}

html.dark-mode .timeline-date-header {
  background-color: var(--dm-surface-2) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}

html.dark-mode .timeline-time {
  color: var(--dm-text-muted) !important;
}

html.dark-mode .timeline-card {
  background-color: var(--dm-surface-2) !important;
  border: 1px solid var(--dm-border-2) !important;
}

html.dark-mode .timeline-card,
html.dark-mode .timeline-card .card-contact,
html.dark-mode .timeline-card .card-name,
html.dark-mode .timeline-card .card-description,
html.dark-mode .timeline-card .extra-field-item {
  color: var(--dm-text) !important;
}

html.dark-mode .timeline-icon i {
  background: var(--dm-surface) !important;
}

html.dark-mode .today-highlight {
  background-color: var(--dm-surface-2) !important;
}

html.dark-mode .today-highlight .timeline-date-header {
  background-color: #ffc107 !important;
  color: #000 !important;
}

html.dark-mode .mo-body,
html.dark-mode .tc-preview,
html.dark-mode .tc-icon-search,
html.dark-mode .mo-picker-head,
html.dark-mode .mo-chip,
html.dark-mode .mo-tile-cog,
html.dark-mode .mo-tile-remove,
html.dark-mode .mo-tile-plus {
  background: var(--dm-surface-2) !important;
  color: var(--dm-text);
}

html.dark-mode .mo-tile,
html.dark-mode .mo-picker,
html.dark-mode .mo-picker-search,
html.dark-mode .tc-icon-cell {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text);
}

html.dark-mode .tc-head,
html.dark-mode .tc-foot,
html.dark-mode .tc-preview,
html.dark-mode .mo-picker-head {
  border-color: var(--dm-border) !important;
}

html.dark-mode .mo-tile-label,
html.dark-mode .tc-title,
html.dark-mode .tc-prev-label,
html.dark-mode .mo-picker-title,
html.dark-mode .mo-picker-input,
html.dark-mode .mo-chip,
html.dark-mode .tc-icon-search input {
  color: var(--dm-text) !important;
}

html.dark-mode .mo-tile-add {
  background: transparent !important;
}

html.dark-mode .pipeline-stage {
  background-color: var(--dm-surface-2) !important;
}

html.dark-mode .top-scrollbar-wrapper.pipeline-scrollbar-wrapper {
  background: var(--dm-surface-2) !important;
  border-bottom-color: var(--dm-border) !important;
}

html.dark-mode .stage-header {
  border-bottom-color: var(--dm-border) !important;
}

html.dark-mode .deal-category {
  color: var(--dm-text-muted) !important;
}

html.dark-mode .activity-chart th,
html.dark-mode .activity-chart td {
  border-color: var(--dm-border) !important;
  color: var(--dm-text);
}

html.dark-mode .activity-chart thead th {
  background-color: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
}

html.dark-mode .activity-chart .stacked-bar {
  background-color: var(--dm-surface-3) !important;
}

html.dark-mode .activity-chart .circle {
  background-color: var(--dm-surface-3) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border-2) !important;
}

html.dark-mode .gantt_container,
html.dark-mode .gantt_grid,
html.dark-mode .gantt_grid_data,
html.dark-mode .gantt_task_bg,
html.dark-mode .gantt_data_area,
html.dark-mode .gantt_task {
  background-color: var(--dm-surface) !important;
  color: var(--dm-text);
}

html.dark-mode .gantt_grid_scale,
html.dark-mode .gantt_task_scale,
html.dark-mode .gantt_grid_head_cell {
  background-color: var(--dm-surface-2) !important;
}

html.dark-mode .gantt_grid_head_cell,
html.dark-mode .gantt_scale_cell,
html.dark-mode .gantt_cell,
html.dark-mode .gantt_tree_content,
html.dark-mode .gantt_task_content {
  color: var(--dm-text) !important;
}

html.dark-mode .gantt_row,
html.dark-mode .gantt_task_row,
html.dark-mode .gantt_cell,
html.dark-mode .gantt_grid_scale,
html.dark-mode .gantt_task_scale,
html.dark-mode .gantt_scale_cell,
html.dark-mode .gantt_task_cell,
html.dark-mode .gantt_grid_data .gantt_row {
  border-color: var(--dm-border) !important;
}

html.dark-mode .gantt_grid_data .gantt_row.odd,
html.dark-mode .gantt_task_row.odd {
  background-color: var(--dm-surface) !important;
}

html.dark-mode .gantt_grid_data .gantt_row:not(.odd),
html.dark-mode .gantt_task_row:not(.odd) {
  background-color: var(--dm-surface-2) !important;
}

html.dark-mode .gantt_row.gantt_selected,
html.dark-mode .gantt_task_row.gantt_selected,
html.dark-mode .gantt_grid_data .gantt_row.gantt_selected {
  background-color: var(--dm-surface-3) !important;
}

html.dark-mode .gantt_weekend {
  background: var(--dm-surface-2) !important;
}

html.dark-mode .gantt_resizer {
  background-color: var(--dm-border-2) !important;
}

html.dark-mode .btn-gantt-nav:hover {
  background-color: var(--dm-surface-3) !important;
  border-color: var(--dm-border-2) !important;
}

html.dark-mode .gantt_cal_quick_info,
html.dark-mode .gantt_cal_light,
html.dark-mode .gantt_tooltip,
html.dark-mode .gantt_cal_qi_content {
  background-color: var(--dm-surface) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}

html.dark-mode #fixedAssetCardContainer {
  background-color: var(--dm-surface) !important;
}

html.dark-mode #fixedAssetCardContainer .tab-pane {
  background-color: var(--dm-surface-2) !important;
}

html.dark-mode #fixedAssetCardContainer .asset-input-tab {
  border-color: var(--dm-border) !important;
}

html.dark-mode .tab-repairs-servicing .divTopRow,
html.dark-mode #tab-hirehistory .divTopRow {
  background-color: var(--dm-surface-2) !important;
}

html.dark-mode .currentSelect {
  background-color: var(--dm-surface-3) !important;
}

html.dark-mode .uploaded-element,
html.dark-mode .uploaded-element-header {
  border-color: var(--dm-border) !important;
}

html.dark-mode .uploaded-element-header {
  background: var(--dm-surface-2) !important;
}

html.dark-mode #files_view .modal-body {
  background-color: var(--dm-surface) !important;
}

html.dark-mode #files_view .modal-title {
  color: var(--dm-text) !important;
}

html.dark-mode button.save-to-library {
  background: var(--dm-surface-2) !important;
  border-color: var(--dm-border-2) !important;
}

html.dark-mode #accountTreeView {
  border-color: var(--dm-border) !important;
}

html.dark-mode #accountTreeView,
html.dark-mode #accountTreeContent,
html.dark-mode #accountTreeContent div,
html.dark-mode #accountTreeContent span {
  color: var(--dm-text) !important;
}

html.dark-mode .path-bar {
  background-color: var(--dm-surface-2) !important;
  border-bottom-color: var(--dm-border) !important;
}

html.dark-mode .path-input {
  background-color: var(--dm-input-bg) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border-2) !important;
}

html.dark-mode #timezoneTable,
html.dark-mode #timezoneTable table {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text);
}

html.dark-mode #timezoneTable th {
  background: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}

html.dark-mode #timezoneTable td {
  background: var(--dm-surface) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}

html.dark-mode #timezoneTable .current-time-row {
  background: rgba(246, 194, 62, 0.16) !important;
}

html.dark-mode .reportCard {
  border-color: var(--dm-border-2) !important;
}

html.dark-mode .reportCard > .card-header {
  background-color: var(--dm-surface-2) !important;
  border-bottom-color: var(--dm-border) !important;
}

html.dark-mode .reportCard .card-body a:not(.btn) {
  color: var(--dm-text) !important;
}

html.dark-mode .reportCard.disabledReportCard .card-header {
  background-color: var(--dm-surface-2) !important;
}

html.dark-mode .reportCard.disabledReportCard .card-body {
  background-color: var(--dm-surface) !important;
}

html.dark-mode .reportCard.disabledReportCard .card-header > p,
html.dark-mode .reportCard.disabledReportCard .card-body > ul > li > a,
html.dark-mode .reportCard.disabledReportCard .card-body > ul > li > a:hover {
  color: var(--dm-text-muted) !important;
}

html.dark-mode #pdf-viewer-app {
  background-color: #f0f0f0 !important;
  color: #000;
  color-scheme: light;
}

html.dark-mode #viewer-container,
html.dark-mode #viewer-container * {
  color: inherit;
}

html.dark-mode #designer-container {
  color: #1f2733;
  color-scheme: light;
}

html.dark-mode #designer-container * {
  color: inherit;
}

html.dark-mode #designer-container .card,
html.dark-mode #designer-container .bg-white,
html.dark-mode #designer-container .bg-light,
html.dark-mode #tableColumnList .card {
  background-color: #fff !important;
  color: #1f2733 !important;
  border-color: #e3e6ec !important;
}

html.dark-mode #designer-container input,
html.dark-mode #designer-container textarea,
html.dark-mode #designer-container select {
  background-color: #fff !important;
  color: #1f2733 !important;
  border-color: #d9d9d9 !important;
}

html.dark-mode .contact-chip,
html.dark-mode .cc-chip,
html.dark-mode .yellow-glow-border {
  color: #3a3b45 !important;
}

html.dark-mode .swal2-popup,
html.dark-mode .sweet-alert {
  background-color: var(--dm-surface) !important;
  color: var(--dm-text) !important;
}

html.dark-mode .swal2-popup .swal2-title,
html.dark-mode .swal2-popup .swal2-html-container,
html.dark-mode .swal2-popup .swal2-content,
html.dark-mode .swal2-popup p,
html.dark-mode .swal2-popup span,
html.dark-mode .swal2-popup label,
html.dark-mode .swal2-popup li,
html.dark-mode .sweet-alert,
html.dark-mode .sweet-alert h2,
html.dark-mode .sweet-alert p {
  color: var(--dm-text) !important;
}

html.dark-mode .swal2-popup .swal2-input,
html.dark-mode .swal2-popup .swal2-textarea,
html.dark-mode .swal2-popup .swal2-select,
html.dark-mode .swal2-popup input,
html.dark-mode .swal2-popup textarea,
html.dark-mode .swal2-popup select {
  background-color: var(--dm-input-bg) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border-2) !important;
}

html.dark-mode .swal2-popup .swal2-success-circular-line-left,
html.dark-mode .swal2-popup .swal2-success-circular-line-right,
html.dark-mode .swal2-popup .swal2-success-fix {
  background: var(--dm-surface) !important;
}

html.dark-mode .ds-settings-modal {
  --ink:       var(--dm-text);
  --ink-soft:  var(--dm-text-muted);
  --ink-faint: var(--dm-text-muted);
  --line:      var(--dm-border);
  --line-soft: var(--dm-border);
  --surface:   var(--dm-surface);
  --accent-wash: rgba(0, 163, 211, 0.18);
  --danger-wash: rgba(226, 96, 122, 0.18);
}

html.dark-mode .ds-settings-modal .ds-quick {
  background: var(--dm-surface-2);
}

html.dark-mode .ds-settings-modal .columnSettings.displaySettings:hover,
html.dark-mode .ds-settings-modal .columnSettings.displaySettings.is-off,
html.dark-mode .ds-settings-modal .columnSettings.displaySettings.dragging,
html.dark-mode .ds-settings-modal .groove.divcolumn:hover {
  background: var(--dm-surface-2);
}

html.dark-mode .ds-settings-modal .columnSettings.displaySettings:has(.tableFieldHideToggle input:not(:checked)) {
  border-color: rgba(226, 96, 122, 0.5);
}

html.dark-mode .ds-settings-modal .custom-control.custom-switch .custom-control-label::before {
  background: var(--dm-border-2);
}

html.dark-mode .ds-settings-modal .custom-control.custom-switch .custom-control-label::after {
  background: var(--dm-text);
}

html.dark-mode .item-card .badge-muted {
  background-color: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
}

html.dark-mode .item-card .text-muted {
  color: var(--dm-text) !important;
}

html.dark-mode .item-card .text-primary {
  color: #5cc6ec !important;
}

html.dark-mode .chat-container .msg-box.bg-sent {
  background-color: #0e5f79 !important;
}

html.dark-mode .chat-container .msg-box.bg-sent,
html.dark-mode .chat-container .msg-box.bg-sent .message-content,
html.dark-mode .chat-container .msg-box.bg-sent .sender-name {
  color: #eaf6fb !important;
}

html.dark-mode .vicky-contact-avatar,
html.dark-mode .chat-container img[src*="stepwizard/vicky"],
html.dark-mode .border-bottom img[src*="stepwizard/vicky"] {
  background-color: #ffffff !important;
}

html.dark-mode .chat-container .msg-box.bg-light {
  background-color: var(--dm-surface-3) !important;
}

html.dark-mode .chat-container .msg-box.bg-light,
html.dark-mode .chat-container .msg-box.bg-light .message-content,
html.dark-mode .chat-container .msg-box.bg-light .sender-name {
  color: var(--dm-text) !important;
}

html.dark-mode .chat-container .divider h6 {
  color: var(--dm-text) !important;
}

html.dark-mode .chat-container .message-reaction {
  background: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
}

html.dark-mode .chat-container .add-reaction-icon.bg-sent {
  background: #0e5f79 !important;
}

html.dark-mode .chat-container .add-reaction-icon.bg-light {
  background: var(--dm-surface-3) !important;
}

html.dark-mode .chat-container .message-wrapper:has(.msg-box:hover, .reaction-holder:hover) .msg-box,
html.dark-mode .chat-container .message-wrapper:has(.msg-box:hover, .reaction-holder:hover) .reaction-holder .add-reaction-icon {
  background: #00a3d3 !important;
}

html.dark-mode .chat-container .message-wrapper:has(.msg-box:hover, .reaction-holder:hover) .msg-box .message-content,
html.dark-mode .chat-container .message-wrapper:has(.msg-box:hover, .reaction-holder:hover) .msg-box .sender-name {
  color: #ffffff !important;
}

html.dark-mode .contactline.active {
  background-color: var(--dm-surface-3) !important;
  border-color: #00a3d3 !important;
  color: var(--dm-text) !important;
  animation: none !important;
}

html.dark-mode .contactline:hover {
  background-color: var(--dm-surface-2) !important;
}

html.dark-mode emoji-picker {
  --background: var(--dm-surface);
  --button-hover-background: var(--dm-surface);
  --button-active-background: var(--dm-surface);
  --border-color: var(--dm-border);
  --input-background: var(--dm-input-bg);
  --input-border-color: var(--dm-border-2);
  --input-font-color: var(--dm-text);
  --input-placeholder-color: var(--dm-text-muted);
  --category-font-color: var(--dm-text);
  --indicator-color: #00a3d3;
  color-scheme: dark;
}

/* ===== Email Mailbox (/emailmailbox) ===== */
html.dark-mode .vmail-app {
  background: var(--dm-bg) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}
html.dark-mode .vmail-app ::-webkit-scrollbar-thumb {
  background: var(--dm-border-2) !important;
}

html.dark-mode .vmail-toolbar {
  background: var(--dm-surface) !important;
  border-bottom-color: var(--dm-border) !important;
}
html.dark-mode .vmail-search i {
  color: var(--dm-text-muted) !important;
}
html.dark-mode .vmail-search input {
  background: var(--dm-input-bg) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}
html.dark-mode .vmail-search input::placeholder {
  color: var(--dm-text-muted) !important;
}
html.dark-mode .vmail-search input:focus {
  border-color: var(--dm-blue) !important;
  box-shadow: 0 0 0 3px rgba(0,163,211,.22) !important;
}
html.dark-mode .vmail-filter .btn-outline-primary {
  background: var(--dm-surface-2) !important;
}
html.dark-mode .vmail-filter .btn-outline-primary .f-count {
  background: var(--dm-surface-3) !important;
  color: var(--dm-blue) !important;
}

html.dark-mode .vmail-list {
  background: var(--dm-surface) !important;
  border-right-color: var(--dm-border) !important;
}
html.dark-mode .vmail-list-head {
  color: var(--dm-text-muted) !important;
  border-bottom-color: var(--dm-border) !important;
}
html.dark-mode .vmail-list-head span {
  color: var(--dm-text-muted) !important;
}

html.dark-mode .vmail-row {
  border-bottom-color: var(--dm-border) !important;
}
html.dark-mode .vmail-row:hover {
  background: var(--dm-surface-2) !important;
}
html.dark-mode .vmail-row.selected {
  background: var(--dm-surface-3) !important;
  border-left-color: var(--dm-blue) !important;
}

html.dark-mode .vmail-resizer:hover,
html.dark-mode .vmail-resizer.dragging {
  background: var(--dm-border-2) !important;
}

html.dark-mode .vmail-reading {
  background: var(--dm-surface) !important;
}

/* Inline text colours inside list rows + reading pane */
html.dark-mode .vmail-app [style*="color:#465057" i],
html.dark-mode .vmail-app [style*="color:#5a636a" i],
html.dark-mode .vmail-app [style*="color:#283037" i],
html.dark-mode .vmail-app [style*="color:#2e3a40" i],
html.dark-mode .vmail-app [style*="color:#3a4248" i],
html.dark-mode .vmail-app [style*="color: #465057" i],
html.dark-mode .vmail-app [style*="color: #5a636a" i],
html.dark-mode .vmail-app [style*="color: #283037" i],
html.dark-mode .vmail-app [style*="color: #2e3a40" i],
html.dark-mode .vmail-app [style*="color: #3a4248" i] {
  color: var(--dm-text) !important;
}
html.dark-mode .vmail-app [style*="color:#9aa3ab" i],
html.dark-mode .vmail-app [style*="color:#8b949b" i],
html.dark-mode .vmail-app [style*="color:#bcc3c9" i],
html.dark-mode .vmail-app [style*="color:#aab1b8" i],
html.dark-mode .vmail-app [style*="color: #9aa3ab" i],
html.dark-mode .vmail-app [style*="color: #8b949b" i],
html.dark-mode .vmail-app [style*="color: #bcc3c9" i],
html.dark-mode .vmail-app [style*="color: #aab1b8" i] {
  color: var(--dm-text-muted) !important;
}

/* Reading pane header divider + empty-state / attachment tiles */
html.dark-mode .vmail-app [style*="#e6e9ec" i] {
  border-bottom-color: var(--dm-border) !important;
}
html.dark-mode .vmail-app .vmail-attach {
  background: var(--dm-surface-2) !important;
  border-color: var(--dm-border) !important;
  box-shadow: none !important;
}
html.dark-mode .vmail-app [style*="#eaf7fb" i] {
  background: var(--dm-surface-3) !important;
}
html.dark-mode .vmail-app [style*="#d7dde1" i] {
  color: var(--dm-border-2) !important;
}

/* Message body iframe: content is dark-themed via injected CSS (buildMailBodyDoc),
   so frame it on the dark surface */
html.dark-mode .vmail-app .mailbox-body-frame {
  background: var(--dm-surface) !important;
  border: 1px solid var(--dm-border) !important;
  border-radius: 10px !important;
  margin-bottom: 22px !important;
}

html.dark-mode #emailPreviewModal #mailBody {
  background-color: var(--dm-input-bg) !important;
  color: var(--dm-text) !important;
  border: 2px solid rgba(255, 193, 7, 0.55) !important;
}
html.dark-mode #emailPreviewModal .no-grey-readonly {
  background-color: var(--dm-input-bg) !important;
  color: var(--dm-text) !important;
}

html.dark-mode .vs1-sms .sms-head,
html.dark-mode .vs1-sms .sms-foot {
  border-color: var(--dm-border) !important;
}
html.dark-mode .vs1-sms .sms-head .ico {
  background: var(--dm-surface-3) !important;
}
html.dark-mode .vs1-sms .sms-input {
  border-color: var(--dm-border) !important;
}
html.dark-mode .vs1-sms .sms-banner {
  background: rgba(28, 200, 138, 0.14) !important;
  border-color: rgba(28, 200, 138, 0.45) !important;
}
html.dark-mode .vs1-sms .sms-banner.warn {
  background: rgba(246, 194, 62, 0.14) !important;
  border-color: rgba(246, 194, 62, 0.45) !important;
}
html.dark-mode .vs1-sms .sms-banner.error {
  background: rgba(231, 74, 59, 0.14) !important;
  border-color: rgba(231, 74, 59, 0.45) !important;
}

html.dark-mode .vs1-sms .sms-fee {
  background: var(--dm-surface-2) !important;
  border-color: var(--dm-border) !important;
}

html.dark-mode #fileManagerContainer .doc-shell,
html.dark-mode #fileManagerContainer .doc-toolbar,
html.dark-mode #fileManagerContainer .doc-pane-left,
html.dark-mode #fileManagerContainer .doc-pane-right,
html.dark-mode #fileManagerContainer .doc-det-head,
html.dark-mode #fileManagerContainer .doc-det-desc,
html.dark-mode #fileManagerContainer .doc-row,
html.dark-mode #fileManagerContainer .doc-tile,
html.dark-mode #fileManagerContainer .doc-status,
html.dark-mode #fileManagerContainer .doc-bulk,
html.dark-mode #fileManagerContainer .doc-paste-bar,
html.dark-mode #fileManagerContainer .doc-det-thumb {
  border-color: var(--dm-border) !important;
}
html.dark-mode #fileManagerContainer .doc-crumb.current,
html.dark-mode #fileManagerContainer .doc-tree-node,
html.dark-mode #fileManagerContainer .doc-quick,
html.dark-mode #fileManagerContainer .doc-row,
html.dark-mode #fileManagerContainer .doc-tile-name,
html.dark-mode #fileManagerContainer .doc-det-name,
html.dark-mode #fileManagerContainer .doc-det-desc,
html.dark-mode #fileManagerContainer .doc-det-grid .v,
html.dark-mode #fileManagerContainer .doc-tool-btn:not(.primary),
html.dark-mode #fileManagerContainer .doc-bulk-btn {
  color: var(--dm-text) !important;
}
html.dark-mode #fileManagerContainer .doc-crumb-sep,
html.dark-mode #fileManagerContainer .doc-crumbs,
html.dark-mode #fileManagerContainer .doc-pane-label,
html.dark-mode #fileManagerContainer .doc-quick i,
html.dark-mode #fileManagerContainer .doc-tree-caret,
html.dark-mode #fileManagerContainer .doc-head-row,
html.dark-mode #fileManagerContainer .doc-c-desc,
html.dark-mode #fileManagerContainer .doc-c-date,
html.dark-mode #fileManagerContainer .doc-c-user,
html.dark-mode #fileManagerContainer .doc-c-size,
html.dark-mode #fileManagerContainer .doc-items,
html.dark-mode #fileManagerContainer .doc-tile-sub,
html.dark-mode #fileManagerContainer .doc-status,
html.dark-mode #fileManagerContainer .doc-det-head span,
html.dark-mode #fileManagerContainer .doc-det-path,
html.dark-mode #fileManagerContainer .doc-det-sec,
html.dark-mode #fileManagerContainer .doc-det-grid .k,
html.dark-mode #fileManagerContainer .doc-act {
  color: var(--dm-text-muted) !important;
}
html.dark-mode #fileManagerContainer .doc-c-desc.empty {
  color: var(--dm-border-2) !important;
}
html.dark-mode #fileManagerContainer .doc-head-row,
html.dark-mode #fileManagerContainer .doc-status,
html.dark-mode #fileManagerContainer .doc-tile-art,
html.dark-mode #fileManagerContainer .doc-det-thumb {
  background: var(--dm-surface-2) !important;
}
html.dark-mode #fileManagerContainer .doc-tree-node:hover,
html.dark-mode #fileManagerContainer .doc-quick:hover,
html.dark-mode #fileManagerContainer .doc-row:hover,
html.dark-mode #fileManagerContainer .doc-tile:hover {
  background: var(--dm-surface-2) !important;
}
html.dark-mode #fileManagerContainer .doc-tree-node.selected,
html.dark-mode #fileManagerContainer .doc-tree-node.selected span,
html.dark-mode #fileManagerContainer .doc-quick.active,
html.dark-mode #fileManagerContainer .doc-quick.active i {
  color: var(--dm-blue) !important;
}
html.dark-mode #fileManagerContainer .doc-tree-node.selected,
html.dark-mode #fileManagerContainer .doc-quick.active {
  background: var(--dm-surface-3) !important;
}
html.dark-mode #fileManagerContainer .doc-tree-node.drag-over,
html.dark-mode #fileManagerContainer .doc-row.doc-row-drop,
html.dark-mode #fileManagerContainer .doc-tile.doc-row-drop {
  background: var(--dm-surface-3) !important;
}
html.dark-mode #fileManagerContainer .doc-row.focused,
html.dark-mode #fileManagerContainer .doc-row.selected,
html.dark-mode #fileManagerContainer .doc-row.selected:hover,
html.dark-mode #fileManagerContainer .doc-row.selected.focused,
html.dark-mode #fileManagerContainer .doc-tile.selected {
  background: var(--dm-surface-3) !important;
}
html.dark-mode #fileManagerContainer .doc-bulk {
  background: var(--dm-surface-3) !important;
}
html.dark-mode #fileManagerContainer .doc-bulk-count {
  color: var(--dm-blue) !important;
}
html.dark-mode #fileManagerContainer .doc-paste-bar,
html.dark-mode #fileManagerContainer .doc-pill-days {
  background: rgba(246, 194, 62, 0.14) !important;
}
html.dark-mode #fileManagerContainer .doc-paste-msg,
html.dark-mode #fileManagerContainer .doc-pill-days {
  color: #f6c23e !important;
}
html.dark-mode #fileManagerContainer .doc-tile .doc-tile-act {
  background: rgba(15, 36, 48, .92) !important;
}
html.dark-mode #fileManagerContainer .doc-act {
  box-shadow: 0 0 0 1px var(--dm-border) !important;
}
html.dark-mode #fileManagerContainer .doc-check-box:not(.checked) {
  background: var(--dm-input-bg) !important;
  border-color: var(--dm-border-2) !important;
}

html.dark-mode #pcWelcomeModal .pcw-icon {
  background: var(--dm-surface-3) !important;
}