.flex-layout.content_kpis {
	--bg-color: var(--neutral-50);
	--text-color: var(--primary-100);
	padding-inline: var(--pk-site-gutter);
}

.flex-layout.content_kpis .content-kpis-row {
	align-items: center;
}

.flex-layout.content_kpis .kpi-bars {
	display: flex;
	align-items: stretch;
	gap: max(1rem, calc(1 * var(--su)));
	height: max(21.875rem, calc(21.875 * var(--su)));
}

.flex-layout.content_kpis .kpi-bar {
	position: relative;
	min-width: 0;
	flex: 1;
	overflow: hidden;
	background-color: var(--support-1-50);
}

.flex-layout.content_kpis .kpi-fill {
	position: absolute;
	inset: auto 0 0;
	height: var(--kpi-fill-height);
	background-color: var(--support-1);
	transform-origin: center bottom;
}

.flex-layout.content_kpis .kpi-content {
	position: absolute;
	inset: auto 0 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: max(.5rem, calc(.5 * var(--su)));
	padding: max(2rem, calc(2 * var(--su)));
}

.flex-layout.content_kpis .kpi-value {
	display: inline-flex;
	font-family: var(--pk-heading-font-family);
	font-size: max(2.5rem, calc(2.5 * var(--su)));
	font-weight: 300;
	line-height: var(--pk-heading-line-height);
	white-space: nowrap;
}

.flex-layout.content_kpis .kpi-text {
	color: var(--primary-80);
	font-size: var(--body-xs-regular);
	line-height: var(--pk-text-line-height);
}

.flex-layout.content_kpis .kpi-text p {
	margin: 0;
}

.flex-layout.content_kpis .content-col {
	box-sizing: border-box;
	min-height: max(21.875rem, calc(21.875 * var(--su)));
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	padding: max(2.5rem, calc(2.5 * var(--su))) max(3rem, calc(3 * var(--su)));
}

.flex-layout.content_kpis .content-col .pk-heading {
	margin: 0 0 max(1rem, calc(1 * var(--su)));
}

.flex-layout.content_kpis .content-col .pk-text p {
	margin-top: 0;
}

.flex-layout.content_kpis .content-col .pk-button-group {
	margin-top: max(1.5rem, calc(1.5 * var(--su)));
}

@media screen and (max-width: 991px) {

	.flex-layout.content_kpis .content-col {
		order: 0;
		min-height: 0;
		padding: 0;
	}

	.flex-layout.content_kpis .kpi-col {
		order: 1;
	}
}

@media screen and (max-width: 767px) {

	.flex-layout.content_kpis .kpi-bars {
		height: max(19rem, calc(19 * var(--su)));
	}

	.flex-layout.content_kpis .kpi-content {
		padding: max(1.25rem, calc(1.25 * var(--su)));
	}
}

@media (prefers-reduced-motion: reduce) {

	.flex-layout.content_kpis .kpi-fill,
	.flex-layout.content_kpis .kpi-content {
		transform: none;
		opacity: 1;
	}
}