: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%);
	--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("/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-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('/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('/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 h3,
.forecast-slot { 
	justify-self: stretch;
    align-self: stretch;
	margin:0; 
}

#forecast h3 { 
	grid-column: 1 / 4;
	padding: 2% 0 0 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-110); 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-070); } 

.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;
	gap: 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? */
}

.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%; }
.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 */ 
}

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

.forecast .info button.expanded {
	background-color:var(--purchase-button-color);
}

/*.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-image-button-row {
	display: grid;
	grid-gap: 2%;
	grid-auto-flow: column;
}

.forecast-image-button-row.max-toggle-image-2 { grid-template-columns: repeat(3, 1fr); }
.forecast-image-button-row.max-toggle-image-3 { grid-template-columns: repeat(4, 1fr); }
.forecast-image-button-row.max-toggle-image-4 { grid-template-columns: repeat(5, 1fr); }
.forecast-image-button-row.max-toggle-image-5 { grid-template-columns: repeat(6, 1fr); }

.forecast .info .forecast-image-container {
	display: grid;
	gap: 2%;
} 
.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; }
/*.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 { 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.2; }
/* .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-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 .etaMin {
	grid-column-start: 2;
	grid-column-end: 3;
}

.nowcast-footer .activeSatellites {
	grid-column-start: 3;
	grid-column-end: 6;
	text-align:left;
}

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

.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; }
/* 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(6, 1fr); }

.forecast.basic .nowcast-header,
.forecast.basic .nowcast-footer,
.forecast.basic .nowcast-slot {
	grid-column: 1 / 7;
	grid-template-columns: repeat(6, 1fr);
}
.forecast.basic .nowcast-slot .notification {
	grid-column-end: 8;
}
.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: 12px;
	font-size:var(--font-size-070);
	text-align:left;
}

#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); }
/* 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 #app-mode-switcher { width:50%; }

.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-mode,
body.advanced .setting-app-mode { display:block; }

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

#app-mode-toggles {
  border: 5px solid var(--border-color);
  border-radius: 50px;
  padding: 5px;
  max-width:200px;
}

#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;
}

#app-mode-labels a {
	color:var(--text-color);
	opacity: 0.5;
	transition: .3s;
}

#app-mode-switcher.basic			input.app-mode-basic,
#app-mode-switcher.advanced 		input.app-mode-advanced {
	opacity: 1;
	background-color: var(--link-color) !important;
}

#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 .legend { 
	grid-column-start: 1;
	grid-column-end: 4;
	margin: 0 0 0.5% 0; 
	padding: 1% 0;
	white-space: nowrap;

	display:none; 
	grid-template-columns: 20% 1fr;
	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); }

.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 */