html {
  font-size: 14px;
}

body {
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	/* line-height: 17px; */
	/* font-weight: 300; */
  padding: 0px;
  overflow-x: hidden;

}

.box {
  width: 100%;
  /* max-width: 700px; */
  min-width: 350px;
  height: 100%;
  min-height: 450px;
}

.graphic {
    /* max-width: 700px; */
    min-width: 350px;
    height: 100%;
    min-height: 450px;
}

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

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

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

.topLine, .bottomLine {
  stroke-width: 0.2pt;
  stroke: black;
}

.text_note {
  /* display: block;
  width: 85%; */
  font-size: 0.80em;
  font-weight: 300;
  font-family: 'Roboto';
}

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

.status, .experimentalStatistic {
  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;
}

/* ----- Tooltip ------ */

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

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

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

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

.yAxis line {
  stroke: #D5D5D5;
}

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

/* .xAxis2 line {
  stroke: #fff;
} */



/* .xAxis2 {
  text-anchor: start !important;
} */

/* @media (min-width:450px) {
 
    .chartSVG {
      width: 47% !important;
    } 
} */