body {
  background: var(--color-bg-dark) var(--background-image-url) repeat;
  color: var(--color-light) !important;
  font-family: var(--font-main);
  font-size: var(--font-size-base);
  font-weight: 400 !important;
  line-height: 1.5;
  margin: 0;
  overflow-y: scroll;
}
  .card-body {
  background-color: var(--card-bg);
  color: var(--text-color);
}
  /* Avoid affecting header-muted text */
.card-header .text-muted {
  color: var(--text-muted); /* stays original */
}
  /* Improve readability of muted text in card bodies or general content */
.card-body .text-muted,
.text-muted:not(.card-header *) {
  color: var(--text-muted-body-dark);
}
  .card {
  color: var(--card-color);
  background-color: var(--card-bg);
  border: var(--card-border-width) solid var(--card-border-color);
  border-radius: var(--card-border-radius);
  box-shadow: var(--card-box-shadow);
  padding: var(--card-spacer-y) var(--card-spacer-x);
}
.card-header-custom {
  background-color: var(--card-cap-bg);
  color: var(--card-cap-color);
  border-bottom: 1px solid var(--card-border-color) !important;
  padding: var(--card-cap-padding-y) var(--card-cap-padding-x);
}

.card-footer-custom {
  background-color: var(--card-cap-bg);
  color: var(--card-cap-color);
  border-top: 1px solid var(--card-border-color) !important;
  padding: var(--card-cap-padding-y) var(--card-cap-padding-x);
}

  .card-header a {
  color: var(--card-cap-link-color, #2b4e35); /* fallback value if var isn't set */
  text-decoration: none;
}
  .card-title {
  margin-bottom: var(--card-title-spacer-y);
  color: var(--card-title-color);
}
  .card-subtitle {
  margin-top: calc(-0.5 * var(--card-title-spacer-y));
  margin-bottom: 0;
  color: var(--card-subtitle-color);
}
  .text-body {
  color: var(--color-text-body) !important;
}
  a,
.text-primary a,
.bg-top a,
.links a,
.postlinks a,
.navigation a,
.bg-nav a {
  color: var(--color-primary);
  text-decoration: none;
}
  a:hover,
.text-primary a:hover,
.bg-top a:hover,
.links a:hover,
.postlinks a:hover,
.navigation a:hover,
.bg-nav a:hover {
  color: var(--color-accent);
  text-decoration: none;
}
  .btn,
.btn-sm,
.progress,
.btn-fd,
.btn-menu,
.btn-page,
.btn-page-inactive,
.btn-page-active,
.btn-profile,
.btn-profile-active {
  border-radius: var(--border-radius-sm) !important;
  font-size: var(--font-size-button);
  transition-duration: 0ms;
  text-decoration: none !important;
}
  .btn-outline-primary {
  background: var(--color-white);
  border-color: var(--color-border);
  color: var(--color-primary);
}
  .btn-outline-primary:hover {
  background: var(--color-white);
  border-color: var(--color-border);
  color: var(--color-accent);
}
  .btn-primary,
.card-header {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}
  .btn-primary:hover,
.btn-profile-active:hover,
.btn-profile:hover,
.btn-menu:hover,
.btn-fd:hover,
.btn-page:hover,
.btn-page:active {
  background: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
}
  .bg-primary {
  background: var(--color-primary) !important;
}
  .bg-top,
.bg-nav,
.bg-profile,
.card-footer,
.pm_alert {
  background: var(--color-bg-top);
  color: var(--color-light);
}
  .text-muted {
  color: var(--color-muted) !important;
}
  .text-dark {
  color: var(--color-black) !important;
}
  .card,
.border {
  border-color: var(--color-border) !important;
  border-radius: var(--border-radius-md);
  margin: 0;
}
  hr {
  border-top: 1px solid var(--color-light) !important;
}
  .text-14 {
  font-size: var(--font-size-base);
}
  .text-13 {
  font-size: 13px;
}
  .text-19,
.logo {
  font-family: var(--font-alt);
  font-size: var(--font-size-heading);
  font-weight: 600 !important;
}
  .text-16,
.text-nav {
  font-family: var(--font-alt);
  font-weight: 600 !important;
}
  .text-nav {
  font-size: 2.2em;
  line-height: 1.3;
  color: var(--color-black);
}
  .border-end {
  border-right: 1px dotted #ccc !important;
}
  .form-control,
.form-control-sm,
.form-select,
.form-select-sm,
.select,
.input {
  border-color: #ccc !important;
  border-radius: var(--border-radius-sm) !important;
  font-size: var(--font-size-button);
  background-color: var(--color-white) !important;
  color: var(--color-primary) !important;
}
  .form-control:focus,
.form-select:focus,
.select:focus,
.input:focus {
  box-shadow: none !important;
}
  legend {
  font-size: var(--font-size-legend);
}
  .label,
.form-check-label {
  font-size: var(--font-size-legend);
  font-weight: normal;
}
  .online {
  color: var(--color-success);
}
  .offline {
  color: var(--color-light);
}
  .error {
  color: #dc3545;
  font-size: 12px;
  font-weight: 500;
}
  .red_alert {
  background: var(--color-error);
  color: var(--color-white);
  padding: 20px;
  font-size: var(--font-size-base);
  margin-bottom: 15px;
  word-wrap: break-word;
}
  .red_alert a {
  color: var(--color-white);
  text-decoration: underline;
}
  .trow_selected {
  background: var(--color-highlight);
  color: var(--color-black);
  border-right-color: var(--color-highlight-border);
  border-bottom-color: var(--color-highlight-border);
}
  .bg-row {
  background: var(--color-bg-light);
}
  .bg-dark,
.bg-dark a {
  background: var(--color-bg-dark) !important;
  text-decoration: none;
}
  .bg-dark a:hover {
  opacity: 0.8 !important;
  text-decoration: none !important;
}
  .scaleimages img {
  max-width: 100%;
}
  .icon {
  background: #eee;
  color: var(--color-light);
  width: 50px;
  height: 50px;
  border-radius: var(--border-radius-lg);
  text-align: center;
  line-height: 50px;
}
  .text-default {
  color: var(--color-text);
}
  .text-muted {
  color: var(--color-muted);
}
  .text-accent {
  color: var(--color-accent);
}
  .bg-surface {
  background-color: var(--color-surface);
}
  .bg-light {
  background-color: var(--color-bg-light) !important;
}
  .border-default {
  border: 1px solid var(--color-border);
}
  .border-left {
  border-left: 3px solid var(--color-primary);
}
  .forum-title {
  font-size: var(--font-size-lg);
  font-weight: bold;
  color: var(--color-primary);
}
  .forum-description {
  color: var(--color-subtle);
  font-size: var(--font-size-base);
}
  .forum-meta {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}
  .forum-title {
  font-size: var(--font-size-xl);
  font-weight: bold;
  color: var(--color-primary);
  text-decoration: none;
}
  .forum-title:hover {
  color: var(--color-primary-hover);
}
  .forum-description {
  font-size: var(--font-size-base);
  color: var(--color-muted);
}
  .gridh {
  display: grid;
  gap: var(--spacing-sm);
}
  .catmod {
  font-size: var(--font-size-small);
  background-color: var(--color-warning);
  color: var(--color-dark-text);
  border-radius: var(--border-radius-sm);
}
  :root {
  --fs-7: 0.8125rem;
}
  .fs-7 {
  font-size: var(--fs-7);
}
  /* LIGHT MODE */
.small-forum .text-muted {
  font-size: var(--fs-7); /* Define --fs-7 in :root if not already */
  color: var(--text-muted-body);
}
  /* DARK MODE: if you have a body.dark class toggle */
body.dark .small-forum .text-muted {
  font-size: var(--fs-7); /* Define --fs-7 in :root if not already */
  color: var(--text-muted-body-dark);
}
  :root {
  --cat-bg: var(--bs-gray-100);
}
  .theaddefault {
  background-color: var(--cat-bg);
  color: var(--bs-dark);
}
  :root {
  --icon-size: 50px;
  --text-muted: #6c757d;
}
  .user-icon {
  width: var(--icon-size);
  height: var(--icon-size);
  color: var(--text-muted);
}
  .d-flex {
  /*justify-content: space-around;*/
  text-align: center;
  }
  .pad-card {
  padding: var(--card-spacer-y) var(--card-spacer-x);
}
  .PostBitFlex.variant-border {
  border-radius: 5px;
  border-bottom: 6px solid var(--border-color);
  background-color: var(--card-bg);
  color: var(--text-color);
}
  .variant-hr {
  background-color: var(--hr-color);
  height: 5px;
  border: none;
  border-radius: 5px;
  border-bottom: 5px solid var(--border-color);
}
  .w-95 {
  width: 95%;
}
  .btn-danger {
  background-color: var(--btn-danger-bg);
  color: var(--btn-danger-text);
  border-color: var(--btn-danger-bg);
}
  .btn-danger:hover {
  background-color: var(--btn-danger-hover-bg);
  border-color: var(--btn-danger-hover-bg);
}
  .form-check-input {
  accent-color: var(--color-primary);
}
  .form-check-label {
  color: var(--color-text);
}
  .text-primary-emphasis {
  color: var(--color-primary);
}
  .text-primary-emphasis:hover {
  color: var(--color-primary-hover);
}
  .links i {
  color: var(--icon-color, var(--text-color));
}
  .links:hover i {
  color: var(--color-accent);
}
  select.border-theme {
  border-color: var(--border-color);
  background-color: var(--input-bg);
  color: var(--text-color);
}
  .links,
.text-theme-link {
  color: var(--link-color);
  transition: color 0.2s ease;
}
  .links:hover,
.text-theme-link:hover {
  color: var(--link-hover-color);
}
  .btn-theme-toggle {
  background-color: var(--btn-bg, #eee);
  color: var(--btn-text, #333);
  border: 1px solid var(--border-color, #ccc);
  padding: 0.25rem 0.5rem;
  border-radius: 5px;
  transition: all 0.2s ease;
}
  .btn-theme-toggle:hover {
  background-color: var(--btn-hover-bg, #ddd);
  color: var(--btn-hover-text, #000);
}
  .theme-selector {
  background-color: var(--input-bg, #fff);
  color: var(--input-text, #000);
  border-color: var(--input-border, #ccc);
  padding-right: 2rem; /* Account for the arrow */
}
  .theme-selector:focus {
  border-color: var(--focus-border, var(--color-primary));
  box-shadow: 0 0 0 0.15rem rgba(0, 127, 208, 0.25);
  outline: none;
}
  .card-header {
  background-color: var(--category-bg);
  color: var(--category-text);
  border-bottom: 1px solid var(--category-border);
}
  .card-header a {
  color: var(--category-link);
}
  .card-header a:hover {
  text-decoration: underline;
}
  .expander {
  width: 1rem;
  height: 1rem;
  background-color: var(--expander-icon);
  mask: url(../../../images/collapse.svg) center/contain no-repeat;
  -webkit-mask: url(../../../images/collapse.svg) center/contain no-repeat;
  cursor: pointer;
}
  /* Optional expanded/collapsed state */
.expander.collapsed {
  mask: url(../../../images/expand.svg) center/contain no-repeat;
  -webkit-mask: url(../../../images/expand.svg) center/contain no-repeat;
}
  /* Hide/show forum body based on toggle */
.toggle-cat:not(:checked) + .card .cat-body {
  display: none;
}
  /* Optional: rotate icon when collapsed */
.toggle-cat + .card label .cat-toggle-icon::before {
  content: "\f078"; /* FontAwesome chevron-down */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  display: inline-block;
  transition: transform 0.3s ease;
}
  .toggle-cat:not(:checked) + .card label .cat-toggle-icon::before {
  transform: rotate(-90deg);
}
  .text-subforum-icon {
  color: var(--color-subforum-icon) !important;
}
  .subforumicon i {
  font-size: 0.75rem; /* or whatever suits */
}
  .text-muted-custom {
  color: var(--text-muted);
}
  .text-warning-custom {
  color: var(--text-warning);
}
  .text-danger-custom {
  color: var(--text-danger);
}
  .text-subforum-icon {
  color: var(--text-subforum-icon);
}
  .text-lastpost-icon {
  color: var(--text-lastpost-icon);
}
  .fs-sm {
  font-size: 0.875rem;
}
  .fw-medium {
  font-weight: 500;
}
  .fw-semibold {
  font-weight: 600;
}
  .badge-custom {
  background-color: var(--text-warning);
  color: #000;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
}
  .text-muted {
  color: var(--text-muted) !important;
}
  .text-danger {
  color: var(--text-danger) !important;
}
  .text-warning {
  color: var(--text-warning) !important;
}
  [data-theme="light"] .forum-moderators {
  color: var(--text-muted-light);
}
  [data-theme="dark"] .forum-moderators {
  color: var(--text-muted-dark);
}
  .moderator-link {
  text-decoration: none;
  font-weight: 500;
  color: var(--link-color);
}
  .moderator-link:hover {
  text-decoration: underline;
  color: var(--link-hover-color);
}
  .subforum-list {
  margin-top: 0.5rem; /* replaces mt-2 */
  padding-left: 1rem; /* replaces ps-3 */
  border-left: 2px solid var(--color-accent); /* replaces border-start border-accent */
  color: var(--color-muted); /* replaces text-muted */
  font-size: 0.875rem; /* replaces small */
}
  .subforumicon {
  display: inline-block;
  margin-right: 0.25rem; /* equivalent to me-1 */
  color: var(--color-subforum-icon, var(--color-muted));
}
  .icon-small {
  font-size: 0.75rem;
}
  .forumdisplay-content {
  padding: 1.5rem;
  max-width: 960px;
  margin: 0 auto;
}
  .forumdisplay-announcement {
  padding: 0.5rem;
  font-weight: normal;
  color: var(--color-muted);
  /* Optional: background-color override */
  background-color: var(--color-surface);
}
  .announcement-card {
  border-bottom: 2px solid var(--color-accent);
  background-color: var(--color-surface);
}
  .announcement-body {
  padding: 0.75rem 1rem;
}
  .text-forum {
  color: var(--color-primary);
}
  .links {
  color: var(--color-muted);
}
  .sort-select {
  background-color: var(--input-bg);
  color: var(--input-text);
  border: 1px solid var(--border-color);
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
  border-radius: 0.25rem;
}
  .inline-moderation-container {
  text-align: right;
  padding-block: 1rem;
}
  .mod-tools-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
  .mod-select {
  background: var(--input-bg);
  color: var(--input-text);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
}
  .btn-mod-primary,
.btn-mod-secondary {
  font-size: 0.875rem;
  padding: 0.4rem 0.8rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
  .btn-mod-primary {
  background: var(--color-accent);
  color: #fff;
}
  .btn-mod-secondary {
  background: var(--color-muted);
  color: var(--text-light);
}
  .hidden-desktop {
  display: none;
}

  /* Base checkbox reset and styling */
.mod-checkbox {
  width: 1rem;
  height: 1rem;
  appearance: none;
  border: 1px solid var(--border-color, #999);
  border-radius: 2px;
  background: var(--bg-color, #fff);
  cursor: pointer;
  position: relative;
}
  .mod-checkbox:checked {
  background-color: var(--accent-color, var(--color-primary));
  border-color: var(--accent-color, var(--color-primary));
}
  .mod-checkbox:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 3px;
  height: 6px;
  border: solid var(--checkmark-color, #fff);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
  select {
  background-color: var(--bg-tertiary);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  appearance: none; /* Optional: removes native styling on modern browsers */
}
  .bg-variant {
  background-color: var(--bg-tertiary);
}
  .link-accent {
  color: var(--accent-color);
  text-decoration: underline;
}
  .link-accent:hover {
  color: var(--accent-hover);
}
  .optgroup-standard {
  background-color: var(--bg-tertiary);
  color: var(--text-muted);
  font-style: italic;
}
  optgroup[label*="moderation"] {
  background-color: var(--bg-tertiary);
  color: var(--text-muted);
  font-style: italic;
}
  .btn-thread {
  background-color: var(--btn-thread-bg);
  color: var(--btn-thread-text);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  border: none;
  border-radius: 0.5rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: background-color 0.2s ease;
}
  .btn-thread:hover {
  background-color: var(--btn-thread-hover);
  text-decoration: none;
}
.alert-danger-custom {
  background-color: var(--alert-danger-bg, #f8d7da);
  color: var(--alert-danger-text, #842029);
  border: 1px solid var(--alert-danger-border, #f5c2c7);
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
}

  .no-threads-msg {
  background-color: var(--nothreads-bg);
  color: var(--nothreads-text);
  border: 1px solid var(--nothreads-border);
  font-size: 0.875rem;
}
  .order-arrow {
  color: var(--order-arrow-color);
  font-size: 0.8125rem;
}
  .order-arrow .text-link {
  color: var(--order-arrow-link);
  text-decoration: none;
}
  .order-arrow .text-link:hover {
  text-decoration: underline;
}
  .card {
  background-color: var(--card-bg);
  color: var(--text-main);
  border: 1px solid var(--border-color);
}
  .form-text {
  color: var(--text-muted);
}
  .bg-surface { background-color: var(--bg-surface); }
  .bg-panel { background-color: var(--bg-panel); }
  .bg-input { background-color: var(--bg-input); }
  .text-input { color: var(--text-input); }
  .text-muted { color: var(--text-muted); }
  .text-danger { color: var(--text-danger); }
  .border { border: 1px solid var(--border-color); }
  .border-t { border-top: 1px solid var(--border-color); }
  .border-border { border-color: var(--border-color); }
  .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  cursor: pointer;
  text-decoration: none;
}
  .btn-primary {
  background-color: var(--color-primary, var(--color-primary));
  color: #fff;
  border: none;
}
  .btn-primary:hover {
  background-color: var(--color-primary-hover, var(--color-primary-hover));
}
  .bg-accent { background-color: var(--bg-accent); }
  .text-on-accent { color: var(--text-on-accent); }
  .border-muted { border-color: var(--border-muted); }
  .text-body { color: var(--text-body); }
  .text-accent:hover {
  color: var(--color-accent-hover);
}
	  .thread-icon {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  filter: var(--thread-icon-filter, none);
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.thread-icon:hover {
  opacity: 1;
}
[data-theme="dark"] .thread-icon {
  filter: invert(1);
}
i.fa-solid {
  font-size: 1rem;
  color: var(--icon-color, var(--text-muted));
  transition: color 0.2s ease;
}

i.fa-solid:hover {
  color: var(--color-accent);
}
.thread-icon {
  color: var(--color-muted);
  margin-right: 0.25rem;
  font-size: 0.875rem;
}

.thread-icon:hover {
  color: var(--color-accent);
}
.badge {
  background-color: var(--badge-bg);
  color: var(--badge-text);
  padding: var(--badge-padding);
  border-radius: var(--badge-border-radius);
  font-size: var(--badge-font-size);
  text-decoration: none;
  transition: background-color 0.2s ease;
  display: inline-block;
}

.badge:hover {
  background-color: var(--badge-hover-bg);
  color: var(--badge-hover-text);
  text-decoration: none;
}
/* Pagination Badges */
.badge-page {
  background-color: var(--btn-bg);
  color: var(--btn-text);
  padding: 0.25rem 0.6rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  text-decoration: none;
  transition: background-color 0.2s ease;
  display: inline-block;
}

.badge-page:hover {
  background-color: var(--btn-hover-bg);
  color: var(--btn-hover-text);
}

.badge-page-active {
  background-color: var(--btn-thread-bg); /* highlight for current page */
  color: var(--btn-thread-text);
  font-weight: 600;
}

.rating-stars {
  --star-size: 16px;
  --star-color: var(--color-muted);
  --star-fill: var(--color-warning);

  display: inline-block;
  position: relative;
  font-size: var(--star-size);
  line-height: 1;
  width: calc(var(--star-size) * 5);
  height: var(--star-size);
  background: repeating-linear-gradient(
    to right,
    var(--star-color) 0,
    var(--star-color) calc(var(--star-size) - 1px),
    transparent calc(var(--star-size) - 1px),
    transparent var(--star-size)
  );
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="16" viewBox="0 0 80 16"><defs><path id="s" d="M8 0l2.5 5h5l-4 3.5 1.5 5L8 10.5 3 13.5 4.5 8.5 0 5h5z"/></defs><use href="#s" x="0"/><use href="#s" x="16"/><use href="#s" x="32"/><use href="#s" x="48"/><use href="#s" x="64"/></svg>') center / contain repeat-x;
  -webkit-mask: same as mask;
}

.rating-stars .stars-filled {
  height: 100%;
  background-color: var(--star-fill);
}
.rating-input {
  direction: rtl;
  display: inline-flex;
  gap: 0.25rem;
  font-size: var(--star-size, 1.25rem);
}

.rating-input input {
  display: none;
}

.rating-input label {
  cursor: pointer;
  color: var(--star-unfilled, var(--color-muted));
  transition: color 0.2s ease;
}

.rating-input label::before {
  content: "★";
  font-size: 1em;
}

.rating-input input:checked ~ label,
.rating-input label:hover,
.rating-input label:hover ~ label {
  color: var(--star-filled, var(--color-warning));
}
.badge-unapproved {
  background-color: var(--text-danger);
  color: var(--color-white);
  font-size: 0.75rem;
  padding: 0.25em 0.5em;
  border-radius: 0.375rem;
}
.badge-sort {
  background: var(--card-bg);
  color: var(--color-text);
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
  border: 1px solid var(--border-color);
}

.badge-sort:hover {
  background-color: var(--color-primary-hover);
  color: var(--btn-text);
  border-color: var(--color-primary-hover);
}

.badge-sort.active {
  background-color: var(--badge-active-bg);
  color: var(--badge-active-text);
  border-color: var(--badge-active-bg);
}
.badge-clearpass {
  background-color: var(--btn-bg);
  color: var(--btn-text);
  border-radius: var(--border-radius-sm);
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.badge-clearpass:hover {
  background-color: var(--btn-hover-bg);
  color: var(--btn-hover-text);
}
.prefix-selector {
  background-color: var(--input-bg);
  color: var(--input-text);
  border: 1px solid var(--input-border);
  padding: 0.25rem 2rem 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.375rem;
  appearance: none;
}

.prefix-selector:focus {
  border-color: var(--focus-border);
  box-shadow: 0 0 0 0.15rem rgba(141, 170, 145, 0.25); /* matches your green hues */
  outline: none;
}
select.prefix-selector option {
  background-color: var(--bg-tertiary);
  color: var(--text-color);
}
.badge-sort {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  background-color: var(--color-bg-secondary);
  color: var(--color-text);
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 0.375rem;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.badge-sort.active,
.badge-sort[aria-current="true"] {
  background-color: var(--color-primary);
  color: var(--btn-text);
}
.threadlist-header-rating {
  min-width: 80px;
  padding: 0.5rem;
  background-color: var(--category-bg);
  color: var(--category-text);
  font-size: var(--font-size-sm);
}
select option.custom-option {
  color: var(--color-muted);
}
select option {
  color: var(--color-muted);
}

optgroup {
  font-style: italic;
  color: var(--text-muted);
}
.alert-danger-custom {
  background-color: var(--alert-danger-bg);
  color: var(--alert-danger-text);
  border: 1px solid var(--alert-danger-border);
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
}
.dropdown-menu {
  background-color: var(--card-bg);
  color: var(--text-color);
  border-color: var(--border-color);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.dropdown-menu .dropdown-item {
  color: var(--text-color);
}

.dropdown-menu .dropdown-item:hover {
  background-color: var(--hover-background);
  color: var(--color-primary);
}
hr.themed-divider {
  border: none;
  height: 2px;
  background-color: var(--border-muted, #444);
  margin: 1rem 0;
}
.border-bottom-custom {
  border-bottom: var(--card-border-width, 1px) solid var(--card-border-color, #ccc) !important;
}
.border-end-custom {
  border-right: var(--border-width, 1px) solid var(--border-muted, #ccc);
}
.letter-spacing {
  letter-spacing: 0.5rem;
}

.newsbox {
    height: 250px;
    width: 100%;
    overflow: auto;
	font-size: 14px;
	font-family: var(--font-main);
}

.pb_news {
    display: inline-block;
    padding: 2px;
    margin: 1px 1px 0px -2px;
    width: 45%;
    max-width: 96px;
    text-align: center;
    text-transform: uppercase;
	background: var(--color-primary);
    border: 1px solid var(--card-border-color);
    color: var(--color-black);
	font-family: var(--font-main);
    font-size: 14px;
    font-weight: bold;
}

  .ctnr {
  display: grid;
  grid-template-rows: auto 1fr auto;  /* key rule */
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "postsheader postsheader" 
                         "postleft postright" 
                       "postfooter postfooter";
}
postsheader {
  grid-area: postsheader;
}

postleft {
  grid-area: postleft;
}

postright {
  grid-area: postright;
}

postfooter {
  grid-area: postfooter;
	text-align: left;
  border-bottom: 1px solid var(--card-border-color);
}

.postcolumns {
  display: grid; 
  justify-items: top;
  text-align: justify; 
  min-height: 25px !important; 
}

.postcolumns.details-split {grid-template-columns: [col1] 1fr [col2] 1fr;}

.col1 {grid-column-start: col1; margin: 0px 15px; white-space: pre-line;}
.col2 {grid-column-start: col2; margin: 0px 15px; white-space: pre-line;}


    @media
		(max-width: 900px)
  {
	  	.postcolumns {font-size: 16px !important;}
		.postcolumns {display: -webkit-box;
        -webkit-flex-direction: column;
        display: -moz-box;
        -moz-flex-direction: column;
        display: -ms-flexbox;
        -ms-flex-direction: column;
        display: -webkit-flex;
        display: flex;
        flex-direction: column;}
		.table .col1, .table .col2 .table .colBoth {
        width: 100%;
        display: block;}
    }

.sceditor-container textarea {
	background: var(--bg-panel) !important;
    color: var(--color-muted) !important;
	border: none !important;
}

.sceditor-container {
	background: var(--bg-panel) !important;
    color: var(--color-muted) !important;
	border: none !important;
}

.sceditor-toolbar {
	background: var(--card-cap-bg) !important;
    color: var(--color-muted) !important;
	border-bottom: 3px solid var(--color-muted) !important;
	border-top: 3px solid var(--color-muted) !important;
}