div#controls {
    float: left;
    margin-bottom: 1em;
}

div#chart {
} 

.clear {
    clear: both;
}


g.axis path {
    fill: none;
    stroke: black;
    stroke-width: 1px;
}

g.axis line {
    stroke: black;
}

g.x.axis path {
    stroke: none;
}

g.x.axis g.tick:first-of-type line {
    stroke: black;
}
g.x.axis line {
    stroke: #cccccc;
}

g.lines path {
    fill: none;
    stroke-width: 4px;
}

g.bg.axis text {
    display: none;
}

g.bg.axis path {
    display: none;
}

g.bg.axis line {
    stroke: #cccccc;
}

.line.territorial, .line.burden {
    stroke: blue;
}
#legend--territorial .legend__icon {
    background-color: blue;
}
#legend--burden .legend__icon {
    box-sizing: border-box;
    border: 2px solid blue;
}

.line.target {
    stroke: red;
}
#legend--target .legend__icon {
    background-color: red;
}

.line.burden {
    stroke-dasharray: 10, 3;
}

.line.consumption {
    stroke: green;
}
#legend--consumption .legend__icon {
    background-color: green;
}

#legend {
    float: left;
    margin-top: 0.5em;
    margin-bottom: 1em;
}

.legend--item {
    display: none;
    white-space: nowrap;
}

.legend__icon {
    display: inline-block;
    height: 1em;
    margin-left: 1em;
    margin-right: 0.5em;
    width: 1em;
}