#chartdiv {
  width: 100%;
  height: 500px;
}
div.tooltip {
color: white;
 position: absolute;
background-color: black;
background-image: linear-gradient(
        to right,
        grey,
        purple
      );
opacity: 0.2;
border-radius: 40px;
text-align: center;
padding: 10px;
font-size: 12px;
border: 4px solid #555;
pointer-events: none;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
}


body {
  font-family: 'Roboto Condensed', sans-serif;
   /* font: 14px/16px "Helvetica Neue", Helvetica, Arial, sans-serif; */
}

h1, h2 {
   font-family: 'Roboto Condensed', sans-serif;
   text-align: center;
   font-weight: normal;
}
h1{
 font-family: 'Roboto Condensed', sans-serif;
 font-size: 30px;
 margin: 20px;
 color: #1a1a1a;
}
h2{
 font-size: 18px;
 color: #999;
 margin: 15px;
}

.states {
 fill: #ddd;
 stroke: #fff;
}

.symbol{
   fill: #33aa89;
   stroke: #fff;
   opacity: 0.65;
   stroke-width: .5px;
}

.symbol:hover {
   stroke: #000;
   fill-opacity: 1;
   stroke-width: 1px;
   stroke-width: .5px;
}

.symbol--gain{
   fill: #67a9cf;
   stroke: #fff;
   stroke-width: .5px;
   fill-opacity: .65;
   stroke-opacity: 1;
}
.symbol--loss{
   fill: #ef8a62;
   stroke: #fff;
 stroke-width: .5px;
   fill-opacity: .65;
   stroke-opacity: 1;
}

#label{
 position: absolute;
 font-family: 'Roboto Condensed', sans-serif;
 bottom: 511px;
   left: 270px;
   color: #333;
 font-size: 30px;
}
#label p{
 margin: 0;
}

#source{
   color: #999;
   font-size: 12px;
/*	position: relative;*/
 text-align: center;
/*	 margin-left: 60px;*/
   padding-top: 0px; 
   padding-bottom: 2px;
}

#slider {
 position: relative;
 text-align: center;
 width: 1000px;
}

.d3-tip {
   line-height: 1;
   padding: 12px;
   font-size: 12px;
   background: rgba(43,43,43, 0.8);
   color: #fff;
   border-radius: 20px;
 }

/*
#slider {
    position: fixed;
    left: 300px;
    bottom: 520px;
    width: 600px;
} 
*/