html {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  color: #333;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1px;
}

.grid {
  fill: none;
  shape-rendering: crispEdges;
  stroke: #eee;
  stroke-width: 1px;
}

.area {
  fill: steelblue;
  opacity: 0.25;
}

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

.hover {
  shape-rendering: crispEdges;
  fill: none;
  stroke: lightgrey;
  stroke-width: 1px;
  opacity: 0;
  transition: opacity 0.2s;
}

.circle {
  fill: steelblue;
  transition: opacity 0.2s;
  /*opacity: 0;*/
}

.cross {
  fill: none;
  stroke: steelblue;
  stroke-width: 2px;
}

.zero {
  fill: none;
  pointer-events: all;
  stroke-width: 2px;
}





.axis text {
  font: 10px sans-serif;
}

.axis line,
.axis circle {
  fill: none;
  stroke: #777;
  stroke-dasharray: 1,4;
}

.axis :last-of-type circle {
  stroke: #333;
  stroke-dasharray: none;
}