/* Hide the Search icon */

a#search {
  display: none !important;
}

/* Hide the divider BEFORE the Search item */

li.divider-vertical:has(+ li > a#search) {
  display: none !important;
}

/* Hide the divider AFTER the Search item */

li:has(> a#search) + li.divider-vertical {
  display: none !important;
}



/*==========================================================
   GLOBAL VARIABLES
  ========================================================= */

:root {
  --apollo-panel-gradient: linear-gradient(
    135deg,
    #371232 0%,
    #2f2945 45%,
    #1e3f52 70%,
    #0b5f66 100%
  );
}
/* ==========================================================
   END OF GLOBAL VARIABLES
  
   ========================================================== */

/* =========================================================
   PRIMARY CTA – View Report
   (Home page)
   ========================================================= */
body[data-sitemap-state*="/"]
  button.button1 {

  background: linear-gradient(135deg, #148a92 0%, #0b5c67 100%) !important;
  color: #ffffff !important;

  font-size: 1.15rem !important;
  font-weight: 600 !important;

  padding: 16px 44px !important;
  border-radius: 16px !important;
  border: none !important;

  box-shadow:
    0 12px 30px rgba(26, 166, 166, 0.35),
    inset 0 1px 0 rgba(255,255,255,0.12) !important;

  transition: all 0.25s ease !important;
}

body[data-sitemap-state*="/"]
  button.button1:hover {

  transform: translateY(-3px);
  box-shadow:
    0 18px 40px rgba(26, 166, 166, 0.45),
    inset 0 1px 0 rgba(255,255,255,0.15) !important;
}

/* ================================
   Mobile hamburger – visible on white
   ================================ */

.custom-navbar-toggler {
  background-color: #00A8B0 !important; /* teal */
  border: 1px solid #008C93 !important;
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: 0 4px 12px rgba(0, 168, 176, 0.35);
}

/* Hamburger icon (Bootstrap uses SVG background) */
.custom-navbar-toggler .navbar-toggler-icon {
  filter: brightness(0) invert(1); /* force white icon */
  width: 1.5em;
  height: 1.5em;
}

/* Hover */
.custom-navbar-toggler:hover {
  background-color: #00939A !important;
  box-shadow: 0 6px 16px rgba(0, 168, 176, 0.45);
}

/* Focus / active */
.custom-navbar-toggler:focus,
.custom-navbar-toggler:active {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 168, 176, 0.4);
}



/* =========================================================
   PRIMARY Call To Action Buttons – Apollo Underwriting External
   (Sign-in & Register pages)
   ========================================================= */
/* =========================================================
   PRIMARY CTA – Apollo Underwriting External (Sign-in/Register)
   Targets the external provider <button name="provider" ...>
   ========================================================= */

button[name="provider"][type="submit"][value*="external.apollounderwriting.com"] {
  background: linear-gradient(135deg, #148a92 0%, #0b5c67 100%) !important;
  color: #ffffff !important;

  font-size: 1.1rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;

  padding: 16px 40px !important;
  min-height: 52px !important;

  border-radius: 10px !important;
  border: none !important;

  box-shadow:
    0 10px 26px rgba(26, 166, 166, 0.30),
    inset 0 1px 0 rgba(255,255,255,0.12) !important;

  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease !important;
}

/* Hover/Focus polish */
button[name="provider"][type="submit"][value*="external.apollounderwriting.com"]:hover,
button[name="provider"][type="submit"][value*="external.apollounderwriting.com"]:focus {
  transform: translateY(-2px) !important;
  filter: brightness(1.05) !important;
  box-shadow:
    0 14px 34px rgba(26, 166, 166, 0.38),
    inset 0 1px 0 rgba(255,255,255,0.15) !important;
}

/* Remove Bootstrap focus ring (optional; keep if you prefer) */
button[name="provider"][type="submit"][value*="external.apollounderwriting.com"]:focus-visible {
  outline: 3px solid rgba(0, 168, 176, 0.55) !important;
  outline-offset: 3px !important;
}

/* =========================================================
   AUTH PAGES — hide ONLY the top-right nav "Sign in" (real /SignIn link)
   Keep the tab-style Sign in link (href="javascript:void(0)")
   ========================================================= */

body[data-sitemap-state*="/access-denied/"] .navbar-nav.weblinks a.nav-link[href^="/SignIn"],
body[data-sitemap-state*="/page-not-found/:/"] .navbar-nav.weblinks a.nav-link[href^="/SignIn"] {
  display: none !important;
}

/* =========================================================
   REGISTER – remove the empty left column so heading/line/button align left
   ========================================================= */

body[data-sitemap-state*="/page-not-found/:/"]
#ContentContainer_MainContent_MainContent_SecureRegister > .row > .col-lg-6:first-child {
  display: none !important;   /* kill the empty left half */
}

body[data-sitemap-state*="/page-not-found/:/"]
#ContentContainer_MainContent_MainContent_SecureRegister > .row > .col-lg-6:last-child {
  flex: 0 0 100% !important;  /* make the content half full width */
  max-width: 100% !important;
}

/* Optional: ensure the heading/line are left-aligned inside that column */
body[data-sitemap-state*="/page-not-found/:/"]
#ContentContainer_MainContent_MainContent_SecureRegister .login-heading-section {
  text-align: left !important;
}

/*========== Line at 50% */
/* =========================================================
   REGISTER – keep the heading divider line only as wide as the original left column
   (simulate the old .col-lg-6 width)
   ========================================================= */

body[data-sitemap-state*="/page-not-found/:/"]
#ContentContainer_MainContent_MainContent_SecureRegister .login-heading-section {
  max-width: 50% !important;     /* same width as a col-lg-6 */
  width: 50% !important;
  margin-left: 0 !important;
  margin-right: auto !important; /* keep it on the left */
}

/* If the line is an <hr> inside the heading section */
body[data-sitemap-state*="/page-not-found/:/"]
#ContentContainer_MainContent_MainContent_SecureRegister .login-heading-section hr {
  width: 100% !important;
}

/* If the line is created via border-bottom on the heading section */
body[data-sitemap-state*="/page-not-found/:/"]
#ContentContainer_MainContent_MainContent_SecureRegister .login-heading-section {
  border-bottom-color: rgba(255, 255, 255, 0.6) !important; /* optional, keeps it consistent */
}

/* If the line is created via a pseudo-element */
body[data-sitemap-state*="/page-not-found/:/"]
#ContentContainer_MainContent_MainContent_SecureRegister .login-heading-section::after {
  width: 100% !important;
}



/* ===============================
   HIDE LEFT PANELS ON PROFILE PAGE 
   (Profile and Security/external authentication)
   =============================== */

body[data-sitemap-state*="/profile"]
.weblinks-depth-1.weblinks.list-group {
  display: none !important;
}

body[data-sitemap-state*="/profile"]
.card.nav-profile {
  display: none !important;
}

/* =========================================================
   PROFILE: Stack avatar column + form column vertically
   (Targets ONLY the row that contains #ProfileFormView)
   ========================================================= */
body[data-sitemap-state*="/profile"] .row:has(#ProfileFormView) {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 24px !important;
}

/* Make both columns full-width once stacked */
body[data-sitemap-state*="/profile"] .row:has(#ProfileFormView) > [class*="col-"] {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

/* (Optional) keep the left column panels aligned nicely */
body[data-sitemap-state*="/profile"] .row:has(#ProfileFormView) > [class*="col-"]:first-child {
  margin-bottom: 0 !important;
}


/* =========================================================
   PRIMARY Call To Action – Update button
   (Profile pages)
   ========================================================= */
body[data-sitemap-state*="/profile/:/"]
  input[type="button"][value="Update"],
body[data-sitemap-state*="/profile/:/"]
  input[type="submit"][value="Update"] {

  background: linear-gradient(135deg, #148a92 0%, #0b5c67 100%) !important;
  color: #ffffff !important;

  font-size: 1.1rem !important;
  font-weight: 600 !important;

  padding: 16px 36px !important;
  border-radius: 10px !important;
  border: none !important;

  box-shadow:
    0 10px 24px rgba(26, 166, 166, 0.28),
    inset 0 1px 0 rgba(255,255,255,0.12) !important;

  transition: all 0.25s ease !important;
}

body[data-sitemap-state*="/profile"]
  input[type="button"][value="Update"]:hover,
body[data-sitemap-state*="/profile"]
  input[type="submit"][value="Update"]:hover {

  transform: translateY(-2px);
  box-shadow:
    0 14px 32px rgba(26, 166, 166, 0.36),
    inset 0 1px 0 rgba(255,255,255,0.15) !important;
}


/* =========================================================
   PROFILE — Update button inside the main form panel (.tab.clearfix)
   (after JS moves .actions into it)
   ========================================================= */

/* PROFILE — make the outer gradient panel the positioning anchor */
body[data-sitemap-state*="/profile"]
#ProfileFormView fieldset[aria-label="Name"]{
  position: relative !important;     /* anchor for absolute positioning */
  padding-bottom: 140px !important;  /* space inside panel for button */
}

/* The actions wrapper now inside the panel */
body[data-sitemap-state*="/profile"]
#ProfileFormView fieldset[aria-label="Name"] .actions{
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: 50px !important;           /* increase to move UP (try 50–110px) */

  width: max-content !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  z-index: 10 !important;
}

/* =========================================================
   PROFILE — remove inner panel divider line above Update button
   ========================================================= */

body[data-sitemap-state*="/profile"]
#ProfileFormView table.section tr:last-child td::after,
body[data-sitemap-state*="/profile"]
#ProfileFormView table.section tr:last-child::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
}

/* =========================================================
   PROFILE — Update button (when moved into the table row)
   Reset old positioning rules + display correctly
   ========================================================= */

body[data-sitemap-state*="/profile"]
#ProfileFormView tr.profile-update-row .actions{
  /* undo older absolute/flex tricks */
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;
  transform: none !important;

  /* make it render like a proper row */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  width: 100% !important;
  margin: 18px 0 0 !important;   /* pushes it up/down within the table */
  padding: 0 !important;

  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* kill the divider line your theme adds */
body[data-sitemap-state*="/profile"]
#ProfileFormView tr.profile-update-row .actions::before,
body[data-sitemap-state*="/profile"]
#ProfileFormView tr.profile-update-row .actions::after{
  content: none !important;
  display: none !important;
}

/* give the <TD> some breathing room so it doesn't look "stuck" */
body[data-sitemap-state*="/profile"]
#ProfileFormView td.profile-update-cell{
  padding-top: 10px !important;
  padding-bottom: 0 !important;
}


/* PROFILE — limit overall content width */
/* PROFILE — shrink only Form panel */
@media (min-width: 992px){
  body[data-sitemap-state*="/profile"] .row[role="main"] > .col-lg-4{
    flex: 0 0 25% !important;
    max-width: 25% !important;
  }

  body[data-sitemap-state*="/profile"] .row[role="main"] > #mainContent.col-lg-8{
    flex: 0 0 70% !important;
    max-width: 70% !important;
  }
}
/* PROFILE — shrink only Avatar panel */
@media (min-width: 992px){
  /* Left column (avatar) */
  body[data-sitemap-state*="/profile"] .row[role="main"] > .col-lg-4{
    flex: 0 0 25% !important;
    max-width: 25% !important;
  }

  /* Right column (form) */
  
  body[data-sitemap-state*="/profile"] .row[role="main"] > #mainContent.col-lg-8{
    flex: 0 0 75% !important;
    max-width: 75% !important;
  }
  
  /* ✅ Force avatar "card" to respect the new column width and not look oversized */
  body[data-sitemap-state*="/profile"] .row[role="main"] > .col-lg-4 .card.profile-info{
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* AFTER SHRINKING FORM ---- WE REALIGN BUTTON TO FIT WIDTH OF FIELDS*/
/* PROFILE — center Update button relative to the fields table width */
body[data-sitemap-state*="/profile"]
#ProfileFormView fieldset[aria-label="Name"] table.section{
  width: 100% !important;
}

/* Make the injected actions row align to the same table width */
body[data-sitemap-state*="/profile"]
#ProfileFormView tr.profile-update-row > td.profile-update-cell{
  padding-top: 20px !important;
  text-align: center !important;
}

/* Center the button inside that cell */
body[data-sitemap-state*="/profile"]
#ProfileFormView tr.profile-update-row .actions{
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

body[data-sitemap-state*="/profile"]
#ProfileFormView tr.profile-update-row > td.profile-update-cell{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* =========================================================
   PROFILE — Restore a true 2-column layout on desktop
   (overrides earlier “full width / stacked” custom rules)
   ========================================================= */

@media (min-width: 992px){
  body[data-sitemap-state*="/profile"] .row[role="main"]{
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 24px !important;
  }

  /* Avatar column */
  body[data-sitemap-state*="/profile"] .row[role="main"] > .col-lg-4{
    flex: 0 0 35% !important;     /* change 35% → 30% if you want slimmer */
    max-width: 35% !important;
  }

  /* Form column */
  body[data-sitemap-state*="/profile"] .row[role="main"] > #mainContent{
    flex: 0 0 65% !important;
    max-width: 65% !important;
  }

  /* Ensure avatar card doesn’t “overflow” its column */
  body[data-sitemap-state*="/profile"] .row[role="main"] > .col-lg-4 .card.profile-info{
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* =========================================================
   PRIMARY CTA (shared across site) on both Reporting Pages
   ========================================================= */

.cta-primary {
  background: linear-gradient(135deg, #371232 0%, #1f6f78 100%) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 1rem;
  padding: 12px 28px !important;
  border-radius: 10px !important;
  border: none !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  transition: all 0.25s ease;
}

.cta-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  color: #ffffff !important;
}

body[data-sitemap-state^="/Reporting"]
.cta-exit-wrapper {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
}

/* Optional secondary variant (same style, slightly softer) */
.cta-secondary {
  background: linear-gradient(135deg, #2b0f26 0%, #14545b 100%) !important;
}


/* Sign-in: scope using the access-denied sitemap state (works for you) */
body[data-sitemap-state*="/access-denied/"] a#search,
body[data-sitemap-state*="/access-denied/"] li.divider-vertical:has(+ li > a#search),
body[data-sitemap-state*="/access-denied/"] li:has(> a#search) + li.divider-vertical {
  display: none !important;
}

/* Auth screens only (the ones that show the Sign in / Register tabs) */
body:has(ul.nav.nav-tabs.nav-account) a#search,
body:has(ul.nav.nav-tabs.nav-account) li.divider-vertical:has(+ li > a#search),
body:has(ul.nav.nav-tabs.nav-account) li:has(> a#search) + li.divider-vertical {
  display: none !important;
}

/* Auth tabs container */
body:has(ul.nav.nav-tabs.nav-account) ul.nav.nav-tabs.nav-account {
  border-bottom: 0;
  gap: 0.5rem;
}


/*MAKING BOTH THE SIGN IN AND REGISTER TABS VISIBLE AND CONSISTENT WITH Apollo Brand Colours*/
/* Scope ONLY to auth pages */
/* Auth tabs container */
/* ================================
   AUTH TABS (SIGN IN / REGISTER)
   Active: fill #371232, border #00A8B0, white text
   Inactive: subtle, no border
   Tabbed look: connected pills
   ================================ */

/* Tabs container: make them connected */
body:has(ul.nav.nav-tabs.nav-account)
ul.nav.nav-tabs.nav-account {
  border-bottom: 0;
  gap: 0;                 /* connect tabs */
  margin: 0;
  padding: 0;
}

/* Base tab (inactive) */
body:has(ul.nav.nav-tabs.nav-account)
ul.nav.nav-tabs.nav-account .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;

  padding: 0.7rem 1.15rem;

  background: rgba(0, 0, 0, 0.28);
  color: #ffffff;

  border: 0;              /* inactive has no border */
  font-weight: 600;
  text-decoration: none;

  /* “tab” shape */
  border-radius: 0;       /* will be set per first/last below */

  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Make the group look like a segmented control */
body:has(ul.nav.nav-tabs.nav-account)
ul.nav.nav-tabs.nav-account .nav-item:first-child .nav-link {
  border-top-left-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem;
}
body:has(ul.nav.nav-tabs.nav-account)
ul.nav.nav-tabs.nav-account .nav-item:last-child .nav-link {
  border-top-right-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
}

/* Divider between tabs (subtle) */
body:has(ul.nav.nav-tabs.nav-account)
ul.nav.nav-tabs.nav-account .nav-item + .nav-item .nav-link {
  box-shadow: inset 1px 0 0 rgba(255,255,255,0.18);
}

/* Hover (inactive) */
body:has(ul.nav.nav-tabs.nav-account)
ul.nav.nav-tabs.nav-account .nav-link:hover {
  background: rgba(0, 168, 176, 0.18);
}

/* Active tab: your requested styling */
body:has(ul.nav.nav-tabs.nav-account)
ul.nav.nav-tabs.nav-account .nav-link.active {
  background: #371232;          /* primary dark */
  color: #ffffff;
  border: 2px solid #00A8B0;    /* primary accent outline */
  z-index: 1;                   /* sit above the divider line */
}

/* Remove the inner divider line where the active tab meets neighbor */
body:has(ul.nav.nav-tabs.nav-account)
ul.nav.nav-tabs.nav-account .nav-item + .nav-item .nav-link.active {
  box-shadow: none;
}

/* Keyboard focus (accessibility): ONLY when tabbing */
body:has(ul.nav.nav-tabs.nav-account)
ul.nav.nav-tabs.nav-account .nav-link:focus-visible {
  outline: 3px solid #E6007E;   /* secondary yellow */
  outline-offset: 2px;
}

/* Icons inherit text color */
body:has(ul.nav.nav-tabs.nav-account)
ul.nav.nav-tabs.nav-account .nav-link span[class^="fa"] {
  color: currentColor;
}

/* ================================
   AUTH PAGE VERTICAL SPACING
   ================================ */

body:has(ul.nav.nav-tabs.nav-account)
#content-container {
  padding-top: 2.5rem;   /* adjust: 2.5rem–4rem if needed */
}


/* ================================
   AUTH PAGE BACKGROUND (SIGN IN + REGISTER)
   Uses existing starry brand image
   ================================ */

body:has(ul.nav.nav-tabs.nav-account) {
  background-image: url("/thumbnailApollo%20300724-17.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #000000; /* fallback */
}

/* ================================
   PROFILE PAGE BACKGROUND
   ================================ */

body[data-sitemap-state*="/profile/:/"] {
  background-image: url("/thumbnailApollo%20300724-17.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #000000; /* fallback */
}

/* ================================
   HIDE SEARCH ON PROFILE PAGE
   ================================ */

body[data-sitemap-state*="/profile/:/"] a#search,
body[data-sitemap-state*="/profile/:/"] li.divider-vertical:has(+ li > a#search),
body[data-sitemap-state*="/profile/:/"] li:has(> a#search) + li.divider-vertical {
  display: none !important;
}

/* ================================
   PROFILE PAGE: CONTENT BACKDROP
   Primary gradient "panel" over starry background
   ================================ */

body[data-sitemap-state*="/profile/:/"] #content-container {
  padding-top: 3rem;               /* keep your top spacing */
  padding-bottom: 4rem;            /* space above footer */

  background: linear-gradient(
    135deg,
    rgba(55, 18, 50, 0.88),         /* #371232 */
    rgba(0, 168, 176, 0.55)         /* #00A8B0 */
  );

  border-radius: 1rem;
}

/* ==========================================
   PROFILE PAGE — FORM UI (CLEAN CONSOLIDATED)
   Scope: only /profile/:/ page
   ========================================== */

/* 1) Make all common profile form wrappers transparent (kills old purple) */
body[data-sitemap-state*="/profile/:/"] .tab,
body[data-sitemap-state*="/profile/:/"] .tab-column,
body[data-sitemap-state*="/profile/:/"] .tab.clearfix,
body[data-sitemap-state*="/profile/:/"] .tab-content,
body[data-sitemap-state*="/profile/:/"] fieldset,
body[data-sitemap-state*="/profile/:/"] table.section,
body[data-sitemap-state*="/profile/:/"] table.section td,
body[data-sitemap-state*="/profile/:/"] table.section th,
body[data-sitemap-state*="/profile/:/"] td.form-control-cell,
body[data-sitemap-state*="/profile/:/"] .table-info {
  background: transparent !important;
}

/* 2) The “card” that holds BOTH the table and the actions row */
body[data-sitemap-state*="/profile/:/"] fieldset[aria-label="Name"],
body[data-sitemap-state*="/profile/:/"] .tab.clearfix {
  background:
    radial-gradient(
      120% 140% at 85% 35%,
      rgba(0, 168, 176, 0.55) 0%,
      rgba(0, 168, 176, 0.20) 35%,
      rgba(0, 168, 176, 0.00) 70%
    ),
    linear-gradient(
      135deg,
      rgba(55, 18, 50, 0.92) 0%,
      rgba(55, 18, 50, 0.78) 45%,
      rgba(0, 0, 0, 0.15) 100%
    ) !important;

  border-radius: 1rem !important;
  padding: 1.75rem !important;

  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.55),
    0 2px 0 rgba(255, 255, 255, 0.06) inset !important;

  overflow: hidden; /* clips any inner backgrounds */
}

/* ==========================================
   PROFILE: FADE OUT BACKGROUND BEHIND CARD
   ========================================== */

/* ==========================================
   PROFILE: REMOVE OUTER PURPLE BACKDROP
   Wrapper around the whole "Your information" section
   ========================================== */

  body[data-sitemap-state*="/profile/:/"] #ProfileFormView,
  body[data-sitemap-state*="/profile/:/"] #ProfileFormView.entity-form,
  body[data-sitemap-state*="/profile/:/"] #ProfileFormView.crmEntityFormView {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body[data-sitemap-state*="/profile/:/"] fieldset:has(> #ProfileFormView) {
  background: transparent !important;
  border: 0 !important;
}
/* ==========================================
   PROFILE: MOVE UPDATE BUTTON CLOSER TO CARD
   ========================================== */

body[data-sitemap-state*="/profile/:/"] .actions {
  margin-top: -2.0rem;     /* pulls button upward */
  padding-left: 1.75rem;   /* align with card padding */
  text-align: center;    /* center the button */
}



/* 3) Form table layout breathing room */
body[data-sitemap-state*="/profile/:/"] table.section {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 1.15rem;
}

/* 4) Labels: clean white (no purple chips) */
body[data-sitemap-state*="/profile/:/"] label.field-label {
  background: transparent !important;
  color: #ffffff !important;
  padding: 0 !important;
  margin: 0 0 0.4rem 0 !important;
  display: inline-block;
  font-weight: 700;
}

/* 5) Inputs: dark glass look, white text */
body[data-sitemap-state*="/profile/:/"] input.text.form-control,
body[data-sitemap-state*="/profile/:/"] input.form-control,
body[data-sitemap-state*="/profile/:/"] select.form-control,
body[data-sitemap-state*="/profile/:/"] textarea.form-control {
  background: rgba(0, 0, 0, 0.28) !important;
  color: #ffffff !important;

  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 0.6rem !important;

  padding: 0.75rem 0.9rem !important;
}

/* Placeholder */
body[data-sitemap-state*="/profile/:/"] input.form-control::placeholder,
body[data-sitemap-state*="/profile/:/"] textarea.form-control::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Focus: teal ring (accessible) */
body[data-sitemap-state*="/profile/:/"] input.form-control:focus,
body[data-sitemap-state*="/profile/:/"] select.form-control:focus,
body[data-sitemap-state*="/profile/:/"] textarea.form-control:focus {
  outline: 3px solid rgba(0, 168, 176, 0.85) !important;
  outline-offset: 2px;
  border-color: rgba(0, 168, 176, 0.95) !important;
}

/* 6) Required indicators */
/*
body[data-sitemap-state*="/profile/:/"] .table-info.required {
  color: #ffffff !important;
}
*/
/* ==========================================
   PROFILE: REQUIRED ASTERISK (override portal default)
   ========================================== */

body[data-sitemap-state*="/profile/:/"] label.field-label::after {
  color: #F6CA21 !important;   /* or #ffffff if you prefer */
}

/*body[data-sitemap-state*="/profile/:/"] .table-info.required .required {
  color: #F6CA21 !important;
}
*/

/* 7) Actions row (Update button area) */
body[data-sitemap-state*="/profile/:/"] .actions {
  background: transparent !important;
  padding-top: 1.25rem;
}

/* 8) Update button: teal with WHITE text */
body[data-sitemap-state*="/profile/:/"] .actions .btn.btn-primary,
body[data-sitemap-state*="/profile/:/"] .actions input.btn.btn-primary {
  background: #00A8B0 !important;
  border: 2px solid #00A8B0 !important;
  color: #ffffff !important;      /* <-- requested */
  border-radius: 0.75rem !important;

  padding: 0.75rem 1.4rem !important;
  font-weight: 800 !important;
}

/* Hover + focus for button */
body[data-sitemap-state*="/profile/:/"] .actions .btn.btn-primary:hover,
body[data-sitemap-state*="/profile/:/"] .actions input.btn.btn-primary:hover {
  filter: brightness(1.05);
}

body[data-sitemap-state*="/profile/:/"] .actions .btn.btn-primary:focus-visible,
body[data-sitemap-state*="/profile/:/"] .actions input.btn.btn-primary:focus-visible {
  outline: 3px solid #F6CA21;
  outline-offset: 3px;
}


/* STYLES TO MAKE COPYRIGHT BANNER STICK TO THE BOTTOM OF PAGE */
/* Make page stretch to full height so footer can sit at bottom */
body[data-sitemap-state*="/profile/:/"] {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Let main content take remaining space */
body[data-sitemap-state*="/profile/:/"] #content-container {
  flex: 1;
}

/* Footer styling */
body[data-sitemap-state*="/profile/:/"] footer {
  margin-top: auto;         /* pushes footer down */
  background: #371232;      /* your purple */
  color: #ffffff;
}


/* =========================================================
   PROFILE PAGE — LEFT SIDE PANELS (CLEAN REBUILD)
   ========================================================= */

body[data-sitemap-state*="/profile/:/"] .col-lg-4 {

  /* Space away from the main form */
  padding-right: 1.5rem;
}

/* ---------------------------------------------------------
   SHARED CARD BASE (applies to all left panels)
   --------------------------------------------------------- */

body[data-sitemap-state*="/profile/:/"] 
.profile-info,
body[data-sitemap-state*="/profile/:/"] 
.weblinks-depth-1,
body[data-sitemap-state*="/profile/:/"] 
.card.nav-profile {

  border-radius: 1rem;
  margin-bottom: 1.25rem;
  border: 0;
  overflow: hidden;

  background:
    radial-gradient(
      120% 140% at 85% 30%,
      rgba(0, 168, 176, 0.45) 0%,
      rgba(0, 168, 176, 0.15) 40%,
      rgba(0, 168, 176, 0.00) 70%
    ),
    linear-gradient(
      135deg,
      rgba(55, 18, 50, 0.85),
      rgba(0, 0, 0, 0.15)
    ) !important;

  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.05) inset;
}

/* ---------------------------------------------------------
   AVATAR + NAME PANEL
   --------------------------------------------------------- */

body[data-sitemap-state*="/profile/:/"] 
.profile-info .card-body {

  display: flex;
  align-items: center;
  gap: 0.9rem;

  background: transparent !important;
  padding: 1rem 1.1rem;
}

/* Avatar image */
body[data-sitemap-state*="/profile/:/"] 
.profile-info img {

  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.08);
}

/* User name */
body[data-sitemap-state*="/profile/:/"] 
.profile-info .userFullName {

  color: #ffffff;
  font-weight: 600;
  font-size: 1rem;
}

/* ---------------------------------------------------------
   PROFILE LINK PANEL
   --------------------------------------------------------- */

body[data-sitemap-state*="/profile/:/"] 
.weblinks-depth-1 {

  padding: 0.9rem 1rem;
}

body[data-sitemap-state*="/profile/:/"] 
.weblinks-depth-1 a {

  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
}

body[data-sitemap-state*="/profile/:/"] 
.weblinks-depth-1 a:hover {

  text-decoration: underline;
}

/* ---------------------------------------------------------
   SECURITY + EXTERNAL AUTH PANEL
   --------------------------------------------------------- */

body[data-sitemap-state*="/profile/:/"] 
.card.nav-profile {

  padding: 0.9rem 1rem;
}

/* Individual rows */
body[data-sitemap-state*="/profile/:/"] 
.card.nav-profile .list-group-item {

  background: transparent !important;
  color: #ffffff;
  border: 0;
  padding: 0.8rem 0;
  font-weight: 600;
}

/* Lock icon alignment */
body[data-sitemap-state*="/profile/:/"] 
.card.nav-profile .list-group-item i {

  margin-right: 0.4rem;
}

/* Links inside security panel */
body[data-sitemap-state*="/profile/:/"] 
.card.nav-profile a {

  color: #ffffff;
  text-decoration: none;
}

body[data-sitemap-state*="/profile/:/"] 
.card.nav-profile a:hover {

  text-decoration: underline;
}


/* Profile page – breadcrumb visibility on dark hero ==> make them WHITE */
body[data-sitemap-state*="/profile/:/"] 
.breadcrumb,
body[data-sitemap-state*="/profile/:/"] 
.breadcrumb a,
body[data-sitemap-state*="/profile/:/"] 
.breadcrumb-item,
body[data-sitemap-state*="/profile/:/"] 
.breadcrumb-item.active {
  color: #ffffff !important;
}

/* Optional: improve contrast on hover */
body[data-sitemap-state*="/profile/:/"] 
.breadcrumb a:hover {
  color: #9fe7e5 !important;
  text-decoration: underline;
}


/* =========================================================
   PROFILE LEFT PANELS — FIX BOOTSTRAP OVERRIDES
   ========================================================= */

/* 1) AVATAR PANEL: stop flex from shrinking the image */
body[data-sitemap-state*="/profile/:/"] .profile-info .card-body {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* The image has Bootstrap col-3; override width so it stays readable */
body[data-sitemap-state*="/profile/:/"] .profile-info img {
  width: 64px !important;
  height: 64px !important;
  object-fit: cover;
  flex: 0 0 auto;              /* prevents shrinking */
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.08);
}

/* Name area should take remaining space */
body[data-sitemap-state*="/profile/:/"] .profile-info .userFullName {
  flex: 1 1 auto;
  color: #ffffff;
  font-weight: 700;
  font-size: 1.05rem;
}

/* 2) PROFILE + SECURITY: list-group items must not paint solid purple/white */
body[data-sitemap-state*="/profile/:/"] .weblinks-depth-1 .list-group-item,
body[data-sitemap-state*="/profile/:/"] .card.nav-profile .list-group-item {
  background: transparent !important;
  color: #ffffff !important;
  border: 0 !important;
}

/* Remove Bootstrap hover/active "white" highlight */
body[data-sitemap-state*="/profile/:/"] .weblinks-depth-1 .list-group-item:hover,
body[data-sitemap-state*="/profile/:/"] .weblinks-depth-1 .list-group-item:focus,
body[data-sitemap-state*="/profile/:/"] .weblinks-depth-1 .list-group-item:focus-visible,
body[data-sitemap-state*="/profile/:/"] .card.nav-profile .list-group-item:hover,
body[data-sitemap-state*="/profile/:/"] .card.nav-profile .list-group-item:focus,
body[data-sitemap-state*="/profile/:/"] .card.nav-profile .list-group-item:focus-visible {
  background: rgba(0, 168, 176, 0.18) !important; /* teal hover */
  color: #ffffff !important;
  outline: none;
}

/* Active/current item (if Bootstrap applies .active) */
body[data-sitemap-state*="/profile/:/"] .weblinks-depth-1 .list-group-item.active,
body[data-sitemap-state*="/profile/:/"] .card.nav-profile .list-group-item.active {
  background: rgba(0, 168, 176, 0.28) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}

/* 3) Links inside list-group items */
body[data-sitemap-state*="/profile/:/"] .weblinks-depth-1 a,
body[data-sitemap-state*="/profile/:/"] .card.nav-profile a {
  color: inherit !important;
  text-decoration: none !important;
}

body[data-sitemap-state*="/profile/:/"] .weblinks-depth-1 a:hover,
body[data-sitemap-state*="/profile/:/"] .card.nav-profile a:hover {
  text-decoration: underline !important;
}

/* =========================================================
   PROFILE LEFT PANELS — FINAL FIXES
   (1) Kill purple header block in Security panel
   (2) Force avatar + name side-by-side and enlarge avatar
   ========================================================= */

/* ---------- (1) SECURITY PANEL: remove inner purple block ---------- */

/* Neutralize any inner card layers that might be painting purple */
body[data-sitemap-state*="/profile/:/"] .card.nav-profile .card-header,
body[data-sitemap-state*="/profile/:/"] .card.nav-profile .card-body,
body[data-sitemap-state*="/profile/:/"] .card.nav-profile .card-footer,
body[data-sitemap-state*="/profile/:/"] .card.nav-profile .list-group,
body[data-sitemap-state*="/profile/:/"] .card.nav-profile .list-group-item {
  background: transparent !important;
}

/* If Security uses a heading element that is styled as a block */
body[data-sitemap-state*="/profile/:/"] .card.nav-profile h1,
body[data-sitemap-state*="/profile/:/"] .card.nav-profile h2,
body[data-sitemap-state*="/profile/:/"] .card.nav-profile h3,
body[data-sitemap-state*="/profile/:/"] .card.nav-profile h4,
body[data-sitemap-state*="/profile/:/"] .card.nav-profile .title {
  background: transparent !important;
}

/* ---------- (2) AVATAR PANEL: enforce side-by-side layout ---------- */

body[data-sitemap-state*="/profile/:/"] .profile-info .card-body {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 1rem !important;
}

/* Neutralize Bootstrap columns inside the avatar card */
body[data-sitemap-state*="/profile/:/"] .profile-info .card-body .col-3,
body[data-sitemap-state*="/profile/:/"] .profile-info .card-body .col-9 {
  flex: unset !important;
  width: auto !important;
  max-width: none !important;
}

/* Bigger avatar */
body[data-sitemap-state*="/profile/:/"] .profile-info img {
  width: 84px !important;
  height: 84px !important;
  flex: 0 0 84px !important;
  object-fit: cover !important;
  border-radius: 0.85rem !important;
}

/* Name sits next to avatar */
body[data-sitemap-state*="/profile/:/"] .profile-info .userFullName {
  display: inline-block !important;
  margin: 0 !important;
  flex: 1 1 auto !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
}


/* PROFILE — Reduce the H2 font size
===============================================================*/
/*
  body[data-sitemap-state*="/profile"]
  h2.profile-page-heading{
  display: flex !important;
  align-items: baseline !important;
  gap: 12px !important;
  margin: 0 !important;
}
*/

body[data-sitemap-state*="/profile"]
h2.profile-page-heading .profile-inline-instruction{
  font-weight: 700 !important;
  font-size: 0.6em !important;     
  opacity: 0.95;
  white-space: nowrap;             
}

body[data-sitemap-state*="/profile"]
h2.profile-page-heading .xrm-attribute-value{
  font-weight: 700 !important;
  font-size: 0.6em !important;     
  opacity: 0.95;
  white-space: nowrap;             
}

/* Mobile: allow wrapping */
@media (max-width: 768px){
  body[data-sitemap-state*="/profile"]
  h2.profile-page-heading{
    flex-wrap: wrap !important;
  }

  body[data-sitemap-state*="/profile"]
  h2.profile-page-heading .profile-inline-instruction{
    white-space: normal !important;
  }
}


/* =========================================================
   FINAL SECURITY HEADER FIX
   ========================================================= */

body[data-sitemap-state*="/profile/:/"] .card.nav-profile .class-header {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Ensure text stays readable */
body[data-sitemap-state*="/profile/:/"] .card.nav-profile .class-header,
body[data-sitemap-state*="/profile/:/"] .card.nav-profile .class-header * {
  color: #ffffff !important;
}



/*==========================================================
   Latest Fix == the text color for Security HEADER (icon + text) ==> to white
   ========================================================= */
/* PROFILE page – Security header (icon + text) */
body[data-sitemap-state*="/profile/:/"] .card-title,
body[data-sitemap-state*="/profile/:/"] .card-title * {
  color: #ffffff !important;
}

/* Force Font Awesome icon (lock) */
body[data-sitemap-state*="/profile/:/"] .card-title .fa-lock {
  color: #ffffff !important;
}

/* Force the XRM encoded value span specifically */
body[data-sitemap-state*="/profile/:/"] .card-title .xrm-attribute-value-encoded {
  color: #ffffff !important;
}

/* =========================================================
   MANAGE EXTERNAL AUTHENTICATION – PAGE SCOPE
   Scoped via H1 id="header-page-title"
   ========================================================= */

/* ---------- PAGE BACKGROUND ---------- */
body:has(h1#header-page-title) {
  background-image: url(/thumbnailApollo\ 300724-17.jpg) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

/* ---------- HIDE SEARCH ICON ---------- */
body:has(h1#header-page-title) .navbar .navbar-icon,
body:has(h1#header-page-title) .navbar a#search,
body:has(h1#header-page-title) .navbar a#search *,
body:has(h1#header-page-title) .navbar .divider-vertical {
  display: none !important;
}

/* ---------- PUSH FOOTER TO BOTTOM ---------- */
body:has(h1#header-page-title) {
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
}

body:has(h1#header-page-title) main,
body:has(h1#header-page-title) .container[role="main"],
body:has(h1#header-page-title) #content {
  flex: 1 0 auto !important;
}

body:has(h1#header-page-title) footer {
  margin-top: auto !important;
  background: rgba(55, 18, 50, 0.9) !important;
}

/* ---------- BREADCRUMBS ---------- */
body:has(h1#header-page-title) .breadcrumb,
body:has(h1#header-page-title) .breadcrumb * {
  color: #ffffff !important;
}

body:has(h1#header-page-title) .breadcrumb a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

body:has(h1#header-page-title) .breadcrumb a:hover {
  color: #00A8B0 !important;
}

/* =========================================================
   LEFT PANEL – SAME STYLE AS PROFILE PAGE
   ========================================================= */

/* Outer left column cards */
body:has(h1#header-page-title) .col-lg-4 > div {
  border-radius: 1.25rem;
  margin-bottom: 1.25rem;
  border: 0;
  overflow: hidden;

  background:
    radial-gradient(
      120% 140% at 85% 30%,
      rgba(0, 168, 176, 0.45) 0%,
      rgba(0, 168, 176, 0.15) 40%,
      rgba(0, 168, 176, 0) 70%
    ),
    linear-gradient(
      135deg,
      rgba(55, 18, 50, 0.85),
      rgba(0, 0, 0, 0.15)
    ) !important;

  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

/* ---------- AVATAR PANEL ---------- */
body:has(h1#header-page-title) .profile-info .card-body {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
}

body:has(h1#header-page-title) .profile-info img {
  width: 88px !important;
  height: 88px !important;
  flex: 0 0 88px !important;
  border-radius: 1rem !important;
  object-fit: cover !important;
}

body:has(h1#header-page-title) .profile-info .userFullName {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

/* ---------- PROFILE / SECURITY LIST ITEMS ---------- */
body:has(h1#header-page-title) .weblinks-depth-1 .list-group-item,
body:has(h1#header-page-title) .card.nav-profile .list-group-item {
  background: transparent !important;
  border: 0 !important;
  color: #ffffff !important;
}

/* Hover / active */
body:has(h1#header-page-title) .weblinks-depth-1 .list-group-item:hover,
body:has(h1#header-page-title) .card.nav-profile .list-group-item:hover {
  background: rgba(0, 168, 176, 0.18) !important;
}

/* ---------- SECURITY HEADER FIX ---------- */
body:has(h1#header-page-title) .card.nav-profile .class-header {
  background: transparent !important;
  box-shadow: none !important;
}

/* Keep icon + text readable */
body:has(h1#header-page-title) .card.nav-profile .class-header,
body:has(h1#header-page-title) .card.nav-profile .class-header * {
  color: #ffffff !important;
}

/* =========================================================
   MANAGE EXTERNAL AUTH – FIXES (Avatar, Security, Provider Bar)
   Scope: page has h1#header-page-title - Manage External Authentication page
   ========================================================= */

/* 1) AVATAR PANEL – keep name next to avatar + make avatar larger */
body:has(h1#header-page-title) .profile-info .card-body {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  flex-wrap: nowrap !important;
}

body:has(h1#header-page-title) .profile-info img {
  width: 96px !important;
  height: 96px !important;
  flex: 0 0 96px !important;
  object-fit: cover !important;
  border-radius: 1rem !important;
}

body:has(h1#header-page-title) .profile-info .userFullName {
  display: inline-block !important;
  margin: 0 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
}

/* 2) SECURITY PANEL – remove the solid purple header block */
body:has(h1#header-page-title) .card.nav-profile .class-header {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

body:has(h1#header-page-title) .card.nav-profile .class-header,
body:has(h1#header-page-title) .card.nav-profile .class-header * {
  color: #ffffff !important;
}

/* Keep the "Manage external authentication" row consistent */
body:has(h1#header-page-title) .card.nav-profile .list-group-item {
  background: transparent !important;
  border: 0 !important;
  color: #ffffff !important;
}

body:has(h1#header-page-title) .card.nav-profile .list-group-item:hover {
  background: rgba(0, 168, 176, 0.18) !important;
}

/* 3) EXTERNAL PROVIDER BAR – target your li.change-login-default-1 */
body:has(h1#header-page-title) li.list-group-item.change-login-default-1 {
  border-radius: 1rem !important;
  border: 0 !important;
  padding: 1rem 1.25rem !important;

  background:
    radial-gradient(
      120% 140% at 85% 30%,
      rgba(0, 168, 176, 0.45) 0%,
      rgba(0, 168, 176, 0.15) 40%,
      rgba(0, 168, 176, 0) 70%
    ),
    linear-gradient(
      135deg,
      rgba(55, 18, 50, 0.80),
      rgba(0, 0, 0, 0.10)
    ) !important;

  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.06) inset !important;

  color: #ffffff !important;
}

/* Provider icon + text alignment */
body:has(h1#header-page-title) li.list-group-item.change-login-default-1 .fa {
  margin-right: 0.75rem !important;
  color: #ffffff !important;
}

/* Prevent the "selected highlight" from turning it into a bright block */
body:has(h1#header-page-title) li.list-group-item.change-login-default-1:focus,
body:has(h1#header-page-title) li.list-group-item.change-login-default-1:focus-within,
body:has(h1#header-page-title) li.list-group-item.change-login-default-1:hover {
  background:
    radial-gradient(
      120% 140% at 85% 30%,
      rgba(0, 168, 176, 0.55) 0%,
      rgba(0, 168, 176, 0.18) 45%,
      rgba(0, 168, 176, 0) 75%
    ),
    linear-gradient(
      135deg,
      rgba(55, 18, 50, 0.78),
      rgba(0, 0, 0, 0.12)
    ) !important;

  color: #ffffff !important;
}

/* SECURITY PANEL – remove solid purple header block (card-header) */
body:has(h1#header-page-title) .card.nav-profile .card-header {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

body:has(h1#header-page-title) .card.nav-profile .card-header,
body:has(h1#header-page-title) .card.nav-profile .card-header * {
  color: #ffffff !important;
}

/* EXTERNAL AUTH PAGE: Avatar panel (card-body contains img + name text) */
body[data-sitemap-state*="/"] .card.mb-3 .card-body:has(> img[alt]) {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

/* Make avatar larger */
body[data-sitemap-state*="/"] .card.mb-3 .card-body:has(> img[alt]) > img {
  width: 72px !important;
  height: 72px !important;
  border-radius: 16px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}

/* Style the name (it’s plain text, so style the card-body itself) */
body[data-sitemap-state*="/"] .card.mb-3 .card-body:has(> img[alt]) {
  color: #ffffff !important;
  font-weight: 600 !important;
}


/* EXTERNAL AUTH PAGE: external account row (Apollo Underwriting External panel) */
body[data-sitemap-state*="/"] li.list-group-item.change-login-default-li{
  background: linear-gradient(90deg, rgba(55,18,50,0.65), rgba(0,168,176,0.55)) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 18px !important;
  color: #ffffff !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.35) !important;
}

/* icon + text alignment inside that row */
body[data-sitemap-state*="/"] li.list-group-item.change-login-default-li .fa{
  color: #ffffff !important;
  margin-right: 10px !important;
}

/* ==========================================================
   EXTERNAL AUTH PAGE – AVATAR CARD GRADIENT FIX
   ========================================================== */

/* Target ONLY the avatar card via the known avatar image */
body[data-sitemap-state*="/"]
.card-body:has(img[src*="/_xrm-adx/images/contact_photo"]) {
  /* Kill the solid purple */
  background-color: transparent !important;

  /* Apply the SAME gradient as Profile page */
  background-image: linear-gradient(
    135deg,
    rgba(55, 18, 50, 0.95) 0%,
    rgba(0, 168, 176, 0.85) 100%
  ) !important;

  border-radius: 20px !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45) !important;
  padding: 24px !important;
}

/* Some themes apply bg to the parent .card instead */
body[data-sitemap-state*="/"]
.card:has(img[src*="/_xrm-adx/images/contact_photo"]) {
  background-color: transparent !important;
  background-image: none !important;
}

/* ==========================================================
   External auth page (data-sitemap-state="/")
   Force override portalbasictheme .card-body background-color
   ========================================================== */

/* 1) Kill the theme purple on BOTH card and card-body */
  body[data-sitemap-state*="/"] .card.mb-3,
  body[data-sitemap-state*="/"] .card.mb-3 > .card-body {
  background-color: transparent !important;
  background: transparent !important; /* handles shorthand background rules */
}

/* 2) Apply gradient to the card-body (the visible surface) */
  body[data-sitemap-state*="/"] .card.mb-3 > .card-body {
  background-image: linear-gradient(135deg, #371232 0%, #00A8B0 100%) !important;
  border-radius: 20px !important;
}
body[data-sitemap-state*="/"] .card.mb-3 > .card-body {
  background-image: var(--apollo-panel-gradient) !important;

}



/**************************************************************
 REPORTING PAGE — hide chrome and fill viewport
 Scopes to: body[data-sitemap-state="/Reporting/Reporting-Fullscreen/:/"]
**************************************************************/

/* 1) Remove any hero/banner blocks that are still present */
body[data-sitemap-state^="/Reporting"] .row.sectionBlockLayout.text-start[style*="background-image"]{
  display: none !important;
}

/* 4) Make the report section + iframe fill the viewport */
body[data-sitemap-state^="/Reporting"] .row.sectionBlockLayout.text-start[data-component-theme="portalThemeColor7"]{
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  min-height: 100vh !important;
}

body[data-sitemap-state^="/Reporting"] .row.sectionBlockLayout.text-start[data-component-theme="portalThemeColor7"] iframe{
  width: 100% !important;
  height: 100vh !important;
  min-height: 100vh !important;
  border: 0 !important;
  display: block !important;
}




/**************************************************************
 REPORTING – (correct data-sitemap-state)
 - Force white background
 - Hide search icon + its divider lines
**************************************************************/

/* ===== 1) White background everywhere on this page ===== */
  body[data-sitemap-state^="/Reporting"]{
  background: #ffffff !important;
  background-image: none !important;
}

/* Common portal wrappers that may be carrying purple */
  body[data-sitemap-state^="/Reporting"] main,
  body[data-sitemap-state^="/Reporting"] #content,
  body[data-sitemap-state^="/Reporting"] .content-wrapper,
  body[data-sitemap-state^="/Reporting"] .container,
  body[data-sitemap-state^="/Reporting"] .container-fluid,
  body[data-sitemap-state^="/Reporting"] .row,
  body[data-sitemap-state^="/Reporting"] .col,
  body[data-sitemap-state^="/Reporting"] .col-lg-12,
  body[data-sitemap-state^="/Reporting"] .page-content,
  body[data-sitemap-state^="/Reporting"] .page{
  background: #ffffff !important;
  background-image: none !important;
}

/* If the theme sets a background on common “card/panel” wrappers */
body[data-sitemap-state^="/Reporting"] .card,
body[data-sitemap-state^="/Reporting"] .card-body,
body[data-sitemap-state^="/Reporting"] .panel,
body[data-sitemap-state^="/Reporting"] .panel-body{
  background: transparent !important;
  background-image: none !important;
}

/* ===== 2) Hide search icon + the two vertical divider lines ===== */
/* Hide the search <a> itself (covers most portal headers) */
body[data-sitemap-state^="/Reporting"] a#search,
body[data-sitemap-state^="/Reporting"] li.nav-item a#search{
  display: none !important;
}

/* Hide divider-vertical <li> that appears before/after search */
body[data-sitemap-state^="/Reporting"] li.divider-vertical,
body[data-sitemap-state^="/Reporting"] li.nav-item.divider-vertical{
  display: none !important;
}

/* If your header uses the UL class approach that worked earlier, keep it scoped */
body[data-sitemap-state^="/Reporting"] ul.nav.navbar-nav.navbar-right li.nav-item:has(a#search),
body[data-sitemap-state^="/Reporting"] ul.nav.navbar-nav.navbar-right li.nav-item:has(> a#search){
  display: none !important;
}

/* ================================ 
   REPORTING - (Footer)
   Purple footer + white text (no white box)
================================ */

body[data-sitemap-state^="/Reporting"] footer,
body[data-sitemap-state^="/Reporting"] .footer {
  background-color: #371232 !important;
}

/* Remove any inner white blocks and keep everything purple */
body[data-sitemap-state^="/Reporting"] footer .container,
body[data-sitemap-state^="/Reporting"] footer .row,
body[data-sitemap-state^="/Reporting"] footer .xrm-editable-html,
body[data-sitemap-state^="/Reporting"] footer .xrm-attribute-value,
body[data-sitemap-state^="/Reporting"] footer .xrm-attribute-value .smallText {
  background: transparent !important;
  color: #ffffff !important;
}

/* Optional: tidy spacing so it looks like the other pages */
body[data-sitemap-state^="/Reporting"] footer .xrm-attribute-value {
  padding: 10px 16px !important;
  margin: 0 !important;
}

body[data-sitemap-state^="/Reporting"] footer .xrm-attribute-value .smallText {
  margin: 0 !important;
  line-height: 1.4 !important;
}




/* =========================================================
   REPORTING  (Power BI) – make iframe fill viewport
   Scope: Reporting page only
   ========================================================= */

body[data-sitemap-state^="/Reporting"] {
  /* allow full-height layout */
  min-height: 100vh !important;
}

/* Make the page shell a vertical layout so footer can stick to bottom */
body[data-sitemap-state^="/Reporting"] #mainContent,
body[data-sitemap-state^="/Reporting"] .wrapper-body,
body[data-sitemap-state^="/Reporting"] .page-copy {
  min-height: 100vh !important;
}

body[data-sitemap-state^="/Reporting"] #mainContent {
  display: flex !important;
  flex-direction: column !important;
}

/* Remove the Bootstrap container width constraint + padding that causes squashing */
body[data-sitemap-state^="/Reporting"] #mainContent .container,
body[data-sitemap-state^="/Reporting"] #mainContent .container-fluid {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Remove spacing that steals vertical height */
body[data-sitemap-state^="/Reporting"] .sectionBlockLayout {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

body[data-sitemap-state^="/Reporting"] .columnBlockLayout {
  margin: 0 !important;     /* important: you had margin: 60px 0 */
  padding: 0 !important;
  min-height: 0 !important;
}

/* Make the editable HTML area stretch */
body[data-sitemap-state^="/Reporting"] .page-copy,
body[data-sitemap-state^="/Reporting"] .xrm-editable-html,
body[data-sitemap-state^="/Reporting"] .xrm-attribute,
body[data-sitemap-state^="/Reporting"] .xrm-attribute-value {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
}

/* ====== THE IMPORTANT BIT: force iframe to fill viewport minus footer ====== */
/* Adjust 70px if your footer is taller/shorter */
body[data-sitemap-state^="/Reporting"] iframe {
  display: block !important;
  width: 100% !important;
  height: calc(100vh - 70px) !important;
  border: 0 !important;
}

/* If Power Pages wraps the iframe in a div, make it stretch too */
body[data-sitemap-state^="/Reporting"] #mainContent iframe {
  flex: 1 1 auto !important;
}

/* ====== Footer pinned to bottom ====== */
body[data-sitemap-state^="/Reporting"] footer,
body[data-sitemap-state^="/Reporting"] .footer {
  margin-top: auto !important;   /* pushes footer to the bottom */
}

/* Keep footer styling consistent (purple + white text) */
body[data-sitemap-state^="/Reporting"] footer {
  background: #371232 !important;
  color: #ffffff !important;
}

body[data-sitemap-state^="/Reporting"] footer a,
body[data-sitemap-state^="/Reporting"] footer p,
body[data-sitemap-state^="/Reporting"] footer .smallText {
  color: #ffffff !important;
}

/* Hide search icon on this page */
body[data-sitemap-state^="/Reporting"] .navbar .fa-search,
body[data-sitemap-state^="/Reporting"] .navbar .search,
body[data-sitemap-state^="/Reporting"] .search-input,
body[data-sitemap-state^="/Reporting"] .search-form {
  display: none !important;
}

/*===========================================================*/
/*REDESIGN OF SIGN-IN PAGE (CSS and JS)                      */
/*============================================================*/
/* =========================================================
   SIGN IN PAGE — Replace default heading + provider button
   ========================================================= */

/* Scope to Sign-in (use BOTH: data-sitemap-state and URL path patterns) */
body[data-sitemap-state*="/access-denied"],
body[data-sitemap-state*="/page-not-found"] {

  /* Hide default heading text */
  #external-login-heading,
  .login-heading-section {
    display: none !important;
  }

  /* Hide the existing provider button (we will click it via JS) */
  button[name="provider"][type="submit"] {
    display: none !important;
  }

  /* If that horizontal line is coming from a border or pseudo element, kill it */
  #ContentContainer_MainContent_MainContent_ExternalLoginButtons,
  #ContentContainer_MainContent_MainContent_ExternalLoginButtons::before,
  #ContentContainer_MainContent_MainContent_ExternalLoginButtons::after {
    border: 0 !important;
    box-shadow: none !important;
  }
}

/* Our injected hero block */
body[data-sitemap-state*="/access-denied/"] .ascent-signin-hero,
body[data-sitemap-state*="/page-not-found"]  .ascent-signin-hero,
body[data-sitemap-state*="/signin"] .ascent-signin-hero {
  min-height: 55vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}

body[data-sitemap-state*="/access-denied/"] .ascent-signin-hero h1,
body[data-sitemap-state*="/page-not-found"]  .ascent-signin-hero h1,
body[data-sitemap-state*="/signin"] .ascent-signin-hero h1 {
  color: #ffffff !important;
  font-weight: 700;
  margin: 0;
}

/* Use your existing CTA styling by applying the same classes you already style.
   If your CTA rules are targeting .btn.btn-primary / .btn-line etc, this will inherit them. */
body[data-sitemap-state*="/access-denied/"] .ascent-signin-cta,
body[data-sitemap-state*="/page-not-found"] .ascent-signin-cta,
body[data-sitemap-state*="/signin"] .ascent-signin-cta {
  margin-top: 8px;
}

/* =========================================================
   SIGN-IN HERO — Primary CTA styling
   ========================================================= */

.ascent-signin-hero .btn {
  background: linear-gradient(135deg, #148a92 0%, #0b5c67 100%) !important;
  color: #ffffff !important;

  font-size: 1.25rem !important;
  font-weight: 600 !important;

  padding: 18px 36px !important;
  border-radius: 18px !important;

  border: none !important;
  box-shadow: 0 12px 30px rgba(20, 138, 146, 0.35);

  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ascent-signin-hero .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(20, 138, 146, 0.45);
}

/* =========================================================
   SIGN-IN HERO — Center content precisely
   ========================================================= */

.ascent-signin-hero {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.ascent-signin-hero h1 {
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
}


/* =========================================================
   SIGN-IN HERO — horizontal positioning
   ========================================================= */

.ascent-signin-hero {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;

  padding-left: 100px;   /* ← this moves the block right */
}

/* =========================================================
   SIGN-IN HERO — spacing between text and CTA
   ========================================================= */

.ascent-signin-hero h1 {
  margin-bottom: 36px !important; /* increase gap */
}
  /* =========================================================
   SIGN IN / REGISTER — allow hero to span full page width
   ========================================================= */

/* Target BOTH pages (adjust data-sitemap-state if yours differ) */
body[data-sitemap-state*="/access-denied"],
body[data-sitemap-state*="/page-not-found"] {

  /* Make the hero’s bootstrap column full width */
  .row > .col-md-6:has(.ascent-signin-hero) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* Remove any default column padding that keeps it offset */
  .row > .col-md-6:has(.ascent-signin-hero) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Now your hero can truly center across the whole viewport */
  .ascent-signin-hero {
    max-width: 900px;
    margin: 0 auto !important;
    padding: 0 20px !important; /* keep nice mobile spacing */
    text-align: center;
  }
}

/* =========================================================
   SIGN-IN & REGISTER — hide the Sign in / Register TAB buttons
   (leave the hero CTA as the entry point)
   ========================================================= */

body[data-sitemap-state*="/SignIn"],
body[data-sitemap-state*="/signin"],
body[data-sitemap-state*="/access-denied/"],
body[data-sitemap-state*="/page-not-found/:/"] {

  /* Hide the tab strip only */
  ul.nav.nav-tabs.nav-account {
    display: none !important;
  }
}

/* =========================================================
   PROFILE — Update row: HARD reset + center inside fields width
   (matches: tr.profile-update-row > td.profile-update-cell > div.actions)
   ========================================================= */

body[data-sitemap-state*="/profile"]
#ProfileFormView tr.profile-update-row > td.profile-update-cell{
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 22px !important;
  border-top: 0 !important;            /* kills any “divider” look */
  text-align: center !important;
}

/* HARD reset anything older you may still have on .actions */
body[data-sitemap-state*="/profile"]
#ProfileFormView tr.profile-update-row .actions{
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;
  transform: none !important;

  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

body[data-sitemap-state*="/profile"]
#ProfileFormView tr.profile-update-row .actions::before,
body[data-sitemap-state*="/profile"]
#ProfileFormView tr.profile-update-row .actions::after{
  content: none !important;
  display: none !important;
}

/* =========================================================
   PROFILE — Restore a true 2-column layout on desktop
   (overrides earlier “full width / stacked” custom rules)
   ========================================================= */

@media (min-width: 992px){
  body[data-sitemap-state*="/profile"] .row[role="main"]{
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 24px !important;
  }

  /* Avatar column */
  body[data-sitemap-state*="/profile"] .row[role="main"] > .col-lg-4{
    flex: 0 0 35% !important;     /* change 35% → 30% if you want slimmer */
    max-width: 35% !important;
  }

  /* Form column */
  body[data-sitemap-state*="/profile"] .row[role="main"] > #mainContent{
    flex: 0 0 65% !important;
    max-width: 65% !important;
  }

  /* Ensure avatar card doesn’t “overflow” its column */
  body[data-sitemap-state*="/profile"] .row[role="main"] > .col-lg-4 .card.profile-info{
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* =========================================================
   PROFILE — shrink avatar + form area together (Option B)
   ========================================================= */

body[data-sitemap-state*="/profile"] .row[role="main"]{
  display: flex !important;
  flex-direction: column !important;   /* avatar on top, form under (your current layout) */
  align-items: center !important;       /* center the blocks */
}

/* Make BOTH sections the same width */
body[data-sitemap-state*="/profile"] .row[role="main"] > .col-lg-4,
body[data-sitemap-state*="/profile"] .row[role="main"] > #mainContent{
  width: 65% !important;
  max-width: 65% !important;
  flex: 0 0 auto !important;
}

/* Responsive: go full width on smaller screens */
@media (max-width: 992px){
  body[data-sitemap-state*="/profile"] .row[role="main"] > .col-lg-4,
  body[data-sitemap-state*="/profile"] .row[role="main"] > #mainContent{
    width: 100% !important;
    max-width: 100% !important;
  }
}

/*=============FINAL AVATAR==========================*/ 

/* PROFILE — shrink avatar column + expand form column (desktop only) */
@media (min-width: 992px) {

  body[data-sitemap-state*="/profile"]
  .row[role="main"] > .col-lg-4{
    flex: 0 0 20% !important;   /* 👈 try 25% / 30% / 35% */
    max-width: 30% !important;
  }

  body[data-sitemap-state*="/profile"]
  .row[role="main"] > #mainContent.col-lg-8{
    flex: 0 0 70% !important;
    max-width: 70% !important;
  }
}


/* =========================================================
   PROFILE — center Update button in the injected table row
   ========================================================= */

body[data-sitemap-state*="/profile"]
tr.profile-update-row > td.profile-update-cell{
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center !important;
}

/* Keep it centered no matter what */
body[data-sitemap-state*="/profile"]
tr.profile-update-row > td.profile-update-cell > .actions{
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 18px 0 0 !important; /* moves it a bit down/up within the table */
}

/* Kill any leftover divider line on the actions wrapper */
body[data-sitemap-state*="/profile"]
tr.profile-update-row > td.profile-update-cell > .actions::before,
body[data-sitemap-state*="/profile"]
tr.profile-update-row > td.profile-update-cell > .actions::after{
  content: none !important;
  display: none !important;
}

/* PROFILE — success notification message text color */
body[data-sitemap-state*="/profile"]
.alert,
body[data-sitemap-state*="/profile"]
.alert-success,
body[data-sitemap-state*="/profile"]
.xrm-editable-html .xrm-attribute-value .xrm-attribute {
  color: #000 !important; /* black text */
}

body[data-sitemap-state*="/profile"]
.alert-success {
  background-color: #e6f4ef !important; /* softer mint */
  border-color: #b7e4d1 !important;
}




/* PROFILE — shrink avatar column to match form width */
body[data-sitemap-state*="/profile"]
.row[role="main"] > .col-lg-4 {
  flex: 0 0 40% !important;   /* adjust: 30–40% */
  max-width: 40% !important;
}


/*==============CENTRING THE FORM ELEMENTS AFTER WIDTH REDUCTOIN================================*/
/* PROFILE: lock table sizing so column widths obey our rules */
body[data-sitemap-state*="/profile"]
#ProfileFormView fieldset[aria-label="Name"] table.section{
  width: 100% !important;
  table-layout: fixed !important;  /* critical */
  border-collapse: collapse !important;
}

/* PROFILE: collapse the phantom 3rd column */
body[data-sitemap-state*="/profile"]
#ProfileFormView fieldset[aria-label="Name"] table.section td.zero-cell{
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* PROFILE: make the two input columns share the width evenly */
body[data-sitemap-state*="/profile"]
#ProfileFormView fieldset[aria-label="Name"] table.section td.form-control-cell{
  width: 50% !important;
  vertical-align: top !important;
}



/*=======================FINAL AVATAR PANEL WIDTH SHRINK==========================*/

/* PROFILE — shrink avatar card from the RIGHT edge (right-anchored) */
body[data-sitemap-state*="/profile"]
div.row[role="main"] > div.col-lg-4 .card.mb-3.profile-info{
  width: 65% !important;          /* tweak */
  max-width: 65% !important;

  margin-left: auto !important;   /* pushes it to the right */
  margin-right: 50% !important;     /* anchors the right edge */
}



/* ==========================Notification Text/Banner after updating details on Profile Page===============================
   PROFILE — Success banner (Ascent CTA styling)
   Targets: div.alert.alert-success.alert-block (Power Pages)
   ========================================================= */

/* PROFILE — success banner background (Ascent style) */
body[data-sitemap-state*="/profile"]
.alert.alert-success.alert-block{
  background: linear-gradient(
    90deg,
    #5b1b52 0%,
    #0aa6a6 100%
  ) !important;

  border: none !important;
  border-radius: 14px !important;

  padding: 20px 56px 20px 24px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.35) !important;
}

/* PROFILE — success banner text */
body[data-sitemap-state*="/profile"]
.alert.alert-success.alert-block,
body[data-sitemap-state*="/profile"]
.alert.alert-success.alert-block .xrm-attribute-value{
  color: #ffffff !important;
  font-weight: 700 !important;
  letter-spacing: .3px !important;
}

/* PROFILE — close button */
body[data-sitemap-state*="/profile"]
.alert.alert-success.alert-block .btn-close,
body[data-sitemap-state*="/profile"]
.alert.alert-success.alert-block button.close,
body[data-sitemap-state*="/profile"]
.alert.alert-success.alert-block [data-bs-dismiss="alert"]{
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;

  color: #fff !important;
  opacity: .85 !important;
  filter: none !important;
  text-shadow: none !important;
}

/* HOME: reduce vertical gap between consecutive portalThemeColor7 blocks */
body[data-sitemap-state*="/"]
div[data-component-theme="portalThemeColor7"] + div[data-component-theme="portalThemeColor7"]{
  margin-top: -20px !important;   /* try -6px to -20px */
}

/* HOME: tighten gap on section block wrapper */
body[data-sitemap-state*="/"]
.row.sectionBlockLayout{
  gap: 8px !important;        /* or row-gap: 8px !important; */
}

body[data-sitemap-state*="/"]
div[data-component-theme="portalThemeColor7"].row.sectionBlockLayout{
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}


/* =========================================
   NAV — force ALL vertical dividers to show
   (including the one before the user dropdown)
   ========================================= */

nav[aria-label="Main Navigation"] ul.navbar-nav.weblinks > li.nav-item.divider-vertical,
nav[aria-label="Main Navigation"] ul.navbar-nav.weblinks li.nav-item.divider-vertical {
  display: list-item !important;
  visibility: visible !important;
  opacity: 1 !important;

  /* make it visible as a vertical line */
  width: 1px !important;
  min-width: 1px !important;
  height: 1.4em !important;
  background: currentColor !important;

  margin: 0 0.75rem !important;
  padding: 0 !important;
  align-self: center !important;
}

/* override any aria-hidden display:none rules */
nav[aria-label="Main Navigation"] li.nav-item.divider-vertical[aria-hidden="true"] {
  display: list-item !important;
}

/*====================================================== 
EXTERNAL REGISTRATION (Access Denied / Confirmation) 
========================================================*/

body[data-sitemap-state*="/access-denied/"]{
  background: url("/thumbnailApollo%20300724-17.jpg") center/cover no-repeat fixed !important;
}

/*1. Make Register text White...
============================== */
body[data-sitemap-state*="/access-denied/"]
legend .xrm-attribute-value{
  color: #fff !important;
  font-weight: 700;
}

/*2. Restyle Validation Panel....
=====================================*/
body[data-sitemap-state*="/access-denied/"]
.validation-summary-errors.alert{
  background: linear-gradient(
    135deg,
    #5b1b5a 0%,
    #0aa6a6 100%
  ) !important;

  border: none !important;
  border-radius: 14px !important;
  padding: 20px 24px !important;
}

/*3. Make validation error text white and bold
============================================*/
body[data-sitemap-state*="/access-denied/"]
.validation-summary-errors.alert,
body[data-sitemap-state*="/access-denied/"]
.validation-summary-errors.alert *{
  color: #fff !important;
  font-weight: 600;
}

/*4. Aligns input and helper text to he left 
===============*/
/* Hide the left label column so it stops consuming space */
body[data-sitemap-state="/access-denied/"] form .row.mb-3 > label.col-md-2.col-form-label {
  display: none !important;
}

/* 5. Remove the bootstrap offset that pushes the CTA right */
body[data-sitemap-state="/access-denied/"] form .row.mb-3 > .offset-md-2.col-md-10 {
  margin-left: 0 !important;
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  /*padding-left: 0 !important;*/
  padding-right: 0 !important;
} 

/*=================================
 Grouping the main navigation into a drop down
/*=======================================

/* Hide only when the first dropdown item is the duplicate Reporting link */
.dropdown-menu > li:first-child:has(> .dropdown-item[aria-label="Reporting"]) {
    display: none !important;
}

/* Hide the divider immediately after it */
.dropdown-menu > li:first-child:has(> .dropdown-item[aria-label="Reporting"]) + .dropdown-divider {
    display: none !important;
}

/* Hide only when the first dropdown item is the duplicate Files link */
.dropdown-menu > li:first-child:has(> .dropdown-item[aria-label="Files"]) {
    display: none !important;
}

/* Hide the divider immediately after it */
.dropdown-menu > li:first-child:has(> .dropdown-item[aria-label="Files"]) + .dropdown-divider {
    display: none !important;
}


/* ===== Dropdown Menu Styling ===== */

/* Dropdown container */
.navbar-nav .dropdown-menu {
    background-color: #ffffff !important; /* white background */
    border-radius: 8px;
    padding: 8px 0;
    border: 1px solid #e5e5e5;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Dropdown items */
.navbar-nav .dropdown-menu li a {
    padding: 10px 20px;   /* better spacing */
    color: #333333;
    font-size: 16px;
    display: block;
    text-decoration: none;
    font-weight: bolder;
}

/* Hover effect */
.navbar-nav .dropdown-menu li a:hover {
    background-color: #f5f5f5 !important; /* light grey hover */
    color: #000000;
}

/* Remove any teal background inheritance */
.navbar-nav .dropdown-menu li {
    background-color: transparent;
}

/* Optional: spacing between items */
.navbar-nav .dropdown-menu li + li {
    margin-top: 2px;
}


/* ===== Remove teal background from main navigation ===== */

/* Top nav links */
.navbar-nav > li > a {
    background-color: transparent !important;
    color: #333 !important;
}

/* Hover state */
.navbar-nav > li > a:hover {
    background-color: #f5f5f5 !important;
    color: #000 !important;
}

/* Active / selected page */
.navbar-nav > li.active > a,
.navbar-nav > li > a:focus {
    background-color: transparent !important;
    color: #000 !important;
}

/* ===== TOP NAV CLEANUP (remove teal) ===== */
.navbar-nav > li > a {
    background-color: transparent !important;
    color: #333 !important;
    border-bottom: 2px solid transparent;
    transition: all 0.18s ease;
}

.navbar-nav > li > a:hover,
.navbar-nav > li.dropdown:hover > a {
    background-color: transparent !important;
    color: #000 !important;
    border-bottom: 2px solid #0078d4;
}

/* ===== DROPDOWN BASE STYLING ===== */
.navbar-nav .dropdown-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        visibility 0.18s ease;
    pointer-events: none;

    background-color: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 8px 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    min-width: 240px;

    margin-top: 0 !important; /* IMPORTANT: removes hover gap */
}

/* ===== SHOW DROPDOWN (FIXED BEHAVIOR) ===== */
.navbar-nav li.dropdown:hover > .dropdown-menu,
.navbar-nav li.dropdown:focus-within > .dropdown-menu,
.navbar-nav li.dropdown > .dropdown-menu:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* ===== HOVER BRIDGE (prevents flicker) ===== */
.navbar-nav li.dropdown {
    position: relative;
}

.navbar-nav li.dropdown::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    height: 10px;
}

/* ===== DROPDOWN ITEMS ===== */
.navbar-nav .dropdown-menu li {
    background: transparent;
}

.navbar-nav .dropdown-menu .dropdown-item {
    display: block;
    padding: 12px 20px;
    color: #333;
    text-decoration: none;
    line-height: 1.4;
    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        padding-left 0.15s ease;
}

/* Hover effect */
.navbar-nav .dropdown-menu .dropdown-item:hover {
    background-color: #f4f6f8 !important;
    color: #000 !important;
    padding-left: 24px;
}