/*
 * ___________.__   __      _____          __
 * \_   _____/|  | |  | __ /  _  \________/  |_  ____
 *  |    __)_ |  | |  |/ //  /_\  \_  __ \   __\/ __ \
 *  |        \|  |_|    </    |    \  | \/|  | \  ___/
 * /_______  /|____/__|_ \____|__  /__|   |__|  \___  >
 *         \/           \/       \/                 \/
 * https://www.elkarte.net
 * © ElkArte Forum contributors
 *
 * INTRODUCTION
 * This is the standard Elkarte theme.
 * This file contains essential layout code only.
 *
 * Colors, gradients, images, etc. are in index_variant.css in the _variant directory
 * All theme variants depend on this layout code for stability.
 * It is better to copy code to a variant CSS file for testing.
 * -------------------------------------------------------
 * $CONTENTS
 *
 *      $CONSTANTS...........CSS Vars for easy updates
 *      $FRONT MATTER........Global page defaults
 *		$GENERAL.............Global resets, clearfixes, etc.
 *		$COMMON..............Common classes to drive you bonkers.
 *		$BBC.................Quotes, code blocks, BBC styles.
 *		$AJAX................The "loading" bar (quick edit, etc).
 *
 *		$MAIN................Forum header, wrapper, and footer.
 *		$MENUS...............Main and secondary menus.
 *		$BREADCRUMBS.........The navigation path breadcrumbs.
 *		$BUTTONS.............Most button strips.
 *		$PAGELINKS...........Page navigation links.
 *
 *		$TABLES..............Generic tables (error log, etc.).
 *		$SETTINGS............Generic lists for settings pages.
 *		$BOARDS..............Board index, sub-boards.
 *      $MESSAGE.............Message (topic) Index
 *		$DRAG-N-DROP.........Post attachment area, including Drag and Drop
 *
 *		$TOPICS..............The display template (topic view), including send.
 *		$EDITOR..............Main editor (posts, events, polls) and topic summary.
 *		$MODERATE............Move topic, split topic, merge topic.
 *      $OTHER...............Miscellaneous items, viewquery, etc
 *
 *		$PROFILE.............The profile areas.
 *		$PERSONAL............The personal messages (PM) areas.
 *		$CALENDAR............Antz (and the calendar).
 *		$STATISTICS..........The statistics centre.
 *		$LIKE STATS..........The like stats area
 *
 *		$HELP................Help pages, help icons and pop-ups, tooltips.
 *		$SEARCH..............Search pages, including memberlist search.
 *		$MEMBERLIST..........The memberlist table.
 *		$LOGIN...............Login and registration, maintenance mode.
 *
 *		$BOXES...............Message boxes (error, warning, info, etc).
 *		$PROGRESS............Nifty progress bars.
 *		$MEDIA...............Experimental media queries.
 */

/* -------------------------------------------------------
 *	$CONSTANTS
 * -------------------------------------------------------
 */
:root {
	/* font size px to rem based on 10px base font (.625em) this results in
	   Xrem = X*10px e.g. .3rem = 3px | 1rem = 10px | 40rem = 400px easy to remember */
	--font9: 0.9rem;
	--font10: 1.0rem;
	--font11: 1.1rem;
	--font12: 1.2rem;
	--font13: 1.3rem;
	--font14: 1.4rem;
	--font15: 1.5rem;
	--font16: 1.6rem;
	--font17: 1.7rem;
	--font18: 1.8rem;
	--font19: 1.9rem;
	--font20: 2.0rem;
	--font21: 2.1rem;
	--font22: 2.2rem;
	--font23: 2.3rem;
	--font24: 2.4rem;
	--font25: 2.5rem;
	--font26: 2.6rem;
	--font27: 2.7rem;
	--font28: 2.8rem;
	--font29: 2.9rem;
	--font30: 3.0rem;

	--quote_height: 19rem;
	--max_width: 132rem;
	--button_height: 1.8;

	/* Font stacks.
	   Set a font-body stack starting with system-ui which should use the existing OS font
       Then -apple-system, BlinkMacSystemFont which are equivalent to system-ui, but used for OSx browsers that lack support
       Then Windows (Segoe UI), Android (Roboto), and *nix running KDE, Ubuntu, Gnome
       Followed by fallbacks droid specific, Helvetica Neue, Arial, sans-serif) */
	--font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
	--font-heading: "Segoe UI Semibold", "Helvetica Neue Medium", system-ui, -apple-system, BlinkMacSystemFont, "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
	--font-mono: SFMono-Regular, ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Monaco, Consolas, "DejaVu Sans Mono", monospace;
}

/* -------------------------------------------------------
 *	$FRONT MATTER
 * -------------------------------------------------------
 */

/* Most pages need a vertical scroll, show it by default to prevent page
   font size changes on screen rotation */
html {
	overflow-y: scroll;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding: 2rem 0 0 0;
}

/* Set a font that will look the mostly the same in all browsers.

   Specifying a 10px (10/16 = .625) base font and 1.35 for line-height for main content.
   This will help people experiencing low vision conditions.
   If the page is zoomed to increase the text size, using a unitless line height value ensures
   that it will scale proportionately. */
html, body {
	font-size: 62.5%;
	font-weight: 400;
	line-height: 1.35;
}

/* Global box sizing, for stabilising fluid layouts.
   Remove margin and padding in all browsers. */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* -------------------------------------------------------
 *	$GENERAL
 * -------------------------------------------------------
 */

/* Width control for top bar, header, main content and footer content.
   root (rem) font size */
.wrapper {
	font-size: var(--font15);
	/* Next controls forum width, when it is not set in admin. */
	width: 90%;
	/* Next limits maximum width on wide screens. */
	max-width: var(--max_width);
	margin: 0 auto;
}

/* Normal, standard links. */
a, a:link, a:visited,
/* Links that open in a new window. */
a.new_win:link, a.new_win:visited {
	text-decoration: none;
}

/* Cursor declared here. Should not be required anywhere else. */
a:hover, a.new_win:hover {
	cursor: pointer;
	text-decoration: underline;
}

body, input, button, select, textarea, .editor {
	font-family: var(--font-body);
}

/* Use a specific demi bold font weight for some areas, less jarring then 700/bold,
   with fallback to default font stack if not available. */
.codeheader, .quoteheader, .expand_pages, .table_head > th, .topic_sorting_row > h3, .topic_name h4 a,
.poster .name, .keyinfo h3 a, .keyinfo h3 a strong, .ui-dialog .ui-dialog-titlebar, .bbc_quote > cite,
#creator dt strong, .settings label, .popup_heading {
	font-family: var(--font-heading);
	font-weight: 600;
	/* Apple specific fixes */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Tables should show empty cells. */
table {
	empty-cells: show;
	font: 90%/130% var(--font-body);
}

/* Default most presentational elements to 1em (not rem) allows parent container to set the size
   Declare these separately to divs to avoid padding and margin problems. */
h1, h2, h3, h4, h5, h6,
ul, ol, li,
dl, dd, dt,
p, fieldset,
form, input, button, select, textarea {
	/* Dont use var(--font#) here */
	font-size: 1em;
	font-weight: normal;
}

/* Fieldsets are used to group elements.
   Declaring as overflow: auto; is probably a good idea. */
fieldset {
	overflow: auto;
	margin: .5rem 0;
	padding: 0.4rem 0.8rem 0.6rem;
	border: 1px solid;
	border-radius: .4rem;
}

h2 + fieldset {
	border-radius: 0 0 .4rem .4rem;
}

/* fieldset title bars, also holds the collapsible arrow */
legend {
	font-size: var(--font16);
	margin-left: 1.6rem;
	cursor: pointer;
}

legend::before, .collapsed legend::before {
	display: inline-block;
	width: 1.6rem;
	height: 1.6rem;
	padding: 0 .5rem;
	content: "";
}

/* Collection of pseudo element clearfixes. */
.category_header::after, .wrapper::after, .editor_wrapper::after,
#main_content_section::after, #main_container::after, .quickbuttons::after,
.attachment_name::after, .attachment_name::before,
#poll_options .options li::after {
	display: block;
	clear: both;
	content: "";
}

/* Simple spacer for between sections */
.separator {
	clear: both;
	margin: .5rem 0;
}

/* Used in JS in place of any inlined &nbsp; */
.breaking_space::before {
	content: "\00a0";
}

/* Set list-style to none by default. Best in most places. */
ul, ol {
	list-style: none;
}

/* Prevent sub and sup from affecting the line height */
sub, sup {
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.5rem;
}

sup {
	top: -0.5rem;
}

/* No image should have a border when linked. */
a img {
	border: 0;
}

/* The following is necessary. */
textarea, .editor {
	line-height: 1.4;
	border: 1px solid;
	border-radius: .4rem;
}

/* Style the different types of inputs to be uniform for all browsers.
   NOTE:
   This does require some browser-specific code to get good results.
   Padding on all types of inputs are set here.
   If specific styling is wanted for some inputs, be aware of browser
   differences when adding custom padding, or it will drive you mental. */

/* Remove the inner border and padding in Firefox. */
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
	padding: 0;
	border-style: none;
}

/* These values are to suppress the browsers `focus ring` which don't match the
   theme (instead we use border colors).  However we still want to allow keyboard
   users to see which button / submit is active.
   Focusing with a keyboard will show an assistive dashed black line on button type elements. */
input[type="submit"]:focus-visible, button:focus-visible, .linkbutton:focus-visible {
	outline: 2px dashed #222222;
}

/* Focusing with a mouse or touch will not change it's indication. */
input:focus:not(:focus-visible), input.input_text:focus, button:focus:not(:focus-visible) {
	outline: none;
}

/* Other text areas we style with border during the :focus event */
textarea:focus, select:focus, .editor:focus {
	outline: none;
}

/* Correct clickable types in iOS and Safari. */
button, [type="button"], [type="submit"] {
	-webkit-appearance: button;
}

/* Declarations for inputs, selects and buttons */
input, .input_text, button, select {
	font-size: var(--font14);
	line-height: 1.4;
	overflow: visible;
	height: 2.5rem;
	padding: 0 .4rem;
	vertical-align: middle;
}

input, button, select {
	text-transform: none;
	border: 1px solid;
	border-radius: .4rem;
}

input:focus, textarea:focus, button:focus, select:focus, .editor:focus {
	border: 1px solid;
}

select {
	overflow: hidden;
	max-width: 95%;
	padding-left: .2rem;
	white-space: nowrap;
	text-overflow: ellipsis;
}

select option {
	padding: 0 .4rem;
}

select[size],
input[type="file"] {
	overflow-y: auto;
	height: auto;
	max-height: none;
}

/* jquery.multiselect */
.select_multiple {
	height: auto;
	min-height: 15rem;
}

input[type="number"] {
	padding: 0 0 0 .4rem;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/* Fill the input with the color swab */
input[type="color"] {
	padding: 0;
}

/* No borders around checkboxes or radio buttons, and middle aligned. */
input[type="checkbox"], input[type="radio"] {
	font-size: var(--font14);
	font-weight: normal;
	width: 1.4rem;
	height: 1.4rem;
	margin: -.5rem .2rem 0;
	padding: .2rem;
	vertical-align: middle;
	border: none;
	background: none;
}

/* Fix search box appearance in iOS */
[type="search"] {
	outline-offset: -.2px;
	-webkit-appearance: none;
}

[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/* Common submit button styling. */
input[type="submit"], button[type="submit"], input[type="button"], button[type="button"],
/* Anchors styled to look like buttons. */
.linkbutton:link, .linkbutton:visited {
	display: inline-block;
	margin-right: 0.2rem;
	margin-left: 0.2rem;
	padding: .2rem .4rem;
	white-space: nowrap;
	border: 1px solid;
	border-radius: .4rem;
}

.linkbutton, .linkbutton:link, .linkbutton:visited {
	font-size: var(--font14);
	position: relative;
	height: 2.5rem;
	line-height: 2.5rem;
	padding: 0 .4rem;
}

/* Hover effects. */
input[type="submit"]:hover, button[type="submit"]:hover, input[type="button"]:hover,
button[type="button"]:hover, .linkbutton:hover {
	cursor: pointer;
	text-decoration: none;
}

.linkbutton.w_icon {
	padding-top: 3px;
}

/* Don't show disabled buttons as active on hover */
input[type=submit][disabled]:hover, input[disabled].input_text, textarea[disabled],
button[disabled], button[disabled]:hover {
	cursor: not-allowed;
	border: 1px solid;
}

/* Use new class that is defined to suit, and with a sensible name. */
.submitbutton {
	display: flex;
	clear: both;
	overflow: visible;
	align-items: center;
	justify-content: flex-end;
	padding: .4rem 0;
}

/* The new "button" */
.topic_name h4 .new_posts, .new_posts, .require_approval {
	font-family: var(--font-body);
	font-size: var(--font11);
	font-weight: bold;
	padding: .1rem .4rem .2rem .4rem;
	border-radius: .2rem;
}

.new_posts:hover {
	text-decoration: underline;
}

.childboards .new_posts {
	font-size: var(--font11);
	padding: .1rem .3rem .1rem;
}

/* Standard horizontal rule.. ([hr], etc.) */
hr {
	overflow: visible;
	box-sizing: content-box;
	height: 0;
	margin: 1.2rem 0;
	border-top: 1px solid;
	border-bottom: 1px solid;
	border-left: 0;
}

/* -------------------------------------------------------
 *	$COMMON
 * -------------------------------------------------------
 */

/* em as italics */
em, .em {
	font-style: italic;
}

/* We use this a lot */
.hide {
	display: none;
}

/* Alternative for u tag. */
.underline {
	text-decoration: underline;
}

/* Floats, overflows, clears */
.floatright {
	float: right;
}

.floatleft {
	float: left;
}

.floatcenter {
	display: block;
	margin: 0 auto;
}

.flow_auto {
	overflow: auto;
}

.flow_flex {
	display: flex;
	overflow: hidden;
	align-items: center;
	flex-wrap: nowrap;
	margin-top: .5rem;
}

/* @todo remove important, currently the fight with ".generic_list_wrapper .additional_row" */
.flow_flex_additional_row, .flow_flex_right, .below_table_data {
	flex: 0 0 auto;
	margin: 0 0 0 auto !important;
	padding-top: .2rem !important;
}

.flow_flex_right {
	order: 2;
}

.flow_hidden {
	overflow: hidden;
}

.clear {
	display: block;
	clear: both;
}

.clear_left {
	clear: left;
}

.clear_right {
	clear: right;
}

/* Since these are purely presentational classes, they should be used sparingly. */
.smalltext {
	font-size: var(--font14);
}

.xsmalltext {
	font-size: var(--font12);
}

.largetext {
	font-size: var(--font18);
}

/* justify-content here allows chaining with a flex container */
.centertext {
	justify-content: center;
	text-align: center;
}

.righttext {
	justify-content: right;
	text-align: right;
}

.lefttext {
	justify-content: left;
	text-align: left;
}

.nowrap {
	white-space: nowrap;
}

.wordbreak {
	word-break: break-all;
}

.nosel {
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}

/* Styles for main headers. */
.category_header, .forum_category .category_header {
	font-size: var(--font18);
	line-height: 1.8;
	letter-spacing: -0.01em;
	text-wrap: balance;
	padding: .2rem .8rem;
	border: 1px solid;
	border-radius: .4rem .4rem 0 0;
}

h1, h2, h3 {
	text-wrap: balance;
}

.forum_category .category_header {
	font-size: var(--font17);
}

/* Styles for subsection headers. */
.secondary_header, .content_category {
	font-size: var(--font16);
	line-height: 2;
	margin-top: .4rem;
	padding: 0 1rem;
	border: 1px solid;
}

/* Category Header icons, chain i-xyz from icons_svg */
h2.hdicon {
	display: flex;
	align-items: center;
}

.hdicon::before {
	display: inline-block;
	width: 2.2rem;
	height: 2.2rem;
	margin: 0 .6rem 0 0;
	content: "";
	vertical-align: text-bottom;
	line-height: 1.8rem;
}

/* Expand/Collapse image in the various headers */
.collapse, .expand {
	float: right;
}

#upshrink {
	border: 0;
}

/* General code for generic divs. Should make them behave. */
.content {
	overflow: auto;
	padding: 0.8rem 1.6rem;
	border: 1px solid;
}

.content p {
	margin: 0 0 .6rem 0;
}

/* Other highlighted text, such as search results. */
.highlight {
	font-size: var(--font16);
	font-weight: bold;
}

.highlight_sub {
	font-size: var(--font16);
	font-weight: 600;
	font-style: italic;
}

/* above/below create list items */
.additional_row {
	padding: .6rem 0;
}

/* The generic wrapper thingy. Used by generic list template */
.generic_list_wrapper {
	overflow: auto;
	margin-top: .4rem;
	padding: .8rem .8rem 1.6rem .8rem;
	border: 1px solid;
	border-radius: .7rem;
}

.generic_list_wrapper .additional_row {
	margin: 1.6rem 0 0 0;
	padding: 1rem 0 0;
	border-radius: 0;
}

.generic_list_wrapper .additional_row.after_title, .generic_list_wrapper .additional_row.top_of_list {
	margin: 0;
}

.generic_list_wrapper .title_bar {
	border-bottom: 1px solid;
	border-radius: 0;
}

/* The .information box is used by the after_title additional row */
.generic_list_wrapper .information .additional_row {
	padding: .6rem 0;
	border: none;
}

.generic_list_wrapper .information {
	margin: 0;
	padding: 0;
	border: none;
	border-bottom: 1px solid;
}

/* Styles used by the auto suggest control. */
.auto_suggest_div {
	font-size: var(--font14);
	position: absolute;
	z-index: 100;
	visibility: hidden;
	border: 1px solid;
	border-radius: 0 0 .4rem .4rem;
}

.auto_suggest_div:focus {
	outline: none !important;
}

.auto_suggest_item, .auto_suggest_item_hover {
	padding: .2rem .4rem;
}

.auto_suggest_item_hover {
	cursor: pointer;
}

/* To ensure the question and the input are on two different lines */
.verification_question label {
	display: block;
	width: 100%;
}

/* -------------------------------------------------------
 *	$BBC
 * -------------------------------------------------------
 */

/* Set a consistent monospace font */
.bbc_code, .bbc_tt, .bbc_pre, .tt, .bbc_code_inline {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
}

/* The "Quote:" and "Code:" header parts... */
.codeheader, .bbc_quote > cite {
	font-size: var(--font13);
	margin-bottom: .8rem;
	padding: .4rem .6rem;
	border-bottom: 1px solid;
}

.bbc_quote > cite {
	display: block;
}

.codeheader {
	margin-top: .6rem;
	margin-bottom: 0;
	border-top: 3px solid;
	border-bottom: none;
}

/* [Select] link to copy code. */
.codeoperation {
	font-weight: normal;
}

/* A quote, perhaps from another post. */
.bbc_quote,
/* A code block - maybe PHP ;) - shared styles. */
.bbc_code {
	font-size: var(--font14);
	overflow: auto;
	margin: 0 0 1.4rem 0;
	padding: .5rem 1rem;
	border: 1px solid;
	border-top: none;
}

.bbc_code_inline {
	font-size: var(--font14);
	margin: 0;
	padding: .1rem .3rem;
	white-space: pre-wrap;
	border: 1px solid;
	border-radius: .2rem;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.bbc_quote {
	margin: .6rem 0 1.6rem 0;
	border-top: 1px solid;
	border-left: 4px solid;
}

/* Expanding quotes */
.quote-read-more {
	position: relative;
	display: flex;
	min-width: 100%;
}

/* Constrain the quote area height.  Use max height so we can have a smooth transition */
.quote-read-more > .bbc_quote {
	overflow: auto;
	width: 100%;
	max-height: var(--quote_height);
}

/* Specific targeting of our quote-show-more checkbox.  100% wide with a gradient to cover/fade the bottom
   of the blockquote */
input[type=checkbox].quote-show-more {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 12rem;
	margin: 0 1px 1px 0;
	padding-top: 9rem;
	cursor: pointer;
	text-align: center;
	appearance: none;
	border-left: .4rem solid;
	border-radius: 0;
}

/* The read moar, with the 100% width clicking anywhere in the quote base will work
   note content: "More" is defined in themes/default/Theme.php controller for localization */
input[type=checkbox].quote-show-more:after {
	font-size: var(--font16);
	font-weight: 600;
}

/* When clicked, hide the checkbox and expand the quote */
input[type=checkbox].quote-show-more:checked {
	display: none;
}

/* max-height 750em is simply to avoid the clipping of any length quote, do not use none as
   it will not allow a smooth expand transition */
input[type=checkbox].quote-show-more:checked + .bbc_quote {
	max-height: 750em;
	transition: 1.5s max-height ease-in;
}

/* Extra code block styling. */
.bbc_code {
	height: auto;
	max-height: 20em;
	resize: vertical;
	white-space: nowrap;
	border-top: 3px solid;
	border-bottom: 3px solid;
}

.bbc_code .tab {
	display: inline-block;
	width: 4ex;
	white-space: pre;
}

/* Styling for BBC tags */
.bbc_size {
	line-height: 1.4;
}

/* BBC callout / alert blocks — [quote box=note|tip|important|warning|caution] */
.bbc_callout {
	margin: .6rem 0 1.6rem 0;
	padding: .6rem 1rem .6rem 1rem;
	border-left: 4px solid;
}

.bbc_callout_title {
	font-weight: bold;
	text-transform: capitalize;
	margin: 0 0 .4rem 0;
	padding: 0;
}

/* the "inherit" declarations allow bbc tag color nesting to work, due to strong,
   anchors and others having a color defined */
.bbc_color a {
	color: inherit;
}

strong, .bbc_strong {
	font-weight: bold;
	color: inherit;
}

.bbc_table {
	font: inherit;
	color: inherit;
}

.bbc_table td {
	font: inherit;
	padding: 0 0.5em;
	vertical-align: top;
	color: inherit;
}

.bbc_table th {
	font: inherit;
	font-weight: bold;
	padding: 0 0.5em;
	color: inherit;
}

/* Styling for bbc tables inside posts */
.inner > .bbc_table_container > .bbc_table,
.messageContent > .bbc_table_container > .bbc_table {
	border-collapse: collapse;
}

.inner > .bbc_table_container > .bbc_table th,
.messageContent > .bbc_table_container > .bbc_table th {
	text-align: center;
}

.bbc_img {
	max-width: 100%;
	border: 0;
}

.bbc_img.floatleft {
	padding: .2rem 1rem .2rem 0;
}

.bbc_img.floatright {
	padding: .2rem 0 .2rem 1rem;
}

.bbc_img.floatcenter {
	padding: .8rem .4rem;
}

/* klipy & giphy images */
img.bbc_img[src*="klipy.com"], img.bbc_img[src*="giphy.com"] {
	max-width: 100%;
	max-height: 25rem;
}

/* bbc links wrapped in [s] */
del .bbc_link:link, del .bbc_link:visited {
	text-decoration: line-through;
}

/* bbc links wrapped in sub / sup */
sup a.bbc_link {
	vertical-align: sub;
}

sub a.bbc_link {
	vertical-align: middle;
}

.bbc_u {
	text-decoration: underline;
}

.bbc_list {
	padding: 0 0 0 3.5rem;
	list-style-type: square;
	text-align: left;
}

.bbc_pre {
	overflow: auto;
}

/* bbc footnotes and their links */
.bbc_footnotes {
	font-size: var(--font13);
	overflow: auto;
	margin-top: .7rem;
	padding: .4rem .5rem .4rem 0;
}

div.bbc_footnotes {
	border-top: 1px solid;
}

sup.bbc_footnotes, sup.bbc_footnotes a {
	font-weight: 700;
}

div.bbc_footnotes .meaction {
	display: inline-block;
}

.footnote_return {
	font-size: var(--font20);
}

/* Shorten url's inside posts. */
a.bbc_link {
	display: inline-block;
	overflow: hidden;
	max-width: 100%;
	vertical-align: bottom;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow-wrap: normal;
}

.bbc_link:hover {
	text-decoration: none;
}

/* use /me in a post */
.meaction::before {
	font-size: var(--font22);
	line-height: 1;
	content: "\270c";
	outline: none;
}

.spoiler {
	padding: 0.3em;
	border: 1px solid;
}

.spoilerheader {
	font-size: var(--font13);
	font-weight: bold;
	cursor: pointer;
}

/* -------------------------------------------------------
 *	$AJAX
 * -------------------------------------------------------
 */

/* The "Loading" bar for quick edit, etc. */
#ajax_in_progress, .ajax_infobar {
	font-size: var(--font19);
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	display: none;
	width: 100%;
	padding: 1.6rem;
	transition: opacity .5s;
	text-align: center;
	opacity: 0;
	border-bottom: 4px solid;
	background-position: .6rem 50%;
	background-size: 2rem 2rem;
}

/* Spinner and close button */
#ajax_in_progress a, #ajax_in_progress span {
	margin-left: 1.6rem;
	text-decoration: underline;
}

#quick_edit_body_container {
	width: 90%;
}

#quick_edit_body_container .editor {
	width: 100%;
	margin-bottom: 1rem;
	padding: .2rem .4rem;
}

#quick_edit_body_container .input_text {
	width: 85%;
}

/* -------------------------------------------------------
 *	$MAIN.
 * -------------------------------------------------------
 */

/* The top Section. */
#top_section {
	border-top: 4px solid;
	border-bottom: 4px solid;
}

#top_section.th_collapse {
	position: sticky;
	z-index: 1000;
	top: 0;
}

/* Very top bar, holds search and login (top_section_notice) forms */
#top_header {
	display: flex;
	justify-content: flex-end;
}

#top_section_notice {
	font-weight: 700;
	flex: 1 1 auto;
	padding: 1rem .8rem 1rem .8rem;
}

#top_section_notice .toggle_login {
	display: inline;
	cursor: pointer;
}

#top_section_notice form {
	width: 100%;
	white-space: nowrap;
}

#password_login {
	display: inline-block;
	vertical-align: middle;
}

/* Search input, search dropdown, search button group */
#search_form_button {
	order: 21;
}

/* Quick Search Form, hidden until search icon is clicked */
#search_form_menu {
	position: absolute;
	z-index: 100;
	top: 0;
	right: 0;
	display: flex;
	visibility: hidden;
	align-items: center;
	justify-content: right;
	opacity: 0;
}

#search_form_menu input, #search_form_menu select, #search_form_menu button {
	line-height: 2;
	height: 3rem;
}

/* This to simply collapse the search form into a single element */
#search_form_menu select, #search_form_menu input, #search_form_menu button[type="submit"] {
	margin-right: -1px;
	border-right: none;
}

#search_form_menu select {
	min-width: 11.5rem;
	border-radius: .4rem 0 0 .4rem;
}

#search_form_menu input {
	border-radius: 0;
}

#search_form_menu button[type="submit"] {
	border-radius: 0;
}

#search_form_menu button[type="button"] {
	border-radius: 0 .4rem .4rem 0;
}

/* Checkbox hack to allow toggling fade in/out of search form w/o any JS */
#search_form_check {
	display: none;
}

#search_form_check:checked ~ #search_form_menu {
	visibility: visible;
	transition: opacity .5s;
	opacity: 1;
}

#search_form_check:checked + #main_menu {
	transition: opacity .5s;
	opacity: 0;
}

#search_form_check + #main_menu {
	visibility: visible;
	transition: opacity .5s;
	opacity: 1;
}

/* The logo and slogan. @todo - Simplify. and use flex */
#header {
	padding: .2rem .2rem 0 .2rem;
}

/* The main title. */
#forumtitle, .rightheader #forumtitle {
	font-size: var(--font30);
	padding: .4rem;
}

.centerheader .forumlink {
	display: none;
}

.rightheader #forumtitle .forumlink {
	float: right;
}

/* Holds the logo and slogan */
#logobox {
	margin: -.8rem auto 0 auto;
	text-align: center;
}

/* Float these items to the right. */
#logobox, .rightheader #logobox {
	float: right;
	max-width: 40%;
	padding: 0 .4rem;
}

.centerheader #logobox {
	width: 100%;
}

.rightheader #logobox, .rightheader #logo {
	float: left;
	padding-bottom: .8rem;
}

.centerheader #logobox, .centerheader #logo, .centerheader #siteslogan {
	display: block;
	float: none;
	margin: 0 auto;
	text-align: center;
}

#siteslogan {
	font-size: var(--font16);
	display: block;
	margin-top: -.4em;
}

.rightheader #logo {
	margin: 0 0 0 .8rem;
}

/* Main forum area. */
#wrapper {
	margin-top: 1.6rem;
	padding: 1.8rem 1.6rem;
	border: 3px solid;
	border-radius: .4rem;
}

/* The user info, news, etc.*/
#news {
	font-size: var(--font14);
	line-height: 1.3;
	padding: 0 0 1.6rem 0;
	vertical-align: top;
}

#news .bbc_link {
	display: inline;
}

#news > h2 {
	font-size: var(--font19);
	font-weight: 700;
	font-variant: small-caps;
	float: left;
	height: 1.6rem;
	margin: -.4rem 1.6rem 0 0;
}

#news > h2::after {
	content: "\2026";
}

#news_line, #news {
	overflow: auto;
	overflow-y: hidden;
	height: 8.0rem;
	min-height: 8.0rem;
	padding: .4rem 1.2rem;
	resize: vertical;
	border: 1px solid;
}

/* The content section, below the news and bread crumbs */
#main_content_section {
	min-height: 18rem;
	padding: 3rem 0 0 0;
}

/* The footer with copyright links etc. */
#footer_section {
	margin: 2.4rem 0 0 0;
	border-top: 6px solid;
}

#footer_section .wrapper {
	padding: 1.2rem .4rem;
}

#footer_section p, #footer_section a {
	font-size: var(--font13);
}

#footer_section li {
	display: inline;
	padding-right: .4rem;
}

#footer_section .copyright {
	font-family: var(--font-body);
	font-size: var(--font13);
	display: inline;
	visibility: visible;
}

#footer_section .rssfeeds {
	float: right;
	margin: auto;
	text-align: center;
	border-radius: 0.4em;
}

#footer_section .rssfeeds i {
	margin: .4rem;
}

#debug_logging {
	width: 90%;
	max-width: 144rem;
	margin: 0 auto;
}

/* -------------------------------------------------------
 *	$MENUS
 * -------------------------------------------------------
 */

/* This section contains code for the main forum menu (#main_menu),
   and for the secondary menus in admin/profile/pm (.admin_menu),
   and for the tertiary menu strip in admin/etc (#adm_submenus).

   Top level <ul> elements have the class or id mentioned above.
   <li> elements are for positioning only (classes are listlevel1, etc).
   Top level links (like main menu buttons) have the class linklevel1.
   Drop menu wrappers are either menulevel2 or menulevel3.
   Drop menu links are either linklevel2 or linklevel3. */

/* Main menu bar: wrapper/background on nav */
#menu_nav {
	display: flex;
	align-items: center;
	padding: 2.4rem .4rem 1.2rem .4rem;
}

#menu_nav > div {
	position: relative;
}

/* Main menu container, on the ul */
#main_menu {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

/* Wrapper for primary admin/profile/etc menus. */
.admin_menu {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 0 0.4rem;
}

.admin_menu .listlevel1 {
	line-height: var(--button_height);
}

/* Show a Dropdown / Disclose Indicator arrow next to the "admin" tabs.  Named
   admin_menu since they are used in profile and other areas, and admin */
.admin_menu .listlevel1.subsections .linklevel1::after {
	line-height: var(--button_height);
	display: inline-block;
	margin-left: 0.4rem;
	content: "";
	transform: translateY(.3rem);
	border: 0.6rem solid;
}

/* Wrapper for secondary admin/profile/etc tab menus, same as above but
   left separate for easy theme customization changes */
#adm_submenus {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-bottom: .4rem;
	padding: 0 .4rem;
}

/* ditto */
.generic_menu {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-start;
	padding: .6rem 0;
	row-gap: .4rem;
}

/* When using the above adm_submenus / generic_menu tabs, this is the content div
   added by GenericMenu.template */
#admin_content {
	clear: both;
	padding-top: .8rem;
}

/* Level 1 button positioning, used on li elements of main_menu
   Bottom padding allows hover outside button to work and allows
   our dropdown menu position to be off button */
.listlevel1 {
	line-height: var(--button_height);
	position: relative;
}

.listlevel1:hover {
	z-index: 6;
}

/* position 10 is hidden, items ordered after this will be 'floated' right */
.listlevel1#button_none {
	order: 10;
	margin-left: auto;
}

/* The My Profile, top header collapse, search buttons on the right
   arbitrary 19/20 order, leaving room for many other "right" buttons */
.listlevel1#button_profile {
	order: 19;
}

.listlevel1#collapse_button {
	order: 20;
}

/* Upshrink image in the page top for the header collapse */
#collapse_button .linklevel1, #search_form_button .linklevel1, #search_form_button_close .linklevel1 {
	display: flex;
	justify-content: center;
	width: calc((var(--button_height) + 1) * 1rem);
	height: calc((var(--button_height) + 1) * 1rem);
	padding: .3rem;
	border: 1px solid;
}

/* For swapping out the icon with a mini of the user's avatar if they have one.
   @TODO: There is probably a cleaner way to make an icon special like this.
   E.g. in principle we could do the same with buddy icons, for example. */
.i-menu-profile::before {
	position: absolute;
	top: -2px;
	left: -8px;
	/* roughly the height of the parent element from line-height to px */
	width: 2.7rem;
	height: 2.7rem;
	border-radius: .4rem 0 0 .4rem;
	background: no-repeat;
	background-size: contain;
}

/* Helper class for the top menu icons, wide screens only */
#main_menu .icon-menu {
	line-height: 2;
	position: relative;
	width: 1.9rem;
	height: 1.9rem;
	transform: translate(0, -.4rem);
}

/* Level 1 Menu bar: link or button. */
.linklevel1 {
	display: block;
	margin: 0 .2rem;
	padding: 0 .6rem;
	white-space: nowrap;
	border: 1px solid;
	border-radius: .4rem;
}

/* Menu hover and focus effects. */
.linklevel1:hover, .listlevel1:hover .linklevel1,
.linklevel2:hover, .listlevel2:hover .linklevel2,
.linklevel3:hover, .listlevel3:hover .linklevel3,
#menu_sidebar .linklevel1:hover, #menu_sidebar .listlevel1:hover .linklevel1 {
	text-decoration: none;
	border: 1px solid;
}

/* Level 1 active button. */
.linklevel1.active, .listlevel1:hover .active {
	font-weight: bold;
	border: 1px solid;
}

/* Hover effects for those buttons. */
.linklevel1.active:hover, .listlevel1:hover .linklevel1.active,
#collapse_button .linklevel1:hover {
	border: 1px solid;
}

/* The next two are the Top level Dropdown / Disclose Indicator arrow next to the name */
#main_menu .subsections .linklevel1::after,
#main_menu .subsections:hover .linklevel1::after {
	display: inline-block;
	margin-left: 0.4rem;
	content: "";
	transform: translateY(.3rem);
	border: 0.6rem solid;
}

/* Levels 2 and 3: drop menu wrapper, hidden until hover or click */
.menulevel2, .menulevel3 {
	position: absolute;
	z-index: 90;
	/* Pull up to slightly overlap the parent */
	top: calc(100% + .4rem);
	visibility: hidden;
	min-width: calc(100% + 3rem);
	padding: 0.6em;
	/* Speed of transition during on/off focus/hover plus a delay for a hover intent */
	transition: 150ms linear 375ms;
	/* Rotate it in to the page to provide a transition element */
	transform: rotateX(-90deg);
	transform-origin: top left;
	border: 1px solid;
	border-radius: .4rem;
}

/* Top pointer of level1 dropdown menu, like a speech bubble pointer */
.listlevel1.subsections::after {
	position: absolute;
	z-index: 90;
	/* 1/2 the diagonal length of this box, the +.7rem is for the menu top offset above) */
	top: calc(100% - (1.4142 * var(--pointersize)) / 2 + .7rem);
	left: 10%;
	display: block;
	width: var(--pointersize);
	height: var(--pointersize);
	content: "";
	transition: 150ms linear 375ms;
	transform: rotate(-45deg);
	opacity: 0;
	border: 1px solid;
	/* Clips the BOTTOM of the rotated square so it does not bleed far into dropdown content */
	clip-path: polygon(40% 60%, 0% 0%, 100% 0%, 100% 100%);
	/* Simple variable to change if you want to change the size */
	--pointersize: 1.2rem;
}

/* turn the drop-down into a drop up menu */
.menulevel2.above {
	top: initial;
	bottom: calc(100% + .4rem);
	transform-origin: bottom left;
}

.listlevel1.subsections.above::after {
	top: initial;
	bottom: calc(100% - (1.4142 * var(--pointersize)) / 2 + .6rem);
	/* Clips the TOP of the rotated square so it does not bleed into dropdown content */
	clip-path: polygon(100% 100%, 100% 0%, 0% 0%, 0% 100%);
}

/* The next two show the menulevel 2/3 flyout and level1 pointer arrow
   Rotate Level 2 menu out of the page, sets visibility */
.no_js .listlevel1:hover .menulevel2,
.no_js .listlevel2:hover .menulevel3,
.listlevel1 .menulevel2.selected,
.listlevel2 .menulevel3.selected {
	visibility: visible;
	transform: rotateX(0);
}

/* This is a gap filler to allow the drop menu to be positioned away from the button
   but still allow the menu to remain exposed while the pointer is in the gap */
.no_js .listlevel1:hover.subsections::before {
	position: absolute;
	top: 100%;
	display: block;
	width: 100%;
	padding-top: 1rem;
	content: "";
}

.no_js .listlevel1:hover.subsections::after,
.listlevel1.open.subsections::after {
	opacity: 1;
}

/* Classes selected, un_selected and open are added by javascript.  Here it's a
   click menu, with no hover intent ambiguity, so we speed up the reveal / rollup */
.listlevel1 .menulevel2.selected,
.listlevel2 .menulevel3.selected,
.listlevel1 .menulevel2.un_selected,
.listlevel2 .menulevel3.un_selected,
.listlevel1.open.subsections::after {
	transition: 100ms ease-in;
}

.listlevel1 .menulevel2.un_selected,
.listlevel2 .menulevel3.un_selected {
	transition: 150ms ease-out;
}

/* Reverse the menu flyout direction for the right side buttons so they stay on page */
.listlevel1#button_profile .menulevel2 {
	right: 0;
	left: auto;
}

/* Level 3: drop menu positioning, move flyout position to the right of
   it's disclose arrow */
.menulevel3 {
	min-width: 20ch;
	margin: -3rem 0 0 calc(100% - .4rem);
}

/* Levels 2 and 3 list style */
.listlevel2, .listlevel3 {
	position: relative;
	white-space: nowrap;
}

/* Levels 2 and 3 links style */
.linklevel2, .linklevel3 {
	display: block;
	padding: .1rem .7rem;
}

.linklevel2:link, .linklevel2:visited, .linklevel3:link, .linklevel3:visited {
	border: 1px solid;
}

/* Level 2: subsection indicator, simple right pointing arrow */
.listlevel2.subsections .linklevel2::after,
#menu_sidebar .subsections .linklevel1::after,
#menu_sidebar .subsections:hover .linklevel1::after {
	font-size: var(--font22);
	position: absolute;
	top: -.5rem;
	right: .6rem;
	content: "\2192";
}

/* Make room for the menulevel3 indicators */
.listlevel2.subsections .linklevel2 {
	margin-right: 3rem;
}

/* Level 2: Simple HR divider between admin/moderation in the dropdown */
#button_admin .listlevel2.subsections {
	margin-top: .8rem;
	padding-top: .4rem;
	border-top: 1px solid;
}

/* Admin menu icons. */
.linklevel2 > img {
	margin: 0 0 0 -.4rem;
	vertical-align: middle;
}

/* Corrections for other menus. */
.linklevel2.help {
	display: inline-block;
}

/* Tricky PM / Likes indicator. Define it carefully,
  just in case someone tries to use this class elsewhere. */
.pm_indicator, .button_indicator {
	font-size: var(--font14);
	font-weight: 700;
	line-height: 1.5;
	position: absolute;
	z-index: 5;
	top: -2rem;
	right: -.4rem;
	float: left;
	padding: 0 0.6rem;
	border: 1px solid;
	border-radius: .8rem .8rem .8rem 0;
}

.button_indicator {
	font-size: var(--font12);
	line-height: 1.5;
	top: -1.4rem;
	border-radius: .6rem .6rem .6rem 0;
}

#dropdown_menu_1 .pm_indicator {
	margin-top: .4rem;
	margin-right: .2rem;
}

/* Hover effects for pm indicator in top menu */
.linklevel1:hover .pm_indicator {
	border: 1px solid;
}

.linklevel1.active:hover .pm_indicator {
	border-bottom: 1px solid;
}

/* Styles for sidebar menus. */
#main_admsection {
	overflow: auto;
}

/* Main sidebar div */
#menu_sidebar {
	position: relative;
	float: left;
	width: 22rem;
	padding: 0 .4rem 0 0;
}

#menu_sidebar .linklevel1 {
	padding: 0 1.6em 0 .8rem;
	white-space: normal;
	border: 1px solid;
	overflow-wrap: break-word;
}

/* The ul that holds each section */
.sidebar_menu {
	padding: .4rem 0 1.1rem 0;
}

/* Same styling for Level 1 and Level 2, more compact than dropdown */
#menu_sidebar .listlevel1 {
	padding: .2rem 0 0 .4rem;
}

/* Flyout menu position next to arrow close to the top for max mouse tunnel */
#menu_sidebar .listlevel1:hover .menulevel2 {
	top: 10%;
	left: calc(100% - .8rem);
}

/* Turn transition speed off so the sidebar flyouts behave */
#menu_sidebar .menulevel2, #menu_sidebar .menulevel3 {
	transition: 0ms;
}

/* No need to show the dropdown indicator since we dont have them here */
#menu_sidebar .listlevel1:hover.subsections::after {
	opacity: 0;
}

#menu_sidebar .pm_indicator {
	font-size: var(--font9);
	font-weight: normal;
	margin: 8% 50% 0 0;
}

/* Used on the sidebar, admin menu dropdown selected area */
.linklevel1.chosen, .linklevel2.chosen {
	font-weight: 600;
}

/* -------------------------------------------------------
 *	$BREADCRUMBS
 * -------------------------------------------------------
 */

.breadcrumb {
	display: flex;
	overflow: hidden;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 1.6rem;
	border-radius: .4rem;
	/* Defines the breadcrumb height */
	--arrow: 3rem;
	row-gap: .6rem;
}

.breadcrumb .crumb {
	font-size: var(--font13);
	line-height: var(--arrow);
	position: relative;
	flex: 0 1 auto;
	flex-wrap: wrap;
	height: var(--arrow);
	padding: 0 .8rem 0 2.4rem;
	text-decoration: none;
	outline: none;
}

.breadcrumb .crumb > a {
	display: block;
	overflow: hidden;
}

/* No arrow on the first link = less padding */
.breadcrumb .crumb:first-child {
	padding-left: 1.8rem;
	border-radius: .4rem 0 0 .4rem;
}

/* Add arrows using rotated cube vs border trick to provide better styling (gradient) opportunities */
.breadcrumb .crumb::after {
	position: absolute;
	z-index: 1;
	top: 0;
	/* Prevent the arrows from getting covered under the next link */
	right: calc((var(--arrow) / 2 - 1px) * -1);
	width: var(--arrow);
	height: var(--arrow);
	content: "";
	/* Scale the rotated square based on it's diagonal length */
	transform: scale(0.7071) rotate(45deg);
	/* 50px (5rem) seems to help prevent hover glitches caused by the border shadow a.k.a why is it doing this? */
	border-radius: 0 .2rem 0 5rem;
}

.breadcrumb > .crumb > a > i {
	margin: 0;
	padding: 0;
}

/* No arrow after the last link */
.breadcrumb .crumb:last-child::after {
	content: none;
}

.breadcrumb .crumb:last-child {
	font-size: var(--font14);
	font-weight: 600;
	padding-right: 1.8rem;
	border-radius: 0 calc(var(--arrow) / 6) calc(var(--arrow) / 6) 0;
}

/* -------------------------------------------------------
 * $BUTTONS
 * This section contains code for the quickbuttons (quote, quick edit, etc)
 * and for the buttonlist class (reply, add poll, notify, etc).
 * These classes share some styling.
 * Declarations are amalgamated where styling is shared.
 * -------------------------------------------------------
 */

/* Styles for the standard button lists. */
.buttonlist {
	display: flex;
	align-items: center;
	padding: 0 .4rem;
}

.buttonlist.rtl {
	flex-direction: row-reverse;
}

.buttonlist li {
	line-height: var(--button_height);
	flex: 0 0 auto;
	margin: 0 0 0 .2rem;
}

.buttonlist li a {
	font-size: var(--font12);
	line-height: var(--button_height);
	padding: 0 1rem;
}

.buttonlist li a.linklevel1 {
	text-transform: uppercase;
}

/* When using icons on a buttonlist (reply mark unread, etc.) use linkclass' => 'buttonlist_icon' */
.buttonlist li a.linklevel1.buttonlist_icon {
	padding-left: 0.5rem;
}

.icon.hamburger_30 {
	display: none;
}

/* The quick buttons like quote, quick edit, etc. */
.quickbuttons {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin: .8rem 0 .6rem auto;
	padding-top: .8rem;
}

.quickbuttons li {
	max-width: 100%;
	white-space: nowrap;
}

/* Follow ups need it a bit different, this button is in the keyinfo line */
.follow_ups {
	margin: -1rem 2.4rem 0 0;
}

.follow_ups .listlevel1 {
	height: 2.4rem;
	padding-bottom: 2.4rem;
}

/* Most of them. */
.quickbuttons .listlevel1 {
	font-size: var(--font13);
	margin-right: -1rem;
}

/* Odd cases. */
.moderation_link, .moderation_link:visited {
	font-weight: bold;
}

.quickbuttons .modified {
	/* This is first since we reversed the row */
	order: 10;
	margin-right: auto;
	padding: 0 0 0 .6rem;
}

.quickbuttons .inline_mod_check {
	margin: .4rem .2rem;
	padding: 0 .4rem 0 .4rem;
	border: 1px solid;
}

.quickbuttons .linklevel1 {
	line-height: var(--button_height);
	padding: 0 1.2rem 0 .6rem;
	cursor: pointer;
	border-radius: 0;
}

/* Radius left end of the first (Quote) button */
.quickbuttons li:first-child a, .quickbuttons li.last a {
	border-radius: .4rem 0 0 .4rem;
}

/* Radius right end of the last button. */
.quickbuttons li:last-child, .quickbuttons li:last-child a {
	border-radius: 0 .4rem .4rem 0;
	margin-right: .2rem;
}

/* Single buttons get all corners rounded. */
.follow_ups .linklevel1, #topic_summary .linklevel1 {
	border-radius: .4rem;
}

/* No icon here. */
.linklevel1.post_options::before,
.follow_ups .linklevel1::before {
	display: none;
}

/* Quickbutton, Buttonlist, and follow ups drop menus, flyout to the left.
   These are the More... flyout menus on the message display page */
.quickbuttons .menulevel2, .buttonlist .menulevel2 {
	right: 0;
	left: auto;
}

.follow_ups .menulevel2 {
	right: auto;
	left: 0;
}

.quickbuttons .menulevel2, .follow_ups .menulevel2, .buttonlist .menulevel2 {
	width: auto;
	padding: 0.5em;
	text-align: left;
}

.follow_ups .listlevel2 {
	width: 20em;
}

.follow_ups .linklevel2 {
	overflow: hidden;
	text-overflow: ellipsis;
}

.quickbuttons .linklevel2 {
	line-height: var(--button_height);
	padding: 0 .4rem;
}

button[type="submit"].quick_quote_button.hide {
	display: none;
}

.quick_quote_button {
	position: absolute;
	z-index: 10000;
}

/* -------------------------------------------------------
 *	$PAGELINKS
 * -------------------------------------------------------
 */

/* The page navigation container, holds page nav and buttons */
.pagesection {
	display: flex;
	clear: both;
	overflow: visible;
	align-items: center;
	flex-wrap: wrap;
	max-width: 100%;
	margin-top: 1.6rem;
	padding: .6rem .4rem .4rem .4rem;
}

.pagesection.rtl {
	flex-direction: row-reverse;
}

/* Main containing UL for pagelinks, note pagelink markup is defined in themes.php */
.pagelinks {
	font-size: var(--font14);
	display: flex;
	align-items: center;
	flex: 1;
	flex-wrap: wrap;
}

.pagelinks li:first-child > a {
	border-radius: .2rem 0 0 .2rem;
}

.pagelinks li:last-child > a {
	border-radius: 0 .2rem .2rem 0;
}

.pagelinks .current_page {
	font-weight: bold;
	padding: .2rem .8rem;
}

.pagelinks .navPages, .pagelinks .current_page, .expand_pages, .small_pagelinks .navPages {
	flex: 0 0 auto;
}

.pagelinks .navPages {
	padding: .2rem .6rem;
	border: 1px solid;
}

.pagelinks .navPages:hover, .pagelinks .current_page {
	text-decoration: none;
	border: 1px solid;
}

/* Some gaps between the page link teeth */
.linavPages {
	margin: 0 .4rem 0 0;
}

/* Keep the topic's top page navigation visible while scrolling long topics.
   Background color comes from the theme variant files. */
nav.pagesection:has(+ #forumposts) {
	position: sticky;
	top: 0;
	z-index: 10;
	margin-top: 0;
	padding-block: .4rem;
}

/* When the top header is collapsed (#top_section.th_collapse) it is itself sticky,
   so the page navigation must stick just below it.  The exact height is measured
   by JS (index.template.php) into --collapsed_header_height; the fallback is a
   close approximation of the collapsed header height. */
body:has(#top_section.th_collapse) nav.pagesection:has(+ #forumposts) {
	top: var(--collapsed_header_height, 7rem);
}

/* Button list in a page section (flexbox), "float" right */
.pagesection .buttonlist {
	margin-left: auto;
}

/* Horizontal ellipsis */
.expand_pages {
	font-size: var(--font16);
	min-width: 2.4rem;
	cursor: pointer;
	text-align: center;
}

.next_page, .previous_page {
	padding: 0 .2rem;
	text-transform: capitalize;
}

#pages_scroll_left, #pages_scroll_right {
	position: absolute;
	top: 0;
	margin: 0;
}

/* Used on message index, applied to ul */
.small_pagelinks {
	display: flex;
	float: right;
	align-items: center;
}

/* our buddies &laquo; &raquo; */
.small_pagelinks li:first-child::before, .small_pagelinks li:last-child::after {
    width: var(--font12);
    height: var(--font12);
    content: ""; /* Was \2B9E; and \2B9C; */
    display: inline-block;
    background-color: currentColor;
}

.small_pagelinks li:last-child::after {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l16 10L4 22l4-10z'/%3E%3C/svg%3E") no-repeat center / 100%;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M4 2l16 10L4 22l4-10z'/%3E%3C/svg%3E") no-repeat center / 100%;
}

.small_pagelinks li:first-child::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 2l-16 10L20 22l-4-10z'/%3E%3C/svg%3E") no-repeat center / 100%;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M20 2l-16 10L20 22l-4-10z'/%3E%3C/svg%3E") no-repeat center / 100%;
}

.small_pagelinks li {
	position: relative;
	flex: 0 0 auto;
}

/* Used to define gap between page numbers */
.small_pagelinks .navPages {
	font-size: var(--font14);
	padding: 0 .2rem;
}

/* Globally accessible top/bottom links. */
#gotop, #gobottom {
	font-size: var(--font30);
	position: fixed;
	z-index: 9;
	bottom: 50%;
	left: 0;
	height: 2.5em;
	padding: 0.6em 0.1em 0 0.1em;
	transform: translateZ(0);
	border: 1px solid;
	border-bottom: none;
	border-radius: 0 2rem 0 0;
	backface-visibility: hidden;
}

#gobottom {
	top: 50%;
	border-top: none;
	border-radius: 0 0 2rem 0;
}

#gotop:hover, #gobottom:hover {
	text-decoration: none;
}

/* Skip header navigation link, access with back tab, hidden until then. */
#top {
	font-size: var(--font16);
	font-weight: bold;
	position: absolute;
	z-index: 1000;
	top: -15rem;
	left: 4.5rem;
	padding: 1.5rem 3rem;
	transition: top .5s ease-out 0s, background 1s linear 0s;
	border: 4px solid;
	border-radius: 0 0 .4rem .4rem;
}

#top:focus {
	top: -.4rem;
}

/* -------------------------------------------------------
 *	$TABLES
 * -------------------------------------------------------
 */

/* A general table class. */
.table_grid {
	width: 100%;
	margin: 0;
	border-spacing: 0;
	border-collapse: collapse;
	border: 1px solid;
	border-top: none;
}

.table_head > th {
	font-size: var(--font15);
	font-weight: bold;
	padding: .4rem .8rem;
	text-align: left;
	border-top: 1px solid;
	border-bottom: 3px solid;
}

.table_head > th.centertext, .table_head > td.centertext {
	text-align: center;
}

/* it's either this level of targeting, or the use of !important
   most tables want the checkbox vertically centered */
#admin_form_wrapper .table_grid thead th > input[type="checkbox"],
#admin_form_wrapper .table_grid tbody td > input[type="checkbox"] {
	vertical-align: middle;
}

/* Basic cells. */
.table_grid td {
	padding: .4rem .8rem;
	border-bottom: 1px solid;
}

.table_grid textarea {
	width: 100%;
}

.table_grid .statsbar div {
	display: none;
}

/* Some grid helpers for tables col widths and divs */
.grid4 {
	width: 4%;
}

.grid8 {
	width: 8%;
}

.grid17 {
	width: 17%;
}

.grid20 {
	width: 20%;
}

.grid25 {
	width: 25%;
}

.grid30 {
	width: 30%;
}

.grid33 {
	width: 33%;
}

.grid40 {
	width: 40%;
}

.grid50 {
	width: 50%;
}

.grid60 {
	width: 60%;
}

/* For Errors.template.php. */
#errorfile_table .current {
	font-weight: bold;
	border: 1px solid;
}

/* -------------------------------------------------------
 * $SETTINGS
 * -------------------------------------------------------
 */

/* Lists - settings use these a lot. */
.settings {
	clear: right;
	overflow: auto;
	margin: 0 0 1rem 0;
}

.settings dt {
	float: left;
	clear: both;
	width: 45%;
	min-height: 2.5rem;
	margin: 0 0 1rem 0;
}

.settings dd {
	float: right;
	overflow: auto;
	width: 55%;
	min-height: 2.5rem;
	margin: 0 0 .3rem 0;
	padding: .2rem .5rem .2rem .5rem;
}

.settings dd input[type="checkbox"] {
	min-height: 2.4rem;
}

.settings img {
	max-height: 2.4rem;
	margin: 0 1rem 0 0;
	vertical-align: middle;
}

.settings textarea {
	width: 85%;
	padding: 0 0.5em;
}

.settings label {
	vertical-align: top;
}

.settings .smalltext {
	display: inline-block;
	padding-left: 1.6rem;
}

.settings dd .linkbutton:link {
	margin: 0;
}

/* -------------------------------------------------------
 *	$BOARDS
 * -------------------------------------------------------
 */

/* The small stats, under upper breadcrumbs when the info centre stats is off. */
#index_common_stats {
	font-size: var(--font13);
	margin: 0 .8rem .4rem .8rem;
}

.forum_category, .content_category {
	border-radius: .4rem .4rem 0 0;
}

/* The board categories and newsfader - some shared styling. */
.forum_category {
	clear: both;
	margin: 0 0 1.6rem 0;
}

/* Grid layout specifics, separated for easy modding */
.category_boards .board_row {
	display: grid;
	min-height: 9rem;
	grid-template-columns: [bicon] 7.5rem [info] 1fr [avatar] 6.5rem [latest] 30% [stats] minmax(8rem, 12rem) [col-end];
	grid-template-rows: [primary] auto [children] auto;
}

/* Place the padding and height inside the grid cells to allow per cell background fill */
.category_boards .board_icon, .category_boards .board_info, .category_boards .board_avatar,
.category_boards .board_latest, .category_boards .board_stats {
	height: 100%;
	padding: 1.2rem 0 .6rem 0;
}

.category_boards .board_icon {
	grid-column: bicon;
	grid-row-start: primary;
	place-self: start center;
}

.category_boards .board_info {
	grid-column: info;
	grid-row-start: primary;
	padding: 1.2rem .4rem .6rem 0;
}

.category_boards .board_avatar {
	padding-top: 1.6rem;
	justify-self: center;
	grid-column: avatar;
	grid-row-start: primary;
	place-self: start center;
}

.category_boards .board_latest {
	overflow: hidden;
	grid-column: latest;
	grid-row-start: primary;
}

.category_boards .lastpost_link {
	overflow: hidden;
	text-overflow: ellipsis;
	overflow-wrap: anywhere;
}

.category_boards .board_lastposter {
	display: block;
	margin-top: .25rem;
}

.category_boards .board_stats {
	display: flex;
	justify-content: center;
	grid-column: stats;
	grid-row-start: primary;
	text-align: right;
}

/* Tabular figures keep the count / date columns from jittering in width */
.board_stats, .topic_stats, .lastpost, .board_lasttime, .html_time {
	font-variant-numeric: tabular-nums;
}

.childboard_row {
	font-size: var(--font13);
	grid-column-start: info;
	grid-column-end: col-end;
	grid-row-start: children;
}

/* Styles for the grid content */
.board_icon {
	display: block;
	width: 4.5rem;
	height: 4.5rem;
}

.board_info {
	font-size: var(--font14);
	margin-bottom: .6rem;
	padding: 0 8px;
	border-right: 1px solid;
}

.board_name {
	font-size: var(--font17);
}

/* Stretched link: make the board name link cover the entire info cell so the
   row hover has a matching, generous click target.  The containing block is
   the .board_info cell (position: relative); any other links in the cell
   (moderators, description, unapproved links) are lifted above the overlay. */
.category_boards .board_info {
	position: relative;
}

.category_boards .board_info a {
	position: relative;
	z-index: 1;
}

.category_boards .board_name > a:first-child {
	position: static;
}

.category_boards .board_name > a:first-child::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
}

.moderators {
	font-size: var(--font14);
}

.board_avatar {
	padding-top: .4rem;
}

.board_avatar .avatar {
	width: 5rem;
	max-height: 5rem;
	object-fit: scale-down;
}

.board_latest {
	font-size: var(--font14);
	padding: 0 .8rem;
}

.lastpost_link, .board_lastposter, .board_lasttime {
	overflow: hidden;
	white-space: pre;
}

.lastpost_link > a {
	font-size: var(--font15);
}

.board_lasttime {
	display: inline;
}

.board_row,
.forumposts > li,
.content_category > div, .content_category > li {
	border: 1px solid;
}

.board_row {
	margin-bottom: .2rem;
	transition: background-color .2s ease-in-out;
}

/* Strengthen the unread/new-post board title */
.board_row:has(.i-board-sub) .board_name a,
.board_row:has(.i-board-new) .board_name a {
	font-weight: 600;
}

.childboards {
	height: 100%;
	padding: .4rem 0 .4rem 0;
	border-top: 1px solid;
}

.childboards > li {
	display: inline-block;
	padding: .6rem .8rem .4rem .8rem;
	margin: 0 .2rem;
}

.childboards li:nth-child(n+2) {
	padding: .2rem .8rem;
	border: 1px solid;
	border-radius: 1rem;
}

.childboard_row h4, .board_new_posts {
	font-weight: 700;
}

.category_header .chevricon {
	padding-top: .4rem;
}

/* The posting icons and mark read button. */
#posting_icons {
	display: flex;
	align-items: center;
	margin: 0 0 1.6rem .4rem;
}

#posting_icons p {
	font-size: var(--font13);
	line-height: 1.25;
	display: table-cell;
	padding: 0 .4rem;
}

/* Styles for the info center on the board index. */
#upshrinkHeaderIC .basic_row {
	margin-top: .1rem;
	padding: .8rem 1.3rem;
	border: 1px solid;
}

/* Upshrink image in the general category headers */
#category_toggle, #category_toggle_more, #upshrink_header {
	border-radius: .2rem;
}

.ic_section_header {
	font-size: var(--font15);
	margin: 0 0 .8rem 0;
	padding: 0 0 .4rem 0;
	border-bottom: 1px solid;
}

#ic_recentposts, #ps_recentposts, #ps_recenttopics {
	font-size: var(--font13);
	width: 95%;
	margin: 0 auto;
}

#ps_recentposts .norecent, #ps_recenttopics .norecent {
	padding: 1.6rem;
	text-align: center;
}

#ic_recentposts td, #ic_recentposts th,
#ps_recentposts td, #ps_recentposts th,
#ps_recenttopics td, #ps_recenttopics th {
	overflow: hidden;
	max-width: 4rem;
	padding: .12em .4rem;
	text-overflow: ellipsis;
}

#ic_recentposts td, #ps_recentposts td, #ps_recenttopics td {
	border-top: 1px solid;
}

/* Generic info center P */
.inline {
	font-size: var(--font13);
	padding: 0 .2rem;
}

/* Sort topics container on the message index, recent, etc */
#sort_by {
	font-size: var(--font14);
	display: flex;
	align-items: center;
	height: 3.5rem;
	margin-left: auto;
	border: 2px solid;
	border-bottom: none;
	border-radius: .5rem .5rem 0 0;
}

#sort_by.topic_sorting_recent {
	border: 1px solid;
	border-bottom: none;
}

#topic_sorting #sort_by {
	transform: translateY(.7rem);
}

#sort_by > li {
	padding: 0 .8rem;
}

.i-sortdown::before, .i-sortup::before {
	vertical-align: text-top
}

/* Sort topics dropdown, flyout to the left, positioned directly under it's control */
.no_js .listlevel1:hover #sortby {
	transform: translateX(50%) rotateX(0deg);
}

#sortby {
	right: calc(100% - 4rem);
	left: auto;
	transform: translateX(50%) rotateX(-90deg);
}

/* Checkbox when quick moderation is set to checkbox, tweak to align */
#unread_sort #sort_by input[type="checkbox"] {
	margin-right: .8rem;
}

/* We need to allow the menu to show, these are the containers that hold the sort_by container */
#unread_sort, #topic_sorting {
	overflow: visible;
}

#topic_sorting.flow_flex {
	margin-top: 0;
}

/* Message index, move the sort tab down to the form */
.generalinfo #topic_sorting #sort_by {
	transform: translateY(.9rem);
}

/* -------------------------------------------------------
 *	$MESSAGE ... Styles for the message (topic) index.
 * -------------------------------------------------------
 */

/* The board description and who-is-viewing items above the main listing. */
#description_board {
	margin: 1.1rem 0 0 0;
	border-radius: .4rem .4rem 0 0;
}

#description_board .generalinfo, #forumposts .generalinfo {
	margin: 0 0 .3rem 0;
	padding: .4rem .4rem .4rem 1.2rem;
	border: 1px solid;
}

/* Applied to the ul of the topic listing page */
.topic_listing {
	width: 100%;
}

/* Each li defined as a grid, since it's single line could use flex here as well */
.topic_listing > li {
	display: grid;
	border: 1px solid;
	border-bottom: 0;
	grid-template-columns: [topic_icon] 5rem [topic_info] 1fr [topic_latest] 35rem [topic_stats] 15rem [topic_moderation] 7.5rem;
	grid-template-rows: auto;
}

/* The quick topic area is like the topic listing, it's sits at the top */
#quicktopic > li {
	display: grid;
	align-content: center;
	grid-template-columns: [topic_icon] 5rem [topic_title] minmax(15rem, auto) [topic_subject] minmax(0, 1fr);
	grid-template-rows: auto auto;
	grid-template-areas:
		"topic_icon topic_title topic_subject"
		"editor editor editor";
}

#quicktopicbox .postarea2, #quicktopicbox .postarea {
	padding: 1rem;
}

#quicktopicbox {
	grid-area: editor;
}

#quicktopic_title {
	padding: .6rem 1.2rem .6rem 1.2rem;
	font-weight: 600;
	grid-area: topic_title;
}

#quicktopic_subject {
	max-width: 100%;
	margin: 1rem;
	grid-area: topic_subject;
}

/* Container, holds the topic icon and fred */
.topic_icons {
	position: relative;
	padding: 0 .5rem;
	grid-column-start: topic_icon;
	place-self: center start;
}

.topic_icons > img {
	max-width: 1.8rem;
}

/* Indicator if you posted in this topic — absolutely positioned as a small badge */
.fred {
	position: absolute;
	bottom: 1.5rem;
	right: -0.75rem;
}

.fred::before {
	max-width: 1.2rem;
}

/* Container, holds topic name, starter, small page links and locked/sticky */
.topic_info {
	height: 100%;
	padding: .6rem 1.2rem .6rem 1.2rem;
	border-right: 1px solid;
	grid-column-start: topic_info;
}

.topic_name h4 {
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.topic_starter {
	font-size: var(--font13);
	opacity: .7;
	line-height: 1.4;
}

/* Container, Holds last poster and time, link to end */
.topic_latest {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: var(--font14);
	height: 100%;
	padding: .4rem .8rem;
	overflow: hidden;
	grid-column-start: topic_latest;
}

.topic_latest .board_avatar {
	flex-shrink: 0;
}

/* Text block holding timestamp and poster name */
.topic_latest_info {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	line-height: 1.5;
}

.topic_latest_info > span {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.topic_latest.relative {
	padding: .4rem .8rem;
}

.topic_latest .i-last_post {
	flex-shrink: 0;
	margin-left: auto;
}

/* Container, Holds the message stats */
.topic_stats {
	font-size: var(--font13);
	line-height: 1.4;
	grid-column-start: topic_stats;
	place-self: center end;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: .25rem;
	padding-right: .8rem;
}

.stat-item {
	display: flex;
	align-items: center;
	gap: .3rem;
	white-space: nowrap;
}

/* Container, holds moderation checkbox or icons */
.topic_moderation, .topic_moderation_alt {
	height: 100%;
	grid-column-start: topic_moderation;
}

.topic_moderation {
	padding: .8rem 1rem;
	place-self: center center;
}

.topic_moderation_alt {
	place-self: center center;
}

.topic_moderation_alt a {
	line-height: 1.4;
	padding: 0 .12em;
}

.topic_listing .warningbox {
	margin-bottom: 0;
}

/* Message index icons, topic status & quick moderation */
.topicicon::before {
	display: inline-block;
	width: 1.8rem;
	height: 1.8rem;
	content: "";
}

.topicicon {
	vertical-align: middle;
}

/* sticky / locked icons for the upper right of the topic_info div */
.sticky_row .topic_info::before,
.locked_row .topic_info::before,
.sticky_row .topic_details::before,
.locked_row .topic_details::before,
.locked_row.sticky_row .topic_info::before,
.locked_row.sticky_row .topic_info .topic_name::before {
	position: relative;
	top: -.5rem;
	right: -.5rem;
	float: right;
	width: 1.6rem;
	height: 1.6rem;
	padding: 0 .1rem;
}

/* Actions and icons below the message listing */
#qaction_bar.sticky {
	position: sticky;
	z-index: 10;
	bottom: 0;
	padding: .8rem 0;
	border: 1px solid;
}

.qaction_row {
	display: flex;
	align-content: center;
	justify-content: flex-end;
	padding: .8rem;
}

.qaction_row > label {
	padding-top: .2rem;
}

#message_index_jump_to.qaction_row {
	float: right;
	width: 50%;
}

#topic_icons {
	float: left;
	width: 100%;
	margin-top: 1rem;
	padding: .8rem 1.2rem;
	border: 1px solid;
	border-radius: .4rem;
}

#topic_icons p {
	line-height: 2;
	padding: 0 .4rem;
}

.jump_to_header {
	padding: 0 .4rem;
	border: none;
}

/* -------------------------------------------------------
 *	$TOPICS ... The display template (topic view)
 * -------------------------------------------------------
 */

/* Events and poll information */
.linked_events {
	padding: 1.2rem 0;
}

.edit_event {
	margin: 0 .4rem 0 0;
	vertical-align: middle;
}

#poll, #edit_poll {
	overflow: hidden;
	margin-bottom: 3rem;
}

#poll_main #question, #poll_main .poll_main input {
	margin-left: 3rem;
}

#poll_main .poll_main li {
	margin: .2rem 0;
	padding-left: 3rem;
}

#poll_main .poll_main, dl.poll_options {
	overflow: hidden;
	padding: 0 0 .8rem .8rem;
}

#poll_main ul {
	margin-top: .8rem;
}

#poll_main, #poll_options, #poll_reset {
	clear: both;
	overflow: hidden;
	padding: .6rem;
}

#poll_options .options {
	overflow: auto;
	margin: 0 0 3rem;
	padding: .8rem 3rem 0 2.5rem;
	border-top: 1px solid;
}

#poll_options .poll_options dd {
	width: 65%;
}

#poll_options .poll_options dd input {
	margin-left: 0;
}

#poll_options .poll_options dt {
	width: 33%;
	padding: 0 0 0 1.2rem;
}

#poll_options > dl.stats {
	width: 100%;
	border: none;
}

#pollmoderation {
	display: flex;
	overflow: auto;
	align-items: center;
	margin: 0;
	padding: 0 0 1.4rem 0;
}

#pollquestion {
	padding: 0 0 .6rem 1.4rem;
}

.pollvote {
	padding: 0 1rem 1rem 1rem;
}

.poll_gradient {
	height: .75em;
	border: 1px solid;
	border-radius: .4rem;
}

/* The MAIN post container, holds one entire post including .poster
   and all the postarea data (which is another grid, see .postarea) */
.post_wrapper {
	display: grid;
	grid-template-columns: [poster] minmax(0, 22.5rem) [postarea] 1fr;
	grid-template-rows: auto auto;
	grid-template-areas:
	"keyinfo_header keyinfo_header"
	"poster postarea";
}

/* When hidden poster area, use single column grid */
.post_wrapper2 {
	display: grid;
	padding-top: .6rem;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto;
	grid-template-areas:
	"keyinfo_header"
	"postarea";
}

aside.poster, #quickreplybox .poster, #quicktopicbox .poster {
	grid-area: poster;
}

#quickreplybox .poster, #quicktopicbox .poster {
	/*overflow: hidden;*/
}

/* Poster container, holds mugshot, flyout, poster info etc */
.poster {
	font-size: var(--font13);
	display: flex;
	align-items: center;
	flex-direction: column;
	padding-top: .4rem;
}

/* li lines in poster, could use flex / flex row here */
.poster .listlevel1 {
	line-height: 1.667;
	width: 100%;
	padding: 0 .6rem;
	text-align: center;

}

/* to overcome the PM indicator when it's on */
.poster li.listlevel1:hover {
	z-index: 20;
}

.poster .name {
	font-size: var(--font17);
	overflow: hidden;
	/* Enough room for a two line name, truncated ... */
	max-height: 4.5rem;
	padding-bottom: .3rem;
	white-space: normal;
	text-overflow: ellipsis;
	word-break: normal;
}

.poster .poster_avatar {
	margin-top: .2rem;
}

/* No border around the poster name on hover */
.linklevel1.name:hover, .poster:hover a.name {
	border: none;
}

.linklevel1.name:hover {
	text-decoration: underline;
}

/* Start of nifty flyout menu for the poster info.
   Note: this can be a bit particular with input elements, links, icons */
.poster .menulevel2 {
	top: calc(100% + .2rem);
	text-align: left;
}

/* Top speech pointer needs to be shifted */
.poster .listlevel1.subsections::after {
	top: calc(100% - .4rem);
	left: 45%;
}

/* Dropdown `business card` grid, left is avatar, right is information */
.poster_div_container {
	display: grid;
	grid-template-columns: [poster] 13.5rem [details] 27.5rem;
	grid-template-rows: auto;
	grid-template-areas:
    "poster details";
}

.poster_div_avatar {
	align-self: center;
	text-align: center;
	justify-self: center;
	grid-area: poster;
}

.poster_div_details {
	padding-right: 1rem;
	padding-left: 1rem;
	border-right: 1px solid;
	border-left: 1px solid;
	grid-area: details;
}

/* Information in the dropdown */
.report_separator {
	height: 1px;
	margin: .4rem 0 0 0;
	border-bottom: 1px solid;
}

/* Icon tweaks in the dropdown */
.listlevel2.warning::before:hover,
.listlevel2.poster_ip::before:hover {
	margin: 0 .4rem 0 -.4rem;
	padding: .2rem;
}

/* Dont let long ipv6 ids overflow */
.listlevel2.poster_ip .help {
	overflow: hidden;
	max-width: 80%;
	vertical-align: middle;
	text-overflow: ellipsis;
	overflow-wrap: normal;
}

.listlevel2.poster_ip .helpicon {
	margin: 0;
}

.warning .linklevel2 .warnicon {
	margin: 0 .4rem 0 0;
}

/* Links like Karma, IP etc just underline no background, shadows, etc */
.poster .linklevel2, .poster .linklevel2:focus,
.poster .listlevel2:hover .linklevel2 {
	padding: 0;
	border: 1px solid;
}

.poster .listlevel2 a.linklevel2:hover {
	text-decoration: underline;
}

/* OL in the dropdown holds custom fields with icons and email / website / */
.listlevel2 > ol > li {
	display: table-cell;
}

.karma_allow > .linkbutton {
	font: var(--font13);
	display: inline-block;
	height: 2.5rem;
	padding-top: 0;
}

/* End nifty new flyout. */

.avatar {
	width: auto;
	max-width: 18rem;
	height: auto;
	max-height: 24rem;
}

/* The visible stuff below the avatar. */
.poster .membergroup {
	font-weight: bold;
}

.poster_online .linklevel1 {
	position: relative;
	display: block;
	margin: .3rem auto;
	border: 1px solid;
	border-radius: .4rem;
}

.poster_online .linklevel1:hover {
	text-decoration: none;
}

.poster .pm_indicator {
	font-size: var(--font11);
}

.poster li.poster_online:hover .linklevel1 {
	border: 1px solid;
}

/* Custom tile, 2 lines only, overflow preventions */
.poster .title {
	line-height: 1.5;
	overflow: hidden;
	max-width: 95%;
	max-height: 4.5rem;
	white-space: normal;
	overflow-wrap: break-word;
}

/* Hidden poster information option, instead you get a flyout menu link in the keyinfo area */
.poster.poster2 .name {
	font-size: var(--font14);
	margin-top: 0;
	padding: 0 .8rem 0 0;
}

/* Do one override here for .poster. Still saves code all round. */
.poster_avatar .linklevel1, .poster_avatar:hover .linklevel1,
.poster_avatar .linklevel1:focus,
.name.linklevel1, .name.linklevel1:hover, .name.linklevel1:focus {
	border: none;
}

/* ------------------------------------------------------------------------
   This holds all data related to the post.  The min of 0 prevents items like <pre> from blowing out the grid
   header.keyinfo -> messageContent -> footer > .attachments -> footer >quickbuttons -> footer >signature */
.postarea {
	display: grid;
	padding: 0 1.6rem 0 1.4rem;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto auto auto;
	grid-template-areas:
	"keyinfo"
	"messageContent"
	"postfooter";
	grid-area: postarea;
}

/* Area above the message, icon, reply number, date, subject */
.keyinfo {
	font-size: var(--font13);
	display: flex;
	align-items: center;
	margin-top: .6rem;
	padding: 1px 0 .5rem 0;
	grid-area: keyinfo;
}

.keyinfo.above {
	grid-area: keyinfo_header;
	margin-top: 0;
}

.keyinfo.above h2, .keyinfo.above h3 {
	padding: 0 1rem;
}

.keyinfo .post_subject {
	overflow: hidden;
	order: 2;
	max-width: 15em;
	margin-left: auto;
	margin-right: .6rem;
	white-space: pre;
	text-overflow: ellipsis;
}

.keyinfo .messageicon {
	margin: 0 .6rem 0 0;
}

.keyinfo .messageicon img {
	margin: 0 auto;
	vertical-align: top;
}

/* The icon selection dropdown you get by clicking on the icon in message view */
.keyinfo .messageicon .dropdown {
	margin: 0 auto;
	padding: .2rem;
	cursor: pointer;
	vertical-align: top;
	border: 1px solid;
}

.keyinfo .messageicon .dropdown:hover {
	padding: .2rem;
}

/* This div and items are added by javascript for the icon selection in the keyinfo line */
#iconList {
	display: flex;
	align-items: center;
	padding: .4rem .6rem .2rem .6rem;
	border: 1px solid;
}

#iconList > .messageIcon {
	padding: .2rem .3rem;
	border: 1px solid;
}

#iconList > .messageIcon > img {
	width: 1.8rem;
}

#iconList > .messageIcon:hover {
	border: 1px dotted;
}

/* The actual message, what the entire software package is about */
.messageContent {
	min-height: 7rem;
	padding: 1.6rem 1.6rem .4rem .8rem;
	border-top: 1px solid;
	grid-area: messageContent;
	overflow-wrap: break-word;
	/* Reading content gets a taller line-height than UI chrome */
	line-height: 1.55;
	/* Keep the measure (line length) comfortable on wide screens
	max-width: 120ch; */
}

/* Area below the message, holds attachments, quick buttons, signature */
.post_footer {
	display: grid;
	/* Don't let an ILA align cascade past the end */
	clear: both;
	grid-template-columns: 1fr;
	grid-template-rows: [attachments] auto [quickbuttons] auto [signature] auto;
	grid-template-areas:
	"attachments"
	"quickbuttons"
	"signature";
	grid-area: postfooter;
}

/* The attachments below the post */
.post_footer .attachments {
	grid-area: attachments;
}

.attachments {
	font-size: var(--font13);
	overflow: auto;
	border-top: 1px solid;
}

/* Container attachments (thumbnail or full) and info */
.attachment_block, .attachment {
	display: inline-block;
	overflow: hidden;
	width: 22rem;
	margin: 0 .4rem 1.6rem 0;
	text-align: center;
}

/* Reset default browser margins on figure elements used for image attachments */
figure.attachment_block {
	margin: 0 .4rem 1.6rem 0;
}

figure.attachment_block figcaption {
	display: block;
}

/* Auto scaling of images in that attachment block */
.attachment_image {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 80rem;
	margin: 3rem 0 0 0;
}

.attachment_name, .attachment_details {
	font-size: var(--font12);
	display: block;
	overflow: hidden;
	width: 100%;
	padding: 0 .8rem;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.attachment_details {
	border-top: none;
	border-radius: 0 0 .8rem .8rem;
}

.attachment_thumb, .attachment_name {
	margin: 0 auto;
	overflow-wrap: break-word;
}

.attachment_thumb > a > img {
	max-width: 100%;
}

.generic_border .attachment_name {
	border-radius: 0 0 .4rem .4rem;
}

/* Not sure these need their own area/row, but harmless either way */
.post_footer .generic_menu {
	grid-area: quickbuttons;
}

.post_footer .signature {
	grid-area: signature;
}

/* when hidding the posterarea, increase the padding */
.postarea2 .post_footer .generic_menu, .postarea2 .post_footer .signature {
	padding: .8rem .8rem;
}

/* All the signatures used in the forum. */
.signature {
	font-size: var(--font13);
	overflow: auto;
	padding: .8rem 0;
	border-top: 1px solid;
}

.signature.without_top_border {
	border-top: none;
}

.custom_fields_above_signature {
	margin-top: 0;
	padding: 0 0 .8rem 0;
}

.likes_above_signature {
	font-size: var(--font15);
	margin-bottom: .8rem;
	padding-bottom: .8rem;
	border-bottom: 1px solid;
}

/* On to the posts, this is the main container for all posts on a page */
#forumposts {
	margin: .4rem 0 0 0;
	border-radius: .4rem .4rem 0 0;
}

#forumposts .category_header {
	overflow: hidden;
	text-overflow: ellipsis;
	display: flex;
	align-items: center;
}

/* The area at the top of each topic page, icon, title, views, links */
#topic_header.category_header {
	display: grid;
	grid-template-columns: 3rem auto 1fr;
	grid-template-rows: 2.5rem auto auto;
	grid-template-areas:
    "hdicon subject subject"
    ". stats navigation"
    ". viewing .";
}

/* Topic icon and title */
#topic_header .hdicon {
	place-items: center center;
	grid-area: hdicon;
	height: 2.5rem;
}

#topic_header .hdicon::before {
	vertical-align: initial;
}

#topic_header #topic_subject, #boarddescription {
	align-self: center;
	grid-area: subject;
	font-size: var(--font18);
}

/* Number of views and previous / next links in the category header */
#topic_header .nextlinks {
	font-size: var(--font15);
	justify-self: end;
	grid-area: navigation;
}

#topic_header .stats_text {
	font-size: var(--font13);
	opacity: .85;
	place-self: center start;
	grid-area: stats;
}

/* Used as a spacer between posts */
.forumposts {
	margin-top: .13em;
	border: 1px solid;
}

/* Other Topic information */
#whoisviewing, #redirectfrom {
	font-size: var(--font13);
	place-self: center start;
	grid-area: viewing;
}

#redirectfrom {
	display: inline-block;
}

/* Small negative margin on #new anchor for better viewport position */
#new::before {
	display: block;
	visibility: hidden;
	margin-top: -1em;
	content: "";
}

/* Emoji and smiley icons in the post */
.smiley, .emoji {
	max-width: 2rem;
	max-height: 2rem;
	vertical-align: bottom;
}

.emoji {
	margin: 0 .4rem;
}

/* Adjust for various emoji sets */
.open-moji {
	max-width: 3rem;
}

.tw-emoji {
	max-width: 2rem;
}

.emoji_tpl {
	max-width: 2.2rem;
	padding: 0 .13em 0 0;
	vertical-align: middle;
}

/* Auto scaling of bbc images in posts and sigs */
.messageContent .bbc_img, .signature .bbc_img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 80rem;
}

.messageContent .bbc_img.ila_pending {
	padding: .2rem;
	border: 1px solid;
}

.bbc_img.resized {
	cursor: pointer;
}

/* Poor Mans lightbox support */
#elk_lightbox {
	position: fixed;
	z-index: 100;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	cursor: pointer;
	text-align: center;
	white-space: nowrap;
}

#elk_lightbox::before {
	display: inline-block;
	height: 100%;
	content: "";
	vertical-align: middle;
}

#elk_lb_content {
	position: relative;
	display: inline-block;
	min-width: 30%;
	margin-top: 3rem;
	margin-right: 3%;
	margin-left: 3%;
	white-space: normal;
}

#elk_lb_content div {
	position: fixed;
	top: 50%;
	left: 50%;
}

#elk_lb_next, #elk_lb_prev, #elk_lb_expand {
	line-height: 1.1;
	position: absolute;
	top: 50%;
	right: -3%;
	display: inline-block;
	width: 3rem;
	height: 3rem;
	border: 2px solid;
	border-radius: .4rem;
}

#elk_lb_content.expand {
	position: absolute;
	overflow: auto;
	padding: 0;
	border: 1px solid;
}

#elk_lb_expand {
	top: -3%;
}

#elk_lb_prev {
	left: -3%;
}

#elk_lb_next::before, #elk_lb_prev::before, #elk_lb_expand::before {
	display: inline-block;
	width: 2.5rem;
	height: 2.5rem;
	content: "";
	background-color: currentColor;
	margin: .1rem .3rem 0 0;
}

#elk_lb_expand::before {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='transparent' d='M0 0h100v100H0z'/%3E%3Cpath fill='%23000' d='M81.113 18.887v62.226L62.728 62.728 31.615 93.84 6.16 68.385l31.113-31.113-18.385-18.385Z'/%3E%3C/svg%3E") no-repeat center / 100%;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='transparent' d='M0 0h100v100H0z'/%3E%3Cpath fill='%23000' d='M81.113 18.887v62.226L62.728 62.728 31.615 93.84 6.16 68.385l31.113-31.113-18.385-18.385Z'/%3E%3C/svg%3E") no-repeat center / 100%;
}

#elk_lb_next::before {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 12 L12 2 L12 6 L8 6 L8 18 L12 18 L12 22 Z'/%3E%3C/svg%3E") no-repeat center / 100%;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 12 L12 2 L12 6 L8 6 L8 18 L12 18 L12 22 Z'/%3E%3C/svg%3E") no-repeat center / 100%;
}

#elk_lb_prev::before {
	margin: .1rem 0 0 .3rem;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 12 L12 2 L12 7 L17 7 L17 17 L12 17 L12 22 Z'/%3E%3C/svg%3E") no-repeat center / 100%;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 12 L12 2 L12 6 L16 6 L16 18 L12 18 L12 22 Z'/%3E%3C/svg%3E") no-repeat center / 100%;
}

.elk_lb_no_scrolling {
	overflow: hidden;
}

/* Separator of posts. More useful in the print stylesheet. */
.post_separator {
	display: none;
}

/* New post HR, --\/-- separates the read from the new */
.new_post_separator {
	display: block;
	height: 0;
	margin-top: .8rem;
}

/* Border trick to create 2 down pointing triangles, one shifted to make a pointer */
.new_post_separator::after, .new_post_separator::before {
	position: relative;
	z-index: 1;
	top: -1.1rem;
	left: 50%;
	display: block;
	width: 0;
	content: "";
	border-width: 1rem 1rem 0;
	border-style: solid;
}

.new_post_separator::before {
	top: 1px;
}

.new_post_anchor {
	scroll-margin-top: 6rem;
}

/* The overall video container, holds header and video divs */
.elk_video_container {
	max-width: 64rem;
	margin: 0 auto 1.6rem auto;
	border: 1px solid;
}

/* The header above the video, allows to collapse the video box */
.elk_video_header {
	padding: .4rem;
	border-bottom: 1px solid;
}

.elk_video {
	margin-bottom: -.6rem;
}

/* Actual video */
.elk_video iframe {
	max-width: 100%;
	max-height: 36rem;
	margin: 0 auto;
	border: none;
	aspect-ratio: 16 / 9;
}

.elk_video_container.portrait {
	max-width: 48rem;
	min-height: 48rem;
}

.elk_video_container.portrait iframe {
	max-height: 82.5rem;
	aspect-ratio: 9 / 16;
}

.elk_video_container.portrait .elk_video_header {
	min-width: 48rem;
}

/* Image preview, often we get a 4/3 image so we force it to 16/9 to avoid a screen jump */
.elk_video_preview {
	width: 100%;
	max-height: 36rem;
	object-fit: cover;
	aspect-ratio: 16 / 9;
}

.elk_video_container.portrait .elk_video_preview {
	padding-top: 6rem;
	object-fit: initial;
	aspect-ratio: 9 / 16;
}

/* Basic stuff for the bottom of Display.template.php, moderation buttons, jump box. */
#moderationbuttons {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin: .8rem 0;
	padding: .8rem 0;
}

#moderationbuttons_strip {
	flex-wrap: wrap;
}

#moderationbuttons.sticky {
	position: sticky;
	z-index: 10;
	bottom: 0;
	border-top: 3px solid;
	border-bottom: .2rem solid;
}

#moderationbuttons.sticky > #display_jump_to {
	display: none;
}

/* The jump to box */
#display_jump_to {
	margin-left: auto;
	white-space: nowrap;
}

/* Guest name/email fields in quick reply */
.guest_fields {
	margin-bottom: .8rem;
}

.guest_fields .form_row {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin-bottom: .4rem;
}

.guest_fields .form_row label {
	min-width: 5rem;
	text-align: right;
}

/* Container for the quick reply area., holds header and editor areas */
#quickreplybox {
	margin: .4rem 0 0 0;
	border-radius: .4rem .4rem 0 0;
}

#quickreplybox .postarea2, #quickreplybox .postarea {
	padding: 1rem;
}

.editor_wrapper {
	font-size: var(--font15);
	max-width: 75%;
	margin: 0 auto .5rem auto;
}

/* The post area buttons are better suited on the left, not being over other topic buttons */
#post_confirm_buttons {
	justify-content: flex-start;
}

#post_confirm_buttons > input {
	margin-right: -1rem;
	padding: 0 1.4rem 0 .8rem;
	border-radius: 0;
}

#post_confirm_buttons > input:first-of-type {
	border-radius: .4rem 0 0 .4rem;
}

#post_confirm_buttons > input:last-of-type {
	border-radius: 0 .4rem .4rem 0;
}

/* The rest is for the share/send topic popup window. */
fieldset.send_topic {
	overflow: visible;
	margin: 0;
	padding: .6rem;
	border: none;
	box-shadow: none;
}

dl.send_topic {
	overflow: visible;
	margin-bottom: 0;
}

dl.send_mail dt {
	width: 35%;
}

dl.send_mail dd {
	width: 64%;
}

/* Added by JS when they try to submit with missing fields */
.requiredfield::before {
	position: absolute;
	bottom: 90%;
	left: 5%;
	width: 0;
	height: 0;
	content: " ";
	border: 10px solid transparent;
}

.requiredfield {
	font-size: var(--font13);
	position: absolute;
	z-index: 100;
	top: 3.5rem;
	left: 5%;
	border: 1px solid;
}

.popup_content .r_name,
.popup_content .r_email,
.popup_content .y_name,
.popup_content .y_email {
	position: relative;
	overflow: visible !important;
}

.popup_content dl.settings dt {
	margin-bottom: 1.5rem;
}

/* -------------------------------------------------------
 *	$EDITOR ... The main post editor section
 * -------------------------------------------------------
 */

/* Postmodify is the overall container, holds it all */
#postmodify #message {
	width: 100%;
}

#postmodify .lastedit {
	font-weight: bold;
}

/* Container for the preview area above the editor */
#preview_section {
	border-radius: .4rem .4rem 0 0;
}

#preview_body {
	overflow: auto;
	margin: .13em 0 0;
	padding: 0.5em 1.6rem;
	border: 1px solid;
}

/* Just the draft saved confirmation bar, above the post */
#draft_section {
	margin-top: 1.6rem;
}

/* Area just above the editor, subject, message icon */
#post_header {
	overflow: hidden;
	padding: .6rem;
}

#post_header dt {
	font-weight: bold;
	float: left;
	width: 15%;
	margin: .6rem 0 0 0;
	padding: 0;
}

#post_header dd {
	float: left;
	width: 83%;
	margin: .4rem 0;
	padding: 0;
}

#post_header img {
	padding: 0 0 .13em .5rem;
	vertical-align: middle;
}

/* Checkboxes of options below the editor */
ul.post_options {
	overflow: auto;
	margin: 0 0 0 1.3rem;
}

ul.post_options li {
	float: left;
	width: 25%;
	margin: .13em 0;
}

/* Header when enable collapsible additional post options is on */
#postAdditionalOptionsHeader, #postDraftOptionsHeader {
	margin: 1.6rem 0 0 0;
}

#postAdditionalOptions, #postDraftOptions {
	overflow: auto;
	margin: 0;
	border: 1px solid;
	border-top: none;
	border-radius: 0 0 .4rem .4rem;
}

/* The non collapsible area */
#postAdditionalOptionsNC {
	overflow: visible;
	margin: 0;
	border: 1px solid;
	border-radius: .4rem;
}

/* Keep additional options spaced (collapsed or not) from topic summary */
#forumposts .forumposts {
	padding-bottom: 1.6rem;
}

.shortcuts {
	font-size: var(--font13);
	margin-left: auto;
	order: 2;
}

#mobile .shortcuts {
	display: none;
}

/* area below post buttons/shortcuts to show the last draft save time */
.draftautosave {
	font-size: var(--font13);
	overflow: hidden;
	height: 1.6em;
	margin: -.4rem 0 .4rem 0;
	text-align: right;
}

/* Container for loadable drafts */
#postDraftOptions .settings dd,
#postDraftOptions .settings dt {
	font-size: var(--font13);
	width: 60%;
	margin: 0;
	padding: .5rem .67em;
	border-top: 1px solid;
}

#postDraftOptions .settings dd {
	width: 40%;
}

#postDraftOptions .settings dd:nth-child(2),
#postDraftOptions .settings dt:first-child {
	border-top: none;
}

#postDraftOptions .settings strong {
	font-size: var(--font15);
}

/* Verification control for making a post */
.post_verification {
	margin-top: .6rem;
}

.post_verification #verification_control {
	margin: .4rem 0 .4rem 1.3rem;
}

.verification_control_valid {
	display: none;
}

.verification_control .smalltext {
	margin: .4rem 0 .8rem 0;
}

/* topic_summary is the summary section on the new post page */
#topic_summary {
	margin-top: .4rem;
	border-radius: .4rem .4rem 0 0;
}

#topic_summary .keyinfo {
	display: flex;
	align-items: center;
}

#topic_summary .quickbuttons {
	margin: 0 0 0 auto;
	padding: 0;
}

#topic_summary .keyinfo nav {
	/*margin-left: auto;*/
}

/* The event editor section. */
#event_main, #poll_options, #poll_main {
	margin-bottom: 0.5em;
	padding-top: .8rem;
}

#event_main .well {
	overflow: auto;
	padding: 1.3rem 12%;
}

#event_main fieldset {
	clear: both;
}

#event_main label {
	vertical-align: middle;
}

#datepicker, #caption_evtitle {
	display: inline-block;
	padding-left: 1.6rem;
}

#datepicker {
	white-space: nowrap;
}

#evtitle {
	margin-top: 0.5em;
}

#event_main .event_options {
	overflow: hidden;
	margin: 0;
	padding: 1.1rem 0.5em 0.5em 1.6rem;
}

#event_main .event_options li {
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

#event_main select, .event_options li select,
#event_main ul.event_options li input[type="checkbox"] {
	margin: 0 1.3rem 0 0;
}

/* -------------------------------------------------------
 *	$DRAG-N-DROP
 * -------------------------------------------------------
 */

.drop_area {
	font-size: var(--font24);
	position: relative;
	display: none;
	padding: 1.6rem 0;
	text-align: center;
	opacity: 0.6;
	border: 1px dashed;
	border-radius: .4rem .4rem 0 0;
}

.drop_area_fileselect {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	cursor: pointer;
	opacity: 0.0001;
}

.drop_area_fileselect_text {
	position: relative;
	padding: 0 .4rem;
	white-space: nowrap;
	border: 1px solid;
	border-radius: .4rem;
}

.drop_area_fileselect_text input {
	overflow-y: hidden;
}

.drop_area .mobile {
	display: none;
	border: 1px solid;
	border-radius: 0.125em;
}

/* container for each uploaded item */
.statusbar {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	min-height: 8.5rem;
	padding: 0 .5rem;
	border-top: 1px solid;
	border-bottom: 1px solid;
}

.info {
	overflow: hidden;
	width: 60%;
}

.postattach_thumb img {
	width: 10rem;
	height: 8rem;
	object-fit: scale-down;
}

.postattach_thumb {
	display: flex;
}

/* holds the inline button and the insert overlay control injected via JS */
.ila_container {
	position: relative;
	margin: 0 .5rem;
	border: 1px solid;
	border-radius: .4rem;
}

.ila_container .icon.ila {
	width: 4.8rem;
	margin: .5rem .5rem 0 .5rem;
	cursor: pointer;
}

.control.icon.abort, .control.icon.remove {
	order: 4;
	margin-left: auto;
	cursor: pointer;
	border: none;
}

/* The dropdown menu when selecting the ILA (share) icon */
.statusbar .insertoverlay {
	position: absolute;
	z-index: 1000;
	min-width: 17.5rem;
	padding: 0.2em;
	border: 1px solid;
	border-radius: .4rem;
}

.insertoverlay .tabs {
	display: flex;
	justify-content: space-between;
	white-space: nowrap;
}

.insertoverlay .tabs li {
	flex-grow: 1;
	cursor: pointer;
	text-align: center;
	border-bottom: 1px solid;
}

.statusbar .insertoverlay label {
	display: block;
}

.statusbar .insertoverlay .visualizesize,
.statusbar .insertoverlay .range {
	display: inline-block;
	max-width: 45%;
	margin-top: 0.5em;
}

.statusbar .insertoverlay .ila_container {
	display: block;
}

.statusbar .insertoverlay .visualizesize {
	float: right;
}

.statusbar .insertoverlay .button {
	font-weight: bold;
	position: absolute;
	top: -3.5rem;
	left: -.5rem;
	width: 6rem;
	height: 3.5rem;
	border-radius: .4rem;
}

/* Upload progress bar */
.progressBar {
	width: 20%;
	text-align: center;
	border: 1px solid;
}

.progressBar div {
	border-radius: .5rem;
}

.drop_attachmnts_error {
	overflow: hidden;
	padding: .67em 0;
}

#postMoreOptions {
	border-top: 1px solid;
}

#postMoreOptions, #postAttachment2 {
	margin: -1px 0 0 0;
	padding: .67em;
}

#postAttachment2 dd {
	margin: .4rem 1%;
}

#postAttachment2 dt {
	font-weight: bold;
}

.attachmenterrors {
	padding: 0 1.6rem;
}

/* -------------------------------------------------------
 *	$MODERATE
 * -------------------------------------------------------
 */

/* The move topic section. */
#move_topic dl {
	margin-bottom: 0;
}

#move_topic dl.settings dt {
	width: 40%;
}

#move_topic dl.settings dd {
	width: 59%;
}

.move_topic {
	text-align: left;
}

.move_topic fieldset {
	padding: .6rem;
}

/* The report topic section. */
#report_topic dl.settings dt {
	width: 20%;
}

#report_topic dl.settings dd {
	width: 80%;
}

#report_comment {
	height: 10em;
}

/* The split topic section. */
#selected, #not_selected {
	width: 50%;
	padding: 1px;
}

.split_messages .content {
	margin: .4rem;
}

.split_messages .split_icon {
	padding: 0 .6rem;
}

.split_messages .post {
	padding: 1.3rem 0 0 0;
	border-top: 1px solid;
}

/* The merge topic section. */
dl.merge_topic dt {
	width: 25%;
}

dl.merge_topic dd {
	width: 74%;
}

.merge_options {
	clear: both;
	padding: 0.5em;
}

.custom_subject {
	margin: .6rem 0;
}

/* -------------------------------------------------------
 *	$MISCELLANEOUS
 * -------------------------------------------------------
 */

/* The debug view query item that you get by clicking on view querys when in debug mode */
.action_viewquery a {
	font-weight: bold;
	text-decoration: none;
}

.action_viewquery .explain {
	font-family: var(--font-body);
	width: 70%;
	margin-bottom: 1.6rem;
	empty-cells: show;
	border-collapse: collapse;
}

.action_viewquery .explain th,
.action_viewquery .explain td {
	width: 5%;
	padding: .13em;
	border: 1px solid;
}

.action_viewquery .query {
	margin: 1.6rem;
}

/* next two only in manage member groups?  Move to Admin */
.groupicon {
	float: left;
	margin: .13em 0 0 .13em;
}

.groupicon img {
	padding: 0 .3rem 0 .3rem;
}

/* Counter number shown in search, recent posts, user posts, etc */
.counter {
	font-size: var(--font24);
	font-weight: bold;
	float: right;
}

/* Styles for the tooltips. */
#site_tooltip {
	font-size: var(--font14);
	position: absolute;
	z-index: 999;
	left: -9999px;
	overflow: hidden;
	width: 40rem;
	max-width: 100%;
	max-height: 22.5rem;
	padding: .4rem .8rem;
	border: 1px solid;
	border-radius: .4rem;
	overflow-wrap: break-word;
}

.tooltip {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

/* -------------------------------------------------------
 *	$PROFILE
 * -------------------------------------------------------
 */

#profile_attachments {
	overflow: auto;
	margin: 1.3rem 0 0 0;
	border: 1px solid;
	border-radius: .4rem;
}

/* Adjust recent activity areas */
.ui-tabs .ui-tabs-panel {
	clear: both;
	padding-top: .8rem;
	border: 1px solid;
}

.profile_center .attachments {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: .8rem 0;
	border-top: none;
}

.content_noframe {
	border: none;
}

.profile_content {
	overflow: auto;
}

.profile_content.attachment_thumb {
	overflow: hidden;
	height: 12rem;
}

.profile_content > a > img {
	max-height: 100%;
}

/* Summary page blocks */
.profileblock {
	margin-top: .4rem;
	padding: .4rem .8rem;
	hyphens: auto;
	overflow-wrap: break-word;
}

.profileblock_left {
	float: left;
	width: 50%;
	padding: 0 .4rem 1.6rem .4rem;
}

.profileblock_right {
	float: right;
	width: 50%;
	padding: 0 .4rem 1.6rem .4rem;
}

.profileblock_left h3, .profileblock_right h3 {
	margin-bottom: 1.3rem;
}

.profileblock ul li {
	display: block;
	float: left;
	margin-right: .5rem;
}

.generic_border {
	padding: .4rem;
	border: 1px solid;
	border-radius: .6rem;
}

.generic_border .avatar {
	max-width: 4rem;
	max-height: 4rem;
}

/* Custom Profile Field Icons */
ul.cf_icons {
	margin-top: -.5em;
	border-top: 1px solid;
}

li.cf_icon {
	margin-top: .4rem;
}

.cf_icon > a > img {
	padding: 0 .4rem .13em .4rem;
	vertical-align: middle;
}

/* Vertical " | " spacer between icons */
ul.cf_icons li:not(:first-child)::before {
	content: "\20\7C\20";
}

/* Main block of user summary */
#detailedinfo {
	float: right;
	width: 70%;
	margin-top: 0;
	hyphens: auto;
	overflow-wrap: break-word;
}

/* The basic user info on the left of the block (avatar title etc) */
#basicinfo {
	float: left;
	width: 30%;
}

#basicinfo h4 {
	font-size: var(--font18);
	font-weight: 100;
	overflow: hidden;
	padding-right: .12em;
	white-space: pre-wrap;
}

#basicinfo .avatar {
	display: block;
	margin: .67em 0 0 0;
}

#userstatus {
	display: block;
	clear: both;
	margin-top: .6rem;
}

#userstatus img {
	vertical-align: middle;
}

#detailedinfo dl, #tracking dl, .profileblock dl {
	clear: right;
	overflow: auto;
	margin: 0 0 1.6rem 0;
}

#detailedinfo dt, #tracking dt, .profileblock dt {
	font-weight: bold;
	float: left;
	clear: both;
	width: 35%;
	margin: 0 0 .2rem 0;
	padding: .6rem 0 0 0;
}

#detailedinfo dd, #tracking dd, .profileblock dd {
	float: left;
	width: 65%;
	margin: .6rem 0 .2rem 0;
	padding: 0;
}

.profileblock_signature dd {
	width: auto;
	overflow-wrap: break-word;
}

/* Avatar selection screen */
#personal_picture {
	display: block;
	margin-bottom: .4rem;
}

#avatar_server_stored div {
	float: left;
	padding-right: .8rem;
}

#avatar_upload {
	overflow: auto;
}

/* The sidebar menu layout adjustment in profile summary */
#main_admsection #basicinfo, #main_admsection #detailedinfo {
	width: 100%;
}

#main_admsection #basicinfo h4 {
	float: left;
	width: 35%;
}

#main_admsection #basicinfo .avatar {
	float: right;
	margin: .2rem;
}

#main_admsection #basicinfo ul {
	clear: left;
}

#main_admsection #basicinfo #userstatus {
	clear: left;
}

#main_admsection #basicinfo #infolinks {
	display: none;
	clear: both;
}

/* Profile statistics */
#generalstats .content dt {
	font-weight: bold;
	float: left;
	clear: both;
	width: 50%;
	margin: 0 0 .4rem 0;
	padding: 0;
}

#generalstats .content dd {
	float: left;
	width: 50%;
	margin: 0 0 .4rem 0;
	padding: 0;
}

#show_attachments th {
	text-align: left;
}

.activity_stats {
	margin: 0;
	padding: 0;
}

.activity_stats li {
	float: left;
	width: calc(100% / 24);
	margin: 0;
	padding: 0;
}

.activity_stats li span {
	font-size: var(--font12);
	display: block;
	text-align: center;
	border: 1px solid;
	border-right-style: none;
	border-left-style: none;
}

.activity_stats .last span {
	border-right: none;
}

.activity_stats li .bar {
	width: 50%;
	max-width: 3rem;
	margin: 0 auto;
	border: 1px solid;
	border-bottom: none;
}

.activity_stats li .bar span {
	display: none;
}

/* Most popular boards by posts and activity */
#popularposts {
	float: left;
	width: 50%;
	padding: .6rem .6rem 0 0;
}

#popularactivity {
	float: right;
	width: 50%;
	padding: .6rem 0 0 .6rem;
}

#popularposts div.content dt, #popularactivity div.content dt {
	font-weight: bold;
	float: left;
	clear: both;
	width: 65%;
	margin: 0 0 .6rem 0;
}

#popularposts div.content dd, #popularactivity div.content dd {
	float: left;
	width: 35%;
	margin: 0 0 .6rem 0;
}

/* Holds the "pie-hole" SVG and text in profile stats */
.profile_pie {
	float: left;
	align-items: center;
	width: 2.8rem;
	height: 2.8rem;
	margin-right: 1.6rem;
}

/* Buddy section stuff. */
.add_buddy .well, .add_buddy .title_bar {
	margin-top: .5rem;
	border: none;
	background: none;
}

/* View posts & topics container */
#recentposts article {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: [header] 6rem [article] auto [nav] auto;
	grid-template-areas:
		"header"
		"article"
		"nav";
}

/* Grid locations called out here for easy finding */
#recentposts article .messageContent {
	grid-area: article;
}

#recentposts header {
	align-self: center;
	grid-area: header;
}

#recentposts nav {
	grid-area: nav;
}

/* Attempt to make recent posts less overwhelming. */
#recentposts .messageContent {
	position: relative;
	overflow: auto;
	max-height: 30rem;
}

#recentposts {
	border-radius: .4rem .4rem 0 0;
}

/* Header section */
.topic_details {
	padding: 0 .4rem .4rem .4rem;
}

/* Definition lists, mostly used in profile */
#creator dl {
	margin: .4rem 0 0;
}

#creator dl:first-child {
	margin: 0;
}

#creator dt {
	float: left;
	clear: both;
	width: 40%;
}

#creator dt label {
	font-weight: 600;
}

#creator dd {
	float: right;
	overflow: visible;
	width: 55%;
	margin: 0 0 .67em .13em;
	padding-bottom: 1px;
}

.ignoreboards {
	width: 50%;
	padding: 0 1%;
}

.ignoreboards a {
	font-weight: bold;
	padding: .2rem 0;
	border-bottom: 1px solid;
}

.ignoreboards a:hover {
	text-decoration: none;
}

.ignoreboards li {
	clear: both;
}

.ignoreboards li.category {
	width: 100%;
	margin: .8rem 0 0 0;
}

.ignoreboards li ul {
	margin: .13em 0 0 0;
}

/* Issue a warning */
#warn_body, .warn_input {
	font-size: var(--font13);
	width: 80%;
	margin-top: .4rem;
}

#warning_bar {
	margin: 0;
}

#slider-range-min {
	width: 80%;
	margin: 1.6rem 0 1.6rem 1rem;
}

/* Other tweaks */
#qrcode {
	margin-top: .67em;
}

.recent_attachments > img {
	max-width: 8rem;
	height: auto;
}

/* -------------------------------------------------------
 * $PERSONAL
 * -------------------------------------------------------
 */

/* This is the wrapper around the PM new message form, that is why it's called folder */
#pmFolder {
	border-radius: .4rem .4rem 0 0;
}

/* If you have labels, these are the drop down selector under quote, reply, delete */
#personal_messages .labels {
	padding: .2rem 0 1.6rem 0;
}

div.labels {
	display: block;
	text-align: right;
}

#personal_messages .signature {
	overflow: visible;
}

#personal_messages .capacity_bar {
	width: 1.6rem;
	height: 2rem;
	margin: 0 .8rem;
	border: 1px solid;
	border-radius: .4rem;
}

#personal_messages .capacity_bar span {
	display: block;
	height: 2rem;
	border-right: 1px solid;
}

#searchLabelsExpand li {
	padding: .4rem .4rem;
}

#manrules div.righttext {
	padding: .4rem .2rem;
}

.addrules dt.floatleft {
	width: 18em;
	padding: 0 1.6rem .6rem 1.6rem;
}

#addrule fieldset {
	clear: both;
	padding: 0.5em;
}

/* Show to and BBC across the page */
#to_item_list_container div, #bcc_item_list_container div {
	float: left;
	margin-right: 1rem;
}

/* These are the input buttons like remove, label selected, other? etc */
.label_pms {
	display: flex;
	margin-left: auto;
}

.label_pms li {
	margin-left: 0.5em;
}

/* -------------------------------------------------------
 * $CALENDAR
 * -------------------------------------------------------
 */

#calendar {
	text-align: center;
}

#month_grid {
	float: left;
	width: 21.5rem;
	padding: 0 1.5rem 0 0;
}

#main_grid {
	overflow: auto;
}

/* Used to indicate the current day. */
#main_grid .calendar_today, #month_grid .calendar_today {
	border: 1px solid;
}

#month_grid .category_header {
	font-size: var(--font15);
}

#main_grid .category_header {
	font-size: var(--font20);
}

.previous_month, .next_month {
	font-size: var(--font12);
	float: left;
	margin-top: .8rem;
}

.next_month {
	float: right;
}

.calendar_table {
	font-size: var(--font13);
	width: 100%;
	border-spacing: 1px;
	border-top: 1px solid;
}

.calendar_table th, .calendar_table td {
	padding: .13em 0;
	text-align: center;
}

#month_grid .calendar_table {
	margin-bottom: .8rem;
}

#month_grid .table_head {
	font-size: var(--font14);
}

#main_grid .days {
	width: 14%;
	padding: .4rem;
	vertical-align: top;
}

#main_grid td.days {
	height: 10rem;
}

#main_grid .weeks {
	font-size: var(--font15);
	font-weight: normal;
}

#main_grid .weeks a:hover {
	text-decoration: none;
}

.weeklist {
	padding: .13em 0 0;
	text-align: left;
}

.weeklist > li {
	overflow: hidden;
	margin: .13em 0;
	border: 1px solid;
}

.weeklist h4 {
	font-size: var(--font17);
	float: left;
	width: 1.6rem;
	padding: 1rem;
}

.weeklist h4 a:hover {
	text-decoration: none;
}

.weekdays {
	padding: .8rem .8rem 0 18rem;
}

/* Use the old one true layout trick here. */
.weeklist .content, .weeklist .calendar_today {
	margin: 0 0 -9.5rem 10rem;
	padding: .8rem .8rem 10rem .8rem;
}

.hidelink {
	font-style: italic;
}

#calendar_navigation {
	padding: 1.3rem 0;
	border: 1px solid;
	border-top: none;
}

/* Cheat and match this to the submit button. */
#calendar_navigation .buttonlist {
	padding: 0 .6rem;
}

/* -------------------------------------------------------
 * MENTIONS
 * -------------------------------------------------------
 */

.mentionavatar .avatar {
	display: block;
	max-width: 6rem;
	max-height: 6rem;
}

.mentionavatar {
	min-width: 6rem;
	min-height: 6rem;
}

/* -------------------------------------------------------
 * $STATISTICS
 * -------------------------------------------------------
 */

.statistics {
	margin: .3rem 0;
}

.statistics .category_header::after {
	display: none;
}

.statistics .category_header {
	font-size: var(--font18);
	width: 50%;
	padding: 1px 1rem 0 1rem;
	border: none;
	border-bottom: .2rem solid;
}

#top_row .category_header {
	width: 99%;
	margin: 0 0.5%;
}

.statistics .category_header.floatleft {
	max-width: 49%;
	margin: 0 0.5%;
}

.statistics .flow_hidden, #forum_history .flow_hidden {
	margin: .13em 0 0 0;
	border: 1px solid;
}

.stats {
	overflow: hidden;
	width: 50%;
	margin: 1.3rem 0 1.3rem 50%;
	padding: 0 1.6rem;
}

.stats.floatleft {
	clear: left;
	margin: 1.3rem 0;
	border-right: 5px solid;
	border-right-style: double;
}

.stats dt {
	font-size: var(--font15);
	line-height: 1.467;
	float: left;
	clear: both;
	width: 48%;
	margin: 0 2% .4rem 0;
	padding: 0;
}

#top_row .stats dd, .statsbar {
	position: relative;
	float: right;
	width: 50%;
	min-height: 2.4rem;
	margin: .2rem 0 .4rem 0;
	padding: 0;
	border: 1px solid;
}

.statsbar .bar {
	font-size: var(--font15);
	display: block;
	float: left;
	height: 2.4rem;
	margin: 0 .4rem 0 0;
}

/* Absolute positioning stops these breaking the bars on narrow screens. */
.statsbar .righttext {
	font-size: var(--font13);
	position: absolute;
	z-index: 2;
	top: 0;
	right: 0;
	height: 100%;
	padding: 0 .4rem;
}

.statsbar .righttext.voted {
	font-weight: bold;
}

#stats {
	margin: .6rem 0 1.6rem 0;
	border: none;
}

#stats th, #stats td {
	width: 15%;
	padding: .4rem 1.3rem;
	text-align: center;
}

#stats .history_head {
	border-top: none;
}

#stats .lefttext {
	width: 25%;
	text-align: left;
}

#stats .stats_month {
	padding: .4rem .8rem .4rem 3rem;
}

#stats .stats_day {
	padding: .4rem .8rem .4rem .6rem;
}

/* -------------------------------------------------------
 *	$HELP
 * -------------------------------------------------------
 */

#help_container {
	overflow: auto;
}

#helpmain {
	overflow: auto;
	margin: 1.3rem 0 0 0;
	padding: .8rem 1.8rem 1.3rem 1.8rem;
	border: 1px solid;
	border-radius: .4rem;
}

#helpmain p {
	margin: 1.1rem 0;
}

#helpmain ul {
	line-height: 2;
	margin: 0 0 0 2.2rem;
}

#helpmain ul li {
	list-style-type: disc;
}

#helpmain ul li a {
	font-weight: bold;
}

/* Generally, those [?] icons, lots-o-tweaks */
.help {
	cursor: help;
}

.help .icon, .hdicon.help {
	margin: 0;
	cursor: help;
	opacity: 0.7;
}

.help .icon:hover, .hdicon.help:hover {
	opacity: 1;
}

/* The help pop-ups, you know, a little lost ? */
.popup_container {
	font-size: var(--font15);
	position: fixed;
	z-index: 10000000;
	top: 0;
	left: 0;
	display: none;
	width: 100%;
	height: 100%;
}

/* The actual pop-up wrapper. */
.popup_window {
	width: 60rem;
	margin: 0 auto;
	border: 1px solid;
	border-radius: .8rem;
}

/* The actual pop-up wrapper. */
.popup_container .popup_window {
	width: 64rem;
	margin: 5% auto;
}

/* What it says. ;) */
.popup_heading {
	font-size: var(--font16);
	font-weight: bold;
	padding: 0 0 .4rem 0;
}

/* The hide icon (red cross). */
.popup_heading .hide_popup {
	float: right;
}

/* .in added by JS */
.popup_window.in.content {
	transition-duration: .5s;
	transform: translate(0, 40px);
}

/* The text content, hopefully helpful. */
.popup_content {
	overflow: auto;
	max-height: 25%;
	padding: 1rem;
	border: 1px solid;
	border-radius: .4rem;
}

/* Some styles used in help entries (language strings) */
.enablePostHTML, .enablePostMarkdown {
	margin: 0 1.6rem;
	list-style: circle;
}

.custom_mask {
	margin: 0 3rem;
}

/* -------------------------------------------------------
 *	$SEARCH
 * -------------------------------------------------------
 */

#searchform {
	border-radius: .4rem .4rem 0 0;
}

/* The basic search section. */
#simple_search, #advanced_search {
	margin: .12em 0 0 0;
	padding: .8rem 0;
	text-align: center;
}

#search_error {
	font-style: italic;
	padding: .4rem 1.3rem;
}

/* The advanced search section. */
#search_options {
	overflow: hidden;
	width: 60rem;
	margin: 0 auto;
	padding-top: 1.3rem;
}

#advanced_search dt {
	float: left;
	clear: both;
	width: 35%;
	padding: .4rem .4rem 0 .4rem;
	text-align: right;
}

#advanced_search dd {
	float: left;
	width: 65%;
	padding: .4rem .12em;
	text-align: left;
}

#pick_boards .submitbutton {
	width: 100%;
}

/* Search results section, setup each li result as a grid */
.search_results_posts > li {
	display: grid;
	padding: 0.8rem 0;
	border: 1px solid;
	grid-template-columns: 1fr 6rem;
	grid-template-rows: 6rem auto auto;
}

.search_results_posts .buttons {
	padding: .4rem 1.2rem 0 0;
}

.compact_view .topic_details {
	border-bottom: 0;
}

.search_results_posts .topic_details {
	align-self: center;
	padding: 1.6rem;
	border-bottom: 0;
	grid-column-start: 1;
}

.search_results_posts .topic_moderation {
	height: 4rem;
	grid-column-start: 2;
	justify-self: end;
}

.search_results_posts .topic_moderation input[type="checkbox"] {

}

/* Shown when using show results as messages */
.search_results_posts .quickbuttons {
	margin: 0 2rem;
	grid-column-start: span 2;
	grid-row-start: 3;
}

.search_results_posts .topic_body {
	overflow: auto;
	margin: 0 1.6rem 0;
	padding: 1.6rem 1.6rem .8rem 1.6rem;
	border-top: 1px solid;
	grid-column-start: span 2;
	grid-row-start: 2;
}

/* Use colored border to give gap between results */
.search_results_posts > li:not(:last-child) {
	border-bottom: .4rem solid;
}

.compact_view .content {
	overflow: auto;
}

#topicForm .pagesection,
#topicForm .flow_auto {
	display: inline-block;
}

#topicForm::after {
	display: block;
	clear: both;
	content: "";
}

/* -------------------------------------------------------
 *	$MEMBERLIST
 * -------------------------------------------------------
 */

.mlist, .whos_online {
	display: table;
	width: 100%;
	border-spacing: 0;
}

.mlist li, .whos_online dt, .whos_online dd {
	display: table-row;
}

.mlist li div, .whos_online dt div, .whos_online dd div {
	display: table-cell;
	padding: .4rem .8rem;
}

.mlist .mlist_header div {
	border-top: none;
}

.mlist li div, .whos_online dt div, .whos_online dd:nth-child(odd) div {
	border-top: 1px solid;
	border-bottom: 1px solid;
}

.mlist li.alternate_row div, .whos_online dd:nth-child(even) div {
	border-top: 1px solid;
	border-bottom: 1px solid;
}

.mlist li div:first-child {
	border-left: 1px solid;
}

.mlist li div:last-child {
	border-right: 1px solid;
}

.letter_row {
	line-height: 3;
	position: sticky;
	z-index: 1;
	top: -1rem;
	height: 4rem;
	vertical-align: bottom;
}

.letter_row > h3 {
	font-weight: bold;
	line-height: 2;
	position: relative;
	top: .9rem;
	min-width: 6rem;
	text-align: center;
	text-transform: uppercase;
	border: 1px solid;
	border-radius: .4rem .4rem 0 0;
}

.mlist_header {
	font-weight: bold;
	position: sticky;
	z-index: 1;
	top: 0;
}

.whos_online dt {
	font-weight: bold;
}

.no_members {
	display: none;
}

.online_member {
	min-width: 40%;
}

#memberlist {
	margin: .6rem 0 0 0;
}

#memberlist > .content {
	padding: 1.2rem 0;
}

#memberlist .status {
	width: 3rem;
}

#memberlist .avatar.avatarresize {
	max-width: 3.6rem;
	max-height: 5rem;
}

.mlist li div {
	height: 3.6rem;
	margin: 0 auto;
	padding: .4rem .8rem 0;
	vertical-align: middle;
}

#mlsearch {
	margin-left: auto;
}

#mlsearch_options {
	position: absolute;
	z-index: 10;
	display: none;
	max-width: 18rem;
	padding: 0.8rem;
	border: 1px solid;
	border-radius: .4rem;
}

#mlsearch_options.nojs {
	display: none;
}

#mlsearch_options.nojs li:nth-child(odd) {
	float: left;
	max-width: 37.5rem;
}

#mlsearch_options.nojs li:nth-child(even) {
	float: right;
}

#mlsearch_options .mlsearch_option input[type="checkbox"] {
	float: right;
	margin: 0.4em 0 0 0.4em;
}

#mlsearch_options .mlsearch_option {
	line-height: 2;
	padding: 0.2em 0;
}

/* -------------------------------------------------------
 *	$LOGIN
 * -------------------------------------------------------
 */

#registration > h2 {
	display: flex;
	align-items: center;
}

#registration > h2 > select {
	margin: 0 3rem;
}

/* Styles for the login areas. */
.login {
	max-width: 64rem;
	margin: 0 auto;
}

.login .well {
	padding: .8rem 15%;
	border-radius: 0 0 .8rem .8rem;
}

.login input[type="submit"] {
	width: 100%;
}

.forgot_password {
	font-size: var(--font13);
	margin-top: -.8rem;
}

#maintenance_mode img {
	padding: 0 .8rem;
}

.coppa_contact {
	width: 30rem;
	margin-left: 1rem;
	padding: .4rem;
	border: 1px solid;
}

#agreement_box, #privacypol_box {
	overflow-y: scroll;
	height: 18rem;
	margin-bottom: 3rem;
	padding: .8rem;
	text-align: justify;
	border: 1px solid;
}

/* Custom profile fields like to play with us some times. */
#admin_content .custom_field {
	margin-bottom: 1.6rem;
}

/* The admin logon form */
#admin_login {
	padding: 1.2rem;
}

.invalid_input, .check_input {
	border: 2px solid;
}

/* -------------------------------------------------------
 *	$FORMS
 * -------------------------------------------------------
 */

/* experimental material design like form inputs.  Use as
  <div class="form_field">
	   <input type="text" />
	   <label>XX</label>
	   <span>icons etc</span>
   </div>
*/

/* Optional.  Use as a wrapper around the form, similar to login */
.form_container {
	overflow: hidden;
	max-width: 64rem;
	margin: .12em auto 0 auto;
	padding: 0 1.6rem;
}

.form_field {
	position: relative;
	margin: 1.8rem auto .8rem auto;
}

/* Move label text to be the placeholder text for text elements */
.form_field > input[type="text"] + label,
.form_field > input[type="password"] + label,
.form_field > input[type="email"] + label {
	position: absolute;
	top: .3rem;
	left: 0;
	transition: transform .2s;
	transform: translatex(.6rem);
	text-transform: uppercase;
}

/* fill up the container */
.form_field input[type="text"],
.form_field input[type="password"],
.form_field input[type="email"] {
	width: 100%;
}

/* leave space at the end for any icon */
.form_field.w_icon > input[type="text"],
.form_field.w_icon > input[type="password"],
.form_field.w_icon > input[type="email"] {
	padding-right: 3rem;
}

.form_field.w_icon > a, .form_field.w_icon > span > a, .form_field.w_icon > span > i {
	position: absolute;
	top: 0;
	right: 0;
	padding: .4rem 0;
}

/* Hide any "real" placeholder text */
.form_field > input[type="text"]::placeholder,
.form_field > input[type="password"]::placeholder,
.form_field > input[type="email"]::placeholder {
	user-select: none;
	color: var(--transparent);
}

/* Move label text out of input field on focus.  If there is no placeholder
   move the label to be top aligned to the field w/o needing focus */
.form_field > input[type="text"]:focus + label,
.form_field > input[type="text"]:not(:placeholder-shown) + label,
.form_field > input[type="email"]:focus + label,
.form_field > input[type="email"]:not(:placeholder-shown) + label {
	font-weight: bold;
	transform: translate3d(-.6rem, -100%, 0) scale(0.7);
}

/* Password field offset requires special treatment ? */
.form_field > input[type="password"]:focus + label,
.form_field > input[type="password"]:not(:placeholder-shown) + label {
	font-weight: bold;
	transform: translate3d(-.6rem, -100%, 0) scale(0.7);
}

/* Use around radio, checkboxes, etc to keep them closer to a input text box */
.form_field_other {
	margin-top: -.4rem;
	margin-bottom: .8rem;
}

.form_field_checkbox, .form_field_radio, .form_field_select {
	margin-bottom: .8rem;
}

/* -------------------------------------------------------
 *	$BOXES
 * -------------------------------------------------------
 */

/* Used for sections that need somewhat larger corners */
.well, .roundframe {
	overflow: hidden;
	margin: .12em 0 0 0;
	padding: 1.1rem;
	border: 1px solid;
	border-radius: .8rem;
}

.well p, .roundframe p {
	padding: .6rem;
}

/* description & information used below headers, others used to how a result message */
.description, .information, .warningbox, .successbox, .infobox, .errorbox {
	margin: 0 0 .6rem 0;
	padding: 1rem;
	border: 1px solid;
}

.information p {
	padding: 1.2rem;
}

/* Make room for the little icon */
.warningbox, .successbox, .infobox, .errorbox {
	padding-left: 4rem !important;
	background-repeat: no-repeat !important;
	background-position: .4rem 50% !important;
	background-size: 2.4rem 2.4rem !important;
}

.border_error {
	border: 1px solid !important;
}

.selected {
	font-weight: bold;
}

/* Styles for (fatal) errors.
   @todo find and validate these odd cases */
#fatal_error {
	width: 80%;
	margin: auto;
	padding-bottom: 1.6rem;
}

.errorbox h3 {
	margin: 0;
	padding: 0;
	text-decoration: underline;
}

.errorbox .listlevel1,
.warningbox .listlevel1 {
	line-height: 1.75;
	float: none;
	padding-left: 1.6rem;
}

.errorbox .alert {
	font-size: var(--font22);
	float: left;
	width: 1.2rem;
	margin: 0;
	padding: 0;
}

.errorbox .smalltext {
	display: block;
	padding-left: 1.6rem;
}

.ban_cannot_post {
	margin: 2ex;
	padding: 2ex;
	border: 2px dashed;
}

/* -------------------------------------------------------
 *	$PROGRESS
 * -------------------------------------------------------
 */

/* Styles for the progress bar */
.progress_bar {
	display: flex;
	align-items: center;
	width: 80%;
	margin: .4rem auto;
	padding: .2rem;
	border: 1px solid;
	border-radius: .8rem;
}

.progress_compact {
	margin: 0 auto 0 0;
	padding: 0;
	border-radius: .8rem;
}

.green_percent, .blue_percent {
	line-height: 2;
	height: 3rem;
	text-align: center;
	border-radius: .6rem;
}

.progress_compact > .green_percent, .progress_compact > .blue_percent {
	line-height: 1;
	height: 1.6rem;
}

.loading {
	width: 3.5rem;
	height: 3.5rem;
}

/* -------------------------------------------------------
 *	$LIKE STATS
 * -------------------------------------------------------
 */
.like_post_stats_menu {
	margin-bottom: .4rem;
}

.like_post_stats {
	position: relative;
	overflow: visible;
	width: 100%;
}

.like_post_stats_data .individual_data {
	display: none;
}

#like_post_stats_overlay {
	position: fixed;
	z-index: 100;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	text-align: center;
}

#like_post_stats_overlay::before {
	display: inline-block;
	height: 100%;
	margin-right: -0.4rem;
	content: "";
	vertical-align: middle;
}

#lp_preloader {
	position: relative;
	white-space: normal;
}

.like_stats_avatar {
	min-width: 10rem;
}

.like_stats_details {
	min-width: 24rem;
}

.like_stats_details, .like_stats_subject {
	margin-top: .2rem;
	vertical-align: top;
}

.like_stats_likers, .like_stats_subject, .like_stats_details, #lp_preloader, .like_stats_avatar {
	display: inline-block;
	padding: .1rem;
}

.like_stats_likers img, .like_stats_small_avatar {
	width: 4rem;
	height: 4rem;
	vertical-align: middle;
	border-radius: 50%;
	object-fit: cover;
}

/* -------------------------------------------------------
 *	$ICONS
 * -------------------------------------------------------
 *
 * Icons. Since embedded icons need to have color data
 * included, the icons themselves go into the color files.
 * This just holds sizing code.
 *
 * -------------------------------------------------------
 */

.iconline, .icoffline {
	line-height: 1;
	display: inline-block;
	width: 1.6rem;
	height: 1.6rem;
	padding-bottom: 0;
	vertical-align: sub;
	border: 1px solid;
	border-radius: 50%;
}

.icon, .helpicon, .warnicon, .infoicon, .chevricon, .main-menu-icon {
	display: inline-block;
	width: 1.8rem;
	height: auto;
	/* to container em */
	max-height: 2em;
}

.icon, .helpicon, .warnicon, .infoicon, .chevricon {
	margin: 0 .4rem;
	vertical-align: middle;
}

.helpicon, .warnicon, .infoicon {
	font-weight: bold;
	/* Set as em so they are relative to the element/container */
	height: 1.25em;
	text-align: center;
}

.helpicon, a.helpicon {
	margin: 0 .6rem 0 0;
	cursor: help;
	vertical-align: text-bottom;
}

.chevricon {
	float: right;
}

/* Screenreader-only shortcut.
   This is the most foolproof way to ensure a screen reader reads something. */
.icon > s, .board_icon > s, .board_icon > a > s, .chevricon > s, .helpicon > s,
.warnicon > s, .infoicon > s, .main-menu-icon > s {
	position: absolute;
	overflow: hidden;
	clip: rect(0 0 0 0);
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
}

.icon-small {
	line-height: 1;
	width: 1.3rem;
	height: 100%;
}

.icon-big {
	line-height: 1.5;
	width: 2.2rem;
	height: 100%;
}

.icon-lg {
	line-height: 2;
	width: 2.5rem;
	height: 100%;
}

.icon-xl {
	line-height: 4;
	width: 6rem;
	height: 100%;
}

.icon-middle {
	vertical-align: middle;
}

/* Not used, as the base uses animated SVG, left here for those who want it */
.icon-spin {
	animation: icon-spin 2s infinite linear;
}

@keyframes icon-spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(359deg);
	}
}

/* -------------------------------------------------------
 *	$MEDIA
 * -------------------------------------------------------
 * NOTE:
 * When setting break points for media queries, don't set them in pixels.
 * Use em instead.
 * Why? Because the point of re-stacking/dropping content is to fit it all
 * in the available space. This is dependent not just on width in pixels,
 * but also on the user-selected text size that is set in the browser.
 *
 * If, for whatever reason (eyesight, pixel pitch, workstation arrangement, etc.)
 * a user requires text 50% larger than theme default, then their screen is
 * effectively a lot smaller than it's nominal resolution would indicate.
 * If the break points are set in em, suddenly the media queries become equally
 * responsive for all users, without any extra code being required.
 *
 * Testing em break points is just as easy as testing pixels,
 * and it will make more people happier. This is cool. :)
 *
 * Of course, having comments to map em to px for each query is a good idea too.
 */

/* Styles for print media.
   -------------------------------------------------------------------------------------------*/

@media print {
	#headerarea {
		display: none;
	}
}

/* Some do not want a lot of motion/animation, for accessibility reasons, this attempts to
   honor that system setting.  In windows this is "show animations in Windows" setting
   -------------------------------------------------------------------------------------------*/

@media (prefers-reduced-motion: reduce) {
	* {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}

/* 1600+ wide screens, Allow for 640/360 video to stack side X side
   -------------------------------------------------------------------------------------------*/

@media screen and (min-width: 100em) {
	.elk_video_container {
		max-width: 64rem;
	}

	.elk_video iframe {
		max-height: 36rem;
	}
}

/* less than 1440 width, drop the menu icons other than profile
   -------------------------------------------------------------------------------------------*/

@media screen and (max-width: 89em) {
	.icon-menu {
		display: none;
	}

	.icon-menu.i-menu-profile {
		display: inline-block;
	}
}

/* 1376+ wide screens, Allow videos to stack side by side but with a smaller WxH
   -------------------------------------------------------------------------------------------*/

@media screen and (min-width: 86em) {
	.elk_video_container {
		display: inline-block;
		max-width: 48rem;
		margin: 0 .2rem 1.6rem .2rem;
		vertical-align: top;
	}

	.elk_video_header {
		min-width: 48rem;
	}

	.elk_video iframe {
		max-height: 27rem;
	}
}

/* This one does 1024 screens at default font size.
   -------------------------------------------------------------------------------------------*/

@media screen and (max-width: 64em) {
	.category_boards .board_row {
		grid-template-columns: [bicon] 6rem [info] 1fr [avatar] 6.5rem [latest] 40% [col-end];
	}

	.category_boards .board_stats, .topic_stats {
		display: none;
	}

	.bbc_img {
		max-width: 100%;
	}

	#menu_nav {
		margin: 0;
		padding: .4rem 0;
	}

	.topic_listing > li {
		grid-template-columns: [topic_icon] 5rem [topic_info] 1fr [topic_latest] 30rem [topic_moderation] minmax(2.5rem, 7.5rem);
	}

	#unread.topic_listing > li {
		grid-template-columns: [topic_icon] 5rem [topic_info] 1fr [topic_latest] 40% [topic_moderation] minmax(2.5rem, 3.5rem);
	}

	.topic_name h4 .new_posts, .new_posts, .require_approval {
		font-size: var(--font12);
		padding: .1rem .6rem .2rem .4rem;
	}

	.editor_wrapper {
		max-width: 100%;
		margin: 0 5%;
	}

	.wrapper {
		min-width: 98%;
	}
}

/* At approximately 960px we change to menu icons, if you do not ADD any top menu items (portal/gallery/etc.)
   this can be delayed for a smaller screen.  it's separated out to allow easy modification, be sure to
   check your color variant as well.
   -------------------------------------------------------------------------------------------*/
@media screen and (max-width: 60em) {
	/* menu to icons */
	#main_menu .icon-menu {
		display: inline-block;
		width: 4.5rem;
		height: 4.5rem;
		min-height: 4.5rem;
		margin: .2rem;
		padding: .6rem;
		border: 2px solid;
		border-radius: .4rem;
	}

	.i-menu-profile::before {
		width: 3.6rem;
		height: 4.2rem;
		max-height: 4.2rem;
		left: 2px;
	}

	#main_menu .subsections .linklevel1::after, #main_menu .subsections:hover .linklevel1::after {
		display: none;
	}

	#collapse_button, #search_form_button {
		transform: translateY(-.5rem);
	}

	#collapse_button .linklevel1, #search_form_button .linklevel1 {
		width: 4.4rem;
		height: 4.5rem;
		margin-top: .2rem !important;
		padding: .9rem 0 0 0 !important;
	}

	#collapse_button {
		display: none;
	}

	#search_form_menu input, #search_form_menu select, #search_form_menu button {
		line-height: 2.4;
		height: 4.5rem;
	}

	.button_title {
		display: none;
	}

	#main_menu .linklevel1 {
		margin-right: .2rem;
		border: 1px solid;
	}

	#main_menu .linklevel1, #main_menu .linklevel1 a {
		margin: 0;
		padding: 0;
	}

	#main_menu .linklevel1 > .pm_indicator {
		display: none;
	}

	#main_menu .linklevel1.active, #main_menu .linklevel1.active:hover {
		border: 1px solid;
	}
}

/* At approximately 900px we open up the wrapper so the menu can expand w/o using icons
   -------------------------------------------------------------------------------------------*/

@media screen and (max-width: 56em) {
	#quickreplybox .post_wrapper, #quicktopicbox .post_wrapper {
		grid-template-columns: [poster] minmax(0, 17rem) [postarea] minmax(0, 1fr);
	}
}

/* This one does 825 screens at default font size, this is the break point for icon top menu
   -------------------------------------------------------------------------------------------*/

@media screen and (max-width: 51.5em) {
	#logobox img {
		max-width: 95%;
	}

	#password_login select {
		display: none;
	}

	/* limit to two lines of them and compress the horizontal space/arrow */
	.breadcrumb {
		max-height: 9.6rem;
		margin-top: .4rem;
		margin-bottom: 1rem;
		row-gap: .2rem;
	}

	.breadcrumb > .crumb {
		padding: 0 0.8rem 0 1rem;
	}

	.breadcrumb > .crumb::after {
		transform: scale(0.35) rotate(45deg);
	}

	.breadcrumb .crumb:first-child {
		padding: 0 0.8rem 0 1.6rem;
	}

	.breadcrumb .crumb:last-child {
		padding: 0 1rem 0 1rem;
	}

	/* board listing */
	.category_boards .board_row {
		grid-template-columns: [bicon] 4.5rem [info] 55% [latest] 1fr;
	}

	.board_avatar {
		display: none;
	}

	.topic_moderation_alt {
		display: none;
	}

	.board_icon {
		width: 3.5rem;
		height: 3.5rem;
	}

	.board_info .moderators, .childboards {
		margin: 0 0 0 .4rem;
	}

	/* allow for a 2 line post subject */
	.board_row .lastpost_link {
		height: 4rem;
		max-height: 4.8rem;
		padding-top: 1rem;
		white-space: nowrap;
	}

	.board_row .board_latest {
		padding: 1rem .4rem .4rem .4rem;
	}

	/* message listing */
	.topic_listing > li {
		grid-template-columns: [topic_icon] 5rem [topic_info] 1fr [topic_latest] 22.5rem [topic_moderation] 4rem;
	}

	/* message display, remove QR side poster zone to give max editor room */
	#quickreplybox .poster, #quicktopicbox .poster {
		display: none;
	}

	#quickreplybox .post_wrapper, #quicktopicbox .post_wrapper {
		grid-template-columns: [poster] 0 [postarea] minmax(0, 1fr);
	}

	.post_wrapper {
		grid-template-columns: [poster] minmax(0, 15rem) [postarea] minmax(0, 1fr);
	}

	#quicktopicbox .post_wrapper {
		grid-template-columns: [poster] 0 [postarea] minmax(0, 1fr);
	}

	.poster .poster_online {
		display: none;
	}

	.poster .name {
		padding: 0;
		overflow-wrap: break-word;
	}

	.avatar, .avatar.avatarresize {
		max-width: 5rem;
	}

	.poster_avatar a {
		padding: 0;
	}

	.poster .membergroup {
		overflow-wrap: break-word;
	}

	.quickbuttons {
		flex-wrap: wrap;
	}

	.smalltext.modified {
		max-width: 45%;
	}

    #topic_header #topic_subject, #boarddescription {
        font-size: var(--font18);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }

	#topic_header.category_header {
		padding: .5rem .2rem;
		grid-template-columns: 1fr;
		grid-template-rows: [subject] 3rem [stats] auto [viewing] auto [navigation] auto;
		grid-template-areas:
			"subject"
			"stats"
			"viewing"
	}

	#topic_header .views_text, #topic_header .hdicon {
		display: none;
	}

	#display_jump_to {
		display: none;
	}

	/* basic form adjustments */
	dd input, dd select, dd textarea {
		width: 85% !important;
		max-width: 85% !important;
	}

	#post_header dd select {
		max-width: 30% !important;
	}

	dd input[type="checkbox"], dd input[type="radio"] {
		display: inline !important;
		width: 1.6rem !important;
	}

	/* search page */
	#search_options {
		width: 90%;
	}

	.search_results_posts .topic_body {
		padding: 0;
	}

	/* our stats page */
	.stats {
		float: none;
		min-width: 100%;
		margin: 0;
	}

	.stats dt {
		font-weight: bold;
	}

	.statistics .category_header {
		min-width: 100%;
		margin: 0;
	}

	/* member list, turn off most columns */
	.mlist li div:nth-child(n+6), .mlist li .website {
		display: none;
	}

	.mlist li div.posts {
		display: table-cell;
		border-right: 1px solid;
	}

	/* Info center */
	#ic_recentposts, #ps_recentposts, #ps_recenttopics {
		width: 100%;
	}

	#ps_recentposts .recentposter {
		display: table-cell;
	}

	/* help popup */
	.popup_container .popup_window {
		width: 90%;
	}

	/* Post add attachment area */
	ul.post_options li {
		width: 33%;
	}

	.statusbar .insertoverlay .range {
		max-width: 90%;
		margin: .2rem auto;
	}

	.statusbar .insertoverlay .visualizesize {
		display: block;
		float: none;
		margin: 0 auto;
	}

	.statusbar .insertoverlay .button {
		top: -4rem;
		right: 0;
		left: auto;
		width: initial !important;
		border-radius: .4rem;
	}

	.statusbar .insertoverlay .text,
	.statusbar .insertoverlay .button {
		display: block;
		margin: .8rem auto;
	}

    .shortcuts {
        display: none;
    }

	/* Profile page */
	.profile_content {
		padding: 0;
	}

	.ui-tabs .ui-tabs-panel {
		padding: .8rem .8rem !important;
	}

	#basicinfo h4 {
		font-size: var(--font14);
	}

	.attachment_block, .attachment {
		margin-right: 0;
	}

	#ps_recentposts td.recenttime, #ps_recentposts th.recenttime {
		display: none;
	}

	/* Slide in  a sidebar menu option for narrow screens. */
	#main_container {
		position: relative;
		padding: 0 0 0 1.2rem;
	}

	#menu_sidebar {
		position: absolute;
		z-index: 90;
		left: -1rem;
		width: .6rem;
		min-height: 50rem;
		cursor: pointer;
		border: 1px solid;
		border-radius: .4rem;
	}

	#menu_sidebar::before {
		position: absolute;
		top: 50%;
		left: -.6rem;
		width: 1.6rem;
		height: 16rem;
		content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' fill-opacity='1' viewBox='0 0 32 32'%3E%3Cpolygon points='16 0, 16 32, 32 16'/%3E%3C/svg%3E");
		filter: invert(57%) sepia(47%) saturate(608%) hue-rotate(73deg) brightness(95%) contrast(80%);
	}

	#menu_sidebar ul, #menu_sidebar .category_header {
		display: none;
	}

	#menu_sidebar:hover {
		width: 20rem;
		padding: 0.8em 1.6rem 1.6rem 0.6em;
	}

	#menu_sidebar:hover ul, #menu_sidebar:hover .category_header {
		display: block;
	}

	/* End playing silly buggers. */
}

/* This one does 540 and smaller screens at default font size.
   -------------------------------------------------------------------------------------------*/

@media screen and (max-width: 34em) {
	/* Hide top clutter on smaller screens */
	#news, #logobox, .rightheader #logobox, #top_section_notice {
		display: none;
	}

	#forumtitle {
		font-size: var(--font20);
		margin: 0 1rem;
	}

	#collapse_button {
		display: none;
	}

	/* General layout considerations */
	#wrapper {
		padding-right: .4rem;
		padding-left: .4rem;
	}

	#wrapper, .frame {
		width: 100%;
		min-width: 30rem;
	}

	.inline {
		padding: 0 .8rem;
	}

	#main_content_section {
		padding: .4rem 0 0 0;
        margin: 0 1%;
	}

	#gobottom, #gotop {
		display: none;
	}

	#message_index_jump_to {
		display: block;
		float: none;
	}

	.forum_category, .content_category {
		border: none;
	}

	#display_jump_to select, #message_index_jump_to_select {
		max-width: 18rem;
	}

	select, .input_text, .input_password {
		max-width: 27rem;
	}

	.grid20 {
		width: 25%;
	}

	/* Menu Adjustments */
	.linklevel1 {
		white-space: normal;
	}

	.listlevel2.subsections .linklevel2::after {
		content: "";
	}

	.listlevel2.subsections .linklevel2 {
		margin-right: 0;
		margin-left: 0;
	}

	.listlevel2:hover .menulevel3 {
		left: -.4rem;
	}

	.menulevel3 {
		display: none !important;
	}

	.admin_menu {
		flex-wrap: wrap;
		justify-content: flex-start;
		padding: 0;
		row-gap: .4rem;
	}

	.subsections:hover .linklevel1::after {
		content: "";
	}

	/* Button / pages / Navigation adjustments */
	nav.breadcrumb .crumb:not(:first-child):not(:last-child) a {
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.buttonlist {
		flex-wrap: wrap;
        gap: .4rem 0;
	}

	.buttonlist > li {
		margin: 0;
	}

	.buttonlist > li > a {
		padding: 0 .6rem;
	}

    .buttonlist .menulevel2 {
        margin: 0 -2em 0 -2em;
    }

	.pagesection .buttonlist li {
		margin-bottom: .4rem;
		white-space: nowrap;
	}

	.quickbuttons {
		margin: .8rem .8rem .6rem .4rem;
		white-space: nowrap;
	}

    .quickbuttons .linklevel1 {
        padding: 0 1rem 0 .4rem;
    }

	.pagesection .pagelinks {
		margin-bottom: .4rem;
		flex-wrap: nowrap;
	}

	.quick_quote_button {
		width: 50%;
	}

	/* Board View */
	.category_boards .board_icon {
		padding-top: .5rem;
	}

	.board_row {
		padding: .4rem 0 .8rem 0;
	}

	.board_info .moderators {
		display: none;
	}

	.childboards {
		margin: 0 .4rem;
	}

	.childboards li:nth-child(n+2)::before {
		content: " - ";
	}

	.board_info, .board_latest {
		margin-bottom: .2rem;
	}

	.board_latest {
		padding: 0 .6rem;
		border-left: 0;
	}

	.board_lastpost, .topic_lastpost {
		min-width: 27rem;
	}

	.board_lastpost {
		padding-top: .6rem;
	}

	.board_info h3 a {
		font-size: var(--font16);
		overflow-wrap: break-word;
	}

	.topic_name, .topic_starter {
		margin: 0;
	}

	.topic_starter {
		margin-top: .4rem;
	}

	.topic_name h4 {
		font-size: var(--font17);
		display: -webkit-box;
		overflow: hidden;
		max-height: 4.8rem;
		-webkit-line-clamp: 2;
		line-clamp: 2 "...";
		-webkit-box-orient: vertical;
	}

	.topic_name h4 a {
		text-overflow: ellipsis;
	}

	.lastpost_link, .board_lastposter {
		font-size: var(--font15);
	}

	.lastpost_link, .board_lastposter, .board_lasttime {
		white-space: normal;
	}

	/* Topic Listing */
	#unread.topic_listing > li,
	.topic_listing > li {
		margin-bottom: .8rem;
		border: 1px solid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		grid-template-areas:
			"topic_info"
			"topic_latest";
	}

	.topic_info {
		overflow: hidden;
		padding: .8rem 0 .8rem .4rem;
		grid-area: topic_info;
	}

	.topic_latest {
		padding: .4rem 0;
		border-top: 1px solid;
		grid-area: topic_latest;
	}

	.sticky_row .topic_info::before, .locked_row .topic_info::before, .locked_row.sticky_row .topic_info::before {
		margin-right: .6rem;
	}

	.topic_icons, .topic_moderation, .linklevel1.button_strip_markselectread {
		display: none;
	}

	/* Topic display */
	#forumposts .nextlinks {
		width: 100%;
		text-align: right;
		white-space: normal;
	}

	.generalinfo {
		display: none;
		overflow: hidden;
	}

	#forumposts .content {
		padding: .4rem;
	}

	#quickreplybox .post_wrapper {
		grid-template-columns: [postarea] minmax(0, 1fr);
		grid-template-areas:
			"postarea";
	}

	/* Update as 3 rows 1 column */
	.post_wrapper {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: [keyinfo_header] auto [poster] auto [postarea] auto;
		grid-template-areas:
			"keyinfo_header"
			"poster"
			"postarea";
	}

	.forumposts > aside {
		display: flex;
		flex-direction: row;
		border-bottom: 1px solid;
	}

	.postarea {
		margin: 0;
	}

	.small_pagelinks {
		display: none;
	}

	#message_index_jump_to.qaction_row {
		width: 100%;
	}

	#topic_icons p {
		display: block;
		float: none;
	}

	/* Separate the name and avatar to opposite sides of the full width grid row */
	ul.poster {
		display: flex;
		flex-direction: row;
	}

	.poster_avatar {
		order: 1;
	}

	.poster .name {
		font-size: var(--font15);
		white-space: nowrap;
	}

	.poster > .subsections {
		order: 2;
		margin-left: auto;
	}

	.poster li.membergroup, .poster .title, .poster .poster_online, .icons img {
		display: none;
	}

	.modified {
		display: none;
	}

	.forumposts {
		border-radius: .4rem;
	}

	.forumposts .content {
		margin-bottom: .6rem;
	}

	.postarea, .forumtitle {
		padding: .2rem .4rem;
	}

	.poster .menulevel2 {
		top: calc(100% + 1px);
		right: 0;
		left: auto;
	}

	.poster .listlevel2 {
		width: 12rem;
		max-width: 12rem;
	}

	.keyinfo h5 {
		padding: .4rem 0;
	}

	.signature {
		display: none;
	}

	#moderationbuttons {
		display: block;
	}

	#display_jump_to {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-top: .2rem;
	}

	/* Stats page */
	#popularposts, #popularactivity {
		padding: .6rem .2rem 0 .2rem;
	}

	.ignoreboards {
		width: 100%;
	}

	#list_mentions .listaction {
		display: none;
	}

	#search_options {
		width: 100%;
	}

	#search_form .input_text {
		width: 12rem;
	}

	.search_results_posts .topic_details {
		padding: .5rem;
		grid-column-end: 3;
	}

	#posting_icons, .table_list .stats, .table_list .lastpost, .table_grid .lastpost {
		display: none;
	}

	/* Post page */
	.post {
		margin: 0 0 0 .4rem;
	}

	#postDraftOptions .settings dd {
		width: 40% !important;
	}

	#postDraftOptions .settings dt {
		width: 60% !important;
	}

	.frame {
		min-width: 100%;
		border-radius: 0;
	}

	/* Drag and drop area */
	#postAttachment2 dt {
		width: 100% !important;
	}

	.drop_area .mobile .drop_area_fileselect_text {
		display: inline-block;
		width: 95%;
		padding-top: 1.6rem;
		padding-bottom: 1.6rem;
	}

	.drop_area .mobile {
		display: inline-block;
		width: 80%;
		border: none;
	}

	.drop_area_fileselect {
		height: 50rem !important;
	}

	.drop_area .desktop {
		display: none;
	}

	.icon_anchor {
		min-width: 0;
	}

	.recentboard, .recentposter {
		display: none;
	}

	/* Profile */
	#basicinfo, #detailedinfo {
		float: none;
		width: 100%;
	}

	.profileblock_left, .profileblock_right {
		float: none;
		overflow: auto;
		width: 100%;
	}

	/* Dont show the quick search options */
	#search_jump_to, .search_controls {
		display: none;
	}

	/* pm listing, hide some to make more room for details */
	.pm_icon, .pm_quickmod, .label_pms {
		display: none;
	}

	.pm_from {
		max-width: 10rem;
		text-align: left;
		overflow-wrap: break-word;
	}

	/* Members list */
	.mlist li .website, .mlist li .date_registered {
		display: none;
	}

	/* Who is online listing */
	.online_member {
		font-size: var(--font15);
	}

	.track_ip {
		font-size: var(--font13);
	}

	/* Calendar Don't show the extra months on the left */
	#month_grid {
		display: none;
	}

	/* Notifications list, small avatar, drop some columns */
	.mentionavatar .avatar {
		max-width: 4rem;
		max-height: 4rem;
	}

	#list_mentions thead, .mention_log_time {
		display: none;
	}

	.bbc_table_container {
		overflow: auto;
		max-width: 100%;
	}

	/* User profile Stats */
	#popularposts, #popularactivity {
		float: none;
		width: 100%;
	}

	#popularposts div.content dt, #popularactivity div.content dt {
		width: 67% !important;
	}

	#popularposts div.content dd, #popularactivity div.content dd {
		width: 33% !important;
	}
}

/* This one does 480px screens at default font size.
   -------------------------------------------------------------------------------------------*/

@media screen and (max-width: 30em) {
	#wrapper {
		padding: 0 !important;
	}

	.wrapper {
		min-width: 100%;
	}

    .editor_wrapper {
        min-width: 98%;
        margin: 0 1%;
    }

	/* General layout considerations */
	dt, dd, dd label, .login dt, #advanced_search dt {
		display: block;
		width: 100% !important;
		margin: 0 !important;
		text-align: left;
	}

	dd input, dd select, dd textarea {
		width: 95% !important;
		max-width: 95% !important;
	}

	dd {
		padding-left: 4% !important;
	}

	.content {
		padding: 0.1rem 0.1rem;
	}

	#confirm_buttons input[type="submit"] {
		height: inherit;
		max-height: none;
		white-space: normal;
	}

	/* Main menu, smaller icons to fit 7 across */
	#main_menu {
        flex-wrap: wrap;
        gap: .2rem .6rem
	}

	.listlevel1#button_profile {
		margin-left: initial;
	}

	#main_menu .icon-menu, #main_menu .icon-menu.i-menu-profile {
		width: 3.4rem;
		height: 3.4rem;
		min-height: 3.4rem;
	}

	#search_form_button .linklevel1 {
		width: 3.4rem;
		height: 3.4rem;
		margin-bottom: -.1rem;
	}

	#main_menu .i-menu-profile::before {
		width: 3rem;
		height: 3rem;
		top: 1px;
		left: 0;
	}

	#main_menu .listlevel2, #main_menu .listlevel3 {
		max-width: 19rem !important;
	}

	#main_menu .menulevel2 {
		max-width: 18rem;
	}

	/* Other navigation controls */
	.pagesection .buttonlist {
		width: 100%;
        padding: 0 .4rem;
	}

    .pagesection {
        padding: .6rem 0 .4rem 0;
    }

	.quickbuttons {
		justify-content: space-evenly;
		margin: .6rem 0 .6rem auto;
	}

	.quickbuttons .modified {
		white-space: normal;
	}

	.quickbuttons i {
		width: 0;
	}

	.quickbuttons i::before {
		display: none;
	}

    .buttonlist li a.linklevel1 {
        font-size: var(--font11);
    }

	/* Board Listing */
	.category_boards .board_row {
		grid-template-columns: [bicon] 5rem [info] 1fr;
		grid-template-rows: [primary] auto [latest] auto [children] auto;
		grid-template-areas:
			"bicon info"
			"latest latest"
			"children children";
	}

	.category_boards .board_info {
		grid-area: info;
	}

	.category_boards .board_latest {
		padding: 1rem;
		border-top: 1px solid;
		grid-area: latest;
	}

	.category_boards .board_icon {
		height: 4.8rem;
		grid-area: bicon;
	}

	.board_description {
		display: none;
	}

	.board_info h3 a {
		font-size: var(--font18);
	}

	.lastpost_link > a, .category_boards .board_lastposter {
		display: block;
		overflow: hidden;
		max-width: 90%;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.category_boards .board_lastposter {
		max-width: 85%;
	}

	.childboards li:first-child {
		display: none;
	}

	.childboard_row {
		grid-area: children;
	}

	.childboards > li {
		margin: 0 3rem;
	}

	/* info center */
	#upshrinkHeaderIC .basic_row {
		padding: .8rem .4rem;
	}

	#ic_recentposts, #ps_recentposts, #ps_recenttopics {
		font-size: var(--font14);
		width: 100%;
	}

	#ic_recentposts td, #ic_recentposts th,
	#ps_recentposts td, #ps_recentposts th, #ps_recenttopics td, #ps_recenttopics th {
		max-width: 1px;
		white-space: nowrap;
	}

	/* Member List */
	.mlist li .group {
		border-right: 1px solid;
	}

	.mlist li div.posts, .mlist li div.status {
		display: none;
	}

	/* Posting */
	ul.post_options li {
		width: 50%;
	}

	#postAttachment2 dd {
		margin: .2rem .1rem;
	}

	#postMoreOptions, #postAttachment2 {
		padding: .4rem;
	}

	.progress_tracker {
		padding-left: 0;
	}

	.statusbar .info {
		width: 50%;
	}

	.statusbar .ila_container {
		display: inline-block;
	}

	.ila_container .icon.ila {
		width: 3rem;
	}

	.postattach_thumb img {
		width: 7.5rem;
		height: 5rem;
	}

	.statusbar .insertoverlay {
		margin-left: -13rem;
	}

	.statusbar .insertoverlay .ila_container {
		position: relative;
	}

	.statusbar .insertoverlay label {
		padding-top: 0.8rem;
	}

	.statusbar .insertoverlay .ila_container input {
		display: block;
		float: none;
	}

	/* Forum Stats */
	.statsbar {
		padding-left: 0 !important;
	}

	select.qaction {
		max-width: 13rem;
	}

	/* Mobile Menu for moderation */
	.hide_30.hamburger_30_target #moderationbuttons_strip {
		visibility: hidden;
		flex-wrap: nowrap;
		width: 0;
		transition: 200ms all ease-in;
		transform: rotatey(-90deg);
		/* Rotated y is has zero width, but flex wraps anyway, this stops that */
		transform-origin: top left;
	}

	#moderationbuttons {
		display: flex;
		flex-wrap: wrap;
	}

	.icon.hamburger_30 {
		display: initial;
		cursor: pointer;
	}

	.icon.hamburger_30::before {
		margin: 0.3rem;
	}

	/* Hide the hamburger on click */
	.icon.hamburger_30.visible {
		display: none;
	}

	/* show the moderation buttons on hamburger click */
	.hide_30.hamburger_30_target.visible #moderationbuttons_strip {
		visibility: visible;
		flex-wrap: wrap;
		width: 100%;
		transform: rotatey(0deg);
		transform-origin: top center;
	}

	/* Recent Posts */
	#topic_summary .keyinfo h5 {
		font-size: var(--font15);
		display: table-cell;
		float: none;
		width: 100%;
		vertical-align: middle;
	}

	.views_text, .nextlinks {
		display: none !important;
	}

	/* Who is online listing, drop table view */
	.whos_online dt {
		display: none;
	}

	.whos_online dd, .whos_online dd div {
		display: block;
	}

	.whos_online dd div {
		border-top: none !important;
		border-bottom: none !important;
	}

	.whos_online dd:nth-child(even), .whos_online dd:nth-child(odd) {
		margin-top: 1px;
		border-top: 1px solid;
	}

	.track_ip {
		float: right;
	}
}

/* This one does 320px screens at default font size.
   -------------------------------------------------------------------------------------------*/

@media screen and (max-width: 20em) {
	.icon-menu {
		width: 2.3rem;
		height: 2.3rem;
	}

	.icon-menu.i-menu-profile {
		width: 2.3rem;
		height: 2.3rem;
	}

	.i-menu-profile::before {
		width: 3rem;
		height: 3rem;
	}
}