style.css

.tooltip {
    position: absolute;
    z-index: 10;
    visibility: hidden;
    background-color: #E89F65;
    text-align: center;
    padding: 4px;
    border-radius: 4px;
    font-weight: bold;
    color: #B94629;
}

body {
    font-family: 'Roboto', sans-serif;
    color: #333333;
}

svg {
    -webkit-filter: drop-shadow( 0px 3px 3px rgba(0,0,0,.3) );
    filter: drop-shadow( 0px 3px 3px rgba(0,0,0,.25) );
}


polyline{
    opacity: .3;
    stroke: black;
    stroke-width: 2px;
    fill: none;
}


.labelName tspan {
    font-style: normal;
    font-weight: 700;
}


.labelName {
    font-size: 0.9em;
    font-style: italic;
}

body {
  background-color: #F1F3F3    
}
.axis {
	font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #D4D8DA;
  stroke-width: 2px;
  shape-rendering: crispEdges;
}

.line {
  fill: none;
  stroke: #6F257F;
  stroke-width: 5px;
}

.overlay {
  fill: none;
  pointer-events: all;
}

.focus circle {
  fill: #F1F3F3;
  stroke: #6F257F;
  stroke-width: 5px;
}
  
.hover-line {
  stroke: #6F257F;
  stroke-width: 2px;
  stroke-dasharray: 3,3;
}

.legend {
    font-size: 16px;
    font-weight: bold;
    text-anchor: middle;
}

path { 
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
}


.day {
  fill: #fff;
  stroke: #ccc;
}

.month {
  fill: none;
  stroke: #000;
  stroke-width: 2px;
}

.RdYlGn .q0-11{fill:rgb(165,0,38)}
.RdYlGn .q1-11{fill:rgb(215,48,39)}
.RdYlGn .q2-11{fill:rgb(244,109,67)}
.RdYlGn .q3-11{fill:rgb(253,174,97)}
.RdYlGn .q4-11{fill:rgb(244,109,67)}
.RdYlGn .q5-11{fill:rgb(244,109,67)}
.RdYlGn .q6-11{fill:rgb(217,239,139)}
.RdYlGn .q7-11{fill:rgb(166,217,106)}
.RdYlGn .q8-11{fill:rgb(102,189,99)}
.RdYlGn .q9-11{fill:rgb(26,152,80)}
.RdYlGn .q10-11{fill:rgb(253,174,97)}