.custom-tree {
    list-style: none;
    padding-left: 20px;
}

.custom-tree li {
    margin: 5px 0;
    position: relative;
    padding-left: 20px;
}

.custom-tree a {
    text-decoration: none;
    color: #007BFF !important;
    cursor: pointer;
}

    .custom-tree a:hover {
        text-decoration: underline;
    }

.custom-tree .toggle-icon {
    cursor: pointer;
    display: inline-block;
    margin-right: 8px;
    width: 12px;
}

.custom-tree .has-children > .toggle-icon::before {
    content: "\25B6";
    color: #000;
    transition: transform .2s;
}

.custom-tree .has-children.expanded > .toggle-icon::before {
    content: "\25BC";
}

.custom-tree ul {
    margin-left: 15px;
    padding-left: 15px;
    border-left: 1px solid #ccc;
    display: none;
}

.custom-tree .expanded > ul {
    display: block;
}

    .custom-tree .tree-level-0 {
        color: #007BFF !important;
        font-weight: 500;
    }

    .custom-tree .tree-level-1 {
        color: #1b1b1b !important;
        font-weight: 700;
    }

    .custom-tree .tree-level-2 {
        color: #6c757d !important;
        font-style: italic;
        font-weight: 400;
    }

    .custom-tree .tree-node-italic {
        color: #6c757d !important;
        font-style: italic;
        font-weight: 400;
    }

    .custom-tree a.group-node {
        cursor: default;
    }

        .custom-tree a.group-node:hover {
            text-decoration: none;
        }

    .custom-tree ul li::before {
        content: "";
        position: absolute;
        top: 12px;
        left: -15px;
        width: 14px;
        height: 0;
        border-top: 1px dotted #999;
    }

    /*.custom-tree ul {
        margin-left: 15px;
        padding-left: 15px;
        border-left: 1px dotted #999; 
        display: none;
    }*/
    .custom-tree ul {
        margin-left: 15px;
        padding-left: 15px;
        display: none;
        border-left: none;
    }

        /* Only nested levels get the dotted line */
        .custom-tree ul ul {
            border-left: 1px dotted #999;
        }

    /*.custom-tree li::before {
        content: "";
        position: absolute;
        top: 12px;
        left: -15px;
        width: 14px;
        height: 1px;
        background-color: #ccc;
    }*/

    .custom-tree > li::before {
        display: none; 
    }

    .custom-tree > li > ul {
        border-left: none; 
    }

    .custom-tree li > ul {
        border-left: 1px dotted #999; 
    }

    /*.custom-tree .root-leaf {
        color: #6c757d !important;
        font-style: italic;
        font-weight: 400;
    }*/
.tree-level-2 {
    color: #6c757d !important;
    font-style: italic;
    font-weight: 400;
}