.s-chart-container {
	--key-color: rgba(138, 43, 226, 1);
	--company-color: #3b6de6;
	--person-color: #90c668;
	--shadow-color: 286deg 36% 56%;

	font-size: 12px;
	line-height: 1;
	font-weight: 400;
	color: black;
	background-color: white;
	--shadow-low: -2px -2px 9px rgba(94, 104, 121, 0.1), 3px 3px 9px rgba(94, 104, 121, 0.2);
	--shadow-high: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.36), 0.8px 1.6px 2px -0.8px hsl(var(--shadow-color) / 0.36), 2.1px 4.1px 5.2px -1.7px hsl(var(--shadow-color) / 0.36), 3px 3px 12.6px -2.5px hsl(var(--shadow-color) / 0.36);
	height: 500px;
	position: unset;
	max-width: 800px;
	width: 95%;
	margin-top: 10px;
	margin-bottom: 10px;
	display: block;
}

/** increase specicifity by prepending
  * div.graph-container 
  * to override scoped styles from src/styles/dendrogram.css
  * e.g.: 
  div.s-chart-container .axis text {}
*/

div.s-chart-container {
	box-shadow: var(--shadow-low);

	.tree-node {
		cursor: pointer;
	}

	& .tree-node:hover .contents div.label {
		/* color: red; */
		text-decoration: underline;
	}

	& .contents {
		display: flex;
		flex-direction: column;
		gap: 0.2rem;
		transition: color 0.2s ease-in-out;
		/* add white outline to text */
		/* text-shadow:
			-1px -1px 1px #fff,
			1px -1px 1px #fff,
			-1px 1px 1px #fff,
			1px 1px 1px #fff; */
	}
	& div.label {
		font-weight: 600;
		color: var(--textColor, black);
	}

	& div.value {
		font-variant-numeric: tabular-nums;
		color: var(--textColor, black);
	}

pancake-treemap {
	position: unset;


}
}