/***********************************/
/********* Family Tree CSS *********/
/***********************************/
* {
	/* background-color:white; */
	
}

/**********************************/
/*********** Nav Bar CSS **********/
/**********************************/
.navbar {
    position: relative;
    transition: .5s;
    z-index: 999;
}

.navbar.nav-sticky {
    position: fixed;
    top: 0;
    width: 100%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
}

.navbar .navbar-brand {
    margin: 0;
    font-size: 35px;
    line-height: 0px;
    font-weight: 700;
    letter-spacing: 2px;
    transition: .5s;
    
}

.navbar .navbar-brand img {
    max-width: 100%;
    max-height: 40px;
}

.navbar .dropdown-menu li a {
    margin-top: 0;
    border: 0;
    border-radius: 0;
    padding: 10px 25px;
    display: block;
    font-size: 12px;
    /* background: #f8f9fa; */
}

@media (min-width: 992px) {
    .navbar {
        position: absolute;
        width: 100%;
        /* padding: 30px 60px; */
        background: transparent !important;
        border-bottom: 1px dashed rgba(256, 256, 256, .2);
        z-index: 9;
    }
    
    .navbar.nav-sticky {
        /* padding: 10px 60px; */
        background: #ffffff !important;
    }
    
    .navbar .navbar-brand {
        color: #ffffff;
    }
    
    .navbar.nav-sticky .navbar-brand {
        color: #EF233C;
    }

    .navbar-light .navbar-nav .nav-link,
    .navbar-light .navbar-nav .nav-link:focus {
        padding: 10px 10px 8px 10px;
        color: #ffffff;
        font-size: 12px;
        font-weight: 500;
    }
    
    .navbar-light.nav-sticky .navbar-nav .nav-link,
    .navbar-light.nav-sticky .navbar-nav .nav-link:focus {
        color: #414141;
    }

    .navbar-light .navbar-nav .nav-link:hover,
    .navbar-light .navbar-nav .nav-link.active {
        color: #111111;
    }
    
    .navbar-light.nav-sticky .navbar-nav .nav-link:hover,
    .navbar-light.nav-sticky .navbar-nav .nav-link.active {
        color: #EF233C;
    }
}

@media (max-width: 991.98px) {   
    .navbar {
        padding: 15px;
        background: #ffffff !important;
    }
    
    .navbar .navbar-brand {
        color: #EF233C;
    }
    
    .navbar .navbar-nav {
        margin-top: 15px;
    }
    
    .navbar a.nav-link {
        padding: 5px;
    }
    
    .navbar .dropdown-menu {
        box-shadow: none;
    }
}
ul :hover {
    background-color: #eeeded;
	color: #c8246e;
    box-shadow: 0px 0px 2px #eeeded;
    padding: 0px;
    /* text-align: left; */
}

div.navbar-nav > .active > a{
    color: #111111;
}

.tree {
	white-space: nowrap;
	min-width: max-content;	
	/* width: 100%; */
	/* overflow: scroll;	 */
	}

.tree ul {
	padding-top: 20px;
	position: relative;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

.tree li {
	float: left;
	text-align: center;
	list-style-type: none;
	position: relative;
	padding: 20px 5px 0 5px;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}


/*We will use ::before and ::after to draw the connectors*/

.tree li::before,
.tree li::after {
	content: '';
	position: absolute;
	top: 0;
	right: 50%;
	border-top: 1px solid #ccc;
	width: 50%;
	height: 20px;
}

.tree li::after {
	right: auto;
	left: 50%;
	border-left: 1px solid #ccc;
}


/*We need to remove left-right connectors from elements without any siblings*/

.tree li:only-child::after,
.tree li:only-child::before {
	display: none;
}


/*Remove space from the top of single children*/

.tree li:only-child {
	/* padding-top: 0; */
}


/*Remove left connector from first child and right connector from last child*/

.tree li:first-child::before,
.tree li:last-child::after {
	border: 0 none;
}


/*Adding back the vertical connector to the last nodes*/

.tree li:last-child::before {
	border-right: 1px solid #ccc;
	border-radius: 0 5px 0 0;
	-webkit-border-radius: 0 5px 0 0;
	-moz-border-radius: 0 5px 0 0;
}

.tree li:first-child::after {
	border-radius: 5px 0 0 0;
	-webkit-border-radius: 5px 0 0 0;
	-moz-border-radius: 5px 0 0 0;
}


/*Time to add downward connectors from parents*/

.tree ul ul::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	border-left: 1px solid #ccc;
	width: 0;
	height: 20px;
}

.tree li div {
	border: 1px solid #ccc;
	padding: 5px 10px;
	text-decoration: none;
	color: black;
	font-family: arial, verdana, tahoma, sans-serif;
	font-size: 10px;
	display: inline-block;
	min-width: 80px;
	min-height: 30px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

.tree li div .male {
	background-color: lightblue;
	display: inline-block;
	width: auto;
	padding: 10px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	font-size: 10pt;
}

.tree li div .female {
	background-color: lightpink;
	display: inline-block;
	width: auto;
	padding: 10px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	font-size: 10pt;
}

.tree li div .spacer {
	background-color: lightblue;
	display: inline-block;
	width: 10px;
}


/*Time for some hover effects*/


/*We will apply the hover effect the the lineage of the element also*/

.tree li div:hover,
.tree li div:hover+ul li div {
	background: #c8e4f8;
	color: #000;
	border: 1px solid #94a0b4;
}


/*Connector styles on hover*/

.tree li div:hover+ul li::after,
.tree li div:hover+ul li::before,
.tree li div:hover+ul::before,
.tree li div:hover+ul ul::before {
	border-color: #94a0b4;
}