/**
* Dark mode — activated when .
* Cookie: ui_theme=dark|light (see theme-mode.js).
* Loaded after other dashboard CSS so overrides win.
*/
html[data-theme="dark"] {
color-scheme: dark;
--dm-bg: #0f1115;
--dm-bg-elevated: #161a21;
--dm-surface: #1c212b;
--dm-surface-2: #242b38;
--dm-surface-3: #2c3444;
--dm-border: #333b4a;
--dm-border-soft: #2a3140;
--dm-text: #e8eaed;
--dm-text-secondary: #c5cad3;
--dm-muted: #9aa3b2;
--dm-input: #12161e;
--dm-hover: #2a3344;
--dm-accent: #4da3ff;
--dm-accent-soft: rgba(77, 163, 255, 0.15);
--dm-danger: #f07178;
--dm-success: #7fd99a;
--dm-warning: #e6c07b;
--dm-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
/* ---------- Page chrome ---------- */
html[data-theme="dark"] body,
html[data-theme="dark"] body.ng-scope {
background-color: var(--dm-bg) !important;
color: var(--dm-text) !important;
}
html[data-theme="dark"] .container-fluid,
html[data-theme="dark"] main,
html[data-theme="dark"] .dynamic-view,
html[data-theme="dark"] .content-box,
html[data-theme="dark"] .dash-page {
background-color: transparent !important;
color: var(--dm-text);
}
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,
html[data-theme="dark"] .title,
html[data-theme="dark"] label,
html[data-theme="dark"] .form-group label {
color: var(--dm-text);
}
html[data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.badge) {
color: var(--dm-accent);
}
html[data-theme="dark"] a:not(.btn):not(.nav-link):hover {
color: #7bbcff;
}
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] small,
html[data-theme="dark"] .small {
color: var(--dm-muted) !important;
}
html[data-theme="dark"] .text-dark {
color: var(--dm-text) !important;
}
html[data-theme="dark"] .text-body {
color: var(--dm-text) !important;
}
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-left,
html[data-theme="dark"] .border-right,
html[data-theme="dark"] .border-start,
html[data-theme="dark"] .border-end {
border-color: var(--dm-border) !important;
}
/* ---------- Surfaces / cards ---------- */
html[data-theme="dark"] .content-box-white,
html[data-theme="dark"] .content-box-nonebg,
html[data-theme="dark"] .HomeChart,
html[data-theme="dark"] .card,
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .jumbotron,
html[data-theme="dark"] .well,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .panel-body,
html[data-theme="dark"] .panel-default > .panel-heading,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .popover,
html[data-theme="dark"] .tooltip-inner,
html[data-theme="dark"] .shadow-soft,
html[data-theme="dark"] .clientLiveChatBox,
html[data-theme="dark"] .notificationSidebar,
html[data-theme="dark"] .full-fade-loading {
background-color: var(--dm-surface) !important;
background: var(--dm-surface) !important;
color: var(--dm-text) !important;
border-color: var(--dm-border) !important;
}
html[data-theme="dark"] .HomeChart .beforeChart {
color: var(--dm-muted) !important;
}
html[data-theme="dark"] .forumlastThreads {
background: var(--dm-surface-2) !important;
color: var(--dm-text);
}
html[data-theme="dark"] .forumlastThreads p {
color: var(--dm-muted) !important;
}
html[data-theme="dark"] .forumlastThreads .communityThread {
color: var(--dm-text) !important;
}
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .card-body {
background-color: transparent !important;
color: var(--dm-text) !important;
border-color: var(--dm-border) !important;
}
html[data-theme="dark"] .list-group-item-action:hover,
html[data-theme="dark"] .list-group-item-action:focus {
background-color: var(--dm-hover) !important;
color: var(--dm-text) !important;
}
html[data-theme="dark"] .list-group-flush .list-group-item {
border-color: var(--dm-border-soft) !important;
}
/* ---------- Top navbar ---------- */
html[data-theme="dark"] .top-navbar {
background-color: var(--dm-bg-elevated) !important;
border-bottom-color: var(--dm-border) !important;
}
html[data-theme="dark"] .profile-btn-custom,
html[data-theme="dark"] .ui-lang-btn,
html[data-theme="dark"] .btn-announcement,
html[data-theme="dark"] .ui-lang-pill {
background: var(--dm-surface-2) !important;
border-color: var(--dm-border) !important;
color: var(--dm-text) !important;
box-shadow: none !important;
}
html[data-theme="dark"] .profile-btn-custom:hover,
html[data-theme="dark"] .ui-lang-btn:hover,
html[data-theme="dark"] .ui-lang-btn:focus,
html[data-theme="dark"] .btn-announcement:hover {
background: var(--dm-hover) !important;
color: var(--dm-accent) !important;
}
html[data-theme="dark"] .ui-lang-pill .material-icons,
html[data-theme="dark"] .ui-lang-pill select,
html[data-theme="dark"] select.ui-lang-select {
color: var(--dm-text) !important;
}
html[data-theme="dark"] .top-nav-icon-btn {
color: var(--dm-text-secondary) !important;
}
html[data-theme="dark"] .top-nav-icon-btn:hover,
html[data-theme="dark"] .top-nav-icon-btn:focus {
background: var(--dm-hover) !important;
color: var(--dm-accent) !important;
}
html[data-theme="dark"] .top-nav-theme-btn {
background: var(--dm-surface-2) !important;
border: 1px solid var(--dm-border) !important;
color: var(--dm-text) !important;
border-radius: 30px !important;
padding: 6px 12px !important;
font-weight: 500 !important;
font-size: 0.85rem !important;
display: inline-flex !important;
align-items: center;
gap: 4px;
box-shadow: none !important;
}
html[data-theme="dark"] .top-nav-theme-btn:hover,
html[data-theme="dark"] .top-nav-theme-btn:focus {
background: var(--dm-hover) !important;
color: var(--dm-accent) !important;
}
html[data-theme="dark"] .top-nav-theme-btn .material-icons {
font-size: 18px;
line-height: 1;
}
html[data-theme="dark"] .userScores p,
html[data-theme="dark"] .userScores .score-label,
html[data-theme="dark"] .score-tooltip-text {
color: var(--dm-muted) !important;
}
html[data-theme="dark"] .custom-balance-mobile small {
color: var(--dm-muted) !important;
}
html[data-theme="dark"] .custom-balance-mobile b {
color: var(--dm-text) !important;
}
html[data-theme="dark"] .navbar-toggler .material-icons,
html[data-theme="dark"] .navbar-toggler span.material-icons {
color: var(--dm-text) !important;
}
html[data-theme="dark"] .top-nav-updates-modal-header {
background: linear-gradient(135deg, #3a2810 0%, #4a3018 100%) !important;
color: #ffb74d !important;
border-bottom-color: #e65100 !important;
}
html[data-theme="dark"] .top-nav-updates-list li {
border-bottom-color: var(--dm-border) !important;
}
html[data-theme="dark"] .top-nav-updates-list strong {
color: var(--dm-text) !important;
}
html[data-theme="dark"] .top-nav-updates-list p {
color: var(--dm-muted) !important;
}
/* ---------- Updates / Changelog page ---------- */
html[data-theme="dark"] .dashboardContainer .title {
color: var(--dm-text) !important;
}
html[data-theme="dark"] .dashboardContainer .accordion > .card {
background: var(--dm-surface) !important;
border-color: var(--dm-border) !important;
}
html[data-theme="dark"] .dashboardContainer .updates-accordion-btn,
html[data-theme="dark"] .dashboardContainer .accordion .btn-link {
background: var(--dm-surface-2) !important;
color: var(--dm-text) !important;
border-color: var(--dm-border) !important;
}
html[data-theme="dark"] .dashboardContainer .updates-accordion-btn:hover,
html[data-theme="dark"] .dashboardContainer .updates-accordion-btn:focus,
html[data-theme="dark"] .dashboardContainer .accordion .btn-link:hover,
html[data-theme="dark"] .dashboardContainer .accordion .btn-link:focus {
color: var(--dm-accent) !important;
text-decoration: none !important;
}
html[data-theme="dark"] .dashboardContainer .updates-accordion-btn small,
html[data-theme="dark"] .dashboardContainer .accordion .btn-link small {
color: var(--dm-muted) !important;
}
html[data-theme="dark"] .dashboardContainer .card-body {
background: var(--dm-surface) !important;
color: var(--dm-text) !important;
}
html[data-theme="dark"] .dashboardContainer .bodyItems {
border-top-color: var(--dm-border-soft) !important;
}
html[data-theme="dark"] .dashboardContainer .bodyItems label i {
color: var(--dm-text) !important;
background: var(--dm-accent-soft) !important;
}
html[data-theme="dark"] .dashboardContainer .bodyItems p,
html[data-theme="dark"] .dashboardContainer .bodyItems p a {
color: var(--dm-text-secondary) !important;
}
html[data-theme="dark"] .dashboardContainer .bodyItems p a {
color: var(--dm-accent) !important;
}
html[data-theme="dark"] .dashboardContainer .onceUpdate {
background: var(--dm-surface) !important;
box-shadow: none !important;
}
html[data-theme="dark"] .dashboardContainer .onceUpdate.open,
html[data-theme="dark"] .dashboardContainer .open {
background: var(--dm-surface-2) !important;
}
html[data-theme="dark"] .dashboardContainer .onceUpdate h3,
html[data-theme="dark"] .dashboardContainer h3.event-title {
color: var(--dm-text) !important;
}
html[data-theme="dark"] .dashboardContainer .open h3 {
color: var(--dm-accent) !important;
}
html[data-theme="dark"] .dashboardContainer .onceUpdate span.date,
html[data-theme="dark"] .dashboardContainer .event-date {
color: var(--dm-muted) !important;
}
html[data-theme="dark"] .dashboardContainer .events {
background: var(--dm-surface) !important;
border-color: var(--dm-border) !important;
filter: none !important;
}
html[data-theme="dark"] .dashboardContainer .events.new {
background: #2a2218 !important;
border-color: #5a4020 !important;
}
html[data-theme="dark"] .dashboardContainer .inner-modal2 {
background: var(--dm-surface) !important;
color: var(--dm-text) !important;
}
/* Manage Lines — live activity eyes */
html[data-theme="dark"] .ml-conn-eye.ml-eye-on {
color: #86efac !important;
background: rgba(22, 163, 74, 0.2) !important;
border-color: rgba(134, 239, 172, 0.35) !important;
}
html[data-theme="dark"] .ml-conn-eye.ml-eye-off {
color: var(--dm-muted) !important;
background: var(--dm-surface-2) !important;
border-color: var(--dm-border) !important;
}
html[data-theme="dark"] .ml-conn-snip {
color: #86efac !important;
}
html[data-theme="dark"] .ml-conn-snip-meta {
color: var(--dm-muted) !important;
}
html[data-theme="dark"] #lineConnectionModal .ml-conn-card {
background: var(--dm-surface-2) !important;
border-color: var(--dm-border) !important;
color: var(--dm-text) !important;
}
html[data-theme="dark"] #lineConnectionModal .detailRow u {
color: var(--dm-muted) !important;
}
html[data-theme="dark"] #lineConnectionModal .detailRow b,
html[data-theme="dark"] #lineConnectionModal .notConnected {
color: var(--dm-text) !important;
}
/* ---------- Sidebar ---------- */
html[data-theme="dark"] .sidebar {
background-color: var(--dm-bg-elevated) !important;
border-right-color: var(--dm-border) !important;
}
html[data-theme="dark"] .sidebar-sticky,
html[data-theme="dark"] .sidebar-logo-wrap,
html[data-theme="dark"] .sidebar-sticky > img.dash-logo {
background-color: var(--dm-bg-elevated) !important;
background: var(--dm-bg-elevated) !important;
}
html[data-theme="dark"] .mainNav {
background: var(--dm-bg-elevated) !important;
background-color: var(--dm-bg-elevated) !important;
}
html[data-theme="dark"] .sidebar .nav-link:hover {
background-color: var(--dm-hover) !important;
}
html[data-theme="dark"] .sidebar .nav-link.active {
background-color: var(--dm-surface-3) !important;
}
html[data-theme="dark"] .sidebar-overlay.show-overlay {
background: rgba(0, 0, 0, 0.65) !important;
}
html[data-theme="dark"] .balance-card {
border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}
html[data-theme="dark"] .ui-lang-menu,
html[data-theme="dark"] .dropdown-menu {
background-color: var(--dm-surface) !important;
border-color: var(--dm-border) !important;
box-shadow: var(--dm-shadow) !important;
color: var(--dm-text) !important;
}
html[data-theme="dark"] .dropdown-item {
color: var(--dm-text) !important;
}
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
background-color: var(--dm-hover) !important;
color: var(--dm-text) !important;
}
html[data-theme="dark"] .dropdown-divider {
border-top-color: var(--dm-border) !important;
}
html[data-theme="dark"] .dropdown-menu .bg-light {
background-color: var(--dm-surface-2) !important;
}
/* ---------- Forms / inputs ---------- */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .custom-select,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="datetime-local"],
html[data-theme="dark"] input[type="time"],
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="image"]),
html[data-theme="dark"] .input-group-text,
html[data-theme="dark"] .form-control-plaintext {
background-color: var(--dm-input) !important;
color: var(--dm-text) !important;
border-color: var(--dm-border) !important;
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] input:focus {
background-color: var(--dm-input) !important;
color: var(--dm-text) !important;
border-color: var(--dm-accent) !important;
box-shadow: 0 0 0 0.2rem var(--dm-accent-soft) !important;
}
html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
color: var(--dm-muted) !important;
opacity: 1;
}
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly],
html[data-theme="dark"] input:disabled,
html[data-theme="dark"] select:disabled {
background-color: var(--dm-surface-2) !important;
color: var(--dm-muted) !important;
opacity: 0.85;
}
html[data-theme="dark"] option,
html[data-theme="dark"] optgroup {
background-color: var(--dm-surface) !important;
color: var(--dm-text) !important;
}
/* ---------- Buttons (keep primary/success/danger brand colors) ---------- */
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-white,
html[data-theme="dark"] .btn-outline-light {
background-color: var(--dm-surface-2) !important;
border-color: var(--dm-border) !important;
color: var(--dm-text) !important;
}
html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .btn-white:hover {
background-color: var(--dm-hover) !important;
color: var(--dm-text) !important;
}
html[data-theme="dark"] .btn-outline-secondary,
html[data-theme="dark"] .btn-secondary {
background-color: var(--dm-surface-2) !important;
border-color: var(--dm-border) !important;
color: var(--dm-text) !important;
}
html[data-theme="dark"] .btn-outline-secondary:hover,
html[data-theme="dark"] .btn-secondary:hover {
background-color: var(--dm-hover) !important;
color: var(--dm-text) !important;
}
html[data-theme="dark"] .btn-outline-primary {
background-color: transparent !important;
border-color: var(--dm-accent) !important;
color: var(--dm-accent) !important;
}
html[data-theme="dark"] .btn-outline-primary:hover,
html[data-theme="dark"] .btn-outline-primary:focus,
html[data-theme="dark"] .btn-outline-primary:active,
html[data-theme="dark"] .btn-outline-primary.active,
html[data-theme="dark"] .btn-outline-primary.dropdown-toggle.show {
background-color: var(--dm-accent-soft) !important;
border-color: var(--dm-accent) !important;
color: #9ec5fe !important;
}
html[data-theme="dark"] .btn-dark {
background-color: var(--dm-surface-3) !important;
border-color: var(--dm-border) !important;
color: var(--dm-text) !important;
}
html[data-theme="dark"] .btn-dark:hover,
html[data-theme="dark"] .btn-dark:focus {
background-color: var(--dm-hover) !important;
color: var(--dm-text) !important;
}
html[data-theme="dark"] .btn-outline-dark {
border-color: var(--dm-border) !important;
color: var(--dm-text) !important;
}
html[data-theme="dark"] .btn-link {
color: var(--dm-accent) !important;
}
html[data-theme="dark"] .btn-group .btn-outline-secondary,
html[data-theme="dark"] .btn-group-toggle .btn {
border-color: var(--dm-border) !important;
}
html[data-theme="dark"] .close,
html[data-theme="dark"] .btn-close,
html[data-theme="dark"] .modal-header .close,
html[data-theme="dark"] .modal-header .close span {
color: #e8eaed !important;
text-shadow: none !important;
opacity: 0.9 !important;
filter: none !important;
}
html[data-theme="dark"] .modal-header .close:hover,
html[data-theme="dark"] .modal-header .close:focus {
color: #fff !important;
opacity: 1 !important;
}
/* ---------- Tables ---------- */
html[data-theme="dark"] .table,
html[data-theme="dark"] table {
background-color: var(--dm-surface) !important;
color: var(--dm-text) !important;
box-shadow: none !important;
}
html[data-theme="dark"] .table thead,
html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .table-hover thead,
html[data-theme="dark"] .table > thead > tr > th,
html[data-theme="dark"] .dash-table-wrap > .table thead th {
background-color: var(--dm-surface-2) !important;
color: var(--dm-text-secondary) !important;
border-color: var(--dm-border) !important;
}
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table > tbody > tr > td,
html[data-theme="dark"] .table > tbody > tr > th,
html[data-theme="dark"] .dash-table-wrap > .table td,
html[data-theme="dark"] .dash-table-wrap > .table th {
border-color: var(--dm-border-soft) !important;
color: var(--dm-text) !important;
background-color: transparent;
}
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
background-color: rgba(255, 255, 255, 0.03) !important;
color: var(--dm-text) !important;
box-shadow: none !important;
}
html[data-theme="dark"] .table-hover tbody tr:hover,
html[data-theme="dark"] .table-hover > tbody > tr:hover > * {
background-color: var(--dm-hover) !important;
color: var(--dm-text) !important;
}
html[data-theme="dark"] .table-bordered,
html[data-theme="dark"] .table-bordered td,
html[data-theme="dark"] .table-bordered th {
border-color: var(--dm-border) !important;
}
html[data-theme="dark"] .table-responsive {
border-color: var(--dm-border) !important;
}
/* ---------- Modals / dialogs ---------- */
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-body,
html[data-theme="dark"] .modal-footer {
background-color: var(--dm-surface) !important;
color: var(--dm-text) !important;
border-color: var(--dm-border) !important;
}
html[data-theme="dark"] .modal-header .modal-title,
html[data-theme="dark"] .modal-body,
html[data-theme="dark"] .modal-body p,
html[data-theme="dark"] .modal-body b,
html[data-theme="dark"] .modal-body strong {
color: var(--dm-text) !important;
}
html[data-theme="dark"] .modal-backdrop {
background-color: #000 !important;
}
html[data-theme="dark"] .modal-backdrop.show {
opacity: 0.7;
}
/* jQuery UI */
html[data-theme="dark"] .ui-widget-content,
html[data-theme="dark"] .ui-dialog,
html[data-theme="dark"] .ui-datepicker,
html[data-theme="dark"] .ui-menu {
background: var(--dm-surface) !important;
color: var(--dm-text) !important;
border-color: var(--dm-border) !important;
}
html[data-theme="dark"] .ui-widget-header,
html[data-theme="dark"] .ui-dialog-titlebar {
background: var(--dm-surface-2) !important;
color: var(--dm-text) !important;
border-color: var(--dm-border) !important;
}
html[data-theme="dark"] .ui-state-default,
html[data-theme="dark"] .ui-widget-content .ui-state-default {
background: var(--dm-surface-2) !important;
color: var(--dm-text) !important;
border-color: var(--dm-border) !important;
}
html[data-theme="dark"] .ui-state-hover,
html[data-theme="dark"] .ui-state-focus {
background: var(--dm-hover) !important;
color: var(--dm-text) !important;
}
/* ---------- Tabs / nav pills / breadcrumbs ---------- */
html[data-theme="dark"] .nav-tabs {
border-bottom-color: var(--dm-border) !important;
}
html[data-theme="dark"] .nav-tabs .nav-link {
color: var(--dm-muted) !important;
}
html[data-theme="dark"] .nav-tabs .nav-link:hover {
border-color: var(--dm-border) var(--dm-border) transparent !important;
color: var(--dm-text) !important;
}
html[data-theme="dark"] .nav-tabs .nav-link.active {
background-color: var(--dm-surface) !important;
color: var(--dm-accent) !important;
border-color: var(--dm-border) var(--dm-border) var(--dm-surface) !important;
}
html[data-theme="dark"] .nav-pills .nav-link {
color: var(--dm-muted);
}
html[data-theme="dark"] .nav-pills .nav-link.active {
background-color: var(--dm-accent) !important;
color: #fff !important;
}
html[data-theme="dark"] .breadcrumb {
background-color: var(--dm-surface-2) !important;
}
html[data-theme="dark"] .breadcrumb-item,
html[data-theme="dark"] .breadcrumb-item a {
color: var(--dm-muted) !important;
}
html[data-theme="dark"] .breadcrumb-item.active {
color: var(--dm-text) !important;
}
html[data-theme="dark"] .breadcump,
html[data-theme="dark"] .page-header {
background-color: transparent !important;
color: var(--dm-text) !important;
border-color: var(--dm-border) !important;
}
/* ---------- Alerts (keep semantic tint, darken) ---------- */
html[data-theme="dark"] .alert-primary {
background-color: #1a2a4a !important;
color: #9ec5fe !important;
border-color: #2a4580 !important;
}
html[data-theme="dark"] .alert-secondary {
background-color: #2a2e35 !important;
color: #ced4da !important;
border-color: var(--dm-border) !important;
}
html[data-theme="dark"] .alert-success {
background-color: #143528 !important;
color: #8fd9a8 !important;
border-color: #1e5c3a !important;
}
html[data-theme="dark"] .alert-danger {
background-color: #3a1a1a !important;
color: #f5a8a8 !important;
border-color: #6b2a2a !important;
}
html[data-theme="dark"] .alert-warning {
background-color: #3a3010 !important;
color: #ffe08a !important;
border-color: #6b5520 !important;
}
html[data-theme="dark"] .alert-info {
background-color: #123040 !important;
color: #9edcf5 !important;
border-color: #1e5068 !important;
}
html[data-theme="dark"] .alert-light {
background-color: var(--dm-surface-2) !important;
color: var(--dm-text) !important;
border-color: var(--dm-border) !important;
}
html[data-theme="dark"] .alert a {
color: inherit;
text-decoration: underline;
}
/* ---------- Accordion / collapse ---------- */
html[data-theme="dark"] .accordion .card {
border-color: var(--dm-border) !important;
background: var(--dm-surface) !important;
}
html[data-theme="dark"] .accordion .card-header {
background: var(--dm-surface-2) !important;
}
html[data-theme="dark"] .accordion .card-header button,
html[data-theme="dark"] .accordion .btn-link {
color: var(--dm-text) !important;
}
/* ---------- Pagination / page links ---------- */
html[data-theme="dark"] .page-link,
html[data-theme="dark"] .pagination .page-link {
background-color: var(--dm-surface) !important;
border-color: var(--dm-border) !important;
color: var(--dm-text) !important;
}
html[data-theme="dark"] .page-item.active .page-link {
background-color: var(--dm-accent) !important;
border-color: var(--dm-accent) !important;
color: #fff !important;
}
html[data-theme="dark"] .page-item.disabled .page-link {
background-color: var(--dm-surface-2) !important;
color: var(--dm-muted) !important;
}
/* ---------- Progress / spinners ---------- */
html[data-theme="dark"] .progress {
background-color: var(--dm-surface-2) !important;
}
html[data-theme="dark"] .spinner {
background-color: var(--dm-text) !important;
}
/* ---------- Settings pages CSS vars ---------- */
html[data-theme="dark"] .settings-page {
--st-border: var(--dm-border);
--st-muted: var(--dm-muted);
--st-text: var(--dm-text);
--st-accent: var(--dm-accent);
--st-accent-soft: var(--dm-accent-soft);
}
/* ---------- Misc dashboard widgets ---------- */
html[data-theme="dark"] .hr,
html[data-theme="dark"] hr {
border-top-color: var(--dm-border) !important;
opacity: 1;
}
html[data-theme="dark"] code,
html[data-theme="dark"] kbd,
html[data-theme="dark"] pre,
html[data-theme="dark"] .code,
html[data-theme="dark"] .well pre {
background-color: var(--dm-input) !important;
color: #e6db74 !important;
border-color: var(--dm-border) !important;
}
html[data-theme="dark"] ::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.04);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.22);
}
html[data-theme="dark"] .todo-item.bg-light,
html[data-theme="dark"] .todo-item {
background-color: var(--dm-surface) !important;
color: var(--dm-text) !important;
border-color: var(--dm-border) !important;
}
html[data-theme="dark"] .todo-remove-btn {
color: var(--dm-muted) !important;
}
html[data-theme="dark"] footer {
background-color: var(--dm-bg-elevated) !important;
color: var(--dm-muted) !important;
}
html[data-theme="dark"] .popover-header,
html[data-theme="dark"] .popover-body {
background-color: var(--dm-surface) !important;
color: var(--dm-text) !important;
border-color: var(--dm-border) !important;
}
html[data-theme="dark"] .offcanvas,
html[data-theme="dark"] .drawer {
background-color: var(--dm-surface) !important;
color: var(--dm-text) !important;
}
/* TinyMCE / editors inside dash */
html[data-theme="dark"] .mce-tinymce,
html[data-theme="dark"] .mce-panel,
html[data-theme="dark"] .mce-container,
html[data-theme="dark"] .tox-tinymce,
html[data-theme="dark"] .tox .tox-edit-area__iframe {
border-color: var(--dm-border) !important;
}
html[data-theme="dark"] .mce-panel,
html[data-theme="dark"] .tox-toolbar,
html[data-theme="dark"] .tox-toolbar__primary,
html[data-theme="dark"] .tox-menubar,
html[data-theme="dark"] .tox-statusbar {
background: var(--dm-surface-2) !important;
color: var(--dm-text) !important;
border-color: var(--dm-border) !important;
}
/* Highcharts containers — leave chart colors; darken wrapper only */
html[data-theme="dark"] .highcharts-container,
html[data-theme="dark"] .highcharts-background {
fill: var(--dm-surface) !important;
}
/* Select2 / chosen if present */
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-dropdown,
html[data-theme="dark"] .select2-container--default .select2-results__option {
background-color: var(--dm-input) !important;
color: var(--dm-text) !important;
border-color: var(--dm-border) !important;
}
html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: var(--dm-hover) !important;
}
/* ---------- Login / public pages (home.html) ---------- */
html[data-theme="dark"] .login-page-wrapper,
html[data-theme="dark"] .signin-container,
html[data-theme="dark"] body > .login-page-wrapper {
background: var(--dm-bg) !important;
background-color: var(--dm-bg) !important;
}
html[data-theme="dark"] .login-form,
html[data-theme="dark"] .leftLogin .login-form,
html[data-theme="dark"] .signForm,
html[data-theme="dark"] .pricing-card {
background: var(--dm-surface) !important;
color: var(--dm-text) !important;
box-shadow: var(--dm-shadow) !important;
}
html[data-theme="dark"] .forgotTitle,
html[data-theme="dark"] .brand-name {
color: var(--dm-text) !important;
}
html[data-theme="dark"] .login-method-tabs {
border-bottom-color: var(--dm-border) !important;
}
html[data-theme="dark"] .login-method-tab {
color: var(--dm-muted) !important;
}
html[data-theme="dark"] .login-footer-links,
html[data-theme="dark"] .footer-links {
border-top-color: var(--dm-border) !important;
color: var(--dm-muted) !important;
}
html[data-theme="dark"] .footer-links a {
color: var(--dm-text-secondary) !important;
}
html[data-theme="dark"] .footer-links a:hover {
color: var(--dm-accent) !important;
}
html[data-theme="dark"] .login-lang-chooser .ui-lang-pill .material-icons,
html[data-theme="dark"] .login-lang-chooser .ui-lang-pill select {
color: var(--dm-text-secondary) !important;
}
html[data-theme="dark"] .login-theme-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0 0 0 12px;
padding: 6px 12px;
border-radius: 30px;
border: 1px solid var(--dm-border);
background: var(--dm-surface-2);
color: var(--dm-text);
font-size: 0.9rem;
cursor: pointer;
}
html[data-theme="dark"] .login-theme-toggle .material-icons {
font-size: 18px;
}
/* Soften common inline white wrappers without fighting colored alerts */
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #ffffff"],
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background-color: #ffffff"],
html[data-theme="dark"] [style*="background-color:#ffffff"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background-color: white"],
html[data-theme="dark"] [style*="background-color:white"] {
background: var(--dm-surface) !important;
background-color: var(--dm-surface) !important;
}
html[data-theme="dark"] .login-captcha-img-wrap img {
background: #fff !important;
}
/* Channel editor keeps its own .ce-dark palette */
/* Light-mode theme toggle button (default look) */
.top-nav-theme-btn {
background: #fff !important;
border: 1px solid #e7e9eb !important;
color: #444 !important;
border-radius: 30px !important;
padding: 6px 12px !important;
font-weight: 500 !important;
font-size: 0.85rem !important;
display: inline-flex !important;
align-items: center;
gap: 4px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
white-space: nowrap;
}
.top-nav-theme-btn:hover,
.top-nav-theme-btn:focus {
background: #fafafa !important;
color: #007cff !important;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}
.top-nav-theme-btn .material-icons {
font-size: 18px;
line-height: 1;
}
.top-nav-theme-btn-mobile {
width: 36px;
height: 36px;
min-width: 36px;
padding: 0 !important;
justify-content: center;
border-radius: 50% !important;
}
.login-theme-row {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
margin-top: 1.25rem;
}
.login-theme-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 30px;
border: 1px solid #e7e9eb;
background: #fff;
color: #444;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
}
.login-theme-toggle:hover {
color: #007cff;
background: #fafafa;
}
.login-theme-toggle .material-icons {
font-size: 18px;
}
.sidebar-logo-wrap {
width: 100%;
height: auto;
padding: 0;
margin: 0;
background: #fff;
box-shadow: 0 5px 18px 1px #4c4c4c91;
z-index: 5600;
}
/* ---------- Extra surfaces reported in dark mode ---------- */
html[data-theme="dark"] .dash-toolbar,
html[data-theme="dark"] .manage-lines-page .ml-toolbar {
background: var(--dm-surface-2) !important;
border-color: var(--dm-border) !important;
color: var(--dm-text) !important;
}
html[data-theme="dark"] .dash-total-count,
html[data-theme="dark"] .manage-lines-page .ml-total-count {
color: var(--dm-muted) !important;
}
html[data-theme="dark"] .manage-lines-page .ml-page-size,
html[data-theme="dark"] .dash-page-size,
html[data-theme="dark"] .dash-filter-select,
html[data-theme="dark"] .manage-lines-page .ml-search-form .form-control,
html[data-theme="dark"] .dash-search-form .form-control {
background-color: var(--dm-input) !important;
color: var(--dm-text) !important;
border-color: var(--dm-border) !important;
}
html[data-theme="dark"] .manage-lines-page .ml-actions-group .btn-outline-primary,
html[data-theme="dark"] .dash-actions-group .btn-outline-primary {
background-color: var(--dm-surface-3) !important;
border-color: var(--dm-border) !important;
color: var(--dm-text) !important;
}
html[data-theme="dark"] .manage-lines-page .ml-actions-group .btn-outline-primary:hover,
html[data-theme="dark"] .dash-actions-group .btn-outline-primary:hover {
background-color: var(--dm-hover) !important;
border-color: var(--dm-accent) !important;
color: #9ec5fe !important;
}
html[data-theme="dark"] .manage-lines-page .ml-search-form .btn-dark,
html[data-theme="dark"] .dash-search-form .btn-dark {
background-color: var(--dm-accent) !important;
border-color: var(--dm-accent) !important;
color: #0b1220 !important;
}
html[data-theme="dark"] #filterLines .form-check-label,
html[data-theme="dark"] #filterLines .modal-body,
html[data-theme="dark"] #filterLines .modal-title {
color: var(--dm-text) !important;
}
html[data-theme="dark"] .manage-lines-page .badge-light,
html[data-theme="dark"] .manage-lines-page .btn-light {
background-color: var(--dm-surface-3) !important;
color: var(--dm-text) !important;
border-color: var(--dm-border) !important;
}
html[data-theme="dark"] .manage-lines-page .ml-lines-table .activesort,
html[data-theme="dark"] .manage-lines-page .ml-lines-table th.activesort {
color: var(--dm-accent) !important;
}
html[data-theme="dark"] .manage-lines-page .ml-lines-table thead th .material-icons {
color: var(--dm-muted) !important;
}
html[data-theme="dark"] .manage-lines-page .ml-lines-table thead th.activesort .material-icons {
color: var(--dm-accent) !important;
}
html[data-theme="dark"] .dash-table-wrap,
html[data-theme="dark"] .manage-lines-page .ml-table-wrap {
background: var(--dm-surface) !important;
border-color: var(--dm-border) !important;
}
html[data-theme="dark"] .dash-table-wrap > .table thead th,
html[data-theme="dark"] .manage-lines-page .ml-lines-table thead th,
html[data-theme="dark"] .manage-lines-page .ml-table-wrap thead th {
background: var(--dm-surface-2) !important;
color: var(--dm-text-secondary) !important;
border-color: var(--dm-border) !important;
}
html[data-theme="dark"] .usernameHoverShow {
background: var(--dm-surface-2) !important;
color: var(--dm-text) !important;
}
html[data-theme="dark"] .coverrrr {
background: rgba(15, 17, 21, 0.72) !important;
}
html[data-theme="dark"] .addcredit-balance-banner,
html[data-theme="dark"] h4.addcredit-balance-banner {
background: var(--dm-surface-2) !important;
color: var(--dm-text) !important;
}
html[data-theme="dark"] .copy-pack-lead {
color: var(--dm-text-secondary) !important;
}
html[data-theme="dark"] .copy-card {
background: var(--dm-surface) !important;
border-color: var(--dm-border) !important;
}
html[data-theme="dark"] .copy-card-head {
background: var(--dm-surface-2) !important;
border-bottom-color: var(--dm-border) !important;
color: var(--dm-text) !important;
}
html[data-theme="dark"] .copy-card-head h5 {
color: var(--dm-text) !important;
}
html[data-theme="dark"] .copy-card-head small {
color: var(--dm-muted) !important;
}
html[data-theme="dark"] .lang-pills button {
background: var(--dm-surface-2) !important;
border-color: var(--dm-border) !important;
color: var(--dm-text) !important;
}
html[data-theme="dark"] .lang-pills button.active {
background: #0b7a0b !important;
border-color: #0b7a0b !important;
color: #fff !important;
}
html[data-theme="dark"] .macros-add-panel {
background: var(--dm-surface-2) !important;
color: var(--dm-text) !important;
}
html[data-theme="dark"] .settings-page .st-card,
html[data-theme="dark"] .settings-page .st-list-item {
background: var(--dm-surface) !important;
border-color: var(--dm-border) !important;
color: var(--dm-text) !important;
}
html[data-theme="dark"] .settings-page .st-key-row,
html[data-theme="dark"] .settings-page .st-logo-box {
background: var(--dm-surface-2) !important;
border-color: var(--dm-border) !important;
color: var(--dm-text) !important;
}
html[data-theme="dark"] .settings-page .st-chip {
background: var(--dm-surface-3) !important;
color: var(--dm-text) !important;
}
html[data-theme="dark"] .settings-page .form-group label,
html[data-theme="dark"] .settings-page .st-card-title {
color: var(--dm-text) !important;
}
html[data-theme="dark"] .settings-page .st-alert-info {
background: #1a2a4a !important;
color: #9ec5fe !important;
border-color: #2a4580 !important;
}
html[data-theme="dark"] .settings-page .st-alert-warn {
background: #3a3010 !important;
color: #ffe08a !important;
border-color: #6b5520 !important;
}
html[data-theme="dark"] .settings-page .st-pkg-card {
background: var(--dm-surface-2) !important;
border-color: var(--dm-border) !important;
color: var(--dm-text) !important;
}
html[data-theme="dark"] .settings-page .st-pkg-card:hover {
border-color: #4a5a78 !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}
html[data-theme="dark"] .settings-page .st-pkg-card.offerpacl {
background: #3a2a18 !important;
border-color: #8a5a2a !important;
}
html[data-theme="dark"] .settings-page .st-pkg-card .st-pkg-remove:hover {
background: #3a1a1a !important;
}
html[data-theme="dark"] .settings-page .st-pkg-name,
html[data-theme="dark"] .settings-page .st-pkg-price {
color: var(--dm-text) !important;
}
/* Add-credit payment method buttons */
html[data-theme="dark"] .peymentSelect,
html[data-theme="dark"] button.peymentSelect {
background-color: var(--dm-surface-2) !important;
background-image: none !important;
color: var(--dm-text) !important;
border-color: var(--dm-border) !important;
box-shadow: none !important;
}
html[data-theme="dark"] .peymentSelect:hover,
html[data-theme="dark"] button.peymentSelect:hover {
background-color: var(--dm-hover) !important;
border-color: #4a5a78 !important;
color: var(--dm-text) !important;
}
html[data-theme="dark"] .peymentSelect2 {
background-color: var(--dm-surface-2) !important;
background-image: none !important;
}
html[data-theme="dark"] .selectedMethod,
html[data-theme="dark"] .peymentSelect.selectedMethod,
html[data-theme="dark"] button.peymentSelect.selectedMethod {
background-color: #163528 !important;
background-image: none !important;
border-color: #2f9e6a !important;
color: #9eecc0 !important;
box-shadow: 0 2px 10px rgba(47, 158, 106, 0.25) !important;
}
html[data-theme="dark"] .selectedMethod:hover,
html[data-theme="dark"] .peymentSelect.selectedMethod:hover {
background-color: #1a4030 !important;
border-color: #3bb87a !important;
}
html[data-theme="dark"] .selectedMethod:before {
border-left-color: #2f9e6a !important;
}
html[data-theme="dark"] .peymentSelect p,
html[data-theme="dark"] .selectedMethod p {
color: inherit !important;
}
html[data-theme="dark"] .payFirstTitle {
color: var(--dm-text) !important;
}
/* Payout page */
html[data-theme="dark"] .coinRow:hover {
background-color: var(--dm-hover) !important;
}
html[data-theme="dark"] .payout-balances-panel {
background: var(--dm-surface-2) !important;
border-color: #3a4a80 !important;
box-shadow: 0 16px 64px -30px rgba(0, 0, 0, 0.55) !important;
color: var(--dm-text) !important;
}
html[data-theme="dark"] .payout-unconfirmed {
background: #3a2424 !important;
color: #e8c4c4 !important;
border-left-color: #ff8135 !important;
}
html[data-theme="dark"] .payout-balances-panel label {
color: var(--dm-text-secondary) !important;
}
html[data-theme="dark"] .coinRow .payout-balance-fiat {
color: #7fd99a !important;
}
html[data-theme="dark"] .coinRow .payout-balance-crypto {
color: var(--dm-muted) !important;
}
html[data-theme="dark"] .payout-fiat-amount {
color: #c8f5d4 !important;
background: #163528 !important;
border: 1px solid #2f9e6a;
}
html[data-theme="dark"] .payout-confirm-amount {
color: #c8f5d4 !important;
background: #163528 !important;
border: 1px solid #2f9e6a;
}
html[data-theme="dark"] .payout-confirm-address {
background: var(--dm-surface-3) !important;
color: var(--dm-text) !important;
border: 1px solid var(--dm-border);
}
html[data-theme="dark"] #withdrawModal .modal-title strong,
html[data-theme="dark"] #confirmWithdrawModal .modal-body {
color: var(--dm-text) !important;
}
html[data-theme="dark"] .finishedtask {
background: #143528 !important;
}
html[data-theme="dark"] .rejecteditem {
background: #3a1a1a !important;
}
html[data-theme="dark"] .vote_result_up {
background: #143528 !important;
}
html[data-theme="dark"] .vote_result_zero {
background: var(--dm-surface-2) !important;
}
html[data-theme="dark"] .vote_result_down {
background: #3a1a1a !important;
}
html[data-theme="dark"] .status_under_construction {
background: var(--dm-surface-3) !important;
color: var(--dm-muted) !important;
}
html[data-theme="dark"] .features-you-suggested {
background: var(--dm-surface-2) !important;
color: var(--dm-text) !important;
border-color: var(--dm-border) !important;
}
html[data-theme="dark"] .features-page .voteBox [style*="background: #eee"],
html[data-theme="dark"] .features-page .voteBox [style*="background:#eee"] {
background: var(--dm-surface-2) !important;
color: var(--dm-text) !important;
border-color: var(--dm-border) !important;
}
html[data-theme="dark"] .force-country-list {
background: var(--dm-surface-2) !important;
}
html[data-theme="dark"] .lineOptionIcon:hover {
color: var(--dm-text) !important;
}
html[data-theme="dark"] .table-heade-options {
color: var(--dm-text);
}
/* Login surfaces — reinforce for home_style overrides */
html[data-theme="dark"] body,
html[data-theme="dark"] html body {
background-color: var(--dm-bg) !important;
background-image: none !important;
}
html[data-theme="dark"] .login-page-wrapper,
html[data-theme="dark"] .signin-container {
background: var(--dm-bg) !important;
background-color: var(--dm-bg) !important;
}
html[data-theme="dark"] .login-form,
html[data-theme="dark"] .leftLogin .login-form {
background: var(--dm-surface) !important;
color: var(--dm-text) !important;
}
/* ---------- Coinfident invoice status badges ---------- */
/* Must beat dark .form-control / select !important (status selects use both). */
html[data-theme="dark"] .status_paid,
html[data-theme="dark"] .status_Settled,
html[data-theme="dark"] select.form-control.status_paid,
html[data-theme="dark"] select.form-control.status_Settled,
html[data-theme="dark"] select.status_paid,
html[data-theme="dark"] select.status_Settled {
background: #1a7a3a !important;
background-color: #1a7a3a !important;
color: #e8ffe8 !important;
border-color: #2f9e5a !important;
}
html[data-theme="dark"] .status_New,
html[data-theme="dark"] select.form-control.status_New,
html[data-theme="dark"] select.status_New {
background: #1a2a4a !important;
background-color: #1a2a4a !important;
color: #9ec5fe !important;
border-color: #3a5a90 !important;
}
html[data-theme="dark"] .status_Processing,
html[data-theme="dark"] select.form-control.status_Processing,
html[data-theme="dark"] select.status_Processing {
background: #3a2a10 !important;
background-color: #3a2a10 !important;
color: #ffc078 !important;
border-color: #8a5a20 !important;
}
html[data-theme="dark"] .status_Invalid,
html[data-theme="dark"] select.form-control.status_Invalid,
html[data-theme="dark"] select.status_Invalid {
background: #3a1a1a !important;
background-color: #3a1a1a !important;
color: #ff9a9a !important;
border-color: #8a3030 !important;
}
html[data-theme="dark"] .status_Expired,
html[data-theme="dark"] select.form-control.status_Expired,
html[data-theme="dark"] select.status_Expired {
background: var(--dm-surface-3) !important;
background-color: var(--dm-surface-3) !important;
color: var(--dm-muted) !important;
border-color: var(--dm-border) !important;
}
html[data-theme="dark"] .status_PaidPartial,
html[data-theme="dark"] .status_SettledPartial,
html[data-theme="dark"] select.form-control.status_PaidPartial,
html[data-theme="dark"] select.status_PaidPartial {
background: #163528 !important;
background-color: #163528 !important;
color: #9eecc0 !important;
border-color: #2f9e6a !important;
}
html[data-theme="dark"] .status_PaidOver,
html[data-theme="dark"] .status_SettledOver,
html[data-theme="dark"] .status_overpaid,
html[data-theme="dark"] .status_PaidUnder,
html[data-theme="dark"] .status_underpaid,
html[data-theme="dark"] .status_SettledLate {
background: #3a1a3a !important;
background-color: #3a1a3a !important;
color: #f0b0e8 !important;
border-color: #7a3a70 !important;
}
html[data-theme="dark"] .status_PaidUnder,
html[data-theme="dark"] .status_underpaid {
background: #1a303a !important;
background-color: #1a303a !important;
color: #9ed8f0 !important;
border-color: #3a6a80 !important;
}
/* Invoice details modal / paid chips */
html[data-theme="dark"] #invoiceDetailsModal .modal-body,
html[data-theme="dark"] #invoiceDetailsModal .modal-content {
color: var(--dm-text) !important;
}
html[data-theme="dark"] #invoiceDetailsModal .row[style*="border-bottom"] {
border-bottom-color: var(--dm-border) !important;
}
html[data-theme="dark"] #invoiceDetailsModal [style*="background: #f2f2f2"],
html[data-theme="dark"] #invoiceDetailsModal [style*="background:#f2f2f2"],
html[data-theme="dark"] #invoiceDetailsModal [style*="background: #fff"],
html[data-theme="dark"] #invoiceDetailsModal [style*="background:#fff"],
html[data-theme="dark"] #invoiceDetailsModal [style*="background: #f0f0f0"],
html[data-theme="dark"] #invoiceDetailsModal [style*="background:#f0f0f0"] {
background: var(--dm-surface-2) !important;
color: var(--dm-text) !important;
}
html[data-theme="dark"] #invoiceDetailsModal [style*="background: #e8f8ee"],
html[data-theme="dark"] #invoiceDetailsModal [style*="background:#e8f8ee"] {
background: #163528 !important;
color: #9eecc0 !important;
}
html[data-theme="dark"] #invoiceDetailsModal [style*="background: #ffacac"],
html[data-theme="dark"] #invoiceDetailsModal [style*="background:#ffacac"],
html[data-theme="dark"] #invoiceDetailsModal [style*="background: #ffd3d3"],
html[data-theme="dark"] #invoiceDetailsModal [style*="background:#ffd3d3"] {
background: #3a1a1a !important;
color: #ffb0b0 !important;
}
html[data-theme="dark"] #invoiceDetailsModal [style*="color: #333"],
html[data-theme="dark"] #invoiceDetailsModal [style*="color:#333"] {
color: var(--dm-text) !important;
}
html[data-theme="dark"] .dash-page [style*="color: #0a7a32"],
html[data-theme="dark"] [style*="color: #0a7a32"] {
color: var(--dm-success) !important;
}
html[data-theme="dark"] .nav-tabs .nav-link {
color: var(--dm-text-secondary) !important;
}
html[data-theme="dark"] .nav-tabs .nav-link.active {
background: var(--dm-surface-2) !important;
color: var(--dm-text) !important;
border-color: var(--dm-border) !important;
}
.addcredit-balance-banner {
max-width: 600px !important;
text-align: center;
margin: 0 auto;
display: inherit;
background: #eee;
padding: 13px;
}
.macros-add-panel {
border-radius: 5px;
background: #eee;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}