:root {
	--dark: #17202a;
	--white: #FFF;
	--light: #85c1e9;
	--lightgrey: #d0d3d4;
	--grey: #808080;
	--green: #27ae60;
	--yellow: #d68910;
	--red:#c0392b;
	--purple: #af7ac5;
	--orange: #FFA500;
	--brown: #A52A2A;
	--steelblue: #21618c;
	--lastcgm: 4.5vmin;
	--textshadowgreen: 
		0 0 1px #0fa,
		0 0 2px #0fa,
		0 0 5px #0fa; 
	--textshadowred:
		0 0 1px #E30,
		0 0 2px #E30,
		0 0 5px #E30;
	--textshadowyellow:
		0 0 1px #ff0,
		0 0 2px #ff0,
		0 0 5px #ff0;
	--textshadowblue:
		0 0 1px #00f,
		0 0 2px #00f,
		0 0 5px #00f;
	--textshadowpurple:
		0 0 1px #800,
		0 0 2px #800,
		0 0 5px #800;
	--textshadowwhite:
		0 0 1px #ffc,
		0 0 2px #ffc,
		0 0 5px #ffc;
	--textshadowwhitesmall:
		0 0 1px #ffc,
		0 0 1px #ffc,
		0 0 1px #ffc;
}

body, html { 
	background-color:var(--dark);
	margin:0;
	padding:0;
}

#page {
	display: grid;
	grid-template-areas: 
		'clock clock clock clock clock photo'
		'cgm cgm cgmavg1hr cgmavg3d cgmavg60d photo'
		'cgm cgm cgmavg3hr cgmavg7d cgmavg90d photo'
		'cgm cgm cgmavg12hr cgmavg14d cgmavg120d news'
		'a1c inrange_last24 cgmavg24hr cgmavg30d cgmavg180d news'
		'cgm3hr cgm3hr cgm3hr cgm3hr cgm3hr news'
		'mppt weather weather weather weather weather';
	grid-template-rows: 7% 10% 10% 10% 10% 23% 30%;	
	grid-template-columns: 15% 19% 12% 12% 12% 30%;	
	width: 100%;
	height: 100%;
	overflow:hidden;
}

#cgm {
	grid-area: cgm;
	display:grid;
	grid-template-areas:
		'readingtime trend'
		'value value';
	width:100%;
}

#value{
        grid-area: value;
        border:0px solid blue;
        font-size: 22vmin;
        margin:auto;
}

#trend{
	border:0px solid blue;
        grid-area: trend;
        font-size: 5vmin;
        text-align: center;
        margin:auto;
	margin-left:1em;
	width:100%;
}

#readingtime{
        grid-area: readingtime;
        font-size: 5vmin;
        text-align:center;
        margin:auto;
}

.CurrentReading{
	color: var(--green);
	text-shadow: var(--textshadowgreen);
}
.OverDueReading{
	color:  var(--yellow);
	text-shadow: var(--textshadowyellow);
}
.OldReading{
	color: var(--red);
	text-shadow: var(--textshadowred);
}

.inRange{
	color: var(--green);
	text-shadow: var(--textshadowgreen);
}
.midRange{
	color: var(--yellow);
	text-shadow: var(--textshadowyellow);
}
.outRange {
	color: var(--red);
	text-shadow: var(--textshadowred);
}

.GoodTrend{
	color:  var(--green);
	text-shadow: var(--textshadowgreen);

}
.MidTrend{
	color: var(--yellow);
	text-shadow: var(--textshadowyellow);
}

.BadTrend{
	color: var(--red);
	text-shadow: var(--textshadowred);
}

#inrange_last24{
	grid-area: inrange_last24;
	font-size: 3vmin;
	color: var(--steelblue);
	margin:auto;
	text-shadow: var(--textshadowblue);
}

#a1c{
	grid-area: a1c;
	font-size: 3vmin;
	color: var(--purple);
	margin:auto;
	text-align:center;
	text-shadow: var(--textshadowpurple);
}

#cgmavg1hr{
        grid-area: cgmavg1hr;
        font-size: var(--lastcgm);
}

#cgmavg3hr{
        grid-area: cgmavg3hr;
        font-size: var(--lastcgm);
}

#cgmavg12hr{
        grid-area: cgmavg12hr;
        font-size: var(--lastcgm);
}


#cgmavg24hr{
        grid-area: cgmavg24hr;
	font-size: var(--lastcgm);
}
#cgmavg3d{
        grid-area: cgmavg3d;
        font-size: var(--lastcgm);
}

#cgmavg7d{
        grid-area: cgmavg7d;
        font-size: var(--lastcgm);
}

#cgmavg14d{
        grid-area: cgmavg14d;
        font-size: var(--lastcgm);
}

#cgmavg30d{
        grid-area: cgmavg30d;
        font-size: var(--lastcgm);
}

#cgmavg60d{
        grid-area: cgmavg60d;
        font-size: var(--lastcgm);
}

#cgmavg90d{
        grid-area: cgmavg90d;
        font-size: var(--lastcgm);
}

#cgmavg120d{
        grid-area: cgmavg120d;
        font-size: var(--lastcgm);
}

#cgmavg180d{
        grid-area: cgmavg180d;
        font-size: var(--lastcgm);
}


#cgm3hr {
	grid-area: cgm3hr;
	background-color: var(--dark);
	border:0px solid green;
}

#photo{
	grid-area: photo;
        border-left: 5px groove var(--steelblue);
        border-bottom: 5px groove var(--steelblue);
        border-radius: 0px 0px 0px 26px;
	width:100%;
	height:100%;
	margin-left:1vh;
	display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;

}
#photocount{
	color: var(--black);
	text-shadow: var(--textshadowwhite);
	position:relative;
	top: -20px;
	left: 5px;
}

#meme {
	max-height:27vh;
	max-width:29vw;
	border-radius: 26px;
}

.data_label {
	color: var(--lightgrey);
	font-size:2vmin;
	margin-left:5px;
	white-space: nowrap;
	text-shadow: var(--textshadowwhite);
}

#news { 
	grid-area: news;
	margin-left:1em;
	border-top: 5px groove var(--steelblue);
	border-left: 5px groove var(--steelblue);
        border-bottom: 5px groove var(--steelblue);
        border-radius: 26px 0px 0px 26px;
	display: flex;
        justify-content: center;
        align-items: center;
	text-align: center;
	margin-top:1vh;
	margin-bottom:1vh;
}


#news a{
	text-decoration: none;
	font-size:2vmin;
	color: var(--light);
}

#news img{
	border-radius: 12px;
	max-width:26vw;
	max-height:26vh;

}

#clock {
	grid-area: clock;
	display:grid;
	grid-template-areas:
		'time date';
	font-size: 5vmin;
	white-space: nowrap;
	color: var(--lightgrey);
	text-shadow: var(--textshadowwhite);
        border-right: 5px groove var(--steelblue);
        border-bottom: 5px groove var(--steelblue);
        border-radius: 0px 0px 26px 0px;
}


#time{
	grid-area time;
	margin:auto;
}

#date{
	grid-area date;
	margin:auto;
}

/*Note Area*/
#note {
	font-size: 3vmin; 
	grid-area: note;
	color: var(--lightgrey);
	display:none;
}

/*Solar Area*/
#mppt {
	grid-area: mppt;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;	
	width:100%;
	height:100%;
	border-top: 5px groove var(--steelblue);
	border-right: 5px groove var(--steelblue);
	border-radius: 0px 26px 0px 0px;
	margin:0;
	font-size:2vmin;
	background-image: url("../img/sun.png");
	background-size: 7% 7%;
	background-repeat: no-repeat;
	background-position: left 20px top 10px; 
	overflow:hidden;
} 


.mppt_data_label {
	width:50%;
	text-align:left;
	margin-left:.5em;
	color: var(--lightgrey);
	white-space: nowrap;
	display:inline-block;
}

.mppt_data {
	width:100%;
	text-align:right;
	margin-right:.25em;
	color: var(--lightgrey);
	display:inline-block;
	white-space: nowrap;
}


#mppt_state {
	width:100%;
	text-align:right;
	margin-right:.25em;
	display:inline-block;
	white-space: nowrap;
}

.BULK {
	color:var(--orange);
}

.OFF {
	color:var(--grey);
}
.ABSORPTION {
	color:var(--yellow);
}
.FLOAT {
	color:var(--green);
}


#mppt_voltage {
	text-align:right;
	width:100%;
	margin-right:.25em;
	display:inline-block;
	white-space: nowrap;
}


.SoC100 {color: var(--green);}
.SoC90 {color: var(--steelblue);}
.SoC80 {color: var(--purple);}
.SoC70 {color: var(--yellow);}
.SoC60 {color: var(--orange);}
.SoC50 {color: var(--brown);}
.SoCWARNING {
	color: var(--red);
	animation: flash .5s infinite;
}

@keyframes flash {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}

#mppt_charging {
	text-align:right;
	margin-right:.25em;
	width:100%;
	display:inline-block;
	white-space: nowrap;
}

.discharging {
	color: var(--red);
}

.charging {
	color: var(--green);
}

.nominal {
	color: var(--lightgrey);
}

#mppt_solar {
	text-align:right;
	margin-right:.25em;
	width:100%;
	display:inline-block;
	white-space: nowrap;
}

#mppt_current {
	text-align:right;
	margin-right:.25em;
	width:100%;
	display:inline-block;
	white-space: nowrap;
}


#mppt_savings {
	text-align:right;
	margin-right:.25em;
	color: var(--lightgrey);
	display:inline-block;
	width:100%;
	white-space: nowrap;

}
/*Weather Area */

#weather {
	display:grid;
	grid-area: weather;
	grid-template-areas:
	        'weathertemp radar weatherhourly';
	grid-template-columns: 15% 35% 50%;	
	color: var(--lightgrey);
	border-top: 5px groove var(--steelblue);
	border-left: 5px groove var(--steelblue);
	border-radius: 26px 0px 0px 0px;
	width:100%;
	height:100%;
	margin-left:1vw;
}

#weathertemp {
	display:grid;
	grid-area: weathertemp;
	font-size:12vmin;
	margin:auto;
	text-shadow: var(--textshadowwhite);
}

#localradar{
	grid-area: localradar;
	display:grid;
	height: 100%;
	max-width: 22vw;
	overflow:hidden;
	margin:auto;
	border-radius: 12px;
}

#radar{
	grid-area: radar;
	display:grid;
	height: 100%;
	max-width: 22vw;
	overflow:hidden;
	margin:auto;
	border-radius: 12px;
}

#radar iframe {
	margin-top:-100px;
}

#localradar iframe {
	margin-top:-100px;
}


.humidity{
	font-size: 3vmin;
	margin:auto;
}

#weatherhourly{
	grid-area: weatherhourly;
	display:grid;
	font-size: 3vmin;
	margin:auto;
	width:100%;
	height:100%;
	border: 2px groove var(--steelblue);
}

.period{
	white-space: nowrap;
	text-shadow: var(--textshadowwhitesmall);
	line-height: .9;
	width:100%;
	border-left: 2px groove var(--steelblue);
	border-bottom: 2px groove var(--steelblue);
	border-radius: 0px 0px 0px 26px;
}
#hourlytemp{
	margin-left:1vw;
	font-size:3vmin;
}
.weatherhourlytime {
	color: var(--grey);
	display:inline-block;
	text-align:right;
	font-size: 2.5vmin;
	width:15%;
}
.shortforecast {
	white-space: nowrap;
	color: var(--grey);
	display:inline-block;
	font-size: 2.5vmin;
	margin-left:1vw;
	margin-right:.5vw;
}

.BelowFreezing{
	color:var(--white);
	display:inline-block;
}
.Cool{
	color:var(--light);
	display:inline-block;
}
.Moderate{
	color:var(--steelblue);
	display:inline-block;
}
.Normal{ 
	color: var(--green);
	display:inline-block;
}
.Warm{ 
	color: var(--yellow);
	display:inline-block;
}
.Hot{ 
	color:var(--red);
	display:inline-block;
}