.axis-canvas {
    fill:rgb(89, 89, 89);
}

.axis path { stroke-width: 1px; stroke: white;}
.axis .tick line { stroke-width: 1px; stroke: white;}
.axis .tick text { stroke-width: 1px; fill: white;}
.grid {
    fill: none;
    stroke-width: 1px;
    stroke: black;
    stroke-dasharray: 2px;
}

.grid text { display: none; }

.view {
  fill: none;
}

.spinner {
  /* fill: transparent; */
  stroke: gray;
  fill: none;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-dasharray: 50.24;
  -webkit-transform-origin: 10px 0px 0;
  -moz-transform-origin: 10px 0px 0;
  -ms-transform-origin: 10px 0px 0;
  -o-transform-origin: 10px 0px 0;
  transform-origin: 10px 0px 0;
  -webkit-animation: spinner 2s linear infinite;
  -moz-animation: spinner 2s linear infinite;
  -ms-animation: spinner 2s linear infinite;
  -o-animation: spinner 2s linear infinite;
  animation: spinner 2s linear infinite;
}

@keyframes spinner {
  0% {
    transform: rotate(0deg);
    stroke-dashoffset: 10.56;
  }

  50% {
    transform: rotate(720deg);
    stroke-dashoffset: 50.24;
  }

  100% {
    transform: rotate(1080deg);
    stroke-dashoffset: 10.56;
  }
}

.level-select {
  stroke: red;
}

.level-select > text {
  stroke: none;
  fill: red;
}

.level-select-handle {
  stroke: red;
  fill: red;
  cursor: pointer;
}

.current-time {
  stroke: red;
}

.current-time-indicator {
  fill: red
}

.current-time-indicator:hover>text {
  visibility: visible;
}

.current-time-indicator>text {
  font-family: sans-serif;
  font-size: 10px;
  visibility: hidden;
  stroke:none;
  fill:white;
}

.dst-indicator {
  fill: orange
}

.dst-indicator:hover>text {
  visibility: visible;
}

.dst-indicator>text {
  font-family: sans-serif;
  font-size: 10px;
  visibility: hidden;
  stroke: none;
  fill: white;
}

.mouse-events {
  cursor: crosshair;
}

.mouse-x > text {
  -webkit-user-select:none;
  user-select: none;
  font: 10px sans-serif;
}

.brush .handle {
  fill: white;
  stroke: black;
  stroke-width: .5px;
}

.brush .select-rect {
  fill: rgba(111, 111, 111, 0.5);
  stroke: white;
  stroke-width: 1px;
  stroke-dasharray: 5, 2;
}

.mouse-events .overlay {
  visibility: hidden;
}

.mouse-over .mouse-line {
  stroke: white;
  stroke-width: 1px;
  stroke-dasharray: 5, 2, 2, 2;
}

.mouse-over .mouse-per-line {
  fill: white;
}

.legend-entry {
  cursor: pointer;
}