.hgi-page-bg {
	position: relative;
	display: flow-root;
	isolation: isolate;
	background-color: #071823;
	background-image: url('/Images/portalbg.webp');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
}

/* iOS/Android Safari ignore fixed attachment — fall back to a scrolling cover */
@media (max-width: 991px) {
	.hgi-page-bg {
		background-attachment: scroll;
		background-position: center top;
	}
}

/* Sections stay transparent so the one image shows through */
.hgi-page-bg .Dashboard-overview-section,
.hgi-page-bg .app-overview-section,
.hgi-page-bg .alert-overview-section {
	background-color: transparent;
	color: #cbd5e1;
}

.hgi-page-bg .breadcrumb-item a {
	color: #94a3b8 !important;
}
.hgi-page-bg .breadcrumb-item a:hover {
	color: #73FDFF !important;
}
.hgi-page-bg .breadcrumb-item.active,
.hgi-page-bg .breadcrumb-item.active b {
	color: #73FDFF !important;
}
.hgi-page-bg .breadcrumb-item + .breadcrumb-item::before {
	color: rgba(255, 255, 255, 0.45);
}

.hgi-page-bg .dashboard-title,
.hgi-page-bg .dashboard-title h1,
.hgi-page-bg .app-title,
.hgi-page-bg .app-title h1,
.hgi-page-bg .alert-title,
.hgi-page-bg .alert-title h1,
.hgi-page-bg .dashboard-list-title h3,
.hgi-page-bg .app-list-title h3,
.hgi-page-bg .alert-list-title h3,
.hgi-page-bg .alert-p h3,
.hgi-page-bg .app-p h3,
.hgi-page-bg .dashboard-p h3 {
	color: #ffffff;
}
.hgi-page-bg .dashboard-p p,
.hgi-page-bg .app-p p,
.hgi-page-bg .alert-p p,
.hgi-page-bg .dashboard-list-title p,
.hgi-page-bg .app-list-title p,
.hgi-page-bg .alert-list-title p,
.hgi-page-bg .dashboard-list li,
.hgi-page-bg .app-list li,
.hgi-page-bg .alert-list li {
	color: #cbd5e1;
}
.hgi-page-bg .dashboard-list li::marker,
.hgi-page-bg .app-list li::marker,
.hgi-page-bg .alert-list li::marker {
	color: #73FDFF;
}
.hgi-page-bg .external-portal-links {
	color: #22d3ee;
}
.hgi-page-bg .external-portal-links:hover {
	color: #73FDFF;
}

/* Screenshots carry `box-shadow: 1px 1px 5px black`, which vanishes against a
   dark page — give them a light edge so they still read as raised panels. */
.hgi-page-bg .dashboard-img img,
.hgi-page-bg .app-img img,
.hgi-page-bg .alert-img img {
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
	border: 1px solid rgba(255, 255, 255, 0.14);
}

/* --------------------------------------------------------------------------
   Feature strip below the body. `.name` has no colour rule anywhere, so it
   inherits Bootstrap's near-black --bs-body-color and disappears on the image.
   Bootstrap also draws <hr> from currentColor at 25% opacity.
   -------------------------------------------------------------------------- */
.hgi-page-bg .mobile-align .name {
	color: #cbd5e1;
}
.hgi-page-bg .mobile-align hr {
	border-color: rgba(255, 255, 255, 0.14);
	color: rgba(255, 255, 255, 0.14);
	opacity: 1;
}

/* The body only shows past the end of the document (tall viewports, iOS
   overscroll). These pages leave it at the browser default white, which reads
   as a stray band under the dark footer. Safe to set here: this stylesheet is
   loaded only by the four internal help guide pages. */
body {
	background-color: #071823;
}