/* INTRODUCTION
 * This variant is the dark Elkarte theme.
 * This is eye candy only. All the layout code is in index.css.
 *
 * All theme variants depend on the layout code for stability.
 * It is better to copy code to a variant CSS file for testing.
 * -------------------------------------------------------
 *
 *		$GENERAL.............Global resets, clearfixes, etc.
 *		$COMMON..............Common classes to drive you bonkers.
 *		$BBC.................Quotes, code blocks, BBC styles.
 *		$AJAX................The "loading" bar (quick edit, etc).
 *
 *		$MAIN................Forum header, wrapper, and footer.
 *		$MENUS...............Main and secondary menus.
 *		$LINKTREE............The breadcrumbs.
 *		$BUTTONS.............Most button strips.
 *		$PAGELINKS...........Page navigation links.
 *
 *		$TABLES..............Generic tables (memberlist, error log, etc).
 *		$SETTINGS............Generic lists for settings pages.
 *		$BOARDS..............Board index, sub-boards, and message index.
 *
 *		$TOPICS..............The display template (topic view), including send.
 *		$EDITOR..............Main editor (posts, events, polls) and topic summary.
 *		$MODERATE............Move topic, split topic, merge topic.
 *
 *		$PROFILE.............The profile areas.
 *		$PERSONAL............The personal messages (PM) areas.
 *		$CALENDAR............The calendar
 *		$STATISTICS..........The statistics centre.
 *
 *		$HELP................Help pages, help icons and pop-ups, tooltips.
 *		$SEARCH..............Search pages, including memberlist search.
 *		$MEMBERLIST..........The memberlist table.
 *		$LOGIN...............Login and registration, maintenance mode.
 *
 *		$BOXES...............Message boxes (error, warning, info, etc).
 *		$PROGRESS............Nifty progress bars.
 *		$MEDIA...............Experimental media queries.
 */
/* -------------------------------------------------------
 *	$GENERAL
 * -------------------------------------------------------
 */

:root {
	--is-dark-theme: true;
	--color-header-bg: #333333;
	--color-primary: #00a0fa;
	--color-primary-contrast: #0a0a0a;
	--color-primary-dark-1: #4ab2fa;
	--color-primary-dark-2: #68cafd;
	--color-primary-dark-3: #8ed9ff;
	--color-primary-dark-4: #A4E1FF;
	--color-primary-dark-5: #bae8ff;
	--color-primary-dark-6: #CFEFFF;
	--color-primary-dark-7: #f4f8fb;
	--color-primary-light-1: #00a0fa;
	--color-primary-light-2: #0090f7;
	--color-primary-light-3: #0082e9;
	--color-primary-light-4: #0070d6;
	--color-primary-light-5: #0070d6;
	--color-primary-light-6: #0041a5;
	--color-primary-light-7: #04080c;
	--color-primary-hover: var(--color-primary-light-2);
	--color-primary-active: var(--color-primary-light-3);
	--color-secondary: #858585;
	--color-secondary-dark-1: #414b54;
	--color-secondary-dark-2: #49545f;
	--color-secondary-dark-3: #576471;
	--color-secondary-dark-4: #677685;
	--color-secondary-dark-5: #758594;
	--color-secondary-dark-6: #8392a0;
	--color-secondary-dark-7: #929eab;
	--color-secondary-dark-8: #a2acb7;
	--color-secondary-dark-9: #a9b3bd;
	--color-secondary-dark-10: #b7bfc7;
	--color-secondary-dark-11: #c5cbd2;
	--color-secondary-dark-12: #cfd4da;
	--color-secondary-dark-13: #d2d7dc;
	--color-secondary-light-1: #707070;
	--color-secondary-light-2: #505050;
	--color-secondary-light-3: #1F2123;
	--color-secondary-light-4: #171b1e;
	--color-secondary-button: var(--color-secondary-dark-4);
	--color-secondary-hover: var(--color-secondary-dark-3);
	--color-secondary-active: var(--color-secondary-dark-2);
	/* console colors - used for actions console and console files */
	--color-console-fg: #f7f8f9;
	--color-console-fg-subtle: #bdc4cc;
	--color-console-bg: #171b1e;
	--color-console-border: #2e353b;
	--color-console-hover-bg: #272d33;
	--color-console-active-bg: #2e353b;
	--color-console-menu-bg: #262b31;
	--color-console-menu-border: #414b55;
	/* named colors */
	--color-red: #c23636;
	--color-orange: #f38236;
	--color-yellow: #b88a03;
	--color-olive: #839311;
	--color-green: #3b8631;
	--color-teal: #00837c;
	--color-blue: #347cb3;
	--color-violet: #7b4edb;
	--color-purple: #881bb9;
	--color-pink: #be297d;
	--color-brown: #94674a;
	--color-black: #292e38;
	/* light variants - produced via Sass scale-color(color, $lightness: +10%) */
	--color-red-light: rgb(203.6564516129, 70.5435483871, 70.5435483871);
	--color-orange-light: rgb(244.2, 142.5, 74.1);
	--color-yellow-light: rgb(215.7818181818, 161.8363636364, 3.5181818182);
	--color-olive-light: rgb(158.637804878, 178.0134146341, 20.5865853659);
	--color-green-light: rgb(69.5426229508, 157.9442622951, 57.7557377049);
	--color-teal-light: rgb(0, 168.9, 159.8748091603);
	--color-blue-light: rgb(60.4246753247, 138.6896103896, 198.4753246753);
	--color-violet-light: rgb(136.2, 95.7, 222.6);
	--color-purple-light: rgb(155.1169811321, 30.7952830189, 211.0047169811);
	--color-pink-light: rgb(210.4324675325, 48.4675324675, 139.7766233766);
	--color-brown-light: rgb(167.2, 116.3621621622, 83.6);
	--color-black-light: rgb(58.4567010309, 65.5855670103, 79.8432989691);
	/* dark 1 variants - produced via Sass scale-color(color, $lightness: -10%) */
	--color-red-dark-1: rgb(174.6, 48.6, 48.6);
	--color-orange-dark-1: rgb(241.3267605634, 112.5704225352, 25.9732394366);
	--color-yellow-dark-1: rgb(165.6, 124.2, 2.7);
	--color-olive-dark-1: rgb(117.9, 132.3, 15.3);
	--color-green-dark-1: rgb(53.1, 120.6, 44.1);
	--color-teal-dark-1: rgb(0, 117.9, 111.6);
	--color-blue-dark-1: rgb(46.8, 111.6, 161.1);
	--color-violet-dark-1: rgb(104.5943661972, 53.3197183099, 213.9802816901);
	--color-purple-dark-1: rgb(122.4, 24.3, 166.5);
	--color-pink-dark-1: rgb(171, 36.9, 112.5);
	--color-brown-dark-1: rgb(133.2, 92.7, 66.6);
	--color-black-dark-1: rgb(36.9, 41.4, 50.4);
	/* dark 2 variants - produced via Sass scale-color(color, $lightness: -20%) */
	--color-red-dark-2: rgb(155.2, 43.2, 43.2);
	--color-orange-dark-2: rgb(224.214084507, 98.1633802817, 13.385915493);
	--color-yellow-dark-2: rgb(147.2, 110.4, 2.4);
	--color-olive-dark-2: rgb(104.8, 117.6, 13.6);
	--color-green-dark-2: rgb(47.2, 107.2, 39.2);
	--color-teal-dark-2: rgb(0, 104.8, 99.2);
	--color-blue-dark-2: rgb(41.6, 99.2, 143.2);
	--color-violet-dark-2: rgb(90.3549295775, 40.1577464789, 197.4422535211);
	--color-purple-dark-2: rgb(108.8, 21.6, 148);
	--color-pink-dark-2: rgb(152, 32.8, 100);
	--color-brown-dark-2: rgb(118.4, 82.4, 59.2);
	--color-black-dark-2: rgb(32.8, 36.8, 44.8);
	/* subtle colors */
	--color-red-subtle: var(--color-red-dark-2);
	--color-orange-subtle: var(--color-orange-dark-2);
	--color-yellow-subtle: var(--color-yellow-dark-2);
	--color-olive-subtle: var(--color-olive-dark-2);
	--color-green-subtle: var(--color-green-dark-2);
	--color-teal-subtle: var(--color-teal-dark-2);
	--color-blue-subtle: var(--color-blue-dark-2);
	--color-violet-subtle: var(--color-violet-dark-2);
	--color-purple-subtle: var(--color-purple-dark-2);
	--color-pink-subtle: var(--color-pink-dark-2);
	--color-brown-subtle: var(--color-brown-dark-2);
	--color-black-subtle: var(--color-black-dark-2);
	/* contrasty colors */
	--color-red-contrast: var(--color-red-light);
	--color-orange-contrast: var(--color-orange-light);
	--color-yellow-contrast: var(--color-yellow-light);
	--color-olive-contrast: var(--color-olive-light);
	--color-green-contrast: var(--color-green-light);
	--color-teal-contrast: var(--color-teal-light);
	--color-blue-contrast: var(--color-blue-light);
	--color-violet-contrast: var(--color-violet-light);
	--color-purple-contrast: var(--color-purple-light);
	--color-pink-contrast: var(--color-pink-light);
	--color-brown-contrast: var(--color-brown-light);
	--color-black-contrast: var(--color-black-light);
	--color-white-contrast: #ffffff;
	--color-beige-contrast: #f5f5dc;
	--color-navy-contrast: #3535b4;
	--color-maroon-contrast: #973333;
	/* ansi colors used for actions console and console files */
	--color-ansi-black: #1e2327;
	--color-ansi-red: #cc4848;
	--color-ansi-green: #87ab63;
	--color-ansi-yellow: #cc9903;
	--color-ansi-blue: #3a8ac6;
	--color-ansi-magenta: #d22e8b;
	--color-ansi-cyan: #00918a;
	--color-ansi-white: var(--color-console-fg-subtle);
	--color-ansi-bright-black: #424851;
	--color-ansi-bright-red: #d15a5a;
	--color-ansi-bright-green: #93b373;
	--color-ansi-bright-yellow: #eaaf03;
	--color-ansi-bright-blue: #4e96cc;
	--color-ansi-bright-magenta: #d74397;
	--color-ansi-bright-cyan: #00b6ad;
	--color-ansi-bright-white: var(--color-console-fg);
	/* other colors */
	--color-grey: #384149;
	--color-grey-light: #818f9e;
	--color-gold: #b1983b;
	--color-white: #ffffff;
	--color-error-border: #a04141;
	--color-error-bg: #522;
	--color-error-bg-active: #744;
	--color-error-bg-hover: #633;
	--color-error-text: #f9cbcb;
	--color-success-border: #458a57;
	--color-success-bg: #284034;
	--color-success-text: #6cc664;
	--color-warning-border: #bb9d00;
	--color-warning-bg: #3a3a30;
	--color-warning-text: #fbbd08;
	--color-info-border: #306090;
	--color-info-bg: #26354c;
	--color-info-text: #38a8e8;
	--color-green-badge: #21ba45;
	--color-green-badge-bg: #21ba451a;
	--color-green-badge-hover-bg: #21ba454d;
	/* target-based colors */
	--color-body: #1a1a1a;
	--color-body-alternate: #111;
	--color-body-border: #424851;
	--color-box-header: #0f3147;
	--color-box-header-border: #0a6682;
	--color-box-body: var(--color-menu);
	--color-box-body-border: var(--color-secondary);
	--color-box-body-highlight: #505050;
	--color-text-dark: #f7f8f9;
	--color-text: #d0d5da;
	--color-text-light: #bcc3cb;
	--color-text-light-1: #a5afb9;
	--color-text-light-2: #8f9ba8;
	--color-text-light-3: #788797;
	--color-footer: #0b0b0c;
	--color-input-text: var(--color-text-dark);
	--color-input-text-disabled: var(--color-input-toggle-background);
	--color-input-background: #2a2a2a;
	--color-input-background-hover: #424242;
	--color-input-toggle-background: #2e353c;
	--color-input-border: var(--color-secondary);
	--color-input-border-hover: var(--color-secondary-dark-10);
	--color-input-border-disabled: var(--color-secondary-dark-1);
	--color-light: #00001728;
	--color-light-border: #e8f3ff28;
	--color-hover: var(--color-light-border);
	--color-active: #e8f3ff24;
	--color-menu: #2a2a2a;
	--color-card: #2a2a2a;
	--color-markup-table-row: #e8f3ff0f;
	--color-markup-code-block: #e8f3ff12;
	--color-markup-code-inline: #e8f3ff28;
	--color-button: #282828;
	--color-button-hover: #353535;
	--color-code-bg: #111111;
	--color-code-border: #afafaf;
	--color-quote-bg: #00000033;
	--color-shadow: #00001758;
	--color-secondary-bg: #303030;
	--color-expand-button: #2f363d;
	--color-placeholder-text: var(--color-text-light-3);
	--color-nav-bg: var(--color-secondary-light-3);
	--color-nav-hover-bg: #3f4345;
	--color-nav-text: var(--color-text);
	--color-secondary-nav-bg: #0c1a28;
	--color-label-text: var(--color-text);
	--color-label-bg: #8585854b;
	--color-label-hover-bg: #999999a0;
	--color-label-active-bg: #b8b8b8ff;
	--color-accent: var(--color-primary-light-1);
	--color-small-accent: var(--color-primary-light-5);
	--color-highlight-fg: #87651e;
	--color-highlight-bg: #352c1c;
	--color-overlay-backdrop: #080808c0;
	--color-sceditor-button: #999999;
	--color-sceditor-button-hover: #bbbbbb;
	--color-sceditor-button-active: #eeeeee;
	--color-sceditor-button-border: #dfdfdf;
	--color-sceditor-button-border-bottom: #dddddd;
	accent-color: var(--color-accent);
	color-scheme: dark;
}


/* Normal, standard links. */
a,
a:link,
a:visited,
/* Links that open in a new window. */
a.new_win:link,
a.new_win:visited {
	color: var(--color-primary-dark-1);
}

/* Cursor declared here.Should not be required anywhere else. */
a:hover,
a.new_win:hover {}

/* Stop white band under footer on short pages.
 * This color should match $FOOTER background.
 */
html {
	background: var(--color-body);
}

body {
	color: var(--color-text);
	background: var(--color-body);
}

fieldset {
	border-color: var(--color-secondary);
	background: transparent;
}

legend {
	color: #888888;
	background: url(../../images/selected_open.png) no-repeat scroll left center transparent;
}

.collapsed legend {
	background: url(../../images/selected.png) no-repeat scroll left center transparent;
}

input,
button,
select,
textarea,
.editor {
	color: var(--color-text);
	border-color: var(--color-box-body-border);
	background: var(--color-box-body)
}

input:hover,
textarea:hover,
button:hover,
select:hover {
	border-color: var(--color-text-light-2);
}

textarea:hover,
.editor:hover {}

input:focus,
textarea:focus,
button:focus,
select:focus,
.editor:focus {
	border-color: #999999;
}

/* Give disabled text input elements a different background color. */
input[disabled].input_text,
input[disabled].input_password {
	background: var(--color-input-text-disabled);
	color: var(--color-text-light-2);
}

/* The OpenID login form */
.openid_login {
	background: white url(../../images/openid.png) no-repeat 2% 50%;
}

/* Common button styling. */
input[type="submit"],
.drop_area_fileselect_text,
button[type="submit"],
input[type="button"],
/* Anchors styled to look like buttons. */
/* These have standard body text size. Can be chained with smalltext class. */
.linkbutton:link,
.linkbutton_right:link,
.linkbutton_left:link,
.linkbutton:visited,
.linkbutton_right:visited,
.linkbutton_left:visited,
.ila {
	color: var(--color-input-text);
	border-color: var(--color-input-border);
	background: var(--color-input-background);
}

a.drop_area_fileselect_text {
	color: var(--color-input-text);
}

/* Hover effects. */
input[type="submit"]:hover,
button[type="submit"]:hover,
input[type="button"]:hover,
.linkbutton:hover,
.linkbutton_right:hover,
.linkbutton_left:hover,
.ila:hover {
	color: var(--color-text-light);
	border-color: var(--color-input-border-hover);
	background: var(--color-input-background-hover);
	box-shadow: none;
}

/* Don't show disabled buttons as active on hover */
input[type=submit][disabled]:hover,
button[disabled],
button[disabled]:hover {
	color: var(--color-input-border-disabled);
	border-color: var(--color-input-border-disabled);
	background: var(--color-input-text-disabled);
	box-shadow: none;
}

/* the new "button" */
.new_posts,
.new_posts:visited,
.new_posts:link {
	color: var(--color-white);
	background: var(--color-green);
}

/* approval indicator */
.require_approval {
	color: #FEFEFE;
	background: #F3B200;
}

/* Standard horizontal rule.. ([hr], etc.) */
hr {
	border-top-color: var(--color-secondary);
	border-bottom-color: var(--color-secondary);
	background: var(--color-secondary-light-2);
	border-right: none;
}

strong,
.bbc_strong {
	color: inherit;
}

/* @todo - Test this everywhere. */
.content {
	border-color: var(--color-secondary);
	background: var(--color-body);
}

/* Styles for main headers. */
.category_header,
.forum_category .category_header,
.content_category .category_header {
	color: var(--color-white);
	border-color: var(--color-box-header-border);
	background: var(--color-box-header);
}

/* Styles for subsection headers. @todo */
.secondary_header {
	border-color: var(--color-body);
	background: var(--color-body);
}

.category_header a, .category_header a:link {
	color: var(--color-primary-dark-4);
}

/* Custom highlighted text style for modern browsers.
 * Nicer than default. Needs two separate rules.
 */
::-moz-selection {
	color: var(--color-secondary-light-3);
	background: var(--color-primary-dark-5);
}

::selection {
	color: var(--color-secondary-light-3);
	background: var(--color-primary-dark-5);
}

/* Other highlighted text, such as search results. */
.highlight {
	color: var(--color-orange);
}

/* Sometimes there will be an error when you post */
.error.error.error {
	color: var(--color-error-text);
}

warningbox .error {
	color: var(--color-warning-text);
}

.border_error.border_error.border_error {
	border-color: var(--color-error-border);
}

/* Messages that somehow need to attract the attention. */
.alert {
	color: var(--color-red);
}

/* Colors for warnings. */
.warn_mute {
	color: var(--color-red);
}

.warn_moderate,
.softalert {
	color: var(--color-orange);
}

.warn_watch,
.success {
	color: var(--color-green);
}

.moderation_link,
.moderation_link:visited {
	color: var(--color-red);
}

/* Used for sections that need somewhat larger corners */
.roundframe,
.well {
	border-color: var(--color-secondary);
	background: var(--color-card);
}

/* The generic wrapper thingy. */
.generic_list_wrapper {
	border: 1px solid var(--color-secondary);
	border-radius: 7px;
	box-shadow: none;
}

.generic_list_wrapper .additional_row {}

.generic_list_wrapper .title_bar {
	border-bottom-color: var(--color-secondary);
	background: none;
}

.generic_list_wrapper .information {
	border-bottom-color: var(--color-secondary);
	background: none;
}

.generic_list_wrapper .additional_row>a.linkbutton {
	padding: .1em 4px;
	line-height: 2em;
	margin-top: 10px;
	font-size: 1em;
}

/* Styles used by the auto suggest control. */
.auto_suggest_div {
	border-color: var(--color-primary-contrast);
	background: var(--color-body);
}

.auto_suggest_div:focus {
	border-color: var(--color-light-border);
}

.auto_suggest_item {
	color: var(--color-text);
	background: var(--color-body-border);
}

.auto_suggest_item_hover {
	color: var(--color-text);
	background: var(--color-body-border);
}

/* -------------------------------------------------------
 * $BBC
 * -------------------------------------------------------
 */
/* The "Quote:" and "Code:" header parts... */
.codeheader,
.quoteheader {
	color: var(--color-text);
	border-color: var(--color-box-body-border);
	background: var(--color-box-body);
	border-bottom-color: transparent;
}

/* [Select] link to copy code. */
.codeoperation {}

/* A quote, perhaps from another post. */
.bbc_quote,
/* A code block - maybe PHP ;) - shared styles. */
.bbc_code.bbc_code {
	border-color: var(--color-code-border);
	background: var(--color-code-bg);
}

.bbc_tt {
	background-color: var(--color-secondary-light-2);
	color: var(--color-text-dark);
}

.bbc_quote.bbc_quote {
	background: var(--color-quote-bg);
}

input[type=checkbox].quote-show-more {
	background: linear-gradient(to bottom, transparent 0%, transparent 25%, var(--color-body) 95%);
}

/* Extra quote styling */
.bbc_quote,
.quoteheader {
	box-shadow: none;
}

/* Styling for BBC tags */
.bbc_link:link,
.bbc_link:visited {
	color: var(--color-primary);
	box-shadow: none;
}

.bbc_link:hover {
	color: var(--color-primary);
	box-shadow: none;
	text-decoration: underline;
}

/* plain text in prettify code */
.pln {
	color: var(--color-text-dark) !important;
}

/* Styling for tables inside posts */
.inner>.bbc_table_container>.bbc_table td,
.messageContent>.bbc_table_container>.bbc_table td {
	border-right: 1px solid var(--color-secondary);
	border-bottom: 1px solid var(--color-secondary);
}

.inner>.bbc_table_container>.bbc_table th,
.messageContent>.bbc_table_container>.bbc_table th {
	border-right: 1px solid var(--color-secondary);
	border-bottom: 1px solid var(--color-light-border);
}

.inner>.bbc_table_container>.bbc_table td:last-child,
.inner>.bbc_table_container>.bbc_table th:last-child,
.messageContent>.bbc_table_container>.bbc_table td:last-child,
.messageContent>.bbc_table_container>.bbc_table th:last-child {
	border-right: none;
}

/* /me uses this a lot. (emote, try typing /me in a post.) */
.meaction {
	color: var(--color-success-text);
}

.meaction:before {}

.spoilerheader {}

.spoiler {
	border-color: transparent;
	background-color: transparent;
}

div.bbc_footnotes {
	border-top-color: var(--color-secondary-dark-9);
}

.target:target {
	color: var(--color-text-dark);
	background-color: var(--color-primary-light-4);
}

sup.bbc_footnotes,
sup.bbc_footnotes a {
	color: var(--color-green);
}

div.bbc_footnotes .meaction {}

/* -------------------------------------------------------
 *	$AJAX
 * -------------------------------------------------------
 */
/* The "Loading" bar for quick edit, etc. */
#ajax_in_progress,
.ajax_infobar {
	color: var(--color-success-text);
	border-bottom-color: var(--color-success-border);
	background: var(--color-success-bg);
}

#ajax_in_progress a {
	color: var(--color-orange);
}

/* -------------------------------------------------------
 *	$MAIN.
 * -------------------------------------------------------
 */
/* The top bar. */
#top_section {
	border-top-color: var(--color-body);
	border-bottom-color: var(--color-box-header-border);
	background: var(--color-header-bg);
}

#top_section #forumtitle a,
#top_section #forumtitle a:link,
#top_section #forumtitle a:visited {
	color: var(--color-white);
}

#top_section a,
#top_section a:link,
#top_section a:visited {
	color: var(--color-text-dark);
}

/* Maintenance mode warning. */
#top_section_notice {
	color: var(--color-red);
}

#search_form .input_text {
	color: var(--color-text-light);
	border-right-color: transparent;
}

#search_form input[type="submit"] {
	color: var(--color-text-light-3);
}

#search_form select {
	opacity: 0.8;
	border-color: var(--color-secondary);
	border-right-color: transparent;
}

#search_form select:focus {
	opacity: 1;
	border-color: var(--color-code-border);
	border-right-color: transparent;
}

#search_form button {
	border-color: var(--color-input-border);
}

.forumtitle>a {
	color: var(--color-primary-light-2);
	text-shadow: 1px 1px 0 var(--color-text-dark);
}

/* News section. */
#news {}

#news>h2 {
	color: var(--color-primary);
}

#news>h2:after {}

#news_line,
#news {
	color: var(--color-text);
	border-color: var(--color-body-border);
	background: var(--color-body);
}

/* Main forum area. */
/* Box-shadow only on this one. */
#wrapper {
	border-color: var(--color-secondary);
	background: var(--color-card);
}

/* The footer with copyright links etc. */
#footer_section {
	color: var(--color-text-light);
	border-top-color: var(--color-secondary);
	background: var(--color-footer);
}

#footer_section p,
#footer_section a {
	color: var(--color-text-light-3);
}

#footer_section .rssfeeds {
	color: var(--color-white);
	background-color: var(--color-orange);
	text-shadow: none;
}

.i-rss::before {
	filter: brightness(0) invert(1);
}

.action_viewquery a,
.action_viewquery strong,
#debug_logging a,
#debug_logging strong {
	color: var(--color-yellow);
}

#debug_logging {
	color: var(--color-text-light);
	background: var(--color-code-bg);
}

#debug_logging_wrapper {
	background: var(--color-code-bg);
}

.action_viewquery {
	color: var(--color-text-light);
	background: var(--color-code-bg);
}

.action_viewquery a {}

.action_viewquery .explain {}

.action_viewquery .explain th,
.action_viewquery .explain td {
	border-color: var(--color-code-border);
}

.action_viewquery .query {}

/* -------------------------------------------------------
 *	$MENUS
 * -------------------------------------------------------
 */
/* Level 1 Menu bar: link or button. General styling. */
.linklevel1,
.linklevel1:link,
.linklevel1:visited,
.quickbuttons .inline_mod_check {
	color: var(--color-nav-text);
	border-color: var(--color-secondary-dark-4);
	background: var(--color-nav-bg);
}

/* Level 1 button hover and focus effects. */
.linklevel1:hover,
.listlevel1:hover .linklevel1,
.linklevel2:hover,
.listlevel2:hover .linklevel2,
.linklevel3:hover,
.listlevel3:hover .linklevel3,
#menu_sidebar .linklevel1:hover,
#menu_sidebar .listlevel1:hover .linklevel1,
#menu_current_area>strong>.linklevel1 {
	color: var(--color-text-light);
	border-color: var(--color-secondary-dark-4);
	background: var(--color-nav-hover-bg);
	box-shadow: none;
}

.poster li.listlevel1:hover {
	border-color: transparent;
	box-shadow: none;
}

.poster li.poster_online .nolink {
	color: #566E4B;
	border-color: #AFAFAF;
	border-top-color: #CFCFCF;
	border-left-color: #BFBFBF;
	background: #F4F4F4 linear-gradient(to bottom, #FEFEFE, #E4E4E4);
	box-shadow: none;
}

.poster li.poster_online .nolink img {}

.poster li.subsections.listlevel1:hover .linklevel1 {
	border-color: transparent;
	background: transparent;
	box-shadow: none;
}

/* Level 1 active buttons. */
.linklevel1.active,
.listlevel1:hover .active,
#collapse_button .linklevel1,
.pm_indicator,
.linklevel1:hover .pm_indicator
.likes_indicator {
	color: var(--color-nav-text);
	border-color: var(--color-secondary-dark-4) !important;
	background: var(--color-nav-hover-bg);
	box-shadow: none;
}

/* Hover effects for those buttons. */
.linklevel1.active:hover,
.listlevel1:hover .linklevel1.active,
#collapse_button .linklevel1:hover {
	border-color: var(--color-secondary-dark-2);
	background: var(--color-nav-hover-bg);
}

.linklevel1:hover .pm_indicator {
	box-shadow: none;
}

.linklevel1.active:hover .pm_indicator {
	border-bottom-color: var(--color-primary-contrast);
}

/* Corrections for other menus. */
.quickbuttons .subsections:hover .linklevel1:after {}

.subsections:hover .name.linklevel1:after {
	color: var(--color-primary-dark-1);
}

.poster2 .subsections:hover .name.linklevel1:after {}

/* Do one override here for .poster. Still saves code all round. */
.poster_avatar .linklevel1,
.poster_avatar:hover .linklevel1,
.poster_avatar .linklevel1:focus,
.name.linklevel1,
.name.linklevel1:hover,
.name.linklevel1:focus {
	color: var(--color-primary-dark-1);
	border-color: transparent;
	background: none;
	box-shadow: none;
}

.name.linklevel1:hover {}

/* Levels 2 and 3: drop menu wrapper. */
.menulevel2,
.menulevel3 {
	border-color: var(--color-body-border);
	background: var(--color-body);
}

/* Tricky PM indicator. Define it carefully,
 * just in case someone tries to use this class elsewhere.
 */
.pm_indicator,
.likes_indicator {
	color: var(--color-nav-text);
	border-color: var(--color-secondary-dark-4) !important;
	background: var(--color-nav-bg);
	box-shadow: none;
}

.poster .pm_indicator {}

#dropdown_menu_1 .pm_indicator {}

.likes_indicator {
	box-shadow: none;
}

/* Levels 2 and 3 drop menus: link or button. */
.linklevel2:link,
.linklevel2:visited,
.linklevel3:link,
.linklevel3:visited {
	color: var(--color-primary-dark-3);
	border-color: transparent;
}

/* Admin menu icons. */
.linklevel2>img {}

/* Level 2: subsection indicators. */
.listlevel2.subsections .linklevel2:after,
#menu_sidebar .subsections .linklevel1:after,
#menu_sidebar .subsections:hover .linklevel1:after {
	color: var(--color-secondary-dark-6);
}

/* Level 2: dividers between admin/moderation, and pm/profile links. */
#button_admin .listlevel2.subsections,
#button_pm .listlevel2.subsections {
	border-top-color: #DDDDDD;
	box-shadow: none;
}

/* Levels 2 and 3: highlighting of current section
 * @todo - Should probably be applied to main menu as well, for consistency.
 */
.linklevel2.chosen,
.linklevel3.chosen,
#menu_current_area .linklevel1 {}

/* Styles for sidebar menus.
 * Cancel default backgrounds for sidebar.
 */
#menu_sidebar .linklevel1 {
	color: var(--color-primary-dark-3);
	border-color: transparent;
	background: none;
	box-shadow: none;
}

/* End sidebar flyout coding. */
/* -------------------------------------------------------
 *	$LINKTREE
 * -------------------------------------------------------
 */
/* Wrapper/background. */
.navigate_section {
	background: var(--color-body);
	box-shadow: none;
	border-color: var(--color-body-border);
}

/* Color for linktree items. */
.linktree a,
.linktree a i {
	color: var(--color-text);
}

.linktree {
	border: none;
	box-shadow: none;
}

.linktree:hover a,
.linktree>a:hover,
.linktree:last-child,
.linktree:last-child>span>a,
.linktree:last-child>span>a:hover,
.linktree:last-child strong {
	color: var(--color-text-dark);
}

.linktree:after {
	background: var(--color-body);
	box-shadow: none;
}

.linktree:last-child,
.linktree:last-child:after {
	background: var(--color-primary-light-4);
}

.linktree:hover,
.linktree:hover:after,
.linktree:last-child:hover,
.linktree:last-child:hover:after {
	background: var(--color-primary-light-2);
}

/* -------------------------------------------------------
 * $BUTTONS
 * This section contains code for the quickbuttons (quote, quick edit, etc)
 * and for the buttonlist class (reply, add poll, notify, etc).
 * These classes share some styling.
 * Declarations are amalgamated where styling is shared.
 * -------------------------------------------------------
 */
/* Styles for the standard button lists.
/* @todo - Save code by amalgamating common button background declarations. */
.buttonlist li a.linklevel1 {}

/* The active one */
.buttonlist li a.active {
	box-shadow: none;
}

/* The quick buttons. */
.quickbuttons .modified {
	color: var(--color-text-light-1);
}

/* Cancel generic border-radius. */
.quickbuttons .linklevel1 {
	color: var(--color-text-light-1);
}

.quickbuttons .inline_mod_check {}

/* Radius left end of the first (Quote) button. */
.linklevel1.quote_button {}

/* Radius right end of the last button. */
.linklevel1.post_options,
.linklevel1.remove_button {}

/* Single buttons get all corners rounded. */
.follow_ups .linklevel1,
#topic_summary .linklevel1 {}

/* -------------------------------------------------------
 *	$PAGELINKS
 * -------------------------------------------------------
 */
.selectbox,
.pagelinks {
	color: var(--color-text-light-3);
}

.pagelinks .navPages,
.pagelinks .expand_pages>a {
	color: var(--color-text-light);
	border-color: var(--color-body-border);
}

.pagelinks .navPages:hover,
.pagelinks .current_page {
	/* @todo - Simplify. */
	color: var(--color-text-light);
	border-color: var(--color-input-border-hover);
	background: var(--color-input-background-hover);
	box-shadow: none;
}

.pagelinks :first-child {}

.pagelinks :last-child {}

/* our buddies « » */
.small_pagelinks:before {}

.small_pagelinks:after {}

/* Globally accessible top/bottom links. */
#gotop,
#gobottom {
	transition: ease-in-out opacity .1s;
	opacity: 0.5;
	color: var(--color-white) !important;
	border-color: var(--color-box-header-border);
	border-left: none;
	border-bottom-color: transparent;
	background: var(--color-box-header);
}

#gobottom {}

#gotop:hover,
#gobottom:hover {
	opacity: 1;
	color: #444444;
}

/* Skip navigation link. */
#top {
	border-color: var(--color-primary-dark-1);
	background: var(--color-body);
}

/* -------------------------------------------------------
 *	$TABLES
 * -------------------------------------------------------
 */
/* A general table class. */
.table_grid {
	border-color: var(--color-secondary);
	border-top-color: transparent;
}

.table_head>th {
	color: var(--color-text-light-2);
	border-top-color: var(--color-secondary);
	border-bottom-color: var(--color-secondary);
	background: var(--color-body);
}

/* Basic cells. */
.table_grid td,
.letterspacing {
	border-bottom-color: var(--color-secondary);
}

/* Subtle zebra striping for rows. */
.table_grid .standard_row:nth-child(even) {
	background: var(--color-body);
}

.table_grid .standard_row:nth-child(odd) {
	background: var(--color-body);
}

/* Legacy highlight color, for selected membergroups etc.
 * Used by JS to show a selected item. Still used in manage languages
 */
.table_grid .standard_row.highlight2 {
	color: var(--color-grey);
	background: var(--color-white);
}

/* For Errors.template.php. */
#errorfile_table .current {
	border-color: var(--color-grey);
	background: var(--color-white);
}

/* -------------------------------------------------------
 * $SETTINGS
 * -------------------------------------------------------
 */
/* Lists - settings use these a lot. */
.settings label {
	color: var(--color-text-light-3);
}

/* -------------------------------------------------------
 * $BOARDS
 * -------------------------------------------------------
 * Set up some general framing classes. @todo
 *    .forum_category for board index/sub-boards.
 *    .forumposts for thread pages and recent posts, etc.
 *    .content_category for general divisions around the place.
 * All styled the same in default variant, but available for fun and games.
 */
/* The board categories and newsfader - some shared styling. */
.forum_category,
.content_category {
	background: var(--color-body);
	border: 1px solid var(--color-body-border);
	box-shadow: none;
}

.board_row,
.childboard_row,
.forumposts>li,
.content_category>div,
.content_category>li {
	color: var(--color-text);
	border-color: var(--color-secondary);
	background: var(--color-body);
}

.board_row,
.childboard_row {
	border-color: transparent;
	color: var(--color-text-light);
}

.board_row .parent_board {
	border-bottom-color: transparent;
}

.childboard_row {
	border-top-color: transparent;
}

.board_latest {
	border-left-color: var(--color-secondary);
}

.board_name>a {
	color: var(--color-text-dark);
}

.board_stats {
	color: var(--color-secondary-dark-6);
}

.lastpost_link>a {
	color: var(--color-primary-light-2);
}

.board_latest strong {
	color: var(--color-text-light-3);
}

.childboards {
	border-top-color: var(--color-secondary);
}

.childboard_row h4,
.board_new_posts {
	color: var(--color-secondary-dark-6);
}

/* Styles for the info center on the board index. */
.ic_section_header {
	border-bottom-color: var(--color-secondary);
}

.ic_section_header>a {
	color: var(--color-text-light-1);
}

#ic_recentposts td,
#ps_recentposts td,
#ps_recenttopics td {
	border-top-color: #1A1A1A;
}

.recentpost>strong>a,
#info_center .inline>strong>a {
	color: var(--color-orange-dark-2);
}

.inline>strong>a {
	color: var(--color-primary-dark-1);
}

#expanded_pages_container a {
	background: var(--color-body);
}

/* The board description and who-is-viewing stuff. */
#description_board {
	background: var(--color-body);
	box-shadow: none;
}

#description_board .generalinfo,
#forumposts .generalinfo {
	border-color: transparent;
	border-top-color: var(--color-body-border);
	border-bottom-color: var(--color-body-border);
	background: var(--color-body);
}

.topic_listing {
	background: #E4E4E4;
	box-shadow: none;
}

.topic_listing>li {
	border-color: transparent;
}

.topic_listing>li:nth-child(even) {
	background: var(--color-body);
	border-color: var(--color-body);
}

.topic_listing>li:nth-child(odd) {
	background: var(--color-body-alternate);
	border-color: var(--color-body-alternate);
}

.topic_sorting_row {
	background: transparent;
}

#sort_by {
	border-color: var(--color-body-border);
	border-bottom-color: transparent;
	background-color: var(--color-box-body);
}

#sort_by.topic_sorting_recent {
	border-color: var(--color-light-border);
	border-bottom-color: transparent;
}

.sort_by_container {
	border-color: var(--color-body-border);
}

.topic_name h4 a {
	color: var(--color-primary-dark-2);
}

.sticky_row .topic_name h4 a,
.locked_row.sticky_row .topic_name h4 a {
	color: var(--color-secondary-dark-6);
}

.locked_row .topic_name h4 a {
	color: var(--color-secondary);
	font-style: italic;
}

.sticky_row .topic_name h4 a.new_posts,
.locked_row.sticky_row .topic_name h4 a.new_posts,
.locked_row .topic_name h4 a.new_posts {
	color: var(--color-text-dark);
}

.topic_stats {
	color: var(--color-secondary-dark-6);
}

.qaction_row {
	background: #0D0D0D;
}

#topic_icons .qaction_row {
	background: var(--color-body);
}

.approvetopic_row,
.approve_row {
	background: #FFF5CD;
}

#topic_icons {
	border-color: var(--color-secondary);
	background: var(--color-body);
}

.jump_to_header {
	color: #566450;
	background: #EBEBEB linear-gradient(to bottom, #FAFAFA, #EAEAEA);
	box-shadow: none;
}

.jump_to_header:hover {
	color: #585858;
	background: #F0F0F0;
}

/* -------------------------------------------------------
 *	$TOPICS
 * -------------------------------------------------------
 */
/* Poll vote options */
#poll_options .options {
	border-top-color: #9999AA;
}

/* Poll results */
#poll_options .options .percentage {
	background: #1A1A1A;
}

.poll_gradient {
	border-color: #111111;
	background: #5BA048 linear-gradient(to bottom, #60BC78 0%, #27A348 100%);
}

/* On to the posts */
#quickreplybox,
#forumposts,
#searchform,
#recentposts,
#pmFolder,
#topic_summary,
#preview_section {
	background: var(--color-body);
	box-shadow: none;
}

/* Poster and postarea + moderation area underneath */
.forumposts {
	border-color: var(--color-body-border);
	background: var(--color-body);
}

#forumposts .category_header,
#topic_summary .category_header {
	color: var(--color-text);
}

/* Colors for background of posts requiring approval */
.approvebg {
	background: #FFF5CD;
}

.poster .name {
	color: var(--color-primary);
	background-color: transparent !important;
}

/* Drop menu for the poster info. */
.poster .listlevel1.sfhover .menulevel2,
.poster .listlevel1:hover .menulevel2 {
	background: var(--color-box-body);
	border-color: var(--color-box-body-border);
}

.report_seperator {
	border-bottom-color: var(--color-secondary);
	background: #BBBBBB;
}

/* @todo - Save code by amalgamating common button background declarations. */
.poster_online .linklevel1 {
	border-color: var(--color-secondary-dark-2);
	background: var(--color-button);
	box-shadow: none;
}

.poster_online.poster_online.poster_online .linklevel1:hover {
	color: var(--color-text-light);
	border-color: var(--color-secondary-dark-4);
	background: var(--color-secondary-light-2);
}

.post_subject {
	color: var(--color-text-light-3);
}

.keyinfo h5 a,
.keyinfo h5 a strong {
	color: var(--color-primary-dark-2);
}

.inner,
.messageContent {
	border-top-color: var(--color-console-border);
}

/* All the signatures used in the forum. */
.signature,
.attachments,
.custom_fields_above_signature {
	border-top-color: var(--color-console-border);
}

/* attachment details below thumbnails */
.attachment_name,
.attachment_details {
	color: var(--color-secondary-dark-6) !important;
	border: solid 1px var(--color-secondary);
	background: transparent !important;
}

.attachment_name {
	color: var(--color-primary-dark-4) !important;
	border-bottom: none;
}

.attachment_details {
	border-top: none;
	border-radius: 0 0 0.5em 0.5em;
}

.generic_border .attachment_name {
	border: 1px solid transparent;
}

/* Poor Mans lightbox support */
#elk_lightbox {
	background: rgba(0, 0, 0, 0.5);
}

#elk_lb_content.expand {
	border-color: #FEFEFE;
}

#elk_lb_expand,
#elk_lb_next,
#elk_lb_prev {
	border-color: #ABABAB;
}

#elk_lb_expand:before,
#elk_lb_next:before,
#elk_lb_prev:before {
	color: #ABABAB;
}

.new_post_separator:after {
	border-color: #E4E4E4 transparent;
}

.new_post_separator:before {
	border-color: #BBBBBB transparent;
}

.new_post_separator {
	display: block;
	overflow: visible;
}

/* Used by video embed JS when autolinking video links */
.elk_video {
	border-color: var(--color-secondary);
	border-top-color: transparent;
}

.elk_videoheader {
	border-color: var(--color-secondary);
}

.requiredfield:before {
	border-color: transparent;
	border-bottom-color: #437837;
}

.requiredfield {
	color: #FEFEFE;
	border-color: #2D5024;
	border-right-color: #5AA049;
	border-bottom-color: #5AA049;
	background: #437837;
}

/* -------------------------------------------------------
 *	$EDITOR
 * -------------------------------------------------------
 */
/* The main post editor section. */
#preview_body {
	border-color: var(--color-body-border);
	background: var(--color-body);
}

#postAdditionalOptionsHeader,
#postDraftOptionsHeader {
	border-color: var(--color-secondary-dark-3);
	background: var(--color-card);
}

#postAdditionalOptions,
#postDraftOptions {
	border-color: var(--color-secondary-dark-3);
	border-top-color: transparent;
	background: var(--color-body);
}

#postAdditionalOptionsNC {
	border-color: var(--color-secondary);
	background: var(--color-primary-contrast);
}

.drop_area {
	color: var(--color-text-dark);
	border-color: var(--color-text);
	background-color: var(--color-secondary-light-1);
}

.drop_area>a {
	color: var(--color-primary-contrast);
}

.statusbar {
	border-top-color: #A9CCD1;
	border-bottom-color: #A9CCD1;
	background: #F0F0F0;
	color: #222222;
}

.statusbar .insertoverlay {
	border-color: #A9CCD1;
	background-color: #FAFAFA;
}

.insertoverlay .tabs li {
	border-color: #008000;
}

.insertoverlay .tabs li.active {
	background-color: #E4E4E4;
}

.statusbar .insertoverlay .button {
	color: #FAFAFA;
	background: #008000;
}

.progressBar {
	border-color: #DDDDDD;
}

.progressBar div {
	color: #FEFEFE;
	background-color: #008000;
}

.abort,
.remove {
	color: #FEFEFE;
	border-color: #FF1310;
	background-color: #A8352F;
}

.share {
	color: #FEFEFE;
	background-color: #A8352F;
}

.drop_attachments_error {
	color: #FF0000;
}

#postMoreOptions {
	border-top-color: var(--color-secondary-dark-3);
	background: var(--color-card);
}

#postDraftOptions .settings dd,
#postDraftOptions .settings dt {
	border-top-color: var(--color-secondary);
}

/* ------------------------------------------------------- */
/*	$MODERATE	                                           */
/* ------------------------------------------------------- */
.split_messages .post {
	border-top-color: var(--color-secondary);
}

/* -------------------------------------------------------
 * $TABS
 * -------------------------------------------------------
 */
.ui-tabs .ui-tabs-panel {
	border-color: var(--color-body-border);
	background: var(--color-body);
}

.ui-tabs .ui-tabs-nav li {
	color: var(--color-text);
	border: 1px var(--color-body-border) solid;
	border-radius: 2px 2px 0 0;
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
	border-color: var(--color-body-border);
	border-radius: 2px 2px 0 0;
	outline: none;
	background: #F0F0F0;
}

.ui-tabs .ui-tabs-nav .ui-state-default .ui-tabs-anchor {
	color: var(--color-body);
	background: var(--color-text);
}

.ui-tabs .ui-tabs-nav .ui-state-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav .ui-state-active {
	color: var(--color-text-dark);
	background: var(--color-body);
}

.ui-tabs .ui-tabs-nav li.ui-state-hover .ui-tabs-anchor {
	color: var(--color-primary-light-3);
	border-color: var(--color-body-border);
	border-top-color: #AFAFAF;
	border-left-color: #AFAFAF;
}

li.ui-tab.ui-tabs-active.ui-state-active.ui-state-hover,
li.ui-tab.ui-tabs-active.ui-state-active.ui-state-hover .ui-tabs-anchor {
	box-shadow: none;
}

/* -------------------------------------------------------
 * $PROFILE
 * -------------------------------------------------------
 */
#profile_attachments {
	border-color: var(--color-body-border);
	background: var(--color-body);
	box-shadow: none;
}

#profile_attachments .content {
	background: #1A1A1A;
}

.content_noframe {
	box-shadow: none;
}

.profileblock,
#basicinfo,
#detailedinfo {
	background: initial;
}

.profileblock ul li:not(:first-child):before {}

#detailedinfo dt,
#tracking dt,
.profileblock dt {
	color: var(--color-text-light-3);
}

.activity_stats li span {
	border-color: var(--color-secondary);
	border-right-color: transparent;
	border-left-color: transparent;
	background: var(--color-card);
}

.activity_stats li .bar {
	border-color: var(--color-secondary);
	border-bottom-color: transparent;
	background: var(--color-body-alternate);
}

.activity_stats li .bar div {
	background: var(--color-green-badge) linear-gradient(to bottom, var(--color-primary) 0%, var(--color-primary-dark-2) 100%);
}

.profile_pie {
	background: url(../../images/_dark/stats_pie.png);
}

.topic_details {
	border-bottom-color: #999999;
}

.ignoreboards a {
	border-bottom-color: #C4C4C4;
}

.ignoreboards a:hover {
	border-bottom-color: #585858;
}

.generic_border {
	border-color: var(--color-secondary);
}

.attachment_title {
	border-bottom-color: #CCCCCC;
}

#warndiv .ui-widget-header {
	background: transparent;
}

#warndiv .watched .ui-widget-header {
	background: #008000;
}

#warndiv .moderated .ui-widget-header {
	background: orange;
}

#warndiv .muted .ui-widget-header {
	background: red;
}

#creator dt strong,
#creator dt>label {
	color: var(--color-text-light-2);
}

/* -------------------------------------------------------
 * $PERSONAL
 * -------------------------------------------------------
 */
#personal_messages .capacity_bar {
	border-color: #ADADAD;
}

#personal_messages .capacity_bar span {
	border-right-color: #ADADAD;
}

#personal_messages .capacity_bar .empty {
	background: #A6D69D;
}

#personal_messages .capacity_bar .filled {
	background: #EEA800;
}

#personal_messages .capacity_bar .full {
	background: #F10909;
}

.addrules dt.floatleft {
	color: #585858;
}

/* -------------------------------------------------------
 * $CALENDAR
 * -------------------------------------------------------
 */
.birthday {
	color: var(--color-purple);
}

.event {
	color: var(--color-green);
}

.holiday {
	color: var(--color-pink);
}

.calendar_table {
	border-top-color: var(--color-body);
	background: var(--color-body-border);
}

.calendar_table th,
.calendar_table td {
	background: var(--color-body);
}

/* Used to indicate the current day. */
#main_grid .calendar_today,
#month_grid .calendar_today {
	border-color: var(--color-secondary);
	background: var(--color-body-alternate);
}

#main_grid .weeks {}

#main_grid .weeks a:hover {}

#main_grid .days {}

.weeklist {
	background: #E4E4E4;
}

.weeklist>li {
	border-color: #222222;
	background: #1A1A1A;
}

.weekdays {
	border-left-color: #222222;
}

.weeklist h4 a:hover {}

.modify_event {
	color: red;
}

.hidelink {}

/* Add a background that fits with the calendar. */
#calendar_navigation {
	border-color: var(--color-secondary);
	border-top-color: transparent;
}

/* -------------------------------------------------------
 *	$HELP
 * -------------------------------------------------------
 */
#helpmain {
	border-color: var(--color-secondary);
	box-shadow: none;
}

/* Styles for the tooltips. */
.tooltip {
	border-color: var(--color-body-border);
	background: var(--color-body);
	box-shadow: none;
}

/* The darkened background for help pop-ups. */
.popup_container {
	background: rgba(0, 0, 0, 0.4);
}

/* The actual pop-up wrapper. */
.popup_window {
	border-color: var(--color-secondary);
	background-color: var(--color-body-alternate);
	background-clip: padding-box;
	box-shadow: none;
}

.popup_window.in.content {}

/* The text content, hopefully helpful. */
.popup_content {
	border-color: var(--color-body-border);
	border-bottom-color: var(--color-secondary);
	background: var(--color-body);
	box-shadow: none;
}

/* -------------------------------------------------------
 *	$SEARCH
 * -------------------------------------------------------
 */
#mlsearch_options {
	border-color: #DDDDDD;
	background: #FAFAFA;
}

.search_results_posts {
	background: #FEFEFE;
}

.search_results_posts .topic_body {
	border-top-color: #CCCCCC;
	box-shadow: none;
}

.search_results_posts>li:not(:last-child) {
	border-bottom-color: #DDDDDD;
}

/* -------------------------------------------------------
 *	$MEMBERLIST
 * -------------------------------------------------------
 */
.mlist .mlist_header div {}

.mlist li div,
.whos_online dt div,
.whos_online dd:nth-child(odd) div {
	border-top-color: var(--color-secondary);
	border-bottom-color: var(--color-secondary);
	background-color: var(--color-body-alternate);
}

.mlist li.alternate_row div,
.whos_online dd:nth-child(even) div {
	border-top-color: var(--color-secondary);
	border-bottom-color: var(--color-secondary);
	background-color: var(--color-body);
}

.mlist li div:first-child {
	border-left-color: var(--color-secondary);
}

.mlist li div:last-child {
	border-right-color: var(--color-secondary);
}

.letter_row>h3 {
	border-color: var(--color-secondary);
	background: var(--color-body-alternate) linear-gradient(to bottom, var(--color-body-alternate), var(--color-body));
}

/* -------------------------------------------------------
 *	$LOGIN
 * -------------------------------------------------------
 */
.coppa_contact {
	color: var(--color-text-light-2);
	border-color: var(--color-body-border);
	background: var(--color-body);
}

.valid_input {
	border-color: var(--color-success-border);
}

.invalid_input {
	background: var(--color-error-bg);
}

/* -------------------------------------------------------
 *	$BOXES
 * -------------------------------------------------------
 */
/* Lotsa boxes. */
.description,
.information,
.warningbox,
.successbox,
.infobox,
.errorbox {
	border-color: var(--color-error-border);
	background: var(--color-error-bg);
	color: var(--color-error-text);
}

.information,
.description {
	color: var(--color-text-dark);
}

/* Information boxes. */
.information {
	background: var(--color-card);
}

.warningbox {
	border-color: var(--color-warning-border);
	color: var(--color-warning-text);
	background: var(--color-warning-bg) url(../../images/profile/warning_moderate.png) 10px 50% no-repeat;
}

.successbox {
	border-color: var(--color-success-border);
	color: var(--color-success-text);
	background: var(--color-success-bg) url(../../images/post/check.png) 10px 50% no-repeat;
}

.infobox {
	border-color: var(--color-info-border);
	color: var(--color-info-text);
	background: var(--color-info-bg) url(../../images/icons/quick_sticky.png) 10px 50% no-repeat;
}

.errorbox {
	background: var(--color-error-bg) url(../../images/profile/warning_mute.png) 10px 50% no-repeat;
}

.border_error {
	border-color: #222222 !important;
}

/* -------------------------------------------------------
 *	$PROGRESS
 * -------------------------------------------------------
 */
.progress_bar {
	border-color: black;
	background: white;
	box-shadow: none;
}

.progress_bar .full_bar {
	color: black;
}

.progress_bar .green_percent {
	background-color: #008000;
}

.progress_bar .blue_percent {
	background-color: #0000FF;
}

/* -------------------------------------------------------
 * $STATISTICS
 * -------------------------------------------------------
 */
.statistics .category_header {
	border-color: transparent;
	border-bottom-color: var(--color-secondary);
	background: none;
	text-shadow: none;
}

.statistics .flow_hidden,
#forum_history .flow_hidden {
	border-color: #2F2F2F;
	background: #222222;
}

.stats.floatleft {
	border-right-color: var(--color-secondary);
}

#top_row .stats dd,
.statsbar {
	border-color: var(--color-secondary);
	background: var(--color-body);
}

/* Methinks topic links, etc need a little more oomph next to the orange bars. */
#top_row .stats dd {
	border-color: transparent;
	background: none;
}

/* Status Bar Green */
.statsbar .bar {
	background: var(--color-primary-light-6) linear-gradient(to bottom, var(--color-primary-dark-1) 0%, var(--color-primary-light-5) 100%);
}

/* Absolute positioning stops these breaking the bars on narrow screens. */
.statsbar .righttext {
	background: var(--color-body);
}

#stats {
	border-color: transparent;
}

#like_post_stats_overlay {
	background: rgba(0, 0, 0, 0.5);
}

/* floating error box currently used by like functionality */
.floating_error {
	color: #404040;
	border-color: #E4E4E4;
	background: #FEFEFE;
}

.floating_error .error_heading {}

.floating_error .error_msg {
	color: #3D3C3C;
}

.floating_error .error_btn {
	color: #157DFB;
	border-top-color: #D6D6D6;
}

.floating_error .error_btn:hover {}

/* -------------------------------------------------------
 * Mentions
 * -------------------------------------------------------
 */
.atwho-view.atwho-view {
	background-color: var(--color-body-alternate);
	border-color: var(--color-secondary);
}
.atwho-view.atwho-view strong {
	color: var(--color-box-header-border);
}

.atwho-view.atwho-view .cur {
	background-color: var(--color-box-header);
	color: var(--color-text-light-1);
 }

.atwho-view.atwho-view .cur strong {
	color: var(--color-text);
}

.atwho-view.atwho-view ul li {
	border-bottom-color: var(--color-secondary);
}

.atwho-view.atwho-view ul li:last-child {
	border-bottom: none;
}

/* -------------------------------------------------------
 * Font colors
 * -------------------------------------------------------
 */
.bbc_color[style="color: red;"] {
	color: var(--color-red-contrast) !important;
}

.bbc_color[style="color: yellow;"] {
	color: var(--color-yellow-contrast) !important;
}

.bbc_color[style="color: pink;"] {
	color: var(--color-pink-contrast) !important;
}

.bbc_color[style="color: green;"] {
	color: var(--color-green-contrast) !important;
}

.bbc_color[style="color: orange;"] {
	color: var(--color-orange-contrast) !important;
}

.bbc_color[style="color: purple;"] {
	color: var(--color-purple-contrast) !important;
}

.bbc_color[style="color: blue;"] {
	color: var(--color-blue-contrast) !important;
}

.bbc_color[style="color: brown;"] {
	color: var(--color-brown-contrast) !important;
}

.bbc_color[style="color: teal;"] {
	color: var(--color-teal-contrast) !important;
}

.bbc_color[style="color: limegreen;"] {
	color: var(--color-olive-contrast) !important;
}

.bbc_color[style="color: beige;"] {
	color: var(--color-beige-contrast) !important;
}

.bbc_color[style="color: navy;"] {
	color: var(--color-navy-contrast) !important;
}

.bbc_color[style="color: maroon;"] {
	color: var(--color-maroon-contrast) !important;
}

.bbc_color[style="color: black;"] {
	color: var(--color-secondary-dark-11) !important;
}

.bbc_color[style="color: white;"] {
	color: var(--color-secondary-dark-1) !important;
}

/* -------------------------------------------------------
 * Cookie
 * -------------------------------------------------------
 */
#cookieChoiceInfo {
	border-color: var(--color-info-border) !important;
	color: var(--color-info-text) !important;
	background-color: var(--color-info-bg) !important;
}

#cookieChoiceInfo #cookieChoiceDismiss {
	background-color: var(--color-info-text) !important;
	color: var(--color-info-bg) !important;
  	border: 1px solid var(--color-info-text) !important;
}

#cookieChoiceInfo #cookieChoiceDismiss:hover {
	border-color: var(--color-text-dark) !important;
}

/* -------------------------------------------------------
 *	$ICONS
 * -------------------------------------------------------
 *
 * Icons. The color file is the place for this since we
 * can't style embedded material.
 *
 * -------------------------------------------------------
 */
/* Helpers */
/*.icon-shade, .chevricon, button.icon, button > .icon, a > .icon, a.icon, a.warnicon, a > .warnicon, a.noticon, a > .infoicon {
	-webkit-filter: drop-shadow(.1em .1em .1em rgba(0, 0, 0, 0.2));
	filter: drop-shadow(.1em .1em .1em rgba(0, 0, 0, 0.2));
} */
/* , .board_icon */
/*.icon-shadow {
	-webkit-filter: drop-shadow(.1em .1em .1em rgba(0, 0, 0, 0.5));
	filter: drop-shadow(.1em .1em .1em rgba(0, 0, 0, 0.5));
}

.icon-shade:hover, .chevricon:hover, button.icon:hover, button > .icon:hover, a > .icon:hover, a.icon:hover, a.warnicon:hover, a > .warnicon:hover, a.infoicon:hover, a > .noticon:hover {
	-webkit-filter: drop-shadow(.1em .1em .1em rgba(255, 255, 255, 0.2));
	filter: drop-shadow(.1em .1em .1em rgba(255, 255, 255, 0.2));
} */
/* , .board_icon:hover */
/*.icon-shadow:hover {
	-webkit-filter: drop-shadow(.1em .1em .1em rgba(255, 255, 255, 0.5));
	filter: drop-shadow(.1em .1em .1em rgba(255, 255, 255, 0.5));
} */
.warnicon {
	border-color: var(--color-orange);
}

.iconline {
	border-color: var(--color-green);
	background: var(--color-green-badge);
}

.icoffline {
	border-color: var(--color-grey);
	background: var(--color-grey-light);
}

/* -------------------------------------------------------
 *	$MEDIA
 * -------------------------------------------------------
 * @TODO: This should be nearly empty for the colorized sheets.
 *
 * Experimental media queries.
 * NOTE:
 * When setting break points for media queries, don't set them in pixels.
 * Use em instead.
 * Why? Because the point of re-stacking/dropping content is to fit it all
 * in the available space. This is dependent not just on width in pixels,
 * but also on the user-selected text size that is set in the browser.
 *
 * If, for whatever reason (eyesight, pixel pitch, workstation arrangement, etc)
 * a user requires text 50% larger than theme default, then their screen is
 * effectively a lot smaller than its nominal resolution would indicate.
 * If the break points are set in em, suddenly the media queries become equally
 * responsive for all users, without any extra code being required.
 *
 * Testing em break points is just as easy as testing pixels,
 * and it will make more people happier. This is cool. :)
 *
 * Of course, having comments to map em to px for each query is a good idea too.
 */
/* This one does 1024 screens at default font size. */
@media screen and (max-width: 64em) {
	#menu_sidebar {
		border-color: #AAAAAA;
		background: #1A1A1A;
		box-shadow: none;
	}

	.icon-menu:hover {
		border-color: var(--color-primary);
	}

	.mlist li div.posts {
		border-right-color: var(--color-code-border);
	}
}

/* This one does 800 screens at default font size. */
@media screen and (max-width: 50em) {

	#main_menu .linklevel1.active,
	#main_menu .linklevel1.active:hover {
		border-color: transparent;
		background: transparent;
	}

	#main_menu .linklevel1.active .icon-menu {
		border-color: var(--color-primary);
	}

	.icon-menu {
		border-color: var(--color-box-header-border);
		background: var(--color-primary-contrast);
	}
}

/* This one does up to 540 screens. */
@media screen and (max-width: 33.750em) {
	.board_lastpost {
		border-top-color: var(--color-code-border);
	}

	.topic_listing>li {
		border-color: var(--color-code-border);
		box-shadow: none;
	}

	.posterarea:before {
		border-bottom: 1px solid var(--color-code-border);
	}

	.post_separator:not(:has(+ a#new)) {
		display: block;
	}

	.whos_online dd:nth-child(even),
	.whos_online dd:nth-child(odd) {
		border-top-color: var(--color-code-border);
	}
}

@media screen and (max-width: 30em) {
	.mlist li .group {
		border-right-color: var(--color-code-border);
	}
}