.dataviz {
  /* Keep the data vizualization from floating off the side.
   * It should instead fill the content area and "break the grid" like a large
   * image would. */
  clear: both;
  width: 100%;

  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 20px;

}

@media (min-width: 1050px) { /* 1024 + 13 + 13 */
  .dataviz {
    padding: 13px;
    /* This causes horizontal scrolling at smaller sizes. */
  }
}

.dataviz p,
.dataviz h1, .dataviz h2, .dataviz h3, .dataviz h4, .dataviz h5, .dataviz h6 {
  float: none;
  color: black;
  opacity: .8;
}

#dataviz-chart {
  font-family: Baskerville-eText, Baskerville, Garamond, serif;
}

#chart {
  width: 90%;
float:left;
position:relative;

}

#pluslegend {
height: 100%;

}

q {
    quotes: none;
}

q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

.clearfix {
    clear: both;
}

#main-wrapper {
    width: 1090px;
}

#filters {
    margin-left: 4%;
}

#filters .demo {
    float: left;
    width: 10%;
    height: 10%;
    text-align: center;
    padding: 10px 0;
    cursor: pointer;
    border-top: 4px solid #fff;
    margin-left: 2px;
}

#filters .demo:hover {
    background: #bbe6e9;
}

#filters .demo.current {
    border-bottom: 1px solid #1fadb6;
    background: #d2eef0;
    shape-rendering: crispEdges;
}


#drugs {
   width: 10%;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
  flex-grow: 1;
  flex-wrap: wrap;
  justify-content: center;
  float:right;
}

    #drugs span {
      display: inline-block;
      vertical-align: middle;

      line-height: normal;
    }
.drug {

    text-align: center;

    margin-left: 2px;

}


#Cannabis {
    border-left: 3px solid #004853;
}

#Unspecified {
    border-left: 3px solid #1c9099;
}


#Cocaine {
    border-left: 3px solid #8ACECF;
}

#Synthetic {
    border-left: 3px solid #F2C94E;
}


#Methadone {
    border-left: 3px solid #00B9BD;
}


#Opioids {
    border-left: 3px solid #FF7577;
}


#Heroin {
    border-left: 3px solid #ffb875;
}

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

.axis {
    pointer-events: none;
}

.y.axis .domain {
    display: none;
}

path.layer {
      opacity: .8;
    stroke: #F2F2F2;
    stroke-opacity: .7;
    cursor: pointer;


}

path.layer:hover {
    opacity: 1;
    stroke: white;
    stroke-opacity: 1;
    stroke-width:2px;

}

#currcause {

    text-anchor: middle;
}

#currpct {

    text-anchor: middle;
}

#reset {
    text-anchor: middle;
}

#currmeta {
    text-anchor: middle;
}

#previous {
    text-anchor: end;
}

.navbutton {
    cursor: pointer;
    fill: #1fadb6;
}

.navbutton:hover {

  fill: #004853;
}