:root {
	--font-size: 14px;
	--font-size-small: 12px;
	--color-text: #111111;
	--color-text-light: #666666;
	--color-app-bg: #ffffff;
	--color-graph-temp: #ff0000;
	--color-graph-wind: #808000;
	--color-graph-gust: #ff00ff;
	--color-graph-winddir: #000000;
	--color-graph-humidity: #008080;
	--color-graph-sun: #ffd700;
	--color-graph-rain: #0000ff;
}

.forecast {
	-webkit-text-size-adjust: 100%;
	font-family: Arial, Helvetica, sans-serif;
	margin: 6px;
	font-size: var(--font-size);
	color: var(--color-text);
	background-color: var(--color-app-bg);
}

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

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

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

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;
}