/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

/* Logoleiste nur so Breit wie Inhalt */
.footer-logo-container .footer-logo-leiste {
    max-width: 100%;
}

/* Damit der Begrüßungstext die volle Breite einnimmt */
#welcome-container {
  max-width: 100%;
}

/* Damit auch die Prozentzahl im Progressbar angezeigt werden kann */
.top-container .progress {
  height: 16px;
  font-size: 0.7rem;
}

/* Trenner zwischen Header und Inhalt */
#survey-nav.navbar {
  border-bottom: 1px solid #c5c5c5;
}

/* Abstände der Progressbar zum Header verringern */
.brand-logo .top-container .top-content {
  padding-top: 0px;
}
body .top-container {
  margin-top: 15px !important;
  margin-bottom: 0px;
}

/* Abstände der Gruppen zum Button nach unten reduziert */
.group-outer-container .space-col,
.group-container .space-col {
  margin-bottom: 0px;
}

/* Gruppenüberschriften die nur Text sind mit mehr Abstand nach oben versehen */
.group-outer-container .question-container.boilerplate {
  margin-top: 4em;
}

/* Abstände der Überschriften nach oben reduziert */
.group-container .group-title {
  margin-top: 0px;
}

/* Abstände der Gruppenbeschreibungen geändert */
.group-container .group-description {
  margin-top: 0px;
  margin-bottom: 2em;
}

/* Abstände der Fragencontainer nach unten reduziert */
.question-container {
  margin-bottom: 2em;
}

/* Abstände nach dem Fragentitel nach unten reduziert */
.question-container .question-title-container {
  margin-bottom: 0px;
}

/* Abstände nach der Fragenbeschreibung nach unten reduziert */
.question-container .question-valid-container {
  margin-top: 0px;
}

/* Abstände nach dem Listenelement nach unten reduziert */
li.radio-item {
  margin-bottom: 0px;
}

/* Den Abstand des letzten Fragecontainers nach unten reduziert */
.question-container:last-of-type {
  margin-bottom: 0px;
}

/* Eingabefelder für Zahlen verkürzt */
.answer-item.numeric-item {
  max-width: 200px;
}

/* Abstand bei Mehrfachauswahlen nach unten reduziert */
.checkbox-item.mb-1 {
  margin-bottom: 0px !important;
}

.skala .ls-answers.radio-list {
  margin-right: 0px;
  margin-left: 0px;
}
.skala .ls-answers.radio-list ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
}

.skala .ls-answers.radio-list li {
  list-style: none;
  padding-left: 0px;
  margin-left: 20px;
  margin-right: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.skala .ls-answers.radio-list input[type="radio"] {
  margin-bottom: 5px;
  position: static;
  display: block;
}

.skala .ls-answers.radio-list label {
  position: static;
  padding-left: 0px;
  font-weight: bold;
  font-size: 1rem;
}

.skala .ls-answers.radio-list .radio-item label::before {
  margin-left: 0px;
}

.skala .ls-answers.radio-list .radio-item label::after {
  margin-left: 2px;
}


.flat-nav-list {
    list-style-type: none; /* Entfernt die Bullet-Points */
    padding: 0;
    display: flex; /* Richtet die Elemente horizontal aus */
    gap: 10px; /* Abstand zwischen den Buttons */
}

.flat-nav-list .nav-item {
    display: inline-block;
}

.flat-nav-list .nav-link {
    display: inline-block;
    padding: 10px 20px;
    color: #fff;
    background-color: #007bff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.flat-nav-list .nav-link:hover {
    background-color: #0056b3;
}