.plottable-colors-0 {
  background-color: #5279c7; /* INDIGO */
}

.plottable-colors-1 {
  background-color: #fd373e; /* CORAL_RED */
}

.plottable-colors-2 {
  background-color: #63c261; /* FERN */
}

.plottable-colors-3 {
  background-color: #fad419; /* BRIGHT_SUN */
}

.plottable-colors-4 {
  background-color: #2c2b6f; /* JACARTA */
}

.plottable-colors-5 {
  background-color: #ff7939; /* BURNING_ORANGE */
}

.plottable-colors-6 {
  background-color: #db2e65; /* CERISE_RED */
}

.plottable-colors-7 {
  background-color: #99ce50; /* CONIFER */
}

.plottable-colors-8 {
  background-color: #962565; /* ROYAL_HEATH */
}

.plottable-colors-9 {
  background-color: #06cccc; /* ROBINS_EGG_BLUE */
}

svg.plottable {
  display : block; /* SVGs must be block elements for width/height calculations to work in Firefox. */
}

.plottable .bounding-box {
  /* Invisible pink bounding-box to allow for collision testing */
  fill: pink;
  visibility: hidden;
}

.plottable .label text {
  font-family: "Helvetica Neue", sans-serif;
  fill: #32313F;
}

.plottable .bar-label-text-area text {
  font-family: "Helvetica Neue", sans-serif;
  font-size: 14px;
}

.plottable .light-label text {
  fill: white;
}

.plottable .dark-label text {
  fill: #32313F;
}

.plottable .axis-label text {
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 1px;
  line-height: normal;
  text-transform: uppercase;
}

.plottable .title-label text {
  font-size: 20px;
  font-weight: bold;
}

.plottable .text-label-vertical {
  writing-mode: tb;
}

.plottable .axis line.baseline {
  stroke: #CCC;
  stroke-width: 1px;
}

.plottable .axis line.tick-mark {
  stroke: #CCC;
  stroke-width: 1px;
}

.plottable .axis text {
  fill: #32313F;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 12px;
  font-weight: 200;
  line-height: normal;
}

.plottable .bar-plot .baseline {
  stroke: #999;
}

.bar-plot .render-area rect.not-hovered {
  opacity: 0.5;
}

.plottable .gridlines line {
  stroke: #3C3C3C; /* hackhack: gridlines should be solid; see #820 */
  opacity: 0.25;
  stroke-width: 1px;
}

.plottable .drag-box {
  fill: aliceblue;
  opacity: .7;
  stroke: #C0C8FF;

}

.plottable .legend text {
  font-family: "Helvetica Neue", sans-serif;
  font-size: 12px;
  font-weight: bold;
  line-height: normal;
}

.plottable .legend .toggled-off circle {
  fill: #d3d3d3;
}

.plottable .plot.toggled-on {
  visibility:visible;
}

.plottable .plot.toggled-off {
  visibility:hidden;
}