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

html {
  scroll-behavior: smooth;	
/*  background: linear-gradient(to bottom, #d2d2d2, #955757);*/
  background: linear-gradient(to bottom, #d2d2d2, #386e8e);
  font: calc(12px + (16 - 12) * (100vw - 320px) / (3840 - 320))/1.5 "Source Sans Pro" ,"Segoe UI", "Helvetica Neue", "Nimbus Sans L", Arial, "Liberation Sans", sans-serif;

--content_board_1_social: url(../images/icons/Chems/Mouth.svg);
--content_board_2_music: url(../images/icons/Chems/StarGuitar1.svg);
--content_board_3_live: url(../images/icons/Chems/Glasses.svg);
--content_board_11_ng: url(../images/icons/Chems/Tank.svg);
--content_board_4_question: url(../images/icons/Chems/Question.svg);
--content_board_5_archive: url(../images/icons/Chems/EBW.svg);
--content_board_9_hq: url(../images/icons/Chems/Horse.svg);
--content_board_16_newforum: url(../images/icons/Chems/Believe.svg);
--content_board_17_XD12: url(https://forum.thechembase.com/Themes/The_ChemBase_Theme_2.0/images/icons/Chems/Feeling.svg);

--bg-board-head: rgba(0,0,0,0.8);
--bg-banner: rgba(0,0,0,0.73);
--bg-button-active: #ffdbd9;
--bg-button: rgb(250, 250, 250);
--bg-button-active-hover: #e1372e;
--bg-button-hover: #e3645e;
--bg-post-area-1: #ececec;
--bg-credits-hover: #ffc8c8f0 url(../images/Chems/Overlay/Icicles2.svg) repeat-x;
--bg-top_menu: linear-gradient(to bottom, rgba(105, 123, 108, 0.9), rgba(111, 136, 112, 0.9),rgba(128, 157, 130, 0.9));

--color-txt-main: rgb(0, 0, 0);
--color-txt-sec: rgb(255, 255, 255);
--color-button: rgb(68, 68, 68);
--color-button-active: rgb(38, 38, 38);
--color-button-hover: rgb(255,255,255);
--color-icons-board: #606060;
--color-logo: rgb(122, 202, 119);
--color-logo-hover: rgb(255, 255, 255);
--color-index-border: #ca7a7a;

--font-size-txt-normal: clamp(12px, calc(12px + (16 - 12) * (100vw - 721px) / (3840 - 721)), 16px);
--font-size-txt-mobil: clamp(12px, calc(12px + (14 - 12) * (100vw - 320px) / (720 - 320)), 14px);

--width-boardindex-icons-normal: calc(70px + (80 - 70) * (100vw - 721px) / (3840 - 721));
--width-boardindex-icons-mobile: calc(70px + (80 - 70) * (100vw - 320px) / (720 - 320));
--width-boardindex-icons-cell-normal: calc(var(--width-boardindex-icons-normal) + 10px);
--width-boardindex-icons-cell-mobile: calc(var(--width-boardindex-icons-mobile) + 10px);
--width_poster: calc(10rem + (50 - 10) * ((100vw - 320px) / (3840 - 320)));

--size-avatar-index: 4em;
--circle-avatar-normal: clamp(42px, calc(42px + (50 - 42) * (100vw - 721px) / (3840 - 721)), 50px);
--circle-avatar-mobile: clamp(40px, calc(40px + (46 - 40) * (100vw - 320px) / (720 - 320)), 46px);
--size-social-icon: calc(20px + (25 - 20) * (100vw - 720px) / (3840 - 720));
--size-social-icon-mobile: clamp(20px, calc(20px + (23 - 20) * (100vw - 320px) / (720 - 320)), 25px);
--size-nav-page-circle-normal: clamp(22px, calc(22px + (28 - 22) *(100vw - 721px) / (3840 - 721)), 28px);
--size-nav-page-circle-mobile: clamp(25px, calc(25px + (30 - 25) *(100vw - 320px) / (720 - 320)), 30px);
--size-nav-page-more-normal: calc(var(--size-nav-page-circle-normal) + 10px);
--size-nav-page-more-mobile: calc(var(--size-nav-page-circle-mobile) + 10px);
--size-indicator_normal: clamp(10px, calc(10px + (13 - 10) * (100vw - 720px) / (3840 - 720)), 13px);
--size-indicator_mobile: clamp(10px, calc(9px + (11 - 9) * (100vw - 320px) / (720 - 320)), 12px);
--size-pm-alerts-avatar: clamp(35px, calc(35px + (45 - 35) * (100vw - 320px) / (3840 - 320)), 50px);
--size-member-letters: clamp(15px, calc(17px + (23 - 17) * (100vw - 720px) / (3840 - 720)), 19px);
--size-subboard-icon: calc(60px + (90 - 60) * (100vw - 320px) / (3840 - 320));
--size-news: calc(60px + (80 - 60) * (100vw - 320px) / (3840 - 320));
}

body {
	color: #222;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
/*------------------------------*/

/*----- the background image -----*/

#category_1_boards {
	background: url(../images/Chems/Tree.webp) no-repeat;
	background-position: center center;
	background-size: contain;
	background-color: black;
}

.bg_image {
	overflow: hidden;
	position: relative;
}
.bg_image::before {
	background: url(../images/Chems/xmas.webp) no-repeat center top;
	background: url(https://i.postimg.cc/7LR5szmK/Box-Xmas-01.webp) center top;
	background: url(https://i.postimg.cc/T3gGMDdQ/Box-Xmas-03.webp) center top;
	background-size: cover;
	position: fixed;
	content: '';
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	will-change: transform;
	z-index: -1;
	/*filter: sepia(1) hue-rotate(-46deg) saturate(0.5);*/
	/*-webkit-mask: linear-gradient(to bottom,#ffffff7a, #ffffff40);*/
	-webkit-mask: linear-gradient(to bottom,#ffffffd4, #ffffff82);
  /* mask: linear-gradient(to bottom,#ffffff7a, #ffffff40);*/
	mask: linear-gradient(to bottom,#ffffffd4, #ffffff82);

}
/*---------------------------*/

#ui-datepicker-div {
	width: max-content;
}
#header_track_message_list_poster {
	background: none;
}
.post_verification iframe {
	width: 100%;
}
.action_home #linktree {
	display: none;
}
#registration .titlebg {
	color: white;
}
#registration #confirm_buttons {
	 background: linear-gradient(to bottom, rgba(105, 123, 108, 0.95), rgba(111, 136, 112, 0.95),rgba(128, 157, 130, 0.95));
	 border-radius: 10px;
	 margin-top:10px;
	 padding: 20px;
}
#registration input {
	font-weight: bold;
}
.action_activate .titlebg {
	color: white;
}
.action_search2 #main_content_section .windowbg {
	  margin: 0;
}
img.theme_thumbnail {
	max-width: 450px;
}
	#message_bookmarks .actions .button {
		margin: 3px;
}
	#nojs_logout {
		display: none !important;
}
/*---------------------------------*/

.button_discord :is(.textmenu, #menu_body) {
	font-family: "Source Sans Pro";
}
.dropmenu .textmenu {
	display: none;
}
.dropmenu .button_search .textmenu {
	display: inline-block;	
}
.menu_name {
	display: flex;
	color: white;
	font-weight: 700;
	font-size: 1.1em;
	padding: 0 9px;
	background: linear-gradient(to right, #7b0f0fbd, white);
	pointer-events: none;
}

#admin_content form {
	padding: 8px;
}
/* news */
.roundframe_slider {
	background: #b56666cc;
	background: linear-gradient(to bottom, #772020cc, #e17f7fcc);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	text-align: center;
	line-height: 1.5;
	padding: 10px;
	color: white;
	font-size: calc(17px + (25 - 17) * (100vw - 320px) / (3840 - 320));
	border-radius: 0 0 10px 10px;
}
#news {
	width: 85%;
	margin: auto;
}
.news_fade {
	font-size: calc(15px + (22 - 15) * (100vw - 320px) / (3840 - 320));
	font-weight: bold;
	background: url(../images/Chems/Overlay/Snowcaps3.svg) black repeat-x;
	background-size: 170px;
	color: white;
	padding: 5px;
	border-radius: 10px 10px 0 0;
	display: flex;
	justify-content: center;
	align-items: center;
	max-height: 35px;
}
.news_fade span {
	margin: 0 10px;
}
#news_img_1, #news_img_2 {
	width: var(--size-news);
	height: var(--size-news);
	z-index: 3;
	padding: 2px;
	background: rgba(0,0,0,0.4) url(../images/Chems/noreason_1.webp) no-repeat center;
	background-size: cover;
	border-radius: 100%;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.7);
	margin-bottom: 10px;
	filter: brightness(1.5);
}
#news_img_2 {
	transform: scalex(-1);
}
.news_fill {
	 fill: #fff;
}

#mobile_generic_menu_1 {
	display: block;
}
.mobile_generic_menu_1 .text_menu, .mobile_generic_menu_1_tabs .text_menu {
	display: none;
}
#pmFolder .floatright {
	place-self: center end;
}
#package_validation {
  background: #eef2f5;
}

::selection {
	text-shadow: none;
	background: #c85751;
	color: #fff;
}
/* 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: #222;
	font: 83.33%/1.5  "Source Sans Pro", "Segoe UI", "Helvetica Neue", "Nimbus Sans L", Arial, "Liberation Sans", sans-serif;
	background: #fff;
	outline: none;
	border: 1px solid #bbb;
	vertical-align: middle;
	border-radius: 3px;
	box-shadow: 1px 2px 1px rgba(160, 187, 221, 0.2) inset;
	padding: 0.3em 0.4em;
}
input:hover, textarea:hover, button:hover, select:hover {
	outline: none;
	border-color: #82a2bc;
}
textarea:hover {
	background: #fbfbfb;
}
 textarea:focus, button:focus, select:focus {
	outline: none;
	border-color: #7fb0d8;
	background: #fff;
}
input:focus {
	border-color: #7fc2f9;
	border-width: 2px;
}
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;
}
/* Remove default mozilla dotted borders */
input[type="submit"]::-moz-focus-inner, button::-moz-focus-inner {
	border: 0;
}
/* Prevent inputs and images overflowing */
img, input, select, textarea {
	max-width: 100%;
}
/* This is a specific issue on Ubuntu - Chrome */
#chrome input {
	font-family: "Segoe UI", "Helvetica Neue", Arial, "Liberation Sans", sans-serif;
}
/* The following is necessary */
textarea {
	font-size: 1em;
}

/* Use a consistent monospace font everywhere */
.monospace, .bbc_code, .phpcode, pre {
	font-family: "DejaVu Sans Mono", Menlo, Monaco, Consolas, monospace;
}

.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: 1em;
}
/* 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 #ddd;
	border-radius: 3px;
}
fieldset legend {
	font-weight: bold;
	color: #555;
	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;
}
.cat_bar strong {
	color: #fff;
}
em, .em {
	font-style: italic;
}
/* Default <strong> color on these tags */
h1, h2, h3, h4, h5, h6 {
	font-size: 1em;
	color: #444;
}
/* 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: #eee;
	color: #999;
	border-color: #b6b6b6;
	opacity: 0.8;
	cursor: default;
}
/* Standard horizontal rule.. ([hr], etc.) */
hr {
	border: none;
	margin: 12px 0;
	height: 2px;
	background: #fff;
	box-shadow: 0 1px 0 rgb(162, 162, 162) inset;
}
/* This is about links */

a, a:visited {
	color: #346; 
	color: inherit;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
	cursor: pointer;
}

.post a:link, .post a:visited {
	color: #2980b9;
}

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

/*Like button*/

.smflikebutton {
	background: #C44E19;
	padding: 1px 3px !important;
	border-radius: 5px;
	font-weight: 500;
}
.smflikebutton a, .smflikebutton {
	color: white !important;
	display: flex;
	align-items: center;
	transition: 0.3s ease;
}

.smflikebutton:is(:hover, :focus, a:hover, a:focus) {
	background: #ff693b;
	text-decoration: none;
}
.smflikebutton:hover, .smflikebutton:focus, .smflikebutton a:hover, .smflikebutton a:focus {
	background: #ff693b;
	text-decoration: none;
}
.under_message .floatleft {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
}
.like_count, .like_count a {
	font-size: calc(var(--font-size-txt-normal) + 2px) !important;
	font-weight: 500;
	color: #2980b9;
}
.like_count.smalltext {
  margin-left: 5px;
}
.like_profile {
	margin-left: 10px;
}
#likes {
	padding: 5px;
}
#likes .avatar {
	padding: 0 !important;
	box-shadow: 2px 2px 6px rgba(85, 85, 85, 0.37);
}

#likes li {
	clear: both;
	padding: 1px 0;
	border-radius: 5px;
	display: flex;
	align-items: center;
	background: #dfdfdf2e;
}
#likes li:nth-child(2n+1) {
	background: #acacac2e;
}
#likes li:not(:last-child) {
	margin-bottom: 5px;
}

#likes .avatar {
	max-height: 45px;
	max-width: 45px;
	padding: 0 10px 0 0;
	max-width: 12% !important;
	border-radius: 5px;
}
#likes li .like_profile {
	flex: 1 0 auto;
}
#likes li .like_time {
	padding: 4px 0;
	margin-right: 10px;
	margin-left: auto;
}
#likes .description {
	font-style: italic;
	font-size: 0.9em;
	display: block;
}

/* The "new" button */
.new_posts {
	display: inline-block;
	position: relative;
	padding: 0px 3px;
	background: #fb5f00;
	color: #fff !important;
	border-radius: 6px;
	opacity: 0.8;
	font-weight: bold;
	font-size: calc(10px + (13 - 10) * ((100vw - 320px) / (3840 - 320))) !important;
}
.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: large;
}
.xlargetext {
	font-size: x-large;
}
.centertext, .centercol, .centertext :is(.embedder_media, .twitter-tweet) {
	margin: 0 auto;
	text-align: center;
}
.righttext, .righttext :is(.embedder_media, .twitter-tweet) {
	margin-left: auto;
	margin-right: 0;
	text-align: right;
}
.lefttext, .lefttext :is(.embedder_media, .twitter-tweet) {
	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 */
.expand {
	color: #fff;
	background: #ff4800;
	margin-left: 10px;
	font-weight: 600;
	padding: 3px;
	border-radius: 3px;
	text-decoration: none !important;
}
blockquote {
	margin: 0 0 8px 0;
	padding: 6px 10px;
	font-size: 1.1rem;
	border: 1px solid #d6dfe2;
	border-left: 4px solid #aaa;
	border-right: 1px solid #aaa;
	background-color: #e9f7f0;
	box-shadow: 1px 1px 4px #0000004d;
	border-radius: 6px;
	background-color: #e9edf7;
}
blockquote cite {
	display: block;
	border: none;
	margin-bottom: 3px;
	font-size: 1em;
	font-weight: bold;
	line-height: 1.4;
	color: #2677bdf2;
	padding: 0 5px;
}
blockquote cite::before {
	color: #777;
	font-size: 22px;
	font-style: normal;
	content: "\275D";
	margin-right: 3px;
	vertical-align: middle;
}
.bbc_standard_quote {
	background-color: #e9f7f0;
	border: solid #6da787;
	border-width: 1px 1px 1px 4px;
	background-color: #e9edf7;
	border-color: #6d89a7;
}
.bbc_alternate_quote {
	background-color: #f1ffea;
background-color: #f1fbff;
}
/* ----- blockquote test -----*/
.bbc_standard_quote {
	background: none;
	border: none;
}
blockquote {
	border: none;
	background: none;
	box-shadow: none;
	padding: 0;
}
blockquote .quote_post, blockquote.twitter-tweet {
	padding: 10px;
	background-color: #dfe7fb;
	border: solid #7389a4;
	border-width: 0px 2px 0px 4px;
	box-shadow: 1px 3px 7px -2px #6c6c6c69;
	border-radius: 5px;
}
blockquote .quote_post::before {
	color: #777;
	font-size: 22px;
	font-style: normal;
	content: "\275D";
	margin-right: 3px;
	vertical-align: middle;
}
.bbc_alternate_quote { background: none;}
.bbc_alternate_quote .quote_post {
	background-color: #f1fbff;
}
blockquote cite::before {
	content: none;
}
/*-----------------------*/

/* A code block - maybe PHP ;). */
.bbc_code {
	display: block;
	font-size: 0.78rem;
	background: #f3f3f3;
	border: 1px solid #dfdfdf;
	border-top: 2px solid #bbb;
	border-bottom: 3px solid #aaa;
	border-radius: 2px;
	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: #666;
	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 #a8b6cf;
}
.bbc_link:hover {
	text-decoration: none;
	border-bottom: 1px solid #346;
}
.bbc_size {
	line-height: 1.4em;
}
.bbc_color a {
	color: inherit;
}
.bbc_table {
	font: inherit;
	color: inherit;
	display: flex;
	overflow: auto;
}
.bbc_table td {
	font: inherit;
	color: inherit;
	vertical-align: top;
}
.bbc_table td img {
	  max-width: 1000px!important;
}
.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. */

#info_center {
	padding: 0 !important;
}
#info_center .titlebg {
	overflow: hidden;
	transition: background-color 0.25s;
	display: flex;
	align-items: center;
	color: white;
	padding: 4px 8px;
}
#upshrink_ic {
	order: 2;
	margin-left: auto;
}

.toggle_up::before, .toggle_down::before {
	overflow: hidden;
	background: none;
	transition: 0.25s ease;
	margin: 3px;
	margin-left: auto;
	font: 400 calc(20px + (25 - 20) * (100vw - 720px) / (3840 - 720)) "Font Awesome 5 Free";
	width: auto;
	height: auto;
	border: none;
	color: inherit;
	box-shadow: none;
	vertical-align: middle;
	opacity: 0.85;
	text-decoration: none;
}
.toggle_down::before {
	content: "\f150";
}
.toggle_up::before {
	content: "\f151";
}
.toggle_up:hover:before, .toggle_down:hover:before {
	background: none;
	opacity: 1;
}


/* 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: #ff7200 !important;
	font-size: 1.1em;
}

/* the page navigation area */
.pagesection {
	overflow: hidden;
	clear: both;
	background: var(--bg-board-head);
	padding:3px 9px 3px 9px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.pagesection .buttonlist {
  order: 1;
  margin-left: auto;
}

#pagesection_bottom {
	border-radius: 0 0 8px 8px;
}

.pages::after, .jump_to::after, .code::after,
strong[id^='child_list_']::after {
	content: ": ";
}
.pages {
	font-size: 0.9em;
	margin-left: 7px;
}

.pagelinks .button {
	padding: 0 5px;
  }

.p_button {
	margin-right: 5px;
}

.nav_page {
	padding: 0 1px;
}

.pagelinks {
	  display: flex;
	align-content: center;
	align-items: center;
	flex-wrap: wrap;
	margin-right: auto;
}
.nav_page_button {
	display: inline-flex;
	align-items: center;
	justify-content: center; 
	border: 1px solid #a2a2a2;
	border-radius: 20px;
	background: none;
	margin: 2px 0 2px 5px;
	min-width: var(--size-nav-page-circle-normal);
	height: var(--size-nav-page-circle-normal);
	font-weight: bold;
	font-size: calc(11px + (13 - 11) *(100vw - 320px) / (3840 - 320));
	color: black;
	transition: 0.3s ease;
	padding: 2px; 
}
.pagelinks .nav_page_button {
	color: white;
}

.pagelinks-more.expand_pages {
	font-size: calc(11px + (13 - 11) *(100vw - 320px) / (3840 - 320));
	min-width: var(--size-nav-page-more-normal);
	border-radius: 20px;
}

.nav_page_button:not(.current_page):hover, .nav_page_button:not(.current_page):focus, .nav_page_button:not(.current_page):active, .pagelinks-more:hover, .pagelinks-more:focus, .pagelinks-more:active {
	background: #9fd993;
	text-decoration: none;
	color: black !important;
  }
.current_page.nav_page_button {
	color: rgb(140, 193, 137);
	background: none;
	border: 3px solid;
	box-shadow: 0 0 10px
}
.main_icons.previous_page::before {
	background: none;
	content: "\f0d9";
	font-size: calc(14px + (20 - 14) * (100vw - 320px) / (3840 - 320));
	min-width: 0;		
}
.main_icons.next_page::before {
	background: none;
	content: "\f0da";
	font-size: calc(14px + (20 - 14) * (100vw - 320px) / (3840 - 320));
	min-width: 0;	
}

.expand_pages {
	font-weight: bold;
	cursor: pointer;
}
.current_page {
	color:  #9fd993;
	font-weight: bold;
	text-align: center;
}

.current_page.button.active {
	 display: inline-flex; 
	 justify-content: center;
	  align-items: center;
	  background: transparent;
	  border: 3px solid rgb(154, 213, 151) !important;
	  box-shadow: 0 0 10px rgb(154, 213, 151) !important;
	  margin: 2px 0 2px 0;
	  padding: 0;
	  cursor: auto;
	  font-size: calc(11px + (13 - 11) *(100vw - 320px) / (3840 - 320));
	  color: rgb(154, 213, 151);
	  width: calc(25px + (35 - 30) *(100vw - 320px) / (3840 - 320));
	  height: calc(25px + (35 - 30) *(100vw - 320px) / (3840 - 320));
}

.current_page.button.active:hover {
	background: none;
	color: rgb(154, 213, 151);
}
.codeoperation::before {
	content: "[";
}
.codeoperation::after {
	content: "]"; 
}

/* Posts and personal messages displayed throughout the forum. */
.post {
	flex-grow: 1;
	margin: 6px 0 6px;
	word-break: break-word;
	font-size: clamp(14px, calc(14px + (17 - 14) * (100vw - 721px) / (3840 - 721)), 20px);
	line-height: 1.6em;
}

/* Calendar colors for birthdays, events and holidays */

#linked_events h3 {
	color: white;
}
#linked_events_body {
	margin: 0;
	border-radius: 0;
	padding: 15px 12px;
	font-size: calc(11px + (14 - 11) * (100vw - 320px) / (3840 - 320));
}
#linked_events_body a {
	  color: rgb(38, 38, 38);
}
#linked_events_body .event_title a:hover {
	  color: var(--bg-button-active-hover);
	  text-decoration: none;
}

.birthday {
	color: #ff8022;
	font-weight: bold;
}
.event {
	color: #5bb2ff; 
	font-weight: bold;
}
.holiday > span {
	color: #6fd075;
	  font-weight: bold;
}

/* 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: 1px 0 5px 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%;
	text-align: center;
}

.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;
}
.additional_row a {
	color: #fff;
}
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 #7f7f7f;
	border-right: 1px solid #7f7f7f;
}

/* Styles used by the auto suggest control.
------------------------------------------------------- */
.auto_suggest_div {
	position: absolute;
	visibility: hidden;
	border-radius: 3px;
	outline: none !important;
	border: 1px solid #bbb;
	z-index: 100;
}
.auto_suggest_item {
	background: #ddd;
	padding: 1px 4px;
}
.auto_suggest_item_hover {
	background: #888;
	cursor: pointer;
	color: #eee;
	padding: 1px 4px;
}

/* Styles for the standard dropdown menus.
------------------------------------------------------- */
.dropmenu, #top_info {
	position: relative;
}
.dropmenu {
	display:flex;
}

/* Level 1 button background. */
.dropmenu > li, #top_info > li {
	display: inline-block;
	font-size: calc(var(--font-size-txt-normal) - 1px);
	line-height: 1.9em;
}

.dropmenu li a {
  min-height: 30px;
}

/* 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: #6d90ad;
	background: black;
	border-radius: 200px;
	font-weight: bold;
	text-indent: 0;
	min-width: calc(var(--font-size-txt-mobil) + 2px);
	height: calc(var(--font-size-txt-mobil) + 2px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
/*pm number display*/
#top_info .amt {
	 background: #ffbb3a;
	 color: #000;
	 font-weight: bold;
	 font-size: calc(var(--font-size-txt-normal) - 2px);
	 position: relative;
	 margin-right: 2px;
	 text-shadow: none;	 
	 right: 5px; 
	 top: 5px;
}

/*number-display reported posts*/
.button_moderate .amt, .button_moderate.active.amt {
	color: white;
	background: #ff4800 !important;
	font-weight: 600;
}
.button_moderate {
	position: relative;
}
/*moderation number display reported posts*/
.textmenu .amt {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	top: -50%;
	right: 0;
	min-width: calc(var(--font-size-txt-normal) + 2px);
	height: calc(var(--font-size-txt-normal) + 2px);
	border-radius: 50px;
}

/* Needed for new PM notifications. */
.dropmenu li strong {
	color: #333;
}

.dropmenu li a, #top_info > li > a {
	padding: 0 7px 0 7px;
	display: block;
	color: white;
	text-decoration: none;
}
/* Level 1 active button. */
.dropmenu li a.active {
	background: #97b197;
	background: linear-gradient(to top, rgb(198, 82, 77), rgb(251, 103, 97));
	color: white;
	font-weight: bold;
	border-radius: 0;
	text-shadow: 1px 1px 3px rgba(6, 3, 3, 0.91);
  }

.dropmenu li a:not(.active) {
  transition: 0.2s ease;
}

/* Level 1 hover effects. */
.dropmenu li a:hover, .dropmenu li:hover a, .dropmenu li a:focus {
	cursor: pointer;
	text-decoration: none;
	border-radius: 0;
	background: white;
	color: black;
 }

/* Level 1 active button. */
.dropmenu li a.active:hover, .dropmenu li:hover a.active {
	background: white;
	color: black;
	text-shadow: none;
}

#main_menu {
	margin: 0 0 5px 0;
	border-right: 1px solid rgba(0,0,0,0.12);
	align-self: flex-end;
	border-right: 2px solid #f44;
}
/*hide home button*/
.button_home {
	display: none !important;;
}
/*button order*/
.button_logout {order: 3;}
.button_themetog {order: 2;}

/* profile menu */

#users_name {	
	line-height: 1;
	word-wrap: anywhere;
	word-break: break-word;
	text-align: right;
	color: white;
	grid-column: 1 / span 3;
	grid-row: 1;
	width: 100%;
}
/*Handle long usernames in landscape*/
#users_name p {
	  white-space: nowrap;
	  position: absolute;
	  direction: rtl;
	  right: 0;
	  margin-right: 15px;
}
#top_info_pm {
	grid-column: 1;
	grid-row: 2;
}
#top_info_alert {
	grid-column: 2;
	grid-row: 2;
}

#profile_menu {
	width: 30em;
	min-width: 0;
	padding-top: 15px;
	font-weight: 600;
}
#profile_menu.visible {
	display: inline-flex !important;
	flex-wrap: wrap;
}
.top_menu.visible {
	display: grid !important;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	grid-row-gap: 10px;
	word-wrap: break-word;
	width: fit-content;
	word-break: break-word;
	-webkit-backdrop-filter: blur(10px); 
	backdrop-filter: blur(10px);	 
	background: rgba(105, 123, 108, 0.9); /*fallback*/
	/*! background: var(--bg-top_menu) !important; */
	background: linear-gradient(to bottom, rgba(115, 57, 57, 0.9), rgba(172, 86, 86, 0.9),rgba(213, 116, 116, 0.9));
}
.profile_user_avater {
	grid-column: 1;
	grid-row: 1;
}
.profile_user_info {
	grid-column: 2;
	grid-row: 1;
	overflow: hidden;
	word-wrap: anywhere;
}
.profile_user_links {
	grid-column: 1 / span 2;
	grid-row: 2;
	margin: 0 auto;
}
.profile_user_links ol {
	margin: 0 10px;
	clear: both;
	column-count: 2;
	display: grid;
	grid-template-columns: auto auto;
	justify-content: space-evenly;
	grid-column-gap: 1em;
	grid-row-gap: 5px;
}
.profile_user_links li  {
	padding: 0 6px;
	border-radius: 15px;
}
.profile_user_links li:hover a {
	color: black !important;
	text-shadow: none;
	text-decoration: none;
	pointer-events: auto;
}
.profile_user_links li:hover {
	background: white;
	color: black !important;
	text-decoration: none;
	pointer-events: none;
}

#pm_menu.visible, #alerts_menu.visible {
	grid-template-columns: 1fr;
	padding: 0px;
	max-height: 460px;
	overflow-y: auto;
}
.pm_unread a {
	text-decoration: none;
}
.pm_sending {
	color: white;
}
#send_pm::before {
	display: inline-block;
	content: "\f31c";
	font-family: "Font Awesome 6 Free";
	margin-right: 4px;
}
/*pm, alert icons*/
.pm_sending .floatright::before {
	content: "\f013" !important;
	font-family: "Font Awesome 6 Free";
	margin-right: 4px;
	display: inline-block;
}
.alerts_opts  a::before {
	content: "\f058";
	font-family: "Font Awesome 6 Free";
	margin-right: 4px;
	display: inline-block;
}
.alerts_opts .floatright:before {
		content: "\f013" !important;
	font-family: "Font Awesome 6 Free";
	margin-right: 4px;
}


.profile_menu_icon .main_icons.packages::before {
	content: "\f019";
}

#profileview .main_icons.mail::before {
	font-size: calc(var(--font-size-txt-normal) + 5px);
	color: #777;
}
#profileview #basicinfo .icon_fields li {
	height: auto;
}

.profile_group {
	color:white !important;
}

/* User information. */

#profile_menu .profile_user_avatar img.avatar {
	 border: 2px inset;
}
.profile_user_info, .profile_user_avatar {
	display: inline-block;
	margin: 0 9px;
	vertical-align: middle;
}
.profile_user_avatar img.avatar {
	border-radius: 50px;
	width: 65px;
	height: 65px;
	background: #555;
}
.profile_username {
	font-size: 150%;
	display: block;
}
.profile_user_links ol {
	margin: 0 10px;
	clear: both;
	column-count: 2;
}
.profile_user_links li {
	font-size: .8rem;
	line-height: 2em;
	font-size: var(--font-size-txt-normal);
	-webkit-hyphens: auto;
	hyphens: auto;
	display: flex;
	align-items: center;

}
/* Fixes bug with border-box on scrollable js */
.scrollable, .scrollable * {
	box-sizing: content-box;
}
.top_menu.scrollable {
	max-height: 30em;
}

.pm_sending a, .alerts_opts a {
	font-weight: 700;
}

.pm_bar, .alert_bar {
	padding: 0 6px 5px 6px;
	position: sticky;
	top: 0;
	z-index: 99999;
	background: rgba(123, 153, 123, 0.9);
	background: linear-gradient(to bottom,rgba(132, 95, 95, 0.9),rgb(183, 105, 105));
	color: initial;
}
/*different icon for pm body*/
.pm_subject .main_icons.members:before {
	content: "\f007" !important;	
}

.pm_unread, .alerts_unread {
	border-style: dotted;
	border-radius: 0 0 18px 18px;
	padding: 0 5px 3px 5px;
	text-shadow: none;
}
.unread_notify {
	border-bottom: 1px solid rgba(221,221,221,0.74);
}
.unread_notify strong {
	color: white;
}
.unread_notify .alert_icon.main_icons::before {
	color: inherit;
}
.no_unread {
	margin-top: 5px;
	text-align: center;
	font-weight: 400;
}

.unread_notify:hover {
	background: linear-gradient(to bottom, #fff0, #e8acac82);
	text-decoration: none;
}
.unread_notify:last-child {
	border-bottom: none;
}

.unread_notify:hover:last-child {
	border-radius: 0 0 20px 20px;
}

.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: var(--size-pm-alerts-avatar);
	height: var(--size-pm-alerts-avatar);
	object-fit: fill;
	margin: 4px 4px 4px 0;
	display: inline-block;
	color: transparent; /* For broken images */
	vertical-align: bottom;
	border-radius: 100%;
	background: rgba(212, 217, 214, 0.85);
	background: linear-gradient(to top, rgba(212, 217, 214, 0.7), #515151cc);
	border: 1px inset white;
}
.unread_notify_image {
	position: relative;
	width: calc(var(--size-pm-alerts-avatar) + 5px);
	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);
	margin-left: 11px;
}
#pm_menu .subject {
	font-weight: bold;
}
/*  dropdown background  */
/* Levels 2 and 3 submenu wrapper. */
.dropmenu li ul, .top_menu {
	z-index: 90;
	position: absolute;
	display: none;
	min-width: 8.2em;
	padding: 0.5em;
	font-weight: normal;
	border: solid 1px #999;
	border-left: solid 1px #bbb;
	border-top: solid 1px #ccc;
	border-radius: 4px;
	box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.3);
}
/* Level 2 link background. */
.dropmenu li li {
	margin: 0;
	padding: 0;
	width: 17em;
	font-size: 1em;
	border-radius: 3px;
}

/* 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: white;
	border: none;
	line-height: 2.2em;
	text-shadow: none;
	border-radius: 10px;
}

.dropmenu .subsection li {
	transition: 0.3s ease;
}
.dropmenu .subsections li a:hover  {
	background: white !important;
	color: black;
	text-shadow: none;
}

.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 a:not(.button), .top_menu {
	color: #fff;	
	text-shadow: 1px 1px 2px black;
}
.top_menu .button {
	text-shadow: none;
}

.top_menu .button:hover {
	background: var(--bg-button-active-hover) !important;
}

.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%;
}
/* Note: The next declarations are for keyboard access with js disabled. */
.dropmenu ul a:focus, .dropmenu ul ul a:focus {
	margin-left: 9990px;
	border: none;
	width: 17em;
}
.dropmenu ul ul a:focus {
	margin-left: 19950px;
}
/* Cancel those for hover and/or js access. */
.dropmenu ul li:hover a:focus, .dropmenu ul li a:focus {
	margin-left: 0;
	width: auto;
}
/* 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: #333;
	text-decoration: none;
	background: white !important;
}
/* 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: 83.33%/150% Arial, sans-serif;
	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 {
	padding: 5px 0 5px 0;
}

.under_message .inline_mod_check {
	border: 0 !important;
}

.button, .inline_mod_check {
	display: inline-block;
	padding: 0 12px;
	color: var(--color-button);
	font-size: calc(0.65rem + (5 - 0.65) * (100vw - 320px) / (3840 - 320)); 
	line-height: 2em;
	text-transform: uppercase;
	cursor: pointer;
	height: calc(2em + 2em * (0.9 - 0.85)); /* "input" font size minus ".button" font size */
	border: 1px solid grey !important;
	border-radius: 30px;
	box-sizing: border-box;
	vertical-align: middle;
	background: var(--bg-button);
}
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: var(--color-button);
	background: var(--bg-button);
}
.button:not(:first-child) {
	margin-left: 5px;
}
.button {
	transition: 0.2s ease-in-out !important;
	font-weight: 600;	
}

.button:hover, .button:focus {
	color: #222;
	border-color: #aaa #ddd #ddd #bbb;
	text-decoration: none;
	border: 1px solid transparent !important;
}
.button:hover, .button:focus {
	color: #af6700;
}

.button:focus, .nav_page_button:focus {
	animation: zoom_3 0.5s ease;
}
	
@keyframes zoom_3 {
	0% {filter: brightness(2);}
	50% {transform: scale(0.9);}
	100% {transform: scale(1); opacity: 1;}
}

/* the active one */

.button.active {
	background: var(--bg-button-active);
	color: var(--color-button-active);
	font-weight: bold;
	text-decoration: none;
	transition: 0.3s;
}
.button.active:hover, .button.active:focus {
	color: var(--color-button-hover);
	background: var(--bg-button-active-hover);
	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: 3px 0 0 3px;
}
.buttonrow .button:last-child {
	border-radius:  0 3px 3px 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 {
	width: 90%;
	clear: both;
	background: #fff;
	border: 1px solid #b8b8b8;
	border-radius: 8px;
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.14);
}

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

/* The framing graphics */
/* The top bar. */
#top_section {
	padding: 0 5%;
	border-bottom: 1px solid #bbb;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
	background: #fff;
	clear: both;
}
#top_section::after {
	content: "";
	display: block;
	clear: both;
}
#top_info {
	display: flex;
	align-items: flex-end;
	list-style: none;
	padding: 0;
	float: right;
	margin: 0 0 15px 15px;
	align-self: flex-end;
	max-width: 15em;
	display: grid;
	grid-template-columns: repeat(3, min-content);
	grid-template-rows: repeat(2, auto);
	justify-items: flex-start;
}

.menu--flat > li:last-child > a {
	 padding-inline-end: 0;
}

.menu--flat > li:first-child > a {
	 padding-inline-start: 0;
}

#profile_menu_top {
	display: flex !important;
	padding: 0 !important;
	flex-direction: column;
}

#profile_top {
	align-self: flex-end;
	grid-column: 3;
	grid-row: 2;
}

#profile_menu_top > img.avatar {
	height: var(--size-avatar-index);
	width: var(--size-avatar-index);
	float: left;
	border-radius: 100%;
	margin: auto;
	background: rgba(90, 125, 105, 0.85);
	background: linear-gradient(to top, rgba(125, 90, 90, 0.7), #ac5a5acc);
}
.notice {
	font-weight: bold;
}

#languages_form, #search_form {
	padding: 5px 0;
}
#languages_form {
	margin: 0 0 0 10px;
}

/* The logo and slogan. */

  /*hide default slogan*/
#slogan_default {
	display: none;
}

#header {
	padding: 2px 2px 12px 2px;
	width: 90%;
	display: flex;
	align-items: flex-end;
}
#header::after {
	content: "";
	display: block;
	clear: both;
}


/*the Chems Logo */

.forumtitle img {
	display: none;
	vertical-align: middle;
	width: calc(200px + (300 - 200) * (100vw - 320px) / (3840 - 320));
	padding-bottom: 10px;
 }
.forumtitle svg {
	vertical-align: middle;
	width: calc(200px + (350 - 200) * (100vw - 320px) / (3840 - 320));
	max-width: 100%;  
	height: auto;
	overflow: visible;
	position: relative;
	z-index: 3;
	top: -10px;
}

/*logo svg color*/
.chems_logo, .forumtitle svg {
	fill: var(--color-logo) !important;
	transition: all 0.5s ease;
	transform: translate(0%, 0%);
}
.forumtitle:hover svg {
	transform-origin: center;
	transform: scale3d(0.94,0.94,0.94);
}
.forumtitle:hover .chems_logo {
	fill: var(--color-logo-hover) !important;
}

/* The main title. */

h1.forumtitle {
	font-size: 2.2em;
	font-family: "Tahoma", sans-serif;
	/*padding: 10px 12px 10px 10px;*/
	font-weight: normal;
	flex: 1 1 auto;
}
h1.forumtitle a {
	color: #a85400;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
	display: block;
	width: auto;
	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: 7px 0 8px 10px;
}

/* The user info, news, etc.*/
#upper_section {
	padding: 2px 2px 0 2px;
}
#inner_section {
	padding: 12px 10px 2px 10px;
	border-radius: 6px 6px 0 0;
}
#inner_section::after {
	content: "";
	display: block;
	clear: both;
}
/* The upper_section, float the two each way */
.user {
	width: 50%;
	float: left;
	overflow: auto;
	padding: 0 4px 6px 4px;
	font-size: 0.9em;
}
.user ul {
	padding: 0 0 5px 0;
	font-size: 0.9em;
	line-height: 1.8em;
}
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 {
	max-width: 50%;
	float: right;
	padding: 0 0 6px 0;
	font-size: 0.9em;
}
#inner_wrap .news h2, #inner_wrap .news p {
	display: inline;
	padding: 0 0 0 4px;
}

/* The navigation list (i.e. linktree) */

.navigate_section {
	position: relative;
	left: 12px;
	width: fit-content;
	max-width: 94%;
}

#main_content_section .navigate_section {
	padding: 0;
}

.navigate_section .member-icon {
  display: none;
}
.navigate_section ul {
	font-size: var(--font-size-txt-normal);
	overflow: hidden;
	border-radius: 2px 2px 0 0;
	display: flex;
	flex-wrap: wrap-reverse;
}
.navigate_section ul li {
	float: left;
	padding-bottom: 0px;
	line-height: 1.1em;
	display: inline-block;
	color: #fff;
	border-bottom: 3px solid white;
	padding: 3px;
	text-decoration: none;
	background: var(--bg-board-head);
	transition: 0.2s ease;
}
.navigate_section li:hover {
	filter: invert(1);
}
.navigate_section :is(ul li a, ul li em) {
	padding: 4px 0 4px;
	display: inline-block;
	  color: #fff;
	  font-weight: 650;
}
.navigate_section ul li span {
	display: inline-block;
}

.last strong {
	color: #fff;
}

.navigate_section li:not(:first-child)::before {
	content: "»";
	font-size: 1.5em;
	text-align: center;
	margin-left: 3px;
}
.navigate_section ul li .dividers {
	color: #fff;
	font: 83.33%/150% Arial, sans-serif;
	padding: 0 2px 0 6px;
	display: none;
}

.navigate_section ul li .board_moderators a {
	padding: 4px 0;
}

/* "Unread posts" and "New replies" links, accessible with header collapsed. */
.navigate_section .unread_links {
	float: right;
	display: none;
}
.navigate_section .unread_links a {
	padding: 4px 0;
	margin-top: 4px;
	display: inline-block;
	border-radius: 4px;
	text-align: center;
}

/* The content section */
#content_section {
	clear: both;
}
#main_content_section {
	padding: 0px 0px 0px 0px;
	width: 85%;
	margin: 0 auto
}

#main_content_section::after {
	content: "";
	display: block;
	clear: both;
}
/* Footer is now full-width by default. */
/* The footer with copyright links etc. */
	/*credits*/
#goUp {
	margin-left: 5px;
	font-weight: bold;
}
	/*Team*/
#developed .credits_info {
	font-size: calc(14px + (18 - 14) * (100vw - 721px) / (3840 - 721));
}
#footer_credits {
	display: grid;
	grid-template-rows: repeat(3, auto);
	grid-row-gap: 2px;
	justify-items: flex-end;
	align-content: center;
	word-wrap: break-word;
	grid-column: 2;
	grid-row: 1;
	justify-self: flex-end;
	text-align: end;
}

#footer_standard {
	  grid-column: 1;
	  grid-row: 1;
}
.footer_left {
	  float: right;
}
#footer_credits .develop_small {
	font-size: calc(12px + (14 - 12) * (100vw - 721px) / (3840 - 721));
}

.credits_info {
	position: relative;
}
/*footer_credit tooltip*/
.credits_text {
	position: absolute;
	right: 0;
	bottom: 115%;
	background: var(--bg-credits-hover);
	border-radius: 3px;
	min-width: 10em;
	padding: 5px;
	color: black;
	font-size: var(--font-size-txt-normal);
	text-align: center;
	z-index: 100;
	visibility: hidden;
	opacity: 0;
	transition: 0.5s ease;
	font-weight: 600;
}
/*credits_text bubble arrow*/
.credits_text::after {
	  content: "";
	  position: absolute;
	top: 100%;
	  right: 5%;
	  width: 0;
	  border-top: 5px solid var(--bg-credits-hover);
	  border-left: 8px solid transparent;
	  border-right: 8px solid transparent;
}
 #developed .credits_text::after {
	  right: 50%;
}
.credits_text:hover {
	display: none;
}
#footer_credits span:hover {
	cursor: pointer;
}
#developed:hover .credits_text, #alex:hover .credits_text, #caleb:hover .credits_text, #mia:hover .credits_text, #benji:hover .credits_text, #peter:hover .credits_text, #chris:hover .credits_text, #julius:hover .credits_text {
	visibility: visible;
	opacity: 1;
}
:is(#alex, #benji) .credits_text::after {
	right: unset !important;
	left: 9%;
}
 :is(#alex, #benji) .credits_text {
	right: unset;
	left: 0;
}


#footer {
	margin: 24px 0 0 0;
	padding: 5px 5% 10px 5%;
	background: rgba(0,0,0,0.8);
	border-top: 3px solid rgba(255,255,255,0.8);
	flex: none;
}
#footer li, #footer p, #footer a {
	font-size: 0.9em;
	color: #222;
	color: white;
	text-decoration: none;
}
#footer a {
	font-size: inherit;
}
#footer #footer_credits a {
	  text-decoration: underline;
}
#footer a:hover {
 text-decoration: underline;
}

#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;
}

#read_buttons {  
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	background: rgba(0,10,0,0.5);
	border-radius: 7px;
	padding: 7px;
}
.mark_read {
	padding: 5px;
	background: rgba(125, 65, 65, 0.5);
	width: fit-content;
	margin-left: auto;
	border-radius: 10px;
}

.mark_read li {
	margin: 5px;
}
.mark_read ul {
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: center;
	  align-items: center;
}


.mark_read .buttonlist {
	margin: 0;
	padding: 0;
}
/* the small stats */
#index_common_stats {
	margin: -4px 8px 6px 8px;
	padding: 4px 0 0 0;
	font-size: 0.9em;
	border-top: 1px solid #ddd;
}

.fix_rtl_names {
	display: inline-block;
}
.bday_now, .event_now, .hday_now {
	margin-right: 3px;
}

/* The quick buttons */
.quickbuttons {  
	clear: right;
	float: right;
	text-align: right;
	display: inline-flex;
	align-items: center;
}

.quickbuttons  li > a {
	  font-weight: 650;
	  color: #2980b9 !important;
}

.quickbuttons > li a:hover, .quickbuttons > li a:focus {
	background: none!important;
}

/* post modify page look*/
#recent {
	background: #4f4f4f;
	padding: 2px;
	border-radius: 10px 10px 5px 5px;
}
#recent .windowbg {
	margin: 0;
	margin-bottom: 5px;
	margin-top: 5px;
}

#recent .quickbuttons {
	margin: 0;
}
.quickbuttons > li {
	float: left;
}

.quickbuttons > li > a {
	 font-size: calc(11px + (17 - 11) * (100vw - 721px) / (3840 - 721));
}

.quickbuttons > li > a, .inline_mod_check {
	display: flex;
	align-itmes: center;
	height: auto;
	padding: 0 4px;
	color: #222;
	line-height: 1.375rem;
	border-radius: 0;
}
.quickbuttons > li:first-child > a {
	border-radius: 4px 0 0 4px;
}
.quickbuttons > li:last-child > a, .inline_mod_check:last-child {
	border-radius: 0 4px 4px 0;
}
.inline_mod_check input {
	position: relative;
	top: -1px;
	height: auto;
}
.moderationbuttons_check:focus {
	box-shadow: 0 0 4px #499dd8;
}
.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 #999;
	border-left: solid 1px #aaa;
	border-top: solid 1px #bbb;
	border-radius: 4px 0 4px 4px;
	box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.2);
}

.post_options ul  {
	background: white !important;
	color: #2980b9;
}
.post_options ul li:hover  a {
	background: #dfdfdf !important;
	}
.post_options ul li {
	border-radius: 8px;
}
.post_options ul a span::before {
	width: 25px !important;
	background-image: none;
	color: black!important;
}
.post_options span:before {
	text-align: center; 
	margin: 0;
}

.post_options:hover ul {
	display: block;
}
.post_options ul a {
	display: block; 
	width: 13.5em;
	line-height: 2.2em;
	text-decoration: none;
	border-radius: 3px;
}
.post_options ul a:hover, .post_options ul a:focus {
	border-color: #c4cbd3;
}
/* 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: 4px;
}

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

.quickModifyMargin {
	margin: 10px 0 5px 0;
	padding-bottom: 5px;
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
}


.quickModifyMargin #edit_save {
	margin-left: 10px !important;
	order: 2;
}

/* 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.
------------------------------------------------------- */
.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;
}

/* Additional register fields */
#registration fieldset {
	border: none;
	padding: 0;
	margin: 0;
}
#registration .roundframe {
	border-top: none;
	font-size: calc(13px + (17 - 13) * (100vw - 320px) / (3840 - 320));
}
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: #222;
	margin-left: 5ex;
	border: 1px solid #222;
}
.valid_input {
	background: #f5fff0;
}
.invalid_input {
	background: #fff0f0;
}

/* Styles for maintenance mode.
------------------------------------------------------- */
#maintenance_mode .information {
	display: flex;
	align-items: center;
	font-size: 1.1em;
	font-weight: 700;
}
#maintenance_mode img {
	width: calc(250px + (350 - 250) * (100vw - 320px) / (3840 - 320));
	height: auto;

}
.action_home #maintenance_mode .button {
	 display: flex;
	 margin: 2em auto 0 auto;
}

#maintenance_mode img {
	margin-right: 12px;
}

#admin_content {
	background: rgba(0, 0, 0, 0.65);
	padding: 5px;
	border-radius: 10px;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
 #postmodify {
	margin-bottom: 10px;
	background: rgba(0, 0, 0, 0.65);
	padding: 5px;
	border-radius: 10px;
}
#quickreply #postmodify {
	background: unset;
}

#admin_content .windowbg {
	margin: 0 0 10px 0;
	box-shadow: none;
}

#admin_content :is(.titlebg, .titlebg strong) {
	color: white;
}


/* 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;
}

.check.centercol::before {
	font-family: "Font Awesome 6 Free";
	  font-weight: 900;
}

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

.errorfile_table {
	background: #f0f4f7;
	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;
	background-color: rgba(0.0.0.1);
	padding: 0;
}

/* Some lovely generic icons.
------------------------------------------------- */

.main_icons::before {
	content: "";
	display: inline-block;
	background: url(../images/icons/main_icons_sprite.png) no-repeat -5px -5px / 260px auto;
	vertical-align: middle;
	font-family: "Font Awesome 6 Free";
	font-style: normal;
	font-weight: 900;
	font-variant: normal;
	font-size: var(--font-size-txt-normal);
	text-align: center;
	min-width: 20px;
	min-height: 20px;
}

.main_icons.fa-circle-up::before {
	background: none;
	font-weight: 400;
	font-family: "Font Awesome 5 Free";
}
/*added for snowflakes mod*/
.main_icons.snowflake::before {
	  content: "\f2dc";
	  background: none;
}

.info .main_icons {
	font-size: var(--font-size-txt-normal);
	color: var(--color-icons-board);
}

/* Load better icons for higher resolution screens */
@media screen and (min-resolution: 160dpi) {
	.main_icons::before {
		background-image: url(../images/icons/main_icons_sprite_hd.png);
	}
}

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

/* 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;
}
#profile_menu a{
	color: white;	
}

/* Top row */

.main_icons.help::before {
	background-position: -5px -5px;
	background: none;
	content: "\f059";
	font-size: calc(var(--font-size-txt-normal) + 2px);
}

.main_icons.search::before, .main_icons.engines::before {
	  background-position: -31px -5px;
	  background: none;
	  content: "\f002"; 
}

.quick_edit_button:before {
	margin-right: 4px;
}
.main_icons.quick_edit_button::before, .main_icons.modify_button::before {
	  background-position: -57px -5px;
	  content: "\f044";
	  background: none;
	  height: 100%;
	  color: var(--color-icons-board);
}
.main_icons.check::before {
	background-position: -83px -5px;
}
.main_icons.invalid::before {
	background-position: -109px -5px;
}
.main_icons.gender_None::before, .main_icons.gender_0::before {
	background: none;
}
.main_icons.gender_1::before {
	background-position: -57px -31px;
	background: none;
	content: "\f221";
}
.main_icons.gender_2::before {
	background-position: -135px -5px;
	background: none;
	content: "\f222";
}

.main_icons.gender_3::before {
	background: none;
	content: "\f225";
}
.main_icons.gender_4::before {
	background: none;
	content: "\f22c";
}

.main_icons.watch::before {
	background-position: -239px -5px;
	background: none;
	content: "\f1e5";
}
/* 2nd row */
.main_icons.move::before {
	  background-position: -5px -31px;
	  background: none;
	  content: "\f56e";
}
/* statistic icons */
.main_icons.boards::before {
	background-position: -31px -31px;
	background: none;
	content: "\f15c";
}

.main_icons.topics_views::before {
	background: none;
	content: "\f06e";
}

.admin_menu_icon .main_icons.boards::before  {
	  background: none;
	  content: "\f15c";
}

.main_icons.general::before {
	background-position: -31px -31px;
	background: none;
	content: "\e473";
}

.half_content .main_icons.boards::before {
	content: "\f559" !important;
	color: white;
}

.board_icon .main_icons::before {
	color: #a8a8a8;
}

.info .main_icons.sticky::before, .info .main_icons.move::before, .info .main_icons.lock::before {
	font-size: 1.2em; 
}
.info .main_icons.poll::before {
	font-size: 1em;
}
.main_icons:is(.posted, .profile_sm)::before {
	background: none;
	content: "\f4ff";
}

.main_icons.topic-icon::before {
	background: none;
	content: "\f15c";
	margin-right: 3px;
	font-weight: 400;
}

.main_icons.posters::before {
	background-position: -109px -31px;
	background: none;
	content: "\f5a2";
}
.main_icons.membergroups::before {
	  background: none;
	  content: "\e537";
}

.main_icons.people::before, .profile_user_links .main_icons.people::before {
		background: none;
	  content: "\f0c0";
}

.main_icons.starters::before, .main_icons.mlist::before {
	background-position: -239px -31px;
	background: none;
	content: "\e593";
}

.main_icons.features::before {
	background-position: -83px -31px;
	background: none;
	content: "\f085";
}

.main_icons.replies::before, .main_icons.topics_replies::before {
	background-position: -135px -31px;
	background: none;
	content: "\f086";
}
.main_icons.history::before, .main_icons.time_online::before, .main_icons.scheduled::before {
	background-position: -161px -31px;
	  background: none;
	  content: "\f017";
	  font-weight: normal;
}
.main_icons.views::before {
	background-position: -187px -31px;
}
.main_icons.last_post::before {
	background-position: -213px -31px;
}

/* 3rd Street Saints */
.main_icons.poll::before {
	background-position: -5px -57px;
	background: none;
	content: "\e561";
}

.main_icons.poll.centericon {
	  display: inline-flex;
}
.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;
}
/*added login, register width */
.visitor a {
	width: max-content;
}
.visitor i::before {
	margin-right: 3px;
	font-size: calc(14px + (20 - 14) * (100vw - 320px) / (3840 - 320));
	transition:  0.3s ease;
}
.visitor:hover i {
	color: #69ca65;
}

.button_login i::before {
	content: "\f2f6";
}
.button_signup i::before {
	content: "\f234";
}

.main_icons.login::before {
	background: none;
	content: "\f2f6"
}

.main_icons.exit::before, .main_icons.logout::before {
	background-position: -109px -57px;
	  background: none;
	  content: "\f2f5";
}

.main_icons.switch::before {
	background-position: -135px -57px;
}
.main_icons.replied::before {
	background-position: -161px -57px;
	  background: none;
	  content: "\f086";
	  font-weight: bold;
}
.main_icons.im_on::before {
	background-position: -187px -57px;
	background: none;
	content: "\f507";
}
.main_icons.im_off::before {
	background-position: -213px -57px;
	  content: "\f075";
	  background: none;
	  font-weight: normal;
}
.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;
	background: none;
	content: "\f0e0";
}
.main_icons.warning_mute::before {
	background-position: -57px -83px;
}

.main_icons.alerts::before {
	  background: none;
	  content: "\f06a";
}

.main_icons.warn_button::before, .main_icons.warning_moderate::before {
	background-position: -83px -83px;
	  background: none;
	  content: "\f071";
}
.main_icons.mail_new::before {
	background-position: -109px -83px;
	background: none;
	content: "\f674";
}
.main_icons.drafts::before {
	background: none; 
	content: "\f15b";
}

.main_icons.reply_button::before,
.main_icons.reply_all_button::before {
	background-position: -135px -83px;
	background: none; 
	content: "\f31c";
	color: #848484;
}

.main_icons.warning_watch::before {
	background-position: -161px -83px;
}
.main_icons.calendar_export::before {
	background: url(https://cdn-icons-png.flaticon.com/128/6816/6816684.png) no-repeat;
	background-size: contain;
	min-width: calc(15px + (18 - 15) * (100vw - 320px) / (3840 - 320));
	min-height: calc(15px + (18 - 15) * (100vw - 320px) / (3840 - 320));
	display: block;
	transition: 0.3s ease;
}

.main_icons.calendar_modify::before {
	  background: url(https://cdn-icons-png.flaticon.com/128/1828/1828918.png) no-repeat !important;
	  background-size: contain !important;
	  min-width: calc(12px + (19 - 15) * (100vw - 320px) / (3840 - 320));
	  min-height: calc(12px + (19 - 15) * (100vw - 320px) / (3840 - 320));
	  transform: rotate(-22deg);
	  display: block;
}

/* 5th Row */
.main_icons.plus::before {
	background-position: -5px -109px;
}

.main_icons.warning::before, .main_icons.moderate::before {
	background-position: -31px -109px;
	background: none;
	content: "\21";
}
.main_icons.themes::before {
	background-position: -57px -109px;
	background: none;
	content: "\f55d";
}
	
.main_icons.support::before {
	background-position: -83px -109px;
	background: none;
	content: "\e05c";
}
.main_icons.liked_users::before, .main_icons.liked_messages::before, .main_icons.like::before {
	background-position: -109px -109px;
	background: none;
	content: "\f164";
}
.main_icons.unlike::before {
	background-position: -135px -109px;
	 background: none;
	content: "\f165";
}

.main_icons.current_theme::before {
	background-position: -161px -109px;
	background: none;
	content: "\f247";
}

.main_icons.stats::before {
	background-position: -187px -109px;
	  background: none;
	  content: "\e473";
}

.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;
	  background: none;
	  content: "\f580";;
}
.main_icons.server::before {
	background-position: -31px -135px;
	background: none;
	content: "\e4e5";
}

.main_icons.ban::before, .main_icons.ignore::before {
	background-position: -57px -135px;
	background: none;
	content: "\f05e";
}
.main_icons.boards::before {
	background-position: -83px -135px;
	  background: none;
	  content: "\f7b9";
}
.main_icons.regcenter::before {
	background-position: -109px -135px;
	background: none;
	content: "\f234";
}
.main_icons.posts::before {
	background-position: -135px -135px;
	background: none;
	content: "\f086";
}
.main_icons.sort_up::before {
	background-position: -239px -135px;
	  content: "\f161";
	  background: none;
}
.main_icons.sort_down::before {
	  background-position: -161px -135px;
	  content: "\f160";
	  background: none;
}
.main_icons.change_menu2::before {
	background-position: -187px -135px;
}
.main_icons.post_moderation_moderate::before {
	background-position: -213px -135px;
	background: none;
	content: "\e4eb";
}

/* 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;
	background: none;
	content: "\f31c";
}
.main_icons.permissions::before, .main_icons.signup::before {
	background-position: -109px -161px;
	background: none;
	content: "\f084";
}
.main_icons.paid::before {
	background-position: -135px -161px;
	background: none;
	content: "\24";
}
.main_icons.packages::before {
	background-position: -161px -161px;
	background: none;
	content: "\e4c7";
}
.main_icons.filter::before {
	background-position: -187px -161px;
	margin: 0 5px 0 0;
	background: none;
	content: "\f002";
}
.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;
	background: none;
	content: "\f1c2";
}
.main_icons.news::before {
	background-position: -31px -187px;
	background: none;
	content: "\f70e";
}
.main_icons.delete::before, .main_icons.prune::before {
	  background-position: -57px -187px;
	background: none !important;
	content: "\f057" !important;
	justify-self: end; 
}
.main_icons.remove_button::before {
	background: none;
	content: "\f057";
	color: red;
}

.main_icons.modifications::before {
	background-position: -83px -187px;
	background: none;
	content: "\f12e";
}
.main_icons.maintain::before, .main_icons.admin::before {
	background-position: -109px -187px;
	  background: none;
	  content: "\f085";
}
.main_icons.home::before {
	background-position: -135px -187px;
	background: none;
	content: "\f12e";
}

.main_icons.administration::before {
	background-position: -135px -187px;
	background: none;
	content: "\e50d";
}
.main_icons.frenemy::before {
	background-position: -161px -187px;
	  background: none;
	  content: "\f6ad";
}

.main_icons.lock::before, .main_icons.security::before {
	background-position: -213px -187px;
	  background: none;
	content: "\f023";
}
.main_icons.error::before, .main_icons.disable::before {
	background-position: -239px -187px;
	  background: none;
	  content: "\f06a";
	  color: red !important;
}
/* 9th Row */

.main_icons.languages::before {
	background-position: -5px -213px;
	background: none;
	content: "\f1ab";
}

.main_icons.members_request::before {
	background-position: -31px -213px;
	background: none;
	content: "\e542";
}
.main_icons.members_delete::before {
	background-position: -57px -213px;
	background: none;
	content: "\f235";
}
/* profile user links*/
.profile_user_links .main_icons.members::before {
	  background: none;
	  content: "\f4fe";
}
.profile_user_links .main_icons.features::before, .profile_menu_icon .main_icons.features::before {
	  background: none;
	  content: "\f53f";
}
.profile_user_links .main_icons.boards {
	  content: "\f7b9";
	  background: none;
}

.main_icons.members::before {
	background-position: -83px -213px;
	  background: none;
	  content: "\f0c0";
}
.main_icons.members_watched::before {
	background-position: -109px -213px;
	background: none;
	content: "\e53f";
}
.main_icons.topic::before {
	  background: none;
	  content: "\f4ff";
}
.main_icons.attachment::before {
	background-position: -187px -187px;
	background: none;
	content: "\f0c6";
}
.main_icons.sticky::before, .main_icons.attachment::before {
	background-position: -135px -213px;
	  background: none;
	  content: "\f0c6";
}

.main_icons.manrules::before {
	background: none;
	content: "\f0b0"; 
}
.main_icons.manlabels::before {
	background: none;
	content: "\f02c";
}
.main_icons.corefeatures::before, .main_icons.settings::before {
	background-position: -161px -213px;
	background: none;
	content: "\f013";
}
.main_icons.calendar::before,  .button_calendar i::before {
	background-position: -213px -83px;
	background: none;
	content: "\f073";
}
.main_icons.calendar::before {
  /*background-position: -187px -213px; */
}

.calendar_today .day_text::before {
	content: "\f14a";
	font-family: "Font Awesome 6 Free";
	margin-right: 3px;
}
.main_icons.logs::before {
	background-position: -213px -213px;
	background: none;
	content: "\f02d";
}
.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;
	background: none;
	content: "\f14a";
	color: #4fa84f;
}
.main_icons.close::before {
	background-position: -31px -239px;
	background: none;
	content: "\f4b3";
}
.main_icons.details::before {
	background-position: -57px -239px;
	background: none;
	content: "\f5da";
}
.main_icons.merge::before {
	background-position: -83px -239px;
}
.main_icons.folder.open::before {
	content: "\f07c";
}
.main_icons.folder::before {
	background-position: -109px -239px;
	background: none;
	content: "\f07b";
	color: #e8ae54;
	font-size: 1.3em;
}
.main_icons.restore_button::before {
	background-position: -135px -239px;
}
.main_icons.remove_button::before, .main_icons.hide_popup::before {
	background: none;
	content: "\f00d";
	height: auto;
}
.main_icons.split_button::before {
	background-position: -161px -239px;
	background: none;
	content: "\e4bc";
	height: 100%;
	color: rgb(51, 51, 51);
}
.main_icons.unapprove_button::before,
.main_icons.unread_button::before {
	background-position: -187px -239px;
	background: none;
	content: "\f2d3";
	color: #d25541;
}
.main_icons.quote::before, .main_icons.quote_selected::before {
	background-position: -213px -239px;
	content: "\f10d";
	background: none;
	color: var(--color-icons-board);
	height: max-content;
	width: max-content;
	margin-right: 3px;
}
.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;
}

/*changed: added for missing FA icons*/

:is(.fa-admin, .fa-logout, .fa-login,.fa-mlist, .fa-moderate)::before  {font-family: "Font Awesome 6 Free";}
.fa-admin::before {content: "\f0f2";}
.fa-logout::before {content: "\f2f5";}
.fa-moderate::before {content: "\f134";}
.fa-mlist::before {content: "\f0c0";}
.fa-clock::before {content: "\f0c0"; font-family: "Font Awesome 5 Free";}
.fa-themetog::before {content: "\f06e"; }
.far.fa-star::before {font-family: "font awesome 5 free"; font-weight: 400;}
.fas.fa-star::before {font-family: "font awesome 5 free"; font-weight: 900;}

/* Styles for (fatal) errors.
------------------------------------------------- */

#fatal_error {
	width: 100%;
	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: 3px solid #c34;
	border-bottom:3px 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: #666;
	background: #fff6ca;
	border-top: 1px solid #ffd324;
	border-bottom: 1px solid #ffd324;
}
.infobox {
	color: #222;
	background: #cfc;
	border-top: 1px solid green;
	border-bottom: 1px solid green;
}
.descbox {
	padding: 7px 10px 7px 10px;
	border: 1px solid #c5c5c5;
	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: 2px;
	position: relative;
	overflow: hidden;
	color: rgba(0, 0, 0, 0.6);
}
.generic_bar span, .progress_bar span {
	position: relative;
	z-index: 2;
	text-shadow: 1px 1px rgba(255, 255, 255, .4);
	display: inline-block;
	padding: 0 5px;
	font-weight: bold;
}
.generic_bar .bar, .progress_bar .bar {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	bottom: 0;
	background: linear-gradient(35deg,#f88,#fff,#f88, #fff, #f88, #fff,#ffb1b1);
	transition: width .3s;
	border-radius: 1px;
	box-shadow: 4px -4px 8px rgba(0, 0, 0, 0.1) inset,
		4px 4px 8px rgba(255,255,255,0.3) inset;
	display: block;
}
.generic_bar.vertical {
	width: 15px;
}
.generic_bar.vertical .bar {
	right: 0;
	top: auto;
	box-shadow: 4px -4px 4px rgba(0, 0, 0, 0.1) inset,
		4px 4px 4px rgba(255,255,255,0.3) inset;
}

.progress_bar {
	border-radius: 4px;
	text-align: center;
	font-weight: bold;
	color: rgba(0, 0, 0, 0.8);
}
.progress_bar .bar {
	box-shadow: -1px 1px 0 rgba(255, 255, 255, 0.25) inset,
		1px -1px 0 rgba(0,0,0,0.1) inset;
	background-color: #75da41;
	background-size: 30px 30px;
	background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}
.progress_yellow .bar {
	background-color: #f6c51c;
}

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

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

.progress_blue .bar {
	background-color: #34c2e3;
}

/* 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: 600;
	-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;
	font-weight: 400;
	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;
	font-size: 1.3em;
}
#basicinfo #userstatus {
	display: block;
	clear: both;
	/*padding: 3px;*/
}
#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 #ccc solid;
}
#detailedinfo dt, #tracking dt {
	width: 35%;
	margin: 0 0 3px 0;
	font-weight: bold;
	color: #444;
}
#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 #666;
	border-left: none;
	border-right: none;
	background: #eee;
}
.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: #3f3f3f;
	float: left;
}
.topic_details {
	padding: 0 4px 4px 4px;
}
.list_posts {
	border-top: 1px solid #ddd;
	box-shadow: 0 1px 0 #fff inset;
	padding-top: 12px;
	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 a {
	font-weight: bold;
	border-bottom: 1px solid #c4c4c4;
}
.boardslist a:hover {
	text-decoration: none;
	border-bottom: 1px solid #334466;
}

#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: #cddbe6;
}

/* 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: smaller;
}

/* 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;
}

#statistics .titlebg {
	color: white !important;
}
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%;
	font-weight: 600;
}
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.
------------------------------------------------- */

#pmAvatar {
	display: none;
}
#pmFolder .keyinfo h5::before {
	  content: "\f0e0";
	  font-family: "Font Awesome 6 Free";
	  font-weight: 400;
	  margin-right: 5px;
	  width: auto;
	  height: auto;
}
#personal_messages form {
	padding: 0;
}
#mark_all .floatright {
	color: white;
}
#pmFolder .signature {
	padding: 10px;
}
#pmFolder .main_icons.switch:before {
	background: none;
	content: "\f06e";
	width: auto;
	height: auto;
	font-weight: normal;
	font-size: 1.4em;
	transition: 0.3s ease;	 
}
#pmFolder .main_icons.switch:hover::before {
	color: #c6ffd2;
	transform: rotate(360deg);
}
#personal_messages .windowbg .postinfo {
	text-align: right; 
}
#personal_messages .subject_title h5 {
	text-align: left;
}
#pmFolder .main_icons.reply_button {
	color: gray;
}
#pmFolder .main_icons.remove_button {
	color: #ea5151;
}
#pmFolder .postinfo {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	text-align: right;
}
.conversation_title {
	background: rgb(90, 111, 90);
	background: linear-gradient(to right, rgb(111, 90, 90), rgb(164, 133, 133), rgb(191, 155, 155));
	border: none;
	color: white;
	margin-top: 10px;
	border-radius: 10px 10px 0 0;
	padding: 15px;
}
.conversation_title p a, .conversation_title p strong {
	color: white;
}
.conversation_title .buttonlist {
	display: none;
}

.main_icons.inbox::before {
	background-position: -57px -57px;
	content: "\f2b6";
	background: none;
	height: auto;
	width: auto;
}
.pm_menu_icon .main_icons.send::before, .main_icons.send::before {
	content: "\f31c";
	background: none;
	height: auto;
	width: auto;
}
.main_icons.sent:before {
	content: "\f064";
	background: none;
	height: auto;
	width: auto;
}
#top_info_alert i, #top_info_pm i {
	font-size: 1.6em;
}


#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: #f0f4f7;
	display: block;
	margin: 6px 0 0 12px;
	height: 12px;
	border: 1px solid #adadad;
	width: 10em;
}
#personal_messages .capacity_bar span {
	border-right: 1px solid #adadad;
	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: #333;
	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;
	display: flex;
}
#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;
}

/*alerts layout*/

#alerts .windowbg {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 7px 10px;
}
#alerts .alert_buttons {
	width: 100%;
}
#alerts .alert_image {
	width: var(--width-boardindex-icons-cell-normal);
}
#alerts .quickbuttons li, #alerts .alert_time {
	padding: 0 3px;
}
#alerts .alert_buttons .quickbuttons {
	display: flex !important;
	margin: auto !important;
}



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

#memberlist .cat_bar .catbg::before {
	content: "\f0c0";
	background: none;
	height: auto;
	width: auto;
	font-family: "Font Awesome 6 Free";
	float: left;
	margin-right: 10px; 
}

#memberlist {
	background: rgba(0, 0, 0, 0.5);
	border-radius: 5px
}
#memberlist h3 .floatleft {
	  margin-right: 10px;
}
#memberlist .table_grid {
	margin-top: 10px;
}
#member_letters a {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  width: var(--size-member-letters);
	  height: var(--size-member-letters);
	  background: #7b7b7b;
	  border-radius: 3px;
	  margin: 2px 3px;
	transition: 0.1s ease;
}
#member_letters {
	display: flex;
	flex-wrap: wrap;
}
#member_letters a:hover, #member_letters a:focus {
	color: black;
	background: white;
	text-shadow: none;
}
#memberlist .buttonlist {
	display: flex;
	flex-wrap: wrap;
	margin-left: auto;
	justify-content: center;
}
#mlist {
	overflow: auto;
}


#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: 0;
	padding: 8px 20px 12px 20px;
	border: 1px solid #ddd;
	border-radius: 0 0 7px 7px;
	box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.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: #333;
	background: #fff;
	border: 1px solid #aaa;
	border-radius: 4px;
	box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0.05) inset;
}

/* 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);
	background: rgba(36, 36, 36, 0.5);
	z-index: 99;
}
#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;
	margin: 0 auto;
	padding: 0;
}
#smf_popup .popup_window {
	max-width: 35em;
	top: 25%;
	box-shadow: none;
}
#smf_popup .main_icons::before {
	margin-right: 5px;
}
 .main_icons.hide_popup::before {
	font-size: calc(var(--font-size-txt-normal) + 6px);	
}
.popup_window {
	top: 15%;
	width: 480px;
}
.popup_heading {
	padding: 5px 8px;
	color: #bf6900;
}
.popup_content {
	color: #222;
	line-height: 1.6em;
	max-height: 30em;
	overflow: auto;
	padding: 10px 8px;
	border-bottom: 1px solid #ddd;
	border-radius: 6px 6px 2px 2px;
	box-shadow: 0 -2px 3px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(255, 255, 255, 0.2);
}
#main_menu .popup_heading,
#genericmenu .popup_heading,
#adm_submenus .popup_heading {
	display: none;
}
#main_menu .popup_container,
#genericmenu > .popup_container,
#adm_submenus > .popup_container {
	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;
	margin-left: auto;
	order: 2;
}
.popup_heading .icon {
	vertical-align: middle;
	margin: -4px 4px 0 0;
}

/* popup prompts */
#smf_popup .popup_content {
	border-radius: 0 0 10px 10px;
	max-height: 60vh;
}
#smf_popup .popup_heading {
	border-radius: 10px 10px 0 0;
	background: url(../images/Chems/Overlay/Snowcaps6.svg) repeat-x;
	background-size: 180px;
	background-color: #d7594c;
	color:  white;
	font-weight: 600;
	font-size: calc(15px + (19 - 15) * (100vw - 320px) / (3840 - 320));
	display: flex;
	align-items: center;
	width: 100%;
}
#smf_popup .main_icons.help::before {
	margin-right: 3px;
}


.generic_list_wrapper, .windowbg, .approvebg, .approvebg2 {
	background: #f0f4f7;
	margin: 12px 0 0 0;
	padding: 12px 16px;
	border: 1px solid #ddd;
	border-radius: 6px;
	box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.1);
	overflow: auto;
}
/* Here comes the glory... */
.windowbg:nth-of-type(even), .bg.even {
	background: #f0f4f7;
}
.windowbg:nth-of-type(odd), .bg.odd {
	background: #e8e8e8;
}

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

.windowbg_infocenter {
	box-shadow: none;
	padding: 10px;
	color: white;
}

/* 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: #fbe8e4;
}
/* Sticky topics get a different background */
.windowbg.sticky {
	background: #d6e6cf;
}
/* Locked AND sticky are a bit more technical */
.windowbg.sticky.locked {
	background: #f5fbe4;
}
/* 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 #aaa;
}

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: #222;
	background: #ffeaea;
}
.approvebg2 {
	color: #222;
	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) */
h3 .collapse {
	float: right;
	margin: 4px 4px 0 0;
}


.boardindex_table .board_icon {
	display: flex;
	justify-content: center;
	align-items: center;
	width: var(--width-boardindex-icons-cell-normal);
	padding: 0;
}
	/*Chembase board icons*/
#board_1 .board_icon a {
	content: var(--content_board_1_social);
}
#board_11 .board_icon a {
	width: calc(var(--width-boardindex-icons-normal) + 7px);
	content: var(--content_board_11_ng);
}
#board_2 .board_icon a {
	content: var(--content_board_2_music);
}
#board_3 .board_icon a {
	width: calc(var(--width-boardindex-icons-normal) + 6px);
	content: var(--content_board_3_live);
}
#board_4 .board_icon a {
	content: var(--content_board_4_question);
}
#board_5 .board_icon a {
	content: var(--content_board_5_archive);
}
#board_9 .board_icon a {
	content: var(--content_board_9_hq);
}
#board_10 .board_icon i:before { 
	content: "\f1f8";
}
#board_16 .board_icon a {
	content: var(--content_board_16_newforum);
}
#board_17 .board_icon a {
	content: var(--content_board_17_XD12);
	border-radius: 100%;
}

.board_icon a {
	display: inline-block;
	width: var(--width-boardindex-icons-normal);
	height: auto;
	padding: 0 10px;
}
.board_icon {
	text-align: center;
	padding: 8px 0 0 0;
	flex-shrink: 0;
	position: relative;
	min-height: calc(var(--width-boardindex-icons-cell-normal) - 30px);
}
@keyframes blink {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
.indicator {
	position: absolute;
	bottom: 0;
	left: 83%;
	width: var(--size-indicator_normal);
	height: var(--size-indicator_normal);
	background: orange;
	border-radius: 100%;
	opacity: 0;
	animation: blink 1.5s 1.7s 1 forwards;
	z-index: 2;
}
#modcenter .indicator {
	position: relative;
	left: 0;
	animation: blink_2 2s infinite;
}
@keyframes blink_2 {
	0% {opacity: 1;}
	50% {opacity: 0;}
	100% {opacity: 1;}
}

@keyframes new {
	0% {opacity: 1; transform: scale(1);}
	50% {opacity: 0; transform: scale(0.9);}
	100% {opacity: 1; transform: scale(1);}
}
.board_icon a.board_on {
	animation: new 1.7s 0.5s 1;
	animation-fill-mode: forwards;
}
.indicator.board_off {
	  display: none;
}
.boardindex_table .info {
	width: calc(55% - 80px);
	padding: 3px 10px 3px 10px;
	border-left: 4px solid #ca7a7a !important;
	margin-top: 0 !important;
	min-height: 65px;
}

.boardindex_table .board_stats {
	/* border-right: 1px solid #f75353;*/
	/* border-left: 1px solid #f75353;*/
	color: white;
	width: 12%;
	margin-top: 0 !important;
}

.boardindex_table .board_stats:last-child p {
	border-right: none;
}


.py-2_2 {
	padding: 0.6em;
	padding-left: 1em		
}

.info {
	overflow: hidden;
	overflow-wrap: break-word;
	padding: 10px;
	flex-grow: 1;
	flex-shrink: 1;
}

.info .subject {
	font-weight: 600;
	color: white;
	text-decoration: none;
	font-size: calc(19px + (28 - 19) * ((100vw - 320px) / (3840 - 320)));
	transition: 0.3s ease;
}

.info .subject:hover {
	color: rgb(255, 147, 142);
	}

.board_stats {
	  padding: 15px;
	  color: var(--color-txt-main);
	  margin-left: 10px;
	  margin-right: 20px;
	  width:15%;
	  word-break: break-word;
	  font-size: var(--font-size-txt-normal);
	  text-align: center;
	  flex-grow: 1;
}


.lastpost {
	width: 22%;
	font-size: var(--font-size-txt-normal);
	display: grid !important;
	grid-auto-flow: column;
	grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, auto);
	grid-gap: 5px;
	align-items: center;
	flex-grow: 3;
	flex-shrink: 1;
}
.lastpost a {
	color: var(--color-txt-sec);
}

.topic-item-content {
	width: auto;
	display: grid;
	justify-self: left;
}

.board_icon, .info, .board_stats, .lastpost {
	display: inline-block;
	align-self: center;
}
.main_container {
	margin-bottom: 20px;
}

.up_contain {
	display: flex;
	flex-wrap: wrap;
	background: linear-gradient(to right, transparent, transparent, transparent, rgba(147, 94, 94, 0.67)); 
	line-height: 1.3;
}

/* Child boards */

#subforum {
	margin-bottom: 25px;
}

.children {
	padding: 5px;
	width: 100%;
	color: white;
}
.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 */

#group_color {
	filter: brightness(1.4);
}
#group_color.strong {
	color: inherit;
}

#info_center {
	clear: both;
	margin: 20px 0 0 0;
	padding: 12px 0px;
	background: #31313196;
	border: 1px solid rgba(145,145,145,0.8);
	border-radius: 15px;
	box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.65);
	overflow: auto;
	border: none;
	position: relative;
}
#info_center::before {
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../images/Chems/Overlay/XBITE.webp) repeat;
	background-size: contain;
	z-index: -1;
}

#info_center .sub_bar {
	grid-column: 2;
	font-size: calc(11px + (16.5 - 11) * (100vw - 320px) / (3840 - 320));
}
#info_center .sub_bar a, #info_center .sub_bar h4 {
	  color: white;
	  margin-bottom: 10px;
}

.databox h4 {
	  padding: 0 !important;
}
#info_center .sub_bar:first-child {
	border-top: none;
}

#upshrink_stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, auto));
	grid-template-rows: repeat(auto-fit, minmax(0, auto));
	grid-gap: 35px 10px;
	padding: 12px 15px;
	line-height: 1.3;
}
#upshrink_stats a {
	height: fit-content;
	text-decoration: none;
}

.boardindex-events {
	grid-column: 1 / span 2;
	grid-row: 2;
	font-size: calc(12px + (15 - 12) * (100vw - 320px) / (3840 - 320));
}
.boardindex-events .windowbg {
	  padding: 0;
}
.boardindex-events .main_icons {
	  display: none;  
}
.users-online {
	  grid-column: 1;
	  grid-row: 1;
}
.users-online .windowbg {
	padding: 0;
}

.users-online .main_icons {
	display: none;
}

.users-online .databox-icon, #forum_stats .databox-icon, .boardindex-events .databox-icon {
	transition: 0.4s ease-in-out;
}
.databox-icon:hover {
	border-radius: 10px;
}
.databox:hover .databox-icon {
	background: rgb(202, 71, 71);  
}
.databox-icon i:before, .databox-icon:before {
	opacity: 0;
	transition: 0.5s ease;
}
.databox:hover :is(i, .databox-icon):before {
	opacity: 1;
}

#forum_stats h4 {
	padding: 0 !important;
}
#forum_stats {
	  grid-column: 2;
	  color: white;
}
.forum-stats-container {
	grid-row-gap: 10px !important;
	display: grid;
}
#forum_stats .main_icons {
	  display: none;  
}

.forum-stats-container .col-1 {
	padding-left: 0 !important; 
}
.sub_icon {
	grid-column: 1!important;
	grid-row: 1!important;
	padding: 0 !important;
	width: calc(17px + (20 - 17) * (100vw - 320px) / (3840 - 320))!important;
	align-self: flex-start;
}
.sub_icon .f-24 {
	font-size: calc(12px + (17 - 12) * (100vw - 320px) / (3840 - 320));
}
.sub_stats {
	grid-column: 2!important;
	grid-row: 1!important;
	padding: 0 !important;
	align-self: start !important;
}
#LatestMember a {
	font-weight: bold;
}
#LatestMember a:hover {
	color: #ff8022;
}
.forum-stats-container #Posts {
	grid-column: 1;
	grid-row: 1;
}
.forum-stats-container #LatestMember {
	grid-column: 2;
	grid-row: 1;
}
#forum_stats #Topics {
	grid-column: 1;
	grid-row: 2;
}
#forum_stats #Members {
	grid-column: 2;
	grid-row: 2;
}
#LatestPost{
	display: none;
	order: 5;
}
.databox-content .col-11 {
	  padding-left: 0 !important; 
}
.databox-title {
	font-weight: bold;
}
.recent-posts {
	  grid-column: 1 / span 2;
	  grid-row: 3;
}


/* makes active users bold */
.databox-text > a {
	font-weight: bold;
}
#upshrink_stats .grid-cols-1 {
	grid-template-columns: auto 1fr;	
}
/* makes text in infocenter white and no underline */
#upshrink_stats a, #upshrink_stats strong {
	color: white;
	text-decoration: none;
}
#upshrink_stats a:hover > strong, #upshrink_stats a:hover:not(.databox > a) {
	text-decoration: underline;
}
#upshrink_stats .windowbg, #upshrink .card {
	background: none;
	border: none;
	color: #fff;
	margin: 0 !important;
	box-shadow: none;
}


/* to remove margin from stats*/
.col-span-1 .card {
	margin-top: 0;
	background: none;
	grid-gap: 0;
	float: none;
}

.forum-stats-container .contacts-list {
	padding: 0;
}
/* 2 classes added to align items in "forumstats" differently */
.col-span-1 .forum-stats-container {
	align-items: center;
}
.databox-content span {
	float: none;
}



#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 #eaeaea;
	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: #555;
}
#ic_recentposts .windowbg {
	background: none;
}
#upshrink_stats p.inline {
	border: none;
	margin: 0;
	padding: 2px 0;
	line-height: 1.6em;
}
#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 */

 .message_index_title a {
	font-size: calc(16px + (21 - 16) * (100vw - 720px) / (3840 - 720));
	font-size: 1.37em;
	font-weight: bold;
	color: var(--color-txt-main);
	text-decoration: none;
	vertical-align: middle;
	transition: 0.1s ease;
}
.message_index_title a:hover {
	color: var(--bg-button-active-hover);
}
/* makes a black padding around topic index */
#messageindex {
	background: rgba(0,0,0,0.8);
}

.board_description {
	  color: #ff887b;
	  font-weight: 600;
	font-size: calc(12px + (16 - 12) * (100vw - 320px) / (3840 - 320));
	padding-top: 5px;
}

/*--- subboard icon in messageindex header ---*/
#subboard_icon {
	grid-column: 1;
	grid-row: 1 / span 2;
	width: var(--size-subboard-icon);
	height: var(--size-subboard-icon);
}

#subboard_icon.board_1 {
	content: var(--content_board_1_social);
	}
#subboard_icon.board_2 {
	content: var(--content_board_2_music);
	}
#subboard_icon.board_3 {
	content: var(--content_board_3_live);
	width: calc(65px + (90 - 65) * (100vw - 320px) / (3840 - 320));
	}
#subboard_icon.board_11 {
	content: var(--content_board_11_ng);
	}
#subboard_icon.board_4 {
	content: var(--content_board_4_question);
	}
#subboard_icon.board_9 {
	content: var(--content_board_9_hq);
	}
#subboard_icon.board_16 {
	content: var(--content_board_16_newforum);
	}
#subboard_icon.board_17 {
	content: var(--content_board_17_XD12);
	border-radius: 100%;
}

#description_board h3 {
	font-size: calc(24px + (42 - 24) * (100vw - 320px) / (3840 - 320));
	color: white;
  }
#board_descr {
	grid-column: 2;
	grid-row: 2;
	color: rgb(164, 227, 164);
	font-size: calc(14px + (20 - 14) * (100vw - 320px) / (3840 - 320));
}

#description_board, .filter_row {
	padding: 20px 8px;
	border-radius: 15px 15px 0 0;
	border-bottom: none;
	box-shadow: none;
	display: flex;
}

#description_board {
	display: grid !important;
	grid-template-rows: auto auto !important;
	grid-template-columns: auto 1fr;
	grid-column-gap: 10px;
	align-items: center;
	background-color: var(--bg-board-head);
	border: 0;
	border-bottom: 5px solid #f8f8f8f0 !important;
	margin: 0;
	width: 100%;
	background-image: url(../images/Chems/Overlay/Snowcaps6.svg);
	background-repeat: repeat-x;
	background-size: 196px;
	padding: 20px 15px;
}

#description_board h3, #description_board div {
	display: inline-block;
}

#description_board h3::after {
	content: "";
}
/* Topic list */

#topic_header a {
	color: white;
	padding: 0 5px 0 5px;
	font-size: var(--font-size-txt-normal);
}

#topic_header {
	margin: 0;
	border-radius: 0;
	display: flex;
	padding: 3px 0 3px 0;
}

#topic_header .lastpost {
	border: none;
	display: block !important;
	text-align: center;
}
#topic_header .board_icon {
	width: 65px !important;
	min-height: unset;
}

#topic_header div {
	font-weight: bold;
	font-size: 1em;
	padding: 0;
	color: #fff;
}
#topic_header input {
	margin-top: 5px !important;
}
#topic_container .windowbg {
	border: 1px solid rgba(0, 0, 0, 0.13);
	border-top: none;
	display: flex;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
	margin: 0;
	overflow: hidden;
}

/*remove topic title from lastpost*/
#topic_container .topic-item-title {
	display: none;	
}

#topic_container .board_icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(40px + (80 - 40) * (100vw - 320px) / (3840 - 320)) !important;
	padding: 0;
}

#topic_container .lastpost * {
	color: var(--color-txt-main);
}
#topic_container .topic-item-poster:before {
	color: var(--color-txt-main);
}


#topic_container .lastpost, #topic_container .board_stats {
	flex-shrink: 0;
}
.icon img, .moderation input {
	margin-top: 15px;
}

.moderation input {
	margin-top: 0;
}

.moderation {
	display: inline-block;
	width: 35px;
	flex-shrink: 0;
	vertical-align: middle;
	text-align: center;
	order: 3;
	align-self: center;
}
/* Quick moderation selects and submit */
#quick_actions {
	padding: 9px;  
}
/* Icons and jump to */

#icon_legend {
	display: grid;
	grid-template-columns: max-content max-content;
	grid-column-gap: 10px;
}
#icon_legend .main_icons {
	color: var(--color-icons-board);
}
#icon_legend span {
	display: grid;
	grid-template-columns: calc(var(--font-size-txt-normal) + 9px) auto;
	font-size: var(--font-size-txt-normal);
	grid-column-gap: 5px;
}

#topic_icons::before {
	display: block;
	height: 8px;
	clear: both;
	content: "";
}

#who_views {
	background: rgba(248,248,248,0.97);
	width: 100%;
	margin: 0;
	font-size: calc(12px + (15 - 12) * (100vw - 320px) / (3840 - 320));
	border-radius: 0;
}

#whos_online .selectbox {
  color: white;
}
#topic_icons .information {
	font-size: .9em;
	border-radius: 4px 4px 10px 10px;
}
#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 */

/* linked events grid */
#linked_events_body > ul {
	display: grid;
	grid-row-gap: 3px;
}
.linked_events_grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, auto));
	grid-column-gap: 8px;
	place-content: center start;
	align-items: center;
}
.event_date {
	grid-column-start: 5;
	font-size: calc(11px + (14 - 11) * (100vw - 320px) / (3840 - 320));
	min-width: calc(6em + (8 - 6) * (100vw - 320px) / (3840 - 320));
	text-align: end;
	align-self: flex-start;
	font-weight: 600;
	color: rgb(23, 109, 151);
}
.event_edit, .event_export {
	align-self: center;
	justify-self: center;
	transition: 0.2s ease;
}
.event_edit  {
	grid-column-start: 1;
}
.event_export {
	grid-column-start: 3;
}
:is(.event_edit, .event_export):hover {
	transform-origin: center;
	transform: scale(1.4);
}
.event_title {
	grid-column-start: 7;
	grid-row-start: 1;
}
.event_title + a {
 /*  margin-left: 1em;*/
}

/* On to the posts */
#forumposts {
	clear: both;
	border-color: rgba(0,0,0,0.5);
	background-color: rgba(0,0,0,0.5);
	border-radius: 0 0 10px 10px;
}
#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: 0.818em;
	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 */

.user_info .poster-name {
	margin: 0 0 3px 0;
	font-size: 0.93em;
}
	
.poster {
	width: calc(10rem + (50 - 10) * ((100vw - 320px) / (3840 - 320)));
	width: var(--width_poster);
	text-align: left;
	padding: 12px 10px 12px 13px;
	background: var(--bg-post-area-1);
}
.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: #c06002;
}

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

.poster .im_icons ol {
	justify-content: left;
	font-size: 1.3em;
}

/* The visible stuff below the avatar. */
.user_info, .user_info > li {
	margin: 3px 0 0 0;
	word-break: break-word;
	font-size: calc(var(--font-size-txt-normal) - 0.5px);
}
/*icons for member group*/
.user_info .icons img {
	width: 0.95em;
	margin-right: 1px;
}
/*hide poster IP address*/
.user_info .poster_ip {
	display: none;
}
.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: #c06002;
	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;
}

 .poster .avatar a {
	display: flex;
}

.avatar_mobile {
	  display: none;
}

img.avatar {
	object-fit: scale-down;
}
.poster img.avatar {
	max-width: 100%;	
}

.postarea {
	width: calc(100% - 12em);
	width: calc(100% - var(--width_poster));
	padding: 12px 16px 0 16px;
	display: flex;
	flex-direction: column;
	max-width: 100%;

}
.postarea div.flow_hidden {
	width: 100%;
}
.moderatorbar {
	clear: right;
}
.messageicon {
	display: inline-block;
}
.messageicon img, #iconList img {
	vertical-align: middle;
}

.postinfo .smalltext {
	font-size: calc(0.9em + (3 - 0.9) * ((100vw - 720px) / (3840 - 720)));
}

.keyinfo h5 {
	padding: 1px 0 5px 0;
	line-height: 1.5em;
	font-size: calc(1em + (3 - 1) * ((100vw - 720px) / (3840 - 720)));
	text-align: right;
}
h5 .messageicon {
	display: none;
}
.keyinfo h5::after {
	content: "";
	clear: right;
	display: block;
}
.keyinfo h5 a, .keyinfo h5 a strong {
	color: #606060;
}
.keyinfo h5 a.floatright {
	padding: 0 12px 0 0; /* Deprecated? */
}

.modified {
	text-align: end;
	font-style: italic;
	margin: 3px 0;
}

.keyinfo h5 .modified {
	color: #333;
	font-weight: normal;
	font-style: italic;
	padding: 2px 4px 0 4px;
}
.mvisible::before {
	content: "\00ab ";
}
.mvisible::after {
	content: " \00bb";
}
#reason::before {
	content: " - ";
}
.subject_title a {
	font-size: 0.9em;
	color: #333;
	font-weight: bold;
}
.subject_hidden a {
	display: none;
}
.page_number {
	color: #1c83c1;
	font-weight: bold;
	opacity: 0.9;
	margin-left: 10px;
	float: none;
}
.inner {
	padding: 7px 8px 2px 2px;
	margin: 0;
	border-top: 1px solid #d2d2d2;
	box-shadow: 0 1px 0 #fff inset;
	min-height: 85px;
	word-wrap: break-word; /* IE fallback */
	overflow-wrap: break-word;
}
img.smiley {
	vertical-align: bottom;
}
.attachments {
	padding: 12px 0 0 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.attached {
	padding: 0 6px 8px 6px;
	max-width: calc(150px + (350 - 150) * (100vw - 320px) / (3840 - 320));
	vertical-align: top;
}
.attachments_top {
	margin: 0 auto;
	text-align: center;
}
.attachments hr {
	clear: both;
	margin: 12px 0;
}

.attachments_bot {
	word-break: break-word;
	word-wrap: break-word;
}

/*audio attachment player*/
.bbc_audio {
	display: flex;
}

.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, .nextlinks a {
	text-transform: capitalize;
	font-size: var(--font-size-txt-normal);
	margin: -4px 0 0 0;
}
/* Styles for the quick reply area. */
#quickreply {
	clear: both;
	margin-top: 15px;
	background-color: none;
}
#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;
	border: 2px solid rgb(196, 196, 196);
	padding: 8px;
	border-radius: 10px;
	margin-top: 5px;
	background: #fdfdfd;
}
#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: #fdfdfd;
	border: 1px solid #aaa;
	border-left: 1px solid #bbb;
	border-top: none;
	border-radius: 0 0 4px 4px;
}
#post_draft_options .settings dd, #post_draft_options .settings dt {
	width: 50%;
	border-top: 1px solid #e4e4e4;
	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: #555;
}
#post_confirm_buttons {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
	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;
}

.signature {
	font-size: 0.95em;
}

/* 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: 7px 0 3px 0;
	border-top: 1px solid #d2d2d2;
	box-shadow: 0 1px 0 #fff inset;
	line-height: 1.4em;
	font-size: 1em;
}
.under_message {
	overflow: visible;
	border: none;
	box-shadow: none;
	padding: 8px 10px 8px 16px; 
	background: var(--bg-post-area-1);
}
/* Events */
.edit_event {
	margin: 0 10px;
	vertical-align: top;
}

/* ModerationButtons */
#moderationbuttons {
	  display: inline-flex;
	  flex-wrap: wrap;
	  justify-content: flex-start;
	  background: #000000c4;
	  padding: 0 9px 0 9px;
	  width: 100%;
}
.jump_to {
	color: white;
}

#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: #fbfbfb;
}
.errorfile_table .current {
	background: #fbc6c6;
}
.errorfile_table .file_line.current {
	background: #fb9090;
}
.errorfile_table .file_line {
	background: #ececec;
}

/* General Classes */
/* Cat_bar / catbg */
div.cat_bar {
	background: #2b1212e6;
	border-bottom: 7px solid #df5851;
	padding: 0;
	border-radius: 6px 6px 0 0;
	box-shadow: 0 16px 20px rgba(255, 255, 255, 0.15) inset;
	text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
}
.cat_bar h3 {
	padding: 8px 12px 6px 12px;
}

/* Styles for rounded headers. */
.cat_bar .desc {
	color: #fff;
	font-size: 12px;
	line-height: 1.5em;
	font-weight: normal;
	margin: -8px 0 4px 8px;
}
h3.catbg {
	overflow: hidden;
	font-size: calc(var(--font-size-txt-normal) + 2px);
}
h3.catbg, h3.catbg a, h3.catbg a:hover {
	color: white;
}
h3.catbg a:hover {
	text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.4);
	text-decoration: none;
}
h3.catbg .main_icons::before, h3.catbg .icon {
	vertical-align: middle;
	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: #f8f8f8;
	border: 1px solid #c5c5c5;
	border-radius: 7px;
	box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.1);
	overflow: auto;
}
/* TitleBar & SubBar */
.title_bar {
	border-bottom: 5px solid #e15d5d;
	background: #2f2a2a;
	border-radius: 2px 2px 0 0;
	margin: 0 auto;
	width: 100%;
	color: white;
}
.title_bar h4 {
	color: white !important;
}
.sub_bar {
	text-shadow: none;
	background: none;
	clear: both;
}
h3.titlebg, h4.titlebg, .titlebg, h3.subbg, h4.subbg, .subbg {
	background: none;
	color: #555;
	font-family: "Tahoma", sans-serif;
	font-weight: bold;
	overflow: hidden;
	padding: 6px 12px 5px 12px;
	text-shadow: none;
}
.titlebg a, .subbg a {
	background: none;
	color: #555;
	text-decoration: none;
	color: white;
}

#manage_boards .subbg a {
	  color: black;
	  text-decoration: underline;
}

.title_bar + .windowbg, .title_bar + .roundframe {
	margin-top: -1px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

/* Other */
/* Information */
.information {
	background: #f8f8f8;
	overflow: auto;
	padding-bottom: 0.5em;
	border: 1px solid #ddd;
	border-top: none;
	border-radius: 0 0 7px 7px;
	margin: 0 0 10px 0;
	padding: 8px 10px 8px 10px;
}
.generic_list_wrapper .information div {
	background: none;

}
.information a {
	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 #ddd;
}
.topic_pages {
	font-size: 0.75em;
}

.topic_pages::before {
  /* content: "\00ab ";*/
	margin-right: 2px;
}

.topic_pages::after {
  /* content: " \00bb"*/
}
/* Mentions */

.mention {
	 color: rgb(0, 91, 157) !important;
}
.atwho-view {
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	margin-top: 18px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 3px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
	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 #ddd;
	cursor: pointer;
}
.atwho-view small {
	font-size: smaller;
	color: #777;
	font-weight: normal;
}
/* On/Off Icons (User) */
.on, .off {
	display: inline-block;
	width: calc(11px + (14 - 11) * ((100vw - 320px) / (3840 - 320)));
	height: calc(11px + (14 - 11) * ((100vw - 320px) / (3840 - 320)));
	border-radius: 50%;
	border: 1px solid transparent;
	vertical-align: middle;
}
.on {
	background: #89e75a;
	border-color: #74d246;
}
.off {
	background: #a7a2a2;
	border-color: #969292;
}
#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 {
	background: url(../images/icons/profile_hd.png) 15px no-repeat;
	padding: 8px 0 8px 8px;
	Background: none;
}
h3.profile_hd::before, .main_icons.profile_hd::before {
	background: none;
	content: "\f2bd";
	font-family: "Font Awesome 6 Free";
	font-size: 19px;
	font-weight: 400;
	margin-right: 5px;
} 
 .profile_menu_icon .main_icons.members::before {
	background: none;
	content: "\f2bd";
	font-family: "Font Awesome 6 Free";
	font-weight: 900; 
}
.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 */

/*changed: removed:  .dropmenu li li:hover, .dropmenu li li:hover > a, .dropmenu li li a:focus, .dropmenu li li a:hover,  #search_form .button,*/
.dropmenu li ul, .top_menu, #top_section, .quickbuttons li, .quickbuttons li ul, .quickbuttons li ul li:hover, .quickbuttons ul li a:focus, #inner_section {
	background: #74886e; /* fallback for some browsers */
	background: linear-gradient(to right, rgb(130, 59, 52), rgb(168, 76, 67), rgb(217, 98, 87));  
	text-decoration: none;
	border: none;
}

.quickbuttons li {
	background: none;
	margin-top: 5px;
}

/* Well some of them has different gradient effect on hover */
.button:hover, #search_form .button:hover{
	background: var(--bg-button-hover);
	color: var(--color-button-hover);
	text-shadow: 1px 1px 2px #555;
 }

/* If it fits I sits... */
.popup_content {
	background: #fff;
	background-image: linear-gradient(to bottom, #fff 0%, #f1f3f5 95%);
}

/* Topic/Board follow-alert menu */

.notify_dropdown {
	max-width: 40em;
	transition: 1.5s ease;
}
.notify_dropdown .overview a, .notify_dropdown .overview a strong {
	color: white;
	transition: 0.3s ease;
}
.notify_dropdown .overview a:hover, .notify_dropdown .overview a:hover strong { 
	color: black !important;
	text-shadow: none !important;
}


.notify_dropdown strong {
	font-size: 1.1em;
}
.notify_dropdown a {
	display: block;
	padding: 0.5em;
}
.notify_dropdown a:hover {
	text-decoration: none;
	background: #eee;
}
.notify_dropdown span {
	font-size: 0.9em;
}

/* Some new stuff */
#display_head {
	clear: both;
	background: var(--bg-board-head);;
	border: 0;
	padding: 18px;
	border-radius: 15px 15px 0 0;
	margin: 0;
	border-bottom: 5px solid #f8f8f8f0 !important;
	background-image: url(../images/Chems/Overlay/Snowcaps5.svg) repeat-x;
	background-size: 250px;
}

#display_head :is(h2, p, strong, span) {
	color: #fff;
}

#display_head p {
	font-size: var(--font-size-txt-normal);
}

.display_title {
	font-weight: normal;
	margin-bottom: 0.25em;
	line-height: 1.05em;
	overflow-wrap: break-word;
	font-size: calc(27px + (36 - 27) * ((100vw - 720px) / (3840 - 720)));
}

#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: #f2f2f2;
}
.stripes:nth-of-type(odd) {
	background-color: #f0f4f7;
}
.alternative {
	background-color: #f2f2f2;
}
.alternative2 {
	background-color: #e8edf0;
}

.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: #d0e7f8;
	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;
}

video {
	max-width: 100%;
	height: auto;
}
/* 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;
}

/*seperate iframe class to fit video containers to div size as intermediate solution */
iframe {
	  display: flex;
	  margin: 0 auto;
	  width: 100%;
	  height: 100%;
	/* new CSS feature, don't know if it's widly supported */
	  aspect-ratio: 16/9;
	  overflow: hidden;
}
/*changed: added*/
.embedder_media {
	max-width: 60% !important;
	min-width: 0;
	position: relative !important;
}

/*instagram media*/
.instagram-media {
	display: flex !important;
	justify-content: center;
	min-width: 0 !important;
	max-width: 100% !important;
  /* aspect-ratio: 0;*/
	height: revert-layer;
	overflow: hidden;
}

/*changed*/
/*twitter media*/
 .twitter-tweet {
	max-width: 60% !important;
}

.videocontainer {
	position: relative;
	 overflow: hidden;
	  width: 100%;
	/*  padding-top: 56.25%; */
}


.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%;
	width: 100%;
	height: auto;
}

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

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

/*--- alternative position of social icons ---*/
#banner .forumtitle svg {
	 display: none;
}
#banner {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;	
	align-items: center;
	grid-row-gap: 5px;
	padding-top: 2px;
}

#welcome_cb {
	text-align: center;
	color: white;
	font-weight: 700 !important;
	font-size: calc(12px + (15 - 12) * (100vw - 320px) / (3840 - 320));
	padding: 5px;;
	width: 100%;
}
#social_nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	min-height: 26px;
	min-height: calc(var(--size-social-icon) + 5px);
	grid-column-gap: 20px;
	z-index: 10;
}
#HQ img, #HQ {
	border-radius: 5px;
}
#social_nav img, #social_nav svg {
	height: calc(16px + (25 - 16) * (100vw - 320px) / (3840 - 320));
	height: var(--size-social-icon);
	transition: all 0.2s ease;  
}
#social_nav a {
	display: flex;
	align-self: center;
	transition: transform 0.2s ease;  
	justify-content: center;
	margin: 5px;
	transform: translate(0%, 0%);
}
#social_nav svg:hover, #social_nav svg:focus, #social_nav img:hover, #social_nav img:focus {
	transform-origin: center;  
	transform: scale3d(1.5,1.5,1.5);  
} 
.social_svg {
	fill: var(--color-logo) !important;
	transition: 0.5s ease;
}
#officialHQ #hq_info {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	color: white;
	width: 11em;
	margin-top: 5px;
	line-height: 1.2;
	text-align: center;
	font-size: calc(var(--font-size-txt-normal) - 1px);
	font-weight: 600;
	transition: 0.8s ease;
}

#officialHQ:hover #hq_info {
	transform: translateY(100%);
	visibility: visible;
	opacity: 1;
}

#yt path {fill: #ffacac !important;}
#tw path {fill: #89d8ff !important;}
#insta path {fill: #ea8aea !important;}
#fb path {fill: #6bb3ff !important;}
#HQ path {fill: #ffc485 !important;}
#tt path {fill: #c083ff !important;}

#social_nav svg {
	transition: 0.5s ease;
	animation: light 3s linear infinite;
}
@keyframes light {
	0% {filter: hue-rotate(0deg) saturate(1);}
	100% {filter: hue-rotate(360deg) saturate(1.7);}
}

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


.p-navSticky {
/*blocked*/
/*	position: -webkit-sticky;*/
/*	position: sticky; */
/*	top: 0; */
}

.p-nav {
  /* background: #00000080;*/
	background: #1a1a1af2;
	position: relative;
	z-index: 99;
}
.p-nav::before {
	position: absolute;
	content: '';
	background: url(../images/Chems/Overlay/XBITE.webp);
	background-size: contain;
	top: 0;
	right: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	opacity: 0.4;
}
.p-navSticky {
	z-index: 100;
}
.p-navSticky.is-sticky {
	z-index: 400;
	background: #fefefe;
	box-shadow: 0 0 8px 3px rgb(0 0 0 / 3%);
}
.inner_wrap {
	width: 100%;
	padding: 0 10px 0 10px;
	display: flex;
	align-items: center;
	color: #3b3b3b;
	align-items: flex-end;
	position: relative;
}

.inner_wrap::before {
	background: url(../images/Chems/Overlay/Snowcaps.svg) top repeat-x;
	background-size: auto;
	background-size: 100px;
	transform: rotatex(180deg);
	position: absolute;
	top: 5px;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	content: '';
}

.p-header-logo {
	vertical-align: middle;
	margin-right: auto;
	width: fit-content;
	align-self: center;
	flex-shrink: 2;
}

.header-proxy {
	min-height: 10px;
	margin-bottom: 25px;
	line-height: 1.1;
}

.header-proxy-inner {
	display: flex;
	padding: 7px;
	margin: 0 auto;
	height: fit-content;
	text-align: center;
	justify-content: center;
	/* box-shadow: 0 2px 13px -7px black; */
/*	-webkit-backdrop-filter: blur(3px); */
	/*backdrop-filter: blur(3px);*/
	background-image: url(../images/Chems/Overlay/Icicles4.svg);
	background-color: rgba(0,0,0,0);
	background-size: 136px;
	background-repeat: repeat-x;
}

.p-body-header {
	/* margin-bottom: 10px;*/
}

.p-title {
	display: flex;
	flex-wrap: wrap;
}

.header-proxy .p-title-value {
	color: #0e4c71;
	text-shadow: 0px 2px 2px #ccc;
	font-weight: bold;
}

/* Slogan text*/

.p-title-value {	
	padding: 0;
	font-size: calc(18px + (24 - 18) * ((100vw - 720px) / (3840 - 720)));
	font-weight: 400;
	min-width: 0;
	padding: 5px;
}
#slogan_random {
	display: inline-block;
	will-change: transform, opacity;
	animation: blur 2s cubic-bezier(.43,-.38,.09,.91);
	text-shadow: 0 0 10px #fff;
	background: #ffffffb2;
	border-radius: 10px;
	padding: 2px;
}
@keyframes blur {
	0%	{filter: blur(5px); opacity: 0; transform: scale3d(1.3,1.3,1.3) } 
	100%	{filter: blur(0px); opacity: 1; transform: scale3d(1,1,1) }
}

.p-body {
	flex-grow: 1;
}


.p-body {
	display: flex;
	align-items: stretch;
	min-height: 1px;
}

.p-body-inner {
	padding-left: max(10px, env(safe-area-inset-left));
	padding-right: max(10px, env(safe-area-inset-right));
}
.p-body-inner {
	max-width: 1200px;
	padding: 0 10px;
	margin: 0 auto;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
	padding-bottom: 20px;
}
.p-body-inner {	
	display: flex;
	flex-direction: column;
	width: 100%;
}
/* divider between boardindexes */
.divide-gray-200>:not([hidden])~:not([hidden]) {
	--tw-divide-opacity: 1;
	border-color: black;
}
.main_icons_home:before {
	content: "\f3c5";
	width: 1.28571429em;
	display: inline-block;
	text-align: center;
	font-size: 12px;
	margin-right: .5em;
	
}
.main_icons_home:before {
	font-family: "Font Awesome 6 Free";
	font-size: inherit;
	font-style: normal;
	font-weight: 900;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 90%;
	color: #f6d76d;	
}
.card {
	position: relative;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	width: 100%;
	word-wrap: break-word;
	background-color: #606060a1;
	background-clip: border-box;
	border: 1px solid rgb(0 0 0 / 10%);
	border-radius: 1.3rem;
	margin-top: 12px;
	float: left;
	color: white;
}
.contacts-list {
	padding: .3rem;
	list-style: none;
}

#recent_posts_content .friends {
	display: flex;
	height: 100%;
	flex-grow: 1;
	-ms-overflow-style: none;
	scrollbar-width: none;
	overflow-y: auto;
	overflow-x: hidden;
}
.contacts-list .contacts-item {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto;
	grid-gap: 10px;
	align-items: center;
	max-width: 100%;
	padding: 0;
	transition: all .3s ease;
	color: inherit;
}
	
.topic-item-poster {
	order: 1;
	text-overflow: ellipsis;
	overflow: hidden;
}
.topic-item-poster::before {
	content: 'By ';
	color: white;
	font-weight: bold;
}

.topic-item-poster-avatar {
	height: 2rem;
	width: 2rem;
	min-width: 2rem;
	display: inline-block;
	position: relative;
	border-radius: 50%;
	box-shadow: 0 0 1px 1px rgb(0 0 0 / 10%);
}
.topic-item-poster-avatar .avatar {
	 width: 100%;
	 height: 100%;
	 border-radius: 50%;
	 -o-object-fit: cover;
	 object-fit: cover;
	 display: flex;
	 align-items: center;
	 justify-content: center;
}
.contacts-list .contacts-content {
	 padding-left: .875rem;
	 transition: all .4s;
	 overflow: hidden;
	 max-width: 100%;
	 flex: 1 1 auto;
}
.contacts-content .contacts-info {
	 display: flex;
	 justify-content: space-between;
	 align-items: center;
	 margin-bottom: .075rem;
}
.contacts-list .contacts-content .contacts-texts {
	 position: relative;
	 display: flex;
	 align-items: center;
	 justify-content: space-between;
	 color: #adb5bd;
}
.forum-stats-container .states {
	 list-style: none;
}
.col-1 {
	 flex: 0 0 auto;
	 width: 8.3333333333%;
}
.col-11 {
	 flex: 0 0 auto;
	 width: 91.6666666667%;
}
.text-center {
	 text-align: center;
}
/*blocked*/
/*.bg-c-green {
	 background-color: #99b093;
	 width: 35px;
	 height:35px;
	 border-radius: 100%;
	 margin-right: 3px;
}*/

.mat-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	color: #fff;
}

.f-24 {
	font-size: 17px;
}

.databox--statistic {
	align-items: center;
	background: transparent;
	box-shadow: none;
}

.databox {
	display: flex;
	flex-wrap: wrap;
	border: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: repeat(auto-fill, minmax(0, auto));
}
.p-footer-inner {
	padding-left: max(10px, env(safe-area-inset-left));
	padding-right: max(10px, env(safe-area-inset-right));
}
.p-footer-inner {
	max-width: 65vw;
	padding: 6px 10px 10px 10px;
	margin: 0 auto;
	display: grid;
grid-template-columns: auto 1fr;
grid-column-gap: 40px;
align-items: baseline;
}

.databox--statistic {
	 align-items: center;
	 background: transparent;
	 box-shadow: none;
}

/*blocked*/
/*.databox--statistic .databox-icon  {
	 height: 3.5rem;
	 border-radius: 100%;
}
*/
.databox-icon {
	display: flex;
	align-items: center;
	width: calc(3rem + (25 - 3) * (100vw - 320px) / (3840 - 320));
	height: calc(3rem + (25 - 3) * (100vw - 320px) / (3840 - 320));
	font-size: calc(15px + (25 - 15) * (100vw - 320px) / (3840 - 320));
	justify-content: center;
	background: url(../images/Chems/Overlay/ChristmasBall.png) no-repeat;
	background-size: cover;
	margin-right: 15px;
	grid-column: 1;
	grid-row: 2;
	align-self: start;
	border-radius: 100%;
	 transition: 0.3s ease;
	color: #fff;
}

.databox > a {
	align-self: start;
}

.databox-icon .icon {
	 margin: 0;
}
.databox-icon i {
	 display: inline-flex;
	 justify-content: center;
	 align-items: center;
}
.databox-content {
	 flex-grow: 1;
	 width: fit-content;
	 grid-column: 2;
	 grid-row: 2;
	 font-size: var(--font-size-txt-normal);
	 align-self: start;
}
.dropmenu li a i {
	 position: relative;
	 top: 0;
	 font-size: 14px;
	 font-size: 1.3em;
  /*  margin-right: 5px; */
	 min-width: 32px;
	 text-align: center;
}
.item-icon i {
	 font-size: 19px;
	 color: white;
}

#alerts_menu_top, #pm_menu_top {
	display: flex !important;
	align-items: center;
	right: 80%;
	padding: 0 8px 0 0 !important;
	transition: all 0.2s ease;
	transform: translate(0%, 0%);
}
.fa-envelope, .fa-bell {
	transition: 0.2s ease;
}
#pm_menu_top:hover .fa-envelope, #alerts_menu_top:hover .fa-bell {
	transform-origin: center;
	transform: scale(1.2);
}

#top_info .top_menu.visible {
	 display: block;
	 border-radius: 0 0 20px 20px;
	 margin-top: 10px;
}
.top_menu {
	 right: 0;
	/* left: 0;*/
}
.rbtn {
	 background: #fff;
	 font-weight: 600;
	 position: relative;
}
.rbtn:before {
	 content: "";
	 width: 20px;
	 height: 100%;
	 position: absolute;
	 top: 0;
	 left: 0;
	 background: #f6d76d;
	 border-top-left-radius: 2px;
	 border-bottom-left-radius: 2px;
	 transition: all .3s ease;
}
.rbtn span:first-child {
	 display: block;
	 float: left;
	 z-index: 2;
	 position: relative;
	 width: 20px;
	 color: #7750f8!important;
	 text-align: center;
	 font-size: 8px;
}
.rbtn span:last-child {
	 padding: 0 6px;
	 z-index: 2;
	 position: relative;
}
.rbtn:hover:before {
	 width: 100%;
	 border-top-right-radius: 2px;
	 border-bottom-right-radius: 2px;
}
.rbtn:hover {
	 color: #fff!important;
}
.node-extra-icon {
	 padding: 10px;
	 float: right;
	 border-radius: 100%;
	 order: 2;
	 justify-self: center;
}

.node-extra-icon a {
	  display: block;
	  height: auto;
	  width: auto;
}

#boardindex_table .lastpost .node-extra-icon {
	margin-right: 2em;
}
#boardindex_table .lastpost .node-extra-icon .avatar {
	background: none;
}

@keyframes icon {
	0% {transform: scale(0);opacity: 0%;filter: brightness(0%);}
	70% {filter: brightness(100%);}
	80% {filter: brightness(140%);}
	100% {transform: scale(1);}
 }

.node-extra-icon .avatar {
	 width: var(--circle-avatar-normal);
	 height: var(--circle-avatar-normal);
	 font-size: 22px;
	/* "fill" will stretch/ "cover" will fit to icon size*/
	object-fit: fill;
	border: 1px solid #9f9f9fa8;
	border-radius: 100%;
	background: #fdfdfd;
	animation: icon 1.5s ease; 
	transition: 0.3s ease;
}
.node-extra-icon .avatar:hover {
	transform-origin: center;
	transform: scale(1.1);
	filter: drop-shadow(0 0 5px grey) brightness(120%);	
	cursor: pointer;
	background: #888;
}

.avatar_message {
	display: inline-flex;
	 justify-content: center;
	 align-items: center;
	 border-radius: 8px;
	 vertical-align: top;
	 overflow: hidden;
}
img.avatar {
	 display: inline-flex;
	 justify-content: center;
	 align-items: center;
	 border-radius: 5px;
	 vertical-align: top;
	 overflow: hidden;
}

.topic-item-details {
	flex-wrap: wrap;
	align-items: center;
	color: #fff;
	display: grid;

}

.topic-item-details strong {
	color: white;
}
/*changed blocked margins*/
.topic-item-details > * {
	 /*margin-inline-start: 3px;*/
/*	 margin-inline-end: 3px;*/

}

.up_contain .board_icon i {
	font-size: 3em;
	font-weight: bold;
	color: #fff;
	opacity: 0.8;
	border-radius: 10px;
	width: 100%;
}

.board_icon i {
	 display: block;
	 line-height: 1.125;
	 font-size: 32px;
}

#topic_container .lastpost {
	 width: 22%;
}
.info {
	 width: 50%;
}
.topic-list-area .lastpost {
	 width: 30%;
}
.postblock {
	 background-color: #f8f8f8;
	 box-shadow: 0 0 40px 0 rgb(0 0 0 / 6%);
	 border-bottom: 9px solid #555;
}
.post_wrapper {
	 display: flex;
	 flex-wrap: wrap;
}
.poster ul ul, .poster ul ol, .poster ol ul, .poster ol ol {
	 display: flex;
	 flex-wrap: wrap;
	 align-items: center;
	 justify-content: center;
}
.unread_notify .main_icons::before {
	color: #fff;
}
.reply_pm {
	font-size: 1.15em;
}

#search_form {
	width: 100%;
	padding: 5px 9px;
	text-align: right;
	background: var(--bg-board-head);
}

.user_info i, #basicinfo i {
	transition: 0.3s ease;
}
.user_info {
	display: flex;
	flex-direction: column;
	& .im_icons {
		order: 3;
	}
}
.user_info .im_icons i, #basicinfo i {
		&.fa-facebook:hover {
		color: #0072ea;
	}
		&:is(.fa-twitter, .fa-skype):hover {
		color: #00a3d7;
	}
		&:is(.fa-threads,.fa-instagram):hover {
		color: #ff2f53;
	}
		&.fa-youtube:hover {
		color: #ff6464;
	}
		&.fa-tiktok:hover {
		color: #990a9d;
	}
}

#splayer iframe {
	width: 50%;
	aspect-ratio: 2;
	background: #0000003d;
	box-shadow: 0 0 4px 8px black;
	border-radius: 15px;
}

@media (min-width: 520px) and (max-width: 1080px) {
	#splayer iframe {
		width: 75% !important;
	}
}
.windowbg .member {
	font-weight: 900;
}
.logged_out .button_discord {
  display: none;
}

/*Xmas music*/
/*#######################################################*/
#playerbox {
	background: url(https://forum.thechembase.com/Themes/The_Chembase_Theme_2.0_Xmas/images/Chems/Fanart4.webp);
	background-size: auto;
	background-size: cover;
	width: 38%;
	aspect-ratio: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto 12px auto;
	box-shadow: 0 0 13px 0px black;
	border-radius: 9px;
	padding: 5px;
	position: relative;
}
#splayer iframe {
	box-shadow: 0 0 12px 1px black!important;
}
#splayer {
	width: 80%;
	  align-self: flex-end;
	  height: 150px;
	position: relative;
}

@media (max-width: 500px) {

	#playerbox, #splayer iframe, #splayer {
		width: 100% !important;
	}
}
@media (min-width: 501px) {

	#playerbox {
		width: 50% !important;
	}

	#splayer, #splayer iframe {
		width: 80% !important;
		
	}
}

@media (min-width: 1000px) {

	#playerbox {
		width: 35% !important;
	}

}

.header-proxy {margin: 0;}

#artist {
	scale: 0;
	opacity: 0;
	transition: 0.8s ease;
	max-width: 80%;
	position: absolute;
	background: #393939d6;
	 color: white;
	  font-size: 1.2em;
	  padding: 8px;
	border-radius: 6px;
	& p {text-align: center;}
	& a {display: flex;justify-content: center;align-items: center;text-decoration: none;}
}

#playerbox:hover #artist {
	scale: 1;
	opacity: 1;
}
/*#########################################################*/

.centertext .inline_block {
	display: block;
}

body .more-snow {
  &:before,
  &:after {
	 content: "";
	 position: fixed;
	 top: -3000%;
	 bottom: 0;
	 right: 0;
	 left: 0;
	 background-color: rgba(black, 0.01);
	 background-image: url(http://www.freepngimg.com/download/winter_snow/4-2-white-snow-png.png);
	 background-size: 80%;
	 -webkit-animation-name: MOVE-BG;
	 -webkit-animation-duration: 500s;
	 -webkit-animation-timing-function: linear;
	 -webkit-animation-iteration-count: infinite;
  }
}
 .more-snow {
  &:before {
	 filter: blur(6px);
	 opacity: 0.8;
  }
  &:after {
	 filter: blur(1px);
	 top: -1500%;
	 background-image: url(http://www.freepngimg.com/download/winter_snow/4-2-white-snow-png.png);
	 background-size: 50%;
	 animation-duration: 200s;
  }
}
body .more-snow {
  &:before {
	 filter: blur(1px);
	 opacity: 0.9;
	 top: -2500%;
	 background-size: 50%;
	 animation-duration: 400s;
	 z-index: -1;
  }
  &:after {
	 filter: blur(2px);
	 opacity: 0.8;
	 top: -2000%;
	 background-image: url(https://laviwebfiles.com/stage/codepen/4-2-white-snow-png.png);
	 background-size: 35%;
	 animation-duration: 300s;
	/* position: absolute; */
	 display: block;
	 z-index: -1;
  }
}

@-webkit-keyframes MOVE-BG {
  from {
	 transform: translateY(0);
  }
  to {
	 transform: translateY(70%);
  }
}

.more-snow {
	position: absolute;
	z-index: -1;
}
@media (max-width: 720px) {
body .more-snow {
	&::after {background-size: 100%;}
 &::before {background-size: 100%;}
}
}