:root {
	--level-1-color:			hsl(0deg, 100%, 40%);
	--level-2-color:			hsl(30deg, 100%, 40%);
	--level-3-color:			hsl(60deg, 100%, 40%);
	--level-4-color:			hsl(120deg, 100%, 40%);
	--level-5-color:			hsl(180deg, 100%, 60%); 
	--time-missing-color:		hsl(210deg, 100%, 40%);/*0066CC*/
	--time-now-color:			hsl(270deg, 100%, 40%);
	--logo-lightblue-color:		hsl(221deg, 100%, 45.3%);/*004a99*/
	--logo-darkblue-color:			hsl(212deg, 100%, 20.2%);/*003067*/
	--logo-grey-color:				hsl(240deg, 1.1%, 34.9%);/*58585a*/
	--text-color:				hsl(0deg, 0%, 50%);
	--link-color:				hsl(0deg, 0%, 80%);
	--text-under-opacity-color:	hsl(0deg, 0%, 100%);
	--faded-text-color:			hsl(0deg, 0%, 25%);
	--site-border-color:			hsl(0deg, 0%, 12.5%);
	--border-color:				hsl(0deg, 0%, 50%);
	--background-color:			hsl(0deg, 0%, 2.5%);
	--solar-storm-color:			hsl(120deg, 100%, 40%);
	--header-background-color:		hsl(0deg, 0%, 10%);
	--sub-background-color:			hsl(0deg, 0%, 10%);
	--highlight-background-color:	hsl(0deg, 0%, 20%);
	--slot-background-odd-color:	hsl(0deg, 0%, 5%);
	--slot-background-even-color:	hsl(0deg, 0%, 10%);
	--slot-incomplete-color: 		hsl(30deg, 100%, 40%);
	--purchase-button-color:		hsl(120deg, 25%, 50%);
	--purchase-button-clicked-color:		hsl(221deg, 25%, 50%);	
	--purchase-button-error-color:		hsl(0deg, 70%, 30%);	
/* 	--:	hsl(240deg, 100%, 40%) !important; */
/* 	--:	hsl(300deg, 100%, 40%) !important; */
/* 	--:	hsl(330deg, 100%, 40%) !important; */
	/* Menu font sizes are set in pixels to ensure proper fit in layout */
	--font-size-menu-button: 32px;
	--font-size-menu-item: 24px;
	--font-size-menu-button-small: 24px;
	/* font sizes */
	--font-size-070: 0.7em;/* S */
	--font-size-085: 0.85em;
	--font-size-100: 1.0em;/* M (base) */
	--font-size-110: 1.1em;/* L */
	--font-size-120: 1.2em;/* XL */
	--disabled-location-button-color:	hsl(0deg, 0%, 10%);
	--location-save-button-color:		hsl(120deg, 80%, 40%);
	--location-reset-button-color:		hsl(30deg, 80%, 40%);
	--deviation-high-color:				hsl(240deg, 100%, 12.5%);
}

body {
	background:var(--background-color);
	color:var(--text-color);
	font-family: Arial; 
	margin: 8px auto;
	min-height: calc(100vh - 16px);
	width: calc(100vw - 16px);
	font-size: calc(15px + 0.390625vw); /* dynamic sizing at all sizes */
    overflow-x: hidden;/* prevent sideways scrolling */
	max-width: calc(550px + 15vw);
}

body > div { 
	width: calc(100vw - 16px);
	background:var(--background-color);
	max-width: calc(550px + 15vw);
	padding:4px 0; 
	z-index: 9;
}

#nav-head { 
	top: 0;
	display:none;
	grid-template-columns: repeat(3, 64px); 
	grid-template-rows: auto;
	gap: 4px;
	justify-items: start; 
	align-items: end;
	justify-content: space-between;
}

body > div.content { 
	display:none;
	position:relative;
	min-height:calc(100vh - 16px - 75px);
	margin-top: 56px;
	padding-bottom:64px !important;
}

#nav-head,
#footer {
	position: fixed;
	background-color:rgba(0, 0, 0, 0.85);
	z-index: 10;
}

#footer {
	bottom:0;
	display:grid;
	grid-template-columns: auto auto 1fr;
	column-gap: 1%;
	font-size:var(--font-size-070);
	color: var(--text-color);
	border-top: 1px solid var(--site-border-color);
	visibility:hidden;
}

@media only screen and (max-width: 560px) {
	/* 320px is the smallest viewport that needs supporting
	/*@560: 15 + 2.1875 = 17.1875 across 560 gives factor */
	body { 
/* 		font-size:calc(3px + 2.5334821429vw); */
		font-size:calc(4px + 2.3549107143vw);  /* holds 320px width */
/* 		font-size:calc(5px + 2.1763392857vw); */
	}
}

@media only screen and (min-width: 660px) {
	body::before {
		content: ' ';
		display: block;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		opacity: 0.25;

		background-image: url("https://cdn.aurorascout.com/assets/css/background-005.jpg");
		background-attachment: fixed;
		background-size: cover;
		background-repeat: no-repeat;
		background-color: var(--background-color); 
	}
	body > div { 
		max-width: calc(550px + 10vw);
		padding: 4px 2.5vw; 
		border-left: 1px solid var(--site-border-color);
		border-right: 1px solid var(--site-border-color);
	}
	body > div#footer { 
		border-left: 1px solid var(--background-color);
		border-right: 1px solid var(--background-color);
	}
}

table 			{ clear:both; }
td 				{ text-align: left; padding-right:2px; }

/* dispalyTopics */
/* body.display-forecast #forecast,   */
body.display-weather  #weather,  
body.display-info 	  #info,
body.display-settings #settings {
	display: block; 
}

body.display-forecast #forecast {
	display: grid;
}
  
body.display-location #location {
	display: grid; 
}


/* BEGIN - Navigation */
/* Buttons */
button {
	background-color:transparent;
	border:none;
	display:inline-block;
	cursor:pointer;
	color:var(--link-color);
	font-weight:bold;
	height:48px;
	width: 48px;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	padding:0;/* iOS UA override*/
}

button .fa-solid { font-size:var(--font-size-menu-button); }
button.nav-head-forecast { width: 61px; }
button.nav-head-forecast::before { 
	background-image: url('https://cdn.aurorascout.com/assets/css/fox-logo-inactive.svg') !important;
	display: inline-block;
	width: 61px;
	height: 48px;
	background-size: 61px 48px;
	content: "";
}

/* highlight active button */
body.display-weather button.nav-head-weather,  
body.display-location button.nav-head-location, 
body.display-info button.nav-head-info,
body.display-settings button.nav-head-settings { 
	color: var(--logo-lightblue-color);
}

button.nav-head-info {
	font-size:var(--font-size-menu-button);
	font-family:Verdana;
}

body.display-forecast button.nav-head-forecast::before { 
	background-image: url('https://cdn.aurorascout.com/assets/css/fox-logo.svg') !important;
}

button.nav-head-item.nav-head-weather { justify-self:right; }

body.display-location, 
body.display-weather {
	overflow-y: hidden;
}

/* NAV */
#nav-container {
	pointer-events: none;
	justify-self:left;
}

#nav-container .bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	visibility: hidden;
	opacity: 0;
	transition: .3s;
	background: var(--background-color);
	z-index:98;
}

#nav-container:focus-within .bg {
	visibility: visible;
	opacity: .6;
}

#nav-container * {
	visibility: visible;
}

/*** BEGIN - Hamburger */
.menu-button {
	position:relative;
	z-index: 100;/* above .bg */
	pointer-events: auto;
	touch-action: manipulation;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

.icon-bar {
	display: block;
	width: 80%;
	margin: 0 10%;
	height: 3px;
	background: var(--link-color);
	transition: .3s;
}

.icon-bar + .icon-bar { margin-top: 5px; }
/*#nav-container:focus-within .menu-button { pointer-events: none; }*/
#nav-container:focus-within .icon-bar:nth-of-type(1) { transform: translate3d(0,8px,0) rotate(45deg); }
#nav-container:focus-within .icon-bar:nth-of-type(2) { opacity: 0; }
#nav-container:focus-within .icon-bar:nth-of-type(3) { transform: translate3d(0,-8px,0) rotate(-45deg); }
/*** END - Hamburger */

#nav-content {
	margin-top: 56px;
	padding: 20px 12px 20px 12px;
	width: 90%;
	max-width: 300px;
	position: absolute;
	top: 0;
	left: 0;
	min-height: calc(100vh - 40px - 59px);
	background: var(--sub-background-color);
	pointer-events: auto;
	-webkit-tap-highlight-color: var(--background-color);
	contain: paint;
	z-index:99;
	display:none;
}

#nav-container:focus-within #nav-content {
	display:block;/* diplay:none prevents clicking accedentally and will make transitions impossible */
}

#nav-options {
	display:grid;	
	grid-template-columns: 1fr; 
	grid-template-rows: auto;
	justify-items: start; 
	align-items: center;
	gap: 8px;
}

.nav-item   {
	width:100%;
	cursor:pointer;
	pointer-events: auto;
	color:var(--link-color) !important;
	text-decoration:none;
}
.nav-item:hover { background:var(--highlight-background-color); }
.nav-item button { pointer-events: none; }   
.nav-item span { margin-left: 16px; }

#nav-options a.nav-item{
	display:grid;
	grid-template-columns: calc(2 * var(--font-size-menu-button)) auto;
}
#nav-options a.nav-item button {
	grid-column: 1 / 2;
	justify-self:center;
}
#nav-options a.nav-item span { 
	grid-column: 2 / 3;
	line-height:calc(2 * var(--font-size-menu-item));
	font-size: var(--font-size-menu-item);
}
/* END - Navigation */

/* BEGIN - Forecast */
/* Set up the same column structure for both since subgrid is not supported yet  */
.forecast,
.forecast-slot {
	display:grid;
/* 	grid-template-columns: subgrid; no chrome support */
	grid-template-columns: 7.5em 3.25em 5.5em 1fr; 
	column-gap: 0.6%;
}

.forecast { 
	justify-items: start; 
	align-items: end;
	justify-content: start;
	row-gap: 0.3vw;/*%->vw due to variable height with info toggles pushing content wider*/
}

#forecast {
	grid-template-columns: 1fr; 
	column-gap: 0.6%;
	grid-template-rows: auto 1fr;
}

#forecast #forecast-classic,
#forecast #forecast-images,
#forecast #forecast-timeline,
#forecast #forecast-charts,
#forecast #forecast-numbers {
	display:none;
}

#forecast.classic #forecast-classic,
#forecast.images #forecast-images,
#forecast.timeline #forecast-timeline,
#forecast.charts #forecast-charts,
#forecast.numbers #forecast-numbers {
	display:block;
}

.forecast-menu {
	width:100%;
	clear:both;
/* 	border-top: 1px solid var(--text-color);	 */
	margin-top:0.25em;
/* 	border-bottom: 1px solid var(--text-color);	 */
	margin-bottom:0.25em;
}
.forecast-menu div {
	float: left;
	padding: 0.25em;
	color: var(--link-color);
}

.forecast-menu div {
	margin-right:1em;
}
.forecast-menu div i {
	margin-right:0.25em;
}

#forecast h3,
.forecast-slot { 
	justify-self: stretch;
    align-self: stretch;
	margin:0; 
}

#forecast h3 { 
	grid-column: 1 / 4;
	padding: 2% 0 2% 0;
	font-size: var(--font-size-120);
}

.forecast-slot { 
	grid-column: 1 / 5;
}

.forecast-slot div {
	justify-self: start;
	align-self: center;
} 

.forecast .period 	{ grid-column: 1 / 2; font-size: var(--font-size-100); padding: 5px 0px; }
.forecast .kp 		{ grid-column: 2 / 3; font-size: var(--font-size-100); }
.forecast .moon 	{ grid-column: 3 / 4; font-size: var(--font-size-070); }
.forecast .sun 		{ grid-column: 4 / 5; font-size: var(--font-size-070); } 
.forecast .info		{ grid-column: 1 / 5; font-size: var(--font-size-085); } 

.forecast-slot .period a { color:var(--link-color); text-decoration:none; }
.forecast-slot.current .period a,
.forecast-slot.current .period { color:var(--time-now-color); }
/* .forecast-slot.current .period .fa-circle-info { color:var(--link-color); }  */

.forecast-slot .kp,
.forecast-slot .sun,
.forecast-slot .moon {
	white-space: nowrap;
	padding: 0 4px;
	border-left: 1px dotted var(--border-color);
}

.forecast-slot .moon {
	display: grid; 
	grid-template-columns: auto auto auto auto ; 
	grid-template-rows: auto auto;
	justify-items: start; 
	align-items: end;
	justify-content: start;
	gap: 2px;
}
.forecast-slot .moon .fa-moon    		{ grid-column: 1 / 2; grid-row: 1 / 3; align-self: center; }
.forecast-slot .moon .moon-phase 		{ grid-column: 2 / 3; grid-row: 1 / 3; align-self: center; }
.forecast-slot .moon .moon-altitude 	{ grid-column: 3 / 5; grid-row: 1 / 2; }
.forecast-slot .moon .fa-location-arrow { grid-column: 3 / 4; grid-row: 2 / 3; align-self: center; }
.forecast-slot .moon .moon-azimuth 		{ grid-column: 4 / 5; grid-row: 2 / 3; }

.forecast .solar-storm { color: var(--solar-storm-color); }

.forecast .info {
	display: grid;
/*	grid-template-columns: repeat(5, 64px) auto; */
	grid-template-rows: auto;
	justify-items: start; 
	align-items: end;
	justify-content: start;
/* 	max-width:512px; */
	row-gap: 1em;/*4px;/*%->vw due to variable height with info toggles pushing content wider*/
	background:var(--sub-background-color);
	padding:4px 4px 16px 4px;
	width: calc(100% - 8px);
}

.forecast .info .darkSky,
.forecast .info .images,
.forecast .info figure { 
	grid-column: 1 / 7;
	justify-self: normal;
    align-self: baseline;
	width:100%;
}

.forecast .info figure {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	overflow: hidden;
	cursor: zoom-in;
	margin:0 0 8px 0;
	touch-action: pan-y;
/* 	display:grid; */
	grid-template-columns: auto; 
	grid-template-rows: auto;
	display:none;
/* 	max-width:512px; */
	padding:0;
	touch-action: none; /* prevent native UA handling, iOS stutter? */
	aspect-ratio: 1; /* default for 0193/hmiic/c3/oval*/
}

.forecast .info figure#image-toggle-enlil,
.forecast .info figure#image-toggle-enlil-nowcast {
	aspect-ratio: 960/600;
}


.forecast .info .forecast-image-container.playing figure {
	cursor: default;
}

.forecast .info figure.zooming img { opacity: 0; }

.forecast .info figure img {
/* 	transition: opacity 0.5s; */
	width: 100%;
	grid-area: 1 / 1 / 2 / 2;
	z-index:4;
	padding:0;
}

.forecast .info figure i {
	grid-area: 1 / 1 / 2 / 2;
	z-index:5;
	align-self: start;
	justify-self: end;
	padding:1%;	
}

.forecast .info .darkSky { padding:0 0 0 20px; width:calc(100% - 20px); }
.forecast .info .darkSky.header,
.forecast .info .images.header { padding:8px 0 0 0; width:100%; }

#newLayoutMessage button,
.forecast-menu button,
.forecast .info button { 
  	justify-self: stretch;
    align-self: stretch;
	text-align: center;
	background-color:var(--logo-darkblue-color);
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	border-radius:8px;
	height:unset;
	width: unset;
	padding:8px;
	/*word-spacing: 100vw; /* force each word on a new line */ 
}

.forecast-menu button {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	font-size: var(--font-size-085);
/* 	min-height:48px; */
}

.forecast-menu button i {
	font-size: var(--font-size-120);
}

@media only screen and (max-width: 375px) {
	.forecast-menu button,
	.forecast .info button { padding: 8px 4px; }
}

#newLayoutMessage button,
#forecast.classic #menu-forecast-classic,
#forecast.images #menu-forecast-images,
#forecast.timeline #menu-forecast-timeline,
#forecast.charts #menu-forecast-charts,
#forecast.numbers #menu-forecast-numbers,
.forecast .info button.expanded {
	background-color:var(--purchase-button-color);
}

/* active buttons */
#forecast-charts.chart-history-24h #chartHistory24h,
#forecast-charts.chart-history-12h #chartHistory12h,
#forecast-charts.chart-history-4h #chartHistory4h,
#forecast-charts.chart-history-1h #chartHistory1h,
#forecast-charts.eta-chart #etaChartButton,
#forecast-charts.imf-chart #imfChartButton {
	background-color:var(--purchase-button-color);
}
.forecast-chart-history-buttons {
	display:flex;
	justify-self: end;
	gap: 5%;
  	justify-content: end;
}

button.chart-history {
	min-width:3em !important;
	max-width:3em !important;
	display:block !important;
}

@media only screen and (max-width: 560px) {
	.forecast-charts-button-row button {
		font-size: var(--font-size-085) !important;
	}
}

/*.forecast .info button.expanded.all-images {*/
/*	background-color:var(--logo-darkblue-color);*/
/*}*/

#forecast .experimental-values {
	grid-column: 1 / 5;
	font-size: var(--font-size-070);
	text-align: left;
	padding-top: 8px;
}

.forecast-charts-button-row.info {
	background:unset;
	padding:0;
	padding-bottom:4px;
}

.forecast-charts-button-row.info button {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
}

#forecast-charts canvas {
	display:none !important;
}

#forecast-charts.eta-chart canvas#solarWindChartsL1Eta,
#forecast-charts.imf-chart canvas#solarWindMagneticField {
	display:block !important;
}

.forecast-charts-button-row,
.forecast-image-button-row {
	display: grid;
	grid-gap: 2%;
	grid-auto-flow: column;
}

/* .forecast-charts-button-row, */
.forecast-image-button-row { grid-template-columns: repeat(5, 1fr); }
.forecast-charts-button-row { grid-template-columns: 1fr 1fr 2fr; }
/* .forecast-image-button-row.max-toggle-image-0 { grid-template-columns: repeat(1, 1fr); min-width: 20%; } */
/* .forecast-image-button-row.max-toggle-image-1 { grid-template-columns: repeat(2, 1fr); } */
/* .forecast-image-button-row.max-toggle-image-2 { grid-template-columns: repeat(3, 1fr); } */
.forecast-charts-button-row.max-toggle-image-3,
.forecast-image-button-row.max-toggle-image-3 { grid-template-columns: repeat(4, 1fr); }
.forecast-charts-button-row.max-toggle-image-4,
.forecast-image-button-row.max-toggle-image-4 { grid-template-columns: repeat(5, 1fr); }
.forecast-charts-button-row.max-toggle-image-5,
.forecast-image-button-row.max-toggle-image-5 { grid-template-columns: repeat(6, 1fr); }

@media only screen and (max-width: 560px) {
	.forecast-charts-button-row.max-toggle-image-5,
	.forecast-image-button-row.max-toggle-image-5 { 
		grid-template-columns: repeat(3, 1fr);
	    grid-template-rows: auto auto;
	    grid-row-gap: 5%;
	    grid-auto-flow: row;
    }
}

.forecast .info .forecast-image-container {
	display: grid;
	row-gap: 1em;/* 2% using a % will mess with the layout as the parent grid won;t scale properly */;
} 

.forecast .info .forecast-image-container.playing .fa-magnifying-glass-plus {
	display: none;
}

.forecast .info .forecast-image-container.toggle-image-0 figure.toggle-image-0,
.forecast .info .forecast-image-container.toggle-image-1 figure.toggle-image-1,
.forecast .info .forecast-image-container.toggle-image-2 figure.toggle-image-2,
.forecast .info .forecast-image-container.toggle-image-3 figure.toggle-image-3,
.forecast .info .forecast-image-container.toggle-image-4 figure.toggle-image-4,
.forecast .info .forecast-image-container.toggle-image-5 figure.toggle-image-5,
.forecast .info .forecast-image-container.toggle-image-6 figure.toggle-image-6 { display:grid; margin:auto; }

.forecast .info .forecast-image-comment { padding: 0 1em; line-height: 2em; }
.forecast .info .forecast-image-comment div { display:none; } 
.forecast .info .forecast-image-comment small { font-size: var(--font-size-070); }
.forecast .info .forecast-image-container.toggle-image-0 .toggle-comment-0,
.forecast .info .forecast-image-container.toggle-image-1 .toggle-comment-1,
.forecast .info .forecast-image-container.toggle-image-2 .toggle-comment-2,
.forecast .info .forecast-image-container.toggle-image-3 .toggle-comment-3,
.forecast .info .forecast-image-container.toggle-image-4 .toggle-comment-4,
.forecast .info .forecast-image-container.toggle-image-5 .toggle-comment-5,
.forecast .info .forecast-image-container.toggle-image-6 .toggle-comment-6 { display:block; }

.forecast .info .forecast-image-scroll div { display:none; } 
.forecast .info .forecast-image-container.toggle-image-0 .toggle-scroll-0,
.forecast .info .forecast-image-container.toggle-image-1 .toggle-scroll-1,
.forecast .info .forecast-image-container.toggle-image-2 .toggle-scroll-2,
.forecast .info .forecast-image-container.toggle-image-3 .toggle-scroll-3,
.forecast .info .forecast-image-container.toggle-image-4 .toggle-scroll-4,
.forecast .info .forecast-image-container.toggle-image-5 .toggle-scroll-5,
.forecast .info .forecast-image-container.toggle-image-6 .toggle-scroll-6 { display:grid; grid-template-columns: 4em 1fr 1em; }
/*.forecast .info .forecast-image-container.toggle-image-0 button.toggle-image-0 { background-color:var(--purchase-button-color); }*/
/*.forecast .info .forecast-image-container.toggle-image-1 button.toggle-image-1,*/
/*.forecast .info .forecast-image-container.toggle-image-2 button.toggle-image-2,*/
/*.forecast .info .forecast-image-container.toggle-image-3 button.toggle-image-3,*/
/*.forecast .info .forecast-image-container.toggle-image-4 button.toggle-image-4,*/
/*.forecast .info .forecast-image-container.toggle-image-5 button.toggle-image-5,*/
/*.forecast .info .forecast-image-container.toggle-image-6 button.toggle-image-6 { background-color:var(--purchase-button-color); }*/
/*.forecast .info .forecast-image-container.toggle-image-0 .previous-toggle-image,*/
/*.forecast .info .forecast-image-container.toggle-image-1 .max-toggle-image-1 .next-toggle-image,*/
/*.forecast .info .forecast-image-container.toggle-image-2 .max-toggle-image-2 .next-toggle-image,*/
/*.forecast .info .forecast-image-container.toggle-image-3 .max-toggle-image-3 .next-toggle-image,*/
/*.forecast .info .forecast-image-container.toggle-image-4 .max-toggle-image-4 .next-toggle-image,*/
/*.forecast .info .forecast-image-container.toggle-image-5 .max-toggle-image-5 .next-toggle-image,*/
/*.forecast .info .forecast-image-container.toggle-image-6 .max-toggle-image-6 .next-toggle-image {*/
/*	cursor: not-allowed;*/
/*	pointer-events: none;*/
/*	color: var(--link-color);*/
/*	background-color: var(--sub-background-color);*/
/*}*/
/*.forecast .info .forecast-image-container button.previous-toggle-image,*/
/*.forecast .info .forecast-image-container button.next-toggle-image { width:48px; } */
.forecast .info .forecast-image-row { width: 100%; /*aspect-ratio: 1 / 1;*/ }



/* END - Forecast */

/* BEGIN - Nowcast */
.nowcast { 
	grid-column: 1 / 5;
  	justify-self: stretch;/* left for >660px */
    align-self: stretch;

	display:grid; 
	grid-template-columns: repeat(8, 1fr); 
	justify-items: stretch; 
	align-items: stretch;
	
	background-color: var(--sub-background-color);
	text-align: center;
	padding:1%;
}

@media only screen and (min-width: 660px) {
	.nowcast { max-width: calc(550px + 8vw); }
}

.nowcast.no-data { display:block; } 

.nowcast-title,
.nowcast-header,
.nowcast-footer,
.nowcast-slot {
	grid-column: 1 / 11;
	justify-self: stretch;
    align-self: stretch;
	margin:0; 
	
	display:grid; 
	grid-template-columns: repeat(8, 1fr);
/* 	grid-template-columns: subgrid; no chrome support */
	justify-items: stretch; 
	align-items: stretch;
	padding:1px 0;
	white-space: nowrap;
}

.nowcast-title{
	grid-template-columns: auto;
	font-size: var(--font-size-070);
}

.nowcast-header { font-size:var(--font-size-070); }

.nowcast-slot.odd 		{ background-color:var(--slot-background-odd-color); }
.nowcast-slot.even 		{ background-color:var(--slot-background-even-color); }
.nowcast-slot.current 	{ color:var(--text-color); }
/* .nowcast-slot.current 				.time { background:var(--text-color); color:var(--background-color); } */
.nowcast-slot.passing-eta 			.eta  { color:var(--time-missing-color); }
.nowcast-slot.missing-eta 			.eta  { border-top: 1px solid var(--time-now-color); }
.nowcast-slot.missing-upcoming-eta 	.eta  { border-top: 1px solid var(--time-missing-color); }
.nowcast-slot.now 					.eta  { color:var(--time-now-color); font-weight:bold; }
/* .nowcast-slot.past.incomplete  		.time { color:var(--slot-incomplete-color); } */
.nowcast-slot.incomplete { opacity: 0.5; }
/* .nowcast-slot.incomplete  		.time { color:var(--slot-incomplete-color); } */

.nowcast-slot .notification {
	grid-column-start: 2;
	grid-column-end: 10;
	font-size: var(--font-size-070);
	color: var(--text-under-opacity-color);
}

.nowcast-slot .time { font-size: var(--font-size-070); }

.nowcast-header .time a { color: var(--link-color); text-decoration: none; }
.nowcast-header .time i { display:none; }
.ascending .nowcast-header .time i.fa-long-arrow-alt-up,
.descending .nowcast-header .time i.fa-long-arrow-alt-down { display: initial; }
/* max 24 slots */
.descending .desc-0 { order: -0; }
.descending .desc-1 { order: -1; }
.descending .desc-2 { order: -2; }
.descending .desc-3 { order: -3; }
.descending .desc-4 { order: -4; }
.descending .desc-5 { order: -5; }
.descending .desc-6 { order: -6; }
.descending .desc-7 { order: -7; }
.descending .desc-8 { order: -8; }
.descending .desc-9 { order: -9; }
.descending .desc-10 { order: -10; }
.descending .desc-11 { order: -11; }
.descending .desc-12 { order: -12; }
.descending .desc-13 { order: -13; }
.descending .desc-14 { order: -14; }
.descending .desc-15 { order: -15; }
.descending .desc-16 { order: -16; }
.descending .desc-17 { order: -17; }
.descending .desc-18 { order: -18; }
.descending .desc-19 { order: -19; }
.descending .desc-20 { order: -20; }
.descending .desc-21 { order: -21; }
.descending .desc-22 { order: -22; }
.descending .desc-23 { order: -23; }
.descending .desc-24 { order: -24; }
.descending .desc-25 { order: -25; }
.descending .desc-26 { order: -26; }
.descending .desc-27 { order: -27; }
.descending .desc-28 { order: -28; }
.descending .desc-29 { order: -29; }
.descending .desc-30 { order: -30; }
.descending .desc-31 { order: -31; }
.descending .desc-32 { order: -32; }
.descending .desc-33 { order: -33; }
.descending .desc-34 { order: -34; }
.descending .desc-35 { order: -35; }
.descending .desc-36 { order: -36; }
.descending .desc-37 { order: -37; }
.descending .desc-38 { order: -38; }
.descending .desc-39 { order: -39; }
.descending .desc-40 { order: -40; }
.descending .desc-41 { order: -41; }
.descending .desc-42 { order: -42; }
.descending .desc-43 { order: -43; }
.descending .desc-44 { order: -44; }
.descending .desc-45 { order: -45; }
.descending .desc-46 { order: -46; }
.descending .desc-47 { order: -47; }
.descending .desc-48 { order: -48; }
.descending .desc-49 { order: -49; }
.descending .desc-50 { order: -50; }
.descending .desc-51 { order: -51; }
.descending .desc-52 { order: -52; }
.descending .desc-53 { order: -53; }
.descending .desc-54 { order: -54; }
.descending .desc-55 { order: -55; }
.descending .desc-56 { order: -56; }
.descending .desc-57 { order: -57; }
.descending .desc-58 { order: -58; }
.descending .desc-59 { order: -59; }
.descending .desc-60 { order: -60; }

.desc-2 { opacity: 0.2; }
.desc-4 { opacity: 0.4; }
.desc-6 { opacity: 0.6; }
.desc-8 { opacity: 0.8; }
/* .desc-10 { opacity: 0.7; } */
/* .desc-12 { opacity: 0.8; } */

.nowcast-slot.hasInfo .time { color: var(--link-color); cursor: pointer; }

.nowcast-header div,
.nowcast-footer div,
.nowcast-slot div { align-self: center; padding:1px;}

.nowcast-footer .roundingNotice {
	grid-column-start: 1;
	grid-column-end: 9;
	font-size: var(--font-size-070); 
}

.nowcast-footer .etaMin {
	grid-column-start: 1;
	grid-column-end: 3;
	text-align:right;
	padding-right:0.5em;
}

.nowcast-footer .travelTime {
	grid-column-start: 3;
	grid-column-end: 5;
	text-align:center;
}

.nowcast-footer .activeSatellites {
	grid-column-start: 5;
	grid-column-end: 9;
	text-align:left;
	padding-left:0.5em;
}

#forecast .nowcast-footer {
	font-size: var(--font-size-085);
/* 	color: var(--text-under-opacity-color); */
}

#forecast:not(.classic) .nowcast-footer {
	grid-row: 1;
}

.nowcast-footer div {
	grid-column: 1 / 9;
	padding-bottom:1%;
}
.nowcast-footer div span {
	font-weight:bold;
}

.deviation-high {
	background-color: var(--deviation-high-color);
}

.nowcastInfo {
	grid-column: 1 / 11;
	justify-self: stretch;
    align-self: stretch;
	margin:0; 
	white-space: nowrap;
	text-align:left;
	font-size:var(--font-size-070);
	padding: 2px 0 5px 0;
/* 	padding: 2px 0 5px 20px; */
/*   	width: calc(100% - 20px); */
  	
/*   	display:grid; */
/* 	grid-template-columns: auto 1fr; */
/* 	justify-items: stretch;  */
/* 	align-items: stretch; */
}

.nowcast-info-all,
.nowcast-info-param,
.nowcast-info-one-minute-slots {
	grid-column: 1 / 11;
	justify-self: stretch;
    align-self: stretch;
	margin:0; 
	
	display:grid; 
	grid-template-columns: repeat(8, 1fr);
/* 	grid-template-columns: subgrid; no chrome support */
	justify-items: stretch; 
	align-items: stretch;
	padding:1px 0;
	white-space: nowrap;
}

.nowcast-info-one-minute-slots div {
  align-self: center;
  padding: 1px;
  text-align: center;
}

.nowcast-info-param {
	display:grid;
	grid-template-columns: auto 1fr;
	justify-items: stretch; 
	align-items: stretch;
}

.nowcast-info-all {
	display:grid;
	grid-template-columns: repeat(3, auto) repeat(5, 1fr);
	justify-items: stretch; 
	align-items: stretch;
	border-top: 0.1em solid var(--border-color);
	border-bottom: 0.1em solid var(--border-color);
}

.nowcast-info-all [class*="minute"],
.nowcast-info-all .average {
	text-align:center;
}

.nowcast-info-all div { padding: 0.2em; }
.nowcast-info-all .title,
.nowcast-info-all .unit { padding-right: 0.5em; }

.nowcast-info-all .title,
.nowcast-info-all .unit,
.nowcast-info-all .minute-4 { border-right: 0.1em solid var(--border-color); }
.nowcast-info-all div.bx,
.nowcast-info-all div.pcc,
.nowcast-info-all div.gwn { border-top: 0.1em dashed var(--border-color); }

.nowcastInfo span   { padding: 4px; }
.nowcastInfo .title { text-align:right; }
.nowcastInfo .odd 	{ background-color:var(--slot-background-odd-color); }
.nowcastInfo .even 	{ background-color:var(--slot-background-even-color); }

/* collapse / expand icon logic */
.expand-toggle.fa-circle-info 		{ font-size:var(--font-size-085); color:var(--text-color); }
/* hide toggle on incomplete rows */ 
.non-experimental .nowcast .expand-toggle.fa-circle-info,
.nowcast-slot.incomplete   .expand-toggle.fa-circle-info { color:transparent; }

.nowcast-slot:not(.hasInfo) .expand-toggle.fa-minus-square,
.nowcast-slot:not(.hasInfo) .expand-toggle.fa-plus-square { color: transparent; }

.nowcast-slot:not(.expanded) .expand-toggle.fa-minus-square,
.nowcast-slot.expanded .expand-toggle.fa-plus-square { display:none; }


/* .basic .expand-toggle.fa-circle-info { display:none; } */
/* mark active by 90deg rotation */
#info .expanded a,
#info .expanded a i,
#settings .expanded a,
.expanded .expand-toggle.fa-circle-info { color: var(--purchase-button-color); }
/* .expanded .expand-toggle.fa-angles-right { transform: rotate(90deg); } */


/* .speed-bz .fa-circle-up.level-0 {  */
/* 	color: var(--text-color) !important; */
/* 	margin-left:5px; */
/* 	display:none; */
/* } */

/* Nowcast activity levels */
.level-0 { color:transparent !important; }
.level-1 { color:var(--level-1-color); }
.level-2 { color:var(--level-2-color); }
.level-3 { color:var(--level-3-color); }
.level-4 { color:var(--level-4-color); }
.level-5 { color:var(--level-5-color); }

/* Chrome on Android had trouble with overlapping percentages */
.imf-angle .fa-signal.level-1 { background: linear-gradient(90deg, var(--level-1-color) 20%, var(--faded-text-color) 21%); }
.imf-angle .fa-signal.level-2 { background: linear-gradient(90deg, var(--level-2-color) 40%, var(--faded-text-color) 41%); }
.imf-angle .fa-signal.level-3 { background: linear-gradient(90deg, var(--level-3-color) 60%, var(--faded-text-color) 61%); }
.imf-angle .fa-signal.level-4 { background: linear-gradient(90deg, var(--level-4-color) 80%, var(--faded-text-color) 81%); }
.imf-angle .fa-signal.level-5 { background: var(--level-5-color); }
.imf-angle .fa-signal {
  -webkit-text-fill-color: transparent !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

/* END - Nowcast */


/* BEGIN - non-experimental view overrides */
.forecast.non-experimental .nowcast { grid-template-columns: repeat(7, 1fr); }

.forecast.non-experimental .nowcast-header,
.forecast.non-experimental .nowcast-footer,
.forecast.non-experimental .nowcast-slot {
	grid-column: 1 / 8;
	grid-template-columns: repeat(7, 1fr);
}
.forecast.non-experimental .nowcast-slot .notification {
	grid-column-end: 9;
}
/* END - basic view overrides */

/* BEGIN - basic view overrides */
.forecast.basic .forecast-slot {
	grid-template-columns: 25% 13% 10% auto; 
}

.forecast.basic .nowcast { grid-template-columns: repeat(7, 1fr); }

.forecast.basic .nowcast-header,
.forecast.basic .nowcast-footer,
.forecast.basic .nowcast-slot {
	grid-column: 1 / 8;
	grid-template-columns: repeat(7, 1fr);
}
.forecast.basic .nowcast-slot .notification {
	grid-column-end: 9;
}
.forecast.basic .level-0 { color:unset !important; }
/* END - basic view overrides */


/* BEGIN - Info */
#info h3 { margin:0; padding:2% 0; 	font-size: var(--font-size-120); }
#info h4 { margin:0.5% 0; padding:1% 1%; border-top:1px solid var(--border-color); font-size:var(--font-size-110); }
#info h4:first-of-type { border-top:none; }
#info h5 { margin:0 0 1% 0; padding:0.5% 2%; background: var(--header-background-color); font-size:var(--font-size-100); }

#info p,
#info ul,
#info table {
	margin: 0 0 2% 2.5%;
	font-size: var(--font-size-100);
}

#info p.small { font-size: var(--font-size-085); }

/* #info table.activity-levels { } */
#info table.activity-levels td { 
	text-align:center;
	width:19%;
	padding: 0.5%;
	white-space: nowrap;
	
}

#info table.activity-levels .dark td {
	white-space: normal;
}

#info table.activity-levels .level-header td {
	text-align:left;
	border:0;
	background:var(--header-background-color);
}

#info table.activity-levels .level-header td.title {
	font-weight:bold;
}

#info table.activity-levels .level-header td.unit {
	font-size:var(--font-size-070);
	text-align:right;
}

#info table.activity-levels .level-footer td {
	padding-bottom: 1.5em;
	font-size:var(--font-size-070);
	text-align:left;
	text-wrap: balance;
}

#info table.activity-levels .level-row td {
	border-bottom: 1px solid var(--header-background-color);
}

#info table.activity-levels .level-row td.level-1 {
	border-left: 1px solid var(--header-background-color);
	padding-left: 1px;
}
#info table.activity-levels .level-row td.level-5 {
	border-right: 1px solid var(--header-background-color);
	padding-right: 1px;
}

#info a { text-decoration: none; color:var(--link-color); }
#info a i { color:var(--link-color); width:1em; text-align:center; }
#info .time-now,
#info .time-marked { 
	font-weight:bold;
	float:none;
	clear:none;
}
#info .time-now { color: var(--time-now-color); }
#info .time-marked { color: var(--time-missing-color); }
#info .time-incomplete { color:var(--slot-incomplete-color); font-weight:bold; }

#info .info-subset { display:none; margin-bottom: 2%; }
#info .info-subset div { margin-bottom: 2%; border:1px solid var(--header-background-color); }
#info .info-subset div p { padding-right: 2.5%; }
#info .info-subset-visible { display:block; }

#info-subset-sources p { display:grid; }
#info-subset-sources span { margin-left:2%; font-size: var(--font-size-085);}

#info .experimental-values { font-size: var(--font-size-070); }

body #info .premium-feature::after {
	content: 'Premium Feature';
	font-size: var(--font-size-070);
	float:right;
	padding: 0.214em 0;
}

body.advanced #info .premium-feature::after { content: ''; }

/* END - Info */

/* BEGIN - Location */
#location {
/* 	display:grid; */
	grid-template-columns: auto;
	grid-template-rows: auto 1fr;
	justify-items: stretch; 
	align-items: stretch;
}

#map-message a { text-decoration: none; color:var(--link-color); }
#location-header {
	grid-area: 1 / 1 / 2 / 2;
	padding-bottom: 2%;
}
#location h3 { margin:0; padding:2% 0; 	font-size: var(--font-size-120); }
#location-info {
	display: grid;
	grid-template-columns: auto 1fr 1fr;
	padding: 0 0.5%;
	grid-column-gap: 1vw;
	grid-row-gap: 1vw;
}

#location-info button {
	width:unset;
	height:unset;
}
#saveLocation { padding:0.5em 1em; }

#resetLocation:not(.active),
#saveLocation:not(.active) { 
	color: var(--disabled-location-button-color);
	background-color: unset;
}
 
#resetLocation.active { color: var(--location-reset-button-color); }
/* #saveLocation.active  { color: var(--location-save-button-color); background-color: var(--purchase-button-clicked-color); } */

#resetLocation i 	  { font-size: var(--font-size-menu-button-small); }
#resetLocation 		  { margin-left: 5%; vertical-align:middle; }
#location p {
  margin: 0 0 2% 0;
  font-size: var(--font-size-085);
}

.set-geolocation { float: right; }

@media only screen and (orientation: landscape) {
	#location-info {
		grid-column-gap: 1vh;
		grid-row-gap: 1vh;
	}
}

#location-info .accuracy,
#location-info .save { 
	font-size: var(--font-size-070);
	align-self: center;
}

#map-message,
#map {
	grid-area: 2 / 1 / 3 / 2;
	margin: 0;
	border: 0;
	z-index: 1;
} 

#map-message {
	z-index: 2;
	padding:0.5em;
	align-self: start;
	background:var(--header-background-color);
	visibility:hidden;
	opacity: 0;
	transition: visibility 0s linear 0.5s, opacity 0.5s linear 0s;
}
#map-message.error {
	color:var(--level-1-color);	
}

#map-message.visible {
	visibility:visible;
	opacity: 0.9;
	transition: visibility 0s linear 0s, opacity 0.5s linear 0s;
}

/* END - Location */

/* BEGIN - Weather */
#weather-container,
#weather iframe {
	width: 100%;
	height: calc(100vh - 114px);/* accounts for header (68px), margin (16px+10px) */
	border: 0;
}

/* #weather-container { margin: 10px 0 0 0; } */
/* #weather-products { */
/* 	margin: 10px 0 0 0; */
/* 	display:grid; */
/* 	grid-template-columns: repeat(4,1fr); */
/* 	grid-template-rows: auto; */
/* 	justify-content: space-between; */
/* 	gap: 4px; */
/* 	width: 100%; */
/* } */

/* #weather-products button{ */
/* 	white-space:nowrap; */
/* 	width:unset; */
/* 	height: unset; */
/* } */

/* #weather-products.weather-ecwmf .weather-product-ecwmf, */
/* #weather-products.weather-iconEu .weather-product-iconEu, */
/* #weather-products.weather-gfs .weather-product-gfs, */
/* #weather-products.weather-namConus .weather-product-namConus { */
/* 	color: var(--logo-lightblue-color); */
/* } */

#weather h3 { margin:0; padding:2% 0; font-size: var(--font-size-120); }
#weather h5 { margin:0 0 1% 0; padding:0.5% 2%; background: var(--header-background-color); }

#weather p {
	margin: 0 0 2% 2.5%;
	font-size: var(--font-size-100);
}

#weather a { text-decoration: none; color:var(--link-color); }
#weather a span { font-size: var(--font-size-070); }

#weather .weather-subset { margin-bottom: 2%; }
#weather .weather-subset div { margin-bottom: 2%; border:1px solid var(--header-background-color); }
#weather .weather-subset div p { padding-right: 2.5%; }
#weather .weather-subset-visible { display:block; }
/* END - Weather */

/* BEGIN - Settings */
#settings h3 { margin:0; padding:2% 0; 	font-size: var(--font-size-120); }
#settings h4 { margin:0; padding:0.5% 1%; 	font-size: var(--font-size-110);}
#settings h5 { margin:0 0 1% 0; padding:0.5% 2%; background: var(--header-background-color); font-size: var(--font-size-100); }
#settings p,
#settings ul {
	margin: 0 0 2% 2.5%;
	font-size: var(--font-size-085);
}

#settings a { text-decoration: none; color:var(--link-color); }
#settings-container > div { margin:2% 10%; width:80%; }
#settings-container #reverse-imf-scales-switcher,
#settings-container #app-layout-mode-switcher,
#settings-container #app-data-mode-switcher,
#settings-container #app-mode-switcher { width:50%; }

/* .setting-app-layout-mode, */
.setting-app-data-mode,
.setting-app-mode { display:none; }

#settings .settings-subset { display:none; margin-bottom: 2%; }
#settings .settings-subset div { margin-bottom: 2%; }
#settings .settings-subset p { margin:1% 0 2% 0;}
#settings .settings-subset p:first-of-type { margin-top:0;}
#settings .settings-subset-visible { display:block; }
#settings .settings-subset button.action-buy-product { width:100%; margin:1% 0;}

body.hasStore #noStore { display:none; }

body.licensed .setting-app-layout-mode,
body.advanced .setting-app-layout-mode,
body.licensed .setting-app-data-mode,
body.advanced .setting-app-data-mode,
body.licensed .setting-app-mode,
body.advanced .setting-app-mode { display:block; }

/* appMode toggle */
#reverse-imf-scales-toggles,
#app-layout-mode-toggles,
#app-data-mode-toggles,
#app-mode-toggles,
#reverse-imf-scales-labels,
#app-layout-mode-labels,
#app-data-mode-labels,
#app-mode-labels {
  display: flex;
  justify-content: space-between;
  padding:10px;
  max-width:200px;
}

#reverse-imf-scales-toggles,
#app-layout-mode-toggles,
#app-data-mode-toggles,
#app-mode-toggles {
  border: 5px solid var(--border-color);
  border-radius: 50px;
  padding: 5px;
  max-width:200px;
}

#reverse-imf-scales-toggles input,
#app-layout-mode-toggles input,
#app-data-mode-toggles input,
#app-mode-toggles input {
	height: 30px;
	width: 30px;
	appearance: none;
	background-color: var(--text-color);
	border-radius: 50%;
	opacity: 0.5;
	margin:5px;
	transition: .3s;
}

#reverse-imf-scales-labels a,
#app-layout-mode-labels a,
#app-data-mode-labels a,
#app-mode-labels a {
	color:var(--text-color);
	opacity: 0.5;
	transition: .3s;
}

#reverse-imf-scales-switcher.enabled  input.reverse-imf-scales-enabled,
#reverse-imf-scales-switcher.disabled input.reverse-imf-scales-disabled,
#app-layout-mode-switcher.old		input.app-layout-mode-old,
#app-layout-mode-switcher.new	 	input.app-layout-mode-new,
#app-data-mode-switcher.average		input.app-data-mode-average,
#app-data-mode-switcher.extremes 	input.app-data-mode-extremes,
#app-mode-switcher.basic			input.app-mode-basic,
#app-mode-switcher.advanced 		input.app-mode-advanced {
	opacity: 1;
	background-color: var(--link-color) !important;
}

#reverse-imf-scales-switcher.enabled  a.reverse-imf-scales-enabled,
#reverse-imf-scales-switcher.disabled a.reverse-imf-scales-disabled,
#app-layout-mode-switcher.old	 	a.app-layout-mode-old,
#app-layout-mode-switcher.new 		a.app-layout-mode-new,
#app-data-mode-switcher.average 	a.app-data-mode-average,
#app-data-mode-switcher.extremes 	a.app-data-mode-extremes,
#app-mode-switcher.basic 			a.app-mode-basic,
#app-mode-switcher.advanced 		a.app-mode-advanced {
	opacity: 1;
	color: var(--link-color) !important;
}

.warnings h5 { font-size:var(--font-size-070); margin-bottom:0; }
.warnings p { font-size:var(--font-size-070); margin-top:0.1%; margin-bottom: 0; }

/* BEGIN - purchase support */
#license,
#settings-subset-desktop,
#settings-subset-coupon,
#settings-subset-restore,
#trialLicense,
#clearSettings {
	display:grid;
	grid-template-columns: 1fr;
	justify-items: stretch; 
	align-items: stretch;
	gap: 12px;/* fixed px size to avoid incorrect container scaling */
}

#licenseRequest { display:none; }
#licenseRequest > * { padding: 5px 0; }
#licenseResponse,
#couponLicenseResponse { margin-top:12px; }
#couponLicenseResponse button { width:100%; }

#licenseCode,
#couponLicenseCode {
	display:grid;
	grid-template-columns: repeat(6, 1fr);
	cursor: none;
	column-gap: 5%;
}

#licenseCode input,
#couponLicenseCode input {
	aspect-ratio: 1 / 1;
	width: 100%;
	margin:0;
	padding:0;
	border:none;
	border-radius: 16px;
	color: var(--link-color);
	background-color: var(--faded-text-color);
	text-align:center;
	font-size: var(--font-size-120);
    outline: none;
}

#licenseCode input:focus,
#couponLicenseCode input:focus { outline: 1px solid var(--logo-lightblue-color); }

body:not(.licensed) #settings-subset-desktop.active #licenseButton,
#acceptExportLicenseButton.inactive,
#submitCouponCodeButton.inactive {
	cursor: not-allowed;
	pointer-events: none;
	color: var(--link-color);
	background-color: var(--text-color);
}

#settings-subset-desktop #licenseRequest,
#settings-subset-desktop #licenseResponseReloadButton {
	display:none;
}

#settings-subset-desktop.active #licenseRequest,
#settings-subset-desktop.active #licenseResponseReloadButton {
	display:block;
}

#settings-subset-desktop.active #licenseButton,
#license.active #restorePurchases {
	background-color: var(--purchase-button-clicked-color);
}

button.action-buy-product {
	width: unset;
	background-color: var(--purchase-button-color);
	border-radius: 16px;
	white-space: nowrap;
}

#proExpiry { 
	font-size: var(--font-size-100);
	font-weight:bold;
	background: var(--text-color);
	color:var(--background-color);
	padding:5px;	
}

#restorePurchaseContent input { 
	width:90%;
	border-radius: 16px;
	background-color: var(--highlight-background-color);
	border: none;
	display: inline-block;
	color: var(--link-color);
	font-weight: bold;
	font-size:var(--font-size-120);
	height: 48px;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	padding: 2.5%;
	margin: 1% 2.5%;
}

#restorePurchaseContent input:valid   			{ color: var(--purchase-button-color); }
#restorePurchaseContent input:invalid 			{ color: var(--purchase-button-clicked-color); }
#restorePurchaseContent input:placeholder-shown { color: var(--link-color); }
#licenseRestoreCode.copied .fa-copy { display:none; }
#licenseRestoreCode.copied:after {
	content: '\f058';
	font-weight: 900;
	font-family: 'Font Awesome 6 Free';
}

/* END - purchase support */
/* END - Settings */

/* BEGIN - Footer */
#footer .get-premium {
	grid-column-start: 1;
	grid-column-end: 4;
}

body.licensed #footer .get-premium {
	display:none;
}


#footer .legend { 
	grid-column-start: 1;
	grid-column-end: 4;
	margin: 0 0 0.5% 0; 
	padding: 0.5% 0;
	white-space: nowrap;

	display:none; 
	grid-template-columns: 20% 1fr 1.2em;
	grid-gap: 3%;
}

.display-forecast #footer .legend .activity-levels { 
	display:grid;
	grid-template-columns: repeat(5, auto);
	grid-gap: 3%;	
}

#footer .legend .time-now    { color: var(--time-now-color);  }
#footer .legend .time-marked { color: var(--time-missing-color); }
#footer a  { color: var(--link-color); text-decoration:none;}
#footer .legend a,
#footer .legend span,
#footer .forecast-refresh i { font-size: var(--font-size-120); }


.display-forecast #footer .legend { 
	display:grid;
}

.connection-status { justify-self: begin; }
.location-status a { color: var(--link-color); text-decoration: none;}
.location-status i { padding: 0 0.25em; }
.forecast-refresh  { justify-self: end; pointer-events: none; }
.forecast-refresh-click-enabled .forecast-refresh { pointer-events: auto; }
.forecast-refresh-click-enabled .forecast-refresh .fa-arrow-rotate-right { cursor:pointer; color:var(--link-color); }
#locationState span { pointer-events: auto; cursor:pointer; color:var(--link-color); }
/* END - Footer */

.version { margin:5% 0 0 0 !important; font-size: var(--font-size-070); }

/* BEGIN - CSS tooltip for touch interfaces */
[tooltip] {
	position: relative;
	display: inline-flex;
	justify-content: center;
}
[tooltip]::after {
	position: absolute;
	top: 1.3em;
	color: var(--text-color);
	background-color: var(--background-color);
	border: 1px solid var(--border-color);
	width: fit-content;
	padding: 0.25em;
	white-space:pre;
	text-align:left;
	border-radius:0.25em;
	z-index: 12;
}
[tooltip] sub {
	/* inline flex messes with sub alignment, restore */
	position: relative;
	bottom: -0.5em;
}

.darkness[tooltip]::after {
	right:0;
}
	
#footer [tooltip]::after {
	top:unset;
	bottom:1.3em;
}
	
@media (pointer: coarse), (hover: none) {
	[tooltip]:focus::after {
		content: attr(tooltip);
	}
}
@media (hover: hover){
	[tooltip]:hover::after {
		content: attr(tooltip);
	}
}
/* END - CSS tooltip for touch interfaces */

.forecast-image-scroll { width:100%; }
.forecast-image-scroll div { 
	width:100%;
/* 	display:grid; ln520 */
/* 	grid-template-columns: 2em auto;  */
}

.forecast-image-scroll span:first-child {
	justify-self: center;
	align-self: center;
}

/* .forecast-image-scroll .progress { */
/* 	background: linear-gradient(to left, transparent 0 49.5%, var(--time-now-color) 49.51% 50.49%, transparent 50.5% 100%); */
/* } */
 
.forecast-image-scroll input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	height: 3em;
	width:100%;
	margin:0;
	background: transparent;
	vertical-align: middle;
}

.forecast-image-scroll input[type=range]::-webkit-slider-runnable-track {
  height:0.5em;
  cursor: pointer;
/*   background: var(--logo-darkblue-color) !important; */
  border-radius: 0.125em;
}
	
.forecast-image-scroll input[type=range]::-moz-range-track {
  height:0.5em;
  cursor: pointer;
/*   background: var(--logo-darkblue-color) !important; */
  border-radius: 0.125em;
}

.forecast-image-scroll input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 1.5em;
  width: 1.5em;
  border-radius: 100%;
  background: var(--faded-text-color);
  cursor: pointer;
  border: none;
}

.forecast-image-scroll input[type=range]::-webkit-slider-thumb {
  margin-top: -0.5em;
}
	
.forecast-image-scroll input[type=range]::-moz-range-thumb {
  height: 1.5em;
  width: 1.5em;
  border-radius: 100%;
  background: var(--faded-text-color);
  cursor: pointer;
  border: none;
}

.forecast-image-scroll input[type=range].cur::-webkit-slider-thumb {
	background: var(--time-now-color);
}

.forecast-image-scroll input[type=range].cur::-moz-range-thumb {
	background: var(--time-now-color);
}

.forecast-image-scroll input[type=range].post::-webkit-slider-thumb {
	background: var(--text-color);
}

.forecast-image-scroll input[type=range].post::-moz-range-thumb {
	background: var(--text-color);
}


.forecast-image-row figure img,
.forecast-image-comment div span {
	display:none;
	opacity: 0;
}

.playing .forecast-image-row figure img {
	/* presetting a display block will preload the images and ensure a smooth rendeint, use opacity to control visibility */
	display:block;
}

#comment-toggle-enlil span,
#comment-toggle-enlil-nowcast span,
#comment-toggle-ovation span,
#comment-toggle-coronagraph span,
.img-0 .img-0, .img-1 .img-1, .img-2 .img-2, .img-3 .img-3, .img-4 .img-4, .img-5 .img-5, .img-6 .img-6, .img-7 .img-7, .img-8 .img-8, .img-9 .img-9, 
.img-10 .img-10, .img-11 .img-11, .img-12 .img-12, .img-13 .img-13, .img-14 .img-14, .img-15 .img-15, .img-16 .img-16, .img-17 .img-17, .img-18 .img-18, .img-19 .img-19, 
.img-20 .img-20, .img-21 .img-21, .img-22 .img-22, .img-23 .img-23, .img-24 .img-24, .img-25 .img-25, .img-26 .img-26, .img-27 .img-27, .img-28 .img-28, .img-29 .img-29, 
.img-30 .img-30, .img-31 .img-31, .img-32 .img-32, .img-33 .img-33, .img-34 .img-34, .img-35 .img-35, .img-36 .img-36, .img-37 .img-37, .img-38 .img-38, .img-39 .img-39, 
.img-40 .img-40, .img-41 .img-41, .img-42 .img-42, .img-43 .img-43, .img-44 .img-44, .img-45 .img-45, .img-46 .img-46, .img-47 .img-47, .img-48 .img-48, .img-49 .img-49, 
.img-50 .img-50, .img-51 .img-51, .img-52 .img-52, .img-53 .img-53, .img-54 .img-54, .img-55 .img-55, .img-56 .img-56, .img-57 .img-57, .img-58 .img-58, .img-59 .img-59, 
.img-60 .img-60, .img-61 .img-61, .img-62 .img-62, .img-63 .img-63, .img-64 .img-64, .img-65 .img-65, .img-66 .img-66, .img-67 .img-67, .img-68 .img-68, .img-69 .img-69,
.img-70 .img-70, .img-71 .img-71, .img-72 .img-72, .img-73 .img-73, .img-74 .img-74, .img-75 .img-75, .img-76 .img-76, .img-77 .img-77, .img-78 .img-78, .img-79 .img-79,
.img-80 .img-80, .img-81 .img-81, .img-82 .img-82, .img-83 .img-83, .img-84 .img-84, .img-85 .img-85, .img-86 .img-86, .img-87 .img-87, .img-88 .img-88, .img-89 .img-89,
.img-90 .img-90, .img-91 .img-91, .img-92 .img-92, .img-93 .img-93, .img-94 .img-94, .img-95 .img-95, .img-96 .img-96, .img-97 .img-97, .img-98 .img-98, .img-99 .img-99,
.img-100 .img-100, .img-101 .img-101, .img-102 .img-102, .img-103 .img-103, .img-104 .img-104, .img-105 .img-105, .img-106 .img-106, .img-107 .img-107, .img-108 .img-108, .img-109 .img-109,
.img-110 .img-110, .img-111 .img-111, .img-112 .img-112, .img-113 .img-113, .img-114 .img-114, .img-115 .img-115, .img-116 .img-116, .img-117 .img-117, .img-118 .img-118, .img-119 .img-119, 
.img-120 .img-120, .img-121 .img-121, .img-122 .img-122, .img-123 .img-123, .img-124 .img-124, .img-125 .img-125, .img-126 .img-126, .img-127 .img-127, .img-128 .img-128, .img-129 .img-129, 
.img-130 .img-130, .img-131 .img-131, .img-132 .img-132, .img-133 .img-133, .img-134 .img-134, .img-135 .img-135, .img-136 .img-136, .img-137 .img-137, .img-138 .img-138, .img-139 .img-139, 
.img-140 .img-140, .img-141 .img-141, .img-142 .img-142, .img-143 .img-143, .img-144 .img-144, .img-145 .img-145, .img-146 .img-146, .img-147 .img-147, .img-148 .img-148, .img-149 .img-149, 
.img-150 .img-150, .img-151 .img-151, .img-152 .img-152, .img-153 .img-153, .img-154 .img-154, .img-155 .img-155, .img-156 .img-156, .img-157 .img-157, .img-158 .img-158, .img-159 .img-159, 
.img-160 .img-160, .img-161 .img-161, .img-162 .img-162, .img-163 .img-163, .img-164 .img-164, .img-165 .img-165, .img-166 .img-166, .img-167 .img-167, .img-168 .img-168, .img-169 .img-169,
.img-170 .img-170, .img-171 .img-171, .img-172 .img-172, .img-173 .img-173, .img-174 .img-174, .img-175 .img-175, .img-176 .img-176, .img-177 .img-177, .img-178 .img-178, .img-179 .img-179,
.img-180 .img-180, .img-181 .img-181, .img-182 .img-182, .img-183 .img-183, .img-184 .img-184, .img-185 .img-185, .img-186 .img-186, .img-187 .img-187, .img-188 .img-188, .img-189 .img-189,
.img-190 .img-190, .img-191 .img-191, .img-192 .img-192, .img-193 .img-193, .img-194 .img-194, .img-195 .img-195, .img-196 .img-196, .img-197 .img-197, .img-198 .img-198, .img-199 .img-199,
.img-200 .img-200, .img-201 .img-201, .img-202 .img-202, .img-203 .img-203, .img-204 .img-204, .img-205 .img-205, .img-206 .img-206, .img-207 .img-207, .img-208 .img-208, .img-209 .img-209,
.img-210 .img-210, .img-211 .img-211, .img-212 .img-212, .img-213 .img-213, .img-214 .img-214, .img-215 .img-215, .img-216 .img-216, .img-217 .img-217, .img-218 .img-218, .img-219 .img-219, 
.img-220 .img-220, .img-221 .img-221, .img-222 .img-222, .img-223 .img-223, .img-224 .img-224, .img-225 .img-225, .img-226 .img-226, .img-227 .img-227, .img-228 .img-228, .img-229 .img-229, 
.img-230 .img-230, .img-231 .img-231, .img-232 .img-232, .img-233 .img-233, .img-234 .img-234, .img-235 .img-235, .img-236 .img-236, .img-237 .img-237, .img-238 .img-238, .img-239 .img-239, 
.img-240 .img-240, .img-241 .img-241, .img-242 .img-242, .img-243 .img-243, .img-244 .img-244, .img-245 .img-245, .img-246 .img-246, .img-247 .img-247, .img-248 .img-248, .img-249 .img-249, 
.img-250 .img-250, .img-251 .img-251, .img-252 .img-252, .img-253 .img-253, .img-254 .img-254, .img-255 .img-255, .img-256 .img-256, .img-257 .img-257, .img-258 .img-258, .img-259 .img-259, 
.img-260 .img-260, .img-261 .img-261, .img-262 .img-262, .img-263 .img-263, .img-264 .img-264, .img-265 .img-265, .img-266 .img-266, .img-267 .img-267, .img-268 .img-268, .img-269 .img-269,
.img-270 .img-270, .img-271 .img-271, .img-272 .img-272, .img-273 .img-273, .img-274 .img-274, .img-275 .img-275, .img-276 .img-276, .img-277 .img-277, .img-278 .img-278, .img-279 .img-279,
.img-280 .img-280, .img-281 .img-281, .img-282 .img-282, .img-283 .img-283, .img-284 .img-284, .img-285 .img-285, .img-286 .img-286, .img-287 .img-287, .img-288 .img-288, .img-289 .img-289,
.img-290 .img-290, .img-291 .img-291, .img-292 .img-292, .img-293 .img-293, .img-294 .img-294, .img-295 .img-295, .img-296 .img-296, .img-297 .img-297, .img-298 .img-298, .img-299 .img-299,
.img-300 .img-300, .img-301 .img-301, .img-302 .img-302, .img-303 .img-303, .img-304 .img-304, .img-305 .img-305, .img-306 .img-306, .img-307 .img-307, .img-308 .img-308, .img-309 .img-309,
.img-310 .img-310, .img-311 .img-311, .img-312 .img-312, .img-313 .img-313, .img-314 .img-314, .img-315 .img-315, .img-316 .img-316, .img-317 .img-317, .img-318 .img-318, .img-319 .img-319, 
.img-320 .img-320, .img-321 .img-321, .img-322 .img-322, .img-323 .img-323, .img-324 .img-324, .img-325 .img-325, .img-326 .img-326, .img-327 .img-327, .img-328 .img-328, .img-329 .img-329, 
.img-330 .img-330, .img-331 .img-331, .img-332 .img-332, .img-333 .img-333, .img-334 .img-334, .img-335 .img-335, .img-336 .img-336, .img-337 .img-337, .img-338 .img-338, .img-339 .img-339, 
.img-340 .img-340, .img-341 .img-341, .img-342 .img-342, .img-343 .img-343, .img-344 .img-344, .img-345 .img-345, .img-346 .img-346, .img-347 .img-347, .img-348 .img-348, .img-349 .img-349, 
.img-350 .img-350, .img-351 .img-351, .img-352 .img-352, .img-353 .img-353, .img-354 .img-354, .img-355 .img-355, .img-356 .img-356, .img-357 .img-357, .img-358 .img-358, .img-359 .img-359, 
.img-360 .img-360, .img-361 .img-361, .img-362 .img-362, .img-363 .img-363, .img-364 .img-364, .img-365 .img-365, .img-366 .img-366, .img-367 .img-367, .img-368 .img-368, .img-369 .img-369,
.img-370 .img-370, .img-371 .img-371, .img-372 .img-372, .img-373 .img-373, .img-374 .img-374, .img-375 .img-375, .img-376 .img-376, .img-377 .img-377, .img-378 .img-378, .img-379 .img-379,
.img-380 .img-380, .img-381 .img-381, .img-382 .img-382, .img-383 .img-383, .img-384 .img-384, .img-385 .img-385, .img-386 .img-386, .img-387 .img-387, .img-388 .img-388, .img-389 .img-389,
.img-390 .img-390, .img-391 .img-391, .img-392 .img-392, .img-393 .img-393, .img-394 .img-394, .img-395 .img-395, .img-396 .img-396, .img-397 .img-397, .img-398 .img-398, .img-399 .img-399,
.img-400 .img-400, .img-401 .img-401, .img-402 .img-402, .img-403 .img-403, .img-404 .img-404, .img-405 .img-405, .img-406 .img-406, .img-407 .img-407, .img-408 .img-408, .img-409 .img-409,
.img-410 .img-410, .img-411 .img-411, .img-412 .img-412, .img-413 .img-413, .img-414 .img-414, .img-415 .img-415, .img-416 .img-416, .img-417 .img-417, .img-418 .img-418, .img-419 .img-419, 
.img-420 .img-420, .img-421 .img-421, .img-422 .img-422, .img-423 .img-423, .img-424 .img-424, .img-425 .img-425, .img-426 .img-426, .img-427 .img-427, .img-428 .img-428, .img-429 .img-429, 
.img-430 .img-430, .img-431 .img-431, .img-432 .img-432, .img-433 .img-433, .img-434 .img-434, .img-435 .img-435, .img-436 .img-436, .img-437 .img-437, .img-438 .img-438, .img-439 .img-439, 
.img-440 .img-440, .img-441 .img-441, .img-442 .img-442, .img-443 .img-443, .img-444 .img-444, .img-445 .img-445, .img-446 .img-446, .img-447 .img-447, .img-448 .img-448, .img-449 .img-449, 
.img-450 .img-450, .img-451 .img-451, .img-452 .img-452, .img-453 .img-453, .img-454 .img-454, .img-455 .img-455, .img-456 .img-456, .img-457 .img-457, .img-458 .img-458, .img-459 .img-459, 
.img-460 .img-460, .img-461 .img-461, .img-462 .img-462, .img-463 .img-463, .img-464 .img-464, .img-465 .img-465, .img-466 .img-466, .img-467 .img-467, .img-468 .img-468, .img-469 .img-469,
.img-470 .img-470, .img-471 .img-471, .img-472 .img-472, .img-473 .img-473, .img-474 .img-474, .img-475 .img-475, .img-476 .img-476, .img-477 .img-477, .img-478 .img-478, .img-479 .img-479,
.img-480 .img-480, .img-481 .img-481, .img-482 .img-482, .img-483 .img-483, .img-484 .img-484, .img-485 .img-485, .img-486 .img-486, .img-487 .img-487, .img-488 .img-488, .img-489 .img-489,
.img-490 .img-490, .img-491 .img-491, .img-492 .img-492, .img-493 .img-493, .img-494 .img-494, .img-495 .img-495, .img-496 .img-496, .img-497 .img-497, .img-498 .img-498, .img-499 .img-499,
.img-500 .img-500, .img-501 .img-501, .img-502 .img-502, .img-503 .img-503, .img-504 .img-504, .img-505 .img-505, .img-506 .img-506, .img-507 .img-507, .img-508 .img-508, .img-509 .img-509,
.img-510 .img-510, .img-511 .img-511, .img-512 .img-512, .img-513 .img-513, .img-514 .img-514, .img-515 .img-515, .img-516 .img-516, .img-517 .img-517, .img-518 .img-518, .img-519 .img-519, 
.img-520 .img-520, .img-521 .img-521, .img-522 .img-522, .img-523 .img-523, .img-524 .img-524, .img-525 .img-525, .img-526 .img-526, .img-527 .img-527, .img-528 .img-528, .img-529 .img-529, 
.img-530 .img-530, .img-531 .img-531, .img-532 .img-532, .img-533 .img-533, .img-534 .img-534, .img-535 .img-535, .img-536 .img-536, .img-537 .img-537, .img-538 .img-538, .img-539 .img-539, 
.img-540 .img-540, .img-541 .img-541, .img-542 .img-542, .img-543 .img-543, .img-544 .img-544, .img-545 .img-545, .img-546 .img-546, .img-547 .img-547, .img-548 .img-548, .img-549 .img-549, 
.img-550 .img-550, .img-551 .img-551, .img-552 .img-552, .img-553 .img-553, .img-554 .img-554, .img-555 .img-555, .img-556 .img-556, .img-557 .img-557, .img-558 .img-558, .img-559 .img-559, 
.img-560 .img-560, .img-561 .img-561, .img-562 .img-562, .img-563 .img-563, .img-564 .img-564, .img-565 .img-565, .img-566 .img-566, .img-567 .img-567, .img-568 .img-568, .img-569 .img-569,
.img-570 .img-570, .img-571 .img-571, .img-572 .img-572, .img-573 .img-573, .img-574 .img-574, .img-575 .img-575, .img-576 .img-576, .img-577 .img-577, .img-578 .img-578, .img-579 .img-579,
.img-580 .img-580, .img-581 .img-581, .img-582 .img-582, .img-583 .img-583, .img-584 .img-584, .img-585 .img-585, .img-586 .img-586, .img-587 .img-587, .img-588 .img-588, .img-589 .img-589,
.img-590 .img-590, .img-591 .img-591, .img-592 .img-592, .img-593 .img-593, .img-594 .img-594, .img-595 .img-595, .img-596 .img-596, .img-597 .img-597, .img-598 .img-598, .img-599 .img-599 { 
	display: block; 
  	opacity: 1 !important;
}

figure.zooming img {
/* 	display:none !important; */
	visibility:hidden;
/* 	opacity: 0 !important; */
} 

.forecast-image-scroll i { font-size: 2em; }

.timeline-container {
  display: flex;
  position: relative;
  z-index: 0;
  width:100%; 
  height:12em;
  max-width: calc(100vw - 16px);
  overflow-x: scroll;
  overflow-y: hidden;
  align-items: end;
  padding: 0.5 1em 0 1em;
  column-gap: 1.5em;
  font-size: var(--font-size-100);
  flex-direction: row;
  min-height:0;
  cursor: pointer;
}

@media only screen and (min-width: 660px) {
	.timeline-container {
		max-width: calc(550px + 10vw);
	}
}

.timeline-container.drag-active {
    cursor: grabbing;
    cursor: -webkit-grabbing;
}

.timeline-item {
  width: 0.8em;
  height: 0.8em;
  background-color: var(--faded-text-color);
  position: relative;
  border-radius: 50%;
  bottom:3em;
  flex-shrink: 0;
  user-select: none;
  color: var(--faded-text-color);  
}

.timeline-item::before, .timeline-item::after {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--faded-text-color);
  width: 1.8em;
  height: 0.25em;
}

.timeline-item:first-child { margin-left:0.8em; }
.timeline-item::before {  right: 0.8em; }
.timeline-item::after { left: 0.8em; }
.timeline-item:last-child::after { width:9em; }
.timeline-item.upcoming { background-color: var(--text-color); }
.timeline-item.upcoming::before { background-color: var(--time-now-color); }

.timeline-item.upcoming ~ .timeline-item,
.timeline-item.upcoming ~ .timeline-item::before,
.timeline-item.upcoming ~ .timeline-item::after {
  background-color: var(--text-color);
}

.timeline-item .day,
.timeline-item.previous .text,
.timeline-item.upcoming .text,
.timeline-item.previous ~ .timeline-item .text,
.timeline-item.upcoming ~ .timeline-item .text {
	color: var(--text-color);
}

.timeline-item span.dot {
  width: 1px;
  height: 1px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  visibility: hidden;
}
.timeline-item span.text, .timeline-item span.day {
  visibility: visible;
  position: absolute;
  left: 50%;
  white-space: nowrap; 
}

.timeline-item span.day {
  top: 1em;
  white-space: nowrap; 
  left: -0.25em;
}

.timeline-item span.text {
  top: -5em;
  width: 12em;
  left:1em;
  transform: translateX(-2em) rotateZ(-45deg);
  text-indent: 0.5em;
  overflow:hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid var(--faded-text-color);
  padding-top:0.25em;
  padding-bottom:0.25em;
  line-height:1em;
}

.timeline-item span.text sub {
	line-height:0;
}

.timeline-item.upcoming span.text,
.timeline-item.upcoming ~ .timeline-item span.text {
  border-bottom: 1px solid var(--text-color);
}

.timeline-item.previous span.text {
  border-bottom: 1px solid var(--time-now-color);
}

.timeline-item.storm-1 span small,
.timeline-item.storm-2 span small,
.timeline-item.storm-3 span small,
.timeline-item.storm-4 span small,
.timeline-item.storm-5 span small {
	color: var(--level-4-color);
}

/*******************/

#info .info-subset div.mode-compare {
	display:grid;
	grid-template-columns: 1fr auto auto;
/* 	grid-gap:2%; */
	padding: 0 2.5%;
	border:none;
}

.mode-compare span:nth-child(6n+4),
.mode-compare span:nth-child(6n+5),
.mode-compare span:nth-child(6n+6),
.mode-compare i:nth-child(6n+5),
.mode-compare i:nth-child(6n+6) {
	background-color: var(--header-background-color);
}

.mode-compare span,
.mode-compare i {
	padding:0.25em;
/* 	width:100%; */
}

.mode-compare span.category {
	font-weight:bold;
}

.mode-compare span:nth-child(3n+1):not(.category) {
	padding-left:1em;
}


.mode-compare span:nth-child(3n+2),
.mode-compare span:nth-child(3n+3),
.mode-compare i { 
	text-align: center;
}
.mode-compare i { 
	font-size: var(--font-size-120);
}

.mode-compare .fa-times {
	color: var(--purchase-button-error-color);
}

.mode-compare .fa-check {
	color: var(--purchase-button-color);
}

#forecast-charts h3,
#forecast-numbers h3 {
	display: grid;
  	grid-template-columns: 1fr auto auto;
  	align-items: center;
}

#forecast h3 span {
	font-size: var(--font-size-070);
}

#chartsHighlightSlot::after,
#numbersHighlightSlot::after {
	content: '';
	line-height: var(--font-size-120);
	border-left: 0.125em solid var(--text-color);
	margin: 0 0.5em;
}

#chartsHighlightSlot small,
#numbersHighlightSlot small {
	color: var(--level-4-color);
}

.charts-container {
	position: relative;
	width: calc(100vw - 16px);
	max-width: calc(550px + 15vw);
}

@media only screen and (min-width: 660px) {
	.charts-container { 
		max-width: calc(550px + 10vw);
	}
}

body.first-new-layout-load #newLayoutMessage {
	display:block;
}

#newLayoutMessage button {
  font-size: var(--font-size-120);
  width:12em;
}


.loader {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
  margin:15px auto;
  position: relative;
  color: #FFF;
  box-sizing: border-box;
  animation: animloader 2s linear infinite;
}

figure span {
	z-index:0;
	margin: auto auto;
	grid-area: 1 / 1 / 2 / 2;
	color: var(--text-color);
}
figure.zooming span {
	display:none;
}

@keyframes animloader {
    0% { box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 -2px; }
   25% { box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 2px; }
   50% { box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 2px,  -38px 0 0 -2px; }
   75% { box-shadow: 14px 0 0 2px,  38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 -2px; }
  100% { box-shadow: 14px 0 0 -2px, 38px 0 0 2px,  -14px 0 0 -2px, -38px 0 0 -2px; }
}

#resetZoom {
	display:none;
	position: absolute;
	right:0;
	width: 2em;
	height:2em;
/* 	font-size: var(--font-size-085); */
	z-index: 44;
}

.chart-history-4h #resetZoom,
.chart-history-12h #resetZoom,
.chart-history-24h #resetZoom {
	display:block;	
}