.fs-vandportalen {
	--fs-vandportalen-card-bg: #f6f7f9;
	--fs-vandportalen-card-border: #d9dde3;
	--fs-vandportalen-card-surface: #ffffff;
	--fs-vandportalen-chart-accent: #4b5563;
	--fs-vandportalen-card-text: #20242a;
	--fs-vandportalen-card-muted: #425466;
	--fs-vandportalen-card-notice: #dba617;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	min-width: 0;
	border: 1px solid var(--fs-vandportalen-card-border);
	border-radius: 8px;
	background: var(--fs-vandportalen-card-bg);
	padding: 1rem 1.25rem;
}

.fs-vandportalen--palette-blue {
	--fs-vandportalen-card-bg: #f5f8fa;
	--fs-vandportalen-card-border: #d8e1e8;
	--fs-vandportalen-card-surface: #ffffff;
	--fs-vandportalen-chart-accent: #2b6487;
	--fs-vandportalen-card-text: #1f2a33;
}

.fs-vandportalen--palette-green {
	--fs-vandportalen-card-bg: #f4faf6;
	--fs-vandportalen-card-border: #cfded4;
	--fs-vandportalen-card-surface: #ffffff;
	--fs-vandportalen-chart-accent: #2f6f4e;
	--fs-vandportalen-card-text: #1f2f28;
}

.fs-vandportalen--palette-orange {
	--fs-vandportalen-card-bg: #fff7f3;
	--fs-vandportalen-card-border: #ead4cc;
	--fs-vandportalen-card-surface: #ffffff;
	--fs-vandportalen-chart-accent: #d94f2b;
	--fs-vandportalen-card-text: #2f211d;
}

.fs-vandportalen--palette-earth {
	--fs-vandportalen-card-bg: #faf7ef;
	--fs-vandportalen-card-border: #d8d0bd;
	--fs-vandportalen-card-surface: #ffffff;
	--fs-vandportalen-chart-accent: #7a6a43;
	--fs-vandportalen-card-text: #2d2a21;
}

.fs-vandportalen__title {
	margin: 0 0 .5rem;
	color: var(--fs-vandportalen-card-text);
	font-size: 1.1rem;
}

.fs-vandportalen .fs-vandportalen__value {
	margin: 0;
	font-size: 1.35rem;
	font-weight: 700;
}

.fs-vandportalen__value span,
.fs-vandportalen__time {
	font-size: .9rem;
	font-weight: 400;
	color: var(--fs-vandportalen-card-muted);
}

.fs-vandportalen .fs-vandportalen__time {
	margin: .2rem 0 0;
	font-size: .8rem;
	font-style: italic;
}

.fs-vandportalen--layout-card .fs-vandportalen__measurements,
.fs-vandportalen--layout-split .fs-vandportalen__measurements,
.fs-vandportalen--layout-compact .fs-vandportalen__measurements {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.fs-vandportalen--layout-card .fs-vandportalen__measurement + .fs-vandportalen__measurement,
.fs-vandportalen--layout-compact .fs-vandportalen__measurement + .fs-vandportalen__measurement {
	border-left: 1px solid var(--fs-vandportalen-card-border);
	padding-left: 1rem;
}

.fs-vandportalen--layout-split .fs-vandportalen__measurement {
	padding: .85rem;
	border: 1px solid var(--fs-vandportalen-card-border);
	border-radius: 6px;
	background: var(--fs-vandportalen-card-surface);
}

.fs-vandportalen--layout-stacked .fs-vandportalen__measurement + .fs-vandportalen__measurement {
	margin-top: .85rem;
	padding-top: .85rem;
	border-top: 1px solid var(--fs-vandportalen-card-border);
}

.fs-vandportalen--layout-inline {
	padding-top: .8rem;
	padding-bottom: .8rem;
}

.fs-vandportalen__inline-values {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem 1rem;
	margin: 0;
}

.fs-vandportalen__inline-values span + span::before {
	margin-right: 1rem;
	color: var(--fs-vandportalen-card-muted);
	content: "·";
}

.fs-vandportalen__inline-values strong {
	font-weight: 600;
}

.fs-vandportalen--layout-compact {
	padding-top: .75rem;
	padding-bottom: .75rem;
	background: var(--fs-vandportalen-card-surface);
}

.fs-vandportalen--layout-compact .fs-vandportalen__value {
	font-size: 1.1rem;
}

.fs-vandportalen--layout-compact .fs-vandportalen__time {
	display: none;
}

.fs-vandportalen__table-wrap {
	overflow-x: auto;
}

.fs-vandportalen__table {
	width: 100%;
	border-collapse: collapse;
	font-size: .9rem;
}

.fs-vandportalen__table th,
.fs-vandportalen__table td {
	padding: .65rem .75rem;
	border: 1px solid var(--fs-vandportalen-card-border);
	text-align: left;
}

.fs-vandportalen__table thead th {
	background: var(--fs-vandportalen-card-surface);
	font-size: .8rem;
}

.fs-vandportalen--notice {
	border-left: 4px solid var(--fs-vandportalen-card-notice);
}

.fs-vandportalen__chart { min-width: 0; margin-top: 1rem; border-top: 1px solid var(--fs-vandportalen-card-border); padding-top: .75rem; }
.fs-vandportalen__chart p { margin: 0 0 .25rem; }
.fs-vandportalen__chart small, .fs-vandportalen__chart-range { color: var(--fs-vandportalen-card-muted); font-size: .8rem; font-weight: 400; }
.fs-vandportalen__chart-canvas-wrap { position: relative; height: 260px; background: var(--fs-vandportalen-card-surface); border-radius: 4px; }
.fs-vandportalen__chart-canvas { display: block; width: 100% !important; height: 100% !important; }
.fs-vandportalen__chart .fs-vandportalen__chart-range { margin-top: .5rem; }
.fs-vandportalen__chart--error .fs-vandportalen__chart-range { color: var(--fs-vandportalen-card-notice); }

@media (max-width: 480px) {
	.fs-vandportalen {
		padding: 1rem;
	}

	.fs-vandportalen--layout-card .fs-vandportalen__measurements,
	.fs-vandportalen--layout-split .fs-vandportalen__measurements,
	.fs-vandportalen--layout-compact .fs-vandportalen__measurements {
		grid-template-columns: 1fr;
	}

	.fs-vandportalen--layout-card .fs-vandportalen__measurement + .fs-vandportalen__measurement,
	.fs-vandportalen--layout-compact .fs-vandportalen__measurement + .fs-vandportalen__measurement {
		border-top: 1px solid var(--fs-vandportalen-card-border);
		border-left: 0;
		padding-top: 1rem;
		padding-left: 0;
	}

	.fs-vandportalen__inline-values span + span::before {
		margin-right: .5rem;
	}

	.fs-vandportalen__chart-canvas-wrap {
		height: 220px;
	}
}