/* 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;
}

<style>

	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;
	}

	.section-status-legend{
		background-color: #F9F9F9;
    	min-height: 180px;
		margin-bottom: 50px;
		padding-top: 40px;
	}

	.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 .date{

	}
	.incidents-list .status-day .incident-container{

	}

	.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 */
</style>