.heading {
    background-color: var(--background-color-main);
}

.bg-warning {
    background-color: #fffbf7;
}

.dropdown-menu {
    background-color: var(--background-color-page);
    border-color: var(--text-color-highlight-fade-15);
    box-shadow: 0 6px 12px var(--background-color-page);
}

.dropdown-menu > li > a,
.dropdown-menu > li > a:hover {
    color: var(--text-color-main);
}

.dropdown-menu > li > a:hover {
    background: var(--background3);
}

.modal .dropdown-menu li,
.nav-tabs .dropdown-menu li,
.panel .dropdown-menu li {
    border-color: transparent;
}

.form-control,
textarea {
    color: var(--text-color-highlight) !important;
    background-color: var(--background-color-secondary) !important;
}

::placeholder {
    color: var(--text-color-soft) !important;
}

.form-collapsible-fields {
    background-color: var(--background3);
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    border-color: var(--background4);
}

.select2-container--humhub .select2-selection,
.select2-container--humhub .select2-selection--single .select2-selection__rendered {
    color: var(--text-color-highlight);
    background-color: var(--background3);
}

.select2-dropdown {
    background-color: var(--background3) !important;
}

.select2-container--humhub .select2-results__option[aria-selected=true] {
    background-color: var(--background-color-secondary);
    color: var(--text-color-highlight);
}

.select2-container--humhub .select2-search--dropdown .select2-search__field {
    background-color: var(--background-color-main);
    color: var(--text-color-main);
}

.select2-container--humhub.select2-container--disabled .select2-selection,
.select2-container--humhub.select2-container--disabled .select2-selection--multiple .select2-selection__choice,
.select2-container--humhub.select2-container--disabled .select2-selection__rendered {
    background-color: var(--background4);
    border-color: var(--background4);
}

@media (max-width: 570px) {
    #topbar > .container #top-menu-nav {
        background-color: var(--background-color-page);
    }

    #topbar > .container #top-menu-nav > li > a {
        color: var(--hh-ct-top-menu-text-color);
    }

    #topbar > .container #top-menu-nav > li > a.active, #topbar > .container #top-menu-nav > li > a:active, #topbar > .container #top-menu-nav > li > a:focus, #topbar > .container #top-menu-nav > li > a:hover {
        background-color: var(--hh-ct-top-menu-text-color) !important;
        color: var(--background-color-page) !important;
    }
}

.list-group-item {
    background-color: var(--background-color-main);
    border-color: transparent !important
}

a.list-group-item,
button.list-group-item {
    color: var(--text-color-main);
}

a.list-group-item.active,
a.list-group-item.active:focus,
a.list-group-item.active:hover,
a.list-group-item:focus,
a.list-group-item:hover,
button.list-group-item:focus,
button.list-group-item:hover {
    color: var(--text-color-highlight) !important;
    background-color: var(--background4) !important;
}

.status-bar-body {
    background-color: var(--background4-fade-50);
}

.container-cards .card .card-panel {
    background-color: var(--background3);
}

.container-cards .card .card-header .card-image-link {
    border-color: var(--background-color-page);
}

.container-cards .card .card-body .card-details {
    color: var(--text-color-soft);
}

.container-cards .card .card-bg-image {
    background-color: var(--background4);
}

.container-cards .form-search .form-button-search {
    color: var(--text-color-main);
}

.btn-default.active,
.btn-default:active,
.open > .dropdown-toggle.btn-default {
    background-color: var(--background3);
}

.btn-info.active,
.btn-info:active,
.btn-primary.active,
.btn-primary:active {
    background: var(--background-color-secondary) !important;
}

.btn-primary.active,
.btn-primary:active {
    border-color: var(--primary-lighten-10);
    color: var(--primary-lighten-10) !important;
}

.media-list li,
hr {
    border-color: var(--background3);
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-subst,
.modal-content .modal-header .close {
    color: var(--text-color-highlight);
}

.container-module-updates .btn.active {
    background-color: #fff !important;
}

.badge,
.btn-default.active.focus,
.btn-default.active:focus,
.btn-default.active:hover,
.btn-default:active.focus,
.btn-default:active:focus,
.btn-default:active:hover,
.form-control[disabled],
.form-control[readonly],
.open > .dropdown-toggle.btn-default.focus,
.open > .dropdown-toggle.btn-default:focus,
.open > .dropdown-toggle.btn-default:hover,
fieldset[disabled] .form-control {
    background-color: var(--background4);
}

.modal-content {
    background-color: var(--background-color-secondary);
}

.popover {
    background-color: var(--background3);
}

.input-group-addon {
    background-color: var(--background4-lighten-16);
}

.dropdown-menu .divider {
    background-color: var(--background4);
}

.nav .open > a,
.nav .open > a:focus,
.nav .open > a:hover {
    background-color: var(--background-color-secondary);
}

code {
    background-color: #000;
}

.markdown-render code,
[data-ui-markdown] code,
[data-ui-richtext] code {
    color: var(--link);
    background-color: var(--background-color-highlight);
}

.media-list li.new {
    border-left: 3px solid var(--info);
}
.media-list li.new, .messagePreviewEntry.unread {
    background-color: var(--background-color-highlight) !important;
}

.nav-tabs,
.nav-tabs > li > a:hover,
.tab-menu .nav-tabs li > a,
.tab-menu .nav-tabs li > a:focus,
.tab-menu .nav-tabs li > a:hover {
    border-color: var(--background4);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
    background-color: var(--background-color-main);
    border-color: var(--background4) var(--background4) transparent;
}

.nav > li > a:focus,
.nav > li > a:hover {
    background-color: var(--background-color-secondary);
}

.panel {
    box-shadow: 0 0 3px var(--background4-lighten-10);
}

.panel .panel-body, .panel .panel-heading {
    background-color: var(--background-color-main) !important;
}

.wall-entry .wall-entry-header {
    border-bottom-color: var(--background3);
}

#wall-stream-filter-nav .wall-stream-filter-body,
.atwho-view,
.load-suppressed a {
    border-color: var(--background4);
}

#wall-stream-filter-nav .wall-stream-filter-head {
    border-bottom-color: var(--background4);
}

.well {
    background-color: var(--background-color-main-darken-10);
}

.atwho-view {
    color: var(--text-color-main);
    background-color: var(--background-color-main);
}

.load-suppressed a {
    background-color: var(--background-color-secondary);
}

.table-hover > tbody > tr:hover {
    background-color: var(--background3);
}

.table-striped > tbody > tr:nth-of-type(2n+1) {
    background-color: var(--background-color-secondary);
}

#contentFormMenu .content-create-menu-more > i,
#contentFormMenu .nav-tabs > li.active > a,
#contentFormMenu .nav-tabs > li > a {
    background: var(--background-color-secondary);
    border-color: var(--background-color-main);
}

#contentFormMenu .nav-tabs > li.active > a.active,
#contentFormMenu .nav-tabs > li.active > a:hover,
#contentFormMenu .nav-tabs > li > a.active,
#contentFormMenu .nav-tabs > li > a:hover {
    color: var(--text-color-main);
    background-color: var(--background-color-main);
}

#contentFormMenu .nav-tabs > li.active > a,
#contentFormMenu .nav-tabs > li > a {
    color: var(--text-color-secondary);
}

#contentFormMenu .content-create-menu-more > i:hover {
    background: var(--background-color-main);
    color: var(--text-color-main);
}

#contentFormMenu .content-create-menu-more .dropdown-menu,
.ProseMirror hr {
    border-color: var(--background4);
}

.ProsemirrorEditor.plainMenu .ProseMirror-menubar {
    color: var(--text-color-main);
}

.ProseMirror-prompt {
    background: var(--background-color-main);
    border-color: var(--background4);
}

.ProseMirror-invalid {
    color: #000 !important;
}

.ProsemirrorEditor .ProseMirror-menu-active {
    background: var(--background4);
}

.ProsemirrorEditor.focusMenu .ProseMirror-menubar,
.ProsemirrorEditor.plainMenu .ProseMirror-menubar {
    background-color: var(--background-color-secondary);
    border-color: var(--background4);
}

.panel-profile .panel-profile-header,
.panel-profile .panel-profile-header .profile-user-photo-container .profile-user-photo {
    border-color: var(--background-color-page);
}

.panel-profile .panel-profile-header .img-profile-data,
.panel-profile .panel-profile-header .img-profile-data h1,
.panel-profile .panel-profile-header .img-profile-data h2 {
    color: var(--text-color-highlight) !important;
    text-shadow: 0 0 4px var(--text-color-contrast) !important;
}

.pagination > .disabled > a,
.pagination > .disabled > a:focus,
.pagination > .disabled > a:hover,
.pagination > .disabled > span,
.pagination > .disabled > span:focus,
.pagination > .disabled > span:hover,
.pagination > li > a,
.pagination > li > span {
    background-color: var(--background-color-secondary);
    border-color: var(--background4);
}

.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover {
    background-color: var(--background4);
    border-color: var(--background4);
}

.container-modules .card-module .card-panel > div:not(.card-status) {
    background-color: var(--background-color-secondary);
}

.container-modules .card-module .card-title {
    color: var(--text-color-main);
}

.layout-sidebar-container {
    background-color: var(--background-color-page) !important;
}

.breadcrumb {
    background-color: var(--background3);
}

input[type=checkbox],
input[type=radio] {
    background: var(--background3);
}

.jumbotron,
.ui-datepicker-month,
.ui-datepicker-year {
    background-color: var(--background-color-secondary);
}

.alert-info {
    background-color: #323a3f
}

.alert-danger {
    background-color: #423f3f
}

.hexInput {
    background: var(--background-color-secondary);
}

.ui-datepicker-month,
.ui-datepicker-year {
    border-color: var(--background3);
}

.bootstrap-timepicker-widget table td a:hover {
    background-color: var(--background-color-secondary) !important;
    border-color: var(--background-color-secondary) !important;
}

.fc-content,
.fc-day-header,
.fc-divider,
.fc-list-heading td,
.fc-list-view,
.fc-popover,
.fc-row,
.message-tag-filter-group .manage-tags-link,
.select2-container--bootstrap .select2-selection,
.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > td,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > thead > tr > th,
.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > thead > tr > th,
.target-page-list-grid,
.task-list .pagination-container,
.task-list-li,
tbody,
td,
th,
thead {
    border-color: var(--background4) !important;
}

.select2-container--bootstrap .select2-selection,
.select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
    color: var(--text-color-highlight) !important;
    background-color: var(--background3) !important;
}

.select2-container--bootstrap .select2-search--dropdown .select2-search__field {
    background-color: var(--background-color-main) !important;
    color: var(--text-color-main) !important;
}

.select2-hidden-accessible option[selected] {
    background-color: var(--background4) !important;
    color: var(--text-color-highlight) !important;
}

.layout-content-container .wiki-content.wiki-page-diff del,
.layout-content-container .wiki-content.wiki-page-diff ins {
    color: #000 !important;
}

#dropdown-messages .dropdown-header,
.fc-header-toolbar h2 {
    color: var(--text-color-main) !important;
}

.conversation-scroll-down-button {
    background: var(--background-color-secondary);
    box-shadow: 1px 1px 2px var(--background-color-page);
}

.fc-list-heading {
    background-color: var(--background3) !important;
}

.external-calendar-overview td textarea {
    background-color: var(--background-color-main) !important;
}

#gallery-container > .panel-heading,
.target-page-list-head {
    background-color: var(--background4) !important;
}

.task-checklist label.item-finished input[type=checkbox]:checked::after {
    color: var(--background-color-page) !important;
}

.task-checklist .task-item:hover {
    background: var(--background4) !important;
}

.task-list-header > .panel-body {
    background-color: var(--background3) !important;
}

.task-list-header h4 {
    color: var(--text-color-main) !important;
}

.task-list-header .help-block:hover,
.task-list-header.panel .help-block {
    color: var(--text-color-soft2) !important;
}

#task-container .panel-heading,
.task-list .pagination-container,
.task-list-items .task-list-task-completed-show-more,
.task-list-li,
.task-list-li .closed-task-lists-container {
    background-color: var(--background-color-main) !important;
}

.task-list-li.task-list-li-collapsed .task-toggled-color,
.task-overview label {
    color: var(--text-color-main) !important;
}

.task-overview #filter-tasks-list .media-list .empty,
.task-overview #filter-tasks-list .media-list li,
.task-overview #task-filter-nav {
    background: var(--background-color-secondary) !important;
    color: var(--text-color-secondary) !important;
}

.task-list-container .task-list-title-bar > div:hover,
.task-list-items .task-list-item .task-list-task-title-bar > div:hover {
    background: var(--background-color-secondary) !important;
}

body .closed-task-list-view li:hover {
    background-color: #4d443b !important;
}

.task-list-items .task-list-item .task-list-task-title-bar.highlighter,
.task-list-state-highlight,
.task-state-highlight,
.ui-sortable-helper {
    background-color: var(--background-color-highlight) !important;
}

#task-space-menu {
    border-bottom-color: var(--background3) !important;
}

#task-container .panel-heading .task-header-panel,
#task-space-menu li a {
    border-color: var(--background3) !important;
}

.task-controls,
.task-list-items .task-list-item,
.task-list-title-bar {
    border-color: var(--background4) !important;
}

.ui-sortable-helper {
    border-color: var(--background-color-secondary) !important;
}

.jp-audio {
    filter: invert(1) hue-rotate(180deg);
}

.ui-icon,
.ui-widget-content .ui-icon,
.ui-widget-header .ui-icon {
    filter: invert(100%);
}

.mail-inbox-messages .media h5 {
    color: var(--text-color-secondary);
}

:root {
    --default: #0d0d0d;
    --primary: #658ca1;
    --info: #34bed0;
    --success: #97d271;
    --warning: #ffc107;
    --danger: #fc4a64;
    --link: var(--info);

    --text-color-main: #ddd;
    --text-color-secondary: #bbb;
    --text-color-highlight: #fff;
    --text-color-soft: #dddddd;
    --text-color-soft2: #ccc;
    --text-color-soft3: #7b7773;
    --text-color-contrast: #000;
    --background-color-main: #222;
    --background-color-secondary: #333;
    --background-color-page: #000;
    --background-color-highlight: #2e393a;
    --background-color-highlight-soft: #171d1e;
    --background3: #393939;
    --background4: #5e5e5e;
    --background4-fade-50: #5e5e5e7f;
    --background4-lighten-10: #787878;
    --background4-lighten-16: #878787;
    --background-color-main-darken-10: #090909;
    --background-color-page-darken-5: #000000;
    --background-color-page-darken-8: #000000;
    --background-color-page-lighten-10: #1a1a1a;
    --background-color-page-lighten-20: #333333;
    --background-color-page-lighten-3: #080808;
    --background-color-page-lighten-30: #4d4d4d;
    --background-color-secondary-darken-5: #262626;
    --default-darken-5: #000000;
    --text-color-secondary-lighten-25: #fbfbfb;

    /* Converted from humhub.clean-theme.dynamic.css */
    --background-color-main-lighten-10: #191919;
    --background-color-page-lighten-5: #171b1c;
    --background-color-page-darken-10: #000000;
    --background-color-page-darken-20: #000000;
    --background-color-page-darken-30: #000000;
    --background-color-secondary-lighten-2: #0d0d0d;
    --background-color-secondary-lighten-5: #151515;
    --danger-lighten-10: #450104;
    --danger-lighten-5: #2c0103;
    --danger-darken-20: #f9899b;
    --danger-darken-5: #fb3650;
    --default-lighten-2: #111111;
    --default-lighten-5: #191919;
    --default-darken-2: #070707;
    --info-lighten-10: #093339;
    --info-lighten-27: #010506;
    --info-lighten-5: #0b3f47;
    --info-darken-25: #add6dc;
    --info-darken-30: #bddde2;
    --info-darken-40: #ddeef0;
    --info-darken-5: #38a7b7;
    --info-darken-50: #eef6f7;
    --info-darken-8: #42aebf;
    --link-lighten-2: #0e3b54;
    --link-darken-5: #3794c7;
    --primary-lighten-10: #0e1316;
    --primary-lighten-5: #131a1d;
    --primary-darken-10: #5f6d75;
    --primary-darken-20: #8a959c;
    --primary-darken-25: #9ca5ab;
    --primary-darken-5: #4f5d65;
    --primary-darken-8: #58666e;
    --success-lighten-10: #1d2e12;
    --success-lighten-5: #233715;
    --success-darken-20: #aec3a0;
    --success-darken-5: #73a957;
    --text-color-highlight-fade-15: #24242426;
    --text-color-highlight-fade-30: #2424244d;
    --text-color-secondary-darken-25: #454545;
    --warning-lighten-10: #402405;
    --warning-lighten-2: #532f06;
    --warning-lighten-5: #4b2b06;
    --warning-darken-10: #d89c55;
    --warning-darken-20: #e4bc8d;
    --warning-darken-40: #f1dfc9;
    --warning-darken-5: #ca8a3a;
    /* END: Converted from humhub.clean-theme.dynamic.css */

    --background-color-success: #f7fbf4;
    --text-color-success: #84be5e;
    --border-color-success: #97d271;
    --background-color-warning: #fffbf7;
    --text-color-warning: #e9b168;
    --border-color-warning: #fdd198;
    --background-color-danger: #fff6f6;
    --text-color-danger: #ff8989;
    --border-color-danger: #ff8989;

    --text-color-default: var(--text-color-main);

    --hh-ct-menu-text-color: var(--text-color-highlight);

    --hh-ct-panel-border-color: var(--background3);
    --hh-ct-text-color-heading: var(--text-color-highlight);
    --hh-ct-menu-border-color: var(--default);

    --hh-ct-top-menu-background-color: var(--background-color-page);
    --hh-ct-top-menu-text-color: var(--info);
    --hh-ct-top-menu-button-hover-background-color: var(--background-color-page-lighten-10);
    --hh-ct-top-menu-button-hover-text-color: var(--text-color-main);
}