/* ::::::::::: Single Blog ::::::::::: */
.freetree-sec{padding: 0px 0;position: relative; width: 100%; height: 100vh; overflow: hidden;} 
.freetree-sec .zoom-box {position: absolute; width: 1000px; height: 400px; transition: transform 0.3s ease; cursor: move; }
.freetree-sec .buttons{position: absolute; z-index: 9; padding: 20px; top: 0; left: 20px;} 
.freetree-sec .buttons button {background: var(--white); border: 0; border-radius: 50%; color: var(--blue); width: 50px; height: 50px; line-height: 50px; font-size: 20px; }


.person {border: 3px solid black; padding: 0px; min-width: 210px; max-width: 240px; background-color: #FFFFFF; display: inline-block; margin:2px; cursor:pointer; }
.person.female {border-color: #F45B69; }
.person.male {border-color: #456990; }
.person div {text-align: center; }
.person .name {font-size: 16px; }
.person .name {display: flex; align-items: center; }
.person .name .name-img {width: 60px; height: 60px; overflow: hidden; background: #fff; }
.person .name .name-img img{width: 60px; height: 60px; object-fit: contain; object-position: left;}
.person .name .name-text {padding: 4px; text-align: left;}
.person .name .name-text h5{font-size: 13px;font-weight: 400; margin-bottom: 0}
.person .name .name-text p{font-size: 12px; margin-bottom: 0}

.person .parentDrop,
.person .spouseDrop,
.person .childDrop {
  border: 1px dashed #000000;
  width: auto;
  min-width: 80px;
  min-height: 80px;
  display: inline-block;
  vertical-align: top;
  position: relative;
  padding-top: 15px;
}

.person .parentDrop>span,
.person .spouseDrop>span,
.person .childDrop>span {
  position: absolute;
  top: 2px;
  left: 2px;
  font-weight: bold;
}
.parentDrop>.person,
.spouseDrop>.person,
.childDrop>.person {
  margin-top: 20px;
}

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

/*.tree li {*/
/*  display: table-cell;*/
/*  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;*/
/*}*/

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

/*.tree li::after {right: auto; left: 50%; border-left: 2px solid #fff; }*/

/*.tree li:only-child::after,*/
/*.tree li:only-child::before {display: none; }*/
/*.tree li:only-child {padding-top: 0;}*/
/*.tree li:first-child::before,*/
/*.tree li:last-child::after {border: 0 none;}*/
/*.tree li:last-child::before {border-right: 2px solid #fff; 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; }*/
/*.tree ul ul::before {content: ''; position: absolute; top: 0; left: 50%; border-left: 2px solid #fff; width: 0; height: 20px; }*/

/*.tree li .parent {transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; margin-top: 10px; }*/
/*.tree li .parent::before {*/
/*    content: ''; position: absolute; top: 62px; left: 50%; border-left: 2px solid #fff; border-right: 2px solid #fff; width: 3px; height: 10px; }*/
/*.tree li .family {position: relative; display: table; width: 460px; margin: auto;}*/
/*.tree li .family .spouse {position: absolute; top: 0; left: calc(76% + 0px); }*/
/*.tree li .family .spouse::before {*/
/*    content: ''; position: absolute; top: 50%; left: -10px; border-top: 2px solid #fff; border-bottom: 2px solid #fff; width: 10px; height: 3px; }*/

/*.tree li .child:hover,*/
/*.tree li .child:hover+.parent .person,*/
/*.tree li .parent .person:hover,*/
/*.tree li .child:hover+.parent .person+ul li .child,*/
/*.tree li .parent .person:hover+ul li .child,*/
/*.tree li .child:hover+.parent .person+ul li .parent .person,*/
/*.tree li .parent .person:hover+ul li .parent .person {*/
/*  background: #c8e4f8; color: #000; border: 2px solid #94a0b4; }*/

/*.tree li .child:hover+.parent::before,*/
/*.tree li .child:hover+.parent .person+ul li::after,*/
/*.tree li .parent .person:hover+ul li::after,*/
/*.tree li .child:hover+.parent .person+ul li::before,*/
/*.tree li .parent .person:hover+ul li::before,*/
/*.tree li .child:hover+.parent .person+ul::before,*/
/*.tree li .parent .person:hover+ul::before,*/
/*.tree li .child:hover+.parent .person+ul ul::before,*/
/*.tree li .parent .person:hover+ul ul::before {*/
/*  border-color: #94a0b4;*/
/*}*/









.tree {
    padding: 50px 30px;
    margin-bottom:20px;
    overflow: auto;
    background-color: var(--darkblue);
}
.tree ul {
    margin-left: 270px;
}
.tree > ul {
    margin-left: 0px;
}
.tree li {
    list-style-type:none;
    margin:0;
    padding:10px 5px 0 5px;
    position:relative
}
.tree li::before, .tree li::after {
    content:'';
    left:-20px;
    position:absolute;
    right:auto
}
.tree li::before {
    border-left:2px solid var(--white);
    bottom:50px;
    height:100%;
    top:0;
    width:1px
}
.tree li::after {
    border-top:2px solid var(--white);
    height:20px;
    top:25px;
    width:25px
}
.tree li span {
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border:3px solid #999;
    border-radius:5px;
    display:inline-block;
    padding:3px 8px 3px 25px;
    text-decoration:none;
    position: relative;
    background: var(--white);
    min-width: 250px;
}
.tree li span > i {
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translate(0px, -50%);
}

span.ifDeath {
    border: 0 !important;
    padding: 0 !important;
    min-width:auto !important;
}

.tree li.parent_li>span {
    cursor:pointer;
    margin-bottom: 5px;
}
.tree>ul>li::before, .tree>ul>li::after {
    border:0
}
.tree li:last-child::before {
    height:30px
}
.tree li.parent_li>span:hover, .tree li.parent_li>span:hover+ul li span {
    background:#eee;
    border:3px solid #94a0b4;
    color:#000
}

.tree .name {display: flex; align-items: center; }
.tree .name .name-img {width: 60px; height: 60px; overflow: hidden; background: #fff; }
.tree .name .name-img img{width: 60px; height: 60px; object-fit: contain; object-position: left;}
.tree .name .name-text {padding: 4px; text-align: left;}
.tree .name .name-text h5{font-size: 13px;font-weight: 400; margin: 0;    width: 190px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;}
.tree .name .name-text p{font-size: 12px; margin-bottom: 0}

.tree > ul > li > ul > li > span{
    border-color: #dc3545;
}
.tree > ul > li > ul > li > ul > li > span{
    border-color: #0d6efd;
}
.tree > ul > li > ul > li > ul > li > ul > li > span{
    border-color: #ffc107;
}

.tree > ul > li > ul > li > ul > li > ul > li > ul > li > span{
    border-color: #07ff93;
}
.tree > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > span{
    border-color: #198754;
}