* {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        sans-serif;
}

/* temperature graph */
.highcharts-point {
    stroke: white;
}

.main-color .highcharts-graph {
    stroke: red;
}

.main-color,
.main-color .highcharts-point {
    fill: red;
}

.highcharts-graph.highcharts-negative {
    stroke: blue;
}

.highcharts-area.highcharts-negative {
    fill: blue;
}

.highcharts-point.highcharts-negative {
    fill: blue;
}

/* chart thumbnails */
#container {
    padding-bottom: 30px;
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(auto-fill, 33%);
    grid-template-rows: repeat(2, 80px);
}

#container .gridChart {
    border: 1px solid #ebebeb;
    border-radius: 4px;
    filter: grayscale(1);
    opacity: 1;
}

#container .gridChart:hover {
    filter: grayscale(0);
    opacity: 1;
}

@media (min-width: 768px) {
    #container {
        margin-top: 10px;
        grid-template-columns: repeat(6, 16.5%);
        grid-template-rows: repeat(1, 100px);
    }

    #container #soloBubble {
        display: inline-block;
    }

    #container #scatter {
        display: inline-block;
    }
}

@media (min-width: 960px) {
    #container {
        grid-template-columns: repeat(6, 160px);
        grid-template-rows: repeat(1, 100px);
    }
}
