.background {
    fill: #eee;
}

line {
    stroke: #fff;
}

.composite-chart {
    width: 100%;
    height: 70%;
    min-width: 1440px;
    min-height: 480px;
    overflow-x: scroll;
    overflow-y: scroll;
}

.daily-timeperiod {
    stroke: rebeccapurple;
    stroke-width: 2;
}

.monthly-timeperiod {
    stroke: mediumpurple;
    stroke-width: 3;
}

.yearly-timeperiod {
    stroke: magenta;
    stroke-width: 3;
}

text.active {
    fill: red;
}

div.tooltip {
    position: absolute;
    text-align: left;
    width: 180px;
    height: 98px;
    padding: 2px;
    font: 12px sans-serif;
    background: lightsteelblue;
    border: 0;
    border-radius: 2px;
    pointer-events: none;
}

div.job-tile {
    position: absolute;
    text-align: left;
    width: 180px;
    height: 110px;
    padding: 2px;
    font: 12px sans-serif;
    border-radius: 2px;
    border: 1px solid #ccc;
}

.close-button:after {
    content: '×'; /* UTF-8 symbol */
    color: #777;
    font: 14px/100% arial, sans-serif;
    position: absolute;
    right: 5px;
    text-decoration: none;
    text-shadow: 0 1px 0 #fff;
    top: 5px;
}
