.waterfall-container {
    width:100%;
    height:400px;
}   
 .waterfall {
    width:100%;
    height:100%;
}
.waterfall .bar.total rect {
  fill: #b18849;
}

.waterfall .bar.positive rect {
  fill: #8fb082;
}
.waterfall .bar.negative rect {
  fill: #e28c92;
}

.waterfall .bar line.connector {
  stroke: grey;
  stroke-dasharray: 3;
}

.waterfall .bar text {
  font-size: 1em;
  font-weight:400;
  text-anchor: middle;
  fill:#666;
}

.waterfall .axis text {
  font-size: 10px;
}

.waterfall .axis path,
.waterfall .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

@media screen and (max-width: 480px) {
    .waterfall .bar text {
      font-size: 0.6em;
      font-weight:400;
    } 
    .waterfall .axis text {
      font-size: 6px;
    }
}