/*
	htree.css
	Styles for horizontal competition display
	Standalone HTML page and WordPress
*/

.htree {
	direction: rtl;
	overflow: auto;
/*
	display: flex;
	justify-content: flex-end;
*/
}

.htree ul {
	padding-right: 20px; 
	position: relative;
	display: flex;
	flex-direction: column;
/*
	justify-content: center;
*/
}

.htree li {
	list-style-type: none;
	position: relative;
	padding: 5px 20px 5px 0;
	display: flex;
	text-align: right;
/*
	text-align: center;
*/
}

/* Use ::before and ::after to draw the connectors */
.htree li::before, 
.htree li::after {
	content: '';
	position: absolute; 
	right: 0; 
	bottom: 50%;
	border-right: 1px solid #ccc;
	width: 20px; 
	height: 50%;
}
.htree li::after{
	bottom: auto; 
	top: 50%;
	border-top: 1px solid #ccc;
}

/* Remove left-right connector from root */
.htree li:only-child::before {
	display: none;
}

/* Remove left connector from first child and right connector from last child */
.htree li:first-child::before, 
.htree li:last-child::after {
	border: 0 none;
}

/* Add back the vertical connector to the last nodes */
.htree li:last-child::before {
	border-bottom: 1px solid #ccc;
	border-radius: 0 0 5px 0;
}
.htree li:first-child::after {
	border-radius: 0 5px 0 0;
}

/* Downward connectors from parents */
.htree ul ul::before {
	content: '';
	position: absolute; 
	right: 0; 
	top: 50%;
	border-top: 1px solid #ccc;
	width: 20px; 
	height: 0;
}

/* Person */
.htree li div {
	border: 1px solid #ccc;
	padding: 5px;
	display: inline-block;
	direction: ltr;
	align-self: center;
	border-radius: 5px;
	text-align: center;
/*
*/
}