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

:root
{
	--banner-width: 57px;
	--banner-height: 64px;
}

#site-header .links
{
	display: none;
}

#site-header .search
{
	display: none;
}

#site-header .portrait a
{
	border-radius: 1px;
}

#site-header .profile
{
	flex: 3;
	justify-content: center;
	font-size: 0.9rem;
}

#site-header .portrait
{
	flex: 1;
	justify-content: flex-start;
}

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

#site-header .nav
{
	display: flex;
	position: relative;
	justify-content: center;
	align-items: center;
	border-radius: 8px;
	margin-right: 0.5rem;
	color: var(--menu-color);
	background: var(--menu-bg);
	cursor: pointer;
}

#site-header .nav .label
{
	font-family: 'icomoon';
	font-size: 1.3rem;
	padding: 0.6rem;
	padding-right: 0.3rem;
	-webkit-user-select: none;
	user-select: none;
}

#site-header .nav .label:before
{
	content: '\e9bf';
}

#site-header .nav .fallback-text
{
	/* Fallback text is used for accessibility; hide for others */
	clip: rect(0, 0, 0, 0);
	position: absolute;
	overflow: hidden;
	width: 1px;
	height: 1px;
}

#site-header .menu
{
	top: 100%;
	right: 0;
	min-width: 6rem;
}

#site-header .menu a
{
	padding: 0.7rem 1.3rem;
}

#site-header .nav:focus .menu
{
	opacity: 1;
	visibility: visible;
}

#site-header .nav:focus .label:before
{
	content: '\e9c0';
}

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

#site-nav
{
	display: none;
}

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

#site-title
{
	padding: 0.2rem 0;
}

#site-title .content:before
{
	width: 0.5rem;
	border-top: 0.2rem solid transparent;
	border-left: 0.5rem solid var(--titlebar-icon);
	border-bottom: 0.2rem solid transparent;
}

#site-title .icon
{
	margin-left: 1rem;
}

#site-title .icon img
{
	width: auto;
	max-height: 20px;
}

#site-title .title
{
	font-size: 1.1rem;
}

#site-title .quote
{
	display: none;
}

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

#site-footer
{
	margin-top: 0.5rem;
}

#site-footer .content
{
	padding-top: 0.5rem;
	/* HACK: Leave space for things we fix at the bottom of the page */
	/* TODO: If we mark specific pages with fixed footers we could do this only on those pages */
	padding-bottom: 3rem;
	border-top: 1px solid;
	color: var(--siteheader-color);
	background: var(--siteheader-bg);
	border-color: var(--content-border);
}

#site-footer .content a,
#site-footer .content a:link,
#site-footer .content a:visited
{
	color: var(--siteheader-link);
	text-decoration: none;
}

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

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

.guild-notice,
.guild-error
{
	width: auto;
	max-width: 100%;
}

/* =============================================== */
/* Form controls */
/* =============================================== */

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"],
input[type="file"],
select,
textarea
{
	padding: 0.4rem 0.4rem;
}

button,
.button,
.fieldslist button,
.fieldslist .button
{
	padding: 0.3rem 1rem;
}

input[type="checkbox"],
input[type="radio"]
{
	width: 1.7em;
	height: 1.7em;
}

label.checkbox
{
	/* This lines the text up with the checkbox even if it word-wraps, but any words that wrap will have a large gap */
	/*
	align-items: flex-start;
	line-height: 1.7em;
	*/
}

input[type="radio"]:before
{
	font-size: 100%;
}

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

.fieldslist
{
	/* 5px to offset border-spacing which goes all the way around the table, not just between tds */
	margin-left: -5px;
	margin-right: -5px;
	/* This makes the labels/inputs match the width of the fieldslist container */
	width: calc(100% + 10px);
	min-width: 0;
	max-width: none;
}

.fieldslist > div > *:first-child
{
	padding: 0.4rem 0.5rem;
	min-width: 0;
	width: auto;
}

.fieldslist > div > *:first-child:empty
{
	width: 0;
	border: 0;
	padding: 0;
}

.fieldslist .submitrow span:first-child
{
	width: auto;
}

.fieldslist .submitrow span.status
{
	/* Add space for status text */
	min-width: 35vw;
}

.fieldslist input[type="text"],
.fieldslist input[type="password"],
.fieldslist input[type="email"],
.fieldslist input[type="url"],
.fieldslist input[type="search"],
.fieldslist input[type="number"],
.fieldslist input[type="date"],
.fieldslist input[type="datetime-local"],
.fieldslist input[type="file"],
.fieldslist select,
.fieldslist textarea,
.fieldslist .listbox,
.fieldslist .combobox
{
	min-width: 0;
	/* Override style attribute on element */
	max-width: none !important;
	width: 100% !important;
}

.fieldslist textarea,
.fieldslist .listbox
{
	display: block;
	float: initial;
}

.fieldslist > div > span > *:not(:first-child)
{
	margin-top: 5px;
}

.fieldslist .info
{
	/* Display note beneath input rather than as tooltip */
	display: block;
	margin: 0;
	margin-top: 0.2rem;
	line-height: 1 !important;
	opacity: 1;
	cursor: default;
}

.fieldslist .info:after
{
	/* HACK: Undo the tooltip styles in order to place text after the "!" icon */
	display: inline;
	position: static;
	color: var(--note-text);
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	margin: 0;
	left: auto;
	top: auto;
	right: auto;
	bottom: auto;
	width: auto;
	height: auto;
	transform: none;
	filter: none;
	text-shadow: none;
	box-shadow: none;
	pointer-events: auto;
	transition: none;
	opacity: 1;
	visibility: visible;
	/* New styles */
	content: attr(data-tooltip);
	font-family: var(--tooltip-font);
	font-size: 0.8rem;
	font-weight: normal;
	font-style: normal;
	padding-left: 0.2rem;
	vertical-align: bottom;
}

h3 .info,
.detailslist .info
{
	display: none;
}

.formhint
{
  margin-left: 0;
  margin-right: 0;
}

form .submitdiv.fixed
{
	position: fixed;
	z-index: 50;
	top: auto;
	bottom: 0;
	left: 0;
	width: 100%;
	margin: 0 !important;
	padding: 0 0.5rem;
	height: 2.5rem;
	background: var(--body-bg);
	box-shadow: 0px -1px 3px rgba(0,0,0,0.5);
}

form .submitdiv.fixed .status
{
	margin-left: 0.5rem;
}

/* =============================================== */
/* Image Editor */
/* =============================================== */

.imgeditor input[type="file"]
{
	padding: 0;
}

.imgeditor .external
{
	display: block;
	margin-top: 0;
}

.imgeditor .external > *,
.imgeditor .external input
{
	display: block;
	margin-left: 0;
	margin-top: 0.3rem;
}

.imgeditor .external .button
{
	display: inline-block;
}

/* =============================================== */
/* Rich Text Editor */
/* =============================================== */

.richtext .toolbar
{
	flex-wrap: wrap;
}

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

.richtext .toolbar > span:last-child
{
	padding-right: 0;
}

.richtext .toolbar > span,
.richtext .toolbar button
{
	flex-grow: 1;
}

.richtext .toolbar button
{
	padding-left: 0.1rem;
	padding-right: 0.1rem;
}

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

#pnlEditVideo
{
	/* These get overriden with custom handling, so override them back */
	width: calc(100vw - 0.4rem);
}

dialog.richedit div.fieldslist,
body.guild-member dialog.richedit div.fieldslist
{
	/* These get overriden with custom handling, so override them back */
	margin-left: -5px;
	margin-right: -5px;
	width: calc(100% + 10px);
}

dialog.richedit div.fieldslist input,
#pnlEditLink div.fieldslist input
{
	min-width: 0;
}

dialog.richedit div.fieldslist .button
{
	display: block;
	width: 4rem;
	height: auto;
	margin-left: 0;
}

dialog.richedit div.fieldslist .size > span > *
{
	display: block;
}

#pnlEditImage .filediv
{
	margin-top: 0.5rem;
}

#pnlEditVideo .fieldslist input[name="Width"],
#pnlEditVideo .fieldslist input[name="Height"]
{
	width: 6rem !important;
	max-width: 100%;
}

/* =============================================== */
/* Popup dialogs and menus */
/* =============================================== */

dialog
{
	width: calc(100vw - 1rem);
	min-width: 0;
	max-width: none;
	padding-left: 1rem;
	padding-right: 1rem;
}

dialog.loading:after
{
	left: calc(50% - 10vw);
	top: calc(50% - 10vw);
	font-size: 20vw;
}

dialog .submitdiv button
{
	flex: 1;
	min-width: 0;
	max-width: 50%;
}

.popupmenu.search a
{
	padding: 0.4rem 1rem;
	border-top: 1px solid var(--popupmenuitem-border);
	overflow: hidden;
	text-overflow: ellipsis;
}

dialog.titlebar h3
{
	margin-left: -1rem;
	margin-right: -1rem;
}

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

dialog.picklist .search
{
	display: none;
}

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

.listtable .pages
{
	max-width: 100vw;
}

.listtable .pages .ext
{
	display: none;
}

.listtable .pages li a,
.listtable .pages li span
{
	/* We should have a maximum of 9 buttons so spacing according to viewport */
	padding-left: 2vw;
	padding-right: 2vw;
}

/* =============================================== */
/* Tabbed containers */
/* =============================================== */

.tabbar
{
	flex-direction: column-reverse;
}

.tabbar .tabs
{
	margin-left: 2px;
	margin-right: 2px;
}

.tabbar .tabs li
{
	line-height: 1;
	margin-left: 4px;
}

.tabbar .ops li
{
	margin-left: 8px;
}

.tabbar li:first-child
{
	margin-left: 0;
}

.tabcontent
{
	border-left-width: 0;
	border-right-width: 0;
	padding: 1rem;
}

/* =============================================== */
/* Make pages stretch to fill at least the window if not scrolling */
/* =============================================== */

html
{
	height: 100%;
}

html body
{
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

html body > *
{
	flex-shrink: 0;
	flex-grow: 0;
}

html body > main
{
	flex-grow: 1;
}

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

h3.gamename a
{
	/* This works on mobile but not on tablets probably because tablets still have the sidebar */
	flex-shrink: 0;
}

h3.gamename a.title
{
	/* This works on mobile but not on tablets probably because tablets still have the sidebar */
	flex-shrink: 1;
	min-width: 0;
	margin-right: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

h3.gamename .handle
{
	display: none;
}

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

#site-content > div > header .editbtn
{
	top: 0;
	right: 0.5rem;
}

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

#site-content > #guild-member > header,
#site-content > #guild-character > header
{
	padding: 0.5rem;
}

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

#site-content > #guild-member > header .title,
#site-content > #guild-character > header .title
{
	flex: 1;
	text-align: center;
}

#guild-member section,
#guild-character section
{
	display: block;
	margin-left: 0;
	margin-right: 0;
}

#guild-member .center,
#guild-character .center
{
	display: block;
}

#guild-member .sidebar,
#guild-character .sidebar
{
	display: block;
	padding-top: 1rem;
	border-bottom-right-radius: 0;
}

#guild-member .sidebar .portrait,
#guild-character .sidebar .portrait
{
	width: auto;
	margin-top: 0;
}

/* ----------------------------------------------- */
/* Mobile only menu on the sidebar to hide the buttons and save space. */

#guild-member .sidebar .mobile,
#guild-member .sidebar .icons li.mobile,
#guild-character .sidebar .mobile
{
	display: flex;
}

#guild-member .sidebar .mobile.selected a,
#guild-character .sidebar .mobile.selected a
{
	color: var(--button-selected);
	background: var(--button-selectedbg);
	border-color: var(--button-selectedborder);
}

#guild-member .sidebar .buttons,
#guild-character .sidebar .buttons
{
	display: none;
}

#guild-member .sidebar .buttons.open,
#guild-character .sidebar .buttons.open
{
	display: block;
	margin: 0 auto;
	padding: 0.5rem 0;
	max-width: 20rem;
}

#guild-member .sidebar .buttons .button,
#guild-character .sidebar .buttons .button
{
	margin-left: 0;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	border-left-width: 1px;
	border-left-style: solid;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

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

#guild-member .showcase,
#guild-member .characters,
#guild-character .characters
{
	justify-content: space-around;
	column-gap: 2px;
	row-gap: 8px;
}

#guild-member .bio,
#guild-character .bio
{
	margin-top: 0;
	margin-left: 0.5em;
	margin-right: 0.5em;
	max-width: 100%;
}

#guild-member form.bio,
#guild-character form.bio
{
	margin-left: 0;
	margin-right: 0;
	max-width: 100%;
}

#guild-member .center,
#guild-character .center
{
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

#guild-member h3.ops,
#guild-character h3.ops,
#guild-member .opsedit,
#guild-character .opsedit
{
	width: auto;
}

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

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

#guild-member ul.awardlist,
#guild-character ul.awardlist
{
	margin-left: 0;
	max-width: 100%;
}

#guild-member ul.awardlist p,
#guild-character ul.awardlist p
{
	margin-left: 0;
	padding-left: 0;
}

#guild-member ul.awardlist p.dates,
#guild-character ul.awardlist p.dates,
#guild-member ul.awardlist p.reason,
#guild-character ul.awardlist p.reason
{
	margin-left: 1rem;
}

ul.awardlist span
{
	padding: 0.2em;
	border-top-right-radius: 0.5rem;
	border-bottom-right-radius: 0.5rem;
	background: var(--pageheader-bg);
}

ul.awardlist span a,
ul.awardlist span a:link,
ul.awardlist span a:visited
{
	text-decoration: none;
	color: var(--pageheader-color);
}

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

body.guild-member .submitdiv .status.error,
body.guild-character .submitdiv .status.error
{
	font-size: 0.8rem;
}

#IssueAwardsForm .paired > div.existing
{
	display: none;
}

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

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

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

#guild-member .history
{
	margin-left: 0.1rem;
}

#guild-member .history dd
{
	margin-left: 1rem;
}

#guild-member .history dt.year
{
	margin-left: -0.7rem;
	margin-right: -0.7rem;
}

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

#guild-member .sidebar .icons
{
	justify-content: center;
	max-width: 22rem;
}

#guild-member .sidebar .icons a
{
	font-size: 1.7rem;
}

#guild-member .sidebar .icons .label
{
	font-size: 0.9rem;
}

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

#guild-member .fieldslist
{
	/* Undo previous customization */
	margin-left: -5px;
	margin-right: -5px;
	width: calc(100% + 10px);
}

#guild-member .detailslist
{
	margin-left: 0.5rem;
}

/* HACK: for combined Email/SMS field
#guild-member .fieldslist label[for="SMS"]:not(:first-child)
{
	padding-top: 0.5rem;
}

#guild-member .fieldslist label[for="SMS"]:not(:first-child):before
{
	content: '& ';
}
*/

#guild-member .fieldslist > div.middle > label,
#guild-character .fieldslist > div.middle > label
{
	vertical-align: baseline;
}

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

#guild-member .editshowcase h3:first-of-type
{
	display: none;
}

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

#guild-character .sidebar .portrait .mobile
{
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	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-color);
	background: var(--button-bg);
	border-color: var(--button-border);
}

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

#guild-character h3.divider.mobile
{
	display: block;
	margin-top: 0;
}

#guild-character h3.divider
{
	margin-left: -0.5rem;
}

#guild-character .content
{
	display: flex;
	flex-direction: column;
	margin-left: 1rem;
	border-top: 1px solid;
	margin-top: -1px;
	padding-top: 1rem;
	border-color: var(--fieldth-border);
}

#guild-character .content > .game
{
	order: 1;
}

#guild-character .content > .stats
{
	order: 2;
	margin-top: 0.5rem;
}

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

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

#guild-member .sidebar .buttons.guilds
{
	display: block;
	margin: 0 auto;
	max-width: 22rem;
}

#guild-member .sidebar .buttons.guilds .button .ellipsis
{
	max-width: 100%;
}

/* =============================================== */
/* Application */
/* =============================================== */

#guild-application form
{
	width: 100%;
	max-width: 100%;
	padding: 0.5rem;
	border: 0;
}

#guild-application form .fieldslist
{
	width: auto;
	margin-left: -5px;
}

#guild-application form .fieldslist select
{
	display: block;
	margin-bottom: 5px;
}

#guild-application form .fieldslist button
{
	display: block;
}

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

#site-content > #guild-game > header
{
	display: block;
	padding: 1rem;
}

#guild-game > header .desc
{
	margin: 0;
	margin-top: 0.5rem;
}

#guild-game > header .desc p.buttons > *
{
	flex-grow: 1;
}

#guild-game > header .desc .button
{
	min-width: 0;
}

#guild-game > header .desc p.buttons select
{
	width: 100%;
}

#guild-game > section.edit
{
	margin-right: 0;
}

#guild-game header.edit .buttons
{
	position: static;
	display: flex;
	justify-content: space-between;
	margin-bottom: -1rem;
}

#guild-game section.edit.builtin .fieldslist div > span:nth-child(3) button
{
	padding: 0.4rem 0.4rem;
}

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

#site-content > #guild-game > header.shortened
{
	display: flex;
}

#site-content > #guild-game > header.shortened .desc
{
	margin: 0;
	margin-left: 0.5rem;
}

#site-content > #guild-game > header.shortened .rating
{
	align-self: flex-end;
	margin-left: 1rem;
}

#site-content > #guild-game > header.shortened .rating img
{
	height: 3rem;
}

#site-content > #guild-game > header.shortened .editbtn
{
	margin-top: 0.5rem;
}

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

#guild-game .listtable
{
	width: calc(100vw - 4px);
	max-width: calc(100vw - 4px);
	margin: 0 2px;
	font-size: 0.9rem;
}

/* Doesn't work in a table, unless fixed, but fixed tables don't size correctly
#guild-game .listtable thead th,
#guild-game .listtable tbody td
{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}*/

/* Reduce columns to fit */
#guild-game .listtable thead th:nth-child(7),
#guild-game .listtable thead th:nth-child(8),
#guild-game .listtable tbody td:nth-child(6),
#guild-game .listtable tbody td:nth-child(7)
{
	display: none;
}

#guild-game .listtable tbody td:nth-child(2)
{
	padding-left: 5px;
}

#guild-game .listtable tbody td:nth-child(8)
{
	max-width: 18ch;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

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

#guild-game > section
{
	margin-left: 0.8rem;
	margin-right: 1rem;
}

#guild-game > section,
#guild-game > section .split14
{
	display: block;
}

#guild-game > section .split14 > *:last-child
{
	margin-top: 1rem;
	margin-bottom: 1rem;
}

#guild-game > section .split
{
	display: flex;
}

#guild-game > section .split > *:last-child
{
	margin-top: 0;
}

#guild-game > section .content
{
	margin-right: 0.5rem;
}

#guild-game > section .detailslist
{
	margin-left: 0;
}

#guild-game > section .detailslist,
#guild-game > section .detailslist li,
#guild-game > section .detailslist li b,
#guild-game > section .detailslist li span
{
	display: block;
}

#guild-game > section .detailslist li b
{
	text-align: left;
	background: transparent;
	border: 0;
	border-color: transparent;
	padding: 0;
}

#guild-game > section .detailslist li span
{
	padding: 0;
	margin-bottom: 1rem;
}

#guild-game ul.awardlist span > a:first-child
{
	width: 32px;
}

#guild-game ul.awardlist img
{
	max-width: 32px;
	max-height: 16px;
}

#guild-game ul.awardlist p
{
	margin-left: 32px;
}

#guild-game .listedit textarea,
#guild-game .listedit .listbox
{
	display: block;
	float: initial;
}

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

#guild-games
{
	padding-left: 0;
	padding-right: 0;
}

#guild-games .tierlist section
{
	grid-template-columns: repeat(auto-fill, minmax(150px, 30vw));
	padding: 0.5rem;
}

#guild-games .tierlist .game img
{
	max-width: 30vw;
}

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

#guild-games .opsbar,
#guild-games .opsbar.header
{
	display: block;
	padding-left: 2rem;
	padding-right: 2rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid;
	color: var(--pageheader-color);
	background: var(--pageheader-bg);
	border-color: var(--pageheader-border);
}

#guild-games .opsbar .ops
{
	margin: 0;
	margin-bottom: 0.5rem;
}

#guild-games .opsbar .ops li
{
	flex: 1;
	white-space: nowrap;
}

#guild-games .opsbar .ops li a
{
	padding-top: 0.3rem;
	padding-bottom: 0.3rem;
}

#guild-games .opsbar .ops.right
{
	margin-left: 0;
	margin-right: 0;
}

#guild-games .opsbar .ops.right li
{
	flex-shrink: 0;
	flex-grow: 0;
	margin-left: auto;
}

#guild-games .opsbar .ops li.add.selected a
{
	background: var(--opbtn-hoverbg);
}

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

#guild-games .gamelist
{
	margin-left: 1.5rem;
	margin-right: 1rem;
}

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

#guild-games .addnew
{
	display: block;
	margin: 1rem 0.5rem;
}

#guild-games .addnew .filters
{
	display: block;
	margin: 0;
}

#guild-games .addnew .filters .browse
{
	justify-content: space-between;
}

#guild-games .addnew .filters .browse .button
{
	flex: 1;
	padding-left: 2px;
	padding-right: 2px;
}

#guild-games .addnew .filters .search
{
	margin-top: 0.4rem;
}

#guild-games .addnew .filters .search input
{
	flex: 1;
}

#guild-games .addnew .addlist
{
	margin-left: 0;
	margin-right: 0;
}

#guild-games .addlist.working:after
{
	left: calc(50% - 10vw);
	top: calc(10% - 10vw);
	font-size: 20vw;
}

#guild-games .addnew .pages
{
	max-width: 100vw;
}

#guild-games .addnew .pages .ext
{
	display: none;
}

#guild-games .addnew .pages li a,
#guild-games .addnew .pages li span
{
	padding-left: 2vw;
	padding-right: 2vw;
}

#guild-games .addnew .pages li.ellipsis span
{
	padding-left: 0;
	padding-right: 0;
}

#guild-games div.addnew .sidebar
{
	margin-top: 0.5rem;
	border-top: 1px solid;
	border-color: var(--panel-border);
}

#guild-games div.addnew .sidebar section
{
	padding: 0;
}

/* =============================================== */
/* Home / Dashboard */
/* =============================================== */

#guild-dashboard .grid .editbtn
{
	/* HACK: Shove farther into the footer */
	top: calc(100% + 3rem);
	opacity: 0.7;
}

#guild-dashboard .grid.edit .columns
{
	display: block;
}

#guild-dashboard #site-footer
{
	margin-top: 0;
}

#guild-dashboard #site-footer .content
{
	padding-top: 1rem;
}

#guild-dashboard .left,
#guild-dashboard .right
{
	max-width: none;
}

/* =============================================== */
/* Admin: Pending */
/* =============================================== */

#guild-pending .listtable
{
	width: calc(100vw - 4px);
	max-width: calc(100vw - 4px);
	margin: 0 2px;
	font-size: 0.9rem;
}

/* ----------------------------------------------- */
/* Display note beneath input rather than as tooltip */

#guild-pending .listtable tfoot .info
{
	/* Display note beneath input rather than as tooltip */
	display: block;
	margin: 0;
	margin-top: 0.5rem;
	line-height: normal;
	vertical-align: bottom;
	opacity: 1;
	cursor: default;
}

#guild-pending .listtable tfoot .info:after
{
	/* HACK: Undo the tooltip styles in order to place text after the "!" icon */
	display: inline;
	position: static;
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	margin: 0;
	left: auto;
	top: auto;
	right: auto;
	bottom: auto;
	width: auto;
	height: auto;
	transform: none;
	filter: none;
	text-shadow: none;
	box-shadow: none;
	pointer-events: auto;
	transition: none;
	opacity: 1;
	visibility: visible;
	/* New styles */
	content: ' (' attr(data-tooltip) ')';
	color: var(--text-color);
	font-family: var(--main-font);
	font-size: 0.9rem;
	font-weight: normal;
	font-style: normal;
	vertical-align: bottom;
}

#guild-pending .listtable tfoot textarea
{
	width: 100%;
}

/* ----------------------------------------------- */
/* Alters text by hiding the original and adding new */

body.guild-pending [data-mobile] span,
body.guild-pending .listtable tbody td[data-mobile] span
{
	display: none;
}

body.guild-pending [data-mobile]:after
{
	content: attr(data-mobile);
}

/* ----------------------------------------------- */
/* HACK: Reduce select boxes to arrow + first character in box */
/* TODO: Does this work for any other browser? */
/* TODO: We could replace with control similar to Role in Game page */

#guild-pending .listtable tbody td select
{
	max-width: 2.5rem;
	padding-left: 0.5rem;
}

/* ----------------------------------------------- */
/* Show only game image, not name */

#guild-pending .listtable tbody .mobile
{
	display: inline-block;
}

#guild-pending .listtable tbody td:nth-child(4) a:last-child
{
	display: none;
}

#guild-pending .listtable tbody td:nth-child(4)
{
	text-align: center;
}

#guild-pending .listtable tbody img
{
	max-width: 1.7em;
	max-height: 1.7em;
}