/** styling for the charts - all charts */

.y.axisRight text {
    fill: orange;
}
.y.axisLeft text {
    fill: steelblue;
}
.axis path,
.axis line { /* also see the code. */
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
.bar1 {
  fill: #004E79;
}

.bar1:hover {
  fill: #4D83A1;
}

.bar2 {
  fill: #F0F8FF;
  fill: #fff;
  fill-opacity: 0.0;
}

.bar2:hover {
  fill: #F8F8FF;
  fill: #fff;
  fill-opacity: 0.4;
  cursor: pointer;
}


.x.axis path {
  display: none;
}

.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently
.d3-tip {
    font-weight: 400;
}
*/

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}

.lengthy-wrapper > .row {
  overflow-x: auto;
}
.lengthy-wrapper > .row > .col-xs-8, .lengthy-wrapper > .row > .col-sm-9 {
  display: inline-block;
  float: none;
  white-space: nowrap;
}

.totalGraph {
    text-align: center;
    position: relative;
}

/* experimental and hidden canvas, currently unused.*/
.treeGraph {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.levelBtn {
  -webkit-border-radius: 24;
  -moz-border-radius: 24;
  border-radius: 24px;
  font-family: Courier New;
  color: #ffffff;
  font-size: 20px;
  background: #3498db;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  width: 50%;
  text-align: center;
  margin: 0 auto;
}

.col-xs-6 .levelBtn {
    width: 100%;
    -webkit-border-radius: 6;
    -moz-border-radius: 6;
    border-radius: 6px;
    padding: 5px 10px 5px 10px;
    font-size: 16px;

}

.levelBtn:hover, .levelBtn.selected {
  background: #3cb0fd;
  text-decoration: none;
}

.levelBtn.selected {
    font-weight: 700;
}
.centerMe {
    transform: translateY(45%);
}

/** speech bubbles*/
.speech-bubble {
    position: relative;
    background: #00aabb;
    border-radius: .4em;
}

.speech-bubble:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top-color: #00aabb;
    border-bottom: 0;
    border-left: 0;
    margin-left: -25px;
    margin-bottom: -50px;
}