@font-face {
  font-family: "futuraltbold";
  src: url("fonts/futuralt-bold.ttf") format("truetype");
};

.legend2{

}
 
@font-face {
    font-family: "futuraltheavy";
    src: url("fonts/futuralt-heavy.ttf") format("truetype");
};

.legend2{

}

.normalheight {
  height: 100vh;
}

.halfheight {
  height: 70vh;
}

.chart01 {

  width: 100%;
  font-family: "futuraltheavy" !important;
  font-size: 1rem;
}

.chart01 g[aria-label="Legend"] {
  font-family: "futuraltbold" !important;
  font-size: 0.8rem;
}

.tabs-header 
{
  text-align: center;
  display: flex;
  justify-content: center;
  transform: translateY(1rem);
  z-index: 5;
}
.chart-tabs-head
{
  display : flex ; 
  justify-content: center;

}
.chart-tabs-head-tab.active {
  background-color: #ffc200 ;
}
[data-tab]{
  display : none ;
  min-height: 400px;
}
.active[data-tab] {
  display: block;
} 
a.chart-tabs-head-tab {
  font-size: 0.8rem;
  border: 1px solid #ccc; 
  padding: 0.5rem 1.3125rem 0.5rem 1.3125rem;
  border-bottom: 0;
  border-top-right-radius: 9px;
  border-top-left-radius: 9px;
} 

.legend1 {
  height: 6rem;
  margin-top: 1rem;
  margin-bottom: 2rem;
  transform:  translate(-60%,-200%)
}

@media only screen and (max-width: 767px) {
  .legend1 { 
    transform: translate(-11.5rem,-20rem);
    position: absolute;
  }
}

@media only screen and (max-width: 360px) {
  .legend1 {  
    position: relative;
    transform: translate(0);
  }
}

.legend2 {
  height: 6rem;
 margin-top: 1rem;
}

.grandtunismap {
  height:  85vh
}

@media only screen and (max-width: 767px) { 
  .grandtunismap {
    height:  50vh
  }

  .left-mobile{
    transform: translateX(-2.5rem);
  }
  .padding-0-mobile 
  {
    padding : 0
  }
}
.chart-title {
  font-family: Raleway;
  font-weight: bold;
  font-size: 1.3rem;
}