table {
    width: 100%;
    table-layout: auto;
}

.table-responsive {
    overflow-x: auto;
}
.tree ul {
    padding-left: 1.25rem; /* 1rem = 16px, so 1.25rem = 20px */
    list-style-type: none;
    position: relative;
}
.tree ul::before {
    content: '';
    border-left: 2px solid #d3d3d3;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0.75rem; /* 0.75rem = 12px */
}
.tree li {
    margin: 0.5rem 0;
    padding-left: 1.25rem;
    position: relative;
}
.tree li::before {
    content: '';
    border-top: 2px solid #d3d3d3;
    position: absolute;
    top: 0.875rem; /* 0.875rem = 14px */
    left: 0;
    width: 0.75rem; /* 0.75rem = 12px */
}
.tree li::after {
    content: '';
    /* border-left: 2px solid #d3d3d3; */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    height: 0.875rem; /* 0.875rem = 14px */
    margin-top: 0.875rem;
}
.tree li:last-child::after {
    display: none;
}