.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;
}