:root {
    --level-indent: 6pt; /* JJF: Should be in em units, like the images */
}

.tree-root {

    /* Do not display spacer-part for tree root. It is connected to nothing. */
    &.subtree > .spacer-part {
        display: none;
    }

    .subtree {
        display: flex;
        align-items: stretch;
        margin-top: 0;
        margin-bottom: 0;

        &:last-child > .spacer-part > .spacer-bottom {
            border-left: none;
        }

        .spacer-part {
            width: 24pt;
            flex: 0 0 auto;
            display: flex;
            flex-direction: column;
            align-items: stretch;

            .spacer-top {
                height: 0.7em;
                border-bottom: 1px solid black;
                border-left: 1px solid black;
                flex: 0 0 auto;
            }

            .spacer-bottom {
                height: 100%;
                border-left: 1px solid black;
            }
        }

        .people-part {
            display: flex;
            flex-direction: column;

            .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;
                font-weight: bold;
            }

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

            .couple {
                display: flex;
                align-items: stretch;
            }

            .name-string {
                display: inline-block;
                margin-left: 0.25em;
                padding: 2px 4px;
            }

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

            .children  {
                position: relative;
                list-style: none;
                padding-left: var(--level-indent);
                margin-left: 0;
                display: none;

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

            .children[data-visible="true"]  {
                display: flex;
                flex-direction: column;
            }

            .info-div {
                display: none;
                background: #f8f8f8;
                border: 1px solid blue;
                padding-right: 12pt;
                margin: 8px 3em;
            }

            .info-div[data-visible="true"] {
                display: block;
            }

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

            .node-icon-box {
                display: flex;
                flex-direction: column;
                align-items: stretch;

                .icon-of-node {
                    height: 1em;
                    width: 1.2em;
                    flex: 0 0 auto;
                    background-repeat: no-repeat;
                    background-position: center center;
                    background-size: cover;
                }


                &.terminal {
                    .icon-of-node {
                        background-image: url('aresources/gifs/terminal-node.gif');
                    }
                }

                &.non-terminal[data-is-open="true"] {
                    .icon-of-node {
                        background-image: url('aresources/gifs/open-non-terminal.gif');
                    }
                    .bottom-of-node {
                        height: 100%;
                        border-right: 1px solid black;
                        width: var(--level-indent);
                    }
                }

                &.non-terminal {
                    .icon-of-node {
                        cursor: pointer;
                        background-image: url('aresources/gifs/closed-non-terminal.gif');
                    }
                }
            }

        }
    }
}