:root {
  --btn-bg: #d1e751;
  --btn-color: #333333;
  --btn-border: 2px solid #d1e751;
  --btn-bg-hover: #E0E585;
  --btn-color-hover: #333333;
  --btn-border-hover: 2px solid #d1e751;
  --text-color: #white;
  --text-disabled-color: grey;
}

body {
  background-color: #333333;
  color: #ffffff;
  background-image: url('../images/background.png');
}

h1 {
  color: #d1e751;
}

h2, #search-result-headline {
  color: #d1e751; 
}

h3 {
  color: #d1e751; 
}

legend {
  color: #d1e751; 
}

a {
  color: #ffffff; 
}

background {
  border-color: #333333;
}

fieldset {
  border: 2px #d1e751 solid;
}

label {
  color: #ffffff; 
}

button, .input-button, .upload-custom-button {
  background-color: #d1e751;
  border: 2px solid #d1e751;
  color: #333333;
}

button:not(.tooltip-click-button):hover, .input-button:hover,
.upload-custom-button:hover {
  background-color: #E0E585;
  color: #333333;
}

.hidden-copyright {
  border: 0;
  color: #333333;
}


/* ===== STICKY HEADER AND FOOTER ===== */
.sticky-header {
  background: #333333;
  color: white;
  background-image: url('../images/background.png');
}

.sticky-header fieldset {
  box-shadow: 0 10px 10px rgba(209,231,81,0.2);
}

.sticky-footer fieldset {
  box-shadow: 0 -10px 10px rgba(209,231,81,0.2);
}

.sticky-footer {
  background: #333333;
  color: white;
  background-image: url('../images/background.png');
}


/* ===== GLOBAL BANNER ===== */
.global-banner-error {
  background: #cc0000;
  color: #ffffff;
}

.global-banner-warn {
  background: #d1e751;
  color: #333333;
}

.global-banner-info a, .global-banner-warn a {
  color: #333333;
}

.global-banner-info {
  background: #ccc;
  color: #333;
}


/* ===== BURGER MENU ===== */
/* Burger Button */
.burger-menu-button {
  border: 2px solid #333333;
  background-color: #d1e751;
}

/* Overlay */
.burger-menu-overlay {
  background-color: #333;
}

/* Active overlay */
.burger-menu-overlay.active {
  box-shadow: 2px 0 5px rgba(0,0,0,0.9);
}

/* Backdrop */
.burger-menu-backdrop {
  background-color: rgba(0,0,0,0.8);
}

/* Close Button */
.burger-menu-overlay-close-button {
  background-color: #d1e751;
}

.burger-menu-overlay a:hover {
  color: #d1e751;
  background: #444444;
}


/* ===== NAVIGATION BAR ===== */
.navigation-bar a.navigation-bar-disabled, 
.navigation-bar-disabled,
.navigation-bar-link-disabled, 
.navigation-bar-hover-dropdown-content-disabled, 
.navigation-bar-click-dropdown-content-disabled {
  color: grey;
}

/* Links inside the navbar */
.navigation-bar a {
  color: white;
}

/* Dropdown button */
.navigation-bar-disabled-button,
.navigation-bar-hover-dropdown .navigation-bar-hover-dropdown-button, 
.navigation-bar-click-dropdown .navigation-bar-click-dropdown-link {
  border: none;
  color: white;
  background-color: inherit;
}

.navigation-bar-hover-dropdown.show .navigation-bar-hover-dropdown-button {
  background-color: #d1e751;
  color: #333333;
}

#navigation-bar-hover-dropdown-button:hover {
  background-color: #d1e751;
}

/* background color to navbar links on hover */
.navigation-bar a:hover, .navigation-bar-disabled-button
.navigation-bar-hover-dropdown:hover .navigation-bar-hover-dropdown-button {
  background-color: #d1e751;
  color: #333333;
}

.overlap-element a:hover,
.navigation-bar-hover-dropdown-content a:hover, 
.navigation-bar-click-dropdown-content a:hover {
  background-color: #d1e751;
  color: #333333;
}

/* Dropdown content (hidden by default) */
.navigation-bar-disabled-content,
.overlap-element,
.navigation-bar-hover-dropdown-content {
  background-color: #333333;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  border: solid 1px #d1e751
}

.navigation-bar-click-dropdown-content {
  background-color: #333333;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  border: solid 1px #d1e751
}

/* Links inside the dropdown */
.navigation-bar-hover-dropdown-content a, 
.overlap-element a,
.navigation-bar-click-dropdown-content a {
  color: white;
}

/* background color to dropdown links on hover */
.overlap-element a:hover,
.navigation-bar-hover-dropdown-content a:hover, 
.navigation-bar-click-dropdown-content a:hover {
  background-color: #d1e751;
  color: #333333;
}

.navigation-bar-click-dropdown-content {
  border: solid 1px #d1e751;
  background-color: #333333;
}

.navigation-bar-click-dropdown.active, 
.navigation-bar-click-dropdown.active #navigation-bar-click-dropdown-link {
  background-color: #d1e751;
  color: #333333;
}


/* ===== RADIO BUTTONS ===== */


/* ===== CHECKBOX ===== */
[type=checkbox], [type=radio], [type=range] {
  accent-color: #d1e751;
}


/* ===== SWITCH ===== */
.android-switch {
  border: 1px solid #333333;
}

/* Checkbox verstecken */
/* Hintergrund */
.switch-slider {
  background-color: #cccccc;
}

/* Kreis (der "Knopf") */
.switch-slider::before {
  background-color: white;
}

/* Zustand: aktiv */
input:checked + .switch-slider {
  background-color: #d1e751;
}

/* Optional: Fokus */
input:focus + .switch-slider {
  box-shadow: 0 0 1px #d1e751;
}

/* Optional: deaktiviert */
input:disabled + .switch-slider {
  background-color: #999999;
}


/* ===== INPUT FIELDS ===== */
.error {
  border: 2px solid orangered;
}

.error-message {
  color: orangered;
}


/* ==== WIZARD ==== */


/* RESULT */


/* ===== TEXT AREA ===== */


/* ===== DROPDOWN ===== */
/* Toggle button */
.dropdown-search-toggle {
  border: 1px solid #cccccc;
  background-color: #ffffff;
}

/* Arrow (Bootstrap Icon) */
.dropdown-search-toggle i {
  color: black;
}

/* Focus style */
.dropdown-search-toggle:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0,123,255,0.2);
}

/* Dropdown menu */
.dropdown-search-menu {
  border: 1px solid #d1e751;
  background: #333333;
  color: white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Search input (sticky) */
.dropdown-search-input {
  border-bottom: 1px solid white;
  background: #333333; /* important for sticky */
  color: white;
}

/* Hover */
.dropdown-search-item:hover {
  background-color: #d1e751;
  color: #333333
}


/* ===== SELECTBOX ===== */
#selectbox [selected] {
  background-color: #d1e751;
}


/* ===== SEARCH ===== */
.search-pagination-page-number {
  border: 1px solid #333333;
}

.search-pagination-page-number.current {
  background-color: #d1e751;
  color: #333333;
}

.search-pagination-page-number:hover {
  background-color: #d1e751;
  color: #333333;
}

.search-input-auto-suggestion-dropdown {
  background: #333333;
  border: 1px solid #d1e751;
}

.search-input-auto-suggestion-dropdown-item:hover {
  background: #d1e751;
  color: #333333;
}


/* ===== LINKS ===== */


/* ===== OVERLAY ===== */
.overlay-tour-modal {
  background-color: rgba(0, 0, 0, 0.8);
}

.overlay-tour-modal-container {
  background: #333333;
}

#overlay-tour-modal-content img {
  box-shadow: 0 0 10px 10px rgba(0,0,0,0.3);
}

.overlay-cookie-modal {
  background-color: rgba(0,0,0,0.8);
}

.overlay-cookie-modal-container {
  background-color: #333333;
  color: white;
  border: 1px solid #d1e751;
}

.overlay-cookie-modal-actions-button {
  background: #d1e751;
  color: #333333;
  border: 1px solid #d1e751;
}

.overlay-cookie-modal-actions-essential,
.overlay-cookie-modal-actions-reject-all {
  background: #333333;
  color: #d1e751;
  border: 2px solid #d1e751;
}

.overlay-cookie-modal-actions-button:hover {
  background: #d1e751;
  color: #333333;
}

.overlay-cookie-modal-section-toggle {
  color: white;
}

.overlay-notification-modal {
  background: #333333;
  color: white;
  border: 2px solid #d1e751;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}

#overlay-notification-modal-description {
  color: white;
}

.overlay-notification-modal-button-close {
  background: #d1e751;
  color: #333333;
}


/* ===== IFRAME ===== */
#iframe {
  border: 2px dashed #d1e751;
}


/*===== SHADOW DOM ===== */
#shadow-host {
  border: 2px dashed #d1e751;
}


/* ===== YOUTUBE ===== */
#youtube-video-iframe {
  border: 1px solid #d1e751;
}


/* ===== AUDIO ===== */
.audio-custom-player {
  background-color: #333333;
  color: white;
  border: 2px dashed #d1e751;
}

.custom-audio-progress-bar {
  background-color: #666666;
}

.custom-audio-progress {
  background-color: #d1e751;
}


/* ===== TEXT ===== *//*


/* ===== LOCATOR ===== */


/* ===== DOWNLOAD ===== */


/* ===== UPLOAD ===== */
#upload-container, .upload-custom-container {
  border: 2px dashed #d1e751;
}


/* ===== TABLE ===== */
#table table, #table td, #table tr, #table th {
  border: 1px solid #d1e751;
}


.table-customizable {
  color: white;
}

.table-customizable-table {
  background-color: #333333;
}

.table-customizable-table-head-column,
.table-customizable-table-body-column,
.table-customizable-table-filter-column {
  border: 0.0625rem solid #d1e751;
}

.table-customizable-table-head-column {
  background-color: #2a2a2a;
}

.table-customizable-table-filter-column {
  background-color: #262626;
}

.table-customizable-table-head-column-button {
  color: white;
  background: transparent;
}

.table-customizable-table-head-column-button:hover {
  color: #d1e751;
}

.table-customizable-table-head-column-button-icon {
  color: #d1e751;
}

.table-customizable-table-filter-input {
  color: white;
  background-color: #333333;
  border: 0.0625rem solid #d1e751;
}

.table-customizable button:hover {
  background-color: #2a2a2a;
  color: white;
}

.table-customizable-table-filter-input::placeholder {
  color: #cccccc;
}

.table-customizable-table-filter-input:focus {
  outline: 0.125rem solid #d1e751;
}

.table-customizable-table-body-row:nth-child(even) {
  background-color: #292929;
}


/* ===== DATEPICKER ===== */
/* MAIN CONTAINER */
.datepicker-dropdown {
  background: #333333;
  border: 1px solid #d1e751;
}

.datepicker-inline-calendar-day:hover,
.datepicker-dropdown-calendar-day:hover {
  background-color: #d1e751;
  color: #333333;
}

.datepicker-inline-calendar-day-previous-month,
.datepicker-inline-calendar-day-next-month,
.datepicker-dropdown-calendar-day-previous-month,
.datepicker-dropdown-calendar-day-next-month {
  color: #666666;
}

.datepicker-inline-calendar-day-selected,
.datepicker-dropdown-calendar-day-selected {
  background-color: #d1e751;
  color: #333333;
}

#datepicker-inline {
  border: 2px dashed #d1e751;
}

#datepicker-custom-input-icon {
  color: #333333;
}


/* ===== TIMER ===== */
.timer-display {
  border: 2px solid #d1e751;
}

.timer-button {
  border: 2px solid #d1e751;
  background-color: #d1e751;
  color: #333333;
}

.timer-button:hover {
  background-color: #333333;
  color: #d1e751;
}

.timer-button:focus-visible {
  outline: 3px solid white;
}

.timer-input {
  border: 2px solid #d1e751;
  background-color: #333333;
  color: white;
}

.timer-input:focus-visible {
  outline: 3px solid white;
}


/* ===== TOOLTIP ===== */
.tooltip-hover-link {
  color: #d1e751;
}

.tooltip-hover-link:hover span[role=tooltip] {
  color: #ffffff;
  background-color: #333333;
  border: solid 1px #d1e751;
  box-shadow: 0 0 15px 5px rgba(255,255,255,0.1);
}

.tooltip-click-button {
  border: none;
  background: #333;
  color: white;
}

.tooltip-click-button:hover {
  color: #E0E585;
}

.tooltip-click-box {
  background: black;
  color: white;
  background-color: #333333;
  border: solid 1px #d1e751;
  box-shadow: 0 0 15px 5px rgba(255,255,255,0.1);
}


/* ===== BUTTONS ===== */
button[disabled], button[disabled]:hover {
  background-color: #333333;
  border: 2px solid #d1e751;
  color: white;
}


/* ===== SPINNER ===== */
.spinner-mini-image {
  border: 4px solid #cccccc;
  border-top: 4px dashed #d1e751;
}

.spinner-overlay-modal {
  background-color: rgba(0, 0, 0, 0.8);
}

.spinner-overlay-image {
  border: 4px solid #cccccc;
  border-top: 4px dashed #d1e751;
}

.spinner-button-image {
  border: 4px solid #d1e751;
  border-top: 4px dashed #333333;
}

#spinner-mini-start-button[disabled],
#spinner-overlay-start-button[disabled],
#spinner-button-start-button[disabled] {
  background-color: #333333;
  border: 2px solid #d1e751;
  color: white;
}


/* ===== PROGRESS BAR ===== */
.progress-bar-status-container {
  background-color: #333333;
  border: 2px solid #d1e751;
}

.progress-bar-status {
  background-color: #d1e751;
}


/* ===== DELAY ===== */


/* ===== COLOR ===== */
.dotBlack {
  background-color: #000000;
}

.dotRed {
  background-color: #ff0000;
}

.dotGreen {
  background-color: #00ff00;
}

.dotBlue {
  background-color: #0000ff;
}

.dotYellow {
  background-color: #ffff00;
}

.dotPink {
  background-color: #ff00ff;
}

.dotAqua {
  background-color: #00ffff;
}

.dotWhite {
  background-color: #ffffff;
}

.dotRbt {
  background-color: #d1e751;
}

.dotTransparency {
  background-color: #d1e751;
  opacity: 0.5;
}

.dotBorder {
  background-color: #333333;
  border: 1px solid #d1e751;
}


/* ===== IMAGES ===== */
div.image-not-available {
  border: 1px solid white;
}


/* ===== IMAGE SLIDER ===== */
.image-slider-dot {
  background-color: white;
}

.image-slider-dot.active {
  background-color: #d1e751;
}


/* ===== IMAGE CAROUSEL ===== */
.image-carousel-text {
  color: white;
}

.image-carousel-button-left, .image-carousel-button-right {
  background: rgba(0,0,0,0.5);
  color: #d1e751;
}


/* ===== DICE ===== */
.roll-the-dice-main-section-result-dice {
  border: 2px solid var(--color-accent);
}


/* ===== DICE FACE ===== */
.roll-the-dice-main-section-result-dice {
  border: 2px solid var(--color-accent);
  background-color: #ffffff;
}

/* Dot (pip) */
.roll-the-dice-main-section-result-dice-dot {
  background-color: #333333;
}


/* ===== ANIMATION ===== */


/* ===== RANDOM POSITION ===== */
#random-position-area {
  border: 2px dashed #d1e751;
}

#random-position-moving-element {
  background: #d1e751;
}


/*===== RIGHT CLICK ===== */
.right-click-container {
  border: 2px dashed #d1e751;
}

.right-click-menu {
  background: #333333;
  border: 1px solid #d1e751;
}

#right-click #right-click-menu li {
  border-bottom: 1px solid #666666;
}

#right-click #right-click-menu li:hover {
  background: #d1e751;
  color: #333;
}

#right-click #right-click-menu li:hover a {
  color: #333;
}


/*===== SIMILAR ELEMENTS ===== */


/*===== SAME ELEMENTS ===== */


/*===== LOGIN ===== */
.login-success-message {
  color: lightgreen;
}

.login-error-message {
  color: orangered;
}


/*===== HTACCESS ===== */


/*===== OVERLAP ===== */


/*===== COLLAPSIBLE ===== */
/* Full width underline */
.collapsible-button::after {
  background-color: #d1e751;
}


/*===== QR CODE ===== */
#reader {
  border: 2px dashed #d1e751 !important;
}


/*===== REDIRECT ===== */


/* ===== DRAG AND DROP ===== */
#drag-and-drop-item {
  background: #d1e751;
  color: #333;
}

#drag-and-drop-zone {
  border: 2px dashed #d1e751;
}


/* ===== JS EVENTS ===== */


/* ===== RANGE SLIDER ===== */


/*===== SCROLL ===== */
#scroll-area {
  border: 2px solid #333;
}


/*===== REFRESH ===== */


/* ===== COOKIES AND STORAGE ===== */


/* ===== DATALAYER ===== */


/*===== HTTP ERRORS ===== */


/*===== AI ===== */
#password-checker {
  background-color: #333333;
  color: white;
}

#password-checker-strength-bar {
  background-color: #555555;
}

#password-checker-feedback {
  border: 1px solid #d1e751;
}



/*===== CAPTCHA ===== */
#captcha-text-code,
#captcha-canvas-code {
  background-color: #333333;
  border: 2px dashed #d1e751;
}

#captcha section {
  border: 2px dashed #d1e751;
}

.captcha-image-selection-image {
  border: 2px solid white;
}

.captcha-image-selection-image.selected {
  border: 2px solid #d1e751;
}

#captcha-slider-track-container {
  background-color: white;
}

#captcha-slider-track-handle.initial {
  background-color: #d1e751;
  border: 1px solid #333333;
}

#captcha-slider-track-handle.success {
  background-color: lightgreen;
  border: 1px solid #333333;
}

#captcha-slider-track-handle.failed {
  background-color: orangered;
  border: 1px solid #333333;
}

#captcha .success {
  color: lightgreen;
}

#captcha .failed {
  color: orangered;
}


/*===== FEEDBACK ===== */


/*===== INVISIBLE ===== */



/* ===== FOOTER ===== */
#footer-social-media-xing-icon {
  fill: white;
}


/* ===== SCROLL TO TOP ===== */
#scroll-to-top-button {
  background-color: #333;
  color: #fff;
  border: 2px dashed #d1e751;
  box-shadow: 0 0px 10px 0 rgba(209, 231, 81, 0.6);
}

#scroll-to-top-button:hover {
  #background-color: #555555;
}

.http-error-success {
  text-shadow: 0 10px 20px rgba(255,255,255,1.0);
  color: #333333;
}

#page-not-found, .http-error-failed {
  text-shadow: 0 10px 20px rgba(0,0,0,1.0);
  color: #333333;
}