.tree-item-parent {
    display: flex;
}

.tree-item-prefix {
    width: 2em;
    min-width: 2em;
    color: rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .tree-item-prefix div {
        width: 100%;
        height: 100%;
    }

    .tree-item-prefix .button {
        height: 1em;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .tree-item-prefix .button .row_line {
            height: 0px;
            margin-left: 0.5px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.3);
        }

        .tree-item-prefix .button .icon {
            position: relative;
            top: -0.26em;
        }

        .tree-item-prefix .button.vaild .icon:hover {
            font-weight: bold;
        }

        .tree-item-prefix .button .icon.expand::before {
            content: "⊟";
            cursor: pointer;
        }

        .tree-item-prefix .button .icon.unexpand::before {
            content: "⊞";
            cursor: pointer;
        }

        .tree-item-prefix .button .icon.end::before {
            content: "⊡";
        }

    .tree-item-prefix .col_line {
        width: 0px;
        border-left: 1px solid rgba(0, 0, 0, 0.3);
    }

    .tree-item-prefix .col_end {
        width: 50%;
        margin-left: 50%;
        border-left: 1px solid rgba(0, 0, 0, 0.3);
        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    }

    .tree-item-prefix .col_continue {
        width: 50%;
        margin-left: 50%;
        border-left: 1px solid rgba(0, 0, 0, 0.3);
    }

.prefix-line-parent {
    width: 50%;
    border-right: 1px solid rgba(0, 0, 0, 0.3);
}

.prefix-line-child1 {
    display: inline-flex;
    width: 50%;
    height: 100%;
    border-right: 1px solid rgba(0, 0, 0, 0.3);
}

.prefix-line-child2 {
    display: inline-block;
    width: 40%;
    height: 50% !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

.prefix-line-child-last {
    float: left;
    width: 40%;
    height: 50% !important;
    margin-left: 1em;
    border-left: 1px solid rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

.tree-item-prefix.button {
    cursor: pointer;
}

.tree-item-prefix.expand div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tree-item-content {
    padding: 0.5em 0;
}

.tree-item-child.show {
    display: block;
}

.tree-item-child.hide {
    display: none;
}