/* ==========================================================================
   Fagre+ Forums — dense, old-school forum skin over MyBB's default theme.
   Loaded after global.css, so everything here is an override.

   Palette is deliberately neutral: slate greys with one muted blue for links.
   To recolour the whole board, change the variables below and nothing else.
   ========================================================================== */

:root {
	--ink:        #2B2F36;  /* header bar, category strips */
	--ink-soft:   #3C424B;  /* column header strip */
	--ink-line:   #1E2228;
	--page:       #E6E8EB;  /* ground behind the content column */
	--row:        #ffffff;
	--row-alt:    #F5F6F8;
	--row-hover:  #EDEFF2;
	--line:       #D5D8DD;
	--text:       #24272C;
	--muted:      #6B7280;
	--link:       #2E5A87;
	--link-hover: #1D3D5E;
	--head-text:  #E7E9EC;
	--dot-on:     #4A5561;  /* board/thread with new posts */
	--dot-off:    #C3C8CF;  /* read */
}

/* --- page frame ---------------------------------------------------------- */

body {
	background: var(--page);
	color: var(--text);
	font-family: Verdana, Tahoma, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.5;
}

#container {
	background: var(--page);
	color: var(--text);
	font-family: Verdana, Tahoma, Arial, sans-serif;
	font-size: 14px;
	min-width: 0;
}

.wrapper {
	width: 94%;
	min-width: 0;
	max-width: 1180px;
}

#content {
	background: #fff;
	padding: 12px 14px 26px;
	border-left: 1px solid var(--line);
	border-right: 1px solid var(--line);
}

/* --- header bar ---------------------------------------------------------- */

#header {
	background: var(--ink);
}

#logo {
	background: var(--ink);
	padding: 0;
	border-bottom: 1px solid var(--ink-line);
}

#logo .wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 42px;
}

/* Swap MyBB's stock logo for a text wordmark without touching the template. */
#logo a img {
	display: none;
}

#logo > .wrapper > a::after {
	content: "FAGRE+ FORUMS";
	display: inline-block;
	color: #F2F4F6;
	font-family: Georgia, "Times New Roman", serif;
	font-weight: bold;
	font-size: 26px;
	letter-spacing: 0.5px;
	line-height: 42px;
}

#logo ul.menu {
	margin: 0;
	float: none;
}

#logo ul.menu li a {
	color: #C7CCD3;
	font-size: 13px;
	font-weight: bold;
	padding: 0 9px;
	background: none;
}

#logo ul.menu li a:hover {
	color: #fff;
	text-decoration: none;
}

/* --- secondary nav strip ------------------------------------------------- */

#panel {
	background: #F0F1F3;
	color: var(--muted);
	border-bottom: 1px solid var(--line);
	font-size: 13px;
}

#panel a:link,
#panel a:visited {
	color: var(--link);
}

/* MyBB gives .upper its own dark background image; both need clearing or the
   welcome text renders dark-on-dark. */
#panel .upper,
#panel .lower {
	background: #F0F1F3 none !important;
	color: var(--muted);
	border: 0;
	padding: 4px 0;
}

/* The default theme colours this text white for a dark bar; every descendant
   needs resetting, not just the container. */
#panel .upper,
#panel .upper *,
#panel .lower,
#panel .lower * {
	color: var(--muted);
	text-shadow: none;
}

#panel .upper a:link,
#panel .upper a:visited,
#panel .upper a:hover,
#panel .lower a:link,
#panel .lower a:visited,
#panel .lower a:hover {
	color: var(--link);
}

.menu ul {
	font-size: 13px;
}

/* --- tables: the part that carries the old-school feel ------------------- */

.tborder {
	border: 1px solid var(--line);
	padding: 0;
	border-radius: 0;
	box-shadow: none;
	font-size: 14px;
}

/* Column header strip. */
.thead {
	background: var(--ink-soft);
	background-image: none;
	color: var(--head-text);
	border-bottom: 1px solid var(--ink-line);
	padding: 5px 8px;
	font-size: 13px;
	font-weight: bold;
}

.thead a:link,
.thead a:visited,
.thead a:hover,
.thead a:active {
	color: var(--head-text);
}

/* Category strip above a group of boards. */
.tcat {
	background: var(--ink);
	background-image: none;
	color: var(--head-text);
	border-top: 0;
	border-bottom: 1px solid var(--ink-line);
	padding: 4px 8px;
	font-size: 13px;
	font-weight: bold;
}

.tcat a:link,
.tcat a:visited,
.tcat a:hover,
.tcat a:active {
	color: var(--head-text);
}

.trow1 {
	background: var(--row);
	border: 0;
	border-bottom: 1px solid var(--line);
}

.trow2 {
	background: var(--row-alt);
	border: 0;
	border-bottom: 1px solid var(--line);
}

tr:hover > .trow1,
tr:hover > .trow2 {
	background: var(--row-hover);
}

/* Density: the single biggest lever on the "old-school forum" feel.
   MyBB sets 13px further down the cascade than #container, so the table
   needs its own font-size or rows sit a few pixels too tall. */
.tborder td,
.tborder th {
	padding: 5px 9px;
	vertical-align: middle;
	font-size: 14px;
	line-height: 1.4;
}

/* --- links --------------------------------------------------------------- */

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

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

.smalltext {
	font-size: 12px;
	line-height: 1.4;
}

td.trow1 .smalltext,
td.trow2 .smalltext {
	color: var(--muted);
}

/* --- status icons: MyBB ships chunky sprites; we want a small dot -------- */

.forum_status,
.thread_status {
	display: inline-block;
	background-image: none !important;
	background-color: var(--dot-off);
	border-radius: 50%;
	width: 10px;
	height: 10px;
	min-width: 0;
	margin: 0 auto;
	vertical-align: middle;
	box-shadow: none;
}

.forum_status {
	width: 12px;
	height: 12px;
}

.forum_on,
.newfolder,
.newhotfolder {
	background-color: var(--dot-on);
}

.forum_offlock,
.closefolder,
.forum_offlink {
	background-color: var(--dot-off);
	border: 2px solid var(--dot-on);
	width: 8px;
	height: 8px;
}

.dot_folder {
	background-color: var(--link);
}

/* The thread legend under a topic list uses the same dots. */
.thread_legend dd {
	padding: 0 12px 4px 0;
	font-size: 12px;
	color: var(--muted);
}

/* --- forum rows on the index -------------------------------------------- */

.forum_status_wrapper,
td .forum_status {
	display: block;
	margin: 0 auto;
}

.subforums {
	font-size: 12px;
	color: var(--muted);
}

/* --- pagination and buttons ---------------------------------------------- */

.navigation {
	font-size: 13px;
	color: var(--muted);
	padding: 6px 0;
}

.pagination a,
.pagination .pagination_current {
	font-size: 13px;
	padding: 2px 6px;
	border: 1px solid var(--line);
	background: #fff;
}

.pagination .pagination_current {
	background: var(--ink-soft);
	border-color: var(--ink-soft);
	color: #fff;
	font-weight: bold;
}

.button,
input.button,
input[type="submit"],
input[type="button"] {
	background: var(--ink-soft);
	background-image: none;
	border: 1px solid var(--ink);
	color: #fff;
	font-weight: bold;
	font-size: 13px;
	padding: 4px 10px;
	border-radius: 2px;
}

.button:hover,
input.button:hover {
	background: var(--ink);
	color: #fff;
}

/* ==========================================================================
   Thread view — MyBB stacks the author block above each post; the classic
   forum layout puts it in a narrow left column beside the message.
   .post_author / .post_content / .post_controls are siblings, so a grid
   reflows them without touching the post template.
   ========================================================================== */

.post {
	display: grid;
	grid-template-columns: 165px minmax(0, 1fr);
	grid-template-areas:
		"author content"
		"author controls";
	border: 1px solid var(--line);
	background: #fff;
	margin-bottom: 8px;
	overflow: visible;
}

.post_author {
	grid-area: author;
	background: var(--row-alt);
	border-right: 1px solid var(--line);
	border-bottom: 0;
	padding: 8px;
	overflow: hidden;
}

.post_content {
	grid-area: content;
	padding: 7px 10px;
	background: #fff;
}

.post_controls {
	grid-area: controls;
	padding: 5px 10px;
	border-top: 1px solid var(--line);
	background: #FAFBFC;
	overflow: hidden;
}

/* Unstack MyBB's floated author bits now that they own a column, and force a
   fixed order (name, avatar, stats). Left floating, long usernames wrap under
   the avatar and every post ends up a different height. */
.post_author {
	display: flex;
	flex-direction: column;
}

.post_author > div {
	float: none !important;
	width: auto;
	text-align: left;
	margin: 0;
}

.author_information { order: 1; }
.author_avatar      { order: 2; }
.author_statistics  { order: 3; }

.author_avatar {
	margin-top: 5px;
}

.author_avatar a {
	display: inline-block;
}

.author_avatar img {
	width: 48px;
	height: auto;
	border: 1px solid var(--line);
}

.author_information {
	font-size: 13px;
	line-height: 1.35;
}

.author_information strong a {
	font-size: 14px;
	font-weight: bold;
}

.author_statistics {
	margin-top: 5px;
	padding-top: 5px;
	border-top: 1px solid var(--line);
	font-size: 12px;
	color: var(--muted);
	line-height: 1.4;
}

.post_head {
	border-bottom: 1px solid var(--line);
	padding-bottom: 4px;
	margin-bottom: 6px;
	font-size: 12px;
	color: var(--muted);
}

.post_body {
	font-size: 15px;
	line-height: 1.6;
	padding: 2px 0 6px;
}

/* --- privacy-conscious social embeds ----------------------------------- */

.fambam-embed {
	box-sizing: border-box;
	width: min(100%, 560px);
	margin: 8px 0;
	padding: 12px;
	border: 1px solid var(--line);
	border-left: 4px solid var(--ink-soft);
	background: var(--row-alt);
	color: var(--text);
}

.fambam-embed__brand {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 18px;
	font-weight: bold;
	color: var(--ink);
}

.fambam-embed__notice,
.fambam-embed__error {
	margin: 5px 0 9px;
	color: var(--muted);
	font-size: 13px;
}

.fambam-embed__load {
	margin-right: 8px;
}

.fambam-embed__source {
	display: inline-block;
	margin-top: 7px;
	font-size: 12px;
}

.fambam-embed--loading {
	opacity: 0.75;
}

.fambam-embed--loaded {
	padding: 0;
	border-left-width: 1px;
	background: #fff;
	overflow: hidden;
}

.fambam-embed--loaded .fambam-embed__source {
	display: block;
	padding: 6px 9px;
	margin: 0;
	border-top: 1px solid var(--line);
	background: var(--row-alt);
}

.fambam-embed__frame {
	display: block;
	width: 100%;
	border: 0;
	background: #fff;
}

.fambam-embed--landscape .fambam-embed__frame {
	aspect-ratio: 16 / 9;
}

.fambam-embed--portrait .fambam-embed__frame {
	height: min(760px, 78vh);
}

.fambam-embed--document .fambam-embed__frame {
	height: min(680px, 75vh);
}

.fambam-embed__x-target {
	min-height: 120px;
	padding: 1px 8px;
}

@media (max-width: 700px) {
	.fambam-embed {
		width: 100%;
	}

	.fambam-embed__load,
	.fambam-embed__source {
		display: block;
	}
}

.post_meta {
	font-size: 12px;
	color: var(--muted);
}

.post_management_buttons,
.postbit_buttons {
	font-size: 12px;
}

.post_controls a {
	font-size: 12px;
}

/* Quotes and code blocks inside posts. */
blockquote {
	border: 1px solid var(--line);
	border-left: 3px solid var(--muted);
	background: var(--row-alt);
	padding: 5px 8px;
	margin: 6px 0;
	font-size: 13px;
}

.codeblock {
	border: 1px solid var(--line);
	background: var(--row-alt);
	padding: 5px 8px;
	font-size: 13px;
}

/* --- footer -------------------------------------------------------------- */

#footer,
#footer .wrapper {
	background: transparent;
	color: var(--muted);
	font-size: 12px;
	border: 0;
}

#footer a:link,
#footer a:visited,
#footer ul.menu li a {
	color: var(--link);
}

/* ==========================================================================
   Mobile forum — the desktop view stays deliberately dense, while narrow
   screens become a single-column, touch-friendly reading and posting flow.
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

img,
video,
iframe {
	max-width: 100%;
}

.post_body,
.post_body a,
.signature,
.navigation,
.smalltext {
	overflow-wrap: anywhere;
}

@media (max-width: 700px) {
	html {
		-webkit-text-size-adjust: 100%;
	}

	body,
	#container {
		font-size: 14px;
		line-height: 1.5;
	}

	body {
		margin: 0;
		background: #fff;
	}

	.wrapper {
		width: 100%;
		max-width: none;
	}

	#content {
		padding: 8px 0 24px;
		border: 0;
		overflow-x: hidden;
	}

	#content > .wrapper {
		width: auto;
		margin: 0 10px;
	}

	/* Header and account navigation become two easy-to-scan touch rows. */
	#logo .wrapper {
		display: block;
		min-height: 0;
	}

	#logo > .wrapper > a {
		display: block;
		padding: 0 12px;
	}

	#logo > .wrapper > a::after {
		font-size: 20px;
		line-height: 46px;
	}

	#logo ul.menu,
	#panel ul.menu {
		display: flex;
		float: none;
		width: 100%;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	#logo ul.menu {
		overflow-x: auto;
		border-top: 1px solid var(--ink-line);
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	#logo ul.menu::-webkit-scrollbar {
		display: none;
	}

	#logo ul.menu li,
	#panel ul.menu li {
		float: none;
		margin: 0;
		white-space: nowrap;
	}

	#logo ul.menu li a,
	#panel ul.menu li a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 0 12px;
	}

	/* The default theme hangs a 16px sprite icon off each panel link with
	   padding-left: 20px. The 44px touch target above overrides that padding,
	   so the icon ends up behind the label and pinned to the top of the box.
	   Drop the icons on mobile; the labels are the tap target that matters. */
	#panel ul.menu li a {
		background-image: none;
	}

	/* user_links keep the default padding: 0, so without spacing on the row
	   itself the three links run together as one unbroken string. Spacing goes
	   on the list, not the links, so the "(Unread 0, Total 0)" text stays put
	   next to Private Messages. */
	#panel ul.menu {
		column-gap: 6px;
	}

	#panel .lower ul.user_links li a {
		padding: 0 12px;
	}

	#panel .upper,
	#panel .lower {
		padding: 0;
	}

	#panel .upper .wrapper,
	#panel .lower .wrapper {
		padding: 0 10px;
	}

	#panel .welcome {
		display: block;
		padding: 10px 0;
		line-height: 1.5;
	}

	#panel .welcome a {
		display: inline-block;
		padding: 5px 3px;
	}

	#panel .lower .wrapper {
		display: flex;
		flex-wrap: wrap;
		row-gap: 2px;
	}

	#panel ul.menu {
		width: auto;
		flex: 1 1 auto;
		flex-wrap: wrap;
	}

	/* Once user_links wraps onto its own row, right-aligning it just makes the
	   two rows ragged — line them up under the CP links instead. */
	#panel ul.user_links {
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	/* Quick search. The form is a <fieldset id="search"> inside #panel .upper,
	   floated right by global.css. On a narrow screen that float — combined with
	   the full-width input rule below — pushes the welcome line and the
	   login/register links out of place, so the whole thing becomes its own
	   full-width row instead. #quick_search is the hidden login modal, not this
	   form; do not style it here. */
	#panel .upper .wrapper {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	#panel .upper .welcome {
		order: 1;
	}

	#search {
		order: 2;
		display: flex;
		gap: 6px;
		float: none;
		width: 100%;
		/* Fieldsets default to min-inline-size: min-content and refuse to shrink,
		   which is what makes them overflow the header. */
		min-inline-size: 0;
		margin: 0 0 10px;
		padding: 0;
		border: 0;
	}

	/* The generic mobile input sizing below is meant for posting forms; on the
	   header quick search it makes a 42px-tall full-bleed box that dominates
	   the top of the page. Keep it comfortably tappable but visually quieter.
	   The 16px font stays — anything smaller makes iOS Safari zoom on focus. */
	#search input[type="text"],
	#search .textbox {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
		min-height: 34px;
		padding: 4px 8px;
		border-width: 1px;
	}

	#search input[type="submit"],
	#search .button {
		flex: 0 0 auto;
		width: auto;
		min-height: 34px;
		padding: 4px 14px;
	}

	.navigation {
		padding: 7px 0;
		font-size: 12px;
	}

	.navigation img {
		display: none;
	}

	.navigation br {
		display: none;
	}

	.navigation .active::before {
		content: " / ";
		color: var(--muted);
	}

	/* Primary actions no longer fight each other across opposite floats. */
	#content > .wrapper > .float_left,
	#content > .wrapper > .float_right {
		float: none;
		width: 100%;
		margin: 4px 0;
		text-align: left !important;
	}

	.pagination {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
		margin: 6px 0;
	}

	.pagination a,
	.pagination .pagination_current {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 36px;
		min-height: 36px;
		padding: 4px 9px;
	}

	.button,
	a.button,
	input.button,
	input[type="submit"],
	input[type="button"] {
		min-height: 42px;
		padding: 8px 12px;
		font-size: 13px;
		touch-action: manipulation;
	}

	input.textbox,
	input[type="text"],
	input[type="email"],
	input[type="password"],
	input[type="search"],
	input[type="url"],
	select,
	textarea {
		width: 100%;
		max-width: 100%;
		min-height: 42px;
		padding: 8px;
		font-size: 16px;
	}

	input[type="checkbox"],
	input[type="radio"] {
		width: 20px;
		height: 20px;
		vertical-align: middle;
	}

	/* Forum index rows read as compact cards with counts and last activity. */
	.forum-list,
	.forum-list > thead,
	.forum-list > tbody {
		display: block;
		width: 100%;
	}

	.forum-list > thead > tr,
	.forum-list > thead > tr > td {
		display: block;
		width: 100%;
	}

	.forum-list .forum-column-heads {
		display: none;
	}

	.forum-list .forum-row {
		display: grid;
		grid-template-columns: 20px minmax(0, 1fr) auto auto;
		grid-template-rows: auto auto auto;
		padding: 10px;
		border-bottom: 1px solid var(--line);
		background: var(--row);
	}

	.forum-list .forum-row:nth-child(odd) {
		background: var(--row-alt);
	}

	.forum-list .forum-row > td {
		display: block;
		width: auto !important;
		padding: 0;
		border: 0;
		background: transparent;
		text-align: left;
		white-space: normal !important;
	}

	.forum-list .forum-status-cell {
		grid-column: 1;
		grid-row: 1 / 4;
		padding-top: 4px;
	}

	.forum-list .forum-main-cell {
		grid-column: 2 / 5;
		grid-row: 1;
		padding: 0 0 7px 5px;
		font-size: 15px;
	}

	.forum-list .forum-main-cell .smalltext {
		margin-top: 2px;
		font-size: 12px;
	}

	.forum-list .forum-threads-cell,
	.forum-list .forum-posts-cell {
		grid-row: 2;
		margin-left: 5px;
		color: var(--muted);
		font-size: 11px;
	}

	.forum-list .forum-threads-cell {
		grid-column: 2;
	}

	.forum-list .forum-posts-cell {
		grid-column: 3;
	}

	.forum-list .forum-lastpost-cell {
		grid-column: 2 / 5;
		grid-row: 3;
		margin: 7px 0 0 5px;
		padding-top: 7px;
		border-top: 1px solid var(--line);
		color: var(--muted);
		font-size: 11px;
	}

	.forum-list [data-label]::before,
	.thread-list [data-label]::before {
		content: attr(data-label) ": ";
		font-weight: bold;
		color: var(--muted);
	}

	.forum_legend {
		display: none;
	}

	/* Topic listings retain the subject first and move metadata underneath. */
	.thread-list,
	.thread-list > tbody {
		display: block;
		width: 100%;
	}

	.thread-list .thread-column-heads {
		display: none;
	}

	.thread-list .thread-list-title,
	.thread-list .thread-list-title > td {
		display: block;
		width: 100%;
	}

	.thread-list .thread-row {
		display: grid;
		grid-template-columns: 20px minmax(0, 1fr) auto;
		grid-template-rows: auto auto auto;
		padding: 10px;
		border-bottom: 1px solid var(--line);
		background: var(--row);
	}

	.thread-list .thread-row:nth-child(odd) {
		background: var(--row-alt);
	}

	.thread-list .thread-row > td {
		display: block;
		width: auto !important;
		padding: 0;
		border: 0;
		background: transparent;
		text-align: left;
		white-space: normal !important;
	}

	.thread-list .thread-status-cell {
		grid-column: 1;
		grid-row: 1 / 4;
		padding-top: 4px;
	}

	.thread-list .thread-icon-cell {
		display: none;
	}

	.thread-list .thread-subject-cell {
		grid-column: 2 / 4;
		grid-row: 1;
		padding: 0 0 7px 5px;
		font-size: 15px;
		font-weight: bold;
	}

	.thread-list .thread-author-cell {
		grid-column: 2;
		grid-row: 2;
		margin-left: 5px;
		font-size: 11px;
	}

	.thread-list .thread-replies-cell {
		grid-column: 3;
		grid-row: 2;
		margin-left: 10px;
		font-size: 11px;
	}

	.thread-list .thread-lastpost-cell {
		grid-column: 2 / 4;
		grid-row: 3;
		margin: 7px 0 0 5px;
		padding-top: 7px;
		border-top: 1px solid var(--line);
		color: var(--muted);
		font-size: 11px;
	}

	.thread-list .thread-lastpost-cell br {
		display: none;
	}

	.thread-list .trow_sep,
	.thread-list tr:not(.thread-row) > td[colspan] {
		display: block;
		width: 100%;
	}

	.thread_legend {
		display: none;
	}

	/* Posts stack author, message, and controls in reading order. */
	.post {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"author"
			"content"
			"controls";
		margin-bottom: 12px;
	}

	.post_author {
		display: grid;
		grid-template-columns: 44px minmax(0, 1fr);
		grid-template-rows: auto auto;
		gap: 0 9px;
		padding: 8px 10px;
		border-right: 0;
		border-bottom: 1px solid var(--line);
	}

	.post_author > div {
		min-width: 0;
	}

	.author_avatar {
		grid-column: 1;
		grid-row: 1 / 3;
		margin: 0;
	}

	.author_avatar img {
		width: 40px;
		max-height: 48px;
		object-fit: cover;
	}

	.author_information {
		grid-column: 2;
		grid-row: 1;
		font-size: 12px;
	}

	.author_statistics {
		grid-column: 2;
		grid-row: 2;
		margin: 3px 0 0;
		padding: 3px 0 0;
		border-top: 0;
		font-size: 10px;
	}

	.post_content {
		min-width: 0;
		padding: 9px 10px;
	}

	.post_body {
		font-size: 14px;
		line-height: 1.6;
	}

	.post_body img,
	.post_body video,
	.post_body iframe,
	.scaleimages img {
		height: auto;
		max-width: 100%;
	}

	.post_controls {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		padding: 7px 8px;
	}

	.post_controls .postbit_buttons {
		display: flex;
		float: none;
		flex: 1 1 100%;
		flex-wrap: wrap;
		gap: 5px;
	}

	.post_controls .postbit_buttons a {
		display: inline-flex;
		align-items: center;
		min-height: 40px;
		margin: 0;
		padding: 6px 8px;
	}

	blockquote,
	.codeblock {
		max-width: 100%;
		margin: 8px 0;
		overflow-x: auto;
	}

	/* Posting, account, search, and login forms fit without side-scrolling. */
	form[name="input"] > .tborder,
	form[name="input"] > .tborder > tbody,
	form[name="input"] > .tborder > tbody > tr,
	form[name="input"] > .tborder > tbody > tr > td,
	#quick_reply_form > .tborder,
	#quick_reply_form > .tborder > thead,
	#quick_reply_form > .tborder > tbody,
	#quick_reply_form > .tborder > tbody > tr,
	#quick_reply_form > .tborder > tbody > tr > td {
		display: block;
		width: 100% !important;
	}

	form[name="input"] > .tborder > tbody > tr > td:first-child,
	#quick_reply_form > .tborder > tbody > tr > td:first-child {
		padding-bottom: 4px;
		border-bottom: 0;
	}

	#quick_reply_form textarea,
	form[name="input"] textarea {
		width: 100% !important;
		min-height: 180px;
	}

	.sceditor-container,
	.sceditor-container iframe,
	.sceditor-container textarea {
		width: 100% !important;
		max-width: 100% !important;
	}

	.sceditor-toolbar {
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
	}

	.modal {
		width: calc(100vw - 24px);
		max-width: calc(100vw - 24px);
	}

	.blocker {
		padding: 12px;
	}

	#quick_login td {
		display: block;
		width: 100% !important;
	}

	.select2-container {
		width: 100% !important;
		max-width: 100%;
	}

	/* Footer links and legal text stack cleanly. */
	#footer .upper .wrapper,
	#footer .lower .wrapper {
		padding: 0 10px;
	}

	#footer ul.menu {
		display: flex;
		flex-wrap: wrap;
		margin: 0;
		padding: 6px 0;
	}

	#footer ul.menu li {
		float: none;
		margin: 0;
	}

	#footer ul.menu li a {
		display: inline-flex;
		align-items: center;
		min-height: 40px;
		padding: 0 10px 0 0;
	}

	#current_time,
	#copyright {
		display: block;
		float: none;
		width: 100%;
		padding: 4px 0;
		text-align: left;
	}
}

@media (max-width: 420px) {
	#content > .wrapper {
		margin: 0 7px;
	}

	#logo > .wrapper > a::after {
		font-size: 18px;
	}

	.forum-list .forum-row,
	.thread-list .thread-row {
		padding: 9px 7px;
	}

	.author_statistics {
		display: none;
	}

	.fambam-embed {
		padding: 10px;
	}

	.fambam-embed__load {
		width: 100%;
		margin-right: 0;
	}
}