.info-box {
	position: relative;
	padding: var(--card-padding, 2rem);
	padding-bottom: 2.5rem;
	--info-bg: var(--surface-card);
	--info-bubble-color: var(--surface-inverse);
	--info-text-color: var(--text-secondary);
	background: var(--info-bg);
	color: var(--info-text-color);
	height: 100%;
}
.info-box h2,
.info-box h3,
.info-box h4,
.info-box h5,
.info-box h1{
	color: var(--info-text-color);
}

.info-box:before {
	content: '';
	display: block;
	border-radius: 100%;
	width: 1.5rem;
	height: 1.5rem;
	flex: 0 0 1.5rem;
	margin-bottom: 0.5rem;
	background: var(--info-bubble-color);
}
.info-box--hide-dot.info-box:before{
	display: none;
}
.info-box__link{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 100;
	font-size: 0;
	text-indent: -9999px;
	overflow: hidden;
	white-space: nowrap;
}
.info-box--inline{
	display: flex;
	align-items: baseline;
	justify-content: flex-start;
	gap: 1rem;
	padding-bottom: var(--card-padding, 2rem);
}
.info-box.info-box--inline:before{
	margin-bottom: 0;
	position: relative;
	top: 3px;
}
.info-box ul {
	margin-left: 2rem;
	margin-bottom: 0.5rem;
}

.info-box ul li {
	margin-bottom: 0; /* 0.5rem */
}

.info-box ul:last-child, .info-box ul li:last-child {
	margin-bottom: 0;
}

.info-box p {
	margin-bottom: 0.5rem;
}
.info-box .link-no-decor:hover{
	color: var(--accent-hover) !important;
	text-decoration: underline;
}

.info-box strong {
	font-weight: 600;
}

.info-box .body-s {
	line-height: 1.5;
}

.info-box p:last-child {
	margin-bottom: 0;
}

/* Variations */
.info-box--white {
	--info-bg: var(--surface-card);
	--info-bubble-color: var(--surface-inverse);
	--info-text-color: var(--text-secondary);
}
.info-box--white h2{
	color: var(--text-secondary);
}

.info-box--info {
	--info-bg: var(--accent-subtle);
	--info-bubble-color: var(--accent-default);
	--info-text-color: var(--accent-text-secondary);
}

.info-box--warning {
	--info-bg: var(--crisis-subtle);
	--info-bubble-color: var(--crisis-default);
	--info-text-color: var(--crisis-text-secondary);
}

.info-box--alert {
	--info-bg: var(--crisis-hover);
	--info-bubble-color: var(--surface-input);
	--info-text-color: var(--text-inverse);
}

.info-box--success {
	--info-bg: var(--success-subtle);
	--info-bubble-color: var(--success-text-secondary);
	--info-text-color: var(--success-text-primary);
}

.info-box--scarlet {
	--info-bg: var(--color-apricot-700);
	--info-bubble-color: var(--color-surface-100);
	--info-text-color: var(--color-surface-100);
}

.info-box--accent {
	--info-bg: var(--accent-subtle);
	--info-bubble-color: var(--accent-default);
	--info-text-color: var(--accent-text-secondary);
}

.info-box--surface {
	--info-bg: var(--color-surface-900);
	--info-bubble-color: var(--color-surface-100);
	--info-text-color: var(--color-surface-100);
}

.info-box--fuchsia {
	--info-bg: var(--color-fuchsia-700);
	--info-bubble-color: var(--color-surface-100);
	--info-text-color: var(--color-surface-100);
}

.info-box--apricot {
	--info-bg: var(--color-apricot-700);
	--info-bubble-color: var(--color-surface-100);
	--info-text-color: var(--color-surface-100);
}

.info-box--yellow {
	--info-bg: var(--color-yellow-800);
	--info-bubble-color: var(--color-surface-100);
	--info-text-color: var(--color-surface-100);
}

.info-box--blue {
	--info-bg: var(--color-blue-700);
	--info-bubble-color: var(--color-surface-100);
	--info-text-color: var(--color-surface-100);
}

.info-box--azure {
	--info-bg: var(--color-azure-700);
	--info-bubble-color: var(--color-surface-100);
	--info-text-color: var(--color-surface-100);
}

.info-box--green {
	--info-bg: var(--color-green-800);
	--info-bubble-color: var(--color-surface-100);
	--info-text-color: var(--color-surface-100);
}

.info-box--flamingo {
	--info-bg: var(--color-flamingo-700);
	--info-bubble-color: var(--color-surface-100);
	--info-text-color: var(--color-surface-100);
}

.info-box--scarlet-100 {
	--info-bg: var(--color-scarlet-1000);
	--info-bubble-color: var(--color-surface-100);
	--info-text-color: var(--color-surface-100);
}

.info-box--scarlet.colorful {
	--info-bg: var(--color-apricot-100);
	--info-bubble-color: var(--color-apricot-800);
	--info-text-color: var(--color-apricot-900);
}

.info-box--surface.colorful {
	--info-bg: var(--color-surface-100);
	--info-bubble-color: var(--color-surface-900);
	--info-text-color: var(--color-surface-900);
}

.info-box--fuchsia.colorful {
	--info-bg: var(--color-fuchsia-200);
	--info-bubble-color: var(--color-fuchsia-800);
	--info-text-color: var(--color-fuchsia-800);
}

.info-box--apricot.colorful {
	--info-bg: var(--color-apricot-200);
	--info-bubble-color: var(--color-apricot-900);
	--info-text-color: var(--color-apricot-900);
}

.info-box--yellow.colorful {
	--info-bg: var(--color-yellow-200);
	--info-bubble-color: var(--color-yellow-900);
	--info-text-color: var(--color-yellow-900);
}

.info-box--blue.colorful {
	--info-bg: var(--color-blue-200);
	--info-bubble-color: var(--color-blue-900);
	--info-text-color: var(--color-blue-900);
}

.info-box--azure.colorful {
	--info-bg: var(--color-azure-200);
	--info-bubble-color: var(--color-azure-900);
	--info-text-color: var(--color-azure-900);
}

.info-box--green.colorful {
	--info-bg: var(--color-green-200);
	--info-bubble-color: var(--color-green-900);
	--info-text-color: var(--color-green-900);
}

.info-box--flamingo.colorful {
	--info-bg: var(--color-flamingo-200);
	--info-bubble-color: var(--color-flamingo-900);
	--info-text-color: var(--color-flamingo-900);
}

.info-box--scarlet-100.colorful {
	--info-bg: var(--color-scarlet-1000);
	--info-bubble-color: var(--color-surface-100);
	--info-text-color: var(--color-surface-100);
}

/*@media (prefers-color-scheme: dark) {*/

/*	.info-box--scarlet,*/
/*	.info-box--surface,*/
/*	.info-box--fuchsia,*/
/*	.info-box--apricot,*/
/*	.info-box--yellow,*/
/*	.info-box--blue,*/
/*	.info-box--azure,*/
/*	.info-box--green,*/
/*	.info-box--flamingo,*/
/*	.info-box--scarlet-100 {*/
/*		color-scheme: dark;*/
/*	}*/

/*	.info-box--scarlet {*/
/*		--info-bg: var(--color-apricot-100);*/
/*		--info-bubble-color: var(--color-apricot-800);*/
/*		--info-text-color: var(--color-apricot-900);*/
/*	}*/

/*	.info-box--surface {*/
/*		--info-bg: var(--color-surface-100);*/
/*		--info-bubble-color: var(--color-surface-700);*/
/*		--info-text-color: var(--color-surface-900);*/
/*	}*/

/*	.info-box--fuchsia {*/
/*		--info-bg: var(--color-fuchsia-200);*/
/*		--info-bubble-color: var(--color-fuchsia-600);*/
/*		--info-text-color: var(--color-fuchsia-800);*/
/*	}*/

/*	.info-box--apricot {*/
/*		--info-bg: var(--color-apricot-200);*/
/*		--info-bubble-color: var(--color-apricot-600);*/
/*		--info-text-color: var(--color-apricot-800);*/
/*	}*/

/*	.info-box--yellow {*/
/*		--info-bg: var(--color-yellow-200);*/
/*		--info-bubble-color: var(--color-yellow-700);*/
/*		--info-text-color: var(--color-yellow-900);*/
/*	}*/

/*	.info-box--blue {*/
/*		--info-bg: var(--color-blue-200);*/
/*		--info-bubble-color: var(--color-blue-700);*/
/*		--info-text-color: var(--color-blue-900);*/
/*	}*/

/*	.info-box--azure {*/
/*		--info-bg: var(--color-azure-200);*/
/*		--info-bubble-color: var(--color-azure-600);*/
/*		--info-text-color: var(--color-azure-800);*/
/*	}*/

/*	.info-box--green {*/
/*		--info-bg: var(--color-green-200);*/
/*		--info-bubble-color: var(--color-green-600);*/
/*		--info-text-color: var(--color-green-800);*/
/*	}*/

/*	.info-box--flamingo {*/
/*		--info-bg: var(--color-flamingo-200);*/
/*		--info-bubble-color: var(--color-flamingo-600);*/
/*		--info-text-color: var(--color-flamingo-800);*/
/*	}*/

/*	.info-box--scarlet-100 {*/
/*		--info-bg: var(--color-scarlet-1000);*/
/*		--info-bubble-color: var(--color-surface-100);*/
/*		--info-text-color: var(--color-surface-100);*/
/*	}*/
/*}*/

/* BEGIN: Tablet and desktop */
@media only screen and (min-width: 768px) {
	.info-box {
		padding-bottom: 3rem;
	}
	.info-box.info-box--inline{
		padding-bottom: var(--card-padding, 2rem);
	}
	.info-box:before {
		margin-bottom: 1rem;
	}
}

/* END: Tablet and desktop */
@media only screen and (max-width: 767.5px) {

	.info-box {
		padding: var(--card-padding, 1.35rem);
		padding-bottom: 2.2rem;
	}
	.info-box.info-box--inline{
		padding-bottom: var(--card-padding, 1.35rem);
	}
	.info-box ul {
		margin-left: 1.75rem;
	}
}

/* BEGIN: Mobile */
@media only screen and (max-width: 375px) {
	.info-box ul {
		margin-bottom: 0.25rem;
	}
	.info-box ul li {
    	margin-bottom: 0.125rem;
	}	
}
/* END: Mobile */