#chartContainer {
    width: 100%;
    height: 250px;
    position: relative;
}

#chartWrapper {
    width: 100%;
    height: 250px;
    position: absolute;
    margin-top: 10px;
}

#elevationCanvas {

}

#highlightedArea {
    margin-top: 20px;
    opacity: 0.8;
    position: absolute;
    z-index: 10;
    top: -10px;
    pointer-events: none;
    display: none;
    border-right: solid 1px;
    border-left: solid 1px;
}

#chartPositionMarker, .dayEndMarker {
    opacity: 0.75;
    position: absolute;
    height: 164px;
    margin-top: 20px;
    background-color: black;
    width: 2px;
    display: none;
    pointer-events: none;
    top: -10px;
}

.dayEndMarker {
    width: 0.5px;
    background: #999;
    display: none;
}

.checkpointline {
    opacity: 0.75;
    position: absolute;
    margin-top: 20px;
    background-color: black;
    width: 1px;
    display: none;
    pointer-events: none;
    top: -10px;
}

#chartWrapper .marker.marker-checkpoint {
    margin-left: -7px;
    margin-top: -7px;
    pointer-events: none;
}

#chartPositionMarker span, #highlightedArea span {
    position: absolute;
    text-align: left;
    font-size: small;
    padding: 2px 7px;
    font-weight: normal;
    top: -20px;
    width: 240px;
}

#highlightedArea span {
    top: 0
}

#chartPositionMarker span.right, #highlightedArea span.right {
    right: 0
}