/*
 Nord Dark Theme (Polar Night) as a static stylesheet.
 - Applied when html has class .theme-dark
 - For System mode: handled via JS applying .theme-dark or .theme-light
 We only override key colors to keep CSS lightweight and non-invasive.

 Inspired by Damien Frigewski

 Actually Overwritten with Jetbrains Darcula-inspired palette for Dark/System(Dark) but anyways^^
*/
/*
div.wunderdata_loader_bg {
    background-color: #fff;
    opacity: 0.7;
    z-index: 49;
    position: fixed;
    width: 100%;
    height: 100%;
    display: block;
}
*/
html.theme-dark div.wunderdata_loader_bg {
    background-color: #5a5a5a;
    opacity: 0.7;
}


html.theme-dark div.table_loader_bg {
    background-color: #5a5a5a;
    opacity: 0.5;
}

:root {
    /* Nord palette */
    --nord0: #2E3440;
    /* Polar Night */
    --nord1: #3B4252;
    --nord2: #434C5E;
    --nord3: #4C566A;
    --nord4: #D8DEE9;
    /* Snow Storm */
    --nord5: #E5E9F0;
    --nord6: #ECEFF4;
    --nord7: #8FBCBB;
    /* Frost */
    --nord8: #88C0D0;
    --nord9: #81A1C1;
    --nord10: #5E81AC;
    --nord11: #BF616A;
    /* Aurora */
    --nord12: #D08770;
    --nord13: #EBCB8B;
    --nord14: #A3BE8C;
    --nord15: #B48EAD;
}

/* JetBrains Darcula-inspired palette for Dark/System(Dark)
   We override the Nord variables in dark mode scopes so the rest of the
   stylesheet automatically picks up the new tones without touching rules. */
html.theme-dark {
    /* Backgrounds / surfaces */
    --nord0: #2B2D30;
    /* base window background */
    --nord1: #31353B;
    /* panels/cards */
    --nord2: #3C4048;
    /* headers/stripes */
    --nord3: #43484F;
    /* borders/dividers */
    /* Text hierarchy (JetBrains-like neutrals) */
    --nord4: #A9B7C6;
    /* secondary text / placeholders */
    --nord5: #C5CCD6;
    /* label text */
    --nord6: #D9DEE5;
    /* primary text */
    /* Accents (JetBrains blue family) */
    --nord8: #3D8BF2;
    /* links */
    --nord9: #62A5FF;
    /* hover/active link */
    --nord10: #3574F0;
    /* primary button */
    /* Semantic hues closer to Darcula */
    --nord11: #C75450;
    /* red */
    --nord12: #CC7832;
    /* orange */
    --nord13: #F2C55C;
    /* yellow */
    --nord14: #6A8759;
    /* green */
    --nord15: #9876AA;
    /* purple */
}

/* Utility helpers to mimic Tailwind-like classes used by toggle button */
.p-1 {
    padding: 4px;
}

.p-2 {
    padding: 8px;
}

.rounded-full {
    border-radius: 9999px;
}

.text-xl {
    font-size: 1.25em;
    line-height: 1.25;
}

.transition-colors {
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.text-nord-aurora3 {
    color: var(--nord14);
}

.text-nord-frost4 {
    color: var(--nord10);
}

.focus\:outline-none:focus {
    outline: none;
}

/* Smooth theme transitions when switching Light ↔ Dark */
/* Keep scope small and properties minimal to avoid stutter */
html[class^="theme-"] body,
html[class^="theme-"] .navbar,
html[class^="theme-"] .panel,
html[class^="theme-"] .modal-content {
    transition: background-color .18s ease, color .18s ease;
}

/* Performance: never animate table colors during theme switches */
html[class^="theme-"] table,
html[class^="theme-"] table td,
html[class^="theme-"] table th,
html[class^="theme-"] .table>thead>tr>th,
html[class^="theme-"] .table>tbody>tr>td,
html[class^="theme-"] .table>tbody>tr>th,
html[class^="theme-"] .table-hover>tbody>tr:hover>td,
html[class^="theme-"] .table-hover>tbody>tr:hover>th,
html[class^="theme-"] .panel .table,
html[class^="theme-"] .panel .table td,
html[class^="theme-"] .panel .table th,
html[class^="theme-"] .fancyTable tbody tr td,
html[class^="theme-"] .ExcelTable2007 tr td,
html[class^="theme-"] .ExcelTable2007 tr th,
html[class^="theme-"] .ExcelTable2007 thead tr th {
    transition: none !important;
}

/* Avoid animating the theme toggle itself to keep the switch snappy */
html[class^="theme-"] #theme-toggle,
html[class^="theme-"] #theme-toggle svg {
    transition: none !important;
}

/* Remove any heavy hover effects on table cells to improve responsiveness */
html[class^="theme-"] .table-hover>tbody>tr:hover>td,
html[class^="theme-"] .table-hover>tbody>tr:hover>th,
html[class^="theme-"] .fancyTable tbody tr:hover td,
html[class^="theme-"] .ExcelTable2007 tbody tr:hover td,
html[class^="theme-"] .ExcelTable2007 tbody tr.current td {
    box-shadow: none !important;
    transition: none !important;
}

/* Respect users that prefer reduced motion: turn off transitions entirely */
@media (prefers-reduced-motion: reduce) {

    html[class^="theme-"] *,
    html[class^="theme-"] {
        transition: none !important;
    }
}

/* Theme toggle button base and light hover */
/* Reapply compact sizing so it doesn't increase navbar height */
.theme-toggle-btn {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: middle;
}

.theme-toggle-btn:hover {
    background-color: var(--nord5);
}

/* Theme toggle icons visibility */
#theme-toggle .theme-icon-sun,
#theme-toggle .theme-icon-moon {
    display: inline-block;
}

html.theme-dark #theme-toggle .theme-icon-sun {
    display: none;
}

html.theme-dark #theme-toggle .theme-icon-moon {
    display: inline-block;
}

html.theme-light #theme-toggle .theme-icon-sun {
    display: inline-block;
}

html.theme-light #theme-toggle .theme-icon-moon {
    display: none;
}

/* Base (explicit Dark mode) */
html.theme-dark body {
    background-color: var(--nord0);
    color: var(--nord6);
}

html.theme-dark a {
    color: var(--nord8);
}

html.theme-dark a:hover {
    color: var(--nord7);
}

/* Navbar */
html.theme-dark .navbar {
    background-color: var(--nord1);
    border-color: var(--nord2);
    /* Replace light-theme shadow/highlight with a darker drop shadow */
    -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

html.theme-dark .navbar .navbar-brand,
html.theme-dark .navbar .nav>li>a {
    color: var(--nord6);
}

html.theme-dark .navbar .nav>li>a:hover {
    background-color: var(--nord2);
}

/* Ensure active/open navbar items match Nord palette instead of deep black */
html.theme-dark .navbar-inverse .navbar-nav>li.active>a,
html.theme-dark .navbar-inverse .navbar-nav>li.active>a:hover,
html.theme-dark .navbar-inverse .navbar-nav>li.active>a:focus,
html.theme-dark .navbar-inverse .navbar-nav>li.open>a,
html.theme-dark .navbar-inverse .navbar-nav>li.open>a:hover,
html.theme-dark .navbar-inverse .navbar-nav>li.open>a:focus,
html.theme-dark .navbar .dropdown.active>a,
html.theme-dark .navbar .dropdown.active>a:hover,
html.theme-dark .navbar .dropdown.active>a:focus {
    background-color: var(--nord2);
    color: var(--nord6);
    border-color: var(--nord2);
}

/* Navbar widgets: reportrange + select-bookmark (Dark) */
/* reportrange has inline light styles; override with !important in dark mode */
html.theme-dark #reportrange {
    background-color: var(--nord2) !important;
    color: var(--nord6) !important;
    border: 1px solid var(--nord3) !important;
    border-radius: 6px;
    margin-top: 9px;
    margin-bottom: 0;
}

html.theme-dark #reportrange:hover {
    background-color: var(--nord3) !important;
}

html.theme-dark #reportrange .glyphicon,
html.theme-dark #reportrange .fa {
    color: var(--nord6) !important;
}

/* Bootstrap caret uses borders for color */
html.theme-dark #reportrange .caret {
    border-top-color: var(--nord6) !important;
    border-bottom-color: var(--nord6) !important;
}

/* Bookmark select in navbar */
html.theme-dark #select-bookmark.form-control {
    background-color: var(--nord1);
    border-color: var(--nord3);
    color: var(--nord6);
    border-radius: 6px;
    height: 32px;
    /* compact to match navbar */
    padding-top: 4px;
    padding-bottom: 4px;
    margin-top: 9px;
    margin-bottom: 9px;
    border-top: 0;
    border-bottom: 0;
}

html.theme-dark .navbar #select-bookmark.form-control {
    width: auto;
}

html.theme-dark #select-bookmark.form-control option.placeholder {
    color: var(--nord4);
}

/* Panels and wells */
html.theme-dark .panel {
    background-color: var(--nord1);
    border-color: var(--nord3);
    color: var(--nord6);
}

html.theme-dark .panel-heading {
    background-color: var(--nord2);
    border-color: var(--nord3);
    color: var(--nord6);
}

html.theme-dark .well {
    background-color: var(--nord1);
    border-color: var(--nord3);
    color: var(--nord6);
}

/* Builder tabs (Table Builder) */
/* Scope dark styling to the specific tabs list so we don't affect other navs */
html.theme-dark #table_builder_tabs {
    border-bottom: 1px solid var(--nord3);
}

html.theme-dark #table_builder_tabs>li>a {
    background-color: var(--nord1);
    color: var(--nord6);
    border: 1px solid var(--nord3);
    border-bottom-color: var(--nord3);
}

html.theme-dark #table_builder_tabs>li>a:hover,
html.theme-dark #table_builder_tabs>li>a:focus {
    background-color: var(--nord2);
    color: var(--nord6);
    border-color: var(--nord3);
}

html.theme-dark #table_builder_tabs>li.active>a,
html.theme-dark #table_builder_tabs>li.active>a:hover,
html.theme-dark #table_builder_tabs>li.active>a:focus {
    background-color: var(--nord0);
    color: var(--nord6);
    border: 1px solid var(--nord3);
    border-bottom-color: transparent;
    /* blend with content below */
}

/* Optional: give the tab-content below a subtle border to match tabs */
html.theme-dark #table_builder_tabs+.tab-content {
    background-color: var(--nord0);
    color: var(--nord6);
    border-top: none;
}

/* Forms */
html.theme-dark .form-control {
    background-color: var(--nord1);
    border-color: var(--nord3);
    color: var(--nord6);
    border-radius: 6px;
}

html.theme-dark .form-control:focus {
    border-color: var(--nord8);
    box-shadow: 0 0 0 2px rgba(136, 192, 208, 0.25);
}

html.theme-dark label {
    color: var(--nord5);
}

/* Some modals use a plain input without .form-control (e.g., #form_bookmark_name).
   Ensure it gets dark styling too. */
html.theme-dark #form_bookmark_name {
    background-color: var(--nord1);
    color: var(--nord6);
    border: 1px solid var(--nord3);
    border-radius: 6px;
    padding: .5rem;
}

html.theme-dark #form_bookmark_name:focus {
    border-color: var(--nord8);
    box-shadow: 0 0 0 2px rgba(136, 192, 208, 0.25);
    outline: none;
}

html.theme-dark #form_bookmark_name::placeholder {
    color: var(--nord4);
    opacity: .7;
}

/* Buttons */
html.theme-dark .btn-default {
    background-color: var(--nord2);
    border-color: var(--nord3);
    color: var(--nord6);
}

html.theme-dark .btn-default:hover {
    background-color: var(--nord3);
    border-color: var(--nord3);
    color: var(--nord6);
}

html.theme-dark .btn-primary {
    background-color: var(--nord10);
    border-color: var(--nord10);
}

html.theme-dark .btn-primary:hover {
    background-color: var(--nord9);
    border-color: var(--nord9);
}

html.theme-dark .dashboard_object_wrapper .widget_content {
    border-bottom: solid var(--nord3);
}

/* Tables */
html.theme-dark table {
    color: var(--nord6);
}

/* Table headers: JetBrains-like header tone and slightly softer text */
html.theme-dark .table>thead>tr>th {
    background-color: var(--nord2);
    border-color: var(--nord3);
    color: var(--nord5);
}

html.theme-dark .table>tbody>tr>td {
    border-color: var(--nord3);
}

html.theme-dark .table-striped>tbody>tr:nth-of-type(odd) {
    background-color: var(--nord1);
}

html.theme-dark .table-striped>tbody>tr:nth-of-type(even) {
    background-color: var(--nord2);
}

/* Use cell-level hover to ensure it overrides any TD backgrounds from zebra/base CSS */
html.theme-dark .table-hover>tbody>tr:hover>td,
html.theme-dark .table-hover>tbody>tr:hover>th {
    background-color: rgba(216, 222, 233, 0.38);
}

/* Legacy fancyTable hover support */
html.theme-dark .fancyTable tbody tr:hover td {
    background-color: rgba(216, 222, 233, 0.38);
}

/* Alerts */
html.theme-dark .alert-success {
    background-color: #1f2a22;
    border-color: #355e3b;
    color: #cfe7d1;
}

html.theme-dark .alert-danger {
    background-color: #2a1f23;
    border-color: #6b3036;
    color: #f2c9cd;
}

/* Excel-like sticky table overrides (Nord dark) */
/* Base cell colors: odd rows darker (nord1), even rows slightly lighter (nord2) */
html.theme-dark .ExcelTable2007 tbody tr:nth-child(odd) td {
    background-color: var(--nord1);
}

html.theme-dark .ExcelTable2007 tbody tr:nth-child(even) td {
    background-color: var(--nord2);
}

/* If explicit striped rows are used, make sure they follow Nord too */
html.theme-dark .ExcelTable2007 tr.striped td {
    background-color: var(--nord2);
}

/* Alternating darkening for colored cells in Dark Theme */
html.theme-dark .ExcelTable2007 tbody tr:nth-child(odd) td.colored-cell {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.05);
}

/* Headers */
html.theme-dark .ExcelTable2007 thead tr.key th {
    background-color: var(--nord2);
    color: var(--nord5);
    border-color: var(--nord3);
}

html.theme-dark .ExcelTable2007 tr.key td,
html.theme-dark .ExcelTable2007 tr.key th.contentheader {
    background-color: var(--nord2);
    color: var(--nord5);
    border-color: var(--nord3);
}

/* Sticky left heading (row number) */
html.theme-dark .ExcelTable2007 tr td.heading.key {
    background-color: var(--nord1);
    border-color: var(--nord3);
}

html.theme-dark .ExcelTable2007 tr th.heading.key {
    background-color: var(--nord2);
    color: var(--nord5);
    border-color: var(--nord3);
}

/* First data column should follow row background */
html.theme-dark .ExcelTable2007 tr td.first-column {
    background-color: inherit;
    color: var(--nord6);
}

/* Generic cell text + borders */
html.theme-dark .ExcelTable2007 tr td {
    color: var(--nord6);
    border-color: var(--nord3);
}

/* Hover/current highlight brighter than base rows */
html.theme-dark .ExcelTable2007 tbody tr:hover td {
    background-color: rgba(216, 222, 233, 0.38);
}

html.theme-dark .ExcelTable2007 tbody tr.current td {
    background-color: rgba(216, 222, 233, 0.38);
}

/* Code blocks, pre */
html.theme-dark pre,
html.theme-dark code {
    background-color: var(--nord1);
    color: var(--nord6);
}

/* Modals */
html.theme-dark .modal-content {
    background-color: var(--nord1);
    color: var(--nord6);
    border-color: var(--nord3);
}

html.theme-dark .modal-header {
    border-bottom-color: var(--nord3);
}

html.theme-dark .modal-footer {
    border-top-color: var(--nord3);
}

/* Tables inside dashboard objects */

html.theme-dark h1,
html.theme-dark h2,
html.theme-dark h3,
html.theme-dark h4,
html.theme-dark h5,
html.theme-dark h6 {
    color: var(--nord6);
}

/* Inputs placeholder */
html.theme-dark ::placeholder {
    color: var(--nord4);
    opacity: 0.7;
}

/* Horizontal rules */
html.theme-dark hr {
    border-top: 1px solid var(--nord3);
}

/* Dropdowns */
html.theme-dark .dropdown-menu {
    background-color: var(--nord1);
    border-color: var(--nord3);
}

html.theme-dark .dropdown-menu>li>a {
    color: var(--nord6);
}

html.theme-dark .dropdown-menu>li>a:hover {
    background-color: var(--nord2);
}

/* Active item inside dropdown menus */
html.theme-dark .dropdown-menu>li.active>a,
html.theme-dark .dropdown-menu>li.active>a:hover,
html.theme-dark .dropdown-menu>li.active>a:focus {
    background-color: var(--nord3);
    color: var(--nord6);
}

/* Filter Mask & Panel (Filters UI) */
html.theme-dark #filterMask {
    /* Darken the page behind the panel with Polar Night tone */
    background-color: var(--nord0);
    opacity: 0.6;
}

html.theme-dark #filterPanel {
    background-color: var(--nord1);
    color: var(--nord6);
    /* Softer shadow suitable for dark surfaces */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
    border-bottom: 1px solid var(--nord3);
}

html.theme-dark #filterPanelActivator {
    background-color: #3964b9;
    /* requested explicit color in dark mode */
    color: var(--nord6);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
}

html.theme-dark #filterPanelActivator:hover {
    background-color: #4a75c7;
}

/* Breadcrumbs */
html.theme-dark .breadcrumb {
    background-color: var(--nord1);
    border: 1px solid var(--nord3);
}

/* Tables inside Bootstrap panels */
html.theme-dark .panel .table>thead>tr>th {
    background-color: var(--nord2);
}

/* Ensure the GTM spacer container remains readable */
html.theme-dark .container {
    color: var(--nord6);
}

/* Simple widget placeholder: when inline style sets text color to #333 (wide variant),
   use requested blue background in dark mode. Attribute selector targets the inline style. */
html.theme-dark .dashboard-widget [style*="#111"] {
    background-color: #31708f !important;
}

html.theme-dark .dashboard-widget[style*="#111"] {
    background-color: #31708f !important;
}

html.theme-dark .dashboard_object_wrapper:has(.dashboard-widget[style*="#111"]) {
    background-color: #31708f !important;
}

/* Bookmark select in navbar */

html.theme-dark ul.select-list li,
html.theme-dark ul.drag-list li,
html.theme-dark ul.drop-list li {
    background-color: var(--nord1);
    border-color: var(--nord3);
    color: var(--nord6);
    border-radius: 6px;
    height: 32px;
    /* compact to match navbar */
    padding-top: 4px;
    padding-bottom: 4px;
    margin-top: 9px;
    margin-bottom: 9px;
    border-top: 0;
    border-bottom: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}


div.widget_content {
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 5px;
}


html.theme-dark div.dashboard_object_wrapper {
    background-color: var(--nord1);
    border-color: var(--nord3);
    color: var(--nord6);
    border-radius: 6px;
    height: 32px;
    /* compact to match navbar */
    padding-top: 4px;
    padding-bottom: 4px;
    margin-top: 9px;
    margin-bottom: 9px;
    border-top: 0;
    border-bottom: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}


html.theme-light div.dashboard_object_wrapper {

    border-radius: 6px;
    height: 32px;
    /* compact to match navbar */
    padding-top: 4px;
    padding-bottom: 4px;
    margin-top: 9px;
    margin-bottom: 9px;
    border-top: 0;
    border-bottom: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

/* Generic dark-mode fix: any DIV that inlines a black background should use #31708f instead.
   Covers common inline notations: "background-color: black", "background-color:#000",
   "background-color:#000000", and rgb(0,0,0). Also catch shorthand "background:" usages. */
html.theme-dark div[style*="background-color: black"],
html.theme-dark div[style*="background-color:black"],
html.theme-dark div[style*="background-color:#000"],
html.theme-dark div[style*="background-color: #000"],
html.theme-dark div[style*="background-color:#000000"],
html.theme-dark div[style*="background-color: #000000"],
html.theme-dark div[style*="background-color:rgb(0,0,0)"],
html.theme-dark div[style*="background-color: rgb(0, 0, 0)"],
html.theme-dark div[style*="background: black"],
html.theme-dark div[style*="background:black"],
html.theme-dark div[style*="background:#000"],
html.theme-dark div[style*="background: #000"],
html.theme-dark div[style*="background:#000000"],
html.theme-dark div[style*="background: #000000"],
html.theme-dark div[style*="background:rgb(0,0,0)"],
html.theme-dark div[style*="background: rgb(0, 0, 0)"] {
    background-color: #31708f !important;
}

html.theme-dark div.trend_widget {
    border-bottom-color: #31708f !important;
}

/* Dark-mode fix: triangle-down glyphs colored black should use #31708f */
/* General rule for the glyph in dark mode */
html.theme-dark .glyphicon.glyphicon-triangle-bottom {
    color: #31708f;
}

/* Ensure we override inline black colors as well */
html.theme-dark span.glyphicon.glyphicon-triangle-bottom[style*="color: black"],
html.theme-dark span.glyphicon.glyphicon-triangle-bottom[style*="color:black"],
html.theme-dark span.glyphicon.glyphicon-triangle-bottom[style*="color:#000"],
html.theme-dark span.glyphicon.glyphicon-triangle-bottom[style*="color: #000"],
html.theme-dark span.glyphicon.glyphicon-triangle-bottom[style*="color:#000000"],
html.theme-dark span.glyphicon.glyphicon-triangle-bottom[style*="color: #000000"],
html.theme-dark span.glyphicon.glyphicon-triangle-bottom[style*="color:rgb(0,0,0)"],
html.theme-dark span.glyphicon.glyphicon-triangle-bottom[style*="color: rgb(0, 0, 0)"] {
    color: #31708f !important;
}

/* Dark-mode hover for theme toggle button */
html.theme-dark .theme-toggle-btn:hover {
    background-color: var(--nord3);
}

/* Charts: make SVG grid lines finer and less bright in dark mode */
html.theme-dark svg .grid line {
    /* Use a soft light tone with low opacity so lines are subtle on dark bg */
    stroke: var(--nord4);
    stroke-opacity: 0.25;
    stroke-width: 0.5px;
    shape-rendering: crispEdges;
}

/* Chart Tooltips (.info) dark mode contrast */
html.theme-dark .info {
    background-color: var(--nord1) !important;
    border: 1px solid var(--nord3) !important;
    color: var(--nord6) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
    opacity: 0.95 !important;
    border-radius: 4px;
}

html.theme-dark .info .category,
html.theme-dark .info .xValue {
    color: var(--nord5) !important;
    font-weight: bold;
    border-bottom: 1px solid var(--nord3);
    margin-bottom: 5px;
    padding-bottom: 3px;
}

/* Legend tooltips */
html.theme-dark .series:hover::after {
    background-color: var(--nord1) !important;
    color: var(--nord6) !important;
    border-color: var(--nord3) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

/* Light mode explicit tweaks (when user forces light) */
html.theme-light .form-control {
    background-color: #ffffff;
    border-color: var(--nord5);
    color: #111;
    border-radius: 6px;
}

html.theme-light .form-control:focus {
    border-color: var(--nord10);
    box-shadow: 0 0 0 2px rgba(94, 129, 172, 0.25);
}

/* SortableJS Fallback (Drag Preview) - Dark Mode */
html.theme-dark .sortable-fallback {
    background-color: var(--nord1) !important;
    border-color: var(--nord3) !important;
    color: var(--nord6) !important;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5) !important;
}

html.theme-dark .ghost {
    background-color: var(--nord2) !important;
    opacity: 0.5;
}

html.theme-light ::placeholder {
    color: #6b7280;
    opacity: .8;
}

html.theme-light label {
    color: #111;
}

h2.dashboard_object_title {
    margin-top: 10px;

}

div.dashboard_table {
    margin-bottom: 10px;

}

/* Navbar glow for light mode */
html.theme-light .navbar .nav>li>a:hover {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

/* Navbar glow for dark mode */
html.theme-dark .navbar .nav>li>a:hover {
    background-color: var(--nord2);
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* Popovers - Dark theme */
html.theme-dark .popover {
    background-color: var(--nord1);
    border: 1px solid var(--nord3);
}

html.theme-dark .popover-content {
    color: var(--nord6);
}

html.theme-dark .popover-title {
    background-color: var(--nord2);
    border-bottom: 1px solid var(--nord3);
    color: var(--nord6);
}

html.theme-dark .popover.right>.arrow:after {
    border-right-color: var(--nord1);
}

html.theme-dark .popover.left>.arrow:after {
    border-left-color: var(--nord1);
}

html.theme-dark .popover.top>.arrow:after {
    border-top-color: var(--nord1);
}

html.theme-dark .popover.bottom>.arrow:after {
    border-bottom-color: var(--nord1);
}

/* Custom sizer input - Dark theme */
html.theme-dark .custom-sizer {
    background-color: var(--nord1) !important;
    border-color: var(--nord3) !important;
    color: var(--nord6) !important;
}

/* Size changer choice - Dark theme */
html.theme-dark .size-changer-choice,
html.theme-dark div.size-changer-choice {
    background-color: var(--nord1);
    border-color: var(--nord3);
    color: var(--nord6);
}

html.theme-dark .size-changer-choice:hover,
html.theme-dark div.size-changer-choice:hover {
    background-color: var(--nord2);
}

/* Elements searchbar inputs - Dark theme */
html.theme-dark #elements-searchbar1,
html.theme-dark #elements-searchbar2,
html.theme-dark #elements-searchbar3,
html.theme-dark #elements-searchbar4 {
    background-color: var(--nord1) !important;
    border-color: var(--nord3) !important;
    color: var(--nord6) !important;
}

html.theme-dark #elements-searchbar1::placeholder,
html.theme-dark #elements-searchbar2::placeholder,
html.theme-dark #elements-searchbar3::placeholder,
html.theme-dark #elements-searchbar4::placeholder {
    color: var(--nord4);
    opacity: 0.7;
}