/* Core-Layer f Builder-Template-Assets (global, template-unabhaengig) */
html,
html body,
body,
.sticky-footer-wrapper {
  background-color: var(--nx-page-bg, initial) !important;
  color: var(--nx-page-text, inherit) !important;
}

body.builder-active,
body.builder-active body,
body.builder-active .sticky-footer-wrapper {
  background-color: var(--nx-builder-shell-bg, initial) !important;
}

body.builder-active main.flex-fill {
  background-color: var(--nx-builder-main-bg, transparent) !important;
}

html body a {
  color: var(--bs-link-color, inherit);
  text-decoration: var(--bs-link-decoration, none) !important;
}

html body a:hover,
html body a:focus {
  color: var(--nx-color-link-hover, var(--bs-link-hover-color, var(--nx-color-primary, var(--bs-primary))));
  text-decoration: var(--bs-link-hover-decoration, var(--bs-link-decoration, none)) !important;
}

main,
.nx-live-zone,
.nx-live-content {
  color: var(--nx-color-on-surface, var(--bs-body-color, #212529));
}

/*
 * Kompatibilitaetsbruecke fuer bestehende Plugin-CSS.
 * Neue Plugins sollen direkt --nx-color-* und --nx-component-* verwenden.
 */
:root {
  --nx-theme-surface-2: var(--nx-component-card-bg, var(--nx-color-card-bg, var(--bs-card-bg, var(--bs-body-bg, #fff))));
  --nx-theme-text: var(--nx-color-on-surface, var(--bs-body-color, #212529));
  --nx-theme-muted: var(--nx-color-muted, var(--bs-secondary-color, #6c757d));
  --nx-theme-card-border: var(--nx-component-border, var(--nx-color-card-border, var(--bs-border-color)));
  --nx-theme-accent: var(--nx-color-primary, var(--bs-primary));
  --nx-theme-card-shadow: var(--nx-component-shadow, var(--nx-shadow-card, none));
  --nx-theme-radius-sm: var(--nx-component-radius, var(--bs-border-radius-sm, .25rem));
  --nx-theme-radius-md: var(--nx-component-radius, var(--bs-border-radius, .375rem));
  --nx-theme-radius-lg: var(--nx-component-radius, var(--bs-border-radius-lg, .5rem));
}

/*
 * Text elements inherit from their nearest section/card.
 * The palette defines the page default on main, but must not force one
 * foreground color onto mixed light/dark template sections.
 */

main :is(.text-muted, .nx-tk-text-muted),
.nx-live-zone :is(.text-muted, .nx-tk-text-muted),
.nx-live-content :is(.text-muted, .nx-tk-text-muted) {
  color: var(--nx-color-muted, var(--bs-secondary-color, #6c757d)) !important;
}

/* =========================================================
   Zentrale Template-Komponenten-Schicht
   Plugins verwenden Bootstrap-/Standardklassen; das aktive
   Template liefert ausschließlich --nx-component-*-Tokens.
   ========================================================= */
body.nx-frontend-subpage:not(.builder-active) main.flex-fill {
  --bs-card-bg: var(--nx-component-card-bg, var(--nx-color-card-bg, var(--bs-body-bg, #fff)));
  --bs-card-color: var(--nx-color-on-surface, var(--bs-body-color, #212529));
  --bs-card-border-color: var(--nx-component-border, var(--nx-color-card-border, var(--bs-border-color)));
  --bs-border-color: var(--nx-component-border, var(--nx-color-card-border, var(--bs-border-color)));
  --bs-table-bg: var(--nx-component-table-bg, var(--nx-component-card-body-bg, var(--bs-card-bg)));
  --bs-table-color: var(--nx-color-on-surface, var(--bs-body-color, #212529));
  --bs-table-border-color: var(--nx-component-border, var(--bs-border-color));
  --bs-list-group-bg: var(--nx-component-list-bg, var(--nx-component-card-body-bg, var(--bs-card-bg)));
  --bs-list-group-color: var(--nx-color-on-surface, var(--bs-body-color, #212529));
  --bs-list-group-border-color: var(--nx-component-border, var(--bs-border-color));
}

body.nx-frontend-subpage:not(.builder-active) main.flex-fill .card {
  background: var(--nx-component-card-bg, var(--nx-color-card-bg, var(--bs-card-bg))) !important;
  border-color: var(--nx-component-border, var(--nx-color-card-border, var(--bs-border-color))) !important;
  border-radius: var(--nx-component-radius, var(--nx-radius-lg, .5rem)) !important;
  box-shadow: var(--nx-component-shadow, var(--nx-shadow-card, none)) !important;
  color: var(--nx-color-on-surface, var(--bs-body-color, #212529));
  overflow: hidden;
}

body.nx-frontend-subpage:not(.builder-active) main.flex-fill .card:hover {
  box-shadow: var(--nx-component-shadow-hover, var(--nx-component-shadow, var(--nx-shadow-card, none))) !important;
}

body.nx-frontend-subpage:not(.builder-active) main.flex-fill .card > .card-header {
  background: var(--nx-component-card-header-bg, color-mix(in srgb, var(--nx-color-card-bg, var(--bs-card-bg, #fff)) 92%, var(--nx-color-on-surface, #212529) 8%)) !important;
  border-bottom-color: var(--nx-component-border, var(--nx-color-card-border, var(--bs-border-color))) !important;
  color: var(--nx-color-on-surface, var(--bs-body-color, #212529));
}

body.nx-frontend-subpage:not(.builder-active) main.flex-fill .card > :is(.card-body, .card-footer) {
  background: var(--nx-component-card-body-bg, var(--nx-component-card-bg, var(--nx-color-card-bg))) !important;
  border-color: var(--nx-component-border, var(--nx-color-card-border, var(--bs-border-color))) !important;
  color: var(--nx-color-on-surface, var(--bs-body-color, #212529));
}

body.nx-frontend-subpage:not(.builder-active) main.flex-fill :is(.form-control, .form-select) {
  background-color: var(--nx-component-control-bg, color-mix(in srgb, var(--nx-color-card-body-bg, var(--nx-color-card-bg, var(--bs-body-bg))) 97%, var(--nx-color-on-surface, #212529) 3%)) !important;
  border-color: var(--nx-component-border, var(--nx-color-card-border, var(--bs-border-color))) !important;
  color: var(--nx-color-on-surface, var(--bs-body-color, #212529)) !important;
}

body.nx-frontend-subpage:not(.builder-active) main.flex-fill :is(.form-control, .form-select):focus {
  background-color: var(--nx-component-control-bg, color-mix(in srgb, var(--nx-color-card-body-bg, var(--nx-color-card-bg, var(--bs-body-bg))) 97%, var(--nx-color-on-surface, #212529) 3%)) !important;
  border-color: var(--nx-color-primary, var(--bs-primary)) !important;
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--nx-color-primary, var(--bs-primary)) 18%, transparent) !important;
}

body.nx-frontend-subpage:not(.builder-active) main.flex-fill .input-group-text {
  background: var(--nx-component-control-addon-bg, color-mix(in srgb, var(--nx-color-card-bg, var(--bs-card-bg, #fff)) 88%, var(--nx-color-on-surface, #212529) 12%)) !important;
  border-color: var(--nx-component-border, var(--nx-color-card-border, var(--bs-border-color))) !important;
  color: var(--nx-color-muted, var(--bs-secondary-color, #6c757d)) !important;
}

body.nx-frontend-subpage:not(.builder-active) main.flex-fill :is(.list-group, .table-responsive, .accordion) {
  border-radius: var(--nx-component-radius, var(--nx-radius-lg, .5rem));
  box-shadow: var(--nx-component-shadow, var(--nx-shadow-card, none));
}

body.nx-frontend-subpage:not(.builder-active) main.flex-fill .list-group {
  overflow: hidden;
}

body.nx-frontend-subpage:not(.builder-active) main.flex-fill .list-group-item {
  background: var(--nx-component-list-bg, var(--nx-component-card-body-bg, var(--bs-card-bg))) !important;
  border-color: var(--nx-component-border, var(--nx-color-card-border, var(--bs-border-color))) !important;
  color: var(--nx-color-on-surface, var(--bs-body-color, #212529));
}

body.nx-frontend-subpage:not(.builder-active) main.flex-fill .table {
  --bs-table-bg: var(--nx-component-table-bg, var(--nx-component-card-body-bg, var(--bs-card-bg)));
  --bs-table-color: var(--nx-color-on-surface, var(--bs-body-color, #212529));
  --bs-table-border-color: var(--nx-component-border, var(--nx-color-card-border, var(--bs-border-color)));
  color: var(--bs-table-color);
}

body.nx-frontend-subpage:not(.builder-active) main.flex-fill :is(.modal-content, .offcanvas, .dropdown-menu) {
  background: var(--nx-component-card-bg, var(--nx-color-card-bg, var(--bs-body-bg))) !important;
  border-color: var(--nx-component-border, var(--nx-color-card-border, var(--bs-border-color))) !important;
  border-radius: var(--nx-component-radius, var(--nx-radius-lg, .5rem));
  box-shadow: var(--nx-component-shadow, var(--nx-shadow-card, none));
  color: var(--nx-color-on-surface, var(--bs-body-color, #212529));
}

/*
 * Kontrastfeste Status-Komponenten fuer Plugins.
 * Helle Paletten duerfen bei Bootstrap-Badges keine helle Schrift auf
 * hellem Hintergrund erzeugen.
 */
body.nx-frontend-subpage:not(.builder-active) main.flex-fill
  :is(.badge.bg-primary, .badge.text-bg-primary) {
  background-color: var(--nx-color-primary, var(--bs-primary)) !important;
  color: var(--nx-color-button-text, var(--nx-on-inverse-text, #fff)) !important;
}

body.nx-frontend-subpage:not(.builder-active) main.flex-fill
  :is(.badge.bg-secondary, .badge.text-bg-secondary) {
  background-color: color-mix(
    in srgb,
    var(--nx-color-card-bg, var(--bs-card-bg, var(--bs-body-bg))) 76%,
    var(--nx-color-on-surface, var(--bs-body-color)) 24%
  ) !important;
  border: 1px solid color-mix(
    in srgb,
    var(--nx-color-card-border, var(--bs-border-color)) 72%,
    var(--nx-color-on-surface, var(--bs-body-color)) 28%
  );
  color: var(--nx-color-on-surface, var(--bs-body-color, #212529)) !important;
}

body.nx-frontend-subpage:not(.builder-active) main.flex-fill
  :is(.badge.bg-success, .badge.text-bg-success) {
  background-color: var(--bs-success, #198754) !important;
  color: #fff !important;
}

body.nx-frontend-subpage:not(.builder-active) main.flex-fill
  :is(.badge.bg-danger, .badge.text-bg-danger) {
  background-color: var(--bs-danger, #dc3545) !important;
  color: #fff !important;
}

body.nx-frontend-subpage:not(.builder-active) main.flex-fill
  :is(.badge.bg-warning, .badge.text-bg-warning) {
  background-color: var(--bs-warning, #ffc107) !important;
  color: #1f2937 !important;
}

body.nx-frontend-subpage:not(.builder-active) main.flex-fill
  :is(.badge.bg-info, .badge.text-bg-info) {
  background-color: var(--bs-info, #0dcaf0) !important;
  color: #10212a !important;
}

body.nx-frontend-subpage:not(.builder-active) main.flex-fill
  :is(.badge.bg-light, .badge.text-bg-light) {
  background-color: color-mix(
    in srgb,
    var(--nx-color-card-bg, var(--bs-card-bg, var(--bs-body-bg))) 92%,
    var(--nx-color-on-surface, var(--bs-body-color)) 8%
  ) !important;
  border: 1px solid var(--nx-component-border, var(--nx-color-card-border, var(--bs-border-color)));
  color: var(--nx-color-on-surface, var(--bs-body-color, #212529)) !important;
}

body.nx-frontend-subpage:not(.builder-active) main.flex-fill
  :is(.text-bg-secondary:not(.badge), .bg-secondary-subtle) {
  background-color: color-mix(
    in srgb,
    var(--nx-color-card-bg, var(--bs-card-bg, var(--bs-body-bg))) 88%,
    var(--nx-color-on-surface, var(--bs-body-color)) 12%
  ) !important;
  border-color: var(--nx-component-border, var(--nx-color-card-border, var(--bs-border-color))) !important;
  color: var(--nx-color-on-surface, var(--bs-body-color, #212529)) !important;
}

body.nx-frontend-subpage:not(.builder-active) main.flex-fill
  :is(.text-bg-primary:not(.badge), .bg-primary-subtle) {
  background-color: color-mix(
    in srgb,
    var(--nx-color-primary, var(--bs-primary)) 16%,
    var(--nx-color-card-bg, var(--bs-card-bg, var(--bs-body-bg))) 84%
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--nx-color-primary, var(--bs-primary)) 38%,
    var(--nx-color-card-border, var(--bs-border-color)) 62%
  ) !important;
  color: var(--nx-color-on-surface, var(--bs-body-color, #212529)) !important;
}

body.nx-frontend-subpage:not(.builder-active) main.flex-fill .progress {
  --bs-progress-bg: color-mix(
    in srgb,
    var(--nx-color-card-bg, var(--bs-card-bg, var(--bs-body-bg))) 82%,
    var(--nx-color-on-surface, var(--bs-body-color)) 18%
  );
  background-color: var(--bs-progress-bg) !important;
  border-radius: var(--nx-component-radius, var(--bs-border-radius, .375rem));
}

body.nx-frontend-subpage:not(.builder-active) main.flex-fill .progress-bar {
  background-color: var(--nx-color-primary, var(--bs-primary)) !important;
}

main :is(.btn, a.btn),
.nx-live-zone :is(.btn, a.btn),
.nx-live-content :is(.btn, a.btn),
.nxm-page .nxm-btn {
  transition: color .14s ease, background-color .14s ease, border-color .14s ease;
}

main :is(.btn-primary, a.btn-primary, .nxm-btn--primary),
.nx-live-zone :is(.btn-primary, a.btn-primary, .nxm-btn--primary),
.nx-live-content :is(.btn-primary, a.btn-primary, .nxm-btn--primary),
.nxm-page .nxm-btn--primary {
  color: var(--nx-color-button-text, var(--nx-on-inverse-text, #fff)) !important;
  background-color: var(--nx-color-button-bg, var(--nx-color-primary, var(--bs-primary))) !important;
  border-color: var(--nx-color-button-border, var(--nx-color-button-bg, var(--bs-primary))) !important;
}

main :is(.btn-primary, a.btn-primary, .nxm-btn--primary):hover,
main :is(.btn-primary, a.btn-primary, .nxm-btn--primary):focus,
.nx-live-zone :is(.btn-primary, a.btn-primary, .nxm-btn--primary):hover,
.nx-live-zone :is(.btn-primary, a.btn-primary, .nxm-btn--primary):focus,
.nx-live-content :is(.btn-primary, a.btn-primary, .nxm-btn--primary):hover,
.nx-live-content :is(.btn-primary, a.btn-primary, .nxm-btn--primary):focus,
.nxm-page .nxm-btn--primary:hover,
.nxm-page .nxm-btn--primary:focus {
  color: var(--nx-color-button-hover-text, var(--nx-color-button-text, #fff)) !important;
  background-color: var(--nx-color-button-hover-bg, var(--nx-color-link-hover, var(--bs-primary))) !important;
  border-color: var(--nx-color-button-hover-border, var(--nx-color-button-hover-bg, var(--bs-primary))) !important;
}

main :is(.btn-outline-primary:not(.profile-edit-button), a.btn-outline-primary:not(.profile-edit-button), .nxm-btn--ghost),
.nx-live-zone :is(.btn-outline-primary:not(.profile-edit-button), a.btn-outline-primary:not(.profile-edit-button), .nxm-btn--ghost),
.nx-live-content :is(.btn-outline-primary:not(.profile-edit-button), a.btn-outline-primary:not(.profile-edit-button), .nxm-btn--ghost),
.nxm-page .nxm-btn--ghost {
  color: var(--nx-color-button-outline-text, var(--nx-color-link, var(--bs-primary))) !important;
  border-color: var(--nx-color-button-outline-border, var(--nx-color-button-outline-text, var(--bs-primary))) !important;
  background-color: transparent !important;
}

main .btn[class*="btn-outline-"]:not(.profile-edit-button):not(:hover):not(:focus):not(:active):not(.active),
.nx-live-zone .btn[class*="btn-outline-"]:not(.profile-edit-button):not(:hover):not(:focus):not(:active):not(.active),
.nx-live-content .btn[class*="btn-outline-"]:not(.profile-edit-button):not(:hover):not(:focus):not(:active):not(.active) {
  background-color: transparent !important;
}

main :is(.btn-outline-primary:not(.profile-edit-button), a.btn-outline-primary:not(.profile-edit-button), .nxm-btn--ghost):hover,
main :is(.btn-outline-primary:not(.profile-edit-button), a.btn-outline-primary:not(.profile-edit-button), .nxm-btn--ghost):focus,
.nx-live-zone :is(.btn-outline-primary:not(.profile-edit-button), a.btn-outline-primary:not(.profile-edit-button), .nxm-btn--ghost):hover,
.nx-live-zone :is(.btn-outline-primary:not(.profile-edit-button), a.btn-outline-primary:not(.profile-edit-button), .nxm-btn--ghost):focus,
.nx-live-content :is(.btn-outline-primary:not(.profile-edit-button), a.btn-outline-primary:not(.profile-edit-button), .nxm-btn--ghost):hover,
.nx-live-content :is(.btn-outline-primary:not(.profile-edit-button), a.btn-outline-primary:not(.profile-edit-button), .nxm-btn--ghost):focus,
.nxm-page .nxm-btn--ghost:hover,
.nxm-page .nxm-btn--ghost:focus {
  color: var(--nx-color-button-hover-text, var(--nx-color-button-text, #fff)) !important;
  background-color: var(--nx-color-button-bg, var(--bs-primary)) !important;
  border-color: var(--nx-color-button-border, var(--nx-color-button-bg, var(--bs-primary))) !important;
}

#mainNavbar .navbar-nav .nav-link,
#mainNavbar .navbar-brand {
  color: var(--bs-link-color, var(--nx-color-link, var(--bs-body-color))) !important;
}

#mainNavbar .navbar-nav .nav-link:hover,
#mainNavbar .navbar-nav .nav-link:focus,
#mainNavbar .nav-item.dropdown.show > .nav-link,
#mainNavbar .nav-item.dropdown:hover > .nav-link {
  color: var(--nx-color-link-hover, var(--bs-link-hover-color, var(--nx-color-primary, var(--bs-primary)))) !important;
}

#mainNavbar .navbar-nav .nav-link.active {
  color: var(--nx-color-link-hover, var(--bs-link-hover-color, var(--nx-color-primary, var(--bs-primary)))) !important;
}

#mainNavbar #themeToggle {
  color: var(--bs-link-color, var(--nx-toggle-fg)) !important;
}

#mainNavbar #themeToggle:hover {
  color: var(--nx-color-link-hover, var(--bs-link-hover-color, var(--nx-color-primary, var(--bs-primary)))) !important;
}

.nx-gallery {
  --nx-gallery-image-height: clamp(160px, 22vw, 280px);
}

.nx-gallery--cols-2 {
  --nx-gallery-image-height: clamp(190px, 28vw, 340px);
}

.nx-gallery--cols-4 {
  --nx-gallery-image-height: clamp(140px, 18vw, 240px);
}

.nx-gallery-figure {
  overflow: hidden;
}

.nx-gallery-img {
  width: 100% !important;
  height: var(--nx-gallery-image-height) !important;
  object-fit: cover;
  object-position: center;
}

.nx-clan-match-showcase {
  background:
    radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--nx-color-primary, #ffc107) 14%, transparent) 0%, transparent 32%),
    linear-gradient(135deg, color-mix(in srgb, var(--nx-color-surface, #0b111c) 78%, #000 22%), color-mix(in srgb, var(--nx-color-secondary, #111827) 52%, #000 48%));
  color: var(--nx-color-on-surface, #f8fafc);
  border-top: 1px solid color-mix(in srgb, var(--nx-color-card-border, rgba(255,255,255,.12)) 75%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--nx-color-card-border, rgba(255,255,255,.12)) 75%, transparent);
}

.nx-clan-match-showcase :is(h1, h2, h3, h4, h5, h6, p, span) {
  color: inherit;
}

.nx-clan-match-showcase__league,
.nx-clan-match-showcase__vs,
.nx-clan-match-showcase__score {
  color: var(--nx-color-primary, var(--bs-primary)) !important;
}

.nx-clan-match-showcase__team,
.nx-clan-match-showcase__cell {
  min-height: 4.75rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--nx-color-card-bg, #1f2937) 88%, #fff 5%), color-mix(in srgb, var(--nx-color-card-bg, #111827) 82%, #000 18%));
  border: 1px solid color-mix(in srgb, var(--nx-color-card-border, rgba(255,255,255,.15)) 80%, transparent);
  border-radius: .45rem;
  box-shadow: 0 14px 35px rgba(0, 0, 0, .18);
}

.nx-clan-match-showcase__team {
  min-height: 6.25rem;
}

.nx-clan-match-showcase__logo {
  max-height: 4.5rem;
  width: auto;
  object-fit: contain;
}

.nx-clan-match-showcase__mini {
  width: 2.3rem;
  min-height: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nx-clan-match-showcase__mini img {
  max-width: 2.2rem;
  max-height: 1.6rem;
  object-fit: contain;
}

.nx-clan-match-showcase__score {
  min-width: 3rem;
  text-align: center;
}

body.builder-active .nx-slider :is(.btn-primary, .nx-clan-slider-cta-primary),
body.builder-active .nx-live-zone .nx-slider :is(.btn-primary, .nx-clan-slider-cta-primary),
body.builder-active .nx-live-content .nx-slider :is(.btn-primary, .nx-clan-slider-cta-primary),
html body .nx-slider :is(.btn-primary, .nx-clan-slider-cta-primary),
html body .nx-live-zone .nx-slider :is(.btn-primary, .nx-clan-slider-cta-primary),
html body .nx-live-content .nx-slider :is(.btn-primary, .nx-clan-slider-cta-primary) {
  color: var(--nx-color-button-text, var(--nx-on-inverse-text, #fff)) !important;
  background-color: var(--nx-color-button-bg, var(--nx-color-primary, var(--bs-primary))) !important;
  background-image: none !important;
  border-color: var(--nx-color-button-border, var(--nx-color-button-bg, var(--nx-color-primary, var(--bs-primary)))) !important;
}

body.builder-active .nx-slider :is(.btn-primary, .nx-clan-slider-cta-primary):hover,
body.builder-active .nx-slider :is(.btn-primary, .nx-clan-slider-cta-primary):focus,
body.builder-active .nx-live-zone .nx-slider :is(.btn-primary, .nx-clan-slider-cta-primary):hover,
body.builder-active .nx-live-zone .nx-slider :is(.btn-primary, .nx-clan-slider-cta-primary):focus,
body.builder-active .nx-live-content .nx-slider :is(.btn-primary, .nx-clan-slider-cta-primary):hover,
body.builder-active .nx-live-content .nx-slider :is(.btn-primary, .nx-clan-slider-cta-primary):focus,
html body .nx-slider :is(.btn-primary, .nx-clan-slider-cta-primary):hover,
html body .nx-slider :is(.btn-primary, .nx-clan-slider-cta-primary):focus,
html body .nx-live-zone .nx-slider :is(.btn-primary, .nx-clan-slider-cta-primary):hover,
html body .nx-live-zone .nx-slider :is(.btn-primary, .nx-clan-slider-cta-primary):focus,
html body .nx-live-content .nx-slider :is(.btn-primary, .nx-clan-slider-cta-primary):hover,
html body .nx-live-content .nx-slider :is(.btn-primary, .nx-clan-slider-cta-primary):focus {
  color: var(--nx-color-button-hover-text, var(--nx-color-button-text, #fff)) !important;
  background-color: var(--nx-color-button-hover-bg, var(--nx-color-link-hover, var(--nx-color-primary, var(--bs-primary)))) !important;
  background-image: none !important;
  border-color: var(--nx-color-button-hover-border, var(--nx-color-button-hover-bg, var(--nx-color-primary, var(--bs-primary)))) !important;
}

.nx-slider :is(.nx-slider-cta-secondary, .nx-clan-slider-cta-secondary),
.nx-live-zone .nx-slider :is(.nx-slider-cta-secondary, .nx-clan-slider-cta-secondary),
.nx-live-content .nx-slider :is(.nx-slider-cta-secondary, .nx-clan-slider-cta-secondary) {
  color: var(--nx-color-button-outline-text, var(--nx-color-link, var(--nx-color-primary, var(--bs-primary)))) !important;
  background-color: color-mix(in srgb, var(--nx-color-card-bg, transparent) 35%, transparent) !important;
  border-color: var(--nx-color-button-outline-border, var(--nx-color-button-outline-text, var(--nx-color-primary, var(--bs-primary)))) !important;
}

.nx-slider :is(.nx-slider-cta-secondary, .nx-clan-slider-cta-secondary):hover,
.nx-slider :is(.nx-slider-cta-secondary, .nx-clan-slider-cta-secondary):focus,
.nx-live-zone .nx-slider :is(.nx-slider-cta-secondary, .nx-clan-slider-cta-secondary):hover,
.nx-live-zone .nx-slider :is(.nx-slider-cta-secondary, .nx-clan-slider-cta-secondary):focus,
.nx-live-content .nx-slider :is(.nx-slider-cta-secondary, .nx-clan-slider-cta-secondary):hover,
.nx-live-content .nx-slider :is(.nx-slider-cta-secondary, .nx-clan-slider-cta-secondary):focus {
  color: var(--nx-color-button-hover-text, var(--nx-color-button-text, #fff)) !important;
  background-color: var(--nx-color-button-bg, var(--nx-color-primary, var(--bs-primary))) !important;
  border-color: var(--nx-color-button-border, var(--nx-color-button-bg, var(--nx-color-primary, var(--bs-primary)))) !important;
}

.nx-accordion-theme {
  --bs-accordion-bg: var(--nx-color-card-bg, var(--nx-color-surface, var(--bs-body-bg)));
  --bs-accordion-color: var(--nx-color-on-surface, var(--bs-body-color));
  --bs-accordion-border-color: var(--nx-color-card-border, var(--bs-border-color));
  --bs-accordion-btn-bg: var(--nx-color-card-bg, var(--nx-color-surface, var(--bs-body-bg)));
  --bs-accordion-btn-color: var(--nx-color-on-surface, var(--bs-body-color));
  --bs-accordion-active-bg: color-mix(in srgb, var(--nx-color-primary, var(--bs-primary)) 18%, var(--nx-color-card-bg, var(--nx-color-surface, var(--bs-body-bg))));
  --bs-accordion-active-color: var(--nx-color-on-surface, var(--bs-body-color));
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--nx-color-primary, var(--bs-primary)) 35%, transparent);
}

.nx-accordion-theme .accordion-item,
.nx-accordion-theme .accordion-button,
.nx-accordion-theme .accordion-body {
  background-color: var(--bs-accordion-bg) !important;
  color: var(--bs-accordion-color) !important;
  border-color: var(--bs-accordion-border-color) !important;
}

.nx-accordion-theme .accordion-button:not(.collapsed) {
  background-color: var(--bs-accordion-active-bg) !important;
  color: var(--bs-accordion-active-color) !important;
}

@media (max-width: 575.98px) {
  .nx-clan-match-showcase__vs {
    font-size: 1.5rem !important;
  }

  .nx-clan-match-showcase__team {
    min-height: 5rem;
  }
}