body {
  font-family: Ubuntu;
  font-size: 14px;
  background-repeat: no-repeat;
  background-attachment:  fixed, scroll;
  background-size: 75% 100%;
  background-position: center;
}

@media only screen and (pointer: coarse) {
  body {
    background-size: 150% 100%;
  }
}

h1 {
  font-family: Ubuntu;
  font-size: 24px;
  text-decoration: underline; 
}

h2, #search-result-headline {
  font-family: Ubuntu;
  font-size: 20px;
  text-decoration: underline;
}

h3 {
  font-family: Ubuntu;
  font-size: 16px;
}

legend {
  font-family: Ubuntu;
  font-size: 16px;
  text-align: right;
}

a {
  font-family: Ubuntu;
  font-size: 14px;
  text-decoration: underline; 
}

background {
  width: 1000px;
  height: 500px;
  border-width: 5px;
  border-style: solid;
}

fieldset {
  border-radius: 10px;
  width: 60%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 15px;
}

@media only screen and (pointer: coarse) {
  fieldset {
    width: 95%;
  }
}

label {
  font-family: Ubuntu;
  font-size: 14px;
  text-decoration: bold; 
}

button, .input-button, .upload-custom-button {
  padding: 5px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  border-radius: 6px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.hidden-description-message {
  margin: 10px;
}

#test-page-title-image, #test-page-title, 
#test-page-title-link {
  display: table;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}
/* Only image is clickable - but too large in small screens
#test-page-title {
  display: table;
  margin-left: auto;
  margin-right: auto;
}
*/
@media (min-width: 1000px) {
  #test-page-title-image {
    width: 60%;
  }
}

.test-page-title-slogan, #test-page-title-link {
  display: block;
  text-align: center;
}

.test-page-title-slogan {
  margin-bottom: 30px;
}

.test-page-title-image-link {
  display: contents;
  text-align: center;
}

.title, .back-link {
  text-align: center;
}

#download-file, #upload form, #text-container,
#locator-container, #tooltip p, #overlay-container,
#audio audio, #youtube-video iframe,
#iframe, #link-container, #selectbox-container,
#dropdown-container, #radio-button-container,
#checkbox-container, #input-field-form, 
#right-click-container, .similar-elements-container,
#same-elements div, #htaccess-container,
#qr-code-container, #redirect-buttons, #shadow-host,
#drag-and-drop-area, #js-event-area, #login-container,
#range-slider-container, #refresh-container,
#storage-container, #http-error-links, 
#feedback-form, #invisible-container, #scroll-area, 
#back-container, #secure-area, .delay-container,
#datepicker-container, #button-container,
#global-banner-settings-container, #wizard-form,
#sticky-settings-container, #overlap-container,
#spinner-container, #datalayer-container,
#random-position-area-status, #progress-bar-container,
#login-secure-container, #forgot-password-container,
#captcha section {
  margin: 10px;
}

.hidden-copyright {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

#version-text, #html-check-vnu-version {
  font-size: 10px;
}


/* ===== STICKY HEADER AND FOOTER ===== */
.sticky-header {
  display: block;
  margin-left: auto;
  margin-right: auto;
  position: sticky;
  top: 0;
  padding: 10px;
  z-index: 7000;
  background-repeat: no-repeat;
  background-attachment:  fixed, scroll;
  background-size: 75% 100%;
  background-position: center;
  text-align: center;
}

@media only screen and (pointer: coarse) {
  .sticky-header {
    background-size: 150% 100%;
  }
}

.sticky-footer {
  display: block;
  margin-left: auto;
  margin-right: auto;
  position: sticky;
  bottom: 0;
  #color: white;
  padding: 10px;
  z-index: 7000;
  background-repeat: no-repeat;
  background-attachment:  fixed, scroll;
  background-size: 75% 100%;
  background-position: center;
  text-align: center;
}

@media only screen and (pointer: coarse) {
  .sticky-footer {
    background-size: 150% 100%;
  }
}

#global-banner-settings button, #sticky-settings button {
  width: 250px;
}

#global-banner-settings p, #sticky-settings p {
  display: flex;
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 0px;
}

#sticky-settings-container,
#global-banner-settings-container {
  padding-bottom: 10px;
}


/* ===== GLOBAL BANNER ===== */
.global-banner-error {
  padding: 10px;
  margin-bottom: 5px;
  text-align: center;
}

.global-banner-warn {
  padding: 10px;
  margin-bottom: 5px;
  text-align: center;
}

.global-banner-info {
  padding: 10px;
  margin-bottom: 5px;
  text-align: center;
}

/* ===== BURGER MENU ===== */
/* Burger Button */
.burger-menu-button {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 9002;
  font-size: 30px;
  cursor: pointer;
  width: 5%;
  max-width: 100px;
  display: flex;
  justify-content: center;  
}

/* Overlay */
.burger-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 30%;
  min-width: 200px;
  max-width: 400px;
  height: 100%;
  z-index: 9003;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  overflow-y: scroll;
  overflow-x: hidden;
}

/* Active overlay */
.burger-menu-overlay.active {
  transform: translateX(0);
}

/* Backdrop */
.burger-menu-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 9001;
}

.burger-menu-backdrop.active {
  opacity: 1;
  visibility: visible;
}

/* Close Button */
.burger-menu-overlay-close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  border: none;
  cursor: pointer;
  width: 25%;
  max-width: 100px;
  display: flex;
  justify-content: center;
}

.burger-menu-overlay-sort-alphabetically-button, .burger-menu-overlay-sort-default-button {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 20px;
  border: none;
  cursor: pointer;
}

/* Menu Links */
.burger-menu-overlay-navigation-container {
  display: flex;
  flex-direction: column;
  padding: 60px 20px;
}

.burger-menu-overlay-navigation-link {
  padding: 10px 0;
  text-decoration: none;
  font-size: 18px;
  transition: color 0.2s ease;
}

/* ===== NAVIGATION BAR ===== */
 /* Navbar container */
.navigation-bar {
  font-family: Ubuntu;
}

.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 {
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
  pointer-events: none;
}

/* Links inside the navbar */
.navigation-bar a {
  float: left;
  font-size: 14px;
  text-align: center;
  padding: 14px 10px;
  text-decoration: none;
}

/* The dropdown container */
.navigation-bar-disabled,
.navigation-bar-hover-dropdown, .navigation-bar-click-dropdown-link {
  float: left;
  overflow: hidden;
}

/* Dropdown button */
.navigation-bar-disabled-button,
.navigation-bar-hover-dropdown .navigation-bar-hover-dropdown-button, 
.navigation-bar-click-dropdown .navigation-bar-click-dropdown-link {
  font-size: 14px;
  border: none;
  outline: none;
  padding: 14px 10px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* 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 {
  border-radius: 10px;
}

.overlap-element a:hover,
.navigation-bar-hover-dropdown-content a:hover, 
.navigation-bar-click-dropdown-content a:hover {
  border-radius: 0px;
}

/* Dropdown content (hidden by default) */
.navigation-bar-disabled-content,
.overlap-element,
.navigation-bar-hover-dropdown-content {
  display: none;
  position: absolute;
  min-width: 160px;
  z-index: 1;
}

.navigation-bar-click-dropdown-content {
  display: none;
  position: absolute;
  min-width: 200px;
  z-index: 1;
}

/* Links inside the dropdown */
.navigation-bar-hover-dropdown-content a, 
.overlap-element a,
.navigation-bar-click-dropdown-content a {
  float: none;
  padding: 12px 10px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Show the dropdown menu on hover */
.navigation-bar-hover-dropdown:hover .navigation-bar-hover-dropdown-content {
  display: block;
}

/* Don't show the dropdown menu on hover */
.navigation-bar-disabled-dropdown:hover .navigation-bar-disabled-content {
  display: none;
}

.navigation-bar-click-dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
}

.navigation-bar-click-dropdown-content.show {
  display: block;
}

.navigation-bar-click-dropdown {
  position: relative;
  display: inline-block;
}

.navigation-bar-click-dropdown.active, 
.navigation-bar-click-dropdown.active #navigation-bar-click-dropdown-link {
  border-radius: 10px;
}

.navigation-bar-click-dropdown-link {
  display: inline-block;
}

/* ===== RADIO BUTTONS ===== */
#radio-button label {
  display: inline-block;
  align-items: flex-start;
}

#radio-button p {
  display: flex;
  display: inline-block;
  margin-right: 10px;
}

/* ===== CHECKBOX ===== */
#checkbox label {
  display: inline-block;
  align-items: flex-start;
}

#checkbox p {
  display: flex;
  display: inline-block;
  margin-right: 10px;
}


/* ===== SWITCH ===== */
#switch div, .switch-checkbox-text {
  margin: 10px;
}

.switch-checkbox-text {
  margin-top: 3px;
}

.android-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
  border-radius: 34px;
}

/* Checkbox verstecken */
.android-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Hintergrund */
.switch-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  border-radius: 34px;
  transition: 0.3s;
}

/* Kreis (der "Knopf") */
.switch-slider::before {
  content: "";
  position: absolute;
  height: 22px;
  width: 22px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  transition: 0.3s;
}

/* Kreis nach rechts schieben */
input:checked + .switch-slider::before {
  transform: translateX(22px);
}

/* Optional: deaktiviert */
input:disabled + .switch-slider {
  cursor: not-allowed;
}


/* ===== INPUT FIELDS ===== */
.input-field label {
  float: left;
  width: 11em;
  text-align: left;
}

.input-field input {
  display: block;
}

#input-field-result p {
  height: 22px;
}

div#input-field-result, div p {
  margin-top: 10px;
  text-align: left;
}

#input-field-form div {
  display: flex;
  display: inline-block;
  margin-right: 7%;
}

#input-field-reset-button {
  width: 150px;
}

#input-field-submit-button {
  margin-right: 14px;
  margin-bottom: 10px;
  width: 150px;
}

@media (min-width: 600px) {
  #input-field-button {
    align-items: flex-start;
  }
}

.error-message {
  font-size: 14px;
  display: none;
  margin-top: 5px;
}

/* ==== WIZARD ==== */
.wizard-form {
  min-height: 260px;
  display: flex;
  flex-direction: column;
}

.wizard-page {
  display: none;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.wizard-page.active {
  display: flex;
}

.wizard-page-content {
  flex: 1 1 auto;
}

.wizard-page-actions {
  display: flex;
  gap: 10px;
  margin-top: auto;
}

#wizard button {
  width: 200px;
  margin-right: 10px;
  margin-top: 10px;
}


/* RESULT */
.wizard-result-line-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.wizard-result-line {
  display: flex;
  gap: 8px;
}

.wizard-page-two .wizard-page-content label,
.wizard-page-three .wizard-page-content label {
  width: 120px;
  display: inline-block;
}

@media(max-width: 566px) {
  .wizard-page-two .wizard-page-content input,
  .wizard-page-three .wizard-page-content input {
    margin-top: 10px;
  }
}

.wizard-result-label {
  width: 150px;
}

.wizard-result-value {
  flex: 1;
}

/* ===== TEXT AREA ===== */
#text-box p {
  display: flex;
  display: inline-block;
  margin: 10px;
}

/* ===== DROPDOWN ===== */
#dropdown p {
  display: flex;
  display: inline-block;
  margin-right: 20px;
}

#dropdown select {
  width: 180px;
  height: 25px;
  border-radius: 6px;
}

/* Container */
#dropdown-search {
  width: 180px;
  position: relative;
  font-family: Arial, sans-serif;
  font-size: 14px;
}

/* Toggle button */
.dropdown-search-toggle {
  width: 100%;
  height: 25px;
  padding: 0px 10px 0px 12px;
  cursor: pointer;
  border-radius: 6px;
  text-align: left;
  position: relative;
  transition: border-color 0.2s, box-shadow 0.2s;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Arrow (Bootstrap Icon) */
.dropdown-search-toggle i {
  transition: transform 0.3s ease; /* rotation animation */
  font-size: 12px; /* size of the arrow icon */
}

/* Optional: class for open state */
.dropdown-open .dropdown-search-toggle i {
  transform: translateY(-50%) rotate(180deg); /* nach oben */
}

/* Dropdown menu */
.dropdown-search-menu {
  display: none;
  margin-top: 6px;
  border-radius: 8px;
  position: absolute;
  width: 100%;
  max-height: 260px;
  overflow-y: auto;
  box-sizing: border-box;
  z-index: 10;
}

/* Search input (sticky) */
.dropdown-search-input {
  width: 100%;
  padding: 10px;
  border: none;
  border-bottom: 1px solid white;
  box-sizing: border-box;
  outline: none;
  position: sticky;
  top: 0;
  z-index: 5;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

/* Items */
.dropdown-search-item {
  padding: 10px 12px;
  cursor: pointer;
  transition: background 0.15s;
}

/* Hidden */
.hidden {
  display: none;
}


/* ===== SELECTBOX ===== */
#selectbox p {
  display: flex;
  display: inline-block;
  margin-right: 20px;
}

#selectbox-single, #selectbox-multiple, 
#selectbox-preselected, #selectbox-disabled,
#selectbox-disabled-selected {
  width: 170px;
}


/* ===== SEARCH ===== */
#search-container {
  margin: 10px;
  display: flex;
  flex-direction: column;
  height: 320px;
}

#search-form {
  flex-shrink: 0;
  position: relative;
}

#search-submit-button, #search-reset-button,
#search-input {
  margin-right: 11px;
  margin-top: 10px;
}

#search-results {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.search-result-content {
  flex: 1;
  overflow-y: auto;
  margin-top: 10px;
}

.search-pagination button {
  width: 150px;
}

.search-pagination {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  #search-container {
    height: 400px; /* mehr Platz auf kleinen Screens */
  }
}

.search-pagination-numbers {
  width: 230px;
}

.search-pagination-page-number {
  padding: 2px 6px;
  cursor: pointer;
  border-radius: 4px;
}

.search-pagination-page-number.current {
  font-weight: bold;
}

#search-pagination-page-input {
  width: 50px;
  height: 25px;
  border-radius: 6px;
  text-align: center;
}

.pagination-dots {
  padding: 0 5px;
}

#search-pagination-element-count {
  width: 59px;
  height: 31px;
  border-radius: 6px;  
}

#search-result-headline {
  font-weight: bold;
}

.search-input-wrapper {
  position: relative;
  display: inline-block;
}

.search-input-auto-suggestion-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 200px;
  max-height: 250px;
  overflow-y: auto;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  display: none;
  z-index: 1000;
}

.search-input-auto-suggestion-dropdown-item {
  padding: 10px;
  cursor: pointer;
}


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


/* ===== OVERLAY ===== */
.overlay-tour-button {
  margin-right: 11px;
  margin-bottom: 10px;
  width: 200px;
}

.overlay-tour-modal {
  display: none; /* default: hidden */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  z-index: 9500;
}

.overlay-tour-modal.is-active {
  display: flex;
  z-index: 9500;
}

.overlay-tour-modal-content-page {
  #display: none;
}

.overlay-tour-modal-content-page.active {
  #display: table-cell;
}

.overlay-tour-modal-container {
  position: relative;
  padding: 20px;
  max-width: 900px;
  max-height: 600px;
  width: 850px;
  border-radius: 8px;
  z-index: 9500;
}

#overlay-tour-modal-content li {
  margin: 10px;
}

#overlay-tour-modal-content img {
  margin: 20px;
  width: 80%;
}

#overlay-tour-modal-content i {
  font-size: 3rem;
}

.overlay-tour-modal-content-arrow {
  width: 5%;
  vertical-align: middle;
}

#overlay-tour-modal-content-description-design,
#overlay-tour-modal-content-description-toggle,
#overlay-tour-modal-content-description-url,
#overlay-tour-modal-content-description-footer {
  height: 150px;
}

#overlay-tour-modal-content-page-1,
#overlay-tour-modal-content-page-2,
#overlay-tour-modal-content-page-4,
#overlay-tour-modal-content-page-3 {
  width: 80%;
}

#overlay-tour-modal-content div {
  display: table-cell;
}

.overlay-tour-modal-close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

.overlay-cookie-modal {
  display: none;
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
}

.overlay-cookie-modal.is-active {
  display: flex;
  z-index: 9800;
}

.overlay-cookie-modal-container {
  padding: 24px;
  max-width: 400x;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#overlay-cookie-button {
  width: 200px;
  margin-right: 10px;
  margin-bottom: 10px;
}

.overlay-cookie-modal-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.overlay-cookie-modal-actions-button {
  flex: 1;
  padding: 8px;
  cursor: pointer;
}

.overlay-cookie-modal-section {
  margin-top: 10px;
  flex: 1;
  overflow-y: auto;
  max-height: 300px;
}

.overlay-cookie-modal-section-toggle {
  width: 100%;
  text-align: left;
  background: none;
  border-top: #d1e751;
  padding: 10px;
  cursor: pointer;
}

.overlay-cookie-modal-section-content {
  display: none;
  padding-bottom: 10px;
}

.overlay-cookie-modal-section-content.is-open {
  display: block;
  padding: 5px 10px;
}

.overlay-cookie-modal-section-option-label {
  display: block;
  margin: 5px 0;
}

/* Notification overlay */
#overlay-notification-button {
  width: 200px;
}

.overlay-notification-modal {
  position: fixed;
  top: 20px;
  right: -600px;
  width: 350px;
  height: 150px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  transition: right 0.4s ease;
  overflow: hidden;
  z-index: 9999;
}

.overlay-notification-modal.show {
  right: 20px;
}

.overlay-notification-modal-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  flex-shrink: 0;
}

.overlay-notification-modal-content {
  flex: 1;
}

#overlay-notification-modal-headline {
  margin: 0 0 4px;
  font-size: 16px;
  position: absolute;
  top: 15px;
  font-weight: bold;
}

#overlay-notification-modal-description {
  margin: 0 0 8px;
  font-size: 12px;
}

#overlay-notification-modal-button-link {
  display: inline-block;
  padding: 5px 10px;
  font-size: 12px;
  position: absolute;
  bottom: 15px;
}

.overlay-notification-modal-button-close {
  position: absolute;
  top: 6px;
  right: 6px;
  cursor: pointer;
  font-size: 12px;
}


/* ===== IFRAME ===== */
#iframe {
  width: 80%;
  height: 250px;
}


/*===== SHADOW DOM ===== */
#shadow-host {
  width: 79%;
  margin: 10px;
  padding-left: 10px;
  height: 135px;
}


/* ===== YOUTUBE ===== */
#youtube-video-iframe {
  width: 80%;
  aspect-ratio: 16 / 9;
}

/* ===== AUDIO ===== */
@media (max-width: 600px) {
  #audio audio {
    width: 80%;
  }
}

.audio-custom-player {
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 300px;
  margin: 10px;
}

.custom-audio-progress-bar {
  width: 100px;
  height: 5px;
}

.custom-audio-progress {
  height: 5px;
  width: 0%;
}

#audio-file-hint {
  margin-left: 10px;
  font-size: 12px;
}


/* ===== TEXT ===== */
#text-bold{font-weight: bold}
#text-italic{font-style: italic}
#text-underline{text-decoration-line: underline;}
#text-striketrough{text-decoration-line: line-through;}
#text-overline{text-decoration-line: overline;}
#text-overline-underline{text-decoration-line: overline underline;}
#text-superscript{vertical-align: super; font-size: smaller;}
#text-subscript{vertical-align: sub; font-size: smaller;}
#text-right-container{width: 80%; text-align: right}
#text-center-container{width: 80%; text-align: center}


/* ===== LIST ===== */
#list li, #list dd, #list dt {
  margin-bottom: 5px;
}

#list-container div {
  margin: 20px;
}


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


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


/* ===== UPLOAD ===== */
#upload-container, .upload-custom-container {
  width: 81%;
}

#upload-hint-container {
  display: block;
  margin: 10px;
}

#upload-label, #upload-input {
  margin: 10px;
}

#upload button {
  margin-top: 10px;
}

/* ===== TABLE ===== */
#table-fieldset {
  min-height: 660px;
}

@media (max-width: 1115px) {
  #table-fieldset {
    min-height: 760px;
  }
}

@media (max-width: 800px) {
  #table-fieldset {
    min-height: 780px;
  }
}

#table table {
  width: 80%;
  margin: 10px;
}

@media (max-width: 800px) {
  #table table {
    width: 95%;
  }
}

#table tbody tr {
  height: 50px;
}

#table thead tr, #table tfoot tr {
  height: 30px;
}


.table-customizable-wrapper {
  overflow-x: auto;
}

.table-customizable-table {
  border-collapse: collapse;
  table-layout: fixed;
}

.table-customizable-table-head-column,
.table-customizable-table-body-column,
.table-customizable-table-filter-column {
  padding: 0.875rem 1rem;
  text-align: left;
  overflow-wrap: break-word;
  word-break: break-word;
}

.table-customizable-table-head-column-button {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  #width: 100%;
  padding: 0;
  border: none;
  cursor: pointer;
  font: inherit;
}

.table-customizable-table-filter-input {
  width: 80%;
  padding: 0.625rem 0.75rem;
  border-radius: 0.25rem;
}

.table-customizable button:hover {
  border: none;
}

.table-customizable-table-filter-input:focus {
  outline-offset: 0.125rem;
}

#table-customizable-table-no-result-row-column {
  text-align: center;
}


/* ===== DATEPICKER ===== */
/* MAIN CONTAINER */
#datepicker-container {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  max-width: 80%;
  margin: 10px;
}

#datepicker-inline-area {
  display: block;
  margin-right: 20px;
}

#datepicker-dropdown-area {
  display: flex;
  flex-direction: column;
  gap: 50px;
  margin-right: 30px;
}

@media (max-width: 750px) {
  #datepicker-container {
    flex-direction: column;
  }

  #datepicker-dropdown-area {
    margin-top: 20px;
  }
}

.datepicker-system,
.datepicker-custom,
.datepicker-inline {
  position: relative;
  width: 100%;
  min-width: 250px;
}

.datepicker-system-input,
.datepicker-custom-input {
  width: 100%;
  padding: 8px;
  cursor: pointer;
}

.datepicker-dropdown {
  display: none;
  position: absolute;
  top: 45px;
  width: 100%;
  z-index: 500;
}

.datepicker-inline-header,
.datepicker-dropdown-header {
  display: flex;
  justify-content: space-between;
  padding: 5px;
}

.datepicker-inline-weekdays,
.datepicker-dropdown-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  padding: 5px 0;
}

.datepicker-inline-calendar,
.datepicker-dropdown-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.datepicker-inline-calendar-day-selected,
.datepicker-dropdown-calendar-day-selected,
.datepicker-inline-calendar-day:hover,
.datepicker-dropdown-calendar-day:hover {
  border-radius: 5px;
}

.datepicker-inline-calendar-day,
.datepicker-dropdown-calendar-day {
  padding: 8px;
  text-align: center;
  cursor: pointer;
  margin: 2px;
}

.datepicker-dropdown-today-button,
.datepicker-inline-today-button {
  font-weight: bold;
  font-size: 12px;
}

.datepicker-inline-today-button,
.datepicker-inline-next-month-button,
.datepicker-inline-previous-month-button {
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.datepicker-dropdown-today-button,
.datepicker-dropdown-next-month-button,
.datepicker-dropdown-previous-month-button {
  width: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

#datepicker-inline {
  display: block;
  padding: 10px;
}

#datepicker-dropdown {
  padding: 10px;
}

#datepicker-custom-input-icon {
  position: absolute;
  right: -10px;
  top: 25%;
}

#datepicker-current-timestamp {
  #margin-left: 30px;
}

#datepicker-current-timestamp-date, 
#datepicker-current-timestamp-time {
  margin-bottom: 10px;
}


/* ===== TIMER ===== */
.timer-section {
  margin: 10px;
}

.timer-section-content {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

#timer-section-content fieldset {
  min-width: 230px;
  max-width: 340px;
  margin-right: 30px;
  margin-left: 0;
  padding: 20px;
}

.timer-card-title {
  margin: 0 0 1.5rem;
  font-size: 1.5rem;
}

.timer-display {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 6rem;
  margin-bottom: 1.5rem;
  border-radius: 0.5rem;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.1rem;
}

.timer-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.timer-button {
  width: 100px;
}

.timer-button:focus-visible {
  outline-offset: 2px;
}

.timer-inputs {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.timer-input-group {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.5rem;
}

.timer-label {
  font-weight: 700;
}

.timer-input {
  padding: 0.75rem;
  border-radius: 0.5rem;
  font: inherit;
}

.timer-input:focus-visible {
  outline-offset: 2px;
}

#timer-stopwatch-rounds, #timer-countdown-status {
  margin-top: 30px;
}


/* ===== TOOLTIP ===== */
.tooltip-hover-link {
  text-decoration: underline;
  cursor: help;
  position: relative;
}

.tooltip-hover-link span[role=tooltip] {
  display: none;
}

.tooltip-hover-link:hover span[role=tooltip] {
  display: block;
  position: absolute;
  bottom: 1em;
  left: -3em;
  width: 20em;
  padding: 0.5em;
  z-index: 100;
  border-radius: 0.2em;
}

.tooltip-click-button {
  border: none;
  padding: 0;
}

.tooltip-click-wrapper {
  position: relative;
  display: inline-block;
}

.tooltip-click-box {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  padding: 6px 10px;
  white-space: nowrap;
  border-radius: 0.2em;
  margin-top: 5px;
  font-size: 14px;
}

@media (max-width: 1005px) {
  .tooltip-click-box {
    left: -100px;
  }
}

@media (max-width: 886px) {
  .tooltip-click-box {
    left: 0;
  }
}

@media (max-width: 610px) {
  .tooltip-click-box {
    left: -160px;
  }
}


/* ===== BUTTONS ===== */
#button p {
  display: flex;
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 0px;
}

#button-disabled,
#button-enabled {
  width: 200px;
}

button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  border-radius: 6px;
}

#button-status-container {
  margin: 10px;
}


/* ===== SPINNER ===== */
.spinner-container {
  height: 100px;
}

@media (max-width: 1500px) {
  .spinner-container {
    height: 150px;
  }
}

@media (max-width: 1020px) {
  .spinner-container {
    height: 180px;
  }
}

.spinner-container > div {
  display: flex;
  display: inline-block;
  margin-right: 14px;
}

.spinner-mini-image {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  display: none;
  margin: 10px;
}

#spinner-delay-element {
  margin-top: 30px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.spinner-overlay-modal {
  display: none; /* default: hidden */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  z-index: 9500;
}

.spinner-overlay-modal.is-active {
  display: flex;
  z-index: 9500;
}

.spinner-overlay-modal-container {
  position: relative;
  padding: 20px;
  border-radius: 8px;
  z-index: 9500;
}

.spinner-overlay-image {
  border-top: 4px dashed #d1e751;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 10px;
}

.spinner-button-image {
  border-top: 4px dashed #d1e751;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  animation: spin 1s linear infinite;
  margin-left: 10px;
  display: none;
}

.spinner-mini-start-button,
#spinner-overlay-start-button, #spinner-button-start-button {
  padding: 5px;
  margin-bottom: 10px;
  width: 270px;
}

button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  border-radius: 6px;
}


/* ===== PROGRESS BAR ===== */
#progress-bar-reset-button {
  margin-left: 14px;
}

.progress-bar-status-container {
  width: 300px;
  height: 25px;
  border-radius: 5px;
  margin-top: 20px;
  margin-bottom: 10px;
  overflow: hidden;
}

.progress-bar-status {
  height: 100%;
  width: 0%;
  transition: width 0.1s linear;
}


/* ===== DELAY ===== */
#delay-container {
  height: 175px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#delay-text {
  display: none;
  margin-top: 20px;
}

#delay-time-input {
  height: 25px;
  width: 100px;
  border-radius: 6px;
}

#delay-button {
  cursor: pointer;
  gap: 0.5rem;
  width: 200px;
}


/* ===== COLOR ===== */
#colors p {
  display: flex;
  display: inline-block;
  margin: 10px;
}

.dotRbt, .dotWhite, .dotBorder, .dotTransparency,
.dotBlack, .dotRed, .dotGreen, .dotBlue,
.dotYellow, .dotPink, .dotAqua {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  display: inline-block;
}


/* ===== IMAGES ===== */
#images div {
  display: inline-block;
  margin: 10px
}

#image-available {
  float: left;
  margin-right: 30px;
}

div.image-not-available {
  width: 100px;
  height: 100px;
  float: left;
}


/* ===== IMAGE SLIDER ===== */
.image-slider-container {
  position: relative;
  max-width: 300px;
  margin: 10px auto 40px auto;
  overflow: hidden;
}

.image-slider-track {
  display: flex;
  transition: transform 0.5s ease;
}

.image-slider-slide {
  min-width: 100%;
  text-align: center;
}

/* Dots navigation */
.image-slider-dots {
  text-align: center;
  margin-top: 10px;
}

.image-slider-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 5px;
  border-radius: 50%;
  cursor: pointer;
}


/* ===== IMAGE CAROUSEL ===== */
.image-carousel-container {
  position: relative;
  max-width: 920px;
  margin: 10px auto 10px auto;
  overflow: hidden;
}

.image-carousel-track {
  display: flex;
  gap: 10px;
  transition: transform 0.5s ease;
}

.image-carousel-item {
  flex: 0 0 calc((100% - 32px) / 4); /* 4 pictures */
  text-align: center;
}

.image-carousel-item img {
  width: 100%;
  height: auto;
  display: block;
}

.image-carousel-text {
  margin-top: 5px;
}

.image-carousel-button-left, .image-carousel-button-right {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
}

.image-carousel-button-left {
  left: 0;
}

.image-carousel-button-right {
  right: 2px;
}

/* Tablet */
@media (max-width: 1530px) {
  .image-carousel-item {
    flex: 0 0 calc((100% - 20px) / 3); /* 3 pictures */
  }
  .image-carousel-container {
    max-width: 620px;
  }
}

/* Small Tablet */
@media (max-width: 1040px) {
  .image-carousel-item {
    flex: 0 0 calc((100% - 10px) / 2); /* 2 pictures */
  }
  .image-carousel-container {
    max-width: 420px;
  }
}

/* Mobile */
@media (max-width: 710px) {
  .image-carousel-item {
    flex: 0 0 100%; /* 1 picture */
  }
  .image-carousel-container {
    max-width: 280px;
  }
}


/* ===== DICE ===== */
.roll-the-dice-main {
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem;
}

#roll-the-dice-container {
  height: 350px;
  margin: 10px;
}

.roll-the-dice-main-section-control {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.roll-the-dice-main-section-control-input {
  width: 190px;
  height: 25px;
  border-radius: 6px;
}

.roll-the-dice-main-section-control-button {
  cursor: pointer;
  gap: 0.5rem;
  width: 200px;
}

.roll-the-dice-main-section-control-button:hover {
  opacity: 0.9;
}

.roll-the-dice-main-section-result {
  margin-top: 2rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.roll-the-dice-main-section-result-dice {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

/* ===== DICE FACE ===== */
.roll-the-dice-main-section-result-dice {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 8px;
}

/* Dot (pip) */
.roll-the-dice-main-section-result-dice-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* Positions */
.roll-the-dice-main-section-result-dice-dot-center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.roll-the-dice-main-section-result-dice-dot-top-left { top: 8px; left: 8px; }
.roll-the-dice-main-section-result-dice-dot-top-right { top: 8px; right: 8px; }
.roll-the-dice-main-section-result-dice-dot-middle-left { top: 50%; left: 8px; transform: translateY(-50%); }
.roll-the-dice-main-section-result-dice-dot-middle-right { top: 50%; right: 8px; transform: translateY(-50%); }
.roll-the-dice-main-section-result-dice-dot-bottom-left { bottom: 8px; left: 8px; }
.roll-the-dice-main-section-result-dice-dot-bottom-right { bottom: 8px; right: 8px; }

/* ===== ANIMATION ===== */
.roll-the-dice-main-section-result-dice-animation {
  animation: roll-the-dice-animation 0.8s ease;
}

@keyframes roll-the-dice-animation {
  0%   { transform: rotate(0deg) scale(1); opacity: 0.5; }
  50%  { transform: rotate(180deg) scale(1.2); opacity: 1; }
  100% { transform: rotate(360deg) scale(1); }
}

/* Accessibility: reduced motion */
@media (prefers-reduced-motion: reduce) {
  .roll-the-dice-main-section-result-dice-animation {
    animation: none;
  }
}


/* ===== RANDOM POSITION ===== */
#random-position-area {
  max-width: 300px;
  height: 200px;
  position: relative;
  margin: 10px;
  overflow: hidden;
}

#random-position-moving-element {
  width: 40px;
  height: 40px;
  position: absolute;
  display: none;
}


/*===== RIGHT CLICK ===== */
.right-click-container {
  padding-top: 40px;
  padding-bottom: 40px;
  width: 80%;
  text-align: center;
}

.right-click-menu {
  display: none;
  position: absolute;
  list-style: none;
  padding: 10px;
  width: 150px;
}

#right-click #right-click-menu li {
  padding-bottom: 10px;
  padding-top: 10px;
  border-bottom: 1px solid #666;
}

#right-click #right-click-menu a {
  text-decoration: none;
  display: block;
  width: 100%;
  height: 100%;
  padding: 5px;
}


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


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


/*===== LOGIN ===== */
#login-container, #login-secure-container,
#forgot-password-container {
  min-height: 310px;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

@media (max-width: 700px) {
  #login-container, #login-secure-container,
  #forgot-password-container {
    min-height: 350px;
  }
}

@media (max-width: 550px) {
  #login-container, #login-secure-container,
  #forgot-password-container {
    min-height: 400px;
  }
}

.login-buttons {
  margin-top: auto;
}

#login-input-save-credentials-input {
  display: inline-flex;
  margin-top: 10px;
}

#login-input-save-credentials-label {
  float: none;
}

.login label {
  float: left;
  width: 8em;
  text-align: left;
}

.login input {
  display: block;
}

#login-input-password {
  margin-top: 10px;
}

.login-messages {
  margin-top: 10px;
}

#login-button-submit, #forgot-password-reset-button,
#login-secure-area-logout-button {
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
}

#login button {
  width: 180px;
  height: 31px;
}

#login-account-hint {
  margin-bottom: 30px;
}


/*===== HTACCESS ===== */
#htaccess-secure-page-link-list-entry-1 {
  margin-bottom: 10px;
}


/*===== OVERLAP ===== */
#overlap-container {
  margin: 10px;
  height: 50px;
}

#overlap-link-description {
  margin-left: 30px;
}

/*===== COLLAPSIBLE ===== */
.collapsible-collapse-area-element-first,
.collapsible-collapse-area-element-second,
.collapsible-collapse-area-element-third,
.collapsible-collapse-area-element-fourth,
.collapsible-container {
  margin: 10px;
}

/* Headline-like clickable area */
.collapsible-button {
  cursor: pointer;
  font-size: 18px;
  padding: 8px 0;
  position: relative;
}

/* Full width underline */
.collapsible-button::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%; /* extends beyond 80% */
  height: 2px;
}

/* Collapse area */
.collapsible-collapse-area {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  margin-top: 12px;
}

/* Visible state */
.collapsible-collapse-area.active {
  max-height: 500px; /* adjust if content is larger */
  margin-top: 12px;
}


/*===== QR CODE ===== */
#qr-code-container {
  width: 80%;
}

#reader {
  width: 100%;
}

#qr-code-image-container {
  margin: 10px;
}

#qr-code-result {
  margin-top: 10px;
}


/*===== REDIRECT ===== */
#redirect-buttons {
  padding-bottom: 10px;
}

#redirect button {
  width: 150px;
}

#redirect p {
  display: flex;
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 0px;
}


/* ===== DRAG AND DROP ===== */
#drag-and-drop-item {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  border-radius: 10px;
}

#drag-and-drop-zone {
  margin-top: 15px;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== JS EVENTS ===== */
.js-event-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  width: 80%;
}

@media (max-width: 680px) {
  .js-event-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  width: 80%;
  }
}

#js-event-log {
  margin-top: 15px;
  padding: 10px;
  height: 180px;
  overflow: auto;
}

/* ===== RANGE SLIDER ===== */
#range-slider-item {
  width: 560px;
}

.range-slider-scale {
  width: 560px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-top: 5px;
}

@media (max-width: 1000px) {
  #range-slider-item, .range-slider-scale {
    width: 100%;
  }
}

#range-slider-mixer {
    display: flex;
    gap: 25px;
    align-items: flex-end;
    padding: 40px;
}

.range-slider-mixer-channel {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* vertical slider */
#range-slider-mixer input[type=range] {
    appearance: slider-vertical;
    writing-mode: vertical-lr;
    direction: rtl;
    width: 30px;
    height: 220px;
}

.range-slider-mixer-value {
    margin-top: 10px;
    font-size: 18px;
}

#range-slider-mixer-buttons {
  margin-left: 10px;
  margin-bottom: 10px;
}


/*===== SCROLL ===== */
#scroll-area {
  height: 150px;
  overflow-y: scroll;
  overflow-x: hidden;
}  

/*===== REFRESH ===== */
#refresh button {
  width: 200px;
}

#refresh-button-container p {
  display: flex;
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 0px;
}

#refresh-button-container {
  padding-bottom: 10px;
}


/* ===== COOKIES AND STORAGE ===== */
.storage-button {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  width: 80%;
  margin-top: 20px;
}

@media (max-width: 680px) {
  .storage-button {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
    width: 80%;
  }
}

.storage-input {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.storage-input label {
  width: 80px;
}


/* ===== DATALAYER ===== */
.datalayer-input {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.datalayer-input label {
  width: 80px;
}

.datalayer-button {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  width: 80%;
  margin-top: 20px;
}

@media (max-width: 680px) {
  .datalayer-button {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
    width: 80%;
  }
}


/* ===== LANGUAGE ===== */
.language-switch-container {
  margin: 10px;
}

#language-switch-button-en {
  margin-right: 10px;
}

#language-switch-text {
  margin: 10px;
  padding-top: 10px;
}


/*===== AI ===== */
#password-checker {
  width: 80%;
  margin: 10px;
  padding-bottom: 10px;
}

#password-checker-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#password-checker-input {
  padding: 5px;
}

#password-checker-input-show-password-label {
  width: 123px;
}

#password-checker-strength-bar {
  height: 10px;
  width: 0%;
  transition: width 0.3s ease, background-color 0.3s ease;
}

#password-checker-feedback {
  padding: 10px;
  min-height: 210px;
}


/*===== CAPTCHA ===== */
#captcha button {
  margin-right: 10px;
  margin-top: 10px;
}

#captcha-text-code,
#captcha-canvas-code {
  font-family: Great Vibes;
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 5px;
  padding: 15px 0;
  margin-bottom: 15px;
  user-select: none;
  max-width: 350px;
  text-align: center;
}

#captcha-canvas-container {
  height: 360px;
}

#captcha-text-container {
  height: 270px;
}

#captcha input[type="text"],
#captcha input[type="number"] {
  #width: 80%;
  padding: 10px;
  #margin: 15px 0;
  font-size: 16px;
  width: 200px;
  height: 10px;
  margin-right: 10px;
}

#captcha-action-button {
  #padding: 8px 15px;
  #margin: 0 5px;
  #cursor: pointer;
}

#captcha section {
  padding: 15px;
  margin-bottom: 30px;
  border-radius: 8px;
  width: 77%;
}

#captcha-image-grid {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
  margin-bottom: 10px;
}

.captcha-image-selection-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  cursor: pointer;
  transition: border 0.2s;
}

@media(max-width:800px){
  .captcha-image-selection-image {
    width: 60px;
    height: 60px;
  }
  #captcha-image-grid {
    grid-template-columns: repeat(3, 80px);
    grid-template-rows: repeat(3, 80px);
  }
}

#captcha-slider-container {
  height: 190px;
}

#captcha-image-container {
  height: 500px;
}

@media(max-width: 800px){
  #captcha-image-container {
    height: 450px;
  }
}

#captcha-question-container, #captcha-math-container {
  height: 220px;
}

#captcha-slider-track-container {
  max-width: 300px;
  height: 40px;
  position: relative;
  border-radius: 20px;
  margin-bottom: 10px;
}

#captcha-slider-track {
  width: 100%;
  height: 100%;
  position: relative;
}

#captcha-slider-track-handle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 0;
  cursor: pointer;
  transition: background-color 0.2s;
}

#captcha-checkbox-input {
  margin-bottom: 5px;
}

#captcha-checkbox-container {
  height: 210px;
}

@media(max-width: 850px) {
  #captcha-checkbox-container {
    height: 250px;
  }
}


/*===== HTTP ERRORS ===== */
#http-error-2xx, #http-error-3xx,
#http-error-4xx {
  margin-bottom: 40px;
}


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


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



/* ===== FOOTER ===== */
div#footer {
  text-align: center;
}

div#footer-content {
  align-items: flex-start;
  justify-content: space-between; 
}

@media (min-width: 800px) {
  div#footer-content {
  display: flex;
  }
}

#footer-contact, #footer-social-media, #footer-news {
  padding: 10px;
  box-sizing: border-box;
}

#footer-social-media {
  width: 200px;
}

#footer .bi, #footer svg {
  margin-right: 10px;
}


/* ===== SCROLL TO TOP ===== */
body:has(.sticky-footer.active) #scroll-to-top-button {
  #bottom: 110px;
}

#scroll-to-top-button span {
  align-content: center;
}

#scroll-to-top-button {
  position: fixed;
  bottom: 30px;
  right: 20px;
  display: none;
  z-index: 7300;
  border-radius: 50%;
  padding: 12px 14px;
  font-size: 18px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#scroll-to-top-button:hover {
  transform: scale(1.1);
  border-radius: 30px;
  font-size: 14px;
}


/* ===== EXTERNAL ===== */

#body-locators #locator-main,
#body-locators #locator-thisTab,
#body-locators #locator-newTab,
#body-locators #locator-newWindow,
#body-locators #locator-iframe,
#body-locators #locator-redirect,
#body-locators #locator-200,
#body-locators #locator-204,
#body-locators #locator-301,
#body-locators #locator-302,
#body-locators #locator-400,
#body-locators #locator-401,
#body-locators #locator-403,
#body-locators #locator-404,
#body-locators #locator-500,
#body-locators #locator-502,
#body-locators #locator-503,
#body-locators #locator-shadow-dom {
  display: flex;
}

#body-locators #locator-main div,
#body-locators #locator-thisTab div,
#body-locators #locator-newTab div,
#body-locators #locator-newWindow div,
#body-locators #locator-iframe div,
#body-locators #locator-redirect div,
#body-locators #locator-releaseNotes div,
#body-locators #locator-imprint div,
#body-locators #locator-dataProtection div,
#body-locators #locator-dropdown div,
#body-locators #locator-dropdown404 div,
#body-locators #locator-locators div,
#body-locators #locator-200 div,
#body-locators #locator-204 div,
#body-locators #locator-301 div,
#body-locators #locator-302 div,
#body-locators #locator-400 div,
#body-locators #locator-401 div,
#body-locators #locator-403 div,
#body-locators #locator-404 div,
#body-locators #locator-500 div,
#body-locators #locator-502 div,
#body-locators #locator-503 div,
#body-locators #locator-shadow-dom div {
  width: 28%;
  display: inline-table;
  padding: 20px;
  text-align: center;
  word-break: anywhere;
  min-width: 200px;
}

.release-notes li {
  margin-bottom: 5px;
}

.http-error-success {
  display: block;
  font-size: 22.5rem;
  text-align: center;
}

#page-not-found, .http-error-failed {
  display: block;
  font-size: 22.5rem;
  text-align: center;
}