@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700&display=swap');

:root {
    --bg: #fff;
    --text: #000;
    --panel-border: #444;
    --panel-bg: rgba(0,0,0,0.1);
}

#controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 1.2em;
    align-items: center;
    padding: 20px;
    background:rgba(0,0,0,0.1);
    border-bottom: 1px solid #ddd;
}

select, input[type="number"] {
    padding: 5px;
    font-size: 1em;
    font-family: 'Roboto Condensed', sans-serif;
}

button {
    padding: 5px 15px;
    font-size: 1em;
    cursor: pointer;
    background: #0078d7;
    color: white;
    border: none;
    border-radius: 3px;
}
button:hover { background: #005a9e; }

.wrap { width:960px; margin:0 auto; padding-top:20px; padding-bottom: 50px; font-family: 'Roboto Condensed'; }
h2 { margin:0 0 12px; font-size:24px; font-weight:700; text-align: center; }

.hc { width:960px; margin-bottom:40px }
#tempChart { height:600px }
.envChart { height:300px }

/* Highcharts Tooltip Styling overrides */
.highcharts-tooltip span {
    font-family: 'Roboto Condensed', sans-serif;
}