@charset "UTF-8";

div#diagram {
	position: relative;
}

div#diagram>svg.pie {
	padding: 1rem;
}

div#diagram>svg.pie>circle {
	stroke-width: 10;
	stroke-dasharray: calc(31.4 * var(--size, 0)), 31.4;
	fill: transparent;
}

div#diagram>svg.pie>circle.background {
	fill: var(--diagram-color-0);
}

div#diagram>svg.pie>circle:nth-of-type(1) {
	stroke: var(--diagram-color-1);
}

div#diagram>svg.pie>circle:nth-of-type(2) {
	stroke: var(--diagram-color-2);
}

div#diagram>svg.pie>circle:nth-of-type(3) {
	stroke: var(--diagram-color-3);
}

div#diagram>svg.pie>circle:nth-of-type(4) {
	stroke: var(--diagram-color-4);
}

div#diagram>svg.pie>circle:nth-of-type(5) {
	stroke: var(--diagram-color-5);
}

div#diagram>svg.chart>polyline {
	stroke-width: 4px;
	fill: transparent;
}

div#diagram>svg.chart>a.node>text {
	font-size: 0.8rem;
	text-anchor: middle;
	fill: var(--diagram-text-color);
}

div#diagram>svg.chart>a.node:first-of-type>text {
	text-anchor: start;
}

div#diagram>svg.chart>a.node:last-of-type>text {
	text-anchor: end;
}

div#diagram>svg.chart>a.node:is(:hover, :focus)>text {
	fill: var(--diagram-text-color-hover);
}

div#diagram>svg.chart>a.node:active>text {
	fill: var(--diagram-text-color-active);
}

div#diagram>svg.chart>a.node>circle {
	r: 7px;
	stroke-width: 4;
	stroke: var(--diagram-color-5);
	fill: var(--diagram-color-white);
}

div#diagram>svg.chart>a.node:is(:hover, :focus)>circle {
	r: 8px;
	stroke: var(--diagram-color-6);
	fill: var(--diagram-color-white-hover);
}

div#diagram>svg.chart>a.node:active>circle {
	stroke: var(--diagram-color-4);
	fill: var(--diagram-color-white-active);
}

/* div#diagram > svg.chart + div.background {
  z-index: -100;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 87%;
  background-color: var(--diagram-color-1);
  border-radius: 0.75rem;
} */

div#diagram>svg.chart>rect.background {
	fill: var(--diagram-color-0);
}

div#diagram>svg.chart>polyline.legend {
	stroke: var(--diagram-legend-color-0);
}

div#diagram>svg.chart>text.legend {
	font-size: 0.8rem;
	text-anchor: end;
	fill: var(--diagram-legend-text-color);
}

div#diagram>svg.chart>text.legend.vertical {
	rotate: -90deg;
}

div#diagram>svg.chart>polyline:nth-of-type(1) {
	stroke: transparent;
	fill: var(--diagram-legend-color-0);
}

div#diagram>svg.chart>polyline:nth-of-type(2) {
	stroke: var(--diagram-color-5);
}
