@font-face {
    font-family: 'SZ Menu';
    src: url('../fonts/SZMenu-BRLNSDB.woff2') format('woff2'),
         url('../fonts/SZMenu-BRLNSDB.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Red Hat Text';
    src: url('../fonts/RedHatText-Light.woff2') format('woff2'),
         url('../fonts/RedHatText-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Red Hat Text';
    src: url('../fonts/RedHatText-Lig.woff2') format('woff2'),
         url('../fonts/RedHatText-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Red Hat Text';
    src: url('../fonts/RedHatText-Regular.woff2') format('woff2'),
         url('../fonts/RedHatText-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Red Hat Text';
    src: url('../fonts/RedHatText-Italic.woff2') format('woff2'),
         url('../fonts/RedHatText-Italic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Red Hat Text';
    src: url('../fonts/RedHatText-Medium.woff2') format('woff2'),
         url('../fonts/RedHatText-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Red Hat Text';
    src: url('../fonts/RedHatText-MediumItalic.woff2') format('woff2'),
         url('../fonts/RedHatText-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Red Hat Text';
    src: url('../fonts/RedHatText-SemiBold.woff2') format('woff2'),
         url('../fonts/RedHatText-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Red Hat Text';
    src: url('../fonts/RedHatText-SemiBoldItalic.woff2') format('woff2'),
         url('../fonts/RedHatText-SemiBoldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Red Hat Text';
    src: url('../fonts/RedHatText-Bold.woff2') format('woff2'),
         url('../fonts/RedHatText-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Red Hat Text';
    src: url('../fonts/RedHatText-BoldItalic.woff2') format('woff2'),
         url('../fonts/RedHatText-BoldItalic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}


/* You can find detailed information at https://wiki.simplemachines.org/smf/Curve2_CSS
/* Index */
html {
	background: #263468;
	scroll-padding-top: 3rem;
}

body {
  position: relative;
  font-family: 'Red Hat Text', sans-serif;
  color: #4d4d4d;
  min-height: 100vh;
}

body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(https://soniczone.net/forum/Themes/default/images/bgcheckermed.png) repeat;
  background-size: auto;
  z-index: -1;
  animation: diagonal 300s linear infinite;
  animation-delay: var(--sz-diagonal-offset, 0s);
}

body::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top right, #502a6b, #252e60, #502a6b);
  background-size: 200% 200%;
  animation: gradient 130s ease infinite;
  animation-delay: var(--sz-gradient-offset, 0s);
  z-index: -2;
}

@keyframes diagonal {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 100%;
  }
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes sz-subboard-bg {
  0% {
    background: linear-gradient(#ffffff, #f4f4f7);
  }
  25% {
    background: linear-gradient(#ffffff, #f1f2ff);
  }
  50% {
    background: linear-gradient(#ffffff, #f4efff);
  }
  75% {
    background: linear-gradient(#ffffff, #f1f2ff);
  }
  100% {
    background: linear-gradient(#ffffff, #f4f4f7);
  }
}

@keyframes sz-subboard-text {
  0% {
    color: #070072;
  }
  50% {
    color: #2a0072;
  }
  100% {
    color: #070072;
  }
}

@keyframes sz-subboard-bg-current {
  0% {
    background: linear-gradient(#dadfff, #b6c1ff);
  }
  50% {
    background: linear-gradient(#e6ddff, #c3afff);
  }
  100% {
    background: linear-gradient(#dadfff, #b6c1ff);
  }
}

@keyframes sz-subboard-text-current {
  0% {
    color: #05005d;
  }
  50% {
    color: #2a0072;
  }
  100% {
    color: #05005d;
  }
}







/*../images/bgchecker.png*/

::selection {
	text-shadow: none;
	background: #99c2ff;
	color: rgba(0, 0, 0, 0.6);
}
/* General reset */
* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}
ul, ol {
	list-style: none;
}
ul.normallist {
	list-style-type: disc;
	padding: 0 0 0 15px;
}
table {
	empty-cells: show;
}
abbr {
	border-bottom: 0.1em dotted;
}
input, button, select, textarea {
	color: #222;
	font: 83.33%/150% "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: 1px;
	/*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;
}
input:focus, textarea:focus, button:focus, select:focus {
	outline: none;
	border-color: #7f96d8;
	background: #fff;
}
input, button, select {
	padding: 0 0.4em;
	height: 2em;
	line-height: 2em;
}
select {
	padding: 0.22em 0.2em; /* selects don't apply line-height */
}
/* Selects with more than one line */
select[size] {
	height: auto;
}
input[type="file"] {
	padding: 2px;
	height: auto;
}
/* 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;
}

/* Search area at top of the page */

#top_section img {

    padding-top: 6px;
    width: 50px;
    height: 50px;
}

#top_section input, textarea {

    color: #FFF;
    background: #FFFFFF;
    border: 1px solid #636363;
}

#top_section input:hover, textarea:hover, button:hover {

    outline: none;
    border-color: #979797;
}

#top_section input:focus, textarea:focus, button:focus {

    outline: none;
    border-color: #b4b4b4;
    background: #FFFFFF;
}

#top_section input.button {

    outline: none;
    border-color: #959595;
    background: #565656;
    border-radius: 1px;
    box-shadow: none;
    margin-left: 4px;
    height: 24px;
}

#top_section input.button: hover {

    background: #FFFFFF;
    color: #fff;
}

select #top_section {

    display: none;
}

/* 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: 0.75rem;
}
/* Number inputs don't support size nor width, so add some common ones here and set a default... */
input[type="number"] {
	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: #192a49;
	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: 500;
	color: #4763c1;
}
.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 #bbb inset;
}
/* Main menu buttons - This is about links.*/
a, a:visited {
	color: #1949a0;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
	cursor: pointer;
}

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

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

/* The "new" button */
.new_posts, a.new_posts {
	display: none; /*inline-block;*/
	position: relative;
	top: -2px;
	padding: 0 4px;
	background: linear-gradient(#3e1d72,#3e1d72);
	color: #fff;
	font: 9px/15px verdana, sans-serif;
	border-radius: 2px;
	opacity: 0.5;
}
a.new_posts:visited {
	color: #fff;
}
.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 {
	margin: 0 auto;
	text-align: center;
}
.righttext {
	margin-left: auto;
	margin-right: 0;
	text-align: right;
}
.lefttext {
	margin-left: 0;
	margin-right: auto;
	text-align: left;
}
.justifytext {
	text-align: justify;
}
.double_height {
	line-height: 2em;
}
/* some common padding styles */
.padding {
	padding: 8px;
}
.main_section, .lower_padding {
	padding-bottom: 6px;
}
.half_content {
	width: 50%;
	display: inline-block;
	vertical-align: top;
}
.half_content:nth-of-type(odd) {
	margin-right: -0.25em;
}
.half_content:nth-of-type(even) {
	margin-left: -0.2em;
	padding-left: 0.3%;
}

/* Blockquote stylings */
blockquote {
	margin: 0 0 8px 0;
	padding: 6px 10px;
	font-size: 0.85rem;
	border: 1px solid #d6dfe2;
	border-left: 2px solid #aaa;
	border-right: 2px solid #aaa;
}

/* SZ 2025-12-05 — Signature-only quote styling (no animated border) */
#forumposts .signature blockquote,
#forumposts .signature .bbc_standard_quote {
  background: linear-gradient(#e0e0e0, #cacaca) !important;
  border: 2px solid #b0b0b0 !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14) !important;
  animation: none !important;
}

blockquote cite {
	display: block;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	font-size: 0.9em;
	margin-bottom: 3px;
}
blockquote cite::before {
	color: #aaa;
	font-size: 22px;
	font-style: normal;
	content: "\275D";
	margin-right: 3px;
	vertical-align: middle;
}

/* SZ 2025-12-05 — Signature quote header override */
#forumposts .signature blockquote > cite {
  background: transparent !important;
  color: #555555 !important;
  border-bottom: none !important;
}

.bbc_standard_quote {
	background-color: #e0e6f6;
}
.bbc_alternate_quote {
	background-color: #ebf4f8;
}

/* 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 #b3b3b3;
}
.bbc_size {
	line-height: 1.4em;
	font-weight: 500 !important;

}
.bbc_color a {
	color: inherit;
}
.bbc_table {
	font: inherit;
	color: inherit;
}
.bbc_table td {
	font: inherit;
	color: inherit;
	vertical-align: top;
}
.bbc_list {
	text-align: left;
	padding: 0 0 0 35px;
	list-style-type: inherit;
}
.bbc_float {
	margin-bottom: 1em;
	/* default max-width to use if none was specified in the BBC */
	max-width: 45%;
}
.bbc_float.floatleft {
	margin-right: 1em;
	clear: left;
}
.bbc_float.floatright {
	margin-left: 1em;
	clear: right;
}
.bbc_img {
	object-fit: contain;
}
.postarea .bbc_img.resized:hover {
	cursor: pointer;
}
.bbc_img.original_size {
	height: auto !important;
	width: auto !important;
	max-height: none;
	max-width: 100%;
}
/* No image should have a border when linked. */
a img {
	border: 0;
}

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

.toggle_up:hover:before, .toggle_down:hover:before {
	background-color: #bfd4e7;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) inset;
	transition: background-color 0.25s;
}

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

/* Highlighted text - such as search results. */
.highlight {

    font-weight: bold;
    color: #ff7200 !important;
    font-size: 1.1em;
    background-color: inherit;
}

/* the page navigation area */
.pagesection {
	padding: 2px 0;
	overflow: hidden;
	clear: both;
}
.pagesection .pagelinks {
	display: inline-block;
	float: left;
}
.pages::after, .jump_to::after, .code::after,
strong[id^='child_list_']::after {
	content: ": ";
}
.pages {
	font-size: 0.9em;
	margin-left: 7px;

	display: none !important;
}

#main_content_section .pagesection {
	margin: 4px 0 0 0;
}
.pagelinks .button {
	padding: 0 5px;
}



/* SZ 2025-11-30 — Viewing row pagination visibility (Desktop vs Tablet/Mobile) */
.sz_viewing_pagesection {
    display: none;
}

@media screen and (min-width: 720px) {
    #display_head {
        position: relative;
    }
    #display_head .sz_topic_viewing {
        position: absolute;
        top: 22px;
        right: 24px;
        margin: 0;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        max-width: 260px;
        text-align: right;
    }
    #display_head .sz_viewing_pagesection {
        display: block;
        float: right;
        margin: 0;
    }
    #display_head::after {
        content: "";
        display: block;
        clear: both;
    }
}
/* SZ 2025-11-30 — Desktop-only: hide duplicate top-row pagelinks in actions bar */
@media screen and (min-width: 720px) {
    /* Hide bottom topic pagination on Desktop + Tablet (keep Mobile) */
    #main_content_section #forumposts ~ .pagesection .pagelinks {
        display: none !important;
    }
}
/* SZ 2025-11-30 — Pagination buttons (numbers + ellipsis) */
/* SZ 2025-11-30 — Board pages: hide bottom action buttons (all sizes) */
#main_content_section .pagesection:has(#bot) .buttonlist {
    display: none !important;
}


/* SZ 2025-11-30 — Style the raw SMF "..." pagination span as a pill */
.pagesection .pagelinks > span:not([class]) {
    display: inline-block;
    padding: 3px 8px;
    margin: 0 2px;
    background: linear-gradient(#f2f2f2, #e3e3e3);
    border: 1px solid #bfbfbf;
    border-radius: 4px;
    color: #333;
    font-size: 0.8rem;
    line-height: 1.6rem;
    cursor: pointer;
}

.pagesection .pagelinks > span:not([class]):hover {
    background: linear-gradient(#f7f7f7, #eaeaea);
    color: #111;
}


.pagesection .pagelinks .nav_page,
.pagesection .pagelinks .expand_pages,
.pagesection .pagelinks .current_page {
   display: inline-block;
   padding: 3px 8px;
   margin: 0 2px;
   background: linear-gradient(#ffffff, #e7e7e7);
   border: 1px solid #bfbfbf;
   border-radius: 4px;
   color: #4f4f4f;
   font-size: 0.8rem;
   line-height: 1.6rem;
   text-decoration: none;
   text-transform: none;
   cursor: default;
   transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
}

/* SZ 2025-12-05 — Pagination: only clickable pages show pointer cursor */
.pagesection .pagelinks .nav_page,
.pagesection .pagelinks .expand_pages {
   cursor: pointer;
}


/* Hover state */
.pagesection .pagelinks .nav_page:hover,
.pagesection .pagelinks .expand_pages:hover {
   background: linear-gradient(90deg, #ffffff, #f5f5f5, #e7e7e7);
   background-size: 200% 100%;
   animation: sz_pill_shine 0.65s linear;
   color: #111;
}


/* Current page — slightly darker neutral gray */
.pagesection .pagelinks .current_page {
	background: linear-gradient(#d8d8d8, #c2c2c2);
	border-color: #969696;
	color: #000000;
	font-weight: 600;
}

/* Remove old square bracket styling around current page */
.current_page::before,
.current_page::after {
	content: "";
}

/* Keep brackets only around codeoperation items */
.codeoperation::before {
	content: "[";
}
.codeoperation::after {
	content: "]";
}



/* SZ 2025-11-30 — Viewing row pagination styling (Desktop reuse of main pagesection styles) */
@media screen and (min-width: 720px) {
    .sz_viewing_pagesection .pagelinks > span:not([class]) {
        display: inline-block;
        padding: 3px 8px;
        margin: 0 2px;
        background: linear-gradient(#f2f2f2, #e3e3e3);
        border: 1px solid #bfbfbf;
        border-radius: 4px;
        color: #333;
        font-size: 0.8rem;
        line-height: 1.6rem;
        cursor: pointer;
    }

    .sz_viewing_pagesection .pagelinks > span:not([class]):hover {
        background: linear-gradient(#f7f7f7, #eaeaea);
        color: #111;
    }

    .sz_viewing_pagesection .pagelinks .nav_page,
    .sz_viewing_pagesection .pagelinks .expand_pages,
    .sz_viewing_pagesection .pagelinks .current_page {
        display: inline-block;
        padding: 3px 8px;
        margin: 0 2px;
        background: linear-gradient(#ffffff, #e7e7e7);
        border: 1px solid #bfbfbf;
        border-radius: 4px;
        color: #4f4f4f;
        font-size: 0.8rem;
        line-height: 1.6rem;
        text-decoration: none;
        text-transform: none;
        cursor: pointer;
        transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
    }

    .sz_viewing_pagesection .pagelinks .nav_page:hover,
    .sz_viewing_pagesection .pagelinks .expand_pages:hover {
        background: linear-gradient(90deg, #ffffff, #f5f5f5, #e7e7e7);
        background-size: 200% 100%;
        animation: sz_pill_shine 0.65s linear;
    }


    .sz_viewing_pagesection .pagelinks .current_page {
        background: linear-gradient(#d8d8d8, #c2c2c2);
        border-color: #969696;
        color: #000000;
        font-weight: 600;
    }

    .sz_viewing_pagesection .pagelinks a.nav_page:has(> span.main_icons.previous_page),
    .sz_viewing_pagesection .pagelinks a.nav_page:has(> span.main_icons.next_page) {
        display: none !important;
    }
}
/* SZ 2025-11-30 — Hide prev/next icon-only pagination anchors */
.pagesection .pagelinks a.nav_page:has(> span.main_icons.previous_page),
.pagesection .pagelinks a.nav_page:has(> span.main_icons.next_page) {
    display: none !important;
}
/* Posts and personal messages displayed throughout the forum. */
.post {
	overflow: auto;
	line-height: 1.4em;
	padding: 1px 0;
}

/* SZ 2025-12-05 — Desktop post + signature bubble wrappers */
@media screen and (min-width: 1080px) {
  /* Main post bubble */
  #forumposts .post_wrapper:not(.op-post) .post {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid rgba(190, 199, 236, 0.9);
    padding: 18px 22px;
    box-shadow: 0 6px 14px rgba(26, 31, 63, 0.14);
      min-height: 280px;
  }

  /* Signature wrapper bubble */
  #forumposts .signature {
    margin-top: 10px;
    padding: 12px 18px;
    border-radius: 12px;
    background: linear-gradient(#ffffff, #f3f4f7);
    border: 1px solid rgba(190, 199, 236, 0.5);
  }
}


/* SZ 2025-11-26 — Normalize link weight inside posts */
.post a {
	font-weight: 500;
}

/* SZ 2025-11-26 — Sonic Games platform links: slightly bolder + consistent */
.post a.bbc_link,
.post .bbc_link {
	font-weight: 600;
}

#main_content_section .post .bbc_link b,
#main_content_section .post .bbc_link strong {
	font-weight: 600 !important;
	color: inherit !important;
}

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

.event {
	color: #078907;
}

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

.warn_moderate {
	color: #ffa500;
}

.warn_watch, .success {
	color: green;
}

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

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

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

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

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

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

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

.postbg {
	border-left: 1px solid #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;
}

/* Level 1 button background. */
.dropmenu > li, #top_info > li {

    display: inline-block;
    margin: 0 2px 0 1px;
    font-size: 0.9em;
    line-height: 1.9em;
}

/* Disable default focus outlines */
.dropmenu a {

    outline: 0;
}

/* For cases where we want to spotlight something specific to an item, e.g. an amount */
.amt {
	margin-left: 3px;
	padding: 0 5px;
	color: #fff;
	background: #fd7100;
	border-radius: 2px;
}
.dropmenu li .active .amt, #top_info li .active .amt {

    background: rgba(0, 0, 0, 0.2);
    color: inherit;
}

#top_info .top_menu.visible {
	display: block;
}
/* Needed for new PM notifications. */
.dropmenu li strong {

    color: #333;
}

.dropmenu li a, #top_info > li > a {

    padding: 0 7px 0 7px;
    display: block;
    border: 1px solid transparent;
    border-radius: 4px;
}

/* Level 1 active button. */
.dropmenu a.active, #top_info a.active {

    color: #2f3e7e;
    font-weight: bold;
    border-color: #656565;
    background: linear-gradient(#fbfcff, #f2f4fa);
    text-shadow: 0 0 1px #fff;
    text-decoration: none;
}

/* Admin top tabs - active state */
.generic_menu .dropmenu a.active {

    background: #4251bc;      /* same family as your login button */;
    color: #ffffff;
    border-color: #22285d;
    font-weight: bold;
    text-shadow: none;
}

/* Hover on the active tab */
.generic_menu .dropmenu li a.active:hover {

    background: #7283cf;      /* slightly lighter on hover */;
    color: #ffffff;
}

/* Level 1 hover effects. */
.dropmenu > li:hover > a, .dropmenu > li > a:focus, {

    background: #e3e4f9;
    border: 1px solid #9794b6;
    color: #1d1c27;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 4px rgba(255, 255, 255, 0.1) inset;
    text-shadow: 0 0 2px #fff;
}

/* Level 1 active button. */
.dropmenu li a.active:hover, .dropmenu li:hover a.active {

    background: linear-gradient(#f3f5fc, #ffffff);
    border: 1px solid #a0b0f3;
    color: #5263ab;
    box-shadow: 0 5px 5px rgba(255, 255, 255, 0.2) inset;
    text-shadow: none;
}

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

#main_menu {

    margin: 0 0 4px 0;
}

/* User information. */
#profile_menu_top::after {
	content: " \25BC";
}
.profile_user_info, .profile_user_avatar {
	display: inline-block;
	margin: 0 9px;
	vertical-align: middle;
}
.profile_user_avatar img.avatar {
	max-width: 100px;
}
.profile_username {
	font-size: 150%;
	display: block;
}
.profile_user_links ol {
	margin-left: 6px;
	clear: both;
	column-count: 2;
}
.profile_user_links li {
	font-size: .8rem;
	line-height: 2em;
	padding-left: 24px;
	text-indent: -24px;
	-webkit-hyphens: auto;
	hyphens: auto;
	color: #000;
}
.profile_user_links{
	color:  #000;
}

/* Fixes bug with border-box on scrollable js */
.scrollable,
.scrollable *,
#profile_menu {
	box-sizing: content-box;
}
.top_menu.scrollable {
	max-height: 30em;
}
.pm_unread, .alerts_unread {
	margin-top: 5px;
	border-top: 1px solid #ddd;
}
.unread_notify {
	border-bottom: 1px solid #ddd;
}
.no_unread {
	margin-top: 5px;
	text-align: center;
}
.unread_notify:hover {
	background: #eee;
	text-decoration: none;
}
.unread_notify:last-child {
	border-bottom: none;
}
.unread_notify {
	display: flex;
	align-items: center;
	padding: 6px 5px;
	line-height: 20px;
}
.unread_notify.alert_read {
	opacity: 0.5;
	outline: none;
	filter: grayscale(1);
}
.unread_notify strong {
	font-weight: 600;
}
.unread_notify .avatar {
	width: 40px;
	height: 40px;
	object-fit: scale-down;
	margin: 4px 4px 4px 0;
	display: inline-block;
	color: transparent; /* For broken images */
	vertical-align: bottom;
}
.unread_notify_image {
	position: relative;
	width: 44px;
	margin-right: 4px;
	text-align: center;
}
.unread_notify_image span.alert_icon {
	display: block;
	line-height: 1em;
}
.unread_notify_image .avatar + .alert_icon {
	width: auto;
	position: absolute;
	right: 0;
	top: 0;
}
.unread_notify .details {
	display: inline-block;
	vertical-align: top;
	max-width: calc(100% - 48px);
}
#pm_menu .subject {
	font-weight: bold;
}
/* Levels 2 and 3 submenu wrapper. */
.dropmenu li ul, .top_menu {

    z-index: 90;
    position: absolute;
    display: none;
    min-width: 18.2em;
    padding: 0.5em;
    font-weight: normal;
    border: solid 1px #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);
    background: #fff;
}

/* Level 2 link background. */
.dropmenu li li {

    margin: 0;
    padding: 0;
    width: 17em;
    font-size: 1em;
    border-radius: 3px;
    border: 1px solid transparent;
}

/* Necessary to allow highlighting of 1st level while hovering over submenu. */
.dropmenu li:hover li a, .dropmenu li li a {

    background: none;
    padding: 0 9px;
    color: #b3b3b3;
    border: none;
    line-height: 2.2em;
}

.dropmenu li li a > img {

    vertical-align: middle;
}

/* The profile/pm menus are declared off .dropmenu li ul for consistency but have other characteristics. */
.top_menu {

    min-width: 25em;
}

.top_menu .login {
	width: 100%;
}
.top_menu .login dt {
	text-align: left;
	width: 55%;
}
.top_menu .login dd {
	width: 43%;
}
.top_menu .login input {
	width: 90%;
}
/* Level 3 submenu wrapper positioning. */
.dropmenu li ul ul {

    margin: -2em 0 0 15.3em;
}

/* Level 3 maintains font-size the same as Level 2. */
.dropmenu li li li a {

    font-size: 1em;
}

/* Levels 2 and 3 hover effects. */
.dropmenu li li:hover {

    border: none;
}

.dropmenu li li:hover > a, .dropmenu li li a:focus, .dropmenu li li a:hover {

    color: #333;
    text-decoration: none;
    border: 1px solid #cfcfcf;
    border-top: 1px solid #d4dee6;
}

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

/* Darker text for admin submenu (Main / Configuration / etc.) */
#adm_submenus .dropmenu li li a {

    color: #555 !important;       /* normal state */;
}

#adm_submenus .dropmenu li li:hover > a,
#adm_submenus .dropmenu li li a:focus,
#adm_submenus .dropmenu li li a:hover {

    color: #222 !important;       /* hover/focus state */;
}

/* Styles for the standard button lists.
------------------------------------------------------- */
.buttonlist, .buttonrow, .pagelinks {
	z-index: 100;
	padding: 5px 0 5px 0;
}
.button, .quickbuttons > li > a, .inline_mod_check {
	display: inline-block;
	padding: 0 8px;
	color: #141518;
	font-size: 0.7rem;
	line-height: 2em;
	text-transform: uppercase;
	cursor: pointer;
	min-height: calc(2em + 2em * (0.9 - 0.85)); /* "input" font size minus ".button" font size */
	border: 1px solid;
	border-color: #22285d;
	border-radius: 3px;
	box-shadow: 1px 1px 1px rgba(221, 221, 221, 0.57);
	box-sizing: border-box;
	vertical-align: middle;
}
html[lang="el-GR"] .button,
html[lang="el-GR"] .quickbuttons > li > a,
html[lang="el-GR"] .inline_mod_check {
	text-transform: capitalize;
}
.pagesection .button {
	color: #1c222a;
}
.button:hover, .button:focus,
.quickbuttons > li:hover > a, .quickbuttons > li > a:focus {
	color: #323b83;
	border-color: #323b83;
	/*box-shadow: -1px -1px 2px rgba(221, 221, 221, 0.7), -1px -2px 4px #ddd inset*/;
	text-decoration: none;
}
.button:hover, .button:focus {
	color: #4251bc;
}
/* the active one */
.button.active {
	background: #4251bc;
	color: #fff;
	font-weight: bold;
	border: 1px solid #22285d;
	/*text-shadow: 0 0 1px #000;*/
}
.button.active:hover, .button.active:focus {
	color: #fff;
	background: #7283cf;
	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.
------------------------------------------------------- */

/* Sonic Zone: wrapper now only controls width, cards handle their own look */
#wrapper {
	clear: both;
	background: transparent; /* let the purple background show through */
	border-radius: 4px;
	box-shadow: none;
	padding: 0;
}

/* Sonic Zone: separate menu card and content card */
#upper_section,
#content_section {
	background: #fff;
	border-radius: 4px;
	box-shadow: 0px 0px 40px 0px rgba(31,42,65,0.8);
    margin-top:10px;
}

/* Add transparent gap between menu card and content card */
#upper_section {
	margin-bottom: 28px;
}

/* Keep bottom padding inside the content card instead of wrapper */
#content_section {
    /* top | right | bottom | left */
    padding: 20px 6px 12px 6px; /* added top + kept left/right even */
}

/* Set maximum width limit for content */
#top_section .inner_wrap, #wrapper, #header, #footer .inner_wrap {

    max-width: 1150px;
    margin: 0 auto;
    width: 90%;
}

/* The framing graphics */
/* The top bar. */
#top_section {

    border-bottom: 1px solid #3b3a64;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
    background: #272b35;
    clear: both;
    position: relative;
    z-index: 2000; /* keep top bar + its menus above the white content card */;
}

#top_section::after {

    content: "";
    display: block;
    clear: both;
}

#top_info {
	padding: 5px 0;
	line-height: 1.3em;
	max-width: 100%;
}
#pm_menu, #alerts_menu, #profile_menu {
	left: 0;
	right: 0;
}
#profile_menu_top > img.avatar {
	height: 18px;
	width: 18px;
	margin: 2px 5px 0 0;
	float: left;
}

.top_menu visible link{
	color:  #000;
}

#pm_menu_top .main_icons,
#alerts_menu_top .main_icons {
	display: none;
}

.notice {
	font-weight: bold;
}

#languages_form, #search_form {

    padding: 5px 0;
    padding-top: 7px;
}

#languages_form {
	margin: 0 0 0 10px;
}
/* The logo and slogan. */
#header {
	padding: 2px 2px 4px 2px;
	display: flex;
	align-items: center;
}
#header::after {
	content: "";
	display: block;
	clear: both;
}
/* The main logo area. */

h1.forumtitle {
	font-size: 1.8em;
	font-family: "Tahoma", sans-serif;
	padding-top: 15px;
	padding-bottom: 10px;
	margin-left: 7px;
	font-weight: normal;
	flex: 0 0 auto;
	margin-right: 32px;
}
h1.forumtitle a {
	color: #a85400;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}

/*The Sonic Zone Logo*/

.forumtitle img{

	width:  260px;
	padding-top:  20px;
	padding-bottom: 10px;
}

/* Float these items to the right */
#siteslogan, img#smflogo {
	font-size: 1.4em;
}
/* Tweak the SMF logo */
img#smflogo {
	margin: 16px 0 0 0;
	display:  none;
}
/* Even guests need to be aligned */
.welcome {
	padding: 0 10px;
	line-height: 2.5em;

}

/* The user info, news, etc. */
#upper_section {
    /* even vertical padding to center the menu row in the white card */
    padding: 7px 12px 10px 12px;  /* top right bottom left */
}

#inner_section {
    /* top | right | bottom | left */
    padding: 12px 6px 2px 6px;
    border-radius: 0;
    background: transparent;
}

#inner_section {
    /* FIX: align menu to the same left edge as content */
    padding: 12px 0 2px 0;
    border-radius: 6px 6px 0 0;
}

/* The upper_section, float the two each way */
#inner_wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: none;
	margin-bottom: 0;
}
.user {
	padding: 0 4px 8px 4px;
	font-size: 0.9em;
	white-space: nowrap;
}
.user:only-child {
	width: 100%;
	display: flex;
	justify-content: space-between;
}
.user time,
.user .unread_links,
.user .unread_links li {
	display: inline-block;
}
.user:not(:last-child) time:not(:last-child)::after,
.user .unread_links li:not(:last-child)::after {
	content: " • ";
	margin: 0 1ch;
}
ul li.greeting {
	font-weight: bold;
}
/* The login form. */
#guest_form {
	overflow: hidden;
	font-size: 0.9em;
	margin-left: -2px;
}
/* News section. */
#inner_wrap .news {
	padding: 0 0 8px 1ch;
	font-size: 0.9em;
	display: flex;
	align-items: baseline;
	max-width: 50%;
}
#inner_wrap .news h2 {
	line-height: initial;
}
#inner_wrap .news h2,
#inner_wrap .news p {
	display: inline;
	padding-left: 1ch;
}

/* The navigation list (i.e. linktree) */
.navigate_section {
	padding: 3px 0 0 0;
	float: left;
	width: 100%;
}
#main_content_section .navigate_section {
	margin: 4px 0 0 0;
	padding: 0;
}
.navigate_section ul {
	margin: 4px 0 0 0;
	padding: 0 4px;
	font-size: 0.9em;
	overflow: hidden;
	border: 1px solid #ddd;
	border-radius: 2px;
	box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.08);
}
.navigate_section ul li {
	float: left;
	padding-bottom: 3px;
	line-height: 1.1em;
	color: #444;
	text-shadow: 1px 1px 0 #fff;
}
.navigate_section ul li a, .navigate_section ul li em {
	padding: 4px 0 4px;
	margin-top: -4px;
	display: inline-block;
}
.navigate_section ul li span {
	display: inline-block;
	margin-top: 8px;
}
.navigate_section ul li .dividers {
	color: #3f6b8c;
	font: 83.33%/150% Arial, sans-serif;
	padding: 0 2px 0 6px;
}
.navigate_section ul li .board_moderators a {
	padding: 4px 0;
}

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

/* SZ 2025-11-26 — Breadcrumb + topic font hierarchy */
#top_subject {
    font-family: 'Red Hat Text', sans-serif !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: .06em !important;
}

#main_content_section .navigate_section ul li a span {
    font-family: 'Red Hat Text', sans-serif;
    font-weight: 500;
}

/* SZ 2025-11-29 — Hide duplicate breadcrumbs (keep first only, all sizes) */
#main_content_section > .navigate_section:not(:first-of-type) {
    display: none !important;
}



/* The content section */
#content_section {
    margin: 0 auto;
    clear: both;
}
#main_content_section {
    /* top | right | bottom | left */
    padding: 5px 6px 16px 6px;
}

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

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

.fix_rtl_names {
	display: inline-block;
}

/* The quick buttons */
.quickbuttons {
	margin: 0 0 5px;
	clear: right;
	float: right;
	text-align: right;
}
#recent .quickbuttons {
	margin: 0;
}
.quickbuttons > li {
	float: left;
}
.quickbuttons > li > a, .inline_mod_check {
	display: block;
	height: auto;
	padding: 0 4px;
	color: #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;
}
.quickbuttons > li:only-child > a, .inline_mod_check:only-child {
	border-radius: 4px;
	margin: 2px;
	height: 23px;
}
.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:hover ul {
	display: block;
}
.post_options ul a {
	display: block;
	width: 12em;
	padding: 0 6px;
	line-height: 2.2em;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: 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: 5px 0;
	margin: 4px 0;
	float: right;
	font-size: 1em;
}
#topic_icons #message_index_jump_to {
	padding: 0;
	float: right;
}

/* The category separator string is 29 dashes */
#display_jump_to_select,
#message_index_jump_to_select,
#search_jump_to_select,
#quick_mod_jump_to_select {

    width: 29ch;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* This is a small fix for dropmenu icons */
.dropmenu .main_icons::before, #profile_menu .main_icons::before, .dropmenu img {

    margin: -3px 8px 0 0;
    vertical-align: middle;
}

/* Top row */
.main_icons.help::before {
	background-position: -5px -5px;
}
.main_icons.search::before, .main_icons.engines::before {

    background-position: -31px -5px;
}

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

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

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

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

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

.noticebox::before {
	background-position: -83px -83px;
}
.infobox::before {
	background-position: -161px -83px;
}
.noticebox {
	color: #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;
}
.generic_bar .bar, .progress_bar .bar {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	bottom: 0;
	background: orange;
	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: normal;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	word-wrap: break-word; /* IE fallback */
	overflow-wrap: break-word;
}
#basicinfo h4 span.position {
	font-size: 0.8em;
	display: block;
}
#basicinfo img.avatar, dl.settings img.avatar {
	display: block;
	max-width: 160px;
	height: auto !important;
}
#basicinfo ul {
	list-style-type: none;
}
#basicinfo .icon_fields li {
	display: block;
	float: left;
	margin-right: 5px;
	height: 20px;
}
#basicinfo #userstatus {
	display: block;
	clear: both;
}
#basicinfo #userstatus img {
	vertical-align: middle;
}
#detailedinfo dl, #tracking dl {
	clear: right;
	overflow: auto;
	margin: 0 0 18px 0;
	padding: 0 0 15px 0;
	border-bottom: 1px #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: 6px;
}
.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;
}
.counter + .topic_details {
	margin-left: 25px;
}
.list_posts {
	border-top: 1px solid #ddd;
	box-shadow: 0 1px 0 #fff inset;
	padding-top: 1em;
	margin-top: 1em;
	margin-bottom: 1em;
	clear: both;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	overflow-wrap: break-word;
}
.topic h4 {
	margin: 3px 0;
}
.topic .post {
	margin: 0 12px;
	min-height: 80px;
	height: auto !important;
	height: 80px;
}
.topic .mod_icons {
	text-align: right;
	margin-right: 12px;
}

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

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

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

#theme_settings li {
	margin: 10px 0;
	padding: 0;
}
/* Paid Subscriptions */
#paid_subscription {
	width: 100%;
}
#paid_subscription dl.settings {
	margin-bottom: 0;
}
#paid_subscription dl.settings dd, #paid_subscription dl.settings dt {
	margin-bottom: 4px;
}
/* Pick theme */
#pick_theme {
	width: 100%;
	float: left;
}
#pick_theme .selected {
	background: #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;
}
dl.stats dt {
	width: 50%;
	float: left;
	margin: 0 0 4px 0;
	line-height: 1.5em;
	clear: both;
	font-size: 1em;
	overflow: hidden;
	word-wrap: break-word; /* IE fallback */
	overflow-wrap: break-word;
}
dl.stats dd {
	width: 48%;
	font-size: 1em;
	float: left;
	margin: 0 0 4px 2%;
}
dl.stats {
	padding: 5px;
}

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

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

#personal_messages h3 span#author, #personal_messages h3 span#topic_title {
	float: left;
}
#personal_messages h3 span#author {
	margin: 0 0 0 6px;
}
#personal_messages h3 span#topic_title {
	margin: 0 0 0 9em;
}
#personal_messages div.labels {
	padding: 0 12px 0 0;
}
#personal_messages .capacity_bar {
	background: #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: 6px;
}
.unread_pm {
	background: #cfc;
}
/* Styles for the show alerts section.
------------------------------------------------- */
#alerts .alert_inline_time {
	display: none;
}
#alerts .quickbuttons {
	display: flex;
	margin: 4px 0;
}
#alerts .quickbuttons li, #alerts .alert_time {
	white-space: nowrap;
}
#alerts .alert_image {
	width: 65px;
	padding: 6px 0;
	text-align: center;
	vertical-align: middle;
}
#alerts .alert_image > div {
	position: relative;
}
#alerts .alert_image .avatar {
	max-width: 80%;
	max-height: 80%;
	margin-top: 4px;
	vertical-align: bottom;
}
#alerts .alert_image span.alert_icon {
	display: block;
	width: 100%;
	line-height: 1em;
}
#alerts .alert_image .avatar + .alert_icon {
	width: auto;
	position: absolute;
	right: 0;
	top: 0;
}

/* Styles for the memberlist section.
------------------------------------------------- */
#mlist_search {

    margin: auto;
    max-width: 500px;
}

#mlist .selected {
	white-space: nowrap;
}
#mlist .is_online {
	width: 60px;
}
#mlist .email_address {
	width: 25px;
}
#mlist .website_url {
	width: 70px;
}
#mlist .icq, #mlist .skype {
	width: 30px;
}
#mlist .post_count {
	width: 115px;
}

/* Styles for the search section.
------------------------------------------------- */
#searchform fieldset {

    text-align: left;
    padding: 0;
    border: none;
}

#searchform .roundframe {

    border-radius: 0;
    margin: 0;
    padding: 32px;
}

#searchform .alt {

    border-top: 0;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
}

#searchform p.clear {

    clear: both;
}

#advanced_search {

    text-align: center !important;
}

#advanced_search dl#search_options {

    margin: 0 auto;
    width: 600px;
    padding-top: 12px;
    overflow: hidden;
}

#advanced_search dt {

    padding: 2px;
    text-align: right;
    width: 20%;
}

#advanced_search dd {

    width: 75%;
    float: left;
    padding: 2px;
    margin: 0 0 0 6px;
    text-align: left;
}

#search_results {

    margin-bottom: 5px;
}

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

#help_container {
	padding: 0 0 8px 0;
}
#helpmain {
	margin: 12px 0 0 0;
	padding: 8px 20px 12px 20px;
	border: 1px solid #ddd;
	border-radius: 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);
	z-index: 6;
}
#genericmenu > .popup_container {
	z-index: 5;
}
#adm_submenus > .popup_container {
	z-index: 4;
}
.popup_window,
#main_menu .popup_window,
#genericmenu .popup_window,
#adm_submenus .popup_window {

    position: relative;
    width: auto;
    z-index: 99;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
    border: 1px solid #777;
    border-radius: 7px 7px 3px 3px;
    margin: 0 auto;
    padding: 0;
}

.popup_window {
	top: 15%;
	width: 480px;
	padding: 0 6px 6px 6px;
}
.popup_heading {
	padding: 10px 8px;
	color: #4410bb;
}
.popup_content {
	color: #222;
	line-height: 1.6em;
	max-height: 30em;
	overflow: auto;
	padding: 10px 8px;
	border: 1px solid #bbb;
	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 {

    display: block;
    position: relative;
    background: none;
    margin: 0;
    height: auto; /* In case anything fishy happens in the situations where this used make sure it stays still */;
}

.main_icons.hide_popup {
	float: right;
}
.popup_heading .icon {
	vertical-align: middle;
	margin: -4px 4px 0 0;
}

.generic_list_wrapper, .windowbg, .approvebg, .approvebg2 {
	background: #fcfdff;
	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: #fcfdff;
}
.windowbg:nth-of-type(odd), .bg.odd {
	background: #fdfdfd;
}

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

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

/* 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: #e7e9ef;
}
/* Sticky topics get a different background */
.windowbg.sticky {
	background: #fffdeb;
}
/* Locked AND sticky are a bit more technical */
.windowbg.sticky.locked {
	background: #fffdeb;
}
/* 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: 0px;
}

.bold_text {
	font-weight: bold;
}

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

/* BoardIndex */
/* This place covers board places (boardindex/messageindex/recent) */
.boardindex_table:not(:last-child) {
	margin-bottom: 15px;
}
h3 .collapse {
	float: right;
	margin: 4px 4px 0 0;
}
.board_icon a {
	background: url(../images/boardicons.png) no-repeat 0 0 / 90px;
	display: inline-block;
	width: 45px;
	height: 45px;
}
.board_icon a.board_on2 {
	background-position: -45px 0;
}
.board_icon a.board_off {
	background-position: 0 -45px;
}
.board_icon a.board_redirect {
	background-position: -45px -45px;
}
.board_icon {
	text-align: center;
	padding: 8px 0 0 0;
	width: 60px;
	flex-shrink: 0;
}
.boardindex_table .board_icon {
	width: 80px;
}
.boardindex_table .info {
	width: calc(55% - 80px);
}
.boardindex_table .board_stats {
	padding: 13px 10px 10px;
}
.boardindex_table .board_stats p {
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
}
.info {
	overflow: hidden;
	overflow-wrap: break-word;
	padding: 5px 5px 5px 0;
	flex-grow: 1;


/* SZ 2025-12-02 — Vertically adjust boards without descriptions */
.boardindex_table .up_contain .info:not(.has_desc) {
	padding-top: 13px;
	padding-bottom: 5px;
}

}

/*Category titles*/

.info .subject {
  font-family: 'Red Hat Text', sans-serif;
  font-weight: 600;
  font-size: 1.1em;
  color: #4e3c8a;
}

/* SZ 2025-11-23 — Board subject text animation synced to global gradient */
html.sz-anim-ready #top_subject,
html.sz-anim-ready .info .subject,
html.sz-anim-ready #forumposts .post a {
  animation: color-change 130s infinite;
  animation-delay: var(--sz-gradient-offset, 0s);
}

html.sz-anim-ready #forumposts .post .bbc_standard_quote a,
html.sz-anim-ready #forumposts .post .bbc_alternate_quote a,
html.sz-anim-ready #forumposts .post blockquote a {
  animation: none;
}


@keyframes color-change {
  0% {
    color: #273891;
  }
  50% {
    color: #4c2791;
  }
  100% {
    color: #273891;
  }
}

.board_stats {
	width: 15%;
	font-size: 0.9em;
	margin: 0 0 0 auto;
	text-align: center;
}
.lastpost {
	width: 30%;
	font-size: 0.9em;
	padding-top: 3px;
}
.board_icon, .info, .board_stats, .lastpost {
	display: inline-block;
	align-self: center;
}
.main_container {
	margin-bottom: 20px;
}
.up_contain {
	overflow: hidden;
	border: 1px solid rgba(0,0,0,0.08);
	margin: 0 0 8px 0;
	display: flex;
	flex-wrap: wrap;
	border-radius: 5px;
	background: #ffffff;
	box-shadow: 0 2px 6px rgba(0,0,0,0.10);
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
/* Child boards */
.children {
	border-top: 1px solid #ddd;
	padding: 5px;
	width: 100%;
}
.children p {
	font-size: 0.9em;
}
.children span::after {
	content: ", ";
}
.children span:last-of-type::after {
	content: "";
}
p.moderators {
	font-size: 0.9em;
	font-weight: bold;
}
span.postby {
	display: block;
}


/* SZ 2025-12-02 — Redirect boards: hide Redirects count + divider */
.boardindex_table .up_contain:has(.board_icon .board_redirect) .board_stats p {
	display: none;
}
/* Info Center */
#info_center {
	clear: both;
}
#info_center .sub_bar {
	border-top: 1px solid #ddd;
}
#info_center .sub_bar:first-child {
	border-top: none;
}
#upshrink_stats {
	margin-top: 4px;
}
#ic_recentposts {
	line-height: 1.6em;
	width: 98%;
	margin: -2px 0 0 23px;
	font-size: 0.9em;
}
#ic_recentposts th {
	text-align: left;
	padding: 0 4px 0 0;
}
#ic_recentposts td {
	border-top: 1px solid #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: #192a49;
}
#ic_recentposts .windowbg {
	background: none;
}
#upshrink_stats p.inline {
	border: none;
	margin: 0;
	padding: 2px 29px;
	line-height: 1.6em;
	font-size: 0.9em;
}
#upshrink_stats p.inline span {
	margin: 0;
	padding: 4px 0 0 0;
}
#upshrink_stats span.membergroups {
	display: block;
}

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

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

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

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

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

div#pollmoderation {
	overflow: auto;
}

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

/* Linked events */
.event_title {
	font-size: larger;
	vertical-align: middle;
}
.event_title + a {
	margin-left: 1em;
}

/* On to the posts */
#forumposts {
	clear: both;
	margin: 8px 0 0 0;
}
#forumposts .cat_bar {
	margin: 0 0 -4px 0;
}
/* Topic information */
#forumposts .catbg img {
	margin: 0 4px -2px 0;
}
#forumposts .catbg span {
	white-space: pre;
	/* Specific sizing for clarity without ClearType. */
	font-size: 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 */
.poster {
	float: left;
	/* Don't set this in em.It will eat too much space if people need to set large text sizes. */
	width: 160px;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	word-wrap: break-word; /* IE fallback */
	overflow-wrap: break-word;
}
.poster h4 {
	font-size: 1.2em;
}
.poster h4, .poster h4 a, .poster li:hover h4 a, .poster h4 a:hover .poster li h4 a, .poster h4 a:focus {
	margin: 0;
	padding: 0;
	color: #5c5eb9;
}

.poster .profile .profile_icons li, .poster .im_icons li {
	display: table-cell;
}

/* The visible stuff below the avatar. */
.user_info > li {
	margin: 3px 0 0 0;
}
.poster li.membergroup {
	font-weight: bold;
}
/* @todo Re-code this a bit to give background on anchor. */
.poster li.poster_online, .poster li.poster_online:hover {
	padding: 1px 1px 1px 1px;
	margin: 3px 10px;
}
.poster li.poster_online a {
	color: #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;
}
img.avatar {
	object-fit: scale-down;

}
.poster img.avatar {
	max-width: 100%;
}
.postarea, .moderatorbar {
	margin: 0 0 0 175px;
}
.postarea div.flow_hidden {
	width: 100%;
}
.moderatorbar {
	clear: right;
}
.messageicon {
	display: inline-block;
}
.messageicon img, #iconList img {
	vertical-align: middle;
}
.keyinfo .postinfo {
	padding: 1px 0 5px 0;
	line-height: 1.5em;
	font-size: 0.9em;
	font-weight: bold;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
}
.keyinfo .postinfo::after, .under_message::after {
	content: "";
	clear: right;
	display: block;
}
.keyinfo .postinfo a, .keyinfo .postinfo a strong {
	color: #4f25ad;
}
.keyinfo .postinfo .spacer {
	flex: 1 1 auto;
}
.keyinfo .postinfo .modified {
	color: #333;
	font-weight: normal;
	font-style: italic;
	padding: 2px 4px 0 4px;
}
/* PMs postinfo */
#personal_messages .keyinfo .postinfo {
	flex-direction: column;
	align-items: flex-start;
	font-weight: normal;
}
#reason::before {
	content: " - ";
}
.subject_title a {
	font-size: 0.9em;
	color: #333;
	font-weight: bold;
}
.subject_hidden a {
	display: none;
}
.page_number {
	color: #4f25ad;
	font-weight: bold;
	padding: 4px 0 0 4px;
	line-height: 1.5em;
}
.inner {
	padding: 7px 8px 2px 2px;
	margin: 0;
	border-top: 1px solid #bfbfbf;
	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;
}
.attached {
	padding: 0 6px 8px 6px;
	max-width: 100%;
	display: inline-block;
	vertical-align: top;
}
.attachments_top {
	margin: 0 auto;
	text-align: center;
}
.attachments hr {
	clear: both;
	margin: 12px 0;
}
.show_on_hover:hover span {
	display:none;
}
.show_on_hover:hover:before {
	content:attr(data-hover);
}
/* Separator of posts. More useful in the print stylesheet. */
#forumposts .post_separator {
	display: none;
}
/* Next and previous topic links */
.nextlinks {
	text-transform: capitalize;
}
/* Styles for the quick reply area. */
#quickreply {
	clear: both;
	margin-top: 8px;
}

#quickreply_options .roundframe {
	margin: 0;
	padding: 14px 14px 16px 14px;
	border-radius: 6px;
	border: 1px solid #d4d6eb;
	background: #f5f5fb;
	box-shadow: 0 18px 40px rgba(14, 22, 50, 0.55);
	overflow: hidden;
}
#quickReplyExpand {
	float: right;
	margin: 2px 2px 0 2px;
}
/* Styles for edit post section */
form#postmodify .roundframe {
	padding: 12px 12%;
	margin: 12px 0 0 0;
}
#post_header {
	padding: 6px;
	overflow: hidden;
}
#post_header dt {
	float: left;
	padding: 0;
	width: 15%;
	margin: 6px 0 0 0;
	font-weight: bold;
}
#post_header dd {
	float: left;
	padding: 0;
	width: 83%;
	margin: 4px 0;
}
#post_header img {
	vertical-align: middle;
}
ul.post_options {
	margin: 0 0 0 12px;
	padding: 0;
	overflow: hidden;
}
ul.post_options li {
	margin: 2px 0;
	width: 49%;
	float: left;
}
#post_additional_options_header {
	margin-top: 0.5em;
}
#post_additional_options {
	overflow: hidden;
}
#post_additional_options .progress_bar {
	height: 22px;
}
#post_settings, #postAttachment, #postAttachment2, #attachment_previews {
	padding: 10px 0;
}
#postAttachment dd, #postAttachment2 dd {
	margin: 4px 0;
}
#postAttachment dd {
	width: 45%;
	float: left;
}
#postAttachment dt, #postAttachment2 dt {
	font-weight: bold;
}
#post_draft_options {
	background: #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: #192a49;
}
#post_confirm_buttons {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
}
#post_confirm_buttons, #shortcuts {
	padding: 12px 0;
}
#post_confirm_buttons .smalltext {
	flex: 1;
	word-break: break-word;
	margin: 0 5px 0 0;
}
#post_confirm_buttons .post_button_container {
	vertical-align: top;
}
#post_confirm_buttons .padding {
	flex: 1 100%;
}
.post_verification {
	margin-top: 6px;
}
.post_verification #verification_control {
	margin: 4px 0 4px 12px;
}
/* The BBC buttons */
#bbcBox_message {
	margin: 10px 6px;
}
#bbcBox_message div {
	margin: 2px 0;
	vertical-align: top;
}
#bbcBox_message div img {
	margin: 0 1px 0 0;
	vertical-align: top;
}
#bbcBox_message select {
	margin: 0 2px;
}
/* The smiley strip */
#smileyBox_message {
	margin: 6px;
}
/* All the signatures used in the forum. If your forum users use Mozilla, Opera, or Safari, you might add max-height here ;). */
.signature, .attachments, .under_message,
.custom_fields_above_signature,
.custom_fields_below_signature {
	width: 100%;
	overflow: auto;
	clear: right;
	padding: 12px 0 3px 0;
	border-top: 1px solid #bfbfbf;
	box-shadow: 0 1px 0 #fff inset;
	line-height: 1.4em;
	font-size: 0.9em;
}
.under_message {
	overflow: visible;
	border: none;
	box-shadow: none;
}
.smflikebutton {
	margin-top: 4px;
}
.like_count,
.smflikebutton:last-child {
	margin-bottom: 4px;
}
/* Events */
.edit_event {
	margin: 0 10px;
	vertical-align: top;
}
/* ModerationButtons */
#moderationbuttons {
	float: left;
}
#moderationbuttons_strip {
	float: left;
	margin: 4px 0 4px;
}
#moderationbuttons ul li {
	padding: 0 6px 4px 0;
	margin: 0;
}

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

/* General Classes catbaranimation */
div.cat_bar {
  background: #44359d;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

/* SZ 2025-11-23 — Category catbar animation synced to global gradient */
html.sz-anim-ready div.cat_bar {
  animation: colorAnimation 130s ease infinite;
  animation-delay: var(--sz-gradient-offset, 0s);
}

@keyframes colorAnimation {
  0% {
    background-color: #2e3099;
  }
  50% {
    background-color: #44359d;
  }
  100% {
    background-color: #2e3099;
  }
}

.cat_bar.collapsed,
.cat_bar.cat_bar_round {
	border-radius: 6px;
}
.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;
}
.cat_bar .desc a {
	color: #fff;
	font-weight: 600;
}
h3.catbg {
	overflow: hidden;
	font-size: 1.1em;
	font-family: "Tahoma", sans-serif;
}
h3.catbg, h3.catbg a, h3.catbg a:hover {
	color: #fff;
}
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 {
	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: 2px solid #d6dcf3;
	background: #f6f7fb;
	color: #a8b0e1;
	border-radius: 2px 2px 0 0;
	margin: 5px 0 0 0;
}
.sub_bar {
	border-bottom: 1px solid #ddd;
	text-shadow: none;
	background: none;
	box-shadow: 0 -1px 0 #999 inset;
	clear: both;
}
h3.titlebg, h4.titlebg, .titlebg, h3.subbg, h4.subbg, .subbg {
	background: none;
	color: #192a49;
	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: #192a49;
	text-decoration: none;
}
.title_bar + .windowbg, .title_bar + .roundframe {
	margin-top: -1px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

/* Other */
/* Information */
.information {
	background: #f8f8f8;
	overflow: auto;
	padding-bottom: .5em;
	border: 1px solid #ddd;
	border-top: none;
	border-radius: 0 0 7px 7px;
	margin: 0 0 10px 0;
	padding: 12px 9px 8px 9px;
}
.generic_list_wrapper .information div {
	background: none;
}
.information a:not(.button) {
	font-weight: bold;
}
p.information img {
	vertical-align: middle;
}
#messageindex .information {
	border-radius: 0;
	margin: 0;
}
#topic_icons .information,
#messageindex .information {
	border-top: 1px solid #ddd;
}
.topic_pages {
	font-size: 0.75em;
	margin: 0 0 0 5px;
}
.topic_pages::before {
	content: "\00ab ";
}
.topic_pages::after {
	content: " \00bb"
}
/* Mentions */
.atwho-view {
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	margin-top: 18px;
	background: #fff;
	border: 1px solid #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: 14px;
	height: 14px;
	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::before {
	vertical-align: middle;
}
h3.profile_hd::before,
.main_icons.profile_hd::before {
	content: "";
	background: url(../images/icons/profile_hd.png) no-repeat;
	height: 24px;
	width: 24px;
	display: inline-block;
}
.main_icons.profile_sm::before {
	background: url(../images/icons/profile_sm.png) no-repeat;
}
.xx {
	background: url(../images/post/xx.png) 2px no-repeat;
	padding: 25px 6px 25px 18px;
}

/* Those classes are sharing exact same gradient. */
/* Background of buttons */
.dropmenu li ul, .top_menu, .dropmenu li li:hover, .button,
.dropmenu li li:hover > a, .dropmenu li li a:focus, .dropmenu li li a:hover,
/*#top_section,*/ .quickbuttons > li,
.quickbuttons li ul, .quickbuttons li ul li a:hover, .quickbuttons ul li a:focus,
.inline_mod_check, .popup_window, #inner_section, .post_options ul,
.post_options ul a:hover, .post_options ul a:focus, .notify_dropdown a:hover, .notify_dropdown a:focus {

    background: #b3c6fa; /* fallback for some browsers */;
    background-image: linear-gradient(#f8f9ff 0%, #fcfdff 70%);
}

#top_section {

    color: #cdcdd0 ;
    background-image: linear-gradient(#1b1c21 0%, #0e0f12 70%);
}

#top_section a:link {

    color: #d1d1d1;
}

#top_section a:hover {

    color: #afafaf;
}

/* Well, some of them have different gradient effect on hover */
.button:hover, #search_form .button:hover, .quickbuttons li:hover {

    background: #fff;
    background-image: linear-gradient(to bottom, #fff 0%, #e2e9f3 70%);
}

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

.navigate_section ul {
	background: #40349C;
	background-image: none;
}


/* SZ 2025-12-03 — Breadcrumb strip: reuse cat_bar solid color animation */
html.sz-anim-ready .navigate_section ul {
  animation: colorAnimation 130s ease infinite;
  animation-delay: var(--sz-gradient-offset, 0s);
}

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

/* Some new stuff — SZ 2025-11-30 topic viewing eye icon */
#display_head {
    clear: both;
    margin: -7px 0 15px 0;
}
#display_head p {
    color: #959595;
}

/* Eye icon + text alignment for topic viewing line */
.sz_topic_viewing_eye {
    display: inline-flex;
    align-items: center;
    margin-right: 4px;
    line-height: 0;
}

.sz_topic_viewing_eye_svg {
    width: 16px;
    height: 16px;
    display: block;
}

/* Final eye color + baseline nudge */
.sz_topic_viewing_eye_svg path {
    fill: #8c8c8c;
    transform: translateY(-1px);
}
.display_title {
	font-weight: normal;
	font-size: 26px;
	margin-bottom: 0.25em;
	line-height: 1.05em;
	overflow-wrap: break-word;
}

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

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

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

/* Alternating colors */
.stripes:nth-of-type(even) {
	background-color: #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;
}

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

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

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

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

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

#lang_main_files_list .name, #member_list .email, #approve_list .email {
	word-break: break-word;
}

#top_section select {

    color: #FFF;
    background: #FFFFFF;
    border: 1px solid #636363;
}

#top_section select:hover {

    outline: none;
    border-color: #979797;
}

#top_section select:focus {

    outline: none;
    border-color: #b4b4b4;
    background: #FFFFFF;
}

/* Admin news area */

table#news_lists.table_grid textarea{
	background: #fff;
	color: #0a0a0a;
}

/* Admin Registration area  */

#registration_agreement textarea{
	background: #fff;
	color: #0a0a0a;
}

/* Top bar link properties */

#top_section a {

    color: #b8b8b8 ;
}

#top_info .welcome {
		display: none;

}

/*top menu buttons*/

#top_section #profile_menu, #pm_menu, #alerts_menu {

    background: linear-gradient(#1c1c1e 0%, #28292b 70%);
    border: 1px #484a56;
}

.pm_unread{
	border-top:  1px solid #3b3b3b;
	margin-top:  20px;

	} 

.overview a.button{
	border:  1px solid #868686;
	background:  #313131;
	box-shadow: 0 5px 5px 0 rgba(0,0,0,0.2), 0 5px 5px 0 rgba(0,0,0,0.19);
}

.alerts_unread{
	border-top:  1px solid #3b3b3b;
	margin-top:  20px;

}

/*Quick Edit properties override*/

.inner .editor {
	background: #fff;
	color: #111111;
}

/*Unread notifications area*/

.unread_notify_image img.avatar{
	display: none;

}

.unread_notify: hover{

background:  #242424;

}

.unread_notify strong{
	color:  #e1e1e1;
}

/*Top area buttons*/

#top_info > li:hover > a, #top_info > li > a:focus, #top_info > li > a.open{

	background: #242424;
	border: 1px solid #6f6f6f;
	color: #fff;
	cursor: pointer;
	text-decoration: none;
	box-shadow: 0 4px 2px rgba(255, 255, 255, 0.1) inset;
	text-shadow: 0 0 1px #000;

}

/* Modify boards text properties*/

.settings textarea{
	background:  #fff;
	color:  #000;
}

}

/* ================================================================
   SONIC ZONE — CUSTOM OVERRIDES (FINALIZED)
   Applies only to top bar, dropdowns, and login/register buttons.
   Safe to keep at the very bottom of index.css
   ================================================================ */

/* === 1) REGISTER / SIGN-UP BUTTON: exact match to SIGN IN === */
#top_info > li > a[href*="action=register"],
#top_info > li > a[href*="action=signup"],
#top_info > li > a[href*="action=register"]:link,
#top_info > li > a[href*="action=register"]:visited,
#top_info > li > a[href*="action=register"].active,
#top_info > li > a[href*="action=signup"].active,
#top_info > li:hover > a[href*="action=register"],
#top_info > li:hover > a[href*="action=signup"],
#top_info > li > a[href*="action=register"]:hover,
#top_info > li > a[href*="action=register"]:focus {
  background-color: #242424 !important;
  background-image: linear-gradient(#2d2d2d 0%, #242424 70%) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  text-shadow: none !important;
  box-shadow: 0 4px 2px rgba(255,255,255,0.10) inset !important;
}

/* identical hover background/border (no text change here) */
#top_info > li > a[href*="action=register"]:hover,
#top_info > li > a[href*="action=signup"]:hover,
#top_info > li > a[href*="action=register"].active:hover,
#top_info > li > a[href*="action=signup"].active:hover {
  background-color: #242424 !important;
  background-image: linear-gradient(#2d2d2d 0%, #242424 70%) !important;
  border-color: rgba(255,255,255,0.34) !important;
}

/* === 2) TOP BAR LINKS: white by default, yellow on hover === */
#top_info > li > a,
#top_info > li > a.active {
  color: #d1d1d1 !important;
  text-shadow: none !important;
  transition: color .25s ease;
}

#top_info > li > a:hover,
#top_info > li > a.active:hover {
  color: #ffffff !important;
}

/* Ensure dropdown links inherit colors properly */
#top_info .top_menu a {
  color: inherit !important;
  transition: none !important;
}

/* === 3) SLIDE ANIMATION for TOP BAR DROPDOWNS (Gilly / PM / Alerts only) === */
:is(#profile_menu, #pm_menu, #alerts_menu) {
  display: block !important;
  opacity: 0;
    transform: translateY(0);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity .22s ease,
    transform .22s ease,
    visibility 0s linear .22s;
  transform-origin: top center;
  will-change: transform, opacity;
}

/* Open (click) state */
:is(#profile_menu, #pm_menu, #alerts_menu).visible,
:is(#profile_menu, #pm_menu, #alerts_menu)[style*="display: block"] {
  opacity: 1;
    transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity .22s ease,
    transform .22s ease;
  animation: menuSlideDown .22s ease forwards;
}

/* Close (hide) state */
:is(#profile_menu, #pm_menu, #alerts_menu):not(.visible)[style*="display: none"] {
  animation: menuSlideUp .22s ease forwards;
}

/* Keyframes for open/close animation */
@keyframes menuSlideDown {
    transform: translateY(0);
    transform: translateY(0);
}
@keyframes menuSlideUp {
    transform: translateY(0);
    transform: translateY(0);
}

/* === 4) MAIN NAV GUARDRAIL — prevent top bar colors from affecting forum nav === */
#main_menu li > a,
#main_menu .dropmenu > li > a,
#main_menu .buttonlist li a,
#main_menu .button_strip li a {

    color: inherit !important;
    text-shadow: inherit !important;
    transition: none !important;
}

/* Reduce menu button padding for tighter layout */
#main_menu li > a,
#main_menu .dropmenu > li > a,
#main_menu .buttonlist li a,
#main_menu .button_strip li a {

    padding: 4px 10px !important;
}

/* Add spacing below the main menu */
#main_menu {

    margin-bottom: 12px !important;
}

#main_menu li > a:hover,
#main_menu .dropmenu > li > a:hover,
#main_menu .buttonlist li a:hover,
#main_menu .button_strip li a:hover {

    color: inherit !important;
    text-shadow: inherit !important;
}

/* === 5) POP-OUT MENU POLISH — yellow hover, no underline/highlight === */
#top_info .top_menu a,
#top_info .top_menu li a {
  color: #ddd !important;
  text-decoration: none !important;
  background: none !important;
  text-shadow: none !important;
  transition: color .25s ease;
}

#top_info .top_menu a:hover,
#top_info .top_menu li:hover > a {
  color: #ffffff !important;       /* yellow hover */
  text-decoration: none !important;
  background: none !important;
  text-shadow: none !important;
}

/* === 6) Accessibility: Respect reduced motion === */
@media (prefers-reduced-motion: reduce) {
  :is(#profile_menu, #pm_menu, #alerts_menu) {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* === Top bar hover animation: yellow text + soft outline (no layout shift) === */
/* Scope: top bar items only, excluding Sign in / Register */
#top_info > li > a:not([href*="action=login"]):not([href*="action=register"]):not([href*="action=signup"]) {
  /* baseline */
  color: #d1d1d1 !important;
  text-shadow: none !important;
  /* simulate an outline with an inset shadow so it won't change size */
  box-shadow: inset 0 0 0 1px rgba(255, 208, 0, 0);
  transition:
    color .25s ease,
    box-shadow .25s ease;
}

#top_info > li > a:not([href*="action=login"]):not([href*="action=register"]):not([href*="action=signup"]):hover {
  color: #ffffff !important; /* same yellow you use elsewhere */
  box-shadow: inset 0 0 0 1px rgba(255, 208, 0, 0.65); /* animated outline */
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #top_info > li > a:not([href*="action=login"]):not([href*="action=register"]):not([href*="action=signup"]) {
    transition: none !important;
  }
}

/* === REGISTER / SIGN-UP: hard lock (wins on the Register page too) === */
#top_info > li > a[href*="action=register"],
#top_info > li > a[href*="action=signup"],
#top_info > li > a[href*="action=register"]:link,
#top_info > li > a[href*="action=register"]:visited,
#top_info > li > a[href*="action=register"].active,
#top_info > li > a[href*="action=signup"].active,
#top_info > li:hover > a[href*="action=register"],
#top_info > li:hover > a[href*="action=signup"],
#top_info > li > a[href*="action=register"]:hover,
#top_info > li > a[href*="action=register"]:focus {
  background-color: #242424 !important;
  background-image: linear-gradient(#2d2d2d 0%, #242424 70%) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  text-shadow: none !important;
  /* neutralize any outline/glow from other rules */
  box-shadow: 0 4px 2px rgba(255,255,255,0.10) inset !important;
}

/* optional: tiny border nudge on hover only */
#top_info > li > a[href*="action=register"]:hover,
#top_info > li > a[href*="action=signup"]:hover {
  border-color: rgba(255,255,255,0.34) !important;
}

/* === REGISTER/SIGN-UP: force dark style even on the Register page === */
/* cover: link itself, any state, and when its parent <li> is the active/current tab */
#top_info > li > a[href*="action=register"],
#top_info > li > a[href*="action=signup"],
#top_info > li > a[href*="action=register"]:link,
#top_info > li > a[href*="action=register"]:visited,
#top_info > li > a[href*="action=register"]:hover,
#top_info > li > a[href*="action=register"]:focus,
#top_info > li > a[href*="action=register"].active,
#top_info > li > a[href*="action=signup"].active,
/* parent li flagged active/current/selected? lock it too */
#top_info > li.active > a[href*="action=register"],
#top_info > li.current > a[href*="action=register"],
#top_info > li.selected > a[href*="action=register"],
/* super-catch-all: any li that contains the register link (Chrome supports :has) */
#top_info > li:has(> a[href*="action=register"]) > a,
#top_info > li:has(> a[href*="action=signup"]) > a {
  background-color: #242424 !important;
  background-image: linear-gradient(#2d2d2d 0%, #242424 70%) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  text-shadow: none !important;
  /* neutralize any “white pill” look */
  box-shadow: 0 4px 2px rgba(255,255,255,0.10) inset !important;
}

/* keep the tiny border nudge on hover only (optional) */
#top_info > li > a[href*="action=register"]:hover,
#top_info > li > a[href*="action=signup"]:hover,
#top_info > li.active > a[href*="action=register"]:hover,
#top_info > li.current > a[href*="action=register"]:hover,
#top_info > li.selected > a[href*="action=register"]:hover {
  border-color: rgba(255,255,255,0.34) !important;
}

/* === REGISTER/SIGN-UP: yellow text hover === */
#top_info > li > a[href*="action=register"]:hover,
#top_info > li > a[href*="action=signup"]:hover,
#top_info > li.active > a[href*="action=register"]:hover,
#top_info > li.current > a[href*="action=register"]:hover,
#top_info > li.selected > a[href*="action=register"]:hover {
  color: #ffffff !important;  /* match Sign in hover color */
  border-color: rgba(255,255,255,0.34) !important; /* keep soft hover border */
}

/* === Dark blur overlay ONLY when a popup is visible (no impact otherwise) === */
/* We use :has() so the overlay appears only if the popup is display:block */
body:has(.popup_window[style*="display: block"])::after,
body:has(.modal[style*="display: block"])::after,
body:has(#popup_content[style*="display: block"])::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.68);   /* semi-transparent black */
  backdrop-filter: blur(2px);        /* soft blur */
  z-index: 9990;                     /* below the popup window */
  pointer-events: none;              /* don't block clicks */
  animation: overlayFade .2s ease forwards;
}

/* keep the popup above our overlay, just in case */
.popup_window, .modal, #popup_content {
  position: relative;
  z-index: 10000;
}

@keyframes overlayFade { from { opacity: 0; } to { opacity: 1; } }

/* === MODAL POPUP — dark shell, white text, search-style inputs ===== */
/* Scope to the top-level modal container so menu popups aren’t affected */
body > .popup_container .popup_window {

    background: linear-gradient(#1b1c21 0%, #0e0f12 70%) !important;
    border: 1px solid #0e0f12 !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.7);
}

/* Title bar + link (“Sign in”) in the modal */
body > .popup_container .popup_heading,
body > .popup_container .popup_heading a {
  color: #fff !important;
  text-shadow: none !important;
}

/* Inner content follows dark theme too */
body > .popup_container .popup_content {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid #0e0f12 !important;
}

/* Inputs inside the modal — match your top search bar colors */
body > .popup_container .popup_window input,
body > .popup_container .popup_window textarea,
body > .popup_container .popup_window select {

    color: #fff !important;
    background: #FFFFFF !important;
    border: 1px solid #636363 !important;
}

body > .popup_container .popup_window input:hover,
body > .popup_container .popup_window textarea:hover,
body > .popup_container .popup_window select:hover {
  border-color: #979797 !important;
}
body > .popup_container .popup_window input:focus,
body > .popup_container .popup_window textarea:focus,
body > .popup_container .popup_window select:focus {
  border-color: #b4b4b4 !important;
  background: #FFFFFF !important;
}

/* Submit button inside the modal: keep subtle, readable */
body > .popup_container .popup_window input[type="submit"],
body > .popup_container .popup_window .button {
  color: #e6e6e6 !important;
  background: #3a3a3a !important;
  border-color: #6a6a6a !important;
}
body > .popup_container .popup_window input[type="submit"]:hover,
body > .popup_container .popup_window .button:hover {
  background: #4a4a4a !important;
  border-color: #8a8a8a !important;
}

body > .popup_container .popup_window a:hover {
  color: #fff59d !important; /* lighter on hover */
  text-decoration: underline !important;
}

/* === POPUP CLOSE BUTTON — replace image with yellow bold X ========= */
body > .popup_container .main_icons.hide_popup::before {
  content: "×" !important;           /* simple X character */
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #ffd84c !important;         /* Sonic Zone yellow */
  background: none !important;       /* remove sprite image */
  width: auto !important;
  height: auto !important;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
}

body > .popup_container .main_icons.hide_popup:hover::before {
  color: #fff59d !important;         /* lighter yellow on hover */
  transform: scale(1.1);
}

/* === POPUP OVERLAY — black tint + blurred background ==================== */
body > .popup_container {
  background: rgba(0, 0, 0, 0.55) !important;  /* dark semi-transparent overlay */
  backdrop-filter: blur(5px) !important;       /* blur background content */
  -webkit-backdrop-filter: blur(5px) !important;
  transition: backdrop-filter 0.3s ease, background 0.3s ease;
  z-index: 9000 !important;
  pointer-events: none;                        /* let clicks go through to header */
}

/* Popup itself stays clickable */
body > .popup_container .popup_window {
  pointer-events: auto;
}

/* Keep popup window itself sharp and above the blur */
body > .popup_container .popup_window {
  position: relative;
  z-index: 9010;
}

/* === POPUP POLISH — very soft divider + clean shadow ================ */

/* Only style the intended divider <hr> */
body > .popup_container .popup_window hr {
  border: none !important;
  height: 1px !important;
  background: rgba(255, 255, 255, 0.08) !important; /* faint, barely visible */
  margin: 12px 0 !important;
}

/* Remove the extra bottom border sometimes applied by popup_content */
body > .popup_container .popup_content {
  border-bottom: none !important;
}

/* Keep the subtle black shadow under popup */
body > .popup_container .popup_window {
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.85),
    0 0 12px rgba(0, 0, 0, 0.6) !important;
}

/* === POPUP DIVIDER FIX — remove content borders & soften hr ========= */

/* Remove popup content’s built-in borders + inset white glow */
body > .popup_container .popup_content {
  border: none !important;           /* removes the top/bottom white lines */
  box-shadow: none !important;       /* removes the inset white highlight */
}

/* Make the divider truly subtle */
body > .popup_container .popup_window hr {
  margin: 12px 0 !important;
  height: 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.10) !important; /* faint */
  background: none !important;
}

/* === POPUP TWEAKS — bold links + remove gray scrollbar ================= */

/* Bolden only links inside popup windows */
body > .popup_container .popup_window a {
  font-weight: 600 !important;
}

/* Hide scrollbar inside popup when not needed */
body > .popup_container .popup_content {
  overflow-y: auto !important;      /* still scrolls if needed */
  scrollbar-width: none !important; /* Firefox */
}
body > .popup_container .popup_content::-webkit-scrollbar {
  display: none !important;         /* Chrome / Edge / Safari */
}

/* === MODAL: remove page scrollbar while open ======================= */
/* Works in modern browsers via :has() */
body:has(> .popup_container[style*="display: block"]) {
  overflow: hidden !important;     /* hide the page scrollbar */
}

/* Ensure overlay covers the viewport exactly (no 100% vs viewport gutter) */
body > .popup_container {
  inset: 0 !important;             /* top/right/bottom/left:0 */
  width: 100vw !important;
  height: 100vh !important;
  overscroll-behavior: contain;    /* prevent scroll chaining on touch */
}

/* === MOBILE MODAL UPGRADE — larger card + bigger fields ================ */
@media (max-width: 640px) {
  /* Make the modal card wider on phones and pull it up a bit */
  body > .popup_container .popup_window {
    width: 92vw !important;          /* override the desktop 480px width */
    max-width: 560px !important;
    top: 6% !important;               /* a bit closer to the top */
    padding: 14px 16px 18px 16px !important;
    border-radius: 12px !important;
    font-size: 16px !important;       /* prevents mobile zoom on inputs */
  }

  /* Let content breathe on small screens (no cramped internal scroll) */
  body > .popup_container .popup_content {
    max-height: none !important;      /* override 30em cap */
    padding: 12px 0 0 0 !important;
  }

  /* Bigger, easier-to-tap inputs (text, password, selects) */
  body > .popup_container .popup_window input[type="text"],
  body > .popup_container .popup_window input[type="password"],
  body > .popup_container .popup_window input[type="email"],
  body > .popup_container .popup_window select,
  body > .popup_container .popup_window textarea {
    font-size: 16px !important;       /* stop iOS “zoom on focus” */
    line-height: 1.25 !important;
    padding: 14px 12px !important;
    height: auto !important;
    border-radius: 4px !important;
  }

  /* Larger submit button */
  body > .popup_container .popup_window input[type="submit"],
  body > .popup_container .popup_window .button {
    font-size: 15px !important;
    padding: 12px 18px !important;
    border-radius: 10px !important;
    margin-top: 10px !important;
  }

  /* Tidy spacing for links & divider */
  body > .popup_container .popup_window hr {
    margin: 14px 0 !important;
  }
}

/* === POPUP CLOSE ICON — make the X white ================================= */
body > .popup_container .main_icons.hide_popup::before {
  color: #ffffff !important;             /* was yellow */
  font-weight: 800 !important;
  text-shadow: none !important;
}

/* === POPUP LINKS — lighter yellow + bold ================================= */
body > .popup_container .popup_window a {
  color: #ffe07a !important;             /* lighter yellow */
  font-weight: 600 !important;
  text-decoration: none !important;
}
body > .popup_container .popup_window a:hover {
  color: #fff2a6 !important;             /* even lighter on hover */
  text-decoration: underline !important;
}

/* === MOBILE REFINEMENTS — bigger button, spacing, comfortable fields ===== */
@media (max-width: 640px) {
  /* Roomier card */
  body > .popup_container .popup_window {
    width: 94vw !important;
    max-width: 600px !important;
    padding: 18px 18px 22px 18px !important;
    border-radius: 14px !important;
  }

  /* Extra vertical spacing between items */
  body > .popup_container .popup_window .popup_content > * + * {
    margin-top: 14px !important;
  }

  /* Inputs: keep big comfortable touch targets */
  body > .popup_container .popup_window input[type="text"],
  body > .popup_container .popup_window input[type="password"],
  body > .popup_container .popup_window input[type="email"],
  body > .popup_container .popup_window select,
  body > .popup_container .popup_window textarea {
    font-size: 16px !important;
    padding: 16px 14px !important;
    border-radius: 10px !important;
  }

  /* Fix “SIGN IN” button being clipped; make it larger and centered */
  body > .popup_container .popup_window input[type="submit"],
  body > .popup_container .popup_window .button {
    display: block !important;
    width: auto !important;
    max-width: 320px !important;
    margin: 16px auto 6px auto !important;   /* center + spacing */
    font-size: 17px !important;
    line-height: 1.15 !important;
    padding: 14px 24px !important;
    border-radius: 12px !important;
    overflow: visible !important;            /* prevent text cut-off */
  }
}

/* === SIGN-IN BUTTON FIX — center text & refine appearance ============== */
body > .popup_container .popup_window input[type="submit"],
body > .popup_container .popup_window .button {
  display: inline-block !important;
  vertical-align: middle !important;
  text-align: center !important;
  line-height: 1.3em !important;         /* centers text vertically */
  padding: 12px 28px !important;         /* more balanced spacing */
  border-radius: 10px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  background: linear-gradient(#2a2a2a, #181818) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.6) !important;
  transition: background 0.25s ease, transform 0.15s ease;
}

body > .popup_container .popup_window input[type="submit"]:hover {
  background: linear-gradient(#383838, #1f1f1f) !important;
    transform: translateY(0);
}

/* === SIGN-IN BUTTON — bigger, centered text, perfect alignment ======== */
body > .popup_container .popup_window input[type="submit"],
body > .popup_container .popup_window .button {
  display: inline-flex !important;           /* use flexbox for centering */
  align-items: center !important;
  justify-content: center !important;
  height: 48px !important;                   /* consistent button height */
  min-width: 140px !important;
  padding: 0 28px !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  background: linear-gradient(180deg, #2a2a2a 0%, #171717 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7) !important;
  line-height: normal !important;
  text-align: center !important;
  vertical-align: middle !important;
  transition: all 0.25s ease;
}

body > .popup_container .popup_window input[type="submit"]:hover,
body > .popup_container .popup_window .button:hover {
  background: linear-gradient(180deg, #3b3b3b 0%, #1f1f1f 100%) !important;
    transform: translateY(0);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.8) !important;
}

/* === POPUP SIGN-IN BUTTON — pop/expand hover ========================= */
body > .popup_container .popup_window input[type="submit"],
body > .popup_container .popup_window .button {
  transition: transform .18s cubic-bezier(.22,.9,.3,1), 
              box-shadow .18s ease, 
              background .18s ease !important;
  will-change: transform;
}

/* Hover: gentle pop out */
body > .popup_container .popup_window input[type="submit"]:hover,
body > .popup_container .popup_window .button:hover {
  transform: scale(1.04); /* expand */
  box-shadow: 0 10px 26px rgba(0,0,0,.85) !important;
}

/* Active (press): slight compress to feel clicky */
body > .popup_container .popup_window input[type="submit"]:active,
body > .popup_container .popup_window .button:active {
  transform: scale(0.98);
  box-shadow: 0 6px 18px rgba(0,0,0,.8) !important;
}

/* Keyboard focus: same pop for accessibility */
body > .popup_container .popup_window input[type="submit"]:focus-visible,
body > .popup_container .popup_window .button:focus-visible {
  outline: none !important;
  transform: scale(1.04);
  box-shadow: 0 10px 26px rgba(0,0,0,.9), 0 0 0 2px rgba(255,255,255,.15) inset !important;
}

/* === POPUP LOGIN ROWS — center labels with fields ===================== */
/* Turn each dl of the login form into a 2-column grid inside the modal */
body > .popup_container .popup_window .login dl {
  display: grid !important;
  grid-template-columns: 42% 58%;
  column-gap: 10px;
  align-items: center;               /* vertically center labels with fields */
  row-gap: 10px;
}

/* Neutralize the theme's float layout for labels/fields */
body > .popup_container .popup_window .login dt,
body > .popup_container .popup_window .login dd {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: right;                 /* keep labels right-aligned */
}

/* === INPUT HEIGHT — a little less tall ================================ */
body > .popup_container .popup_window input[type="text"],
body > .popup_container .popup_window input[type="password"],
body > .popup_container .popup_window input[type="email"],
body > .popup_container .popup_window select,
body > .popup_container .popup_window textarea {
  padding: 10px 12px !important;     /* was larger; tighten slightly */
  height: 38px !important;           /* slimmer fields on desktop */
  line-height: 1.2 !important;
  border-radius: 4px !important;
}

/* Keep touch targets comfy on phones while still slimmer than before */
@media (max-width: 640px) {
  body > .popup_container .popup_window input[type="text"],
  body > .popup_container .popup_window input[type="password"],
  body > .popup_container .popup_window input[type="email"],
  body > .popup_container .popup_window select,
  body > .popup_container .popup_window textarea {
    height: 44px !important;
    padding: 12px 14px !important;
    font-size: 16px !important;
  }
}

/* Remove stray scrollbars on login rows inside the popup */
body > .popup_container .popup_window .login dl {
  overflow: visible !important;   /* was overflow:auto in the base theme */
}

/* (Optional) if any row still looks tight, add a touch more gap */
body > .popup_container .popup_window .login dl {
  row-gap: 12px !important;
}

/* Hide the 'Time to stay logged in' row ONLY in the modal popup */
body > .popup_container .popup_window .login dd:has(> select[name="cookielength"]),
body > .popup_container .popup_window .login dt:has(+ dd > select[name="cookielength"]) {
  display: none !important;
}

/* === DESKTOP: restore default popup layout ============================ */
@media (min-width: 641px) {
  /* Card size/shape back to desktop */
  body > .popup_container .popup_window {
    width: 480px !important;               /* SMF default width */
    padding: 0 6px 6px 6px !important;     /* SMF default padding */
    border-radius: 7px !important;
    font-size: inherit !important;
  }

  /* Restore SMF login form floats */
  body > .popup_container .popup_window .login dl {
    display: block !important;             /* undo grid */
    overflow: auto !important;             /* SMF default */
  }
  body > .popup_container .popup_window .login dt,
  body > .popup_container .popup_window .login dd {
    float: none !important;                /* clear previous… */
    width: auto !important;
    margin: 0 0 5px 0 !important;
    padding: 1px !important;
    text-align: left !important;
  }
  /* …then apply SMF’s actual float layout */
  body > .popup_container .popup_window .login dt {
    float: left !important;
    clear: both !important;
    width: 44% !important;
    text-align: right !important;
  }
  body > .popup_container .popup_window .login dd {
    float: right !important;
    width: 54% !important;
    text-align: left !important;
  }

  /* Inputs: desktop proportions */
  body > .popup_container .popup_window input[type="text"],
  body > .popup_container .popup_window input[type="password"],
  body > .popup_container .popup_window input[type="email"],
  body > .popup_container .popup_window select,
  body > .popup_container .popup_window textarea {
    height: 34px !important;
    padding: 8px 10px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
  }

  /* Sign-in button: desktop sizing (keeps pop/expand hover) */
  body > .popup_container .popup_window input[type="submit"],
  body > .popup_container .popup_window .button {
    height: 44px !important;
    padding: 0 22px !important;
    font-size: 15px !important;
    margin: 10px 0 0 1em !important;       /* matches SMF spacing */
  }
}

/* === MOBILE: keep the nicer mobile layout (SCOPED) ==================== */
@media (max-width: 640px) {
  /* Wide card + comfy padding */
  body > .popup_container .popup_window {
    width: 94vw !important;
    max-width: 600px !important;
    padding: 18px 18px 22px 18px !important;
    border-radius: 14px !important;
    font-size: 16px !important;            /* prevents zoom on focus (iOS) */
  }

  /* 2-column grid, vertically centered labels */
  body > .popup_container .popup_window .login dl {
    display: grid !important;
    grid-template-columns: 42% 58%;
    column-gap: 10px;
    row-gap: 12px;
    overflow: visible !important;          /* remove tiny bars on mobile */
  }
  body > .popup_container .popup_window .login dt,
  body > .popup_container .popup_window .login dd {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: right !important;
  }

  /* Inputs: touch-friendly */
  body > .popup_container .popup_window input[type="text"],
  body > .popup_container .popup_window input[type="password"],
  body > .popup_container .popup_window input[type="email"],
  body > .popup_container .popup_window select,
  body > .popup_container .popup_window textarea {
    height: 44px !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    font-size: 16px !important;
  }

  /* Button: big, centered */
  body > .popup_container .popup_window input[type="submit"],
  body > .popup_container .popup_window .button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 48px !important;
    padding: 0 28px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    margin: 16px auto 6px auto !important;
    border-radius: 12px !important;
  }
}

/* === MOBILE POPUP ALIGNMENT & SPACING FIX ============================= */
@media (max-width: 640px) {
  /* Move Username / Password labels closer to left edge */
  body > .popup_container .popup_window .login dt {
    text-align: left !important;
    padding-left: 8px !important;
  }

  /* Reduce left-right padding on popup to visually align fields better */
  body > .popup_container .popup_window {
    padding-left: 12px !important;
  }

  /* Add vertical spacing between Password -> Sign In -> links */
  body > .popup_container .popup_window input[type="password"] {
    margin-bottom: 18px !important;
  }

  body > .popup_container .popup_window input[type="submit"],
  body > .popup_container .popup_window .button {
    margin-top: 6px !important;
    margin-bottom: 20px !important;
  }

  /* Give the links breathing room below the button */
  body > .popup_container .popup_window a[href*="action=reminder"],
  body > .popup_container .popup_window a[href*="activation"] {
    display: block !important;
    margin-top: 6px !important;
  }
}

/* === POPUP RESIZE GUARD — keep page from showing a side gutter ======= */
/* Hide the page scrollbar ANY time the popup is visible (robust checks) */
body:has(> .popup_container:not([style*="display: none"])),
body:has(> .popup_container .popup_window[style*="display: block"]) {
  overflow: hidden !important;
}

/* Make sure the overlay is exactly the viewport (prevents gutter on resize) */
body > .popup_container {
  position: fixed !important;
  inset: 0 !important;                 /* top/right/bottom/left: 0 */
  width: 100vw !important;
  height: 100vh !important;
  box-sizing: border-box !important;
  overscroll-behavior: contain;        /* block scroll chaining on mobile */
}

/* === Lock page whenever modal is visible (no gutters, no side scroll) */
html:has(body > .popup_container:not([style*="display: none"])),
body:has(> .popup_container:not([style*="display: none"])) {
  overflow: hidden !important;          /* remove page scrollbar */
  overflow-x: hidden !important;        /* prevent horizontal scroll */
  width: 100% !important;
  max-width: 100% !important;
}

/* Ensure overlay is exactly the viewport */
body > .popup_container {
  position: fixed !important;
  inset: 0 !important;                  /* top/right/bottom/left: 0 */
  width: 100vw !important;
  height: 100vh !important;
  overscroll-behavior: contain;
}

/* === MOBILE HARDENING — card never exceeds viewport =================== */
@media (max-width: 640px) {
  /* Make the popup width include its padding (no >100% math) */
  body > .popup_container .popup_window {
    box-sizing: border-box !important;
    width: 94vw !important;             /* inside the viewport */
    max-width: 560px !important;
    margin: 0 auto !important;
    padding: 16px !important;           /* now counted inside the 94vw */
  }
  /* Everything inside also uses border-box just in case */
  body > .popup_container .popup_window *,
  body > .popup_container .popup_window *::before,
  body > .popup_container .popup_window *::after {
    box-sizing: border-box !important;
  }

  /* Grid never overflows; inputs occupy the second column fully */
  body > .popup_container .popup_window .login dl {
    display: grid !important;
    grid-template-columns: 36% 1fr;     /* label / field */
    column-gap: 10px;
    row-gap: 12px;
    width: 100% !important;
    overflow: visible !important;       /* no mobile scrollbars */
  }

  /* Labels left-aligned; fields 100% of their cell */
  body > .popup_container .popup_window .login dt {
    text-align: left !important;
    padding-left: 6px !important;
  }
  body > .popup_container .popup_window .login dd > * {
    width: 100% !important;
  }

  /* Optional: avoid hover scale causing side scroll on tiny screens */
  body > .popup_container .popup_window input[type="submit"]:hover,
  body > .popup_container .popup_window .button:hover {
    transform: none !important;         /* comment out if you prefer the pop */
  }
}

/* === DESKTOP POPUP SPACING BELOW SIGN-IN BUTTON ====================== */
@media (min-width: 641px) {
  body > .popup_container .popup_window input[type="submit"],
  body > .popup_container .popup_window .button {
    margin-bottom: 22px !important; /* add more vertical spacing */
  }

  body > .popup_container .popup_window .login .login-links {
    margin-top: 8px !important; /* fine-tuned distance from button */
  }
}

/* === DESKTOP LABEL VERTICAL ALIGNMENT FIX ============================ */
@media (min-width: 641px) {
  body > .popup_container .popup_window .login dt {
    display: flex !important;
    align-items: center !important; /* centers label vertically */
    justify-content: flex-end !important; /* keep label right-aligned */
    height: 38px !important; /* matches input height */
    line-height: 1 !important;
  }

  body > .popup_container .popup_window .login dd input[type="text"],
  body > .popup_container .popup_window .login dd input[type="password"] {
    height: 38px !important;
  }
}

/* === POPUP BUTTON SPACING + LINK COLOR REFINEMENT ==================== */

/* 1. DESKTOP — increase space above/below Sign In button */
@media (min-width: 641px) {
  body > .popup_container .popup_window input[type="submit"],
  body > .popup_container .popup_window .button {
    margin-top: 24px !important;   /* more space above */
    margin-bottom: 28px !important; /* more space below */
  }
}

/* 2. POPUP LINKS — light gray on both desktop and mobile */
body > .popup_container .popup_window .login .login-links a {
  color: #c8c8c8 !important;       /* light gray */
  text-decoration: none;
  font-weight: 500;
}

body > .popup_container .popup_window .login .login-links a:hover {
  color: #e0e0e0 !important;       /* slightly lighter on hover */
  text-decoration: underline;
}

body > .popup_container .popup_window .login .login-links .divider {
  color: #707070 !important;       /* darker gray for the | */
  padding: 0 6px;
}

/* === FORCE POPUP LINK COLOR OVERRIDE ================================ */

/* Light gray links in popup */
.popup_container .popup_window a,
.popup_container .popup_window .login-links a,
.popup_container .popup_window .login-links a:link,
.popup_container .popup_window .login-links a:visited {
  color: #c8c8c8 !important;      /* light gray */
  text-decoration: none !important;
  font-weight: 500 !important;
}

/* Hover effect */
.popup_container .popup_window a:hover,
.popup_container .popup_window .login-links a:hover {
  color: #e0e0e0 !important;      /* slightly lighter on hover */
  text-decoration: underline !important;
}

/* === POPUP LINKS — white base, yellow on hover ===================== */
body > .popup_container .popup_window a,
body > .popup_container .popup_window a:link,
body > .popup_container .popup_window a:visited {
  color: #ffffff !important;           /* white by default */
  text-decoration: none !important;
  font-weight: 500;
  transition: color .2s ease-in-out;   /* smooth fade */
}

body > .popup_container .popup_window a:hover {
  color: #ffd84c !important;           /* yellow on hover */
  text-decoration: underline !important;
}

/* === POPUP LINKS — light gray with yellow hover ===================== */
body > .popup_container .popup_window a,
body > .popup_container .popup_window a:link,
body > .popup_container .popup_window a:visited {
  color: #c8c8c8 !important;         /* light gray base */
  text-decoration: none !important;
  font-weight: 500;
  transition: color 0.2s ease-in-out; /* smooth fade */
}

body > .popup_container .popup_window a:hover {
  color: #ffd84c !important;         /* yellow on hover */
  text-decoration: underline !important;
}

/* === POPUP SIGN-UP SECTION — differentiate link and static text ===== */

/* Make the normal text darker */
body > .popup_container .popup_window .login-links {
  color: #8a8a8a !important;   /* darker gray for "Don't have an account?" */
}

/* Keep link light gray with yellow hover */
body > .popup_container .popup_window .login-links a {
  color: #c8c8c8 !important;   /* light gray link */
  text-decoration: none !important;
  font-weight: 500;
  transition: color 0.2s ease-in-out;
}

body > .popup_container .popup_window .login-links a:hover {
  color: #ffd84c !important;   /* yellow hover */
  text-decoration: underline !important;
}

/* === POPUP SIGN-UP LINE — darker non-link text ====================== */
body > .popup_container .popup_window .login-links {
  color: rgba(160, 160, 160, 0.65) !important; /* darker + 65% opacity */
}

/* Keep link bright + animated hover */
body > .popup_container .popup_window .login-links a {
  color: #c8c8c8 !important;       /* light gray link */
  text-decoration: none !important;
  font-weight: 500;
  transition: color 0.2s ease-in-out;
}

body > .popup_container .popup_window .login-links a:hover {
  color: #ffd84c !important;       /* yellow on hover */
  text-decoration: underline !important;
}

/* === POPUP LINKS — very bright yellow ================================ */
body > .popup_container .popup_window a,
body > .popup_container .popup_window .login-links a,
body > .popup_container .popup_window a:link,
body > .popup_container .popup_window a:visited {
  color: #ffef70 !important;        /* bright yellow */
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: color .2s ease-in-out;
}

body > .popup_container .popup_window a:hover,
body > .popup_container .popup_window .login-links a:hover {
  color: #fff5a8 !important;        /* slightly lighter on hover */
  text-decoration: underline !important;
}

/* === POPUP LINKS — bright near-white yellow ========================= */
body > .popup_container .popup_window a,
body > .popup_container .popup_window .login-links a,
body > .popup_container .popup_window a:link,
body > .popup_container .popup_window a:visited {
  color: #fff8b0 !important;         /* bright yellow-white */
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: color 0.2s ease-in-out;
}

body > .popup_container .popup_window a:hover,
body > .popup_container .popup_window .login-links a:hover {
  color: #fffef0 !important;         /* almost white on hover */
  text-decoration: underline !important;
}

/* === POPUP CLOSE BUTTON — larger and clearer ========================= */
body > .popup_container .popup_window .popup_heading .generic_icons.cancel,
body > .popup_container .popup_window .popup_heading a[onclick*="close"],
body > .popup_container .popup_window .popup_heading .close,
body > .popup_container .popup_window .popup_heading .popup_close {
  font-size: 26px !important;      /* increase size */
  line-height: 1 !important;
  color: #ffffff !important;       /* make sure it stays white */
  font-weight: bold !important;
  opacity: 0.9;
  transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

/* Add a hover effect to make it feel interactive */
body > .popup_container .popup_window .popup_heading .generic_icons.cancel:hover,
body > .popup_container .popup_window .popup_heading .popup_close:hover,
body > .popup_container .popup_window .popup_heading a[onclick*="close"]:hover {
  color: #ffd84c !important;       /* your Sonic Zone yellow on hover */
  transform: scale(1.2);           /* subtle enlarge effect */
  cursor: pointer;
}

/* === TOP NAV — revert hover outline to light gray (keep text colors) === */
#top_section #main_menu .dropmenu > li > a,
#top_section #top_info > li > a {

  /* kill any prior yellow ring */
    box-shadow: none !important;
}

#top_section #main_menu .dropmenu > li > a:hover,
#top_section #main_menu .dropmenu > li > a:focus,
#top_section #top_info > li > a:hover,
#top_section #top_info > li > a:focus,
#top_section .dropmenu > li:hover > a {

  /* clean, subtle gray outline like original */
    border-color: rgba(255, 255, 255, 0.35) !important;
    box-shadow: none !important;   /* ensure no yellow outer ring shows */;
    outline: none !important;
    color: inherit;                /* leaves your white→yellow text animation untouched */;
    transition: border-color .15s ease; /* smooth */;
}

/* === Fix 'Sign in' text to pure white (no dimming anywhere) ========= */
#main_menu .dropmenu > li.button_login,
#main_menu .dropmenu > li.button_login > a,
#main_menu .dropmenu > li.button_login > a.open,
#main_menu .dropmenu > li.button_login > a .textmenu {

    color: #ffffff !important;
    opacity: 1 !important;
    filter: none !important;                 /* kills brightness/gray filters */;
    -webkit-text-fill-color: #ffffff !important;  /* Safari/WebKit */;
    mix-blend-mode: normal !important;
    text-shadow: none !important;
}

/* keep your existing hover to yellow */
#main_menu .dropmenu > li.button_login > a:hover .textmenu,
#main_menu .dropmenu > li.button_login:hover > a .textmenu {

    color: #ffd84c !important;
    transition: color .2s ease;
}

/* Hide the quick-search scope dropdown WHEN a guest is browsing.
   We detect "guest" by the presence of the Sign in menu item (.button_login). */

/* SMF default quick-search form IDs/classes vary slightly, so we cover both. */
body:has(#main_menu li.button_login) #search_form select,
body:has(#main_menu li.button_login) .quick_search select {

    display: none !important;
}

/* Optional: tighten spacing after removing the select */
body:has(#main_menu li.button_login) #search_form input[type="text"],
body:has(#main_menu li.button_login) .quick_search input[type="text"] {

    margin-right: 8px !important;
}

/* Hide the "Allow the administrators to send me important news by email" option */
label[for="notify_announcements"],
#notify_announcements {
    display: none !important;
}

/* Style registration success box */
.infobox {
    font-size: 1.15rem;               /* Larger text */
    line-height: 1.6;                 /* Better readability */
    padding: 20px 25px;               /* More spacing */
    background: #ffffff;              /* Clean white card */
    border-radius: 12px;              /* Round corners */
    border: 2px solid #3a2ca0;        /* Sonic Zone purple border */
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    max-width: 800px;
    margin: 20px auto;
}

/* The title inside the box */
.infobox > h3 {
    background: linear-gradient(90deg, #3a2ca0, #5942d6);
    color: white;
    font-size: 1.5rem;                /* Bigger headline */
    padding: 12px 18px;
    margin: -20px -25px 15px -25px;   /* Extend header to edges */
    border-radius: 10px 10px 0 0;     /* Rounded top only */
    font-weight: 600;
}

/* Text inside the box */
.infobox > p {
    font-size: 1.1rem;
    padding: 5px 0;
}

/* Darker text for Admin Panel top menu buttons only */
#admin_menu .dropmenu li li a,
.adm_container .dropmenu li li a,
#adm_submenus .dropmenu li li a {

    color: #2a2a2a !important;   /* dark gray */;
}

/* Optional: darker hover color */
#admin_menu .dropmenu li li a:hover,
.adm_container .dropmenu li li a:hover,
#adm_submenus .dropmenu li li a:hover {

    color: #000 !important;       /* pure black on hover */;
}

/* FORCE admin submenu text to be dark */
#adm_submenus .dropmenu li li a,
#adm_submenus .dropmenu li:hover li a,
#admin_content .dropmenu li li a,
#admin_content .dropmenu li:hover li a {

    color: #444 !important;   /* dark gray */;
}

/* Hover color */
#adm_submenus .dropmenu li li a:hover,
#admin_content .dropmenu li li a:hover {

    color: #000 !important;   /* black on hover */;
}

/* Unread links relocated next to Sonic Zone linktree */
.unread_links_relocated {
    float: right;
    margin-top: -26px;   /* adjust -24 / -28 if alignment is off */
    font-size: 0.9rem;
}

.unread_links_relocated a {
    color: #1949a0;
}

.unread_links_relocated a:hover {
    text-decoration: underline;
}

/* Remove date/time separator line under top section */
#top_section .user::after,
#top_section .user::before {

    display: none !important;
    content: none !important;
    border: 0 !important;
}

/* Unread links moved under navbar, aligned to the right of Sonic Zone */
.unread_links_relocated {
    float: right;
    margin-top: -26px;
    margin-right: 12px;   /* <-- adds space from the right edge */
    font-size: 0.9rem;
}

.unread_links_relocated a {
    color: #1949a0;
    text-decoration: none;
}

/* Mobile: hide linktree row (Sonic Zone + Unread Posts) */
@media screen and (max-width: 720px) {
	.navigate_section,
	.unread_links_relocated {
		display: none !important;
	}
}

/* Mobile: remove gray border and tighten space above menu */
@media screen and (max-width: 720px) {
	#header {
		border-bottom: none;
		margin-bottom: 4px;
	}
}

/* Remove gray line under logo on desktop too */
#inner_wrap {
    border-bottom: none !important;
    margin-bottom: 0 !important;
}

/* Unread Posts link to the right of the main menu (desktop) */
.unread_menu_link {
    float: right;
    margin-top: -36px;   /* tweak -34 / -38 if needed */
    margin-right: 18px;
    font-size: 0.95rem;
}

.unread_menu_link a {
    color: #1949a0;
    text-decoration: none;
}

.unread_menu_link a:hover {
    text-decoration: underline;
}

/* Hide all custom Unread Posts links/bars */
.unread_menu_link,
.unread_links_relocated {
    display: none !important;
}

/* 11-13-25 New menu changes */

/* Make menu width match the main content width */
#inner_section {
    max-width: 1200px !important;
    width: 90% !important;
    margin: 0 auto !important;
}

/* Match menu padding to main content padding */
#inner_section {
    padding: 4px !important;
}

/* === Sonic Zone layout overrides — align menu & content edges === */
#wrapper {
    padding-left: 0 !important;
}

/* Menu area (blue background with buttons) */
#inner_section {
    padding-left: 16px !important;
}

/* Breadcrumb row ("Sonic Zone") */
.navigate_section ul {
    padding-left: 16px !important;
}

/* Main content area (boards/categories) */
#main_content_section {
    padding-left: 16px !important;
}

/* Remove extra side padding from the bar above the menu */
#upper_section {
    padding-left: 0 !important;
}

/* 2025-11-13 — FINAL MENU ALIGNMENT FIX (match Sonic Zone boards width) */
#upper_section {
    /* even vertical padding to center the menu row in the white card */
    padding: 7px 12px 10px 12px !important;  /* top right bottom left */
}

#inner_section {
    /* match left/right padding with DISCORD / DOWNLOADS section */
    padding: 12px 6px 2px 6px !important;    /* top right bottom left */
    border-radius: 0 !important;
    background: transparent !important;

    /* undo older experiments that centered/narrowed the menu */
    max-width: none !important;
    width: auto !important;
    margin: 0 !important;
}

/* 2025-11-13 — On small screens, menu + content act as one card */
@media (max-width: 720px) {
	#upper_section {
		margin-bottom: 0;              /* remove purple gap */
		border-radius: 4px 8px 0 0;    /* rounded only on top */
	}

	#content_section {
		border-radius: 0 0 8px 8px;    /* rounded only on bottom */
	}

	/* Remove card shadows on mobile so sections look unified */
@media (max-width: 720px) {
    #upper_section,
    #content_section {
        box-shadow: none !important;
    }
}

}

/* 2025-11-13 — Mobile tighter content layout */
@media (max-width: 720px) {

    /* Remove the big white area under the logo on mobile */
    #upper_section,
    #inner_section {
        padding: 0 !important;
        margin: 0 !important;
        min-height: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

    /* Small, even gap before the DISCORD card */
    #content_section {
        padding-top: 3px !important;
    }

    /* Keep content snug on the sides */
    #main_content_section { padding: 0 !important;
    }

    /* Nudge the forum logo slightly for perfect visual centering */
    .forumtitle img {
        display: block;
        margin: 4px auto 0 auto !important;
    }

    /* Base alignment + recolor of top-bar IMG icons */
    #top_info > li > a img {
        width: 22px;
        height: 22px;
        vertical-align: middle;
        filter: brightness(0) invert(1); /* make original icons white */
    }

    /* Hide text labels/counts inside icons on mobile */
    #top_info > li > a .textmenu,
    #top_info > li > a .amt {
        display: none;
    }

    /* ---------------------------------------------- */
    /*  REPLACEMENT SVG ICONS — WHITE OUTLINE STYLE   */
    /* ---------------------------------------------- */

    /* Messages (envelope) */
    #top_info span.main_icons.inbox::before {
        content: "";
        display: inline-block;
        width: 22px;
        height: 22px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 22px 22px;
        background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<rect x='3' y='5' width='18' height='14' rx='2' ry='2'/>\
<polyline points='3,7 12,13 21,7'/>\
</svg>");
    }

    /* Alerts (bell) */
    #top_info span.main_icons.alerts::before {
        content: "";
        display: inline-block;
        width: 22px;
        height: 22px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 22px 22px;
        background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2z'/>\
<path d='M18 16V11a6 6 0 1 0-12 0v5l-2 2h16l-2-2z'/>\
</svg>");
    transform: translateY(0);
    }

    /* Profile — replace avatar IMG with SVG outline person */
    #profile_menu_top img {
        display: none !important;
    }

    #profile_menu_top::before {
        content: "";
        display: inline-block;
        width: 22px;
        height: 22px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 22px 22px;
        background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<circle cx='12' cy='8' r='4'/>\
<path d='M4 20c0-4 4-6 8-6s8 2 8 6'/>\
</svg>");
        vertical-align: middle;
    }

    /* Remove the dropdown arrow beside the profile icon */
    #top_info li[id^="profile_menu"] + li img {
        display: none !important;
    }

    /* ---------------------------------------------- */
    /*  HOVER / CLICK — FADE TO YELLOW ANIMATION      */
    /* ---------------------------------------------- */

    #top_info li a::before {
        transition: filter 0.2s ease-in-out;
    }

    #top_info li a:hover::before,
    #top_info li a:active::before {
        /* Yellow animation filter */
        filter: brightness(0) saturate(100%) invert(84%) sepia(35%) saturate(900%) hue-rotate(3deg) brightness(105%) contrast(98%);
    }
}

}

/* SZ: mobile menu trigger in top black bar */
@media (max-width: 560px) {
	#top_section .mobile_user_menu {

    float: right;
    margin: 4px 4px 0 4px;
    color: #f4f4f4;
    text-decoration: none;
}

	#top_section .mobile_user_menu:hover {

    text-decoration: underline;
}

}

/* SZ MOBILE TOP MENU BUTTON (11-13-25) */
@media screen and (max-width: 720px) {

    /* Make the black bar a positioning parent */
    #top_section {

    position: relative;
}

    /* Position the hamburger in the top-right */
    #top_section .mobile_user_menu {

    display: flex !important;
    align-items: center;
    position: absolute;
    right: 6px;
    top: 8px;               /* moved UP by 2px for perfect alignment */;
    margin: 0;
    padding: 0;
    color: #f4f4f4;
    text-decoration: none;
    z-index: 9999;
}

    /* Hide the word "Menu" */
    #top_section .mobile_user_menu .text_menu {

    display: none;
}

    /* White hamburger icon, larger & wider click area */
    #top_section .mobile_user_menu .menu_icon {

    display: inline-block;
    height: 24px;
    width: 32px;
    filter: invert(1) brightness(2);
    background-size: 32px 24px;
    background-position: center center;
}

}

/* SZ: mobile main menu panel + link styling */
@media screen and (max-width: 720px) {

  /* Full-height dark panel that hugs the top bar */
  #mobile_user_menu.popup_container {
    /* we reuse the global blur overlay above; nothing else needed here */
  }

  #mobile_user_menu .popup_window {
    position: fixed !important;
    top: 0;
    right: 0;
    left: auto;
    width: 100% !important;
    height: 100vh;
    max-height: 100vh;
    margin: 0 !important;
    border-radius: 0 !important;
    border: 1px solid #484a56;
    background: linear-gradient(#1c1c1e 0%, #28292b 70%) !important;
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
  }

  #mobile_user_menu .popup_heading {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    color: #f4f4f4;
    padding: 10px 14px;
  }

  #mobile_user_menu .popup_content {
    flex: 1 1 auto;
    max-height: none;
    overflow-y: auto;
    padding: 0;
  }

  /* Base link style inside the mobile dropmenu */
  #mobile_user_menu .dropmenu li a {

    background: transparent !important;
    color: #e3e3e3 !important;
    transition: color 0.18s ease, background-color 0.18s ease;
}

  /* Hover / focus: text turns yellow, no white bar */
  #mobile_user_menu .dropmenu li a:hover,
  #mobile_user_menu .dropmenu li a:focus {

    background: transparent !important;
    color: #fee900 !important;
}

  /* Active page: bold + yellow text, transparent background */
  #mobile_user_menu .dropmenu li a.active,
  #mobile_user_menu .dropmenu li a.active:hover,
  #mobile_user_menu .dropmenu li a.active:focus {

    background: transparent !important;
    color: #fee900 !important;
    font-weight: 700 !important;
}

  /* Sub-menus: also keep backgrounds transparent */
  #mobile_user_menu .dropmenu li ul li a {

    background: transparent !important;
}

/* Simple hamburger state when the menu is open — bars → down arrow */
  body.sz-mobile-menu-open #top_section .mobile_user_menu .menu_icon {

    transform: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 24' fill='none'><polyline points='6,18 18,8 30,18' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

  #top_section .mobile_user_menu .menu_icon {

    transition: transform 0.2s ease;
}

  /* Universal hover for mail + alerts icons */
#top_info span.main_icons.inbox:hover::before,
#top_info span.main_icons.inbox:active::before,
#top_info span.main_icons.alerts:hover::before,
#top_info span.main_icons.alerts:active::before {
    filter: brightness(0) saturate(100%) invert(84%) sepia(35%) saturate(900%) hue-rotate(3deg) brightness(105%) contrast(98%);
}

/* Remove hover animation from profile icon */
#profile_menu_top::before {
    transition: none !important;
}

/* Make the dropdown arrow next to the profile icon transparent */
#top_info li[id^="profile_menu"] + li img {
    display: inline-block !important;
    opacity: 0.3 !important;   /* Change 0.3 to 0.2 or 0.1 if you want more transparency */
    filter: none !important;
}

}

/* SZ: mobile main menu refinements (2025-11-13) */
@media screen and (max-width: 720px) {

	/* Remove borders/lines above & below main items */
	#mobile_user_menu .dropmenu li,
	#mobile_user_menu .dropmenu li a {

    border: none !important;
    box-shadow: none !important;
}

	/* Sub-menu sections: remove white bars, add subtle dark background */
	#mobile_user_menu .dropmenu li ul,
	#mobile_user_menu .dropmenu li ul li,
	#mobile_user_menu .dropmenu li ul li a {

    background: #1b1c20 !important; /* slightly darker than main panel */;
    border: none !important;
    box-shadow: none !important;
    color: #e2e2e2 !important;
}

	#mobile_user_menu .dropmenu li ul li a:hover {

    background: #222327 !important;
    color: #fee900 !important;
}

	/* Keep yellow hover for main items too */
	#mobile_user_menu .dropmenu > li > a:hover,
	#mobile_user_menu .dropmenu > li > a:focus {

    background: transparent !important;
    color: #fee900 !important;
}

	/* Active item: bold yellow */
	#mobile_user_menu .dropmenu li a.active,
	#mobile_user_menu .dropmenu li a.active:hover,
	#mobile_user_menu .dropmenu li a.active:focus {

    background: transparent !important;
    color: #fee900 !important;
    font-weight: 700 !important;
}

	/***************************************
	 *  CLOSE BUTTON FIXES
	 ***************************************/

	/* Replace icon entirely with white "×" */
	#mobile_user_menu .popup_heading .hide_popup {
		background: none !important;
		text-indent: 0 !important;
		overflow: visible !important;
		width: auto !important;
		height: auto !important;
		line-height: 1 !important;
		font-size: 20px !important;
		color: #fff !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		text-decoration: none !important;
		border: none !important;
		box-shadow: none !important;
	}

	#mobile_user_menu .popup_heading .hide_popup::before {
		content: "×";
		font-weight: 700;
		color: #fff;
	}

	/* No underline on hover */
	#mobile_user_menu .popup_heading .hide_popup:hover {
		text-decoration: none !important;
		color: #fee900 !important; /* optional hover highlight */
	}

	/***************************************
	 *  KEEP THE PANEL HEIGHT ONLY AS NEEDED
	 ***************************************/
	#mobile_user_menu .popup_window {
		height: auto !important;
		max-height: none !important;
		display: block !important;
		background: #25262b !important;
	}

	#mobile_user_menu .popup_content {
		max-height: calc(100vh - 80px);
		overflow-y: auto;
	}

	/***************************************
	 *  HIDE MENU ICONS IN MOBILE ONLY
	 ***************************************/
	#mobile_user_menu .dropmenu li .main_icons,
	#mobile_user_menu .dropmenu li img {

    display: none !important;
}

}

/* SZ: Mobile menu refinements – remove red X, restore gradient (2025-11-13) */
@media screen and (max-width: 720px) {

	/***************************************
	 * 1) REMOVE RED X ICON COMPLETELY
	 ***************************************/
	#mobile_user_menu .popup_heading .hide_popup,
	#mobile_user_menu .popup_heading .hide_popup::before,
	#mobile_user_menu .popup_heading .hide_popup::after {
		background: none !important;
		background-image: none !important;
		mask: none !important;
		-webkit-mask: none !important;
		content: "" !important; /* reset */
	}

	/* Insert our OWN white X */
	#mobile_user_menu .popup_heading .hide_popup {
		text-indent: 0 !important;
		overflow: visible !important;
		color: #ffffff !important;
		font-size: 20px !important;
		font-weight: 700 !important;
		line-height: 1 !important;
		width: auto !important;
		height: auto !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		border: none !important;
		box-shadow: none !important;
	}

	/* Real visible X */
	#mobile_user_menu .popup_heading .hide_popup::before {
		content: "×" !important;
		color: #ffffff !important;
		font-size: 20px !important;
		font-weight: 700 !important;
	}

	/* Hover color for X */
	#mobile_user_menu .popup_heading .hide_popup:hover::before {
		color: #fee900 !important;
	}

	/***************************************
	 * 2) RESTORE GRADIENT FOR MAIN MENU ITEMS
	 ***************************************/
	/* Top-level items only */
	#mobile_user_menu .dropmenu > li > a {

    background: linear-gradient(to bottom, #2b2c31 0%, #1f1f23 100%) !important;
    color: #e3e3e3 !important;
    border: none !important;
}

	#mobile_user_menu .dropmenu > li > a:hover {

    background: linear-gradient(to bottom, #34363c 0%, #2a2b30 100%) !important;
    color: #fee900 !important;
}

	/* Active top-level item */
	#mobile_user_menu .dropmenu > li > a.active {

    background: linear-gradient(to bottom, #36373d 0%, #2c2d32 100%) !important;
    color: #fee900 !important;
    font-weight: 700 !important;
}

	/***************************************
	 * 3) SUB-MENU BACKGROUND (KEEP DARK, NO WHITE)
	 ***************************************/
	#mobile_user_menu .dropmenu li ul li a {

    background: #1b1c20 !important;
    color: #d4d4d4 !important;
}

	#mobile_user_menu .dropmenu li ul,
	#mobile_user_menu .dropmenu li ul li {

    border: none !important;
    box-shadow: none !important;
}

	/* Remove the white highlight on expanded sections */
	#mobile_user_menu .dropmenu li ul {

    background: none !important;
}

}

/* SZ: mobile main menu – keep solid gradient panel, text-only hover */
@media screen and (max-width: 720px) {

	/* Gradient lives on the panel itself */
	#mobile_user_menu .popup_window {
		background: linear-gradient(#1c1c1e 0%, #28292b 70%) !important;
	}

	/* Top-level items: transparent background, no per-button gradient */
	#mobile_user_menu .dropmenu > li > a {

    background: transparent !important;
    color: #e3e3e3 !important;
    border: none !important;
}

	/* Hover/focus: only text color changes to yellow */
	#mobile_user_menu .dropmenu > li > a:hover,
	#mobile_user_menu .dropmenu > li > a:focus {

    background: transparent !important;
    color: #fee900 !important;
}

	/* Active item: still yellow + bold, but no background change */
	#mobile_user_menu .dropmenu > li > a.active,
	#mobile_user_menu .dropmenu > li > a.active:hover,
	#mobile_user_menu .dropmenu > li > a.active:focus {

    background: transparent !important;
    color: #fee900 !important;
    font-weight: 700 !important;
}

}

/* SZ: mobile menu links – no underline, smooth yellow hover */
@media screen and (max-width: 720px) {
	#mobile_user_menu .dropmenu a {

    text-decoration: none !important;
    transition: color 0.18s ease;
}

	#mobile_user_menu .dropmenu a:hover,
	#mobile_user_menu .dropmenu a:focus {

    text-decoration: none !important;
    color: #fee900 !important;
}

}

/* SZ: rounded corners for mobile menu popup */
@media screen and (max-width: 720px) {

	#mobile_user_menu .popup_window {
		border-radius: 10px !important;   /* smooth rounded shape */
		overflow: hidden !important;      /* ensures inner sections follow the curve */
	}

	/* Also round the submenus so they match */
	#mobile_user_menu .popup_window .description,
	#mobile_user_menu .popup_window .windowbg,
	#mobile_user_menu .popup_window .windowbg2 {
		border-radius: 0 !important;      /* keep inside flush */
	}
}

/* SZ: mobile menu links – no underline, smooth yellow hover */
@media screen and (max-width: 720px) {
    .popup_container .popup_window a,
    #mobile_user_menu .popup_window a {
        text-decoration: none !important;
        transition: color 0.25s ease-in-out;
    }
    .popup_container .popup_window a:hover,
    #mobile_user_menu .popup_window a:hover {
        color: #fee900 !important;
    }
}

/* SZ: FINAL — mobile popup menu centering, alignment, width, rounding */
@media screen and (max-width: 720px) {
    #mobile_user_menu .popup_window {
        position: fixed !important;
        left: 50% !important;
        transform: translateX(-50%);
        top: 44px !important;

        width: calc(100% - 14px) !important;
        max-width: 520px !important;

        margin: 0 !important;
        height: auto !important;
        max-height: calc(100vh - 60px) !important;

        border-radius: 10px !important;
        overflow: hidden !important;
    }
}

/* SZ: control mobile main menu visibility only via JS toggle */
@media screen and (max-width: 720px) {

	/* Hidden by default on small screens */
	#mobile_user_menu.popup_container {
		display: none !important;
	}

	/* Shown only when body has our "menu open" class */
	body.sz-mobile-menu-open #mobile_user_menu.popup_container {
		display: block !important;
	}
}

/* SZ — Make the User actions close icon a white X on mobile */
@media screen and (max-width: 720px) {

    /* Target the close icon inside the mobile_action popup heading */
    #mobile_action .popup_heading a.main_icons.hide_popup {
        background: none !important;
        text-indent: 0 !important;
        width: 22px !important;
        height: 22px !important;
        display: inline-block !important;
    }

    #mobile_action .popup_heading a.main_icons.hide_popup::before {
        content: "✕" !important;
        background: none !important;
        color: #ffffff !important;   /* white */
        font-size: 20px !important;
        line-height: 22px !important;
        font-weight: 600;
        text-indent: 0 !important;
    }
}

/* SZ 2025-11-14 — Desktop main menu: Sonic Zone bar */

/* SZ 2025-11-14 — MENU button arrow */
.button_menu > a .textmenu::after {
	content: "";
	display: inline-block;
    width: 16px;
    height: 10px;
	margin-left: 6px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
    opacity: 0.85;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'><polyline points='4,4 12,12 20,4' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    transform: translateY(0);
}

@media (min-width: 721px) {

  /* Red gradient wrapper behind the menu */
  #upper_section {
    /* keep upper card clean; background handled by white card styles below */
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 auto 16px !important;
    border: 0 !important;
  }

  #upper_section #inner_section {
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    min-height: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  #upper_section .user {
    padding: 0 4px 0 4px !important;  /* remove bottom padding so menu sits higher */
  }

  #main_menu {

    margin: 0 0 0 auto !important;
    background: linear-gradient(to bottom, #ff4a4a 0%, #900000 100%) !important;
    border-radius: 10px;
    padding: 2px 28px 5px 28px;  /* slightly taller ribbon */
    box-shadow: 0 4px 10px rgba(0,0,0,0.35);
}

  /* Menu list: transparent, centered, with spacing between buttons */
  #main_menu ul.menu_nav {

    display: flex;
    justify-content: flex-end;
    align-items: center;                  /* vertically center items */;
    flex-wrap: nowrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    background: transparent !important;
    border-radius: 0;
    border: none !important;
    box-shadow: none !important;
}

  #main_menu ul.menu_nav > li {

    margin: 0;
    padding: 0;
    float: none;
}

  #main_menu ul.menu_nav > li {

    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

  /* Button appearance */
  #main_menu ul.menu_nav > li > a {

    position: relative;
    display: inline-flex;
    align-items: center;                  /* center text vertically within the link */;
    justify-content: flex-end;
    padding: 9px 18px 9px 18px !important;  /* symmetric vertical padding after container fixes */  /* shift text up ~2 more px */  /* shift text + bars up ~2px */  /* symmetric vertical padding for better centering */         /* slight bottom bias to visually center text */;
    font-family: "SZ Menu", "Berlin Sans FB", "Berlin Sans FB Demi", "Trebuchet MS", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 1.3rem;
    line-height: 1.1;
    color: #ffffff !important;
    background: transparent !important;
    border: none !important;
    text-decoration: none !important;
    white-space: nowrap;
}

  #main_menu ul.menu_nav,
  #main_menu ul.menu_nav > li > a {

    border: none !important;
    box-shadow: none !important;
    background-image: none !important;
}

  #main_menu ul.menu_nav .main_icons,
  #main_menu ul.menu_nav img {

    display: none !important;
}

  #main_menu ul.menu_nav .button_botbanish {

    display: none !important;
}

  /* SZ 2025-11-14 — hide legacy core buttons on desktop (grouped into MENU) */
  #main_menu ul.menu_nav > li.button_home,
  #main_menu ul.menu_nav > li.button_search,
  #main_menu ul.menu_nav > li.button_admin,
  #main_menu ul.menu_nav > li.button_moderate,
  #main_menu ul.menu_nav > li.button_mlist,
  #main_menu ul.menu_nav > li.button_new_topic {

    display: none !important;
}

  /* Active item: yellow text only */
  #main_menu ul.menu_nav > li.active > a,
  #main_menu ul.menu_nav > li.current > a,
  #main_menu ul.menu_nav > li.selected > a,
  #main_menu ul.menu_nav > li > a.active {

    background: transparent !important;
    color: #ffd800 !important;
}

  /* Ensure active item has no bars */
  #main_menu ul.menu_nav > li.active > a::before,
  #main_menu ul.menu_nav > li.active > a::after,
  #main_menu ul.menu_nav > li.current > a::before,
  #main_menu ul.menu_nav > li.current > a::after,
  #main_menu ul.menu_nav > li.selected > a::before,
  #main_menu ul.menu_nav > li.selected > a::after,
  #main_menu ul.menu_nav > li > a.active::before,
  #main_menu ul.menu_nav > li > a.active::after {

    background: transparent !important;
}

  /* Yellow bars above & below, edge-to-edge per button and reaching near bar edges */
  #main_menu ul.menu_nav > li > a::before,
  #main_menu ul.menu_nav > li > a::after {

    content: "";
    position: absolute;
    left: -6px;
    right: -6px;
    height: 4px;
    background: transparent;
    pointer-events: none;
}

  #main_menu ul.menu_nav > li > a::before {

    top: -5px;  /* nudged down 5px */        /* pushed further up to touch ribbon edge */;
}

  #main_menu ul.menu_nav > li > a::after {

    bottom: -6px;  /* nudged up 2px */;
}

  /* Hover: yellow text + yellow bars, no underline */
  #main_menu ul.menu_nav > li:not(.active):not(.current):not(.selected) > a:hover {

    color: #ffd800 !important;
    background: transparent !important;
    text-decoration: none !important;
}

  #main_menu ul.menu_nav > li:not(.active):not(.current):not(.selected) > a:hover::before,
  #main_menu ul.menu_nav > li:not(.active):not(.current):not(.selected) > a:hover::after {

    background: #ffd800;
}

  #main_menu ul.menu_nav a:hover {

    text-decoration: none !important;
}

  /* Sonic-style dropdowns for main menu submenus (desktop/tablet only) */
  #main_menu .dropmenu li ul {

    background: linear-gradient(#1c1c1e 0%, #28292b 70%) !important;  /* match hamburger menu */;
    border-radius: 4px !important;
    border: 1px solid rgba(0, 0, 0, 0.6) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45) !important;
    padding: 6px 0 !important;
    min-width: 14em;
    margin-top: 0px !important;
}

  #main_menu .dropmenu li li {

    width: auto;
    background: transparent !important;
}

  #main_menu .dropmenu li li {

    border: none !important;
}

  #main_menu .dropmenu li li:hover {

    border: none !important;
}

  #main_menu .dropmenu li li a {

    position: relative;                    /* anchor yellow bars to this row */;
    color: #f5f5f5 !important;
    padding: 6px 16px !important;
    line-height: 1.8em !important;
    border-radius: 4px !important;
    background: transparent !important;
    border: 1px solid transparent !important;   /* no strong outline by default */;
    box-sizing: border-box !important;
}

  /* Submenu Sonic-style yellow bars on hover — per row, not full menu width */
  #main_menu .dropmenu li li > a::before,
  #main_menu .dropmenu li li > a::after {

    content: "";
    position: absolute;
    left: 6px;              /* almost full width */;
    right: 6px;
    height: 3px;
    background: transparent;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 160ms ease-out, background-color 160ms ease-out;
    pointer-events: none;
}

  #main_menu .dropmenu li li > a::before {

    top: 0px;                /* very close to top edge of row */;
}

  #main_menu .dropmenu li li > a::after {

    bottom: 0px;
}

  #main_menu .dropmenu li li:hover > a::before,
  #main_menu .dropmenu li li:hover > a::after {

    background: #ffd800;
    transform: scaleX(1);
}

  /* Softer hover: Sonic hamburger-style highlight */
  #main_menu .dropmenu li li:hover > a,
  #main_menu .dropmenu li li a:hover,
  #main_menu .dropmenu li li a:focus {

    background: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

}

/* SZ 2025-11-14 — Desktop main menu: Sonic Zone bar (970px band refinement) */
@media (min-width: 720px) and (max-width: 970px) {
  /* Extra tightening for the narrowest desktop/tablet band so items don't wrap */
  #main_menu ul.menu_nav {

    gap: 10px;
}

  #main_menu ul.menu_nav > li > a {

    padding: 9px 16px 9px 16px !important;
    font-size: 1.10rem;
}

}

/* SZ 2025-11-14 — Desktop main menu: Sonic Zone bar (720–880px fine-tune) */
@media (min-width: 720px) and (max-width: 880px) {
  /* Extra tightening for narrow desktop widths just above tablet breakpoint */
  #main_menu ul.menu_nav {

    gap: 8px;
}

  #main_menu ul.menu_nav > li > a {

    padding: 8px 14px 8px 14px !important;
    font-size: 1.00rem;
    letter-spacing: 0.11em;
}

}

/* SZ 2025-11-14 — Desktop main menu: Sonic Zone bar (970–1200px compression) */
@media (min-width: 970px) and (max-width: 1200px) {
  /* Keep desktop red menu consistent with full desktop sizing */
  #main_menu ul.menu_nav {

    gap: 8px;
}

  #main_menu ul.menu_nav > li > a {

    padding: 9px 18px 9px 18px !important;
    font-size: 1.3rem;
    letter-spacing: 0.14em;
}

}

/* SZ 2025-02-14 — Fix ribbon text crowding at 770–719px */
@media screen and (max-width: 770px) and (min-width: 719px) {
	#main_menu a {

    padding-left: 14px !important;
    font-size: 0.92rem !important; /* Slight shrink, barely noticeable */;
    letter-spacing: 0.5px; /* Keeps Sonic look */;
}

}

/* SZ 2025-11-14 — Mobile popup menu: hide Sonic desktop-only content links */
@media screen and (max-width: 720px) {
  #mobile_user_menu .button_roms,
  #mobile_user_menu .button_music,
  #mobile_user_menu .button_shows,
  #mobile_user_menu .button_extras,
  #mobile_user_menu .button_discord {
    display: none !important;
  }
}

/* SZ 2025-11-15 — Submenu vertical alignment (Admin row) */
@media (min-width: 720px) {
  #main_menu .dropmenu li ul ul {

    margin-top: -47px !important;
}

}

/* SZ 2025-11-15 — Submenu hover bridge to reduce flicker (desktop only) */
@media (min-width: 720px) {
  #main_menu .dropmenu li.subsections {

    position: relative;
}

  #main_menu .dropmenu li.subsections::after {

    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    width: 18px;              /* small horizontal buffer towards child submenu */;
    background: transparent;  /* invisible, only used for :hover area */;
}

}

/* SZ 2025-11-15 — Make submenu parents (Admin/Moderate/Members) use same hover style as normal items */
@media (min-width: 720px) {
  #main_menu .dropmenu li.subsections:hover > a,
  #main_menu .dropmenu li li.subsections:hover > a,
  #main_menu .dropmenu li li.subsections > a:hover {

    background: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
}

}

/* SZ 2025-11-15 — Make submenu parents' yellow bars match normal items (desktop only) */
@media (min-width: 720px) {
  #main_menu .dropmenu li li.subsections > a::after {

    content: none !important;   /* remove SMF arrow pseudo-element */;
    padding: 0 !important;      /* remove extra vertical padding it adds */;
}

}

/* SZ 2025-11-15 — Unify top & bottom yellow bars for submenu parents (Admin/Moderate/Members) */
@media (min-width: 720px) {
  #main_menu .dropmenu li li.subsections > a::before,
  #main_menu .dropmenu li li.subsections > a::after {

    content: "" !important;
    position: absolute;
    left: 6px;
    right: 6px;
    height: 3px;
    background: transparent;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 160ms ease-out, background-color 160ms ease-out;
    pointer-events: none;
}

  #main_menu .dropmenu li li.subsections > a::before {

    top: 0px;
}

  #main_menu .dropmenu li li.subsections > a::after {

    bottom: 0px;
}

  #main_menu .dropmenu li li.subsections:hover > a::before,
  #main_menu .dropmenu li li.subsections:hover > a::after {

    background: #ffd800;
    transform: scaleX(1);
}

}

/* SZ 2025-11-15 — Sonic-style bar animation for top-level menu buttons (desktop only) */
@media (min-width: 720px) {
  #main_menu ul.menu_nav > li > a::before,
  #main_menu ul.menu_nav > li > a::after {

    transform: scaleX(0);
    transform-origin: center;
    transition: transform 160ms ease-out, background-color 160ms ease-out;
}

  #main_menu ul.menu_nav > li:not(.active):not(.current):not(.selected) > a:hover::before,
  #main_menu ul.menu_nav > li:not(.active):not(.current):not(.selected) > a:hover::after {

    transform: scaleX(1);
}

}

/* SZ 2025-11-15 — Subtle black outline around main desktop menu text */
@media (min-width: 720px) {
  #main_menu ul.menu_nav > li > a {

      0 0 1px rgba(0,0,0,0.55),
      0 0 2px rgba(0,0,0,0.45);

    text-shadow: ;
}

}

/* SZ 2025-11-15 — Slightly stronger outline + dropdown offset */
@media (min-width: 720px) {

  /* Stronger outline for main menu buttons */
  #main_menu ul.menu_nav > li > a {

      0 0 2px rgba(0,0,0,0.65),
      0 0 3px rgba(0,0,0,0.55);

    text-shadow: ;
}

  /* Drop submenu down slightly below ribbon */
  #main_menu .dropmenu li ul {

    margin-top: 8px !important; /* was 2px */;
}

}

/* SZ 2025-11-15 — Top-level hover bridge to stop MENU submenu flicker (desktop only) */
@media (min-width: 720px) {
  #main_menu .dropmenu > li {

    position: relative;
}

  #main_menu .dropmenu > li::after {

    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 10px;              /* buffer directly under each top item */;
    background: transparent;
}

}

/* SZ 2025-11-15 — Desktop hover bridge under top-level menu buttons */
@media (min-width: 801px) {
	#main_menu .dropmenu > li.subsections {

    position: relative;
}

	#main_menu .dropmenu > li.subsections::after {

    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 10px; /* invisible bridge so hover doesn't drop when moving down */;
    background: transparent;
}

}

/* SZ 2025-11-15 — Nudge first-level submenu up to remove hover gap (desktop only) */
@media (min-width: 720px) {
  #main_menu .dropmenu > li > ul {

    margin-top: -4px !important; /* small overlap with ribbon to prevent flash */;
}

}

/* /* SZ 2025-11-15 — Wider mobile hamburger icon (SVG override) */
@media screen and (max-width: 720px) {
  #top_section .mobile_user_menu .menu_icon {

    width: 34px; /* slightly smaller hitbox horizontally */;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 26px 20px; /* slight vertical exaggeration */;
    filter: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 24' fill='none'><g stroke='%23cccccc' stroke-width='2.4' stroke-linecap='round'><line x1='4' y1='5' x2='28' y2='5'/><line x1='4' y1='12' x2='28' y2='12'/><line x1='4' y1='19' x2='28' y2='19'/></g></svg>");
}

}
/* SZ 2025-11-15 — Hamburger slide+fade animation */
@media screen and (max-width: 720px) {
  #top_section .mobile_user_menu .menu_icon {

    transition: transform .2s ease, opacity .2s ease;
    opacity: 1;
}

  body.sz-mobile-menbody.sz-mobile-menu-open #top_section .mobile_user_menu .menu_icon {

    transform: none;
    opacity: 1;
}

}

/* SZ 2025-11-15 — Mobile hamburger scale+fade animation (mobile only) */
@media screen and (max-width: 720px) {
  #top_section .mobile_user_menu .menu_icon {

    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: scale(0.9);
    opacity: 0.8;
}

  body.sz-mobile-menu-open #top_section .mobile_user_menu .menu_icon {

    transform: scale(1.05);
    opacity: 1;
}

  body:not(.sz-mobile-menu-open) #top_section .mobile_user_menu .menu_icon {

    transform: scale(0.9);
    opacity: 0.8;
}

}

/* SZ 2025-11-15 — Top-bar mail + alerts nudged left */
#top_info span.main_icons.inbox::before {
    transform: translateX(-4px);
}

#top_info span.main_icons.alerts::before {
    transform: translate(-4px, -1px);
}

/* SZ 2025-11-15 — Top-bar mail + alerts alignment fix */
#top_info span.main_icons.inbox::before {
    transform: none; /* re-center icon inside its button */
}

#top_info span.main_icons.alerts::before {
    transform: translateY(0);
}

#pm_menu_top,
#alerts_menu_top {
    margin-left: -4px; /* nudge entire buttons closer to profile */
}

/* SZ 2025-11-15 — Desktop profile arrow matches mobile chevron */
@media (min-width: 720px) {
  #profile_menu_top::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 8px;
    margin-left: 6px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.85;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'><polyline points='4,4 12,12 20,4' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  }

  #profile_menu_top:hover::after,
  #profile_menu_top:active::after {
    opacity: 1;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'><polyline points='4,4 12,12 20,4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  }
}

/* SZ 2025-11-16 — Desktop/Tablet MENU chevron opacity states */
@media (min-width: 721px) {
	.button_menu > a:hover .textmenu::after,
	.button_menu > a:focus .textmenu::after {
		opacity: 0.95;
	}
	.button_menu:hover > a .textmenu::after {
		opacity: 1;
	}
}

/* SZ 2025-11-16 — Admin active tab pill: Sonic purple, no glow, no underline */
body.action_admin .generic_menu .dropmenu a.active,
body.action_admin #genericmenu .dropmenu > li.active > a {

    background: #43359D !important;   /* solid Sonic purple */;
    color: #ffffff !important;
    border: 1px solid transparent !important;  /* remove visible border/bottom line */;
    box-shadow: none !important;               /* kill glow effect */;
    text-shadow: none !important;
    text-decoration: none !important;
    transition: background 0.18s ease-in-out;
}

/* Hover/focus while active: slightly brighter purple, still no glow/border */
body.action_admin .generic_menu .dropmenu a.active:hover,
body.action_admin .generic_menu .dropmenu a.active:focus,
body.action_admin #genericmenu .dropmenu > li.active > a:hover,
body.action_admin #genericmenu .dropmenu > li.active > a:focus {

    background: #5141BF !important;
    color: #ffffff !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* SZ 2025-11-16 — Remove MENU chevron completely */
.button_menu > a .textmenu::after {
    display: none !important;
    content: none !important;
}

/* SZ 2025-11-16 — Remove MENU chevron + remove its spacing */
.button_menu > a .textmenu::after {
    display: none !important;
    content: "" !important;
}

.button_menu > a .textmenu {
    padding-right: 0 !important;
    margin-right: 0 !important;
}

/* SZ 2025-11-16 — Logo vertical centering between top bar and red ribbon */
#header h1.forumtitle {
    padding-top: 32px !important;
}

#header .forumtitle img {
    padding-top: 28px !important;
}

/* SZ 2025-11-15 — Admin mobile menu: match Sonic main mobile menu */
@media screen and (max-width: 720px) {

	/* Gradient panel + rounded corners for admin/generic mobile popups */
	div[id^="mobile_generic_menu_"].popup_container .popup_window {
		background: linear-gradient(#1c1c1e 0%, #28292b 70%) !important;
		border-radius: 10px !important;
		overflow: hidden !important;
	}

	/* Top-level items: transparent background, Sonic text colors */
	div[id^="mobile_generic_menu_"] .dropmenu > li > a {

    background: transparent !important;
    color: #e3e3e3 !important;
    border: none !important;
}

	div[id^="mobile_generic_menu_"] .dropmenu > li > a:hover,
	div[id^="mobile_generic_menu_"] .dropmenu > li > a:focus {

    background: transparent !important;
    color: #fee900 !important;
}

	div[id^="mobile_generic_menu_"] .dropmenu > li > a.active,
	div[id^="mobile_generic_menu_"] .dropmenu > li > a.active:hover,
	div[id^="mobile_generic_menu_"] .dropmenu > li > a.active:focus {

    background: transparent !important;
    color: #fee900 !important;
    font-weight: 700 !important;
}

	/* Submenus: dark inner background like main mobile menu */
	div[id^="mobile_generic_menu_"] .dropmenu li ul,
	div[id^="mobile_generic_menu_"] .dropmenu li ul li,
	div[id^="mobile_generic_menu_"] .dropmenu li ul li a {

    background: #1b1c20 !important;
    border: none !important;
    box-shadow: none !important;
    color: #e2e2e2 !important;
}

	div[id^="mobile_generic_menu_"] .dropmenu li ul li a:hover,
	div[id^="mobile_generic_menu_"] .dropmenu li ul li a:focus {

    background: #222327 !important;
    color: #fee900 !important;
}

}

/* SZ 2025-11-16 — Admin mobile popup close X: match main mobile white X */
@media screen and (max-width: 720px) {
	body.action_admin div[id^="mobile_generic_menu_"] .popup_heading a.main_icons.hide_popup {
		background: none !important;
		text-indent: 0 !important;
		overflow: visible !important;
		width: auto !important;
		height: auto !important;
		line-height: 1 !important;
		font-size: 20px !important;
		color: #fff !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		text-decoration: none !important;
	}

	body.action_admin div[id^="mobile_generic_menu_"] .popup_heading a.main_icons.hide_popup::before {
		content: "×";
		font-weight: 700;
		color: #fff;
		background: none !important;
	}
}

/* SZ 2025-11-16 — Admin menus: no underline on hover/focus (desktop + mobile) */
body.action_admin .generic_menu a:hover,
body.action_admin .generic_menu a:focus,
body.action_admin #adm_submenus a:hover,
body.action_admin #adm_submenus a:focus,
body.action_admin div[id^="mobile_generic_menu_"] .dropmenu a:hover,
body.action_admin div[id^="mobile_generic_menu_"] .dropmenu a:focus {

    text-decoration: none !important;
}

/* SZ 2025-11-16 — Admin mobile popup X hover: Sonic yellow */
@media screen and (max-width: 720px) {
	body.action_admin div[id^="mobile_generic_menu_"] .popup_heading a.main_icons.hide_popup:hover::before,
	body.action_admin div[id^="mobile_generic_menu_"] .popup_heading a.main_icons.hide_popup:focus::before {
		color: #fee900 !important;
	}
}

/* SZ desktop-only tighter content padding */
@media (min-width: 721px) {
    #content_section {
        padding: 3px 2px 2px 2px !important;
    }
    #main_content_section {
        padding: 2px !important;
    }
}

/* SZ desktop-only larger roundness for outer white card */
@media (min-width: 721px) {
    #upper_section,
    #content_section {
        border-radius: 14px !important;
    }
}

/* SZ desktop-only stronger rounding for category headers */
@media (min-width: 721px) {
    h3.catbg {
        border-radius: 14px 14px 0 0 !important;
        overflow: hidden;
    }
}

/* SZ desktop-only stronger rounding for category top bar */
@media (min-width: 721px) {
    .cat_bar {
        border-radius: 14px 14px 0 0 !important;
        overflow: hidden !important;
    }
}

/* SZ mobile-only tighter outer content padding */
@media screen and (max-width: 720px) {
    #content_section {
        padding: 2px !important;
    }
}

/* SZ mobile-only: remove roundness on category sections */
@media screen and (max-width: 720px) {
    .cat_bar {
        border-radius: 0 !important;
    }
    .cat_bar + .windowbg,
    .cat_bar + .roundframe {
        border-radius: 0 !important;
    }
}

/* SZ 2025-11-16 — Mobile profile chevron: replace text arrow with SVG chevron, single only */
@media (max-width: 720px) {
    /* Remove any text-based arrow and draw our own via background SVG */
    #profile_menu_top::after {
        content: "";
        display: inline-block;
        width: 10px;
        height: 8px;
        margin-left: 4px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 10px 8px;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e3e3e3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6,9 12,15 18,9'/></svg>");
    }

    #profile_menu_top.open::after {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e3e3e3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6,15 12,9 18,15'/></svg>");
    }
}

/* SZ 2025-11-16 — Mobile profile chevron: single large arrow, flips on open */
@media (max-width: 720px) {
    /* Neutralize old background-image based chevron on mobile */
    #profile_menu_top::after,
    #profile_menu_top.open::after {
        background-image: none !important;
        background-size: auto !important;
        background-position: center !important;
        width: auto !important;
        height: auto !important;
        margin-left: 6px !important;
        content: "" !important; /* base cleared; we set below */
        font-size: 13px !important;
        line-height: 1 !important;
        vertical-align: middle;
    }

    /* Closed = single down chevron */
    #profile_menu_top::after {
        content: " \25BC" !important;
    }

    /* Open = single up chevron */
    #profile_menu_top.open::after {
        content: " \25B2" !important;
    }
}

/* SZ 2025-11-16 — Breadcrumb bar styling */
.navigate_section {
    padding: 6px 0;
}

.navigate_section ul {
    border: none;
    box-shadow: none;
    background: transparent;
    margin: 0;
    padding: 4px 10px;
}

/* Ensure items line up nicely and text is vertically centered */
.navigate_section ul li,
.navigate_section ul li span,
.navigate_section ul li a {
    display: inline-block;
    vertical-align: middle;
}

.navigate_section ul li {
    line-height: 1.8em;
}

/* Base breadcrumb links: parents slightly transparent */
.navigate_section ul li a,
.navigate_section ul li em {
    color: rgba(255, 255, 255, 0.65);
    font-weight: 500;
    text-decoration: none;
}

/* Hover on parents: brighten to full white, no underline */
.navigate_section ul li a:hover,
.navigate_section ul li a:focus,
.navigate_section ul li em:hover,
.navigate_section ul li em:focus {
    color: #ffffff;
    text-decoration: none;
}

/* Active page = last crumb: solid white & bold */
.navigate_section ul li.last a,
.navigate_section ul li:last-child a,
.navigate_section ul li.last em,
.navigate_section ul li:last-child em {
    color: #ffffff;
    font-weight: 700;
}

/* Keep hover on active page the same (no visual change) */
.navigate_section ul li.last a:hover,
.navigate_section ul li:last-child a:hover,
.navigate_section ul li.last em:hover,
.navigate_section ul li:last-child em:hover {
    color: #ffffff;
}

/* Replace old ► dividers with subtle white chevrons */
.navigate_section ul li .dividers {
    position: relative;
    color: transparent; /* hide original glyph */
    margin: 0 6px;
}

.navigate_section ul li .dividers::before {
    content: ">";
    color: rgba(255, 255, 255, 0.4);
    font-weight: 700;
}

/* Make sure linktree never underlines on hover */
.navigate_section ul li a,
.navigate_section ul li a:hover {
    text-decoration: none;
}

/* SZ 2025-11-16 — Breadcrumb refinements */
.navigate_section ul li,
.navigate_section ul li span,
.navigate_section ul li a {
    font-family: "Berlin Sans FB", "Trebuchet MS", Arial, sans-serif;
    text-shadow: none !important; /* remove glow */
}

/* Parents: normal weight, slightly transparent, no underline */
.navigate_section ul li a,
.navigate_section ul li em {
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none !important;
}

/* On hover over parents: full white, still no underline */
.navigate_section ul li a:hover,
.navigate_section ul li a:focus,
.navigate_section ul li em:hover,
.navigate_section ul li em:focus {
    color: #ffffff;
    text-decoration: none !important;
}

/* Active page (last crumb) bold + solid white */
.navigate_section ul li.last a,
.navigate_section ul li:last-child a,
.navigate_section ul li.last em,
.navigate_section ul li:last-child em {
    color: #ffffff;
    font-weight: 700;
}

/* Keep hover on active page identical */
.navigate_section ul li.last a:hover,
.navigate_section ul li:last-child a:hover,
.navigate_section ul li.last em:hover,
.navigate_section ul li:last-child em:hover {
    color: #ffffff;
    text-decoration: none !important;
}

/* Fully hide original divider glyph, use larger chevron instead */
.navigate_section ul li .dividers {
    color: transparent !important;
    font-size: 0; /* hide original arrow completely */
    margin: 0 10px;
}

.navigate_section ul li .dividers::before {
    content: ">";
    display: inline-block;
    font-size: 18px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 700;
    vertical-align: middle;
}

/* SZ 2025-11-16 — Breadcrumb underline + sizing tweak */
/* Kill any underline from global link rules inside breadcrumbs */
.navigate_section ul li a,
.navigate_section ul li a:hover,
.navigate_section ul li a:focus,
.navigate_section ul li a span,
.navigate_section ul li a:hover span,
.navigate_section ul li a:focus span {
    text-decoration: none !important;
}

/* Vertically center chevrons a bit better */
.navigate_section ul li .dividers::before {
    position: relative;
    top: 1px;
}

/* Desktop (Big) breadcrumb font size bump */
@media (min-width: 721px) {
    .navigate_section ul li,
    .navigate_section ul li span,
    .navigate_section ul li a {
        font-size: 1.02rem;
    }
}

/* SZ 2025-11-16 — Force-remove underline & adjust chevron vertical alignment */
.navigate_section * {
    text-decoration: none !important;
}

/* Kill all inherited underline rules even inside spans */
.navigate_section ul li a,
.navigate_section ul li a:hover,
.navigate_section ul li a:focus,
.navigate_section ul li span,
.navigate_section ul li span:hover,
.navigate_section ul li span:focus {
    text-decoration: none !important;
}

/* Stronger reset against global theme underlines */
.navigate_section a,
.navigate_section a:hover,
.navigate_section a:focus,
.navigate_section a:visited {
    text-decoration: none !important;
}

/* Better chevron vertical alignment */
.navigate_section ul li .dividers::before {
    position: relative;
    top: 3px;  /* shift down more */
    font-size: 18px;
    line-height: 1;
}

/* SZ 2025-11-16 — Breadcrumb gradient + text shadow */
/* Background now inherited from .cat_bar animation */

/* Subtle crisp text shadow for readability */
.navigate_section ul li a,
.navigate_section ul li span {
    text-shadow: 0 1px 2px rgba(0,0,0,0.65) !important;
}

/* SZ 2025-11-16 — Hide topic title from breadcrumbs */
.navigate_section ul li.last,
.navigate_section ul li:last-child {
    display: none !important;
}

/* Ensure no chevron remains before the hidden item */
.navigate_section ul li.last .dividers,
.navigate_section ul li:last-child .dividers {
    display: none !important;
}

/* SZ 2025-11-16 — Remove topic title breadcrumb on topic pages too */

/* SMF sometimes outputs last crumb differently on topic pages.
   This catches ALL final breadcrumbs universally. */
.navigate_section ul li.last,
.navigate_section ul li:last-child,
.navigate_section ul li:last-child > a,
.navigate_section ul li:last-child > span {
    display: none !important;
}

/* Hide the divider before it as well */
.navigate_section ul li:last-child .dividers {
    display: none !important;
}

/* SZ 2025-11-16 — Sonic breadcrumbs strip (visual + animation) */
/* Uses existing @keyframes colorAnimation (same as cat_bar) but ONLY for breadcrumbs */

.navigate_section {
    /* container position within card */
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    padding: 0 !important;

    /* shape only; background + animation inherited from .cat_bar */
    border-radius: 14px !important;
    overflow: hidden !important;
}

/* Inner list: single strip, no extra gradient box */
.navigate_section ul {
    margin: 0 !important;
    padding: 6px 16px !important;
    list-style: none !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Sonic type styling */
.navigate_section ul li,
.navigate_section ul li a,
.navigate_section ul li span {
    display: inline-block !important;
    vertical-align: middle !important;
    font-family: "Berlin Sans FB", "Trebuchet MS", Arial, sans-serif !important;
    text-transform: uppercase !important;
    font-weight: 400 !important;
    color: #ffffff !important;
    text-shadow: none !important;
}

/* Kill any underline from global rules */
.navigate_section a,
.navigate_section a:hover,
.navigate_section a:focus,
.navigate_section a:visited {
    text-decoration: none !important;
}

/* Parent breadcrumb hover: fade to Sonic yellow */
.navigate_section ul li:not(.last):not(:last-child) > a:hover,
.navigate_section ul li:not(.last):not(:last-child) > span:hover {
    color: #FEE900 !important;
}

/* Chevron separators: subtle and aligned */
.navigate_section ul li .dividers {
    color: transparent !important;
    font-size: 0 !important;
    margin: 0 8px !important;
}
.navigate_section ul li .dividers::before {
    content: ">" !important;
    display: inline-block !important;
    font-size: 15px !important;
    line-height: 1 !important;
    color: rgba(255, 255, 255, 0.25) !important;
    font-weight: 700 !important;
    position: relative !important;
    top: 0 !important;
}

/* SZ 2025-11-16 — Hide topic title crumb on topic pages */
body.action_display #main_content_section .navigate_section ul li.last {
    display: none;
}

/* SZ 2025-11-16 — Breadcrumb bar animated background (final) */
/* SZ 2025-11-16 — Breadcrumb gradient animation (fallback approach) */
@keyframes breadcrumbGradient {
  0% {
    background-position: 0% 50%;
  }
}

/* SZ 2025-12-03 — Breadcrumb strip: cat_bar-style solid color animation (all sizes) */
/* Uses existing @keyframes colorAnimation (same as cat_bar) and global JS offset */
html.sz-anim-ready .navigate_section {
  background-image: none !important;                 /* no gradient, solid only */
  animation: colorAnimation 130s ease infinite !important;
  animation-delay: var(--sz-gradient-offset, 0s) !important;
}

/* SZ 2025-11-16 — Desktop/tablet board index: only first category rounded */
@media screen and (min-width: 721px) {
    /* Square all board index category headers by default */
    .boardindex_table .cat_bar {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    /* Keep the first board index category header rounded */
    .boardindex_table:first-of-type .cat_bar {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
}

/* SZ 2025-11-16 — Board index: only first category rounded on Big/Medium */
@media screen and (min-width: 721px) {
    /* Square all board index category headers by default */
    #boardindex_table .cat_bar {
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
    }

    /* Keep only the very first category header rounded */
    #boardindex_table .cat_bar:first-of-type {
        border-top-left-radius: 5px !important;
        border-top-right-radius: 5px !important;
    }
}

/* SZ 2025-11-16 — Restore rounded top corners ONLY for the first category */
@media screen and (min-width: 721px) {
    #boardindex_table .main_container:first-of-type .cat_bar {
        border-top-left-radius: 8px !important;
        border-top-right-radius: 8px !important;
    }
}

/* SZ 2025-11-16 — Replace category toggle icons with ^ / v text */
.toggle_up:before,
.toggle_down:before {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 8px 0 0 !important;
    font-size: 18px !important;
    line-height: 1 !important;
    color: #ffffff !important;
    content: "^" !important;
}

/* Collapsed state uses v */
.toggle_down:before {
    content: "v" !important;
}

/* SZ 2025-11-16 — Adjusted chevron positioning & proper glyphs */

/* Base chevron styles */
.toggle_up:before,
.toggle_down:before {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    font-size: 18px !important;
    line-height: 1 !important;
    color: #ffffff !important;
    position: relative !important;
    right: -5px !important; /* move right */
}

/* Expanded = up chevron (nudge down 2px) */
.toggle_up:before {
    content: "▴" !important;   /* true up chevron */
    top: 0 !important;
}

/* Collapsed = down chevron (nudge up 2px) */
.toggle_down:before {
    content: "▾" !important;   /* true down chevron */
    top: -2px !important;
}

/* SZ 2025-11-16 — Category chevrons: centered SVG up/down */
.toggle_up:before,
.toggle_down:before {
    content: "" !important;
    display: inline-block !important;
    width: 24px !important;
    height: 16px !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 24px 16px !important;
    vertical-align: middle !important;
    position: relative !important;
    right: -5px !important; /* nudge to the right */
    top: 0 !important;      /* center vertically */
    border: none !important;
    box-shadow: none !important;
}

/* Expanded = up chevron */
.toggle_up:before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'><polyline points='3,11 12,5 21,11' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
}

/* Collapsed = down chevron */
.toggle_down:before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'><polyline points='3,5 12,11 21,5' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
}

/* SZ 2025-11-16 — Simple text chevrons, centered, no icon box */
#boardindex_table .toggle_up::before,
#boardindex_table .toggle_down::before {
    /* remove old icon box */
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;

    /* position + size */
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 8px 0 0 !important;
    font-size: 22px !important;
    line-height: 1 !important;
    color: #ffffff !important;
    position: relative !important;
    right: -5px !important; /* nudge to the right */
    top: 0 !important;      /* start centered */
}

/* Expanded = up chevron */
#boardindex_table .toggle_up::before {
    content: "∧" !important;
}

/* Collapsed = down chevron */
#boardindex_table .toggle_down::before {
    content: "∨" !important;
}

/* SZ 2025-11-16 — Widen chevron hitbox & glyph */
#boardindex_table .toggle_up::before,
#boardindex_table .toggle_down::before {
    /* widen clickable/visual area */
    display: inline-block !important;
    width: 32px !important;   /* wider hitbox */
    height: 22px !important;  /* taller for easier centering */
    text-align: center !important;

    /* bigger chevrons */
    font-size: 26px !important;
    line-height: 22px !important;
}

/* Up chevron */
#boardindex_table .toggle_up::before {
    content: "∧" !important;
}

/* Down chevron */
#boardindex_table .toggle_down::before {
    content: "∨" !important;
}

/* SZ 2025-11-16 — Large centered SVG chevrons for all layouts */
#boardindex_table .toggle_up::before,
#boardindex_table .toggle_down::before {
    content: "" !important;
    display: inline-block !important;

    /* Larger & wider hitbox */
    width: 32px !important;
    height: 28px !important;

    /* Center the SVG perfectly */
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 30px 20px !important;

    vertical-align: middle !important;
    position: relative !important;
    top: 0 !important;
    right: -6px !important;

    border: none !important;
    box-shadow: none !important;
}

/* Expanded = UP chevron (thick stroke) */
#boardindex_table .toggle_up::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'><polyline points='4,14 15,6 26,14' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
}

/* Collapsed = DOWN chevron (thick stroke) */
#boardindex_table .toggle_down::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'><polyline points='4,6 15,14 26,6' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
}

/* SZ 2025-11-16 — Chevron transparency */
#boardindex_table .toggle_up::before,
#boardindex_table .toggle_down::before {
    opacity: 0.55 !important; /* softer transparency */
    transition: opacity 0.2s ease-in-out !important;
}

/* On hover: brighten slightly */
#boardindex_table .toggle_up:hover::before,
#boardindex_table .toggle_down:hover::before {
    opacity: 0.85 !important;
}

/* SZ 2025-11-16 — Vertically centered chevrons (final adjustment) */
#boardindex_table .toggle_up::before,
#boardindex_table .toggle_down::before {
    top: 6px !important;     /* nudge DOWN on all layouts */
    line-height: 28px !important;
}

/* SZ 2025-11-16 — Catbar title + chevron vertical centering */
.cat_bar h3 {
    padding: 7px 12px 7px 12px !important; /* even top/bottom */
}

#boardindex_table .toggle_up::before,
#boardindex_table .toggle_down::before {
    top: 1px !important;  /* subtle nudge down from text baseline */
}

/* SZ 2025-11-16 — Lower category titles for vertical centering */
.cat_bar h3 {
    padding-top: 10px !important;
    padding-bottom: 4px !important;
}

/* SZ 2025-11-16 — Nudge chevrons up by 3px */
#boardindex_table .toggle_up::before,
#boardindex_table .toggle_down::before {
    top: -3px !important;
}

/* SZ 2025-11-16 — Mobile title vertical nudge */
@media screen and (max-width: 720px) {
    .cat_bar h3 {
        padding-top: 12px !important; /* was 10px, lower by 2px */
        padding-bottom: 4px !important;
    }
}

/* SZ 2025-11-16 — Mobile chevron nudge up by 1px */
@media screen and (max-width: 720px) {
    #boardindex_table .toggle_up::before,
    #boardindex_table .toggle_down::before {
        top: -4px !important; /* base -3px, mobile needs +1px upward */
    }
}

/* SZ 2025-11-16 — Mobile chevron reset down by 1px */
@media screen and (max-width: 720px) {
    #boardindex_table .toggle_up::before,
    #boardindex_table .toggle_down::before {
        top: -3px !important; /* back down by 1px */
    }
}

/* SZ 2025-11-16 — Increase chevron transparency globally */
#boardindex_table .toggle_up::before,
#boardindex_table .toggle_down::before {
    opacity: 0.40 !important;
}
#boardindex_table .toggle_up:hover::before,
#boardindex_table .toggle_down:hover::before {
    opacity: 0.70 !important;
}

/* SZ 2025-11-16 — Sonic Zone category chevrons (final override) */
#boardindex_table .toggle_up::before,
#boardindex_table .toggle_up:before,
#boardindex_table .toggle_down::before,
#boardindex_table .toggle_down:before {
    /* remove default icon sprite box */
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;

    /* larger, wider hitbox */
    display: inline-block !important;
    width: 32px !important;
    height: 24px !important;
    text-align: center !important;

    /* SVG alignment */
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 30px 18px !important;
    vertical-align: middle !important;
    position: relative !important;
    right: -6px !important;
    top: -3px !important;

    /* transparency & transition */
    opacity: 0.4 !important;
    transition: opacity 0.2s ease-in-out !important;

    content: "" !important;
}

/* Hover transparency */
#boardindex_table .toggle_up:hover::before,
#boardindex_table .toggle_up:hover:before,
#boardindex_table .toggle_down:hover::before,
#boardindex_table .toggle_down:hover:before {
    opacity: 0.7 !important;
}

/* Expanded = UP chevron (thick) */
#boardindex_table .toggle_up::before,
#boardindex_table .toggle_up:before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 18'><polyline points='4,13 15,5 26,13' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
}

/* Collapsed = DOWN chevron (thick) */
#boardindex_table .toggle_down::before,
#boardindex_table .toggle_down:before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 18'><polyline points='4,5 15,13 26,5' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
}

/* SZ 2025-11-16 — Mobile title nudge UP by 2px */
@media screen and (max-width: 720px) {
    .cat_bar h3 {
        padding-top: 10px !important; /* was 12px, move UP by 2px */
        padding-bottom: 4px !important;
    }
}

/* SZ 2025-11-16 — Mobile chevron nudge DOWN by 1px */
@media screen and (max-width: 720px) {
    #boardindex_table .toggle_up::before,
    #boardindex_table .toggle_down::before {
        top: -2px !important; /* was -3px, move DOWN by 1px */
    }
}

/* SZ 2025-11-16 — Slightly thinner chevrons (all displays) */
#boardindex_table .toggle_up::before,
#boardindex_table .toggle_up:before,
#boardindex_table .toggle_down::before,
#boardindex_table .toggle_down:before {
    background-size: 28px 16px !important; /* slightly thinner look */
}

/* Updated UP chevron */
#boardindex_table .toggle_up::before,
#boardindex_table .toggle_up:before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 18'><polyline points='4,13 15,5 26,13' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
}

/* Updated DOWN chevron */
#boardindex_table .toggle_down::before,
#boardindex_table .toggle_down:before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 18'><polyline points='4,5 15,13 26,5' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
}

/* SZ 2025-11-16 — Breadcrumb hover color animation to #F0DC02 */
.navigate_section ul li a,
.navigate_section ul li em {
    transition: color 0.25s ease;
}

/* Non-final breadcrumb items: smooth fade to orange-gold on hover/focus */
.navigate_section ul li:not(.last):not(:last-child) a:hover,
.navigate_section ul li:not(.last):not(:last-child) a:focus,
.navigate_section ul li:not(.last):not(:last-child) em:hover,
.navigate_section ul li:not(.last):not(:last-child) em:focus {
    color: #F0DC02;
    text-decoration: none !important;
}

/* SZ 2025-11-16 — Breadcrumb hover fix: force orange-gold on text spans */
.navigate_section ul li:not(.last):not(:last-child) a span,
.navigate_section ul li:not(.last):not(:last-child) em {
    transition: color 0.25s ease;
}

/* On hover/focus, override earlier white !important and apply #F0DC02 */
.navigate_section ul li:not(.last):not(:last-child) a:hover span,
.navigate_section ul li:not(.last):not(:last-child) a:focus span,
.navigate_section ul li:not(.last):not(:last-child) em:hover,
.navigate_section ul li:not(.last):not(:last-child) em:focus {
    color: #F0DC02 !important;
    text-decoration: none !important;
}

/* SZ 2025-11-16 — Breadcrumb hover FINAL: force li:hover span color */
.navigate_section ul li:not(.last):not(:last-child):hover span {
    color: #F0DC02 !important;
    text-decoration: none !important;
}

/* SZ 2025-11-16 — Breadcrumb hover OVERRIDE to #F0DC02 */
.navigate_section ul li:hover a span,
.navigate_section ul li:hover span {
    color: #F0DC02 !important;
    text-decoration: none !important;
}

/* SZ 2025-11-16 — Breadcrumb hover SUPER-OVERRIDE to #F0DC02 */
.navigate_section ul li:hover,
.navigate_section ul li:hover a,
.navigate_section ul li:hover span,
.navigate_section ul li:hover em {
    color: #F0DC02 !important;
    text-decoration: none !important;
}

/* SZ 2025-11-17 — Hide Go Down button and prev/next topic links */
.pagesection .button[href="#bot"] {
	display: none !important;
}

.information .nextlinks {
	display: none !important;
}

/* SZ 2025-11-17 — Topic action strips: keep top, hide bottom */
body.action_display .pagesection.top .buttonlist {
	display: flex !important;
	flex-wrap: wrap;
}

body.action_display .pagesection:not(.top) .buttonlist {
	display: none !important;
}

/* SZ 2025-11-17 — Remove extra Reply from top action strip (breadcrumb Reply handles it) */
body.action_display .sz_top_actions .button_strip_reply,
body.action_display .sz_top_actions .button_strip_reply > a {
	display: none !important;
}

/* SZ 2025-11-17 — Breadcrumb Reply button: Sonic Zone pill (Big+Medium) */
@media (min-width: 721px) {
    .sz_breadcrumb_action {

    display: flex !important;
    align-items: center;
    justify-content: flex-end;
}

    .sz_breadcrumb_action .sz_breadcrumb_reply {

    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 18px;
    border-radius: 999px;
    border: 1px solid #FFFFFF;
    background: transparent;
    color: #FFFFFF;
    font-family: "Berlin Sans FB", "Trebuchet MS", sans-serif;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
    box-shadow: none;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

    .sz_breadcrumb_action .sz_breadcrumb_reply:hover,
    .sz_breadcrumb_action .sz_breadcrumb_reply:focus {

    color: #F0DC02;
    border-color: #F0DC02;
    background-color: rgba(240, 220, 2, 0.12);
    text-decoration: none;
}

}

/* SZ 2025-11-17 — Breadcrumb Reply: hide entirely on Small */
@media (max-width: 720px) {
    .sz_breadcrumb_action {

    display: none !important;
}

}

/* SZ 2025-11-17 — Hide duplicate Reply in top action strip on Big/Medium only */
@media (min-width: 721px) {
    .pagesection.top .button_strip_reply {
        display: none !important;
    }
}

/* Sonic Zone — Breadcrumb Action Wrapper */
.sz_breadcrumb_action {

    display: flex;
    align-items: center;
    margin-left: auto;
    gap: 10px;
    height: 100%;
}

/* Sonic Zone — Breadcrumb Reply Button */
.sz_breadcrumb_reply {

    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    height: 32px;
    border-radius: 20px;
    font-family: "Berlin Sans FB", "Trebuchet MS", Arial, sans-serif !important;
    font-size: 14px;
    color: #ffffff;
    border: 1px solid #ffffff;
    background: transparent;
    cursor: pointer;
    text-decoration: none !important;
    transition: color 0.25s ease, border-color 0.25s ease;
}

.sz_breadcrumb_reply:hover {

    color: #F0DC02;
    border-color: #F0DC02;
}

/* Hide on Small */
/* SZ 2025-11-17 — Sonic Zone breadcrumb reply final styling */
.sz_breadcrumb_action {

    display: flex;
    align-items: center;
    margin-left: auto;
    gap: 10px;
    height: 100%;
}

.sz_breadcrumb_reply {

    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    height: 32px;
    border-radius: 20px;
    font-family: "Berlin Sans FB", "Trebuchet MS", Arial, sans-serif !important;
    font-size: 14px;
    color: #ffffff;
    border: 1px solid #ffffff;
    background: transparent;
    cursor: pointer;
    text-decoration: none !important;
    transition: color 0.25s ease, border-color 0.25s ease;
}

/* SZ 2025-11-17 — Breadcrumb Reply: redesigned button */
@media (min-width: 721px) {
    .sz_breadcrumb_action {

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    height: 100% !important;
}

    .sz_breadcrumb_reply {

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 20px !important;
    height: 38px !important;
    border-radius: 10px !important;
    font-family: "Berlin Sans FB", "Trebuchet MS", Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    background: transparent !important;
    gap: 8px !important;
    text-decoration: none !important;
}

    /* pencil icon SVG */
    .sz_breadcrumb_reply::before {

    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1.003 1.003 0 000-1.42l-2.34-2.34a1.003 1.003 0 00-1.42 0l-1.83 1.83 3.75 3.75 1.84-1.82z'/%3E%3C/svg%3E");
}

}

/* SZ 2025-11-17 — Breadcrumb bar flex layout + stronger strip Reply hide (Big/Medium) */
@media (min-width: 721px) {
    .navigate_section {
        display: flex !important;
        align-items: center !important;
    }

    .navigate_section ul {
        margin: 0 !important;
        padding: 0 !important;
    }

    .navigate_section .sz_breadcrumb_action {

    margin-left: auto !important;
}

    .pagesection.top .buttonlist .button_strip_reply,
    .pagesection.top .buttonlist a.button_strip_reply {
        display: none !important;
    }
}

/* SZ 2025-11-17 — Breadcrumb bar alignment fix (Big + Medium only) */
@media (min-width: 721px) {
    .navigate_section {
        display: flex !important;
        align-items: center !important;
        padding: 8px 18px !important;
    }

    .navigate_section ul {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .navigate_section ul li,
    .navigate_section ul li a,
    .navigate_section ul li span {
        float: none !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        line-height: 1.2 !important;
    }

}

/* SZ 2025-11-17 — Breadcrumb bar + Reply alignment FINAL (Big + Medium) */
@media (min-width: 721px) {
    .navigate_section {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        padding: 6px 18px !important; /* slightly tighter vertically */
    }

    .navigate_section ul {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap;
        margin: 0 !important;
        padding: 0 !important;
        flex: 1 1 auto;
        min-width: 0;
    }

    .navigate_section ul li {
        display: flex;
        align-items: center;
    }

    .navigate_section ul li > span,
    .navigate_section ul li > a span {
        line-height: 1.2;
    }

    .navigate_section .sz_breadcrumb_action {

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end;
    flex: 0 0 auto;
    margin-left: 14px !important;   /* breathing room from crumbs */;
    padding-right: 4px;             /* breathing room from right edge */;
    height: auto !important;
}

    .navigate_section .sz_breadcrumb_reply {

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 20px !important;
    height: auto !important;
    border-radius: 10px !important; /* slightly more squared */;
    font-family: "Berlin Sans FB", "Trebuchet MS", Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    background: transparent !important;
    gap: 8px !important;
    text-decoration: none !important;
}

    .navigate_section .sz_breadcrumb_reply::before {

    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1.003 1.003 0 000-1.42l-2.34-2.34a1.003 1.003 0 00-1.42 0l-1.83 1.83 3.75 3.75 1.84-1.82z'/%3E%3C/svg%3E");
    margin-right: 4px;
}

}

/* SZ 2025-11-17 — Breadcrumb Reply micro-nudge (Big + Medium) */
@media (min-width: 721px) {
    .navigate_section .sz_breadcrumb_reply {

    position: relative;
    top: -1px; /* tiny lift to visually center with breadcrumb text */;
}

}

/* SZ 2025-11-17 — Breadcrumb Reply fine-tune (Big + Medium) */
@media (min-width: 721px) {
    .navigate_section .sz_breadcrumb_action {

    margin-left: 18px !important;
    padding-right: 12px !important; /* more breathing room from right edge */;
}

    .navigate_section .sz_breadcrumb_reply {

    position: relative;
    top: -2px;              /* slightly higher for better centering */;
    border-radius: 8px !important; /* a bit more squared */;
}

}

/* SZ 2025-11-17 — Breadcrumb text vertical fix (Big + Medium) */
@media (min-width: 721px) {
    .navigate_section ul li span,
    .navigate_section ul li .dividers {
        margin-top: 0 !important;
        line-height: 1.2 !important;
        display: inline-flex !important;
        align-items: center;
    }
}

/* START REF-2025-11-17-SZ-BreadcrumbReply-v1 */
.navigate_section {
    display: flex !important;
    align-items: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.navigate_section ul {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}
.sz_breadcrumb_action {

    display: flex !important;
    align-items: center !important;
    margin-left: auto !important;
}

.sz_breadcrumb_reply {

    display: inline-flex !important;
    align-items: center !important;
    height: 35px !important;
    padding: 0 12px !important;
}

/* END REF-2025-11-17-SZ-BreadcrumbReply-v1 */

/* START REF-2025-11-17-SZ-BreadcrumbReply-v2 */
.navigate_section {
    display:flex !important;
    align-items:center !important;
}
.navigate_section ul li a {
    padding-top:4px !important;
    padding-bottom:0 !important;
}
.sz_breadcrumb_action {

    display: flex !important;
    align-items: center !important;
}

.sz_breadcrumb_reply {

    display: inline-flex !important;
    align-items: center !important;
    padding-top: 4px !important;
    padding-bottom: 2px !important;
}

/* END REF-2025-11-17-SZ-BreadcrumbReply-v2 */

/* START REF-2025-11-17-SZ-BreadcrumbReply-v3 */
@media (min-width: 721px) {
    .navigate_section {
        display: flex !important;
        align-items: center !important;
        height: 48px !important;
    }
    .navigate_section > ul {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 0 0 18px !important;
        flex: 1 1 auto !important;
    }
    .navigate_section > ul li,
    .navigate_section > ul li a,
    .navigate_section > ul li span {
        display: inline-flex !important;
        align-items: center !important;
        height: 100% !important;
    }
    .navigate_section > .sz_breadcrumb_action {

    display: flex !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: 18px !important;
    height: 100% !important;
}

    .navigate_section > .sz_breadcrumb_action .sz_breadcrumb_reply {

    display: inline-flex !important;
    align-items: center !important;
    height: 32px !important;
}

}
/* END REF-2025-11-17-SZ-BreadcrumbReply-v3 */

/* START REF-2025-11-17-SZ-BreadcrumbReply-v5 */
@media (min-width: 721px) {
    #main_content_section .navigate_section {
        float: none !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
    }

    #main_content_section .navigate_section > ul {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 0 0 18px !important;
        flex: 1 1 auto !important;
    }

    #main_content_section .navigate_section > ul li {
        float: none !important;
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
    }

    #main_content_section .navigate_section > ul li a,
    #main_content_section .navigate_section > ul li span {
        display: inline-flex !important;
        align-items: center !important;
        height: 100% !important;
        padding: 0 !important;
    }

    #main_content_section .navigate_section > .sz_breadcrumb_action {

    float: none !important;
    display: flex !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: 18px !important;
    height: 100% !important;
}

    #main_content_section .navigate_section > .sz_breadcrumb_action .sz_breadcrumb_reply {

    display: inline-flex !important;
    align-items: center !important;
    height: 32px !important;
    padding: 0 16px !important;
}

}
/* END REF-2025-11-17-SZ-BreadcrumbReply-v5 */

/* START REF-2025-11-17-SZ-BreadcrumbReply-v6 */
@media (min-width: 721px) {
    #main_content_section .navigate_section {
        min-height: 44px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    #main_content_section .navigate_section > ul li,
    #main_content_section .navigate_section > ul li a,
    #main_content_section .navigate_section > ul li span {
        display: inline-flex !important;
        align-items: center !important;
        height: 100% !important;
    }

    #main_content_section .navigate_section .dividers {
        display: inline-flex !important;
        align-items: center !important;
        height: 100% !important;
    }

    #main_content_section .navigate_section > .sz_breadcrumb_action {

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    margin-right: 18px !important;
    height: 100% !important;
}

}

@media (max-width: 720px) {
    #main_content_section .navigate_section .sz_breadcrumb_action,
    #main_content_section .navigate_section .sz_breadcrumb_reply {

    display: none !important;
}

}
/* END REF-2025-11-17-SZ-BreadcrumbReply-v6 */

/* START REF-2025-11-17-SZ-BreadcrumbReply-v7 */
@media (min-width: 721px) {
    #main_content_section .navigate_section {
        min-height: 54px !important;
        height: 54px !important;
        display: flex !important;
        align-items: center !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    #main_content_section .navigate_section > ul {
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
        margin: 0 !important;
        padding-left: 18px !important;
    }

    #main_content_section .navigate_section > .sz_breadcrumb_action {

    display: flex !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: 18px !important;
    height: 100% !important;
}

    #main_content_section .navigate_section > .sz_breadcrumb_action .sz_breadcrumb_reply {

    display: inline-flex !important;
    align-items: center !important;
    height: 36px !important;
    padding: 0 16px !important;
}

}
/* END REF-2025-11-17-SZ-BreadcrumbReply-v7 */

/* START REF-2025-11-17-SZ-BreadcrumbAlign-v6 */
@media (min-width: 721px) {

    /* Chevrons lowered slightly (they were too high) */
    #main_content_section .navigate_section ul li .dividers::before {
        top: -1px !important;
    }

    /* Taller + pushed further right reply button */
    #main_content_section .navigate_section .sz_breadcrumb_reply {

    margin-left: auto !important;
    margin-right: 0px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    position: relative;
    top: 1px !important;
}

}
/* END REF-2025-11-17-SZ-BreadcrumbAlign-v6 */

/* START REF-2025-11-17-SZ-BC-TopOnly */
@media (min-width: 721px) {
    #main_content_section .navigate_section {
        border-radius: 12px 12px 0 0 !important;
    }
}
/* END REF-2025-11-17-SZ-BC-TopOnly */

/* START REF-2025-11-17-SZ-ReplyVisualOnly-Final */
/* Sonic Zone — Breadcrumb Reply button visual-only overrides (no layout changes) */
@media (min-width: 721px) {
    .sz_breadcrumb_reply {

        /* Strong outline + shadow for readability */
            -1px -1px 0 #000,
             1px -1px 0 #000,
            -1px  1px 0 #000,
             1px  1px 0 #000,
             0   2px 2px rgba(0, 0, 0, 0.7) !important;

    background: #FCA322 !important;
    border: 2px solid #a96a00 !important;
    border-radius: 12px !important; /* more squared */;
    color: #ffffff !important;
    padding: 8px 22px !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    text-shadow: ;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35) !important;
}

    .sz_breadcrumb_reply::before {

        /* Paper + pencil icon */

    content: "" !important;
    width: 18px;
    height: 18px;
    margin-right: 6px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='4' y='4' width='11' height='12' rx='2' ry='2' fill='white' stroke='black' stroke-width='2'/><path d='M14.5 5.5L20 11l-5.5 5.5L9 17l1.5-5.5z' fill='white' stroke='black' stroke-width='2' stroke-linejoin='round'/></svg>");
}

    .sz_breadcrumb_reply:hover,
    .sz_breadcrumb_reply:focus {

    background: #FFB733 !important; /* simple brighten on hover */;
    border-color: #c27a00 !important;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.45) !important;
    text-decoration: none !important;
}

}
/* END REF-2025-11-17-SZ-ReplyVisualOnly-Final */

/* START REF-2025-11-17-SZ-ReplyFix-BackgroundShadow */
/* Tight override: only affect visual state of breadcrumb Reply on Big/Medium. */
@media (min-width: 721px) {
    /* Ensure solid orange background even before hover, using same specificity
       as the earlier transparent rule (sz_breadcrumb_action .sz_breadcrumb_reply). */
    .sz_breadcrumb_action .sz_breadcrumb_reply {

    background: #FCA322 !important;
    border: 2px solid #a96a00 !important;
    color: #ffffff !important;
}

    /* Add a visible shadow to the paper + pencil icon. */
    .sz_breadcrumb_action .sz_breadcrumb_reply::before {

            drop-shadow(0 1px 1px rgba(0, 0, 0, 0.9))
            drop-shadow(0 0 1px #000) !important;

    filter: ;
}

}
/* END REF-2025-11-17-SZ-ReplyFix-BackgroundShadow */

/* START REF-2025-11-17-SZ-ReplyShadowHoverTune */
@media (min-width: 721px) {
    /* Softer transparent text outline */
    .sz_breadcrumb_action .sz_breadcrumb_reply span,
    .sz_breadcrumb_action .sz_breadcrumb_reply b {

            -1px -1px 0 rgba(0,0,0,0.6),
             1px -1px 0 rgba(0,0,0,0.6),
            -1px  1px 0 rgba(0,0,0,0.6),
             1px  1px 0 rgba(0,0,0,0.6),
             0   2px 3px rgba(0,0,0,0.5) !important;

    text-shadow: ;
}

    /* Hover darken animation */
    .sz_breadcrumb_action .sz_breadcrumb_reply {

    transition: background-color 0.22s ease !important;
}

    .sz_breadcrumb_action .sz_breadcrumb_reply:hover {

    background-color: #e18d15 !important; /* darker orange */;
}

}
/* END REF-2025-11-17-SZ-ReplyShadowHoverTune */

/* START REF-2025-11-17-SZ-ReplyShadowHoverTune-v2 */
@media (min-width: 721px) {

    /* Even softer transparent text outline */
    .sz_breadcrumb_action .sz_breadcrumb_reply span,
    .sz_breadcrumb_action .sz_breadcrumb_reply b {

            -1px -1px 0 rgba(0,0,0,0.35),
             1px -1px 0 rgba(0,0,0,0.35),
            -1px  1px 0 rgba(0,0,0,0.35),
             1px  1px 0 rgba(0,0,0,0.35),
             0   2px 3px rgba(0,0,0,0.45) !important;

    text-shadow: ;
}

    /* Hover lighten animation */
    .sz_breadcrumb_action .sz_breadcrumb_reply {

    transition: background-color 0.22s ease !important;
}

    .sz_breadcrumb_action .sz_breadcrumb_reply:hover {

    background-color: #ffbf4d !important; /* lighter orange */;
}

}
/* END REF-2025-11-17-SZ-ReplyShadowHoverTune-v2 */

/* START REF-2025-11-17-SZ-ReplyNudgeOutline-v3 */
@media (min-width: 721px) {
    /* Nudge button closer to right edge only */
    .sz_breadcrumb_action {

    margin-right: 6px !important;
}

    /* Softer, more transparent outline on REPLY text */
    .sz_breadcrumb_action .sz_breadcrumb_reply span,
    .sz_breadcrumb_action .sz_breadcrumb_reply b {

            -1px -1px 0 rgba(0,0,0,0.25),
             1px -1px 0 rgba(0,0,0,0.25),
            -1px  1px 0 rgba(0,0,0,0.25),
             1px  1px 0 rgba(0,0,0,0.25),
             0   2px 3px rgba(0,0,0,0.38) !important;

    text-shadow: ;
}

}
/* END REF-2025-11-17-SZ-ReplyNudgeOutline-v3 */

/* START REF-2025-11-17-SZ-ReplyMarginOutline-v4 */
@media (min-width: 721px) {
    /* Nudge button itself closer to right edge by reducing its right margin */
    .sz_breadcrumb_action .sz_breadcrumb_reply {

    margin-right: 4px !important;
}

    /* Even softer, more transparent outline on REPLY text */
    .sz_breadcrumb_action .sz_breadcrumb_reply span,
    .sz_breadcrumb_action .sz_breadcrumb_reply b {

            -1px -1px 0 rgba(0,0,0,0.18),
             1px -1px 0 rgba(0,0,0,0.18),
            -1px  1px 0 rgba(0,0,0,0.18),
             1px  1px 0 rgba(0,0,0,0.18),
             0   2px 3px rgba(0,0,0,0.32) !important;

    text-shadow: ;
}

}
/* END REF-2025-11-17-SZ-ReplyMarginOutline-v4 */

/* START REF-2025-11-17-SZ-ReplyMarginFix-v5 */
@media (min-width: 721px) {
    /* Match higher-specificity selector to override existing margin */
    #main_content_section .navigate_section .sz_breadcrumb_action {

    margin-right: 4px !important; /* bring button closer to rounded edge */;
}

    #main_content_section .navigate_section .sz_breadcrumb_action .sz_breadcrumb_reply {

    margin-right: 0 !important;
}

}
/* END REF-2025-11-17-SZ-ReplyMarginFix-v5 */

/* START REF-2025-11-17-SZ-MobileBCPadding-v1 */
@media (max-width: 720px) {
    /* Add more left padding to breadcrumb links on mobile only */
    .navigate_section > ul {
        padding-left: 14px !important;
    }
}
/* END REF-2025-11-17-SZ-MobileBCPadding-v1 */

/* START REF-2025-11-17-SZ-MobileBCHigher-v2 */
@media (max-width: 720px) {
    /* Raise breadcrumb links by 2px on mobile */
    .navigate_section > ul > li > a {
        position: relative !important;
        top: -2px !important;
    }
}
/* END REF-2025-11-17-SZ-MobileBCHigher-v2 */

/* START REF-2025-11-17-SZ-MobileBCLower-v3 */
@media (max-width: 720px) {
    /* Lower breadcrumb links by 1px on mobile */
    .navigate_section > ul > li > a {
        position: relative !important;
        top: -1px !important;
    }
}
/* END REF-2025-11-17-SZ-MobileBCLower-v3 */

/* SZ 2025-11-17 — Reply text: dark outline + colored glow */
@media (min-width: 721px) {
  .sz_breadcrumb_reply {

      0 0 1px rgba(0,0,0,0.85),
      0 0 2px rgba(0,0,0,0.85),
      0 0 3px #BF7F13,
      0 0 4px #BF7F13 !important;

    text-shadow: ;
}

}

/* SZ 2025-11-17 — Breadcrumb active item hover fade */
#main_content_section .navigate_section ul li.last a,
#main_content_section .navigate_section ul li.last em,
#main_content_section .navigate_section ul li.last span {
    transition: color 0.3s ease-in-out !important;
}

#main_content_section .navigate_section ul li.last a:hover,
#main_content_section .navigate_section ul li.last em:hover,
#main_content_section .navigate_section ul li.last span:hover {
    color: #F0DC02 !important;
}

/* SZ 2025-11-17 — Breadcrumb hover fade BOTH directions */
#main_content_section .navigate_section ul li a,
#main_content_section .navigate_section ul li em,
#main_content_section .navigate_section ul li span:not(.dividers) {
    color: #FFFFFF;
    transition: color 0.3s ease-in-out !important;
}

#main_content_section .navigate_section ul li a:hover,
#main_content_section .navigate_section ul li a:focus,
#main_content_section .navigate_section ul li em:hover,
#main_content_section .navigate_section ul li span:not(.dividers):hover {
    color: #F0DC02;
}

/* SZ 2025-11-17 — Breadcrumb + Category titles use Berlin Sans Regular */
#main_content_section .navigate_section ul li,
#main_content_section .navigate_section ul li a span,
#main_content_section .navigate_section ul li em,
.cat_bar h3.catbg,
.cat_bar h3.catbg a {
    font-family: 'BerlinSansRegular', Tahoma, sans-serif !important;
    font-weight: 400 !important;
}

@font-face {
    font-family: 'BerlinSansDemiBold';
    src: url('../fonts/BRLNSDB.woff2') format('woff2'),
         url('../fonts/BRLNSDB.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BerlinSansBold';
    src: url('../fonts/BRLNSB.woff2') format('woff2'),
         url('../fonts/BRLNSB.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* SZ 2025-11-17 — Category titles use SZ Menu (matches red top menu) */
.cat_bar h3.catbg,
.cat_bar h3.catbg a {
    font-family: 'SZ Menu', 'Berlin Sans FB', Tahoma, sans-serif !important;
    font-weight: normal !important;
}

/* SZ 2025-11-18 — Catbar titles + chevrons (stable, all sizes) */
.cat_bar h3.catbg,
.cat_bar h3.catbg a {
    font-family: 'SZ Menu', 'Berlin Sans FB', Tahoma, sans-serif !important;
    font-weight: normal !important;
}

/* Desktop & tablet: comfortable, vertically-centered cat bar */
@media screen and (min-width: 721px) {
    .cat_bar h3.catbg {
        padding: 10px 12px !important;
    }
}

/* Mobile: slightly shorter cat bar but still stable */
@media screen and (max-width: 720px) {
    .cat_bar h3.catbg {
        padding: 6px 10px !important;
    }
}

/* Lock Sonic chevron hitbox + alignment to avoid height jumps */
#boardindex_table .toggle_up::before,
#boardindex_table .toggle_up:before,
#boardindex_table .toggle_down::before,
#boardindex_table .toggle_down:before {
    display: inline-block !important;
    width: 24px !important;
    height: 20px !important;
    margin: 0 8px 0 8px !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 22px 14px !important;
    position: relative !important;
    top: 0 !important;
    vertical-align: middle !important;
}

/* SZ 2025-11-18 — Catbar text fine-tune vertical centering */
@media screen and (min-width: 721px) {
    .cat_bar h3.catbg {
        padding: 11px 12px 7px 12px !important; /* top, right, bottom, left */
    }
}

@media screen and (max-width: 720px) {
    .cat_bar h3.catbg {
        padding: 8px 10px 4px 10px !important;
    }
}

/* SZ 2025-11-18 — Chevron vertical centering fix */
#boardindex_table .toggle_up::before,
#boardindex_table .toggle_up:before,
#boardindex_table .toggle_down::before,
#boardindex_table .toggle_down:before {
    top: 0 !important;   /* nudge down slightly */
}

/* SZ 2025-11-18 — Final chevron vertical nudge */
#boardindex_table .toggle_up::before,
#boardindex_table .toggle_up:before,
#boardindex_table .toggle_down::before,
#boardindex_table .toggle_down:before {
    top: -2px !important;
}

#boardindex_childboards .cat_bar h3.catbg,
#boardindex_childboards .cat_bar h3.catbg a {
    font-family: 'BerlinSansRegular', Tahoma, sans-serif !important;
    font-weight: 400 !important;
}

#boardindex_childboards .cat_bar {
    border-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

/* SZ 2025-11-18 — Sub-category pages font + square catbar + uppercase (corrected) */
[id$="_childboards"] .cat_bar {
    border-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

[id$="_childboards"] .cat_bar h3.catbg,
[id$="_childboards"] .cat_bar h3.catbg a {
    font-family: 'BerlinSansRegular', Tahoma, sans-serif !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
}

/* SZ 2025-11-18 — Topic title + breadcrumb active */
#top_subject {
    font-family: 'Red Hat Text', sans-serif !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: .06em !important;
}

}


/* BIG only — active topic in breadcrumb bold */
@media (min-width: 1025px) {
    #main_content_section .navigate_section li.last > a,
    #main_content_section .navigate_section li.last > span {
        font-weight: 700 !important;
    }
}

/* SZ 2025-11-18 — Topic title uses Red Hat Text, thinner, normal case */
#top_subject {
    font-family: 'Red Hat Text', sans-serif !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: .06em !important;
}

/* BIG only — active breadcrumb item bold */
@media (min-width: 1025px) {
    #main_content_section .navigate_section li.last > a,
    #main_content_section .navigate_section li.last > span {
        font-weight: 700 !important;
    }
}

/* SZ 2025-11-18 — Topic title stand-out (all sizes) */
#top_subject {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    font-size: 1.8rem !important;
}

/* SZ 2025-11-18 — BIG only: breadcrumb active item bold */
@media (min-width: 1025px) {
    #main_content_section .navigate_section ul li.last a span,
    #main_content_section .navigate_section ul li.last > span {
        font-weight: 700 !important;
    }
}

/* SZ 2025-11-18 — Increase topic title outer spacing (strong override) */
h2.display_title {
    margin-top: 40px !important;
}

#top_subject {
    margin-top: 0 !important; /* avoid collapse */
}

/* SZ 2025-11-18 — Adjust spacing + vertical centering on topic title */
h2.display_title {
    margin-top: 26px !important; /* reduced from 40 */
}

#top_subject {
    line-height: 1.25 !important; /* improves vertical centering */
    padding-top: 20px !important;
    padding-bottom: 22px !important;
}

/* SZ 2025-11-18 — Fine-tune spacing + raise topic title text */
h2.display_title {
    margin-top: 20px !important; /* slightly reduced */
}

#top_subject {
    padding-top: 14px !important;
    padding-bottom: 16px !important;
    line-height: 1.1 !important; /* moves text upward */
}

/* SZ 2025-11-18 — Nudge topic title text upward */
#top_subject {
    margin-top: -6px !important;
}

/* SZ 2025-11-18 — Topic title vertical alignment */
h2.display_title #top_subject,
#main_content_section h2.display_title #top_subject {
    display: inline-block !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    transform: translateY(-2px) !important;
}

/* SZ 2025-11-18 — Hide "Started by" section on all sizes */
h2.display_title + p {
    display: none !important;
}

/* SZ 2025-11-18 — Small only: viewing lock spacing + color */
@media screen and (max-width: 720px) {
    /* Tighten space between lock and viewing text on mobile */
    #display_head .main_icons.lock {
        margin-right: 3px !important;
    }

    /* Replace lock sprite with flat SVG matching Reply button color */
    #display_head .main_icons.lock::before {
        content: "" !important;
        display: inline-block !important;
        width: 14px !important;
        height: 14px !important;
        margin-right: 3px !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: contain !important;
        /* Orange lock similar to Reply button */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3' y='7' width='10' height='7' rx='2' fill='%23f89b1b'/%3E%3Cpath d='M5 7V5a3 3 0 0 1 6 0v2' fill='none' stroke='%23f89b1b' stroke-width='2'/%3E%3C/svg%3E") !important;
    }
}

/* SZ 2025-11-18 — Topic title lock icon + remove pin */
#main_content_section h2.display_title .main_icons.lock {
    display: inline-flex !important;
    align-items: center !important;
    margin-left: 8px !important;
}

#main_content_section h2.display_title .main_icons.lock::before {
    width: 18px !important;
    height: 18px !important;
    background-size: 260px auto !important;
    transform: translateY(1px) !important;
}

/* Hide pin icon next to topic title */
#main_content_section h2.display_title .main_icons.sticky {
    display: none !important;
}

/* SZ 2025-11-18 — Small only: topic title, lock icon, breadcrumbs */
@media (max-width: 720px) {
    /* Nudge breadcrumb chevrons down */
    #main_content_section .navigate_section ul li span.dividers {
        position: relative !important;
        top: 3px !important;
    }

    /* Make topic title a bit smaller on mobile */
    #top_subject {
        font-size: 22px !important;
        padding-top: 16px !important;
        padding-bottom: 18px !important;
    }

    /* Title lock icon: size + vertical alignment */
    #main_content_section h2.display_title .main_icons.lock {
        margin-left: 6px !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    #main_content_section h2.display_title .main_icons.lock::before {
        content: "" !important;
        display: inline-block !important;
        width: 20px !important;
        height: 20px !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: contain !important;
        transform: translateY(2px) !important;
        /* SVG lock matching Reply button color */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3' y='7' width='10' height='7' rx='2' fill='%23f89b1b'/%3E%3Cpath d='M6 7V5a2 2 0 0 1 4 0v2' fill='none' stroke='%23f89b1b' stroke-width='2'/%3E%3C/svg%3E") !important;
    }
}

/* SZ 2025-11-18 S-only tweaks */
@media (max-width:720px){
  .navigate_section .chevron-divider{
    transform: translateY(3px);
  }
  .main_icons.lock{
    margin-top:-2px;
  }
  #top_subject{
    padding-top: calc(var(--sz-top-title-pt,0px) - 5px);
    padding-bottom: calc(var(--sz-top-title-pb,0px) - 5px);
  }
}

/* SZ 2025-11-18 — Small-only: lock alignment + smaller title block */
@media (max-width: 720px) {

    /* Nudge lock icon up slightly on the topic title line */
    #main_content_section h2.display_title .main_icons.lock::before {
        transform: translateY(-2px) !important;
    }

    /* Make the topic title block shorter on mobile */
    #main_content_section h2.display_title #top_subject {
        padding-top: 11px !important;
        padding-bottom: 13px !important;
    }
}

/* SZ 2025-11-19 — Small chevrons up 1px */
@media (max-width:720px){
    #main_content_section .navigate_section .dividers{
        transform: translateY(-1px) !important;
    }
}

/* SZ 2025-11-19 — Big/Medium lock up 4px */
@media (min-width:721px){
    #main_content_section h2.display_title .main_icons.lock::before{
        transform: translateY(-4px) !important;
    }
}

/* SZ 2025-11-19 — Big/Medium chevrons down 2px */
@media (min-width:721px){
    #main_content_section .navigate_section .dividers{
        transform: translateY(2px) !important;
    }
}

/* SZ 2025-11-18 — Category page title vertical correction */
body.action_messageindex h2.display_title {
    margin-top: 6.5px !important;
}

/* SZ 2025-11-18 — Restore topic page title margin */
body.action_display h2.display_title {
    margin-top: 20px !important;
}

/* SZ 2025-11-18 — Final board vs topic title margins */
body.action_messageindex #main_content_section h2.display_title {
    margin-top: 6.5px !important;
}

body.action_display #main_content_section h2.display_title {
    margin-top: 20px !important;
}

/* SZ 2025-11-18 — Topic page title padding (broad selector) */
body.action_display h2.display_title {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* SZ 2025-11-18 — B+M only: raise breadcrumb chevron dividers by 2px */
@media (min-width: 721px) {
    #main_content_section .navigate_section ul li span.dividers {
        position: relative !important;
        top: -2px !important;
    }
}

/* SZ 2025-11-18 — Stabilize category toggle, prevent catbar resize flash (Small only) */
@media screen and (max-width: 720px) {
	h3.catbg .toggle_up,
	h3.catbg .toggle_down {
		display: inline-block;
		height: 17px;
	}
}

/* SZ 2025-11-18 — Remove mobile tap highlight on category toggles (Small only) */
@media screen and (max-width: 720px) {
    .toggle_up, .toggle_down {
        -webkit-tap-highlight-color: transparent !important;
        tap-highlight-color: transparent !important;
    }
}

/* SZ 2025-11-18 — Mobile-only: nudge catbar title + chevron UP by 2px */
@media screen and (max-width: 720px) {
    .cat_bar h3.catbg {
        display: flex !important;
        align-items: center !important;
    }
    .cat_bar h3.catbg > * {
        transform: translateY(-2px);
    }
}

/* SZ 2025-11-18 — Mobile-only: restore chevron horizontal alignment */
@media screen and (max-width: 720px) {
    .cat_bar h3.catbg .toggle_up,
    .cat_bar h3.catbg .toggle_down {
        margin-left: auto !important;
    }
}

/* SZ 2025-11-18 — Mobile catbar reset: restore float layout + slight vertical tweak */
@media screen and (max-width: 720px) {
    .cat_bar h3.catbg {
        display: block !important;
        padding: 7px 10px 5px 10px !important;
    }
    .cat_bar h3.catbg .toggle_up,
    .cat_bar h3.catbg .toggle_down {
        float: right !important;
        margin-left: 0 !important;
    }
}

/* SZ 2025-11-18 — Mobile-only: nudge chevrons DOWN by 2px */
@media screen and (max-width: 720px) {
    .cat_bar h3.catbg .toggle_up::before,
    .cat_bar h3.catbg .toggle_down::before {
        transform: translateY(2px) !important;
    }
}

/* SZ 2025-11-18 — Rounded corners for search bars and button */
input[type="search"],
select[name="search_selection"],
input[name="search2"].button {

    border-radius: 6px !important;
}

/* SZ 2025-11-18 — Vertically nudge search_selection options text up by 2px */
select[name="search_selection"] option {

    padding-top: 2px !important;
}

/* SZ 2025-11-18 — Further nudge search_selection text upward */
select[name="search_selection"] {

    line-height: normal !important;
    padding-top: 1px !important;
    padding-bottom: 0 !important;
}

/* SZ 2025-11-18 — Fine-tune vertical centering for search_selection at 100% zoom */
select[name="search_selection"] {

    height: 2em !important;
    line-height: 1.8em !important; /* slightly smaller than height to nudge text up */;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* SZ 2025-11-18 — Search button hover animation fix */
#top_section input.button {

    transition: background-color 0.25s ease, color 0.25s ease !important;
}

#top_section input.button:hover {

    background-color: #3c3c3c !important;
    color: #ffffff !important;
}

/* SZ 2025-11-19 — Hide mobile search shell on Desktop/Tablet */
@media screen and (min-width: 721px) {

	.sz-mobile-search-shell {

    display: none;
}

}

/* SZ 2025-11-20 — Desktop/Tablet search buttons match mobile icons */
@media screen and (min-width:721px) {

    #search_form input[name="search2"].button{

    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%23FFFFFF' fill='none' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='16' y1='16' x2='21' y2='21'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
    text-indent: -9999px;
    overflow: hidden;
    border: 1px solid #636363 !important;
    background-color: transparent !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    transition: border-color .18s ease-out, box-shadow .18s ease-out, background-color .18s ease-out;
    padding: 0 !important;
    width: 30px;
    height: 30px;
}

    #search_form input[name="search2"].button:hover {

        /* no lift */

    border-color: #FFFFFF !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.45);
    transform: none !important;
}

    #search_form input[name="search2"].button:focus {

    border-color: #FFFFFF !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.55);
}

}

/* SZ 2025-11-20 — Desktop/Tablet search row match Mobile sizing + scope button */
@media screen and (min-width: 721px) {

	/* Make the main search field comfortable like mobile */
	#search_form input[type="search"],
	#search_form input[name="search"] {

    padding: 2px 8px !important;
    border-radius: 6px !important;
    border: 1px solid #636363 !important;
    background-color: #252525 !important;
    color: #FFFFFF !important;
    font-size: 0.9em !important;
}

	/* Turn the scope select into a compact chevron button like mobile */
	#search_form select[name="search_selection"] {

		/* hide label text inside the closed control */
		/* remove default arrows so we can draw our own */

    max-width: 38px !important;
    min-width: 34px !important;
    width: 34px !important;
    padding: 0 !important;
    border-radius: 6px !important;
    border: 1px solid #636363 !important;
    background-color: transparent !important;
    color: transparent !important;
    text-indent: -9999px !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' stroke='none'><path d='M6 9l6 6 6-6'/></svg>");
}

	#search_form select[name="search_selection"]:hover,
	#search_form select[name="search_selection"]:focus {

    border-color: #FFFFFF !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45);
}

}

/* SZ 2025-11-20 — Desktop/Tablet search row height + icon sizing */
@media screen and (min-width: 721px) {

    /* Lock search row controls to original 24px height for alignment */
    #search_form input[type="search"],
    #search_form input[name="search"],
    #search_form select[name="search_selection"] {

    height: 24px !important;
}

    /* Make the SEARCH magnifying-glass button a 24x24px square, centered icon */
    #search_form input[name="search2"].button {

    width: 24px !important;
    height: 24px !important;
    background-size: 12px 12px !important;
    background-color: transparent !important;
}

}

/* SZ 2025-11-20 — Desktop/Tablet scope button size match search icon */
@media screen and (min-width: 721px) {

    #search_form select[name="search_selection"] {

    width: 24px !important;
    max-width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    background-size: 10px 10px !important;
    background-color: transparent !important;
}

}

/* SZ 2025-11-20 — Desktop/Tablet scope dropdown menu theming */
#search_form select[name="search_selection"] option {

    background-color: #252525;
    color: #f4f4f4;
}

#search_form select[name="search_selection"] option:hover,
#search_form select[name="search_selection"] option:checked,
#search_form select[name="search_selection"] option:focus {

    background-color: #343434;
    color: #ffffff;
}

/* SZ 2025-11-20 — Desktop/Tablet search hover border animation */
@media screen and (min-width: 721px) {

    #search_form input[type="search"],
    #search_form input[name="search"],
    #search_form select[name="search_selection"],
    #search_form input[name="search2"].button {

    transition: border-color .18s ease-out !important;
    border-color: #636363 !important;
}

    #search_form input[type="search"]:hover,
    #search_form input[name="search"]:hover,
    #search_form select[name="search_selection"]:hover,
    #search_form input[name="search2"].button:hover {

    border-color: #000000 !important;
}

}

/* SZ 2025-11-20 — Desktop/Tablet scope dropdown menu padding */
#search_form select[name="search_selection"] option {

    padding: 6px 10px !important;
}

/* SZ 2025-11-20 — FINAL Desktop/Tablet search icon + scope chevron restore */
@media screen and (min-width: 721px) {

    /* Magnifying-glass icon button (24x24, no text) */
    #search_form input[name="search2"].button {

    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    border-radius: 6px !important;
    border: 1px solid #636363 !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 12px 12px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%23FFFFFF' fill='none' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='16' y1='16' x2='21' y2='21'/></svg>") !important;
    color: transparent !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
}

    /* Scope chevron button (24x24, no label text) */
    #search_form select[name="search_selection"] {

    width: 24px !important;
    max-width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    border-radius: 6px !important;
    border: 1px solid #636363 !important;
    background-color: transparent !important;
    color: transparent !important;
    text-indent: -9999px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 10px 10px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' stroke='none'><path d='M6 9l6 6 6-6'/></svg>") !important;
}

}

/* SZ 2025-11-20 — Desktop search button super tight to search bar */
@media screen and (min-width: 1025px) {

    #top_section input.button {

    margin-left: 1px !important;
}

}

/* SZ 2025-11-20 — B/M/S search bar hover & focus background animation */
#search_form input[name="search"],
#search_form input[type="search"],
#sz_mobile_search_form input[name="search"] {

    transition: background-color 0.25s ease-in-out !important;
}

#search_form input[name="search"]:hover,
#search_form input[type="search"]:hover,
#sz_mobile_search_form input[name="search"]:hover,
#search_form input[name="search"]:focus,
#search_form input[type="search"]:focus,
#sz_mobile_search_form input[name="search"]:focus {

    background-color: #333333 !important;
}

/* SZ 2025-11-20 — Tablet search button: no lift, just background color change */
@media screen and (min-width: 721px) and (max-width: 1024px) {

    #search_form input[name="search2"].button {

    box-shadow: none !important;
    border-color: #636363 !important;
    background-color: #333333 !important;
    transition: background-color 0.25s ease-in-out !important;
}

    #search_form input[name="search2"].button:hover {

    background-color: #444444 !important;
    box-shadow: none !important;
    border-color: #636363 !important;
}

}

/* SZ 2025-11-20 — Mobile search button: remove lift on hover */
#sz_mobile_search_form > input.button,
#sz_mobile_search_form > input.button:hover,
#sz_mobile_search_form > input.button:focus {

    transform: none !important;
    box-shadow: none !important;
}

/* SZ 2025-11-20 — B+T smoother hover + light gray borders on search bar & button */
@media screen and (min-width: 721px) {

    /* Search bar hover/focus */
    #search_form input[type="search"],
    #search_form input[name="search"] {

    transition: background-color 0.22s ease-out, border-color 0.22s ease-out !important;
}

    #search_form input[type="search"]:hover,
    #search_form input[name="search"]:hover,
    #search_form input[type="search"]:focus,
    #search_form input[name="search"]:focus {

    border-color: #a5a5a5 !important; /* lighter gray, not white */;
}

    /* Search button hover */
    #search_form input[name="search2"].button,
    #top_section input.button {

    transition: background-color 0.22s ease-out, border-color 0.22s ease-out !important;
}

    #search_form input[name="search2"].button:hover,
    #top_section input.button:hover {

    border-color: #a5a5a5 !important; /* lighter gray border on hover */;
}

}

/* SZ 2025-11-20 — B+T tighter spacing + lighter button + magnifier shadow */
@media screen and (min-width: 721px) {

    /* Bring search bar very close to the button */
    #search_form input[type="search"],
    #search_form input[name="search"] {

    margin-right: 2px !important;
}

    /* Search button lighter gray + matching border */
    #search_form > input.button,
    #top_section input.button {

    background-color: #3a3a3a !important;  /* same tone as hover bar */;
    border-color: #a5a5a5 !important;
}

    /* Add glow/shadow to magnifying glass icon */
    #search_form > input.button {

    filter: drop-shadow(0px 0px 3px #ffffffaa) !important;
}

}

/* SZ 2025-11-20 — Correct: remove button glow, add hover drop-shadow to magnifying glass only */
@media screen and (min-width: 721px) {

    /* Remove previous glow completely */
    #search_form > input.button {

    filter: none !important;
}

    /* On hover: lighter gray + icon drop-shadow */
    #search_form > input.button:hover {

    background-color: #3a3a3a !important;  /* matching lighter gray */;
    border-color: #a5a5a5 !important;
    filter: drop-shadow(0px 0px 3px rgba(255,255,255,0.6)) !important;
}

}

/* SZ 2025-11-20 — Mobile: lighter gray hover border on search button */
#sz_mobile_search_form > input.button:hover {

    border-color: #a5a5a5 !important; /* light gray instead of white */;
}

/* SZ 2025-11-20 — Mobile: slightly darker gray hover border on search button */
#sz_mobile_search_form > input.button:hover {

    border-color: #888888 !important; /* slightly darker gray */;
}

/* SZ 2025-11-20 — Mobile override: darker gray hover border, no lift */
@media screen and (max-width: 720px) {
    #mobile_user_menu .sz-mobile-search-form input[type="submit"]:hover {

    border-color: #888888 !important; /* slightly darker gray */;
    transform: none !important;       /* no nudge up */;
    box-shadow: none !important;
}

}

/* SZ 2025-11-20 — Desktop+Tablet: precise 3px gap between search bar and button */
@media screen and (min-width: 721px) {

    /* Remove left offset on button so we control spacing only from the bar */
    #top_section input.button,
    #search_form > input.button {

    margin-left: 0 !important;
}

    /* Exact 3px gap from bar to button */
    #search_form input[type="search"],
    #search_form input[name="search"] {

    margin-right: 3px !important;
}

}

/* SZ — Force search bar to sit exactly 3px from the button */
@media (min-width: 721px) {

    #search_form > input[type="search"] {

    padding-right: 0 !important;
    margin-right: 3px !important;
}

}

/* SZ — FINAL: exact 3px gap between search bar and button on Desktop+Tablet */
@media (min-width: 721px) {

    /* Treat bar + button as a flex row with fixed gap */
    #search_form {

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    column-gap: 3px !important;   /* this is the ONLY space between them */;
    margin-top: -2px !important;  /* bump field + button up together on Desktop/Tablet */;
}

    /* Remove any extra margins so gap is only from column-gap */
    #search_form > input[type="search"],
    #search_form > input.button {

    margin-left: 0 !important;
    margin-right: 0 !important;
}

}

/* SZ — Remove glow from search button hover */
@media (min-width: 721px) {

    #search_form > input.button: hover,;
    #sz_mobile_search_form > input.button: hover {;
    box-shadow: none !important;
}

}

/* SZ — Remove ALL glow effects from Desktop/Tablet search button hover — cleaned */

/* SZ 2025-11-20 — FINAL: Suggested Members + Search Results headers */
#sz_suggested_members > div.cat_bar > h3 {

    text-transform: uppercase !important;
}

#sz_suggested_members {
    margin-bottom: 14px !important;
}

#sz_search_results_header > div.cat_bar {

    border-radius: 0 !important;
}

#sz_search_results_header > div.cat_bar > h3 {

    display: flex !important;
    align-items: center !important;
    text-transform: uppercase !important;
    padding: 8px 12px 11px 12px !important;  /* top, right, bottom, left */;
}

/* SZ 2025-11-20 — Mobile breadcrumb chevron + Reply text shadow */
@media (max-width: 720px) {
    #main_content_section > div:nth-child(1) > ul > li:nth-child(2) > span {
        position: relative;
        top: 2px;
    }
}
/* Desktop/Tablet Reply text drop shadow */
#main_content_section > div:nth-child(1) > div > a {
    text-shadow: 0px 1px 2px rgba(0,0,0,0.45);
}

/* SZ 2025-11-20 — Reply pencil icon shadow (::before matches sprite) */
#main_content_section .sz_breadcrumb_reply::before {
    filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.45));
}

/* Sonic Zone - Menu Step 2: header/logo/menu alignment overrides */
#header {
    padding: 2px 2px 4px 2px;
    display: flex;
    align-items: center;
}

h1.forumtitle {
    font-size: 1.8em;
    font-family: "Tahoma", sans-serif;
    padding-top: 15px;
    padding-bottom: 10px;
    margin-left: 7px;
    font-weight: normal;
    flex: 0 0 auto;
    margin-right: 32px;
}

.forumtitle img {
    width: 260px;
    padding-top: 20px;
    padding-bottom: 10px;
}

/* Match upper menu card padding to good-menu version */
#upper_section {
    padding: 7px 12px 10px 12px;
}

/* Align inner menu section with content edge */
#inner_section {
    padding: 12px 0 2px 0;
    border-radius: 6px 6px 0 0;
    background: transparent;
}

/* Use the narrower content width from the good-menu version */
#top_section .inner_wrap,
#wrapper,
#header,
#footer .inner_wrap {
    max-width: 1150px;
    margin: 0 auto;
    width: 90%;
}


/* SZ 2025-11-21 — Info Center title bar + animation */
@media (min-width: 721px){
  #info_center > div.title_bar{
    background: #44359d;
    animation-delay: var(--sz-gradient-offset, 0s);
    box-sizing: border-box;
    margin: 0 0 18px 0;
    font-size: 1.1em;
    color:#fff!important;
    border-radius:14px 14px 0 0!important;
    overflow:hidden;
    padding:11px 12px 7px 12px!important;
    font-family:'BerlinSansRegular',Tahoma,sans-serif!important;
    font-weight:400!important;
    text-transform:uppercase!important;
  }

html.sz-anim-ready #info_center > div.title_bar{
    animation: colorAnimation 130s ease infinite;
    animation-delay: var(--sz-gradient-offset, 0s);
}

}

/* SZ 2025-11-21 — Info Center spacing + upshrink font */
@media (min-width: 721px){
  #info_center{
    margin-top:24px!important;
  }
  #upshrink_link{
    visibility: visible!important;
    list-style: none!important;
    box-sizing: border-box;
    margin: 0!important;
    font-size: 1.02rem!important;
    vertical-align: middle!important;
    text-transform: uppercase!important;
    color: #ffffff!important;
    text-shadow: none!important;
    float: none!important;
    margin-top: 0!important;
    line-height: 1.2!important;
    text-decoration: none!important;
    padding: 0!important;
    display: inline-flex!important;
    align-items: center!important;
    height: 100%!important;
    font-family: 'BerlinSansRegular',Tahoma,sans-serif!important;
    font-weight: 400!important;
    transition: color 0.3s ease-in-out!important;
    white-space: nowrap!important;
    overflow: hidden!important;
    text-overflow: ellipsis!important;
    max-width: 26vw!important;
    position: relative!important;
    top: 1px!important;
  }
}


/* SZ 2025-11-23 — Info Center icon + title link + header/menu vertical alignment (Desktop/Tablet only) */
@media (min-width: 721px) {
  /* Hide the chevron toggle icon in the Info Center title bar */
  #info_center .toggle_up {
    display: none !important;
  }

  /* Make "Sonic Zone - Info Center" behave like plain title, not a link */
  #upshrink_link {
    pointer-events: none;
    cursor: default;
    text-decoration: none !important;
  }

  /* Nudge Sonic Zone logo upward slightly */
  .forumtitle img {
    position: relative;
    top: -4px;
  }

  /* Push red menu pill down a bit so it centers in the purple band */
  #main_menu {
    margin: 10px 0 4px 0;
  }
}


/* SZ 2025-11-23 — Restore Sonic header/menu alignment to good-menu baseline */
@media (min-width: 721px) {
  .forumtitle img {
    position: static !important;
    top: auto !important;
  }

  #main_menu {
    margin: 0 0 0 auto !important;
  }
}


/* SZ 2025-11-23 — Fine-tune Desktop/Tablet red menu vertical centering */
@media (min-width: 1080px) {
  #main_menu {
    margin-top: 10px !important;
    margin-bottom: 6px !important;
  }
}


/* SZ 2025-11-23 — Desktop header/logo/menu vertical centering tweak */
@media (min-width: 1080px) {
  /* Add a bit more breathing room above and below the logo+menu band */
  #header {
    padding-top: 24px !important;
    padding-bottom: 12px !important;
  }

  /* Drop the red menu pill slightly so it visually centers in the purple band */
  #main_menu {
    margin-top: 22px !important;
    margin-bottom: 10px !important;
  }
}


/* SZ 2025-11-23 — Nudge red menu pill down (Desktop only) */
@media (min-width: 1080px) {
  #main_menu {
    position: relative !important;
    top: 10px !important;
  }
}


/* SZ 2025-11-23 — Balance top vs bottom spacing in header band (Desktop) */
@media (min-width: 1080px) {
  #header {
    padding-top: 14px !important;   /* reduce space above logo/menu */
    padding-bottom: 22px !important;/* increase space below for balance */
  }
}


/* SZ 2025-11-23 — Final fine-tune: perfectly center logo + menu in header band (Desktop) */
@media (min-width: 1080px) {
  #header {
    padding-top: 10px !important;   /* slightly less space above */
    padding-bottom: 26px !important;/* slightly more space below */
  }

  #main_menu {
    top: 14px !important;           /* nudge menu down a bit more */
  }
}


/* SZ 2025-11-23 — Restored menu responsiveness from good-menu baseline */
@media (min-width: 721px) and (max-width: 970px) {
  /* Extra tightening for the narrowest desktop/tablet band so items don't wrap */
  #main_menu ul.menu_nav {

    gap: 10px;
}

  #main_menu ul.menu_nav > li > a {

    padding: 9px 16px 9px 16px !important;
    font-size: 1.10rem;
}

}


/* SZ 2025-11-23 — Restored menu responsiveness from good-menu baseline */
@media (min-width: 721px) and (max-width: 880px) {
  /* Extra tightening for narrow desktop widths just above tablet breakpoint */
  #main_menu ul.menu_nav {

    gap: 8px;
}

  #main_menu ul.menu_nav > li > a {

    padding: 8px 14px 8px 14px !important;
    font-size: 1.00rem;
    letter-spacing: 0.11em;
}

}


/* SZ 2025-11-23 — Restored menu responsiveness from good-menu baseline */
@media (min-width: 970px) and (max-width: 500px) {
  /* Extra tightening so menu text stays inside the ribbon at these widths */
  #main_menu ul.menu_nav {

    gap: 8px;
}

  #main_menu ul.menu_nav > li > a {

    padding: 11px 22px 11px 22px !important;
    font-size: 1.3rem;
    letter-spacing: 0.11em;
}

}


/* SZ 2025-11-23 — Restored menu responsiveness from good-menu baseline */
@media (min-width: 721px) {
  #main_menu .dropmenu li ul ul {

    margin-top: -47px !important;
}

}


/* SZ 2025-11-23 — Restored menu responsiveness from good-menu baseline */
@media (min-width: 721px) {
  #main_menu .dropmenu li.subsections {

    position: relative;
}

  #main_menu .dropmenu li.subsections::after {

    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    width: 18px;              /* small horizontal buffer towards child submenu */;
    background: transparent;  /* invisible, only used for :hover area */;
}

}


/* SZ 2025-11-23 — Restored menu responsiveness from good-menu baseline */
@media (min-width: 721px) {
  #main_menu .dropmenu li.subsections:hover > a,
  #main_menu .dropmenu li li.subsections:hover > a,
  #main_menu .dropmenu li li.subsections > a:hover {

    background: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
}

}


/* SZ 2025-11-23 — Restored menu responsiveness from good-menu baseline */
@media (min-width: 721px) {
  #main_menu .dropmenu li li.subsections > a::after {

    content: none !important;   /* remove SMF arrow pseudo-element */;
    padding: 0 !important;      /* remove extra vertical padding it adds */;
}

}


/* SZ 2025-11-23 — Restored menu responsiveness from good-menu baseline */
@media (min-width: 721px) {
  #main_menu .dropmenu li li.subsections > a::before,
  #main_menu .dropmenu li li.subsections > a::after {

    content: "" !important;
    position: absolute;
    left: 6px;
    right: 6px;
    height: 3px;
    background: transparent;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 160ms ease-out, background-color 160ms ease-out;
    pointer-events: none;
}

  #main_menu .dropmenu li li.subsections > a::before {

    top: 0px;
}

  #main_menu .dropmenu li li.subsections > a::after {

    bottom: 0px;
}

  #main_menu .dropmenu li li.subsections:hover > a::before,
  #main_menu .dropmenu li li.subsections:hover > a::after {

    background: #ffd800;
    transform: scaleX(1);
}

}


/* SZ 2025-11-23 — Restored menu responsiveness from good-menu baseline */
@media (min-width: 721px) {
  #main_menu ul.menu_nav > li > a::before,
  #main_menu ul.menu_nav > li > a::after {

    transform: scaleX(0);
    transform-origin: center;
    transition: transform 160ms ease-out, background-color 160ms ease-out;
}

  #main_menu ul.menu_nav > li:not(.active):not(.current):not(.selected) > a:hover::before,
  #main_menu ul.menu_nav > li:not(.active):not(.current):not(.selected) > a:hover::after {

    transform: scaleX(1);
}

}


/* SZ 2025-11-23 — Restored menu responsiveness from good-menu baseline */
@media (min-width: 721px) {
  #main_menu ul.menu_nav > li > a {

      0 0 1px rgba(0,0,0,0.55),
      0 0 2px rgba(0,0,0,0.45);

    text-shadow: ;
}

}


/* SZ 2025-11-23 — Restored menu responsiveness from good-menu baseline */
@media (min-width: 721px) {

  /* Stronger outline for main menu buttons */
  #main_menu ul.menu_nav > li > a {

      0 0 2px rgba(0,0,0,0.65),
      0 0 3px rgba(0,0,0,0.55);

    text-shadow: ;
}

  /* Drop submenu down slightly below ribbon */
  #main_menu .dropmenu li ul {

    margin-top: 8px !important; /* was 2px */;
}

}


/* SZ 2025-11-23 — Restored menu responsiveness from good-menu baseline */
@media (min-width: 721px) {
  #main_menu .dropmenu > li {

    position: relative;
}

  #main_menu .dropmenu > li::after {

    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 10px;              /* buffer directly under each top item */;
    background: transparent;
}

}


/* SZ 2025-11-23 — Restored menu responsiveness from good-menu baseline */
@media (min-width: 721px) {
  #main_menu .dropmenu > li > ul {

    margin-top: -4px !important; /* small overlap with ribbon to prevent flash */;
}

}


/* SZ 2025-11-23 — Restored menu responsiveness from good-menu baseline */
@media (min-width: 721px){
  #upshrink_link,
  #upshrink_ic{
    position:relative!important;
    top:-2px!important;
  }
}


/* SZ 2025-11-23 — Restored menu responsiveness from good-menu baseline */
@media (min-width: 721px) and (max-width: 1079px) {
  #header {
    padding-right: 8px;
  }
  .forumtitle img {
    width: 220px;
    padding-top: 14px;
  }
  #main_menu {
    padding-left: 20px;
    padding-right: 20px;
  }
  .menu_nav {
    gap: 6px;
  }
  #main_menu ul.menu_nav > li > a {
    padding: 8px 14px 8px 14px !important;
    font-size: 1.2rem;
  }
}


/* SZ 2025-11-23 — Restored menu responsiveness from good-menu baseline */
@media (min-width: 721px) and (max-width: 1079px) {
  #header {
    flex-direction: column;
    align-items: flex-start;
  }
  h1.forumtitle {
    margin-right: 0;
  }
  #main_menu {
    margin: 12px auto 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  #main_menu ul.menu_nav {
    justify-content: center;
  }
}


/* SZ 2025-11-23 — Center Sonic Zone logo on Tablet/Mobile (0–720px) */
@media screen and (max-width: 720px) {
  /* Center the logo block within the purple header band */
  #header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }

  h1.forumtitle {
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
  }

  .forumtitle img {
    display: block !important;
    margin: 0 auto !important;
  }
}


/* SZ 2025-11-23 — Perfect vertical center of Sonic logo on mobile */
@media screen and (max-width: 720px) {
    #header {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding-top: 10px !important;
        padding-bottom: 26px !important;
    }

    .forumtitle img {
        margin-top: -6px !important;
        margin-bottom: 0 !important;
    }
}


/* SZ 2025-11-23 — Final fine-tune: nudge logo up additional 2px */
@media screen and (max-width: 720px) {
    .forumtitle img {
        margin-top: -8px !important;
    }
}


/* SZ 2025-11-23 — Lock red menu text size 721–1079px to desktop size */
@media (min-width: 721px) and (max-width: 1079px) {
  #main_menu ul.menu_nav > li > a {
    font-size: 1.3rem !important;  /* match desktop (1080px+) size */
  }
}


/* SZ 2025-11-23 — Lock desktop menu style on tablet (721–1079px) */
@media (min-width: 721px) and (max-width: 1079px) {
  #main_menu ul.menu_nav > li > a {
    font-size: 1.3rem !important;
    line-height: 1.1 !important;
    letter-spacing: 0.14em !important;
    padding: 9px 18px 9px 18px !important;
  }
}


/* SZ 2025-11-23 — Restored reply / quickreply styling from good-menu baseline */


    .sz_breadcrumb_action .sz_breadcrumb_reply {

    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    padding: 6px 18px;
    border-radius: 999px;
    border: 1px solid #FFFFFF;
    background: transparent;
    color: #FFFFFF;
    font-family: "Berlin Sans FB", "Trebuchet MS", sans-serif;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
    box-shadow: none;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}


/* Sonic Zone — Breadcrumb Reply Button */
.sz_breadcrumb_reply {

    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    padding: 6px 16px;
    height: 32px;
    border-radius: 20px;
    font-family: "Berlin Sans FB", "Trebuchet MS", Arial, sans-serif !important;
    font-size: 14px;
    color: #ffffff;
    border: 1px solid #ffffff;
    background: transparent;
    cursor: pointer;
    text-decoration: none !important;
    transition: color 0.25s ease, border-color 0.25s ease;
}


.sz_breadcrumb_reply {

    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    padding: 6px 16px;
    height: 32px;
    border-radius: 20px;
    font-family: "Berlin Sans FB", "Trebuchet MS", Arial, sans-serif !important;
    font-size: 14px;
    color: #ffffff;
    border: 1px solid #ffffff;
    background: transparent;
    cursor: pointer;
    text-decoration: none !important;
    transition: color 0.25s ease, border-color 0.25s ease;
}





/* SZ 2025-11-21 — Square Quick Reply cat bar */
#quickreply > div.cat_bar,
#quickreply > div.cat_bar > h3.catbg {
    border-radius: 0 !important;
}


/* SZ 2025-11-23 — Remove extra gap above Post reply cat bar */
form#postmodify > br:first-of-type {
    display: none !important;
}


/* SZ 2025-11-23 — Hide Info Center chevron on Mobile only */
@media screen and (max-width: 720px) {
  #info_center .toggle_up,
  #upshrink_ic {
    display: none !important;
  }
}


/* SZ 2025-11-23 — Breadcrumb HOME icon (minimal, no layout changes) */
#main_content_section .navigate_section ul li:first-child > a > span {
  /* hide the HOME text visually without changing line-height */
  font-size: 0;
}

#main_content_section .navigate_section ul li:first-child > a::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M8 30L32 10l24 20v24H40V38H24v16H8z' fill='%23FFFFFF'/%3E%3C/svg%3E");
}

/* === SZ 2025-11-23 — BREADCRUMB FIX (icon + chevrons + hide topic title) === */

#main_content_section .navigate_section ul li:first-child > a:hover::before {
    filter: brightness(1.3) sepia(1) saturate(500%) hue-rotate(355deg);
}

/* 2) Remove the chevron immediately after Home */
#main_content_section .navigate_section ul li:first-child + li > .dividers {
    display: none !important;
}

/* 3) Hide topic title and its chevron */
#main_content_section .navigate_section ul li.last,
#main_content_section .navigate_section ul li.last .dividers {
    display: none !important;
}


/* === SZ — Home icon pure white → #F0DC02 on hover === */
#main_content_section > div:nth-child(1) > ul > li:nth-child(1) > a::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
    transition: background-image 0.25s ease-in-out;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M8 30L32 10l24 20v24H40V38H24v16H8z' fill='%23FFFFFF'/%3E%3C/svg%3E");
}
#main_content_section > div:nth-child(1) > ul > li:nth-child(1) > a:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M8 30L32 10l24 20v24H40V38H24v16H8z' fill='%23F0DC02'/%3E%3C/svg%3E");
}

/* === SZ — Increase breadcrumb spacing after home icon === */
#main_content_section > div:nth-child(1) > ul > li:nth-child(1) {
    margin-right: 10px; /* Increase space between icon and board name */
}


/* SZ 2025-11-23 — Breadcrumb + Home link text shadow (Desktop + Tablet only) */
@media (min-width: 770px) {
    #main_content_section .navigate_section ul li a span,
    #main_content_section .navigate_section ul li a {
        text-shadow: 1px 2px 4px rgba(0,0,0,0.75);
    }
    #main_content_section .navigate_section ul li .dividers {
        text-shadow: none !important;
    }
}


/* SZ 2025-11-23 — Info Center Recent Posts link animation (synced, excludes role colors) */
html.sz-anim-ready #ic_recentposts .recentpost strong a,
html.sz-anim-ready #ic_recentposts .recentboard a {
    animation: color-change 130s infinite;
    animation-delay: var(--sz-gradient-offset, 0s);
}


/* SZ 2025-11-23 — Stretch Info Center full width (Desktop + Tablet) */
@media (min-width: 770px) {
    #info_center {
        width: 100%;
        margin: 0;
        padding-left: 0;
        padding-right: 0;
    }
    #info_center > div {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
    #info_center > div.title_bar,
    #info_center > div.title_bar > h3 {
        border-radius: 0;
        width: 100%;
    }
    #ic_recentposts table {
        width: 100% !important;
    }
}


/* SZ 2025-11-23 — Info Center Recent Posts full-width alignment (Desktop + Tablet) */
@media (min-width: 721px) {
  #ic_recentposts {
    width: 100% !important;
    margin: 0 !important;
  }
}


/* SZ 2025-11-24 — Increase left padding for Recent Posts message titles (Desktop + Tablet) */
@media (min-width: 770px) {
    #ic_recentposts table tr td:first-child {
        padding-left: 4px !important;
    }
}


/* SZ 2025-11-24 — Remove border above Info Center bar and hug top */
@media (min-width: 770px) {
    #info_center {
        border-top: none !important;
        margin-top: 0 !important;
    }
    #info_center > .title_bar {
        border-top: none !important;
        margin-top: 0 !important;
    }
}


/* SZ 2025-11-24 — Final Info Center tweaks (Desktop + Tablet) */
@media (min-width: 770px) {
    /* Add left padding to Recent Posts message column */
    #ic_recentposts td:first-child {
        padding-left: 4px !important;
    }

    /* Remove border above purple Info Center bar and pull it up */
    #info_center > div.title_bar {
        border: none !important;
        margin-top: 0 !important;
    }
    #info_center > div.title_bar > h3 {
        margin-top: 0 !important;
    }
}


/* SZ 2025-11-24 — Recent posts left padding + remove border above info center */
@media (min-width: 770px) {
    /* Left padding for all recentpost rows */
    #ic_recentposts td.recentpost {
        padding-left: 10px !important;
    }

    /* Remove border above purple info center bar */
    #info_center > div.title_bar {
        border: none !important;
    }
}


/* SZ 2025-11-24 — Header padding + remove border for Info Center */
@media (min-width: 770px) {

    /* Left padding for Recent Posts header cell */
    #ic_recentposts th.recentpost {
        padding-left: 10px !important;
    }

    /* Remove border above purple bar */
    #info_center {
        border-top: none !important;
        box-shadow: none !important;
    }
}


/* SZ — Info Center cleanup 2025-11-24 */
@media (min-width: 770px) {

    /* Fix padding on all Recent Post cells */
    #ic_recentposts td.recentpost,
    #ic_recentposts th.recentpost {
        padding-left: 10px !important;
    }

    /* Remove side borders around the purple Info Center bar */
    #info_center {
        border-left: none !important;
        border-right: none !important;
    }

    /* Pull the bar up to cover the gray gap */
    #info_center > div.title_bar {
        margin-top: -6px !important;
    }
}


/* SZ spacing for registration verification */
#verification_control_1 > div,
#verification_control_2 {
    margin-bottom: 20px;
}

/* SZ 5px top margin for verification item */
#verification_control_1 > div {
    margin-top: 25px;
}

/* SZ — add 5px below verification questions */
#verification_control_1 > div {
    margin-bottom: 5px;
}

/* SZ — registration form spacing and bold questions */
.register_form dt {
    margin-bottom: 5px;
    font-weight: 600;
}

.register_form dd {
    margin-bottom: 10px;
}

/* SZ — verification questions bold + spacing */
#verification_control_1,
#verification_control_2 {
    font-weight: 600;
}

#verification_control_1 input,
#verification_control_2 input {
    margin-top: 5px;
}

/* SZ — Move bot help text above question */
#custom_group dt .smalltext {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}

#custom_group dt {
    display: flex;
    flex-direction: column-reverse;
}

/* SZ — Center registration question block */
#custom_group {
    text-align: center;
}

#custom_group dt,
#custom_group dd {
    float: none;
    width: 100%;
    text-align: center;
}

/* Move the explanatory text above the label */
#custom_group dt {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}

/* Add spacing */
#custom_group dt span.smalltext {
    margin-bottom: 6px;
    font-weight: 600;
}


/* SZ — Center registration question block */
#custom_group {
    text-align: center;
}

#custom_group dt,
#custom_group dd {
    float: none;
    width: 100%;
    text-align: center;
}

/* Move the explanatory text above the label */
#custom_group dt {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}

/* Add spacing */
#custom_group dt span.smalltext {
    margin-bottom: 6px;
    font-weight: 600;
}

#custom_group > dt > strong {
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 1.1rem; /* adjust if you want bigger */
    font-weight: 700;
}


/* SZ 2025-11-29 — Quick Reply modern card v2 + compact smileys */
#quickreply .sceditor-container {
	border-radius: 0;
	border: 1px solid #d0d3f3;
	background: #ffffff;
	box-shadow: 0 1px 3px rgba(10, 16, 40, 0.3);
}

#quickreply .sceditor-toolbar {
	border-bottom: 1px solid #eaecf6;
	background: linear-gradient(#f8f9fc, #f0f1fb);
}

#quickreply .sceditor-button {
	border-radius: 4px;
	transition: background 0.12s ease-out, box-shadow 0.12s ease-out, transform 0.12s ease-out;
}

#quickreply .sceditor-button:hover,
#quickreply .sceditor-button:focus {
	background: rgba(92, 114, 255, 0.12);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	transform: translateY(-1px);
}

/* Compact, scrollable smiley row for Quick Reply */
#smileyBox_message {
	margin: 8px 0 4px;
	padding: 4px 2px;
	border-top: 1px solid #dde0f3;
	background: #f9f9fd;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	max-height: 52px;
	overflow-y: auto;
}

#smileyBox_message img {
	width: 22px;
	height: 22px;
	vertical-align: middle;
	border-radius: 4px;
	padding: 2px;
	background: transparent;
	transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, background 0.12s ease-out;
}

#smileyBox_message img:hover {
	transform: translateY(-1px) scale(1.05);
	background: rgba(255, 255, 255, 0.08);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
}

/* SZ 2025-11-29 — Desktop/Tablet search button: aligned + no hover lift */
@media (min-width: 721px) {
  #search_form > input.button {
    margin-top: 4px !important;   /* keep aligned with search field */
    transform: none !important;
    top: auto !important;
    bottom: auto !important;
    box-shadow: none !important;
    transition: none !important;
  }

  #search_form > input.button:hover,
  #search_form > input.button:focus,
  #search_form > input.button:active {
    margin-top: 4px !important;
    transform: none !important;
    top: auto !important;
    bottom: auto !important;
    box-shadow: none !important;
    transition: none !important;
  }
}



/* SZ 2025-11-29 — Quickreply warning spacing + bold + centered */
#quickreply_options > div > p {
    margin-bottom: 10px !important;
    font-weight: 700 !important;
    text-align: center !important;
    background: #ffefef !important;
    border: 2px solid #d83b3b !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
    color: #d83b3b !important;
    display: block !important;
}

/* SZ 2025-11-29 — Cat bar uppercase for Quick Reply / Post Modify / Recent */
#quickreply > div.cat_bar h3,
#postmodify > div.cat_bar h3,
#recent > div.cat_bar.cat_bar_round h3 {
	text-transform: uppercase !important;
	font-weight: 600 !important;
}

/* SZ 2025-11-29 — Reply page layout: expand content on Desktop + Tablet */
@media screen and (min-width: 720px) {
	form#postmodify .roundframe {
		padding: 12px 24px;
		margin: 12px 0 0 0;
	}
}

/* SZ 2025-11-30 — Errorbox icon right alignment + ensure card look for reply warning */
#post_area > div > div.errorbox {
	position: relative;
}

#post_area > div > div.errorbox::before {
	right: 18px !important;
	left: auto !important;
	top: 50% !important;
	margin-top: 0 !important;
	transform: translateY(-50%);
}

/* SZ 2025-11-30 — Final warning styles + quick reply warning */
.errorbox {
	background: #ffefef !important;
	border: 2px solid #d83b3b !important;
	padding: 14px 18px !important;
	border-radius: 6px !important;
	font-weight: 600 !important;
	font-size: 0.95rem !important;
	text-align: center !important;
	line-height: 1.45 !important;
	color: #d83b3b !important;
	position: relative !important;
}

.errorbox::before {
	width: 16px;
	height: 16px;
	background: url(../images/icons/main_icons_sprite.png) no-repeat -57px -83px;
	right: 18px !important;
	left: auto !important;
	top: 50% !important;
	margin-top: -8px;
	transform: translateY(-50%);
	position: absolute;
	content: "";
}

/* Quickreply warning styled to match errorbox */
#quickreply_options > div > p {
	margin-bottom: 10px !important;
	font-weight: 700 !important;
	text-align: center !important;
	background: #ffefef !important;
	border: 2px solid #d83b3b !important;
	border-radius: 6px !important;
	padding: 10px 14px !important;
	color: #d83b3b !important;
}


/* SZ 2025-11-30 — Small Standard Buttons (utility/moderation) */
.sz-button-small,
#moderationbuttons a.button,
#main_content_section .pagesection.top.sz_top_actions a.button_strip_add_poll,
#main_content_section .pagesection.top.sz_top_actions a.button_strip_mark_unread,
#main_content_section .pagesection.top.sz_top_actions a.button_strip_print,
#main_content_section .pagesection.top.sz_top_actions a.button_strip_notify {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 8px 14px;
    border-radius: 6px;
    /* Match non-active pagination pill gradient + border */
    border: 1px solid #b0b0b0;
    background: linear-gradient(#e5e5e5, #cfcfcf);
    color: #3a3a3a;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    /* Slightly stronger shadow for buttons */
    box-shadow: 0 3px 6px rgba(31, 42, 65, 0.24);
    animation: none;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

#main_content_section .pagesection.top.sz_top_actions a.button_strip_add_poll:hover,
#main_content_section .pagesection.top.sz_top_actions a.button_strip_mark_unread:hover,
#main_content_section .pagesection.top.sz_top_actions a.button_strip_print:hover,
#main_content_section .pagesection.top.sz_top_actions a.button_strip_notify:hover {
    background: linear-gradient(#f7f7f7, #eaeaea);
    border-color: #bfbfbf;
    color: #111111;
    box-shadow: 0 3px 6px rgba(31, 42, 65, 0.30);
}

.sz-button-small:hover,
#moderationbuttons a.button:hover,
#main_content_section .pagesection.top.sz_top_actions a.button_strip_add_poll:hover,
#main_content_section .pagesection.top.sz_top_actions a.button_strip_mark_unread:hover,
#main_content_section .pagesection.top.sz_top_actions a.button_strip_print:hover,
#main_content_section .pagesection.top.sz_top_actions a.button_strip_notify:hover {
    background: linear-gradient(#f7f7f7, #eaeaea);
    border-color: #bfbfbf;
    color: #111111;
    box-shadow: 0 3px 6px rgba(31, 42, 65, 0.30);
}

@media screen and (min-width: 721px) {
  #main_content_section .pagesection.top.sz_top_actions a.button_strip_add_poll,
  #main_content_section .pagesection.top.sz_top_actions a.button_strip_mark_unread,
  #main_content_section .pagesection.top.sz_top_actions a.button_strip_print,
  #main_content_section .pagesection.top.sz_top_actions a.button_strip_notify,
  #display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_add_poll,
  #display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_mark_unread,
  #display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_print,
  #display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_notify {
    color: #4f4f4f !important;
  }

  #main_content_section .pagesection.top.sz_top_actions a.button_strip_add_poll:hover,
  #main_content_section .pagesection.top.sz_top_actions a.button_strip_mark_unread:hover,
  #main_content_section .pagesection.top.sz_top_actions a.button_strip_print:hover,
  #main_content_section .pagesection.top.sz_top_actions a.button_strip_notify:hover,
  #main_content_section .pagesection.top.sz_top_actions a.button_strip_add_poll:focus,
  #main_content_section .pagesection.top.sz_top_actions a.button_strip_mark_unread:focus,
  #main_content_section .pagesection.top.sz_top_actions a.button_strip_print:focus,
  #main_content_section .pagesection.top.sz_top_actions a.button_strip_notify:focus,
  #display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_add_poll:hover,
  #display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_mark_unread:hover,
  #display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_print:hover,
  #display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_notify:hover,
  #display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_add_poll:focus,
  #display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_mark_unread:focus,
  #display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_print:focus,
  #display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_notify:focus {
    color: #4f4f4f !important;
  }
}


/* SZ 2025-11-30 — Post/Preview buttons — Standard Button Style */
form#postmodify .button,
#quickreply_options input.button,
.sz-button-standard {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    height: 46px !important;
    padding: 0 26px !important;
    border-radius: 14px !important;
    border: 1px solid #000000 !important;
    background: #ffffff !important;
    color: #1d1d1d !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    box-shadow: 0 3px 6px rgba(0,0,0,0.14) !important;
    transition: box-shadow .18s ease !important;
}

form#postmodify .button:hover,
#quickreply_options input.button:hover,
.sz-button-standard:hover {
    box-shadow: 0 5px 12px rgba(0,0,0,0.2) !important;
}

/* Keep Mobile centering */
@media screen and (max-width: 720px) {
    #post_confirm_buttons { justify-content: center !important; }
    #quickreply_options { text-align: center !important; }
    #quickreply_options input.button { margin: 8px 6px !important; }
}
 {
	/* SZ 2025-11-30 — Center Post/Preview buttons on Mobile */
	#post_confirm_buttons {
		justify-content: center !important;
	}
	#post_confirm_buttons .post_button_container {
		text-align: center !important;
	}
	#quickreply_options {
		text-align: center !important;
	}
	#quickreply_options input.button {
		margin: 8px 6px !important;
	}
}

/* SZ 2025-11-30 — STANDARD BUTTON BLUE (cat_bar-synced) */
.sz-button-standard-blue,
form#postmodify input.button[name="post"],
#quickreply_options input.button[name="post"] {
	background: linear-gradient(to bottom, #2e3099 6%, #8c7de0 100%) !important;
	color: #ffffff !important;
	text-shadow: 0 0 3px rgba(0, 0, 0, 0.55);
	border-color: #000000 !important;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.18) !important;
}

/* Link STANDARD BUTTON BLUE to the same cat_bar animation timeline */
html.sz-anim-ready .sz-button-standard-blue,
html.sz-anim-ready form#postmodify input.button[name="post"],
html.sz-anim-ready #quickreply_options input.button[name="post"] {
	border-color: #000000 !important;
}

/* STANDARD BUTTON BLUE hover — subtle emphasis, no movement */
.sz-button-standard-blue:hover,
form#postmodify input.button[name="post"]:hover,
#quickreply_options input.button[name="post"]:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.26), 0 0 10px rgba(255, 255, 255, 0.45) !important;
	filter: brightness(1.06) !important;
}



/* SZ 2025-11-30 — Topic viewing eye icon alignment + color (B/M/S) */
#display_head > p.sz_topic_viewing > span {
    display: inline-flex;
    align-items: baseline;
    vertical-align: middle;
    margin-right: 4px;
}

.sz_topic_viewing_eye_svg {
    width: 14px;
    height: 14px;
    fill: #6e6e6e;
    transform: translateY(2px);
}



/* SZ 2025-11-30 — Final eye vertical tweak (path only, B/M/S) */
#display_head > p.sz_topic_viewing > span > svg > path {
    fill: #8c8c8c !important;
    transform: translateY(-1px) !important;
}



/* SZ 2025-11-30 — Remove icons from notice / warning / error boxes */
.errorbox::before,
.warningbox::before,
.noticebox::before,
.infobox::before {
    content: none !important;
    background: none !important;
}

.errorbox,
.warningbox,
.noticebox,
.infobox {
    background-image: none !important;
}


/* ===========================================
   SZ — User Actions + Moderation — sub-board pill style + global animation
   =========================================== */
.mobile_buttons.floatright > a.button.mobile_act,
.mobile_buttons.floatright > a.button.mobile_mod {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid #d4d0ff;
    background: linear-gradient(#ffffff, #f2f2f2);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #070072 !important;
    box-shadow: 0 1px 2px rgba(31, 42, 65, 0.16);
    animation: sz-subboard-bg 130s linear infinite, sz-subboard-text 130s linear infinite;
    animation-delay: var(--sz-gradient-offset, 0s), var(--sz-gradient-offset, 0s);
    gap: 6px;
    white-space: nowrap;
}

.mobile_buttons.floatright > a.button.mobile_act:hover,
.mobile_buttons.floatright > a.button.mobile_mod:hover {
    border-color: #b7b0ff;
    box-shadow: 0 2px 4px rgba(31, 42, 65, 0.24);
}
/* SZ 2025-11-30 — Hide default blue prev/next pagination arrows */
.pagesection .pagelinks .main_icons.previous_page,
.pagesection .pagelinks .main_icons.next_page {
	display: none !important;
}

/* SZ — Remove empty pagination anchors */
.pagesection .pagelinks a.nav_page:empty {
    display: none !important;
}


/* SZ 2025-11-30 — Viewing row pagination vertical nudge (Desktop only) */
@media screen and (min-width: 720px) {
    #display_head .sz_viewing_pagesection .pagelinks {
        margin-top: -16px;
    }
}


/* SZ 2025-11-30 — Hide single-page pagination globally (Boards + Topics, Desktop/Tablet/Mobile) */
/* Hide .pagelinks blocks that contain only a single page (no other page links, no ellipsis) */
.pagesection .pagelinks:has(> .nav_page),
.pagesection .pagelinks:has(> .current_page),
.sz_viewing_pagesection .pagelinks:has(> .nav_page),
.sz_viewing_pagesection .pagelinks:has(> .current_page) {
    /* base selector group, actual hiding rule below */
}

/* Actual hide rule: only one page link, no neighbours, no expand_pages */
.pagesection .pagelinks:has(> .nav_page):not(:has(> .nav_page ~ .nav_page)):not(:has(> .nav_page ~ .current_page)):not(:has(> .current_page ~ .nav_page)):not(:has(> .current_page ~ .current_page)):not(:has(> .expand_pages)),
.pagesection .pagelinks:has(> .current_page):not(:has(> .nav_page ~ .nav_page)):not(:has(> .nav_page ~ .current_page)):not(:has(> .current_page ~ .nav_page)):not(:has(> .current_page ~ .current_page)):not(:has(> .expand_pages)),
.sz_viewing_pagesection .pagelinks:has(> .nav_page):not(:has(> .nav_page ~ .nav_page)):not(:has(> .nav_page ~ .current_page)):not(:has(> .current_page ~ .nav_page)):not(:has(> .current_page ~ .current_page)):not(:has(> .expand_pages)),
.sz_viewing_pagesection .pagelinks:has(> .current_page):not(:has(> .nav_page ~ .nav_page)):not(:has(> .nav_page ~ .current_page)):not(:has(> .current_page ~ .nav_page)):not(:has(> .current_page ~ .current_page)):not(:has(> .expand_pages)) {
    display: none !important;
}


/* SZ — remove duplicate bottom User Actions button on S only */
@media screen and (max-width: 720px) {
    #main_content_section > div:nth-child(6) > .mobile_buttons.floatright {
        display: none !important;
    }
}

/* SZ — Move top User actions to the right on S */
@media screen and (max-width: 720px) {
    #main_content_section > div:nth-child(4) > .mobile_buttons.floatright {
        display: flex;
        justify-content: flex-end;
    }
}

/* SZ 2025-12-01 — Remove yellow hover from board rows everywhere */
.up_contain:hover,
.up_contain.sz_board_clickable:hover {
	border-color: rgba(0,0,0,0.12) !important;
	box-shadow: 0 3px 8px rgba(0,0,0,0.20) !important;
	background: rgba(255,255,255,0.99) !important;
}

/* SZ 2025-12-02 — Board row cursor + title hover cleanup */
.up_contain {
	cursor: pointer;
}

/* SZ 2025-12-02 — Sub-board strip: default cursor except on actual links/buttons */
.up_contain .children {
	cursor: default;
}

.up_contain .children a {
	cursor: pointer;
}

.up_contain a.subject,
.up_contain a.subject:hover {
	text-decoration: none !important;
}

/* SZ 2025-12-02 — Modern sub-board chips (CSS only) */
.children {
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	padding: 8px 12px 10px 12px;
	width: 100%;
	background: linear-gradient(to bottom, #fafafa, #f3f3f3);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.children p {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 0.8rem;
	color: #555;
}

/* Use strong label as the "Sub-Boards" title */
.children p strong {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.72rem;
	color: #777;
	margin-right: 4px;
}

/* Turn sub-board links into pill buttons */
.children a {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	border-radius: 6px;
	background: #ffffff;
	border: 1px solid #d4d4d4;
	font-size: 0.78rem;
	font-weight: 600;
	color: #2f3e7e;
	text-decoration: none;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
	transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
	white-space: nowrap;
}

.children a:hover {
	background: #fdfcff;
	border-color: #9fa8ff;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.20);
	transform: scale(1.04);
	color: #253272;
}


/* Remove old comma separators */
.children span::after {
	content: "";
}

.children span:last-of-type::after {
	content: "";
}

/* SZ 2025-12-02 — Board index typography refresh */
.boardindex_table .info .subject {
	font-weight: 650;
	font-size: 1.12em;
	letter-spacing: 0.01em;
}

.boardindex_table .info p {
	margin: 3px 0 0;
	font-size: 0.86rem;
	color: #555;
}

.boardindex_table .board_stats {
	padding: 10px 10px 10px;
}

.boardindex_table .board_stats p {
	border-left: 1px solid rgba(0,0,0,0.10);
	border-right: none;
	padding: 2px 0 2px 10px;
	font-size: 0.8rem;
	color: #666;
	margin-left: 20px;
}

/* SZ 2025-12-02 — Sub-board density polish */
.boardindex_table .children {
	padding: 6px 10px 8px 10px;
	gap: 4px;
}

.boardindex_table .children p {
	gap: 4px;
}

.boardindex_table .children a {
	padding: 2px 8px;
	font-size: 0.75rem;
}

/* SZ 2025-12-02 — Info Center card styling */
@media (min-width: 721px){
	#info_center {
		margin-top: 24px !important;
		padding: 12px 16px 16px 16px;
		border-radius: 14px;
		background: linear-gradient(to bottom, #ffffff 0%, #f4f5fb 100%);
		box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
		border: 1px solid rgba(0,0,0,0.26);
	}

	#info_center .sub_bar {
		border-top: 1px solid rgba(0,0,0,0.10);
		padding: 10px 0 6px;
	}

	#info_center .windowbg,
	#info_center .windowbg2 {
		background: transparent;
		border: none;
	}
}

/* SZ 2025-12-03 — Info Center modern table rows */
#info_center #ic_recentposts {
    border-collapse: collapse;
    width: 100%;
}

#info_center #ic_recentposts tr.windowbg th {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.78rem;
    font-weight: 600;
    color: #333;
    border-bottom: 2px solid rgba(0,0,0,0.16);
}

#info_center #ic_recentposts tr.windowbg td {
    font-size: 0.85rem;
    color: #555;
    border-bottom: 1px solid rgba(0,0,0,0.12);
    padding: 8px 6px;
}

#info_center #ic_recentposts tr.windowbg:last-child td {
    border-bottom: none;
}

/* SZ 2025-12-03 — Info Center recent posts hover */
#info_center #ic_recentposts tr.windowbg td {
	transition: background 0.15s ease, color 0.15s ease;
}

#info_center #ic_recentposts tr.windowbg:hover td {
	background: rgba(255,255,255,0.65);
	color: #333;
}


/* SZ 2025-12-03 — Info Center Recent Posts alternating row pattern */
#info_center #ic_recentposts tr.windowbg:nth-child(odd) td {
    background: rgba(0,0,0,0.035);
}

#info_center #ic_recentposts tr.windowbg:nth-child(even) td {
    background: rgba(255,255,255,0.85);
}

/* Keep hover clean and above the pattern */
#info_center #ic_recentposts tr.windowbg:hover td {
    background: rgba(255,255,255,0.65) !important;
    color: #333 !important;
}

/* SZ 2025-12-03 — Recent posts bold + clear striping & hover (all sizes) */
#info_center #ic_recentposts td {
	font-weight: 600;
	color: #1a1a1a;
}

#info_center #ic_recentposts tr.windowbg:nth-child(odd) td {
	background: #fafafa;
}

#info_center #ic_recentposts tr.windowbg:nth-child(even) td {
	background: #f2f2f2;
}

#info_center #ic_recentposts tr.windowbg:hover td {
	background: rgba(110, 84, 200, 0.10) !important;
	color: #111 !important;
	transition: background 0.18s ease, color 0.18s ease;
}

/* SZ 2025-12-03 — Recent posts text hierarchy + hover emphasis */
#info_center #ic_recentposts tr.windowbg td,
#info_center #ic_recentposts tr.windowbg td *,
#info_center #ic_recentposts tr.windowbg a {
	font-weight: 600 !important;
	color: #171717 !important;
}

#info_center #ic_recentposts td.recentpost strong a {
	font-weight: 700 !important;
}

/* Hover: darker text on row focus */
#info_center #ic_recentposts tr.windowbg:hover td,
#info_center #ic_recentposts tr.windowbg:hover td *,
#info_center #ic_recentposts tr.windowbg:hover a {
	color: #000000 !important;
}


/* SZ 2025-12-03 subboard enhancements — updated for text chevron + squared buttons */

/* SZ 2025-12-02 — Align board title and BOARDS toggle on the same row */
#boardindex_table .up_contain .info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

#boardindex_table .up_contain .info.has_desc {
  align-items: flex-start;
}

#boardindex_table .up_contain .info:not(.has_desc) .subject {
  display: flex;
  align-items: center;
  min-height: 45px; /* match board icon height for visual centering */
}
#boardindex_table .up_contain .info > a.subject {
  flex: 1 1 auto;
  min-width: 0;
}

#boardindex_table .up_contain .info > .board_description {
  flex-basis: 100%;
}
.sz_subboard_container {
  margin-top: 0;
  padding: 0;
  background: linear-gradient(#ffffff, #f4f4f7);
  border-radius: 6px;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  animation: sz-subboard-bg 130s linear infinite;
  animation-delay: var(--sz-gradient-offset, 0s);
  transition: max-height 0.22s ease, opacity 0.18s ease, margin-top 0.18s ease, padding 0.18s ease;
}



.sz_subboard_container.sz-subboard-open {
  margin-top: 4px;
  padding: 6px 8px;
  max-height: 1000px;
  opacity: 1;
}




.sz_subboard_toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 6px;
  background: linear-gradient(#ffffff, #f4f4f7);
  padding: 8px 20px;
  border: 1px solid #c9c5ff;
  box-shadow: 0 1px 3px rgba(31, 42, 65, 0.18);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
  animation: sz-subboard-bg 130s linear infinite;
  animation-delay: var(--sz-gradient-offset, 0s);
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

.sz_subboard_toggle:hover {
  background: linear-gradient(#f4f1ff, #e0daff);
  border-color: #b7b0ff;
  box-shadow: 0 2px 4px rgba(31, 42, 65, 0.24);
}

.sz_subboard_container.sz-subboard-open .sz_subboard_toggle,
.sz_subboard_toggle[aria-expanded="true"] {
  background: linear-gradient(#f1ecff, #e3ddff);
  border-color: #b7b0ff;
  box-shadow: 0 2px 5px rgba(31, 42, 65, 0.26);

}

.sz_subboard_toggle_label {
  letter-spacing: inherit;
}

/* Match BOARDS text to sub-board chip color + synced gradient */
.sz_subboard_toggle_label,
.sz_subboard_toggle_chevron {
  color: #070072;
  animation: sz-subboard-text 130s ease infinite;
  animation-delay: var(--sz-gradient-offset, 0s);
}

.sz_subboard_toggle_chevron::before {
  content: "▾";
  display: inline-block;
  font-size: 0.8rem;
  transform-origin: center;
}

/* Flip arrow when open (support both JS class and aria-expanded attribute) */
.sz_subboard_container.sz-subboard-open .sz_subboard_toggle_chevron::before,
.sz_subboard_toggle[aria-expanded="true"] .sz_subboard_toggle_chevron::before {
  content: "▴";
}
/* Children row: always its own row below the button with animation */
.sz_subboard_children {
  width: 100%;
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  overflow: hidden;
  transition: max-height 0.22s ease, opacity 0.18s ease, margin-top 0.18s ease;
}

.sz_subboard_container.sz-subboard-open .sz_subboard_children {
  max-height: 500px; /* enough to show several rows */
  opacity: 1;
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* Nudge expanded row slightly right and use purple hover without zoom */
.sz_subboard_container.sz-subboard-open .sz_subboard_children {
  padding-left: 4px;
  overflow: visible;
}

.sz_subboard_children a:hover {
  background: linear-gradient(#f0efff, #ded8ff);
  border-color: #b7b0ff;
  transform: none;
}
/* Make sure individual child wrappers behave like buttons */
.sz_subboard_child {
  display: inline-flex;
}

.sz_subboard_children a {
  animation: sz-subboard-bg 130s linear infinite, sz-subboard-text 130s linear infinite;
  animation-delay: var(--sz-gradient-offset, 0s), var(--sz-gradient-offset, 0s);
  border-radius: 6px;
  background: linear-gradient(#ffffff, #f4f4f7);
  padding: 8px 14px;
  border: 1px solid #d4d0ff;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  color: #070072;
  box-shadow: 0 1px 2px rgba(31, 42, 65, 0.16);
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}


/* SZ 2025-12-02 — S: arrow-only BOARDS toggle */
@media screen and (max-width: 720px) {
  #boardindex_table .up_contain .info .sz_subboard_toggle {
    padding: 6px 10px;
    border-radius: 8px;
    min-width: 0;
  }

  #boardindex_table .up_contain .info .sz_subboard_toggle_label {
    display: none;
  }

  #boardindex_table .up_contain .info .sz_subboard_toggle_chevron::before {
    font-size: 1.1rem;
  }
}


/* SZ 2025-12-02 — clean collapsed sub-board rows */
#boardindex_table .children.sz_subboard_container {
  border-top: none;
  padding: 0;
}

#boardindex_table .children.sz_subboard_container.sz-subboard-open {
  border-top: 1px solid #ddd;
  padding: 5px;
}

/* Force true vertical centering for info blocks with no description */
.boardindex_table .up_contain .info:not(.has_desc) {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

/* Hide empty board_description containers */
.boardindex_table .up_contain .info:not(.has_desc) .board_description:empty {
    display: none;
}


/* SZ — Mobile: nudge ALL sub-board arrow buttons left */
@media (max-width: 720px) {
    .boardindex_table .up_contain .info > button {
        transform: translateX(-7px);
    }
}


/* SZ 2025-12-03 — Board index rows: remove tinted windowbg background so all rows match */
#boardindex_table .windowbg:nth-of-type(even),
#boardindex_table .windowbg:nth-of-type(odd) {
	background: transparent !important;
}


/* SZ 2025-12-04 — Topic header viewing + top pagination layout (Desktop & Tablet) */
@media screen and (min-width: 720px) {
  /* Make viewing info text lighter */
  #display_head .sz_topic_viewing,
  #display_head .sz_topic_viewing strong {
    font-weight: 300 !important;
    color: inherit;
  }

  /* Hide viewing-row pagination so we don't get an empty row */
  #display_head .sz_viewing_pagesection {
    display: none !important;
  }

  /* Lay out top actions row with buttons on the left and pagination on the right */
  #main_content_section .pagesection.top.sz_top_actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
  }

  #main_content_section .pagesection.top.sz_top_actions .buttonlist {
    float: none !important;
    padding: 5px 0;
  }

  #main_content_section .pagesection.top.sz_top_actions .pagelinks {
    display: inline-flex !important;
    float: none !important;
    margin-left: auto;
    padding: 5px 0;
  }

  /* Animated gradient style for topic pagination to match Add Poll / Mark Unread buttons */
  #main_content_section .pagesection.top.sz_top_actions .pagelinks > span:not([class]),
  #main_content_section .pagesection.top.sz_top_actions .pagelinks .nav_page,
  #main_content_section .pagesection.top.sz_top_actions .pagelinks .expand_pages,
  #main_content_section .pagesection.top.sz_top_actions .pagelinks .current_page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 6px 10px;
    margin: 0 2px;
    border-radius: 6px;
    border: 1px solid #d4d0ff;
    background: linear-gradient(#ffffff, #f4f4f7);
    color: #070072;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    box-shadow: 0 1px 2px rgba(31, 42, 65, 0.16);
    animation: none;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  }

  #main_content_section .pagesection.top.sz_top_actions .pagelinks > span:not([class]):hover,
  #main_content_section .pagesection.top.sz_top_actions .pagelinks .nav_page:hover,
  #main_content_section .pagesection.top.sz_top_actions .pagelinks .expand_pages:hover {
    background: linear-gradient(90deg, #ffffff, #f5f5f5, #e7e7e7);
    background-size: 200% 100%;
    animation: sz_pill_shine 0.65s linear;
  }
}






/* SZ 2025-12-04 — Shadow under topic header (Downloads / title bar) */
@media screen and (min-width: 720px) {
  #display_head {
    box-shadow: 0 4px 12px rgba(31, 42, 65, 0.25);
    z-index: 3;
  }
}

/* SZ 2025-12-04 — Topic pagination current page emphasis (border + shadow only) */
@media screen and (min-width: 720px) {
  #main_content_section .pagesection.top.sz_top_actions .pagelinks .current_page {
    border-color: #b5aaff;
    box-shadow:
      0 0 0 1px rgba(60, 40, 140, 0.25) inset,
      0 2px 5px rgba(31, 42, 65, 0.35);
  }
}

/* SZ 2025-12-04 — Topic pagination mobile styling (align right, match theme) */
@media screen and (max-width: 719px) {
@media screen and (max-width: 719px) {
  /* Align topic pagination row to the right */
  #main_content_section .pagesection.top.sz_top_actions .pagelinks {
    justify-content: flex-end;
    text-align: right;
    width: 100%;
  }}

  /* Match SZ pill style for mobile buttons */
  #main_content_section .pagesection.top.sz_top_actions .pagelinks > span:not([class]),
  #main_content_section .pagesection.top.sz_top_actions .pagelinks .nav_page,
  #main_content_section .pagesection.top.sz_top_actions .pagelinks .expand_pages,
  #main_content_section .pagesection.top.sz_top_actions .pagelinks .current_page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 8px;
    margin: 0 2px;
    border-radius: 6px;
    border: 1px solid #d4d0ff;
    background: linear-gradient(#ffffff, #f4f4f7);
    color: #070072;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    box-shadow: 0 1px 2px rgba(31, 42, 65, 0.16);
    animation: sz-subboard-bg 130s linear infinite, sz-subboard-text 130s linear infinite;
    animation-delay: var(--sz-gradient-offset, 0s), var(--sz-gradient-offset, 0s);
  }

  #main_content_section .pagesection.top.sz_top_actions .pagelinks .current_page {
    border-color: #b5aaff;
    box-shadow:
      0 0 0 1px rgba(60, 40, 140, 0.25) inset,
      0 2px 5px rgba(31, 42, 65, 0.35);
  }
}

/* SZ 2025-12-05 — Topic viewing row cursor + post gradient backgrounds */
@media screen and (min-width: 720px) {
  /* Viewing row: keep 50% transparent, full on hover, cursor pointer on hover */
  #display_head .sz_topic_viewing {
    opacity: 0.5;
    transition: opacity 0.25s ease-in-out;
  }
  #display_head .sz_topic_viewing:hover {
    opacity: 1;
    cursor: pointer;
  }

  /* Topic posts: remove border on outer wrapper and add subtle white->#f2f2f2 gradient */
  #forumposts .windowbg,
  #forumposts .windowbg2 {
    border: none;
    background: linear-gradient(to bottom, #ffffff 0%, #f2f2f2 100%);
  }
}


/* SZ 2025-12-05 — Remove outer post border + full row gradient */
@media screen and (min-width: 720px) {
  #forumposts td.windowbg,
  #forumposts td.windowbg2,
  #forumposts .windowbg,
  #forumposts .windowbg2 {
    border: none !important;
    background: linear-gradient(to bottom, #ffffff 0%, #f2f2f2 100%) !important;
  }
}

/* SZ 2025-12-05b — Remove post box border & separator line (Desktop + Tablet) */
@media screen and (min-width: 720px) {
  #forumposts .windowbg,
  #forumposts .windowbg2 {
    border: none !important;
    box-shadow: none !important;
  }

  #forumposts hr.post_separator {
    border: 0 !important;
    height: 0;
    margin: 0;
  }
}

/* SZ 2025-12-06 — Apply post wrapper gradient + border removal to all sizes */
#forumposts .windowbg,
#forumposts .windowbg2,
#forumposts td.windowbg,
#forumposts td.windowbg2 {
  border: none !important;
  box-shadow: none !important;
  background: linear-gradient(to bottom, #ffffff 0%, #f2f2f2 100%) !important;
}

#forumposts hr.post_separator {
  border: 0 !important;
  height: 0;
  margin: 0;
}

/* SZ 2025-12-06 — Quickbuttons under posts match pill/animated sub-board buttons (all sizes) */
#forumposts .quickbuttons > li > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid #d4d0ff;
  background: linear-gradient(#ffffff, #f4f4f7);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #070072 !important;
  box-shadow: 0 1px 2px rgba(31, 42, 65, 0.16);
  box-sizing: border-box;
  animation: sz-subboard-bg 130s linear infinite, sz-subboard-text 130s linear infinite;
  animation-delay: var(--sz-gradient-offset, 0s), var(--sz-gradient-offset, 0s);
  gap: 6px;
  white-space: nowrap;
}

#forumposts .quickbuttons > li > a:hover {
  background: linear-gradient(#f0efff, #ded8ff);
  border-color: #b7b0ff;
  box-shadow: 0 2px 4px rgba(31, 42, 65, 0.24);
}


/* SZ 2025-12-05 — Info Center border, shadow, and width tweaks (Desktop + Tablet) */
@media (min-width: 770px) {
    #info_center {
        border: 1px solid rgba(0, 0, 0, 0.06);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        border-radius: 14px;
    }
    /* Stretch inner content closer to edges */
    #info_center #ic_recentposts {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    #info_center #ic_recentposts table {
        width: 100% !important;
    }
}


/* SZ 2025-12-05 — Info Center full width + border + shadow */
@media (min-width: 770px) {
    #info_center {
        width: 100% !important;
        margin: 0 auto !important;
        border: 1px solid rgba(0,0,0,0.10) !important;
        box-shadow: 0 4px 14px rgba(0,0,0,0.12) !important;
        border-radius: 10px;
        padding: 15px 20px !important;
    }
    #info_center table {
        width: 100% !important;
    }
}

/* SZ 2025-12-05 — Info Center polish + alignment (Desktop + Tablet only) */
@media (min-width: 770px) {

	/* Main container */
	#info_center {
		width: 100% !important;
		margin: 0 auto !important;
		border: 1px solid rgba(0,0,0,0.10);
		box-shadow: 0 4px 14px rgba(0,0,0,0.10);
		border-radius: 15px;
		overflow: hidden !important; /* forces internal rounding to match */
	}

	/* Make inner content stretch edge-to-edge */
	#info_center > div,
	#info_center table {
		width: 100% !important;
		margin: 0 !important;
		padding: 0 20px !important;
		box-sizing: border-box;
	}

	/* Match the purple title bar rounding */
	#info_center .cat_bar {
		border-radius: 15px 15px 0 0 !important;
	}

	/* Remove leftover inset padding that causes the indent */
	#info_center .windowbg,
	#info_center .windowbg2 {
		padding: 12px 20px !important;
	}
}


/* SZ 2025-12-05 — Info Center width + compact rows */
#info_center {
  padding-left: 18px !important;
  padding-right: 18px !important;
}

#info_center .windowbg,
#info_center .windowbg2 {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

#info_center #ic_recentposts {
  width: 100% !important;
  margin: 0 !important;
}

#info_center #ic_recentposts td {
  vertical-align: middle !important;
}

/* SZ 2025-12-05 — Info Center flush content (Desktop + Tablet) */
@media (min-width: 770px) {
    /* Remove large padding so content hugs inside border */
    #info_center.roundframe {
        padding: 0 !important;
    }
    /* Tight, consistent inner padding */
    #info_center #upshrink_stats {
        padding: 10px !important;
        box-sizing: border-box !important;
    }
    /* Make recent posts table fully use width */
    #ic_recentposts {
        width: 100% !important;
    }
}

/* SZ 2025-12-05 recent posts row pointer */
#ic_recentposts tbody tr { cursor:pointer; }


/* SZ 2025-12-05 — Modernized Info Center Section Headers */
#upshrink_stats h3, #upshrink h3, #ic_recentposts h3 {
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.6px;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}


/* SZ 2025-12-05 — Modern Info Center subsection headers */
#upshrink_stats h4 > a {
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.06em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#upshrink_stats h4 > a > span.main_icons {
    margin-right: 4px;
}


/* SZ 2025-12-05 — Users Logged In Today header match */
#upshrink_stats > div:nth-child(7) > h4 {
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.06em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}


/* SZ 2025-12-05 — Tighter spacing + softer separators */
#upshrink_stats h4 {
    margin-bottom: 2px !important;
}

#upshrink_stats hr, 
#upshrink_stats > div {
    border-color: rgba(0,0,0,0.15) !important;
}


/* SZ 2025-12-05 — Add breathing space below recent posts header row */
#ic_recentposts thead tr {
    padding-bottom: 6px !important;
    line-height: 1.9 !important;
}


/* SZ 2025-12-05 — Margin under first recent post row */
#ic_recentposts > tbody > tr:nth-child(1) {
    margin-bottom: 7px !important;
    display: table-row;
}


/* SZ 2025-12-05 — Extra space between header and first recent post row */
#ic_recentposts > tbody > tr:nth-child(1) > td {
    padding-top: 7px !important;
}


/* SZ 2025-12-05 — Recent posts header spacing + bordered card */
#ic_recentposts {
    border: 1px solid #d5d9e5;
    border-radius: 4px;
    border-collapse: separate;
    border-spacing: 0;
}

#ic_recentposts thead tr th {
    padding-bottom: 6px !important;
    border-bottom: 1px solid #d5d9e5;
}

#ic_recentposts tbody tr:first-of-type td {
    padding-top: 7px !important;
}

/* SZ 2025-12-05 — Info Center section headers use SZ Menu */
#info_center #upshrink h3,
#info_center #upshrink h3 a,
#info_center #upshrink h4,
#info_center #upshrink h4 a,
#info_center #upshrink_stats > div:nth-child(3) > h4,
#info_center #upshrink_stats > div:nth-child(3) > h4 > a,
#info_center #upshrink_stats > div:nth-child(5) > h4,
#info_center #upshrink_stats > div:nth-child(5) > h4 > a,
#info_center #upshrink_stats > div:nth-child(7) > h4 {
    font-family: 'SZ Menu', 'Berlin Sans FB', Tahoma, sans-serif !important;
    font-weight: normal !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #3b3b3b !important;
}


/* Fix RECENT POSTS header font (SZ Style) */
#info_center #upshrink > h3 > a {
    font-family: "SZ Menu", "Berlin Sans FB", Tahoma, sans-serif !important;
    font-weight: normal !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #3b3b3b !important;
}

/* SZ 2025-12-05 — Ensure RECENT POSTS header matches other Info Center headers */
#info_center #upshrink_stats > div:nth-child(1) > h4,
#info_center #upshrink_stats > div:nth-child(1) > h4 > a {
    font-family: 'SZ Menu', 'Berlin Sans FB', Tahoma, sans-serif !important;
    font-weight: normal !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #3b3b3b !important;
}


/* SZ 2025-12-05 — Topic post card layout (Desktop + Tablet) */
@media screen and (min-width: 721px) {
	/* Post container cards */
	#forumposts .windowbg,
	#forumposts .windowbg2 {
		width: 100%;
		float: none;
		margin: 0 0 22px 0;
		padding: 0;
		clear: both;
		border-radius: 12px;
		background: linear-gradient(#ffffff, #f5f7ff);
		border: 1px solid rgba(173, 186, 231, 0.75);
		box-shadow: 0 4px 14px rgba(10, 16, 37, 0.14);
	}

	/* Inner spacing of each post */
	#forumposts .post_wrapper {
		padding: 14px 18px 16px 18px;
	}

	/* Post header (subject + meta) */
	#forumposts .keyinfo .postinfo {
		padding: 2px 0 6px 0;
		font-size: 0.85rem;
		font-weight: 500;
		color: #697195;
	}

	#forumposts .keyinfo .postinfo a,
	#forumposts .keyinfo .postinfo a strong {
		color: #3e4fb9;
		font-weight: 600;
	}

	/* Main message body */
	#forumposts .inner {
		padding: 10px 2px 12px 0;
		margin: 4px 0 0 0;
		box-shadow: none;
		font-size: 1.04rem;
		line-height: 1.6;
	}

	/* Ensure consistent space before next post */
	#forumposts .windowbg:last-of-type,
	#forumposts .windowbg2:last-of-type {
		margin-bottom: 10px;
	}
}


/* SZ 2025-12-06 — Sonic quote styling (Desktop/Tablet override: rounded, translucent, animated) */
#forumposts blockquote,
#forumposts .bbc_standard_quote,
#forumposts .bbc_alternate_quote {
	margin: 10px 0 12px 0;
	padding: 9px 13px 11px 13px;
	border-radius: 10px;
	border: 2px solid rgba(115, 135, 255, 0.5);
	background: linear-gradient(#ffffff, #f4f4f7);
	font-size: 0.95rem;
	font-weight: 500;
	color: #3f476e;
	animation: sz-quote-border-cycle 130s ease-in-out infinite;
	animation-delay: var(--sz-gradient-offset, 0s);
}

/* Quote header text inside the block */
#forumposts blockquote cite {
	display: block;
	margin-bottom: 4px;
	padding-bottom: 4px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	font-size: 0.88rem;
	font-weight: 600;
	color: #3e4fb9;
}

/* Sonic synchronized quote border color (50% opacity) */
@keyframes sz-quote-border-cycle {
	0% {
		border-color: rgba(115, 135, 255, 0.5);
		background: linear-gradient(#ffffff, #f4f4f7);
	}
	50% {
		border-color: rgba(156, 98, 255, 0.5);
		background: linear-gradient(#ffffff, #f4efff);
	}
	100% {
		border-color: rgba(115, 135, 255, 0.5);
		background: linear-gradient(#ffffff, #f4f4f7);
	}
}

#forumposts blockquote:hover,
#forumposts .bbc_standard_quote:hover,
#forumposts .bbc_alternate_quote:hover {
	border-color: rgba(115, 135, 255, 0.2);
	background: linear-gradient(#ffffff, #f8f9ff);
	transition: background 0.5s ease, border-color 0.5s ease;
}



/* ---- SZ OVERRIDE: Bold main post message body (not metadata/quotes/buttons) ---- */
#forumposts .inner > p,
#forumposts .inner > div:not(.bbc_standard_quote):not(.quoteheader),
#forumposts .inner span,
#forumposts .inner {
    font-weight: 600 !important;
}

#forumposts .post hr:first-of-type { display: none; }

#forumposts hr { display: none; }

@media screen and (min-width:1080px){
    #forumposts .windowbg {
        border-top: none !important;
    }
}

@media screen and (min-width: 721px) {
  #forumposts .inner {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
  }
}

}



}




/* SZ 2025-12-05c — Desktop+Tablet: static light gradient for topic actions + pagination */
@media screen and (min-width: 720px) {
  /* Topic action buttons (Add Poll, Mark Unread, Print, No Alerts or Emails) */
  #main_content_section .pagesection.top.sz_top_actions a.button_strip_add_poll,
  #main_content_section .pagesection.top.sz_top_actions a.button_strip_mark_unread,
  #main_content_section .pagesection.top.sz_top_actions a.button_strip_print,
  #main_content_section .pagesection.top.sz_top_actions a.button_strip_notify,
  #display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_add_poll,
  #display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_mark_unread,
  #display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_print,
  #display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_notify {
    background: linear-gradient(#ffffff, #bbbbbb) !important;
    border-color: #d8dae4;
    color: #4f4f4f;
    box-shadow: 0 1px 2px rgba(31, 42, 65, 0.18) !important;
    animation: none !important;
  }

  #main_content_section .pagesection.top.sz_top_actions a.button_strip_add_poll:hover,
  #main_content_section .pagesection.top.sz_top_actions a.button_strip_mark_unread:hover,
  #main_content_section .pagesection.top.sz_top_actions a.button_strip_print:hover,
  #main_content_section .pagesection.top.sz_top_actions a.button_strip_notify:hover,
  #display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_add_poll:hover,
  #display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_mark_unread:hover,
  #display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_print:hover,
  #display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_notify:hover {
    background: linear-gradient(#f8f8fb, #e9e9f0);
    border-color: #c6c8d4;
    color: #4f4f4f;
    box-shadow: 0 2px 4px rgba(31, 42, 65, 0.24);
  }
}

  /* Topic pagination pills */
  #main_content_section .pagesection.top.sz_top_actions .pagelinks > span:not([class]),
  #main_content_section .pagesection.top.sz_top_actions .pagelinks .nav_page,
  #main_content_section .pagesection.top.sz_top_actions .pagelinks .expand_pages,
  #main_content_section .pagesection.top.sz_top_actions .pagelinks .current_page {
    background: linear-gradient(#ffffff, #c4c4c4) !important;
    border-color: #d8dae4;
    color: #1c222a;
    box-shadow: 0 1px 2px rgba(31, 42, 65, 0.18) !important;
    animation: none !important;
  }

  /* Active page: slightly darker gradient + stronger shadow */
  #main_content_section .pagesection.top.sz_top_actions .pagelinks .current_page {
    background: linear-gradient(#cfcfd8, #b3b3c2);
    border-color: #c0c2ce;
    box-shadow:
      0 0 0 1px rgba(60, 40, 140, 0.22) inset,
      0 2px 5px rgba(31, 42, 65, 0.35) !important;
    font-weight: 700;
  }
}


/* SZ 2025-12-05d — Desktop+Tablet: static light gradient for TOP header actions/pagination */
@media screen and (min-width: 720px) {
  /* Topic action buttons in #display_head (Add Poll, Mark Unread, Print, No Alerts or Emails) */
  #display_head .pagesection.top.sz_top_actions a.button_strip_add_poll,
  #display_head .pagesection.top.sz_top_actions a.button_strip_mark_unread,
  #display_head .pagesection.top.sz_top_actions a.button_strip_print,
  #display_head .pagesection.top.sz_top_actions a.button_strip_notify {
    background: linear-gradient(#ffffff, #f2f2f2) !important;
    border-color: #d8dae4 !important;
    color: #070072 !important;
    box-shadow: 0 1px 2px rgba(31, 42, 65, 0.18) !important;
    animation: none !important;
    animation-name: none !important;
  }

  #display_head .pagesection.top.sz_top_actions a.button_strip_add_poll:hover,
  #display_head .pagesection.top.sz_top_actions a.button_strip_mark_unread:hover,
  #display_head .pagesection.top.sz_top_actions a.button_strip_print:hover,
  #display_head .pagesection.top.sz_top_actions a.button_strip_notify:hover {
    background: linear-gradient(#f8f8fb, #e9e9f0) !important;
    border-color: #c6c8d4 !important;
    color: #070072 !important;
    box-shadow: 0 2px 4px rgba(31, 42, 65, 0.24) !important;
  }

  /* Top pagination pills in #display_head */
  #display_head .pagesection.top.sz_top_actions .pagelinks > span:not([class]),
  #display_head .pagesection.top.sz_top_actions .pagelinks .nav_page,
  #display_head .pagesection.top.sz_top_actions .pagelinks .expand_pages,
  #display_head .pagesection.top.sz_top_actions .pagelinks .current_page {
    background: linear-gradient(#ffffff, #f2f2f2) !important;
    border-color: #d8dae4 !important;
    color: #070072 !important;
    box-shadow: 0 1px 2px rgba(31, 42, 65, 0.18) !important;
    animation: none !important;
    animation-name: none !important;
  }

  /* Active page pill: slightly darker static gradient */
  #display_head .pagesection.top.sz_top_actions .pagelinks .current_page {
    background: linear-gradient(#e0e0e6, #ccccd4) !important;
    border-color: #c0c2ce !important;
    box-shadow:
      0 0 0 1px rgba(60, 40, 140, 0.22) inset,
      0 2px 5px rgba(31, 42, 65, 0.35) !important;
    font-weight: 700;
  }
}


/* SZ 2025-12-05e — B+M hard override for top topic actions + pagination (no animation) */
@media screen and (min-width: 720px) {
  /* Any buttons in the top action strip under #display_head */
  #display_head .pagesection.top.sz_top_actions .buttonlist a,
  #display_head .pagesection.top.sz_top_actions .buttonlist a:link,
  #display_head .pagesection.top.sz_top_actions .buttonlist a:visited {
    background: linear-gradient(#ffffff, #f0f0f0) !important;
    border: 1px solid #d8dae4 !important;
    color: #4f4f4f !important;
    box-shadow: 0 1px 2px rgba(31, 42, 65, 0.18) !important;
    animation: none !important;
    animation-name: none !important;
  }

  #display_head .pagesection.top.sz_top_actions .buttonlist a:hover {
    background: linear-gradient(#f9f9fb, #e3e3eb) !important;
    border-color: #c6c8d4 !important;
    color: #4f4f4f !important;
    box-shadow: 0 2px 4px rgba(31, 42, 65, 0.24) !important;
  }

  /* Any pagination elements in the same strip */
  #display_head .pagesection.top.sz_top_actions .pagelinks span,
  #display_head .pagesection.top.sz_top_actions .pagelinks a {
    background: linear-gradient(#ffffff, #e7e7e7) !important;
    border: 1px solid #d0d0d0 !important;
    color: #4f4f4f !important;
    box-shadow: 0 1px 2px rgba(31, 42, 65, 0.18) !important;
    animation: none !important;
    animation-name: none !important;
  }

/* SZ 2025-12-05 — Top action bar pagination hover (inactive only) */
#display_head .pagesection.top.sz_top_actions .pagelinks a.nav_page:hover,
#display_head .pagesection.top.sz_top_actions .pagelinks span.nav_page:hover,
#display_head .pagesection.top.sz_top_actions .pagelinks a.expand_pages:hover,
#display_head .pagesection.top.sz_top_actions .pagelinks span.expand_pages:hover {
    background: linear-gradient(#ffffff, #f5f5f5) !important;
}


  /* Current page pill stronger + darker */
  #display_head .pagesection.top.sz_top_actions .pagelinks span.current_page {
    background: linear-gradient(#d0d0d0, #b8b8b8) !important;
    border-color: #969696 !important;
    box-shadow:
      0 0 0 1px rgba(60, 40, 140, 0.22) inset,
      0 2px 5px rgba(31, 42, 65, 0.35) !important;
    color: #000000 !important;
    font-weight: 700;
  }
}


/* SZ 2025-12-05 — Display head action buttons text color (Desktop + Tablet only) */
@media screen and (min-width: 720px) {
  #display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_add_poll,
  #display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_mark_unread,
  #display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_print,
  #display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_notify {
    color: #4f4f4f;
  }

  #display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_add_poll:hover,
  #display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_mark_unread:hover,
  #display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_print:hover,
  #display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_notify:hover,
  #display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_add_poll:focus,
  #display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_mark_unread:focus,
  #display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_print:focus,
  #display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_notify:focus {
    color: #4f4f4f;
  }
}



/* SZ 2025-12-05 — FINAL override: topic action buttons match pagination pills (Desktop + Tablet) */
@media screen and (min-width: 720px) {
  #display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_add_poll,
  #display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_mark_unread,
  #display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_print,
  #display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_notify,
  #display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_add_poll:hover,
  #display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_mark_unread:hover,
  #display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_print:hover,
  #display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_notify:hover {
    background: linear-gradient(#ffffff, #e7e7e7) !important; /* exact match to non-active pagination pills */
    border: 1px solid #bfbfbf !important;
    color: #4f4f4f !important;
    box-shadow: 0 1px 2px rgba(31, 42, 65, 0.16) !important; /* subtle, same feel as pills */
    animation: none !important;
    animation-name: none !important;
  }
}

  #display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_add_poll:hover,
  #display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_mark_unread:hover,
  #display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_print:hover,
  #display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_notify:hover {
    background: linear-gradient(#f7f7f7, #eaeaea) !important;
    border-color: #bfbfbf !important;
    color: #111111 !important;
    box-shadow: 0 3px 6px rgba(31, 42, 65, 0.30) !important;
  }
}



/* SZ 2025-12-05 — Pagination hover shine animation */
@keyframes sz_pill_shine {
  0% { background-position: 0% 0; }
  100% { background-position: 140% 0; }
}

/* FINAL FORCE SHADOW — Utility buttons */
#display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_add_poll,
#display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_mark_unread,
#display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_print,
#display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_notify {
    box-shadow: 0 10px 22px rgba(0,0,0,0.45) !important;
}

#display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_add_poll:hover,
#display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_mark_unread:hover,
#display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_print:hover,
#display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_notify:hover {
    box-shadow: 0 14px 30px rgba(0,0,0,0.55) !important;
}

/* FINAL TWEAK — subtle 2px shadow */
#display_head .pagesection.top.sz_top_actions .buttonlist.floatright a.button.button_strip_add_poll,
#display_head .pagesection.top.sz_top_actions .buttonlist.floatright a.button.button_strip_mark_unread,
#display_head .pagesection.top.sz_top_actions .buttonlist.floatright a.button.button_strip_print,
#display_head .pagesection.top.sz_top_actions .buttonlist.floatright a.button.button_strip_notify {
    box-shadow: 0 2px 6px rgba(0,0,0,0.28) !important;
}

#display_head .pagesection.top.sz_top_actions .buttonlist.floatright a.button.button_strip_add_poll:hover,
#display_head .pagesection.top.sz_top_actions .buttonlist.floatright a.button.button_strip_mark_unread:hover,
#display_head .pagesection.top.sz_top_actions .buttonlist.floatright a.button.button_strip_print:hover,
#display_head .pagesection.top.sz_top_actions .buttonlist.floatright a.button.button_strip_notify:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.35) !important;
}

/* ---- FINAL DIRECT OVERRIDE SHADOW FIX ---- */
#display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_add_poll,
#display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_mark_unread,
#display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_print,
#display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_notify {
    box-shadow: 0 2px 4px rgba(0,0,0,0.35) !important;
    background: linear-gradient(#d4d4d4, #b8b8b8) !important;
}

#display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_add_poll:hover,
#display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_mark_unread:hover,
#display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_print:hover,
#display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_notify:hover {
    box-shadow: 0 2px 6px rgba(0,0,0,0.45) !important;
    background: linear-gradient(#dcdcdc, #c5c5c5) !important;
}

/* --- CLEAN FINAL FIX: keep original color, only subtle shadow --- */
#display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_add_poll,
#display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_mark_unread,
#display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_print,
#display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_notify {
    background: linear-gradient(#ffffff, #e7e7e7) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.20) !important;
}

#display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_add_poll:hover,
#display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_mark_unread:hover,
#display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_print:hover,
#display_head > div.pagesection.top.sz_top_actions > div.buttonlist.floatright > a.button.button_strip_notify:hover {
    background: linear-gradient(#ffffff, #e7e7e7) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.28) !important;
}

/* --- FINAL MATCH PAGINATION LOOK --- */
#display_head .pagesection.top.sz_top_actions .buttonlist.floatright a.button.button_strip_add_poll,
#display_head .pagesection.top.sz_top_actions .buttonlist.floatright a.button.button_strip_mark_unread,
#display_head .pagesection.top.sz_top_actions .buttonlist.floatright a.button.button_strip_print,
#display_head .pagesection.top.sz_top_actions .buttonlist.floatright a.button.button_strip_notify {
    background: linear-gradient(#e5e5e5, #cfcfcf) !important;
    border: 1px solid #9c9c9c !important;
    color: #333 !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.30) !important;
}

#display_head .pagesection.top.sz_top_actions .buttonlist.floatright a.button.button_strip_add_poll:hover,
#display_head .pagesection.top.sz_top_actions .buttonlist.floatright a.button.button_strip_mark_unread:hover,
#display_head .pagesection.top.sz_top_actions .buttonlist.floatright a.button.button_strip_print:hover,
#display_head .pagesection.top.sz_top_actions .buttonlist.floatright a.button.button_strip_notify:hover {
    background: linear-gradient(#f2f2f2, #d7d7d7) !important;
    border: 1px solid #7b7b7b !important;
    color: #000 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.35) !important;
}

/* --- FINAL CLEAN VERSION | MATCH PAGINATION EXACTLY --- */
#display_head .pagesection.top.sz_top_actions .buttonlist.floatright a.button.button_strip_add_poll,
#display_head .pagesection.top.sz_top_actions .buttonlist.floatright a.button.button_strip_mark_unread,
#display_head .pagesection.top.sz_top_actions .buttonlist.floatright a.button.button_strip_print,
#display_head .pagesection.top.sz_top_actions .buttonlist.floatright a.button.button_strip_notify {
    background: linear-gradient(#f1f1f1, #d2d2d2) !important;
    border: 1px solid #bcbcbc !important;
    color: #2b2b2b !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.22) !important;
    outline: none !important;
}

/* hover stays subtle */
#display_head .pagesection.top.sz_top_actions .buttonlist.floatright a.button.button_strip_add_poll:hover,
#display_head .pagesection.top.sz_top_actions .buttonlist.floatright a.button.button_strip_mark_unread:hover,
#display_head .pagesection.top.sz_top_actions .buttonlist.floatright a.button.button_strip_print:hover,
#display_head .pagesection.top.sz_top_actions .buttonlist.floatright a.button.button_strip_notify:hover {
    background: linear-gradient(#ffffff, #dfdfdf) !important;
    border-color: #9e9e9e !important;
    color: #000 !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.26) !important;
    outline: none !important;
}

/* remove dashed focus state */
#display_head .pagesection.top.sz_top_actions .buttonlist.floatright a.button:focus {
    outline: none !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.22) !important;
}

/* ---- FINAL SIMPLE DARK GRADIENT FIX ---- */
#display_head .pagesection.top.sz_top_actions .buttonlist.floatright a.button {
    background: linear-gradient(#e0e0e0, #bcbcbc) !important;
}
#display_head .pagesection.top.sz_top_actions .buttonlist.floatright a.button:hover {
    background: linear-gradient(#efefef, #d6d6d6) !important;
}

/* SZ 2025-12-05 — TOP ACTION BUTTONS FINAL OVERRIDE */
#main_content_section .pagesection.top.sz_top_actions a.button_strip_add_poll,
#main_content_section .pagesection.top.sz_top_actions a.button_strip_mark_unread,
#main_content_section .pagesection.top.sz_top_actions a.button_strip_print,
#main_content_section .pagesection.top.sz_top_actions a.button_strip_notify {
    background: linear-gradient(#d8d8d8, #c2c2c2) !important; /* darker like pagination */
    border-color: #969696 !important;
    color: #333333 !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.26) !important;
}

/* Hide PRINT on all sizes */
#main_content_section .pagesection.top.sz_top_actions a.button_strip_print {
    display: none !important;
}

/* --- REMOVE PURPLE HOVER FROM INFO CENTER RECENT POSTS --- */
#ic_recentposts tbody tr:hover td,
#ic_recentposts tbody tr:hover {
    background-color: #dcdcdc !important; 
    color: #000 !important;
}

/* --- MOBILE FIX: move pagination right on S --- */
@media (max-width: 720px) {
    #display_head .pagelinks {
        display: flex !important;
        justify-content: flex-end !important;
        width: 100% !important;
    }
}

/* --- FIX MOBILE PAGINATION ALIGNMENT (no lifted first button) --- */
@media (max-width: 720px) {
    #display_head .pagelinks {
        display: flex !important;
        justify-content: flex-end !important;
        width: 100% !important;
        align-items: center !important;
    }

    #display_head .pagelinks > * {
        margin-top: 0 !important;
    }
}

/* --- MOBILE FIX: flatten the current active pagination button --- */
@media (max-width: 720px) {
    #display_head .pagelinks span.current_page {
        margin-top: 0 !important;
        position: relative !important;
        top: 0 !important;
    }
}

/* SZ 2025-12-05 — Mobile: normalize current_page pill in display_head pagination */
@media (max-width: 720px) {
  #display_head .pagelinks .current_page {
    display: inline-block !important;
    padding: 3px 8px !important;
    line-height: 1.6rem !important;
    border-radius: 4px !important;
    margin: 0 2px !important;
    align-items: unset !important;
    justify-content: unset !important;
  }
}

/* Nudge current page button down by 5px on all sizes */
#display_head > div.pagesection.top.sz_top_actions > div.pagelinks.floatleft > span.current_page {
    position: relative !important;
    top: 4px !important;
}

/* --- Darker signature background for contrast --- */
#main_content_section .signature,
#main_content_section .signature *,
#main_content_section .postarea .signature,
#main_content_section .signature blockquote {
    background: #e6e6e6 !important; /* darker neutral gray */
}

/* SZ 2025-12-05 — Move post action buttons into post bubble (Desktop + Tablet) */
@media (min-width: 721px) {
  #main_content_section .post_wrapper .postarea {
    position: relative;
  }

  #main_content_section .post_wrapper .postarea .under_message {
    position: absolute;
    right: 28px;
    bottom: 26px;
    width: auto;
    display: inline-flex;
    gap: 0.5rem;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
  }

  #main_content_section .post_wrapper .postarea .under_message .buttonlist,
  #main_content_section .post_wrapper .postarea .under_message .buttonlist li {
    float: none;
  }
}
/* === SZ MANUAL PAGINATION ADJUSTMENT AREA === */
@media screen and (min-width: 720px){
    #display_head .pagesection .pagelinks .current_page {
        position: relative;
        top: var(--sz-page-nudge, 0px);
    }
}

/* SZ 2025-12-05 — MANUAL CURRENT PAGE NUDGE (Desktop + Tablet) */
@media screen and (min-width: 720px) {
  #display_head > div.pagesection.top.sz_top_actions > div.pagelinks.floatleft > span.current_page {
    position: relative !important;
    top: 0px !important; /* tweak this value to move active page up/down */
  }
}

/* SZ 2025-12-05 — OP-only extra padding so buttons stay inside bubble */
@media (min-width: 721px) {
  /* reset non-OP posts back to normal padding */
  #main_content_section .post_wrapper:not(.op-post) .postarea {
    padding-bottom: 18px !important;
  }

  /* keep extra space only on OP post so buttons don't overlap text */
  #main_content_section .post_wrapper.op-post .postarea {
    padding-bottom: 60px !important;
  }
}