body{
}
html{
    background: #eee;

}

.tooltip {
  top: -1000px;
  position: fixed;
  padding: 7px;
  background: rgba(255, 255, 255, .94);
  border: 1px solid lightgray;
  pointer-events: none;
  width: 300px;
  font-size: 12px;
  font-family: sans-serif;
  line-height: 1.3em;
}
.tooltip-hidden{
  opacity: 0;
  transition: all .3s;
  transition-delay: .1s;
}

.tooltip text{
  text-shadow: none;
  fill: #000 !important;
}

@media (max-width: 590px){
  div.tooltip{
    bottom: -1px;
    width: calc(100%);
    left: -1px !important;
    right: -1px !important;
    top: auto !important;
    width: auto !important;
  }
}

svg{
  overflow: visible;
}

.domain{
  display: none;
}

text{
  /*pointer-events: none;*/
  text-shadow: 0 1px 0 #eee, 1px 0 0 #eee, 0 -1px 0 #eee, -1px 0 0 #eee;
}


.year{
  display: inline-block;
}

.axis text{
  fill: #777;
  font-size: 10px;
}   
.x.axis text{
  font-size: 9px;
}

.year-sm{
  width: 950px;
}

.year-scatter .axis text{
  font-size: 10px;
  fill: #555;
}

.annotation{
  font-family: sans-serif;
  font-size: 10px;
  transition: opacity .3s;
  pointer-events: none;
}
.annotation.hidden{
  opacity: 0;
}

h3{
  max-width: 800px;
}



.sliders{
  position: relative;
  top: 10px;
  padding-top:  5px;
}

.slider-container{
  height: 35px;
}


blockquote{
  border-left: 1px solid #bbb;
  margin: 1.5em 10px;
  padding: 0em 1em;
  margin: 0px;
}

blockquote p{
  margin-bottom: 0px;
}


.full-width{
  width: min(980px, 100vw);
  position: relative;
  /*margin-left: min(-490px, -50vw);*/
  /*margin-right: min(-490px, -50vw);*/
  /*overflow: hidden;*/

  left: 50%;
  transform: translateX(-50%);
  min-height: 550px;
}
.no-min-height{
  min-height: 0px;
}


#notes{
  font-family: sans-serif;
  font-size: 12px;
  opacity: .7;
}

@media (max-width: 800px){
  .annotation.m-hide{
    display: none;
  }
}