:root {
	--open-sans: 'Open Sans', sans-serif;
	--font-weight-light: 300;
	--font-weight-regular: 400;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	--line-height-150: 150%;
	--line-height-120: 120%;

	--font-style-italic: italic;
	--font-style-uppercase: uppercase;

	/* font sizes and spacing for small charts width < 400px */
	--font-size-s-s: 12px;
	--font-size-s-m: 14px;
	--font-size-s-l: 16px;

	--space-s-xxs: 2px;
	--space-s-xs: 4px;
	--space-s-s: 6px;
	--space-s-m: 12px;
	--space-s-l: 14px;
	--space-s-xl: 16px;

	/* font sizes and spacing for medium charts: width 400-700px */
	--font-size-m-s: 13px;
	--font-size-m-m: 15px;
	--font-size-m-l: 18px;

	--space-m-xxs: 3px;
	--space-m-xs: 6px;
	--space-m-s: 9px;
	--space-m-m: 15px;
	--space-m-l: 18px;
	--space-m-xl: 21px;

	/* font sizes and spacing for large charts: width >700px */
	--font-size-l-s: 14px;
	--font-size-l-m: 16px;
	--font-size-l-l: 20px;

	--space-l-xxs: 4px;
	--space-l-xs: 8px;
	--space-l-s: 12px;
	--space-l-m: 16px;
	--space-l-l: 20px;
	--space-l-xl: 24px;
}

.chartSizeS {
	--font-size-s: var(--font-size-s-s);
	--font-size-m: var(--font-size-s-m);
	--font-size-l: var(--font-size-s-l);

	--space-2xs: var(--space-s-xxs);
	--space-xs: var(--space-s-xs);
	--space-s: var(--space-s-s);
	--space-m: var(--space-s-m);
	--space-l: var(--space-s-l);
	--space-xl: var(--space-s-xl);
}

.chartSizeM {
	--font-size-s: var(--font-size-m-s);
	--font-size-m: var(--font-size-m-m);
	--font-size-l: var(--font-size-m-l);

	--space-2xs: var(--space-m-xxs);
	--space-xs: var(--space-m-xs);
	--space-s: var(--space-m-s);
	--space-m: var(--space-m-m);
	--space-l: var(--space-m-l);
	--space-xl: var(--space-m-xl);
}
.chartSizeL {
	--font-size-s: var(--font-size-l-s);
	--font-size-m: var(--font-size-l-m);
	--font-size-l: var(--font-size-l-l);

	--space-2xs: var(--space-l-xxs);
	--space-xs: var(--space-l-xs);
	--space-s: var(--space-l-s);
	--space-m: var(--space-l-m);
	--space-l: var(--space-l-l);
	--space-xl: var(--space-l-xl);
}

.vis {
	font-size: var(--font-size-m);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-120);
	color: var(--text);
	fill: var(--text);
}

.vis .title {
	font-size: var(--font-size-l);
	font-weight: var(--font-weight-bold);
}

.vis .subTitle {
	color: var(--textSubtle);
}

.vis .noteTitle {
	font-size: var(--font-size-s);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-150);
}

.vis .note {
	font-size: var(--font-size-s);
	line-height: var(--line-height-150);
	color: var(--textSubtle);
}

.vis .axisLabel,
.vis .legendTitle {
	font-weight: var(--font-weight-semibold);
}

.vis .tickLabel {
	color: var(--textSubtle);
	fill: var(--textSubtle);
}

.vis .categoryLabel {
	font-size: var(--font-size-s);
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
}