/* Import DM Sans from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

/* Apply to the entire page */
body, h1, h2, h3, h4, h5, h6, p, a, .component-name, .status-type, .incident-title {
    font-family: 'DM Sans', sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Optional: Adjusting button weights for branding consistency */
.btn, #subscribe_button {
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 500;
}

body{
	background-color: white !important;
}
.hero{
	background-color: #079CEE;
	height: auto;
	width: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
.hero .title{
	text-align: center;
	padding: 30px;
	padding-top: 80px;
	padding-bottom: 75px;
}
.hero .title img{
	max-width: 100%;
	height: auto;
}
.hero .hero-dark-wave-svg{
	width: 100%;
	height: 100px;
	display: block;
	transform: rotateY(180deg);
}

.hero .navbar-top{
	width: 100%;
	padding: 15px;
	position: relative;
	padding-top: 35px;
	max-width: 1280px;
	margin: 0 auto;
}

.hero .navbar-top svg{
	width: 12px;
	position: absolute;
	top: 5px;
	left: 0;
}

.hero .button.bandwidth{
	position: relative;
	text-decoration: none;
	color: black;
	font-size: 14px;
	font-weight: 600;
}

.hero .navbar-top .button.bandwidth span{
	padding-left: 18px;
}

.hero .navbar-top .updates-dropdown-container, .hero .navbar-top .button{
	transition: all 0.2s;
	opacity: 1;
}

.hero .button.support{
	color: black;
	text-decoration: none;
	border: 2px solid black;
	padding: 7px 20px;
	border-radius: 20px;
	margin-right: 13px;
	font-size: 14px;
	font-weight: 600;
}

.hero .updates-dropdown-container #show-updates-dropdown{
	color: black;
	text-decoration: none;
	border: 2px solid white;
	background-color: white;
	padding: 7px 20px;
	border-radius: 20px;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 600;
}

.hero .navbar-mobile{
	text-align: center;
	margin-bottom: 50px;
	display: none;
}

.hero .navbar-mobile .button.support, .hero .navbar-mobile .button.subscribe, .hero .navbar-mobile .updates-dropdown-container{
	display: block;
}

.hero .navbar-mobile .button.support{
	width: 300px;
	margin: 0 auto;
	margin-top: 10px;
}
.hero .navbar-mobile .updates-dropdown-container{
	width: 300px;
	margin: 0 auto;
	margin-top: 10px;
}


.updates-dropdown{
	position: fixed;
	left: calc(50% - 300px);
	top: 95px;
	width: 300px;
}

/* 2026-08-07: dropped min-height:180px and added a matching padding-bottom.
   The band held one 24px line of text but was forced to 180px tall, which
   pinned the welcome line to the bottom with dead space above it. It now
   sizes to its content. See the companion rules at the end of this file. */
.section-status-legend{
	background-color: #F9F9F9;
	margin-bottom: 50px;
	padding-top: 35px;
	padding-bottom: 35px;
}

.components-section .legend-item.status-green{
	order: 1;
}
.components-section .legend-item.status-yellow{
	order: 3;
}
.components-section .legend-item.status-orange{
	order: 4;
}
.components-section .legend-item.status-red{
	order: 5;
}
.components-section .legend-item.status-blue{
	order: 2;
}

.components-section .legend-item.status-green span:before{
	background: url(https://bw-mkt-wp-website.s3.us-east-2.amazonaws.com/wp-content/uploads/20231117175310/status-green.svg);
	content: ' ';
	display: block;
	position: absolute;
	background-position: center;
	background-size: 60px;
	width: 30px;
	height: 35px;
	left: -20px;
	top: -19px;
}
.components-section .legend-item.status-orange span:before{
	background: url(https://bw-mkt-wp-website.s3.us-east-2.amazonaws.com/wp-content/uploads/20231117175308/status-dark-blue.svg);
	content: ' ';
	display: block;
	position: absolute;
	background-position: center;
	background-size: 60px;
	width: 30px;
	height: 35px;
	left: -20px;
	top: -19px;
}
.components-section .legend-item.status-yellow span:before{
	background: url(https://bw-mkt-wp-website.s3.us-east-2.amazonaws.com/wp-content/uploads/20231117175309/status-yellow.svg);
	content: ' ';
	display: block;
	position: absolute;
	background-position: center;
	background-size: 60px;
	width: 30px;
	height: 35px;
	left: -20px;
	top: -19px;
}
.components-section .legend-item.status-red span:before{
	background: url(https://bw-mkt-wp-website.s3.us-east-2.amazonaws.com/wp-content/uploads/20231117175306/status-red.svg);
	content: ' ';
	display: block;
	position: absolute;
	background-position: center;
	background-size: 60px;
	width: 30px;
	height: 35px;
	left: -20px;
	top: -19px;
}
.components-section .legend-item.status-blue span:before{
	background: url(https://bw-mkt-wp-website.s3.us-east-2.amazonaws.com/wp-content/uploads/20231117175305/status-blue.svg);
	content: ' ';
	display: block;
	position: absolute;
	background-position: center;
	background-size: 60px;
	width: 30px;
	height: 35px;
	left: -20px;
	top: -19px;
}



.section-new-components .components-section .component-statuses-legend{
	margin-top: 0;
	display: flex;
	justify-content: center;
}
.section-new-components .components-section .component-statuses-legend .legend-item.title{
	font-weight: 600;
	margin-right: 30px !important;
}
.section-new-components .components-section .component-statuses-legend .legend-item{
	margin-right: 40px !important;
}


.section-new-components .nav{
	justify-content: center;
}

.tab-content .tab-pane{
	overflow: hidden;
	height: 0;
}
.tab-pane .components-container.row{
	--bs-gutter-x: none;
	--bs-gutter-y: none;
}

.tab-content .active, .tab-content .show{
	opacity: 1 !important;
	display: block !important;
	overflow:auto;
	height: auto;
}


.component-container{
	/* padding: 0 !important; */
	border: none !important;
}

.component-inner-container{
	padding: 10px !important;
	margin-top: 0 !important;
	background-color: #f2f2f2;
	position: relative;
}
.component-inner-container .name{
	max-width: 100% !important;
	white-space: normal !important;
	font-weight: 700 !important;
}
.component-container .child-components-container .name{
	max-width: 100% !important;
	white-space: normal !important;
	font-weight: 400 !important;

}
.group-parent-indicator{
	display: none !important;
}

.child-components-container .component-inner-container.status-green::before{
	background: url(https://bw-mkt-wp-website.s3.us-east-2.amazonaws.com/wp-content/uploads/20231117175310/status-green.svg);
	content: ' ';
	display: block;
	position: absolute;
	background-position: center;
	background-size: 60px;
	width: 30px;
	height: 35px;
	left: 0px;
}
.child-components-container .component-inner-container.status-yellow::before{
	background: url(https://bw-mkt-wp-website.s3.us-east-2.amazonaws.com/wp-content/uploads/20231117175309/status-yellow.svg);
	content: ' ';
	display: block;
	position: absolute;
	background-position: center;
	background-size: 60px;
	width: 30px;
	height: 35px;
	left: 0px;
}
.child-components-container .component-inner-container.status-orange::before{
	background: url(https://bw-mkt-wp-website.s3.us-east-2.amazonaws.com/wp-content/uploads/20231117175308/status-dark-blue.svg);
	content: ' ';
	display: block;
	position: absolute;
	background-position: center;
	background-size: 60px;
	width: 30px;
	height: 35px;
	left: 0px;

}
.child-components-container .component-inner-container.status-red::before{
	background: url(https://bw-mkt-wp-website.s3.us-east-2.amazonaws.com/wp-content/uploads/20231117175306/status-red.svg);
	content: ' ';
	display: block;
	position: absolute;
	background-position: center;
	background-size: 60px;
	width: 30px;
	height: 35px;
	left: 0px;

}
.child-components-container .component-inner-container.status-blue::before{
	background: url(https://bw-mkt-wp-website.s3.us-east-2.amazonaws.com/wp-content/uploads/20231117175305/status-blue.svg);
	content: ' ';
	display: block;
	position: absolute;
	background-position: center;
	background-size: 60px;
	width: 30px;
	height: 35px;
	left: 0px;

}

.component-container .child-components-container {
	display: block !important;
	padding-left: 0 !important;
}

.component-container .child-components-container .component-inner-container{
	background-color: #fff;
	border-bottom: 1px solid #DAD9D9;
	padding-left: 30px !important;
}
.component-container .child-components-container .component-inner-container:last-child{
	border: none;
}
.component-container .component-status, .component-container .tool.icon-indicator{
	display: none !important;
}

.nav-pills{
	margin-bottom: 40px;
}

.nav-pills .nav-item .nav-link{
	border: 1px solid #DAD9D9;
	border-left: none;
	padding: 6px 10px;
	border-radius: 0px;
	color: #090306;
	padding-left: 15px;
}
.nav-pills .nav-item.desktop:first-child .nav-link{
	border-radius: 8px 0px 0px 8px;
	border-left: 1px solid #DAD9D9;
}

.nav-pills .nav-item.desktop:last-child .nav-link{
	border-radius: 0px 8px 8px 0px;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link{
	background-color: #1c9cee !important;
	border-color: #1c9cee;
}


.unresolved-incidents .unresolved-incidents-title{
	font-size: 30px !important;
	margin-bottom: 10px !important;

}
.unresolved-incidents .unresolved-incident .incident-title{
	background-color: #F2F2F2 !important;
	padding: 10px 13px!important;
}
.unresolved-incidents .unresolved-incident .incident-title .actual-title{
	color: #000000 !important;
	text-decoration: none;
	text-shadow: none;
	font-size: 18px;
}
.unresolved-incidents .unresolved-incident .incident-title .subscribe{
	color: #079CEE !important;
	text-decoration: none;
	text-shadow: none;
}

.unresolved-incident .updates{
	border: none !important;
	padding: 15px !important;
}
.unresolved-incident .updates .update{
	border-bottom: 1px solid #DAD9D9;
	margin-bottom: 10px !important;
	padding-bottom: 10px !important;
	font-size: 18px;
	font-weight: 300;
}
.unresolved-incident .updates .update:last-child{
	border-bottom: none;
}
.unresolved-incident .updates .update strong{
	display: block;
	font-weight: 500;
	margin-bottom: 5px;
}
.unresolved-incident .updates .update small{
	display: block;
	font-weight: 300;
	color: #848182;
	font-style: italic;
	margin-top: 5px;
}

.scheduled-maintenances-container .scheduled-maintenance .incident-title{
	background-color: #079CEE !important;
	padding: 10px 13px!important;
	border: none !important;
}
.scheduled-maintenances-container .scheduled-maintenance .incident-title a{
	color: #000000 !important;
	text-decoration: none;
	text-shadow: none;
	font-size: 18px;
	font-weight: 500;

}

.scheduled-maintenances-container .scheduled-maintenance .incident-title .pull-right{
	font-weight: 400;
	color: #000000 !important;
	text-decoration: none;
	text-shadow: none;
	font-size: 18px;
	white-space: normal;
}

.scheduled-maintenances-container .scheduled-maintenance .updates-container{
	padding-left: 13px;
}

.scheduled-maintenances-container .scheduled-maintenance .updates-container .update{
	border-bottom: 1px solid #DAD9D9;
	margin-bottom: 10px !important;
	padding-bottom: 10px !important;
	font-size: 18px;
	font-weight: 300;
}

.scheduled-maintenances-container .scheduled-maintenance .updates-container .update:last-child{
	border-bottom: none;
}

.scheduled-maintenances-container .scheduled-maintenance .updates-container .update strong{
	display: block;
	font-weight: 500;
	margin-bottom: 5px;
}

.scheduled-maintenances-container .scheduled-maintenance .updates-container .update small{
	display: block;
	font-weight: 300;
	color: #848182;
	font-style: italic;
	margin-top: 5px;
}

.incidents-list .status-day.no-incidents{
	display: none;

}

.incidents-list .status-day .incident-container .incident-title{
	background-color: #F2F2F2 !important;
	padding: 10px 13px!important;
	border: none !important;
}

.incidents-list .status-day .incident-container .incident-title a{
	color: #000000 !important;
	text-decoration: none;
	text-shadow: none;
	font-size: 18px;
	font-weight: 500;
}

.incidents-list .status-day .incident-container .incident-title .pull-right{
	font-weight: 400;
	color: #000000 !important;
	text-decoration: none !important;
	text-shadow: none !important;
	font-size: 18px !important;
	border: none !important;
	white-space: normal;
}

.incidents-list .status-day .incident-container .updates-container{
	padding-left: 13px;
}

.incidents-list .status-day .incident-container .updates-container .update{
	border-bottom: 1px solid #DAD9D9;
	margin-bottom: 10px !important;
	padding-bottom: 10px !important;
	font-size: 18px;
	font-weight: 300;
}

.incidents-list .status-day .incident-container .updates-container .update:last-child{
	border-bottom: none;
}

.incidents-list .status-day .incident-container .updates-container .update strong{
	display: block;
	font-weight: 500;
	margin-bottom: 5px;
}

.incidents-list .status-day .incident-container .updates-container .update small{
	display: block;
	font-weight: 300;
	color: #848182;
	font-style: italic;
	margin-top: 5px;
}

.nav-item.mobile{
	border-radius: 20px !important;
	border: 1px solid #DAD9D9 !important;
	display: none !important;
}

.nav-item.mobile .nav-link{
	border:none;
}

.unresolved-incidents-title{
	text-align: center;
	margin-bottom: 15px;
}

.nav-item.mobile .dropdown-toggle::after{
	border-top: none;
	border-right: none;
	border-bottom: 0;
	border-left: 0.3em solid transparent;
	right: 0;
	border-style: solid;
	border-width: 2px 2px 0 0;
	content: '';
	display: inline-block;
	height: 0.45em;
	position: relative;
	transform: rotate(135deg);
	vertical-align: top;
	width: 0.45em;
	position: absolute;
	right: 20px;
	top: 14px;
}

.nav-item.mobile .dropdown-menu .dropdown-item button{
	width: 100%;

}

.dropdown-toggle{
	padding-left: 15px;
}

.flat-button.subscribe-button{
	text-decoration: none;
}

@media (max-width: 1400px) {
	.nav-item.mobile{
		display: block !important;
		width: 250px;
	}
	.nav-item.desktop{
		display: none !important;
	}
	.unresolved-incidents-title{
		text-align: left;
		margin-bottom: 15px;
	}
	.section-new-components .nav{
		justify-content: left;
	}
}

@media (max-width: 1000px) {
	.section-new-components .component-statuses-legend{
		display: inline !important;
	}
	.section-new-components .legend-item.title{
		display: block !important;
		margin-left: 0px !important;
		width: 100% !important;
		text-align: center !important;
		margin-bottom: 10px;
		margin-top: 25px;
	}
	.section-new-components .legend-item{
		display: inline-block !important;
		margin-left: 25px;
		margin-right: 0px !important;
		width: 110px;
		text-align: left;
	}
	.section-new-components .breaker{
		display: none !important;
	}

}

@media (max-width: 750px) {
	.hero .title {
		padding-top: 50px;
		padding-bottom: 45px;
	}

	.hero .navbar-top .button.support{
		display: none;
	}

	.hero .navbar-top .button.subscribe{
		display: none;
	}

	.hero .navbar-mobile{
		display: block;
	}
}


@media (max-width: 400px) {
	.nav-item.mobile{
		width: 100%;
	}

	.section-new-components .legend-item{
		width: 90px;
	}


	.component-inner-container .name{
		max-width: 100% !important;
		white-space: normal !important;
		font-weight: 700 !important;
	}
}


.show-updates-dropdown::after{
	content: '';
}

.updates-container .update.in.progress {
	padding: 10px 15px;
	height: 100%;
	display: flex;
	align-items: center;
}

.updates-container .update.in.progress strong{
	width: 130px;
}

.updates-container .update.in.progress small {
	width: 170px;
	padding-left: 30px;
}


/* Design Changes 01-24-2023 Start */
.layout-content.status.status-index .components-section .component-container.is-group.open .child-components-container {
	display: block !important;
}

.layout-content.status.status-index .components-section .component-container .child-components-container {
	display: none !important;
}

.history-footer-link {
	background-color: #079CEE;
	border-radius: 21px;
	color: #ffffff;
	display: inline-block;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.1em;
	line-height: 18px;
	padding: 12px 30px;
	margin: 0 10px 10px 0;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.2s, border 0.2s;
	border: 2px solid #079CEE;
}

.history-footer-link:hover {
	color: #079CEE;
	background-color: white;
}

.incident-warning img{
	max-height: 20px;
	margin-right: 10px;
}

.legend-item.status-blue {
	margin-right: 0px !important;
}

.page-status {
	max-width: 960px;
	margin: 0 auto;
	margin-top: 50px;
	margin-bottom: 0px !important;
}
.incidents-list {
	display: none;
}

@media (max-width: 960px) {
	.page-status {
		max-width: 400px;
	}
}
/* Design Changes 01-24-2023 End */


/* ==========================================================================
   FIX 2026-08-07 — Incident page "Subscribe to Updates" modal
   --------------------------------------------------------------------------
   Statuspage renders its own subscribe modal using Bootstrap 2 markup:

       <div class="modal hide fade" id="subscribe-modal-XXXXXXXX">

   Bootstrap 5's stylesheet (loaded in Custom header HTML) is parsed AFTER
   Statuspage's own CSS, so Bootstrap 5's .modal / .modal-backdrop / .fade
   rules win. The result: the dialog renders full-viewport, fully transparent
   and positioned off-screen, and the backdrop never fades in — which also
   stops Statuspage's JS from ever revealing the dialog.

   The rules below re-assert the Bootstrap 2 geometry Statuspage expects.
   Keep these as long as Bootstrap 5 is loaded in the header.
   Paired with the noConflict() fix in Custom footer HTML — you need BOTH.

   Why every selector below starts with "html": Statuspage serves this file
   from the <head>, but the Bootstrap 5 <link> sits in the <body>, so
   Bootstrap 5 is always the later stylesheet and wins any specificity tie.
   The leading "html" adds just enough weight to win without resorting to
   !important. Don't strip it — a plain ".modal { }" rule here loses silently.
   ========================================================================== */

html .modal-backdrop {
	width: 100%;
	height: 100%;
	background-color: #000;
}

html .modal-backdrop.fade {
	opacity: 0;
	transition: opacity 0.15s linear;
}

html .modal-backdrop.fade.in {
	opacity: 0.7;
}

html .modal.hide {
	display: none;
}

html .modal {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 1060;
	width: 600px;
	max-width: 92vw;
	height: auto;
	margin: 0;
	padding: 0;
	overflow: visible;
	background-color: #fff;
	border-radius: 6px;
	box-shadow: 0 3px 14px rgba(0, 0, 0, 0.35);
}

html .modal.fade {
	opacity: 0;
	transform: translate(-50%, -44%);
	transition: opacity 0.2s linear, transform 0.2s ease-out;
}

html .modal.fade.in {
	opacity: 1;
	transform: translate(-50%, -50%);
}

/* Bootstrap 5 makes .modal-content a flex column, which distorts the
   subscribe form. Reset it and let tall content scroll inside the dialog. */
html .modal .modal-content {
	display: block;
	max-height: 82vh;
	padding: 25px;
	overflow-y: auto;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* Bootstrap 5 dropped its .close component, so Statuspage's close link was
   left unstyled and rendered underlined at the top LEFT of the dialog.
   Pin it to the top right instead. */
html .modal .close {
	position: absolute;
	top: 12px;
	right: 18px;
	z-index: 2;
	float: none;
	margin: 0;
	font-size: 26px;
	font-weight: 400;
	line-height: 1;
	color: #000;
	text-decoration: none;
	opacity: 0.45;
}

html .modal .close:hover {
	text-decoration: none;
	opacity: 1;
}

/* Statuspage's JS sets an inline max-height on .modal-body that is shorter
   than the form inside it, hiding the "Enter mobile number" field in an
   inner scroll area nobody thinks to scroll - so SMS signup looks broken.
   Inline styles need !important to beat. Tall content still scrolls, via
   the .modal-content rule above. Affects the incident subscribe modal only;
   the header "Subscribe to Updates" panel is a different widget entirely. */
html .modal .modal-body {
	max-height: none !important;
	overflow: visible !important;
}


/* ==========================================================================
   FIX 2026-08-07 - Top-of-page spacing on the status and history pages
   --------------------------------------------------------------------------
   The Custom footer HTML moves .component-statuses-legend into
   .section-status-legend, then 200ms later moves the legend itself back out
   to the region tabs. That leaves an empty wrapper div behind which still
   carries a 70px bottom margin, padding out the grey welcome band.
   Paired with the .section-status-legend rule earlier in this file.
   ========================================================================== */

html .section-status-legend > .components-section {
	margin-bottom: 0 !important;
}

html .section-status-legend .container p:last-child {
	margin-bottom: 0;
}


/* ==========================================================================
   FIX 2026-08-07 - "All Systems Operational" banner + legend row
   --------------------------------------------------------------------------
   The footer JS used to append .page-status into .component-statuses-legend,
   which made the green banner a flex item wedged between the legend title and
   the status keys: it landed left of centre, stretched to 960px, and blew a
   400px hole through the middle of the legend row. The footer now inserts it
   under the "Incidents across areas" heading instead; these rules size and
   centre it there. Paired with the insertAfter() in Custom footer HTML.
   ========================================================================== */

html .section-new-components > .page-status {
	width: -moz-fit-content;
	width: fit-content;
	max-width: 100%;
	margin: 18px auto 24px !important;
	float: none;
	text-align: center;
}

html .section-new-components > .page-status .status {
	text-align: center;
}

html .section-new-components .components-section .component-statuses-legend {
	align-items: center;
}

/* status-blue carries the "last item" margin reset, but the order:N values
   put status-red last in visual order - so the whole group sat 40px off
   centre. Reset the real last item instead. */
html .section-new-components .components-section .component-statuses-legend .legend-item.status-red {
	margin-right: 0 !important;
}