/* body.dark is the default, light is the deviation */
:root {
	--background-color:			hsl(0deg, 0%, 2.5%);
	--background-nav: 			rgba(0, 0, 0, 0.85);
	--sub-background-color:			hsl(0deg, 0%, 10%);
	--slot-background-odd-color:	hsl(0deg, 0%, 5%);
	--slot-background-even-color:	hsl(0deg, 0%, 10%);
	--purchase-button-color:		hsl(120deg, 25%, 50%);
	--purchase-button-error-color:		hsl(0deg, 70%, 30%);	
	--background-color-input: #fff1;
	--highlight-background-color:	hsl(0deg, 0%, 20%);
	--header-background-color:		hsl(0deg, 0%, 10%);
	
	--text-color:				hsl(0deg, 0%, 50%);
	--link-color:				hsl(0deg, 0%, 80%);
	--text-color-input: 	#fff;
	
	--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-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%);
	--solar-storm-color:			hsl(120deg, 100%, 40%);
	--slot-incomplete-color: 		hsl(30deg, 100%, 40%);
	--purchase-button-clicked-color:		hsl(221deg, 25%, 50%);	
/* 	--:	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%);
}

:root body.light {
	--background-color:			hsl(0deg, 0%, 100%);;/*hsl(0deg, 0%, 2.5%);*/
	--background-nav: 			transparent;/*rgba(0, 0, 0, 0.85);*/
	--sub-background-color:		transparent;
	--slot-background-odd-color:	hsl(0deg, 0%, 95%);
	--slot-background-even-color:	hsl(0deg, 0%, 90%);
	--purchase-button-color:		hsl(120deg, 75%, 50%);
	--purchase-button-error-color:		hsl(0deg, 75%, 50%);	
	--background-color-input: 	#0001;
	--highlight-background-color:	hsl(0deg, 0%, 70%);
	--header-background-color:		hsl(0deg, 0%, 90%);
	
	--text-color:				hsl(0deg, 0%, 20%);
	--link-color:				hsl(221deg, 45%, 35%); /*hsl(221deg, 100%, 45.3%);/*004a99*/ /*hsl(212deg, 50%, 34.9%);/*003067*/
	--text-color-input: 		#000;
}

@media only screen and (max-width: 1299px) {
	:root body.light {
		--background-nav: 			rgba(255, 255, 255, 0.85);
	}	
}


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

table { 
	clear:both;
}

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

a {
	color: var(--link-color);
	text-decoration: none;
}

/* 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 .fa-solid { 
	font-size:var(--font-size-menu-button);
}
/* END - Generic element styling */

/* BEGIN - generic styles */
.font-small { 
	font-size: var(--font-size-070);
}

.clicked .fa-copy,
.fa-copy.clicked { 
	color: var(--logo-lightblue-color);
}

input[type="number"] { 
	appearance: textfield;
}
/* END - generic styles */

/* #url-handler a { */
/* 	color: var(--link-color); */
/* 	text-decoration: none; */
/* } */

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