body {
  background: #eee;
}

.footer {
    margin-top: 3em;
    text-align: center;
}


/*.run-container .form-horizontal .form-group {*/

.form-row {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  margin: auto;
  margin-top: auto;
}

.run-container .form-horizontal .form-group {
  margin-left: auto;
  margin-right: auto;
}


.run-container .run_content_header {
  margin-bottom: 3em;
  display: block;
}

.run-container .run_content {
    margin-top: -20px;
}


form.form-horizontal div.form-row.form-group.mc_vertical div.controls label {
  display: inline-block;
}



@media (max-width: 768px) {
    .main_formr_survey {
        width: 100%;
        margin: auto;
    }
}


/* center buttons in mc_width60 */
.radio span, label.radio-inline span {
  left: 30px;
  transform: scale(1.5);
}

.form-horizontal .control-label h3 {
  margin-top: 30px;
  margin-bottom: 10px;
  font-size: 20px;
  line-height: 25px;
}

h1 {
    font-size: 30px;
}



figure, p {
  margin-bottom: 0.5em;
}



.form-group textarea {
  resize: both;
}


.form-row .form-control {
  max-width: 100%;
}


/* ude-blue: #004c93 
/* ude-orange: #ec7206


/* CHANGE COLORS TO UDE CD */

/* next button */
.btn:not(.btn-raised).btn-info, .input-group-btn .btn:not(.btn-raised).btn-info {
  color: #004c93;
  border-radius: 0px;
}

.run-container .btn-info {
  background: #fff;
  color: #004c93;
  border: 1px solid #004c93;
}

.run-container .btn-info:active, .run-container .btn-info:focus, .run-container .btn-info:hover {
  color: #fff;
  background: #004c93 !important;
}


/* links */
a, a:focus, a:hover {
  color: #004c93;
}


/* progress bar */
.progress, .progress .progress-bar, .progress .progress-bar.progress-bar-default {
  background-color: #004c93;
  display: none !important;
}






/* radio  button */
.radio input[type="radio"]:checked ~ .circle, label.radio-inline input[type="radio"]:checked ~ .circle {
  border-color: #004c93;
  transform: scale(1.5);
}

.radio input[type="radio"]:checked ~ .check, label.radio-inline input[type="radio"]:checked ~ .check {
  background-color: #004c93;
  transform: scale(1.5);
}




/* Likert scale selected */
.run-container a.btn.btn-checked, .run-container button.btn.btn-checked, .run-container label.btn.btn-checked {
  border: 3px solid;
}


.checkbox input[type="checkbox"]:checked + .checkbox-material .check, label.checkbox-inline input[type="checkbox"]:checked + .checkbox-material .check {
  border: 3px solid;
}

.checkbox input[type="checkbox"]:checked + .checkbox-material .check::before, label.checkbox-inline input[type="checkbox"]:checked + .checkbox-material .check::before {
  border: 3px solid;
}





.button_hide {
        display: none !important;
}


.btn-group {
    width:100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


.btn-group button:nth-child(odd) {
  margin: 10px !important;
  background-color: #b876b1;
  color: #fff;
  border-color: #004c93;
  border-radius: 5px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-size: 2.5rem;
}

.btn-group button:nth-child(even) {
  margin: 10px !important;
  background-color: #004c93;
  color: #fff;
  border-radius: 5px !important;
  border-color: #b876b1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-size: 2.5rem;
}


.btn-group .btn .btn_label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}


.btn-group button:nth-child(odd):hover,
.btn-group button:nth-child(odd):active,
.btn-group button:nth-child(odd):focus,
.btn-group btn-checked:nth-child(odd),
.btn-group button.btn.btn-checked:nth-child(odd) {
  background-color: #b876b1 !important;
  color: #fff;
  border: 4px solid #004c93;
  outline: none;
  box-shadow: none; /* Optional: disable focus glow */
  -webkit-appearance: none; /* Disable native styles */
}

.btn-group button:nth-child(even):hover,
.btn-group button:nth-child(even):active,
.btn-group button:nth-child(even):focus, 
.btn-group btn-checked:nth-child(even),
.btn-group button.btn.btn-checked:nth-child(even){
  background-color: #004c93 !important;
  color: #fff;
  border: 4px solid #b876b1;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
}

.btn-group:has(.btn-checked) button:not(.btn-checked) {
  opacity: 0.45 !important;
  filter: grayscale(40%) !important;
}

.btn-group:has(.btn-checked) button.btn-checked {
  opacity: 1 !important;
  filter: none !important;
}


.page-buttons > * {
  display: none;
}


.fmr-survey-page-count > strong {
  display: none !important;
}






/* neu für Querformat */

@media (min-width: 992px) {

  .study-name-fakenews_oer .main_formr_survey {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 54% 42%;
    column-gap: 4%;
    align-items: center;
  }

  /* Fortschritt immer über volle Breite */
  .study-name-fakenews_oer .main_formr_survey .progress-container {
    grid-column: 1 / -1;
  }

  /* Versteckte Inputs sollen das Grid nicht beeinflussen */
  .study-name-fakenews_oer .main_formr_survey > input[type="hidden"] {
    display: none;
  }

  /* Standard: alles über volle Breite */
  .study-name-fakenews_oer .main_formr_survey .form-group {
    margin: 0;
    box-sizing: border-box;
  }

  /* Bild links */
  .study-name-fakenews_oer .main_formr_survey .item-note {
    grid-column: 1;
    grid-row: 2 / span 2;
    align-self: start;
  }

  /* Antworten rechts */
  .study-name-fakenews_oer .main_formr_survey .item-mc_button {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
  }

  /* Weiter-Button immer rechts */
  .study-name-fakenews_oer .main_formr_survey .item-submit {
    grid-column: 2;
    grid-row: 3;
    align-self: center;
    justify-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    margin: 0;
  }

  /* Wenn nur Bild + Weiter da sind: Weiter mittig neben dem Bild */
  .study-name-fakenews_oer .main_formr_survey .item-note + .item-submit {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    min-height: 82vh;
  }

  /* formr/bootstrap neutralisieren */
  .study-name-fakenews_oer .item-note .control-label,
  .study-name-fakenews_oer .item-note .controls,
  .study-name-fakenews_oer .item-mc_button .control-label,
  .study-name-fakenews_oer .item-mc_button .controls,
  .study-name-fakenews_oer .item-mc_button .controls-inner {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .study-name-fakenews_oer .item-note .controls,
  .study-name-fakenews_oer .item-mc_button .control-label {
    display: none;
  }

  /* Bild */
  .study-name-fakenews_oer .item-note .control-label {
    display: block;
    text-align: center;
  }

  .study-name-fakenews_oer .item-note img {
    display: block;
    margin: 0 auto;
    width: auto !important;
    max-width: 100%;
    max-height: 95vh;
    height: auto;
    object-fit: contain;
  }

  /* Antwortbuttons */
  .study-name-fakenews_oer .item-mc_button .controls-inner {
    min-height: 82vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .study-name-fakenews_oer .item-mc_button .btn-group {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.9rem;
  }

  .study-name-fakenews_oer .item-mc_button .btn-group .btn,
  .study-name-fakenews_oer .item-mc_button .btn-group button:nth-child(odd),
  .study-name-fakenews_oer .item-mc_button .btn-group button:nth-child(even) {
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    box-sizing: border-box;
    font-size: 1.5rem;
    min-height: 3.8rem;
  }

  /* Weiter-Button selbst */
  .study-name-fakenews_oer .item-submit .btn-info {
    display: inline-block;
    min-width: 180px;
    width: auto;
    margin: 0;
  }
}


@media (min-width: 992px) {

  /* Fall 1: Bild + Antwortbuttons + Weiter
     => Weiter direkt unter den Antwortbuttons */
  .study-name-fakenews_oer .main_formr_survey .item-mc_button + .item-submit {
    grid-column: 2;
    grid-row: 3;
    justify-self: center;
    align-self: start;
    margin-top: -18vh;
    min-height: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  /* Fall 2: Bild + nur Weiter
     => Weiter rechts mittig neben dem Bild */
  .study-name-fakenews_oer .main_formr_survey .item-note + .item-submit {
    grid-column: 2;
    grid-row: 2;
    justify-self: center;
    align-self: center;
    margin-top: 0;
    min-height: 82vh;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  /* Button selbst */
  .study-name-fakenews_oer .item-submit .btn-info {
    display: inline-block;
    min-width: 180px;
    width: auto;
    margin: 0;
  }
}