/* for iframes fixes needed for IE */

html, body {
	margin: 0;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
	body {
		font-family: Arial, Helvetica, sans-serif;
		overflow: hidden;
	}
	body.gray {
		background: #E8E8E8;	
	}
	/*body.lightgreen {
		background: #F2F8E4;	
	}
	body.lightred {
		background: #F5E2DD;
	}
	body.lightpurple {
		background: #EBE6F5;
	}
	body.lightaqua {
		background: #E4F9F6;
	}
	body.lightorange {
		background: #FFF5E4;
	}*/
	body.info, body.reports {
		overflow: auto;
	}

* {
	-webkit-touch-callout: none;
    -webkit-user-select: none; /* Disable selection/copy in UIWebView */
}

/* Force GPU acceration just on charts, iPad fix */
.highcharts-container {
	
}

.row {
	display: flex;
	justify-content: center;	
}
		
	.col {
		position: relative;
		align-self: center;
	}

.mb-0, .my-0 {
    margin-bottom: 0!important;
}

.pl-3, .px-3 {
    padding-left: 1rem!important;
}
.pr-3, .px-3 {
    padding-right: 1rem!important;
}
.pb-2, .py-2 {
    padding-bottom: .5rem!important;
}
.pt-2, .py-2 {
    padding-top: .5rem!important;
}

.d-flex {
    display: -ms-flexbox!important;
    display: flex!important;
}

.justify-content-between {
    -ms-flex-pack: justify!important;
    justify-content: space-between!important;
}

.timer-container {
	background: #f5f5f5;
	border-bottom: 1px solid #d3d3d3;
	padding: 7px 0 8px;
}
	.timer {
		color: rgba(79,117,139,.75);
		font-size: 12px;
		text-align: center;
	}
		.timer .time {
			padding: 2px 3px;
			margin-left: -3px;
			background:	rgba(0,199,177,0);
			border-radius: 4px;
			transition: background-color .75s ease;
		}
			.timer .time.updated {
				background:	rgba(0,199,177,.1);
			}



.highcharts-tooltip {
    z-index: 9998;
}
.tooltip { 
  box-shadow: 0px 3px 6px rgba(0,0,0,.16);
  padding: 8px;
  border-radius: 4px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.05);
  line-height: 1.3;
}
	.tooltip .tooltip-header {
		border-bottom: 1px solid rgba(79,117,139,.5);
		margin-bottom: 8px;
		padding-bottom: 4px;
		margin-left: -8px;
		margin-right: -8px;
		text-align: center;
		color: #4F758B;
		font-weight: 700;
	}

.overview-capacity {
	padding: 18px 16px;
}
	.page-flex-alert .overview-capacity {
		padding: 18px 0 0;
	}
	.capacity-container:after, .capacity-chart-labels-container:after {
		content: "";
		display: table;
		clear: both;
	}
	.capacity-chart-labels-container {
		position: relative;	
	}
	.overview-capacity-chart {
		width: 100%;
		height: 22px;
		background: #353535;
		/*box-shadow: inset 0 0 20px rgba(0,0,0,.5);*/
		border-radius: 15px;
		overflow: hidden;
		margin: 7px 0;
		border: none;
	}
		.overview-capacity-chart.chart-1hour, .overview-capacity-chart.chart-4hour {
			height: 12px;
			margin-bottom: 3px;
		}
		.capacity-capacity-number {
			font-weight: 700;
			font-size: 21px;
			color: #000;
		}
			.capacity-capacity-number span {
				font-size: 13px;
			}
	
		.forecasted-peak-bar {
			color: #045DB2;
			position: absolute;
			top: -3px;
			left: 0;
			font-size: .875rem;
		}
		.capacity-chart-bar {
			height: 22px;
			float: left;
			width: 0%;
		}
			.capacity-chart-bar.green {
				background: #00c7b1;
				transition: width 1s ease .25s;
				color: #fff;
				font-size: .875rem;
				font-weight: 700;
				line-height: 1em;
			}
				.capacity-chart-bar.green span {
					padding: 1px 7px;
					display: block;
				}
			.capacity-chart-bar.blue {
				background: #045DB2;
				transition: width 1s ease .25s;
			}
				
			.capacity-chart-bar.orange {
				background: #F48F62;
				background-image: linear-gradient(135deg, #f48f62 16.67%, #666666 16.67%, #666666 50%, #f48f62 50%, #f48f62 66.67%, #666666 66.67%, #666666 100%);
				background-size: 4.24px 4.24px;
				transition: width 1s ease .75s;
				height: 22px;
			}
			.capacity-chart-bar.gray {
				background: #666666;
				transition: width 1s ease .75s;
				height: 22px;
	
			}
				.capacity-chart-bar.gray {
					background: linear-gradient(90deg, #666666 80%, rgba(53,53,53,1) 100%);
				}
	
			.resources-minus-outages {
				font-size: 1.15em;
				font-weight: 700;
				line-height: 1.2em;
				margin-top: 9px;
				/*margin-bottom: 7px;*/
			}
			.capacity-chart-labels-container {
				position: relative;
			}
			.capacity-chart-labels {
				/*float: left;*/
				/*margin-right: 15px;*/
				/*margin-bottom: 7px;*/
				/*font-size: .725em;*/
				font-size: .825em;
				line-height: 1.4;
				font-weight: 700;
				color: #5f5f5f;
				margin-right: 18px;
				margin-top: 2px;
			}	
			.capacity-chart-labels.label-outage {
				color: #cf4520;
				position: absolute;
				left: 25%;
				transition: left 1s ease .75s;
			}
			.capacity-chart-labels.label-current-demand {
				color: #5f5f5f;
			}
			.capacity-chart-labels .capacity-number {
				color: #000;
			}
			.capacity-chart-label {
				margin-left: 13px;
				position: relative;
				white-space: nowrap;
			}
				.capacity-chart-label.label-available-capacity-1hour, .capacity-chart-label.label-reserves {
					margin-right: 10px;
				}
				.capacity-chart-label.label-reserves {
					margin-left: 28px;
					margin-top: 6px;
				}
				.capacity-chart-label.label-reserves:after {
					content: '';
					width: 11px;
					height: 13px;
					display: block;
					/*border-left: 1px solid #bbb;
					border-bottom: 1px solid #bbb;*/
					position: absolute;
					top: -3px;
					left: -26px;
					background: transparent url(../../img/ico-includes-arrow.svg) 0px 0px no-repeat;
					background-size: 11px;
				}
				.capacity-chart-label.label-reserves .capacity-name {
					display: inline-block;
				}
				.capacity-chart-label.label-reserves .capacity-number {
					/*display: inline-block;
					margin-left: 5px;*/
				}
			.capacity-chart-label.label-available-capacity-1hour .capacity-name, .capacity-chart-label.label-reserves .capacity-name, .capacity-chart-label.label-available-capacity-4hour .capacity-name {
				font-weight: 400;
			}
			
				/*.capacity-chart-label {
				font-size: .875em;
				font-weight: 700;
				color: #5f5f5f;
				position: absolute;
				line-height: 1em;
				font-size:0.857em;
				letter-spacing: .1ex;
			}		
				.capacity-chart-label:before {
					content: '\26AB';
					line-height: 1em;
					display: inline-block;
					vertical-align: middle;
					padding-bottom: 2px;
					margin-right: 2px;
				}
					.capacity-chart-label.green:before {
						color: #00c7b1;
					}
					.capacity-chart-label.red:before {
						color: #cf4520;
					}*/
	
			.capacity-chart-number {
				font-weight: 700;
			}
					
			.capacity-peak-arrow {
				padding-bottom: 10px;
				/*text-align:center;*/
				width: 100px;
			}
			.label-current-demand:before {
				content: '';
				width: 10px;
				height: 10px;
				border-radius: 7px;
				background-color: #00c7b1;
				display: inline-block;
				margin-right: 3px;
				position: absolute;
				top: 2px;
				left: -13px;
			}
			.label-forecasted-demand:before {
				content: '';
				width: 10px;
				height: 10px;
				border-radius: 7px;
				background-color: #045DB2;
				display: inline-block;
				margin-right: 3px;
				position: absolute;
				top: 2px;
				left: -13px;
			}
			.label-reserves:before {
				content: '';
				width: 10px;
				height: 10px;
				border-radius: 7px;
				background: #F48F62;
				background-image: linear-gradient(135deg, #f48f62 16.67%, #ffffff 16.67%, #ffffff 50%, #f48f62 50%, #f48f62 66.67%, #ffffff 66.67%, #ffffff 100%);
				background-size: 4.24px 4.24px;
				display: inline-block;
				margin-right: 3px;
				position: absolute;
				top: 2px;
				left: -13px;
			}
				.label-reserves.ver2:before {
					background: #F48F62;
				}
			.label-available-capacity-1hour:before {
				content: '';
				width: 10px;
				height: 10px;
				border-radius: 7px;
				background-color: #666666;
				display: inline-block;
				margin-right: 3px;
				position: absolute;
				top: 2px;
				left: -13px;
			}
				.label-available-capacity-1hour.ver3:before {
					background-color: #303030;
				}
			.label-available-capacity-4hour:before {
				content: '';
				width: 10px;
				height: 10px;
				border-radius: 7px;
				background-color: #353535;
				display: inline-block;
				margin-right: 3px;
				position: absolute;
				top: 2px;
				left: -13px;
			}
				.label-available-capacity-4hour.ver3:before {
					background-color: #303030;
				}
			.label-available-capacity-1-4hour:before {
				content: '';
				width: 10px;
				height: 10px;
				border-radius: 7px;
				background: #353535;
				background-image: linear-gradient(90deg, #666666 25%, #353535 25%, #353535 50%, #666666 50%, #666666 75%, #353535 75%, #353535 100%);
	background-size: 20.00px 20.00px;
				display: inline-block;
				margin-right: 3px;
				position: absolute;
				top: 2px;
				left: -13px;
			}
			.label-forecasted-peak:before {
				content: '';
				width: 10px;
				height: 10px;
				border-radius: 7px;
				background-color: #045DB2;
				display: inline-block;
				margin-right: 3px;
				position: absolute;
				top: 2px;
				left: -13px;
			}
			/*.label-forecasted-peak:before {
				content: '';
				display: block;
				width: 30px;
				height: 30px;
				margin-top: -6px;
				margin-bottom: 6px;
				background: transparent url(../../images/outlook/ico-forecasted-peak.svg) left 5px no-repeat;
				background-size: 30px;
			}*/
				/*.label-forecasted-peak div {
					display: inline-block;
				}*/
			.capacity-peak-arrow.forecast-arrow:after {
				content: '';
				line-height: 1em;
				display: block;
				vertical-align: middle;
				padding-bottom: 2px;
				margin-right: 2px;
				position: absolute;
				top: -30px;
				/*left: 50%;*/
				left: 15px;
				margin-left: -1px;
				width: 0;
				height: 30px;
				border-left: 2px solid rgb(4,93,178);
			}
			.overview-capacity .label-capacity-capacity, .overview-capacity .capacity-capacity {
				font-size: 18px;		
			}
			.label-capacity-capacity-tablet {
				display: none;	
			}
			.overview-capacity .label-capacity-capacity {
				width: 60%;
				float: left;
				font-weight: 500;
			}
			.overview-capacity .capacity-capacity {
				float: right;
				font-weight: 700;
				padding-top: 2px;
			}
				.overview-capacity .capacity-capacity span {
					font-size: 11px;	
				}	
		.page-flex-alert .note {
			margin-top: 3rem;
			font-size: .675rem;
			text-align: right;
			color: #666;
			font-style: italic;
		}
		.page-flex-alert .note a {
			color: #666;
			white-space: nowrap;
		}	
			.page-flex-alert .note a:hover {
				text-decoration: none;
			}
	
			
#demand,#netDemand,#renewables,#batteries,#imports,#co2Total,#co2,#co2Historical,#supply {
	position: relative;
	/*width: 100%; height: 100%;*/
	margin: 0 auto;
	box-sizing: border-box;
	height: 351px;
}
#supplyPie,#renewablesPie,#co2Pie {
	position: relative;
	box-sizing: border-box;
	width: 136px;
	height: 280px;
	float: left;
}
#renewablesPieIcon {
	position: relative;
	box-sizing: border-box;
	/*width: 52px;*/ /*PIE CHART has 10px padding*/
	/*height: 52px;*/ /*PIE CHART has 10px padding*/
	width: 100%;
	height: 100vh;
}

#renewablesPieBtn {
	position: relative;
	box-sizing: border-box;
	width: 84px; /*PIE CHART has 10px padding*/
	height: 84px; /*PIE CHART has 10px padding*/
}
	.renewablesPieBtnLabel {
		font-size: 18px;
		line-height: 18px;
		font-weight: 700;
		color: #000;
		position: absolute;
	    top: 32px;
	    left: 20px;
	    width: 44px;
	}
		.renewablesPieBtnLabel .percentage {
			text-align: center;
		}
		.renewablesPieBtnText {
			width: 80px;
			font-size: 11px;
			line-height: 14px;
			font-weight: 700;
			color: #5F5F5F;
		}
		
.zoneNetDemand {
	stroke-width: 3;
}
	#netDemandBtn .zoneNetDemand {
		stroke-width: 2;
	}

#theLabel {
	font-size: 12px;
	line-height: 16px;
	color: #fff;
	background: rgba(207,69,32,.75);
	border: 1px solid #CF4520;
	border-radius: 4px;
	padding: 8px;
}
	
.legend {
	font-size: 10px;
	font-weight: 700;
	color: #000;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	padding: 0 12px 0 20px;
	box-sizing: border-box;
	position:relative;
	line-height: 12px;
	/*top: 350px;*/
}
	.legend#co2TotalLegend, .legend#batteriesLegend, .legend#importsLegend {
		justify-content: center;
	}
	.legend .item {
		position: relative;
		min-width: 33.33%;
		max-width: 33.33%;
		transition: opacity .25s ease;
		cursor: pointer;
	}
		.legend .item.hidden {
			display: none; 
		}
		.legend .item.disabled {
			opacity: .5; 
		}
		.legend .item:last-child {
			padding-right: 0;
		}
		.legend .item.cCOT, .legend#batteriesLegend .item.cB, .legend#importsLegend .item.cI {
			text-align: center;
		}
		
		.legend .item .symbol {
			display: block;
			width: 8px;
			height: 8px;
			border-radius: 4px;
			position: absolute;
			left: 0;
			top: 1px;
		}
			.legend .item.cCOT .symbol, .legend#batteriesLegend .item.cB .symbol, .legend#importsLegend .item.cI .symbol {
				display: inline-block;
			    position: relative;
			    left: auto;
			    top: 0px;
			}
			.legend .item.cFP .symbol {
				border-radius: 0;
				background-image: url('../../img/ico-triangle-blue.svg');
				background-position: left top;
				background-repeat: no-repeat;
				background-color: transparent !important;
			}
		.legend .item .serieName {
			padding-right: 24px;
			padding-left: 12px;
			padding-bottom: 16px;
		}
			.legend .item.cCOT .serieName, .legend#batteriesLegend .item.cB .serieName, .legend#importsLegend .item.cI .serieName {
				display: inline-block;
    			padding-left: 4px;
    			padding-right: 0px;
			}

.legendPie {
	font-size: 13px;
	font-weight: 700;
	color: #000;
	width: 174px; /*176px - Border */
	display: flex;
	flex-wrap: wrap;
	padding: 11px 12px 5px 12px;
	box-sizing: border-box;
	position:relative;
	line-height: 16px;	
	border: 1px solid #C8C8C8;
	border-radius: 4px;
	background: #fff;
	margin-top: 8px;
	margin-bottom: 8px;
}
	.legendPie .item {
		position: relative;
		min-width: 100%;
		max-width: 100%;
		transition: opacity .25s ease;
		cursor: pointer;
	}
		.legendPie .item.hidden {
			display: none; 
		}
		.legendPie .item.disabled {
			opacity: .5; 
		}
		.legendPie .item:last-child {
			padding-right: 0;
		}
		.legendPie .item .symbol {
			display: block;
			width: 8px;
			height: 8px;
			border-radius: 4px;
			position: absolute;
			left: 0;
			top: 4px;
		}
		.legendPie .item .serieName {
			padding-left: 12px;
			padding-bottom: 4px;
		}
			.legendPie .item .serieName .numbers {
				font-weight: 400;
			}

.info {
	font-size: 18px;
	line-height: 24px;
	color: #393939;
	padding: 16px;
}
	.info a {
		color: #4F758B;
	}
	.info h1 {
		color: #000;
		font-size: 24px;
		line-height: 32px;
		font-weight: 500;
		margin-bottom: 12px;
		margin-top: 32px;
	}
	.info h2 {
		color: #000;
		font-size: 20px;
		line-height: 24px;
		font-weight: 500;
		margin-bottom: 12px;
		margin-top: 32px;
	}
	.info h3 {
		font-size: 20px;
		line-height: 24px;
		font-weight: 500;
		margin-bottom: 12px;
		margin-top: 32px;
	}
	.info p {
		margin-top: 12px;	
	}
		.info .note {
			font-size: 14px;
			line-height: 16px;
			margin-top: 4px;
		}
	.info .tag {
		display: block;
		padding: 0px 0px 0px 74px;
		background-position: left top;
		background-repeat: no-repeat;
		background-size: 70px 70px;
		margin-bottom: 24px;
		min-height: 70px;
	} 
		.info a.tag {
			text-decoration: none;
		}
		.info .tag .tag-title {
			color: #000;
			font-weight: 700;
		}
			.info a.tag .tag-title {
				color: #4F758B;
			}
			.info a.tag .tag-title .last-word {
				white-space: nowrap;
			}
			.info a.tag .tag-title .last-word:after {
				content:'';
				display: inline-block;
				width: 20px;
				height: 11px;
				background: transparent url('../../img/ico-right-arrow.svg') right center no-repeat;
				background-size: 25px 25px;
			}
		.info a.tag .tag-desc {
			color: #393939;
		}
		
		.info .tag.renewables {
			background-image: url('../../img/ico-tag-renewables.svg');	
		}
		.info .tag.renewables-load {
			background-image: url('../../img/ico-tag-renewables-load.svg');	
		}
		.info .tag.solar {
			background-image: url('../../img/ico-tag-solar.svg');	
		}
		.info .tag.wind {
			background-image: url('../../img/ico-tag-wind.svg');	
		}
		.info .tag.available-capacity {
			background-image: url('../../img/ico-tag-available-capacity.svg');	
		}
		.info .tag.demand {
			background-image: url('../../img/ico-tag-demand.svg');	
		}
		.info .tag.forecasted-peak {
			background-image: url('../../img/ico-tag-tomorrows-peak.svg');
			background-position: left -13px;	
		}
		.info .tag.todays-peak {
			background-image: url('../../img/ico-tag-todays-peak.svg');
			background-position: left -13px;	
		}
		.info .tag.historical-peak {
			background-image: url('../../img/ico-tag-historical-peak.svg');
			background-position: left -5px;
		}
		.info .tag.tomorrows-peak {
			background-image: url('../../img/ico-tag-tomorrows-peak.svg');
			background-position: left -13px;	
		}
		.info .tag.co2 {
			background-image: url('../../img/ico-tag-co2.svg');
			background-position: left -8px;	
		}
		.info .tag.co2-rate {
			background-image: url('../../img/ico-tag-co2-rate.svg');	
		}
		.info .tag.co2-reduction {
			background-image: url('../../img/ico-tag-co2-reduction.svg');	
		}
		.info .tag.report-renewables-watch {
			background-image: url('../../img/ico-tag-renewables.svg');	
		}
		.info .tag.report-wind-solar-curltailment {
			background-image: url('../../img/ico-tag-wind-solar-curltailment.svg');	
		}
		.info .tag.report-greenhouse-gas {
			background-image: url('../../img/ico-tag-greenhouse-gas.svg');	
		}
		.info .tag.report-renewables-performance {
			background-image: url('../../img/ico-tag-renewables-performance.svg');	
		}
		.info .tag.report-peak-history {
			background-image: url('../../img/ico-tag-historical-peak.svg');
			background-position: left -5px;	
		}
		.info .tag.report-outage {
			background-image: url('../../img/ico-tag-outage.svg');	
		}

	.info dl {
		margin-bottom: 24px;	
	}
		.info dl dt {
			font-weight: 700;
			color: #000;
		}
			.info dl.descriptions dt {
				
				padding-left: 40px;
				background-position: left center;
				background-repeat: no-repeat;
				background-size: 35px 35px;
				min-height: 35px;
				line-height: 35px;
			}
				.info.alerts dl.descriptions dt {
					min-height: auto;
					line-height: 1.2em;
				}

			.info dl.descriptions dt.renewables {
				background-image: url('../../img/ico-renewables.svg');
			}
			.info dl.descriptions dt.natural-gas {
				background-image: url('../../img/ico-natural-gas.svg');
			}
			.info dl.descriptions dt.large-hydro {
				background-image: url('../../img/ico-large-hydro.svg');
			}
			.info dl.descriptions dt.imports {
				background-image: url('../../img/ico-imports.svg');
			}
			.info dl.descriptions dt.nuclear {
				background-image: url('../../img/ico-nuclear.svg');
			}
			.info dl.descriptions dt.coal {
				background-image: url('../../img/ico-coal.svg');
			}
			.info dl.descriptions dt.other {
				background-image: url('../../img/ico-other.svg');
			}
			.info dl.descriptions dt.solar {
				background-image: url('../../img/ico-solar.svg');
			}
			.info dl.descriptions dt.wind {
				background-image: url('../../img/ico-wind.svg');
			}
			.info dl.descriptions dt.geothermal {
				background-image: url('../../img/ico-geothermal.svg');
			}
			.info dl.descriptions dt.biomass {
				background-image: url('../../img/ico-biomass.svg');
			}
			.info dl.descriptions dt.biogas {
				background-image: url('../../img/ico-biogas.svg');
			}
			.info dl.descriptions dt.small-hydro {
				background-image: url('../../img/ico-small-hydro.svg');
			}
			.info dl.descriptions dt.batteries {
				background-image: url('../../img/ico-batteries.svg');
			}
			
			.info dl.descriptions dt.flex-alert, .info dl.descriptions dt.rmo, .info dl.descriptions dt.alert, .info dl.descriptions dt.warning, .info dl.descriptions dt.transmission-emergency, .info dl.descriptions dt.stage1, .info dl.descriptions dt.stage2, .info dl.descriptions dt.stage3 {
				padding-left: 0;
			}
				.info dl.descriptions dt.flex-alert:before, .info dl.descriptions dt.alert:before, .info dl.descriptions dt.warning:before, .info dl.descriptions dt.rmo:before {
					content: '';
					width: 12px;
					height: 12px;
					background: #FFA300;
					border-radius: 6px;
					display:inline-block;
					margin-right: 5px;
				}
				.info dl.descriptions dt.transmission-emergency:before, .info dl.descriptions dt.stage1:before, .info dl.descriptions dt.stage2:before, .info dl.descriptions dt.stage3:before {
					content: '';
					width: 12px;
					height: 12px;
					background: #CF4520;
					border-radius: 6px;
					display:inline-block;
					margin-right: 5px;
				}

		.info dl dd {
			margin-left: 0;	
			margin-bottom: 16px;
		}
	.info ul {
		padding-left: 1.2em;	
	}
		.info li {
			margin-bottom: 4px;
		}
		
		
/* CHART BUTTONS */
#demandBtn,#netDemandBtn,#renewablesBtn,#co2Btn,#co2TotalBtn,#supplyBtn {
	height: 100vh;
}
	/*.landscape #demandBtn,.landscape #netDemandBtn,.landscape #renewablesBtn,.landscape #co2Btn,.landscape #co2TotalBtn {
		height: 100vh;
		padding-top: 24px;
		padding-right: 40px;
	}*/
#batteriesBtn,#importsBtn,#renewablesBtn.backwhite,#co2HistoricalBtn {
	height: 100vh;
}

/* iPhone SE/5 Buttons */
@media(max-width: 186px) {
	#netDemandBtn,#renewablesBtn,#co2TotalBtn {
		/*height: calc(100vh - 64px);*/
	}

}

/* iPhone 6/7/8 */
@media(min-width: 161px) {
	.renewablesPieBtnText {
		width: 80px;
		font-size: 13px;
		line-height: 14px;
		font-weight: 700;
		color: #5F5F5F;
	}
}
		
/* iPhone 6/7/8 */
@media(min-width: 375px) {
	.overview-capacity-chart {
		margin-bottom: 10px;
	}
	.capacity-chart-labels {
		font-size: 13px;
		line-height: 14px;
	}
	.label-forecasted-peak:after {
		top: -36px;
	}
	#demand,#netDemand,#renewables,#batteries,#imports,#co2Total,#co2,#co2Historical,#supply {
		height: 384px;
	}
		.legend .item .symbol {
			top: 4px;
		}
		.legend {
			font-size: 13px;
			line-height: 16px;
		}
	#supplyPie,#renewablesPie,#co2Pie {
		width: 176px;
		height: 280px;
		margin-left: 8px;
	}
		.legendPie {
			width: 174px;
		}
}
/* iPhone X: Fits in a smaller window than screen*/
@media(min-width: 375px) and (min-height: 608px) {
	#demand,#netDemand,#renewables,#batteries,#imports,#co2Total,#co2,#co2Historical,#supply {
		height: 464px;
	}
	#supplyPie,#renewablesPie,#co2Pie {
		width: 176px;
		height: 280px;
		margin-left: 8px;
	}
		.legendPie {
			width: 174px;
		}
}
/* iPhone 6/7/8 Plus */
@media(min-width: 414px) {
	#demand,#netDemand,#renewables,#batteries,#imports,#co2Total,#co2,#co2Historical,#supply {
		height: 424px;
	}
	#supplyPie,#renewablesPie,#co2Pie {
		width: 195px;
		height: 280px;
		margin-left: 8px;
	}
		.legendPie {
			width: 194px;
		}
}
/* iPad Portrait Renewables Pie */
@media(min-width: 304px) {
/*@media(min-width: 304px) and (max-width: 431px) {*/
	#renewablesPieBtn {
		position: absolute;
	    top: 0;
	    left: 50%;
	    margin-left: -78px;
		width: 156px; /*PIE CHART has 10px padding*/
		height: 156px; /*PIE CHART has 10px padding*/
		}
		.renewablesPieBtnLabel {
			font-size: 25px;
			line-height: 25px;
			position: absolute;
		    top: 44px;
		    left: 50%;
		    margin-left: -63px;
		    width: 126px;
		}
			.renewablesPieBtnLabel .percentage {
				text-align: center;
				position: relative;
			}
			.renewablesPieBtnText {
				position: absolute;
				top: 72px;
		    	left: 50%;
		    	margin-left: -63px;
				width: 126px;
				text-align: center;
				font-size: 14px;
				line-height: 16px;
			}
			.col {
				position: static;
			}
	#demandBtn,#netDemandBtn,#renewablesBtn,#renewablesBtn.backwhite,#co2Btn,#co2TotalBtn,#supplyBtn {
		height: calc(100vh - 12px);	
		padding-top: 12px;
	}
	#renewablesBtn,#co2Btn,#co2TotalBtn {
		height: calc(100vh - 24px);
	}
}

/* iPad Portrait Capacity */
@media(min-width: 624px) {
		
	.overview-capacity {
		padding-left: 2px;
		padding-right: 2px;
	}
		.overview-capacity-chart {
			height: 32px;
			border: 2px solid #303030;
			margin: 11px 0 12px;
		}
		.capacity-chart-labels {
			font-size: 15px;
			line-height: 16px;
		}
		.label-forecasted-peak:after {
		    top: -44px;
		    height: 40px;
		}
}

/* iPad Portriat Pie Charts: Fits in a smaller window than screen */
@media(min-width: 624px) {
	.row {
		/*justify-content: flex-start;*/
		justify-content: center;
		height: 100vh;
	}
	.timer-container {
		background: #fff;
		margin-bottom: 64px;
	}
	#supplyPie,#renewablesPie,#co2Pie {
		width: 248px;
		height: 280px;
		margin-left: 40px;
		margin-right: 32px;
	}
		#co2Pie {
			width: 200px;
			height: 200px;
			margin-left: 24px;
			margin-right: 24px;
		}
		.legendPie {
			width: 292px;
			font-size: 18px;
			padding-top: 16px;
			padding-bottom: 0;
			margin-right: 6px;
		}
			#co2PieLegend.legendPie {
				width: 368px;
			}
			.legendPie .item .symbol {
				width: 12px;
				height: 12px;
				border-radius: 6px;
				top: 4px;
			}
			.legendPie .item .serieName {
				padding-left: 16px;
				padding-top: 2px;
				padding-bottom: 18px;
			}
			.legendPie .item .serieName .numbers {
				display:inline-block;
				float: right;
			}
				.legendPie .item .serieName .numbers span {
					font-size: 14px;
				}
		
}
/* iPad Portriat: Fits in a smaller window than screen */
@media(min-width: 640px) {
		
	#demand,#netDemand,#renewables,#batteries,#imports,#co2Total,#co2,#co2Historical,#supply {
		height: 656px;
		padding-left: 32px;
	}
	
	#theLabel {
		font-size: 18px !important;
		line-height: 20px;
	}
		.legend {
			font-size: 18px;
			line-height: 20px;
			padding: 0 0 0 32px;
		}
		.legend .item .symbol {
			width: 12px;
			height: 12px;
			border-radius: 6px;
			top: 4px;
		}
		.legend .item .serieName {
			padding-left: 16px;
		}
			
}


/* iPad Landscape: Fits in a smaller window than screen */
@media(min-width: 880px) {
	.overview-capacity {
		display: flex;
		padding-left: 1px;
		padding-right: 1px;
	}
	.capacity-container {
		order: 99;
		padding: 2px 0 4px 27px;
		background: transparent url('../../img/ico-available-capacity.svg') no-repeat -6px 12px;
		background-size: 35px 35px;
	}
	.overview-capacity-chart-container {
		flex-grow: 1;
		order: 1;
		padding-right: 16px;
	}
	/*.overview-capacity-chart, .capacity-chart-labels-container {
		width: 70%;
	}*/
	.overview-capacity .capacity-capacity {
		float: none;
		padding-top: 0;
		margin-top: 7px;
	}
	.label-capacity-capacity {
		display: none;
	}
	.label-capacity-capacity-tablet {
		display: block;
		font-size: 15px;
		line-height: 16px;
		font-weight: 700;
   		color: #5F5F5F;
   		margin-top: -2px;
	}
	#demand, #netDemand, #renewables, #batteries, #imports, #co2Total, #co2, #co2Historical,#supply {
		height: 472px;
	}
	
	#supplyPie, #renewablesPie, #co2Pie {
		width: 248px;
		height: 280px;
		margin-left: 104px;
    	margin-right: 88px;
    }
		.legendPie {
			width: 430px;
			font-size: 18px;
			padding-top: 16px;
			padding-bottom: 0;
		}
			#co2PieLegend.legendPie {
				width: 430px;
			}
			.legendPie .item .symbol {
				width: 12px;
				height: 12px;
				border-radius: 6px;
				top: 4px;
			}
			.legendPie .item .serieName {
				padding-left: 16px;
				padding-top: 2px;
				padding-bottom: 18px;
			}
			.legendPie .item .serieName .numbers {
				display: inline-block;
				float: right;
			}
				.legendPie .item .serieName .numbers span {
					font-size: 14px;
				}
}