:root {
    --legend-height: 30px
}

html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
    display: grid;
    grid-template-rows: auto 2em;
}

#chartCanvas,
#effectCanvas,
#detectionCanvas {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 100%;
}

#effectCanvas {
    transition: opacity 0.3s;
}

#detectionCanvas {
    opacity: 0;
}

#graphLegend {
    grid-column: 1;
    grid-row: 2;
    display: none;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#graphLegend div {
    display: inline;
    margin: 0 10px 0 10px;
    width: 50px;
}

#dataDiv {
    display: none;
    position: absolute;
    height: 35px;
    width: 70px;
    background-color: white;
    border: 1px solid lightgrey;
    padding: 5px;
    border-radius: 5px;
}

#dataDiv p {
    margin: 0;
    font-size: 13px;
}

#dataDiv b {
    position: center;
    font-size: 13px;
}