/* Layout */
.org-chart {
	margin: 0 auto;
	width: 94%;

	@media (min-width: 400px) {
		width: 90%;
	}

	@media (min-width: 600px) {
		width: 100%;
	}

	@media (min-width: 900px) {
		display: flex;
		gap: 40px;
	}
}

.org-chart .copy {
	margin-bottom: 30px;

	@media (min-width: 900px) {
		margin-bottom: 0;
		flex: 0 0 270px;
	}
}

.org-chart .v-chart {
	container-name: chart;
	container-type: inline-size;
	font-family: system-ui, -apple-system, sans-serif;
	padding: 0px;
	background-color: #F6F6F6;
	
	@media (min-width:600px) {
		padding: 15px;
	}
	
	@media (min-width:900px){
		flex: 1 1 auto;
	}
}

.v-branch,
.v-node,
.level-lead {
	position: relative;
}

.v-node details::before {
	z-index: 0;
}

.v-node details:not(.level-lead.level-one) {
	position: relative;
	margin-top: 1rem;
}

.org-chart .v-chart summary:focus-visible {
	outline-width: 2px;
	outline-style: solid;
	outline-color: #000;
	outline-offset: 1px;
}

/* Chevrons and SVGs */

.org-chart .copy svg {
    width: 50px;
    margin-bottom: 5px;
}

.org-chart .v-chart summary,
.org-chart .v-chart summary[data-variant='light'] {
	min-height: 20px;
	background-image: url("data:image/svg+xml,%0A%3Csvg width='32' height='18' viewBox='0 0 32 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.707031 0.707031L15.707 15.707L30.707 0.707031' stroke='black' stroke-width='2'/%3E%3C/svg%3E%0A");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 30px 15px;
}

.org-chart .v-chart summary[data-variant='dark'] {
	background-image: url("data:image/svg+xml,%0A%3Csvg width='32' height='18' viewBox='0 0 32 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.707031 0.707031L15.707 15.707L30.707 0.707031' stroke='white' stroke-width='2'/%3E%3C/svg%3E%0A");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 30px 15px;
}

.org-chart .v-chart details[open] > summary {
	background-image: url("data:image/svg+xml,%3Csvg width='32' height='18' viewBox='0 0 32 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30.707 16.4141L15.707 1.41406L0.707032 16.4141' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 30px 15px;
}

.org-chart .v-chart details[open] > summary[data-variant='dark'] {
	background-image: url("data:image/svg+xml,%3Csvg width='32' height='18' viewBox='0 0 32 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30.707 16.4141L15.707 1.41406L0.707032 16.4141' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 30px 15px;
}

/* Headings */
.level-one.board summary h2,
.v-node.root summary h2 {
	font-weight: 700;
	font-size: 20px;
}

summary h2,
summary h3,
summary h4,
summary h5 {
	display: inline;
	margin: 0;
	font-size: 1.5rem;
	font-weight: 600;
	color: #212529;
	padding: 0;
}

.level-lead.senate summary h3,
.level-lead.executive summary h3,
.level-lead.executive summary h4 {
	color: white;
/*	font-weight: 600;*/
}

/* Summary */
summary {
	cursor: pointer;
	background: transparent;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 60px 10px 10px;
}

details[disabled] summary {
	pointer-events: none;
	background-image: none !important;
}

summary::-webkit-details-marker {
	display: none;
}

.v-node .content,
.content {
	padding: 1.25em;
	font-size: 1.25em;
	color: #000;
	background: #fff;
	border-top: none;
	display: flex;
	gap: 10px;
	flex-direction: column;
}

.level-one.board summary,
.v-node.root summary {
	background: #F95921;
	border: #F95921 solid 3px;
}

.level-lead.senate summary {
	background: #37639E;
	border: #37639E solid 3px;
	color: white;
}

.level-lead.executive summary {
	background: #097671;
	border: #097671 solid 3px;
	color: white;
}

.level-two.board summary,
.level-two.senate summary,
.level-two.executive summary,
.level-three.executive summary,
.level-four.executive summary,
.level-three.senate summary,
.level-three.board summary {
 	position: relative;
}

/*Detail padding */
.level-two,
.level-three,
.level-four {
 	padding-left: 20px;
}
/* Gradients */

.level-three.board.level-lead summary {
 	border: none;
}

.level-two.board summary,
.level-three.board:not(.level-lead) summary {
    border-image: linear-gradient(to right, #FF334C 0%, #FA9C43 100%) 1;
    border-width: 3px;
    border-style: solid;
}

.level-two.senate:not(.level-lead) summary,
.level-three.senate:not(.level-lead) summary {
    border-image: linear-gradient(to right, #37639E 0%, #9762FD 100%) 1;
    border-width: 3px;
    border-style: solid;
}

.level-two.executive:not(.level-lead) summary,
.level-three.executive:not(.level-lead) summary,
.level-four.executive:not(.level-lead) summary {
    border-image: linear-gradient(to right, #097671 0%, #BBE64F 100%) 1;
    border-width: 3px;
    border-style: solid;
}

/* Connector lines */
.v-node details.level-two::before,
.v-node details.level-three::before,
.v-node details.level-four::before {
	content: "";
	position: absolute;
	top: calc(2em - 2px);
	left: 0rem;
	width: 22px;
	height: 2px;
	background-color: grey;
}
.level-one-lead-container {
	position: relative;
	margin-left: 10px;
	padding-top: 0.75em;
	border-left: 2px solid grey;
}
.level-two-lead-container,
.level-three-lead-container {
	position: relative;
	margin-left: 30px;
	padding-top: 0.75em;
	border-left: 2px solid grey;
}


.level-one-lead-container:last-child::after,
.level-two-lead-container::after,
.level-three-lead-container::after {
	content: "";
	position: absolute;
	left: -2px;
	bottom: 0;
	top: calc(var(--cy) + 2em);
	width: 4px;
	background: #F6F6F6;
	z-index: 1;
}

@media (min-width:450px) {

	.level-one-lead-container {
		margin-left: 40px;
	}

	.level-two-lead-container,
	.level-three-lead-container {
		margin-left: 40px;
	}
	
}

@media (min-width:600px) {
	
	.level-one.board summary h2, .v-node.root summary h2 {
		font-size: 22px;
	}
	summary h2,
	summary h3,
	summary h4,
	summary h5 {
		font-size: 2rem;
	}
}