.icg-2fa-login {
    /* margin-top: -90px; */
    margin-bottom: 90px;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

.btn-2factor-login,
.btn-2factor-forgotpassword,
.btn-2factor-complete {
    margin: 10px 0;
    width: 100%;
    color: #fff !important;
}

.icg-2fa-login .form-check {
    padding-left: 0;
}

/* Hide when logged in (DNN adds this class to body when authenticated) */
body.personabar-visible #CookiebotWidget {
    display: none !important;
}

/*  Hides CookieBot Logo*/
a#CybotCookiebotDialogPoweredbyCybot,
.CookiebotWidget-main-logo {
    display: none !important;
}

/* ============================================================================
   Highpoint Community Bank  →  Independent Bank
   Legal Day One styling mock-up  ·  SINGLE DROP-IN FOR ALL PAGES
   (home + inner pages)  ·  Prepared by WSI

   Brand colors
     Navy   #172A54   (headings, primary buttons, hero/masthead background)
     Cyan   #00aeef   (eyebrow labels, accent lines, controls)

   Safe to place on every page: the home page and inner pages share the same
   skin, and these rules are written so home-specific and inner-specific cases
   don't conflict (the hero/masthead band and eyebrow rules win by specificity
   over the global heading rule, so nothing fights).

   Not handled here (per Mark): header/footer logos image swap and the phone-app
   screenshots. Uses :has() (current Chrome/Edge/Safari/Firefox).
   ============================================================================ */


/* ---------------------------------------------------------------------------
   1. Eyebrow / kicker labels  →  cyan
   Covers the coral (.text-tertiary, e.g. EXPLORE THE POSSIBILITIES, ABOUT US,
   HELPFUL LINKS, OUR CUSTOMERS SAY IT BEST) and the pink accent (.text-accent,
   e.g. SPEND). The Latest News module keeps its own gray label treatment.
   --------------------------------------------------------------------------- */
.text-tertiary { color: #00aeef !important; }
.bg-tertiary   { background-color: #00aeef !important; }
.text-accent   { color: #00aeef !important; }

.eds_news_Galore .text-accent,
.eds_news_Galore .News { color: #6B7280 !important; }


/* ---------------------------------------------------------------------------
   2. Headings & card titles  →  navy
   Eyebrows keep cyan (higher specificity) and the hero/masthead band overrides
   these to white (section 3), both win automatically over this rule.
   --------------------------------------------------------------------------- */
h1, h2, h3, h4 { color: #172A54 !important; }
p.text-2xl.font-bold { color: #172A54 !important; }                 /* e.g. "All Personal Checking" */
.eds_news_Galore p.text-xl.font-bold { color: #172A54 !important; } /* news article titles */


/* ---------------------------------------------------------------------------
   3. Hero / inner masthead band (shared Hero.jpg component)
   Solid navy background, white copy, decorative artwork hidden.
   --------------------------------------------------------------------------- */
section:has(> img[src*="Hero.jpg"]) {
  background-color: #172A54 !important;
}
section:has(> img[src*="Hero.jpg"]) > img[src*="Hero.jpg"] {
  display: none !important;
}
section:has(> img[src*="Hero.jpg"]) :is(h1, h2, h3, h4, p, .text-accent, .text-tertiary),
section:has(> img[src*="Hero.jpg"]) .prose * {
  color: #ffffff !important;
}
/* hero "Learn More" stays a WHITE button with NAVY text. The bg vars need
   !important here so they beat the global navy primary's !important vars in
   section 4 (an !important declaration always beats a non-important one, even
   at higher specificity — without it the button renders navy-on-navy). */
section:has(> img[src*="Hero.jpg"]) .btn-primary {
  --bs-btn-bg: #fff !important;
  --bs-btn-border-color: #fff !important;
  --bs-btn-hover-bg: #e9eef7 !important;
  --bs-btn-hover-border-color: #e9eef7 !important;
  --bs-btn-active-bg: #e9eef7 !important;
  --bs-btn-active-border-color: #e9eef7 !important;
  color: #172A54 !important;
}
section:has(> img[src*="Hero.jpg"]) .btn-primary:hover,
section:has(> img[src*="Hero.jpg"]) .btn-primary:focus,
section:has(> img[src*="Hero.jpg"]) .btn-primary:active { color: #172A54 !important; }

/* hero body copy line-height 1.75 -> 1.25 */
section:has(> img[src*="Hero.jpg"]) .prose,
section:has(> img[src*="Hero.jpg"]) .prose p { line-height: 1.25 !important; }


/* ---------------------------------------------------------------------------
   4. Buttons — two styles site-wide, square corners
   Primary       = navy fill, white text   (Log In, Learn How, CTAs)
   Secondary     = navy outline, navy text  (Search, Explore ...)
   Square corners on all; tint/gray buttons fold into the navy primary look.
   --------------------------------------------------------------------------- */
.btn,
.btn-primary,
.btn-secondary,
.btn-outline-primary,
.btn-tint { border-radius: 0 !important; }

/* Primary — navy via the bg vars so the hero override (section 3) can flip it */
.btn-primary {
  --bs-btn-bg: #172A54 !important;
  --bs-btn-border-color: #172A54 !important;
  --bs-btn-hover-bg: #0f1d3d !important;
  --bs-btn-hover-border-color: #0f1d3d !important;
  --bs-btn-active-bg: #0f1d3d !important;
  --bs-btn-active-border-color: #0f1d3d !important;
  --bs-btn-disabled-bg: #172A54 !important;
  --bs-btn-disabled-border-color: #172A54 !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { color: #fff !important; }

/* Light-tint / gray CTA buttons -> navy primary look (direct bg to beat the
   original tint background) */
.btn-tint,
.btn-secondary {
  --bs-btn-bg: #172A54 !important;
  --bs-btn-border-color: #172A54 !important;
  --bs-btn-hover-bg: #0f1d3d !important;
  --bs-btn-hover-border-color: #0f1d3d !important;
  --bs-btn-active-bg: #0f1d3d !important;
  --bs-btn-active-border-color: #0f1d3d !important;
  background: #172A54 !important;
  color: #fff !important;
}
.btn-tint:hover, .btn-tint:focus, .btn-tint:active,
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
  background: #0f1d3d !important;
  color: #fff !important;
}

/* Secondary / outline -> navy border + navy text, navy fill on hover */
.btn-outline-primary {
  --bs-btn-border-color: #172A54 !important;
  --bs-btn-hover-bg: #172A54 !important;
  --bs-btn-hover-border-color: #172A54 !important;
  --bs-btn-active-bg: #172A54 !important;
  --bs-btn-active-border-color: #172A54 !important;
  color: #172A54 !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active { color: #fff !important; }


/* ---------------------------------------------------------------------------
   5. Accent lines  →  solid cyan
   Footer divider (was a cyan→pink gradient) + footer heading underlines and the
   logo divider (were coral).
   --------------------------------------------------------------------------- */
div.bg-gradient-to-r.from-primary {
  background-image: none !important;
  background-color: #00aeef !important;
}
.border-tertiary { border-color: #00aeef !important; }


/* ---------------------------------------------------------------------------
   6. Scroll-to-top button  ·  magenta  →  cyan
   --------------------------------------------------------------------------- */
#back-to-top { background-color: #00aeef !important; }


/* ---------------------------------------------------------------------------
   7. Remove decorative light dots (hero, About section, masthead imagery)
   --------------------------------------------------------------------------- */
:is(div, span)[class*="rounded-full"][class*="absolute"]:empty { display: none !important; }


/* ---------------------------------------------------------------------------
   8. New co-brand logo sizing  (header + footer)
   Header logo -> 250px on desktop (the menu lives in a separate centered bar,
   so its items are nudged right to clear the wider logo; Search/Login buttons
   untouched). Lockup scales down on tablet/mobile. Footer logo -> 8rem tall.
   --------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  #dnn_dnnLogo_imgLogo {
    width: 250px !important;
    min-width: 250px !important;
    max-width: none !important;
    height: auto !important;
  }
  div:has(> #dnn_dnnLogo_hypLogo) { flex: 0 0 auto !important; }
  #primary-navigation { padding-left: 5.5rem !important; }
}
@media (max-width: 1023px) {
  #dnn_dnnLogo_imgLogo {
    width: 200px !important;
    max-width: 50vw !important;
    height: auto !important;
  }
}

footer img.w-20 {
  height: 8rem !important;
  width: auto !important;
}


/* ---------------------------------------------------------------------------
   Note: the floating accessibility launcher ("Change to Cyan") is the AudioEye
   widget. Its color is configured in the AudioEye dashboard (Branding /
   Appearance), not via site CSS, so it is intentionally not set here.
   --------------------------------------------------------------------------- */