:root {
	--tree-link-color: rgb(64, 166, 100);
}


.treeInfo a,
.treeInfo a:link,
.treeInfo a:visited {
	color: var(--tree-link-color);
}



.uiModi {
	background: rgb(162,162,162);
    background: linear-gradient(323deg, rgb(205 205 205) 9%, rgb(225 225 225) 61%, rgb(255 255 255) 100%);
    font-family: sans-serif;
}


.uiModi .familyTree {
    box-sizing: border-box;
    padding: 65px 100px 100px 100px;
}


.uiModi .union[data-children='true'] {
	border-right-width: 4px;
	border-right-color: white;
	border-right-style:  solid;
}


.uiModi .knot {
	padding: 3px 3px 3px 20px;
	text-align: left;

	svg {
		width: 16px;
	}
}

.uiModi .union[data-remarriage] {
	margin-top: 0;
}

.uiModi .union[data-remarriage] .knot {
	display: none;
}

.uiModi .union[data-remarriage] .label {
	font-style: italic;
	padding-left: 20px;
}


.uiModi .person {
	box-sizing: border-box;
	padding: 8px 8px;
}

.uiModi .union .person {
	padding: 4px 8px;
}

.uiModi .person[data-inlaw='true'] {
	background: #00000011;
}


.uiModi notes {
	display: none;
}


.uiModi .connectors {
	position: relative;
	width: 100px;
}

.uiModi .personLine {
	width: 44px;
	left: -45px;
	height: 4px;
	background: #00000031;
}

.uiModi .unionLine {
	width: 44px;
	right: -50px;
	height: 4px;
	background: #00000031;
}

.uiModi .connectorLine {
	display:block;
	position: relative;
	background: #00000031;
	left: 0;
	height: 9px;
	padding-right: 4px;
	border-bottom-left-radius: 9px;
	border-bottom-right-radius: 9px;
}



.dropShadow .bg {
	box-shadow: 5px 5px 10px rgba(0, 0, 0, .35);
}

.dropShadow .treeToolbar {
	box-shadow: 5px 5px 10px rgba(0, 0, 0, .35);
}


.outline .union {
	margin: 18px 0;
	outline: 4px solid rgba(0, 0, 0, 0.2);
}


.outline .bg.firstChildUnion {
	margin-top: 14px;
}

.person.clickable,
.uiModi .person.clickable {
	background: url(../images/sun.svg) no-repeat 97% 50%;
	background-size: 14px 14px;
	padding-right: 20px;
}

.extPersonLink {
	color:var(--tree-link-color);;
	display: block;
	font-weight: bold;
	margin-bottom: .5rem;
}