// chart containers
.pre-load .chart{
  display: none;
}
.chart-wrapper{
  float: left;
  overflow: hidden;
  position: relative;
}
.chart-wrapper ~ .chart-wrapper{
  border-top: 4px solid @gray-lightest;
}
.chart-grid .chart-wrapper:nth-child(2n+1){
  border-right: 4px solid @gray-lightest;
}
.chart-grid .chart-wrapper{
  border-bottom: 4px solid @gray-lightest;
}
.dark .chart-wrapper ~ .chart-wrapper{
  border-top: 4px solid @gray-darkest;
}
.dark.chart-grid .chart-wrapper:nth-child(2n+1){
  border-right: 4px solid @gray-darkest;
}
.dark.chart-grid .chart-wrapper{
  border-bottom: 4px solid @gray-darkest;
}
.chart-grid .chart-wrapper.bottom-row,
.dark.chart-grid .chart-wrapper.bottom-row{
  border-bottom: none;
}
.chart-grid .chart-wrapper ~ .chart-wrapper,
.dark.chart-grid .chart-wrapper ~ .chart-wrapper{
  border-top: none;
}
.chart-plot-outer-container{
  height: 360px;
  font-size: 0;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.chart-plot-inner-container{
  bottom: 0;
  left: @y-axis-w;
  position: absolute;
  right: 0;
  top: 0;
}
.chart-height{
  bottom: @x-axis-h;
  position: absolute;
  top: @selected-value-h-small;
}
.chart-plot{
  width: 100%;
  z-index: 2;
}
.zero-line-container{
  left: 0;
  width: 100%;
}
.zero-line{
  border-top: 1px solid @gray-lighter;
  left: 0;
  margin-top: -1px;
  position: absolute;
  width: 100%;
}
.zero-line.hidden{
  display: none;
}
.dark .zero-line{
  border-top: 1px solid @gray-darker;
}
.x-axis{
  border-top: 1px solid @gray-lighter;
  bottom: 0;
  color: @gray-dark;
  font-size: @fontSize-smallest;
  height: @x-axis-h;
  left: 0;
  padding: 15px 8px 0;
  position: absolute;
  width: 100%;
  z-index: 2;
}
.dark .x-axis{
  border-top: 1px solid @gray-darker;
  color: @gray;
}
.x-beginning{
  transition: all 0.4s ease;
  float: left;
  opacity: 1;
  padding: 0 30px 0 0;
}
.x-end{
  transition: all 0.4s ease;
  float: right;
  opacity: 1;
  padding: 0 0 0 30px;
}
.hidden.x-beginning,
.hidden.x-end{
  transition: all 0.2s ease;
  opacity: 0;
}


// SVG elements
.line{
  fill: none;
  opacity: 0.9;
  stroke-width: 1.5px;
}
.line.focused{
  opacity: 1;
  stroke-width: 2.5px;
}
.column,
.selected-column,
.show-columns .line,
.show-columns .end-dot,
.show-columns .selected-dot{
  display: none;
}
.column{
  opacity: 0.9;
}
.column.selected{
  opacity: 1;
}
.show-columns .column{
  display: inline;
}


@media screen and (min-width: @width-mobilePortrait) {
  .chart-plot-outer-container{
    height: 420px;
  }
  .x-axis{
    font-size: @fontSize-smaller;
  }
  .line{
    stroke-width: 2px;
  }
  .line.focused{
    stroke-width: 3px;
  }
}


@media screen and (min-width: @width-tablet) {
  .chart{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding-right: @sidebar-width-small;
  }
  .chart::after{
    border-top: 1px solid @gray-lighter;
    bottom: @x-axis-h;
    content: "";
    display:block;
    left: 0;
    position: absolute;
    width: 100%;
  }
  .dark .chart::after{
    border-top: 1px solid @gray-darker;
  }
  .chart-plot-outer-container{
    border: none;
    height: 100%;
  }
  .x-axis,
  .dark .x-axis{
    border-top: none;
  }
}


@media screen and (min-width: @width-netbook) {
  .chart{
    padding-right: @sidebar-width-large;
  }
  .chart-height{
    top: @selected-value-h-large;
  }
  .line{
    stroke-width: 2.5px;
  }
  .line.focused{
    stroke-width: 3.5px;
  }
}

@media screen and (min-width: @width-netbook) and (max-width: @width-desktop){
  .chart-grid .chart{
    padding-right: @sidebar-width-small;
  }
  .chart-grid .chart-height{
    top: @selected-value-h-small;
  }
}
