body {
  min-width: 760px;
}

.parallel-lines-filter {
  display: block;
}

.parallel-lines-filter svg,
.parallel-lines-filter canvas {
  font: 10px sans-serif;
  position: absolute;
}

.parallel-lines-filter canvas {
  opacity: 0.9;
  pointer-events: none;
}

.axis .title {
  font-size: 10px;
  transform: rotate(-21deg) translate(-5px,-6px);
  fill: #222;
}

.axis line,
.axis path {
  fill: none;
  stroke: #eee;
  stroke-width: 1px;
}

.axis .tick text {
  fill: #222;
  opacity: 0;
  pointer-events: none;
}

.axis.id .tick text {
  opacity: 0.2;
  font-size: 6px;
  pointer-events: all;
}

.axis.id .tick:hover text {
  opacity: 1;
  font-size: 10px;
}

.axis.id .tick:nth-of-type() text {
  opacity: 1;
  font-size: 10px;
}

.axis:hover line,
.axis:hover path,
.axis.active line,
.axis.active path {
  fill: none;
  stroke: #222;
  stroke-width: 1px;
}

.axis:hover .title {
  font-weight: bold;
}

.axis:hover .tick text {
  opacity: 1;
}

.axis.active .title {
  font-weight: bold;
}

.axis.active .tick text {
  opacity: 1;
  font-weight: bold;
}

.brush .extent {
  fill-opacity: .3;
  stroke: #fff;
  stroke-width: 1px;
}

pre {
  width: 100%;
  height: 300px;
  margin: 6px 12px;
  tab-size: 40;
  font-size: 10px;
  overflow: auto;
}

.filter {
  min-height: 400px;
}