/*
	SCBNG
*/
/* general stuff */
.z-1 {
  z-index: 1 !important;
}
.z-2 {
  z-index: 2 !important;
}
.z-900 {
  z-index: 900 !important;
}

.text-primary    { color: #3f5965 !important; }
.text-secondary  { color: #289db9 !important; }
.text-tertiary   { color: #3d8d97 !important; }
.text-quaternary { color: #80b2c9 !important; }
.text-h5         { color: #625061 !important; }
.text-h6         { color: #c1a1bf !important; }

.bg-primary, .bg-bve    { background-color: #3f5965 !important; }
.bg-secondary  { background-color: #289db9 !important; }
.bg-tertiary   { background-color: #3d8d97 !important; }
.bg-quaternary { background-color: #80b2c9 !important; }
.bg-h5         { background-color: #625061 !important; }
.bg-h6         { background-color: #c1a1bf !important; }
.bg-white-translucent {
  background-color: rgba(255, 255, 255, 0.85); /* 85% opaque white */
  border-radius: 0.5rem; /* Optional: soften edges */
}

.text-normalcase {
  text-transform: none !important;
}

li { 
    font-size: 14px;
}

.text-shadow-none { text-shadow: none !important; }
.text-shadow-sm { text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important; }
.text-shadow { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important; }
.text-shadow-lg { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35) !important; }
.text-shadow-light-sm { text-shadow: 0 1px 1px rgba(255, 255, 255, 0.15) !important; }
.text-shadow-light { text-shadow: 0 1px 2px rgba(255, 255, 255, 0.25) !important; }
.text-shadow-light-lg { text-shadow: 0 2px 4px rgba(255, 255, 255, 0.35) !important; }

.shadow-gradient-top {
  position: relative;
  background: #fff; 
  overflow: hidden;
}

.shadow-gradient-top::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 60px; 
  width: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent);
  pointer-events: none; 
  z-index: 1;
}

.shadow-gradient-bottom {
  position: relative;
  background: #fff;
  overflow: hidden;
}

.shadow-gradient-bottom::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 60px;
  width: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
  pointer-events: none;
  z-index: 1;
}

.btn-emergency-pulse {
  animation: pulse 1.2s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(220,53,69, 0.5); }
  70% { box-shadow: 0 0 0 10px rgba(220,53,69, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220,53,69, 0); }
}

.visually-hidden {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.max-w-90 {
  max-width: 90% !important;
  width: 100%;
  height: auto;
}

.max-w-80 {
  max-width: 80% !important;
  width: 100%;
  height: auto;
}

.max-w-75 {
  max-width: 75% !important;
  width: 100%;
  height: auto;
}

.max-w-50 {
  max-width: 50% !important;
  width: 100%;
  height: auto;
}

.max-w-40 {
  max-width: 40% !important;
  width: 100%;
  height: auto;
}

.max-w-25 {
  max-width: 25% !important;
  width: 100%;
  height: auto;
}

a.btn {
	text-decoration: none !important;
}

/* Ensure links inside .small text don't shrink twice */
.small, 
.small a, .small a:hover, .small a:visited, 
.small a:active {
  font-size: 0.875rem !important; /* match Bootstrap's .small size */
  line-height: 1.5;               /* keep good readability */
}

.small a {
  color: inherit;                 /* match surrounding text color */
}

/* navigation */
.navbar-nav .nav-link[href*="/Grow"], .navbar-nav .nav-link[href*="/grow"] {
  
}
/*
3f5965 !important; }
.text-secondary  { color: #289db9
*/
.nav-main .nav-pills li a[href*="/Grow"], .nav-main .nav-pills li a[href*="/grow"] {
  background-color: #299cb9 !important;
  color: #ffffff !important;
  border-radius: 999px;
  padding: 0.5rem 1rem;
  /*font-weight: 600;
  text-transform: uppercase;*/
  transition: all 0.2s ease-in-out;
  border: 2px solid #405664;
}
	
/* footer fixes */
footer, #footer { margin-top: 0 !important; }
.footer-copyright {
    background-color: #289cb9 important;
}
/* header fixes */ 
#LiveSlider725 {
	margin-top: 2em !important;
}

#LiveSlider725, #LiveSlider731, shadow-div {
  box-shadow: 
    0 -10px 15px -3px rgba(0, 0, 0, 0.6),
    0  10px 15px -3px rgba(0, 0, 0, 0.6);
}

/* fixe blockquote quote icon */ 
.blockquote-footer::before {
  content: "\2013 " !important; /* Unicode en dash */
}

/* live form fixes */
#LiveForm745 ul, .LiveForm ul {
	box-shadow: none !important;
	margin-top: 1.5em;
}
	#LiveForm745 input[type="submit"], .LiveForm input[type="submit"]{ 
		background-color: #2F4858;
		color: #ffffff;
	}

/* Final CTA */
.footer-dock-image {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: auto;
  z-index: 1;
  pointer-events: none;
}

.copyright{color:#ffffff !important;}

.logo-wrapper-dark {
  display: inline-block;
  background-color: #ffffff; /* or rgba(255,255,255,0.9) for some transparency */
  padding: 0.5rem; /* Adjust padding as needed */
  border-radius: 0.5rem; /* Optional for soft corners */
}

/* FontAwesome fixes */
/* Force any fas/fa-link to render as FA6 solid */
.fas.fa-link::before {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important; /* solid style */
  content: "\f0c1"; /* Unicode for link/chain in FA6 */
}

.icon-featured {
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
  width: 100%;
  height: 100%;
  padding-top: 0.85em !important;
}

        /* SCBNG Dashboard Tool Buttons */
        .scbng-tools-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1rem;
        }

        @media (min-width: 768px) {
            .scbng-tools-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (min-width: 1200px) {
            .scbng-tools-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }

        .scbng-tool-card {
            display: flex;
            align-items: center;
            gap: 1rem;
            text-decoration: none;
            border: 1px solid rgba(0, 0, 0, .1);
            border-radius: .75rem;
            padding: 1rem 1.1rem;
            background: #fff;
            box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .06);
            transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
            min-height: 82px;
        }

        .scbng-tool-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .10);
            border-color: rgba(0, 0, 0, .18);
            text-decoration: none;
        }

        .scbng-tool-card:active {
            transform: translateY(0);
            box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .08);
        }

        /* Strong keyboard focus (important for accessibility) */
        .scbng-tool-card:focus {
            outline: none;
        }

        .scbng-tool-card:focus-visible {
            box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25), 0 .5rem 1.25rem rgba(0, 0, 0, .10);
            border-color: rgba(13, 110, 253, .55);
        }

        .scbng-tool-icon {
            flex: 0 0 auto;
            width: 46px;
            height: 46px;
            border-radius: .75rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(0, 100, 114, .10);
            /* subtle teal hint */
        }

        .scbng-tool-icon i {
            font-size: 1.25rem;
            color: #006472;
        }

        .scbng-tool-text {
            flex: 1 1 auto;
            min-width: 0;
        }

        .scbng-tool-title {
            margin: 0;
            font-weight: 700;
            color: #1f2a33;
            line-height: 1.2;
        }

        .scbng-tool-desc {
            margin: .25rem 0 0 0;
            color: rgba(31, 42, 51, .75);
            font-size: .9rem;
            line-height: 1.25;
        }

        .scbng-tool-arrow {
            flex: 0 0 auto;
            color: rgba(31, 42, 51, .55);
            transition: transform .15s ease;
        }

        .scbng-tool-card:hover .scbng-tool-arrow {
            transform: translateX(2px);
        }
		
/* Core button restyling */
/* =========================================================
   Shared base for all DNN action links
   ========================================================= */

a.dnnPrimaryAction,
a.dnnSecondaryAction,
a.dnnTertiaryAction {
  display: inline-block !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  text-align: center !important;
  text-decoration: none !important;
  vertical-align: middle !important;
  cursor: pointer !important;
  user-select: none !important;

  padding: 0.5rem 1rem !important;
  font-size: 1rem !important;
  border-radius: var(--bs-border-radius) !important;

  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out !important;
}

a.dnnPrimaryAction i,
a.dnnPrimaryAction svg,
a.dnnSecondaryAction i,
a.dnnSecondaryAction svg,
a.dnnTertiaryAction i,
a.dnnTertiaryAction svg {
  vertical-align: middle !important;
}

a.dnnPrimaryAction[aria-disabled="true"],
a.dnnPrimaryAction.disabled,
a.dnnSecondaryAction[aria-disabled="true"],
a.dnnSecondaryAction.disabled,
a.dnnTertiaryAction[aria-disabled="true"],
a.dnnTertiaryAction.disabled {
  pointer-events: none !important;
  opacity: 0.65 !important;
}

/* =========================================================
   Primary + Tertiary (btn-primary)
   ========================================================= */

a.dnnPrimaryAction,
a.dnnTertiaryAction {
  color: #fff !important;
  background-color: var(--bs-primary) !important;
  border: 1px solid var(--bs-primary) !important;
}

a.dnnPrimaryAction:hover,
a.dnnTertiaryAction:hover {
  color: #fff !important;
  background-color: var(--bs-primary-hover, #0b5ed7) !important;
  border-color: var(--bs-primary-hover, #0a58ca) !important;
}

a.dnnPrimaryAction:focus-visible,
a.dnnTertiaryAction:focus-visible {
  outline: 0 !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.5) !important;
}

a.dnnPrimaryAction:active,
a.dnnTertiaryAction:active {
  background-color: var(--bs-primary-dark, #0a58ca) !important;
  border-color: var(--bs-primary-dark, #0a53be) !important;
}

/* =========================================================
   Secondary (btn-secondary)
   ========================================================= */

a.dnnSecondaryAction {
  color: #000000 !important;
  background-color: var(--bs-secondary) !important;
  border: 1px solid var(--bs-secondary) !important;
}

a.dnnSecondaryAction:hover {
  color: #000000 !important;
  background-color: var(--bs-secondary-hover, #5c636a) !important;
  border-color: var(--bs-secondary-hover, #565e64) !important;
}

a.dnnSecondaryAction:focus-visible {
  outline: 0 !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-secondary-rgb), 0.5) !important;
}

a.dnnSecondaryAction:active {
  background-color: var(--bs-secondary-dark, #565e64) !important;
  border-color: var(--bs-secondary-dark, #51585e) !important;
}

/* =========================================================
   SCBNG Events List and Detail Polish
   Safe portal.css additions only.
   Purpose: improve cards, spacing, buttons, chips, and empty states
   without changing the page background or global page layout.
   ========================================================= */

/* Local design tokens scoped to the event templates */
#main-content.event-shell,
#main-content.event-detail-shell {
  --scbng-event-primary: #3f5965;
  --scbng-event-secondary: #289db9;
  --scbng-event-tertiary: #3d8d97;
  --scbng-event-ink: #1f2a33;
  --scbng-event-muted: rgba(31, 42, 51, 0.72);
  --scbng-event-border: rgba(63, 89, 101, 0.16);
  --scbng-event-border-strong: rgba(63, 89, 101, 0.26);
  --scbng-event-shadow-sm: 0 0.25rem 0.85rem rgba(31, 42, 51, 0.08);
  --scbng-event-shadow-md: 0 0.65rem 1.5rem rgba(31, 42, 51, 0.12);

  color: var(--scbng-event-ink);
}

/* Keep the event area clean and aligned with the existing Porto/DNN layout */
#main-content.event-shell,
#main-content.event-detail-shell {
  background: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
}

/* Tighten the gap caused by the page intro module and empty admin pane outlines */
#main-content.event-shell,
#main-content.event-detail-shell {
  margin-top: 2rem !important;
}

#main-content.event-shell > .row.mb-4,
#main-content.event-detail-shell > .mb-4:first-child {
  margin-top: 0 !important;
}

/* Events list header */
#main-content.event-shell > .row.mb-4 {
  align-items: center;
  padding: 1rem 1.15rem;
  border: 1px solid var(--scbng-event-border);
  border-radius: 0.75rem;
  background-color: #ffffff;
  box-shadow: var(--scbng-event-shadow-sm);
}

#main-content.event-shell > .row.mb-4 h1 {
  margin-bottom: 0.2rem !important;
  color: var(--scbng-event-ink);
  font-weight: 800;
  letter-spacing: -0.02em;
}

#main-content.event-shell > .row.mb-4 .text-secondary {
  color: var(--scbng-event-muted) !important;
}

/* Empty state should look intentional, but not oversized */
#main-content.event-shell .event-empty-state {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  padding: 2.25rem 1.25rem !important;
  border: 1px solid var(--scbng-event-border) !important;
  border-radius: 0.85rem !important;
  background-color: #ffffff !important;
  box-shadow: var(--scbng-event-shadow-sm) !important;
}

#main-content.event-shell .event-empty-state i,
#main-content.event-shell .event-empty-state .fa,
#main-content.event-shell .event-empty-state .fas,
#main-content.event-shell .event-empty-state .fa-solid {
  color: var(--scbng-event-primary);
}

#main-content.event-shell .event-empty-state h2,
#main-content.event-shell .event-empty-state h3 {
  color: var(--scbng-event-ink);
  font-weight: 700;
}

#main-content.event-shell .event-empty-state p {
  color: var(--scbng-event-muted);
}

/* Filter bar and sidebar cards */
#main-content.event-shell .event-filter-bar,
#main-content.event-shell .event-sidebar-card,
#main-content.event-shell .event-pagination-wrap,
#main-content.event-detail-shell .event-detail-card {
  border: 1px solid var(--scbng-event-border) !important;
  border-radius: 0.85rem !important;
  background-color: #ffffff !important;
  box-shadow: var(--scbng-event-shadow-sm) !important;
}

#main-content.event-shell .event-filter-bar {
  padding: 1rem 1.15rem !important;
}

#main-content.event-shell .event-sidebar-card {
  padding: 1.15rem !important;
}

#main-content.event-shell .sidebar-heading,
#main-content.event-shell .event-section-heading,
#main-content.event-detail-shell .event-detail-card h2,
#main-content.event-detail-shell .event-detail-card h3 {
  color: var(--scbng-event-primary) !important;
}

/* Chips */
#main-content.event-shell .category-chip,
#main-content.event-shell .topic-chip,
#main-content.event-shell .tag-chip,
#main-content.event-detail-shell .category-chip,
#main-content.event-detail-shell .tag-chip {
  border: 1px solid rgba(63, 89, 101, 0.18) !important;
  border-radius: 999px !important;
  background-color: #f7fbfc !important;
  color: var(--scbng-event-primary) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

#main-content.event-shell .category-chip:hover,
#main-content.event-shell .topic-chip:hover,
#main-content.event-shell .tag-chip:hover,
#main-content.event-detail-shell .category-chip:hover,
#main-content.event-detail-shell .tag-chip:hover {
  border-color: var(--scbng-event-secondary) !important;
  background-color: #ffffff !important;
  color: var(--scbng-event-secondary) !important;
  text-decoration: none !important;
}

/* Event list cards */
#main-content.event-shell .event-card {
  border: 1px solid var(--scbng-event-border) !important;
  border-radius: 0.9rem !important;
  background-color: #ffffff !important;
  box-shadow: var(--scbng-event-shadow-sm) !important;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

#main-content.event-shell .event-card:hover,
#main-content.event-shell .event-card:focus-within {
  transform: translateY(-2px);
  border-color: var(--scbng-event-border-strong) !important;
  box-shadow: var(--scbng-event-shadow-md) !important;
}

#main-content.event-shell .event-card-media {
  background-color: #eef7fa;
}

#main-content.event-shell .event-card-media img {
  transition: transform 0.22s ease;
}

#main-content.event-shell .event-card:hover .event-card-media img,
#main-content.event-shell .event-card:focus-within .event-card-media img {
  transform: scale(1.025);
}

#main-content.event-shell .event-card-body {
  padding: 1.25rem 1.35rem !important;
}

#main-content.event-shell .event-title {
  color: var(--scbng-event-primary);
  font-weight: 800;
  line-height: 1.22;
}

#main-content.event-shell .event-title a {
  color: var(--scbng-event-primary) !important;
  text-decoration: none !important;
}

#main-content.event-shell .event-title a:hover,
#main-content.event-shell .event-title a:focus-visible {
  color: var(--scbng-event-secondary) !important;
  text-decoration: underline !important;
}

#main-content.event-shell .event-summary,
#main-content.event-shell .event-location,
#main-content.event-shell .event-meta-inline {
  color: var(--scbng-event-muted) !important;
}

#main-content.event-shell .event-card-footer {
  border-top: 1px solid rgba(63, 89, 101, 0.12) !important;
  background-color: #fbfdfe;
}

/* Date badge */
#main-content.event-shell .event-date-badge {
  border: 1px solid rgba(63, 89, 101, 0.18) !important;
  border-radius: 0.65rem !important;
  background-color: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 0.35rem 0.9rem rgba(31, 42, 51, 0.14) !important;
}

#main-content.event-shell .event-date-badge-month {
  color: var(--scbng-event-secondary) !important;
  font-weight: 800 !important;
}

#main-content.event-shell .event-date-badge-day {
  color: var(--scbng-event-primary) !important;
  font-weight: 800 !important;
}

/* Hide duplicate same-date helper text currently showing as "Jun 8, 2026 - June 8, 2026" */
#main-content.event-shell .event-relative-date {
  display: none !important;
}

/* Detail page back link */
#main-content.event-detail-shell .event-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--scbng-event-primary) !important;
  font-weight: 700;
  text-decoration: none !important;
}

#main-content.event-detail-shell .event-back-link:hover,
#main-content.event-detail-shell .event-back-link:focus-visible {
  color: var(--scbng-event-secondary) !important;
  text-decoration: underline !important;
}

/* Detail page hero */
#main-content.event-detail-shell .event-hero {
  border: 1px solid var(--scbng-event-border) !important;
  border-radius: 1rem !important;
  background-color: #ffffff !important;
  box-shadow: var(--scbng-event-shadow-sm) !important;
}

#main-content.event-detail-shell .event-hero h1 {
  color: var(--scbng-event-primary);
  font-weight: 800;
  letter-spacing: -0.025em;
}

#main-content.event-detail-shell .event-lead {
  color: var(--scbng-event-muted) !important;
  line-height: 1.65;
}

#main-content.event-detail-shell .event-hero-image-wrap {
  border-radius: 0.85rem !important;
  overflow: hidden;
  box-shadow: var(--scbng-event-shadow-sm) !important;
}

/* Detail meta items */
#main-content.event-detail-shell .event-meta-item {
  padding: 0.85rem;
  border: 1px solid rgba(63, 89, 101, 0.12);
  border-radius: 0.75rem;
  background-color: #fbfdfe;
}

#main-content.event-detail-shell .event-meta-icon {
  color: #ffffff !important;
  background-color: var(--scbng-event-primary) !important;
}

#main-content.event-detail-shell .event-meta-label {
  color: var(--scbng-event-primary) !important;
}

/* Detail content blocks */
#main-content.event-detail-shell .event-body-copy,
#main-content.event-detail-shell .event-feature-card,
#main-content.event-detail-shell .event-audience-card,
#main-content.event-detail-shell .event-related-card {
  border: 1px solid var(--scbng-event-border) !important;
  border-radius: 0.85rem !important;
  background-color: #ffffff !important;
  box-shadow: var(--scbng-event-shadow-sm) !important;
}

#main-content.event-detail-shell .event-body-copy {
  padding: 1.25rem 1.35rem;
}

#main-content.event-detail-shell .event-body-copy p {
  line-height: 1.7;
}

#main-content.event-detail-shell .event-feature-card h3,
#main-content.event-detail-shell .event-audience-card h3 {
  color: var(--scbng-event-primary);
  font-weight: 800;
}

/* Buttons inside events */
#main-content.event-shell .btn,
#main-content.event-detail-shell .btn {
  border-radius: 999px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

#main-content.event-shell .btn-primary,
#main-content.event-detail-shell .btn-primary {
  border-color: var(--scbng-event-primary) !important;
  background-color: var(--scbng-event-primary) !important;
}

#main-content.event-shell .btn-primary:hover,
#main-content.event-shell .btn-primary:focus-visible,
#main-content.event-detail-shell .btn-primary:hover,
#main-content.event-detail-shell .btn-primary:focus-visible {
  border-color: var(--scbng-event-secondary) !important;
  background-color: var(--scbng-event-secondary) !important;
}

#main-content.event-shell .btn-outline-primary,
#main-content.event-detail-shell .btn-outline-primary,
#main-content.event-detail-shell .btn-outline-secondary {
  color: var(--scbng-event-primary) !important;
  border-color: var(--scbng-event-primary) !important;
  background-color: #ffffff !important;
}

#main-content.event-shell .btn-outline-primary:hover,
#main-content.event-shell .btn-outline-primary:focus-visible,
#main-content.event-detail-shell .btn-outline-primary:hover,
#main-content.event-detail-shell .btn-outline-primary:focus-visible,
#main-content.event-detail-shell .btn-outline-secondary:hover,
#main-content.event-detail-shell .btn-outline-secondary:focus-visible {
  color: #ffffff !important;
  background-color: var(--scbng-event-primary) !important;
}

/* Accessible focus state */
#main-content.event-shell a:focus-visible,
#main-content.event-detail-shell a:focus-visible,
#main-content.event-shell button:focus-visible,
#main-content.event-detail-shell button:focus-visible {
  outline: 3px solid rgba(40, 157, 185, 0.35) !important;
  outline-offset: 3px;
}

/* Mobile tuning */
@media (max-width: 767.98px) {
  #main-content.event-shell,
  #main-content.event-detail-shell {
    margin-top: 1.25rem !important;
  }

  #main-content.event-shell > .row.mb-4 {
    padding: 0.9rem;
  }

  #main-content.event-shell .event-card-body,
  #main-content.event-detail-shell .event-body-copy {
    padding: 1rem !important;
  }

  #main-content.event-shell .event-card-footer .btn {
    display: block;
    width: 100%;
  }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  #main-content.event-shell .event-card,
  #main-content.event-shell .event-card-media img {
    transition: none !important;
  }

  #main-content.event-shell .event-card:hover,
  #main-content.event-shell .event-card:focus-within,
  #main-content.event-shell .event-card:hover .event-card-media img,
  #main-content.event-shell .event-card:focus-within .event-card-media img {
    transform: none !important;
  }
}

/* =========================================================
   SCBNG DNN User Profile

   The bcc-* class hooks below are intentionally retained because they are
   part of the existing DNN Social profile template markup. Only the visual
   design tokens are portal-specific.
   ========================================================= */

:root {
  --scbng-profile-primary: #3f5965;
  --scbng-profile-primary-dark: #2f4858;
  --scbng-profile-secondary: #289db9;
  --scbng-profile-secondary-dark: #1f7f96;
  --scbng-profile-tertiary: #3d8d97;
  --scbng-profile-ink: #1f2a33;
  --scbng-profile-muted: rgba(31, 42, 51, 0.68);
  --scbng-profile-soft: #f7fbfc;
  --scbng-profile-border: rgba(63, 89, 101, 0.18);
  --scbng-profile-shadow-sm: 0 0.35rem 1rem rgba(31, 42, 51, 0.08);
  --scbng-profile-radius: 0.95rem;
  --scbng-profile-radius-lg: 1.2rem;
  --scbng-profile-focus: 0 0 0 0.22rem rgba(40, 157, 185, 0.26);
}

/* ------------------------------------------------------------
   Member profile action links - Social profile template

   Purpose:
   - Keep the social action list inside its parent container.
   - Preserve Knockout/module visibility rules.
   - Prevent the action list from overlapping panes/modules below.
   - Avoid absolute positioning, negative margins, fixed heights, and
     parent-level display overrides.
------------------------------------------------------------ */

/*
  The site has a broad pane rule:

  div[id$="Pane"] ul {
    padding-left: 2.25em !important;
  }

  That is appropriate for content lists, but not for this generated member
  directory layout list. This list must start flush inside its parent.
*/

/* Sane sizing for the generated member list and descendants. */
ul#mdMemberList.mdMemberList,
ul#mdMemberList.mdMemberList *,
ul#mdMemberList.mdMemberList *::before,
ul#mdMemberList.mdMemberList *::after {
  box-sizing: border-box !important;
}

/*
  Module-level containment.

  Do NOT set display here. The legacy module may use display rules to hide
  generated wrappers/items. We only clear floats and constrain sizing.
*/
.ModDotNetNukeModulesMemberDirectoryC,
.ModDotNetNukeModulesMemberDirectoryC .DNNModuleContent,
.ModDotNetNukeModulesMemberDirectoryC .dnnForm,
.ModDotNetNukeModulesMemberDirectoryC div[id$="_View_memberDirectory"] {
  float: none !important;
  clear: both !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/*
  Clearfix-based containment.

  This is the replacement for display: flow-root.
  It helps parents reserve height for floated/cleared children without
  forcing hidden module-managed elements visible.
*/
.ModDotNetNukeModulesMemberDirectoryC::after,
.ModDotNetNukeModulesMemberDirectoryC .DNNModuleContent::after,
.ModDotNetNukeModulesMemberDirectoryC .dnnForm::after,
.ModDotNetNukeModulesMemberDirectoryC div[id$="_View_memberDirectory"]::after,
ul#mdMemberList.mdMemberList::after,
ul#mdMemberList.mdMemberList > li::after,
ul#mdMemberList.mdMemberList > li > div::after,
ul#mdMemberList.mdMemberList .friendProfileActions::after,
ul#mdMemberList.mdMemberList .friendProfileActions .member-profile-action-list::after {
  content: "";
  display: table;
  clear: both;
}

/* Generated member list. */
div[id$="Pane"] ul#mdMemberList.mdMemberList,
ul#mdMemberList.mdMemberList {
  float: none !important;
  clear: both !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 1rem 0 !important;
  padding: 0 !important;
  padding-left: 0 !important;
  padding-inline-start: 0 !important;
  list-style: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  overflow: visible !important;
}

/*
  Generated member list item.

  Do NOT set display here. A second generated item may exist in the DOM,
  and the module may rely on display rules to suppress it.
*/
ul#mdMemberList.mdMemberList > li {
  float: none !important;
  clear: both !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-left: 0 !important;
  padding-inline-start: 0 !important;
  list-style: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  overflow: visible !important;
}

/* Prevent old hover/focus rules from changing the generated li dimensions. */
ul#mdMemberList.mdMemberList > li:hover,
ul#mdMemberList.mdMemberList > li:focus,
ul#mdMemberList.mdMemberList > li:focus-within {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-left: 0 !important;
  padding-inline-start: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  left: auto !important;
  right: auto !important;
  z-index: auto !important;
}

/*
  The anonymous wrapper shown in DevTools immediately inside li.

  Do NOT set display here. Preserve module/template visibility behavior.
*/
ul#mdMemberList.mdMemberList > li > div {
  float: none !important;
  clear: both !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  overflow: visible !important;
}

/*
  Template wrapper.

  Do NOT set display here. Preserve module/template visibility behavior.
*/
ul#mdMemberList.mdMemberList .friendProfileActions {
  float: none !important;
  clear: both !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0.75rem 0 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  overflow: visible !important;
}

/*
  Actual visible action group.

  Do NOT set display here. Preserve module/template visibility behavior.
*/
ul#mdMemberList.mdMemberList .friendProfileActions .member-profile-action-list {
  float: none !important;
  clear: both !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  border: 1px solid #d7d7d7 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  overflow: hidden !important;
}

/*
  Knockout controls visibility with inline display:none.
  These rows MUST stay hidden when Knockout hides them.
*/
ul#mdMemberList.mdMemberList .friendProfileActions .member-profile-action-link[style*="display: none"],
ul#mdMemberList.mdMemberList .friendProfileActions .member-profile-action-status[style*="display: none"] {
  display: none !important;
}

/*
  Visible action rows only.

  This is the only place in this block where display:block is intentional.
  These are actual rows, not parent/generated containers.
*/
ul#mdMemberList.mdMemberList .friendProfileActions .member-profile-action-link:not([style*="display: none"]),
ul#mdMemberList.mdMemberList .friendProfileActions .member-profile-action-status:not([style*="display: none"]) {
  display: block !important;
  float: none !important;
  clear: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0.65rem 0.75rem !important;
  color: #222222 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #e2e2e2 !important;
  box-shadow: none !important;
  transform: none !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  text-align: left !important;
  text-decoration: none !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* Keep hidden legacy action classes hidden. */
ul#mdMemberList.mdMemberList .friendProfileActions .ComposeMessage[style*="display: none"],
ul#mdMemberList.mdMemberList .friendProfileActions .addFriend[style*="display: none"],
ul#mdMemberList.mdMemberList .friendProfileActions .acceptFriend[style*="display: none"],
ul#mdMemberList.mdMemberList .friendProfileActions .removeFriend[style*="display: none"],
ul#mdMemberList.mdMemberList .friendProfileActions .follow[style*="display: none"],
ul#mdMemberList.mdMemberList .friendProfileActions .unFollow[style*="display: none"] {
  display: none !important;
}

/* Constrain visible legacy action classes without forcing hidden ones visible. */
ul#mdMemberList.mdMemberList .friendProfileActions .ComposeMessage:not([style*="display: none"]),
ul#mdMemberList.mdMemberList .friendProfileActions .addFriend:not([style*="display: none"]),
ul#mdMemberList.mdMemberList .friendProfileActions .acceptFriend:not([style*="display: none"]),
ul#mdMemberList.mdMemberList .friendProfileActions .removeFriend:not([style*="display: none"]),
ul#mdMemberList.mdMemberList .friendProfileActions .follow:not([style*="display: none"]),
ul#mdMemberList.mdMemberList .friendProfileActions .unFollow:not([style*="display: none"]) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: auto !important;
  right: auto !important;
}

/* Hover/focus must never resize, move, shadow, or overlap. */
ul#mdMemberList.mdMemberList .friendProfileActions .member-profile-action-link:not([style*="display: none"]):hover,
ul#mdMemberList.mdMemberList .friendProfileActions .member-profile-action-link:not([style*="display: none"]):focus {
  color: #111111 !important;
  background: #f2f2f2 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Pending/non-clickable state. */
ul#mdMemberList.mdMemberList .friendProfileActions .member-profile-action-status:not([style*="display: none"]) {
  color: #666666 !important;
  background: #f7f7f7 !important;
  cursor: default !important;
}

/* Keyboard focus without layout movement. */
ul#mdMemberList.mdMemberList .friendProfileActions .member-profile-action-link:focus-visible {
  outline: 2px solid #555555 !important;
  outline-offset: -2px !important;
  box-shadow: none !important;
}

/* Small containers should still fit cleanly. */
@media (max-width: 575.98px) {
  ul#mdMemberList.mdMemberList .friendProfileActions .member-profile-action-link:not([style*="display: none"]),
  ul#mdMemberList.mdMemberList .friendProfileActions .member-profile-action-status:not([style*="display: none"]) {
    padding: 0.7rem 0.75rem !important;
  }
}

/* ------------------------------------------------------------
   Member profile photo block - Social profile template

   Purpose:
   - Modernize only the profile photo/account links block.
   - Preserve legacy template structure and generated hyperlink tokens.
   - Avoid broad selectors that affect the activity feed, friend actions,
     Knockout-controlled visibility, or generated member lists.
------------------------------------------------------------ */

#UserProfileImg.bcc-member-profile-card,
.UserProfileControls.bcc-member-profile-card__controls {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  clear: both !important;
}

#UserProfileImg.bcc-member-profile-card {
  background:
    radial-gradient(circle at top left, rgba(40, 157, 185, 0.12), transparent 8rem),
    linear-gradient(180deg, #ffffff, var(--scbng-profile-soft)) !important;
  border: 1px solid var(--scbng-profile-border) !important;
  border-radius: var(--scbng-profile-radius-lg) !important;
  box-shadow: var(--scbng-profile-shadow-sm) !important;
  overflow: hidden !important;
}

#UserProfileImg.bcc-member-profile-card .bcc-member-profile-card__photo-wrap {
  width: 132px;
  height: 132px;
  max-width: 100%;
  background: #ffffff;
  border: 1px solid rgba(63, 89, 101, 0.12);
  border-radius: 999px;
  box-shadow:
    0 10px 24px rgba(31, 42, 51, 0.1),
    inset 0 0 0 6px rgba(247, 251, 252, 0.82);
}

#UserProfileImg.bcc-member-profile-card .ProfilePhoto,
#UserProfileImg.bcc-member-profile-card .bcc-member-profile-card__photo {
  display: block !important;
  width: 120px !important;
  max-width: 120px !important;
  height: 120px !important;
  max-height: 120px !important;
  object-fit: cover !important;
  background: #ffffff !important;
  border: 0 !important;
  box-shadow: none !important;
}

.UserProfileControls.bcc-member-profile-card__controls {
  margin-top: 0 !important;
}

/*
  Override the broad pane rule that adds padding to all pane ULs.
  This is scoped only to the profile account action list.
*/
div[id$="Pane"] .UserProfileControls.bcc-member-profile-card__controls ul.bcc-member-profile-card__actions,
.UserProfileControls.bcc-member-profile-card__controls ul.bcc-member-profile-card__actions {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-left: 0 !important;
  padding-inline-start: 0 !important;
  list-style: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.UserProfileControls.bcc-member-profile-card__controls .bcc-member-profile-card__action {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 0 0.5rem 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.UserProfileControls.bcc-member-profile-card__controls .bcc-member-profile-card__action:last-child {
  margin-bottom: 0 !important;
}

/*
  The template tokens render anchor elements.
  Style only direct anchors inside this scoped action list.
*/
.UserProfileControls.bcc-member-profile-card__controls .bcc-member-profile-card__action > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 42px !important;
  padding: 0.65rem 1rem !important;
  color: var(--scbng-profile-primary) !important;
  background: #ffffff !important;
  border: 1px solid rgba(63, 89, 101, 0.18) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-size: 0.875rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  transition:
    color 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.UserProfileControls.bcc-member-profile-card__controls .bcc-member-profile-card__action > a:hover,
.UserProfileControls.bcc-member-profile-card__controls .bcc-member-profile-card__action > a:focus {
  color: #ffffff !important;
  background: var(--scbng-profile-primary) !important;
  border-color: var(--scbng-profile-primary) !important;
  text-decoration: none !important;
  box-shadow: 0 10px 24px rgba(63, 89, 101, 0.16) !important;
  transform: translateY(-1px);
}

.UserProfileControls.bcc-member-profile-card__controls .bcc-member-profile-card__action > a:focus-visible {
  outline: none !important;
  box-shadow: var(--scbng-profile-focus) !important;
}

/* Keep reduced-motion users from getting movement effects. */
@media (prefers-reduced-motion: reduce) {
  .UserProfileControls.bcc-member-profile-card__controls .bcc-member-profile-card__action > a {
    transition-duration: 0.001ms !important;
  }

  .UserProfileControls.bcc-member-profile-card__controls .bcc-member-profile-card__action > a:hover,
  .UserProfileControls.bcc-member-profile-card__controls .bcc-member-profile-card__action > a:focus {
    transform: none !important;
  }
}

/* ------------------------------------------------------------
   Member profile information block - Social profile template

   Purpose:
   - Modernize the About Me, Location, and Get In Touch sections.
   - Preserve all KnockoutJS bindings and visibility rules.
   - Avoid broad selectors that affect generated social lists,
     navigation, activity feed, or pane-level content lists.
------------------------------------------------------------ */

.bcc-member-profile-info,
.bcc-member-profile-info *,
.bcc-member-profile-info *::before,
.bcc-member-profile-info *::after {
  box-sizing: border-box !important;
}

.bcc-member-profile-info {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  clear: both !important;
}

.bcc-member-profile-info__section {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  background:
    linear-gradient(180deg, #ffffff, rgba(247, 251, 252, 0.72)) !important;
  border: 1px solid var(--scbng-profile-border) !important;
  border-radius: var(--scbng-profile-radius-lg) !important;
  box-shadow: var(--scbng-profile-shadow-sm) !important;
  overflow: hidden !important;
}

.bcc-member-profile-info__section .card-body {
  padding: clamp(1rem, 2vw, 1.35rem) !important;
}

.bcc-member-profile-info__heading {
  display: flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  margin-top: 0 !important;
  color: var(--scbng-profile-secondary) !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.025em !important;
  text-transform: uppercase !important;
}

.bcc-member-profile-info__heading::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  background: linear-gradient(135deg, var(--scbng-profile-secondary), var(--scbng-profile-tertiary));
  border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(40, 157, 185, 0.1);
}

.bcc-member-profile-info__empty {
  display: block;
  width: 100%;
  margin: 0 !important;
  padding: 0.85rem 1rem !important;
  color: var(--scbng-profile-muted) !important;
  background: rgba(247, 251, 252, 0.82) !important;
  border: 1px dashed rgba(63, 89, 101, 0.22) !important;
  border-radius: var(--scbng-profile-radius) !important;
  font-size: 0.925rem !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
}

.bcc-member-profile-info__content {
  color: var(--scbng-profile-ink) !important;
  font-size: 0.96rem !important;
  line-height: 1.68 !important;
}

.bcc-member-profile-info__content:empty {
  display: none !important;
}

.bcc-member-profile-info__content p,
.bcc-member-profile-info__content ul,
.bcc-member-profile-info__content ol {
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
}

.bcc-member-profile-info__content p:last-child,
.bcc-member-profile-info__content ul:last-child,
.bcc-member-profile-info__content ol:last-child {
  margin-bottom: 0 !important;
}

.bcc-member-profile-info__content a {
  color: var(--scbng-profile-secondary) !important;
  font-weight: 800 !important;
  text-decoration: underline !important;
  text-underline-offset: 0.18em;
}

.bcc-member-profile-info__content a:hover,
.bcc-member-profile-info__content a:focus {
  color: var(--scbng-profile-secondary-dark) !important;
}

.bcc-member-profile-info__address {
  color: var(--scbng-profile-ink) !important;
  font-size: 0.96rem !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 1.65 !important;
}

/*
  Override the broad pane rule that adds padding to all pane ULs.
  This is scoped only to this profile contact list.
*/
div[id$="Pane"] .bcc-member-profile-info ul.bcc-member-profile-info__contact-list,
.bcc-member-profile-info ul.bcc-member-profile-info__contact-list {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-left: 0 !important;
  padding-inline-start: 0 !important;
  list-style: none !important;
}

.bcc-member-profile-info__contact-item {
  display: grid !important;
  grid-template-columns: minmax(6.5rem, max-content) minmax(0, 1fr);
  gap: 0.35rem 0.75rem;
  align-items: start;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0.75rem 0 !important;
  color: var(--scbng-profile-ink) !important;
  border-bottom: 1px solid var(--scbng-profile-border) !important;
  list-style: none !important;
  line-height: 1.45 !important;
}

.bcc-member-profile-info__contact-item:first-child {
  padding-top: 0 !important;
}

.bcc-member-profile-info__contact-item:last-child {
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}

.bcc-member-profile-info__label {
  color: var(--scbng-profile-primary) !important;
  font-size: 0.82rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.035em !important;
  text-transform: uppercase !important;
}

.bcc-member-profile-info__value {
  min-width: 0 !important;
  color: var(--scbng-profile-ink) !important;
  font-size: 0.925rem !important;
  font-weight: 650 !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

/* Stack profile contact labels above values on narrow screens. */
@media (max-width: 575.98px) {
  .bcc-member-profile-info__section .card-body {
    padding: 1rem !important;
  }

  .bcc-member-profile-info__contact-item {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  .bcc-member-profile-info__label,
  .bcc-member-profile-info__value {
    display: block !important;
  }
}

/* =========================================================
   SCBNG Login Page Polish
   Safe portal.css addition only.

   Purpose:
   - Modernize the built-in login view.
   - Keep both authentication providers visually consistent.
   - Prevent tab flicker by styling LoginTab, LoginTabHover,
     and LoginTabSelected with identical layout rules.
   - Avoid nested card-on-card styling.
   ========================================================= */

/* Local login design tokens */
body:has(.dnnLogin) {
  --scbng-login-primary: #3f5965;
  --scbng-login-primary-dark: #2f4858;
  --scbng-login-secondary: #289db9;
  --scbng-login-secondary-dark: #1f7f96;
  --scbng-login-tertiary: #3d8d97;
  --scbng-login-plum: #625061;
  --scbng-login-ink: #1f2a33;
  --scbng-login-muted: rgba(31, 42, 51, 0.68);
  --scbng-login-border: rgba(63, 89, 101, 0.18);
  --scbng-login-border-strong: rgba(63, 89, 101, 0.28);
  --scbng-login-surface: #ffffff;
  --scbng-login-soft: #f7fbfc;
  --scbng-login-soft-2: #eef7fa;
  --scbng-login-shadow-sm: 0 0.35rem 1rem rgba(31, 42, 51, 0.08);
  --scbng-login-shadow-md: 0 1rem 2.75rem rgba(31, 42, 51, 0.12);
  --scbng-login-shadow-lg: 0 1.5rem 4rem rgba(31, 42, 51, 0.14);
  --scbng-login-radius: 0.95rem;
  --scbng-login-radius-lg: 1.2rem;
  --scbng-login-focus: 0 0 0 0.22rem rgba(40, 157, 185, 0.26);
}

/* Page-level spacing and centering */
body:has(.dnnLogin) .main {
  padding-top: clamp(2rem, 4vw, 4rem);
  padding-bottom: clamp(3rem, 6vw, 6rem);
}

body:has(.dnnLogin) #dnn_ContentPane,
body:has(.dnnLogin) #dnn_contentPane {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

/* Authentication providers rely on this class for state switching. */
.dnnLogin .hidden {
  display: none !important;
}

/* Main login shell */
.dnnLogin {
  width: 100%;
  max-width: 980px;
  margin: 0 auto clamp(2rem, 4vw, 4rem);
  color: var(--scbng-login-ink);
}

/* Remove old visual noise from provider wrappers */
.dnnLogin,
.dnnLogin .loginContent,
.dnnLogin .LoginContainer,
.dnnLogin .dnnLoginService,
.dnnLogin .pwLogin {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* =========================================================
   Login Tabs
   ========================================================= */

/*
   Use one stable rule set for every real tab state.

   The key detail from the BCC fix:
   LoginTabHover must get the same layout rules as LoginTab and
   LoginTabSelected. Otherwise, DNN swaps the class on hover and
   the tab can jump or flicker.
*/
body .dnnLogin :is(#dnn_ctr_Login_tsLogin_lc, .LoginTabGroup) {
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  width: 100% !important;
  min-height: 58px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--scbng-login-border) !important;
  border-bottom: 0 !important;
  border-radius: var(--scbng-login-radius-lg) var(--scbng-login-radius-lg) 0 0 !important;
  background:
    linear-gradient(180deg, #ffffff, rgba(247, 251, 252, 0.86)) !important;
  box-shadow: var(--scbng-login-shadow-sm) !important;
  overflow: hidden !important;
}

/* All possible tab states get identical layout. */
body .dnnLogin :is(#dnn_ctr_Login_tsLogin_lc, .LoginTabGroup) > span.LoginTab,
body .dnnLogin :is(#dnn_ctr_Login_tsLogin_lc, .LoginTabGroup) > span.LoginTabHover,
body .dnnLogin :is(#dnn_ctr_Login_tsLogin_lc, .LoginTabGroup) > span.LoginTabSelected,
.dnnLogin .LoginTab,
.dnnLogin .LoginTabHover,
.dnnLogin .LoginTabSelected {
  position: relative !important;
  display: flex !important;
  flex: 1 1 0 !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  min-height: 58px !important;
  margin: 0 !important;
  padding: 0.95rem 1.35rem 1.15rem !important;
  border: 0 !important;
  border-right: 1px solid rgba(63, 89, 101, 0.13) !important;
  border-radius: 0 !important;
  color: var(--scbng-login-primary) !important;
  background: transparent !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  font-family: inherit !important;
  font-size: 0.92rem !important;
  font-style: normal !important;
  font-weight: 800 !important;
  font-variant: normal !important;
  letter-spacing: 0.01em !important;
  line-height: 1.15 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-shadow: none !important;
  text-transform: none !important;
  white-space: nowrap !important;
  transform: none !important;
  user-select: none !important;
  transition:
    background-color 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease !important;
}

body .dnnLogin :is(#dnn_ctr_Login_tsLogin_lc, .LoginTabGroup) > span.LoginTab:last-child,
body .dnnLogin :is(#dnn_ctr_Login_tsLogin_lc, .LoginTabGroup) > span.LoginTabHover:last-child,
body .dnnLogin :is(#dnn_ctr_Login_tsLogin_lc, .LoginTabGroup) > span.LoginTabSelected:last-child,
.dnnLogin .LoginTab:last-child,
.dnnLogin .LoginTabHover:last-child,
.dnnLogin .LoginTabSelected:last-child {
  border-right: 0 !important;
}

/* Normalize inner text/link wrappers */
.dnnLogin .LoginTab *,
.dnnLogin .LoginTabHover *,
.dnnLogin .LoginTabSelected *,
.dnnLogin .LoginTab a,
.dnnLogin .LoginTabHover a,
.dnnLogin .LoginTabSelected a,
.dnnLogin .LoginTab span,
.dnnLogin .LoginTabHover span,
.dnnLogin .LoginTabSelected span {
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-style: normal !important;
  font-weight: inherit !important;
  font-variant: normal !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  text-align: inherit !important;
  text-decoration: none !important;
  text-shadow: none !important;
  text-transform: none !important;
  white-space: inherit !important;
}

/* Inactive tab */
.dnnLogin .LoginTab {
  color: rgba(63, 89, 101, 0.74) !important;
  background: rgba(238, 247, 250, 0.62) !important;
  box-shadow: inset 0 -1px 0 rgba(63, 89, 101, 0.08) !important;
}

/* DNN hover class and standard CSS hover */
.dnnLogin .LoginTabHover,
.dnnLogin .LoginTab:hover,
.dnnLogin .LoginTab:focus,
.dnnLogin .LoginTab:focus-visible {
  color: var(--scbng-login-primary) !important;
  background: #ffffff !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.15 !important;
  padding: 0.95rem 1.35rem 1.15rem !important;
  box-shadow:
    inset 0 -3px 0 rgba(40, 157, 185, 0.58),
    inset 0 0 0 999px rgba(40, 157, 185, 0.035) !important;
  transform: none !important;
}

/* Selected tab */
.dnnLogin .LoginTabSelected,
.dnnLogin .LoginTabSelected:hover,
.dnnLogin .LoginTabSelected:focus,
.dnnLogin .LoginTabSelected:focus-visible {
  color: var(--scbng-login-ink) !important;
  background: #ffffff !important;
  font-size: 0.92rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.15 !important;
  padding: 0.95rem 1.35rem 1.15rem !important;
  box-shadow: inset 0 -4px 0 var(--scbng-login-secondary) !important;
  transform: none !important;
}

/* Keep inner text stable during all hover/focus states */
.dnnLogin .LoginTab:hover *,
.dnnLogin .LoginTab:focus *,
.dnnLogin .LoginTab:focus-visible *,
.dnnLogin .LoginTabHover *,
.dnnLogin .LoginTabSelected:hover *,
.dnnLogin .LoginTabSelected:focus *,
.dnnLogin .LoginTabSelected:focus-visible * {
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  text-decoration: none !important;
  text-shadow: none !important;
  text-transform: none !important;
}

/* Remove inherited/generated tab decorations */
.dnnLogin .LoginTab::before,
.dnnLogin .LoginTab::after,
.dnnLogin .LoginTabHover::before,
.dnnLogin .LoginTabHover::after,
.dnnLogin .LoginTabSelected::before,
.dnnLogin .LoginTabSelected::after,
.dnnLogin .LoginTab *::before,
.dnnLogin .LoginTab *::after,
.dnnLogin .LoginTabHover *::before,
.dnnLogin .LoginTabHover *::after,
.dnnLogin .LoginTabSelected *::before,
.dnnLogin .LoginTabSelected *::after {
  display: none !important;
  content: none !important;
}

/* Keyboard focus without layout changes */
.dnnLogin .LoginTab:focus-visible,
.dnnLogin .LoginTabHover:focus-visible,
.dnnLogin .LoginTabSelected:focus-visible {
  outline: none !important;
  box-shadow:
    inset 0 0 0 2px rgba(40, 157, 185, 0.32),
    inset 0 -4px 0 var(--scbng-login-secondary) !important;
}

/* =========================================================
   Login Panel
   ========================================================= */

.dnnLogin .LoginContainerGroup {
  position: relative;
  margin: 0 !important;
  padding: clamp(1.85rem, 3vw, 2.5rem) !important;
  border: 1px solid var(--scbng-login-border) !important;
  border-top: 0 !important;
  border-radius: 0 0 var(--scbng-login-radius-lg) var(--scbng-login-radius-lg) !important;
  background:
    radial-gradient(circle at top left, rgba(40, 157, 185, 0.08), transparent 18rem),
    linear-gradient(180deg, #ffffff, rgba(247, 251, 252, 0.9)) !important;
  box-shadow: var(--scbng-login-shadow-lg) !important;
  overflow: hidden;
}

/* Remove inner bordered boxes */
.dnnLogin .LoginContainerGroup .LoginContainer,
.dnnLogin .LoginContainerGroup .dnnLoginService,
.dnnLogin .LoginContainerGroup .pwLogin,
.dnnLogin .LoginContainerGroup fieldset,
.dnnLogin .LoginContainerGroup .dnnForm,
.dnnLogin .LoginContainerGroup .dnnFormItem,
.dnnLogin .LoginContainerGroup .dnnActions {
  border: 0 !important;
  box-shadow: none !important;
}

.dnnLogin .LoginContainer,
.dnnLogin .dnnLoginService,
.dnnLogin .pwLogin {
  padding: 0 !important;
  margin: 0 !important;
  border-top: 0 !important;
}

/* Form rows */
.dnnLogin .dnnFormItem {
  display: grid !important;
  grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem 1rem;
  width: 100%;
  margin: 0 0 1rem 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Hide empty label columns without collapsing the grid on desktop */
.dnnLogin .dnnFormItem > .dnnLabel:empty,
.dnnLogin .dnnFormItem > .dnnFormLabel:empty,
.dnnLogin .dnnFormItem > .dnnLabel:has(label:empty),
.dnnLogin .dnnFormItem > .dnnFormLabel:has(label:empty) {
  visibility: hidden;
}

/* Labels */
.dnnLogin .dnnLabel,
.dnnLogin .dnnFormLabel {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--scbng-login-primary) !important;
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  line-height: 1.25;
  text-align: left !important;
}

.dnnLogin .dnnLabel label,
.dnnLogin .dnnFormLabel label,
.dnnLogin label.dnnFormLabel {
  margin: 0 !important;
  color: inherit !important;
  font: inherit !important;
}

/* Inputs */
.dnnLogin input[type="text"],
.dnnLogin input[type="password"],
.dnnLogin input[type="email"] {
  width: 100% !important;
  max-width: none !important;
  min-height: 48px;
  margin: 0 !important;
  padding: 0.75rem 0.9rem !important;
  border: 1px solid var(--scbng-login-border) !important;
  border-radius: 0.8rem !important;
  background: #ffffff !important;
  color: var(--scbng-login-ink) !important;
  font-size: 0.96rem !important;
  line-height: 1.35 !important;
  box-shadow: none !important;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}

.dnnLogin input[type="text"]:focus,
.dnnLogin input[type="password"]:focus,
.dnnLogin input[type="email"]:focus {
  border-color: rgba(40, 157, 185, 0.55) !important;
  box-shadow: var(--scbng-login-focus) !important;
  outline: none !important;
}

.dnnLogin input::placeholder {
  color: rgba(31, 42, 51, 0.48);
}

/* Verification/status messages */
.dnnLogin .dnnFormMessage {
  grid-column: 1 / -1;
  width: 100% !important;
  max-width: none !important;
  margin: 0.25rem 0 1.45rem 0 !important;
  padding: 1rem 1.1rem !important;
  border-radius: var(--scbng-login-radius) !important;
  font-size: 0.96rem !important;
  font-weight: 700 !important;
  line-height: 1.45;
  text-align: center;
  box-shadow: none !important;
}

.dnnLogin .dnnFormWarning {
  border: 1px solid rgba(193, 161, 191, 0.5) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(193, 161, 191, 0.16)) !important;
  color: var(--scbng-login-plum) !important;
}

.dnnLogin .dnnFormError,
.dnnLogin .dnnFormValidationSummary {
  border: 1px solid rgba(98, 80, 97, 0.3) !important;
  background: rgba(98, 80, 97, 0.08) !important;
  color: var(--scbng-login-plum) !important;
}

/* Remember me */
.dnnLogin .dnnLoginRememberMe {
  display: inline-flex !important;
  align-items: center;
  gap: 0.55rem;
  color: var(--scbng-login-muted) !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
}

.dnnLogin .dnnLoginRememberMe input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin: 0 !important;
  accent-color: var(--scbng-login-secondary);
}

.dnnLogin .dnnLoginRememberMe label {
  margin: 0 !important;
  color: var(--scbng-login-muted) !important;
  font-weight: 700 !important;
  cursor: pointer;
}

/* =========================================================
   Actions
   ========================================================= */

.dnnLogin .dnnActions {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: transparent !important;
}

.dnnLogin .dnnActions li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.dnnLogin .dnnPrimaryAction,
.dnnLogin .dnnSecondaryAction,
.dnnLogin #btnSendEmail,
.dnnLogin #btnSendEmailDisabled {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  min-height: 44px;
  margin: 0 !important;
  padding: 0.72rem 1.25rem !important;
  border-radius: 999px !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

/* Primary actions */
.dnnLogin .dnnPrimaryAction,
.dnnLogin #btnSendEmail {
  border: 1px solid transparent !important;
  background:
    linear-gradient(135deg, var(--scbng-login-secondary), var(--scbng-login-primary)) !important;
  color: #ffffff !important;
  box-shadow: 0 0.75rem 1.5rem rgba(40, 157, 185, 0.24) !important;
}

.dnnLogin .dnnPrimaryAction:hover,
.dnnLogin .dnnPrimaryAction:focus,
.dnnLogin #btnSendEmail:hover,
.dnnLogin #btnSendEmail:focus {
  background:
    linear-gradient(135deg, var(--scbng-login-primary-dark), var(--scbng-login-secondary-dark)) !important;
  color: #ffffff !important;
  box-shadow: 0 1rem 2rem rgba(47, 72, 88, 0.26) !important;
  transform: translateY(-1px);
}

/* Secondary actions */
.dnnLogin .dnnSecondaryAction {
  border: 1px solid var(--scbng-login-border) !important;
  background: #ffffff !important;
  color: var(--scbng-login-primary) !important;
}

.dnnLogin .dnnSecondaryAction:hover,
.dnnLogin .dnnSecondaryAction:focus {
  border-color: var(--scbng-login-primary) !important;
  background: var(--scbng-login-primary) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* Disabled send-code state

   Important:
   Do not treat .aspNetDisabled as disabled by class alone.

   Older ASP.NET WebForms controls may leave the aspNetDisabled class
   on the element after client-side logic removes the actual disabled
   attribute. If CSS disables pointer events based only on that class,
   a button can become enabled in the DOM but still remain unclickable.

   Only apply the disabled treatment when the element is actually disabled.
*/
.dnnLogin #btnSendEmailDisabled,
.dnnLogin .dnnDisabledAction,
.dnnLogin input.aspNetDisabled:disabled,
.dnnLogin button.aspNetDisabled:disabled,
.dnnLogin a.aspNetDisabled[disabled],
.dnnLogin .dnnPrimaryAction:disabled,
.dnnLogin .dnnSecondaryAction:disabled {
  border: 1px solid rgba(63, 89, 101, 0.12) !important;
  background: rgba(63, 89, 101, 0.08) !important;
  color: rgba(31, 42, 51, 0.42) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* If WebForms leaves aspNetDisabled behind after enabling the control,
   allow the now-enabled action to receive clicks again. */
.dnnLogin input.dnnPrimaryAction.aspNetDisabled:not(:disabled),
.dnnLogin input.dnnSecondaryAction.aspNetDisabled:not(:disabled),
.dnnLogin button.dnnPrimaryAction.aspNetDisabled:not(:disabled),
.dnnLogin button.dnnSecondaryAction.aspNetDisabled:not(:disabled),
.dnnLogin a.dnnPrimaryAction.aspNetDisabled:not([disabled]),
.dnnLogin a.dnnSecondaryAction.aspNetDisabled:not([disabled]) {
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* Reset password area */
.dnnLogin .dnnLoginActions {
  margin: 0.15rem 0 0 0 !important;
  padding: 0 !important;
}

/* Custom auth countdown/status text */
.dnnLogin #msgCounter {
  grid-column: 2;
  padding-left: 0 !important;
  margin: -0.35rem 0 0.9rem 0 !important;
}

.dnnLogin #msgCounter p {
  margin: 0 !important;
  color: var(--scbng-login-muted) !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
}

/* Keep hidden provider state elements hidden */
.dnnLogin #btnSendEmail.hidden,
.dnnLogin #btnSendEmailDisabled.hidden,
.dnnLogin #msgCounter.hidden,
.dnnLogin #valueTimeSpan.hidden,
.dnnLogin #valueMessageSpan.hidden {
  display: none !important;
}

.dnnLogin #btnSendEmailDisabled:not(.hidden) {
  opacity: 0.72;
  box-shadow: none !important;
}

/* =========================================================
   Responsive Login
   ========================================================= */

@media (max-width: 767.98px) {
  body:has(.dnnLogin) .main {
    padding-top: 1.5rem;
    padding-bottom: 3rem;
  }

  .dnnLogin {
    max-width: 100%;
  }

  body .dnnLogin :is(#dnn_ctr_Login_tsLogin_lc, .LoginTabGroup) {
    min-height: 52px !important;
    border-radius: var(--scbng-login-radius) var(--scbng-login-radius) 0 0 !important;
    overflow-x: auto !important;
  }

  body .dnnLogin :is(#dnn_ctr_Login_tsLogin_lc, .LoginTabGroup) > span.LoginTab,
  body .dnnLogin :is(#dnn_ctr_Login_tsLogin_lc, .LoginTabGroup) > span.LoginTabHover,
  body .dnnLogin :is(#dnn_ctr_Login_tsLogin_lc, .LoginTabGroup) > span.LoginTabSelected,
  .dnnLogin .LoginTab,
  .dnnLogin .LoginTabHover,
  .dnnLogin .LoginTabSelected {
    flex: 1 0 auto !important;
    min-height: 52px !important;
    padding: 0.82rem 0.9rem 1.05rem !important;
    font-size: 0.82rem !important;
    white-space: nowrap !important;
  }

  .dnnLogin .LoginContainerGroup {
    padding: 1.35rem 1.15rem 1.15rem !important;
    border-radius: 0 0 var(--scbng-login-radius) var(--scbng-login-radius) !important;
  }

  .dnnLogin .dnnFormItem {
    display: block !important;
    margin-bottom: 1rem !important;
  }

  .dnnLogin .dnnLabel,
  .dnnLogin .dnnFormLabel {
    display: block !important;
    margin-bottom: 0.4rem !important;
  }

  .dnnLogin .dnnFormItem > .dnnLabel:empty,
  .dnnLogin .dnnFormItem > .dnnFormLabel:empty,
  .dnnLogin .dnnFormItem > .dnnLabel:has(label:empty),
  .dnnLogin .dnnFormItem > .dnnFormLabel:has(label:empty) {
    display: none !important;
  }

  .dnnLogin .dnnActions {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 0.6rem !important;
  }

  .dnnLogin .dnnPrimaryAction,
  .dnnLogin .dnnSecondaryAction,
  .dnnLogin #btnSendEmail,
  .dnnLogin #btnSendEmailDisabled {
    width: 100%;
    min-width: 0;
  }

  .dnnLogin #msgCounter {
    grid-column: auto;
    margin-top: 0 !important;
  }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .dnnLogin .LoginTab,
  .dnnLogin .LoginTabHover,
  .dnnLogin .LoginTabSelected,
  .dnnLogin input[type="text"],
  .dnnLogin input[type="password"],
  .dnnLogin input[type="email"],
  .dnnLogin .dnnPrimaryAction,
  .dnnLogin .dnnSecondaryAction,
  .dnnLogin #btnSendEmail,
  .dnnLogin #btnSendEmailDisabled {
    transition-duration: 0.001ms !important;
  }

  .dnnLogin .dnnPrimaryAction:hover,
  .dnnLogin .dnnPrimaryAction:focus,
  .dnnLogin .dnnSecondaryAction:hover,
  .dnnLogin .dnnSecondaryAction:focus,
  .dnnLogin #btnSendEmail:hover,
  .dnnLogin #btnSendEmail:focus {
    transform: none !important;
  }
}