
:root {
	--alert-font-size: var( --bs-small-font-size );
	--alert-bar-padding-small: var( --bs-spacer-2 );
}

.modalert-d-none:not( :first-child ) {
	display: none !important;
}
.modalert-d-none {
	padding-bottom: 0 !important;
	background: none !important;
}

/* Staxxo first-block behavior */
/* Hide this block while loading, and pass the top-padding on to the next block. */
/* Note this is vulnarable because it needs to stay the same as in owcb.css */
.modalert-d-none.-theme-staxxo:first-child {
	display: none !important;
}
.page-content > .modalert-d-none.-theme-staxxo:first-child + * {
	padding-top: var( --bs-spacer-8 ) !important; /* !Overwrite section + .page-content-content { pt-0 } */
}
@media ( min-width: 1400px ) {
	.page-content > .modalert-d-none.-theme-staxxo:first-child + * {
		padding-top: var( --bs-spacer-9 ) !important; /* !Overwrite section + .page-content-content { pt-0 } */
	}
}

.alert-bar {
	font-size: var( --alert-font-size );
}
.alert-bar.-theme-staxxo {
	padding: var( --bs-spacer-2 ) 0;
}

/* When the alert bar lives as a sibling above .page-wrapper (Staxxo layout),
   anchor any absolutely-positioned header inside the wrapper to the wrapper itself
   so it sits below the alert bar instead of jumping to the viewport top. */
.alert-bar.-theme-staxxo + .page-wrapper {
	position: relative;
}

@media ( max-width: 767px ) {
	.alert-bar {
		padding-top: var( --alert-bar-padding-small );
		padding-bottom: var( --alert-bar-padding-small );
	}
}
@media ( min-width: 768px ) {
	.alert-bar {
		line-height: var( --toptopbar-height );
	}
	.alert-bar .-content {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.alert-bar.-theme-staxxo .-content {
		white-space: normal;
	}
}

/* Link colors */
.modalert-alert.text-dark.-link-dark a,
.modalert-alert.text-light.-link-light a,
.modalert-alert.text-white.-link-white a,
.modalert-alert.text-primary.-link-primary a,
.modalert-alert.text-secondary.-link-secondary a,
.modalert-alert.text-info.-link-info a,
.modalert-alert.text-success.-link-success a,
.modalert-alert.text-warning.-link-warning a,
.modalert-alert.text-danger.-link-danger a,
.modalert-alert.text-cta.-link-cta a {
	text-decoration: underline;
}
.modalert-alert.-link-dark a {
	color: var( --bs-dark );
}
.modalert-alert.-link-light a {
	color: var( --bs-light );
}
.modalert-alert.-link-white a {
	color: var( --bs-white );
}
.modalert-alert.-link-primary a {
	color: var( --bs-primary );
}
.modalert-alert.-link-secondary a {
	color: var( --bs-secondary );
}
.modalert-alert.-link-info a {
	color: var( --bs-info );
}
.modalert-alert.-link-success a {
	color: var( --bs-success );
}
.modalert-alert.-link-warning a {
	color: var( --bs-warning );
}
.modalert-alert.-link-danger a {
	color: var( --bs-danger );
}
.modalert-alert.-link-cta a {
	color: var( --bs-cta );
}
