:root {
	/* ---------- Colors ---------- */
	--green1: #126848;
	--green2: #529091;
	--green3: #58B290;
	--green4: #DDEFEB;
	--lineColor1: #767372;
	--lineColor2: #BEBBBB;
	--textHover: #FFFF00;
	/* -------------------- */
	font-family: Helvetica, Arial, sans-serif;
	font-size: 14px;
}

/* ---------- SVG ---------- */

svg#organizationalChartSVG {
	min-width: 800px;
}
/* ---------- Text ---------- */
svg#organizationalChartSVG text.header {
	font-weight: bold;
}
svg#organizationalChartSVG text.header tspan.unbold {
	font-weight: normal;
}
svg#organizationalChartSVG text.green {
	fill: var(--green3) !important;
}

/* ---------- Text Backing ---------- */
svg#organizationalChartSVG path.backing {
	fill: transparent;
	transition: fill 0.2s;
}
svg#organizationalChartSVG g.trigger path.backing:hover {
	cursor: pointer;
}

/* ---------- List Item ---------- */
svg#organizationalChartSVG g.listItem text:not(:first-of-type) {
	pointer-events: none;
}

/* ---------- Boxes ---------- */
svg#organizationalChartSVG g.box path {
	transition: fill 0.2s;
}
svg#organizationalChartSVG g.box path.boxBlue1 {
	fill: #282953;
}
svg#organizationalChartSVG g.box path.boxGreen1 {
	fill: var(--green3);
}
svg#organizationalChartSVG g.box path.boxGreen2 {
	fill: var(--green4);
}
svg#organizationalChartSVG g.box text {
	transition: fill 0.2s;
}
svg#organizationalChartSVG g.box text.header {
	fill: #FFFFFF;
}
svg#organizationalChartSVG g.box text.header tspan.unbold {
	fill: #BED9D7;
}
svg#organizationalChartSVG g.box:not(#box01) path:hover + text {
	fill: var(--textHover);
}
svg#organizationalChartSVG g.box:not(.boxedCluster):not(#box01) path:hover {
	cursor: pointer;
}
svg#organizationalChartSVG g.box:not(.boxedCluster) text {
	pointer-events: none;
}
svg#organizationalChartSVG g.box path.boxGreen1:hover {
	fill: var(--green1);
}
svg#organizationalChartSVG g.box path.boxGreen2:hover {
	fill: #9FD7CB;
}
svg#organizationalChartSVG g.box path.boxGreen2:hover + text {
	fill: #FFFFFF !important;
}

/* ---------- Clusters ---------- */
svg#organizationalChartSVG g.cluster text {
	fill: var(--green3);
	transition: fill 0.2s;
}
svg#organizationalChartSVG g.cluster text.header {
	fill: var(--green2);
}
svg#organizationalChartSVG g.cluster path.backing:hover {
	fill: #F3F3F3;
}
svg#organizationalChartSVG g.cluster path.backing:hover + text, g.cluster path.backing:hover + text + text {
	fill: var(--green1) !important;
}

/* ---------- Boxed Clusters ---------- */
svg#organizationalChartSVG g.boxedCluster path.box {
	fill: var(--green2);
}
svg#organizationalChartSVG g.boxedCluster text {
	fill: #FFFFFF;
}
svg#organizationalChartSVG g.boxedCluster text.header {
	fill: #6EE1D5;
}
svg#organizationalChartSVG g.boxedCluster path.backing:hover {
	fill: #007671;
}
svg#organizationalChartSVG g.boxedCluster path.backing:hover + text, g.boxedCluster path.backing:hover + text + text {
	fill: #EFEFEF !important;
}

/* ---------- Connectors ---------- */
svg#organizationalChartSVG *[class*="connector"] {
	fill: none;
}
svg#organizationalChartSVG *.connector1 {
	stroke: var(--lineColor1);
}
svg#organizationalChartSVG *.connector2{
	stroke: var(--lineColor2);
}
svg#organizationalChartSVG *.connector3{
	stroke: var(--lineColor1);
	stroke-dasharray: 8, 4;
}
svg#organizationalChartSVG *.connector4 {
	stroke: var(--lineColor1);
	stroke-dasharray: 1, 4;
}

/* ---------- Legend ---------- */
svg#organizationalChartSVG g#legend text.header {
	fill: #5B5958;
	font-size: 16px;
}

/* ---------- CARD POP-UP ---------- */

div#cardPopUp {
	background-color: #E0E0E0;
	border: #CCCCCC solid 1px;
	border-radius: 10px;
	box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
	display: none;
	left: 50%;
	padding: 20px;
	position: fixed;
	top: 50%;
	transform: translate(-50%, -50%);
	min-width: 320px;
}
div#cardPopUp.visible {
	display: block;
}
div#cardPopUp button.buttonClose {
	--height: 20px;
	background: none;
	border: none;
	color: #666666;
	cursor: pointer;
	display: block;
	float: right;
	font-size: 20px;
	font-weight: bold;
	height: var(--height);
	margin-top: -10px;
	transition: color 0.2s;
	width: var(--height);
}
div#cardPopUp button.buttonClose:hover {
	color: #000000;
}
div#cardPopUp h3 {
	font-size: 18px;
	line-height: 25px;
	margin: 20px 0px;
	max-width: 480px;
}
div#cardPopUp dl {
	display: grid;
	font-size: 14px;
	grid-row-gap: 10px;
	grid-template-columns: 120px auto;
}
div#cardPopUp dt {
	display: flex;
	font-weight: bold;
	text-align: right;
}
div#cardPopUp dt::after {
	content: ':';
	display: block;
}
div#cardPopUp dd {
	margin-left: 10px;
}
div#cardPopUp dd::before {
	display: none;
}