/*Now the CSS*/
.tree * {
    margin: 0;
    padding: 0;
}

.tree ul {
    padding-top: 35px;
    position: relative;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    display: flex;
    width: -moz-max-content !important;
    width: max-content !important;
    min-width: 100%;
}

.tree li {
    text-align: center;
    list-style-type: none;
    position: relative;
    padding: 35px 5px 0 5px;
    display: table;
    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.7px;
    left: 50%;
    border-top: 5px solid #716f6f;
    width: 50%;
    height: 35px;
    z-index: 1;
}

.tree li::after {
    right: 50%;
    border-right: 5px solid #716f6f;
}

.cornernumberBottomLeft {
    position: absolute;
    left: 20%;
    top: 2px;
    border: 1px solid gray;
    /*box-shadow: 0 0 2px white;*/
    /*background-color: black;*/
    border-radius: 25px;
    width: 60%;
    height: 6px;
    padding: 0px;
    /*font-size: 25px;*/
    font-weight: bold;
    color: white;
    text-align: center;
}

.cornernumberTopRight {
    position: absolute;
    right: -10px;
    top: -10px;
    border: 1px solid white;
    /*background-color: black;*/
    border-radius: 5px;
    width: 25px;
    height: 25px;
    padding: 1px;
    font-size: 25px;
    font-weight: bold;
    color: white;
    text-align: center;
    background-color: linear-gradient(135deg, #4a90e2, #7bb3f0);
    box-shadow: 0 0 10px gray;
    display: inline-flex;
    z-index: 2;
}

.cornernumberTopCenter {
    position: absolute;
    right: 0px;
    top: -15px;
    padding: 3px;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    background-color: transparent;
    width: 100%;
    z-index: 1;
    -webkit-filter: drop-shadow(0 0 2px #222);
    filter: drop-shadow(0 0 2px #222);
    text-align: center;
}

/*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;
    margin: auto;
}

.uldiv {
    display: flex;
    margin: auto;
}

/*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-left: 5px solid #716f6f;
    border-radius: 5px 0 0 0;
    -webkit-border-radius: 5px 0 0 0;
    -moz-border-radius: 5px 0 0 0;
}

.tree li:first-child::after {
    /* top-left top-right bottom-left bottom-right*/
    border-radius: 0 5px 0 0;
    -webkit-border-radius: 0 5px 0 0;
    -moz-border-radius: 0 5px 0 0;
}

/*Time to add downward connectors from parents*/
.tree .treeul:before {
    content: "";
    position: absolute;
    top: -15.7px;
    /*left: 50%;*/
    border-left: 5px solid #716f6f;
    /*width: 0;*/
}

.tree .treeulleft:before {
    content: "";
    position: absolute;
    top: 0;
    /*left: 50%;*/
    border-left: 5px solid #716f6f;
    /*width: 0;*/
}

.membershift_10:before {
    left: calc(50% - 750px);
    border-bottom: 5px solid #716f6f;
    width: calc(min(750px, calc(50% - 75px)));
    border-radius: 0 0 0 5px;
    height: 54.7px;
}

.membershift_9:before {
    left: calc(50% - 675px);
    border-bottom: 5px solid #716f6f;
    width: calc(min(675px, calc(50% - 75px)));
    border-radius: 0 0 0 5px;
    height: 54.7px;
}

.membershift_8:before {
    left: calc(50% - 600px);
    border-bottom: 5px solid #716f6f;
    width: calc(min(600px, calc(50% - 75px)));
    border-radius: 0 0 0 5px;
    height: 54.7px;
}

.membershift_7:before {
    left: calc(50% - 525px);
    border-bottom: 5px solid #716f6f;
    width: calc(min(525px, calc(50% - 75px)));
    border-radius: 0 0 0 5px;
    height: 54.7px;
}

.membershift_6:before {
    left: calc(50% - 450px);
    border-bottom: 5px solid #716f6f;
    width: calc(min(450px, calc(50% - 75px)));
    border-radius: 0 0 0 5px;
    height: 54.7px;
}

.membershift_5:before {
    left: calc(50% - 375px);
    border-bottom: 5px solid #716f6f;
    width: calc(min(375px, calc(50% - 75px)));
    border-radius: 0 0 0 5px;
    height: 54.7px;
}

.membershift_4:before {
    left: calc(50% - 300px);
    border-bottom: 5px solid #716f6f;
    width: calc(min(300px, calc(50% - 75px)));
    border-radius: 0 0 0 5px;
    height: 54.7px;
}

.membershift_3:before {
    left: calc(50% - 225px);
    border-bottom: 5px solid #716f6f;
    width: calc(min(225px, calc(50% - 75px)));
    border-radius: 0 0 0 5px;
    height: 54.7px;
}

.membershift_2:before {
    left: calc(50% - 150px);
    border-bottom: 5px solid #716f6f;
    width: calc(min(150px, calc(50% - 75px)));
    border-radius: 0 0 0 5px;
    height: 54.7px;
}

.membershift_1:before {
    left: calc(50% - 35px);
    height: 53px;
    width: 0;
}

.membershift_0:before {
    left: 50%;
}

.tree li a {
    border: 5px solid #716f6f;
    padding: 5px 20px 5px 20px;
    text-decoration: none;
    color: black;
    text-shadow: 0 0 5px lightgrey;
    font-size: 11px;
    display: inline-block;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    border-radius: 15px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    margin-top: -5px;
    margin-bottom: 15px;
}

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover,
.tree li a.partner:hover~a.parent,
.tree li a.partner:hover+ul li a,
.tree li a.parent:hover~ul li a,
.tree li a:hover~.terminalaggregation .parent {
    background-color: linear-gradient(135deg, #4a90e2, #7bb3f0) !important;
    border-style: solid !important;
    /*border-width: 3px !important;*/
    border-color: black !important;
    vertical-align: middle;
    box-shadow: inset 1000px 1000px 1000px 1000px rgba(74, 144, 226, 0.4), 0 0 30px black !important;
    opacity: 1 !important;
}

.parentPartnerHover,
.tree li a.parent:hover~a.partner,
.tree li a.partner:hover~a.parent,
.tree li a.partner:hover~.terminalaggregation .parent {
    background-color: linear-gradient(135deg, #e3f2fd, #bbdefb) !important;
    border-style: solid !important;
    /*border-width: 3px !important;*/
    border-color: darkred !important;
    vertical-align: middle;
    box-shadow: inset 1000px 1000px 1000px 1000px rgba(187, 222, 251, 0.3),
        0 0 10px black !important;
    opacity: 1 !important;
}

.tree li a.parent:hover+ul li a.parent,
.tree li a.parent:hover~ul li a.parent,
.tree li a.partner:hover+ul li a.partner {
    background-color: linear-gradient(135deg, #4a90e2, #7bb3f0) !important;
    border-style: solid !important;
    /*border-width: 3px !important;*/
    border-color: #a26900 !important;
    vertical-align: middle;
    box-shadow: inset 1000px 1000px 1000px 1000px rgba(74, 144, 226, 0.4), 0 0 10px black !important;
    opacity: 1 !important;
}

.partnerParentHover {
    background-color: linear-gradient(135deg, #e3f2fd, #bbdefb) !important;
    border-style: solid !important;
    /*border-width: 3px !important;*/
    border-color: darkred !important;
    vertical-align: middle;
    box-shadow: inset 1000px 1000px 1000px 1000px rgba(187, 222, 251, 0.3),
        0 0 10px black !important;
    opacity: 1 !important;
}

.partnerParentHover::after {
    content: "نسل بالادستی عضو انتخاب شده";
    position: absolute;
    top: 40%;
    left: 3%;
    width: 95%;
    white-space: pre;
    border: 1px solid white;
    padding: 2px;
    font-weight: bold;
    background-color: gray;
    color: white;
}

.tree li a:hover strong {
    color: black;
}

/*Connector styles on hover*/
.tree li a:hover+ul li::after,
.tree li a:hover+ul li::before,
.tree li a.parent:hover~ul::before,
.tree li a.parent:hover~ul li::before,
.tree li a.parent:hover~ul li::after,
.tree li a.parent:hover~ul ul::before,
.tree li a:hover+ul::before,
.tree li a:hover+ul ul::before,
.tree li a:hover+ul .terminalaggregation::before,
.tree li a:hover+.terminalaggregation::before {
    border-color: black;
    border-width: 5px;
}

.tree li a:hover+ul li>div,
.tree li a.parent:hover~ul li>div,
.tree li a.parent:hover~ul li>.terminalaggregation,
.tree li a.parent:hover~ul li>.terminalaggregation::before {
    border-color: black;
    transition-duration: 0.5s;
    /* transform: scale(1.025); */
}

.tree li a:hover+ul li>div>span,
.tree li a.parent:hover~ul li>div>span {
    background-color: black !important;
    color: white;
}

/*Thats all. I hope you enjoyed it.
Thanks :)*/

/*============================================================================*\
   + File Upload
/*============================================================================*/

.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.inputfile+label {
    color: white;
    background-color: #f96a6a;
    padding: 12px 24px;
    border-radius: 3px;
    outline: none;
}

.inputfile:focus+label,
.inputfile+label:hover {
    background-color: red;
    outline: none;
}

.inputfile+label {
    cursor: pointer;
}

.inputfile+label i {
    margin-right: 8px;
}

.inputfile+label * {
    pointer-events: none;
}

@media screen and (max-width: 480px) {
    .pt-tree {
        width: 100% !important;
    }
}

.popup {
    display: inherit;
}

.color-white {
    color: #ffffff !important;
}

.pt-thumb {
    box-shadow: 0 0 5px white !important;
}

#myBtnBottomLeft {
    /*display: none; !* Hidden by default *!*/
    position: fixed;
    /* Fixed/sticky position */
    bottom: 0;
    /* Place the button at the bottom of the page */
    left: 0;
    /* Place the button 30px from the right */
    z-index: 1035;
    /* Make sure it does not overlap */
    border: none;
    /* Remove borders */
    outline: none;
    /* Remove outline */
    cursor: pointer;
    /* Add a mouse pointer on hover */
    padding: 15px;
    /* Some padding */
    font-size: 13px;
    /* Increase font size */
    -webkit-backface-visibility: hidden;
    display: none;

    width: 73px;
    height: 75px;
    background-color: transparent;
    background: url("/public/uploads/site/movebottomleft.png") no-repeat;
}

#myBtnBottomRight {
    /*display: none; !* Hidden by default *!*/
    position: fixed;
    /* Fixed/sticky position */
    bottom: 0;
    /* Place the button at the bottom of the page */
    right: 0;
    /* Place the button 30px from the right */
    z-index: 1035;
    /* Make sure it does not overlap */
    border: none;
    /* Remove borders */
    outline: none;
    /* Remove outline */
    color: white;
    /* Text color */
    cursor: pointer;
    /* Add a mouse pointer on hover */
    padding: 15px;
    /* Some padding */
    font-size: 13px;
    /* Increase font size */
    -webkit-backface-visibility: hidden;
    display: none;

    width: 73px;
    height: 75px;
    background-color: transparent;
    background: url("/public/uploads/site/movebottomright.png") no-repeat;
}

#myBtnTopRight {
    /*display: none; !* Hidden by default *!*/
    position: fixed;
    /* Fixed/sticky position */
    top: 0;
    /* Place the button at the bottom of the page */
    right: 0;
    /* Place the button 30px from the right */
    z-index: 1035;
    /* Make sure it does not overlap */
    border: none;
    /* Remove borders */
    outline: none;
    /* Remove outline */
    color: white;
    /* Text color */
    cursor: pointer;
    /* Add a mouse pointer on hover */
    padding: 15px;
    /* Some padding */
    font-size: 13px;
    /* Increase font size */
    -webkit-backface-visibility: hidden;
    display: none;

    width: 73px;
    height: 75px;
    background-color: transparent;
    background: url("/public/uploads/site/movetopright.png") no-repeat;
}

#myBtnTopLeft {
    /*display: none; !* Hidden by default *!*/
    position: fixed;
    /* Fixed/sticky position */
    top: 0;
    /* Place the button at the bottom of the page */
    left: 0;
    /* Place the button 30px from the right */
    z-index: 1035;
    /* Make sure it does not overlap */
    border: none;
    /* Remove borders */
    outline: none;
    /* Remove outline */
    color: white;
    /* Text color */
    cursor: pointer;
    /* Add a mouse pointer on hover */
    padding: 15px;
    /* Some padding */
    font-size: 13px;
    /* Increase font size */
    -webkit-backface-visibility: hidden;
    display: none;

    width: 73px;
    height: 75px;
    background-color: transparent;
    background: url("/public/uploads/site/movetopleft.png") no-repeat;
}

#myBtnBottomRight:hover,
#myBtnBottomLeft:hover,
#myBtnTopRight:hover,
#myBtnTopLeft:hover {
    -webkit-filter: drop-shadow(0 0 5px #222222);
    filter: drop-shadow(0 0 5px #222222);
}

.combinedcouples {
    border-top: 7px solid #716f6f;
    border-right: 7px solid #716f6f;
    border-left: 7px solid #716f6f;
    width: 100%;
    padding: 7px 0 7px 0;
    text-align: center;
    height: 20px;
    border-radius: 40px 40px 0 0;
}

.topcouples {
    background: #716f6f !important;
    color: white;
    border-radius: 50%;
    display: inline-flex;
    width: 20px;
    height: 20px;
    top: -23px;
    left: calc(25px - 50%);
    position: relative;
    vertical-align: middle;
    font-weight: bold;
}

.topcouplesleft {
    background: #716f6f !important;
    color: white;
    border-radius: 50%;
    display: inline-flex;
    width: 20px;
    height: 20px;
    top: -23px;
    left: calc(50% - 25px);
    position: relative;
    vertical-align: middle;
    font-weight: bold;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.collapseMember {
    z-index: 999;
    background-color: #716f6f;
    color: white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: inline-block;
    position: absolute;
    right: 50%;
    right: calc(50% - (16px + 1px) / 2);
    bottom: -22px;
    line-height: 16px;
    line-height: 100%;
    line-height: calc(100% - 2px);
    vertical-align: middle;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    border: 1px solid black;
    box-shadow: 0 0 10px black;
    text-shadow: 0 0 2px black;
    font-family: "Courier New", serif !important;
}

.collapseMember::after {
    content: " ";
    position: absolute;
    display: block;
    background-color: floralwhite;
    height: 4px;
    margin-top: -2px;
    top: 50%;
    left: 2px;
    right: 2px;
    border-radius: 5px;
    border: 1px solid black;
}

.togglecollapsed {
    color: whitesmoke;
    background-color: black !important;
    text-shadow: 0 0 2px black !important;
    box-shadow: 0 0 10px black !important;
    animation: infiniterotationanimation linear 2s infinite;
    animation-delay: 500ms;
}

.togglecollapsed::after {
    content: " ";
    position: absolute;
    display: block;
    background-color: white;
    height: 4px;
    margin-top: -2px;
    top: 50%;
    left: 1px;
    right: 1px;
    border-radius: 50%;
    border: none;
}

.togglecollapsed::before {
    content: " ";
    position: absolute;
    display: block;
    background-color: white;
    width: 4px;
    margin-left: -2px;
    left: 50%;
    top: 1px;
    bottom: 1px;
    border-radius: 50%;
}

.hideaggregatedmember {
    display: none !important;
}

.aggregatedmember {
    /* background-color: rgba(245, 245, 245, 0.5) !important; */
    z-index: 3;
}

.aggregatedmemberbutton {
    cursor: pointer;
}

.aggregateperdmember {
    border: 1px solid black !important;
    padding: 3px;
    margin: 2px;
    border-radius: 5px;
    cursor: pointer;
}

.aggregateperdmember:hover {
    box-shadow: 0 0 3px black;
}

.aggregatedmemberstitle {
    border-radius: 8px 8px 0 0;
    background-color: #f5f5f561;
    font-size: 13px;
    font-weight: bold;
    padding: 3px;
    border: 1px solid #f5f5f5d6;
}

.terminalaggregation {
    position: relative;
    border-radius: 15px;
    min-width: fit-content;
    z-index: 1;
}

.terminalaggregation::before {
    content: "";
    position: absolute;
    border-right: 5px solid #716f6f;
    height: 25px;
    top: -10px;
    left: calc(50% - 35px);
}

.aggregatedmembersimage {
    width: 27px;
    height: 27px;
    max-width: 27px;
    max-height: 27px;
    border-radius: 50%;
    border: 1px solid white;
    background-color: #f5f5f5a3;
    object-fit: cover;
    float: right;
    clear: both;
    padding: 1px;
    margin-left: 5px;
}