.timelines-chart {

  text-align: center;

  /* Cancel selection interaction */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  .axises {
    line, path {
      stroke: #808080;
    }

    .x-axis {
      font: 12px sans-serif;
    }

    .x-grid line {
      stroke: #D3D3D3;
    }

    .y-axis, .grp-axis {
      line, path {
        stroke: none;
      }
      text {
        fill: #2F4F4F;
      }
    }
  }

  line.x-axis-date-marker {
    stroke-width: 1;
    stroke: #293cb7;
    fill: "none";
  }

  .series-group {
    fill-opacity: 0.6;
    stroke: #808080;
    stroke-opacity: 0.2;
  }

  .series-segment {
    stroke: none;
  }

  .series-group, .series-segment {
    cursor: crosshair;
  }

  .legend {
    font-family: Sans-Serif;

    .legendText {
      fill: #666;
    }
  }

  .reset-zoom-btn {
    font-family: sans-serif;
    fill: blue;
    opacity: .6;
    cursor: pointer;
  }
}

.brusher {
  .grid-background {
    fill: lightgrey;
  }

  .axis path {
    display: none;
  }

  .tick text {
    text-anchor: middle;
  }

  .grid {
    line, path {
      stroke: #fff;
    }
  }
}

.chart-zoom-selection, .brusher .brush .selection {
  stroke: blue;
  stroke-opacity: 0.6;
  fill: blue;
  fill-opacity: 0.3;
  shape-rendering: crispEdges;
}

.chart-tooltip {
  color: #eee;
  background: rgba(0,0,140,0.85);
  padding: 5px;
  border-radius: 3px;
  font: 11px sans-serif;
  z-index: 4000;

  &.group-tooltip {
    font-size: 14px;
  }

  &.line-tooltip {
    font-size: 13px;
  }

  &.group-tooltip, &.line-tooltip {
    font-weight: bold;
  }

  &.segment-tooltip {
     text-align: center;
  }
}