:root {
	--highlight: #9a5c29;;
	--highlightactive: #e6883b;

	--logo: #f9be8d;
	--logohover: #f9be8d66;
	--link: #8d4307;
	--scrollbars: #aaa transparent; 

	--label: #666;
	--border: #999;

	--bordertransp: rgba(153, 153, 153, 0.5);
	--hl-bg1:    rgba(249, 235, 213, 0.2);

	--stdbkg: rgba(255, 255, 255, 0.25);
	--stdcol: #444;;

	--hovbkg: rgba(255, 255, 255, 0.5);
	--hovbrd: var(--highlight);
	--hovcol: var(--highlight); 
	--hovshadow: inset 0px 0px 1.5px 1px var(--highlight);	

	--actbkg: var(--highlight);  
	--actbrd: var(--highlight);  
	--actcol: #fff;

	--selbkg: var(--hl-bg1);
	--selbrd: var(--highlight);
	--selcol: var(--highlight);

	--ok:       rgb(50, 114, 50);
	--ok-bg:    rgba(220, 244, 220, 0.2); 
	--ok-brd:   var(--ok);
	--okshadow: inset 0px 0px 1.5px 1px var(--ok);
	--okshadow2: inset 0px 0px 5px 2px var(--ok);

	--check:    rgb(191 118 0);
	--check-bg: rgb(251, 239, 170); 
	--check-brd:   var(--check);
	--checkshadow: inset 0px 0px 1.5px 1px var(--check);

	--error:    rgb(131, 51, 51); 
	--error-bg: rgba(243, 211, 211, 0.2); 
	--error-brd: var(--error);
	--errorshadow: inset 0px 0px 1.5px 1px var(--error);

	--submit: rgb(154, 111, 0);

	--avishadow: inset 0px 0px 1.5px 1px var(--ok);
	--avibrd: var(--ok);
	--avibg: var(--ok-bg);

	--checkbox-size: 1.25em; 

	--inputborder: var(--border);
	--focus: var(--highlight);
	--form-control-disabled: #959495;

	--timerbasecol:  #bbb;
	--timerstartcol: rgba(154, 92, 41, 0.5);
	--timerendcol:   rgba(154, 92, 41, 0.75);
	--timerinterval: 60s;

	--throttlecolor: rgb(92, 67, 67); 
	--throttlebg: rgb(241, 232, 232);  
	--throttleborder: var(--error-brd);

	--speedo4: rgb(131, 131, 54);
	--speedo5: rgb(183, 126, 22);
	--speedo6: rgb(191, 46, 46);

	--userlistbg: #eee;
	--userlistborder: #ccc;
	--userlisthover: #f7f7f7;
	--userlistfilter:  #f9eee4;


	font-family: sans-serif;
	font-size: 20px; 
	box-sizing: border-box;
}

body {
	padding: 0;
	margin: 0;
	background-color: #202924;
}

p { 
	margin: 0.5em 0;
	margin-block-start: 0.5em;
	margin-block-end: 0.5em;
}

.hidden { display: none !important; }

.full-bg { 
	z-index: 0;
	position: fixed; 
	top: 0; 
	left: 0;
	width: 100vw;
	height: 100vh;
	background-image: url("img/slider03.jpg");
	background-size: cover; 
	background-repeat: no-repeat;
}


input { 
	border: 1px solid var(--inputborder); border-radius: 6px; box-sizing: border-box; 
	width: 100%; 
	height: 2em;
	font-size: 1.1em;
	outline: none; padding: 5px 10px; 
	&:focus { border-color: var(--focus); }
	}

textarea { 
	border: 1px solid var(--inputborder); border-radius: 6px; box-sizing: border-box; 
	width: 100%; 
	height: 2em;
	font-size: 1.0em;
	font-family: sans-serif;
	outline: none; padding: 5px 10px; 
	&:focus { border-color: var(--focus); }
	}


input[type="checkbox"] {
	width: var(--checkbox-size);  min-width: var(--checkbox-size); max-width: var(--checkbox-size);
	height: var(--checkbox-size);  min-height: var(--checkbox-size); max-height: var(--checkbox-size);
	display: grid; place-content: center;
	appearance: none; -webkit-appearance: none; cursor: pointer; 
	margin: 0; padding: 0; background-color: #fff; color: var(--highlight);
	&::before {
		width: calc(var(--checkbox-size) * 0.6); height: calc(var(--checkbox-size) * 0.6); 
		transform: scale(0); transition: 120ms transform ease-in-out; transform-origin: center; content: ""; 
		box-shadow: inset var(--checkbox-size)  var(--checkbox-size) currentColor; background-color: CanvasText;	
		clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
		}
	&:checked { box-shadow: inset 0px 0px 1.5px 1px currentColor; }
	&:checked::before { transform: scale(1); }
	}

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus,
textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus,
select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
	}
	
input[type="password"]::-ms-reveal 
{
    display: none;
}



input.button, .button { 
	display: inline-block; 
	cursor: pointer; 
	box-sizing: border-box; 
	width: auto; 
	padding: 0.5em 1.5em;
	margin-right: 0.5em;
	
	outline: none; 
	color: var(--stdcol);
	background: var(--stdbkg);
	border: 1px solid var(--inputborder); 
	border-radius: 6px; 
	
	font-size: 0.95em; 
	font-weight: bold;
	text-align: center;

	height: 2.25em;
	}

.button:hover { 
	color: var(--hovcol); 
	background: var(--hovbkg); 
	border-color: var(--hovbrd); 
	box-shadow: var(--hovshadow);
}
.button:active { 
	color: var(--actcol);
	background: var(--actbkg); 
	border-color: var(--actbrd); 
}
.button:focus { 
	border-color: var(--focus);
}

.button.OK {
	color: var(--ok);
	background-color: var(--ok-bg);
	border-color: var(--ok-brd);
	box-shadow: none; 
}
.button.OK:hover {
	box-shadow: var(--okshadow);
}
.button.OK:active {
	color: white;
	background-color: var(--ok);
	border-color: var(--ok);
}
.button.OK:focus { 
	border-color: var(--ok);
}

.button.ERROR {
	color: var(--error);
	background-color: var(--error-bg);
	border-color: var(--error-brd);
	box-shadow: none;
}
.button.ERROR:hover {
	box-shadow: var(--errorshadow);;
}
.button.ERROR:active {
	color: white;
	background-color: var(--error);
	border-color: var(--error);
}
.button.ERROR:focus {
	border-color: var(--error);
}

.feedbackMessage {
	font-weight: bold;
	color: var(--label);
}

.feedbackMessage.submitting {
	color: var(--submit);
}

.feedbackMessage.OK {
	color: var(--ok);
}

.feedbackMessage.ERROR {
	color: var(--error);
}


.password-field {
  position: relative;
  display: flex;
  align-items: center;
}

.password-field input {
  width: 100%;
  padding-right: 2.5rem; /* Space for the toggle button */
}

.password-field button {
  position: absolute;
  right: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  outline: none;
}

.password-field button svg {
  color: var(--inputborder);
  transition: color 0.2s ease;
}

.password-field button:hover svg {
  color: var(--highlight);
}

.minibutton {
	display: inline-block; 
	width: auto; 

	padding: 0.25em 0.75em; 
	margin: 0.25em 0 0.25em auto;

	text-align: center;
	font-size: 0.7em;
	font-weight: bold; 

	border-width: 1px; 
	border-style: solid;
	border-color: var(--stdborder);
	border-radius: 0.3em;

	cursor: pointer; 
}

.minibutton:hover {
	background: var(--hovbkg); 
	border-color: var(--hovbrd); 
	color: var(--highlight);
	box-shadow: var(--hovshadow);
}

.minibutton:active { 
	background: var(--actbkg); 
	border-color: var(--actbrd); 
	color: var(--actcol);
}

.minibutton.selected {
	background: var(--selbkg); 
	border-color: var(--selbrd); 
	color: var(--selcol); 
} 


/* -------------------------------------------------------------------------- */

#Wrapper {
	z-index: 50;
	position: relative;
	height: 100vh;
	width: 57em;
	min-width: 57em;
	max-width: 57em;
	padding: 0; 
	margin: 0 auto;
}

/* -------------------------------------------------------------------------- */

#Home {
	position: absolute;
	display: block; 
	text-decoration: none; 
	top: -3em;
	right: 1em;
	color: var(--logo);
	opacity: 0.0;
	filter: drop-shadow(0px 0px 2px black);
	border: 2px solid var(--logo);
	padding: 0.2em 1em;
	font-size: 1em;
}
.expanded #Home { top: 1.5em; opacity: 1.0; cursor: pointer; }
.animate #Home { transition: opacity 1s, top 2s;  }
.animate.expanded #Home { transition: opacity 1s 1s, top 2s;  }
#Home:hover { background: var(--logohover); }
#Home:active { background: var(--logo); color: #333;  }


#Footer {
	z-index: 10;
	position: absolute;
	bottom: 0.5em;
	right: 1em;
	color: #e4e4e1;
	font-size: 0.8em;
	filter: drop-shadow(0px 0px 2px black);
}


#SiteIntro {
	width: 35em;
	box-sizing: border-box;
	margin: 0;
	padding: 2em 0em 2em 2.5em;
	color: #e4e4e1;
	filter: drop-shadow(0px 0px 2px black);
	opacity: 1.0;
}
.expanded #SiteIntro { 
	opacity: 0.0;
	height: 0;
	margin: 0 auto;
	padding: 0;
}
.animate.expanded #SiteIntro {  /* home -> expanded */
	transition: opacity 0.5s, height 0.1s 0.5s, margin 0.1s 0.5s, padding 0.1s 0.5s;
}
.animate #SiteIntro {  /* expanded -> home */
	transition: opacity 1s 1s, height 1s 1s, margin 1s 1s; 
}

.allstats { 
	display: flex;
	align-items: center;
	justify-content: space-between; 

	color: #d8d8d8;
	font-size: 0.9em;
	box-sizing: border-box;
	width: auto;
	margin: 2em 0 0 -1em;
	padding: 0;
}

.stat { width: auto; margin: 0 0.5em; }
.stat .val { display: flex; align-items: center; justify-content: center; }
.stat svg { height: 1.5em; width: 1.5em; margin: 0 0.25em 0 0; }
.stat.usersonline { --strokewidth: 1; }
.stat.usersregistered { --strokewidth: 1.5; }
.stat.usersactive { --strokewidth: 3.5; }
.stat.regions { --strokewidth: 1; }
.stat.landarea { --strokewidth: 1; }
.stat .val span { font-weight: bold;  }
.stat div.desc { display: block; white-space: nowrap; font-size: 0.75em; text-align: center; margin: 0.25em 0 0 0;}


#Heading {
	position: absolute;
	box-sizing: border-box;
	width: 34em;
	top: 23%;
	left: 0;
}
.expanded #Heading { 
	width: 11em; 
	top: 0.7em; 
}

.animate.expanded #Heading { /* home -> expanded */
	transition: width 0.75s, top 0.75s;
}

.animate #Heading {  /* expanded -> home */
	transition: width 1.5s, top 1.5s;
 }

#Logo { 
	width: 100%;
	display: flex; 
	flex-direction: row; 
	align-items: center;
	justify-content: center;
	--stroke-width: 1.7%;
	filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.8)) drop-shadow(0px 0px 2px rgba(0,0,0,0.8));
}
#LogoMark { flex: 4; }
#LogoType { flex: 7; }


#ThrottleWarning {
	position: absolute;
	top: 35%;
	left: 60%;
	transform: translateX(-50%);
	width: 25em; 
	background:white;
	box-sizing: border-box;
	padding: 1em 1.5em;

	color: var(--throttlecolor);
	background: var(--throttlebg);
	border: 1px solid var(--throttleborder);
	border-radius: 0.5em;
	filter:  drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.25));

	display: flex; 
	align-items: top;
	justify-content: space-between;
}

#ThrottleWarning div.notice { 
	font-size: 0.8em;
	padding: 0 0.5em 0 3.5em;
	
}

#ThrottleWarning h3 {
	margin: 0 0 0.75em 0;
	padding: 0;
	font-size: 1.3em;
}

#ThrottleWarning svg.icon {
	display: block;
	position: absolute; 
	top: 0.75em;
	left: 1em;
	width: 2.5em; 
	height: 2em;
	padding: 0;
}

#ThrottleWarning svg.close {
	cursor: pointer;
	display: block;
	position: absolute; 
	top: 0.5em;
	right: 0.5em;
	width: 1.5em; 
	height: 1.5em;
	padding: 0;
}


/* -------------------------------------------------------------------------- */

#Panel { 
	position: absolute;
	top: 22%;
	right: 0;  
	background: rgba(255.0, 255.0, 255.0, 0.65);
	width: 17em;
	min-width: 17em;
	height: 25em;
	box-sizing: border-box;
	padding: 1.5em;
	margin: 0 auto;
	border-radius: 1em; 
}

.expanded #Panel {
	background: rgba(255.0, 255.0, 255.0, 0.8);
	width: 100%; 
	height: calc(100vh - 7.75em);
	top: 5.5em; 
}

.animate #Panel { /* expanded -> home */
	transition: width 1s, top 1s, height 1s, margin 1s, max-width 1s, background 1s;
}

.animate.expanded #Panel { /* home -> expanded */
	transition: width 1s, top 1s, height 1s, margin 1s, max-width 1s, background 1s;
}


#Sidebar { width: 14em; }

#Sidebar a.action {
	color: inherit;
	text-decoration: none; 
	cursor: pointer; 
	display: flex; 
	align-items: center;
	justify-content: start; 
	width: 14em; 
	height: 2.5em;
	box-sizing: border-box;
	border: 1px solid #444; 
	border-radius: 0.5em;
	background: rgba(255.0, 255.0, 255.0, 0.2);
	padding: 0 0.5em; 
	margin: 0 0 1em 0;
}

#Sidebar a.action:hover    { background: var(--hovbkg); border-color: var(--hovbrd); color: var(--hovcol); box-shadow: var(--hovshadow); }
#Sidebar a.action:active   { background: var(--actbkg); border-color: var(--actbrd); color: var(--actcol); }

#Sidebar a.action svg { 
	--strokewidth: 2;
	width: 1.7em;
	height: 1.7em;
	padding: 0;
	margin: 0 0.5em 0 0;
}
#Sidebar a.action div {
	font-size: 0.9em;
	font-weight: bold;
}

#Sidebar .info {
	font-size: 0.9em;
	margin: 0; 
	padding: 0;
	list-style-type: square; 
	list-style-position:inside;
}

#Sidebar .info p  {
	margin: 3em 0 0.5em 0; 
	font-weight: bold;
} 

#Sidebar .info li {
	height: 1.5em;
}

#Sidebar .info li a { 
	cursor: pointer; 
	text-decoration: none; 
	color: inherit;
}
#Sidebar .info li a:hover { filter: drop-shadow(0px 0px 0.5px black); }
#Sidebar .info li a:active { filter: drop-shadow(0px 0px 0.5px var(--link)); color: var(--link); }


.expanded #Sidebar { width: 12em; font-size: 0.9em; }


.animate #Sidebar { /* expanded -> home */
	transition: width 1s, font-size 1s;
}

.animate.expanded #Sidebar { /* home -> expanded */
	transition: width 1s, font-size 1s;
}


/*.expanded #Sidebar a.action { width: 12em; }

.expanded #Sidebar a.action div { font-size: 0.8em; }
*/


/* -- Content area ---------------------------------------------------------- */

.contentArea {
	position: absolute; 
	left: 19.5em; 
	top: 1em; 
	border-left: 1px solid #999; 
	padding: 0.5em 0 0 2em;
	margin: 0 1em 0 0;
	height: calc(100vh - 160px - 2em); 
    width: 51em;
    box-sizing: border-box;

	scrollbar-width: auto; 
	scrollbar-color: var(--scrollbars); 
	overflow-x: clip; 
	overflow-y: auto;

	display: none;
	opacity: 0;

	font-family: Roboto, Arial, sans-serif;
	font-size: 0.8em; 
	color: #333;
}

.contentArea a { 
	color: var(--highlight);
}
.contentArea a:active { 
	color: var(--highlightactive);
}

.contentArea.ready {
	display: block; 
}

.contentArea.shown { 
	display: block; 
	opacity: 1;
	transition: opacity 1s; 
}

.contentArea h2 { 
	font-size: 1.8em;
	font-weight: bold; 
	color: #333;
	margin: 0; 
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */

.sectionWrapper {
	width: 46em;
	display: flex; 
	align-items: start;
	justify-content: start;
	margin: 1.25em 0 0 0;
}

.sectionWrapper.intro { 
	border-bottom: 1px solid #999; 
	margin: 0.5em 0 1.5em 0;
	padding: 0 0 1em 0;
}

.sectionWrapper .sectionHead {
	width: 11em; 
	display: flex; 
	align-items: center;
	justify-content: start;
}

.sectionWrapper .sectionHead div {
	font-size: 1.1em;
	font-weight: bold;
}

.sectionWrapper .sectionContent {
	width: 34em;
}

.sectionWrapper input.sectionTick {
	--checkbox-size: 1.75em; 
	margin: 0 0.5em 0 0;
	cursor: default;
}
.sectionWrapper input.sectionTick {
	color: var(--ok);
}
.sectionWrapper input.sectionTick:checked {
	box-shadow: none;
}
.sectionWrapper input.sectionTick:checked::before { 
	transform: scale(1); transition: 500ms;
}

.sectionContent .status { 
	width: 5em; 
	font-size: 0.8em; 
	border: 1px solid #999; 
	border-radius: 0.1em;
	padding: 0.275em 0 0.25em 0;
	text-align: center;
	margin: 0 0 0 1em;
}
.sectionContent .status.OK { 
	color: var(--ok);
	font-weight: bold;
	background-color: var(--ok-bg);
	border-color: var(--ok-brd);
	box-shadow: var(--okshadow);
}
.sectionContent .status.ERROR { 
	color: var(--error);
	font-weight: bold;
	background-color: var(--error-bg);
	border-color: var(--error-brd);
	box-shadow: var(--errorshadow);
}
.sectionContent .status.CHECK { 
	color: var(--check);
	font-weight: bold;
	background-color: var(--check-bg);
	border-color: var(--check-brd);
	box-shadow: var(--checkshadow);
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */


.contentArea .fieldGrid {
	display: grid; 
	grid-template-columns: 7.5em 20fr 1fr;
}

.contentArea .fieldGrid label {
	grid-column: 1;
	font-size: 0.9em;
	font-weight: bold;
	color: var(--label);
	align-self: center;
	padding: 0;
	margin: 0 1em 0 0;
	white-space: nowrap;
}
.contentArea .fieldGrid label.ERROR {
	color: var(--error);
}

.contentArea .fieldGrid input { 
	grid-column: 2;
	margin-top: 0.2em;
	margin-bottom: 0.2em;
	align-self: center;
}
.contentArea .fieldGrid input:not([type="button"]).ERROR {
	box-shadow: var(--errorshadow);
}

.contentArea .fieldGrid .status { 
	grid-column: 3;
	align-self: center;
	justify-self: end;
}

.contentArea .fieldGrid label.infoLink { 
	display: flex; 
	justify-content: start; 
	align-items: center; 
	margin: 0; 
	cursor: pointer;
}
.contentArea .fieldGrid svg { 
	width: 1.5em; 
	height: 1.5em; 
	margin: 0 0 0 0.2em;
}

.contentArea .fieldGrid .mesg { 
	grid-column: 2; 
	font-size: 0.7em;
	padding: 0 0.5em 0.5em 0.5em;
	display: none;
}
.contentArea .fieldGrid .mesg.wide { 
	grid-column: 1/3;
	padding-top: 0.25em;
}
.contentArea .fieldGrid .mesg.ERROR { 
	display: block;
	color: var(--error);
	font-weight: bold; 
}
.contentArea .fieldGrid .mesg.hint { 
	display: block;
}
.contentArea .fieldGrid .mesg ul { 
	list-style-type: square;
	list-style-position: inside;
	margin: 0.2em 0;
	padding: 0 0 0 0.5em;
}

.contentArea .fieldGrid .question {
	grid-column: 1/3;
	font-size: 0.85em;
	color: #333;
	margin: 0; 
	padding: 0 0 0.5em 0;
}
.contentArea .fieldGrid .question p {
	margin: 0; 
	padding: 0 0 0.5em 0;
}

.contentArea .fieldGrid textarea { 
	grid-column: 1/3;
	height: 7em;
	resize: none;
}

.contentArea .fieldGrid textarea.ERROR {
	box-shadow: var(--errorshadow);
}

.contentArea .fieldGrid .submitButton {
	padding: 1em 0 0 0;
	grid-column: 2/4;
}


/* -- Reg Form -------------------------------------------------------------- */

.avatarTiles {
	display: flex;
	align-items: start;
	justify-content: space-between;
}
.avatar {
	display: block;
	border: 1px solid var(--inputborder);
	border-radius: 0.5em;
	background: rgba(255.0, 255.0, 255.0, 0.2);
	padding: 0.25em;
	margin: 0;
	cursor: pointer;
}
.avatar:hover { 
	background: var(--hovbkg); 
	border-color: var(--hovbrd); 
	color: var(--hovcol);
}
.avatar:active {
	background: var(--avibrd); 
	border-color: var(--avibrd); 
	color: var(--avibrd);
}
.avatar img {
	width: 75px;
	height: 150px;	
	display: block;
}
.avatar.selected { 
	box-shadow: var(--avishadow); 
	border-color: var(--avibrd); 
	background-color: var(--avibg);
}
.avatar.ERROR { 
	box-shadow: var(--errorshadow); 
	border-color: var(--error); 
}

#AltAccount .avatar {
	margin: 0;
}
#AltAccount .avatar img { 
	width: 60px; 
	height: 120px;
}

.avatarWrapper {
	margin: 0 0 0.25em 0; 	
}

.avatarTiles input { 
	display: none;
}

.avatarTiles .avatarWrapper:has(input:checked) .avatar { 
	box-shadow: var(--avishadow); 
	border-color: var(--avibrd); 
	background-color: var(--avibg);
}

.affirmation .affirm {
	display: flex;
	align-items: center;
	justify-content: start;
	margin: 0.25em 0 0 0;
}
.affirmation .affirm input {
	margin: 0 0.5em 0 0;
	color: var(--ok);
}
.affirmation .affirm label {
	font-size: 0.9em;
	font-weight: normal;
}
.affirmation .affirm.ERROR input {
	color: var(--error);
	box-shadow: var(--errorshadow);
}
.affirmation .affirm.ERROR label {
	color: var(--error);
	font-weight: bold;
}

#Register .submitButton {
	border-top: 1px solid #999; 
	margin-top: 0.5em;
	grid-column: 1/3;
	padding-top: 0.5em;
}

#RegSubmit { 
	width: 15em;
}

#RegSubmit:hover {
	color: var(--error);
	box-shadow: var(--errorshadow);
	border-color: var(--error-brd);
}

#RegSubmit:active { 
	color: white;
	border-color: var(--error-brd);
	background-color: var(--error);
}

#RegSubmit.READY { 
	color: var(--ok);
	border-color: var(--ok-brd);
 	background-color: var(--ok-bg);
	box-shadow: var(--okshadow);
}

#RegSubmit.READY:hover { 
	box-shadow: var(--okshadow2);
}

#RegSubmit.READY:active { 
	color: white;
	border-color: var(--ok);
	background-color: var(--ok);
}

#RegSubmit.submitting {
	color: var(--check);
	background-color: var(--check-bg);
	border-color: var(--check-brd);
	box-shadow: var(--checkshadow);
}

#RegSubmit.submitting:hover {
	color: var(--check);
	background-color: var(--check-bg);
	border-color: var(--check-brd);
	box-shadow: var(--checkshadow);
}

#RegSubmit.submitting:active {
	color: white;
	background-color: var(--check);
	border-color: var(--check);
}









/* -- Registration Result --------------------------------------------------- */

#RegSuccess .intro {
	margin: 0 3em 0 0;
}

#RegSuccess ul {
	list-style: square;
	margin: 0 0 1.25em 0;
	padding: 0 0 0 1em;
}

#RegSuccess li { 
	margin: 0 0 1em 0;
}

#RegSuccess table { 
	border-collapse: collapse;
	margin: 1em 0 2em 0;
	font-size: 0.85em;
}

#RegSuccess th, #RegSuccess td {
	padding: 0.5em 1.5em 0.5em 0;
	border-bottom: 1px solid var(--inputborder);
	vertical-align: top; 
	text-align: left;
}

#RegSuccess th { 
	white-space: nowrap;
}

#RegSuccess div.button {
	margin: 1em 0;
}
#RegSuccess div.button::after { 
	content: 'Start Over';
}


#RegError div.button {
	margin: 1em 0;
}
#RegError div.button::after { 
	content: 'Start Over';
}

#RegErrorMessage { 
	font-size: 1.1em;
	color: var(--error);
	font-weight: bold;
	margin: 1em;
}


/* -- Alt Request ----------------------------------------------------------- */

#AltAccount .sectionHead {
	padding-top: 0.5em;
}

#AltAccount .avatarWrapper.ERROR label.avatar {
	box-shadow: var(--errorshadow); 
	border-color: var(--error); 
}

#AltAccount .sectionWrapper:not(:last-child) .fieldGrid {
	border-bottom: 1px solid #999; 
	padding-bottom: 1em; 
}


#AltSubmit { 
	width: 15em; 
}

#AltSubmit:hover {
	color: var(--error);
	box-shadow: var(--errorshadow);
	border-color: var(--error-brd);
}

#AltSubmit:active { 
	color: white;
	border-color: var(--error-brd);
	background-color: var(--error);
}

#AltSubmit.READY { 
	color: var(--ok);
	border-color: var(--ok-brd);
 	background-color: var(--ok-bg);
	box-shadow: var(--okshadow);
}

#AltSubmit.READY:hover { 
	box-shadow: var(--okshadow2);
}

#AltSubmit.READY:active { 
	color: white;
	border-color: var(--ok);
	background-color: var(--ok);
}

#AltSubmit.submitting {
	color: var(--check);
	background-color: var(--check-bg);
	border-color: var(--check-brd);
	box-shadow: var(--checkshadow);
}

#AltSubmit.submitting:hover {
	color: var(--check);
	background-color: var(--check-bg);
	border-color: var(--check-brd);
	box-shadow: var(--checkshadow);
}

#AltSubmit.submitting:active {
	color: white;
	background-color: var(--check);
	border-color: var(--check);
}



#AltAccount .submitButton { 
	border-top: 1px solid #999; 
	margin-top: 0.5em;
	grid-column: 1/3;
	padding-top: 1.5em;
}

#AltAccountSuccess .intro {
	margin: 0 3em 0 0;
}

#AltAccountSuccess table { 
	border-collapse: collapse;
	margin: 1em 0 2em 0;
	font-size: 0.85em;
}

#AltAccountSuccess th, #AltAccountSuccess td {
	padding: 0.5em 1.5em 0.5em 0;
	border-bottom: 1px solid var(--inputborder);
	vertical-align: top; 
	text-align: left;
}

#AltAccountSuccess th { 
	white-space: nowrap;
}

#AltAccountSuccess div.button {
	margin: 1em 0;
}
#AltAccountSuccess div.button::after { 
	content: 'Start Over';
}


#AltAccountError div.button {
	margin: 1em 0;
}
#AltAccountError div.button::after { 
	content: 'Go back';
}

#AltErrorMessage { 
	font-size: 1.1em;
	color: var(--error);
	font-weight: bold;
	margin: 1em;
}




/* -- Password Reset -------------------------------------------------------- */

#Password .sectionWrapper:not(:last-child) {
	border-bottom: 1px solid #999; 
	padding-bottom: 1em;
}

#Password .sectionContent.fieldGrid {
    grid-template-columns: 8.5em 20fr 1fr;
}

#Password div[for='PasswordFindAccount'].status, 
#Password div[for='PasswordReset'].status {
	visibility: hidden;
}

#Password .submitButton {
	padding-top: 0.5em;
}

#PasswordChangeSubmit { 
	width: 12em;
}


/*
#PasswordChangeSubmit { 
	width: 12em; padding: 0.5em;
	color: var(--ok);
	border-color: var(--ok-brd);
	background-color: var(--ok-bg);
	box-shadow: var(--okshadow);
}

#PasswordChangeSubmit:hover { 
	box-shadow: var(--okshadow2);
}
#PasswordChangeSubmit:active { 
	color: white;
	border-color: var(--ok);
	background-color: var(--ok);
}

#PasswordChangeSubmit.incomplete {
	color: var(--label);
	box-shadow: none;
	background-color: unset;
	border-color: var(--inputborder);
}
#PasswordChangeSubmit.incomplete:hover {
	box-shadow: var(--errorshadow);
	border-color: var(--error-brd);
}
#PasswordChangeSubmit.incomplete:hover::after { 
	content: "Form Incomplete"; 
	color: var(--error);
}
#PasswordChangeSubmit.incomplete:active { 
	border-color: var(--error-brd);
	background-color: var(--error);
}
#PasswordChangeSubmit.incomplete:active::after { 
	color: white;
}

*/

#PasswordChangeAccount .submitButton { 
	border-top: 1px solid #999; 
	margin-top: 0.5em;
	grid-column: 1/3;
	padding-top: 1.5em;
}

#PasswordChangeStatus { 
	padding: 0.75em 0.5em;
    font-weight: bold;
}

#PasswordChangeStatus.ERROR { 
	color: var(--error);
}

#PasswordChangeStatus.OK { 
	color: var(--ok);
}


/* -- Term and Conditions --------------------------------------------------- */

.infoDoc { 
	font-size: 0.9em;
	position: relative; 
	display: block; 
	margin: 0 3em 0 0;
	padding: 0 0 3em 0;
}

.infoDoc h3 { 
	font-size: 1.5em; 
	font-weight: normal;
	margin: 0 0 1em 0; 
	color: black;
}

.infoDoc h4 { 
	font-size: 1.25em; 
	margin: 1em 0 0.5em 0;
	padding: 0.65em 0 0 0;
	color: black;
	border-top: 1px solid #ccc;
}

.infoDoc h5 {
	font-size: 1.1em;
	font-weight: bold; 
	margin: 1em 0 0.5em 0;
}

.infoDoc a { 
	text-decoration: underline;
	color: inherit; 
}
.infoDoc a:hover { color: var(--link); }

.infoDoc p { 
	margin: 0 0 0.75em 0; 
	line-height: 1.25em;
}

.infoDoc ul { 
	list-style: square;
	margin: 0 0 1.25em 0;
	padding: 0 0 0 1em;
}

.infoDoc li { 
	margin: 0.5em 0;
	line-height: 1.25em;
}

.infoDoc li li { 
	margin: 0;
}

.infoDoc table th { 
	width: 22.5%;
	text-align: left; 
	vertical-align: top;
	padding: 0.75em 2em 0 0;
	font-size: 1.1em; 
	font-weight: bold; 
	color: #333; 
}

.infoDoc table td { 
	width: 77.5%;
	padding: 0.75em 0 0 0;
	border-bottom: 1px solid #ccc;
}

.infoDoc table tr:last-child td { 
	border-bottom: none;
}

.infoDoc table.compact { 
	margin: 0.5em 0;
	font-size: 0.9em;
}


/* -- Online User List ------------------------------------------------------ */

#Online .topWrap { 
	display: flex; 
	align-items: start;
	justify-content: space-between;
}

#UserListPanel {  /* Panel + drop shadow */
	display: none;
	position: absolute;
	top: 4em;
	left: 1.5em;
	height: calc(100vh - 16.5em);
	width: calc(100% - 2.5em);
	box-sizing: border-box;
	padding: 0.25em;

	background: var(--userlistbg);
	border: 1px solid var(--border);
	border-radius: 0.5em;
	filter:  drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.25));
}

#Online .userlistControls {
	display: none;
	align-items: center;
	justify-content: end; 
	padding: 0 0.5em 0 0;
}

#Online .userlistControls #UserListAuto {
	margin: 0 0.25em 0 0;
	--checkbox-size: 1em;
	border-radius: 0.3em;
	box-shadow: none;
}

#Online .userlistControls #UserListAuto:hover { 
	box-shadow: inset 0px 0px 1.5px 1px currentColor;
}

#Online .userlistControls label {
	font-size: 0.8em;
	color: var(--label);
	font-weight: bold;
	cursor: pointer;
}

#UserListRefresh::after { content: 'Refresh Now'; }
#UserListSubmit::after  { content: 'Log In'; }

.LOGGEDIN #Online #UserListPanel    { display: block; }
.LOGGEDIN #Online .userlistControls { display: flex; }
.LOGGEDIN #Online .userlistIntro    { display: none; }

#Online .refreshTimer {
	width: 1.5em;
	height: 1.5em;
	--size: 250px;
	--stroke-width: 50px;
	color: var(--timerstartcol);
	margin: 0 1em 0 0.5em;

	--half-size: calc(var(--size) / 2);
	--radius: calc((var(--size) - var(--stroke-width)) / 2);
	--circumference: calc(var(--radius) * pi * 2);
	--dash: calc((var(--progress) * var(--circumference)) / 100);
}

#Online .refreshTimer.animate {
	animation: progress-animation var(--timerinterval) linear 0s 1 forwards;
}

#Online .refreshTimer circle {
	cx: var(--half-size);
	cy: var(--half-size);
	r: var(--radius);
	stroke-width: var(--stroke-width);
	fill: none;
	stroke-linecap: butt;
}

#Online .refreshTimer circle.bg {
	stroke: var(--timerbasecol);
}

#Online .refreshTimer circle.fg {
	transform: rotate(-90deg);
	transform-origin: var(--half-size) var(--half-size);
	stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
	transition: stroke-dasharray 0.3s linear 0s;
	stroke: currentColor;
}

@property --progress {
	syntax: "<number>";
	inherits: false;
	initial-value: 0;
}

@keyframes progress-animation {
	from { --progress: 0;   color: var(--timerstartcol); }
	to   { --progress: 100; color: var(--timerendcol); }
}

#UserlistWrapper {  /* Container for the scrollbar and hiding overflow */
	position: absolute;
	height: calc(100vh - 19.5em);
	width: calc(100% - 0.5em);
	overflow-y: scroll;
	border-bottom: 1px solid var(--border);
}

#OnlineUsers {  /* The userlist table */
	width: calc(100% - 0.5em); 
	table-layout: fixed;
	border-collapse: collapse; 
	border-spacing: 0;
	margin: 0 0.5em 0 0; 
}

#OnlineUsers tr { 
	font-variant-numeric: 
	lining-nums tabular-nums; 
	white-space: nowrap;
	text-align: left;
}

#OnlineUsers td:nth-child(1) { padding-left: 1em;  }
#OnlineUsers th:nth-child(1) { padding-left: 0.5em; }

#OnlineUsers .name { width: 25%;  }
#OnlineUsers .grid { width: 15%;  }
#OnlineUsers .regn { width: 20%;  }
#OnlineUsers .logt { width: 15%;  }
#OnlineUsers .role { width: 25%;  }

#OnlineUsers thead th { 
	z-index: 40;
	position: sticky; 
	top: 0; 
	white-space: nowrap; 
	background: var(--userlistbg);
	padding: 0;

	font-size: 0.8em; 
	color: var(--label);
	vertical-align: top; 
	filter:  drop-shadow(0px 1px var(--border));
}

#OnlineUsers thead div.heading {
	padding: 0.25em 0em 0 0.5em;
	position: relative; 
	cursor: pointer;
	display: flex; 
	align-content: center; 
	justify-content: start;
}

#OnlineUsers thead div.heading div {
	align-self: center;
}

#OnlineUsers thead div.heading svg {
	width: 1.5em;
	height: 1.5em; 
	padding: 0;
	margin: 0 0 0 0.25em;
	color: var(--inputborder);
}

#OnlineUsers thead th.sorted svg { 
	color: var(--highlight);
}

#OnlineUsers thead div.heading div {
	align-self: center;
}

#OnlineUsers thead div.ctrl {
	padding: 0 0.25em 0.5em 0.25em;
}

#OnlineUsers thead div.ctrl input, #OnlineUsers thead div.ctrl select { 
	width: 100%;
	font-size: 0.85em;
	height: 2em; 
	padding: 0.2em 0.2em; 
	margin: 0; 
	outline: none; 
	border: 1px solid var(--inputborder); 
	border-radius: 0.2em; 
	&:focus  { border-color: var(--focus); }
}

#OnlineUsers thead div.ctrl input:not(:valid) { 
	background: var(--userlistfilter); 
}

#OnlineUsers thead div.ctrl select:valid { 
	background: var(--userlistfilter); }	

#OnlineUsers tbody tr {
	border-bottom: 1px solid var(--userlistborder);
}

#OnlineUsers tbody tr:hover {
	background-color: var(--userlisthover);
}

#OnlineUsers tbody td {
	font-size: 0.9em;
	vertical-align: middle;
	padding: 0.5em 0em 0.5em 0.5em;
	overflow: hidden;
	white-space: nowrap;
    text-overflow: ellipsis;
}

#OnlineUsers tbody.compact td {
	font-size: 0.8em;
	padding: 0.25em 0em 0.25em 0.75em;
}

#OnlineUsers tbody.compact td:first-child {
	padding-left: 1em;
}

#OnlineUsers tfoot tr.nomatches td {
	height: 3em; 
	vertical-align: middle; 
	font-size: 1.0em; 
	text-align: center;
}

#Online .tablefooter {
    position: absolute;
    bottom: 0;
	height: 2em;
    width: 100%;
	display: flex; 
	align-items: center;
	justify-content: space-between;
}

#Online .tablefooter div.stats { 
	font-size: 0.9em;
	padding: 0em 1em 0.75em 1em;
}

#Online .tablefooter div.ctrls { 
	display: flex;
	align-items: center;
	justify-content: right; 
	font-size: 0.9em;
	padding: 0em 2em 1em 1em;
}

#Online .tablefooter div.ctrls .minibutton { 
	margin-left: 2em;
}

#Online .tablefooter div.ctrls label {
	font-size: 0.8em;
	color: var(--label);
	font-weight: bold;
	cursor: pointer;
}

#Online #UserListCompact {
	margin: 0 0.25em 0 0;
	--checkbox-size: 1em;
	border-radius: 0.3em;
	box-shadow: none;
}

#Online #UserListCompact:hover { 
	box-shadow: inset 0px 0px 1.5px 1px currentColor;
}



#UserListLoginMsg { 
	font-size: 1.1em;
	font-weight: bold;
	padding: 0 1em; 
	color: var(--label);
}

#UserListLoginMsg.ERROR { 
	color: var(--error);
}