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

.radar-chart .axis line {
    stroke: grey;
    stroke-width: 1;
}

.radar-chart .legend {
    font-size: 8px;
}

    .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;
}

.dark-background .radar-chart .legend {
    fill: #ddd;
}

.dark-background .radar-chart .axis .legend {
    fill: #b18849;
}