body {
  font-family: 'Roboto', san-serif!important;
  background-color: #0c0c0c!important;
  overflow: hidden!important;
}

text {
  fill: #AAA!important;
  font-size: .758rem;
}

line {
  stroke: #AAA;
}

.svg-responsive {
  display: inline-block;
  position: absolute;
  top: 10px;
  left: 0;
}

g {
  z-index: 1;
}

#chart {
  width: 100%;
  height: 100%;
  display: block;
  max-width: 720px;
  max-height: 300px;
}

#dlabel {
  text-transform: uppercase;
  font-size: .7rem;
}

#legendbox {
  display: flex;
  width: 100%;
}

.domain {
  display: none;
}

.firstline, .secondline, .thirdline, .fourthline {
  fill: none;
  stroke-linecap: round;
  z-index: 10;
  stroke-width: 3px;
  opacity: .8;
}

.firstline {  stroke: #114488;  color: #114488; }
.secondline {  stroke: #F2BE79;  color: #DA8C25; }
.thirdline {  stroke: #556677;  color: #556677; }
.fourthline {  stroke: #2B2B2B;  color: #2B2B2B; }

.overlay {
  fill: none;
  pointer-events: all;
}

.pointer circle {
  fill: #F2BE79;
  stroke: #0c0c0c;
  stroke-width: 5px;
}

.hover-line {
  stroke: #F2BE79;
  stroke-width: 2px;
  stroke-dasharray: 3,3;
}

.tick {
  fill: #AAA;
}

@media (max-width:400px) {
  .svg-con {
    width: 100%;
  }

  #chart {
    max-width: 330px;
    max-height: 280px;
  }

  #legendbox, svg {
    margin-left: 10px;
  }
}