html[data-theme="light"], html[data-theme="dark"], :root {
    color-scheme: light dark;

    --jmb-body-bg-image: url("../../img/tiny_grid.ad65f1723986.png");
    --jmb-module-icon-filter: none;
}

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

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

    --jmb-body-bg-image: none;
    --jmb-module-icon-filter: invert(1);
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        --jmb-body-bg-image: none;
        --jmb-module-icon-filter: invert(1);
    }
}

body, .ui-dialog {
    background-image: var(--jmb-body-bg-image);
    background-color: light-dark(transparent, var(--body-bg));
    background-repeat: repeat;
}

body.login {
    background-color: light-dark(var(--darkened-bg), var(--body-bg));
}

.admintab.nav-tabs {
    background-color: transparent;
}

.form-row {
    padding: 3px 12px;
}

#send_to_all {
    margin-left: 6px;
}

#header {
    position: relative;
    background: #222;
    color: #fff;
}

body.tox-fullscreen #header {
    visibility: hidden;
}

#header a, #header a:link, #header a:visited {
    color: #fff;
}

#header #site-name,
#header #site-name a,
#header #site-name a:link,
#header #site-name a:visited {
    color: #fff;
}

#header #site-name {
    padding-left: 10px;
}

#user-tools {
    color: #ffc;
}

#header .theme-toggle {
    background: transparent;
    border: none;
    border-radius: 50%;
}

#header .theme-toggle svg {
    fill: #fff;
    color: #222;
}

#header #navigation-menu {
    --darkened-bg: transparent;
    --border-color: transparent;
    --body-quiet-color: #fff;
    --hairline-color: #555;
    --body-bg: #444;
}

#header ul#navigation-menu li ul {
    --body-bg: #333;
    --selected-bg: #444;
    --hairline-color: #555;
}

#navigation-menu li ul a {
    background-color: transparent;
}

body div.breadcrumbs {
    background: light-dark(#f5f5f5, var(--darkened-bg));
    color: light-dark(#666666, var(--body-quiet-color));
    border: 1px solid light-dark(#dddddd, var(--border-color));
    border-radius: 6px;
    margin: 0 20px;
    padding: 8px 15px;
    font-size: 13px;
}

body div.breadcrumbs a {
    color: light-dark(#333333, var(--breadcrumbs-link-fg));
}

body div.breadcrumbs a:focus,
body div.breadcrumbs a:hover {
    color: light-dark(#000000, var(--body-loud-color));
}

.dashboard-module {
    --border-color: light-dark(#e5e5e5, #353535);
    --header-bg: light-dark(#f8f8f8, var(--primary));
    --header-link-color: light-dark(#555555, #ffffff);
    --hairline-color: light-dark(#ececec, #444444);
    --link-fg: light-dark(#417690, #4da6d9);
    border-radius: 6px;
}

.dashboard-module h3 {
    --darkened-bg: light-dark(#fafafa, #1f1f1f);
    --body-quiet-color: light-dark(#666666, #aaaaaa);
}

.dashboard-module ul li.odd {
    --darkened-bg: light-dark(#f5f5f5, #1a1a1a);
}

.dashboard-module ul li.even {
    --body-bg: light-dark(#ffffff, #111111);
}

.dashboard-module ul li:hover {
    --selected-row: light-dark(#fffff4, #252525);
}

.dashboard-module.ui-tabs-panel {
    --body-bg: light-dark(#ffffff, #1a1a1a);
}

#dashboard-panel ul li {
    --body-bg: light-dark(#ffffff, #1a1a1a);
    --border-color: light-dark(#e5e5e5, #444444);
}

.dashboard-placeholder {
    --primary: light-dark(#e5e5e5, #444444);
}

.group {
    --body-bg: light-dark(#ffffff, #1a1a1a);
    --darkened-bg: light-dark(#fafafa, #252525);
    --border-color: light-dark(#d3d3d3, #444444);
    --body-quiet-color: light-dark(#333333, #e0e0e0);
    --body-fg: light-dark(#333333, #ffffff);
    --selected-bg: light-dark(#f0f0f0, #303030);
}

html:root .dashboard-module h2 a.toggle-icon,
html:root .dashboard-module h2 a.close-icon {
    filter: var(--jmb-module-icon-filter);
}

.jmb-tabs-nav {
    border-bottom-color: light-dark(#cccccc, #555555);
}

.jmb-tab-item a,
.jmb-tab-item span {
    background: light-dark(#eeeeee, #2a2a2a);
    color: light-dark(#333333, #aaaaaa);
    border-color: light-dark(#cccccc, #555555);
}

.jmb-tab-item a:hover {
    background: light-dark(#e4e4e4, #383838);
    color: light-dark(#000000, #eeeeee);
}

.jmb-tab-item.jmb-tab-active a {
    background: var(--body-bg);
    color: var(--body-fg);
    border-color: light-dark(#cccccc, #555555);
    border-bottom-color: var(--body-bg);
}

.jmb-tab-item.jmb-tab-has-error a {
    background-color: light-dark(#ffe2e2, #4a1515);
}

#result_list td img[src*="del."],
#result_list td img[src*="search.png"] {
    border-radius: 4px;
}

.related-widget-wrapper {
    align-items: center;
}

.related-widget-wrapper-link img {
    width: 13px;
    height: 13px;
}

.flex-container .select2-container,
td .select2-container {
    left: 0;
}

html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: var(--body-bg);
    border-color: var(--border-color);
    color: var(--body-fg);
}

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--body-fg);
}

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder,
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
    color: var(--body-quiet-color);
}

html[data-theme="dark"] .select2-dropdown {
    background-color: var(--body-bg);
    border-color: var(--border-color);
    color: var(--body-fg);
}

html[data-theme="dark"] .select2-search--dropdown .select2-search__field {
    background-color: var(--darkened-bg);
    border-color: var(--border-color);
    color: var(--body-fg);
}

html[data-theme="dark"] .select2-results__option {
    color: var(--body-fg);
    background-color: transparent;
}

html[data-theme="dark"] .select2-results__option--highlighted[aria-selected] {
    background-color: var(--primary);
    color: var(--primary-fg);
}

html[data-theme="dark"] .select2-results__option[aria-selected="true"] {
    background-color: var(--selected-bg);
}

html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--darkened-bg);
    border-color: var(--border-color);
    color: var(--body-fg);
}