/*******************
    Custom CSS Datei
    ----------------

    Die Informationen aus dieser CSS Datei werden immer als letztes geladen und überschreiben daher regulär andere Einstellungen.
    Um dies sicherzustellen und Ausnahmen zu vermeiden, wird an den Stellen, an denen eine Überschreibung notwendig ist, trotzdem die "!important"-Flag eingefügt. (Daher auch die Warnzeichen)
    
    Diese CSS Datei ist ein WIP. Einzelne Elemente werden hier nach und nach je nach Bedürfnis angepasst, modifiziert und/oder erweitert.
    
    Bei Wünschen oder Frage, einfach anpingen :)
*/

/*************
    MVV Farben
    ----------
    
    Perlnachtblau: #00355C oder rgba(5, 52, 96, 1)
    Markergrün:    #c0d101 oder rgba(201, 217, 47, 1)
    
    Verwendete alpha-Werte: 1, 0.6, 0.3
*/

/* Anpassungen K24 für BelSante Befragung */
.large-heading {font-family:sans-serif; font-size: 35.0px}
div.ls-privacy-block {display:none;}

/* Primary Button*/
.btn-primary {
  background-color: #00355c!important;
  border-color: #00355c!important;
  color: #ffffff!important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary:active:focus, .btn-primary.dropdown-toggle.show, .btn-primary.dropdown-toggle.show:focus {
  color: #ffffff!important;
  background-color: #00355c!important;
  border-color: #00355c!important;
}
.btn-primary.disabled, .btn-primary[disabled] {
  color: #374c5c!important;
  background-color: #D3D5DA;
  box-shadow: none;
  border-color: #D3D5DA;
  opacity: 1;
}
.btn-primary.disabled:hover, .btn-primary.disabled:focus, .btn-primary.disabled:active, .btn-primary.disabled.active, .btn-primary[disabled]:hover, .btn-primary[disabled]:focus, .btn-primary[disabled]:active, .btn-primary[disabled].active {
  color: #374c5c!important;
  background-color: #D3D5DA;
  box-shadow: none;
}


/* Progress Bar */
.progress-bar {
  color: #ffffff;
  background-color: #00355c!important;
  box-shadow: none;
}
.top-container .progress {
  height: 5px!important;
  margin-bottom: 0;
}
.top-container .progress-bar {
  min-width: 2em;
}


/* Radio Items */
.radio-item label::after {
  background-color: #00355c!important;
}
.radio-item input[type=radio] + label::after {
  background-color: #00355c!important;
}
.radio-item input[type=radio]:checked + label::before {
  border-color: #00355c!important;
}
.radio-item input[type=radio]:checked + label::after {
  background-color: #00355c!important;
}
.radio-item input[type=radio]:checked + label {
  color: #00355c!important;
}


/* Checkbox Items */
.checkbox-item input[type=checkbox]:checked + label {
  color: #00355c!important;
}
.checkbox-item input[type=checkbox]:checked + label::before {
  border-color: #00355c!important;
}
.checkbox-item input[type=checkbox]:checked + label::after {
  background-color: transparent;
  /*auskommentirt K24 zwecks Barrierefreiheit color: #c0d101!important;*/
  color: #00355c!important;
}
input[type=checkbox]:checked:after,
.checkbox input[type=checkbox]:checked:after,
.checkbox-inline input[type=checkbox]:checked:after {
  background-color: #00355c!important;
  border-color: #00355c!important;
}

/* Dreht die Spaltenüberschriften (Headers) in Matrixfragen senkrecht
   NUR bei Fragen mit der CSS-Klasse "rotate-headers" */

/* Spaltenköpfe (Antwortoptionen) in Matrix um 90° im Uhrzeigersinn drehen */
@media (min-width: 768px) { /* nur Desktop, damit Mobile-Layout nicht kaputtgeht */
  .rot90 table.ls-answers thead th {
    vertical-align: bottom;
    height: 140px;            /* ggf. anpassen, damit genug Platz da ist */
  }

  .rot90 table.ls-answers thead th .answertext,
  .rot90 table.ls-answers thead th span.answertext {
    display: inline-block;
    white-space: nowrap;
    transform: rotate(90deg); /* 90° clockwise */
    transform-origin: left bottom;
  }
}