/* Fonts are loaded here rather than in the template, so the template stays
   untouched. If index.template.php ever becomes editable, move this into a
   <link rel="stylesheet"> in the head: it saves one network round trip
   before the page is painted. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");
@import url("fontawesome.min.css");

/* You can find detailed information at https://wiki.simplemachines.org/smf/Curve2_CSS

   ======================================================================
   TYPOGRAPHY
   Archivo for headings, IBM Plex Sans for body text, IBM Plex Mono for
   data (tabular figures keep post counts in line).
   The base moves from 13.3px to 15px; post text sits at 16px/1.7, which
   is the only surface anyone actually reads.
   ====================================================================== */

:root {
	--f-display: "Archivo", "Segoe UI", system-ui, sans-serif;
	--f-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--f-data: "IBM Plex Mono", ui-monospace, Consolas, monospace;

	--t-xs:   0.75rem;
	--t-sm:   0.8125rem;
	--t-base: 0.9375rem;
	--t-md:   1rem;
	--t-lg:   1.125rem;
	--t-xl:   1.375rem;
	--t-2xl:  1.75rem;

	--lh-tight: 1.25;
	--lh-snug:  1.4;
	--lh-body:  1.6;
	--lh-read:  1.7;

	/* ELEVATION
	   The original shadows were black and pointed upwards (0 -2px 2px), as if
	   the light came from below: a 2010 mannerism. These fall downwards and
	   are tinted hue 197, so the shadow stays inside the palette instead of
	   dirtying the sky with grey. */
	--sh-1: 0 1px 2px hsl(197 45% 22% / .07);
	--sh-2: 0 1px 2px hsl(197 45% 22% / .05),
	        0 4px 10px -2px hsl(197 45% 22% / .09);
	--sh-3: 0 2px 4px hsl(197 45% 22% / .06),
	        0 12px 28px -6px hsl(197 45% 22% / .16);

	/* RADII — three, no exceptions.
	   There used to be twenty different values (1, 2, 3, 4, 6, 7, 8px, 50%
	   and a dozen asymmetric combinations): the main reason the theme looked
	   assembled rather than designed. */
	--r-control: 6px;    /* buttons, fields, menu items, controls */
	--r-surface: 10px;   /* panels, containers, windows */
	--r-pill: 999px;     /* counters, badges, pills, state discs */
}

/* Index */
html {
	background: #15366F;
	scroll-padding-top: 3rem;
	font-size: 100%;
}
body {
	background: #87D8F7;
	font-family: var(--f-body);
	font-size: var(--t-base);
	line-height: var(--lh-body);
	color: #151C28;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
::selection {
	text-shadow: none;
	background: #C5E5F1;
	color: rgba(0, 0, 0, 0.6);
}
/* General reset */
* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}
ul, ol {
	list-style: none;
}
ul.normallist {
	list-style-type: disc;
	padding: 0 0 0 15px;
}
table {
	empty-cells: show;
}
abbr {
	border-bottom: 0.1em dotted;
}
input, button, select, textarea {
	color: #19282E;
	font-family: var(--f-body);
	font-size: var(--t-base);
	line-height: var(--lh-body);
	background: #fff;
	outline: none;
	border: 1px solid #ACD3E2;
	vertical-align: middle;
	border-radius: var(--r-control);
	padding: 0.3em 0.4em;
}
input:hover, textarea:hover, button:hover, select:hover {
	outline: none;
	border-color: #457BD9;
}
textarea:hover {
	background: #F5FCFE;
}
input:focus, textarea:focus, button:focus, select:focus {
	outline: none;
	border-color: #457BD9;
	background: #fff;
}
input, button, select {
	padding: 0 0.4em;
	height: 2em;
	line-height: 2em;
}
select {
	padding: 0.22em 0.2em; /* selects don't apply line-height */
}
/* Selects with more than one line */
select[size] {
	height: auto;
}
input[type="file"] {
	padding: 2px;
	height: auto;
}
/* Prevent inputs and images overflowing */
img, input, select, textarea {
	max-width: 100%;
}
/* This is a specific issue on Ubuntu - Chrome */
#chrome input {
	font-family: var(--f-body);
}
/* The following is necessary */
textarea {
	font-size: 1em;
}

/* Use a consistent monospace font everywhere */
.monospace, .bbc_code, .phpcode, pre {
	font-family: var(--f-data);
}

.sceditor-container textarea, .sceditor-container textarea:focus {
	box-shadow: none;
}
#quick_edit_body_container textarea,
.move_topic textarea,
dd textarea {
	width: 100%;
	min-height: 100px;
}
/* Apply the font only to these elements */
input, button, select {
	font-size: 0.75rem;
}
/* Number inputs don't support size nor width, so add some common ones here and set a default... */
input[type="number"] {
	padding-right: 0; /* Removes weird white space after arrows in some browsers */
	width: calc(4ch + 15px + 0.8em);
}
input[type="number"][size="2"], input[type="number"][size="1"] {
	width: calc(2ch + 15px + 0.8em);
}
input[type="number"][size="3"] {
	width: calc(3ch + 15px + 0.8em);
}
input[type="number"][size="5"] {
	width: calc(5ch + 15px + 0.8em);
}
input[type="number"][size="6"] {
	width: calc(6ch + 15px + 0.8em);
}
select option {
	padding: 0 4px;
}
/* Fieldsets are used to group elements */
fieldset {
	padding: 18px;
	margin: 0 0 6px 0;
	border: 1px solid #D3EDF8;
	border-radius: var(--r-control);
}
fieldset legend {
	font-weight: bold;
	color: #445F6A;
	box-shadow: none;
	border: none;
}
summary {
	margin: 5px 0;
}

/* Define strong as bold, and em as italics */
/* Note: in some particular places, strong has been redefined as font-weight: 600; */
/* This gives a better effect for those areas, and will default to bold for fonts which do not support numerical font-weight */
strong, .strong {
	font-weight: bold;
	color: #2E444D;
}
.cat_bar strong {
	color: #fff;
}
em, .em {
	font-style: italic;
}
/* Default <strong> color on these tags */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--f-display);
	font-size: 1em;
	line-height: var(--lh-tight);
	color: #2E444D;
}

/* Figures line up wherever they are data: counts, pages, timestamps. */
.board_stats, .stats, .pages, .topic_pages, .page_number,
.postcount, .lastpost .smalltext, td.stats, .amt, .current_page {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}
/* All input elements that are checkboxes or radio buttons shouldn't have a border around them */
input[type="checkbox"], input[type="radio"] {
	border: none;
	background: none;
	vertical-align: middle;
	box-shadow: none;
	margin: 0 3px;
}
.moderationbuttons_mobile_check {
	display: none;
}
/* Give disabled input elements a different style */
input[disabled], textarea[disabled], select[disabled], .button.disabled, .button[disabled]:hover {
	background: #DFF3FB;
	color: #7596A3;
	border-color: #ACD3E2;
	opacity: 0.8;
	cursor: default;
}
/* Standard horizontal rule.. ([hr], etc.) */
/* This used to be a white bar made visible only by an inset shadow: with
   the inset gone, it needs a real rule. */
hr {
	border: none;
	border-top: 1px solid #D3EDF8;
	margin: 12px 0;
	height: 0;
	background: none;
}
/* This is about links */
a, a:visited {
	color: #1C4792;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
	cursor: pointer;
}

/* Help popups require a different styling of the body element. */
/* Deprecated? */
body#help_popup {
	padding: 12px;
}

#likes li {
	clear: both;
	padding: 1px 0;
	display: flex;
	align-items: center;
}
#likes .avatar {
	height: 5em;
	width: 5em;
	margin: 0 10px 0 0;
}
#likes li .like_profile {
	flex: 1 0 auto;
}
#likes li .like_time {
	padding: 4px 0;
}
#likes .description {
	font-style: italic;
	opacity: 0.4;
	font-size: 0.9em;
	display: block;
}

/* The "new" button */
.new_posts, a.new_posts {
	display: inline-block;
	position: relative;
	top: -2px;
	padding: 0 4px;
	background: #D7A819;
	color: #0F2957;
	font-family: var(--f-data);
	font-size: var(--t-xs);
	line-height: 1.5;
	border-radius: var(--r-pill);
	opacity: 0.8;
}
a.new_posts:visited {
	color: #0F2957;
}
.new_posts:hover, .new_posts:focus {
	text-decoration: none;
	opacity: 1;
}

/* Common classes to easy styling.
------------------------------------------------------- */
.floatright {
	float: right;
}
.floatleft {
	float: left;
}
.floatnone {
	float: none;
}
.flow_auto {
	overflow: auto;
}
.flow_hidden {
	overflow: hidden;
}
.clear {
	clear: both;
}
.clear_left {
	clear: left;
}
.clear_right {
	clear: right;
}

/* Default font sizes: small (8pt), normal (10pt), and large (14pt). */
.smalltext, tr.smalltext th {
	font-size: 0.9em;
}
.largetext {
	font-size: 1.4em;
}
h3.largetext {
	font-size: var(--t-lg);
}
.xlargetext {
	font-size: var(--t-xl);
}
.centertext, .centercol {
	margin: 0 auto;
	text-align: center;
}
.righttext {
	margin-left: auto;
	margin-right: 0;
	text-align: right;
}
.lefttext {
	margin-left: 0;
	margin-right: auto;
	text-align: left;
}
.justifytext {
	text-align: justify;
}
.double_height {
	line-height: 2em;
}
/* some common padding styles */
.padding {
	padding: 8px;
}
.main_section, .lower_padding {
	padding-bottom: 6px;
}
.half_content {
	width: 50%;
	display: inline-block;
	vertical-align: top;
}
.half_content:nth-of-type(odd) {
	margin-right: -0.25em;
	padding-right: 0.3%;
}
.half_content:nth-of-type(even) {
	margin-left: -0.2em;
	padding-left: 0.3%;
}

/* Blockquote stylings */
blockquote {
	margin: 0 0 8px 0;
	padding: 6px 10px;
	font-size: 0.85rem;
	border: 1px solid #C5E5F1;
	border-left: 2px solid #90BACB;
	border-right: 2px solid #90BACB;
}
blockquote cite {
	display: block;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	font-size: 0.9em;
	margin-bottom: 3px;
}
blockquote cite::before {
	color: #90BACB;
	font-size: 22px;
	font-style: normal;
	content: "\275D";
	margin-right: 3px;
	vertical-align: middle;
}
.bbc_standard_quote {
	background-color: #DFF3FB;
}
.bbc_alternate_quote {
	background-color: #ECF8FD;
}

/* A code block - maybe PHP ;). */
.bbc_code {
	display: block;
	font-size: 0.78rem;
	background: #ECF8FD;
	border: 1px solid #D3EDF8;
	border-top: 2px solid #ACD3E2;
	border-bottom: 3px solid #90BACB;
	border-radius: var(--r-control);
	margin: 1px 0 6px 0;
	padding: 3px 12px;
	overflow: auto;
	white-space: nowrap;
	max-height: 25em;
}
/* The "Quote:" and "Code:" header parts... */
.codeheader, .quoteheader {
	color: #445F6A;
	font-size: 0.9em;
	padding: 0 2px;
}
/* For links to change the code stuff... */
.codeoperation {
	font-weight: normal;
}
/* Expand code bbc */
.expand_code {
	max-height: none;
}
/* Styling for BBC tags */
.bbc_link {
	border-bottom: 1px solid #ACD3E2;
}
.bbc_link:hover {
	text-decoration: none;
	border-bottom: 1px solid #1C4792;
}
.bbc_size {
	line-height: 1.4em;
}
.bbc_color a {
	color: inherit;
}
.bbc_table {
	font: inherit;
	color: inherit;
}
.lefttext .bbc_table,
.centertext .bbc_table {
	margin-right: auto;
}
.righttext .bbc_table,
.centertext .bbc_table {
	margin-left: auto;
}
.bbc_table td {
	font: inherit;
	color: inherit;
	vertical-align: top;
}
.bbc_list {
	text-align: left;
	padding: 0 0 0 35px;
	list-style-type: inherit;
}
.bbc_float {
	margin-bottom: 1em;
	/* default max-width to use if none was specified in the BBC */
	max-width: 45%;
}
.bbc_float.floatleft {
	margin-right: 1em;
	clear: left;
}
.bbc_float.floatright {
	margin-left: 1em;
	clear: right;
}
.bbc_img {
	object-fit: contain;
}
.postarea .bbc_img.resized:hover {
	cursor: pointer;
}
.bbc_img.original_size {
	height: auto !important;
	width: auto !important;
	max-height: none;
	max-width: 100%;
}
/* No image should have a border when linked. */
a img {
	border: 0;
}

/* Those collapse and expand icons are wonderful. */
.toggle_up::before, .toggle_down::before {
	width: 17px;
	height: 17px;
	display: inline-block;
	background: #ECF8FD url(../images/icons/toggle.png) no-repeat 0 0 / 17px;
	overflow: hidden;
	content: "";
	vertical-align: middle;
	margin: 0 5px 0 5px;
	border: 1px solid #C5E5F1;
	border-radius: var(--r-control);
	box-shadow: var(--sh-1);
	transition: background-color 0.25s;
}
.toggle_down::before {
	background-position: 0 -17px;
}

.toggle_up:hover:before, .toggle_down:hover:before {
	background-color: #C5E5F1;
	transition: background-color 0.25s;
}

/* Generally, those [?] icons. This makes your cursor a help icon. */
.help {
	cursor: help;
	opacity: 0.9;
}
.help:hover {
	opacity: 1;
}

/* Highlighted text - such as search results. */
.highlight {
	font-weight: bold;
	color: #97740C !important;
	font-size: 1.1em;
	background-color: inherit;
}

/* the page navigation area */
.pagesection {
	padding: 2px 0;
	overflow: hidden;
	clear: both;
}
.pagesection .pagelinks {
	display: inline-block;
	float: left;
}
.pages::after, .jump_to::after, .code::after,
strong[id^='child_list_']::after {
	content: ": ";
}
.pages {
	font-size: 0.9em;
	margin-left: 7px;
}
#main_content_section .pagesection {
	margin: 4px 0 0 0;
}
.pagelinks .button {
	padding: 0 5px;
}
.nav_page {
	padding: 0 1px;
}
.expand_pages {
	font-weight: bold;
	cursor: pointer;
}
.current_page {
	padding: 0 4px 0 2px;
	color: #15366F;
	font-family: var(--f-data);
	font-weight: bold;
}
.current_page::before, .codeoperation::before {
	content: "[";
}
.current_page::after, .codeoperation::after {
	content: "]";
}

/* Posts and personal messages displayed throughout the forum. */
/* The actual reading surface: 16px at 1.7 line height. The rest of the
   interface stays at 15px; this is the text someone reads for an hour. */
.post {
	overflow: auto;
	font-size: var(--t-md);
	line-height: var(--lh-read);
	padding: 1px 0;
}

/* Calendar colors for birthdays, events and holidays */
.birthday {
	color: #920ac4;
}

.event {
	color: #078907;
}

.holiday > span {
	color: #025dff;
}
/* Events that are currently selected on the calendar. Won't see it much, probably. */
.sel_event {
	font-weight: bold;
}

.warn_moderate {
	color: #ffa500;
}

.warn_watch, .success {
	color: green;
}

a.moderation_link, a.moderation_link:visited {
	font-weight: bold;
	padding: 0px 8px;
	background: #f59e00;
}
/* AJAX notification bar
------------------------------------------------------- */
#ajax_in_progress {
	background: #fff;
	border-bottom: 4px solid #f96f00;
	color: #f96f00;
	text-align: center;
	font-size: 1.6em;
	padding: 8px;
	width: 100%;
	line-height: 25px;
	position: fixed;
	top: 0;
	left: 0;
}

#ajax_in_progress a {
	color: orange;
	text-decoration: underline;
	font-size: 0.9em;
	float: right;
	margin-right: 20px;
}

/* Lists with settings use these a lot.
------------------------------------------------------- */
dl.settings {
	clear: right;
	overflow: auto;
	margin: 0 0 10px 0;
	padding: 5px;
}
dl.settings dt {
	width: 56%;
	float: left;
	margin: 0 0 10px 0;
	clear: both;
}
dl.settings dt.windowbg {
	width: 98%;
	float: left;
	margin: 0 0 3px 0;
	padding: 0 0 5px 0;
	clear: both;
}
dl.settings dd {
	width: 42%;
	float: right;
	margin: 0 0 3px 0;
}
dl.settings img {
	margin: 0 10px 0 0;
	vertical-align: middle;
}

/* a general table class */
table.table_grid {
	border-collapse: collapse;
	margin: 0;
	width: 100%;
}
table.table_grid td {
	padding: 3px;
}
/* Some predefined widths (mostly for tables) */
.table_grid.half_content, .half_table {
	width: 50%;
}
.equal_table {
	width: 33%;
}
.quarter_table {
	width: 25%;
}
.small_table {
	width: 10%;
}
.table_icon {
	width: 5%;
}

.title_bar th, .windowbg th {
	padding: 4px 8px;
}
.title_bar .sort_down, .title_bar .sort_up {
	margin: -3px 0 0 2px;
}

/* GenericList */
.additional_row {
	padding: 6px 0 6px 0;
}
.additional_row::after {
	content: "";
	display: block;
	clear: both;
}
img.sort, .sort {
	margin-bottom: -4px;
	margin-left: 4px;
}

/* table_grid styles for Profile > Show Permissions. */
#permissions table.table_grid td {
	padding: 5px 10px;
	cursor: default;
}

.postbg {
	border-left: 1px solid #5A7A87;
	border-right: 1px solid #5A7A87;
}

/* Styles used by the auto suggest control.
------------------------------------------------------- */
.auto_suggest_div {
	position: absolute;
	visibility: hidden;
	border-radius: var(--r-control);
	outline: none !important;
	border: 1px solid #ACD3E2;
	z-index: 100;
}
.auto_suggest_item {
	background: #D3EDF8;
	padding: 1px 4px;
}
.auto_suggest_item_hover {
	background: #7596A3;
	cursor: pointer;
	color: #DFF3FB;
	padding: 1px 4px;
}

/* Styles for the standard dropdown menus.
------------------------------------------------------- */
.dropmenu, #top_info {
	position: relative;
}
/* Level 1 button background. */
.dropmenu > li, #top_info > li {
	display: inline-block;
	margin: 0 2px 0 1px;
	font-size: 0.9em;
	line-height: 1.9em;
}
/* Disable default focus outlines */
.dropmenu a {
	outline: 0;
}
/* For cases where we want to spotlight something specific to an item, e.g. an amount */
.amt {
	margin-left: 3px;
	padding: 0 5px;
	color: #fff;
	background: #D7A819;
	border-radius: var(--r-pill);
}
.dropmenu li .active .amt, #top_info li .active .amt {
	background: rgba(0, 0, 0, 0.2);
	color: inherit;
}
#top_info .top_menu.visible {
	display: block;
}
/* Needed for new PM notifications. */
.dropmenu li strong {
	color: #2E444D;
}

.dropmenu li a, #top_info > li > a {
	padding: 0 7px 0 7px;
	display: block;
	border: 1px solid transparent;
	border-radius: var(--r-control);
}
/* Level 1 active button. */
.dropmenu a.active, #top_info a.active {
	color: #fff;
	font-weight: bold;
	border-color: #15366F;
	background: #15366F;
}
/* Level 1 hover effects. */
.dropmenu > li:hover > a, .dropmenu > li > a:focus,
#top_info > li:hover > a, #top_info > li > a:focus, #top_info > li > a.open {
	background: #1C4792;
	border: 1px solid #15366F;
	color: #fff;
	cursor: pointer;
	text-decoration: none;
}
/* Level 1 active button. */
/* Active menu item, on hover. It used to be orange with dark text on top:
   outside the palette and unreadable. It is now a blue lighter than the
   resting one, so the element responds without changing identity. */
.dropmenu li a.active:hover, .dropmenu li:hover a.active {
	background: #1C4792;
	border: 1px solid #1C4792;
	color: #fff;
}

a.mobile_user_menu,
a[class^="mobile_generic_menu_"] {
	display: none;
}

#main_menu {
	margin: 0 0 4px 0;
}

/* User information. */
#profile_menu_top::after {
	content: " \25BC";
}
.profile_user_info, .profile_user_avatar {
	display: inline-block;
	margin: 0 9px;
	vertical-align: middle;
}
.profile_user_avatar img.avatar {
	max-width: 100px;
}
.profile_username {
	font-size: var(--t-xl);
	display: block;
}
.profile_user_links ol {
	margin-left: 10px;
	clear: both;
	column-count: 2;
}
.profile_user_links li {
	font-size: .8rem;
	line-height: 2em;
	padding-left: 24px;
	text-indent: -24px;
	-webkit-hyphens: auto;
	hyphens: auto;
}
/* Fixes bug with border-box on scrollable js */
.scrollable,
.scrollable *,
#profile_menu {
	box-sizing: content-box;
}
.top_menu.scrollable {
	max-height: 30em;
}
.pm_unread, .alerts_unread {
	margin-top: 5px;
	border-top: 1px solid #D3EDF8;
}
.unread_notify {
	border-bottom: 1px solid #D3EDF8;
}
.no_unread {
	margin-top: 5px;
	text-align: center;
}
.unread_notify:hover {
	background: #DFF3FB;
	text-decoration: none;
}
.unread_notify:last-child {
	border-bottom: none;
}
.unread_notify {
	display: flex;
	align-items: center;
	padding: 6px 5px;
	line-height: 20px;
}
.unread_notify.alert_read {
	opacity: 0.5;
	outline: none;
	filter: grayscale(1);
}
.unread_notify strong {
	font-weight: 600;
}
.unread_notify .avatar {
	width: 40px;
	height: 40px;
	object-fit: scale-down;
	margin: 4px 4px 4px 0;
	display: inline-block;
	color: transparent; /* For broken images */
	vertical-align: bottom;
}
.unread_notify_image {
	position: relative;
	width: 44px;
	margin-right: 4px;
	text-align: center;
}
.unread_notify_image span.alert_icon {
	display: block;
	line-height: 1em;
}
.unread_notify_image .avatar + .alert_icon {
	width: auto;
	position: absolute;
	right: 0;
	top: 0;
}
.unread_notify .details {
	display: inline-block;
	vertical-align: top;
	max-width: calc(100% - 48px);
}
#pm_menu .subject {
	font-weight: bold;
}
/* Levels 2 and 3 submenu wrapper. */
.dropmenu li ul, .top_menu {
	z-index: 90;
	position: absolute;
	display: none;
	min-width: 18.2em;
	padding: 0.5em;
	font-weight: normal;
	border: solid 1px #7596A3;
	border-left: solid 1px #ACD3E2;
	border-top: solid 1px #C5E5F1;
	border-radius: var(--r-control);
	box-shadow: var(--sh-3);
	background: #fff;
}
/* Level 2 link background. */
.dropmenu li li {
	margin: 0;
	padding: 0;
	width: 17em;
	font-size: 1em;
	border-radius: var(--r-control);
	border: 1px solid transparent;
}
/* Necessary to allow highlighting of 1st level while hovering over submenu. */
.dropmenu li:hover li a, .dropmenu li li a {
	background: none;
	padding: 0 9px;
	color: #1C4792;
	border: none;
	line-height: 2.2em;
}

.dropmenu li li a > img {
	vertical-align: middle;
}
/* The profile/pm menus are declared off .dropmenu li ul for consistency but have other characteristics. */
.top_menu {
	min-width: 25em;
}
.top_menu .login {
	width: 100%;
}
.top_menu .login dt {
	text-align: left;
	width: 55%;
}
.top_menu .login dd {
	width: 43%;
}
.top_menu .login input {
	width: 90%;
}
/* Level 3 submenu wrapper positioning. */
.dropmenu li ul ul {
	margin: -2em 0 0 15.3em;
}
/* Level 3 maintains font-size the same as Level 2. */
.dropmenu li li li a {
	font-size: 1em;
}
/* Levels 2 and 3 hover effects. */
.dropmenu li li:hover {
	border: none;
}

.dropmenu li li:hover > a, .dropmenu li li a:focus, .dropmenu li li a:hover {
	color: #2E444D;
	text-decoration: none;
	border: 1px solid #C5E5F1;
	border-top: 1px solid #C5E5F1;
}
/* Reposition Level 2 submenu as visible on hover. */
.dropmenu li:hover ul {
	display: block;
}
/* Hiding Level 3 submenu off hover. */
.dropmenu li:hover ul ul, .dropmenu li ul ul, .dropmenu li:hover ul ul ul, .dropmenu li ul ul ul {
	left: -9999px;
}
/* Reposition as visible on hover. */
.dropmenu li li:hover ul, .dropmenu li li ul {
	left: -14px;
}
.dropmenu li li.subsections > a::after {
	position: absolute;
	padding: 5px 0;
	right: 10px;
	font: inherit;
	content: "\25ba";
}
/* Highlighting of current section */
.dropmenu li li a.chosen {
	font-weight: bold;
}

/* The extra menu rows for admin sections, etc. */
#adm_submenus {
	margin: 0 0 6px 0;
	overflow: hidden;
}

/* Styles for the standard button lists.
------------------------------------------------------- */
.buttonlist, .buttonrow, .pagelinks {
	z-index: 100;
	padding: 5px 0 5px 0;
}
.button, .quickbuttons > li > a, .inline_mod_check {
	display: inline-block;
	padding: 0 8px;
	color: #2E444D;
	font-size: 0.7rem;
	line-height: 2em;
	text-transform: uppercase;
	cursor: pointer;
	min-height: calc(2em + 2em * (0.9 - 0.85)); /* "input" font size minus ".button" font size */
	border: 1px solid;
	border-color: #D3EDF8 #ACD3E2 #90BACB #D3EDF8;
	border-radius: var(--r-control);
	box-shadow: 1px 1px 1px rgba(221, 221, 221, 0.57);
	box-sizing: border-box;
	vertical-align: middle;
}
html[lang="el-GR"] .button,
html[lang="el-GR"] .quickbuttons > li > a,
html[lang="el-GR"] .inline_mod_check {
	text-transform: capitalize;
}
.pagesection .button {
	color: #1C4792;
}
.button:hover, .button:focus,
.quickbuttons > li:hover > a, .quickbuttons > li > a:focus {
	color: #19282E;
	border-color: #90BACB #D3EDF8 #D3EDF8 #ACD3E2;
	box-shadow: -1px -1px 2px rgba(221, 221, 221, 0.7);
	text-decoration: none;
}
.button:hover, .button:focus {
	color: #1C4792;
}
/* the active one */
.button.active {
	background: #15366F;
	color: #fff;
	font-weight: bold;
	border: 1px solid #0F2957;
}
.button.active:hover, .button.active:focus {
	color: #C5E5F1;
	background: #15366F;
	box-shadow: none;
}
.cat_bar .button {
	box-shadow: none;
}
/* In a .buttonrow, the buttons are joined together */
.buttonrow {
	margin: 0 5px;
}
.buttonrow .button {
	display: table-cell;
	border-radius: 0;
}
.buttonrow .button:first-child {
	border-radius: var(--r-control) 0 0 var(--r-control);
}
.buttonrow .button:last-child {
	border-radius: 0 var(--r-control) var(--r-control) 0;
}
/* in a titlebg, the buttonlist is of small height */
.titlebg .buttonlist {
	margin: 0;
	padding: 0;
}

/* Styles for the general looks of the theme.
------------------------------------------------------- */

/* Box-shadow only on this one. */
#wrapper {
	clear: both;
	background: #fff;
	border: 1px solid #ACD3E2;
	border-radius: var(--r-surface);
	box-shadow: var(--sh-2);
}

/* Set maximum width limit for content */
#top_section .inner_wrap, #wrapper, #header, #footer .inner_wrap {
	max-width: 1200px;
	margin: 0 auto;
	width: 90%;
}

/* The framing graphics */
/* The top bar. */
#top_section {
	border-bottom: 1px solid #ACD3E2;
	box-shadow: var(--sh-1);
	background: #fff;
	clear: both;
}
#top_section::after {
	content: "";
	display: block;
	clear: both;
}
#top_info {
	padding: 5px 0;
	line-height: 1.3em;
	max-width: 100%;
}
#pm_menu, #alerts_menu, #profile_menu {
	left: 0;
	right: 0;
	padding-right: 10px;
}
#profile_menu_top > img.avatar {
	height: 18px;
	width: 18px;
	margin: 2px 5px 0 0;
	float: left;
}
#pm_menu_top .main_icons,
#alerts_menu_top .main_icons {
	display: none;
}
.notice {
	font-weight: bold;
}

#languages_form, #search_form {
	padding: 5px 0;
}
#languages_form {
	margin: 0 0 0 10px;
}
/* The logo and slogan. */
#header {
	padding: 2px 2px 12px 2px;
	display: flex;
	align-items: flex-end;
}
#header::after {
	content: "";
	display: block;
	clear: both;
}
/* The main title. */
/* Full-width logo: it takes the whole header row, which is as wide as the
   forum body (max 1200px, 90%). */
h1.forumtitle {
	flex: 1 1 100%;
	padding: 0;
	margin: 0;
	font-size: 1em;
	font-weight: normal;
	line-height: 0;
}
h1.forumtitle a {
	display: block;
}
h1.forumtitle img {
	display: block;
	width: 100%;
	height: auto;
}
/* Float these items to the right */
#siteslogan, img#smflogo {
	padding-right: 2px;
	font-size: 1.4em;
}
/* Tweak the SMF logo */
img#smflogo {
	margin: 16px 0 0 0;
}
/* Even guests need to be aligned */
.welcome {
	padding: 0 10px;
	line-height: 2.5em;
}
/*
/* The user info, news, etc.*/
#upper_section {
	padding: 2px 2px 0 2px;
}
#inner_section {
	padding: 12px 10px 2px 10px;
	border-radius: var(--r-surface) var(--r-surface) 0 0;
}
#inner_section::after {
	content: "";
	display: block;
	clear: both;
}
/* The upper_section, float the two each way */
#inner_wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #ACD3E2;
	margin-bottom: 12px;
}
.user {
	padding: 0 4px 8px 4px;
	font-size: 0.9em;
	white-space: nowrap;
}
.user:only-child {
	width: 100%;
	display: flex;
	justify-content: space-between;
}
.user time,
.user .unread_links,
.user .unread_links li {
	display: inline-block;
}
.user:not(:last-child) time:not(:last-child)::after,
.user .unread_links li:not(:last-child)::after {
	content: " • ";
	margin: 0 1ch;
}
ul li.greeting {
	font-weight: bold;
}
/* The login form. */
#guest_form {
	overflow: hidden;
	font-size: 0.9em;
	margin-left: -2px;
}
/* News section. */
#inner_wrap .news {
	padding: 0 0 8px 1ch;
	font-size: 0.9em;
	display: flex;
	align-items: baseline;
	max-width: 50%;
}
#inner_wrap .news h2 {
	line-height: initial;
}
#inner_wrap .news h2,
#inner_wrap .news p {
	display: inline;
	padding-left: 1ch;
}

/* The navigation list (i.e. linktree) */
.navigate_section {
	padding: 3px 0 0 0;
	float: left;
	width: 100%;
}
#main_content_section .navigate_section {
	margin: 4px 0 0 0;
	padding: 0;
}
.navigate_section ul {
	margin: 4px 0 0 0;
	padding: 0 10px;
	font-size: 0.9em;
	overflow: hidden;
	border: 1px solid #D3EDF8;
	border-radius: var(--r-control);
	box-shadow: var(--sh-1);
}
.navigate_section ul li {
	float: left;
	padding-bottom: 3px;
	line-height: 1.1em;
	color: #2E444D;
}
.navigate_section ul li a, .navigate_section ul li em {
	padding: 4px 0 4px;
	margin-top: -4px;
	display: inline-block;
}
.navigate_section ul li span {
	display: inline-block;
	margin-top: 8px;
}
.navigate_section ul li .dividers {
	color: #5A6478;
	font: inherit;
	padding: 0 2px 0 6px;
}
.navigate_section ul li .board_moderators a {
	padding: 4px 0;
}

.navigate_section a:hover span {
	text-decoration: underline;
}

/* The content section */
#content_section {
	margin: 0 auto;
	clear: both;
}
#main_content_section {
	padding: 5px 12px 16px 12px;
}
#main_content_section::after {
	content: "";
	display: block;
	clear: both;
}
/* Footer is now full-width by default. */
/* The footer with copyright links etc. */
#footer {
	margin: 4em 0 0 0;
	padding: 10px 0;
	background: #15366F;
	border-top: 3px solid #b2b6bd;
	flex: none;
}
#footer li, #footer p, #footer a {
	font-size: 0.9em;
	color: #fff;
}
#footer li.copyright {
	display: block;
	font-family: Verdana, sans-serif; /* Copyright must be Verdana! */
}
#footerfix {
	flex: 1 0 auto;
}

/* The posting icons */
#postbuttons_upper ul li a span {
	line-height: 19px;
	padding: 0 0 0 6px;
}
.mark_read {
	margin: -5px 0 16px 0;
	float: right;
}
.mark_read .buttonlist {
	margin: 0;
	padding: 0;
}

.fix_rtl_names {
	display: inline-block;
}

/* The quick buttons */
.quickbuttons {
	margin: 0 0 5px;
	clear: right;
	float: right;
	text-align: right;
}
#recent .quickbuttons {
	margin: 0;
}
.quickbuttons > li {
	float: left;
}
.quickbuttons > li > a, .inline_mod_check {
	display: block;
	height: auto;
	padding: 0 4px;
	color: #19282E;
	line-height: 1.375rem;
	border-radius: 0;
}
.quickbuttons > li:first-child > a {
	border-radius: var(--r-control) 0 0 var(--r-control);
}
.quickbuttons > li:last-child > a, .inline_mod_check:last-child {
	border-radius: 0 var(--r-control) var(--r-control) 0;
}
.quickbuttons > li:only-child > a, .inline_mod_check:only-child {
	border-radius: var(--r-control);
	margin: 2px;
	height: 23px;
}
.inline_mod_check input {
	position: relative;
	top: -1px;
	height: auto;
}
.moderationbuttons_check:focus {
	box-shadow: 0 0 4px #457BD9;
}
.quick_edit, .post_options {
	position: relative;
}
/* Drop part of QuickButtons */
.post_options ul {
	display: none;
	position: absolute;
	top: 100%;
	right: -1px;
	z-index: 90;
	padding: 6px;
	background: #fff;
	font-weight: normal;
	text-align: left;
	border: solid 1px #7596A3;
	border-left: solid 1px #90BACB;
	border-top: solid 1px #ACD3E2;
	border-radius: var(--r-control) 0 var(--r-control) var(--r-control);
	box-shadow: var(--sh-3);
}
.post_options:hover ul {
	display: block;
}
.post_options ul a {
	display: block;
	width: 12em;
	padding: 0 6px;
	line-height: 2.2em;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--r-control);
}
.post_options ul a:hover, .post_options ul a:focus {
	border-color: #ACD3E2;
}
/* Note: The next declarations are for keyboard access with js disabled. */
.quickbuttons ul li a:focus {
	margin: 0 -9910px 0 9910px;
}
/* Cancel for hover and/or js access. */
.quickbuttons ul li:hover a:focus, .quickbuttons ul li a:focus {
	margin: 0;
}
/* Fixes for quickbuttons
   Fix for quote on reply box */
#post_modify {
	border-radius: var(--r-control);
}

/* The jump to box */
#display_jump_to {
	padding: 5px 0;
	margin: 4px 0;
	float: right;
	font-size: 1em;
}
#topic_icons #message_index_jump_to {
	padding: 0;
	float: right;
}

/* The category separator string is 29 dashes */
#display_jump_to_select,
#message_index_jump_to_select,
#search_jump_to_select,
#quick_mod_jump_to_select,
#list_integration_hooks select {
	width: 29ch;
	overflow: hidden;
}

.quickModifyMargin {
	margin: 10px 0 5px 0;
	padding-bottom: 5px;
}

/* Styles for edit event section
---------------------------------------------------- */
#post_event .roundframe {
	padding: 12px 12%;
	overflow: auto;
}
#post_event fieldset {
	padding: 6px;
	clear: both;
}
#post_event span.label {
	margin: 0 0.5em 0 2px;
	min-width: 60px;
	display: inline-block;
}

.event_options {
	line-height: 25px;
	display: flex;
	flex-flow: row wrap;
}
.event_options div {
	min-height: 25px;
	margin-bottom: 5px;
	flex: 1 0 auto;
}
.event_options_left {
	box-sizing: border-box;
	width: 55%;
	min-width: 238px;
}
.event_options_right {
	box-sizing: border-box;
	width: 45%;
	min-width: 270px;
}
.event_options_left div,
.event_options_right div {
	white-space: nowrap;
}

#post_event #event_main input {
	margin: 0;
}
#event_time_input {
	clear: left;
}
#event_time_input > div {
	display: flex;
}
#event_time_input input.date_input {
	width: 40%;
	margin: 2px 0.5ch 0;
	flex: 1 1 auto;
}
#event_time_input input.time_input {
	width: 13ch;
	margin: 2px 0.5ch 0;
	flex: 0 1 auto;
}
#post_event input[type="checkbox"] {
	height: auto;
}
#post_event input[type="text"][disabled] {
	color: transparent;
}
#post_event select, #event_options input[type="text"], #tz {
	max-width: calc(100% - 75px);
}
#post_event select, #evtitle, #event_location {
	width: calc(100% - 75px);
}
#post_event input[type="checkbox"] + select {
	max-width: calc(100% - 95px);
}

/* Styles for the recent messages section.
---------------------------------------------------- */

#readbuttons_top .pagelinks, #readbuttons .pagelinks {
	padding-bottom: 12px;
	width: 60%;
}
#readbuttons .pagelinks {
	padding-top: 12px;
}
#recent {
	clear: both;
}

/* Styles for the move topic section. */
.move_topic {
	width: 710px;
	margin: auto;
	text-align: left;
}
div.move_topic fieldset {
	margin-top: 1ex;
	padding: 6px;
}
/* Styles for the report topic/user section. */
#report_form dl.settings dt {
	width: 20%;
}
#report_form dl.settings dd {
	width: 79%;
}
#report_comment {
	width: 70%;
}
/* Styles for the split topic section. */
div#selected, div#not_selected {
	width: 49%;
}
ul.split_messages li a.split_icon {
	padding: 0 6px;
	opacity: 0.8;
}
ul.split_messages li a.split_icon:hover {
	opacity: 1;
}
.split_messages, .message_header {
	margin-bottom: 8px;
}
/* Styles for the merge topic section. */
ul.merge_topics li {
	list-style-type: none;
}
dl.merge_topic dt {
	width: 25%;
}
dl.merge_topic dd {
	width: 74%;
}
fieldset.merge_options {
	clear: both;
}
.custom_subject {
	margin: 6px 0;
}

/* Styles for the login areas.
------------------------------------------------------- */
.login {
	width: 540px;
	max-width: 100%;
	margin: 0 auto;
}
.popup_content .login {
	width: 100%;
}
.login dl {
	overflow: auto;
	clear: right;
}
.login dt, .login dd {
	margin: 0 0 5px 0;
	width: 44%;
	padding: 1px;
}
.login dt {
	float: left;
	clear: both;
	text-align: right;
	font-weight: bold;
}
.login dd {
	width: 54%;
	float: right;
	text-align: left;
}
.login p {
	text-align: center;
}

.login input[type="submit"] {
	margin: 1em 0 0 1em;
}
.login p:not(:last-of-type) input[type="submit"] {
	margin-bottom: 1em;
}

/* Additional register fields */
#registration fieldset {
	border: none;
	padding: 0;
	margin: 0;
}
#registration .roundframe {
	border-top: none;
}
dl.register_form {
	margin: 0;
	clear: right;
}
dl.register_form dt {
	font-weight: normal;
	float: left;
	clear: both;
	width: 50%;
	margin: 6px 0 0 0;
}
dl.register_form dt span {
	display: block;
}
dl.register_form dd {
	float: left;
	width: 49%;
	margin: 6px 0 0 0;
}
#confirm_buttons {
	text-align: center;
	padding: 12px 0;
}
.coppa_contact {
	padding: 4px;
	width: 32ex;
	background: #fff;
	color: #19282E;
	margin-left: 5ex;
	border: 1px solid #19282E;
}
.valid_input {
	background: #f5fff0;
}
.invalid_input {
	background: #fff0f0;
}

/* Styles for maintenance mode.
------------------------------------------------------- */
#maintenance_mode img.floatleft {
	margin-right: 12px;
}

/* Custom profile fields like to play with us some times. */
#admin_content .custom_field {
	margin-bottom: 15px;
}
#admin_login .centertext {
	padding: 12px;
}
#admin_login .centertext .error {
	padding: 0 0 12px 0;
}
#admin_login .centertext a.help img, .custom_field a img {
	vertical-align: middle;
}

tr.windowbg td, tr.bg td, .table_grid tr td {
	padding: 4px 8px;
}
#credits p {
	font-style: italic;
}

.errorfile_table {
	background: #ECF8FD;
	border-collapse: collapse;
}
.errorfile_table .file_line {
	text-align: right;
	padding-right: 6px;
}
.errorfile_table td.current {
	font-weight: bold;
	border-top: 1px solid rgba(0, 0, 0, 0.2);
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	border-width: 1px 0 1px 1px;
	background: rgba(245, 141, 15, 0.2);
}

.generic_menu {
	margin: 5px 0;
}
/* Some lovely generic icons.
------------------------------------------------- */
.main_icons::before {
	content: "";
	width: 16px;
	height: 16px;
	display: inline-block;
	background: url(../images/icons/main_icons_sprite.png) no-repeat -5px -5px / 260px auto;
	vertical-align: middle;
}
.main_icons.alerts::before {
	background: url(../images/icons/bell.png);
	background-size: 16px;
}
/* Load better icons for higher resolution screens */
@media
	screen and (-webkit-min-device-pixel-ratio: 1.66),
	screen and (min-resolution: 160dpi) {
	.main_icons::before {
		background-image: url(../images/icons/main_icons_sprite_hd.png);
	}
	.main_icons.alerts::before {
		background-image: url(../images/icons/bell_hd.png);
	}
}

/* Small fix for topics */
.quickbuttons .main_icons::before, .button .main_icons::before {
	margin: -3px 3px 0 1px;
}

.main_icons.gender_None::before {
	background: none;
}

.main_icons.gender_0::before {
	display: none;
}

/* This is a small fix for dropmenu icons */
.dropmenu .main_icons::before, #profile_menu .main_icons::before, .dropmenu img {
	margin: -3px 8px 0 0;
	vertical-align: middle;
}

/* Top row */
.main_icons.help::before {
	background-position: -5px -5px;
}
.main_icons.search::before, .main_icons.engines::before {
	background-position: -31px -5px;
}
.main_icons.quick_edit_button::before, .main_icons.modify_button::before {
	background-position: -57px -5px;
}
.main_icons.check::before {
	background-position: -83px -5px;
}
.main_icons.invalid::before {
	background-position: -109px -5px;
}
.main_icons.gender_2::before {
	background-position: -135px -5px;
}
.main_icons.watch::before {
	background-position: -239px -5px;
}
/* 2nd row */
.main_icons.move::before, .main_icons.next_page::before {
	background-position: -5px -31px;
}
.main_icons.general::before, .main_icons.boards::before, .main_icons.topics_views::before {
	background-position: -31px -31px;
}
.main_icons.gender_1::before {
	background-position: -57px -31px;
}
.main_icons.features::before {
	background-position: -83px -31px;
}
.main_icons.posters::before {
	background-position: -109px -31px;
}
.main_icons.replies::before, .main_icons.topics_replies::before {
	background-position: -135px -31px;
}
.main_icons.history::before, .main_icons.time_online::before, .main_icons.scheduled::before {
	background-position: -161px -31px;
}
.main_icons.views::before {
	background-position: -187px -31px;
}
.main_icons.last_post::before {
	background-position: -213px -31px;
}
.main_icons.starters::before, .main_icons.people::before, .main_icons.membergroups::before, .main_icons.mlist::before {
	background-position: -239px -31px;
}
/* 3rd Street Saints */
.main_icons.poll::before {
	background-position: -5px -57px;
}
.main_icons.previous_page::before {
	background-position: -31px -57px;
}
.main_icons.inbox::before {
	background-position: -57px -57px;
}
.main_icons.www::before {
	background-position: -83px -57px;
}
.main_icons.exit::before, .main_icons.logout::before {
	background-position: -109px -57px;
}
.main_icons.switch::before {
	background-position: -135px -57px;
}
.main_icons.replied::before, .main_icons.send::before {
	background-position: -161px -57px;
}
.main_icons.im_on::before {
	background-position: -187px -57px;
}
.main_icons.im_off::before {
	background-position: -213px -57px;
}
.main_icons.split_desel::before {
	background-position: -239px -57px;
}
/* 4th Row */
.main_icons.split_sel::before {
	background-position: -5px -83px;
}
.main_icons.mail::before {
	background-position: -31px -83px;
}
.main_icons.warning_mute::before {
	background-position: -57px -83px;
}
.main_icons.warn_button::before,
.main_icons.warning_moderate::before {
	background-position: -83px -83px;
}
.main_icons.mail_new::before {
	background-position: -109px -83px;
}
.main_icons.drafts::before,
.main_icons.reply_button::before,
.main_icons.reply_all_button::before {
	background-position: -135px -83px;
}
.main_icons.warning_watch::before {
	background-position: -161px -83px;
}
.main_icons.calendar_export::before {
	background-position: -187px -83px;
}
.main_icons.calendar::before {
	background-position: -213px -83px;
}
.main_icons.calendar_modify::before {
	background-position: -239px -83px;
}
/* 5th Row */
.main_icons.plus::before {
	background-position: -5px -109px;
}
.main_icons.warning::before, .main_icons.moderate::before {
	background-position: -31px -109px;
}
.main_icons.themes::before {
	background-position: -57px -109px;
}
.main_icons.support::before {
	background-position: -83px -109px;
}
.main_icons.liked_users::before, .main_icons.liked_messages::before, .main_icons.like::before {
	background-position: -109px -109px;
}
.main_icons.unlike::before {
	background-position: -135px -109px;
}
.main_icons.current_theme::before {
	background-position: -161px -109px;
}
.main_icons.stats::before {
	background-position: -187px -109px;
}
.main_icons.right_arrow::before {
	background-position: -213px -109px;
}
.main_icons.left_arrow::before {
	background-position: -239px -109px;
}
/* 6th Row */
.main_icons.smiley::before {
	background-position: -5px -135px;
}
.main_icons.server::before {
	background-position: -31px -135px;
}
.main_icons.ban::before, .main_icons.ignore::before {
	background-position: -57px -135px;
}

.main_icons.boards::before {
	background-position: -83px -135px;
}
.main_icons.regcenter::before {
	background-position: -109px -135px;
}
.main_icons.posts::before {
	background-position: -135px -135px;
}
.main_icons.sort_down::before {
	background-position: -161px -135px;
}
.main_icons.change_menu2::before, .main_icons.sent::before {
	background-position: -187px -135px;
}
.main_icons.post_moderation_moderate::before {
	background-position: -213px -135px;
}
.main_icons.sort_up::before {
	background-position: -239px -135px;
}
/* 7th Row */
.main_icons.post_moderation_deny::before {
	background-position: -5px -161px;
}
.main_icons.post_moderation_attach::before {
	background-position: -31px -161px;
}
.main_icons.post_moderation_allow::before {
	background-position: -57px -161px;
}
.main_icons.personal_message::before {
	background-position: -83px -161px;
}
.main_icons.permissions::before, .main_icons.login::before {
	background-position: -109px -161px;
}
.main_icons.paid::before {
	background-position: -135px -161px;
}
.main_icons.packages::before {
	background-position: -161px -161px;
}
.main_icons.filter::before {
	background-position: -187px -161px;
	margin: 0 5px 0 0;
}
.main_icons.change_menu::before {
	background-position: -213px -161px;
}
.main_icons.package_ops::before {
	background-position: -239px -161px;
}
/* 8th Row */
.main_icons.reports::before {
	background-position: -5px -187px;
}
.main_icons.news::before {
	background-position: -31px -187px;
}
.main_icons.delete::before, .main_icons.hide_popup::before, .main_icons.prune::before, .main_icons.remove_button::before {
	background-position: -57px -187px;
}
.main_icons.modifications::before {
	background-position: -83px -187px;
}
.main_icons.maintain::before, .main_icons.admin::before {
	background-position: -109px -187px;
}
.main_icons.administration::before, .main_icons.home::before {
	background-position: -135px -187px;
}
.main_icons.frenemy::before {
	background-position: -161px -187px;
}
.main_icons.attachment::before {
	background-position: -187px -187px;
}
.main_icons.lock::before, .main_icons.security::before {
	background-position: -213px -187px;
}
.main_icons.error::before, .main_icons.disable::before {
	background-position: -239px -187px;
}
/* 9th Row */
.main_icons.languages::before,
.main_icons.recent_posts::before {
	background-position: -5px -213px;
}
.main_icons.members_request::before {
	background-position: -31px -213px;
}
.main_icons.members_delete::before {
	background-position: -57px -213px;
}
.main_icons.members::before {
	background-position: -83px -213px;
}
.main_icons.members_watched::before {
	background-position: -109px -213px;
}
.main_icons.sticky::before {
	background-position: -135px -213px;
}
.main_icons.corefeatures::before, .main_icons.settings::before, .main_icons.manrules::before, .main_icons.manlabels::before {
	background-position: -161px -213px;
}
.main_icons.calendar::before {
	background-position: -187px -213px;
}
.main_icons.logs::before {
	background-position: -213px -213px;
}
.main_icons.valid::before {
	background-position: -239px -213px;
}
/* 10th Row */
.main_icons.approve::before, .main_icons.enable::before,
.main_icons.approve_button::before,
.main_icons.read_button::before {
	background-position: -5px -239px;
}
.main_icons.close::before {
	background-position: -31px -239px;
}
.main_icons.details::before {
	background-position: -57px -239px;
}
.main_icons.merge::before {
	background-position: -83px -239px;
}
.main_icons.folder::before {
	background-position: -109px -239px;
}
.main_icons.restore_button::before {
	background-position: -135px -239px;
}
.main_icons.split_button::before {
	background-position: -161px -239px;
}
.main_icons.unapprove_button::before,
.main_icons.unread_button::before {
	background-position: -187px -239px;
}
.main_icons.quote::before, .main_icons.quote_selected::before {
	background-position: -213px -239px;
}
.main_icons.notify_button::before {
	background-position: -239px -239px;
}

.main_icons.select_above::before {
	background-position: -161px -5px;
}
.main_icons.select_here::before {
	background-position: -187px -5px;
}
.main_icons.select_below::before {
	background-position: -213px -5px;
}
/* Styles for (fatal) errors.
------------------------------------------------- */

#fatal_error {
	width: 80%;
	margin: 0 auto 10px auto;
}
.errorbox::before, .noticebox::before, .infobox::before {
	width: 16px;
	height: 16px;
	background: url(../images/icons/main_icons_sprite.png) no-repeat -57px -83px;
	left: 10px;
	content: "";
	position: absolute;
	top: 50%;
	margin-top: -8px;
}
.errorbox, .noticebox, .infobox {
	padding: 7px 10px 7px 35px;
	margin-bottom: 12px;
	position: relative;
}
.errorbox {
	background-color: #fee;
	border-top: 2px solid #c34;
	border-bottom: 2px solid #c34;
}
.errorbox h3 {
	padding: 0;
	margin: 0;
	font-size: 1.1em;
	text-decoration: underline;
}
.errorbox p {
	margin: 12px 0 0 0;
}
.errorbox p.alert {
	padding: 0;
	margin: 0 4px 0 0;
	float: left;
	width: 12px;
	font-size: 1.5em;
}
.errorbox span {
	text-decoration: underline;
}

/* Styles for info boxes
------------------------------------------------- */

.noticebox::before {
	background-position: -83px -83px;
}
.infobox::before {
	background-position: -161px -83px;
}
.noticebox {
	color: #445F6A;
	background: #fff6ca;
	border-top: 1px solid #ffd324;
	border-bottom: 1px solid #ffd324;
}
.infobox {
	color: #19282E;
	background: #cfc;
	border-top: 1px solid green;
	border-bottom: 1px solid green;
}
.descbox {
	padding: 7px 10px 7px 10px;
	border: 1px solid #C5E5F1;
	margin: 6px 0;
}

/* Styles for stats bars and progress bars.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.generic_bar, .progress_bar {
	border: 1px solid #cecaca;
	background: #fff;
	min-height: 16px;
	line-height: 1.4em;
	border-radius: var(--r-pill);
	position: relative;
	overflow: hidden;
	color: rgba(0, 0, 0, 0.6);
}
.generic_bar span, .progress_bar span {
	position: relative;
	z-index: 2;
	display: inline-block;
	padding: 0 5px;
}
.generic_bar .bar, .progress_bar .bar {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	bottom: 0;
	/* A progress bar is not a warning: the fill moves to sky blue. Orange
	   stays where it signals severity (warning levels). */
	background: #0D9BD3;
	transition: width .3s;
	border-radius: var(--r-pill);
	display: block;
}
.generic_bar.vertical {
	width: 15px;
}
.generic_bar.vertical .bar {
	right: 0;
	top: auto;
}

.progress_bar {
	border-radius: var(--r-control);
	text-align: center;
	font-weight: bold;
	color: rgba(0, 0, 0, 0.8);
}
.progress_bar .bar {
	background-color: #75da41;
	background-size: 30px 30px;
}
.progress_yellow .bar {
	background-color: #f6c51c;
}

.progress_green .bar {
	background-color: #75da41;
}

.progress_red .bar {
	background-color: #f45d4c;
}

.progress_blue .bar {
	background-color: #0D9BD3;
}

/* Styles for the profile section.
------------------------------------------------- */

dl {
	overflow: auto;
}

/* The basic user info on the left */
#basicinfo {
	width: 20%;
	float: left;
}
#detailedinfo {
	width: 79.5%;
	float: right;
}
#basicinfo > * {
	margin-bottom: 3px;
}
#basicinfo h4 {
	font-size: 1.4em;
	font-weight: normal;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	word-wrap: break-word; /* IE fallback */
	overflow-wrap: break-word;
}
#basicinfo h4 span.position {
	font-size: 0.8em;
	display: block;
}
#basicinfo img.avatar, dl.settings img.avatar {
	display: block;
	max-width: 160px;
	height: auto !important;
}
#basicinfo ul {
	list-style-type: none;
}
#basicinfo .icon_fields li {
	display: block;
	float: left;
	margin-right: 5px;
	height: 20px;
}
#basicinfo #userstatus {
	display: block;
	clear: both;
}
#basicinfo #userstatus img {
	vertical-align: middle;
}
#detailedinfo dl, #tracking dl {
	clear: right;
	overflow: auto;
	margin: 0 0 18px 0;
	padding: 0 0 15px 0;
	border-bottom: 1px #C5E5F1 solid;
}
#detailedinfo dt, #tracking dt {
	width: 35%;
	margin: 0 0 3px 0;
	font-weight: bold;
	color: #2E444D;
}
#detailedinfo dd, #tracking dd {
	width: 65%;
	float: left;
	margin: 0 0 3px 0;
}
#detailedinfo .noborder {
	border-bottom: 0;
}
#detailedinfo dt.clear {
	width: 100%;
}
#personal_picture {
	display: block;
	margin-bottom: 4px;
}
#avatar_server_stored div {
	float: left;
}
#avatar_upload {
	overflow: auto;
}
#smileypr {
	margin-left: 10px;
}
.edit_avatar_img {
	margin: 0 0 1em;
}

/* Activity by time */
#activitytime {
	margin: 6px 0;
}
.activity_stats {
	margin: 10px 0;
}
.activity_stats li {
	width: 4.16%;
	float: left;
	text-align: center;
}
.activity_stats li span {
	display: block;
	border: 1px solid #445F6A;
	border-left: none;
	border-right: none;
	background: #DFF3FB;
}
.activity_stats li.last span {
	border-right: none;
}
.activity_stats li .generic_bar {
	height: 100px;
	border-bottom: none;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	margin: 0 auto;
}
.activity_stats li .generic_bar span {
	position: absolute;
	top: -1000em;
	left: -1000em;
}

.profile_pie {
	background: url(../images/stats_pie.png);
	background-size: auto 20px;
	float: left;
	height: 20px;
	width: 20px;
	margin: 0 12px 0 0;
	text-indent: -1000em;
}

/* View posts */
.topic .time {
	float: right;
}
.counter {
	padding: 5px 6px 1px 2px;
	font-size: 2.2em;
	font-weight: bold;
	color: #2E444D;
	float: left;
}
.topic_details {
	padding: 0 4px 4px 4px;
}
.counter + .topic_details {
	margin-left: 25px;
}
.list_posts {
	border-top: 1px solid #D3EDF8;
	padding-top: 1em;
	margin-top: 1em;
	margin-bottom: 1em;
	clear: both;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	overflow-wrap: break-word;
}
.topic h4 {
	margin: 3px 0;
}
.topic .post {
	margin: 0 12px;
	min-height: 80px;
	height: auto !important;
	height: 80px;
}
.topic .mod_icons {
	text-align: right;
	margin-right: 12px;
}

#creator dt {
	width: 40%;
}
#creator dd {
	width: 55%;
	margin: 0 0 10px 2px;
}
.centericon {
	vertical-align: middle;
}
.sizefix {
	width: 16px;
	height: 16px;
}

.boardslist > ul > li {
	margin: 12px;
}
.boardslist > ul > li > ul {
	columns: 2 250px;
}
.boardslist > ul > li > ul > li {
	break-inside: avoid;
	display: inline-block;
	vertical-align: top;
	width: 100%;
}
.boardslist a {
	font-weight: bold;
	border-bottom: 1px solid #C5E5F1;
	display: block;
	margin-bottom: 0.5em;
}
.boardslist a:hover {
	text-decoration: none;
	border-bottom: 1px solid #15366F;
}
.boardslist label {
	display: inline-block;
	text-indent: -3ch;
	margin: 0 3ch;
}

#theme_settings {
	overflow: auto;
	margin: 0;
	padding: 0;
}

#theme_settings li {
	margin: 10px 0;
	padding: 0;
}
/* Paid Subscriptions */
#paid_subscription {
	width: 100%;
}
#paid_subscription dl.settings {
	margin-bottom: 0;
}
#paid_subscription dl.settings dd, #paid_subscription dl.settings dt {
	margin-bottom: 4px;
}
/* Pick theme */
#pick_theme {
	width: 100%;
	float: left;
}
#pick_theme .selected {
	background: #C5E5F1;
}

/* Signature preview */

#preview_signature, #preview_signature_display {
	width: 100%;
	overflow: hidden;
}

/* Issue a warning */
#warn_body {
	width: 100%;
	font-size: 0.9em;
}
#warn_temp {
	font-size: var(--t-sm);
}

/* Warning level bar */
.warning_level {
	text-align: center;
	font-weight: bold;
	max-width: 250px;
}
.warning_level.none .bar {
	background-color: #75da41;
}
.warning_level.watched .bar {
	background-color: #ffd800;
}
.warning_level.moderated .bar {
	background-color: orange;
}
.warning_level.muted .bar {
	background-color: #f45d4c;
}

/* Styles for the statistics center.
------------------------------------------------- */
#statistics .roundframe {
	margin: 0;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}
dl.stats dt {
	width: 50%;
	float: left;
	margin: 0 0 4px 0;
	line-height: 1.5em;
	clear: both;
	font-size: 1em;
	overflow: hidden;
	word-wrap: break-word; /* IE fallback */
	overflow-wrap: break-word;
}
dl.stats dd {
	width: 48%;
	font-size: 1em;
	float: left;
	margin: 0 0 4px 2%;
}
dl.stats {
	padding: 5px;
}

/* Forum history table. */
#stats td, #stats th {
	width: 15%;
	padding: 4px;
	text-align: center;
}
#stats tr.windowbg th.lefttext {
	text-align: left;
}
#stats tr.windowbg th.stats_month {
	width: 25%;
	padding: 0 2em;
	text-align: left;
}
#stats tr.windowbg td.stats_day {
	padding: 0 3.5em;
	text-align: left;
}

/* Styles for the personal messages section.
------------------------------------------------- */

#personal_messages h3 span#author, #personal_messages h3 span#topic_title {
	float: left;
}
#personal_messages h3 span#author {
	margin: 0 0 0 6px;
}
#personal_messages h3 span#topic_title {
	margin: 0 0 0 9em;
}
#personal_messages div.labels {
	padding: 0 12px 0 0;
}
#personal_messages .capacity_bar {
	background: #ECF8FD;
	display: block;
	margin: 6px 0 0 12px;
	height: 12px;
	border: 1px solid #90BACB;
	width: 10em;
}
#personal_messages .capacity_bar span {
	border-right: 1px solid #90BACB;
	display: block;
	height: 12px;
}
#personal_messages .capacity_bar span.empty {
	background: #a6d69d;
}
#personal_messages .capacity_bar span.filled {
	background: #eea800;
}
#personal_messages .capacity_bar span.full {
	background: #f10909;
}
#personal_messages .reportlinks {
	padding: 6px 1.3em;
}
#personal_messages .pm_inline_time {
	display: none;
}
#search_labels li {
	padding: 4px 6px;
}
#manrules div.righttext {
	padding: 4px 1px;
}
dl.addrules dt.floatleft {
	width: 15em;
	color: #2E444D;
	padding: 0 15px 6px 15px;
}
#addrule fieldset {
	clear: both;
}
#to_item_list_container div, #bcc_item_list_container div {
	float: left;
	margin-right: 10px;
}
.unread_pm {
	background: #cfc;
}
/* Styles for the show alerts section.
------------------------------------------------- */
#alerts .alert_inline_time {
	display: none;
}
#alerts .quickbuttons {
	display: flex;
	margin: 4px 0;
}
#alerts .quickbuttons li, #alerts .alert_time {
	white-space: nowrap;
}
#alerts .alert_image {
	width: 65px;
	padding: 6px 0;
	text-align: center;
	vertical-align: middle;
}
#alerts .alert_image > div {
	position: relative;
}
#alerts .alert_image .avatar {
	max-width: 80%;
	max-height: 80%;
	margin-top: 4px;
	vertical-align: bottom;
}
#alerts .alert_image span.alert_icon {
	display: block;
	width: 100%;
	line-height: 1em;
}
#alerts .alert_image .avatar + .alert_icon {
	width: auto;
	position: absolute;
	right: 0;
	top: 0;
}

/* Styles for the memberlist section.
------------------------------------------------- */
#mlist_search {
	margin: auto;
	max-width: 500px;
}
#mlist .selected {
	white-space: nowrap;
}
#mlist .is_online {
	width: 60px;
}
#mlist .email_address {
	width: 25px;
}
#mlist .website_url {
	width: 70px;
}
#mlist .icq, #mlist .skype {
	width: 30px;
}
#mlist .post_count {
	width: 115px;
}

/* Styles for the search section.
------------------------------------------------- */
#searchform fieldset {
	text-align: left;
	padding: 0;
	border: none;
}
#searchform .roundframe {
	border-radius: 0;
	margin: 0;
	padding: 32px;
}
#searchform .alt {
	border-top: 0;
	border-bottom-left-radius: 7px;
	border-bottom-right-radius: 7px;
}
#searchform p.clear {
	clear: both;
}
#advanced_search {
	text-align: center !important;
}
#advanced_search dl#search_options {
	margin: 0 auto;
	width: 600px;
	padding-top: 12px;
	overflow: hidden;
}
#advanced_search dt {
	padding: 2px;
	text-align: right;
	width: 20%;
}
#advanced_search dd {
	width: 75%;
	float: left;
	padding: 2px;
	margin: 0 0 0 6px;
	text-align: left;
}
#search_results {
	margin-bottom: 5px;
}

/* Styles for the help section.
------------------------------------------------- */

#help_container {
	padding: 0 0 8px 0;
}
#helpmain {
	margin: 12px 0 0 0;
	padding: 8px 20px 12px 20px;
	border: 1px solid #D3EDF8;
	border-radius: var(--r-surface);
	box-shadow: var(--sh-1);
	overflow: auto;
}
#helpmain p {
	margin: 10px 0;
	line-height: 1.5em;
}
#helpmain ul {
	line-height: 2em;
	margin: 0 0 0 25px;
}
#helpmain ul li {
	list-style-type: disc;
}
#helpmain ul li a {
	font-weight: bold;
}

/* Styles for the tooltips
------------------------------------------------------- */
.tooltip {
	position: absolute;
	z-index: 999;
	left: -9999px;
	word-wrap: break-word; /* IE fallback */
	overflow-wrap: break-word;
	max-width: 350px;
	padding: 6px 9px;
	color: #2E444D;
	background: #fff;
	border: 1px solid #90BACB;
	border-radius: var(--r-control);
	box-shadow: var(--sh-2);
}

/* Styles for popup windows */
.popup_container {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(40, 64, 80, 0.5);
	z-index: 6;
}
#genericmenu > .popup_container {
	z-index: 5;
}
#adm_submenus > .popup_container {
	z-index: 4;
}
.popup_window,
#main_menu .popup_window,
#genericmenu .popup_window,
#adm_submenus .popup_window {
	position: relative;
	width: auto;
	z-index: 99;
	box-shadow: var(--sh-3);
	border: 1px solid #5A7A87;
	border-radius: var(--r-surface) var(--r-surface) var(--r-control) var(--r-control);
	margin: 0 auto;
	padding: 0;
}
.popup_window {
	top: 15%;
	width: 480px;
	padding: 0 6px 6px 6px;
}
.popup_heading {
	padding: 10px 8px;
	color: #0F2957;
}
.popup_content {
	color: #19282E;
	line-height: 1.6em;
	max-height: 30em;
	overflow: auto;
	padding: 10px 8px;
	border: 1px solid #ACD3E2;
	border-bottom: 1px solid #D3EDF8;
	border-radius: var(--r-surface) var(--r-surface) var(--r-control) var(--r-control);
	box-shadow: var(--sh-3);
}
#main_menu .popup_heading,
#genericmenu .popup_heading,
#adm_submenus .popup_heading {
	display: none;
}
#main_menu .popup_container,
#genericmenu > .popup_container,
#adm_submenus > .popup_container {
	display: block;
	position: relative;
	background: none;
	margin: 0;
	height: auto; /* In case anything fishy happens in the situations where this used make sure it stays still */
}
.main_icons.hide_popup {
	float: right;
}
.popup_heading .icon {
	vertical-align: middle;
	margin: -4px 4px 0 0;
}

.generic_list_wrapper, .windowbg, .approvebg, .approvebg2 {
	background: #ECF8FD;
	margin: 12px 0 0 0;
	padding: 12px 16px;
	border: 1px solid #D3EDF8;
	border-radius: var(--r-surface);
	box-shadow: var(--sh-1);
	overflow: auto;
}
/* Here comes the glory... */
.windowbg:nth-of-type(even), .bg.even {
	background: #ECF8FD;
}
.windowbg:nth-of-type(odd), .bg.odd {
	background: #F5FCFE;
}

/* Highlight the target item */
.windowbg:target {
	background: #ffffe0;
}

/* Add some hover on table rows */
tr.windowbg:hover {
	background: #DFF3FB;
}

/* Special treatment for #forumposts area */
#forumposts .windowbg, #forumposts .approvebg, #forumposts .approvebg2, #pmFolder .windowbg {
	overflow: visible;
}
/* Nobody wants locked topics to stand out much. */
.windowbg.locked {
	background: #DFF3FB;
}
/* Sticky topics get a different background */
.windowbg.sticky {
	background: #87d8f79e;
}
/* Locked AND sticky are a bit more technical */
.windowbg.sticky.locked {
	background: #e8d8cf;
}
/* Awaiting approval is a bit special, topics first */
.windowbg.approvetopic {
	background: #e4a17c;
}
/* Unapproved posts in approved topics */
.windowbg.approvepost {
	background: #ffcbcb;
}
.generic_list_wrapper .additional_row {
	margin: 0;
	padding: 5px 0;
	border-radius: 0;
}
.generic_list_wrapper table.table_grid {
	border-bottom: 1px solid #90BACB;
}

div#editlang_desc {
	margin-bottom: 8px;
}
.topic_details .smalltext {
	font-size: 0.9em;
}
.table_grid tr.windowbg td.centercol {
	text-align: center;
}
tr.windowbg {
	box-shadow: none;
}
#postmodify #message {
	width: 100%;
}
#postmodify .lastedit {
	font-weight: bold;
}

/* Colors for background of posts requiring approval */
.approvebg {
	color: #19282E;
	background: #ffeaea;
}
.approvebg2 {
	color: #19282E;
	background: #fff2f2;
}

div#manage_boards dl dd textarea[name=desc] {
	margin-top: 1px;
}

.bold_text {
	font-weight: bold;
}

/* Profile > This needed for responsive (get rid of <br>) */
.infolinks {
	display: block;
}
#groups .windowbg {
	box-shadow: none;
	border-radius: 0;
	border-top: 0;
	margin: 0;
}
#groups .padding {
	margin: 0 0 25px 0;
}
.groupmembership textarea {
	width: 100%;
}
.groupmembership .righttext {
	margin-top: 1ex;
}

/* BoardIndex */
/* This place covers board places (boardindex/messageindex/recent) */
.boardindex_table:not(:last-child) {
	margin-bottom: 15px;
}
h3 .collapse {
	float: right;
	margin: 4px 4px 0 0;
}
.board_icon a {
	background: url(../images/boardicons.png) no-repeat 0 0 / 90px;
	display: inline-block;
	width: 45px;
	height: 45px;
}
.board_icon a.board_on2 {
	background-position: -45px 0;
}
.board_icon a.board_off {
	background-position: 0 -45px;
}
.board_icon a.board_redirect {
	background-position: -45px -45px;
}
.board_icon {
	text-align: center;
	padding: 8px 0 0 0;
	width: 60px;
	flex-shrink: 0;
}
.boardindex_table .board_icon {
	width: 80px;
}
.boardindex_table .info {
	width: calc(55% - 80px);
}
.boardindex_table .board_stats {
	padding: 13px 10px 10px;
}
.boardindex_table .board_stats p {
	border-left: 1px solid #D3EDF8;
	border-right: 1px solid #D3EDF8;
}
.info {
	overflow: hidden;
	overflow-wrap: break-word;
	padding: 5px 5px 5px 0;
	flex-grow: 1;
}
.info .subject {
	font-weight: 600;
	font-size: 1.1em;
	color: #15366F;
}
.board_stats {
	width: 15%;
	font-size: 0.9em;
	margin: 0 0 0 auto;
	text-align: center;
}
.lastpost {
	width: 30%;
	font-size: 0.9em;
	padding-top: 3px;
}
.board_icon, .info, .board_stats, .lastpost {
	display: inline-block;
	align-self: center;
}
.main_container {
	margin-bottom: 20px;
}
.up_contain {
	overflow: hidden;
	border-bottom: 1px solid #D3EDF8;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
}
/* Child boards */
.children {
	border-top: 1px solid #D3EDF8;
	padding: 5px;
	width: 100%;
}
.children p {
	font-size: 0.9em;
}
.children span::after {
	content: ", ";
}
.children span:last-of-type::after {
	content: "";
}
p.moderators {
	font-size: 0.9em;
	font-weight: bold;
}
span.postby {
	display: block;
}
/* Info Center */
#info_center {
	clear: both;
}
#info_center .sub_bar {
	border-top: 1px solid #D3EDF8;
}
#info_center .sub_bar:first-child {
	border-top: none;
}
#upshrink_stats {
	margin-top: 4px;
}
#ic_recentposts {
	line-height: 1.6em;
	width: 98%;
	margin: -2px 0 0 23px;
	font-size: 0.9em;
}
#ic_recentposts th {
	text-align: left;
	padding: 0 4px 0 0;
}
#ic_recentposts td {
	border-top: 1px solid #DFF3FB;
	padding: 0 4px 0 0;
	vertical-align: top;
}
#ic_recentposts tr:first-child td {
	border-top: none;
}
#ic_recentposts .recentpost strong {
	width: 40%;
}
#ic_recentposts .recentposter {
	width: 15%;
}
#ic_recentposts .recentboard {
	width: 20%;
}
#ic_recentposts .recenttime {
	width: 25%;
}
#ic_recentposts .recenttime strong {
	color: #445F6A;
}
#ic_recentposts .windowbg {
	background: none;
}
#upshrink_stats p.inline {
	border: none;
	margin: 0;
	padding: 2px 29px;
	line-height: 1.6em;
	font-size: 0.9em;
}
#upshrink_stats p.inline span {
	margin: 0;
	padding: 4px 0 0 0;
}
#upshrink_stats span.membergroups {
	display: block;
}

/* MessageIndex */
/* Start with description and other things */
#description_board, .filter_row {
	padding: 8px 10px;
	border-radius: var(--r-surface) var(--r-surface) 0 0;
	border-bottom: none;
	box-shadow: none;
}
#description_board h3, #description_board div {
	display: inline-block;
}
#description_board h3::after {
	content: " - ";
}
/* Topic list */
#topic_header {
	margin: 0;
	border-radius: 0;
	display: flex;
}
#topic_header div {
	font-weight: bold;
	font-size: 1em;
	padding: 0;
}
#topic_header input {
	margin-top: 5px !important;
}
#topic_container .windowbg {
	border: 1px solid #D3EDF8;
	border-top: none;
	display: flex;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
	margin: 0;
	overflow: hidden;
}
#topic_container .lastpost, #topic_header .lastpost {
	width: 20%;
}
#topic_container .lastpost, #topic_container .board_stats {
	flex-shrink: 0;
}
.icon img, .moderation input {
	margin-top: 15px;
}
.moderation {
	display: inline-block;
	width: 35px;
	flex-shrink: 0;
	vertical-align: middle;
	text-align: center;
}
/* Quick moderation selects and submit */
#quick_actions {
	margin: 6px 0;
}
/* Icons and jump to */
#topic_icons::before {
	display: block;
	height: 8px;
	clear: both;
	content: "";
}
#topic_icons .information {
	font-size: .9em;
	border-radius: var(--r-control);
}
#topic_icons p {
	padding: 0 12px 0 4px;
	line-height: 2em;
}
/* Should lose this before RC1. It's a kludge. Can be fixed by new image */
#topic_icons .floatleft img:first-child {
	padding: 0 2px;
}

/* Display */
/* Poll question */
#poll {
	overflow: hidden;
}

/* Poll vote options */
#poll_options ul.options li {
	padding: 6px 0 6px 25px;
}

/* Poll results */
#poll_options dl.options {
	padding: 12px 0 12px 25px;
	line-height: 1.4em;
}
#poll_options dl.options dt {
	padding: 4px 0;
	width: 30%;
	max-width: 30em;
	float: left;
	clear: left;
}
#poll_options dl.options .voted {
	font-weight: bold;
}
#poll_options dl.options dd {
	width: 60%;
	max-width: 45em;
	float: left;
	margin: 0 0 4px 0;
	text-align: right;
}

/* Poll notices */
#poll_options p {
	margin: 0 18px 2px 18px;
	padding: 0 6px 6px 6px;
}

div#pollmoderation {
	overflow: auto;
}

/* Styles for edit poll section. */
#edit_poll dl.poll_options dt {
	width: 33%;
}
#edit_poll dl.poll_options dd {
	width: 65%;
}

/* Linked events */
.event_title {
	font-size: var(--t-lg);
	vertical-align: middle;
}
.event_title + a {
	margin-left: 1em;
}

/* On to the posts */
#forumposts {
	clear: both;
	margin: 8px 0 0 0;
}
#forumposts .cat_bar {
	margin: 0 0 -4px 0;
}
/* Topic information */
#forumposts .catbg img {
	margin: 0 4px -2px 0;
}
#forumposts .catbg span {
	white-space: pre;
	/* Specific sizing for clarity without ClearType. */
	font-size: var(--t-sm);
	font-weight: normal;
	padding: 2px 0;
}
/* poster and postarea + moderation area underneath */
.post_wrapper::after {
	content: "";
	display: block;
	clear: both;
}
/* poster details and list of items */
.poster {
	float: left;
	/* Don't set this in em.It will eat too much space if people need to set large text sizes. */
	width: 160px;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	word-wrap: break-word; /* IE fallback */
	overflow-wrap: break-word;
}
.poster h4 {
	font-size: 1.2em;
}
.poster h4, .poster h4 a, .poster li:hover h4 a, .poster h4 a:hover .poster li h4 a, .poster h4 a:focus {
	margin: 0;
	padding: 0;
	color: #15366F;
}

.poster .profile .profile_icons li, .poster .im_icons li {
	display: table-cell;
	padding-right: 5px;
}

/* The visible stuff below the avatar. */
.user_info > li {
	margin: 3px 0 0 0;
}
.poster li.membergroup {
	font-weight: bold;
}
/* @todo Re-code this a bit to give background on anchor. */
.poster li.poster_online, .poster li.poster_online:hover {
	padding: 1px 1px 1px 1px;
	margin: 3px 10px;
}
.poster li.poster_online a {
	color: #15366F;
	line-height: 1.6em;
}
.poster li.poster_online:hover, .poster li.poster_online:hover a {
	text-decoration: underline;
}
.poster li.warning a img {
	vertical-align: bottom;
	padding: 0 2px;
}
.poster img {
	vertical-align: middle;
}
img.avatar {
	object-fit: scale-down;
}
.poster img.avatar {
	max-width: 100%;
}
/* Under the old float layout this margin cleared the poster column. Now
   that the block is a grid, the grid creates the column itself: the margin
   was adding on top of it and pushing the message another 175px to the
   right. */
.postarea, .moderatorbar {
	margin: 0;
}
.postarea div.flow_hidden {
	width: 100%;
}
.moderatorbar {
	clear: right;
}
.messageicon {
	display: inline-block;
}
.messageicon img, #iconList img {
	vertical-align: middle;
}
.keyinfo .postinfo {
	padding: 1px 0 5px 0;
	line-height: 1.5em;
	font-size: 0.9em;
	font-weight: bold;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
}
.keyinfo .postinfo::after, .under_message::after {
	content: "";
	clear: right;
	display: block;
}
.keyinfo .postinfo a, .keyinfo .postinfo a strong {
	color: #1C4792;
}
.keyinfo .postinfo .spacer {
	flex: 1 1 auto;
}
.keyinfo .postinfo .modified {
	color: #2E444D;
	font-weight: normal;
	font-style: italic;
	padding: 2px 4px 0 4px;
}
/* PMs postinfo */
#personal_messages .keyinfo .postinfo {
	flex-direction: column;
	align-items: flex-start;
	font-weight: normal;
}
#reason::before {
	content: " - ";
}
.subject_title a {
	font-size: 0.9em;
	color: #2E444D;
	font-weight: bold;
}
.subject_hidden a {
	display: none;
}
.page_number {
	color: #1C4792;
	font-weight: bold;
	padding: 4px 0 0 4px;
	line-height: 1.5em;
}
.inner {
	padding: 7px 8px 2px 2px;
	margin: 0;
	border-top: 1px solid #ACD3E2;
	min-height: 85px;
	word-wrap: break-word; /* IE fallback */
	overflow-wrap: break-word;
}
img.smiley {
	vertical-align: bottom;
}
.attachments {
	padding: 12px 0 0 0;
}
.attached {
	padding: 0 6px 8px 6px;
	max-width: 100%;
	display: inline-block;
	vertical-align: top;
}
.attachments_top {
	margin: 0 auto;
	text-align: center;
}
.attachments hr {
	clear: both;
	margin: 12px 0;
}
.show_on_hover:hover span {
	display:none;
}
.show_on_hover:hover:before {
	content:attr(data-hover);
}
/* Separator of posts. More useful in the print stylesheet. */
#forumposts .post_separator {
	display: none;
}
/* Next and previous topic links */
.nextlinks {
	text-transform: capitalize;
}
/* Styles for the quick reply area. */
#quickreply {
	clear: both;
}
#quickreply_options .roundframe {
	margin: 0;
	padding: 8px 10% 12px 10%;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}
#quickReplyExpand {
	float: right;
	margin: 2px 2px 0 2px;
}
/* Styles for edit post section */
form#postmodify .roundframe {
	padding: 12px 12%;
	margin: 12px 0 0 0;
}
#post_header {
	padding: 6px;
	overflow: hidden;
}
#post_header dt {
	float: left;
	padding: 0;
	width: 15%;
	margin: 6px 0 0 0;
	font-weight: bold;
}
#post_header dd {
	float: left;
	padding: 0;
	width: 83%;
	margin: 4px 0;
}
#post_header img {
	vertical-align: middle;
}
ul.post_options {
	margin: 0 0 0 12px;
	padding: 0;
	overflow: hidden;
}
ul.post_options li {
	margin: 2px 0;
	width: 49%;
	float: left;
}
#post_additional_options_header {
	margin-top: 0.5em;
}
#post_additional_options {
	overflow: hidden;
}
#post_additional_options .progress_bar {
	height: 22px;
}
#post_settings, #postAttachment, #postAttachment2, #attachment_previews {
	padding: 10px 0;
}
#postAttachment dd, #postAttachment2 dd {
	margin: 4px 0;
}
#postAttachment dd {
	width: 45%;
	float: left;
}
#postAttachment dt, #postAttachment2 dt {
	font-weight: bold;
}
#post_draft_options {
	background: #F5FCFE;
	border: 1px solid #90BACB;
	border-left: 1px solid #ACD3E2;
	border-top: none;
	border-radius: 0 0 var(--r-control) var(--r-control);
}
#post_draft_options .settings dd, #post_draft_options .settings dt {
	width: 50%;
	border-top: 1px solid #D3EDF8;
	padding: 5px 10px;
	margin: 0;
}
#post_draft_options .settings dd:first-of-type, #post_draft_options .settings dt:first-child {
	border-top: none; /* Some people are OCD, like me. :P */
}
#post_draft_options .settings strong {
	color: #445F6A;
}
#post_confirm_buttons {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
}
#post_confirm_buttons, #shortcuts {
	padding: 12px 0;
}
#post_confirm_buttons .smalltext {
	flex: 1;
	word-break: break-word;
	margin: 0 5px 0 0;
}
#post_confirm_buttons .post_button_container {
	vertical-align: top;
}
#post_confirm_buttons .padding {
	flex: 1 100%;
}
.post_verification {
	margin-top: 6px;
}
.post_verification #verification_control {
	margin: 4px 0 4px 12px;
}
/* The BBC buttons */
#bbcBox_message {
	margin: 10px 6px;
}
#bbcBox_message div {
	margin: 2px 0;
	vertical-align: top;
}
#bbcBox_message div img {
	margin: 0 1px 0 0;
	vertical-align: top;
}
#bbcBox_message select {
	margin: 0 2px;
}
/* The smiley strip */
#smileyBox_message {
	margin: 6px;
}
/* All the signatures used in the forum. If your forum users use Mozilla, Opera, or Safari, you might add max-height here ;). */
.signature, .attachments, .under_message,
.custom_fields_above_signature,
.custom_fields_below_signature {
	width: 100%;
	overflow: auto;
	clear: right;
	padding: 12px 0 3px 0;
	border-top: 1px solid #ACD3E2;
	line-height: 1.4em;
	font-size: 0.9em;
}
.under_message {
	overflow: visible;
	border: none;
	box-shadow: none;
}
.smflikebutton {
	margin-top: 4px;
}
.like_count,
.smflikebutton:last-child {
	margin-bottom: 4px;
}
/* Events */
.edit_event {
	margin: 0 10px;
	vertical-align: top;
}
/* ModerationButtons */
#moderationbuttons {
	float: left;
}
#moderationbuttons_strip {
	float: left;
	margin: 4px 0 4px;
}
#moderationbuttons ul li {
	padding: 0 6px 4px 0;
	margin: 0;
}

/* File error */
.errorfile_table {
	font-family: monospace;
	border-spacing: 1px;
}
.errorfile_table td {
	background: #F5FCFE;
}
.errorfile_table .current {
	background: #fbc6c6;
}
.errorfile_table .file_line.current {
	background: #fb9090;
}
.errorfile_table .file_line {
	background: #DFF3FB;
}

/* General Classes */
/* Cat_bar / catbg */
div.cat_bar {
	background: #15366F;
	border-bottom: 1px solid #5A7A87;
	padding: 0;
	border-radius: var(--r-surface) var(--r-surface) 0 0;
}
.cat_bar.collapsed,
.cat_bar.cat_bar_round {
	border-radius: var(--r-surface);
}
.cat_bar h3 {
	padding: 8px 12px 6px 12px;
}
/* Styles for rounded headers. */
.cat_bar .desc {
	color: #fff;
	font-size: var(--t-xs);
	line-height: 1.5em;
	font-weight: normal;
	margin: -8px 0 4px 8px;
}
.cat_bar .desc a {
	color: #fff;
	font-weight: 600;
}
h3.catbg {
	overflow: hidden;
	font-size: 1.1em;
	font-family: var(--f-display);
}
h3.catbg, h3.catbg a, h3.catbg a:hover {
	color: #fff;
}
h3.catbg a:hover {
	text-decoration: none;
}
h3.catbg .main_icons::before, h3.catbg .icon {
	margin: 0 5px 0 0;
}
.cat_bar + .windowbg, .cat_bar + .roundframe {
	margin-top: -1px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}
.cat_bar + .title_bar {
	margin-top: 0;
}
/* Roundframe */
.roundframe {
	margin: 10px 0 0 0;
	padding: 12px 16px;
	background: #ECF8FD;
	border: 1px solid #C5E5F1;
	border-radius: var(--r-surface);
	box-shadow: var(--sh-1);
	overflow: auto;
}
/* TitleBar & SubBar */
.title_bar {
	border: 1px solid #D3EDF8;
	border-top: 2px solid #1C4792;
	border-bottom: 2px solid #0F2957;
	background: #fff;
	color: #445F6A;
	border-radius: var(--r-control) var(--r-control) 0 0;
	margin: 5px 0 0 0;
}
.sub_bar {
	border-bottom: 1px solid #D3EDF8;
	text-shadow: none;
	background: none;
	clear: both;
}
h3.titlebg, h4.titlebg, .titlebg, h3.subbg, h4.subbg, .subbg {
	background: none;
	color: #445F6A;
	font-family: var(--f-display);
	font-weight: bold;
	overflow: hidden;
	padding: 6px 12px 5px 12px;
	text-shadow: none;
}
.titlebg a, .subbg a {
	background: none;
	color: #445F6A;
	text-decoration: none;
}
.title_bar + .windowbg, .title_bar + .roundframe {
	margin-top: -1px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

/* Other */
/* Information */
.information {
	background: #ECF8FD;
	overflow: auto;
	padding-bottom: .5em;
	border: 1px solid #D3EDF8;
	border-top: none;
	border-radius: 0 0 var(--r-surface) var(--r-surface);
	margin: 0 0 10px 0;
	padding: 12px 9px 8px 9px;
}
.generic_list_wrapper .information div {
	background: none;
}
.information a:not(.button) {
	font-weight: bold;
}
p.information img {
	vertical-align: middle;
}
#messageindex .information {
	border-radius: 0;
	margin: 0;
}
#topic_icons .information,
#messageindex .information {
	border-top: 1px solid #D3EDF8;
}
.topic_pages {
	font-size: 0.75em;
	margin: 0 0 0 5px;
}
.topic_pages::before {
	content: "\00ab ";
}
.topic_pages::after {
	content: " \00bb"
}
/* Mentions */
.atwho-view {
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	margin-top: 18px;
	background: #fff;
	border: 1px solid #D3EDF8;
	border-radius: var(--r-control);
	box-shadow: var(--sh-3);
	min-width: 120px;
	z-index: 11110 !important;
}
.atwho-view .cur {
	background: #3366ff;
	color: #fff;
}
.atwho-view .cur small {
	color: #fff;
}
.atwho-view strong {
	color: #3366ff;
}
.atwho-view .cur strong {
	color: #fff;
	font-weight: bold;
}
.atwho-view ul {
	list-style: none;
	padding: 0;
	margin: auto;
}
.atwho-view ul li {
	display: block;
	padding: 5px 10px;
	border-bottom: 1px solid #D3EDF8;
	cursor: pointer;
}
.atwho-view small {
	font-size: var(--t-sm);
	color: #5A7A87;
	font-weight: normal;
}
/* On/Off Icons (User) */
.on, .off {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: var(--r-pill);
	border: 1px solid transparent;
	vertical-align: middle;
}
.on {
	background: #89e75a;
	border-color: #74d246;
}
.off {
	background: #90BACB;
	border-color: #7596A3;
}
#userstatus .smalltext {
	margin: 0 0 0 5px !important;
}

/* Styles for print media. */
@media print {
	#headerarea {
		display: none;
	}

	.tborder {
		border: none;
	}
}
/* Who */
.action_who #upper_show {
	margin-top: 6px;
}
.action_who #lower_pagesection {
	margin-top: 4px;
}
.action_who #lower_pagelinks {
	margin-top: -4px;
}
.action_who select {
	margin-top: -1px !important;
}
span.member.hidden {
	display: inline-block;
	font-style: italic;
}

/* Icons (converted from img to css) */
/* Stay here till I find a better place for you guys */
h3.profile_hd::before {
	vertical-align: middle;
}
h3.profile_hd::before,
.main_icons.profile_hd::before {
	content: "";
	background: url(../images/icons/profile_hd.png) no-repeat;
	height: 24px;
	width: 24px;
	display: inline-block;
}
.main_icons.profile_sm::before {
	background: url(../images/icons/profile_sm.png) no-repeat;
}
.xx {
	background: url(../images/post/xx.png) 2px no-repeat;
	padding: 25px 6px 25px 18px;
}

/* Those classes are sharing exact same gradient. */
/* Background of buttons */
.dropmenu li ul, .top_menu, .dropmenu li li:hover, .button,
.dropmenu li li:hover > a, .dropmenu li li a:focus, .dropmenu li li a:hover,
#top_section, .quickbuttons > li,
.quickbuttons li ul, .quickbuttons li ul li a:hover, .quickbuttons ul li a:focus,
.inline_mod_check, .popup_window, #inner_section, .post_options ul,
.post_options ul a:hover, .post_options ul a:focus, .notify_dropdown a:hover, .notify_dropdown a:focus {
	background: #fff; /* fallback for some browsers */
	background-image: none;
}
/* Well some of them has different gradient effect on hover */
.button:hover, #search_form .button:hover, .quickbuttons li:hover {
	background: #fff;
	background-image: none;
}
/* If it fits I sits... */
.navigate_section ul, .popup_content, .up_contain {
	background: #fff;
	background-image: none;
}

/* Topic/Board follow-alert menu */
.notify_dropdown strong {
	font-size: 1.1em;
}
.notify_dropdown a {
	display: block;
	padding: 0.5em;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--r-control);
}
.notify_dropdown a:hover, .notify_dropdown a:focus {
	border-color: #D3EDF8;
}
.notify_dropdown span {
	font-size: 0.9em;
}

/* Some new stuff */
#display_head {
	clear: both;
	margin: -7px 0 15px 0;
}
#display_head p {
	/* on a tinted ground the secondary tone drops to 4.24:1: it needs one step darker */
	color: #445F6A;
}
#display_head span {
	margin: -4px 0 0 0;
}
.display_title {
	font-weight: normal;
	font-size: var(--t-2xl);
	margin-bottom: 0.25em;
	line-height: 1.05em;
	overflow-wrap: break-word;
}

#reported_posts .main_icons,
#reported_members .main_icons {
	margin: -3px 1px 0 0;
}
#reported_posts .quickbuttons li a,
#reported_members .quickbuttons li a {
	background: none;
}

/* Some colors for generic usage */
/* Sometimes there will be an error when you post */
/* Messages that somehow need to attract the attention. */
.red, .meaction,
.error, .alert, .warn_mute {
	color: red;
}
.blue {
	color: blue;
}
.green {
	color: green;
}

/* Adding some classes for generic usage and JS rules */
.hidden {
	display: none;
}
.inline_block {
	display: inline-block;
}
.block {
	display: block;
	margin: 0 0 5px 0;
}

/* Alternating colors */
.stripes:nth-of-type(even) {
	background-color: #ECF8FD;
}
.stripes:nth-of-type(odd) {
	background-color: #ECF8FD;
}
.alternative {
	background-color: #ECF8FD;
}
.alternative2 {
	background-color: #DFF3FB;
}

.centerbox {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.dz-image-preview {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
	margin-top: 12px;
}
#attachment_previews {
    display: none;
}
#attachment_previews div.descbox > div,
#attachment_previews div.errorbox > div,
#attachment_previews div.infobox > div {
	padding: 10px;
}
#attachment_previews .attach-preview {
	flex: 0 0 auto;
	width: 170px;
}
#attachment_previews .attachment_info {
	flex: 1 1 auto;
	width: 250px;
}
#attachment_previews .attach-ui {
	min-height: 36px;
	padding: 10px 0;
	float: right;
}
input[name="attachBBC"] {
	width: 100%;
	margin-top: 10px;
}
.attachment_info .progress_bar, .attachment_info .attached_BBC, a#attach_cancel_all, a#attach_upload_all, .attach-ui {
	display: none;
}
.attachment_info .progress_bar {
	margin: 6px 0;
}
.attached_BBC_width_height label {
	min-width: 100px;
	display: inline-block;
}
.attached_BBC_width, .attached_BBC_height {
	margin: 10px 1em 0 0;
	display: inline-block;
}
.attachment_info input[type="number"] {
	width: 5em;
}
#attachment_upload {
	min-height: 50px;
}
#drop_zone_ui {
	display: none;
}
#total_progress {
	width: 50%;
	display: none;
}
#max_files_progress, #max_files_progress_text {
	display: none;
}

/* Hide this from desktop users sshh... our little sekrit */
.mobile_buttons, .mobile_display {
	display: none;
}

/* Two-Factor Auth code container */
.tfacode {
	background: #D3EDF8;
	padding: 5px;
	display: inline-block;
}

/* TFA QR block */
.tfa_qrcode {
	padding: 6% 8%;
}

.tfa_qrcode img {
	width: 140px;
}

/* This was named as "winfo" before, but its better named noup */
.noup {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	margin: 0 0 10px 0 !important;
}
.information.noup {
	border-radius: 0;
	margin: 0 !important;
	border-bottom: none;
}
.windowbg.noup {
	box-shadow: none;
}

/* Make the reCAPTCHA dialog centered to match the positioning of the built-in verification */
.g-recaptcha {
	display: inline-block;
}

/* If its collapsed you know what to do */
.collapsed {
	opacity: 0.5;
	transition: 1s;
}
.collapsed:hover {
	opacity: 1;
}

/* Lets not allow our textarea in news section overflow too much to left */
tr[id^='list_news_lists_'] textarea {
	width: 100%;
	resize: vertical;
	min-height: 100px;
}

/* Responsive Youtube embed */
.videocontainer {
	max-width: 560px;
}
.centertext .videocontainer,
.justifytext .videocontainer {
	margin: 0 auto;
}
.righttext .videocontainer {
	margin: 0 0 0 auto;
}
.lefttext .videocontainer {
	margin: 0 auto 0 0;
}
.videocontainer > div {
	position: relative;
	padding-bottom: 56.25%;
}
.videocontainer iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}
.videocontainer video {
	object-fit: contain;
	background: black;
	max-width: 100%;
}

.backtrace:not(:last-child) {
	padding-bottom: 0.5em;
	border-bottom: 1px solid #D3EDF8;
	margin-bottom: 0.5em;
}

/* To break or not to break that is the question indeed */
.word_break {
	word-break: break-all;
}

div.sceditor-container:not(.sceditor-maximize) {
	z-index: 4;
}

#attach_current_directory {
	word-break: break-word;
}
/* Add max-width for theme thumbnails */
img.theme_thumbnail {
	max-width: 250px;
}

#lang_main_files_list .name, #member_list .email, #approve_list .email {
	word-break: break-word;
}
/* ======================================================================
   MOTION
   The theme had four transitions in 4,200 lines: every hover was an abrupt
   jump. Nothing is animated here, only the abruptness is removed — 140ms
   on colour, border and depth, never on properties that reflow the
   layout.
   ====================================================================== */

:root {
	--dur: 140ms;
	--ease: cubic-bezier(.2, .6, .3, 1);
}

a,
button, .button, input[type="submit"],
.dropmenu a, #top_info > li > a,
.quickbuttons > li > a,
.pagelinks .nav_page, .pagelinks .current_page,
input, select, textarea,
.up_contain, #topic_container .windowbg {
	transition:
		background-color var(--dur) var(--ease),
		border-color var(--dur) var(--ease),
		color var(--dur) var(--ease),
		box-shadow var(--dur) var(--ease);
}

/* The row answers to the pointer. On a list of thirty boards or twenty-five
   topics you need to know which one you are on: until now there was no
   feedback at all. */
.up_contain:hover,
#topic_container .windowbg:hover {
	background-color: #DFF3FB;
}

/* Keyboard focus was invisible: one single treatment, gold because it is a
   transient state and competes with nothing else on the page. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid #BA9012;
	outline-offset: 2px;
	border-radius: var(--r-control);
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ======================================================================
   ICONS — FontAwesome 6 Free replacing the sprites
   The files live in the theme (313 KB of woff2), not on a CDN: no external
   dependency and no privacy question about fonts.
   The class names stay the ones SMF uses: only the way they are drawn
   changes, so the templates are untouched and the mods keep working.
   ====================================================================== */


/* The sprite was an image at fixed offsets: here it becomes a glyph, which
   scales with the text and takes its colour from currentColor. */
.main_icons::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	background: none !important;
	width: auto;
	height: auto;
	font-size: 15px;
	line-height: 1;
	vertical-align: -1px;
	content: "\f111";          /* fallback: no icon is ever left as an empty square */
}

.main_icons.admin::before { content: "\f085"; }
.main_icons.administration::before { content: "\f085"; }
.main_icons.alerts::before { content: "\f0f3"; }
.main_icons.approve::before { content: "\f00c"; }
.main_icons.approve_button::before { content: "\f00c"; }
.main_icons.attachment::before { content: "\f0c6"; }
.main_icons.ban::before { content: "\f05e"; }
.main_icons.boards::before { content: "\f03a"; }
.main_icons.calendar::before { content: "\f073"; }
.main_icons.calendar_export::before { content: "\f019"; }
.main_icons.calendar_modify::before { content: "\f044"; }
.main_icons.change_menu::before { content: "\f0dc"; }
.main_icons.change_menu2::before { content: "\f0dc"; }
.main_icons.check::before { content: "\f00c"; }
.main_icons.close::before { content: "\f00d"; }
.main_icons.corefeatures::before { content: "\f1de"; }
.main_icons.current_theme::before { content: "\f53f"; }
.main_icons.delete::before { content: "\f2ed"; }
.main_icons.details::before { content: "\f05a"; }
.main_icons.disable::before { content: "\f00d"; }
.main_icons.drafts::before { content: "\f15c"; }
.main_icons.enable::before { content: "\f00c"; }
.main_icons.engines::before { content: "\f085"; }
.main_icons.error::before { content: "\f06a"; }
.main_icons.exit::before { content: "\f2f5"; }
.main_icons.features::before { content: "\f1de"; }
.main_icons.filter::before { content: "\f0b0"; }
.main_icons.folder::before { content: "\f07b"; }
.main_icons.frenemy::before { content: "\f234"; }
.main_icons.gender_::before { content: "\f22d"; }
.main_icons.gender_0::before { content: "\f22d"; }
.main_icons.gender_1::before { content: "\f222"; }
.main_icons.gender_2::before { content: "\f221"; }
.main_icons.general::before { content: "\f013"; }
.main_icons.help::before { content: "\f059"; }
.main_icons.hide_popup::before { content: "\f00d"; }
.main_icons.history::before { content: "\f1da"; }
.main_icons.home::before { content: "\f015"; }
.main_icons.ignore::before { content: "\f070"; }
.main_icons.inbox::before { content: "\f4ad"; }
.main_icons.invalid::before { content: "\f00d"; }
.main_icons.languages::before { content: "\f1ab"; }
.main_icons.last_post::before { content: "\f105"; }
.main_icons.left_arrow::before { content: "\f053"; }
.main_icons.like::before { content: "\f164"; }
.main_icons.liked_messages::before { content: "\f164"; }
.main_icons.liked_users::before { content: "\f164"; }
.main_icons.lock::before { content: "\f023"; }
.main_icons.login::before { content: "\f2f6"; }
.main_icons.logout::before { content: "\f2f5"; }
.main_icons.logs::before { content: "\f15c"; }
.main_icons.mail::before { content: "\f0e0"; }
.main_icons.mail_new::before { content: "\f2b6"; }
.main_icons.maintain::before { content: "\f0ad"; }
.main_icons.manlabels::before { content: "\f02e"; }
.main_icons.manrules::before { content: "\f0e3"; }
.main_icons.membergroups::before { content: "\f0c0"; }
.main_icons.members::before { content: "\f0c0"; }
.main_icons.members_delete::before { content: "\f235"; }
.main_icons.members_request::before { content: "\f4fd"; }
.main_icons.members_watched::before { content: "\f06e"; }
.main_icons.merge::before { content: "\f126"; }
.main_icons.mlist::before { content: "\f0c0"; }
.main_icons.moderate::before { content: "\f3ed"; }
.main_icons.modifications::before { content: "\f1de"; }
.main_icons.modify_button::before { content: "\f044"; }
.main_icons.move::before { content: "\f0b2"; }
.main_icons.news::before { content: "\f1ea"; }
.main_icons.next_page::before { content: "\f054"; }
.main_icons.notify_button::before { content: "\f0f3"; }
.main_icons.package_ops::before { content: "\f466"; }
.main_icons.packages::before { content: "\f466"; }
.main_icons.paid::before { content: "\f0d6"; }
.main_icons.people::before { content: "\f0c0"; }
.main_icons.permissions::before { content: "\f084"; }
.main_icons.personal_message::before { content: "\f4ad"; }
.main_icons.plus::before { content: "\f067"; }
.main_icons.poll::before { content: "\f080"; }
.main_icons.post_moderation_allow::before { content: "\f00c"; }
.main_icons.post_moderation_attach::before { content: "\f0c6"; }
.main_icons.post_moderation_deny::before { content: "\f00d"; }
.main_icons.post_moderation_moderate::before { content: "\f3ed"; }
.main_icons.posters::before { content: "\f007"; }
.main_icons.posts::before { content: "\f086"; }
.main_icons.previous_page::before { content: "\f053"; }
.main_icons.profile_hd::before { content: "\f007"; }
.main_icons.profile_sm::before { content: "\f007"; }
.main_icons.prune::before { content: "\f2ed"; }
.main_icons.quick_edit_button::before { content: "\f303"; }
.main_icons.quote::before { content: "\f10d"; }
.main_icons.quote_selected::before { content: "\f10d"; }
.main_icons.read_button::before { content: "\f2b6"; }
.main_icons.recent_posts::before { content: "\f017"; }
.main_icons.regcenter::before { content: "\f234"; }
.main_icons.remove_button::before { content: "\f2ed"; }
.main_icons.replied::before { content: "\f3e5"; }
.main_icons.replies::before { content: "\f086"; }
.main_icons.reply_all_button::before { content: "\f122"; }
.main_icons.reply_button::before { content: "\f3e5"; }
.main_icons.reports::before { content: "\f15c"; }
.main_icons.restore_button::before { content: "\f0e2"; }
.main_icons.right_arrow::before { content: "\f054"; }
.main_icons.scheduled::before { content: "\f017"; }
.main_icons.search::before { content: "\f002"; }
.main_icons.security::before { content: "\f3ed"; }
.main_icons.select_above::before { content: "\f062"; }
.main_icons.select_below::before { content: "\f063"; }
.main_icons.select_here::before { content: "\f061"; }
.main_icons.send::before { content: "\f1d8"; }
.main_icons.server::before { content: "\f233"; }
.main_icons.settings::before { content: "\f013"; }
.main_icons.smiley::before { content: "\f118"; }
.main_icons.sort_down::before { content: "\f0dd"; }
.main_icons.sort_up::before { content: "\f0de"; }
.main_icons.split_button::before { content: "\f0c4"; }
.main_icons.split_desel::before { content: "\f0c4"; }
.main_icons.split_sel::before { content: "\f0c4"; }
.main_icons.starters::before { content: "\f007"; }
.main_icons.stats::before { content: "\f080"; }
.main_icons.sticky::before { content: "\f08d"; }
.main_icons.support::before { content: "\f1cd"; }
.main_icons.switch::before { content: "\f0ec"; }
.main_icons.themes::before { content: "\f53f"; }
.main_icons.time_online::before { content: "\f017"; }
.main_icons.topics_replies::before { content: "\f086"; }
.main_icons.topics_views::before { content: "\f06e"; }
.main_icons.unapprove::before { content: "\f00d"; }
.main_icons.unapprove_button::before { content: "\f00d"; }
.main_icons.unlike::before { content: "\f165"; }
.main_icons.unread_button::before { content: "\f0e0"; }
.main_icons.valid::before { content: "\f00c"; }
.main_icons.views::before { content: "\f06e"; }
.main_icons.warn_button::before { content: "\f071"; }
.main_icons.warning::before { content: "\f071"; }
.main_icons.warning_moderate::before { content: "\f071"; }
.main_icons.warning_mute::before { content: "\f6a9"; }
.main_icons.warning_watch::before { content: "\f06e"; }
.main_icons.watch::before { content: "\f06e"; }
.main_icons.www::before { content: "\f0ac"; }
.main_icons.sent::before { content: "\f1d8"; }

/* ----------------------------------------------------------------------
   The four board icons
   State lives in the fill of the disc, not in a tint of the sprite.
   Gold appears only where there is something to read: full ring = new
   here, dot = new in a sub-board.
   ---------------------------------------------------------------------- */

/* The container centres on its own: the anchor is a block (display:grid),
   and on blocks the original text-align:center has no effect — which is why
   the disc stayed glued to the left edge of the 80px column. */
.board_icon {
	display: grid;
	place-items: center;
	padding: 8px 0;
}

.board_icon a {
	position: relative;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: var(--r-pill);
	background-image: none !important;
	background-color: #DFF3FB;
	color: #5A7A87;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.board_icon a::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 20px;
	line-height: 1;
	content: "\f086";
}
.board_icon a:hover, .board_icon a:focus {
	background-color: #1C4792;
	color: #fff;
}

/* board_on — unread posts in this board */
.board_icon a.board_on {
	background-color: #15366F;
	color: #fff;
	box-shadow: 0 0 0 2px #D7A819;
}
/* board_on2 — this board is read, a sub-board is not */
.board_icon a.board_on2 {
	background-color: #15366F;
	color: #fff;
}
.board_icon a.board_on2::after {
	content: "";
	position: absolute;
	inset-inline-end: -1px;
	bottom: -1px;
	width: 12px;
	height: 12px;
	border-radius: var(--r-pill);
	background: #D7A819;
	border: 2px solid #fff;
}
/* board_off — nothing new.
   The same ring as the unread ones, but blue instead of gold: the disc stays
   defined and recognisable, and gold goes on meaning one thing only.
   The glyph takes the same blue as the ring, so the icon reads as a single
   object and not as an outline with something else inside it. */
.board_icon a.board_off {
	background-color: #DFF3FB;
	color: #15366F;
	box-shadow: 0 0 0 2px #15366F;
}
/* board_redirect — an outbound link: it has no read state */
.board_icon a.board_redirect {
	background-color: #D3EDF8;
	color: #15366F;
	box-shadow: 0 0 0 2px #15366F;
}
.board_icon a.board_redirect::before { content: "\f35d"; }

/* ----------------------------------------------------------------------
   Online state
   Two elements said the same thing in two different languages: the dot next
   to the name was green (outside the palette) and the personal message icon
   was identical online and offline — it fell through to the fallback glyph.
   Both now use one code: full sky = online, the same hue desaturated =
   offline. No new colour, and the difference reads even at small sizes.
   ---------------------------------------------------------------------- */

/* A personal message lives inside the forum: speech bubble.
   Email is real mail going outside and keeps the envelope. Two different
   actions cannot share the same glyph. */
.main_icons.im_on::before,
.main_icons.im_off::before { content: "\f4ad"; }

.main_icons.im_on  { color: #0D9BD3; }              /* hsl(197 88% 44%) */
.main_icons.im_off { color: #7B949D; }              /* hsl(197 15% 55%) */

.on  { background: #0D9BD3; border-color: #0A7DA9; }
.off { background: #7B949D; border-color: #62787F; }

/* ======================================================================
   THE SPEECH BUBBLE
   On a forum where people argue by quoting each other, the unit of content
   is not a table row: it is someone speaking. The poster card and the body
   of the message become two distinct objects, and a tail connects the
   second to the first.
   The tail is a rotated square in the same white, bordered on two sides: it
   inherits the panel's colour and rule, so it never falls out of sync when
   the tokens change.
   ====================================================================== */

/* A faint ground behind the two cards: without a break, white on white
   makes neither the bubble nor its tail readable. */
#forumposts .windowbg {
	background: #DFF3FB;
	padding: 14px 16px;
}

/* From float to grid: two real columns, aligned to the top. */
.post_wrapper {
	display: grid;
	grid-template-columns: 175px minmax(0, 1fr);
	gap: 0 22px;
	align-items: start;
}
.post_wrapper > .poster { grid-column: 1; float: none; width: auto; }
.post_wrapper > .postarea,
.post_wrapper > .moderatorbar { grid-column: 2; min-width: 0; }

/* The poster card */
.post_wrapper > .poster {
	background: #fff;
	border: 1px solid #D3EDF8;
	border-radius: var(--r-surface);
	box-shadow: var(--sh-1);
	padding: 14px 10px;
}

/* The bubble */
.post_wrapper > .postarea {
	position: relative;
	background: #fff;
	border: 1px solid #D3EDF8;
	border-radius: var(--r-surface);
	box-shadow: var(--sh-1);
	padding: 14px 18px 16px;
}

/* The tail: a square rotated 45 degrees, bordered on the two exposed sides. */
/* A rotated 22px square juts out by roughly 16px: within the 22px gap
   between the two cards that leaves 6px of clearance, so the tip never
   touches the poster card. */
.post_wrapper > .postarea::before {
	content: "";
	position: absolute;
	left: -12px;
	top: 22px;
	width: 22px;
	height: 22px;
	background: #fff;
	border-left: 1px solid #D3EDF8;
	border-bottom: 1px solid #D3EDF8;
	border-radius: 0 0 0 4px;
	transform: rotate(45deg);
}

.post_wrapper > .moderatorbar {
	margin-top: 8px;
	padding-inline: 4px;
}

/* Below 768px the poster card moves above the message and the tail rotates
   to point upwards. */
@media (max-width: 768px) {
	.post_wrapper {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px 0;
	}
	.post_wrapper > .poster,
	.post_wrapper > .postarea,
	.post_wrapper > .moderatorbar { grid-column: 1; }
	.post_wrapper > .postarea::before {
		left: 28px;
		top: -12px;
		border-left: 1px solid #D3EDF8;
		border-bottom: none;
		border-top: 1px solid #D3EDF8;
		border-radius: 4px 0 0 0;
	}
}

/* ======================================================================
   SPRING MOTION
   A spring curve on a colour cannot be perceived: a colour cannot overshoot
   its target and come back. Something has to actually move.
   So the spring goes where there is real displacement, and only on the two
   elements that get touched most: the buttons and the board discs.
   Everything else goes on changing colour in a linear 140ms.
   ====================================================================== */

:root {
	--dur-spring: 260ms;
	/* a slight overshoot and settle: that is what gives the sense of
	   responsiveness without looking like an animation */
	--ease-spring: cubic-bezier(.34, 1.42, .64, 1);
}

/* the real spring wherever the browser supports it */
@supports (transition-timing-function: linear(0, 1)) {
	:root {
		--ease-spring: linear(
			0, 0.006, 0.25 2.4%, 0.9 8.1%, 1.075 10.7%, 1.135 12.4%,
			1.13 14.5%, 1.05 18.6%, 0.996 22.4%, 0.998 27%, 1.002 40%, 1
		);
	}
}

.button, input[type="submit"], button.button {
	transition:
		background-color var(--dur) var(--ease),
		border-color var(--dur) var(--ease),
		color var(--dur) var(--ease),
		box-shadow var(--dur) var(--ease),
		transform var(--dur-spring) var(--ease-spring);
}
.button:hover, input[type="submit"]:hover { transform: translateY(-1px); }
.button:active, input[type="submit"]:active { transform: translateY(0) scale(.97); }

.board_icon a {
	transition:
		background-color var(--dur) var(--ease),
		color var(--dur) var(--ease),
		transform var(--dur-spring) var(--ease-spring);
}
.board_icon a:hover, .board_icon a:focus-visible { transform: scale(1.07); }
.board_icon a:active { transform: scale(.96); }

/* Anyone who asked for less motion gets none: the prefers-reduced-motion
   block above zeroes these as well. */
@media (prefers-reduced-motion: reduce) {
	.button:hover, .button:active,
	input[type="submit"]:hover, input[type="submit"]:active,
	.board_icon a:hover, .board_icon a:focus-visible, .board_icon a:active {
		transform: none;
	}
}