:root
{
	touch-action: none;
	
	--bgDim: #01070D;
	--bgDul: #050F1A;
	--bgDulA:#050F1A44;
	--bgDulLA:#050F1AAA;
	--bgReg: #142333;
	--bgBri: #36404D;

	--fiDim: #445566;
	--fiDul: #778899;
	--fiReg: #B6C1CC;
	--fiBri: #E6E6E6;

	--fgDim: #349999;
	--fgDul: #5CCCCC;
	--fgReg: #81E6E6;
	--fgBri: #ABFFFF;
	
	/*
	--bgDim: #01070D;
	--bgDul: #1A1604;
	--bgDulA:#1A160444;
	--bgDulLA:#1A1604AA;
	--bgReg: #332E13;
	--bgBri: #6B6932;

	--fiDim: #66591F;
	--fiDul: #999978;
	--fiReg: #CCC499;
	--fiBri: #E6E6E6;

	--fgDim: #998431;
	--fgDul: #CBCC5A;
	--fgReg: #E6D67E;
	--fgBri: #FFF1A6;
	*/

	--black: #000000;
	--dGrey: #222222;
	--lGrey: #E6E6E6;
	--white: #FFFFFF;
	
	--baseFontSize: 0.9vw;
	font-family: Helvetica, sans-serif;
	color:var(--fgReg);
	
	scrollbar-color: var(--fgDul) var(--bgDulLA);
	scrollbar-width: thin;
	
	--articleWidth:45vw;
	--articleCapHeight:5vw;
	--articleMidHeight:10vw;
	--articleBotHeight:18vw;
	--viewpointMidHeight:23vw;
	--viewpointBotHeight:5vw;
}

body
{
	background-color: #000000; 
}

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

html
{
	font-size: var(--baseFontSize);
}
a:link , a:visited
{
	color: var(--fiBri);
}
a:hover, a:active
{
	color: var(--fgDul);
}
hr
{
	border: 1px solid var(--fgReg);
	border-bottom: 1px solid var(--fgDul);
}
.hr-thick
{
	border-width: 3px;
	filter:drop-shadow(3px 3px 6px var(--black));
}
option
{
	background-color: var(--bgDulA);
	outline: none;
}
option:checked, option:hover
{
	background-color: var(--bgReg);
	outline: none;
}
input
{
	font-size: var(--baseFontSize);
	margin: 0.25em 0;
	border:none;
	color: var(--fiReg);
	outline:1px solid var(--fiReg);
	color: var(--fiReg);
	background-color: var(--bgDulA);
	cursor:text;
}
input:disabled
{
	outline:none;
	border:none;
	cursor:default;
}

input[type=search]
{
	margin: 0.25rem 0.2rem 0 0;
	height:1.5rem;
	line-height:1.5rem;
	border:1px solid var(--fiReg);
	outline:none;
}
button, select 
{
	border:none;
	font-size: var(--baseFontSize);
	margin: 0.25em 0;
	outline:1px solid var(--fiReg);
	color: var(--fiReg);
	background-color: var(--bgDulA);
	cursor:pointer;
}
button
{
	cursor:pointer;
	outline: none;
}
select
{
	background-color: var(--bgDul);
}
input[type=checkbox]
{
	font-size: var(--baseFontSize);
	width: 1em;
	height: 1rem;
	accent-color: var(--fiReg);
	cursor:pointer;
	border:none;
	color: var(--fiReg);
	outline:solid 1px;
}
input[type=checkbox]:not(:checked)
{
	font-size: var(--baseFontSize);
	opacity:0.5;
	outline: none;
}
input[type=submit]
{
	border:none;
	color: var(--fiReg);
	outline:solid 1px;
	outline-color: var(--fiReg);
	padding: 0.25em 0.5em 0.25em 0.5em;
	background-color: var(--bgDulA);
	cursor:pointer;
	
}
input[type="file"]
{
	display:none;
	outline: none;
}

textarea
{
	tab-size:2rem;
	font-size: var(--baseFontSize);
	border:1px solid var(--fiReg);
	background:transparent;
	color: var(--fiReg);
	resize:none;
	overflow:auto;white-space:pre;overflow-wrap:normal;
	outline: none;
}

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

.featureButton, .headButton, .sidepane-toggle, .sidepane-logger, .sidepane-backer
{
	height: 2em;
	color: var(--fiDul);
	border-color: var(--fiDul);
	border:solid 1px;
	background-color: var(--bgDulA);
	transition-duration: 0.125s;
	cursor:pointer;
	padding:0;
	margin:0;
	margin-left:0.1em;
	margin-right:0.1em;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
}
.featureButton
{
	min-width:10.8em;
}
.headButton
{
	width:100%;
}

.layer, .overlay
{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	padding:0;
	margin:0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.overlay, .pane, .sidepane, .loginpane
{
	color: var(--fiReg);
	-webkit-backdrop-filter: blur(4px) saturate(60%) brightness(30%);
	backdrop-filter: blur(4px) saturate(60%) brightness(30%);
}
.sidepane
{
	padding: 0;
	margin: 0;
	position: absolute;
	transition: 0.25s cubic-bezier(0.47, 1.02, 0.67, 0.91);
}

#cookieDisclaimer, #THGDisclaimer
{
	z-index:100;
	width:100%;
	color: var(--fiReg);
	text-shadow: 0 0 3px var(--bgReg), 0 0 5px var(--bgReg), 0 0 8px var(--bgDul);
	position: absolute;
	bottom: 0;
	height:1.5rem;
	left: 0;
	-webkit-backdrop-filter: blur(6px) saturate(60%) brightness(30%);
	backdrop-filter: blur(6px) saturate(60%) brightness(30%);
	transition: 0.5s cubic-bezier(0.47, 1.02, 0.67, 0.91);
}
#cookieDisclaimer
{
	bottom: 1.5rem;
}

#feature
{
	z-index:2;
	position: absolute;
	top: 0;
	left: 0;
	margin:0;
	padding:0;
}
#landingtop
{
	z-index:2;
	position: absolute;
	top: 0;
	right: 0;
	margin:0;
	padding:0;
}

.mapselectionpane
{
	position:absolute;
	width:100%;
	/*top:25vh;*/
	top:calc(5em + 8rem);
	bottom:0;
	overflow-y:auto;
	transition: 0.5s cubic-bezier(0.47, 1.02, 0.67, 0.91);
	text-shadow: -1px -1px 0 var(--bgDim), 1px -1px 0 var(--bgDim), -1px 1px 0 var(--bgDim), 1px 1px 0 var(--bgDim), 7px 7px 12px var(--bgDul);
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
}
.mapselectionsolo, .mapselectionduo
{
	margin:auto;
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	align-content: start;
	justify-content: start;
	width:90vw;
}
.mapselectiongroup
{
	align-self: start;
	width:40vw;
	min-width:40vw;
	margin:0 auto 2em auto;
	padding:0;
}
.mapgroupLabel
{
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	margin:0 0 0.75em 0;
	width:100%;
	color: var(--fgReg);
	font-weight: bold;
	text-shadow: var(--bgDul) 7px 7px 12px;
	font-size:2em;
	text-align:center;
	text-shadow: -1px -1px 0 var(--bgDim), 1px -1px 0 var(--bgDim), -1px 1px 0 var(--bgDim), 1px 1px 0 var(--bgDim), 7px 7px 12px var(--bgDul);
}
.mapselectionbutton
{
	height: 2em;
	color: var(--fiReg);
	width:100%;
	padding:0;
	margin:0.25em 0 0 0;
	display: block;
	background-color: var(--bgDulLA);
	text-shadow: var(--black) 3px 3px 6px;
	filter:drop-shadow(3px 3px 6px var(--black));
	font-size:2em;
	transition: 0.25s cubic-bezier(0.47, 1.02, 0.67, 0.91);
	border-radius:0.666em;
	border: solid 1px;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
}

.toggleo
{
	color: var(--fiBri);
	border-color: var(--fiBri);
	background-color: var(--bgReg);
}


.dialogTitle
{
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	color: var(--fgDul);
	font-size:1.2em;
	text-align:right;
}
.infoDialog::before
{
	vertical-align:top;
	margin-right:0.5em;
	content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="2em" height="2em" viewBox="0 0 128 128"><path fill-rule="evenodd" clip-rule="evenodd" fill="%23CDB344" d="M128 119.4H0L64.1 8.6z"/><path fill-rule="evenodd" clip-rule="evenodd" fill="%23036" d="M75.2 45.6 69.8 88H58l-5.1-42.4zM73 92.4v17H54.9v-17z"/></svg>');
}
.successDialog::before
{
	vertical-align:top;
	margin-right:0.5em;
	content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="2em" height="2em" viewBox="0 0 128 128"><path fill-rule="evenodd" clip-rule="evenodd" fill="%2343CD66" d="M120,64c0,15.467-5.467,28.667-16.4,39.6 C92.7,114.533,79.5,120,64,120c-15.467,0-28.667-5.467-39.6-16.4C13.467,92.667,8,79.467,8,64s5.467-28.683,16.4-39.65 C35.333,13.45,48.533,8,64,8c15.5,0,28.7,5.45,39.6,16.35C114.533,35.317,120,48.533,120,64z"/><polyline fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="%23FFFFFF" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="3" points="38.65,64.75 58.55,84.65 99.85,43.4"/></svg>');
}
.questionDialog::before
{
	vertical-align:top;
	margin-right:0.5em;
	content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="2em" height="2em" viewBox="0 0 128 128"><path fill-rule="evenodd" clip-rule="evenodd" fill="%23004D9A" d="M128 64q0 26.6-18.7 45.3A62 62 0 0 1 64 128a62 62 0 0 1-45.2-18.7A62 62 0 0 1 0 64q0-26.5 18.8-45.2C37.6 0 46.3 0 64 0q26.6 0 45.3 18.8C128 37.6 128 46.3 128 64"/><path fill-rule="evenodd" clip-rule="evenodd" fill="%237BF" d="M83.3 64.6q-2 2-6.3 5.1a27 27 0 0 0-4.3 3.6q-.9 1-1.2 3.2H55.9q0-5.7 1-8.2 1-2.6 4.2-5.3 4.6-4.3 5.8-6.4 1.2-2 1.2-4.9t-1.5-4.4-3.9-1.6q-6.8 0-6.8 10.8l-17.2-1.9q3.9-22 25.5-22 11 0 17.2 5.8 6.3 5.7 6.2 14.2 0 3.8-1.2 6.9-1.2 3-3.2 5m-28 15.9h18v17.1h-18z"/></svg>');
}
.colorpickDialog::before
{
	vertical-align:top;
	margin-right:0.5em;
	content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="2em" height="2em" viewBox="0 0 128 128"><path fill-rule="evenodd" clip-rule="evenodd" fill="%23B40000" d="M109.277,18.727l-22.65,22.65 c-1.56-1.556-3.201-2.915-4.925-4.075c-1.733-1.2-3.533-2.183-5.4-2.95c-1.866-0.8-3.833-1.383-5.899-1.75 c-2.067-0.4-4.2-0.6-6.4-0.6v-32c4.4-0.033,8.667,0.35,12.8,1.15c4.101,0.767,8.033,1.934,11.8,3.5 c3.733,1.567,7.334,3.533,10.801,5.9C102.859,12.879,106.151,15.604,109.277,18.727z"/><path fill-rule="evenodd" clip-rule="evenodd" fill="%23B48700" d="M128.052,64.002h-32c0-2.2-0.2-4.317-0.6-6.35 c-0.4-2.066-0.983-4.033-1.75-5.9c-0.8-1.9-1.783-3.717-2.95-5.45c-1.167-1.733-2.533-3.367-4.1-4.9l-0.025-0.025l22.65-22.65 l0.024,0.025c3.101,3.1,5.834,6.383,8.2,9.85c2.333,3.467,4.283,7.083,5.85,10.85c1.567,3.733,2.733,7.667,3.5,11.8 C127.652,55.352,128.052,59.602,128.052,64.002z"/><path fill-rule="evenodd" clip-rule="evenodd" fill="%235AB400" d="M109.302,109.302L86.652,86.652c1.566-1.567,2.933-3.2,4.1-4.9 c1.167-1.733,2.15-3.55,2.95-5.45c0.767-1.866,1.35-3.833,1.75-5.899c0.399-2.067,0.6-4.2,0.6-6.4h32c0,4.4-0.399,8.667-1.2,12.8 c-0.767,4.101-1.933,8.033-3.5,11.8c-1.566,3.767-3.517,7.384-5.85,10.851C115.136,102.886,112.402,106.169,109.302,109.302z"/><path fill-rule="evenodd" clip-rule="evenodd" fill="%2300B42D" d="M64.002,128.052v-32c2.2,0,4.333-0.2,6.4-0.6 c2.066-0.4,4.033-0.983,5.899-1.75c1.867-0.8,3.667-1.783,5.4-2.95s3.383-2.533,4.95-4.1l22.649,22.649 c-3.133,3.101-6.434,5.834-9.899,8.2c-3.467,2.333-7.067,4.283-10.801,5.85c-3.767,1.567-7.699,2.733-11.8,3.5 C72.669,127.652,68.402,128.052,64.002,128.052z"/><path fill-rule="evenodd" clip-rule="evenodd" fill="%2300B4B4" d="M18.727,109.277l22.65-22.65l0.025,0.025 c1.533,1.566,3.167,2.933,4.9,4.1c1.733,1.167,3.55,2.15,5.45,2.95c1.867,0.767,3.833,1.35,5.9,1.75 c2.033,0.399,4.15,0.6,6.35,0.6v32c-4.4,0-8.65-0.399-12.75-1.2c-4.133-0.767-8.067-1.933-11.8-3.5 c-3.767-1.566-7.383-3.517-10.85-5.85c-3.467-2.366-6.75-5.1-9.85-8.2L18.727,109.277z"/><path fill-rule="evenodd" clip-rule="evenodd" fill="%23002DB4" d="M41.377,86.627l-22.65,22.65 c-3.123-3.126-5.848-6.401-8.175-9.825c-2.367-3.467-4.333-7.084-5.9-10.851c-1.566-3.767-2.733-7.699-3.5-11.8 c-0.8-4.133-1.183-8.399-1.15-12.8h32c0,2.2,0.2,4.333,0.6,6.4c0.367,2.066,0.95,4.033,1.75,5.899c0.767,1.9,1.75,3.717,2.95,5.45 C38.462,83.442,39.821,85.067,41.377,86.627z"/><path fill-rule="evenodd" clip-rule="evenodd" fill="%235A00B4" d="M32.002,64.002h-32c-0.033-4.4,0.35-8.65,1.15-12.75 c0.767-4.133,1.934-8.067,3.5-11.8c1.567-3.767,3.533-7.383,5.9-10.85c2.333-3.467,5.067-6.75,8.2-9.85l22.65,22.65 c-1.566,1.533-2.933,3.167-4.1,4.9c-1.2,1.733-2.183,3.55-2.95,5.45c-0.8,1.867-1.383,3.833-1.75,5.9 C32.202,59.685,32.002,61.802,32.002,64.002z"/><path fill-rule="evenodd" clip-rule="evenodd" fill="%23B40087" d="M64.002,0.002v32c-2.2,0-4.317,0.2-6.35,0.6 c-2.066,0.367-4.033,0.95-5.9,1.75c-1.9,0.767-3.717,1.75-5.45,2.95c-1.733,1.167-3.367,2.534-4.9,4.1l-22.65-22.65 c3.1-3.133,6.383-5.867,9.85-8.2c3.467-2.367,7.083-4.333,10.85-5.9c3.733-1.566,7.667-2.733,11.8-3.5 C55.352,0.352,59.602-0.031,64.002,0.002z"/></svg>');
}
.timeCoderDialog::before
{
	vertical-align:top;
	margin-right:0.5em;
	content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="2em" height="2em" viewBox="0 0 128 128"><path fill-rule="evenodd" clip-rule="evenodd" fill="%23FFFFFF" d="M100.9,38.45L94.05,31.6l11.65-11.65l6.85,6.85L100.9,38.45z M76.2,5.35v8.5h-6.7 v5.8H58.55v-5.8h-6.7v-8.5H76.2z"/><path fill-rule="evenodd" clip-rule="evenodd" fill="%23FFFFFF" d="M109,69c0,12.434-4.384,23.033-13.15,31.8 C87.05,109.6,76.434,114,64,114c-12.433,0-23.05-4.4-31.85-13.2C23.383,92.033,19,81.434,19,69c0-12.433,4.383-23.05,13.15-31.85 C40.95,28.383,51.567,24,64,24c12.434,0,23.05,4.383,31.85,13.15C104.616,45.95,109,56.567,109,69z M63.7,70.3l-7.4-27.75 L63.7,70.3z M64,71.35L37.25,86.8L64,71.35z"/><line fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="%23000000" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="3" x1="63.7" y1="70.3" x2="56.3" y2="42.55"/><line fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="%23000000" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="3" x1="64" y1="71.35" x2="37.25" y2="86.8"/><path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="%23999999" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="3" d=" M109,69c0,12.434-4.384,23.033-13.15,31.8C87.05,109.6,76.434,114,64,114c-12.433,0-23.05-4.4-31.85-13.2 C23.383,92.033,19,81.434,19,69c0-12.433,4.383-23.05,13.15-31.85C40.95,28.383,51.567,24,64,24c12.434,0,23.05,4.383,31.85,13.15 C104.616,45.95,109,56.567,109,69z"/></svg>');
}

.dialog, .dialogNonModal
{
	width:20%;
	padding: 0.333em;
	color: var(--fiDul);
	border-color: var(--fiDul);
	border:solid 1px;
	background-color: var(--bgReg);
	border-radius:0.666em;
}
.articleDialogNonModal
{
	padding: 0;
}

.articleSide
{
	width:100%;
	overflow-x:hidden;
	overflow-y:auto;
	color: var(--fgReg);
	background-color: var(--bgDul);
	border:solid 1px var(--fiDul);
	border-bottom-left-radius:0.666em;
	/*border-bottom-right-radius:0.666em;*/
	/*height:calc( var(--articleMidHeight) + var(--articleBotHeight) + 1rem);*/
	height:calc( var(--articleMidHeight) + var(--articleBotHeight) + 0.75rem);
	/*margin-right:0.25rem;*/
	/*margin-bottom:0.25rem;*/
	padding: 0.333em;
}

.articleTop, .articleMiddle, .panoMiddle
{
	width:100%;
	padding: 0.333em;
	color: var(--fiDul);
	border:solid 1px var(--fiDul);
	background-color: var(--bgReg);
	/*margin-bottom:0.25rem;*/
	grid-template-rows: 1fr;
}
.articleTop
{
	height:1.25rem;
	line-height:1.25rem;
	color: var(--fgBri);
	border-top-left-radius:0.666em;
	border-top-right-radius:0.666em;
	display: grid;
	align-content: center;
	justify-content: center;
	grid-template-columns: 2fr 1fr;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
}

.articleMiddle
{
	height:var(--articleMidHeight);
	display: grid;
	align-content: center;
	justify-content: center;
	grid-template-columns: 5fr 2fr;
}
.noArtArt
{
	grid-template-columns: 1fr;
}
.articleBottom, .bottomify, .panoBottom
{
	border-bottom-left-radius:0.666em;
	border-bottom-right-radius:0.666em;
}
.articleBottom, .panoBottom
{
	width:100%;
	padding: 0.333em;
	color: var(--fiDul);
	border:solid 1px var(--fiDul);
	background-color: var(--bgReg);
	/*margin-bottom:0.25rem;*/
	height:var(--articleBotHeight);
	display: grid;
	align-content: start;
	justify-content: center;
	grid-template-columns: 3fr 2fr;
}
.articleArtifacts
{
	height:var(--articleMidHeight);
}
#articleArtifacts
{
	height:calc(var(--articleMidHeight) - 1.5rem);
}
.articleArtifacts, #captionPart
{
	border-color: var(--fiDul);
	border-left:solid 1px;
}
.artifactListLabel
{
	background-color: var(--bgDul);
	border-color: var(--fiDul);
	border-top:solid 1px;
	height:1.25rem;
	line-height:1.25rem;
}
.artifactList
{
	background-color: var(--bgDul);
	display: block;
	overflow: hidden;
	overflow-x:hidden;
	overflow-y:auto;
}
.captionNoArt, .captionWithArt
{
	max-width:calc((var(--articleWidth) / 5) * 2);
	overflow-x:hidden;
	overflow-y:auto;
	color: var(--fgReg);
}
.captionNoArt
{
	max-height:var(--articleBotHeight);
	min-height:var(--articleBotHeight);
}
.captionWithArt
{
	max-height:calc(var(--articleBotHeight) - var(--articleCapHeight) - 1.5rem);
	min-height:calc(var(--articleBotHeight) - var(--articleCapHeight) - 1.5rem);
}
#articleDescription, #viewpointDescription
{
	max-width:100%;
	overflow-x:hidden;
	overflow-y:auto;
	color: var(--fgReg);
}
#mediaArtifacts
{
	white-space:nowrap;
	overflow-x:auto;
	overflow-y:hidden;
	max-width:100%;
	max-height:var(--articleCapHeight);
	min-height:var(--articleCapHeight);	
}

.bigThumbnailActual
{
	max-width:100%;
	max-height:var(--articleBotHeight);
	min-height:var(--articleBotHeight);
	margin:auto;
	cursor:pointer;
	object-fit: contain;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
}

.bigThumbnail
{
	text-align:center;
	overflow:hidden;
	max-width:100%;
	min-width:100%;
	max-height:var(--articleBotHeight);
	min-height:var(--articleBotHeight);
	background-color: var(--bgDul);
}

.panoThumbnail
{
	text-align:center;
	overflow:hidden;
	max-width:100%;
	min-width:100%;
	max-height:100%;
	min-height:100%;
	background-color: var(--bgDul);
}
.panoMiddle
{
	height:var(--viewpointMidHeight);
	display: grid;
	align-content: center;
	justify-content: center;
	grid-template-columns: 1fr;
}
.panoBottom
{
	height:var(--viewpointBotHeight);
	grid-template-columns: 1fr;
	
}

.mediagroup
{
	--indent-amount:0;
	--intermediary: calc(1em * var(--indent-amount));
	margin-bottom: 0.25rem;
	margin-left: var(--intermediary);
	width: calc( 100% - var(--intermediary) - 0.25rem );
	width: calc( 100% - var(--intermediary) - 0.25rem );
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	border:1px solid var(--fiDul);
	color: var(--fiReg);
	background-color: var(--bgDul);
	padding:0 0.1rem;
	cursor:pointer;
}
.thumbGrid
{
	display: grid;
	margin-left:1em;
	grid-template-columns: repeat(3, 1fr);
	align-content: center;
	justify-content: center;
}
.smallThubnail
{
	position:relative;
	display:inline-block;
	aspect-ratio: 16 / 9;
	margin:0.25rem;
	background-repeat: no-repeat;
	background-size: cover;
	cursor:pointer;
}

.beforeNafterSlider
{
	position: absolute;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
	height: 100%;
	outline: none;
	border: none;
	background: transparent;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;	
	cursor: col-resize;
}
.beforeNafterSlider::-webkit-slider-runnable-track
{
	height: 20000em;
	-webkit-appearance: none;
	appearance:none;
}
.beforeNafterSlider::-webkit-slider-thumb
{
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.3s ease;
	width: 2px;
	height: 20000em;
	background-color: transparent;
	border:none;
	cursor: col-resize;
	z-index:5;
}
.beforeNafterSlider:hover::-webkit-slider-thumb
{
	background-color: var(--lGrey);
}
.beforeNafterSlider::-moz-range-track
{
	height: 100%;
	-moz-appearance: none;
	appearance:none;
}
.beforeNafterSlider::-moz-range-thumb
{
	-moz-appearance: none;
	appearance:none;
	transition: background-color 0.3s ease;
	width: 2px;
	height: 100%;
	background-color: transparent;
	border:none;
	cursor: col-resize;
	z-index:5;
}
.beforeNafterSlider:hover::-moz-range-thumb
{
	background-color: var(--lGrey);
}

.stillContainer
{
	position: absolute;
	max-height: 95%;
	min-height: 95%;
	overflow: hidden;
	border: 3px solid var(--dGrey);
	/*border:none;*/
	left: 50%;
	top: 47.75%;
	transform: translate(-50%, -50%);
}

.beforeNafterContainer
{
	position: relative;
	width: 100%;
	margin:auto;
	max-height:var(--articleBotHeight);
	min-height:var(--articleBotHeight);
	border: none;
	object-fit: contain;
	.img
	{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-position:center;
		background-size: contain;
		background-repeat: no-repeat;
	}
	.background-img
	{
		width: 100%;
	}
	.foreground-img
	{
		clip-path: inset(0px 50% 0px 0px);
	}
}

.progress-bar
{
	width: 100%;
	background-color: var(--dGrey);
	border-radius: 25px;
	overflow: hidden;
	position: relative;
}
.progress
{
	--progress-value: 0%;
	--progress-color: var(--fgDul);
	width: calc(var(--progress-value)*1%);
	height: 25px;
	background-color: var(--progress-color);
	border-radius: 25px 0 0 25px;
	transition: width 0.3s ease-in-out;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.progress::after
{
	content: attr(data-progress) '%';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: var(--white);
	font-size: 12px;
	font-family: Arial, sans-serif;
}


.dialog
{
	position: relative;
	margin: auto;
	height:auto;
}
.dialogNonModal, .articleDialogNonModal
{
	position: absolute;
}

.dialogButtonTray
{
	float:right;
}
.dialogButtonGrid
{
	display: grid;
	align-content: center;
	justify-content: center;
}

.fade
{
	opacity:0;
	visibility: hidden;
}

.pane
{
	width: calc(100% - 2em);
	margin: 0em 1em 1em;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.loginpane
{
	padding: 0.5em 2em 2em;
	margin: 0 auto;
	border-radius:0.666em;
	transition: 0.5s cubic-bezier(0.47, 1.02, 0.67, 0.91);
	z-index:2;
	width:25em;
	
	position: relative;
}

.vidCon
{
	background-color: var(--black);
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.vidIframe
{
	height:100%;
    overflow: hidden;
	aspect-ratio: 16 / 9;
}

.smallbutton, .inlineButton, .inlineButtonDisabled
{
	height:1.5rem;
	line-height:1.5rem;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	margin: 0.25rem 0;
	outline:1px solid var(--fiReg);
	vertical-align: middle;
	color: var(--fiReg);
	background-color: var(--bgDul);
	padding:0 1em;
	cursor:pointer;
}
.inlineButton, .inlineButtonDisabled
{
	margin:0.25rem 0;
}
.inlineButtonDisabled/*this is here because buttons are dumb*/
{
	color: var(--fiDul);
	outline-color: var(--fiDul);
	background-color: var(--bgReg);
	cursor:unset;
}

.halfButton
{
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	padding:0;
	margin:0;
	width:100%;
	display:block;
	text-align:center;
	height: 0.75rem;
	font-size:0.5rem;
	border:0px solid var(--fiReg);
	color: var(--fiReg);
	background-color: transparent;
	cursor:pointer;
}

.artifact
{
	position:relative;
	float: left;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	margin: 0.25rem 0.125rem;
	color: var(--fiReg);
	background-color: var(--fiDim);
	padding:0rem 0.5rem;
	border-radius:0.333rem;
	cursor:pointer;
}

.killButton
{
	position:absolute;
	right:-0.18rem;
	top:-0.16rem;
	width:0.75rem;
	height:0.2rem;
	color:black;
	font-size: 0.5rem;
	background:#C33;
	border-radius:0.4rem;
	text-align: center;
	margin-top:-0.1rem;
	padding-bottom:0.5rem;
}


.smallgridbutton
{
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	text-align:center;
	margin: 0;
	border:none;
	outline:1px solid var(--fiDul);
	line-height:1.2rem;
	color: var(--fiReg);
	background-color: var(--bgDul);
	padding:0;
	cursor:pointer;
}
.smallgriditem
{
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	margin: 0;
	border:none;
	color: var(--fiReg);
	outline:1px solid var(--fiDul);
	line-height:1.2rem;
	padding:0;
}


.mediumLabel
{
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	color: var(--fgReg);
	font-size:1.5em;
	text-align:right;
}
.bigLabel
{
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	position:absolute;
	top:0em;
	left:0em;
	width:100%;
	color: var(--fgDul);
	font-size:2em;
	text-align:center;
}
.beamHead
{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	color: var(--fgReg);
	text-shadow: var(--bgDul) 7px 7px 12px;
	filter:drop-shadow(3px 3px 6px var(--black));
	text-align:center;
	border-bottom:6px solid var(--fgReg);
	-webkit-backdrop-filter: blur(4px) saturate(60%) brightness(30%);
	backdrop-filter: blur(4px) saturate(60%) brightness(30%);
}
.hugeLabel
{
	font-weight: bold;
	font-size:5em;
	line-height:5rem;
	padding-top:0.25rem;
	padding-bottom:0.1rem;
}
.tagline
{
	line-height:1rem;
	padding-top:0.1rem;
	padding-bottom:0.25rem;
}

.selected
{
	color: var(--white);
	background-color: var(--fiDim);
}

.columnresizer
{
	position: absolute;
	top: 0;
	right: 0;
	width: 5px;
	height:100%;
	cursor: col-resize;
	border-right:none;
	z-index:9001;
	border-right: 2px solid  var(--fiDul);
}
.columnresizer:hover, .columnresizing 
{
	border-right: 2px solid var(--white);
}

/**********************************************************************************************************************************************************************************************************************************/
/*Tables*/

.interleaveTR
{
	background-color: var(--bgDul);
	resize:horizontal;
	overflow:auto;
}

.interleaveTW
{
	margin-top:1em;
	overflow-x:hidden;
	overflow-y:scroll;
	border: 2px solid var(--dGrey);
}

.interleaveTR:nth-child(even)
{
    background-color: var(--bgReg);
}

.interleaveTR td
{
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	max-width: 10px;
	border-right: 2px solid var(--dGrey);
}
.interleaveTR th
{
    position:sticky;
	top:0;
	background-color: var(--dGrey);
}

@media all and (orientation:landscape)
{
	#sidetop
	{
		z-index:2;
		position: absolute;
		top: 0;
		right: 0;
		margin:0;
		padding:0;
	}
	.sidepane-toggle
	{
		width: 2em;
	}
	.sidepane-logger
	{
		width:10.8em;
	}
	.sidepane-backer
	{
		width:5em;
	}
	
	.sidepane
	{
		padding-bottom: 3.5em;
		top: 2.2rem;
		bottom:0rem;
		right: 0rem;
		width: 18.3rem;
	}
	.sidepane-closed
	{
		right: -18.3em;
	}
	.mapselectionduo
	{
		grid-template-columns: repeat(2, 1fr);
	}
}
@media all and (orientation:portrait)
{
	:root
	{
		--baseFontSize: 2.1vw;
	}
	#sidetop
	{
		z-index:2;
		position: absolute;
		bottom: 0;
		right: 0;
		width: 100%;
		margin:0;
		padding:0;
		overflow:hidden;
		
		display: grid;
		align-content: center;
		justify-content: center;
		grid-template-columns: repeat( 3, 1fr);
	}
	.hugeLabel
	{
		padding-top:4rem;
		
	}
	.mapselectionpane
	{
		/*top: calc(25vh + 4rem);*/
		top:calc(5em + 12rem);
	}
	.sidepane-toggle, .sidepane-logger, .sidepane-backer
	{
		width: calc( (100vw / 3.0) - 0.2em);
	}
	.sidepane
	{
		padding-bottom: 5.7rem;
		height: 18.3em;
		bottom: 0em;
		left: 0;
		width: 100vw;
	}
	.sidepane-closed
	{
		bottom: calc( -18.3em - 6em);
	}
	.mapselectiongroup
	{
		width:80vw;
		min-width:80vw;
	}
	
}

/**********************************************************************************************************************************************************************************************************************************/
/*Trees*/

selectable-tree
{
	--select-text: var(--white);
	--select-color: var(--fiDim);
	color: var(--fiReg);
	   
	bottom:0;
	width:100%;
	
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	
	margin: 0;
	padding: 0;
	overflow-x:auto;
	overflow-y:auto;
}

.treewrapper
{
	margin: 0;
	padding: 0;
	display:flex;
	flex-direction: column;
	flex-wrap: wrap;
	min-width:100%;
}
.selectable-node
{
	border-bottom: solid 1px var(--fiBri);
	position:relative;
	min-width:100%;
	height: 1.2em;
	white-space: nowrap;
	display:flex;
	flex-grow:0;
}
.tabbed-node
{
	--indent-amount:2;
	--intermediary: calc( 0.5em + (1em * var(--indent-amount)));	
	margin-left: var(--intermediary);
	width: calc( 100% - var(--intermediary) );
	display:inline;
	white-space: nowrap;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	height:1.5em;
}
.treetext
{
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	padding:0;
	margin:0;
}

.visEye, .expTri
{
	display:inline;
	white-space: nowrap;
	cursor:pointer;
	height:1.2em;
	padding:0;
	margin:0;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.visEye
{
	position:sticky;
	bottom:0;
	left:0;
	background-color: var(--dGrey);
	margin-bottom:-0.2em;
	
	content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512" xml:space="preserve"><path fill-rule="evenodd" clip-rule="evenodd" fill="%23A0C0E0" d="M331.75 331.8q31.4-31.4 31.4-75.8t-31.4-75.75q-31.35-31.4-75.7-31.4-44.4 0-75.75 31.4-31.4 31.35-31.4 75.75t31.4 75.8q31.35 31.35 75.75 31.351 44.35-.001 75.7-31.351M320.5 256q0 26.75-18.9 45.65T256 320.549q-26.75 0-45.65-18.899-18.9-18.901-18.9-45.65 0-26.75 18.9-45.65c18.9-18.9 27.816-18.9 45.65-18.9q26.7 0 45.6 18.9T320.5 256M256 96.4q160.55 4.4 234.95 159.6Q416.55 411.2 256 415.6 95.45 411.2 21.05 256 95.465 100.813 256 96.4"/></svg>');
	/*content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512" xml:space="preserve"><path fill-rule="evenodd" clip-rule="evenodd" fill="%23E0CA95" d="M331.75 331.8q31.4-31.4 31.4-75.8t-31.4-75.75q-31.35-31.4-75.7-31.4-44.4 0-75.75 31.4-31.4 31.35-31.4 75.75t31.4 75.8q31.35 31.35 75.75 31.351 44.35-.001 75.7-31.351M320.5 256q0 26.75-18.9 45.65T256 320.549q-26.75 0-45.65-18.899-18.9-18.901-18.9-45.65 0-26.75 18.9-45.65c18.9-18.9 27.816-18.9 45.65-18.9q26.7 0 45.6 18.9T320.5 256M256 96.4q160.55 4.4 234.95 159.6Q416.55 411.2 256 415.6 95.45 411.2 21.05 256 95.465 100.813 256 96.4"/></svg>');*/
}
.visTog
{
	content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512" xml:space="preserve"><path fill-rule="evenodd" clip-rule="evenodd" fill="%237790A8" fill-opacity=".502" d="M331.75 331.8q31.4-31.4 31.4-75.8t-31.4-75.75q-31.35-31.4-75.7-31.4-44.4 0-75.75 31.4-31.4 31.35-31.4 75.75t31.4 75.8q31.35 31.35 75.75 31.351 44.35-.001 75.7-31.351M320.5 256q0 26.75-18.9 45.65T256 320.549q-26.75 0-45.65-18.899-18.9-18.901-18.9-45.65 0-26.75 18.9-45.65c18.9-18.9 27.816-18.9 45.65-18.9q26.7 0 45.6 18.9T320.5 256M256 96.4q160.55 4.4 234.95 159.6Q416.55 411.2 256 415.6 95.45 411.2 21.05 256 95.465 100.813 256 96.4"/></svg>');
}
.expTri
{
	height:1em;
	width:1em;
	
	content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="50 0 512 512" xml:space="preserve" transform="rotate(-90)"><path fill-rule="evenodd" clip-rule="evenodd" fill="%23A0C0E0" d="M399.3 196q41.7-.5 28.351 28.35L256 396 84.35 224.35Q70.986 195.487 112.7 196z"/></svg>');
	/*content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="50 0 512 512" xml:space="preserve" transform="rotate(-90)"><path fill-rule="evenodd" clip-rule="evenodd" fill="%23E0CA95" d="M399.3 196q41.7-.5 28.351 28.35L256 396 84.35 224.35Q70.986 195.487 112.7 196z"/></svg>');*/
}
.expTog
{
	content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 -50 512 512" xml:space="preserve"><path fill-rule="evenodd" clip-rule="evenodd" fill="%23A0C0E0" d="M399.3 196q41.7-.5 28.351 28.35L256 396 84.35 224.35Q70.986 195.487 112.7 196z"/></svg>');
	/*content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 -50 512 512" xml:space="preserve"><path fill-rule="evenodd" clip-rule="evenodd" fill="%23E0CA95" d="M399.3 196q41.7-.5 28.351 28.35L256 396 84.35 224.35Q70.986 195.487 112.7 196z"/></svg>');*/
}

/**********************************************************************************************************************************************************************************************************************************/
/*Tabs*/

.tabButton, .tabButtonCurrent
{
	height: 1.7em;
	color: var(--fiDul);
	border:solid 1px;
	border-color: var(--fiDul);
	border-bottom-color: var(--fiBri);
	background-color: var(--bgDulA);
	transition-duration: 0.125s;
	cursor:pointer;
	margin:0;
	padding-right:0.5em;
	width:100%;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
}
.tabButtonCurrent
{
	border-bottom: 0;
	color: var(--fiBri);
	border-color: var(--fiBri);
	background-color: var(--bgReg);
}
.tabHead
{
	--tabCount:3;
	display:grid;
	width:100%;
	margin:0;
	padding:0;
	grid-template-columns: repeat( var(--tabCount), 1fr);
}
.tab
{
	position:relative;
	width: calc(100% - 2px);
	height: 100%;
	border:solid 1px;
	border-color: var(--fiBri);
	border-top: 0;
	
	display: flex;
	flex: 1;
}
.tabInactive
{
	display:none;
}


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

.browsebtn
{
	display:inline-block;
	color: var(--fiBri);
	border:solid 1px;
	border-color: var(--fiBri);
	background-color: var(--bgDulA);
	padding: 5px 15px;
	cursor:pointer;
}


@media (hover:hover)  and (pointer: fine)
{
	input[type=submit]:hover, button:hover:not(:disabled)
	{
		color: var(--fiReg);
		outline-color: var(--fiReg);
		background-color: var(--bgBri);
	}
	.featureButton:hover, .headButton:hover, .sidepane-toggle:hover, .sidepane-logger:hover, .sidepane-backer:hover, .tabButton:hover
	{
		color: var(--fiReg);
		border-color: var(--fiReg);
		background-color: var(--bgBri);
	}
	.smallbutton:hover:not(:disabled), .smallgridbutton:hover:not(:disabled), .inlineButton:hover
	{
		color: var(--fiReg);
		border-color: var(--fiReg);
		background-color: var(--bgBri);
	}
	.smallbutton:disabled, .smallgridbutton:disabled
	{
		color: var(--fiDul);
		border-color: var(--fiDul);
		background-color: var(--bgReg);
		cursor:unset;
	}
	.artifact:hover
	{
		color: var(--bgDim);
		background-color: var(--fgDim);
	}
	.killButton:hover
	{
		background-color:maroon;
	}
    .toggleo:hover
	{
		background-color: var(--bgBri);
	}
}

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