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

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

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

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, a.btn-outline-primary, .nxm-btn--ghost),
.nx-live-zone :is(.btn-outline-primary, a.btn-outline-primary, .nxm-btn--ghost),
.nx-live-content :is(.btn-outline-primary, a.btn-outline-primary, .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 :is(.btn-outline-primary, a.btn-outline-primary, .nxm-btn--ghost):hover,
main :is(.btn-outline-primary, a.btn-outline-primary, .nxm-btn--ghost):focus,
.nx-live-zone :is(.btn-outline-primary, a.btn-outline-primary, .nxm-btn--ghost):hover,
.nx-live-zone :is(.btn-outline-primary, a.btn-outline-primary, .nxm-btn--ghost):focus,
.nx-live-content :is(.btn-outline-primary, a.btn-outline-primary, .nxm-btn--ghost):hover,
.nx-live-content :is(.btn-outline-primary, a.btn-outline-primary, .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;
  }
}