body {
    font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana,
        sans-serif;
    font-size: 14pt;
    padding: 1rem 5rem;
}

.wrapper {
    display: flex;
}

ul {
    list-style-type: none;
}

section.tree-structure {
    width: 50%;
    padding: 0 2rem 0 2rem;
}

section.tree-structure-expected {
    width: 50%;
    padding: 0 2rem 0 2rem;
    .selected-first {
        color: green;
    }
    .selected-last {
        color: red;
    }
    .not-selected {
        color: black;
    }
}

section.example {
    margin-top: 5rem;
    img {
        max-width: 100%;
    }
}

ul.subnav {
    li {
        a {
            display: flex;
            padding: 0 0.75rem;
            cursor: pointer;
            height: 56px;
            align-items: center;
            text-decoration: none;

            &::before {
                content: " ";
                display: inline-block;
                width: 32px;
                margin-right: 15px;
                height: 100%;
                background-image: url("../img/border.png");
                background-repeat: no-repeat;
                background-position: top center;
            }
        }
    }

    > li {
        border: 1px solid red;

        &:first-of-type {
            > a {
                height: 57px;
                &::before {
                    align-self: flex-end;
                    height: 30px;
                    background-image: url("../img/border.png"), url("../img/dot.png");
                }
            }
        }

        &:last-of-type {
            margin: 0;
            > a {
                &::before {
                    align-self: flex-start;
                    height: 30px;
                    background-image: url("../img/border.png"), url("../img/dot.png");
                    background-position: bottom center;
                }
            }
        }

        // single item - just a dot
        &:first-of-type:last-of-type {
            > a {
                &::before {
                    background-image: url("../img/dot.png");
                }
            }
        }
    }
}