/**
 * Project:		Yukon Energy 2021
 * Style Sheet:	Yec Consumption
 * Sites:		1 - Yukon Energy
/* ---------------------------------------- */


/**
 * PAGE TEMPLATE RESPONSIVE SUB-NAV OVERRIDES
 */

body.consumption .col.two-thirds.early-respond {
	width: 100%;
}
body.consumption .col.third.early-respond {
	display: none;
}
@media only screen and (min-width: 1530px) {
	body.consumption .col.two-thirds.early-respond {
		width: 75%;
	}
	body.consumption .col.third.early-respond {
		display: block;
		width: 25%;
	}
}






/**
 * RESPONSIVE CHART GRID STRUCTURE
 */

.consumption-grid {
	background: #E6F2F8;
	padding: 15px;
}

	.pane-group {
		display: flex;
		flex-direction: column;
		margin: 0 0 15px;
	}

		.pane-group > div,
		.pane-group > ul {
			flex: 1;
			min-width: 0;
		}

		.consumption-pane,
		.pane-toggle {
			background: rgb(255, 255, 255);
			padding: 15px;
			margin: 0 0 15px;
		}
		.consumption-pane:last-child,
		.pane-group .consumption-pane {
			margin-bottom: 0;
		}


		.consumption-pane.breakdown {
			border-top: 1px solid #E6F2F8;
		}

		.consumption-pane.breakdown .pane-group {
			flex-direction: row;
			margin: 0;
		}

			.consumption-pane.breakdown .mini-pane:nth-of-type(odd) {
				padding-right: 15px;
			}
			.consumption-pane.breakdown .mini-pane:nth-of-type(even) {
				border-left: 1px solid #E6F2F8;
				padding-left: 15px;
			}

			.consumption-pane.breakdown .mini-pane .pane-group {
				flex-direction: column;
			}

@media only screen and (min-width: 600px) {

	.consumption-grid {
		padding: 25px;
	}

		.pane-group {
			margin-bottom: 25px;
		}
		.pane-group.weekly-overview {
			flex-direction: row;
		}

		.consumption-pane,
		.pane-toggle {
			padding: 25px;
			margin-bottom: 25px;
		}

}

@media only screen and (min-width: 900px) {

	.consumption-grid {
		padding: 35px;
	}

	.pane-group {
		margin-bottom: 35px;
	}

	.consumption-pane,
	.pane-toggle {
		padding: 35px;
		margin-bottom: 35px;
	}


	.pane-group.current {
		flex-direction: row;
	}
		.consumption-pane.total {
			flex: 2;
		}
		.consumption-pane.breakdown {
			flex: 1;
			border: 0;
			margin-left: 35px;
		}

		.consumption-pane.breakdown .pane-group {
			flex-direction: column;
		}

			.consumption-pane.breakdown .mini-pane:nth-of-type(odd) {
				padding: 0;
				margin: 0.5em 0 0;
			}
			.consumption-pane.breakdown .mini-pane:nth-of-type(even) {
				padding: 2em 0 0;
				margin: 2em 0 0;
				border: 0;
				border-top: 1px solid #E6F2F8;
			}
				.consumption-pane.breakdown .mini-pane .chart-container {
					margin: 0;
				}

}






/**
 * GENERAL TEXT
 */

	.consumption-grid h2,
	.consumption-grid h3,
	.consumption-grid h4,
	.consumption-grid p,
	.consumption-grid a {
		font-family: 'Titillium Web', Arial, Helvetica, sans-serif;
		font-weight: 300;
		text-transform: uppercase;
	}
		.consumption-grid h2 {
			color: rgb(120, 190, 32);
			font-weight: 600;
			font-size: 125%;
			margin-bottom: 0.15em;
		}
		.consumption-grid h4 {
			color: rgb(76, 76, 76);
			font-size: 90%;
			font-weight: 600;
			line-height: 1.4em;
		}
		.consumption-grid p {
			font-size: 90%;
		}






/**
 * TOGGLE PANES
 */

	.pane-toggle {
		padding: 0;
	}

		.pane-toggle .pane-group {
			margin-bottom: 0;
		}

		.pane-toggle > ul li {
			display: inline-block;
			width: 50%;
		}
			.pane-toggle > ul li a:link,
			.pane-toggle > ul li a:visited {
				display: block;
				padding: 0.3em 0.5em;
				font-weight: 600;
				font-size: 90%;
				text-align: center;
				color: rgb(76, 76, 76);
				background: rgb(255, 255, 255);
				border: 1px solid #78BE1F;
			}
			.pane-toggle > ul li a:hover {
				background: #BBDE90;
				border-color: #BBDE90;
			}
			.pane-toggle > ul li a:active,
			.pane-toggle > ul li a.selected {
				color: rgb(255, 255, 255);
				background: #78BE1F;
				border-color: #78BE1F;
			}






/**
 * CHART LEGEND
 */

	.chart-legend {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: center;
		margin-left: -15px;
		margin-right: -15px;
	}
		.chart-legend li {
			padding: 0.5em 1em;
		}
		@media only screen and (min-width: 600px) {
			.chart-legend li {
				padding-left: 1.5em;
				padding-right: 1.5em;
			}
		}

		.chart-legend li h4 {
			margin: 0;
		}
		.chart-legend li p {
			text-transform: none;
			margin: 0;
		}

		.chart-legend li h4::after {
			content: '';
			display: block;
			height: 3px;
			width: 25px;
		}
			.chart-legend li.hydro		h4::after { background-color: #66CFE7; }
			.chart-legend li.wind		h4::after { background-color: #9ACF58; }
			.chart-legend li.solar		h4::after { background-color: #F4C65A; }
			.chart-legend li.thermal	h4::after { background-color: #F78E47; }






/**
 * CHARTS
 */

	.chart-container {
		padding: 1em 0 0;
	}
		.chart-container > div.chart {
			height: 50vw;
		}
		@media only screen and (min-width: 600px) { .chart-container > div.chart { height: 40vw; } }
		@media only screen and (min-width: 900px) { .chart-container > div.chart { height: 30vw; } }
		@media only screen and (min-width: 1250px) and (min-height: 760px) { .chart-container > div.chart { height: 30vw; } }


	.chart-container.donut {
		position: relative;
		height: 63vw;
		padding: 0;
	}
	@media only screen and (min-width: 600px) {
		.chart-container.donut { height: 33vw; }
		.consumption-pane.total .chart-container.donut { height: 50vw; }
	}
	@media only screen and (min-width: 900px) {
		.chart-container.donut { height: 25vw; }
		.consumption-pane.total .chart-container.donut { height: 40vw; }
	}
	@media only screen and (min-width: 1250px) and (min-height: 760px) {
		.chart-container.donut { height: 23vw; }
		.consumption-pane.total .chart-container.donut { max-height: 600px; }
	}


		.chart-container.donut > div.chart {
			width: inherit;
			height: inherit;
			max-width: inherit;
			max-height: inherit;
		}

		.chart-container.donut h3 {
			position: absolute;
			font-weight: 600;
			font-size: 300%;
			line-height: 1;
			color: rgb(76, 76, 76);
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			background-image: url("/assets/layout/chart-donut-burst.png");
			background-repeat: no-repeat;
			background-size: contain;
			background-position: center;
			padding: 0;
			margin: 0;
		}
			.chart-container.donut h3 b {
				font-weight: 300;
				font-size: 30%;
				line-height: 1.15em;
			}
			.chart-container.donut h3 b:first-child {
				font-weight: 600;
			}


	.chart-container .daytime-bars {
		width: 100%;
		padding: 0 0 30px 60px;
		box-sizing: border-box;
	}
		.chart-container .bar-day,
		.chart-container .bar-night {
			display: inline-block;
			height: 5px;
		}
		.chart-container .bar-day {
			background-color: #F7D991;
		}
		.chart-container .bar-night {
			background-color: #808080;
		}
			.chart-container .bar-day::after,
			.chart-container .bar-night::after {
				content: "";
				background: transparent url("/assets/layout/chart-icon-day.png") no-repeat center center / contain;
				width: 25px;
				height: 25px;
				display: block;
				margin: -10px auto 0;
			}
			.chart-container .bar-night::after {
				background-image: url("/assets/layout/chart-icon-night.png");
			}



		.mini-pane .chart-title > h4 {
			color: rgb(0, 130, 186);
			margin: 0.5em 0 0 0;
			line-height: 1em;
		}
		.mini-pane .chart-title p {
			margin: 0;
		}

		.mini-pane .chart-container.donut { height: 27vw; }
		@media only screen and (min-width: 600px) { .mini-pane .chart-container.donut { height: 22vw; } }
		@media only screen and (min-width: 900px) { .mini-pane .chart-container.donut { height: 17vw; } }
		@media only screen and (min-width: 1250px) and (min-height: 760px) { .mini-pane .chart-container.donut { max-height: 260px; } }

			.mini-pane .chart-container.donut h3 {
				font-size: 200%;
			}






/**
 * API
 * Google Chart Tooltip overrides
 */

.google-visualization-tooltip {
	pointer-events: none;
}
	.google-visualization-tooltip p {
		margin: 6px;
		padding: 0;
		font-size: 11px;
		line-height: 14px;
		text-transform: none;
		color: rgb(0, 0, 0)
	}
		.google-visualization-tooltip p strong {
			font-weight: bold;
		}