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;
    --jmb-event-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);
    --jmb-event-icon-filter: brightness(0) invert(1);
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        --jmb-body-bg-image: none;
        --jmb-module-icon-filter: invert(1);
        --jmb-event-icon-filter: brightness(0) 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;
}

#branding {
    padding-bottom: 3px;
}

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

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

#user-tools {
    color: #ffc;
}

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

#header #navigation-menu {
    padding-bottom: 4px;

    --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;
}

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));
}

#languages {
    position: absolute;
    right: 15px;
    bottom: 0;
    height: 33px;
    display: flex;
    align-items: center;
    font-size: 11px;
    z-index: 10000;
}

#languages ul li {
    float: left;
}

#languages a {
    color: light-dark(#000000, #cccccc);
}

.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*="/event/img/"] {
    filter: var(--jmb-event-icon-filter);
}

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

.field-email_body > div,
.field-web_body > div {
    display: block;
}

.field-email_body label,
.field-web_body label {
    float: none !important;
    display: block;
    width: auto !important;
    padding: 0 0 6px 0 !important;
}

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

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

.tox .tox-dialog__body {
    flex-direction: column;
}

.tox .tox-dialog .tox-dialog__body-nav {
    flex-direction: row;
    max-width: none;
    padding-bottom: 0;
    overflow-x: auto;
}

.tox:not([dir="rtl"]) .tox-dialog .tox-dialog__body-nav {
    margin-right: 0;
}

.tox:not([dir="rtl"]) .tox-dialog .tox-dialog__body-nav-item:not(:first-child) {
    margin-left: 16px;
}