.charttree li a {
    background: #ccc;
}

.charttree li li a {
    background: #e0e0e0;
}

.charttree li li li a {
    background: #efefef;
}

.charttree li li li li a {
    background: white
}

.charttree li a:hover {
    box-shadow: 5px 4px 5px 4px #bdbdbd;
}


.charttree ul, .charttree ul, .charttree li {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.charttree {
    margin: 0 0 1em;
    text-align: center;
    direction: ltr;
}

    .charttree ul, .charttree ul {
        display: table;
    }

    .charttree ul {
        width: 100%;
    }

    .charttree li li {
        display: table-cell;
        padding: 3.5em 0;
        vertical-align: top;
    }

    .charttree li li {
    }

        .charttree li li li {
        }


    /* _________ */
    .charttree ul ul li:before {
        outline: solid 1px #eeecec;
        content: "";
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
    }

    .charttree ul li:first-child:before {
        left: 50%;
    }

    .charttree ul li:last-child:before {
        right: 50%;
    }

    .charttree a {
        border: solid .1em #666;
        display: inline-block;
        margin: 0 .2em 3.5em;
        padding: .4em .4em;
        position: relative;
    }





    .charttree ul ul:before,
    .charttree ul ul a:before {
        outline: solid 1px #eeecec;
        content: "";
        height: 3.25em;
        left: 50%;
        position: absolute;
    }

    .charttree ul:before {
        top: -3.42em;
    }

    .charttree a:before {
        top: -3.4em;
    }

    /* The root node doesn't connect upwards */
    .charttree > li {
        margin-top: 0;
    }

        .charttree > li:before,
        .charttree > li:after,
        .charttree > li > a:before {
            outline: none;
        }


@media screen and (max-width: 1300px) {

    charttree ul ul::before, .charttree ul ul a::before {
        outline: none content: unset
    }




    .charttree li li {
        display: block
    }

    .charttree ul {
        display: block
    }

        .charttree ul ul ul {
            padding-left: 7%;
        }

        .charttree ul ul::before {
            content: "";
            position: absolute;
            width: 1px;
            height: calc(100% + 20px);
        }

    .charttree > ul > li > ul::before {
        background: #ccc;
        left: 5.5%;
    }

    .charttree > ul > li > ul > li > ul::before {
        background: #ccc;
        left: 10%;
    }



    .charttree > ul > li > ul > li > ul > li > ul::before {
        background: #ccc;
        left: 17%;
    }





    .charttree > ul > li > ul > li a::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0%;
        transform: translate(-100%, -50%);
        height: 1px;
        background: #ccc;
    }

    .charttree > ul > li > ul > li a::before {
        width: 8%
    }

    .charttree > ul > li > ul > li > ul > li a::before {
        width: 11%
    }

    .charttree > ul > li > ul > li > ul > li > ul > li a::before {
        width: 18%
    }



    .charttree ul ul li::before {
        content: unset;
        outline: unset;
    }

    .charttree li li {
        padding: 0;
        display: inline-block
    }

    .charttree li a {
        width: 96%
    }

    .charttree li li {
        width: 80%
    }

    .charttree > li > li > li {
        width: calc(74% / 2);
    }

    .charttree li li li li {
        width: 60%
    }
}