.health-chart {
  &.dragging {
      cursor: move; /* fallback if grab cursor is unsupported */
      cursor: grab;
      cursor: -moz-grab;
      cursor: -webkit-grab;
  }

  &.dragging:active {
      cursor: grabbing;
      cursor: -moz-grabbing;
      cursor: -webkit-grabbing;
  }

  .g-background {
    x: 5px;
    rx: 5;
    ry: 5;
    fill: white;
    width: calc(100% - 10px);
  }

  .ruler-label {
    fill: $background;
    font-size: 12px;
    line-height: 12px;
  }

  .ruler-line {
    stroke-width: 1;
    stroke-dasharray: 3, 3;
    stroke: $background;
  }

  .tool-tip {
    font-weight: bold;
    font-size: 12px;
  }

  svg {
    circle.point {
      fill: $background;
    }

    circle.point:hover {
      stroke-width: 3;
      cursor: pointer;
      fill: $background;
    }

    .marker:hover {
      cursor: pointer;
    }

    .trackable-title {
      margin-top: 21px;
    }

    path.line {
      fill: none;
      stroke-width: 2;
    }

    .vertical-line {
      fill: none;
      stroke: $grey;
      stroke-width: 1;
      shape-rendering: crispEdges;
    }

    .chart {
      .axis {
        path {
          fill: none;
          stroke-width: 1;
          stroke-dasharray: 3,3;
        }
      }
    }

    .timeline {
      .axis {
        path, line {
          fill: none;
          stroke: $grey;
          stroke-width: 1;
          shape-rendering: crispEdges;
        }

        .tick {
          font-size: 10px;
        }
        .tick:hover {
          fill: $grey;
          stroke-width: 2;
          cursor: pointer;
        };
      }
    }
  }
}

.chart-enabler {
  width: 85%;
  margin: 0 auto;
}

.hide-control {
  fill: $dark-shadow;
  font-size: .8em;
  transform: translate(calc(100vw - 35px), -5px);
}