﻿.meteoChartContainer { width:100%; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; gap: 2em;}
.meteoChartContainer > div { min-width:20em; max-width: 50em; flex-basis:30em; flex-grow: 1; }

.divMinMax .divData, .divPressure .divData {
	width: 100%; margin-top: 1em;
	display: flex; flex-direction: row; flex-wrap:wrap;
	justify-content: center; align-items: baseline;
	font-size: 1rem; line-height:1.25;
}
.meteoChartContainer .divData > div {flex-grow:1; text-align:center; margin: 0 0.25em; }
.divMinMax .divCurrentValue, .divPressure .divCurrentPressure { font-size: 1.5em; }
.divMinMax .lblCurrentValue, .divPressure .lblPressure { font-size: 2em; }
.divMinMax .lblMinValue, .divMinMax .lblMaxValue { font-size: 1.5em; }
.divPressure .lblPressureTrend { font-size: 2em; }
.divPressure .divPressureTrendIcons > span {font-size:2em; }

.startPageMeteo .divChart, .startPageMeteo .chartWait { height: 12.5em; min-width: 15em; }
.startPageMeteo > div { min-width:unset; width:100%; flex-basis:unset; padding: 0 0.25em;}

.divChartContainer { display:grid; align-items:center; grid-template-rows:auto 3.25em 2.25em; grid-template-columns: 3.5em auto; }
.divChartContainer>.divChart, .divChartContainer>.divChartLoading { grid-area: 1 / 1 / 4 / 3; }
.divChartContainer>.divLabel { font-size:1.5em; z-index:5; color:rgba(0, 0, 0, 0.5); grid-area: 2 / 2 / 3 / 2; line-height: 1em; }

@media screen and (min-width: 1600px) { /* stretch charts to avoid having three per line */
	.meteoChartContainer > div {min-width:40em; }
}

@media (min-height:600px) and (min-width:1000px){
	.divChartContainer>.divLabel { font-size:2.5em;}
}