body,
html {
    background-color: var(--background-color);
    color: var(--primary-color-main);
}

.content-container::before {
    background-image: var(--background-image);
    -webkit-filter: blur(var(--background-image-blur));
    -moz-filter: blur(var(--background-image-blur));
    -o-filter: blur(var(--background-image-blur));
    -ms-filter: blur(var(--background-image-blur));
    filter: blur(var(--background-image-blur));
}

.card {
    border: 1px solid var(--primary-popup-border-color);
    color: var(--card-text-color);
    box-shadow: 0 4px 8px var(--box-shadow-color);
    background-color: var(--card-background-color);
}

.daily-message {
    background-color: var(--message-background-color);
    color: var(--message-text-color);
}

.daily-message-popup {
    background: var(--message-popup-background-color);
    border: 1px solid var(--message-popup-border-color);
    box-shadow: 0 2px 10px var(--box-shadow-color);
}

.message-container .daily-message-notification {
    background-color: var(--notification-background-color);
    color: var(--notification-color);
}

.daily-message-popup-body b {
    color: var(--message-body-color);
}

.daily-message-popup-body {
    background-color: var(--message-body-background-color);
    box-shadow: 0 4px 8px var(--box-shadow-color);
}

.popup2-content {
    color: var(--message-popup-header-color);
    background: var(--message-popup-background-color);
}

.header {
    background: linear-gradient(to bottom, var(--header-gradient-start) 0%, var(--header-gradient-end) 100%);
    color: var(--header-text-color);
}

.menu-icon span {
    background-color: var(--header-icon-color);
}

.faq-item {
    border-bottom: 1px solid var(--faq-item-border-color);
}

.faq-question {
    background-color: var(--faq-question-color);
    color: var(--faq-question-text-color);
}

.faq-answer {
    background-color: var(--faq-answer-background-color);
    color: var(--faq-answer-text-color);
}

.cookie-popup {
    background-color: var(--cookie-background);
    color: var(--cookie-text-color);
}

.cookie-popup button {
    background-color: var(--cookie-button-background);
    color: var(--button-text-color);
}

.nothing {
    color: var(--nothing-text-color);
}

.popup {
    background: var(--primary-popup-color);
    border: 1px solid var(--primary-popup-border-color);
    box-shadow: 0 2px 10px var(--box-shadow-color);
    color: var(--popup-content-text-color);
}

.popup h4 {
    color: var(--popup-header-text-color);
}

.popup .close-x-button {
    color: var(--close-button-default-color);
    background-color:rgba(0, 0, 0, 0);
}

.popup .close-x-button:hover {
    color: var(--close-button-hover-color);
}

.popup .reset-color {
    background-color: var(--reset-table-color-button-background);
    color: var(--reset-table-color-text);
}

.class-group hr {
    border-top: 1px solid var(--class-border-color);
}

.class-option {
    background-color: var(--class-icon-color);
    color: var(--class-text-color);
}

.class-option:hover {
    background-color: var(--hover-class-icon-color);
}

.class-option.selected {
    background-color: var(--hover-class-icon-color);
    border: 1px solid var(--class-icon-color);
}

.kalender-button {
    color: var(--primary-color-main);
}

.kalender-button:hover {
    color: var(--primary-hover-color-main);
}

.alle-button {
    background-color: var(--class-icon-color);
    color: var(--class-text-color);
}

.color-picker-button label {
    color: var(--color-picker-text-color);
    text-shadow: 1px  1px 1px var(--color-picker-text-shadow),
                 1px -1px 1px var(--color-picker-text-shadow),
                -1px  1px 1px var(--color-picker-text-shadow),
                -1px -1px 1px var(--color-picker-text-shadow);
}

.color-table th, .color-table td {
    border: 1px solid var(--color-table-border-color);
    color: var(--color-table-text-color-default);
}

.color-table th {
    background-color: var(--color-table-header-background);
}

.url-container button {
    background: var(--url-button-background);
    color: var(--url-text-color);
}

.url-container button:hover {
    background: var(--url-button-hover-background);
}

table {
    color: var(--table-text-color);
    background-color: var(--table-background-color);
}

th,
td {
    border: 1px solid var(--table-border-color);
}

th {
    background-color: var(--table-header-background);
}

#status-container {
    border: 2px solid var(--status-border-color);
    background-color: var(--status-background-color);
    box-shadow: 0 0 10px var(--box-shadow-color);
}

#status-message {
    color: var(--status-message-color);
}

#status-container::before {
    color: var(--status-container-color);
}

.version-item {
    border-bottom: 1px solid var(--version-item-background);
}

.version-vers {
    background-color: var(--version-primary-background);
    color: var(--version-primary-text-color);
}

.version-details {
    background-color: var(--version-details-background);
    color: var(--version-details-text-color);
}

.wrong-date-not-found {
    color: var(--nothing-text-color);
}

th {
    background-color: var(--kalender-primary-table-color);
}

.kalender-table-top th {
    background-color: var(--kalender-primary-table-header-color);
    color: var(--kalender-primary-table-header-text-color);
}

.kollegium-suche-header {
    color: var(--primary-color-main);
}

.teacher-card {
    background-color: var(--teacher-card-background-color);
    color: var(--teacher-card-primary-text-color);
}

.teacher-info {
    color: var(--teacher-card-info-text-color);
}

.no-results {
    color: var(--teacher-card-no-results-text-color);
}

.btn-primary {
    background-color: var(--teacher-mail-button-background-color);
    color: var(--teacher-mail-button-text-color);
}

.btn-primary-blue {
    background-color: var(--teacher-teams-button-background-color);
    color: var(--teacher-teams-button-text-color);
}

.close-teacher-popup-btn {
    color: var(--teacher-card-popup-close-button-color);
}

.close-teacher-popup-btn:hover {
    color: var(--teacher-card-popup-close-button-hover-color);
}

.save-button button {
    background-color: var(--url-button-background);
    color: var(--url-text-color);
}
