*, *:after, *:before {
    box-sizing: border-box;
}


html, body {
    height: 100%;
    width: 100%;
    font-family: Helvetica, Arial;
}
body > section {
    height: 100%;
    width: 100%;
}

#chart {
    width: 90%;
    height: 150px;
    background: rgb(218, 218, 218);
    opacity: 0.9;
    border-radius: 5px;
    border: 1px solid #2b2b2b;
}

#chart line {
    stroke: #2b2b2b;
}

#chart line.vertical-marker.now {
    stroke: #c00;
}

rect.interval.blue-interval {
    fill: blue;
    stroke: blue;
}

circle.blue-dot {
    fill: blue;
}

/* Override d3tip */

.d3-tip {
    background: white;
    color: black;
}

/* Tiny Flex Grid */

[flex] {
    display: flex;
}
[flex-fill] {
    flex: 1;
}
[flex-full-center] {
    align-items: center;
    justify-content: center;
}
[flex-direction=column] {
    flex-direction: column;
}
[flex-direction=row] {
    flex-direction: row;
}
[flex-size="40"] {
    flex: 40;
}
[flex-size="60"] {
    flex: 60;
}