/*////////INDIVIDUAL FAMILY TREE PAGES\\\\\\\\\\\\*\

/*top section*/
#top-section {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	position: relative;
}

.title-family-tree, .title-person {
    text-align: center;
    margin: 0;
    padding: 0;
}

a[href="#stamboomgegevens"], a[href="#stamboom"], a[href="#achtergrondinformatie"] {
    min-width: 13rem;
    margin-bottom: 0.75rem;
}

/*middle section*/
.title-tree, .title-tree-details, .backgroundinfo-title {
    text-align: center; 
    margin-top: 1.5rem;
    color: #af9778;
    font-weight: bold;
	margin-bottom: 1.5rem !important;
}

/*text above tablepress elements*/
.active-link {
	border-bottom: 1px solid;
	padding-bottom: 0.25em;
}

.instruction-download-text {
    text-align: center; 
    font-size: 11px; 
    margin-top: 1em !important; 
}

a.w-popup-trigger {
	margin: 1em 0;
}

/*tablepress elements*/
#tablepress-background {
    background: radial-gradient(#d4c7bc, #af9778);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !important;
}

.tablepress {
	font-size: 11px !important;
	min-width: 100% !important;
	margin: 0 auto 1em !important;
	background-color: transparent !important;
}

.textfieldtablepress {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !important;
	border-radius: 10px !important;
}

.columnboxes {
    justify-content: center !important;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !important;
    border-radius: 10px !important;
    min-height: 100% !important;
}

.even td, .odd td {
	background-color: transparent !important;
}

.tablepress a {
    color: #ffffff;
    text-decoration: underline !important;
}

.tablepress a:hover {
    color: #525148 !important;
}

.tablepress td {
    border-bottom: 0px solid #525148 !important;
    border-color: none !important;
}

.tablepress .column-1 {
	min-width: 10%;
	text-align: center;
	padding: 0;
}

.tablepress .column-2 {
	min-width: 39%;
	padding: 0px 0px 0px 3px;
	margin: 0;
}

.tablepress .column-3 {
    text-align: left;
	width: 3%;
	padding: 0;
	position: relative;
}

.column-3 .fa-slash {
	position: absolute;
	top: 6px;
	left: -2px;
	font-size: 12px;
}

.tablepress .column-4 {
	width: 21%;
	padding: 0;
}

.tablepress .column-5 {
	min-width: 27%;
	padding: 0;
}

.tablepress .row-hover tr:hover td {
	background-color: #cccccc !important;
}

.tablepress .odd td {
	background-color: #ffffff;
}
.tablepress .even td {
	background-color: #ffffff;
}

/*Revolution Slider*/

rs-module {
  	-webkit-border-radius: 10px;
  	-moz-border-radius: 10px;
  	border-radius: 10px;
  	overflow: hidden !important;
  	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !important;
}

/*//////FAMILY TREE\\\\\\\*/

/*general table styling*/

.family-tree {
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 0 0.75em;
	background: radial-gradient(#d4c7bc, #af9778);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	padding: 1em;
	border-radius: 10px;
}

.family-tree td {
    border-color: transparent;
	position: relative;
}

#tree-extended .column-3 { /*als het niet past zit er ergens een #colspan# niet goed*/
	width: 5.4rem;
}

.family-tree tr {
	height: 31px;
}

.head-wrapper > .person {
	height: 2.25rem;
}

/*wedding*/
.wedding-lines {
	position: relative;
	display: flex;
    height: 90px;
    margin-left: 2.5em;
}
.wedding-lines > div {
	flex-basis: 17.5%;
}
.wedding, .wedding2, .child-con, .full-line, .half-line-bottom, .half-line-top, .fornication, .relation-line {
	position: relative;
	vertical-align: middle;
	padding: 0;
}
.wedding-lines:after,
.relation-line:after ,
.relation-line:before {
	content: '';
	position: absolute;
}
.wedding-lines.left:after,
.wedding-lines.center:after,
.wedding-lines.right:after,
.relation-line:after {
	height: 2px;
	background-color: var(--color-content-text);
}
.wedding-lines.left:after {
	width: 79.5%;
	top: calc(50% - 1px);
	left: calc(3% + (17.5% * 1))
}
.wedding-lines.center:after {
	width: 62%;
	top: calc(50% - 1px);
	left: calc(3% + (17.5% * 2))
}
.wedding-lines.right:after {
	width: 44.5%;
	top: calc(50% - 1px);
	left: calc(3% + (17.5% * 3))
}
.wedding-lines > .wedding:after {
	top: 30%;
	right: -1.3rem;
	left: unset;
	width: 2rem;
	height: 2rem;
	line-height: 1.3;
	content: '\f81b';
	padding: 0.3rem;
	background: #f0f0f0;
	border-radius: 50%;
	text-align: center;
	z-index: 1;
}

/*children relation lines*/
.children-wrapper {
	display: flex;
    flex-direction: column;
    row-gap: 0.75rem;
    justify-content: center;
    min-height: 90px;
	margin-top: 2.25rem;
}
.relation-line {
	position: relative;
	width: 25%;
	height: 2.25rem;
	display: flex;
	align-items: center;
}
.relation-line:not(.only-child):before {
	width: 2px;
	background-color: var(--color-content-text);
	left: 0;
	height: calc(100% + 0.75rem);
}
.child {
	display: flex;
}
.children-wrapper > .child:first-child .relation-line:not(.only-child):before {
    height: calc(50% + 0.375rem);
    bottom: -0.375rem;
}
.children-wrapper > .child:last-child .relation-line:not(.only-child):before {
	height: calc(50% + 0.375rem);
	top: -0.375rem;
}
.relation-line:after {
	width: 100%;
}
.prev-gen {
	padding: 0 0.25rem 0;
	font-size: 2.25rem;
	text-align: right;
	line-height: 1;
}

.next-gen {
	padding: 0 0 0 0.25em;
	font-size: 2.25rem;
	text-align: left;
	line-height: 1;
}

.top-correction {
	position: relative;
	top: 19px;
}

/*tree extended*/
.tree-extended .male:after, .tree-extended .female:after {
	left: 6px;
}

.tree-extended .person {
	padding: 0.5em 0.5em 0.5em 2.3em;
}

/*hidden row to set cell widths for fixed table layout*/

.hidden-row > td, .family-tree tr.hidden-row {
	height: 0;
	padding: 0;
	line-height: 0;
}

.right-correction.wedding-line:after {
	right: 23px;
}

.right-correction.half-line-bottom:after {
	left: unset;
	right: 49px;
}

.right-correction.wedding2, .right-correction.relation-line  {
	right: 23px;
	display: inline-table;
}

/*person name card*/

.person {
	position: relative;
	vertical-align: middle;
	border-radius: 5px;
	background-color: #f0f0f0;
	color: #333;
	font-size: 11px;
	padding: 0.5em 0.5em 0.5em 2.5em;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	transition: all 0.3s;
}

.male:after {
	left: 0.5em;
	content: '\f183';
}

.female:after {
	left: 0.5em;
	content: '\f182';
}

.unknown:after {
	left: 0.35em;
	content: '\f128';
}
.partner {
	margin-left: 2.5rem;
}

/*horizontal lines in cells*/

.wedding hr, .child-con hr, .fornication hr, .wedding2 hr, .relation-line hr {
	border-color: #333;
	border-width: 1px;
	margin-block-end: 0;
	margin-block-start: 0;
}

/*pseudo for fontawesome icons*/

.wedding:after, .male:after, .female:after, .unknown:after, .fornication:after, .divorse:before, .wedding2:after {
	position: absolute;
	font-family: 'fontawesome';
	font-weight: 500;
	font-size: 1.5rem;
	color: #333;
	transition: color 0.3s;
	line-height: 1;
}

.wedding:after {
	top: 30%;
	left: -0.75em;
	content: '\f81b';
	padding: 0.3rem;
	background: #f0f0f0;
	border-radius: 50%;
}

.wedding2:after {
	top: 5px;
	left: -0.75em;
	content: '\f81b';
	padding: 0 0.3rem;
	background: #f0f0f0;
	border-radius: 50%;
	font-size: 1.3rem;
}

.divorse:before {
	position: absolute;
	top: 30%;
	left: -0.9em;
	content: '\f715';
	padding: 0.3rem;
	z-index: 1;
}

.wedding2.divorse:before {
	top: -1px;
	font-size: 1.3rem;
}

.fornication:after {
	top: 30%;
	left: -1.1rem;
	content: '\f05e';
	padding: 0.3rem;
	background: #f0f0f0;
	border-radius: 50%;
	width: 20px;
	text-align: center;
}

/*arrow icons*/

.far, .wedding-line {
	position: relative;
}

.far {
	color: #f0f0f0;
	transition: color 0.3s;
}

.far:hover {
	color: #333;
}

.td-continue {
	position: relative;
	padding: 0;
}

.continue {
	position: absolute;
	top: -0.5em;
	left: -0.5em;
	text-align: center;
	font-weight: 700;
	font-size: 13px;
}

/*line masks for connectors*/

.wedding-line:after {
	position: absolute;
    content: '';
    height: calc(100% + 21px);
    width: 2px;
    background-color: #333;
    right: 0;
    bottom: -11px;
}

.full-line:after{
	position: absolute;
    content: '';
    height: 137%;
    width: 2px;
    background-color: #333;
    left: 0;
	top: -7.5px;
}

.half-line-bottom:after{
	position: absolute;
    content: '';
    height: 75%;
    width: 2px;
    background-color: #333;
    left: 0;
    bottom: -7.5px;
}

.half-line-top:after{
	position: absolute;
    content: '';
    height: 75%;
    width: 2px;
    background-color: #333;
    left: 0;
    top: -7.5px;
}

/*when hover on tablepress child - person will light up in tree*/

.hover-connection {
	background: green;
	color: #fff;
	box-shadow: none;
}

.hover-connection:after{
	color: #fff !important;
}