:root {
	--font-family: Arial, Helvetica, sans-serif;
	--font-size: 14px;
	--font-size-small: 12px;
	--font-size-x-hour: 9px;
	--font-size-x-day: 12px;
	--font-size-y-unit: 10px;
	--font-size-y-tick: 10px;
	--font-size-labels: 12px;
	--color-text: #111111;
	--color-text-light: #555555;
	--color-grid: #666666;
	--color-grid-light: #bbbbbb;
	--color-app-bg: #ffffff;
	--color-graph-temp: #ff6669;
	--color-graph-dewpoint: #ff6669;
	--color-graph-humidity: #90d5ff;
	--color-graph-wind: #7abf9a;
	--color-graph-gust: #7abf9a;
	--color-graph-winddir: #000000;
	--color-graph-pressure: #488890;
	--color-graph-sun: #ffcf20;
	--color-graph-cloud: #aaaaaa;
	--color-graph-rain: #4898dc;
	--color-graph-prob: #90c4d7;
	--chart-days: 8;
}

@media (max-width: 35em) {
	:root {
		--chart-days: 5;
	}
}

.forecast {
	font-family: var(--font-family);
	font-size: var(--font-size);
	color: var(--color-text);
	background-color: var(--color-app-bg);
}

.panel {
	margin-bottom: 8px;
	text-align: left;
}

.chart-wrap {
	width: 100%;
	height: 110px;
}

.chart-wrap.large {
	height: 145px;
}

canvas {
	width: 100%;
	height: 100%;
	background-color: var(--color-app-bg);
}

#stationname {
	text-align: right;
	font-size: var(--font-size-small);
}

#metadata {
	margin-bottom:12px;
	text-align: right;
	font-size: var(--font-size-small);
}

#error {
	color: red;
	padding: 10px;
	margin-bottom: 20px;
	border: 1px solid grey;
	font-weight: bold;
	display: none;
}