/* Necessary for applying color to Y-axis labels and tickmark labels */
text {
  fill: inherit;
}

.chart-title {
  font-size: 20px;
  color: #1a1a1a;
  margin-top: 45px;
  margin-bottom: 10px;
  letter-spacing: -.02em;
  font-weight: 700;
}

.chart-subtitle {
  font-size: 16px;
  color: #1a1a1a;
  margin-bottom: 10px;
  font-weight: 400;
  margin-top: 0px;
}

.y-axis-label {
  font-size: 14px;
  fill: #1a1a1a;
  font-weight: 500;
}

.y .tick text.two-lines {
  font-size: 12px;
}

.y .tick text.title-subtitle tspan:last-of-type {
  font-size: 10px;
}

.dark .y-axis-label {
  fill: #eee;
}

.tick-label {
  font-size: 11px;
  fill: #1a1a1a;
  font-weight: 500;
}

.dark .tick-label {
  fill: #eee;
}

.axis-label {
  font-size: 11px;
  text-anchor: middle;
  fill: #1a1a1a;
  font-weight: 600;
}

.dark .axis-label {
  fill: #eee;
}

.axis-label tspan {
  text-anchor: middle;
}

.bar-label {
  text-anchor: end;
  fill: #fff;
  font-size: 11px;
  font-weight: 500;
}

.dark .bar-label {
  fill: #000;
}

.outer-bar-label {
  fill: #1a1a1a;
  font-size: 11px;
  font-weight: 500;
}

.dark .outer-bar-label {
  fill: #fff;
}

.chart-footnote {
  margin-top: 10px;
  font-size: 12px;
  color: #999;
  line-height: 1.25em;
  font-weight: 400;
}

.dark .chart-footnote {
  color: #666;
}

.axis path {
  fill: #999;
  stroke: #999;
  stroke-width: 1px;
  shape-rendering: crispEdges;
}

.dark .axis path {
  fill: #666;
  stroke: #666;
}

.axis line {
  fill: none;
  stroke: #ddd;
  stroke-width: 1px;
  shape-rendering: crispEdges;
}

.dark .axis line {
  stroke: #222;
}

.milestone {
  stroke-width: 1;
  stroke-dasharray: 3, 3;
  stroke-dashoffset: 0;
}

.legend {
  float: right;
  margin-right: 20px;
  text-align: right;
}

.legend-entry {
  display: inline-block;
  margin-right: 0;
  margin-bottom: 10px;
}

.legend-square {
  width: 10px;
  margin-top: 2px;
  height: 10px;
  float: left;
  margin-right: 5px;
  margin-left: 20px;
}

.legend-text {
  float: left;
  margin-right: 0;
  font-size: 11px;
  font-weight: 500;
  color: #1a1a1a;
}

.dark .legend-text {
  color: #eee;
}

/* Bar colors */
.green100 {
  fill: #76b900;
  background-color: #76b900;
}

.dark .green100 {
  fill: #76b900;
  background-color: #76b900;
}

.green80 {
  fill: #91c733;
  background-color: #91c733;
}

.dark .green80 {
  fill: #5e9400;
  background-color: #5e9400;
}

.green60 {
  fill: #add566;
  background-color: #add566;
}

.dark .green60 {
  fill: #476f00;
  background-color: #476f00;
}

.green40 {
  fill: #c8e399;
  background-color: #c8e399;
}

.dark .green40 {
  fill: #3b5d00;
  background-color: #3b5d00;
}

.competitor-blue {
  fill: #7aaad5;
  background-color: #7aaad5;
}

.dark .competitor-blue {
  fill: #004476;
  background-color: #004476;
}

.grey1 {
  fill: #8c8c8c;
  background-color: #8c8c8c;
}

@media only screen and (max-width: 650px) {
  /* Hiding ticks so they don't run into eachother */
  .mobile-hide {
    visibility: hidden;
  }
}