:root {
    --indentPerLevel: 60px;
    --leftLiPad: 2em;
    --horizHack: 18px;
    --horizLineLength: calc(var(--indentPerLevel) - var(--horizHack));
    --vertLineCoordX: calc(-1 * var(--horizLineLength));
    --topVertOffset: 0.21em;
    --vertOffsetToLineMiddle: 0.7em;
    --shortvertLineLength: 0.75em; /* 13px; */
}

.tree {
    .info-div {
        display: none;
    }

    .info-div-list > li {
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }

    .member-name {
        font-weight: bold;
        color: blue;
    }

    .member-name.person-has-info {
        text-decoration: underline;
    }

    .spouse-name.person-has-info {
        text-decoration: underline;
    }

    .spouse-name {
        color: purple;
    }

    .date-year {
        font-weight: bold;
    }

    .person-comment-red {
        font-size: 90%;
        color: red;
    }

    .person-comment {
        font-size: 90%;
        color: black;
    }

    .person-longcomment {
        font-size: 90%;
        color: black;
    }

    .person-has-info:hover {
        color: magenta;
        cursor: pointer;
    }

    .couple-container {
        display: flex;
        align-items: flex-start;
    }

    .name-string {
        display: inline-block;
        margin-left: 0.25em;
    }

    .folder-image {
        height: 1em;
        cursor: pointer;
    }

    ul.child-container  {
        position: relative;
        list-style: none;
        padding-left: calc(0.5 * var(--indentPerLevel) + var(--horizHack));
        margin-left: 0;
        display: block;

        & > li {
            position: relative;
            font-weight: normal;
            padding-top: 2px;
            padding-bottom: 2px;
            padding-left: 0;
        }

        /* Draw horizontal lines */
        & > li::before {
            content: "";
            position: absolute;
            left: var(--vertLineCoordX);
            width: var(--horizLineLength);
            height: 0;
            top: var(--vertOffsetToLineMiddle);
            border-top: 1px solid black;
        }
        /* Draw vertical lines */
        & > li::after {
            content: "";
            position: absolute;
            border-left: 1px solid black;
            width: 0;
            left: var(--vertLineCoordX);
            top: calc(-1 * var(--topVertOffset)); /* -5px; */
        }
        /* NOT first child, BUT last child */
        & > li:not(:first-child):last-child::after {
            height: calc(var(--shortvertLineLength) + var(--topVertOffset) - 1px);
        }
        /* first child AND last child */
        & > li:first-child:last-child::after {
            height: calc(var(--shortvertLineLength) +  var(--topVertOffset) - 1px);
        }
        /* first child AND NOT last child */
        & > li:first-child::after {
            height: calc(100% +  var(--topVertOffset) - 1px);
        }
        /* NOT first child AND NOT last child */
        & > li:not(:first-child):not(:last-child)::after {
            height: calc(100% +  var(--topVertOffset) - 1px);
        }
    }

    /*
     * No before or after on the root node.
     * Note the long specifier so that these will be prioritized.
     */
    & > ul.child-container > li:first-child:last-child::after {
        height: 0;
    }
    & > ul.child-container > li:first-child:last-child::before {
        width: 0;
    }


}