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

p
{
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}

/* Hide tooltips to prevent body from wrapping */
/* They wouldn't display on touch screens anyway (this also hides them on small PCs...) */
.anchor:before,
.anchor:after,
[data-tooltip]:before,
[data-tooltip]:after
{
	content: '';
	display: none;
}

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

:root
{
	--banner-width: 240px;
	--banner-height: 100px;
}

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

#site-header .search
{
	flex: 1.6;
	margin-left: 0.5rem;
	margin-right: 0.5rem;
}

/* =============================================== */
/* General content */
/* =============================================== */

#site-content > #page-content
{
	max-width: none;
	padding: 1rem;
}

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

h3.gamename .opbtn
{
	margin-left: 0.5rem;
}

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

dialog.picklist
{
	width: 98vw;
	height: 80vh;
	margin-left: 1vw;
	margin-right: 1vw;
	padding: 0.5rem;
}

dialog.picklist .closebtn
{
	top: 0.5rem;
	right: 0.5rem;
}

dialog.picklist h3
{
	padding-left: 0.5rem;
}

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

#guild-member .sidebar,
#guild-character .sidebar
{
	margin-right: 0;
}

#guild-member .center,
#guild-character .center
{
	padding-right: 0;
}

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

#guild-member .showcase,
#guild-member .characters,
#guild-character .characters
{
	justify-content: space-between;
}

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

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

#guild-member .opsedit .paired > div,
#guild-character .opsedit .paired > div
{
	margin-left: 0;
	margin-right: 0;
	margin-top: 0.5rem;
}

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

#guild-member .opsedit .paired .listbox,
#guild-character .opsedit .paired .listbox
{
	width: auto;
	max-width: 100%;
}

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

#guild-member .history .reason,
#guild-member .formnotice,
#guild-member .detailslist li span,
#guild-member .notes li,
#guild-character .notes li
{
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}

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

#guild-game > header .desc p.buttons
{
	position: relative;
	margin-left: 3rem;
}

#guild-game > header .desc p.buttons > *:first-child
{
	position: absolute;
	top: 0;
	left: -3rem;
}

#guild-game header.edit .buttons
{
	right: 1rem;
}

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

/* Always hide stats regardless of hidestats button (and hide the button) */
#guild-game .listtable thead th:nth-child(3) > *,
#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(3),
#guild-game .listtable tbody td:nth-child(4),
#guild-game .listtable tbody td:nth-child(5)
{
	display: none;
}

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

#guild-games .gamelist
{
	/*
	width: auto;
	-webkit-column-width: 21rem;
	-moz-column-width: 21rem;
	column-width: 21rem;
	column-gap: 1rem;
	margin-left: 2rem;
	margin-right: 1rem;
	*/
}

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

#guild-dashboard .nav
{
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	grid-gap: 0.5rem;
	padding-top: 1rem;
	color: var(--backdrop-color);
	background: var(--backdrop-bg);
}

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

#guild-dashboard .grid
{
	flex-direction: column;
}

#guild-dashboard .left
{
	order: 2;
	margin: 0 1rem;
}

#guild-dashboard .center
{
	order: 1;
	margin: 0 1rem;
	margin-top: 1rem;
}

#guild-dashboard .right
{
	order: 3;
	margin: 0 1rem;
}

#guild-dashboard .panel
{
	margin: 1rem 0;
}

#guild-dashboard .panel:first-child
{
	margin-top: 0;
}

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

#guild-dashboard .panel.main .buttons
{
	justify-content: space-evenly;
}

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

#guild-dashboard .panel.games > div img
{
	width: 150px; /* must match grid width */
	height: 84px;
}

#guild-dashboard .panel.games > div
{
	display: grid;
	grid-template-columns: repeat(auto-fill, 150px); /* must match img width */
	justify-content: center;
	row-gap: 0.5rem;
	column-gap: 1rem;
}

#guild-dashboard .panel.calendar table
{
	width: 100%;
}

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

#guild-pending .listtable
{
	width: calc(100vw - 1rem);
	margin: 0 0.5rem;
}

#guild-pending .listtable thead th
{
	padding-left: 0;
	padding-right: 0;
	text-align: left;
}

#guild-pending .listtable tbody td
{
	padding-left: 0;
	padding-right: 0;
}

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

#guild-pending .listtable thead th:nth-child(1),
#guild-pending .listtable tbody td:nth-child(1)
{
	padding-left: 0.3em;
	text-align: center;
}

/* We can't use display: none or else colspan doesn't work */
#guild-pending .listtable thead th:nth-child(3),
#guild-pending .listtable tbody td:nth-child(3),
#guild-pending .listtable thead th:nth-child(5),
#guild-pending .listtable tbody td:nth-child(5),
#guild-pending .listtable thead th:nth-child(6),
#guild-pending .listtable tbody td:nth-child(6)
{
	width: 0px;
	max-width: 0px;
	padding: 0px;
	overflow: hidden;
	white-space: nowrap;
}

#guild-pending .listtable tbody td:nth-child(6) select
{
	/* Prevent invisible Role from being sent to server */
	display: none;
}