.barUp {
  fill: #000002;
  height: 15px;
  transition: fill .3s ease;
  cursor: pointer;
  font-family: Helvetica, sans-serif; }
  .barUp text {
    fill: #000002; }

.barDown {
  fill: #000001;
  height: 15px;
  transition: fill .3s ease;
  cursor: pointer;
  font-family: Helvetica, sans-serif; }
  .barDown text {
    fill: #000001; }

.barSingle {
  fill: #000004;
  height: 15px;
  transition: fill .3s ease;
  cursor: pointer;
  font-family: Helvetica, sans-serif; }
  .barSingle text {
    fill: #000003; }

.chart:hover .barUp,
.chart:focus .barUp {
  fill: #C6C6C6; }

.chart:hover .barDown,
.chart:focus .barDown {
  fill: #C6C6C6; }

/*.barUp:hover,
.barUp:focus {
  fill: red !important;
  
  text {
    fill: red;
  }
}

.barDown:hover,
.barDown:focus {
  fill: red !important;
  
  text {
    fill: red;
  }
}*/
figcaption {
  color: #8A9BA6;
  margin: 15px;
  height: 60px;
  font-size: 11px; }

.barChartTitle {
  color: #8A9BA6;
  font-size: 14px;
  line-height: 20px; }

.barLegend {
  border-top: 2px solid #cbd0d4;
  overflow: hidden;
  line-height: 1;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 14px; }

.barChartLegend {
  color: #000000;
  font-family: Helvetica, sans-serif; }

.barChartIcon {
  font-size: 22px;
  color: #000000; }

.barChartLabel {
  font-family: Helvetica, sans-serif;
  fill: #8A9BA6; }

.barChartValue {
  font-family: Helvetica, sans-serif;
  font-size: 10px;
  fill: #000000; }

.barChartNegativeValue {
  font-family: Helvetica, sans-serif;
  font-size: 10px;
  fill: #000005; }

.verticalLine {
  stroke: #cbd0d4;
  stroke-width: 1px; }