body{
  font-family: sans-serif;
  margin: 0px;
  width: 960px;
  height: 500px;
}

.graph {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.axis, text{
  pointer-events: none;
}
.axis line{
  stroke: #999;
}
.axis text{
  fill: #999;
}
.domain{
  display: none;
}

svg{
  overflow: visible;
}

text{
/*  text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;*/
}

.voronoi{
  stroke: #fff;
  fill-opacity: .3;
  stroke-width: .5;
}

.voronoi.hovered{
  fill-opacity: .5;
  stroke-width: 1;
  stroke: #000;
}

circle{
  cursor: pointer;
}
circle.hovered{
  stroke-width: 4;
}




.slider{
  margin: 0px auto;
  margin-top: 20px;
  display: block;
  text-align: center;
}

input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  top: -3px;
}

input[type='range']::-webkit-slider-runnable-track{
  background: #eee;
  height: 5px;
  outline: 1px solid #999;
}
input[type='range']::-moz-range-track {
  background: #eee;
  height: 5px;
  outline: 1px solid #999;
}

input[type='range']::-webkit-slider-thumb{
  appearance: none;
  margin-top: -4px;
  background-color: #000;
  height: 13px;
  width: 5px;
/*  border-radius: 10px;*/
  position: relative;
  z-index: 1000;
}
input[type='range']::-moz-range-thumb {
   appearance: none;
   margin-top: -4px;
   background-color: #000;
   height: 13px;
   width: 5px;
/*   border-radius: 10px;*/
   position: relative;
   z-index: 1000;
}
input[type='range']:hover::-webkit-slider-runnable-track{
  outline: 1px solid #000;
}
input[type='range']:hover::-moz-range-track {
  outline: 1px solid #000;
}