.radar-chart .level {
  stroke: grey;
  stroke-width: 0.5;
}

.radar-chart .axis line {
  stroke: grey;
  stroke-width: 1;
}
.radar-chart .axis .legend {
  font-family: sans-serif;
  font-size: 10px;
}
.radar-chart .axis .legend.top {
  dy:1em;
}
.radar-chart .axis .legend.left {
  text-anchor: start;
}
.radar-chart .axis .legend.middle {
  text-anchor: middle;
}
.radar-chart .axis .legend.right {
  text-anchor: end;
}

.radar-chart .tooltip {
  font-family: sans-serif;
  font-size: 13px;
  transition: opacity 200ms;
  opacity: 0;
}
.radar-chart .tooltip.visible {
  opacity: 1;
}

/* area transition when hovering */
.radar-chart .area {
  stroke-width: 2;
  fill-opacity: 0.5;
}
.radar-chart.focus .area {
  fill-opacity: 0.1;
}
.radar-chart.focus .area.focused {
  fill-opacity: 0.7;
}

.radar-chart .circle {
  fill-opacity: 0.9;
}

/* transitions */
.radar-chart .area, .radar-chart .circle {
  transition: opacity 300ms, fill-opacity 200ms;
  opacity: 1;
}
.radar-chart .d3-enter, .radar-chart .d3-exit {
  opacity: 0;
}