: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 */
	--font-size-200: 2.0em;
	--disabled-location-button-color:	hsl(0deg, 0%, 10%);
	--location-save-button-color:		hsl(120deg, 80%, 40%);
	--location-reset-button-color:		hsl(30deg, 80%, 40%);
	--table-row-odd-background-color:	hsl(212deg, 100%, 5.05%);/*003067*/
	--table-row-even-background-color:	hsl(212deg, 100%, 10.1%);
	
	--notification-box-font: 				hsl(0deg, 0%, 100%);
	--notification-box-background: 			hsl(0deg, 0%, 25%);
	--notification-box-border-error: 		hsl(0deg, 70%, 30%);
	--notification-box-border-warning: 		hsl(30deg, 100%, 40%);
	--notification-box-border-notification: hsl(221deg, 25%, 50%);
}

/* BEGIN - Generic element styling */
h3 {
	margin: 0;
	padding: 2% 0;
	font-size: var(--font-size-120);
}
/* END - Generic element styling */

/* Base positional styling */
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;
	font-size:1.2em;
}

#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("background-001.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; }

.content h3:first-child {
	color: var(--text-color);
	transition: color .5s ease-out;
}
.content.loading h3:first-child {
	color: var(--logo-lightblue-color);
}

/* .content .collection-container td    { margin:0; padding: 0.25em; } */
/* .content .collection-container td+td { margin-left:1em; border-left: 1px solid var(--faded-text-color); } */
/* .content .collection-container tr:first-child td { background: var(--background-color) !important; border:none !important;} */
/* .content .collection-container tr:nth-child(odd) td {  background: var(--table-row-odd-background-color); } */
/* .content .collection-container tr:nth-child(even) td { background: var(--table-row-even-background-color); } */

/* dispalyTopics */
body.display-gig  #gig,
body.display-user  #user,
body.display-vehicle  #vehicle,
/* 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.disabled {
	cursor: not-allowed;
	pointer-events: none;
	color: var(--faded-text-color);
}

button:not(.refreshCollection) .fa-solid { font-size:var(--font-size-menu-button); }
.refreshCollection { 
	float:right;
	font-weight: unset;
	height: unset;
	width: unset;
	padding: 0;
}
button.refreshCollection .fa-solid { font-size:var(--font-size-200); }

/* 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-gig button.nav-head-gig, 
body.display-user button.nav-head-user, 
body.display-vehicle button.nav-head-vehicle, 
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;
}

.user-location-tracking {
	grid-area: 1 / 3 / 2 / 4;
}

/*** 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 5px 5px 1px; }
.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-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-colcollection/* } */

/* .nowcast-slot .time { font-size: var(--font-size-070); } */
/* .nowcast-slot.hasInfo .time { color: var(--link-color); cursor: pointer; } */

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


/* .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 20px; */
/*   	width: calc(100% - 20px); */
  	
/*   	display:grid; */
/* 	grid-template-columns: auto 1fr; */
/* 	justify-items: stretch;  */
/* 	align-items: stretch; */
/* } */

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

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

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

#collection-user .collection-header .info,
#collection-user .collection-row .info  { grid-column-start: 1; }
#collection-user .collection-header .name,
#collection-user .collection-row .name  { grid-column-start: 2; }
/* #collection-user .collection-header .email, */
/* #collection-user .collection-row .email { grid-column-start: 3; } */
/* #collection-user .collection-header .phone, */
/* #collection-user .collection-row .phone { grid-column-start: 4; } */
#collection-user .collection-row .phone a {color: var(--link-color); text-decoration: none; }
#collection-user .collection-row .email { 
	text-overflow: ellipsis;
	overflow: hidden;
}

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

.collection.expanded-child .gig-date-header,
.collection.expanded-child .collection-header,
.collection.expanded-child .collection-row:not(.expanded) { 
	display: none;
}

/* begin - collection display */
/* .collection-title, */
/* .collection { */
/* 	display:grid;  */
/* 	grid-template-columns: repeat(10, auto); */
/* } */

.collection-header,
.collection-row,
.collection-row-info  {
/* .collection-slot { */
/* 	grid-column: 1 / 11; */
/* 	justify-self: stretch; */
/*     align-self: stretch; */
	margin:0; 
	
/* 	display:grid;  */
	display:contents;
/* 	grid-template-columns: repeat(10, 1fr); */
/* 	grid-template-columns: subgrid; no chrome support requires IOS16 */
/* 	grid-template-columns: 1fr 5fr 5fr 2fr 2fr 1fr 5fr 5fr 2fr 2fr;	} */
/*     grid-template-columns: repeat(auto-fit, minmax(var(--column-width-min), 1fr)); */
/*     grid-template-columns: repeat(auto-fit, minmax(2em, 1fr)); */
    
	justify-items: stretch; 
	align-items: stretch;
/* 	padding:1px 0; */
	white-space: nowrap;
	text-align: left;
	gap: 1% 1%;
}
.collection-row-info {
	display:none;
}

.collection-row-info.expanded{
	display:contents;
}

.collection-row-info > div {
	grid-column: 1 / 7;
	align-items: baseline;
}

.collection-row.disabled .name { 
	text-decoration: line-through;
    text-decoration-style: solid;
    text-decoration-thickness: 0.1em;
}

.collection-row .name .toggle-switch,
.collection-row-info .name .toggle-switch { float:right; }
 
.collection-row.disabled .fa-pen,
.collection-row-info.disabled .fa-pen { cursor: none; }
.collection-row.disabled .fa-pen::before,
.collection-row-info.disabled .fa-pen::before { content: "" !important; }

/* .content .collection-container td    { margin:0; padding: 0.25em; } */
/* .content .collection-container td+td { margin-left:1em; border-left: 1px solid var(--faded-text-color); } */
.collection > div:first-child > div { background: var(--background-color) !important; border:none !important;}
.collection > div:nth-child(2n) > div { 
	border-bottom: 0.1em solid var(--text-color);
	padding: 0.3em;
	align-self: end;
/* 	background: var(--table-row-odd-background-color); */
}
.collection.expanded-child > div:nth-child(2n) > div { 
	border-bottom: unset;
}

.collection > div:nth-child(2n):not(.expanded) > div.icon { text-align:center; }
.collection > div:nth-child(2n):not(.expanded) > div.type,
.collection > div:nth-child(2n):not(.expanded) > div.access,
.collection > div:nth-child(2n):not(.expanded) > div.status { 
	text-overflow: ellipsis;
/* 	width: 3.5em; */
	overflow: hidden;
}
/* .collection > div:nth-child(4n) > div { background: var(--table-row-even-background-color); } */
/* .collection > div:nth-child(2n+1) > div { background: var(--sub-background-color); } */
/* .current-row-info { padding-top:0.3em; } */

/* .collection > div:nth-child(2n) > div { padding: 2%; } */
/* .collection > div:nth-child(2n+1) > div { padding: 1%; } */

.collection .info { text-align: center; }
.collection-title{
	grid-template-columns: auto;
	font-size: var(--font-size-070);
}
.collection-header { font-size:var(--font-size-070); }

.collection-row-info .detail-row:not(:first-child) { padding-top:0; }
.collection-row-info .detail-row:not(:last-child) { padding-bottom:0; }
.collection-row-info .detail-row span { padding:0.25%; align-self:center; }
/* .collection-row-info .detail-row span:after { content: ":"; } */
.collection-row-info .detail-row.license span:last-child { text-transform: uppercase;}

.timeline .detail-row { padding:1%; }
.timeline .detail-row:nth-child(2n+1) {  background: #000; }
.timeline .detail-row:nth-child(2n) { background: #111; }
/* .timeline .detail-row .fa-pen { float:right; } */

/*:first-child { } */

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

	display:grid; 
	grid-template-columns: repeat(3, 1fr); 
	justify-items: stretch; 
	align-items: stretch;
	
/* 	background-color: var(--sub-background-color); */
	text-align: center;
/* 	padding:1%; */
	color: var(--link-color);
}
/* .timeline-info { */
/* 	grid-column: 1 / 4;	 */
/* } */

.timeline-header > div { 
	padding: 1% 0;
	margin-top:2%;
/* 	border: 1px solid var(--background-color); */
/* 	border-bottom: 1px solid var(--text-color); */
	border-radius: 0.5em 0.5em 0 0;
	padding:0.25em;
	transition: color .5s ease-out;
}

.timeline-info  { 
	padding: 0.4em 0.4em 4em 0.4em;
	border: 1px solid var(--text-color);
}
.timeline-info > div { display:none; }

.active-timeline-history .timeline-info .timeline-history,
.active-timeline-future  .timeline-info .timeline-future {
	display:grid;
}
.active-timeline-current .timeline-info .timeline-current { display:block; }

.active-timeline-history .timeline-header .timeline-history,
.active-timeline-current .timeline-header .timeline-current,
.active-timeline-future  .timeline-header .timeline-future {
	background: var(--text-color);
	color: var(--background-color);
	transition: color .5s ease-out;
/* 	border: 1px solid var(--text-color); */
/* 	border-bottom: unset; */
}

.timeline-info .timeline-history,
.timeline-info .timeline-future {
	align-items: baseline;
	grid-gap:0.2em;
}

.timeline-info .timeline-history { grid-template-columns: auto auto 1fr 5em; }
.timeline-info .timeline-future  { grid-template-columns: auto auto 1fr 5em 2em; }
.timeline-info .timeline-row .date {
	margin-top: 0.25em;
	grid-column-start: 1;
}
.timeline-info .timeline-history .timeline-row .date { grid-column-end: 5; }
.timeline-info .timeline-future  .timeline-row .date { grid-column-end: 6; }

.timeline-info .timeline-history .timeline-row,
.timeline-info .timeline-future .timeline-row {
	display:contents;
	font-size:0.8333em;/* 1/1.2 */
}
.timeline-info .timeline-history .timeline-row .type,
.timeline-info .timeline-future .timeline-row .type {
	justify-self: center;
} 

.timeline-info .timeline-history .timeline-row .value,
.timeline-info .timeline-future .timeline-row .value {
	white-space: normal;
}

.timeline-info .timeline-history .timeline-row .user,
.timeline-info .timeline-future .timeline-row .user {
	overflow-x: hidden;
	text-overflow: ellipsis;
}

.timeline-info .timeline-history .timeline-row .type i.fa-solid::before,
.timeline-info .timeline-future  .timeline-row .type i.fa-solid::before,
.timeline-info .timeline-history .timeline-row .value i.fa-solid::before,
.timeline-info .timeline-future  .timeline-row .value i.fa-solid::before {
	margin-right: 0.25em;
} 

.timeline-info .timeline-row .date {
/* 	background: var(--text-color); */
	color: var(--background-color);
	padding: 0.2em;
	background: linear-gradient(to right, var(--text-color), var(--background-color));
}

.timeline-row .toggle-switch.future span::before,
.timeline-future .fa-clock-rotate-left { transform: scaleX(-1); }

/* .current-row-info, */
.timeline-current-row-info,
.timeline-future-row-info {
	display: grid;
	grid-template-columns: minmax(auto, 20%) 1fr 2em 2em 2em; 
	align-items: baseline;
}

/* .current-row-info .detail-row, */
.timeline-current-row-info .detail-row,
.timeline-future-row-info .detail-row {
	display:contents;
}

/* .current-row-info .detail-row .toggle-switch, */
.timeline-current-row-info .detail-row.availability .toggle-switch {
	grid-area: 1 / 1 / 1 / 6;
	justify-self: center;
	margin-bottom:0.2em;
}

/* .current-row-info .detail-row .fa-trash, */
.timeline-current-row-info .detail-row.availability .fa-trash {
	grid-area: 1 / 1 / 1 / 6;
	justify-self: right;
	margin-bottom:0.2em;
	margin-right: 1em;
}

.detail-row textarea,
.detail-row input {
    pointer-events: none;
    font-size: 1em;
    background: transparent;
	margin: 0 2.5%;
    border: 0;
	padding:0 2.5%;
	width:80%;
    line-height: 2em;
    color: var(--text-color);    
}

.timeline-future-row-info {
	grid-column-start: 1; 
	grid-column-end: 5;
}
/* .timeline-future-row-info .detail-row.location span, */
.detail-row.remark span {
	grid-column-start: 1; 
	grid-column-end: 4;
}

.detail-row.remark div {
	grid-column-start: 1; 
	grid-column-end: 5;
	padding-left:1em;
	padding-top: 0.2em;
	white-space: normal; 
	font-size:  1em;
}

.detail-row textarea,
.detail-row input {
	font-family: Arial;
}
.detail-row textarea::placeholder,
.detail-row input::placeholder {
	opacity: 1;
/* 	color: var(--text-color); */
	font-family: Arial;
/* 	font-size: calc(15px + 0.390625vw); */
}

.timeline-future .detail-row:not(.active) input::placeholder {
	opacity: 0;
}

.detail-row.active textarea,
.detail-row.active input {
	pointer-events: auto;
    background: #fff1;
    color: #fff;
}

.timeline-future .detail-row.active input,
.detail-row.active textarea { margin-top: 0.5em; }

.detail-row.active textarea::placeholder,
.detail-row.active input::placeholder {
	opacity: 0.5;
}

.detail-row.active input { font-size: 2em; }
.detail-row.active input::placeholder {	font-size: calc(2*(15px + 0.390625vw)); }

.detail-row.license input { text-transform: uppercase; }

.detail-row .fa-solid { 
	text-align:center;
	justify-self: center;
	align-self: baseline;/*center;*/
	font-size:1em;
}

.detail-row i.fa-solid:first-child { 
	justify-self:left; 
	text-align: left;
	font-size: 1em;
	min-width: 1.2em;
}

.detail-row.active .fa-solid {
	font-size:2em;
	padding:0.125em;
}

.detail-row .fa-ban	  {	grid-column-start: 3; color: var(--text-color); }
.detail-row .fa-xmark { grid-column-start: 4; color: #800; }
.detail-row .fa-check { grid-column-start: 5; color: #0A0; }
.detail-row .archive,
.detail-row .future,
.detail-row .fa-plus,
.detail-row .fa-pen   { grid-column-start: 5; }

.detail-row:not(.active) .fa-ban,
.detail-row:not(.active) .fa-xmark,
.detail-row:not(.active) .fa-check,
.detail-row.active .fa-plus,
.detail-row.active .fa-pen {
/* 	visibility:hidden;*/
	display:none;
}

.timeline-row .toggle-switch.future span,
.detail-row .toggle-switch.archive span { background-color: transparent !important; }
.timeline-row .toggle-switch.future span::before,
.detail-row .toggle-switch.archive span::before { content: '\f1da'; background-color: transparent !important; }

.detail-row:not([data-option-id]) textarea { display:none; }
.detail-row.active textarea { 
	grid-column-start: 1; 
	grid-column-end: 6; 
	display:block; 
	width: 90%; 
	font-size:1em; 
/* 	height: 8em; */
	resize: none;
    overflow-y: hidden;
}

#vehicle.content .collection .fa-location-dot::after,
#vehicle.content .collection .fa-road::after,
#vehicle.content .collection .fa-gas-pump::after,
#vehicle.content .collection .fa-fire::after { 
	font-family: Arial;
  	margin-left: 0.25em;
}
#vehicle.content .collection .fa-location-dot::after { content: "P"; }
#vehicle.content .collection .fa-road::after 		 { content: "km"; }
#vehicle.content .collection .fa-gas-pump::after 	 { content: "%"; }
#vehicle.content .collection .fa-fire::after 		 { content: "bag"; }

.autocomplete-list {
/* 	position: absolute; */
	background: #000;
	margin-top: 0.5em;
/* 	margin-left: 4em; */
/* 	color: #fff; */
	list-style: none;
	padding:0;
	font-family: Arial;
	font-weight: normal;
	text-align: left;
		
}

.autocomplete-list li {
	padding:0.25em;
	margin:0.25em;
/* 	font-size:2em; */
	text-overflow: ellipsis;
  	overflow-x: hidden;
  	max-width: 4em;
}

.autocomplete-list li:not(:last-child) {
	border-bottom:1px solid #fff8;
}

#location h3 .fa-list { float:right; padding-right:0.5%; }
#location h3 i { margin-left: 0.2em; }

#location.house 		h3 .fa-house,
#location.campground 	h3 .fa-campground,
#location.kota		 	h3 .fa-person-shelter,
#location.laavu		 	h3 .fa-people-roof,
#location.parking 		h3 .fa-square-parking,
#location.view 			h3 .fa-binoculars,
#location.bus 			h3 .fa-bus-simple,
#location.road 			h3 .fa-road,
#location.fire 			h3 .fa-fire,
#location.unknown 		h3 .fa-circle-question,
#location.list			h3 .fa-list {
	color: var(--logo-lightblue-color);
}

#location:not(.house) 		#map .fa-house,
#location:not(.campground) 	#map .fa-campground,
#location:not(.kota)		#map .fa-person-shelter,
#location:not(.laavu)		#map .fa-people-roof,
#location:not(.parking) 	#map .fa-square-parking,
#location:not(.view) 		#map .fa-binoculars,
#location:not(.bus) 		#map .fa-bus-simple,
#location:not(.road) 		#map .fa-road,
#location:not(.fire) 		#map .fa-fire,
#location:not(.unknown) 	#map .fa-circle-question {
	display:none;
}

#location:not(.house) 		.house,
#location:not(.campground) 	.campground,
#location:not(.kota)		.kota,
#location:not(.laavu)		.laavu,
#location:not(.parking) 	.parking,
#location:not(.view) 		.view,
#location:not(.bus) 		.bus,
#location:not(.road) 		.road,
#location:not(.fire) 		.fire,
#location:not(.unknown) 	.unknown {
	display:none !important;
}

.current-location { color: #fff; }

/* #location:not(.house) 		#location-list .fa-house, */
/* #location:not(.campground) 	#map .fa-campground, */
/* #location:not(.parking) 	#map .fa-square-parking, */
/* #location:not(.view) 		#map .fa-binoculars, */
/* #location:not(.bus) 		#map .fa-bus-simple, */
/* #location:not(.fire) 		#map .fa-fire, */
/* #location:not(.unknown) 	#map .fa-circle-question { */
/* 	display:none; */
/* } */

.location-list-row {
	display:grid; 
	grid-template-columns: 2em repeat(4, 1fr) 2em; 
	justify-items: stretch; 
	align-items: stretch;
	grid-gap:0.2em;
	padding-bottom:0.1em;
	border-bottom:1px solid #fff4;
	margin-bottom:0.1em;
/* 	background-color: var(--sub-background-color); */
	text-align: left;
/* 	padding:1%; */
	color: var(--link-color);
}

.list #map { visibility:hidden; }

#map .fa-solid { font-size: 2em; padding: 0.2em; background: #0004; }

.collection-row.disabled .icon .fa-solid,
#map .fa-solid.disabled {
	background: #f008 !important;
	color: var(--header-background-color) !important;
}

.status-ok 		{ color: var(--level-4-color); }
.status-warning	{ color: var(--level-2-color); }
.status-bad 	{ color: var(--level-1-color); }
.status-neutral	{ color: var(--logo-lightblue-color); }
.status-unknown	{ color: var(--level-3-color); }
.status-new		{ color: var(--text-under-opacity-color); }
.status-develop	{ color: var(--logo-darkblue-color); }
.status-check	{ color: var(--level-5-color); }
.status-explore	{ color: var(--time-now-color); }

.status-ok.reserved 		{ color: #0004; background: var(--level-4-color); }
.status-warning.reserved	{ color: #0004; background: var(--level-2-color); }
.status-bad.reserved 		{ color: #0004; background: var(--level-1-color); }
.status-neutral.reserved	{ color: #0004; background: var(--logo-lightblue-color); }
.status-unknown.reserved	{ color: #0004; background: var(--level-3-color); }
.status-new.reserved		{ color: #0004; background: var(--text-under-opacity-color); }
.status-develop.reserved	{ color: #0004; background: var(--logo-darkblue-color); }
.status-check.reserved		{ color: #0004; background: var(--level-5-color); }
.status-explore.reserved	{ color: #0004; background: var(--time-now-color); }

div.collection-row[data-status="Ok"] .status { text-transform: uppercase; }

.collection-container .collection { margin-bottom: 50vh; } /* keep scrolling space for edit form when keyboard is rendered */

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

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

.collection-slot .time { font-size: var(--font-size-070); }
.collection-slot.hasInfo .time { color: var(--link-color); cursor: pointer; }

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


.collectionInfo {
	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 20px;
  	width: calc(100% - 20px);
  	
  	display:grid;
	grid-template-columns: auto 1fr;
	justify-items: stretch; 
	align-items: stretch;
}

.collectionInfo span   { padding: 4px; }
.collectionInfo .title { text-align:right; }
.collectionInfo .odd 	{ background-color:var(--slot-background-odd-color); }
.collectionInfo .even 	{ background-color:var(--slot-background-even-color); }
/* end - collection display */

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

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

/* #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-subset-location ul,
#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-subset-location ul { padding-left:0; }
#info-subset-location li { list-style: none; margin-bottom: 1%; }
#info-subset-location li p { margin-left: 2.5em; padding-right:0; margin-bottom:0; font-size: var(--font-size-085); }
#info-subset-location li:not(:first-child) { border-top:1px solid var(--header-background-color); }
#info-subset-location li .fa-solid { width: 1.2em; }

#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-update,
#location-info {
	display: grid;
	grid-template-columns: auto auto 1fr 1fr;
	padding: 0 0.5%;
	grid-column-gap: 1vw;
	grid-row-gap: 1vw;
}

#location-update button,
#location-info button {
	width:unset;
	height:unset;
}
#saveItemLocation,
#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); } */

resetItemLocation i,
#resetLocation i 	  { font-size: var(--font-size-menu-button-small); }
resetItemLocation,
#resetLocation 		  { margin-left: 5%; vertical-align:middle; }

#location p {
  margin: 0 0 2% 0;
  font-size: var(--font-size-085);
}

.show-live-gigs {   text-align: right; }
.show-live-gigs.active {
	color: var(--logo-lightblue-color);
}

.set-geolocation { float: right; }

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

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

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

#collection-location,
#location-list,
#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);	
}

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

#collection-location,
#location-list {
  z-index: 10;
  overflow-y: scroll;
  height:75vh;
  padding:1em;
}

#location.update-item #toggleLocationList,
#location.update-item #location-info,
#location.update-item #collection-location,
#location:not(#location.update-item) #location-update,
#location.update-item h3 i {
	display:none;
}
#location.update-item #map { visibility:visible; }
/* 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,
#settings-container #experimental-mode-switcher,
#settings-container #speed-bz-mode-switcher { width:50%; }

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

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

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

#experimental-mode-toggles input,
#speed-bz-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;
}

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

#experimental-mode-switcher.no 		input.experimental-mode-no,
#experimental-mode-switcher.yes 	input.experimental-mode-yes, 
#speed-bz-mode-switcher.combined 	input.speed-bz-mode-combined,
#speed-bz-mode-switcher.split 		input.speed-bz-mode-split, 
#app-mode-switcher.basic			input.app-mode-basic,
#app-mode-switcher.advanced 		input.app-mode-advanced {
	opacity: 1;
	background-color: var(--link-color) !important;
}

#experimental-mode-switcher.no	 	a.experimental-mode-no,
#experimental-mode-switcher.yes 	a.experimental-mode-yes, 
#speed-bz-mode-switcher.combined 	a.speed-bz-mode-combined,
#speed-bz-mode-switcher.split 		a.speed-bz-mode-split, 
#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 - GIG */
#gigs-container .collection {
	grid-template-columns: repeat(7, auto);
}

#gigs-container .collection-row-info > div {
	grid-column: 1 / 8;
}

.gig-date-header {
	grid-column-start: 1;
	grid-column-end: 8;
	color: var(--background-color);
	text-align:left;
	font-size:1em;
	padding:0.1em;
	background: linear-gradient(to right, var(--text-color), var(--background-color));
}

.detail-row[data-entity="gig"]:not([data-autocomplete="1"]) div {
	padding-left:1em;	
}
/* END - GIG */

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

/* BEGIN - Toggle Switch */
.toggle-switch { display: grid; }

.toggle-switch input {
	grid-area: 1 / 1 / 2 / 2;
	z-index: 1;
	width: 0;
	height: 0;
	opacity: 0;
	justify-self: center;
  	align-self: center;
}

.toggle-switch span {
	grid-area: 1 / 1 / 2 / 2;
	z-index: 2;
	width: 2.4em;
	height: 1.4em;
	border-radius: 1.4em;
	border: 0.1em solid #444;
	cursor: pointer;
	background-color: var(--purchase-button-error-color);
	-webkit-transition: .4s;
	transition: .4s;
	-webkit-tap-highlight-color: transparent;
}

.toggle-switch span:before {
  position: relative;
  float: left;
  height: 1em;
  width: 1em;
  margin: 0.2em;
  border-radius: 50%;
  content: "";
  background-color: var(--text-color);
  -webkit-transition: .4s;
  transition: .4s;
}

.toggle-switch input:checked + span { 
	background-color: var(--purchase-button-color);
	border: 0.1em solid #888;
}

.toggle-switch input:checked + span:before { 
	margin-left: 1.2em; 
	background-color: var(--link-color);
}

.user-location-tracking span:before {
	content: "\f3c5";
	background-color: unset !important;
	color: var(--text-color);
	text-align:center;
}

.user-location-tracking input:checked + span:before {
	color: var(--link-color);
}

/* END - Toggle Switch */

/* BEGIN - mapbox overrides */

.mapboxgl-popup { max-width:unset !important; }

.mapboxgl-popup-content {
	font-size: calc(15px + 0.390625vw) !important;
	font-family: Arial;
}
.mapboxgl-popup-content h1 {font-size: 1.2em; }
.mapboxgl-popup-content a,
.mapboxgl-popup-content p { 
	display:block;
	margin: 0 0 0.5em 0 !important;
  	font-size: var(--font-size-085);
  	outline:none;
  	color: var(--text-color);
}

.mapboxgl-popup-content a { 
	text-decoration: none;
}

.mapboxgl-popup-close-button { font-size:1.2em; color: #f00; }
/* END - mapbox overrides */

/* BEGIN - Notification overlay */
#app-notification {
	z-index: 100000;
	position: fixed;
	top: 0;
	margin-top: 64px;
	background: var(--notification-box-background);
	border: 0.125em solid var(--notification-box-font);
	max-width: calc(550px + 10vw - 0.25em);
	border-radius: 0.25em;
	color: var(--notification-box-font);
	text-align:center;
}

#app-notification.notice { border-color: var(--notification-box-border-notification); }
#app-notification.warning { border-color: var(--notification-box-border-warning); }
#app-notification.error { border-color: var(--notification-box-border-error); }
	
/* END - Notification overlay */