/**************************************
 * Custom color theme: #0A9A97
 * Ziel: Einheitliche Kontrastfarbe für UI-Elemente
 * Ort: /upload/templates/YOUR_TEMPLATE/css/custom.css
 **************************************/

:root {
  --primary-color: #0A9A97;
  --primary-hover: #087b79;
  --primary-active: #066665;
}

/* Buttons (Primary) */
.btn-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-check + .btn-primary:hover {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
}

.btn-primary:focus,
.btn-check:focus + .btn-primary {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  box-shadow: none !important;
}

.btn-check:checked + .btn-primary,
.btn-check:focus:checked + .btn-primary {
  background-color: var(--primary-active) !important;
  border-color: var(--primary-active) !important;
}

/* Navigation-Links (z. B. Umfrage-Navigation) */
#survey-nav .nav-link:hover,
#survey-nav .nav-link:focus {
  color: var(--primary-color) !important;
}

/* Fortschrittsbalken */
.progress-bar {
  background-color: var(--primary-color) !important;
}

/* Checkbox + Radio (Awesome Bootstrap Checkbox) */
label::after {
  background-color: var(--primary-color) !important;
}

/* Text-Hervorhebungen */
.text-primary,
.text-info,
a {
  color: var(--primary-color) !important;
}

/* Optional: Hover-Effekt für Links */
a:hover {
  color: var(--primary-hover) !important;
}

/* Optional: Farbe für Validierungs-Fehlermeldungen anpassen */
.text-danger {
  color: #C9242A !important; /* rot lassen oder anpassen */
}

.question-text {
    font-weight: bold;
    font-size: larger;
}


.number-of-questions {
    text-align: center;
}

.survey-description {
    font-size: large;
}

.asterisk {
    padding-right: 10px;
}