/* ==========================================================================
   Import Tailwind
   ========================================================================== */
@import "tailwind.css";

/* ==========================================================================
   CSS Custom Properties (Variables)
   ========================================================================== */
:root {
  /* Brand Colors */
  --imblue:           #064780;
  --imbluehover:      #064780;
  --imlightblue:      #2569b5;
  --imlightbluehover: #1f5795;

  /* Grays & Neutrals */
  --nearlywhite: #fafafa;
  --dark0:       rgba(0, 0, 0, 0.25);
  --dark1:       #1a1a1a;
  --dark2:       #232323;
  --dark3:       #333;
}

/* ==========================================================================
   Layout: Header, Navigation, Footer
   ========================================================================== */

/* --- Navigation --- */
#site-nav { /* background-color: #fafafa; */ }
.site-nav > li,
.site-nav > li > a,
.site-nav > li > span > a { color: #e0e0e0; }
.site-nav .font-icon > i,
.site-nav .font-icon > a > i { color: #888; }
.site-nav .rightside.dropdown-visible > a,
.site-nav .rightside > a:hover { 
  background-color: var(--dark3);
  color: var(--nearlywhite);
 }

#site-header { 
  background: rgba(0, 0, 0, 0.33);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  position: relative;
}

#site-menu > li > a { color: white; font-weight: 600; }
#site-menu > li.dropdown-visible > a,
#site-menu > li > a:hover {
  color: #3498db;
}

/* --- Search --- */
#site-search { border-color: var(--dark3); }
#site-search input,
#site-search button {
  background-color: var(--dark1);
  color: #e0e0e0;
  border-radius: 0;
}
#site-search input:hover,
#site-search input:focus,
#site-search input:hover + button,
#site-search input:focus + button,
#site-search button:hover {
  background-color: var(--dark3);
  border-color: var(--imblue);
  color: #fff;
}

/* --- Subhead --- */
#wrap-subhead {
  background: var(--dark2);
  border: 1px solid black;
  border-color: var(--dark3);
  border-radius: 3px;
  max-width: 1180px;
  margin: 0 auto;
  box-shadow: 0 0 6px rgba(0,0,0,0.1);
  margin-bottom: 1em;
}
#wrap-subhead h2,
#wrap-subhead h2 a {
  color: #fff;
  font-size: 1.4em;
}

/* --- Subhead Tabs --- */
#subhead-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  align-items: center;
  margin: 1em 0;
  font-size: 1.2em;
}
#subhead-tabs a {
  background: transparent;
  border-color: var(--dark3);
  color: var(--nearlywhite);
  height: auto;
  font-size: 1em;
  line-height: 1.2em;
  padding: 0.5em 1em;

  border-radius: 3px;
  border: 1px solid var(--dark3);
}
#subhead-tabs a:hover {
  background-color: var(--imlightblue);
  border-color: var(--imlightblue);
  color: #fff;
}
#subhead-tabs .activetab a {
  background-color: var(--imlightblue);
  border-color: var(--imlightblue);
  color: #fff;
}
#subhead-title-tabs {
  margin: 1em 0;
}

/* --- Breadcrumbs --- */
.breadcrumbs {
  padding: 35px 0;
  color: #e0e0e0;
}
.breadcrumbs a,
.breadcrumbs a:hover,
.breadcrumbs .crumb:before { color: #e0e0e0; }

/* --- Footer --- */
#site-footer-nav,
#site-footer { background-color: var(--dark1); }
#site-footer-area {
  background-color: var(--dark2);
  border-top-color: var(--dark3);
}
#site-footer-area,
#site-footer-area a { color: #e0e0e0; }
#site-footer-area h3,
#site-footer-area h5,
#site-footer-area h3 a,
#site-footer-area h5 a { color: #888; }
.cfooter-social a:hover {
  background-color: var(--imblue);
  color: #fff !important;
}
#site-footer-nav,
#site-footer-nav a { color: #e0e0e0; }
#site-footer,
#site-footer a { color: #888; }

#foot-left,
#foot-center,
#foot-right,
#foot-left a,
#foot-center a,
#foot-right a { color: #d2d2d2; }
#foot-left a:hover,
#foot-center a:hover,
#foot-right a:hover { color: #fff; }

/* --- Statistics --- */
.statistics-list { color: #888; }
.statistics-list span {
  background-color: var(--dark2);
  border-color: var(--dark3);
}
.statistics-list strong { color: #fff; }

/* --- Misc Nav --- */
.nav-mid,
.nav-mid a { color: #e0e0e0; }
.forum-mods,
.forum-mods a { color: #888; }

/* ==========================================================================
   Typography & General Colors
   ========================================================================== */
body {
  color: #e0e0e0;
  background-color: #121212;
}
h1, h2, h3 { color: #fff; }
h2 { font-weight: 700; letter-spacing: 0.01em; }
h3 { font-weight: 600; letter-spacing: 0.01em; }
hr { border-color: var(--dark3); }
.sep { color: #64b5f6; }

/* ==========================================================================
   Side Blocks
   ========================================================================== */
.side-block {
  background-color: var(--dark2);
  border-color: var(--dark3);
}
.side-block-head,
.side-block-head > a {
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.side-block-head > a:hover { color: #64b5f6; }

/* ==========================================================================
   Search Box
   ========================================================================== */
.search-box .inputbox,
.search-box .button {
  background-color: var(--dark1);
  border-color: var(--dark3);
  color: #e0e0e0;
}
.search-box .inputbox:hover,
.search-box .inputbox:hover + .button {
  background-color: #2a2a2a;
  border-color: var(--dark3);
  color: #e0e0e0;
}
.search-box .button:hover {
  background-color: var(--imblue);
  border-color: var(--imblue);
  color: #fff;
}
.search-box .inputbox:focus,
.search-box .inputbox:focus + .button,
.search-box .button:active {
  border-color: var(--imblue);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(6, 71, 128, 0.1);
}

/* ==========================================================================
   Main Content & Panels
   ========================================================================== */
#wrap { background-color: transparent; }
.headerbar {
  background-color: var(--dark2);
  box-shadow: 0 1px 0px rgba(0,0,0,0.3);
  color: #e0e0e0;
}
#page-footer { background-color: var(--dark1); }

.forabg .header,
.forumbg .header {
  background-color: var(--dark1);
  color: #fff;
  border-bottom: 1px solid var(--dark0);
}
.forabg .row,
.forumbg .row {
  background-color: var(--dark2);
  border-left-color: #222;
  border-right-color: #222;
  border-bottom: 1px solid var(--dark3);
}
.forabg .row:last-child,
.forumbg .row:last-child { border-bottom-color: #222; }

.panel {
  background-color: var(--dark2);
  border-color: #222;
  color: #e0e0e0;
}
.panel:nth-child(2n) { background-color: var(--dark2); }

.post {
  background-color: var(--dark2);
  border-color: #222;
  box-shadow: 0 0 6px rgba(0,0,0,0.1);
  border: 1px solid black;
  border-radius: 3px;
  background: var(--dark2);
}
.post:target {
  animation-duration: 3s;
  animation-name: TargetGlow;
  animation-timing-function: ease-in-out;
}
@keyframes TargetGlow {
  from, 75% { border-color: rgba(100, 181, 246, 0.5); }
  to { border-color: var(--dark3); }
}

/* ==========================================================================
   Menus & Lists
   ========================================================================== */
#main-menu > li > a { color: #e0e0e0; }
#main-menu > li > a:hover {
  box-shadow: 0 1px 0 rgba(100, 181, 246, 0.75);
  color: #64b5f6;
}
ul.navlinks { background: transparent; }

.bg1, .bg2, .bg3 { background-color: var(--dark2); }
table.zebra-list tr:nth-child(odd) td,
ul.zebra-list li:nth-child(odd) { background-color: var(--dark2); }
table.zebra-list tr:nth-child(even) td,
ul.zebra-list li:nth-child(even) { background-color: #2a2a2a; }
.ucprowbg { background-color: #2a2a2a; }
.fieldsbg { background-color: var(--dark1); }

/* ==========================================================================
   Tables
   ========================================================================== */
table.table1 thead th {
  background-color: var(--dark1);
  color: #888;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
table.table1 thead a { color: #888; }
table.table1 thead a:hover { color: #64b5f6; }
table.table1 tbody tr { background-color: var(--dark2); }
table.table1 tbody tr td {
  background-color: transparent;
  border-color: #222;
  color: #e0e0e0;
}
table.table1 tbody tr td:first-child { border-color: transparent transparent transparent #222; }
table.table1 tbody tr td:last-child { border-color: transparent #222 transparent transparent; }
table.table1 tbody tr:last-child td { border-color: transparent transparent #222; }
table.table1 tbody tr:last-child td:first-child { border-color: transparent transparent #222 #222; }
table.table1 tbody tr:last-child td:last-child { border-color: transparent #222 #222 transparent; }
table.table1 td { color: #e0e0e0; }
table.table1 tbody th,
table.info tbody th {
  color: #e0e0e0;
  background-color: var(--dark2);
}

/* ==========================================================================
   Details, Misc Layout
   ========================================================================== */
dl.details dt { color: #e0e0e0; font-weight: 500; }
dl.details dd { color: #e0e0e0; }

/* ==========================================================================
   Pagination
   ========================================================================== */
.pagination li a,
.pagination li span {
  background-color: var(--dark2);
  border-color: #222;
  color: #e0e0e0;
}
.pagination li.active span,
.pagination li.ellipsis span {
  /* background-color: var(--imblue); */
  /* border-color: var(--imblue); */
  color: #fff;
}
.pagination li a:hover,
.pagination .dropdown-visible a.dropdown-trigger,
.nojs .pagination .dropdown-container:hover a.dropdown-trigger,
.pagination li a:active,
.pagination li span:focus {
  background-color: var(--imlightblue);
  color: var(--nearlywhite);
}
.row .pagination li a {
  background-color: var(--dark2);
  color: var(--nearlywhite);
  border-color: var(--dark3);
}
.row:hover .pagination li a { background-color: var(--dark2); color: #e0e0e0; }
.row:hover .pagination li a:hover,
.row:hover .pagination li a:active {
  background-color: var(--imlightblue);
  color: var(--nearlywhite);
}

/* ==========================================================================
   Miscellaneous Styles
   ========================================================================== */
.copyright,
.copyright a { color: #888; }
.copyright a:hover { color: #64b5f6; }
.error { color: #dc3545; font-weight: 600; }
li.reported dt { box-shadow: -1px 0 0 #dc3545; }
.sticky, .announce { /* you can add a background for stickies and announcements*/ }
div.rules { 
  background: rgba(241, 196, 15, 0.1);
  border: 1px solid rgba(241, 196, 15, 0.3);
  border-radius: 3px;
  padding: 0.8em 1em;
  margin-bottom: 1.2em;
  color: #f1c40f;
  font-size: 1.2em;
  font-weight: 500;
  line-height: 1.6em;
}

div.rules a {
  color: white;
  font-weight: bold;
}

div.rules a.postlink {
  color: #ffd21a;
  font-weight: bold;
}
div.rules a.postlink:hover {
  color: #ffe13b;
  font-weight: bold;
}

div.rules strong {
  font-weight: bold;
}

div.rules > .inner > strong:first-of-type {
  background-color: rgba(241, 196, 15, 0.3);
  padding: 0.5em 1em;
  border-radius: 3px;
  margin-bottom: 1em;
  font-size: 1.2em;
  line-height: 1.6em;
  margin-top: 0em;
  display: inline-block;
  font-weight: bold;
  text-transform: uppercase;
}



div.rules ul,
div.rules ol {
  margin-left: 20px;
}


#information { background-color: transparent; color: #e0e0e0; }
p.post-notice {
  background-color: rgba(255, 193, 7, 0.1);
  border: 1px solid rgba(255, 193, 7, 0.3);
  color: #e0e0e0;
}
p.post-notice:before { color: #ffc107; }
p.post-notice a { color: #64b5f6; }

.stat-block {
  background-color: var(--dark2);
  border: 1px solid var(--dark3);
  box-shadow: 0 1px 1px rgba(0,0,0,0.2), 0 1px 0 rgba(0,0,0,0.2);
}
.stat-block > h3,
.stat-block > h3 > a {
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.stat-block > h3 > a:hover { color: #64b5f6; }
.stat-block > p {
  background-color: var(--dark2);
  color: #e0e0e0;
}
#online-list-stat {
  background-color: var(--dark2);
  border-top-color: var(--dark3);
}

/* ==========================================================================
   Links
   ========================================================================== */
a { color: var(--nearlywhite); }
a:hover { color: #90caf9; }
/* Links on gradient backgrounds */
.forumbg .header a,
.forabg .header a,
th a {
  color: #fff;
  font-weight: 600;
}
.forumbg .header a:hover,
.forabg .header a:hover,
th a:hover { color: #64b5f6; }

.forabg .inner ul.topiclist li.header dl.icon {
  /* box-shadow: 0 3px 6px 3px rgba(0, 0, 0, 0.15); */
}
/* Notification mark read link */
.dropdown-extended a.mark_read {
  background-color: var(--imblue);
  color: #fff;
}
.dropdown-extended a.mark_read:hover {
  background-color: #dc3545;
  color: #fff;
}
a.forumtitle,
a.topictitle,
a.lastsubject { color: #fff; }
a.forumtitle:hover,
a.topictitle:hover,
a.lastsubject:hover { color: #64b5f6; }
/* Post body links */
.postlink,
.postlink:visited { color: #64b5f6; }
.postlink:hover { color: #90caf9; }
.author > a { color: #888; }
.author > a:hover { color: #64b5f6; }
.signature a,
.signature a:hover { background-color: transparent; }
/* Back to top of page */
a.top, a.top2 { background-image: url("images/icon_back_top.gif"); }
/* Arrow links  */
a.arrow-up:hover { background-color: transparent; }
a.arrow-left:hover,
a.arrow-right:hover { color: #64b5f6; }

/* ==========================================================================
   Content: Forums, Posts, Notices, BBCode
   ========================================================================== */
ul.forums { background-color: var(--dark2); }
ul.topiclist li { color: #888; }
li.row strong { color: #e0e0e0; }
li.header dt,
li.header dd {
  border-color: var(--dark3);
  color: #fff;
}
.posts-approve { color: #dc3545; }

/* --- Post Body --- */
.postbody {
  border-color: var(--dark3);
  color: #e0e0e0;
}
.postbody h3,
.postbody h3 a {
  color: #fff;
  font-weight: 600;
}
.postbody h3 a:hover { color: #64b5f6; }

.postbody .content ul {
  list-style: disc !important;
}

.posts-buttons {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5em;
  margin-bottom: 1em;
  margin-top: 1em;
  padding: 0.5em;
  border-radius: 0.5em;
  background-color: var(--dark2);
  border: 1px solid var(--dark3);
}
.posts-buttons a {
  background-color: transparent;
  color: var(--nearlywhite);
  opacity: 0.5;
}
.posts-buttons a:hover {
  opacity: 1;
}
.posts-buttons span {
  background-color: var(--dark3);
  color: var(--nearlywhite);
}

/* --- Content Containers --- */
#topicreview { background-color: var(--dark2); }
.content { color: #e0e0e0; }
.content h2,
.panel h2 {
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.01em;
}
dl.faq dt {
  color: #fff;
  font-weight: 600;
}
.posthilit {
  background-color: rgba(220, 53, 69, 0.2);
  color: #dc3545;
  border-radius: 3px;
  padding: 2px 4px;
}
.announce, .unreadpost { /* Highlight the announcements & unread posts box */ }

/* --- Signature --- */
.signature {
  border-top-color: var(--dark3);
  color: #888;
}

/* --- Notices --- */
.notice {
  background-color: rgba(255, 193, 7, 0.1);
  border-color: rgba(255, 193, 7, 0.3);
  color: #e0e0e0;
}
.notice:hover { color: #fff; }
.notice:not(:hover) > .username-coloured,
.notice:not(:hover) > .username { color: #e0e0e0 !important; }

/* --- BBCode: Quote, Code, Syntax --- */
blockquote {
  background-color: #2a2a2a;
  border-color: var(--dark3);
  margin-bottom: 20px;
  color: #e0e0e0;
}
.codebox {
  background-color: var(--dark1);
  border-color: var(--dark3);
  color: #e0e0e0;
}
.codebox p {
  border-color: var(--dark3);
  color: #fff;
  font-weight: 600;
}
.codebox code {
  color: #4caf50;
  font-family: 'Fira Mono', 'Consolas', 'Menlo', monospace;
}
.syntaxbg { color: #e0e0e0; }
.syntaxcomment { color: #ffa726; }
.syntaxdefault { color: #42a5f5; }
.syntaxhtml { color: #e0e0e0; }
.syntaxkeyword { color: #4caf50; }
.syntaxstring { color: #f44336; }

/* --- Attachments --- */
.attachbox {
  background-color: #2a2a2a;
  border-color: var(--dark3);
}
.pm-message .attachbox { background-color: var(--dark2); }
.attachbox p,
.attachbox p.stats { color: #888; }
dl.file dd { color: #888; }
dl.thumbnail img {
  border-color: #666666;
  background-color: var(--dark2);
}
dl.thumbnail dd { color: #666666; }
dl.thumbnail dt a:hover { background-color: #2a2a2a; }
dl.thumbnail dt a:hover img { border-color: #368ad2; }

/* --- Polls --- */
.poll_panel { border-color: #333 !important; }
fieldset.polls dl { color: #fafafa; }
fieldset.polls dd.resultbar { background-color: #2a2a2a; }
fieldset.polls dl.voted { color: #000; }
fieldset.polls dd div { color: #888; }
fieldset.polls dd div[style="width:0%;"] { background-color: transparent; }
.pollbar1 { background-color: #1f5390; }
.pollbar2 { background-color: #3367a4; }
.pollbar3 { background-color: #477bb8; }
.pollbar4 { background-color: #5b8fcc; }
.pollbar5 { background-color: #6fa3e0; }

/* --- Poster Profile --- */
.postprofile {
  border-color: var(--dark3);
  color: #7c7c7c;
}
.online:before { background-color: #75b445; }
dd.profile-warnings { color: #bc2a4d; }
dd.profile-rank { margin-bottom: 20px; }
dd.profile-custom-field,
dd.profile-posts { text-align: left; }

/* ==========================================================================
   Buttons & Dropdowns
   ========================================================================== */
.button {
  border-color: var(--imlightblue);
  background-color: var(--imlightblue);
  color: #e0e0e0;
  transition: background-color 0.1s, border-color 0.1s;
}
.button:hover,
.nojs .dropdown-container:hover .dropdown-select {
  background-color: #1f5795;
  border-color: #1f5795;
  color: #e0e0e0;
}
.button:active,
.dropdown-visible .dropdown-select,
.nojs .dropdown-container:active .dropdown-select {
  background-color: var(--dark3);
  border-color: var(--dark3);
  color: var(--nearlywhite);
}
.dropdown-select {
  background-color: var(--dark3);
  border-color: rgba(0,0,0,0.1);
  color: var(--nearlywhite);
}
.dropdown-select:after { border-color: rgba(0,0,0,0.075); }
.dropdown-select:hover {
  background-color: var(--dark3);
  border-color: var(--dark3);
  color: var(--nearlywhite);
}
.dropdown-select:active {
  background-color: var(--dark2);
  border-color: var(--dark2);
}
.dropdown-visible .dropdown-select,
.dropdown-visible .dropdown-select:hover,
.nojs .dropdown-container:hover .dropdown-select {
  background-color: var(--dark3);
  border-color: var(--dark3);
}
.contact-icon {
  background-color: transparent;
  color: var(--dark0);
}
.contact-icon:hover { color: var(--imlightblue); }
.buttons > .button > i { background-color: rgba(0,0,0,0.15); }

/* --- Chosen Plugin --- */
.chosen-container-single .chosen-single {
  background-color: var(--dark2);
  border-color: var(--dark2);
  color: var(--nearlywhite);
}
.chosen-container-single .chosen-single:hover {
  background-color: var(--dark3);
  border-color: var(--dark3);
  color: var(--nearlywhite);
}
.chosen-container-single .chosen-default { color: #999; }
.chosen-container-single .chosen-single:after { border-left-color: rgba(0,0,0,0.075); }
.chosen-container-single .chosen-search input[type="text"] { border-color: var(--dark3); }
.chosen-container .chosen-drop {
  background-color: var(--dark2);
  box-shadow: 1px 0 5px rgba(0,0,0,0.2);
}
.chosen-container .chosen-results { color: #fafafa; }
.chosen-container .chosen-results li.disabled-result { color: #888; }
.chosen-container .chosen-results li.highlighted {
  background-color: #2a2a2a;
  color: #fafafa;
}
.chosen-container .chosen-results li.no-results {
  color: #777;
  background: #2a2a2a;
}
.chosen-container-multi .chosen-choices {
  border-color: var(--dark3);
  background-color: var(--dark2);
}
.chosen-container-multi .chosen-choices li.search-field input[type="text"] {
  background: transparent !important;
  box-shadow: none;
  color: #999;
}
.chosen-container-multi .chosen-choices li.search-choice {
  border-color: 1px solid #aaa;
  background-color: #2a2a2a;
  box-shadow: 0 0 2px #333 inset, 0 1px 0 rgba(0,0,0,0.05);
  color: #999;
}
.chosen-container-multi .chosen-choices li.search-choice-disabled {
  border-color: var(--dark3);
  background-color: #2a2a2a;
  color: #666;
}
.chosen-container-multi .chosen-choices li.search-choice-focus { background: var(--dark3); }
.chosen-container-multi .chosen-drop .result-selected { color: #888; }
.chosen-container-active.chosen-with-drop .chosen-single {
  background-color: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.05);
  color: #fafafa;
}
.chosen-container-active .chosen-choices {
  border-color: #5897fb;
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
.chosen-container-active .chosen-choices li.search-field input[type="text"] {
  color: #222 !important;
}

/* ==========================================================================
   Control Panel (CP) Styles
   ========================================================================== */
.panel-container .panel li.row {
  border-bottom-color: var(--dark3);
  border-top-color: var(--dark3);
}
ul.cplist { border-top-color: var(--dark3); }
.panel-container .panel li.header dd,
.panel-container .panel li.header dt,
.panel-container .panel li.header dd a,
.panel-container .panel li.header dt a {
  background-color: #2a2a2a;
  color: #fafafa;
}
.panel-container table.table1 thead th {
  background-color: #2a2a2a;
  color: #fafafa;
}
#cp-main .pm-message {
  border-color: var(--dark3);
  background-color: var(--dark2);
}
#cp-main .panel {
  color: #e0e0e0;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
  border: 1px solid black;
  border-radius: 3px;
  background: var(--dark2);
  margin-bottom: 1em;
}

/* --- CP Tabs --- */
#tabs .tab > a {
  background-color: #2a2a2a;
  border-color: var(--dark3);
  color: #767b85;
}
#tabs .tab > a:hover {
  background: var(--dark2);
  color: #767b85;
}
#tabs .activetab > a,
#tabs .activetab > a:hover {
  background-color: var(--dark2);
  border-color: #333 #333 var(--dark2);
  color: #767b85;
}
#tabs-posting {
  background-color: var(--dark1);
  border-color: var(--dark3);
  font-size: 1.1em;
}
#options-panel,
#attach-panel,
#poll-panel { background-color: var(--dark2); }

#tabs-posting ul li a {
  color: var(--nearlywhite);
}
#tabs-posting ul li a:hover {
  color: white;
  text-decoration: none;
}

form#postform #topicreview {
  display: none;
}

form#postform .review-post-panel {
  display: none;
}

form#postform .postform-subject:not(.new-post) {
  display: none;
}

form#postform h3 {
  font-size: 1.4em;
  line-height: 1.6em;
  font-weight: 600;
  margin-bottom: 1em;
}


}

/* --- Mini Tabs (MCP) --- */
#minitabs .tab > a { background-color: #2a2a2a; }
#minitabs .activetab > a,
#minitabs .activetab > a:hover {
  background-color: #2a2a2a;
  color: --var(dark3);
}

/* --- Responsive Tabs --- */
.responsive-tab .responsive-tab-link:before { border-color: #536482; }
.responsive-tab .responsive-tab-link:hover:before { border-color: #d31141; }

/* --- UCP Navigation --- */
#navigation {
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
  border: 1px solid black;
  border-radius: 3px;
  background: var(--dark2);
}
#navigation a {
  border-color: transparent;
  color: #fafafa;
  font-size: 1.1em;
}
#navigation a:hover,
#navigation #active-subsection a,
#navigation #active-subsection a:hover {
  background-color: #2a2a2a;
  color: #fafafa;
  border-color: var(--dark3);
}

/* --- Preferences Pane --- */
.panel-container h2 { color: --var(dark3); }
#cp-main .pm { background-color: var(--dark2); }

/* --- Friends List --- */
.cp-mini { background-color: transparent; }
dl.mini dt { color: #425067; }

/* --- PM Styles --- */
.current { color: #000 !important; }
.pmlist li.pm_marked_colour dt { box-shadow: -1px 0 0 #477bb8; }
dd.pm_marked_colour { box-shadow: 17px 0 0 #477bb8 inset; }
.pmlist li.pm_replied_colour dt { box-shadow: -1px 0 0 #3c3c3c; }
dd.pm_replied_colour { box-shadow: 17px 0 0 #3c3c3c inset; }
.pmlist li.pm_friend_colour dt { box-shadow: -1px 0 0 #75b445; }
dd.pm_friend_colour { box-shadow: 17px 0 0 #75b445 inset; }
.pmlist li.pm_foe_colour dt { box-shadow: -1px 0 0 #f3674a; }
dd.pm_foe_colour { box-shadow: 17px 0 0 #f3674a inset; }

/* --- Avatar Gallery --- */
#gallery label {
  background: var(--dark2);
  border-color: var(--dark3);
}
#gallery label:hover { background-color: #2a2a2a; }

/* ==========================================================================
   Forms & Inputs
   ========================================================================== */
select {
  background-color: rgba(0,0,0,0.025);
  border-color: rgba(0,0,0,0.05);
  color: #999;
}
select:hover,
select:focus {
  background-color: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.075);
}
label { color: #999; }
.display-options label { color: #767b85; }
option.disabled-option { color: graytext; }
dt span { color: #767b85; }
dd label { color: #999; }
fieldset.fields1 { background-color: transparent; }
fieldset dl:hover dt label,
fieldset.quick-login input.inputbox { background-color: var(--dark2); }

/* --- Posting Page --- */
#format-buttons {
  background-color: #2a2a2a;
  border-color: var(--dark3);
  margin-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2em;
}
#format-buttons input,
#format-buttons select {
  background-color: var(--dark2);
  border: none;
}
#format-buttons input:hover,
#format-buttons select:hover { background-color: var(--dark1); }

/* --- Inputbox --- */
.inputbox {
  background-color: rgba(0,0,0,0.025);
  border-color: rgba(0,0,0,0.05);
  color: #46494f;
}
.inputbox:invalid {
  border-color: #f3674a;
  box-shadow: none;
}
.inputbox:-moz-placeholder,
.inputbox::-webkit-input-placeholder { color: #999; }
.inputbox:hover {
  background-color: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.075);
}
.inputbox:focus {
  background-color: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.075);
}
.inputbox:focus:-moz-placeholder,
.inputbox:focus::-webkit-input-placeholder { color: transparent; }

/* --- Form Buttons --- */
a.button1, input.button1 {
  background-color: var(--imlightblue);
  border-color: var(--imlightblue);
  color: #e0e0e0;
}
a.button2, input.button2 {
  background-color: var(--dark2);
  border-color: var(--dark3);
  color: var(--nearlywhite);
}
a.button3, input.button3 {
  background-color: var(--dark2);
  border-color: var(--dark3);
  color: var(--nearlywhite);
}
/* Hover states */
a.button1:hover, input.button1:hover {
  background-color: #1f5795;
  border-color: #1f5795;
  color: #e0e0e0;
}
a.button2:hover, input.button2:hover {
  color: #fafafa;
  background-color: var(--imlightblue);
  border-color: var(--imlightblue);
}
a.button3:hover, input.button3:hover { color: #e0e0e0; }
/* Focus and active states */
a.button1:active, input.button1:focus {
  background-color: #46494f;
  border-color: #46494f;
  color: #888;
}
a.button2:active, input.button2:focus {
  background-color: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.05);
  color: #fafafa;
}
a.button3:active, input.button3:focus { color: #e0e0e0; }
input.disabled { color: #888; }
.button-ar { background-color: transparent; color: #f3674a; }
.button-ra { background-color: transparent; color: #75b445; }
.button-ar:hover, .button-ra:hover { color: #46494f; }

/* ==========================================================================
   jQuery Popups & Dropdowns
   ========================================================================== */
.phpbb_alert { background-color: #2a2a2a; }
.phpbb_alert .alert_close:after {
  background-color: rgba(0,0,0,0.025);
  border-color: var(--dark3);
  color: #fafafa;
}
#darken { background-color: #46494f; }
#loading_indicator {
  background-color: #46494f;
  box-shadow: 0 0 50px #46494f;
  color: #e0e0e0;
}
.dropdown a,
.dropdown .font-icon > i,
.dropdown .font-icon > a > i { color: #e0e0e0; }
.dropdown a:hover,
.dropdown .font-icon:hover > i,
.dropdown .font-icon > a:hover > i {
  background-color: var(--dark3);
  color: #e0e0e0;
}
.dropdown-extended ul li:hover { color: #000; }
.dropdown-extended .header .header_settings a {
  background-color: transparent;
  color: #e0e0e0;
}
.dropdown-extended .header .header_settings a:hover {
  background-color: var(--dark3);
  color: #e0e0e0;
}
.dropdown-extended .header,
.dropdown-extended .footer {
  background-color: var(--dark3);
  border-color: var(--dark3);
  color: #e0e0e0;
}
.dropdown-extended .footer > a:hover { background-color: var(--dark3); }
.dropdown .pointer,
.dropdown .pointer-inner { border-color: #4575b4 transparent; }
.dropdown-extended .pointer-inner { border-color: #333 transparent; }
ul.linklist li.responsive-menu a.responsive-menu-link:before { border-color: #105289; }
ul.linklist li.responsive-menu a.responsive-menu-link:hover:before,
ul.linklist li.responsive-menu.visible a.responsive-menu-link:before { border-color: #d31141; }
.dropdown .dropdown-contents {
  background: var(--dark2);
  box-shadow: 0 0 20px var(--dark0);
}
.dropdown-up .dropdown-contents { box-shadow: 1px 0 5px rgba(0,0,0,0.2); }
.dropdown li,
.dropdown li li,
.dropdown li.separator { border-color: var(--dark3); color: #fafafa; }

/* ==========================================================================
   Notifications & Progress
   ========================================================================== */
.notification_list p.notification-time { color: #767b85; }
li.notification-reported strong,
li.notification-disapproved strong { color: #f3674a; }
.file-progress { background-color: var(--dark3); }
.file-progress-bar,
#file-total-progress-bar { background-color: green; }

/* ==========================================================================
   Quick Reply Form
   ========================================================================== */
#qr_postform input,
#qr_postform textarea {
  background-color: rgba(0,0,0,0.15);
  border-color: rgba(0,0,0,0.15);
  color: #888;
}
#qr_postform input:hover,
#qr_postform textarea:hover,
#qr_postform input:focus,
#qr_postform textarea:focus {
  background-color: var(--dark0);
  border-color: var(--dark0);
  color: #888;
}
#qr_postform .button1 {
  background-color: var(--imlightblue);
  border-color: var(--imlightblue);
  color: #fafafa;
}
#qr_postform .button2 {
  background: var(--dark3);
  color: var(--nearlywhite);
  border-color: var(--dark2);
}
#qr_postform .button1:hover {
  background-color: #1f5795;
  border-color: #1f5795;
  color: white;
}
#qr_postform .button2:hover {
  background-color: var(--imlightblue);
  border-color: var(--imlightblue);
  color: var(--nearlywhite);
}
#qr_postform .button1:focus,
#qr_postform .button2:focus {
  background-color: #37393e;
  border-color: #37393e;
  color: white;
}

#qr_postform h2 {
  font-size: 1.6em;
  line-height: 1.6em;
  font-weight: 600;
  margin-bottom: 1em;
}

#qr_postform .qr-panel .inner {
  padding: 0;
}

#qr_postform .qr-panel .inner .fields1 {

}

#qr_postform .qr-panel .inner .fields1 .qr-subject {
  display: none;
}

/* ==========================================================================
   Global Notification Bar
   ========================================================================== */
#global_notification {
  font-size: 14px;
  line-height: 1.4;
  width: 1180px;
  max-width: calc(100% - 2em);
  margin: 0 auto;
  padding: 0;
  margin-top: 1em;
}
#global_notification .global-notifications-wrapper {
  /* width: 1240px; */
  /* max-width: 95%; */
  margin: 1em auto;
}
#global_notification div.content {
  display: none;
  background: rgba(52,152,219,0.1);
  border: 1px solid rgba(52,152,219,0.3);
  border-radius: 3px;
  padding: 0.8em 1em;
  color: #3498db;
  font-size: 0.9em;
  font-weight: 500;
  width: 100%;
  text-align: left;
  max-width: 100%;
  position: relative;
  align-items: center;
  gap: 0.8em;
  min-height: auto !important;
  transition: box-shadow 0.3s ease;
}

#global_notification div.content:hover {
  box-shadow: 0px 0px 4px 3px rgba(52,152,219,0.1);
  transition: box-shadow 0.3s ease;
}

#global_notification div.content.visible { display: flex; margin-bottom: 1em; }
#global_notification div.content .notification-text {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
  line-height: 1.4;
}
#global_notification div.content .notification-text strong { font-weight: 600; }
#global_notification div.content .notification-button {
  flex: 0 0 auto;
  margin-left: auto;
}
#global_notification div.content .notification-button a {
  background: #3498db;
  color: white;
  padding: 6px 12px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 0.85em;
  text-decoration: none;
  transition: 150ms background-color;
  height: auto !important;
  line-height: 12px !important;
}
#global_notification div.content .notification-button a:hover {
  background: #2980b9;
  transition: 150ms background-color;
}
#global_notification div.content .notification-close {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(52,152,219,0.2);
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: #3498db;
  transition: 150ms all;
  outline: none;
}
#global_notification div.content .notification-close span { line-height: 1; }
#global_notification div.content .notification-close:hover {
  background: rgba(52,152,219,0.3);
  transition: 150ms all;
}

/* --- Light Mode Support --- */
body.lightmode #global_notification div.content {
  background: rgba(52,152,219,0.05);
  border: 1px solid rgba(52,152,219,0.2);
  color: #217dbb;
}
body.lightmode #global_notification div.content .notification-button a { background: #217dbb; }
body.lightmode #global_notification div.content .notification-button a:hover { background: #1a6a9a; }
body.lightmode #global_notification div.content .notification-close {
  background: rgba(52,152,219,0.1);
  color: #217dbb;
}
body.lightmode #global_notification div.content .notification-close:hover {
  background: rgba(52,152,219,0.2);
}

/* --- Mobile Responsive --- */
@media (max-width: 768px) {
  #global_notification .global-notifications-wrapper {
    width: 100%;
    max-width: 95%;
    margin: 0.5em auto;
  }
  #global_notification div.content {
    /* flex-direction: column; */
    align-items: stretch;
    gap: 0.8em;
    padding-right: 3em;
  }
  #global_notification div.content .notification-text { margin-right: 0; }
  #global_notification div.content .notification-button {
    margin-left: 0;
    align-self: flex-start;
  }
  #global_notification div.content .notification-button a {
    display: inline-block;
    width: auto;
  }
  #global_notification div.content .notification-close {
    position: absolute;
    top: 0.8em;
    right: 0.8em;
    width: 20px;
    height: 20px;
    font-size: 12px;
  }
}

/* ==========================================================================
   Miscellaneous Tweaks & Utilities
   ========================================================================== */
li.header dd { font-size: 1.35em; }
.forabg {
  box-shadow: 0 3px 5px #0000001c;
  border: 1px solid black;
  border-radius: 3px;
}
li.header dl.icon dt .list-inner { font-size: 1.15em; }
.rank-wrapper { margin: 5px auto; }
.rank-wrapper img { display: inline-block; }
h2.topic-title a { font-size: 1.2em; }
#smiley-box { display: none !important; }

/* --- Inputbox overrides for dark mode --- */
input.inputbox {
  color: #fafafa;
  background-color: var(--dark1);
}
input.inputbox:hover { background-color: var(--dark1); }
input.inputbox:focus {
  background-color: var(--dark1);
  border: 1px solid var(--imblue);
}

/* --- Message Box --- */
#message-box textarea,
#message-box input {
  color: #fafafa !important;
  background-color: var(--dark0) !important;
}
#message-box textarea:hover,
#message-box input:hover {
  background-color: var(--dark0) !important;
}
#message-box textarea:focus,
#message-box input:focus {
  background-color: var(--dark0) !important;
  border: 1px solid var(--imblue) !important;
}

/* --- Pagination ellipsis override --- */
.list-inner div.pagination ul li.ellipsis span {
  background-color: transparent !important;
  border-color: transparent !important;
}

/* --- Poll Panel Padding --- */
.panel.poll-panel { padding: 2em 0 !important; }

@media (max-width: 1120px) {
  #site-header .chunk {
    margin: 0 auto;
  }

}

.post#preview {
  width: 1180px;
  margin: 0 auto;
  margin-bottom: 2em;
  max-width: 90%;
}

#discord-banner {
  background: rgba(52,152,219,0.1);
  border: 1px solid rgba(52,152,219,0.3);
  border-radius: 3px;
  padding: 0.8em 1em;
  color: #3498db;
  font-size: 1em;
  line-height: 1.4em;
  font-weight: 500;
  text-align: left;

  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  align-items: center;
  transition: box-shadow 0.3s ease;
}

#discord-banner:hover {
  background: rgba(52,152,219,0.2);
  border: 1px solid rgba(52,152,219,0.4);
  transition: box-shadow 0.3s ease;
  box-shadow: 0px 0px 4px 3px rgba(52,152,219,0.1);
}

#discord-banner svg {
  width: 24px;
  height: 24px;
  margin-right: 1em;
}

#discord-banner > div {
  flex: 1;
  font-size: 1.1em;
}

.top-chunk-with-discord {
  display: flex;
}

.top-chunk-with-discord > ul.site-nav {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}


.top-chunk-with-discord a.mark-read {
  background-color: var(--dark3);
}

.top-chunk-with-discord a.mark-read:hover {
  background-color: var(--dark2);
  text-decoration: none;
}

#cp-main .panel fieldset dl {
  padding: 1em;
}

#cp-main .panel fieldset dl:not(:last-child) {
  border-bottom: 1px solid var(--dark3);
}

fieldset dd select, fieldset dd .inputbox {
  background: var(--dark1);
  border: 1px solid var(--dark3);
  color: #fafafa;
  padding: 0.5em 1em;
  height: auto;
  width: 100%;
}

fieldset dd select:hover, fieldset dd .inputbox:hover {
  background: var(--dark1);
  border: 1px solid var(--dark3);
  color: #fafafa;
}

fieldset dd select:focus, fieldset dd .inputbox:focus {
  background: var(--dark1);
  border: 1px solid var(--im);
  color: #fafafa;
}

fieldset dd select:focus, fieldset dd .inputbox:focus {
  background: var(--dark1);
  border: 1px solid var(--imblue);
  color: #fafafa;
}

#tz_select_date_suggest {
  background: var(--dark3);
}

#tz_select_date_suggest:hover {
  background: var(--imblue);
}



fieldset.display-actions {
  margin-top: 1em;
}

fieldset.display-actions select {
  background: var(--dark1);
  border: 1px solid var(--dark3);
  color: #fafafa;
  padding: 0.5em 1em;
  height: auto;
}

#wrap-body {
  max-width: 1180px;
  margin: 0 auto;
}

#wrap-body .chunk {
  border-color: #222;
  box-shadow: 0 0 6px rgba(0,0,0,0.1);
}

#wrap-body .chunk-main {
  padding: 0;
  margin-top: 1em;

  width: 100%;
  max-width: 100%;
}

.viewpost-header {
  display: flex;
  align-items: center;
}

.viewpost-header h3 {
  display: block;
  flex: 1;
}

.viewpost-header ul.posts-buttons {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 0.5em;
  align-items: center;
}

.viewpost-header ul.posts-buttons li {
  margin: 0 0.5em;
}

.reactions-launcher > .reaction-button {
  height: 16px !important;
  margin-left: 0 !important;
}

.reactions-launcher > .reaction-button.default-icon {
  width: 16px !important;
}

fieldset.submit-buttons {
  text-align: right;
}

.codebox {
  color: inherit;
  background-color: rgba(255, 255, 255, 0.05);
}

.codebox > p {
  display: none;
}

.codebox pre {
  user-select: text;
}

.codebox code {
  color: inherit;
  user-select: all;
}

#wrap-subhead .chunk {
  display: flex;
  align-items: center;
  padding: 1em 2em;
}

#wrap-subhead .chunk > :first-child {
  flex: 1;
}

.poll_panel > .inner {
  padding: 1em !important;
}

fieldset.polls {
  padding: 0 !important;
}

fieldset.polls > dt {
  padding: 0;
}

fieldset.polls dl {
  margin-bottom: 0.5em;
}

fieldset.polls dt {
  padding: 0 !important;
  margin: 0 !important;
}

fieldset.polls dl.poll_vote, fieldset.polls dl.poll_view_results, fieldset.polls dl.poll_total_votes  {
  text-align: right;
}

fieldset.polls dl.poll_vote > dd, fieldset.polls dl.poll_view_results > dd, fieldset.polls dl.poll_total_votes > dd {
  width: 100%;
}

fieldset.polls dl.poll_view_results dt {
  margin: 0 !important;
  padding: 0 !important;
  display: none;
}

fieldset.polls dl.voted {
  color: var(--nearlywhite);
  border: 1px solid var(--dark3);
  border-radius: 3px;
  background: var(--dark0);
}

fieldset.polls dd.resultbar {
  margin: 0 !important;
  width: 80%;
}

fieldset.polls dd div {
  color: var(--nearlywhite);
  font-weight: 600;
}

fieldset.polls dl[data-poll-option-id] label {
  background-color: transparent;
  display: block;
  width: 100%;
}

fieldset.polls dl[data-poll-option-id] {
  padding: 0.5em 1em;
  display: flex;
  align-items: center;
}

fieldset.polls dl[data-poll-option-id]:hover:not(.voted) {
  background-color: var(--dark3);
  border-radius: 3px;
}

#information.rules {
  width: 1180px;
  max-width: calc(100% - 2em);
  margin: 0 auto;
  margin-bottom: 1em;
  background: rgba(52,152,219,0.1);
  border: 1px solid rgba(52,152,219,0.3);
  border-radius: 3px;
  padding: 0.8em 1em;
  color: #3498db;
  font-size: 1.2em;
  font-weight: 500;
  padding: 0;
}

#cp-main {
  margin-top: 0 !important;
}
#site-footer-area {
  background-color: var(--dark2);
  border-color: #222;
  box-shadow: 0 0 6px rgba(0,0,0,0.1);
  border: 1px solid black;
  border-radius: 3px;
  background: var(--dark2);
}

#site-footer-area .chunk {
  box-shadow: none;
  padding: 0 2em;
  border: 0;
}

@media (max-width: 1240px) {
  
  #wrap-body, #wrap-subhead {
    margin: 0 1em;
  }
}

@media (max-width: 1120px) {

  #site-logo .site-logo {
    width: 200px;
    height: 40px;
    margin: 0;
    margin-right: 1em;
  }

  #site-menu > li > a {
    padding: 0 1em;
  }
}

@media (max-width: 920px) {
  #site-logo .site-logo {
    width: 240px;
  }

  #site-menu > li > a {
    padding: 0 0.7em;
  }
}

/* ==========================================================================
   Global Styles
   ========================================================================== */
#auth_otp {
  width: 1140px;
  margin: 2em auto;
  max-width: 90%;
}

/* ==========================================================================
   Mobile Menu & Hamburger
   ========================================================================== */

/* Mobile menu toggle button */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 30px;
  padding: 0;
  margin-left: auto;
  transition: all 0.3s ease;
}

.hamburger-line {
  width: 100%;
  height: 3px;
  background-color: #e0e0e0;
  border-radius: 2px;
  transition: all 0.3s ease;
  transform-origin: center;
}

/* Hamburger animation when active */
.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

/* Mobile menu styles */
@media (max-width: 920px) {
  .mobile-menu-toggle {
    display: flex;
  }
  
  #site-header .chunk {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* Backdrop overlay when mobile menu is open */
  body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }

  /* Show backdrop when mobile menu is open */
  body.mobile-menu-active::after {
    opacity: 1;
    visibility: visible;
  }

  /* Ensure header stays above backdrop */
  .forum-header-top {
    position: relative;
    z-index: 1001;
  }

  #site-menu {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: var(--dark2);
    border: none;
    border-radius: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    flex-direction: row;
    flex-wrap: wrap;
    z-index: 1000;
    overflow-y: auto;
  }

  /* Override chunk width constraint for the menu container */
  #site-menu .chunk {
    max-width: 100% !important;
  }

  #site-menu.mobile-menu-open {
    display: flex !important;
  }

  #site-menu > li {
    width: 100%;
    border-bottom: 1px solid var(--dark3);
  }

  /* Force non-icon items to take full width and break to new line */
  #site-menu > li:not(.font-icon) {
    flex-basis: 100%;
  }

  #site-menu > li:last-child {
    border-bottom: none;
  }



  #site-menu > li > a {
    display: block;
    padding: 1em 1.5em;
    color: #e0e0e0;
    text-decoration: none;
    transition: background-color 0.2s ease;
    width: 100%;
    text-align: left;
    box-sizing: border-box;
    line-height: 1.4 !important;
    height: auto !important;
  }

  /* Show title text for icon items in mobile */
  #site-menu > li.font-icon > a::before {
    content: attr(title);
    margin-right: auto;
    font-size: 0.9em;
    opacity: 0.8;
  }

  /* Make icon items display as flex with text first, icon right */
  #site-menu > li.font-icon > a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
  }

  /* Style the icon in font-icon items - moved to right */
  #site-menu > li.font-icon > a > i {
    margin-left: 0.5em;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
  }

  /* Style the avatar image in profile item */
  #site-menu > li.font-icon > a > img {
    margin-left: 0.5em;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
  }

  /* Style profile item separately since it doesn't have font-icon class */
  #site-menu #header-avatar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
  }

  #site-menu #header-avatar > img {
    margin-left: 0.5em;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
  }

  /* Manual text labels for specific items */
  #site-menu #notification_list_button::before {
    content: "Notifications" !important;
  }

  #site-menu a[href*="ucp.php?i=pm&folder=inbox"]::before {
    content: "Private Messages" !important;
  }

  #site-menu #header-avatar::before {
    content: "Profile" !important;
  }

  #site-menu a[href="./search.php"]::before {
    content: "Search" !important;
  }

  #site-menu > li > a:hover {
    background: var(--dark3);
    color: #fff;
  }

  /* Dropdown menu adjustments for mobile */
  #site-menu .dropdown-container {
    position: static;
    width: 100%;
  }

  #site-menu .dropdown-container > a {
    display: block;
    padding: 1em 1.5em;
    color: #e0e0e0;
    text-decoration: none;
    width: 100%;
    box-sizing: border-box;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    line-height: 1.4 !important;
    height: auto !important;
  }

  #site-menu .dropdown-container > a:hover {
    background: var(--dark3);
    color: #fff;
  }

  #site-menu .dropdown {
    position: static !important;
    display: none !important;
    background: var(--dark1);
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding: 0;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100%;
  }

  /* Show dropdown when parent is clicked/hovered */
  #site-menu .dropdown-container:hover .dropdown,
  #site-menu .dropdown-container.dropdown-visible .dropdown {
    display: block !important;
  }

  #site-menu .dropdown .pointer {
    display: none !important;
  }

  #site-menu .dropdown .dropdown-contents {
    position: static;
    background: var(--dark1);
    border: none;
    box-shadow: none;
    padding: 0;
    max-height: none;
    width: 100%;
    min-width: auto;
  }

  /* Fix notification list margin */
  #site-menu #notification_list {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Fix search dropdown margin */
  #site-menu #site-search {
    margin: 0 !important;
  }

  /* Fix search form layout in mobile menu */
  #site-menu #site-search form {
    display: flex !important;
    align-items: center;
    gap: 0;
  }

  #site-menu #site-search fieldset {
    display: flex !important;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
  }

  #site-menu #site-search input[type="search"] {
    flex: 1;
    margin: 0;
  }

  #site-menu #site-search button {
    position: static !important;
    margin: 0;
    margin-left: 0.5em;
    flex-shrink: 0;
  }

  /* Fix any dropdown with inline margin styles */
  #site-menu .dropdown[style*="margin-left"] {
    margin-left: 0 !important;
  }

  #site-menu .dropdown li {
    width: 100%;
    margin: 0;
    border-bottom: 1px solid var(--dark3);
  }

  #site-menu .dropdown li:last-child {
    border-bottom: none;
  }

  #site-menu .dropdown li a {
    display: block;
    padding: 0.8em 2em;
    background: var(--dark1);
    color: #e0e0e0;
    text-decoration: none;
    width: 100%;
    box-sizing: border-box;
    transition: background-color 0.2s ease;
    line-height: 1.4 !important;
    height: auto !important;
  }

  #site-menu .dropdown li a:hover {
    background: var(--dark3);
    color: #fff;
  }

  #site-menu .dropdown li.separator {
    height: 1px;
    background: var(--dark3);
    margin: 0;
    padding: 0;
    border: none;
  }

  /* Icon spacing in mobile menu */
  #site-menu .dropdown li.font-icon a i {
    margin-right: 0.5em;
    width: 16px;
    text-align: center;
  }

  /* Clean up text wrapping and overflow */
  #site-menu .dropdown li a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Remove any floating or absolute positioning from menu items in mobile */
  #site-menu li,
  #site-menu .dropdown li {
    float: none !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
  }

  /* Hide desktop quick links menu on mobile */
  .site-nav .responsive-menu {
    display: none !important;
  }
}

@media (max-width: 600px) {
  .top-chunk-with-discord #discord-banner > div {
    display: none !important;
  }
  .top-chunk-with-discord #discord-banner > svg {
    margin-right: 0 !important;
  }

  
  #site-logo .site-logo {
    width: 290px;
    max-width: 70%;
  }
  #wrap-subhead .chunk {
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  #wrap-subhead .chunk > :first-child {
    flex: 1;
  }
  #wrap-subhead .chunk > :last-child {
    flex: 1;
  }
  #wrap-subhead #subhead-title {
    margin: 0 !important;
  }

  fieldset.fields1 dd {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.topics dt .ico_topic_read_locked, .topics dt .ico_topic_read_locked_mine {
  /* color: #b71c1c !important; */
}

.topics dt .ico_topic_unread_locked, .topics dt .ico_topic_unread_locked_mine {
  color: var(--imlightblue) !important;
}


.topics dt .ico_sticky_unread_locked, .topics dt .ico_sticky_unread_locked_mine, .topics dt .ico_sticky_unread {
  color: var(--imlightblue) !important;
}


.topiclist > .header {
  border-bottom: 0 !important;
}

.forumbg > .inner {
  box-shadow: 0 3px 5px #0000001c;
  border: 1px solid black;
  border-radius: 3px;
  overflow: hidden;
}

ul.topiclist {
    border-bottom: 1px solid black !important;
}

.postprofile .avatar img {
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.1);
  margin: 1em 0;
  opacity: 0.7;
}

.forum-header-top {
  background: url(https://sa-mp.im/assets/images/header-background.webp) no-repeat center center;
  background-size: cover;
}

/* styled scrollbar for .tribute-container */
.tribute-container {
  scrollbar-width: thin !important;
  scrollbar-color: var(--dark3) var(--dark1) !important;
  border: 1px solid var(--dark3) !important;
}

.tribute-container ul {
  background: var(--dark2) !important;
}

.tribute-container ul li.highlight {
  background: var(--imlightblue) !important;
}