/* This document contains css for 5-day forecast area */

:root {
	/* 
	"5-day forecast" */
	--card-panel-sectiontitle-bgcolor: var(--primary);
	--card-panel-sectiontitle-color: var(--primary-complement);
	/* 
	Mon | 28 Mar */
	--card-panel-title-bgcolor: var(--tertiary);
	--card-panel-title-color: var(--tertiary-complement);
	/* 
	TEMP WIND UV HUM */
	--card-panel-info-bgcolor: var(--primary);
	--card-panel-info-color: var(--primary-complement);
}

.cards-title {
	flex: 0;
	margin: 1vh 0;
	/* '5-day forecast */
	color: var(--secondary-complement);
	border-radius: 30px;

	font-weight: bold;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
}

.cards {
	/* container for all the card cards */
	/* layout */

	display: flex;
	flex-wrap: wrap;

	align-items: stretch;
	justify-content: center;
}

.card-title {
	/* Layout - flex*/
	display: flex;
	align-items: center;
	justify-content: center;
	/* Layout - box */
	padding: 1vh 0 0.6vh 0;
	/* Text */
	font-size: calc(max(16px, 1vh));
	font-weight: bold;
	color: #101210;
	/* Appearance */

	background-color: var(--card-panel-title-bgcolor);
	/* border-radius: 30px 30px 0 0; */
}
.card-title p {
	line-height: 1;
}

/* grid */
.card-info {
	background-color: var(--card-panel-info-bgcolor);
	font-size: calc(max(12px, 1vh));
	flex: 1;
	padding: 1vh 0.5vw;
	color: #101210;
	font-weight: bold;
	line-height: 1;

	/* layout */
	display: grid;
	align-items: center;
	justify-content: center;
	grid-template-columns: repeat(4, auto);
	grid-template-rows: repeat(5, auto);
	gap: 1vh 1vw;
	height: 100%;
}

.card-info-icon {
	/* grid-column: 1/5; */

	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
}
.card-info-icon img {
	width: 8vh;
	height: 8vh;
}

/* weather stats */

.card-info-panel-icon {
	text-align: center;
}
.card-info-panel-graphical {
	display: flex;
}
.ball {
	background-color: var(--tertiary);
	border-radius: 50%;
	width: calc(min(12px, 3vw));
	height: calc(min(12px, 3vw));
	margin-left: 1px;
}