.component.warning-banner {
	max-width: 100%;
	margin: 0;
	padding-left: 0;
	padding-right: 0
}

.component.warning-banner>div.component-content {
	padding-left: 50px;
	padding-right: 50px
}

@media (max-width:1439px) {
	.component.warning-banner>div.component-content {
		padding-left: 25px;
		padding-right: 25px
	}
}

@media (max-width:768px) {
	.component.warning-banner>div.component-content {
		padding-left: 15px;
		padding-right: 15px
	}
}

.component.warning-banner {
	--warning-banner-breakpoint: 1024px;
	--warning-banner-dark-background: #12225c;
	--warning-banner-dark-font-color: #fff;
	--warning-banner-dark-border-color: #fff;
	--warning-banner-light-background: #f9f9fc;
	--warning-banner-light-font-color: #12225c;
	--warning-banner-light-border-color: #12225c;
	position: relative;
	z-index: 2048
}

@media (min-width:1025px) {
	.component.warning-banner>.component-content>div {
		margin-top: 10px;
		margin-bottom: 10px;
		font-size: 16px;
		line-height: 22px;
		text-align: center;
		border: 1px solid #12225c;
		padding: 10px
	}

	.component.warning-banner>.component-content>div strong {
		font-weight: 700
	}

	.component.warning-banner>.component-content>div .field-bannercaptionmobile {
		display: none
	}
}

@media (max-width:1024px) {
	.component.warning-banner>.component-content>div {
		margin-top: 10px;
		margin-bottom: 10px;
		display: block;
		border: 1px solid #12225c;
		padding: 4px 4px 8px 4px;
		font-size: 12px;
		line-height: 14px;
		letter-spacing: .01em;
		text-align: center;
		line-height: 16px
	}

	.component.warning-banner>.component-content>div strong {
		font-weight: 700
	}

	.component.warning-banner>.component-content>div:after {
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		content: "";
		position: absolute;
		bottom: 4px;
		left: 50%;
		transform: translateX(-50%);
		width: 12px;
		height: 12px;
		transition: transform .3s
	}

	.component.warning-banner>.component-content>div .field-bannercaptiondesktop {
		display: none
	}

	.expanded.component.warning-banner>.component-content>div .field-bannercaptionmobile {
		display: none
	}

	.expanded.component.warning-banner>.component-content>div .field-bannercaptiondesktop {
		display: block
	}
}

.component.warning-banner.dark-theme {
	background: var(--warning-banner-dark-background);
	color: var(--warning-banner-dark-font-color)
}

.component.warning-banner.dark-theme>.component-content>div {
	border-color: var(--warning-banner-dark-border-color)
}

@media (max-width:1023px) {
	.component.warning-banner.dark-theme>.component-content>div:after {
		background-color: var(--warning-banner-dark-background)
	}
}

.component.warning-banner.light-theme {
	background: var(--warning-banner-light-background);
	color: var(--warning-banner-light-font-color)
}

.component.warning-banner.light-theme>.component-content>div {
	border-color: var(--warning-banner-light-border-color)
}

@media (max-width:1023px) {
	.component.warning-banner.light-theme>.component-content>div:after {
		background-color: var(--warning-banner-light-background)
	}

	.expanded.component.warning-banner.light-theme>.component-content>div:after {
		background-color: var(--warning-banner-light-background)
	}
}

.component.warning-banner.is-non-sticky {
	transition: margin-top .1s linear 0s
}

@media (max-width:1023px) {
	.component.warning-banner>.component-content>div:after {
		background-size: auto;
		transform: translateY(50%);
		border-bottom-right-radius: 50%;
		border-bottom-left-radius: 50%;
		bottom: -6px;
		width: 22px;
		height: 16px;
		line-height: 16px;
		text-align: center
	}
}

@media (max-width:1023px) {
	.component.warning-banner.dark-theme>.component-content>div:after {
		background-image: url(../../../images/WarningBanner/plus-white.svg)
	}

	.expanded.component.warning-banner.dark-theme>.component-content>div:after {
		background-image: url(../../../images/WarningBanner/minus-white.svg)
	}
}

@media (max-width:1023px) {
	.component.warning-banner.light-theme>.component-content>div:after {
		background-image: url(../../../images/WarningBanner/plus-circle.svg)
	}

	.expanded.component.warning-banner.light-theme>.component-content>div:after {
		background-image: url(../../../images/WarningBanner/minus-circle.svg)
	}
}

body.professional:not(.on-page-editor) .component.warning-banner.light-theme {
	background-color: #191919
}

body.professional:not(.on-page-editor) .component.warning-banner.light-theme>.component-content>div {
	border: none
}

body.professional:not(.on-page-editor) .component.warning-banner.light-theme .field-bannercaptiondesktop,
body.professional:not(.on-page-editor) .component.warning-banner.light-theme .field-bannercaptionmobile {
	color: #fff;
	border-color: transparent
}

body.professional:not(.on-page-editor) .component.warning-banner.light-theme>.component-content>div:after {
	background-color: #191919;
	background-image: url(../../../images/WarningBanner/plus-white.svg);
	width: 20px;
	height: 20px;
	border-radius: 10px;
	bottom: -10px;
	background-size: 16px
}

body.professional:not(.on-page-editor) .component.warning-banner.light-theme.expanded>.component-content>div:after {
	background-image: url(../../../images/WarningBanner/minus-white.svg)
}

body.professional:not(.on-page-editor) .component.warning-banner .field-bannercaptiondesktop,
body.professional:not(.on-page-editor) .component.warning-banner .field-bannercaptionmobile {
	line-height: 20px
}