.fi360-root { --fi360-blue-1: #3175CE; --fi360-blue-2: #265A9E; --fi360-accent: #cc0000ff; --fi360--secondary:#f4b400;  --fi360-bg: #ffffff; --fi360-text: #0f1724; --fi360-muted: #6b7280; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }

/* Reset only within the fi360 root */
.fi360-root *, .fi360-root *::before, .fi360-root *::after { box-sizing: border-box; }
.fi360-root body, .fi360-root html { background: var(--fi360-bg); color: var(--fi360-text); }

/* Fix: remove default browser margins and ensure FI360 header/footer are flush */
html, body { margin: 0 !important; padding: 0 !important; }

/* Ensure the fi360 root wrapper doesn't add spacing at the top */
.fi360-root { margin: 0 !important; padding: 0 !important; }

/* Force topnav to sit at the very top; remove any top margin from header */
.fi360-root .fi360-topnav { top: 0 !important; margin-top: 0 !important; padding-top: 0 !important; }
.fi360-root .fi360-topnav-inner { padding-top: 8px !important; padding-bottom: 8px !important; }

/* Small safety: prevent any body child from adding whitespace above the topnav */
body > * { margin-top: 0 !important; }

/* Hide legacy left-rail selectors scoped to fi360-root */
.fi360-root .fi360-leftnav, .fi360-root .left-rail, .fi360-root .sidebar-rail, .fi360-root #leftRail { display:none !important; }

/* Top navigation */
.fi360-root .fi360-topnav{ position:sticky; top:0; z-index:99999; background:#0b2a45 !important; }
.fi360-root .fi360-topnav-inner{ max-width:100%; margin:0 auto; padding:12px 28px; display:flex; align-items:center; gap:18px; }
.fi360-root .fi360-brand img{ height:36px; display:block; }
.fi360-root .fi360-primary-nav{ flex:1; }
.fi360-root .fi360-primary-list{ list-style:none; margin:0; padding:0; display:flex; gap:14px; align-items:center; }
.fi360-root .fi360-link{ color:var(--fi360-text); text-decoration:none; font-weight:600; padding:8px 10px; border-radius:8px; background:transparent; border:0; cursor:pointer; }
.fi360-root .fi360-link:hover{ background:rgba(49,117,206,0.06); }
.fi360-root .fi360-topnav .fi360-link{ color:#ffffff !important; }
.fi360-root .fi360-topnav .btn-ghost{ color:#ffffff !important; border-color: rgba(255,255,255,0.08) !important; }

/* Flyouts */
.fi360-root .fi360-flyout{ display:none; position:absolute; left:0; top:100%; background:#fff; padding:18px; border-radius:8px; box-shadow:0 18px 40px rgba(20,20,20,0.12); margin-top:12px; min-width:720px;  }
.fi360-root .flyout-item.open > .fi360-flyout{ display:block; }
.fi360-root .fi360-flyout-inner{ display:flex; gap:18px; align-items:flex-start; padding-bottom:16px;  }
.fi360-root .fi360-flyout-col{ flex:1; }
.fi360-root .fi360-flyout-cta{ display:flex; align-items:center; padding-left:12px; }
.fi360-root .fi360-flyout a{ color:var(--fi360-text); text-decoration:none; }

/* Flyout footer demo link */
.fi360-root .fi360-flyout-footer{ padding-top: 16px; margin-top:16px; display:flex; justify-content:flex-end;  }
.fi360-root .fi360-flyout-demo{ color: #ffffff !important; background:var(--fi360-accent); padding:8px 12px; border-radius:8px; text-decoration:none; }

/* Flyout headings */
.fi360-root .fi360-flyout-col h4{ font-size:15px; margin:0 0 8px; color:#0b1220; font-weight:700; }
.fi360-root .fi360-flyout-col ul li a{ font-size:14px; color:#0f1724; display:block; padding:4px 0; }
.fi360-root .fi360-flyout-col h3{ font-size:18px; margin:0 0 12px; color:#0b1220; }

/* Utility buttons */
.fi360-root .btn-ghost{ background:transparent; border:1px solid #e6edf8; padding:8px 10px; border-radius:8px; color:var(--fi360-text); }
.fi360-root .btn-primary{ background:var(--fi360-accent); color:#fff; padding:8px 12px; border-radius:8px; text-decoration:none; }

/* Main layout */
.fi360-root .fi360-main{ max-width:100%; padding:22px 40px 60px; margin:0; }

/* Hero */
.fi360-root .fi360-hero{
  width:100vw;
  margin-left: calc(50% - 50vw);
  padding:48px 80px;
  background: linear-gradient(180deg, var(--fi360-accent), #9b2029);
  color:#fff;
  display:flex;
  align-items:center;
  gap:28px;
  margin-bottom:20px;
}
.fi360-root .fi360-hero .hero-content h1,
.fi360-root .fi360-hero .hero-content p.lead{
  color: #fff;
}
.fi360-root .fi360-hero .hero-visual img{ box-shadow:none; border-radius:8px; }

/* Ensure brand link is visible and clickable */
.fi360-root .fi360-brand-wrap a { display:inline-block; }

/* adjust main below hero to not duplicate spacing */
.fi360-root .fi360-main { padding-top:28px; }

/* ensure flyouts remain white text on white not an issue */
.fi360-root .fi360-flyout { color: #0f1724; background:#fff; }

/* small tweak: make the top nav brand area sit above hero color */
.fi360-root .fi360-topnav{ background:transparent; }
.fi360-root .fi360-topnav-inner{ padding-left:80px; padding-right:80px; }

/* Cards */
.fi360-root .fi360-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin:18px 0; }
.fi360-root .fi360-card{ background:#fff; border:1px solid #eef2f7; padding:18px; border-radius:10px; box-shadow:0 6px 18px rgba(20,20,20,0.04); text-decoration:none; color:inherit; display:block; }
.fi360-root .fi360-card h3{ margin:0 0 8px; }
.fi360-root .fi360-card p{ margin:0; color:var(--fi360-muted); }

/* Footer */
.fi360-root .fi360-footer{ background:#0f1724; color:#ffffff; padding:28px 20px; border-top:none; }
.fi360-root .fi360-footer a{ color:#9fb7ff; text-decoration:none; }
.fi360-root .fi360-footer small{ color:rgba(255,255,255,0.72); }

/* Ensure flyout demo is positioned bottom-left inside the flyout */
.fi360-root .fi360-flyout{ padding-bottom:40px; border:#265A9E 2px solid; border-radius: 8px;}
.fi360-root .fi360-flyout-footer{ position:absolute; left:18px; bottom:12px; }

/* Ensure high contrast link colors in footer */
.fi360-root .fi360-footer a:hover{ color:#ffffff; }

/* Ensure header spans edge-to-edge and no white edge */
.fi360-root { width:100%; }

/* Full-bleed utility for FI360 pages */
.fi360-root {
  overflow-x: hidden; /* prevent horizontal scroll when using viewport spanning elements */
}

/* Footer */ 
/* footer */
.fi360-footer{ margin-top:48px; border-top:1px solid #eef2f7; padding-top:24px; }
.fi360-footer-inner{ display:flex; flex-wrap: wrap;}
.fi360-footer-col {min-width: 200px; flex:1}
.fi360-footer-col h4{ margin:0 0 8px; }
.fi360-footer-col ul{ list-style:none; padding:0; margin:0; }
.fi360-footer-bottom{ margin-top:18px; color:var(--fi360-muted); }


.fi360-root .fi360-bleed {
  position: relative;
  left: 52%;
  right: 52%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  box-sizing: border-box;
}

/* Keep inner .container centered with comfortable gutters */
.fi360-root .fi360-bleed > .container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* Make footer full-bleed background but keep inner content constrained */
.fi360-root .fi360-bleed .footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

/* Ensure hero visuals don't create extra right gaps */
.fi360-root .fi360-hero img, .fi360-root .fi360-hero .hero-visual img { max-width: 100%; height: auto; }

/* Sticky sub-navigation for permits */
.fi360-root .fi360-subnav{ position:sticky; top:84px; z-index:85; display:flex; justify-content:center; padding:12px 0; }
.fi360-root .fi360-subnav .fi360-subnav-link{ background:#f2f6fa; padding:10px 16px; border-radius:22px; margin:0 8px; color:#0b1726; font-weight:700; box-shadow:0 4px 20px rgba(12,20,40,0.06); }
.fi360-root .fi360-subnav .fi360-subnav-link.active{ background:var(--fi360-accent); color:#fff; box-shadow:0 10px 28px rgba(200,40,40,0.12); }

/* Divider between sections: darker angled band */
.fi360-root .fi360-divider{ height:48px; background: linear-gradient(90deg, rgba(15,34,64,0.02), rgba(15,34,64,0.06)); border-top:1px solid rgba(15,34,64,0.04); border-bottom:1px solid rgba(15,34,64,0.04); margin:0; }

/* Alternate section backgrounds and stronger contrast */
.fi360-root section:nth-of-type(odd){ background: #ffffff; }
.fi360-root section:nth-of-type(even){ background: #f7f9fb; }

/* Cards and lists in sections stand out more */
.fi360-root section .card, .fi360-root section .list-unstyled, .fi360-root section ul{ padding:18px; border-radius:12px; }

/* Ensure consistent horizontal gutter inside fi360-overview on large screens */
@media (min-width: 992px) {
  .fi360-root .fi360-overview > .container > .row > .col-lg-7 {
    padding-right: 24px !important;
  }
  .fi360-root .fi360-overview > .container > .row > .col-lg-5 {
    padding-left: 24px !important;
  }
}

@media (max-width: 991px) {
  .fi360-root .fi360-overview > .container > .row > .col-lg-7,
  .fi360-root .fi360-overview > .container > .row > .col-lg-5 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Ensure hero uses the photographic hero image */
.fi360-root .fi360-hero{ background-image: url('/images/FI360/permits-hero-photo.svg') !important; background-size:cover; background-position:center; }

/* Section spacing */
.fi360-root section{ padding-top:36px; padding-bottom:36px; }
.fi360-root section h2{ margin-bottom:12px; }

/* Force hero background and section background colors */
.fi360-root .fi360-hero{ background-color: #081226 !important; background-image: url('/images/FI360/permits-hero-photo.svg') !important; background-size:cover; background-position:center right; color:#fff; }
.fi360-root section{ background-color: transparent; }
.fi360-root section[style*="background:"]{ background-clip: border-box; }

/* Ensure section with light background retains color */
.fi360-root .fi360-bleed[style*="#f7f8fa"]{ background: #f7f8fa !important; }
.fi360-root .fi360-bleed[style*="#ffffff"]{ background: #ffffff !important; }
.fi360-root .fi360-bleed[style*="#0f2240"]{ background: #0f2240 !important; }

/* Force hero text color */
.fi360-root .fi360-hero h1, .fi360-root .fi360-hero p { color: #fff !important; }

/* Ensure subnav background contrasts on top */
.fi360-root .fi360-subnav{ background: rgba(255,255,255,0.98) !important; }

/* Ensure subnav doesn't overlap content on scroll */
@media (max-width:900px){ .fi360-root .fi360-subnav{ top:72px; } }
@media (max-width: 900px) {
  .fi360-root .fi360-bleed { left: 0; right: 0; margin-left: 0; margin-right: 0; width: auto; }
  .fi360-root .fi360-main{ padding-left:20px; padding-right:20px; }
  .fi360-root .fi360-flyout-demo{ display:inline-block; }
  .fi360-root .fi360-hero{ margin-left: 0; width:100%; padding:28px 20px; }
  .fi360-root .fi360-topnav-inner{ padding-left:20px; padding-right:20px; }
}

/* Stronger cards */
.fi360-root .card{ border-radius:12px; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.fi360-root .card:hover{ transform: translateY(-8px); box-shadow: 0 18px 48px rgba(12,32,56,0.12); }

/* Footer full-bleed */
.fi360-root footer.fi360-footer{ width:100vw; margin-left:50%; transform:translateX(-50%); left:0; right:0; padding:24px 40px; }

/* Ensure hero text contrasts on complex images */
.fi360-root .fi360-hero h1, .fi360-root .fi360-hero p{ color:#fff !important; text-shadow:0 6px 24px rgba(0,0,0,0.45); }

  /* Hero CTA styles */
.fi360-hero-cta { background: var(--fi360--secondary) !important; color: #082133 !important; border-color: rgba(0,0,0,0.08) !important; box-shadow: none !important; }
.fi360-hero-cta:hover, .fi360-hero-cta:focus { background: #b88b00 !important; color: #fff !important; }
.fi360-hero-demo { background: #ff5a5f; color: #fff; border-color: rgba(0,0,0,0.08); box-shadow: none; }
.fi360-hero-demo:hover, .fi360-hero-demo:focus { background: #e04448; color: #fff; }

  /* Remove issues caused by competing CSS: force two-column layout and fixed widths on md+ */
  @media (min-width: 768px) {
    /* image left, content right */
    .fi360-img-left { display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 24px !important; }
    .fi360-img-left > .col-12.col-md-5 { flex: 0 0 41.666667% !important; max-width: 41.666667% !important; order: 0 !important; }
    .fi360-img-left > .col-12.col-md-7 { flex: 0 0 58.333333% !important; max-width: 58.333333% !important; order: 1 !important; }

    /*  features left, image right */
     .fi360-img-right { display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 24px !important; }
     .fi360-img-right > .col-md-6:first-child { flex: 0 0 50% !important; max-width: 50% !important; order: 0 !important; }
     .fi360-img-right > .col-md-6:last-child { flex: 0 0 50% !important; max-width: 50% !important; order: 1 !important; }

     .fi360-portal-image { width: auto; max-width: 620px; height: auto; max-height: 400px; display: block; border: 1px solid #e6e6e6; border-radius: 6px; padding: 6px; background: #fff; }

  }

  /* Ensure normal stacking on small screens */
  @media (max-width: 767px) {
    .fi360-img-left,  .fi360-img-right { display: block !important; }
    .fi360-img-left > [class*="col-"], .fi360-img-right > [class*="col-"] { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; order: initial !important; }
    .fi360-img-left img.fi360-portal-image,  .fi360-img-right img.fi360-portal-image { max-width: 92% !important; margin-left: 0 !important; }
  }

  img.fi360-portal-image {
    box-shadow: 0 8px 24px rgba(10,20,30,0.08);
    border-radius: 8px;
    background: #fff;
  }

  /* Keep inner .container centered with comfortable gutters */
.fi360-root .fi360-body-cards > .container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* Centralized overview styling for permits, inspections, investigations, and pre-incident-planning */
.fi360-root .fi360-overview {
  /* visual defaults */
  color: #fff;
  background: #262626;
}
.fi360-root .fi360-overview > .container { max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }
.fi360-root .fi360-intro > .container { max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }

/* Two-column layout on large screens */
@media (min-width: 992px) {
  .fi360-root .fi360-overview > .container > .row { display: flex !important; flex-wrap: wrap; align-items: center; }
  .fi360-root .fi360-overview > .container > .row > .col-lg-7 { flex: 0 0 58.333333% !important; max-width: 58.333333% !important; }
  .fi360-root .fi360-overview > .container > .row > .col-lg-5 { flex: 0 0 41.666667% !important; max-width: 41.666667% !important; }
  .fi360-root .fi360-intro > .container > .row { display: flex !important; flex-wrap: wrap; align-items: center; }
  .fi360-root .fi360-intro > .container > .row > .col-lg-7 { flex: 0 0 58.333333% !important; max-width: 58.333333% !important; }
  .fi360-root .fi360-intro > .container > .row > .col-lg-5 { flex: 0 0 41.666667% !important; max-width: 41.666667% !important; }

}

.fi360-root .fi360-intro {
  color:#000;
  background: #d0b112;
}
/* Overview: ensure charcoal background and readable text */
#overview { background: #262626; color: #fff; padding-left:22px; padding-right:22px; }
#overview h2 { color: #fff; }
#overview p, #overview ul li { color: #e6e6e6; }
#overview ul { background: transparent; box-shadow: none; border: none; padding: 0; margin: 0; }
#overview ul li strong { color: #fff; }

/* Intro: ensure gold background and readable text */
#intro { background: #d0b112; color: #000; padding-left:22px; padding-right:22px; }
#intro h2 { color: #000; }
#intro p, #intro ul li { color: #000; }
#intro ul { background: transparent; box-shadow: none; border: none; padding: 0; margin: 0; }
#intro ul li strong { color: #000; }

    /* Smaller, dark-grey title used above all feature lists */
  .fi360-features-title {
    font-size: 1.05rem;
    color: #4a4a4a;
    font-weight: 700;
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
  }

/* Constrain ITM reports preview image to avoid overlapping text */
.fi360-root img.fi360-itm-image {
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
  z-index: 1 !important;
  max-width: 620px;
  max-height: 400px;
    box-shadow: 0 8px 24px rgba(10,20,30,0.08);
    border-radius: 8px;
    background: #fff;
}

/* Ensure columns maintain stacking order so text stays above image if necessary */
.fi360-root .fi360-body-cards .row > .col-12.col-md-7 {
  position: relative;
  z-index: 2;
}

.text-white {
    --bs-text-opacity: 1;
    color: #fff !important;
}

.text-center {text-align: center !important;}



.card-body {
    border-radius: 4px;
}

.fi360-bleed .row {
  display: flex;
  margin-right: -15px;
  margin-left: -15px;
}

.fi360-bleed .justify-content-center {
  justify-content: center;
}

.fi360-bleed .col-md-5 {
  flex: 0 0 41.66666667%;
  max-width: 41.66666667%;
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

.fi360-bleed .d-flex {
  display: flex;
}

.fi360-bleed .flex-grow-1 {
  flex-grow: 1;
}

.fi360-bleed .p-4 {
  padding: 1.5rem !important;
}

.fi360-bleed .bg-white {
  background-color: #fff !important;
}

.fi360-bleed .rounded-3 {
  border-radius: 0.5rem !important;
}

.fi360-bleed .shadow {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.small-print {
    font-size: 0.875em;
    color: #3e4149;
    margin-top: 0.5rem;
}