/*
  Don't change this file unless you know what you're doing. If you file an issue
  on GitHub and we find out it was all caused because you modified this file,
  we'll release the kraken and you, your beloved ones, your postman, the guy who
  delivers pizza to your house, everyone.
  Seriously, the chart's styling is easier to change than in v1. Don't make us
  regret that decision.
                                                                    lorem--ipsum
*/
.chart-legend {
  margin-left: 20px; }
  .chart-legend .item {
    cursor: pointer;
    font-family: sans-serif;
    height: 16px;
    font-size: 0.8em;
    font-weight: 100;
    display: inline-block;
    margin-right: 10px; }
    .chart-legend .item > * {
      vertical-align: middle;
      display: inline-block; }
    .chart-legend .item > .legend-label {
      height: 16px;
      line-height: 17px; }
    .chart-legend .item > .icon {
      width: 16px;
      border-radius: 50%;
      height: 16px;
      margin-right: 5px;
      background-repeat: no-repeat;
      background-position: 50% 25%; }
    .chart-legend .item.legend-hidden {
      opacity: 0.4; } 
    .chart-legend .item.column > .icon {
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' style='fill: white;' width='10' height='10'><rect y='2' width='2' height='8'/><rect x='4' y='5' width='2' height='5'/><rect x='8' y='3' width='2' height='7'/></svg>"); }
    .chart-legend .item.dot > .icon {
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' style='fill: white;' width='10' height='10'><circle cx='5' cy='6' r='2'/></svg>"); }
    .chart-legend .item.dashed-line > .icon {
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' style='fill: white;' width='10' height='10'>\a         <g style=\"stroke: white; fill: none; stroke-dasharray: 4px,2px;\">\a           <path d='M0,6 L10,6'/>\a         </g>\a       </svg>"); }
    .chart-legend .item.line > .icon {
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' style='fill: white;' width='10' height='10'>\a         <g style=\"stroke: white;\">\a           <path d='M0,6 L10,6'/>\a         </g>\a       </svg>"); }
    .chart-legend .item.area > .icon {
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' style='fill: white;' width='10' height='10'><polygon points='0,10 2.428,3 5,6 7.625,5 10,10 10,10 0,10'/></svg>"); }

.tooltip-line {
  stroke: grey;
  stroke-width: 1;
  shape-rendering: crispEdges; }

.tooltip-dot {
  stroke-width: 2px;
  fill: white; }

.chart-tooltip {
  position: absolute;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-color: white;
  z-index: 100;
  box-shadow: 1px 1px 2px rgba(61, 61, 61, 0.5);
  padding: 5px 10px;
  border-radius: 1px;
  font-family: sans-serif;
  font-weight: 100; }
  .chart-tooltip > .abscissas {
    margin-bottom: 5px;
    font-size: 0.7em;
    white-space: nowrap; }
  .chart-tooltip .tooltip-item {
    font-size: 0.8em;
    white-space: nowrap; }
    .chart-tooltip .tooltip-item:not(:last-child) {
      margin-bottom: 0.2em; }
    .chart-tooltip .tooltip-item > * {
      display: inline-block; }
      .chart-tooltip .tooltip-item > *:not(:last-child) {
        margin-right: 0.4em; }
    .chart-tooltip .tooltip-item .color-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%; }
    .chart-tooltip .tooltip-item .y-value {
      font-weight: 500; }

.chart {
  position: relative;
  box-sizing: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }
  .chart .axis {
    /*font: 10px Roboto;*/
    font: 10px Roboto;
    shape-rendering: crispEdges; }
    .chart .axis.x2-axis {
      display: none; }
    .chart .axis > path {
      fill: none;
      stroke: black; }
    .chart .axis > .tick > text {
      fill: black; }
    .chart .axis > .tick > line {
      stroke: black; }
  .chart .grid .tick > text {
    display: none; }
  .chart .grid .tick > line {
    stroke: #eee;
    stroke-width: 1;
    shape-rendering: crispEdges; }
  .chart .dot-series circle {
    fill: white;
    stroke-width: 2px; }
  .chart .line-series path {
    stroke-width: 1px; }
  .chart .column-series {
    fill-opacity: 0.3; }
  .chart .area-series {
    opacity: 0.3; }
  .chart .chart-brush {
    fill: rgba(166, 166, 166, 0.5); }
  .chart .hline {
    shape-rendering: crispEdges;
    stroke-width: 1px; }