code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}

.zoom {
  cursor: move;
  fill: none;
  pointer-events: all;
}

.line-mark {
  fill: none;
  stroke: #ff0000;
  stroke-width: 3;
}

circle.circle-mark {
  fill: red;
}

circle.circle-mark.translucent {
  fill: url(#circle-mark-gradient);
  opacity: 0.2;
}

.chart-container {
  overflow: hidden;
  display: inline-block;
  grid-area: chart;
  width: 100%;
  height: 100%;
}

.chart .axis rect.background {
  transition: opacity .25s;
}

svg.chart {
  width: 100%;
  height: 100%;
}

canvas.webgl-plots {
  pointer-events: none;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

foreignObject.webgl-container {
  position: relative;
  z-index: -1; /* chrome doesn't respect order layering with other svg elements, 
                  but it will use the z-index to place webgl entirely in back */
}

body {
  overscroll-behavior: none;
}