/******************
    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
*/

.logo-container>img {
    max-height: 60px; }
    
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
}

p {
    line-height: 1.3em;
}

.btn-primary, .progress-bar, .navbar-default {background-color: rgba(0,0,0,0.7);}
.btn-primary:hover, .bg-primary, .flatly label::after {background-color: #ff5300;}
.btn-primary  {border-color: rgba(0,0,0,0.7);}
.btn-primary:hover  {border-color: #ff5300;}

.bereich h3 {margin-top: 0;}
.balken-container {background: none; display: block; width: 100%;}
.balken-container-1 {background: #C2D8C6; display: block; width: 100%; height: 30px;}
.balken-container-2 {background: #F5E3CA; display: block; height: 30px; margin-top: -30px}
.balken-container-3 {background: #EDB9AF; display: block; height: 30px; margin-top: -30px}
.vergleich_wert {background: #999999; display: block; height: 20px; border-radius: 10px; width: 20px; margin-top: -25px}
.ihr_wert {background: #FF5300; display: block; height: 20px; border-radius: 10px; width: 20px; margin-top: -20px}
.vergleich_wert_num {color:#999; text-align: center;}
.ihr_wert_num {color:#FF5300; text-align: center;}
.feedback-text {margin-top: 20px;}
.ampel {float:right;height:150px;margin:0 0 5px 20px;}
.feedback-auswertung {margin-bottom: 40px;}


@media print {
  body { 
    -webkit-print-color-adjust: exact; 
    color-adjust: exact;
  }
.balken-container-1 {background: #C2D8C6 !important}
.balken-container-2 {background: #F5E3CA !important}
.balken-container-3 {background: #EDB9AF !important}
.balken {background: #FF5300 !important}
.ihr_wert {background: #FF5300 !important}
.vergleich_wert {background: #999999 !important}
}

.OhneTitel .question-title-container {display: none;}

.Auswertung .question-title-container {background: none; color: #666;}
.Auswertung .answer-container {display: none;}

.question-container {border: none}
.question-valid-container {background: none}

.logo-container>img {padding: 20px;}

h1  {margin-bottom: 1em;}

.alert-warning {
    background-color: #ff5300;
    border-color: #ff5300;
    color: #ffffff;
}

.ampel_klein img {
    height: 28px;
    margin: 0 0 0 5px;
    float: left;
}

.ampel_klein {margin-bottom: 1em;}

@media only screen and (max-width: 840px) {
    .vergleich_wert_num, .ihr_wert_num {margin: 1em 0 2em;}
}


.mixer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
.mixerboard {
  background: #222;
  border-top: 2px solid #444;
  border-left: 2px solid #444;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  padding: 20px;
  margin: 5px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: top;
  background: radial-gradient(black 15%, transparent 16%) 0 0,
    radial-gradient(black 15%, transparent 16%) 8px 8px,
    radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%) 0 1px,
    radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%) 8px 9px;
  background-color: #282828;
  background-size: 16px 16px;
}
.meta-container {
  text-align: center;
  align-content: center;
  width: 25%;
}
.item-description {
  margin: 10px 5px 0 5px;
}
.level-text {
  font-size: 90%;
  margin: 5px 0;
  color: #ff5300;
}
.compare-text {
  font-size: 70%;
  margin: 5px 0;
  color: #aa6;
}
.level-container {
  background: #444;
  padding: 15px;
  width: 30px;
  height: 190px;
  margin-left: auto;
  margin-right: auto;
  border-top: 1px solid #aaaaaa66;
  border-left: 1px solid #aaaaaa66;
  border-right: 1px solid #00000066;
  border-bottom: 1px solid #00000066;
  border-radius: 5px;
  box-sizing: unset;
}
.level {
  background: #222;
  border-top: 1px solid #111;
  border-left: 1px solid #111;
  border-right: 1px solid #777;
  border-bottom: 1px solid #777;
  height: 150px;
  padding: 0;
  display: flex;
  align-items: flex-end;
  border-radius: 5px;
  box-sizing: unset;
}
.level-height {
  background: #ff530077;
  width: 30px;
  border-radius: 5px;
  box-sizing: unset;
}
.compare-height {
  border-top: 2px solid #ffa;
  width: 24px;
  margin-left: -28px;
  box-sizing: unset;
}
.meta-text {
  margin: 5px 0;
  font-weight: bold;
  text-align: left;
}

.mixerauswert .question-title-container {background: #111}