/* https://iamkate.com/code/tree-views/ */

.tree{
    --spacing : 1.5rem;
    --radius  : 10px;
}

.tree li{
    display      : block;
    position     : relative;
    padding-left : calc(2 * var(--spacing) - var(--radius) - 2px);
}

.tree ul{
    margin-left  : calc(var(--radius) - var(--spacing));
    padding-left : 0;
}

.tree ul li{
    border-left : 2px solid #ddd;
}

.tree ul li:last-child{
    border-color : transparent;
}

.tree ul li::before{
    content      : '';
    display      : block;
    position     : absolute;
    top          : calc(var(--spacing) / -2);
    left         : -2px;
    width        : calc(var(--spacing) + 2px);
    height       : calc(var(--spacing) + 1px);
    border       : solid #ddd;
    border-width : 0 0 2px 2px;
}

.tree label {
    font-size: 15px;
    margin-bottom: 1em;
}

.tree-services{
    --spacing : 1.5rem;
    --radius  : 10px;
}

.tree-services li{
    display      : block;
    position     : relative;
    padding-left : calc(2 * var(--spacing) - var(--radius) - 2px);
}

.tree-services ul{
    margin-left  : calc(var(--radius) - var(--spacing));
    padding-left : 0;
}

.tree-services ul li{
    border-left : 2px solid #ddd;
}

.tree-services ul li:last-child{
    border-color : transparent;
}

.tree-services ul li::before{
    content      : '';
    display      : block;
    position     : absolute;
    top          : calc(var(--spacing) / -2);
    left         : -2px;
    width        : calc(var(--spacing) + 2px);
    height       : calc(var(--spacing) + 1px);
    border       : solid #ddd;
    border-width : 0 0 2px 2px;
}

.tree-services label {
    font-size: 15px;
    margin-bottom: 1em;
}