body { min-height: auto; }

.box {
  width: 100%;
  /* max-width: 700px; */
  height: 100%;
  min-height: 380px;
  background-color: #ffffff;
}

.dv_hidden {
  display: none !important;
}
.graphic {
    /* max-width: 700px; */
    height: 100%;
    min-height: 380px;
}

.graphic .svg {
    height: 100%;
    width: 100%;  
    inline-size: 100%;  
}

.outfitTop, .outfitBottom {
    margin-left: 10px;
}

#tooltip-wrapper {
  display: block;
  position: absolute;
  color: #ffffff;
  padding-left: 4px;
  padding-right: 4px;
  text-align: center;
  margin-top: -20px;
  pointer-events: none;
  font-size: 0.9em;
}

.chart {
  padding: 0 0 0 10px;
}

.title {
 font-weight: 500;
 font-size: 1.3em;
 line-height: 120%;
 font-family: 'Roboto';
}

.subtitle {
  font-weight: 400;
  font-size: 1.1em;
  line-height: 120%;
  font-family: 'Roboto';
 }

.bottomLine {
  stroke-width: 0.5;
  stroke: black;
}

.topLine {
  stroke-width: 0.5;
  stroke: black;
}

.comment, .legend2019, .legend2050 {
  font-weight: 300;
  display: block;
  width: 85%;
  font-size: .9em;
  font-family: 'Roboto';
}

.status {
  display: block;
  width: 85%;
  font-size: 0.85em;
  font-weight: 300;
  font-family: 'Roboto';
}

.source {
  display: block;
  width: 85%;
  font-size: 0.85em;
  font-weight: 300;
  font-family: 'Roboto';
}

.copyright {
  display: block;
  text-anchor: end;
  font-family: 'Roboto';
  font-weight: 300;
  font-size: 0.85em;
}


/* ------ Boutons choix formation ----- */

.buttonSzenario {
  color: #000 !important;
  background-color: #F5F5F5 !important;
  border-color: #F5F5F5 !important;
  padding: 5px 31px !important;
  width: 22.5%;
}

.buttonSzenario:hover{
background-color: #757575 !important;
color: white !important;
}

.buttonSzenario.active{
background-color: #757575 !important;
color: white !important;
border: white !important;
}

/* ------ Boutons choix Année ----- */

.buttonYear {
  color: #000 !important;
  background-color: #F5F5F5 !important;
  border-color: #F5F5F5 !important;
  padding: 5px 31px !important;
  width: 112.5px;
}

.buttonYear:hover{
background-color: #757575 !important;
color: white !important;
}

.buttonYear.active{
background-color: #757575 !important;
color: white !important;
border: white !important;
}

.btn-group {
  width: 100% !important;
}

/* ----- Mobile Navigation ----- */

.mobile-nav-container, .selectBildungsstufe_mobile {
padding-left: 0px !important;
padding-right: 32px !important;
margin-bottom: 10px !important;
}

.chosen-container .chosen-results li.highlighted{
  background-color:#757575 !important;
  color: white !important;
}

#select_szenario_mobile_chosen {
  width: 100% !important;
  /* margin-bottom: 10px; */
}

/* ----- Axis ------ */

.yAxis text,
.xAxis text {
    fill: #757575;
    font-size: .85rem;
}

.xAxis path,
.xAxis .domain,
.yAxis path {
    stroke: #fff;
}

.yAxis line {
    stroke: #D5D5D5;
}

.xAxis line,
.xAxis2 line {
    stroke: #D5D5D5;
}



@media (min-width:0px) and (max-width: 515px) {
    .viz-bfs-hidden-xs{
        display:none;
    }
} 
@media (min-width:516px) and (max-width: 768px) {
    .viz-bfs-hidden-sm{
        display:none;
    }

    .buttonBildung {
        width: 20%;
    }
}
@media (min-width:769px) and (max-width: 991px) {
    .viz-bfs-hidden-md{
        display:none;
    }
}
@media (min-width: 992px) {
    .viz-bfs-hidden-lg{
        display:none;
    }
}