* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/*body{
    display:grid;
    align-items:center;
}*/

.tree {
    width: 100%;
    height: auto;
    text-align: center;
    padding-top: 5px;
}

    .tree ul {
        padding-top: 60px;
        position: relative;
        transition: .5s;
    }

    .tree li {
        display: inline-table;
        text-align: center;
        list-style-type: none;
        position: relative;
        padding: 60px 2px 10px 2px;
        transition: .5s;
        height:120px;
    }

        .tree li a.assistan1 {
            display: inline-table;
            text-align: center;
            list-style-type: none;
            position: absolute;
            padding: 10px 2px 10px 2px;
            margin-top: 40px;
            width: 150px;
            height: 50px;
            margin-right: 150px;
            /*background-color:#808080;*/
            transition: .5s;
        }

            .tree li a.assistan1:after {
                content: '';
                border-bottom: 1px solid #808080;
                width: 100px;
                height: 35px;
                position: absolute;
                top: 20px;
                right: -100px;
            }

        .tree li a.assistan2 {
            display: inline-table;
            text-align: center;
            list-style-type: none;
            position: absolute;
            padding: 10px 2px 10px 2px;
            margin-top: 45px;
            width: 150px;
            height: 50px;
            margin-right: -197px;
            /*background-color: #e4dfdf;*/
            transition: .5s;
        }

            .tree li a.assistan2:before {
                content: '';
                border-bottom: 1px solid #808080;
                width: 100px;
                height: 35px;
                position: absolute;
                top: 20px;
                left: -100px;
            }

        .tree li:before, .tree li:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            border-top: 2px solid #808080;
            width: 53%;
            height: 25px;
        }

        .tree li:after {
            /*خط عمودی*/
            /*از طبقات بالا به پایین*/
            right: auto;
            left: 53%;
            border-left: 2px solid #808080;
        }

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


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

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

        .tree li:first-child:before, .tree li:last-child:only-child:after {
            border-top: 2px solid #808080;
            border-right: 2px solid #808080;
            border-radius: 0px 5px 0px 0px;
        }

        .tree li:last-child:after {
            /*گوشه چپ*/
            /*border-top: 1px solid #0812c7;
        border-left: 1px solid #0812c7;*/
            border-top: 2px solid #808080;
            border-left: 2px solid #808080;
            border-radius: 5px 0px 0px 0px;
            width: 50%;
        }

        .tree li:last-child:before {
            border-right: 2px solid #ff0000;
            border-radius: 0px 5px 0px 0px;
            border: 0 none;
        }

        .tree li:first-child:after {
            /*border-radius: 0px 5px 0px 0px;
        border-left: 1px solid #cb880f;*/
            border-top: 0;
            border-right: none;
        }

    .tree ul ul:before {
        /*خط عمودی*/
        /*از طبقات بالا به پایین*/
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        border-right: 2px solid #808080;
        width: 0;
        height: 60px;
    }

    .tree a {
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-top: 15px solid #0b42ae;
        padding: 8px;
        border-radius: 5px;
        display: inline-grid;
        text-decoration-line: none;
        transition: .5s;
        width: 150px;
        background: linear-gradient(to bottom,#e8e7e7,rgba(0, 0, 0, 0.2));
        box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !important;
        height: 120px;
    }

        .tree a.king {
            border: 1px solid rgba(0, 0, 0, 0.19);
            border-top: 15px solid #cb150f;
            padding: 8px;
            border-radius: 5px;
            display: inline-grid;
            text-decoration-line: none;
            transition: .5s;
            width: 150px;
            background: linear-gradient(to bottom,#e8e7e7,rgba(0, 0, 0, 0.2));
            box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !important;
        }

    .tree img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        margin-top: -60px !important;
        margin: auto;
    }

    .tree a span {
        /*border: 1px solid #000;
        border-radius: 5px;*/
        color: #000;
        margin-top: 5px;
        padding: 8px;
        font-size: 0.8em;
        /*font-weight:600;*/
        /*transform:rotate(-90deg);*/
    }

    .tree li a:hover, .tree li a:hover img, .tree li a:hover + ul li a {
        background: linear-gradient(to top,#f2f8fc,#c8d8f8);
        /*background: #c8e4f8;*/
        color: #fff;
        /*border: 2px solid #5f5f5f;*/
        box-shadow: 0px 0px 8px -5px #5f5f5f;
    }

        .tree li a:hover + ul li:after, .tree li a:hover + ul li:before, .tree li a:hover + ul:before, .tree li a:hover + ul ul:before {
            border-color: #000;
        }