style.css

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

h2 {
  /* color: red; */
  font-weight: 400;
  font-size: 20px;
  margin-top: 40px;
}

body{
  font-family: 'Open Sans', sans-serif;
  max-width:650px;
  width:100%;
  display: block;
  margin:auto;
  white-space: normal;
}


.icon{
  display:inline;
  width:20px;
  padding-right:10px;
}
.hover-instruct{
  opacity: .6;
  font-size: 14px;
  text-align: center;
}

circle:hover{
  stroke: black!important;
  stroke-width: 4px!important;
}

.tooltip{
  position: absolute;
}


/* Styles for the slider */
.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #898989;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #7c0202;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #04AA6D;
  cursor: pointer;
}


.active{
  font-weight: bold;
}
.yearLabel{
  text-align:center;
  font-size: 20px;
  margin-bottom:5px;
}

text{
  fill:black;
  font-size: 12px;
}

.overflow-viz{
  overflow: visible;
}

.bars:hover{
  stroke: black!important;
  stroke-width: 3px!important;
}


hr.state-separater {
  border-top:  4px dashed slategrey;
}

.choose {
  color:  grey;
}