/* =============================================== */
/* Theme support */
/* =============================================== */

:root
{
	/* Basic Colors */
	--primary-color-white-rgb:			237, 242, 254;
	--primary-color-light-rgb:			191, 206, 249;
	--primary-color-rgb:						114, 148, 245;
	--primary-color-dark-rgb:				 43,  75, 163;
	--primary-color-black-rgb:			 28,  48, 104;
	--secondary-color-white-rgb:		248, 248, 249;
	--secondary-color-light-rgb:		227, 224, 236;
	--secondary-color-rgb:					211, 208, 220;
	--secondary-color-dark-rgb:			192, 189, 202;
	--secondary-color-black-rgb:		152, 149, 159;
	/* Light/Dark Colors */
	--white-rgb:			255, 255, 255;
	--black-rgb:			  0,   0,   0;
	--gray-rgb:				136, 136, 136;
	--darkgray-rgb:		 85,  85,  85;
	--lightgray-rgb:	238, 238, 238;
	--red-rgb:				221,   0,   0;
	--yellow-rgb:			255, 255, 187;
	--green-rgb:			  0, 128,   0;
	--blue-rgb:				  0,   0, 255;
	--darkred-rgb:		153,   0,   0;
}

:root
{
	/* Basic Colors */
	--primary-color-white:		rgb(var(--primary-color-white-rgb));
	--primary-color-light:		rgb(var(--primary-color-light-rgb));
	--primary-color:					rgb(var(--primary-color-rgb));
	--primary-color-dark:			rgb(var(--primary-color-dark-rgb));
	--primary-color-black:		rgb(var(--primary-color-black-rgb));
	--secondary-color-white:	rgb(var(--secondary-color-white-rgb));
	--secondary-color-light:	rgb(var(--secondary-color-light-rgb));
	--secondary-color:				rgb(var(--secondary-color-rgb));
	--secondary-color-dark:		rgb(var(--secondary-color-dark-rgb));
	--secondary-color-black:	rgb(var(--secondary-color-black-rgb));
	/* Light/Dark Colors */
	--white:			rgb(var(--white-rgb));
	--black:			rgb(var(--black-rgb));
	--gray:				rgb(var(--gray-rgb));
	--darkgray:		rgb(var(--darkgray-rgb));
	--lightgray:	rgb(var(--lightgray-rgb));
	--red:				rgb(var(--red-rgb));
	--yellow:			rgb(var(--yellow-rgb));
	--green:			rgb(var(--green-rgb));
	--blue:				rgb(var(--blue-rgb));
	--darkred:		rgb(var(--darkred-rgb));
	/* Fonts */
	--main-font:						'Open Sans', 'Fira Sans', sans-serif;
	--tooltip-font:					'Open Sans', 'Fira Sans', sans-serif;
	--mono-font:						'Fira Mono', monospace;
	--notice-font:						'Tahoma', sans-serif;
	--root-fontsize:				12pt;
	--content-fontsize:			12pt;
	--mono-fontsize:				10pt;
	/* Major sizes */
	--main-width:						82rem;
	--rem40:								40rem;
	--rem41:								41rem;
	--rem42:								42rem;
	--body-left-image:			linear-gradient(to left, transparent, transparent);
	--body-right-image:			linear-gradient(to right, transparent, transparent);
	/* Main text */
	--text-color:						var(--black);
	--link-color:						var(--primary-color-dark);
	--visited-color:				var(--primary-color-black);
	--hover-color:					var(--red);
	--link-decoration:			underline;
	--hover-decoration:			underline;
	--body-bg:							var(--white);
	--body-bg1:							gray;
	--body-bg2:							gray;
	--body-border:					gray;
	--body-shadow:					rgba(0, 0, 0, 0.5);
	--content-bg:						var(--white);
	--content-bg-rgb:				var(--white-rgb);
	--content-color:				var(--text-color);
	--content-link:					var(--link-color);
	--content-visited:			var(--visited-color);
	--content-hover:				var(--hover-color);
	--content-border:				var(--gray);
	/* Backgrounds when there are panels on top */
	--backdrop-bg:					var(--secondary-color-black);
	--backdrop-color:				var(--black);
	--backdrop-link:				var(--black);
	--backdrop-visited:			var(--black);
	--backdrop-hover:				var(--darkgray);
	/* Applied to embedded scrollboxes, not global scrollbars */
	--scrollbar-color:			auto;
	--scrollbar-bg:					auto;
	/* Site header */
	--banner-width:					460px;
	--banner-height:				100px;
	--siteheader-bg:				var(--primary-color-dark);
	--siteheader-color:			var(--lightgray);
	--siteheader-link:			var(--primary-color-light);
	--siteheader-hover:			var(--yellow);
	/* Menu bar and menus */
	--menubar-color:				var(--black);
	--menubar-bg:						var(--secondary-color);
	--menubar-hover:				var(--black);
	--menubar-hoverbg:			var(--secondary-color-light);
	--menu-color:						var(--menubar-color);
	--menu-bg:							var(--menubar-hoverbg);
	--menu-hover:						var(--menubar-hover);
	--menu-hoverbg:					var(--secondary-color-white);
	/* Icon buttons in the menu bar */
	--menuicon-color:				var(--button-icon);
	--menuicon-bg:					var(--secondary-color-light);
	--menuicon-border:			var(--secondary-color-black);
	--menuicon-hover:				var(--button-hover);
	--menuicon-hoverbg:			var(--secondary-color-white);
	/* Site titlebar below menu */
	--titlebar-color:				var(--black);
	--titlebar-bg:					var(--secondary-color-dark);
	--titlebar-border:			var(--gray);
	--titlebar-icon:				var(--darkgray);
	/* Tooltips */
	--tooltip-color:					black;
	--tooltip-bg:							#FFC;
	--tooltip-border:					gray;
	/* Notice and error banners */
	--notice-text:						#222;
	--notice-bg:							#FF9;
	--notice-border:					var(--primary-color-black);
	--error-text:							#900;
	--error-bg:								#FFE;
	--error-border:						var(--darkgray);
	--error-inputborder:			#D00;
	--error-inputbg:					#FEF7F7;
	--note-text:							var(--darkgray);
	/* Buttons */
	--button-color:						var(--black);
	--button-bg:							var(--secondary-color);
	--button-border:					var(--secondary-color-black);
	--button-hover:						var(--button-color);
	--button-hoverbg:					var(--secondary-color-light);
	--button-hoverborder:			var(--button-border);
	--button-selected:				var(--primary-color-black);
	--button-selectedbg:			var(--primary-color-light);
	--button-selectedborder:	var(--primary-color);
	--button-checked:					var(--green);
	--button-icon:						var(--primary-color-black);
	--button-dangercolor:			var(--black);
	--button-dangerbg:				#EBB;
	--button-dangerborder:		#944;
	/* General form controls */
	--focus-outline:					var(--blue);
	--disabled-color:					var(--gray);
	--disabled-bg:						var(--secondary-color-light);
	--disabled-border:				var(--secondary-color-black);
	--file-hoverbg:						var(--secondary-color-white);
	/* Text inputs */
	--input-color:						var(--black);
	--input-bg:								var(--secondary-color-white);
	--input-border:						var(--secondary-color-black);
	/* Listboxes */
	--list-color:							var(--input-color);
	--list-bg:								var(--input-bg);
	--list-border:						var(--input-border);
	--list-current:						var(--primary-color-dark);
	--list-currentbg:					var(--secondary-color-light);
	--list-selected:					var(--primary-color-black);
	--list-selectedbg:				var(--primary-color-light);
	--list-hover:							var(--tooltip-color);
	--list-hoverbg:						var(--tooltip-bg);
	--list-hoverborder:				var(--gray);
	/* Expand ("+" and "-") buttons */
	--expand-color:						var(--button-color);
	--expand-bg:							var(--button-bg);
	--expand-border:					var(--button-border);
	--expand-hover:						var(--button-hover);
	--expand-hoverbg:					var(--button-hoverbg);
	/* Form field labels */
	--fieldth-color:					var(--primary-color-black);
	--fieldth-bg:							var(--primary-color-white);
	--fieldth-border:					var(--input-border);
	--formsuccess-color:			var(--green);
	--formerror-color:				var(--red);
	/* Operation buttons in table lists and headers */
	--opbtn-color:						var(--button-color);
	--opbtn-bg:								var(--button-bg);
	--opbtn-border:						var(--button-border);
	--opbtn-hover:						var(--button-hover);
	--opbtn-hoverbg:					var(--button-hoverbg);
	--opbtn-hoverborder:			var(--button-hoverborder);
	--opbtn-selected:					var(--button-selected);
	--opbtn-selectedbg:				var(--button-selectedbg);
	--opbtn-selectedborder:		var(--button-selectedborder);
	--opbtn-active:						var(--button-selected);
	--opbtn-activebg:					var(--button-selectedbg);
	--opbtn-activeborder:			var(--button-selectedborder);
	--opbtn-deselected:				var(--secondary-color-black);
	--opbtn-inactive:					var(--gray);
	--opbtn-inactivebg:				var(--button-bg);
	--opbtn-inactiveborder:		var(--button-border);
	--opbtn-toggle:						var(--green);
	/* Popup menus */
	--popupmenu-color:					var(--list-color);
	--popupmenu-bg:							var(--list-bg);
	--popupmenu-border:					var(--list-border);
	--popupmenuitem-border:			var(--secondary-color-light);
	--popupmenuitem-hover:			var(--list-selected);
	--popupmenuitem-hoverbg:		var(--list-selectedbg);
	--popupmenuitem-selected:		var(--list-current);
	--popupmenuitem-selectedbg:	var(--list-currentbg);
	/* Page headers at the tops of some pages */
	--pageheader-color:					var(--black);
	--pageheader-bg:						var(--primary-color-light);
	--pageheader-border:				var(--gray);
	--editbtn-color:						var(--primary-color-dark);
	--editbtn-bg:								var(--pageheader-bg);
	--editbtn-selected:					var(--darkred);
	--editbtn-selectedbg:				var(--yellow);
	--noticeicon-color:					var(--red);
	/* Sidebar on some pages */
	--sidebar-color:						var(--black);
	--sidebar-bg:								var(--primary-color-white);
	/* Used on member character portraits */
	--member-badge-color:			black;
	--member-badge-bg:				#DC9;
	--member-badge-border:		#765;
	--member-icon-color:			var(--primary-color-dark);
	--member-icon-outline:		var(--white);
	/* Little "i" info buttons */
	--infoicon-color:					#55C;
	--infoicon-hover:					#009;
	/* Collapseable headers */
	--collapse-color:					var(--white);
	--collapse-bg:						var(--primary-color-dark);
	--collapse-border:				var(--primary-color-black);
	--collapse-hover:					var(--collapse-color);
	--collapse-hoverbg:				var(--primary-color-black);
	--collapse-expandcolor:		var(--collapse-color);
	--collapse-expandbg:			var(--collapse-bg);
	/* Panels */
	--panel-color:					var(--text-color);
	--panel-bg:							var(--secondary-color-white);
	--panel-border:					var(--secondary-color-black);
	--panel-shadow:					rgba(0, 0, 0, 0.75);
	/* Table lists */
	--th-color:							var(--collapse-color);
	--th-bg:								var(--collapse-bg);
	--th-border:						var(--collapse-border);
	--th-hover:							var(--collapse-hover);
	--th-hoverbg:						var(--collapse-hoverbg);
	--thbtn-color:					var(--opbtn-color);
	--thbtn-bg:							var(--opbtn-bg);
	--thbtn-border:					var(--opbtn-border);
	--thbtn-toggle:					var(--opbtn-toggle);
	--thbtn-selected:				var(--opbtn-selected);
	--thbtn-hover:					var(--opbtn-hover);
	--thbtn-hoverbg:				var(--opbtn-hoverbg);
	--td-border:						var(--secondary-color-dark);
	--pages-hover:					var(--collapse-hover);
	--pages-hoverbg:				var(--collapse-hoverbg);
	--pages-border:					var(--secondary-color-dark);
	--pages-current:				var(--primary-color-white);
	--pages-currentbg:			var(--primary-color);
	--listtable-even:				var(--white);
	--listtable-odd:				var(--secondary-color-white);
	--listtable-inactive:		var(--gray);
	--listtable-newbg:			var(--yellow);
	/* Used to replace images that are missing */
	--noimg-color:					var(--darkgray);
	--noimg-bg:							rgba(128, 128, 128, 0.1);
	--noimg-border:					var(--darkgray);
	/* Used for characters and other things */
	--tile-color:						var(--text-color);
	--tile-link:						var(--link-color);
	--tile-visited:					var(--visited-color);
	--tile-bg:							var(--primary-color-white);
	--tile-border:					var(--secondary-color-black);
	--tile-shadow:          rgba(0, 0, 0, 0.5);
	--tile-hover:						var(--primary-color-dark);
	--tile-hoverbg:					var(--secondary-color-white);
	--tile-hoverborder:			var(--tile-border);
	--tile-selected:				var(--text-color);
	--tile-selectedbg:			var(--white);
	--tile-selectedborder:	var(--tile-border);
	--tile-inactivebg:				rgba(var(--primary-color-white-rgb), 0.4);
	/* Calendar (both mini and full */
	--calendar-color:				var(--text-color);
	--calendar-bg:					var(--white);
	--calendar-border:			var(--pageheader-border);
	--calendar-current:			var(--pageheader-color);
	--calendar-currentbg:		var(--pageheader-bg);
	--calendar-event:				var(--button-color);
	--calendar-eventbg:			var(--button-bg);
	--calendar-hover:				var(--button-hover);
	--calendar-hoverbg:			var(--button-hoverbg);
	--calendar-blank:				var(--button-bg);
	/* Tier stars */
	--tier-color:						#FFC601;




	/* Toolbar used for richtext editor */
	--toolbarbtn-active:		#06C;
	--toolbarbtn-activebg:	#FFD;
	/* Used for rich text edit areas */
	--code-color:						var(--text-color);
	--code-bg:							#EEE;
	--spoiler-color:				black;
	--spoiler-bg:						#DDD;
	--spoiler-edit:					#777;
	--quote-color:					#111;
	--quote-bg:							#EEE;
	--quote-border:					#888;
	--quote-source:					#777;
}

/* =============================================== */
/* Global formatting */
/* =============================================== */

@font-face
{
	font-family: 'icomoon';
	src: url('icomoon.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

body
{
	margin: 0;
	padding: 0;
}

table, th, td, input, textarea, button, select, option
{
	font: inherit;
}

*
{
	box-sizing: border-box;
}

table
{
	box-sizing: content-box;
	border-collapse: collapse;
	border-spacing: 0;
}

form
{
	display: block;
	margin: 0;
	padding: 0;
}

img
{
	border: 0;
	box-sizing: content-box;
}

template
{
	display: none;
}

*:focus-visible
{
	outline: 1px dotted;
	outline-color: var(--focus-outline);
	box-shadow: 0px 0px 2px var(--focus-outline), 1px 1px 0px var(--focus-outline), -1px -1px 0px var(--focus-outline), -1px 1px 0px var(--focus-outline), 1px -1px 0px var(--focus-outline);
}

select:focus-within
{
	outline: 1px dotted;
	outline-color: var(--focus-outline);
	box-shadow: 0px 0px 2px var(--focus-outline), 1px 1px 0px var(--focus-outline), -1px -1px 0px var(--focus-outline), -1px 1px 0px var(--focus-outline), 1px -1px 0px var(--focus-outline);
}

.DEBUG
{
	position: fixed;
	left: 0;
	top: 0;
	margin: 0;
	padding: 2px;
	font-size: 0.9rem !important;
	font-family: sans-serif !important;
	font-weight: normal !important;
	font-style: normal !important;
	border: 1px solid red !important;
	background: #EEEE99 !important;
	color: black !important;
	opacity: 0.8;
}

.DEBUG:hover
{
	opacity: 1;
}

/* TEMP */
img
{
	-moz-force-broken-image-icon: 1;
}

/* TEMP */
img:not([src])
{
	background: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(128, 128, 128, 0.5) 2px, rgba(128, 128, 128, 0.5) 4px);
}

/* =============================================== */
/* Basic text formatting */
/* =============================================== */

html
{
	font-size: var(--root-fontsize);
}

body
{
	color: var(--text-color);
	background: var(--body-bg);
	font-family: var(--main-font);
}

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

a:visited
{
	color: var(--visited-color);
}

a:hover,
a:active
{
	color: var(--hover-color);
	text-decoration: var(--hover-decoration);
}

/* =============================================== */
/* Animations */
/* =============================================== */

@keyframes fa-spin
{
	0% { transform: rotate(0deg); }
	100% { transform: rotate(359deg); }
}

@keyframes fade-in
{
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes fade-out
{
	0% { opacity: 1; }
	100% { opacity: 0; }
}

/* =============================================== */
/* Custom form controls */
/* =============================================== */

/* Buttons */
button,
.button
{
	display: inline-block;
	border: 1px solid;
	border-radius: 4px;
	padding: 0.2em 1em;
	text-align: center;
	-webkit-user-select: none;
	user-select: none;
	color: var(--button-color);
	background: var(--button-bg);
	border-color: var(--button-border);
	cursor: pointer;
}

a.button:link,
a.button:visited
{
	color: var(--button-color);
	background: var(--button-bg);
}

a.button,
a.button:link,
a.button:hover,
a.button:active
{
	text-decoration: none;
}

/* Buttons with icons */
button [data-icon],
.button [data-icon]
{
	margin-left: -0.2em;
	padding-right: 0.3em;
}

/* Big red buttons */
button.danger,
.button.danger,
.button.danger:link,
.button.danger:visited
{
	color: var(--button-danger);
	background: var(--button-dangerbg);
	border-color: var(--button-dangerborder);
}

button.danger [data-icon],
.button.danger [data-icon]
{
	color: var(--button-dangerborder);
}

button:hover,
.button:hover,
a.button:hover,
a.button:active
{
	color: var(--button-hover);
	background: var(--button-hoverbg);
	border-color: var(--button-hoverborder);
	text-decoration: none;
}

button.selected,
.button.selected,
.button.selected:link,
.button.selected:visited
{
	color: var(--button-selected);
	background: var(--button-selectedbg);
	border-color: var(--button-selectedborder);
}

/* Text input boxes */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
select,
textarea,
.ql-container,
.ql-container.ql-snow
{
	display: inline-block;
	border: 1px solid;
	border-radius: 2px;
	margin: 0;
	padding: 0.2em 0.4em;
	max-width: 100%;
	font: inherit;
	color: var(--input-color);
	background: var(--input-bg);
	border-color: var(--input-border);
	scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg);
}

input[type="number"]
{
	padding-right: 0;
}

/* Drop-down comboboxes */
select
{
	border-radius: 3px;
	cursor: pointer;
}

/* Checkboxes and radio buttons */
label.checkbox
{
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}

label.checkbox.disabled
{
	color: var(--disabled-color);
	cursor: default;
}

input[type="checkbox"],
input[type="radio"]
{
	/* Attempt to override default appearance; falls back on default appearance if this doesn't work */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	font: inherit;
	width: 1.15em;
	height: 1.15em;
	line-height: 1.15em;
	border-style: solid;
	cursor: pointer;
	color: var(--input-color);
	background: var(--input-bg);
	border-color: var(--input-border);
}

label.checkbox input
{
	margin-right: 0.3rem;
}

input[type="checkbox"]
{
	border-width: 1px;
	border-radius: 1px;
}

input[type="radio"]
{
	border-width: 1px;
	border-radius: 50%;
}

input[type="checkbox"]:before,
input[type="radio"]:before
{
	font-family: 'icomoon';
	font-weight: normal;
	font-style: normal;
	/* Otherwise checkbox changes size when checkmark appears */
	visibility: hidden;
}

input[type="checkbox"]:checked:before,
input[type="radio"]:checked:before
{
	visibility: visible;
}

input[type="checkbox"]:before
{
	content: '\f00c';
}

input[type="radio"]:before
{
	content: '\f111';
	/* HACK: No bullet, so using circle and making it smaller */
	font-size: 70%;
}

/* Color selector */
input[type="color"]
{
	width: 2rem;
	height: 2rem;
	border: 1px solid;
	border-radius: 4px;
	padding: 0.25rem;
	cursor: pointer;
	color: var(--button-color);
	background: var(--button-bg);
	border-color: var(--button-border);
}

input[type="color"]:hover
{
	color: var(--button-hover);
	background: var(--button-hoverbg);
	border-color: var(--button-hoverborder);
}

/* File uploads */
input[type="file"]::-webkit-file-upload-button
{
	display: inline-block;
	border: 1px solid;
	border-radius: 4px;
	padding: 0.2em 1em;
	text-align: center;
	text-decoration: none;
	-webkit-user-select: none;
	user-select: none;
	color: var(--button-color);
	background: var(--button-bg);
	border-color: var(--button-border);
	cursor: pointer;
}

input[type="file"]::-webkit-file-upload-button:hover
{
	color: var(--button-hover);
	background: var(--button-hoverbg);
	border-color: var(--button-hoverborder);
}

input[type="file"]::file-selector-button
{
	display: inline-block;
	border: 1px solid;
	border-radius: 4px;
	padding: 0.2em 1em;
	text-align: center;
	text-decoration: none;
	-webkit-user-select: none;
	user-select: none;
	color: var(--button-color);
	background: var(--button-bg);
	border-color: var(--button-border);
	cursor: pointer;
}

input[type="file"]::file-selector-button:hover
{
	color: var(--button-hover);
	background: var(--button-hoverbg);
	border-color: var(--button-hoverborder);
}

input[type="file"]:hover
{
	background-color: var(--file-hoverbg);
}

/* Shared by all inputs */
input.max,
select.max,
button.max,
.button.max,
textarea.max
{
	width: 100%;
}

input:disabled,
select:disabled,
textarea:disabled,
button:disabled,
.button:disabled,
button.disabled,
.button.disabled
{
	color: var(--disabled-color);
	background: var(--disabled-bg);
	border-color: var(--disabled-border);
	cursor: default;
}

button.disabled,
.button.disabled
{
	pointer-events: none;
}

input.error,
textarea.error,
select.error
{
	background-color: var(--error-inputbg);
	box-shadow: 0px 0px 2px 0px var(--error-inputborder);
}

/* =============================================== */
/* Tooltips */
/* These classes provide two ways to make automatic tooltips: "data-tooltip" attribute on any element,
	or ".anchor" class on parent and ".tooltip" class child element. Limits to data-tooltip:
	- Cannot have before/after elements
	- Cannot have formatting (plain text only)
	- Tooltip is affected by parent opacity
	Limits of anchor+tooltip:
	- Cannot have after
	- Tooltip is affected by anchor opacity
	*/
/* =============================================== */

[data-tooltip],
.anchor
{
	position: relative;
}

[data-tooltip]:before,
.tooltip
{
	display: inline-block;
	position: absolute;
	/* On top of pop-up menus and the system menus and over dialogs if the tooltip is on the dialog */
	z-index: 202;
	/* Default position places the balloon to the upper right of anchor */
	/* NOTE: We can't use translate as that will cause scrollbars to appear based on the tooltip's original location */
	top: auto;
	bottom: calc(100% + 7px);
	left: calc(50% - 1.5rem);
	right: auto;
	width: 20rem;
	width: -webkit-max-content;
	width: -moz-max-content;
	width: max-content;
	max-width: 20rem;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
	font-family: var(--tooltip-font);
	font-size: 0.9rem;
	font-weight: normal;
	font-style: normal;
	line-height: 1.1;
	white-space: normal;
	text-align: left;
	padding: 0.4rem;
	border: 1px solid;
	border-radius: 4px;
	color: var(--tooltip-color);
	background: var(--tooltip-bg);
	border-color: var(--tooltip-border);
	text-shadow: none;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
	pointer-events: none;
	transition: opacity 200ms ease-in-out;
	opacity: 0;
  visibility: hidden;
}

[data-tooltip]:before
{
	content: attr(data-tooltip);
}

/* Makes an arrow; this works but means anything with data-tooltip cannot have a before OR after */
[data-tooltip]:after,
.anchor:after
{
	position: absolute;
	content: '';
	z-index: 203;
	top: auto;
	/* Centers lower point of triangle at top and center of anchor */
	bottom: calc(100% + 1px);
	left: calc(50% - 4px);
	right: auto;
	width: 0;
	height: 0;
	/* It is not possible to put a border on the triangle; but we fake it with the drop shadow */
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 7px solid var(--tooltip-bg);
	filter: drop-shadow(0px 1px 0px var(--tooltip-border)) drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.5));
	pointer-events: none;
	transition: opacity 200ms ease-in-out;
	opacity: 0;
  visibility: hidden;
}

.anchor:hover .tooltip,
.anchor:hover:after,
[data-tooltip]:hover:before,
[data-tooltip]:hover:after
{
	opacity: 1;
  visibility: visible;
}

/* Option to suppress tooltips if needed */
.anchor.hidetooltip:before,
.anchor.hidetooltip:after,
[data-tooltip].hidetooltip:before,
[data-tooltip].hidetooltip:after
{
	content: '';
	display: none;
	opacity: 0;
  visibility: hidden;
}

/* =============================================== */
/* Copy notice */
/* =============================================== */

.anchor.copynotice:before,
[data-tooltip].copynotice:before
{
	opacity: 1;
  visibility: visible;
	color: var(--white);
	background: var(--black);
	border-color: var(--darkgray);
}

.anchor.copynotice:after,
[data-tooltip].copynotice:after
{
	content: '';
	display: none;
	opacity: 0;
  visibility: hidden;
}

/* =============================================== */
/* Special notice icons (little red "!" bubbles)
/* =============================================== */

num.notice
{
	position: absolute;
	right: -2px;
	bottom: -2px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-width: calc(1rem + 1px);
	min-height: 1rem;
	border-radius: 50%;
	font-family: var(--notice-font);
	font-size: 0.7rem;
	font-weight: bold;
	letter-spacing: -1px;
	padding-right: 1px;
	/* TODO: Customize colors? */
	color: white;
	background: red;
}

/* =============================================== */
/* Icons */
/* =============================================== */

[data-icon]
{
	display: inline-block;
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 0;
}

[data-icon]:before
{
	content: attr(data-icon);
	speak: none;
}

/* ----------------------------------------------- */
/* "i" info icons. */

.info,
a.info
{
	display: inline-block;
	font-family: 'icomoon';
	line-height: 0;
	/* NOTE: Presence or absense of whitespace between the input and the icon affects how far it is from the input */
	/* NOTE: An icon placed after a 100% width input will always wrap regardless of whitespace */
	/* To prevent this we would have to eliminate the whitespace and calc the width */
	margin-left: 0.3rem;
	font-size: 1rem;
	font-weight: normal;
	color: var(--infoicon-color);
	opacity: 0.5;
	cursor: help;
}

.info:hover
{
	opacity: 1;
}

a.info
{
	text-decoration: none;
}

a.info:hover
{
	color: var(--infoicon-hover);
}

.info[data-tooltip]:before
{
	/* Move balloon up so that it doesn't cover the icon */
	bottom: calc(100% + 14px);
}

.info[data-tooltip]:after
{
	/* Move balloon up so that it doesn't cover the icon */
	bottom: calc(100% + 8px);
	/* Slight nudge to align with "i" */
	left: calc(50% - 0.35rem);
}

/* =============================================== */
/* Expand */
/* This attribute must be combined with JavaScript (see code). */
/* =============================================== */

[data-expand]
{
	display: inline-block;
	font-family: 'icomoon';
	position: relative;
	font-size: 1.5rem;
	font-weight: normal;
	padding-right: 1px;
	text-align: center;
	border: 1px solid;
	border-radius: 25%;
	text-decoration: none;
	cursor: pointer;
	color: var(--expand-color);
	background: var(--expand-bg);
	border-color: var(--expand-border);
}

[data-expand].no-js
{
	/* HACK: Hide the button but leave some space for padding */
	margin: 0;
	padding: 0 0.25rem;
	font: inherit;
	color: transparent;
	background: transparent;
	border: none;
	cursor: default;
	pointer-events: none;
	overflow: hidden;
}

[data-expand].no-js:after
{
	/* Hide button by default; all sections are expanded by default */
	display: none;
}

a[data-expand],
a[data-expand]:link,
a[data-expand]:visited
{
	color: var(--expand-color);
}

[data-expand]:not(.no-js):hover,
a[data-expand]:not(.no-js):hover
{
	color: var(--expand-hover);
	background: var(--expand-hoverbg);
}

[data-expand]:after
{
	content: '\f0d7';
	display: inline-block;
	width: 1.5rem;
	height: 1.4rem;
	line-height: 1.4rem;
	transform: rotate(0deg);
	transition: transform 100ms linear;
	speak: none;
}

[data-expand].collapsed:after
{
	transform: rotate(-90deg);
}

.fallback-text
{
	/* Fallback text is used for accessibility; hide for others */
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	white-space: nowrap;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.expand-closed
{
	transform-origin: top left;
	transform: scaleY(0);
	pointer-events: none;
}

.expand-open
{
	transition: transform 200ms;
	transform-origin: top left;
	transform: scaleY(1);
}

.expand-close
{
	transition: transform 200ms;
	transform-origin: top left;
	transform: scaleY(0);
	pointer-events: none;
}

/* =============================================== */
/* A combination select/input */
/* =============================================== */

.combobox
{
	position: relative;
	grid-template: 'container';
}

span.combobox
{
	display: inline-grid;
}

div.combobox
{
	display: grid;
}

.combobox input
{
	grid-area: container;
	place-self: center center;
	padding-right: 1rem;
}

.combobox .arrow
{
	grid-area: container;
	place-self: stretch end;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-right: 0.3rem;
	margin: 1px;
	/* These values are kind of a hack and might not work well in all browsers */
	background: var(--input-bg);
	cursor: pointer;
}

.combobox .arrow:before
{
	content: '\f107';
	font-family: 'icomoon';
	font-weight: bold;
}

.combobox .popupmenu
{
	box-shadow: none;
	width: 100%;
	top: calc(100% - 1px);
}

.combobox .popupmenu li a
{
	border-width: 0;
}

/* =============================================== */
/* Search-on-type input boxes */
/* =============================================== */

[data-searchbox]
{
	position: relative;
	grid-template: 'container';
}

span[data-searchbox]
{
	display: inline-grid;
}

div[data-searchbox]
{
	display: grid;
}

[data-searchbox] input
{
	grid-area: container;
	place-self: center center;
	padding-right: 1.2rem;
}

[data-searchbox] .searchstatus
{
	grid-area: container;
	place-self: stretch end;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	padding-right: 0.3rem;
	margin: 1px;
	background: var(--input-bg);
	cursor: pointer;
}

[data-searchbox] .tooltip,
[data-searchbox]:after
{
	z-index: 100;
}

[data-searchbox] .searchstatus:before
{
	content: '\f002';
	font-family: 'icomoon';
	opacity: 0.4;
}

[data-searchbox] .searchstatus.searching:before
{
	content: '\f110';
	opacity: 1;
	animation: 1s steps(8) 0s normal none infinite running fa-spin;
}

[data-searchbox] .tooltip
{
	left: 1rem;
}

[data-searchbox] .tooltip img
{
	max-width: 4rem;
	max-height: 4rem;
	object-fit: contain;
}

[data-searchbox]:after
{
	/* Move the tooltip over the arrow. */
	left: 2rem;
}

/* =============================================== */
/* Operation (iconic) buttons */
/* =============================================== */

.opbtn
{
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 1.5rem;
	height: 1.5rem;
	border: 1px solid;
	border-radius: 6px;
	font-family: 'icomoon';
	font-style: normal;
	text-decoration: none;
	-webkit-user-select: none;
	user-select: none;
	cursor: pointer;
	border-color: var(--opbtn-border);
}

.opbtn,
.opbtn:link,
.opbtn:visited
{
	color: var(--opbtn-color);
	background: var(--opbtn-bg);
	border-color: var(--opbtn-border);
}

.opbtn:hover
{
	color: var(--opbtn-hover);
	background: var(--opbtn-hoverbg);
	border-color: var(--opbtn-hoverborder);
}

.opbtn.selected,
.opbtn.selected:link,
.opbtn.selected:visited,
.opbtn.selected:hover
{
	color: var(--opbtn-selected);
	background: var(--opbtn-selectedbg);
	border-color: var(--opbtn-selectedborder);
}

.opbtn.active,
.opbtn.active:link,
.opbtn.active:visited,
.opbtn.active:hover
{
	color: var(--opbtn-active);
	background: var(--opbtn-activebg);
	border-color: var(--opbtn-activeborder);
}

.opbtn,
.opbtn:link,
.opbtn:hover,
.opbtn:active
{
	text-decoration: none;
}

.opbtn.saving,
.opbtn.selected.saving
{
	color: transparent;
}

/* Override tooltip */
.opbtn.saving:before
{
	content: '';
	display: none;
}

/* Override tooltip */
.opbtn.saving:after
{
	display: block;
	position: absolute;
	z-index: auto;
	content: '\f110';
	font-family: 'icomoon';
	font-weight: normal;
	color: var(--opbtn-color);
	top: auto;
	bottom: auto;
	left: auto;
	right: auto;
	width: auto;
	height: auto;
	border: 0;
	filter: none;
	transition: none;
	opacity: 1;
	visibility: visible;
	animation: 1s steps(8) 0s normal none infinite running fa-spin;
}

/* =============================================== */
/* Notices and error messages */
/* =============================================== */

.global-notice,
.global-error
{
	position: relative;
	margin: 1rem 0;
	padding: 0.5rem;
	border: 1px solid;
}

#site-content > .global-notice,
#site-content > .global-error,
#site-content > div > .global-notice,
#site-content > div > .global-error
{
	margin: 1rem auto;
	margin-top: 2rem;
	/* When top-level, mimic margins when not max-width, so that auto margins can still center */
	width: calc(100% - 4rem);
	max-width: calc(var(--main-width) - 4rem);
}

.global-notice .header,
.global-error .header
{
	display: block;
	position: absolute;
	bottom: 100%;
	margin-bottom: -1px;
	font-weight: bold;
	font-size: 0.8rem;
}

.global-notice,
#site-content .global-notice
{
	color: var(--notice-text);
	background: var(--notice-bg);
	border-color: var(--notice-border);
}

.global-notice .header,
#site-content .global-notice .header
{
	color: var(--notice-border);
}

.global-error,
#site-content .global-error
{
	color: var(--error-text);
	background: var(--error-bg);
	border-color: var(--error-border);
}

.global-error .header,
#site-content .global-error .header
{
	color: var(--error-border);
}

.global-notice p,
.global-error p
{
	margin: 0.5rem 0;
	padding: 0;
}

.global-notice p:first-of-type,
.global-error p:first-of-type
{
	margin-top: 0;
}

.global-notice p:last-child,
.global-error p:last-child
{
	margin-bottom: 0;
}

/* =============================================== */
/* Site header */
/* =============================================== */

#site-header
{
	color: var(--siteheader-color);
	background: var(--siteheader-bg);
}

#site-header .content
{
	display: flex;
	align-items: center;
	max-width: var(--main-width);
	margin: 0 auto;
}

#site-header .banner
{
	flex-shrink: 0;
	flex-grow: 0;
}

#site-header .search
{
	flex: 1.4;
}

#site-header .profile
{
	flex: 1;
}

#site-header .portrait
{
	flex-shrink: 0;
	flex-grow: 0;
}

#site-header .nav
{
	flex-shrink: 0;
	display: none;
}

/* ----------------------------------------------- */
/* Links in the header to member profile and etc. */

#site-header a
{
	color: var(--siteheader-link);
	text-decoration: none;
}

#site-header a:hover,
#site-header a:active
{
	color: var(--siteheader-hover);
}

/* ----------------------------------------------- */
/* The logo in the upper left. */

#site-header .banner .logo
{
	display: flex;
	align-items: center;
	width: max-content;
	height: var(--banner-height);
	background-repeat: no-repeat;
	/* Text by default unless a logo image is supplied */
	font-size: calc(var(--banner-height) / 2);
	text-transform: uppercase;
	line-height: 1;
	padding-left: 1%;
}

/* ----------------------------------------------- */
/* Search box in header. */

#site-header .search
{
	font-size: 0.75rem;
	padding-left: 0.5rem;
	padding-right: 1.5rem;
}

#site-header .search .block
{
	margin: 0 auto;
	max-width: 15rem;
}

#site-header .search input[type="search"]
{
	width: 100%;
}

#site-header .search .buttons
{
	display: flex;
	justify-content: flex-end;
	margin-top: 0.2rem;
}

#site-header .search .buttons button:first-child
{
	font-weight: bold;
}

#site-header .search .buttons button:last-child
{
	margin-left: 0.3rem;
}

/* ----------------------------------------------- */
/* Logged-in member profile in upper right. */

#site-header .profile
{
	display: flex;
	justify-content: flex-end;
	font-size: 0.75rem;
}

#site-header .profile a:hover
{
	text-decoration: underline;
}

#site-header .profile .block
{
	text-align: center;
}

#site-header .profile .name
{
	font-weight: bold;
	font-size: 0.9rem;
}

#site-header .profile .login
{
	padding-right: 1rem;
	font-size: 0.9rem;
}

/* ----------------------------------------------- */
/* Logged-in member portrait in upper right. */

#site-header .portrait
{
	margin: 0 0.5rem;
}

#site-header .portrait a
{
	display: flex;
	align-items: center;
	height: var(--banner-height);
	overflow: hidden;
}

#site-header .portrait img
{
	display: block;
	width: auto;
	height: calc(var(--banner-height) - 1rem);
	border-radius: 50%;
	/* A specific width or height with a max-width/height in the other direction will cause the image not to maintain aspect ratio */
	/* Interestingly, having both max-width and max-height but no specified width/height (including on the <img> tag) will maintain aspect-ratio */
	/* The below works, but will distort the image on browsers that don't support object-fit */
	max-width: calc(var(--banner-height) - 1rem);
	object-fit: cover;
	object-position: center center;
}

/* =============================================== */
/* Menubar */
/* =============================================== */

#site-nav
{
	color: var(--menubar-color);
	background: var(--menubar-bg);
}

#site-nav .content
{
	display: flex;
	align-items: stretch;
	max-width: var(--main-width);
	margin: 0 auto;
}

#site-nav .menubar
{
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
}

#site-nav .right
{
	margin: 0;
	padding: 0;
	margin-left: auto;
	margin-right: 0.5rem;
}

/* ----------------------------------------------- */
/* The menu in site-header is used on mobile devices; the site-nav menu bar is for larger screens. Both are styled similarly. */

#site-header .menu li,
#site-nav .menubar li
{
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The actual drop-down menu (normally hidden) */
#site-header .menu,
#site-nav .menu
{
	position: absolute;
	width: -webkit-max-content;
	width: -moz-max-content;
	width: max-content;
	margin: 0;
	padding: 0;
	background: var(--menu-bg);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	/* Over the page elements, but under pop-up menus and tooltips */
	z-index: 100;
}

#site-nav .menu
{
	top: 100%;
	left: 0;
	min-width: 9rem;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

#site-header .menu a,
#site-nav .menu a
{
	display: block;
	color: var(--menu-color);
	width: 100%;
	height: 100%;
	padding: 0.4rem 1.5rem;
	-webkit-user-select: none;
	user-select: none;
	text-decoration: none;
	cursor: pointer;
}

#site-header .menu a:hover,
#site-nav .menu a:hover,
#site-header .menu a:focus,
#site-nav .menu a:focus
{
	color: var(--menu-hover);
	background: var(--menu-hoverbg);
}

#site-header .menu a.current,
#site-nav .menu a.current
{
	color: var(--menu-hover);
	background: var(--menu-hoverbg);
}

/* The menu bar at the top */
#site-nav .menubar > li
{
	position: relative;
	align-self: stretch;
}

#site-nav .menubar > li > a,
#site-nav .menubar > li > span
{
	display: inline-flex;
	align-items: center;
	height: 100%;
	padding: 0.3rem 0.7rem;
	white-space: nowrap;
	-webkit-user-select: none;
	user-select: none;
	text-decoration: none;
	cursor: pointer;
	color: var(--menubar-color);
}

#site-nav .menubar > li > a:hover,
#site-nav .menubar > li > span:hover
{
	color: var(--menubar-hover);
	background: var(--menubar-hoverbg);
}

#site-nav .menubar > li > span:focus,
#site-nav .menubar > li > span:focus-visible,
#site-nav .menubar > li:focus-within > span
{
	color: var(--menubar-hover);
	background: var(--menubar-hoverbg);
}

/* These menu items have dropdown menus */
#site-nav .menubar > li > span
{
	padding-right: 0.3rem;
}

#site-nav .menubar > li > span:after
{
	content: '\0025bd\fe0e';
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 1rem;
	font-family: 'Lucida Sans Unicode', 'Arial Unicode MS';
	font-size-adjust: 0.4;
	font-weight: normal;
	line-height: 0;
}

#site-nav .menubar > li span:focus:after,
#site-nav .menubar > li span:focus-visible:after,
#site-nav .menubar > li:focus-within > span:after
{
	content: '\0025bc\fe0e';
}

#site-nav .menubar > li > span:focus + .menu
{
	opacity: 1;
	visibility: visible;
}

/* Newer browsers: allows keyboard navigation */
#site-nav .menubar > li:focus-within .menu
{
	opacity: 1;
	visibility: visible;
}

/* ----------------------------------------------- */
/* The iconic buttons on the right side of the menu bar. */

#site-nav .right
{
	display: inline-flex;
	align-items: center;
}

#site-nav .right li
{
	list-style: none;
	margin-top: 2px;
	margin-bottom: 2px;
	margin-left: 0.3rem;
}

#site-nav .right a
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 2rem;
	height: 1.8rem;
	font-family: 'icomoon';
	font-size: 1.3rem;
	border: 1px solid;
	border-radius: 4px;
	text-decoration: none;
	-webkit-user-select: none;
	user-select: none;
	cursor: pointer;
	color: var(--menuicon-color);
	background: var(--menuicon-bg);
	border-color: var(--menuicon-border);
}

#site-nav .right a:hover
{
	color: var(--menuicon-hover);
	background: var(--menuicon-hoverbg);
}

#site-nav .right [data-tooltip]:before
{
	/* Position balloon to left of anchor */
	left: auto;
	right: 0;
}

/* =============================================== */
/* Page title */
/* =============================================== */

#site-title
{
	position: relative;
	z-index: 1;
	padding: 0.3rem 0;
	border-bottom: 1px solid;
	color: var(--titlebar-color);
	background: var(--titlebar-bg);
	border-color: var(--titlebar-border);
}

#site-title .content
{
	display: flex;
	position: relative;
	align-items: center;
	max-width: var(--main-width);
	margin: 0 auto;
}

#site-title:before
{
	display: block;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: calc(100% - 1.3rem);
	width: 0.7rem;
	border-top: 0.7rem solid transparent;
	border-left: 0.7rem solid var(--titlebar-icon);
	border-bottom: 0.7rem solid transparent;
}

#site-title .title
{
	flex-grow: 1;
	margin: 0;
	padding: 0;
	margin-left: 1.3rem;
	margin-right: 0.5rem;
	font-size: 1.2rem;
	font-weight: bold;
	white-space: nowrap;
}

#site-title .quote
{
	min-width: 0;
	align-self: flex-end;
	text-align: right;
	font-size: 0.8rem;
	margin-right: 0.5rem;
}

#site-title .quote .line
{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* =============================================== */
/* Site footer */
/* =============================================== */

#site-footer
{
	font-size: 0.9rem;
}

#site-footer .content
{
	margin: 0 auto;
	padding: 1rem;
	padding-top: 3rem;
	max-width: var(--main-width);
	text-align: center;
	color: var(--content-color);
	background: var(--content-bg);
}

#site-footer .content a,
#site-footer .content a:link
{
	color: var(--content-link);
}

#site-footer .content a:visited
{
	color: var(--content-visited);
}

#site-footer .content a:hover
{
	color: var(--content-hover);
}

/* =============================================== */
/* Shared form classes */
/* =============================================== */

form .errors
{
	margin: 0;
	padding: 0;
	margin-left: 1.8rem;
	margin-top: 0.3rem;
	margin-bottom: 0.3rem;
	color: var(--formerror-color);
}

form .errors li
{
	list-style: none;
	display: flex;
	margin: 0.2rem 0;
	padding: 0;
}

form .errors li:before
{
	content: '\f06a';
	font-family: 'icomoon';
	padding-right: 0.3rem;
	/* HACK: Kind of an eye-balling of it */
	padding-top: 1px;
}

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

form.working button[type="submit"]
{
	color: var(--disabled-color);
	background: var(--disabled-bg);
	border-color: var(--disabled-border);
	pointer-events: none;
	cursor: default;
}

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

form .status
{
	position: relative;
	display: flex;
	align-items: center;
	font-weight: normal;
	overflow: hidden;
	opacity: 0;
}

form .status progress
{
	flex-shrink: 1;
	flex-grow: 1;
	width: 4rem;
	height: 100%;
	display: none;
}

form .status.saving,
form .status.error
{
	opacity: 1;
	animation-name: fade-in;
	animation-duration: 200ms;
	animation-fill-mode: both;
}

form .status.progress
{
	opacity: 1;
}

form .status.progress progress
{
	display: block;
}

form .status.saved progress,
form .status.error progress
{
	/* Bug fix in case these classes get combined */
	display: none;
}

form .status.saving:before,
form .status.progress:before
{
	content: '\f110';
	display: inline-block;
	font-family: 'icomoon';
	margin-right: 0.3rem;
	pointer-events: none;
	animation: 1s steps(8) 0s normal none infinite running fa-spin;
}

form .status.saved
{
	color: var(--formsuccess-color);
	opacity: 1;
	animation-name: fade-out;
	animation-duration: 400ms;
	animation-fill-mode: both;
	animation-delay: 1500ms;
}

form .status.submit
{
	color: var(--formsuccess-color);
	opacity: 1;
}

form .status.saved:before,
form .status.submit:before
{
	content: '\f00c';
	font-family: 'icomoon';
	margin-right: 0.3rem;
	pointer-events: none;
	animation: none;
}

form .status.error
{
	color: var(--formerror-color);
}

form .status.error:before
{
	content: '\f071';
	font-family: 'icomoon';
	margin-right: 0.3rem;
}

form .status.saving button[type="submit"],
form .status.progress button[type="submit"]
{
	color: var(--disabled-color);
	background: var(--disabled-bg);
	border-color: var(--disabled-border);
	pointer-events: none;
	cursor: default;
}

/* ----------------------------------------------- */
/* Details and form fields. */

.detailslist,
.statslist,
.fieldslist
{
	display: table;
	border-collapse: separate;
	border-spacing: 3px;
	margin: 0;
	padding: 0;
}

.fieldslist
{
	width: 100%;
	/* HACK: Limit .max inputs to roughly 65ch (plus 10rem for the th) */
	max-width: calc(35rem + 10rem);
	border-spacing: 5px;
}

.statslist
{
	margin-left: 0.5rem;
}

.detailslist li,
.statslist li,
.fieldslist > div
{
	display: table-row;
}

/* This is the <th> */
.detailslist li > *:first-child,
.statslist li > *:first-child,
.fieldslist > div > *:first-child
{
	display: table-cell;
	padding: 0.2rem 0.5rem;
	font-weight: bold;
	text-align: right;
	border: 1px solid;
	border-radius: 0.5rem;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	white-space: nowrap;
	vertical-align: baseline;
	color: var(--fieldth-color);
	background: var(--fieldth-bg);
	border-color: var(--fieldth-border);
}

/* This is the <td> */
.detailslist li > *:nth-child(2),
.statslist li > *:nth-child(2),
.fieldslist > div > *:nth-child(2)
{
	display: table-cell;
}

.detailslist li > *:nth-child(2),
.statslist li > *:nth-child(2)
{
	vertical-align: baseline;
	padding-left: 0.3rem;
	overflow-wrap: break-word;
}

.fieldslist > div > *:nth-child(2)
{
	vertical-align: text-top;
}

.fieldslist > div.top > *
{
	vertical-align: top;
}

.fieldslist > div.top > *:first-child
{
	line-height: 1.1;
}

.fieldslist > div.middle > *
{
	vertical-align: middle;
}

.fieldslist > div.middle > label
{
	vertical-align: middle;
}

.fieldslist > div > span.blank
{
	background: transparent;
	border: 0;
}

.detailslist .info,
.fieldslist .info
{
	/* HACK: Slight nudge since there is no "absmiddle" */
	vertical-align: -2px;
}

.fieldslist .validated:before
{
	content: '\f00c';
	font-family: 'icomoon';
	margin-right: 0.3rem;
	pointer-events: none;
	color: var(--formsuccess-color);
}

.detailslist [data-tooltip]:before,
.fieldslist [data-tooltip]:before
{
	/* Move balloon above and mostly to the left of anchor */
	left: auto;
	right: 0;
	transform: translateX(16%);
}

.fieldslist .info[data-tooltip]:before
{
	/* Move balloon up more to account for size of input */
	bottom: calc(100% + 17px);
}

.fieldslist .info[data-tooltip]:after
{
	/* Move balloon up more to account for size of input */
	bottom: calc(100% + 12px);
}

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

.fieldslist > div > *:first-child
{
	/* HACK: Make <th>s all line up except for very wide fields */
	width: 10rem;
}

.fieldslist > div > *:first-child > label
{
	display: block;
	/* HACK: Guessing size since not using actual rows (margin + borders) */
	margin-top: calc(0.3rem + 2px);
	padding: 0.2rem 0.7rem;
	padding-right: 0;
}

.fieldslist > div > *:first-child > label:first-child
{
	margin-top: 0;
	padding-top: 0;
}

.fieldslist > div > *:nth-child(2) > div:not(:first-child)
{
	margin-top: 0.3rem;
}

.fieldslist .button,
.fieldslist button
{
	padding: 0.2rem 0.7rem;
}

.fieldslist select
{
	min-width: 8ch;
}

.fieldslist .max
{
	width: 100%;
}

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

.fieldslist .submitrow .button,
.fieldslist .submitrow button
{
	padding: 0.2em 1em;
	min-width: 8rem;
}

.fieldslist .submitrow > *
{
	padding-top: 0.2rem;
}

.fieldslist .submitrow > *:first-child
{
	background: transparent;
	border: 0;
	/* Match the submit button */
	vertical-align: middle;
	padding: 0.2rem 0.5rem;
	padding-top: 0.6rem;
}

.fieldslist .submitrow .status
{
	justify-content: flex-end;
}

.fieldslist .submitrow .status.saved,
.fieldslist .submitrow .status.submit
{
	padding-right: 1ch;
}

.fieldslist .submitrow .buttons
{
	display: flex;
}

.fieldslist .submitrow .buttons > *
{
	margin-left: 0.5rem;
}

.fieldslist .submitrow .buttons > *:first-child
{
	margin-left: 0;
}

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

.fieldslist .gamename > label
{
	vertical-align: middle;
}

.fieldslist .gamename > span
{
	vertical-align: middle;
}

.fieldslist .gamename > span > span
{
	display: flex;
	align-items: center;
}

.fieldslist .gamename img
{
	max-height: 40px;
	max-width: 70px;
}

.fieldslist .gamename > span > span a,
.fieldslist .gamename > span > span b
{
	margin-left: 0.3rem;
	font-weight: bold;
}

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

.formnotice
{
	margin-left: 2rem;
	margin-bottom: 0.3rem;
}

.formhint
{
	margin: 0.7rem 2rem;
	font-size: var(--content-fontsize);
}

.formhint [data-icon]
{
	font-size: 1.1rem;
	vertical-align: baseline;
	top: 0.15rem;
	position: relative;
	padding-right: 0.1rem;
}

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

form .submitdiv
{
	display: flex;
	align-items: center;
	margin: 0.7rem 0;
}

form .submitdiv button
{
	flex-shrink: 0;
	flex-grow: 0;
}

form .submitdiv .status
{
	flex: 1;
	margin-left: 1rem;
}

/* ----------------------------------------------- */
/* Multi-line list boxes. */

form .listbox
{
	box-sizing: content-box;
	margin: 0;
	padding: 0;
	width: 20rem;
	width: -webkit-max-content;
	width: -moz-max-content;
	width: max-content;
	min-width: 30ch;
	max-width: 100%;
	line-height: 1.8rem;
	/* Take borders into account in height calculation */
	max-height: calc((1.8rem + 2px) * 7);
	overflow-y: scroll;
	border: 1px solid;
	border-radius: 0.1rem;
	color: var(--list-color);
	border-color: var(--list-border);
	background: var(--list-bg);
	scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg);
}

form .listbox > div
{
	display: flex;
	position: relative;
	align-items: center;
	-webkit-user-select: none;
	user-select: none;
}

form .listbox input
{
	/* HACK: Hides the radio button and just shows the label */
	position: absolute;
	width: 0px;
	border: none;
	outline: none;
	box-shadow: none;
	text-shadow: none;
	opacity: 0;
}

form .listbox label
{
	display: inline-flex;
	align-items: center;
	width: 100%;
	padding: 0 0.4rem;
	border: 1px solid transparent;
	cursor: pointer;
}

form .listbox input:focus-visible + label
{
	border-color: var(--focus-outline);
	box-shadow: 0px 0px 2px var(--focus-outline), 1px 1px 0px var(--focus-outline), -1px -1px 0px var(--focus-outline), -1px 1px 0px var(--focus-outline), 1px -1px 0px var(--focus-outline);
}

form .listbox label img
{
	margin-right: 0.5rem;
	width: 2.5rem;
	height: auto;
	max-height: 1.2rem;
	/* Required because specifying height and max-height; this will distort the image in browsers that don't understand object-fit */
	object-fit: contain;
}

form .listbox label .img
{
	display: inline-block;
	margin-right: 0.5rem;
	width: 2.5rem;
	height: 1.2rem;
	/* TODO: Theme */
	border: 1px solid rgba(128, 128, 128, 0.5);
	background: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(128, 128, 128, 0.5) 2px, rgba(128, 128, 128, 0.5) 4px);
}

form .listbox input:checked + label
{
	color: var(--list-selected);
	background: var(--list-selectedbg);
}

/* Places a triangle next to the selected item */
form .listbox input:checked + label:before
{
	display: block;
	content: '';
	position: absolute;
	top: 0.35rem;
	left: 0;
	height: 0;
	width: 0;
	border-top: 0.6rem solid transparent;
	border-bottom: 0.6rem solid transparent;
	border-left: 0.6rem solid var(--list-selected);
}

form .listbox label:hover
{
	color: var(--list-hover);
	background: var(--list-hoverbg);
}

form .listbox .current label
{
	font-weight: bold;
	cursor: default;
	color: var(--list-current);
	background: var(--list-currentbg);
}

form .listbox .current label:hover
{
	background: var(--list-currentbg);
}

/* =============================================== */
/* Popup (context) menus */
/* =============================================== */

.popupmenu
{
	position: absolute;
	margin: 0;
	padding: 0;
	font-family: var(--main-font);
	font-size: 1rem;
	/* Note to self: absolute containers shrinkwrap by default */
	max-width: 95vw;
	max-height: 90vh;
	overflow-x: hidden;
	overflow-y: auto;
	border: 1px solid;
	border-radius: 2px;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
	/* On top of the page menus but below tooltips */
	z-index: 101;
	color: var(--popupmenu-color);
	background: var(--popupmenu-bg);
	border-color: var(--popupmenu-border);
	scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg);
}

.popupmenu li
{
	list-style: none;
	display: block;
	margin: 0;
	padding: 0;
}

/* TODO: Do we need <a> tags or can we just put the click handler on the <li>? */
.popupmenu li a
{
	display: block;
	padding: 0.4rem 1rem;
	border-top: 1px solid;
	-webkit-user-select: none;
	user-select: none;
	cursor: pointer;
	border-color: var(--popupmenuitem-border);
}

.popupmenu li:first-child a
{
	border-top: 0;
}

.popupmenu a,
.popupmenu a:link,
.popupmenu a:visited
{
	text-decoration: none;
	color: inherit;
}

.popupmenu a:hover
{
	color: var(--popupmenuitem-hover);
	background: var(--popupmenuitem-hoverbg);
}

.popupmenu a.current
{
	cursor: default;
	color: var(--popupmenuitem-selected);
	background: var(--popupmenuitem-selectedbg);
}

.popupmenu [data-icon]
{
	font-size: 0.9em;
	margin-right: 0.3em;
}

.popupmenu .img
{
	width: 1.1rem;
	height: 1.1rem;
	vertical-align: sub;
	margin-right: 4px;
}

.popupmenu span.img
{
	display: inline-block;
	border: 1px dotted;
	border-radius: 2px;
	opacity: 0.8;
}

.popupmenu img.img
{
	object-fit: contain;
}

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

.popupmenu.search
{
	font-size: 0.9rem;
	white-space: nowrap;
}

.popupmenu.search a
{
	padding: 0.2rem 0.5rem;
	border-top: 0;
	/* Adding space for scrollbar since absolute + nowrap + scrollbar gets wonky */
	padding-right: calc(0.5rem + 16px);
}

/* =============================================== */
/* Popup dialogs */
/* =============================================== */

dialog::backdrop
{
	background: rgba(0, 0, 0, 0.5);
}

.dialogoverlay
{
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.5);
	/* Make sure dialogs appear on top of the page menus */
	z-index: 200;
}

dialog
{
	/* WARNING: Some browsers that support <dialog> element do not position it which means its position in the DOM affects its position on the screen. */
	/* These dialogs can be positioned manually (e.g. by using top: 50% and such) but then this messes up the show/hide animation AND it messes up browsers that DO position the dialogs correctly. */
	/* Placing <dialog> elements too low on the page (in the DOM) will result in them disappearing off the bottom of the window on these browsers -_- */
	width: 40rem;
	width: -webkit-max-content;
	width: -moz-max-content;
	width: max-content;
	height: 20rem;
	height: -webkit-max-content;
	height: -moz-max-content;
	height: max-content;
	max-width: 100vw;
	max-height: 100vh;
	padding: 1rem 2rem;
	border: 2px solid;
	border-radius: 1rem;
	transform-origin: center center;
	background: var(--content-bg);
	border-color: var(--content-border);
}

.dialogoverlay dialog
{
	/* Required for the non-showModal dialog, but will mess up showModal dialog if it exists there */
	display: block;
	position: relative;
	/* This shouldn't technically be needed on showModal version though doesn't seem to matter there */
	z-index: 201;
}

dialog.loading:after
{
	content: '\f110';
	display: inline-block;
	position: absolute;
	left: calc(50% - 3vw);
	top: calc(50% - 3vw);
	font-family: 'icomoon';
	font-size: 6vw;
	animation: 1s steps(8) 0s normal none infinite running fa-spin;
	pointer-events: none;
	opacity: 0.5;
}

dialog.closed,
dialog.close
{
	transform: scale(0.75);
	pointer-events: none;
}

dialog.open
{
	transition: transform 200ms;
	transform: scale(1);
}

dialog.close
{
	transition: transform 200ms;
}

dialog h3
{
	margin-top: 0;
	margin-bottom: 0;
	height: 2rem;
}

dialog p:first-child
{
	margin-top: 0.5rem;
}

dialog button,
dialog .button
{
	font-weight: bold;
}

dialog .closebtn
{
	position: absolute;
	font-family: 'icomoon';
	top: 1rem;
	right: 1rem;
	width: 2rem;
	height: 2rem;
	font-size: 1.2rem;
	padding: 0;
}

dialog a.closebtn
{
	line-height: 1.9rem;
}

dialog .submitdiv
{
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 10px;
	margin-top: 0.3rem;
}

dialog .submitdiv button,
dialog .submitdiv .button
{
	min-width: 25%;
}

dialog .confirm
{
	max-width: 40rem;
}

form .confirm .submitdiv
{
	column-gap: 10px;
	margin-top: 1rem;
	margin-bottom: 0;
}

dialog .confirm .submitdiv
{
	justify-content: space-around;
	margin-top: 1rem;
	margin-bottom: 0;
}

form .confirm .error
{
	text-align: center;
	color: var(--formerror-color);
}

dialog .confirm.working .submitdiv:after
{
	content: '\f110';
	display: inline-block;
	position: absolute;
	left: calc(50% - 1rem);
	font-family: 'icomoon';
	font-size: 2rem;
	animation: 1s steps(8) 0s normal none infinite running fa-spin;
	pointer-events: none;
	opacity: 0.5;
}

dialog .fieldslist,
#site-content dialog form .fieldslist
{
	max-width: max-content;
	margin: 0 auto;
	width: 100%;
}

dialog.titlebar
{
	/* Needed for older browsers; alternately, we could put border-radius on the h3... */
	overflow-x: hidden;
}

dialog.titlebar .closebtn
{
	top: 0.5rem;
}

dialog.titlebar h3
{
	margin-left: -2rem;
	margin-right: -2rem;
	margin-top: -1rem;
	margin-bottom: 1rem;
	padding: 1.5rem 2rem;
	color: var(--pageheader-color);
	background: var(--pageheader-bg);
}

/* =============================================== */
/* Browse dialog lists */
/* =============================================== */

/* ----------------------------------------------- */
/* A pick list that uses a grid list in a dialog. */

dialog.picklist
{
	display: flex;
	flex-direction: column;
	width: 80vw;
	height: 80vh;
	max-width: var(--main-width);
	padding: 1.5rem;
	padding-top: 1rem;
	/* TODO: Revert from bug-fix */
	overflow-x: auto;
}

dialog.picklist:not([open])
{
	/* Required for browsers that natively support <dialog> */
	display: none;
}

.dialogoverlay dialog.picklist
{
	/* Workaround for those browsers that don't support <dialog> */
	display: flex;
}

dialog.picklist h3
{
	margin-bottom: 0.5rem;
}

dialog.picklist .closebtn
{
	right: 1.5rem;
}

dialog.picklist .gridlist
{
	flex: 1;
	padding: 0.2rem;
}

/* ----------------------------------------------- */
/* A selection grid for picking an icon from a list. */

.gridlist
{
	overflow-y: scroll;
	border: 1px solid;
	border-radius: 0.1rem;
	color: var(--list-color);
	border-color: var(--list-border);
	background: var(--list-bg);
	scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg);
}

.gridlist .grid
{
	display: grid;
	grid-template-columns: repeat(auto-fill, 100px);
	row-gap: 4px;
	column-gap: 4px;
	justify-content: space-around;
}

.gridlist .grid .item
{
	padding: 0.3rem;
	border: 1px solid transparent;
	border-radius: 0.2rem;
	-webkit-user-select: none;
	user-select: none;
	cursor: pointer;
}

.gridlist .grid .item.current
{
	color: var(--list-current);
	background: var(--list-currentbg);
}

.gridlist .grid .item:hover
{
	color: var(--list-hover);
	background: var(--list-hoverbg);
	border-color: var(--list-hoverborder);
}

.gridlist .grid .thumbnail
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 80px;
}

.gridlist .grid .thumbnail img
{
	display: block;
	max-width: 100%;
	max-height: 80px;
}

.gridlist .grid .thumbnail span
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 1.3rem;
	font-weight: bold;
	border: 1px dotted;
	border-radius: 2px;
	-webkit-user-select: none;
	user-select: none;
	color: var(--noimg-color);
	background: var(--noimg-bg);
	border-color: var(--noimg-border);
}

.gridlist .grid .item:hover .thumbnail span
{
	color: var(--list-hover);
}

.gridlist .grid .title
{
	margin-top: 0.2rem;
	/* Center text but force overflow to flow outside the container on both sides */
	display: flex;
	justify-content: center;
	text-align: center;
}

/* ----------------------------------------------- */
/* Optional buttons at the top of the dialog. */

dialog.picklist h3 span:first-child
{
	margin-right: 5%;
}

dialog.picklist h3 .opbtn
{
	font-family: 'icomoon';
	width: 2rem;
	height: 2rem;
	font-size: 1.2rem;
	font-weight: normal;
	padding: 0;
	margin-left: 0.5rem;
}

dialog.picklist h3 > *
{
	flex-grow: 0;
	flex-shrink: 0;
}

dialog.picklist .search
{
	display: flex;
	flex: 1;
	margin-left: 10%;
	margin-right: 20%;
	font-weight: normal;
	font-size: 1rem;
}

dialog.picklist .search input
{
	flex: 1;
}

dialog.picklist .search .opbtn
{
	flex-grow: 0;
	flex-shrink: 0;
	width: 1.75rem;
	height: 1.75rem;
	margin-left: 0.3rem;
}

dialog.picklist .search:before
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-grow: 0;
	flex-shrink: 0;
	width: 1.75rem;
	height: 1.75rem;
	font-size: 1.2rem;
	font-weight: normal;
	margin-right: 0.3rem;
}

/* ----------------------------------------------- */
/* Toggles the gridlist to display as a plain list instead. */

.gridlist.list .grid
{
	display: block;
	column-width: 18rem;
	column-gap: 2rem;
}

.gridlist.list .grid .item
{
	display: flex;
	align-items: center;
	break-inside: avoid;
}

.gridlist.list .grid .thumbnail
{
	width: 40px;
	height: auto;
	min-height: 30px;
	margin-right: 0.75rem;
}

.gridlist.list .grid .thumbnail img
{
	max-height: 40px;
}

.gridlist.list .grid .thumbnail span
{
	font-size: 0.9rem;
	min-height: 30px;
}

.gridlist.list .grid .title
{
	flex: 1;
	display: block;
	margin-top: 0;
	text-align: left;
}

/* =============================================== */
/* Image editor */
/* =============================================== */

.imgeditor > *
{
	margin-top: 0.5rem;
}

.imgeditor > *:first-child
{
	margin-top: 0;
}

.imgeditor .img
{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 150px;
	width: -webkit-max-content;
	width: -moz-max-content;
	width: max-content;
}

.imgeditor .container
{
	position: relative;
	display: block;
	box-sizing: content-box;
	border: 1px dashed gray;
	border-radius: 3px;
}

.imgeditor .thumbnail
{
	position: relative;
	display: block;
	transform-origin: 0 0;
	box-sizing: content-box;
	cursor: pointer;
	overflow: hidden;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}

.imgeditor .thumbnail img
{
	display: block;
	position: absolute;
}

.imgeditor .thumbnail.round:before {
	/* This is only an approximation, but using border-radius doesn't work on a scaled image */
	content: '';
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 400px solid;
	border-color: rgba(var(--content-bg-rgb), 0.7);
	border-radius: 50%;
	z-index: 1;
}

.imgeditor .thumbnail:hover:after
{
	content: '\f047';
	position: absolute;
	display: block;
	right: 8px;
	bottom: 8px;
	font-family: 'icomoon';
	font-size: 1.2rem;
	pointer-events: none;
	color: #EEE;
	text-shadow: 0px 0px 2px black, -1px -1px 1px black, 1px -1px 1px black, -1px 1px 1px black, 1px 1px 1px black;
	transform-origin: right bottom;
}

.imgeditor .thumbnail.round:hover:after
{
	z-index: 2;
}

/* Center image if no JavaScript */
.imgeditor.no-js .thumbnail
{
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: default;
	pointer-events: none;
}

/* Hide if no JavaScript */
.imgeditor.no-js .thumbnail:hover:after
{
	content: '';
	display: none;
}

.imgeditor .zoom
{
	display: flex;
	justify-content: center;
	font-family: 'icomoon';
	font-size: 1.1rem;
}

/* These are JavaScript only, so hide by default */
.imgeditor.no-js .zoom button
{
	display: none;
}

.imgeditor .zoom button
{
	position: relative;
	margin-top: 0.3rem;
	padding: 0.2rem 0.7rem;
}

.imgeditor .zoom > *
{
	margin-right: 0.5rem;
}

.imgeditor .zoom > *:last-child
{
	margin-right: 0;
}

.imgeditor input[type="file"]
{
	display: block;
	max-width: 100%;
}

.imgeditor > label
{
	display: flex;
}

.imgeditor .external
{
	display: flex;
	align-items: center;
	max-width: 100%;
}

.imgeditor .external label,
.imgeditor .external .button
{
	flex-grow: 0;
	flex-shrink: 0;
}

.imgeditor .external input
{
	flex: 1;
	margin: 0 0.3rem;
}

.imgeditor.noimage .thumbnail,
.imgeditor.loading .thumbnail
{
	pointer-events: none;
}

.imgeditor.noimage .container:before
{
	content: 'Drop image file here';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--gray);
	font-size: 0.9rem;
	text-align: center;
}

.imgeditor.noimage.mobile .container:before
{
	content: '';
	display: none;
}

.imgeditor.loading .thumbnail:after
{
	content: '\f110';
	position: absolute;
	display: block;
	font-family: 'icomoon';
	font-size: 50px;
	top: calc(50% - 30px);
	bottom: auto;
	left: calc(50% - 25px);
	right: auto;
	width: auto;
	height: auto;
	pointer-events: none;
	color: #EEE;
	text-shadow: 0px 0px 2px black, -1px -1px 1px black, 1px -1px 1px black, -1px 1px 1px black, 1px 1px 1px black;
	animation: 1s steps(8) 0s normal none infinite running fa-spin;
}

/* ----------------------------------------------- */
/* Portrait selector dialog used with some imgeditors. */

#pnlPortraitList
{
	cursor: default;
}

#pnlPortraitList h3
{
	margin-bottom: 0;
}

#pnlPortraitList .dirlist
{
	display: flex;
	align-items: center;
	margin-bottom: 0.5rem;
}

#pnlPortraitList .dirlist label
{
	margin-right: 0.5rem;
}

#pnlPortraitList .grid
{
	row-gap: 0;
	column-gap: 0;
}

/* =============================================== */
/* Ribbon editor */
/* =============================================== */

.ribbonedit
{
	max-width: 40rem;
	margin: 1rem auto;
}

.ribbonedit .ribbonsrc
{
	display: none;
}

.ribbonedit .canvas
{
	display: flex;
	justify-content: space-around;
}

.ribbonedit .canvas > div
{
	margin: 0 1rem;
}

.ribbonedit p
{
	margin: 0.5rem 0;
}

.ribbonedit p:first-child
{
	margin-top: 0;
}

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

.ribbonedit .canvas > div:first-child p
{
	text-align: center;
	margin-top: 2rem;
}

.ribbonedit .canvas > div:first-child p:first-child
{
	margin-top: 0;
}

.ribbonedit .canvas canvas
{
	display: block;
	box-sizing: content-box;
	width: 64px;
	height: 32px;
	border: 1px solid;
	margin: 0 auto;
	margin-bottom: 0.5rem;
	/* TEMP */
	border-color: gray;
}

/* https://github.com/philipwalton/flexbugs/issues/108 */
.ribbonedit .outer
{
	background: var(--content-bg);
	border: 1px solid var(--tab-border);
	box-sizing: content-box;
	/* Calculated width when there is at least one entry */
	min-width: 226px;
	/* Try to make exactly high enough for 4 items */
	height: calc(128px + 2rem + 0.5rem);
	/* Make room for scroll bar */
	padding-right: 0.3rem;
	overflow-y: scroll;
}

.ribbonedit .canvas input[type=color]
{
	display: block;
	margin: 0 auto;
}

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

.ribbonedit .layers
{
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
}

.ribbonedit .layers > div
{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.25rem;
}

.ribbonedit .layers > div.selected
{
	/* TODO: Custom color */
	background: rgba(255, 255, 128, 0.5);
	animation-name: ribbon-move;
	animation-duration: 300ms;
	animation-fill-mode: both;
	animation-delay: 500ms;
}

@keyframes ribbon-move
{
	/* TODO: Custom color */
	0% { background: rgba(255, 255, 128, 0.5); }
	100% { background: rgba(255, 255, 128, 0); }
}

.ribbonedit .layers svg
{
	display: block;
	box-sizing: content-box;
	width: 64px;
	height: 32px;
	border: 1px solid;
	/* TEMP */
	background: #DDD;
	border-color: gray;
}

.ribbonedit .layers input[type=color]
{
	display: block;
	width: 28px;
	height: 28px;
	margin: 0;
	margin-left: 0.5rem;
}

.ribbonedit .layers .opbtn
{
	margin-left: 0.5rem;
}

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

.ribbonedit .canvas .status
{
	justify-content: center;
	margin-top: 0;
	margin-bottom: 1.5rem;
}

.ribbonedit .canvas button,
.ribbonedit .canvas .button
{
	display: block;
	margin: 1.3rem auto;
}

.ribbonedit .canvas button:first-child,
.ribbonedit .canvas .button:first-child
{
	margin-bottom: 0.5rem;
}

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

.ribbonedit .patterns
{
	margin-top: 1.5rem;
}

.ribbonedit .tabbar
{
	justify-content: flex-start;
}

.ribbonedit .tabbar p
{
	align-self: center;
	margin: 0;
	margin-left: 2rem;
	margin-right: 0.5rem;
}

.ribbonedit .tabbar input
{
	align-self: center;
	height: 1.5rem;
	margin: 2px;
}

.ribbonedit .tabcontent
{
	position: relative;
	margin: 0;
	padding: 0;
	/* Fudge factor to make it look right */
	height: calc(0.5rem + 32px + 0.5rem + 32px + 0.5rem + 32px + 0.5rem + 8px);
	overflow-y: scroll;
}

.ribbonedit .ribbons-bars,
.ribbonedit .ribbons-centers
{
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	flex-wrap: wrap;
	padding: 0.25rem;
}

.ribbonedit .ribbons-bars > *,
.ribbonedit .ribbons-centers > *
{
	margin: 0.25rem;
}

.ribbonedit .tabcontent a
{
	cursor: pointer;
}

.ribbonedit .tabcontent svg
{
	display: block;
	box-sizing: content-box;
	width: 64px;
	height: 32px;
	border: 1px solid;
	/* TEMP */
	fill: black;
	background: #DDD;
	border-color: gray;
}

.ribbonedit .tabcontent a:hover svg
{
	/* TEMP */
	border-color: black;
}

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

.ribbonedit .random p
{
	margin-top: 1.5rem;
	margin-bottom: 0.3rem;
}

.ribbonedit .random .border
{
	border: 1px solid;
	border-top-right-radius: 0.5rem;
	border-bottom-left-radius: 0.5rem;
	border-bottom-right-radius: 0.5rem;
	padding: 0 1rem;
	border-color: var(--tab-border);
	background: var(--content-bg);
}

.ribbonedit .random .border > button
{
	display: block;
	margin: 1rem 0;
}

.ribbonedit .random .border > label
{
	display: block;
	margin: 1rem 0;
}

/* =============================================== */
/* RichText editor */
/* =============================================== */

form.working .richtext .textarea
{
	pointer-events: none;
}

form.working .richtext .textarea:after
{
	content: '\f110';
	display: inline-block;
	position: absolute;
	left: calc(50% - 3vw);
	top: calc(50% - 3vw);
	font-family: 'icomoon';
	font-size: 6vw;
	animation: 1s steps(8) 0s normal none infinite running fa-spin;
	pointer-events: none;
	opacity: 0.5;
}

/* ----------------------------------------------- */
/* Override Quill's toolbar styles. */

.richtext .toolbar
{
	display: flex;
	font: inherit;
	padding: 0.2rem 0;
	border: 0;
}

.richtext.compact .toolbar
{
	padding: 0;
	padding-bottom: 1px;
}

.richtext.no-js .toolbar
{
	display: none;
}

.richtext .toolbar > span
{
	display: flex;
	border-left: 1px solid;
	padding: 0 0.2rem;
	border-color: #DDD; /* TODO */
}

.richtext .toolbar > span:first-child
{
	border-left-width: 0;
}

.richtext .toolbar button
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: 1.5rem;
	min-width: 1.5rem;
	line-height: 1.5rem;
	margin: 0;
	padding: 0.2rem 0.5rem;
	border: 0;
	text-align: center;
	float: none;
}

.richtext .toolbar button [data-icon]
{
	margin: 0;
	padding: 0;
}

.richtext.compact .toolbar button
{
	height: 1.3rem;
	min-width: 1.3rem;
	line-height: 1.3rem;
}

.richtext.compact .toolbar button [data-icon]
{
	line-height: 0.9rem;
}

.richtext .toolbar button.ql-active
{
	color: var(--toolbarbtn-active);
}

.richtext .toolbar button.active
{
	background: var(--toolbarbtn-activebg);
}

.richtext .toolbar .popupmenu a
{
	cursor: pointer;
}

.richtext .toolbar .popupmenu li a
{
	padding: 4px 1rem;
}

.richtext .toolbar .popupmenu li [data-icon]:before
{
	display: inline-block;
	min-width: 1.5rem;
	text-align: center;
}

.richtext .toolbar .menu-emoticon
{
	font-size: 1.5rem;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.richtext .toolbar .menu-emoticon a
{
	padding: 0.25rem;
}

/* ----------------------------------------------- */
/* Override Quill's container styles. */

/* This is the wrapper */
.richtext .textarea
{
	position: relative;
}

.richtext .ql-container
{
	position: absolute;
	box-sizing: border-box;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font: inherit;
	font-size: var(--content-fontsize);
}

.richtext textarea
{
	-moz-tab-size: 4;
	tab-size: 4;
}

/* Override certain styles added by Quill */
.richtext .ql-editor
{
	margin: 0;
	padding: 0.2em 0.4em;
	line-height: inherit;
	/* Needed for focus-within */
	border-radius: 2px;
}

.richtext .ql-editor ul,
.richtext .ql-editor ol
{
	padding-left: 0;
}

.richtext .ql-container .ql-editor li { padding-left: 1.5em; }
.richtext .ql-editor li.ql-indent-1 { padding-left: calc(1.5em * 2); }
.richtext .ql-editor li.ql-indent-2 { padding-left: calc(1.5em * 3); }
.richtext .ql-editor li.ql-indent-3 { padding-left: calc(1.5em * 4); }
.richtext .ql-editor li.ql-indent-4 { padding-left: calc(1.5em * 5); }
.richtext .ql-editor li.ql-indent-5 { padding-left: calc(1.5em * 6); }
.richtext .ql-editor li.ql-indent-6 { padding-left: calc(1.5em * 7); }
.richtext .ql-editor li.ql-indent-7 { padding-left: calc(1.5em * 8); }
.richtext .ql-editor li.ql-indent-8 { padding-left: calc(1.5em * 9); }
.richtext .ql-editor li.ql-indent-9 { padding-left: calc(1.5em * 10); }

.richtext .ql-editor p.ql-indent-1 { padding-left: calc(1.5em * 1); }
.richtext .ql-editor p.ql-indent-2 { padding-left: calc(1.5em * 2); }
.richtext .ql-editor p.ql-indent-3 { padding-left: calc(1.5em * 3); }
.richtext .ql-editor p.ql-indent-4 { padding-left: calc(1.5em * 4); }
.richtext .ql-editor p.ql-indent-5 { padding-left: calc(1.5em * 5); }
.richtext .ql-editor p.ql-indent-6 { padding-left: calc(1.5em * 6); }
.richtext .ql-editor p.ql-indent-7 { padding-left: calc(1.5em * 7); }
.richtext .ql-editor p.ql-indent-8 { padding-left: calc(1.5em * 8); }
.richtext .ql-editor p.ql-indent-9 { padding-left: calc(1.5em * 9); }

.richtext .ql-editor ul > li:before
{
	font-size: 1.3em;
	line-height: 0;
}

.richtext .ql-editor code,
.richtext .ql-editor pre,
.richtext .ql-editor pre.ql-syntax
{
	font: inherit;
	line-height: 1.3;
	font-family: var(--mono-font);
	font-size: var(--mono-fontsize);
	color: var(--code-color);
	background: var(--code-bg);
}

.richtext .ql-editor pre,
.richtext .ql-editor pre.ql-syntax
{
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 7px;
}

.richtext .ql-editor blockquote
{
	margin-top: 0;
	margin-bottom: 0;
	padding-left: 0.75rem;
	border-left: 4px solid;
	color: var(--quote-color);
	background: var(--quote-bg);
	border-color: var(--quote-border);
}

.richtext .ql-editor blockquote[data-source]:not([data-source=""]):before
{
	content: attr(data-source);
	display: block;
	font-size: 0.75em;
	pointer-events: none;
	border-top: 1px dotted;
	margin-left: -0.75rem;
	padding-left: 1rem;
	padding-bottom: 4px;
	color: var(--quote-source);
	border-color: var(--quote-border);
}

.richtext .ql-editor blockquote + blockquote[data-source]:before,
.richtext .ql-editor blockquote + blockquote[data-source]:not([data-source=""]):before
{
	content: none;
}

.richtext .ql-editor .spoiler
{
	color: var(--spoiler-edit);
	background: var(--spoiler-bg);
}

/* Failsafe so images don't turn invisible */
.richtext .ql-editor img,
.richtext .ql-editor span.video
{
	min-width: 8px;
	min-height: 8px;
}

.richtext .ql-editor img
{
	vertical-align: bottom;
}

.richtext .ql-editor img.error
{
	width: 2rem;
	height: 2rem;
	background-image: url('../images/noimg.png');
	background-size: contain;
}

.richtext .ql-editor span.video
{
	display: inline-block;
	position: relative;
	width: -webkit-min-content;
	width: -moz-min-content;
	width: min-content;
	cursor: default;
}

.richtext .ql-editor span.video > *
{
	pointer-events: none;
}

.richtext .ql-editor span.video:focus:after,
.richtext .ql-editor span.video:focus-within:after
{
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: Highlight;
	opacity: 0.5;
}

/* ----------------------------------------------- */
/* Handle toggling between the two views. */

.richtext .textarea > div
{
	display: none;
}

.richtext.richview .textarea textarea
{
	opacity: 0;
	visibility: hidden;
}

.richtext.richview .textarea .ql-container
{
	display: block;
}

.richtext .toolbar button
{
	opacity: 0.4;
	pointer-events: none;
}

.richtext .toolbar button.view,
.richtext.richview .toolbar button
{
	opacity: 1;
	pointer-events: auto;
}

/* ----------------------------------------------- */
/* Custom styles for the link/image dialogs. */

dialog.richedit div.fieldslist,
body.guild-member dialog.richedit div.fieldslist
{
	margin-left: 0;
	width: auto;
}

dialog.richedit div.fieldslist > div > *:first-child
{
	width: 7rem;
}

dialog.richedit div.fieldslist .button
{
	height: 100%;
	margin-left: 5px;
	padding: 0.2em 0.4em;
	line-height: 1.1;
	vertical-align: middle;
}

dialog.richedit div.fieldslist .button:before
{
	line-height: 1.1;
}

dialog.richedit .error
{
	margin-top: calc(0.5rem - 5px);
	text-align: center;
	color: var(--formerror-color);
}

dialog.richedit .submitdiv button.del
{
	font-weight: normal;
}

#pnlEditLink div.fieldslist > div:nth-child(2)
{
	height: 100%;
}

#pnlEditLink div.fieldslist > div:nth-child(2) > span
{
	vertical-align: middle;
	height: 100%;
}

#pnlEditLink div.fieldslist > div:nth-child(2) > span > *
{
	vertical-align: middle;
}

#pnlEditLink div.fieldslist > div:nth-child(2) span .button
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

#pnlEditLink div.fieldslist input
{
	min-width: 14rem;
}

#pnlEditLink div.fieldslist input:disabled
{
	/* HACK: Make it look like plain text */
	padding: 0;
	color: inherit;
	background: transparent;
	border-color: transparent;
}

#pnlEditImage .filediv
{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	margin-bottom: 5px;
	padding: 4px;
	width: 20rem;
	height: 12rem;
	/*border: 1px dashed gray;*/
	background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='10' ry='10' stroke='%230000007D' stroke-width='4' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
	border-radius: 5px;
	cursor: pointer;
	/* TEMP */
	background-color: #EEE;
	color: #555;
}

#pnlEditImage .filediv input
{
	/* Hide by default; we're just using it for the click handler */
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	left: 0;
	bottom: 0;
}

#pnlEditImage .filediv p
{
	margin: 0 1rem;
	text-align: center;
}

#pnlEditImage .filediv img
{
	max-width: 100%;
	max-height: 100%;
}

#pnlEditImage .filediv.loading:after
{
	content: '\f110';
	display: inline-block;
	position: absolute;
	left: calc(50% - 2vw);
	top: calc(50% - 2vw);
	font-family: 'icomoon';
	font-size: 4vw;
	animation: 1s steps(8) 0s normal none infinite running fa-spin;
	pointer-events: none;
	opacity: 0.5;
}

#pnlEditVideo
{
	width: -webkit-min-content;
	width: -moz-min-content;
	width: min-content;
}

/* ----------------------------------------------- */
/* Styles used for display (not in the editor). */

.ql-spoiler
{
	/* TODO */
}

.ql-center
{
	margin-left: auto;
	margin-right: auto;
}

.ql-compressed-top
{
	margin-top: 0;
}

.ql-compressed-bottom
{
	margin-bottom: 0;
}

.ql-compressed
{
	margin-top: 0;
	margin-bottom: 0;
}

.ql-indent-1
{
	padding-left: calc(1.5em * 1);
}

.ql-indent-2
{
	padding-left: calc(1.5em * 2);
}

.ql-indent-3
{
	padding-left: calc(1.5em * 3);
}

.ql-indent-4
{
	padding-left: calc(1.5em * 4);
}

.ql-indent-5
{
	padding-left: calc(1.5em * 5);
}

.ql-indent-6
{
	padding-left: calc(1.5em * 6);
}

.ql-indent-7
{
	padding-left: calc(1.5em * 7);
}

.ql-indent-8
{
	padding-left: calc(1.5em * 8);
}

.ql-indent-9
{
	padding-left: calc(1.5em * 9);
}

.ql-image
{
	/* TODO */
}

.ql-video
{
	/* TODO */
}

.ql-code
{
	/* TODO */
}

.ql-quote
{
	/* TODO */
}

.ql-quote .ql-source
{
	/* TODO */
}

/* =============================================== */
/* Shared headers */
/* =============================================== */

h3
{
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	margin-top: 0.5rem;
	margin-bottom: 0.3rem;
	font-size: 1.1rem;
	font-weight: bold;
}

h3:first-child
{
	margin-top: 0;
}

h3.divider
{
	margin-top: 1.5rem;
}

h3 [data-icon]
{
	width: 1.3rem;
	text-align: center;
	padding-right: 0.3rem;
}

h3 [data-expand]
{
	margin-right: 0.5rem;
}

/* ----------------------------------------------- */
/* A header variant that has an icon/image to the left of the text. */

h3.gamename
{
	display: flex;
	column-gap: 0.5rem;
	align-items: center;
	margin-top: 1rem;
	margin-bottom: 1rem;
	font-size: 1.25rem;
	padding: 0.1rem 0.3rem;
	min-height: 30px;
	border-radius: 0.5rem;
	color: var(--collapse-color);
	background: var(--collapse-bg);
	border-color: var(--collapse-border);
}

h3.gamename:first-child
{
	margin-top: 0;
}

h3.gamename img
{
	display: block;
	max-height: 30px;
	max-width: 60px;
}

h3.gamename a
{
	text-decoration: none;
}

h3.gamename [data-expand]
{
	margin: 0.1rem 0;
}

h3.gamename [data-expand].no-js
{
	margin: 0;
	margin-right: -0.5rem;
	padding: 0 0.1rem;
}

h3.gamename a,
h3.gamename a:link,
h3.gamename a:visited
{
	color: var(--collapse-color);
}

h3.gamename .title
{
	flex: 1;
}

h3.gamename .handle
{
	font-weight: normal;
	opacity: 0.8;
}

h3.gamename .opbtn
{
	font-size: 1rem;
	/* Note: Animation of .saving wobbles when button is not square */
	width: 3rem;
	background: var(--button-bg);
	border-color: var(--button-border);
}

h3.gamename a.opbtn,
h3.gamename a.opbtn:link,
h3.gamename a.opbtn:visited
{
	color: var(--button-color);
}

h3.gamename a[data-expand],
h3.gamename a[data-expand]:link,
h3.gamename a[data-expand]:visited
{
	color: var(--expand-color);
}

h3.gamename .opbtn:hover
{
	color: var(--opbtn-hover);
	background: var(--opbtn-hoverbg);
	border-color: var(--opbtn-hoverborder);
}

h3.gamename .opbtn span:last-child
{
	color: var(--disabled-color);
}

h3.gamename a.opbtn.selected,
h3.gamename a.opbtn.selected:link,
h3.gamename a.opbtn.selected:visited
{
	/* Have to re-override our changes above */
	color: var(--opbtn-selected);
	background: var(--opbtn-selectedbg);
	border-color: var(--opbtn-selectedborder);
}

h3.gamename .opbtn.selected span:last-child
{
	color: var(--button-checked);
}

h3.gamename .opbtn[data-tooltip]:before
{
	/* Position balloon toward the left over button */
	left: auto;
	right: 5%;
}

h3.gamename .opbtn.saving,
h3.gamename .opbtn.saving span,
h3.gamename .opbtn.selected.saving,
h3.gamename .opbtn.selected.saving span
{
	color: transparent;
}

/* =============================================== */
/* Page headers */
/* =============================================== */

#site-content > div
{
	max-width: var(--main-width);
	margin: 0 auto;
	background: var(--content-bg);
}

#site-content > div > header
{
	padding: 1rem;
	color: var(--pageheader-color);
	background: var(--pageheader-bg);
}

#site-content > div > header h2
{
	display: flex;
	align-items: center;
	row-gap: 0.5rem;
	font-size: 1.5rem;
	font-weight: bold;
	margin: 0;
	padding: 0;
}

#site-content > div > header .editbtn
{
	margin-left: 0.5rem;
	font-family: 'icomoon';
	font-size: 1.7rem;
	font-weight: normal;
	text-decoration: none;
	-webkit-user-select: none;
	user-select: none;
	color: var(--editbtn-color);
	background: var(--editbtn-bg);
	border-radius: 4px;
	padding-top: 1px;
	padding-left: 2px;
	cursor: pointer;
}

#site-content > div > header .editbtn:first-of-type
{
	margin-left: auto;
}

#site-content > div > header .editbtn.selected
{
	color: var(--editbtn-selected);
	background: var(--editbtn-selectedbg);
}

#site-content > div > header .editbtn[data-tooltip]:before
{
	/* Position balloon to left of anchor */
	left: auto;
	right: 0;
}

#site-content > div > header .noticeicon
{
	position: absolute;
	top: 0.1rem;
	left: -1.5rem;
	font-size: 1.5rem;
	font-family: 'icomoon';
	text-decoration: none;
	-webkit-user-select: none;
	user-select: none;
	cursor: help;
	color: var(--noticeicon-color);
}

/* =============================================== */
/* Panels */
/* =============================================== */

.panel
{
	border: 1px solid;
	border-radius: 8px;
	color: var(--panel-color);
	background: var(--panel-bg);
	border-color: var(--panel-border);
	box-shadow: 0px 0px 2px var(--panel-shadow);
}

.panel > header
{
	padding: 0.5rem 0;
	padding-left: 1rem;
	font-weight: bold;
	border-bottom: 1px solid;
	background: var(--pageheader-bg);
	border-color: var(--pageheader-border);
}

.panel > header:first-child
{
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}

/* =============================================== */
/* List tables */
/* =============================================== */

.listtable
{
	min-width: 80%;
	max-width: calc(100vw - 1rem);
	margin: 0 auto;
	/* border-radius doesn't mix with border-collapse */
	border-collapse: separate;
	border-spacing: 0;
}

/* ----------------------------------------------- */
/* Affects both header and footer. */

.listtable th
{
	font-weight: bold;
	color: var(--th-color);
	background: var(--th-bg);
	border-color: var(--th-border);
}

.listtable th a,
.listtable th a:link,
.listtable th a:visited,
.listtable th a:hover
{
	text-decoration: none;
	color: inherit;
}

/* ----------------------------------------------- */
/* Header row. */

.listtable thead th
{
	border-top: 1px solid;
	border-bottom: 1px solid;
	white-space: nowrap;
	border-color: var(--th-border);
}

.listtable thead th:first-child
{
	padding-left: 0.3rem;
	border-left: 1px solid;
	border-top-left-radius: 0.5rem;
	border-color: var(--th-border);
}

.listtable thead th:last-child
{
	padding-right: 0.3rem;
	border-right: 1px solid;
	border-top-right-radius: 0.5rem;
	border-color: var(--th-border);
}

/* ----------------------------------------------- */
/* Sortable columns. */

.listtable thead th > a,
.listtable thead th > span
{
	display: block;
	margin: 0;
	padding: 0.3rem;
}

.listtable thead th a:hover
{
	color: var(--th-hover);
	background: var(--th-hoverbg);
}

.listtable thead [data-tooltip]:before
{
	/* Position balloon left-centered over column to prevent going off right of window and causing scrollbar */
	left: auto;
	right: 50%;
	transform: translateX(35%);
}

.listtable th.sortdesc a:before,
.listtable th.sortasc a:before
{
	font-family: 'icomoon';
	font-weight: normal;
	padding-right: 0.2rem;
	line-height: 0;
}

.listtable th.sortdesc a:before
{
	content: '\f176';
}

.listtable th.sortasc a:before
{
	content: '\f175';
}

.listtable th.sortdesc a:after,
.listtable th.sortasc a:after
{
	max-width: 15rem;
}

/* ----------------------------------------------- */
/* Buttons in the list table header. */

.listtable th .btn,
.listtable th a.btn
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid;
	border-radius: 5px;
	padding: 0.2rem 0.5rem;
	font-size: 0.8rem;
	font-weight: normal;
	color: var(--thbtn-color);
	background: var(--thbtn-bg);
	border-color: var(--thbtn-border);
}

.listtable th a.btn:link,
.listtable th a.btn:visited
{
	color: var(--thbtn-color);
}

.listtable th a.btn:hover
{
	color: var(--thbtn-hover);
	background: var(--thbtn-hoverbg);
}

.listtable th .btn:before
{
	content: '\ea11';
	position: relative;
	font-family: 'icomoon';
	font-size: 1rem;
	padding-right: 0.2rem;
	line-height: 0;
	color: var(--disabled-color);
}

.listtable th .btn.selected:before
{
	content: '\ea10';
	color: var(--thbtn-toggle);
}

/* ----------------------------------------------- */
/* Main content of the table: the rows. */

.listtable tbody td
{
	padding-left: 0.3rem;
	padding-right: 0.3rem;
	padding-top: 2px;
	padding-bottom: 2px;
	vertical-align: middle;
}

.listtable tbody td *
{
	vertical-align: middle;
}

.listtable tbody td:first-child
{
	border-left: 1px solid;
	border-color: var(--td-border);
}

.listtable tbody td:last-child
{
	border-right: 1px solid;
	border-color: var(--td-border);
}

.listtable tbody tr:nth-child(even)
{
	background: var(--listtable-even);
}

.listtable tbody tr:nth-child(odd)
{
	background: var(--listtable-odd);
}

.listtable tbody tr.new td
{
	transition: background 500ms 100ms;
	background: var(--listtable-newbg);
}

/* ----------------------------------------------- */
/* No characters. */

.listtable tbody tr td.none
{
	padding: 2rem;
}

/* ----------------------------------------------- */
/* Inactive characters. */

.listtable tbody tr.inactive td
{
	color: var(--listtable-inactive);
}

.listtable tbody tr.inactive td
{
	font-style: italic;
}

.listtable tbody tr.inactive td img
{
	opacity: 0.5;
}

.listtable tbody tr.norole td span
{
	color: var(--listtable-inactive);
}

.listtable tbody tr.inactive td .opbtn
{
	color: var(--opbtn-inactive);
}

.listtable tbody tr.inactive td .opbtn.selected
{
	/* Have to re-override our changes above */
	color: var(--opbtn-selected);
	background: var(--opbtn-selectedbg);
	border-color: var(--opbtn-selectedborder);
}

.listtable tbody tr.inactive td .opbtn.saving
{
	/* Have to re-override our changes above */
	color: transparent;
}

/* Use not:class to avoid changing opbtn */
.listtable tbody tr.inactive a:not([class]),
.listtable tbody tr.inactive a:not([class]):link,
.listtable tbody tr.inactive a:not([class]):visited
{
	color: var(--listtable-inactive);
}

/* Use not:class to avoid changing opbtn */
.listtable tbody tr.inactive a:not([class]):hover
{
	color: var(--hover-color);
}

/* ----------------------------------------------- */
/* Placeholder characters. */

.listtable tbody i.placeholder
{
	color: var(--listtable-inactive);
}

/* ----------------------------------------------- */
/* Footer row. */

.listtable tfoot th
{
	border-top: 1px solid;
	border-bottom: 1px solid;
	white-space: nowrap;
	border-color: var(--th-border);
}

.listtable tfoot th:first-child
{
	border-left: 1px solid;
	border-color: var(--th-border);
}

.listtable tfoot th:last-child
{
	border-right: 1px solid;
	border-color: var(--th-border);
}

/* ----------------------------------------------- */
/* The list of pages in the footer. */

.listtable .pages
{
	list-style: none;
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 0;
	min-height: 0.5em;
}

.listtable .pages li
{
	flex-shrink: 1;
	list-style: none;
	/* Must match page span padding; the two overlap */
	margin: 0.2rem 0;
	padding: 0;
}

.listtable .pages li:before
{
	content: '';
	margin: 0 0.2rem;
	border-left: 1px solid;
	border-color: var(--pages-border);
}

.listtable .pages li:first-child:before
{
	display: none;
}

.listtable .pages li a,
.listtable .pages li span
{
	padding: 0.2rem 0.7rem;
	white-space: nowrap;
}

.listtable .pages li span
{
	cursor: default;
	color: var(--pages-border);
}

.listtable .pages li a:hover
{
	color: var(--pages-hover);
	background: var(--pages-hoverbg);
}

.listtable .pages li.current span
{
	color: var(--pages-current);
	background: var(--pages-currentbg);
}

/* =============================================== */
/* Award lists */
/* =============================================== */

ul.awardlist,
ul.awardlist li
{
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.awardlist
{
	margin-left: 1rem;
}

ul.awardlist li
{
	margin-bottom: 1rem;
}

ul.awardlist span
{
	display: flex;
	align-items: center;
	margin-bottom: 0.2rem;
	min-height: 24px;
}

ul.awardlist li span > a
{
	display: block;
}

ul.awardlist li span > a:first-child
{
	width: 48px;
}

ul.awardlist li span > a:last-child
{
	margin-left: 0.5rem;
	font-weight: bold;
}

ul.awardlist li span > a img
{
	display: block;
	border-radius: 2px;
	max-width: 48px;
	max-height: 24px;
	margin: 0 auto;
}

ul.awardlist li span > .noimg:after
{
	content: '';
	display: block;
	width: 48px;
	height: 24px;
	margin: 0 auto;
	border: 1px dotted;
	border-radius: 2px;
	color: var(--noimg-color);
	background: var(--noimg-bg);
	border-color: var(--noimg-border);
}

ul.awardlist p
{
	margin: 0.2rem 0;
	margin-left: calc(48px + 0.5rem);
}

ul.awardlist p.dates
{
	display: flex;
	align-items: center;
	column-gap: 4px;
	margin-top: 0;
	margin-bottom: 0;
	line-height: 1.3rem;
	font-size: 0.9rem;
}

ul.awardlist p.reason
{
	margin-top: -5px;
	margin-bottom: 5px;
	margin-left: 53px;
	padding-left: 2rem;
	font-size: 0.9rem;
}

ul.awardlist p.dates img
{
	width: 1.5rem;
	height: 1.5rem;
	/* Specifying width/height on the container causes child to not maintain aspect ratio */
	object-fit: contain;
}

ul.awardlist li span > input
{
	margin-right: 0.5rem;
	width: 1.15rem;
	height: 1.15rem;
}

.awardsedit .submitdiv
{
	margin-left: 2.65rem;
}

/* =============================================== */
/* Generic content pages */
/* =============================================== */

#site-content > #page-content
{
	max-width: 70rem;
	margin: 0 auto;
	padding: 1rem 3rem;
	font-size: var(--content-fontsize);
	text-align: justify;
}

#site-content > #page-content > h3
{
	font-size: 1.2rem;
}

#site-content > #page-content ul
{
	padding-left: 2rem;
}

#site-content > #page-content li
{
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

/* =============================================== */
/* Member / Character */
/* =============================================== */

#guild-member .center,
#guild-character .center
{
	padding: 1rem;
}

#site-content > #guild-member > header h2,
#site-content > #guild-character > header h2
{
	margin-left: 13rem;
}

#guild-member .sidebar .portrait,
#guild-character .sidebar .portrait
{
	margin-top: -3rem;
	margin-left: auto;
	margin-right: auto;
}

#guild-member .center > .global-notice,
#guild-member .center > .global-error,
#guild-character .center > .global-notice,
#guild-character .center > .global-error
{
	align-self: flex-start;
	flex-shrink: 0;
	flex-grow: 0;
	width: 100%;
	max-width: 100%;
}

/* ----------------------------------------------- */
/* Left sidebar containing portrait and buttons. */

#guild-member .sidebar,
#guild-character .sidebar
{
	position: relative;
	flex-shrink: 0;
	padding: 1rem;
	padding-top: 0;
	color: var(--sidebar-color);
	background: var(--sidebar-bg);
	border-bottom-right-radius: 50% 1rem;
}

/*#guild-member .sidebar:after,
#guild-character .sidebar:after
{
	content: '';
	position: absolute;
	border-left: 1rem solid transparent;
	border-bottom: 1rem solid var(--content-bg);
	bottom: 0;
	right: 0;
}*/

#guild-member .sidebar .mobile,
#guild-member .sidebar .icons li.mobile,
#guild-character .sidebar .mobile
{
	/* Mobile only */
	display: none;
}

#guild-member .sidebar .portrait,
#guild-character .sidebar .portrait
{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 10rem;
	height: 10rem;
	margin-left: 1rem;
	margin-right: 1rem;
}

#guild-member .sidebar .portrait img,
#guild-character .sidebar .portrait img
{
	display: block;
	width: auto;
	height: 10rem;
	max-width: 10rem;
	border-radius: 50%;
	object-fit: cover;
	object-position: center center;
}

#guild-member .sidebar > p,
#guild-character .sidebar > p
{
	margin-top: 0.3rem;
	margin-bottom: 0.5rem;
	font-size: 0.9rem;
	text-align: center;
}

#guild-member .sidebar ul,
#guild-character .sidebar ul
{
	margin: 0 auto;
	padding: 0;
}

#guild-member .sidebar li,
#guild-character .sidebar li
{
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The list of wide buttons for changing tabs */
#guild-member .sidebar .buttons,
#guild-character .sidebar .buttons
{
	margin-top: 0.7rem;
}

#guild-member .sidebar .buttons li,
#guild-character .sidebar .buttons li
{
	margin-top: 0.4rem;
}

#guild-member .sidebar .buttons .button,
#guild-character .sidebar .buttons .button
{
	display: flex;
	align-items: center;
	text-align: left;
	margin-left: -1rem;
	padding-left: 2rem;
	padding-top: 0.4rem;
	padding-bottom: 0.4rem;
	border-top-left-radius: 0;
	border-top-right-radius: 12px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 12px;
	border-left-width: 0;
}

#guild-member .sidebar .buttons [data-icon],
#guild-character .sidebar .buttons [data-icon]
{
	display: inline-block;
	width: 1.3rem;
	text-align: center;
	padding-right: 0.3rem;
	color: var(--button-icon);
}

#guild-member .sidebar .buttons a:hover [data-icon],
#guild-character .sidebar .buttons a:hover [data-icon]
{
	color: var(--button-hover);
}

#guild-member section,
#guild-character section
{
	display: flex;
	margin-right: 1rem;
}

#guild-member .center,
#guild-character .center
{
	flex: 1;
}

/* ----------------------------------------------- */
/* These are lines that may have icons aligned to the left or to the right. */

#guild-member .statline,
#guild-character .statline
{
	/* No icon, so just make the indent match */
	margin-left: 0.7rem;
}

#guild-member .statline.centered,
#guild-character .statline.centered
{
	display: flex;
	align-items: center;
}

#guild-member .statline img,
#guild-character .statline img,
#guild-member .statline .img,
#guild-character .statline .img
{
	display: block;
	margin-right: 0.5rem;
	max-height: 60px;
	max-width: 90px;
}

#guild-member .statline .img,
#guild-character .statline .img
{
	border: 1px dotted;
	border-color: var(--gray);
}

#guild-member .statline [data-tooltip]:before,
#guild-character .statline [data-tooltip]:before
{
	/* Move balloon above and mostly to the left of anchor */
	left: auto;
	right: 0;
	transform: translateX(22%);
}

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

body.guild-member .fieldslist .verified
{
	color: var(--green);
}

/* ----------------------------------------------- */
/* Character grids. */

/* Wrapper is used to link "more" buttons with the grid itself */
#guild-member .wrapper,
#guild-character .wrapper
{
	margin-top: 0.75rem;
}

#guild-member .showcase,
#guild-member .characters,
#guild-character .characters
{
	margin: 0;
	padding: 0;
	/* Older browsers */
	display: flex;
	flex-wrap: wrap;
	/* Newer browsers */
	display: grid;
	grid-template-columns: repeat(auto-fill, 7rem);
	column-gap: 0.7rem;
	row-gap: 0.7rem;
}

#guild-member .wrapper p,
#guild-character .wrapper p
{
	margin-left: 1rem;
}

#guild-member .wrapper .more,
#guild-character .wrapper .more
{
	display: flex;
	margin: 0;
	padding: 0;
	margin-top: 1rem;
}

#guild-member .wrapper .more li,
#guild-character .wrapper .more li
{
	list-style: none;
	margin: 0;
	padding: 0;
	margin-left: 0.5rem;
}

#guild-member .wrapper .more li:first-child,
#guild-character .wrapper .more li:first-child
{
	margin-left: 0;
}

#guild-member .wrapper .more .button,
#guild-character .wrapper .more .button,
#guild-member .bio .button,
#guild-character .bio .button
{
	font-size: 0.9rem;
	padding: 0.2em 0.8em;
}

#guild-member .bio .button,
#guild-character .bio .button
{
	margin-top: 1rem;
}

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

#guild-member .character,
#guild-character .character,
#guild-game .confirm .character
{
	list-style: none;
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	width: 7rem;
	padding: 0.3rem 0.5rem;
	line-height: 1.2;
	border: 1px solid;
	border-radius: 5px;
	box-shadow: 0px 0px 2px var(--tile-shadow);
	color: var(--tile-color);
	background: var(--tile-bg);
	border-color: var(--tile-border);
	/* TEST */
	/*overflow-wrap: break-word;*/
	word-break: break-word;
}

#guild-member .character a,
#guild-member .character a:link,
#guild-character .character a,
#guild-character .character a:link,
#guild-game .confirm .character a,
#guild-game .confirm .character a:link
{
	text-decoration: none;
	color: var(--tile-link);
}

#guild-member .character a:visited,
#guild-character .character a:visited,
#guild-game .confirm .character a:visited
{
	color: var(--tile-visited);
}

#guild-member .character:hover,
#guild-character .character:hover,
#guild-game .confirm .character:hover
{
	background: var(--tile-hoverbg);
	border-color: var(--tile-hoverborder);
}

#guild-member .character a:hover,
#guild-character .character a:hover,
#guild-game .confirm .character a:hover
{
	color: var(--tile-hover);
}

#guild-member .characters.edit .character:hover
{
	background: var(--tile-bg);
	border-color: var(--tile-border);
}

#guild-member .characters .character.new,
#guild-character .characters .character.current
{
	border-radius: 6px;
	overflow: hidden;
	/* TODO: Custom color */
	background-color: rgba(255, 255, 128, 0.3);
}

#guild-member .character .portrait,
#guild-character .character .portrait,
#guild-game .confirm .character .portrait
{
	display: block;
	position: relative;
	height: 5rem;
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: contain;
	margin: 0 0.5rem;
}

#guild-member .character img.portrait,
#guild-character .character img.portrait,
#guild-game .confirm .character img.portrait
{
	display: block;
	position: relative;
	width: 100%;
	height: auto;
	max-height: 5rem;
	object-fit: contain;
}

/* The level badge */
#guild-member .character .portrait span,
#guild-character .character .portrait span
{
	position: absolute;
	right: 0;
	bottom: 0;
	border: 1px solid;
	border-radius: 50%;
	min-width: 1.3rem;
	line-height: 1.3rem;
	text-align: center;
	font-size: 0.8rem;
	pointer-events: none;
	color: var(--member-badge-color);
	background: var(--member-badge-bg);
	border-color: var(--member-badge-border);
}

#guild-member .character .label,
#guild-member .character .handle,
#guild-member .character .server,
#guild-character .character .label,
#guild-game .confirm .character .label,
#guild-game .confirm .character .handle,
#guild-game .confirm .character .server
{
	/* Center text but force overflow to flow outside the container on both sides */
	display: flex;
	justify-content: center;
	text-align: center;
	margin-top: 0.2em;
	font-size: 0.9rem;
	line-height: 1;
}

#guild-member .character .handle,
#guild-member .character .server,
#guild-game .confirm .character .handle,
#guild-game .confirm .character .server
{
	font-size: 0.8rem;
	opacity: 0.8;
}

#guild-member .character.inactive .portrait,
#guild-character .character.inactive .portrait
{
	opacity: 0.5;
}

#guild-member .character span.inactive,
#guild-character .character span.inactive
{
	position: absolute;
	display: block;
	top: calc(0.3rem - 1px);
	right: calc(0.5rem - 1px);
	padding: 3px 5px;
	font-family: 'icomoon';
	font-size: 1.3rem;
	text-decoration: none;
	-webkit-user-select: none;
	user-select: none;
	cursor: help;
	color: var(--member-icon-color);
	text-shadow: 1px 1px 1px var(--member-icon-outline), -1px -1px 1px var(--member-icon-outline), -1px 1px 1px var(--member-icon-outline), 1px -1px 1px var(--member-icon-outline);
}

#guild-member .character span.inactive[data-tooltip]:before,
#guild-character .character span.inactive[data-tooltip]:before
{
	/* Position balloon centered over button but closer toward left */
	left: auto;
	right: -2rem;
}

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

#guild-member .characters .character.notinguild
{
	display: none;
}

#guild-member .characters.edit .character.notinguild,
#guild-member .characters.showall .character.notinguild
{
	display: block;
}

#guild-member .characters .character.notinguild
{
	background: var(--tile-inactivebg);
	border-color: var(--tile-inactivebg);
}

#guild-member .characters.edit .character.notinguild:hover
{
	background: var(--tile-inactivebg);
	border-color: var(--tile-inactivebg);
}

#guild-member .characters .character.notinguild .portrait,
#guild-member .characters .character.notinguild .label,
#guild-member .characters .character.notinguild .handle,
#guild-member .characters .character.notinguild .server
{
	opacity: 0.4;
}

#guild-member .character.notinguild[data-tooltip]:before
{
	/* Position balloon to the left so that it does not go off window */
	left: auto;
	right: -1rem;
}

/* ----------------------------------------------- */
/* Confirmation dialogs. */

body.guild-member dialog .portrait_sidebar,
body.guild-member .dialog .portrait_sidebar,
body.guild-game dialog .portrait_sidebar,
body.guild-game .dialog .portrait_sidebar
{
	display: flex;
	column-gap: 1rem;
	align-items: flex-start;
}

body.guild-member dialog .portrait_sidebar > p:first-child,
body.guild-member .dialog .portrait_sidebar > p:first-child,
body.guild-game dialog .portrait_sidebar > p:first-child,
body.guild-game .dialog .portrait_sidebar > p:first-child
{
	flex-shrink: 0;
	flex-grow: 0;
}

body.guild-member dialog .portrait_sidebar > p:last-child,
body.guild-member .dialog .portrait_sidebar > p:last-child,
body.guild-game dialog .portrait_sidebar > p:last-child,
body.guild-game .dialog .portrait_sidebar > p:last-child
{
	flex: 1;
	margin-top: 0.5rem;
}

/* ----------------------------------------------- */
/* Compact award list on the right side of the view. */

#guild-member .awards ul,
#guild-character .awards ul
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	grid-gap: 0.5rem;
	margin: 0;
	padding: 0;
}

#guild-member .awards p,
#guild-character .awards p
{
	margin: 0;
	padding: 0;
}

#guild-member .awards ul,
#guild-member .awards p
{
	margin-left: 0.5rem;
}

#guild-character .awards ul,
#guild-character .awards p
{
	margin-left: 0.7rem;
}

#guild-member .awards li,
#guild-character .awards li
{
	list-style: none;
	position: relative;
	margin: 0;
	padding: 0;
}

#guild-member .awards img,
#guild-character .awards img
{
	display: block;
	border-radius: 2px;
	/* Interestingly, if only size is specified with no image, the aspect ratio of the specified size is not honored */
	/* Aspect ratio is honored if src is specified, even if no size is */
	max-width: 40px;
	max-height: 20px;
}

#guild-member .awards a.noimg,
#guild-character .awards a.noimg
{
	display: block;
	width: 40px;
	height: 20px;
	border: 1px dotted;
	border-radius: 2px;
	color: var(--noimg-color);
	background: var(--noimg-bg);
	border-color: var(--noimg-border);
}

#guild-member .awards li .tooltip,
#guild-character .awards li .tooltip
{
	/* Position balloon above and to left of anchor */
	bottom: calc(100% + 6px);
	left: auto;
	right: 0;
}

#guild-member .awards li .tooltip p,
#guild-character .awards li .tooltip p
{
	margin: 0;
	padding: 0;
}

#guild-member .awards li:after,
#guild-character .awards li:after
{
	bottom: 100%;
}

/* This is the "see more" button */
#guild-member .awards ul .button,
#guild-character .awards ul .button
{
	font-size: 0.9rem;
	padding: 0em 0.8em;
	max-width: 40px;
	max-height: 20px;
	line-height: 20px;
}

/* This is the "full view" button */
#guild-member .awards p .button
{
	margin-top: 0.5rem;
	font-size: 0.9rem;
	padding: 0.2em 0.8em;
}

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

#guild-member .notes,
#guild-character .notes
{
	max-width: 50rem;
	max-height: 5rem;
	overflow-y: auto;
	margin: 0;
	padding: 0;
	margin-left: 0.5rem;
}

#guild-member .notes li,
#guild-character .notes li
{
	list-style: '-';
	margin: 0.2rem 0.5rem;
	padding: 0;
	padding-left: 0.2rem;
}

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

#guild-member .bio,
#guild-character .bio
{
	max-width: 40rem;
	margin-top: 1rem;
	margin-left: 1rem;
	font-size: var(--content-fontsize);
}

#guild-member form.bio,
#guild-character form.bio
{
	margin-top: 0;
	/* Try to make same width, taking textarea padding/borders into account */
	max-width: calc(40rem + 0.8em + 2px);
}

#guild-member .bio > p,
#guild-character .bio > p
{
	text-align: justify;
}

#guild-member .bio p:first-child,
#guild-character .bio p:first-child
{
	margin-top: 0;
}

/* ----------------------------------------------- */
/* Operations page for members/characters. */

#guild-member h3.ops,
#guild-character h3.ops
{
	display: flex;
	align-items: center;
	margin-bottom: 0;
	margin-top: 1.5rem;
	padding: 0.2rem;
	width: 90%;
	border: 1px solid;
	border-radius: 0.5rem;
	-webkit-user-select: none;
	user-select: none;
	cursor: pointer;
	color: var(--collapse-color);
	background: var(--collapse-bg);
	border-color: var(--collapse-border);
}

#guild-member h3.ops.expanded,
#guild-character h3.ops.expanded
{
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	color: var(--collapse-expandcolor);
	background: var(--collapse-expandbg);
}

#guild-member h3.ops [data-expand].no-js,
#guild-character h3.ops [data-expand].no-js
{
	/* HACK: Hide the button but keep the padding */
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 1px;
}

#guild-member h3.ops [data-expand],
#guild-character h3.ops [data-expand]
{
	/* HACK: Override default handling */
	pointer-events: none;
}

#guild-member h3.ops:hover [data-expand],
#guild-character h3.ops:hover [data-expand]
{
	color: var(--expand-hover);
	background: var(--expand-hoverbg);
}

#guild-member h3.ops:first-child,
#guild-character h3.ops:first-child
{
	margin-top: 0;
}

#guild-member h3.ops > span:last-child,
#guild-character h3.ops > span:last-child
{
	flex: 1;
}

#guild-member h3.ops:hover,
#guild-character h3.ops:hover
{
	color: var(--collapse-hover);
	background: var(--collapse-hoverbg);
}

#guild-member h3.ops.expanded:hover,
#guild-character h3.ops.expanded:hover
{
	color: var(--collapse-hover);
	background: var(--collapse-hoverbg);
}

#guild-member h3.ops span:after,
#guild-character h3.ops span:after
{
	/* Override for + button */
	color: var(--expand-color);
}

#guild-member .opsedit,
#guild-character .opsedit
{
	width: 90%;
	padding-top: 0.7rem;
	padding-left: 1.9rem;
	padding-right: 1rem;
	padding-bottom: 0.3rem;
	border: 1px solid;
	border-top: 0;
	border-radius: 0.5rem;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	color: var(--panel-color);
	background: var(--panel-bg);
	border-color: var(--panel-border);
}

#guild-member .opsedit textarea,
#guild-member .opsedit .listbox,
#guild-member .opsedit [data-searchbox] input,
#guild-member .opsedit [data-searchbox] .searchstatus,
#guild-character .opsedit textarea,
#guild-character .opsedit .listbox,
#guild-character .opsedit [data-searchbox] input,
#guild-character .opsedit [data-searchbox] .searchstatus
{
	color: var(--text-color);
	background: var(--white);
}

#guild-member .opsedit p,
#guild-character .opsedit p
{
	margin: 0.5rem 0;
	margin-bottom: 0.3rem;
	line-height: 1.3;
}

#guild-member .opsedit p:first-child,
#guild-character .opsedit p:first-child
{
	margin-top: 0;
	margin-bottom: 0.5rem;
}

#guild-member .opsedit p b,
#guild-character .opsedit p b
{
	padding-left: 0.2em;
	padding-right: 0.2em;
}

#guild-member .opsedit p b:first-child,
#guild-character .opsedit p b:first-child
{
	padding-left: 0;
}

#guild-member .opsedit p b img,
#guild-character .opsedit p b img
{
	vertical-align: text-bottom;
}

#guild-member .opsedit p.message,
#guild-character .opsedit p.message
{
	margin-top: 0.8rem;
	margin-bottom: 1rem;
}

#guild-member .listbox [data-icon],
#guild-character .listbox [data-icon]
{
	margin-right: 0.5rem;
	color: var(--note-text);
}

#guild-member .listbox input:checked + label [data-icon],
#guild-character .listbox input:checked + label [data-icon]
{
	color: var(--list-selected);
}

#guild-member .opsedit .paired,
#guild-character .opsedit .paired
{
	display: flex;
}

#guild-member .opsedit .paired > div,
#guild-character .opsedit .paired > div
{
	flex: 1;
	margin-left: 1rem;
	margin-right: 1rem;
}

#guild-member .opsedit .paired > div:first-child,
#guild-character .opsedit .paired > div:first-child
{
	margin-left: 0;
}

#guild-member .opsedit .paired > div:last-child,
#guild-character .opsedit .paired > div:last-child
{
	margin-right: 0;
}

#guild-member .opsedit .paired .listbox,
#guild-character .opsedit .paired .listbox
{
	max-width: 50ch;
}

#guild-member .opsedit .paired.infobox > div:first-child,
#guild-character .opsedit .paired.infobox > div:first-child
{
	flex-grow: 0;
}

#guild-member .opsedit .paired.infobox > div:last-child,
#guild-character .opsedit .paired.infobox > div:last-child
{
	align-self: flex-end;
}

#guild-member .opsedit .submitdiv,
#guild-character .opsedit .submitdiv
{
	margin-top: 0.75rem;
}

#guild-member .opsedit .submitdiv button,
#guild-character .opsedit .submitdiv button
{
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 8rem;
}

/* Used in the awards listbox */
#guild-member form .listbox.existing [data-icon],
#guild-character form .listbox.existing [data-icon]
{
	margin-right: 0.3rem;
	color: transparent;
}

#guild-member form .listbox.existing .awarded,
#guild-character form .listbox.existing .awarded
{
	color: var(--note-text);
}

#guild-member .listbox.existing input:checked + label [data-icon],
#guild-character .listbox.existing input:checked + label [data-icon]
{
	opacity: 0.4;
}

#guild-member .listbox.existing input:checked + label [data-icon].awarded,
#guild-character .listbox.existing input:checked + label [data-icon].awarded
{
	opacity: 1;
}

#guild-member .existing .awards,
#guild-character .existing .awards
{
	margin-left: 0;
}

#guild-character .opsedit .button.danger
{
	min-width: 9rem;
}

/* =============================================== */
/* Member */
/* =============================================== */

#guild-member .center
{
	display: flex;
}

#guild-member .content
{
	flex: 2;
}

#guild-member .awards
{
	flex: 1;
	margin-left: 1rem;
}

/* ----------------------------------------------- */
/* Icon buttons under the portrait. */

#guild-member .sidebar .icons
{
	display: flex;
	justify-content: space-between;
	margin-top: 0.6rem;
}

#guild-member .sidebar .icons li
{
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}

#guild-member .sidebar .icons a
{
	display: block;
	position: relative;
	font-size: 1.3rem;
	padding: 0.5rem;
	border: 1px solid;
	border-radius: 4px;
	cursor: pointer;
	font-family: 'icomoon';
	text-decoration: none;
	-webkit-user-select: none;
	user-select: none;
	color: var(--button-icon);
	background: var(--button-bg);
	border-color: var(--button-border);
}

#guild-member .sidebar .icons a:hover
{
	color: var(--button-hover);
	background: var(--button-hoverbg);
	border-color: var(--button-hoverborder);
}

#guild-member .sidebar .icons .label
{
	font-size: 0.7rem;
	text-align: center;
	line-height: 1;
	margin-top: 0.3rem;
}

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

#guild-member .characters .opbtn
{
	position: absolute;
	top: 0.3rem;
	right: 0.5rem;
	font-size: 1.1rem;
	padding: 3px 5px;
	width: auto;
	height: auto;
}

#guild-member .characters .opbtn.add
{
	width: 2rem;
	height: 2rem;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

#guild-member .characters .opbtn,
#guild-member .characters .opbtn:link,
#guild-member .characters .opbtn:visited
{
	color: var(--opbtn-deselected);
}

#guild-member .characters .opbtn.selected
{
	color: var(--opbtn-selected);
	background: var(--opbtn-selectedbg);
	border-color: var(--opbtn-selectedborder);
	/* Make more obvious (similar to bolding) */
	text-shadow: 0px 0px 1px var(--opbtn-selected);
}

#guild-member .characters .opbtn.saving,
#guild-member .characters .opbtn.selected.saving
{
	color: transparent;
	text-shadow: 0px 0px 1px transparent;
}

#guild-member .characters .opbtn.selected.saving:after
{
	color: var(--opbtn-selected);
}

#guild-member .characters .opbtn[data-tooltip]:before
{
	/* Position balloon centered over button but closer toward left */
	left: auto;
	right: -2rem;
}

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

#guild-member .editshowcase .submitdiv
{
	margin-bottom: 1rem;
}

#guild-member .editshowcase .character
{
	display: block;
	cursor: pointer;
	/* TEST */
	word-break: break-word;
}

#guild-member .editshowcase .character > *
{
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}

#guild-member .editshowcase .character input
{
	position: absolute;
	left: 0;
	top: 0;
	border-width: 2px;
	border-radius: 20%;
	width: 1.6rem;
	height: 1.6rem;
	min-width: -webkit-fit-content;
	min-width: -moz-fit-content;
	min-width: fit-content;
	z-index: 10;
}

#guild-member .editshowcase:not(.no-js) .character input:checked:before
{
	/* Display as a number, but only if JavaScript is enabled */
	content: attr(data-index);
	font-family: var(--main-font);
	font-weight: bold;
	line-height: 0;
	padding: 0 3px;
}

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

#guild-member .detailslist
{
	margin-left: calc(1.3rem - 5px);
}

#guild-member .fieldslist
{
	margin-left: calc(2rem - 5px);
	width: calc(100% - 2rem - 5px);
}

#guild-member form .errors
{
	margin-left: 2rem;
}

#guild-member .notes
{
	margin-left: 1.5rem;
}

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

#guild-member .history,
#guild-character .history
{
	max-width: 60rem;
	margin: 0;
	margin-left: 1rem;
}

#guild-member .history dt,
#guild-character .history dt
{
	font-weight: bold;
	margin-top: 0.7rem;
}

#guild-member .history dt:first-child,
#guild-character .history dt:first-child
{
	margin-top: 0;
}

#guild-member .history dt.year,
#guild-character .history dt.year
{
	width: 12ch;
	margin-left: -1rem;
	padding-left: 0.5rem;
	padding-top: 0.1rem;
	padding-bottom: 0.2rem;
	padding-right: 2rem;
	border: 1px solid;
	border-top-left-radius: 4px;
	border-top-right-radius: 2rem;
	color: var(--fieldth-color);
	background: var(--fieldth-bg);
	border-color: var(--fieldth-border);
}

#guild-member .history dt.divider,
#guild-character .history dt.divider
{
	height: 2px;
	margin: 0;
	margin-top: -1px;
	border-top: 1px solid;
	border-color: var(--fieldth-border);
}

#guild-member .history dd,
#guild-character .history dd
{
	display: list-item;
	list-style: disc;
	margin-top: 0.3rem;
	margin-left: 2rem;
}

#guild-member .history dd.reason,
#guild-character .history dd.reason
{
	list-style: none;
	margin-top: 0.1rem;
}

#guild-member .history dd a,
#guild-character .history dd a
{
	font-weight: bold;
}

/* =============================================== */
/* Chracter */
/* =============================================== */

#guild-character .content
{
	display: flex;
}

#guild-character .content > .stats
{
	flex: 3;
}

#guild-character .content > .game
{
	flex: 4;
}

#guild-character .content .notes
{
	margin-left: 0.5rem;
}

#guild-character h3.divider
{
	position: relative;
	width: 15ch;
	width: -webkit-max-content;
	width: -moz-max-content;
	width: max-content;
	margin-bottom: 0;
	margin-left: 0;
	padding-left: 0.5rem;
	padding-top: 0.1rem;
	padding-bottom: 0.2rem;
	padding-right: 2rem;
	border: 1px solid;
	border-top-left-radius: 4px;
	border-top-right-radius: 2rem;
	z-index: 2;
	background: var(--fieldth-bg);
	border-color: var(--fieldth-border);
}

#guild-character h3.divider.mobile
{
	display: none;
}

#guild-character .wrapper
{
	margin-top: 2rem;
}

#guild-character .wrapper .characters
{
	position: relative;
	border-top: 1px solid;
	margin-top: -1px;
	padding-top: 1rem;
	border-color: var(--fieldth-border);
}

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

#guild-character .sidebar .portrait
{
	position: relative;
}

#guild-character .sidebar .alternate
{
	position: absolute;
	right: 0;
	bottom: 0;
}

#guild-character .sidebar .alternate img
{
	height: 3rem;
	max-width: 3rem;
	border: 1px solid;
	border-color: var(--primary-color);
}

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

#guild-character .awards ul
{
	max-width: 28rem;
}

/* =============================================== */
/* Account */
/* =============================================== */

#guild-account .sidebar h3
{
	font-size: 1rem;
	text-align: center;
}

#guild-account .sidebar .buttons.guilds .button
{
	padding-left: 1rem;
}

#guild-account .sidebar .buttons.guilds .button .ellipsis
{
	max-width: 12rem;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

#guild-account .sidebar .buttons.guilds .opbtn
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin-right: 0.3rem;
	min-width: 1.5rem;
}

/* =============================================== */
/* Games / Game */
/* =============================================== */

body.guild-game
{
	/*
	--content-color: var(--backdrop-color);
	--content-bg: var(--backdrop-bg);
	--content-link: var(--backdrop-link);
	--content-visited: var(--backdrop-visited);
	--content-hover: var(--backdrop-hover);
	*/
}

/* Tier display - five filled/empty stars */
#guild-games header .tier,
#guild-game > header .tier
{
	display: flex;
	justify-content: center;
	margin-top: 0.3rem;
	cursor: default;
}

#guild-games header .tier span,
#guild-game > header .tier span
{
	/* Hide the asterisk which is for accessibility */
	color: transparent;
}

#guild-games header .tier span:first-child,
#guild-game > header .tier span:first-child
{
	/* HACK: Add margin to mimic missing first star */
	margin-left: 0.4em;
}

#guild-games header .tier span:before,
#guild-game > header .tier span:before
{
	content: '\e9d9';
	font-family: 'icomoon';
	font-size: 1.4rem;
	color: var(--tier-color);
  -webkit-text-fill-color: var(--tier-color);
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--text-color);
}

/* =============================================== */
/* Game */
/* =============================================== */

/* The extra #site-content is stupidly required for override generic #site-content stuff */
#site-content #guild-game > header
{
	position: relative;
	display: flex;
	align-items: stretch;
	padding-bottom: 0.5rem;
	margin-bottom: 0.5rem;
}

#guild-game > header h2
{
	position: relative;
}

#guild-game > header .sidebar
{
	flex-shrink: 0;
	flex-grow: 0;
	padding-left: 1rem;
}

#guild-game > header .editbtn
{
	align-self: flex-start;
}

#guild-game > header .image
{
	display: flex;
	align-items: center;
	justify-content: center;
}

#guild-game > header .image img
{
	display: block;
	flex-shrink: 0;
	flex-grow: 0;
	max-width: 15rem;
	max-height: 10rem;
}

#guild-game > header .desc
{
	flex: 1;
	display: flex;
	flex-direction: column;
	grid-gap: 0.5rem;
	margin-left: 1rem;
}

#guild-game > header .desc p
{
	margin: 0;
	margin-right: 1rem;
}

#guild-game > header .desc .buttons
{
	display: flex;
	grid-gap: 0.5rem;
	align-items: center;
	flex-wrap: wrap;
	margin-top: auto;
	margin-bottom: 0;
}

#guild-game > header .desc .rating
{
	display: block;
}

#guild-game > header .desc .rating img
{
	display: block;
	width: 2.6rem;
	height: auto;
}

#guild-game > header .desc .button
{
	min-width: 18ch;
	padding-top: 0.4em;
	padding-bottom: 0.4em;
}

#guild-game > header .desc .button [data-icon]
{
	color: var(--button-icon);
}

#guild-game > header .desc select:hover
{
	background-color: var(--button-hoverbg);
}

#guild-game > header .desc select option
{
	background-color: var(--button-hoverbg);
}

/* ----------------------------------------------- */
/* Used on the details page. */

/* The extra #site-content is stupidly required for override generic #site-content stuff */
#site-content #guild-game > header.shortened
{
	padding-bottom: 1rem;
}

#guild-game > header.shortened .sidebar img
{
	max-width: 8rem;
	max-height: 5rem;
}

#guild-game > header.shortened .rating
{
	margin-left: 2rem;
	margin-right: 1rem;
}

#guild-game > header.shortened .rating img
{
	width: auto;
	height: 4rem;
}

#guild-game > header.shortened .editbtn
{
	margin-left: auto;
}

/* ----------------------------------------------- */
/* Kind of a hack, but instead of marking each row, we select them by index. */

#guild-game .listtable thead th:nth-child(1)
{
	min-width: 42px;
}

#guild-game .listtable thead th:nth-child(2):before
{
	transform: translateX(50%);
}

#guild-game .listtable thead th:nth-child(2),
#guild-game .listtable thead th:nth-child(7),
#guild-game .listtable thead th:nth-child(8),
#guild-game .listtable tbody td:nth-child(2),
#guild-game .listtable tbody td:nth-child(6)
{
	text-align: left;
}

#guild-game .listtable thead th:nth-child(4),
#guild-game .listtable thead th:nth-child(5),
#guild-game .listtable thead th:nth-child(6),
#guild-game .listtable tbody td:nth-child(1),
#guild-game .listtable tbody td:nth-child(3),
#guild-game .listtable tbody td:nth-child(4),
#guild-game .listtable tbody td:nth-child(5)
{
	text-align: center;
}

#guild-game .listtable.hidestats thead th:nth-child(4),
#guild-game .listtable.hidestats thead th:nth-child(5),
#guild-game .listtable.hidestats thead th:nth-child(6),
#guild-game .listtable.hidestats tbody td:nth-child(3),
#guild-game .listtable.hidestats tbody td:nth-child(4),
#guild-game .listtable.hidestats tbody td:nth-child(5)
{
	display: none;
}

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

#guild-game .listtable
{
	min-width: 95%;
}

#guild-game .listtable td img
{
	max-width: 42px;
	max-height: 42px;
}

#guild-game .listtable td
{
	/* Since this is a table, this should function as min-height */
	/* Assumes max 42x42 portrait image + 4px top/bottom padding */
	height: 46px;
}

#guild-game .listtable th .btn
{
	font-family: 'icomoon';
}

#guild-game .listtable .opbtn
{
	margin-right: 0.3rem;
}

#guild-game dialog .fieldslist .info[data-tooltip]:before
{
	/* Position balloon to the left so that it does not go off the dialog */
	left: auto;
	right: 1rem;
}

/* ----------------------------------------------- */
/* Used on the details page and a bit on the edit page. */

#guild-game > section
{
	display: flex;
	align-items: stretch;
	margin-left: 2rem;
	margin-right: 2rem;
}

#guild-game > section .content
{
	flex: 3;
	margin-right: 3rem;
}

#guild-game > section .sidebar
{
	flex: 1;
	flex-shrink: 0;
}

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

#guild-game > section .detailslist
{
	margin-left: 1rem;
}

#guild-game > section .desc
{
	text-align: justify;
	margin-bottom: 1.5rem;
}

#guild-game > section .sidebar ul,
#guild-game > section .sidebar p,
#guild-game > section .split14 ul
{
	margin: 0;
	padding: 0;
	margin-left: 1.4rem;
}

#guild-game > section .sidebar li,
#guild-game > section .sidebar p,
#guild-game > section .split14 li
{
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

#guild-game > section ul.awardlist
{
	margin-top: 1rem;
	margin-left: 0.5rem;
}

#guild-game > section .list
{
	border: 1px solid;
	border-radius: 0.5rem;
	border-color: var(--fieldth-border);
}

#guild-game > section .list > h3
{
	padding: 0 1rem;
	border-top-left-radius: 0.5rem;
	border-top-right-radius: 0.5rem;
	border-bottom: 1px solid;
	color: var(--fieldth-color);
	background: var(--fieldth-bg);
	border-color: var(--fieldth-border);
}

#guild-game > section .list > ul
{
	padding: 0 0.5rem;
}

#guild-game > section .list.single
{
	margin-top: 0.5rem;
	/*max-width: calc(50% - 0.25rem);*/
}

/* ----------------------------------------------- */
/* These rules allow for selectively dividing sections by 1/4th or 1/2. */

#guild-game > section .split,
#guild-game > section .split14
{
	display: flex;
	grid-gap: 0.5rem;
}

#guild-game > section .split > *
{
	flex: 1;
}

#guild-game > section .split14 > *:first-child
{
	flex: 1;
	margin-right: 1rem;
}

#guild-game > section .split14 > *:last-child
{
	flex: 3;
}

/* ----------------------------------------------- */
/* Edit page specific. */

/* The extra #site-content is stupidly required for override generic #site-content stuff */
#site-content #guild-game > header.edit
{
	padding-bottom: 1rem;
	margin-bottom: 0;
}

#guild-game > header.edit .editbtn
{
	padding-top: 1px;
}

#guild-game > section.edit
{
	margin-left: 0;
	margin-right: 0;
}

#guild-game > section.edit .content
{
	margin-top: 1rem;
	margin-left: 2vw;
}

#guild-game > section.edit .sidebar
{
	padding: 1rem;
	color: var(--sidebar-color);
	background: var(--sidebar-bg);
	border-bottom-right-radius: 50% 1rem;
}

#guild-game > section.edit .sidebar h3:not(:first-child)
{
	margin-top: 1rem;
}

#guild-game > section.edit .sidebar .imgeditor
{
	border: 1px solid;
	border-radius: 1rem;
	border-top-left-radius: 0;
	padding: 0.5rem;
	background: var(--panel-bg);
	border-color: var(--fieldth-border);
}

#guild-game > section.edit .sidebar .imgeditor.logo .container
{
	width: 300px;
	height: 300px;
}

#guild-game > section.edit .sidebar .imgeditor.logo .container .thumbnail
{
	/* Pale Moon, at least, still requires the prefix */
	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
	transform: scale(0.5);
}

#guild-game > section.edit .sidebar .imgeditor.logo .thumbnail:hover:after
{
	-webkit-transform: scale(2);
	-moz-transform: scale(2);
	transform: scale(2);
}

#guild-game > section.edit .sidebar .imgeditor .img
{
	width: auto;
}

#guild-game > section.edit.builtin .sidebar img
{
	display: block;
	margin: 0 auto;
	margin-bottom: 1rem;
	max-width: 100%;
}

#guild-game > section.edit.builtin .sidebar img:nth-child(2)
{
	max-width: 70px;
	max-height: 70px;
}

#guild-game header.edit .buttons
{
	position: absolute;
	top: 1rem;
	right: 4rem;
}

#guild-game header.edit .buttons .button
{
	display: flex;
	align-items: center;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	margin-bottom: 0.7rem;
	color: var(--opbtn-color);
	background: var(--opbtn-bg);
	border-color: var(--opbtn-border);
}

#guild-game header.edit .buttons .button:hover
{
	color: var(--opbtn-hover);
	background: var(--opbtn-hoverbg);
}

#guild-game header.edit .buttons .button span
{
	display: inline-block;
	width: 3ch;
	text-align: center;
	color: var(--disabled-color);
}

#guild-game header.edit .buttons .button.add
{
	font-weight: bold;
}

#guild-game header.edit .buttons .button.add span
{
	font-weight: bold;
	text-shadow: 0px 0px 2px var(--opbtn-toggle);
	color: var(--opbtn-toggle);
}

#guild-game section.edit.builtin .fieldslist div > span:nth-child(3)
{
	display: table-cell;
	width: 1%;
}

#guild-game section.edit.builtin .fieldslist div > span:nth-child(3) button
{
	padding: 0.2rem 0.5rem;
}

#guild-game section.edit.builtin .fieldslist div > span:nth-child(3) button [data-icon]
{
	margin: 0;
	padding: 0;
}

/*#guild-game section.edit .fields .submitrow
{
	display: flex;
	align-items: center;
	margin-top: 0.5rem;
}

#guild-game section.edit .fields .submitrow span:nth-child(2)
{
	margin-left: 0.5rem;
}*/

/* ----------------------------------------------- */
/* Textbox or listbox fields for editing lists of things. */

#guild-game .listedit > *
{
	vertical-align: top;
	line-height: 1.5;
}

#guild-game .listedit > label
{
	/* HACK: To match textarea padding */
	padding-top: 0.2em;
}

#guild-game .listedit textarea
{
	display: block;
	float: left;
	height: 7.5rem;
	line-height: 1.5;
}

#guild-game .listedit .listbox
{
	display: block;
	float: left;
}

#guild-game .listedit button
{
	margin-left: 0.3rem;
	padding: 0.2rem 0.5rem;
}

#guild-game .listedit button [data-icon]
{
	margin: 0;
	padding: 0;
}

#guild-game .listedit .info
{
	vertical-align: top;
	line-height: 1.5;
}

#guild-game .listedit .info:before
{
	/* Lower the balloon back down */
	bottom: calc(100% + 7px);
}

#guild-game .listedit .info:after
{
	/* Lower the balloon back down */
	bottom: calc(100% + 1px);
}

/* Replace the triangle with a checkmark for checked items */
#guild-game .listedit .listbox input + label
{
	padding-left: 0;
}

#guild-game .listedit .listbox input + label:before
{
	content: '\ea11';
	font-family: 'icomoon';
	padding: 0 0.2rem;
	border: 0;
	opacity: 0.3;
}

#guild-game .listedit .listbox input:checked + label:before
{
	content: '\ea10';
	opacity: 1;
	/* Undo inherited changes */
	display: inline;
	position: static;
	left: 0;
	top: 0;
	width: auto;
	height: auto;
}

/* ----------------------------------------------- */
/* Headers when editing. */

#guild-game h3 button
{
	margin-left: 0.5rem;
	padding: 0.2rem 0.5rem;
}

#guild-game h3 button [data-icon]
{
	width: auto;
	margin: 0;
	padding: 0;
}

#guild-game h3.collapsed button
{
	visibility: hidden;
}

/* ----------------------------------------------- */
/* Ribbon editor. */

.badge_edit
{
	display: flex;
}

.badge_edit > div
{
	border: 1px solid;
	border-radius: 1rem;
	border-top-left-radius: 0;
	padding: 0.5rem;
	background: var(--panel-bg);
	border-color: var(--fieldth-border);
}

.badge_edit .imgeditor
{
	text-align: center;
	margin-top: 1rem;
}

.badge_edit .imgeditor .img
{
	width: auto;
}

/* =============================================== */
/* Games */
/* =============================================== */

#guild-games .tierlist .panel
{
	margin-top: 1rem;
	margin-left: 1rem;
	margin-right: 1rem;
}

#guild-games div header
{
	display: flex;
	padding: 0.3rem 1rem;
	padding-top: 0.5rem;
	border-bottom: 1px solid;
	background: var(--pageheader-bg);
	border-color: var(--pageheader-border);
}

#guild-games div header .img
{
	flex-shrink: 0;
	flex-grow: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 150px;
}

#guild-games div header .img img
{
	max-width: 150px;
	max-height: 100px;
}

#guild-games div header .name
{
	flex: 1;
	display: flex;
	flex-direction: column;
	padding-left: 1rem;
	text-align: left;
}

#guild-games div header h3
{
	margin: 0;
	padding: 0;
	margin-bottom: 0.5rem;
	font-size: 1rem;
	font-weight: bold;
}

#guild-games div header p
{
	margin: 0;
	margin-bottom: 0.5rem;
	font-weight: normal;
}

#guild-games div header p:last-child
{
	margin-top: auto;
	margin-bottom: auto;
}

#guild-games div header .tier
{
	margin: 0 auto;
}

#guild-games div section
{
	padding: 1rem;
	background: var(--panel-bg);
}

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

#guild-games .tierlist section
{
	padding: 1.5rem;
	border-bottom-right-radius: 8px;
	border-bottom-left-radius: 8px;
	/* Older browsers */
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	/* Newer browsers */
	display: grid;
	grid-template-columns: repeat(auto-fill, 150px);
	row-gap: 0.5rem;
	column-gap: 0.3rem;
}

#guild-games .tierlist .game
{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	margin-bottom: 0.3rem;
}

#guild-games .tierlist .game .logo
{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 150px;
	height: 100px;
}

#guild-games .tierlist .game img
{
	display: block;
	max-width: 150px;
	max-height: 100px;
}

#guild-games .tierlist .game .title
{
	display: flex;
	flex-direction: column;
	align-items: center;
}

#guild-games .tierlist .game .name
{
	font-weight: bold;
	margin-top: 0.5rem;
	margin-bottom: 0.3rem;
	text-align: center;
}

#guild-games .tierlist .game .players,
#guild-games .tierlist .game .characters
{
	font-size: 0.9rem;
}

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

#guild-games .opsbar
{
	display: flex;
	padding: 1rem;
	padding-bottom: 0;
}

#guild-games .opsbar.header
{
	padding-bottom: 1rem;
	border-bottom: 1px solid;
	color: var(--pageheader-color);
	background: var(--pageheader-bg);
	border-color: var(--pageheader-border);
}

#guild-games .opsbar .ops
{
	display: flex;
	margin: 0;
	padding: 0;
	margin-right: 1rem;
}

#guild-games .opsbar .ops li
{
	align-self: center;
	list-style: none;
	margin: 0;
	padding: 0;
	margin-top: 0.1rem;
	margin-bottom: 0.1rem;
	margin-right: 0.5rem;
	font-size: 0.9rem;
}

#guild-games .opsbar .ops li:last-child
{
	margin-right: 0;
}

#guild-games .opsbar .ops li a
{
	display: block;
	border: 1px solid;
	border-radius: 5px;
	padding: 0.2rem 0.6rem;
	text-decoration: none;
	color: var(--opbtn-color);
	background: var(--opbtn-bg);
	border-color: var(--opbtn-border);
}

#guild-games .opsbar .ops li a:hover
{
	color: var(--opbtn-hover);
	background: var(--opbtn-hoverbg);
}

#guild-games .opsbar .ops li.toggle a,
#guild-games .opsbar .ops li.sort a
{
	padding-left: 0.2rem;
}

#guild-games .opsbar .ops li.toggle a:before,
#guild-games .opsbar .ops li.sort a:before
{
	font-family: 'icomoon';
	display: inline-block;
	width: 1.5rem;
	text-align: center;
	margin-right: 0;
	line-height: 0;
	color: var(--disabled-color);
}

#guild-games .opsbar .ops li.toggle a:before
{
	content: '\ea11';
}

#guild-games .opsbar .ops li.toggle.selected a:before
{
	content: '\ea10';
	color: var(--opbtn-toggle);
}

#guild-games .opsbar .ops.right
{
	margin-left: auto;
	margin-right: 0;
}

#guild-games .opsbar .ops li.sort a:before
{
	content: '\f175';
	/* HACK: Don't have hollow arrows so faking it */
	font-weight: bold;
	color: transparent;
	/*text-shadow: 0px 0px 1px var(--disabled-color), 0px 0px 1px var(--disabled-color);*/
	-webkit-text-stroke: 1px var(--disabled-color);
}

#guild-games .opsbar .ops li.sort.selected a:before
{
	color: var(--opbtn-toggle);
	/*text-shadow: 0px 0px 1px var(--opbtn-toggle), 0px 0px 1px var(--opbtn-toggle);*/
	-webkit-text-stroke: 1px var(--opbtn-toggle);
}

#guild-games .opsbar .ops li.sort.asc a:before
{
	content: '\f175';
}

#guild-games .opsbar .ops li.sort.desc a:before
{
	content: '\f176';
}

#guild-games .opsbar .ops li.add a:before
{
	content: '\f067';
	font-family: 'icomoon';
	display: inline-block;
	font-weight: normal;
	/* HACK: Eye-ball adjustment for the "+" being too high */
	padding-top: 0.1em;
	speak: none;
}

#guild-games .opsbar .ops li.add.selected a
{
	color: var(--opbtn-selected);
	background: var(--opbtn-selectedbg);
	border-color: var(--opbtn-selectedborder);
}

#guild-games .opsbar .ops li.add[data-tooltip]:before
{
	/* Position balloon to right of anchor */
	left: auto;
	right: 0;
}

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

#guild-games .gamelist
{
	display: block;
	column-width: 18rem;
	column-gap: 2rem;
	margin-left: 2rem;
	margin-right: 1rem;
	margin-top: 2rem;
}

#guild-games .gamelist .game
{
	list-style: none;
	display: flex;
	align-items: center;
	margin: 0;
	margin-bottom: 1rem;
	padding: 0;
	break-inside: avoid;
}

#guild-games .gamelist .game .logo
{
	width: 40px;
	/* Helps to center narrow images with text */
	min-height: 20px;
	margin-right: 0.75rem;
}

#guild-games .gamelist .game img
{
	display: block;
	margin: 0 auto;
	max-width: 40px;
	max-height: 40px;
}

#guild-games .gamelist .game .title
{
	flex: 1;
	display: block;
}

#guild-games .gamelist .game .name
{
	display: block;
	font-weight: bold;
	margin-bottom: 2px;
}

#guild-games .gamelist .game .tier
{
	display: block;
	margin-left: 0.5ch;
	margin-right: -0.5ch;
}

#guild-games .gamelist .game .tier span
{
	/* Hide the asterisk which is for accessibility */
	color: transparent;
}

#guild-games .gamelist .game .tier span:before
{
	content: '\e9d9';
	font-family: 'icomoon';
	font-size: 0.9rem;
	/* Remove the blank space caused by fallback text */
	margin-left: -0.5ch;
	color: var(--tier-color);
  -webkit-text-fill-color: var(--tier-color);
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--text-color);
}

#guild-games .gamelist .game .tier span:empty
{
	/* HACK: Compensate for no star */
	padding-right: 0.9ch;
}

#guild-games .gamelist .game .tier span:empty:before
{
	color: transparent;
  -webkit-text-fill-color: transparent;
	opacity: 0.3;
}

#guild-games .gamelist .game .players
{
	display: block;
	font-size: 0.9rem;
}

/* ----------------------------------------------- */
/* Add page for administrators */

#guild-games .addnew
{
	margin: 0 1rem;
	margin-top: 1rem;
	border: 1px solid;
	border-radius: 0.5rem;
	border-color: var(--panel-border);
	background: var(--content-bg);
}

#guild-games .addnew section
{
	background: transparent;
}

#guild-games .addnew .content header
{
	border-top-left-radius: 0.5rem;
	border-top-right-radius: 0.5rem;
}

/* Custom breakpoint because too wide for tablet */
@media (min-width: 1160px)
{
	#guild-games .addnew
	{
		display: flex;
		align-items: stretch;
	}
	#guild-games .addnew .content header
	{
		border-top-left-radius: 0.5rem;
		border-top-right-radius: 0;
	}
	#guild-games .addnew .sidebar header
	{
		border-top-left-radius: 0;
		border-top-right-radius: 0.5rem;
	}
}

#guild-games .addnew .content
{
	flex: 2;
}

#guild-games .addnew .sidebar
{
	flex: 1;
	flex-shrink: 0;
}

#guild-games .addnew header
{
	font-weight: bold;
}

#guild-games .addnew section > *
{
	margin-top: 1rem;
	margin-bottom: 1rem;
}

#guild-games .addnew section > *:first-child
{
	margin-top: 0;
}

#guild-games .addnew section > *:last-child
{
	margin-bottom: 0;
}

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

#guild-games .addnew .filters
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 1rem;
}

#guild-games .addnew .filters .browse
{
	display: flex;
	height: 100%;
	align-items: center;
	column-gap: 0.4rem;
}

#guild-games .addnew .filters .browse .button
{
	padding: 0.3rem 0.8rem;
	font-size: 0.8rem;
	font-weight: bold;
}

#guild-games .addnew .filters .browse.disabled .button.selected
{
	/* Hide the selection */
	color: var(--button-color);
	background: var(--button-bg);
	border-color: var(--button-border);
}

#guild-games .addnew .filters .browse.disabled .button.selected:hover
{
	/* Hide the selection */
	color: var(--button-hover);
	background: var(--button-hoverbg);
	border-color: var(--button-hoverborder);
}

#guild-games .addnew .filters .search
{
	display: flex;
	align-items: stretch;
}

#guild-games .addnew .filters .search p
{
	margin: 0;
	padding: 0.2rem 0.8rem;
	border: 1px solid;
	border-right-width: 0;
	border-radius: 5px;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	color: var(--fieldth-color);
	background: var(--fieldth-bg);
	border-color: var(--fieldth-border);
}

#guild-games .addnew .filters .search p:before
{
	line-height: 1.2;
}

#guild-games .addnew .filters .search input
{
	line-height: 1.2;
	padding: 0.2rem 0.4rem;
}

#guild-games .addnew .filters .search > span
{
	position: relative;
}

#guild-games .addnew .filters .search button
{
	padding: 0.2rem 0.4rem;
	margin-left: 0.2rem;
	line-height: 1.2;
}

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

#guild-games .addlist
{
	position: relative;
	margin-left: 1rem;
	margin-right: 1rem;
	margin-top: 2rem;
	min-height: 3rem;
}

#guild-games .addlist ul
{
	list-style: none;
	display: block;
	column-width: 18rem;
	column-gap: 2rem;
	margin: 0;
	padding: 0;
}

#guild-games .addlist li
{
	list-style: none;
	break-inside: avoid;
	margin-bottom: 0.3rem;
}

#guild-games .addlist li a
{
	display: flex;
	align-items: center;
	font-weight: bold;
	text-decoration: none;
	border: 1px solid;
	border-radius: 4px;
	padding: 0.3rem 0.5rem;
}

#guild-games .addlist li a,
#guild-games .addlist li a:link,
#guild-games .addlist li a:visited
{
	color: var(--tile-color);
	background: var(--tile-bg);
	border-color: var(--tile-border);
}

#guild-games .addlist li a:hover
{
	color: var(--tile-hover);
	background: var(--tile-hoverbg);
	border-color: var(--tile-hoverborder);
}

#guild-games .addlist li img,
#guild-games .addlist li span
{
	width: 24px;
	height: 24px;
	margin-right: 0.5rem;
}

#guild-games .addlist li img
{
	max-width: 100%;
	max-height: 100%;
	/* Specifying width/height on the container causes child to not maintain aspect ratio */
	object-fit: contain;
}

#guild-games .addlist.working ul
{
	opacity: 0.5;
	pointer-events: none;
}

#guild-games .addlist.working:after
{
	content: '\f110';
	display: inline-block;
	position: absolute;
	left: calc(50% - 3vw);
	top: calc(20% - 3vw);
	font-family: 'icomoon';
	font-size: 6vw;
	animation: 1s steps(8) 0s normal none infinite running fa-spin;
	pointer-events: none;
	opacity: 0.5;
}

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

#guild-games .addnew .pages
{
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 0.3rem;
	margin: 0;
	padding: 0;
	margin-top: 1.5rem;
}

#guild-games .addnew .pages li
{
	flex-shrink: 1;
	list-style: none;
	margin: 0;
	padding: 0;
}

#guild-games .addnew .pages li span
{
	cursor: default;
}

#guild-games .addnew .pages li a,
#guild-games .addnew .pages li span
{
	padding: 0.2rem 0.7rem;
	white-space: nowrap;
	text-decoration: none;
	border: 1px solid;
	border-radius: 4px;
}

#guild-games .addnew .pages li a
{
	color: var(--button-color);
	background: var(--button-bg);
	border-color: var(--button-border);
}

#guild-games .addnew .pages li span
{
	color: var(--button-color);
	background: transparent;
	border-color: var(--button-border);
}

#guild-games .addnew .pages li.current span
{
	color: var(--button-selected);
	background: var(--button-selectedbg);
	border-color: var(--button-selectedborder);
}

#guild-games .addnew .pages li.ellipsis span
{
	color: var(--text-color);
	background: transparent;
	border-color: transparent;
	padding-left: 0.2rem;
	padding-right: 0.2rem;
}

#guild-games .addnew .pages li a:hover
{
	color: var(--button-hover);
	background: var(--button-hoverbg);
	border-color: var(--button-hoverborder);
}

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

body.guild-games #AddNewGameForm > div
{
	display: table;
	border-collapse: separate;
	border-spacing: 0.5rem;
	margin: 0;
	padding: 0;
	width: 100%;
}

body.guild-games #AddNewGameForm > div > div
{
	display: table-row;
}

body.guild-games #AddNewGameForm > div > div > *
{
	display: table-cell;
}

body.guild-games #AddNewGameForm > div > div > *:first-child
{
	width: 1%;
	white-space: nowrap;
}

body.guild-games #AddNewGameForm input
{
	width: 100%;
}

body.guild-games #AddNewGameForm .status
{
	display: inline-flex;
	margin-left: 0.5rem;
}

/* =============================================== */
/* Application */
/* =============================================== */

#site-content > #guild-application > header h2
{
	margin: 0 auto;
	max-width: calc(var(--main-width) / 1.5);
}

#guild-application form
{
	margin: 1rem auto;
	max-width: calc(var(--main-width) / 1.5);
	padding: 1rem 2rem;
	border: 1px solid;
	border-color: var(--fieldth-border);
	border-radius: 2rem;
}

#guild-application form > h3
{
	margin-top: 0.75rem;
}

#guild-application form > h3:first-child
{
	margin-top: 0.5rem;
}

#guild-application form > p
{
	margin: 0.5rem 0;
	margin-left: 1rem;
	width: calc(100% - 1rem);
}

#guild-application form > .fieldslist
{
	margin-left: calc(1rem - 5px);
	width: calc(100% - 1rem - 5px);
}

/* =============================================== */
/* Home / Dashboard */
/* =============================================== */

body.guild-dashboard
{
	--content-color: var(--backdrop-color);
	--content-bg: var(--backdrop-bg);
	--content-link: var(--backdrop-link);
	--content-visited: var(--backdrop-visited);
	--content-hover: var(--backdrop-hover);
}

#guild-dashboard .grid
{
	display: flex;
	position: relative;
	color: var(--backdrop-color);
	background: var(--backdrop-bg);
}

#guild-dashboard .left
{
	max-width: 25%;
	margin: 0 1rem;
}

#guild-dashboard .center
{
	flex: 1;
}

#guild-dashboard .right
{
	max-width: 25%;
	margin: 0 1rem;
}

#guild-dashboard .panel
{
	margin: 1rem 0;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
}

#guild-dashboard .panel > header
{
	color: var(--collapse-color);
	background: var(--collapse-bg);
	border-color: var(--collapse-border);
}

#guild-dashboard .panel
{
	background: var(--white);
	border-color: var(--darkgray);
}

#guild-dashboard .left .panel,
#guild-dashboard .right .panel
{
	background: var(--secondary-color-light);
}

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

#guild-dashboard .editbtn
{
	position: absolute;
	/* Putting button just off the bottom (e.g. 100% of the height of the parent element) onto the footer */
	top: 100%;
	right: 1rem;
	font-family: 'icomoon';
	font-size: 1.7rem;
	font-weight: normal;
	text-decoration: none;
	-webkit-user-select: none;
	user-select: none;
	color: var(--editbtn-color);
	background: var(--editbtn-bg);
	border-radius: 4px;
	padding-top: 1px;
	padding-left: 2px;
	cursor: pointer;
	opacity: 0.5;
}

#guild-dashboard .editbtn.selected
{
	color: var(--editbtn-selected);
	background: var(--editbtn-selectedbg);
}

#guild-dashboard .editbtn:hover
{
	opacity: 1;
}

#guild-dashboard .editbtn:before
{
	/* Position balloon to left of anchor */
	left: auto;
	right: 0;
}

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

#guild-dashboard .grid.edit
{
	padding: 1rem;
	justify-content: stretch;
}

#guild-dashboard .grid.edit .panel
{
	flex: 1;
	margin: 0;
}

#guild-dashboard .grid.edit .columns
{
	display: flex;
}

#guild-dashboard .grid.edit .columns .column
{
	flex: 1;
	margin: 0.5rem 1rem;
}

#guild-dashboard .grid.edit .columns .column header
{
	font-weight: bold;
}

#guild-dashboard .grid.edit .columns .column ul
{
	list-style: none;
	margin: 0;
	padding: 0.5rem;
	padding-left: 1rem;
	border: 1px solid;
	border-radius: 4px;
}

#guild-dashboard .grid.edit .columns .column li
{
	margin: 0.5rem 0;
}

#guild-dashboard .grid.edit .submitdiv
{
	margin-left: 1rem;
	margin-bottom: 1rem;
}

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

#guild-dashboard .panel.main .content
{
	font-size: 1.1rem;
	margin: 0 1rem;
	text-align: justify;
}

#guild-dashboard .panel.main .buttons
{
	display: flex;
	margin: 1rem;
	grid-gap: 1rem;
}

#guild-dashboard .panel.main .buttons button,
#guild-dashboard .panel.main .buttons .button
{
	font-weight: bold;
}

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

#guild-dashboard .panel.welcome ul li
{
	margin: 0.5rem 0;
}

#guild-dashboard .panel.welcome ul li span
{
	display: inline-flex;
	align-items: center;
	grid-gap: 4px;
}

#guild-dashboard .panel.welcome li b
{
	margin-right: 0.2rem;
}

#guild-dashboard .panel.welcome li img
{
	width: 1.5rem;
	height: 1.5rem;
	object-fit: contain;
}

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

#guild-dashboard .panel.games > div
{
	display: flex;
	flex-direction: column;
	align-items: center;
	grid-gap: 0.5rem;
	margin: 1rem;
}

#guild-dashboard .panel.games > div img
{
	display: block;
	width: 150px;
	max-height: 84px;
	object-fit: contain;
	text-align: center;
}

#guild-dashboard .panel.games .noimg
{
	display: block;
	width: 150px;
	padding: 2px;
	text-align: center;
}

#guild-dashboard .panel.games .tier
{
	font-family: 'icomoon';
	text-align: center;
	margin-bottom: 0.5rem;
}

#guild-dashboard .panel.games .button
{
	margin-top: 1rem;
	padding: 0.3em 2em;
	max-width: 100%;
}

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

#guild-dashboard .panel.events .event
{
	display: table;
	border-collapse: collapse;
	margin: 1rem;
}

#guild-dashboard .panel.events .event > div
{
	display: table-row;
}

#guild-dashboard .panel.events .event > div > *
{
	display: table-cell;
	padding: 2px;
}

#guild-dashboard .panel.events .event > div > b
{
	text-align: right;
	padding-right: 4px;
}

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

#guild-dashboard .panel.calendar table
{
	width: calc(2.2rem * 7);
	border-collapse: collapse;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	background: var(--calendar-bg);
}

#guild-dashboard .panel.calendar table th,
#guild-dashboard .panel.calendar table td
{
	width: 2.2rem;
	height: 2rem;
	border: 1px solid;
	border-color: var(--calendar-border);
}

#guild-dashboard .panel.calendar table th:first-child,
#guild-dashboard .panel.calendar table td:first-child
{
	border-left-width: 0;
}

#guild-dashboard .panel.calendar table th:last-child,
#guild-dashboard .panel.calendar table td:last-child
{
	border-right-width: 0;
}

#guild-dashboard .panel.calendar table th
{
	font-weight: bold;
	height: 1rem;
	border-top: 0;
	background: var(--pageheader-bg);
	border-color: var(--pageheader-border);
}

#guild-dashboard .panel.calendar table td
{
	position: relative;
	border-bottom: 0;
	color: var(--calendar-color);
}

#guild-dashboard .panel.calendar table td.blank
{
	/* Bug fix for disappearing borders */
	position: initial;
	background: var(--calendar-blank);
}

#guild-dashboard .panel.calendar table .num
{
	position: absolute;
	top: 0;
	left: 0;
	padding-left: 2px;
	font-size: 0.5rem;
	z-index: 1;
}

#guild-dashboard .panel.calendar table .curr
{
	color: var(--calendar-current);
	background: var(--calendar-currentbg);
}

#guild-dashboard .panel.calendar table td.blank:last-child
{
	border-bottom-right-radius: 4px;
}

#guild-dashboard .panel.calendar table td .anchor
{
	text-align: center;
}

#guild-dashboard .panel.calendar table a
{
	display: inline-block;
	border-radius: 50%;
	width: 2rem;
	line-height: 2rem;
	text-align: center;
	text-decoration: none;
	color: var(--calendar-event);
	background: var(--calendar-eventbg);
}

#guild-dashboard .panel.calendar table a:hover
{
	color: var(--calendar-hover);
	background: var(--calendar-hoverbg);
}

#guild-dashboard .right .panel.calendar table .tooltip
{
	/* Position balloon above and to left of anchor */
	bottom: calc(100% + 6px);
	left: auto;
	right: 0;
}

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

#guild-dashboard .panel.chat header
{
	display: flex;
	grid-gap: 5px;
	align-items: center;
}

#guild-dashboard .panel.chat header select
{
	font-weight: normal;
	margin-left: auto;
	border-radius: 4px;
	color: var(--primary-color-white);
	background: var(--primary-color-black);
	border-color: var(--primary-color);
}

#guild-dashboard .panel.chat header button
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.8rem 0.4rem;
	margin-left: auto;
	margin-right: 1rem;
	border-radius: 4px;
}

#guild-dashboard .panel.chat .scroller
{
	min-height: 8rem;
	max-height: 25vh;
	overflow-y: scroll;
	padding: 4px;
}

#guild-dashboard .panel.chat .message
{
}

#guild-dashboard .panel.chat .message .header
{
}

#guild-dashboard .panel.chat .message .header span
{
	display: inline-block;
	font-size: 0.8rem;
	min-width: 4em;
	text-align: right;
	color: var(--gray);
}

#guild-dashboard .panel.chat .message .header a
{
	font-weight: bold;
}

#guild-dashboard .panel.chat .message .content
{
	margin: 0.3rem 0;
	margin-left: 1rem;
}

#guild-dashboard .panel.chat .spoiler
{
	color: var(--lightgray);
	background: var(--lightgray);
}

#guild-dashboard .panel.chat .chatline
{
	display: flex;
	align-items: stretch;
	padding: 4px;
	grid-gap: 4px;
}

#guild-dashboard .panel.chat .chatline textarea
{
	flex: 1;
	appearance: none;
	resize: none;
	padding: 0.2rem 0.4rem;
	height: 1.8rem;
	line-height: 1.2rem;
	border-radius: 3px;
}

#guild-dashboard .panel.chat .chatline button
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 0.4rem;
}

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

#guild-dashboard .panel.discord .channels
{
	max-height: 20vh;
	overflow-y: auto;
	margin: 2px;
}

#guild-dashboard .panel.discord .channel:hover
{
	background: var(--primary-color-light);
}

#guild-dashboard .panel.discord .channel .name
{
	display: flex;
	min-height: 2.5rem;
	align-items: center;
}

#guild-dashboard .panel.discord .channel .name a
{
	flex: 1;
	font-weight: bold;
}

#guild-dashboard .panel.discord .channel .name .num
{
	display: block;
	margin-right: 0.5rem;
	border: 1px solid;
	border-radius: 8px;
	min-width: 1.5rem;
	text-align: center;
	border-color: var(--gray);
}

#guild-dashboard .panel.discord .channel .name [data-icon]
{
	display: block;
	font-size: 1.1rem;
	min-width: 1.7rem;
	text-align: center;
}

#guild-dashboard .panel.discord .users
{
	display: flex;
	flex-wrap: wrap;
	grid-gap: 4px;
	margin-top: -0.5rem;
	padding-left: 1.8rem;
	padding-bottom: 4px;
}

#guild-dashboard .panel.discord .users a
{
	display: flex;
	align-items: center;
}

#guild-dashboard .panel.discord .users img
{
	display: block;
	border-radius: 4px;
	max-width: 1.5rem;
	max-height: 1.5rem;
	object-fit: contain;
}

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

#guild-dashboard .panel.forums > div
{
	max-height: 20vh;
	overflow-y: auto;
	padding: 4px;
	margin-bottom: 4px;
}

#guild-dashboard .panel.forums ul
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	margin-left: 1rem;
	grid-gap: 0.5rem;
}

#guild-dashboard .panel.forums b
{
	display: block;
	margin-top: 0.5rem;
	margin-left: 0.2rem;
}

#guild-dashboard .panel.forums b:first-child
{
	margin-top: 0;
}

#guild-dashboard .panel.forums li
{
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
}

#guild-dashboard .panel.forums li:before
{
	content: '\2022';
	padding-right: 0.5rem;
}

#guild-dashboard .panel.forums li a
{
	display: flex;
	align-items: center;
}

#guild-dashboard .panel.forums img
{
	max-width: 1.5rem;
	max-height: 1.5rem;
	object-fit: contain;
	padding-right: 0.2rem;
}

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

#guild-dashboard .panel.latest .post
{
	display: flex;
	margin: 0.5rem;
}

#guild-dashboard .panel.latest .post > div:first-child
{
	width: 3rem;
	padding: 0.3rem 0.5rem;
}

#guild-dashboard .panel.latest img
{
	width: 2rem;
	height: 2rem;
	object-fit: contain;
}

#guild-dashboard .panel.latest .post .title
{
	font-weight: bold;
}

#guild-dashboard .panel.latest .post .desc
{
	font-size: 0.75rem;
}

#guild-dashboard .panel.latest .post .cat
{
	font-size: 0.75rem;
	font-weight: bold;
}

/* =============================================== */
/* Admin */
/* =============================================== */

#site-content > #guild-admin
{
	margin: 1rem auto;
	max-width: calc(var(--main-width) / 1.5);
	padding: 1rem 2rem;
	border: 1px solid;
	border-color: var(--fieldth-border);
	border-radius: 2rem;
}

#guild-admin .cards,
#guild-admin .cards li
{
	list-style: none;
	margin: 0;
	padding: 0;
}

#guild-admin .cards
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	row-gap: 0.5rem;
	column-gap: 0.5rem;
	justify-content: space-between;
}

#guild-admin .cards li a
{
	display: block;
	padding: 0.5rem;
	text-decoration: none;
	border: 1px solid;
	border-radius: 5px;
	box-shadow: 0px 0px 2px var(--tile-shadow);
	color: var(--tile-color);
	background: var(--tile-bg);
	border-color: var(--tile-border);
}

#guild-admin .cards li a,
#guild-admin .cards li a:link
{
	text-decoration: none;
	color: var(--tile-link);
}

#guild-admin .cards li a:visited
{
	color: var(--tile-visited);
}

#guild-admin .cards li a:hover
{
	color: var(--tile-hover);
	background: var(--tile-hoverbg);
	border-color: var(--tile-hoverborder);
}

#guild-admin .cards li a > b,
#guild-admin .cards li a > span
{
	display: block;
	padding: 0.5rem;
}

#guild-admin .cards li a > b
{
	text-decoration: var(--link-decoration);
}

#guild-admin .cards li a:hover > b
{
	text-decoration: var(--hover-decoration);
}

/* =============================================== */
/* Admin: Pending */
/* =============================================== */

#guild-pending form
{
	margin-top: 1rem;
}

#guild-pending .mobile
{
	/* Mobile only */
	display: none;
}

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

#guild-pending .listtable tbody td
{
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	line-height: 1;
}

#guild-pending .listtable tbody img
{
	max-width: 1.3em;
	max-height: 1.3em;
	object-fit: contain;
}

#guild-pending .listtable tbody .opbtn
{
	width: 1.8em;
	height: 1.8em;
}

#guild-pending .listtable tbody td:nth-child(6) select
{
	width: 8rem;
	max-width: 8rem;
}

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

#guild-pending .listtable tfoot tr.submitrow td
{
	border-left: 1px solid;
	border-right: 1px solid;
	border-bottom: 1px solid;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-color: var(--td-border);
	padding: 0 0.7rem;
}

#guild-pending .listtable tfoot textarea
{
	min-width: 75%;
	max-width: 100%;
}

#guild-pending .listtable tfoot p
{
	margin: 0.5rem 0;
}

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

#guild-pending .listtable tbody [data-tooltip]:after
{
	/* Make balloon point toward the left side of the word */
	left: 1rem;
	right: auto;
}

#guild-pending .listtable tbody [data-tooltip]:before
{
	/* Make balloon start near the triangle and extend to the right */
	left: 0;
	right: auto;
	transform: translateX(-10%);
}

#guild-pending .listtable tbody .opbtn[data-tooltip]:after
{
	/* Center balloon's triangle on button */
	left: 50%;
	right: auto;
	transform: translateX(-50%);
}