/**
 * CHART CSS
 */
.graph-container {
  font-family: 'Open Sans', sans-serif;
}

#graph1 {
}

#graph2 {
  padding-top: 60px;
}

.legend-base {
  /* width: 130px;
  height: 90px; */
}


.power,
.mw,
.title {
  color: #000;
}


.power {
  display: inline-block;
  font-weight: 800;
  line-height: 100%;
}

tspan.mw {
  display: inline-block;
  font-weight: 800;
}

.title {
  display: block;
  color: #333;
  font-weight: 300;
}



.center-text .totalPower {
  margin: 0 auto;
  color: #000;
  font-weight: 800;
  letter-spacing: -2px;
}

.center-text .mw {
  font-weight: 800;
}

.legend-text {
  position: absolute;
  font-weight: 200;
  text-align: center;
  line-height: 120%;
  display: none;
}

.center-text .text tspan {
  font-weight: 200;
  text-align: center;
}

.single-legend {
  display: block;
  position: absolute;
  text-align: left;
  padding-left: 5px;
}
.single-legend .title {
  display: block;
  color: #333;
  font-weight: 300;
  line-height: 100%;
}
.single-legend .mw {
  display: inline-block;
  font-weight: 800;
}


@media (max-width:767px) {

  #graph1 .single-legend {
    padding-left: 15px;
  }

  #graph2 {
    padding: 60px 8%;
  }

}


@media (max-width:480px) {

  #graph1 .single-legend {
    padding-left: 5px;
  }

  #graph2 {
    padding: 60px 0;
  }

}