#idExpenseCategory {
    .invisible {
        visibility: hidden;
        /* similar to display none, but keeps space reserved */
    }

    .main {
        background-color: aqua;

        /* General Display of .node */

        .node {
            padding: 5px 0;
            margin: 2px 0;
            display: grid;
            grid-template-columns: auto 1fr;
            grid-template-rows: auto auto;
            grid-template-areas:
                "collapse content"
                ". children";
            column-gap: 10px;

            input {
                grid-area: collapse;
            }

            .content {
                grid-area: content;
                margin-right: 20px;
                padding: 4px;
                background-color: lightblue;

                * {
                    display: block;
                }
            }

            .children {
                grid-area: children;
            }

            .description {
                font-size: small;
                width: fit-content;
                border: 1px solid blue;
                color: gray;
                background-color: white;
                padding: 2px;

                &:empty {
                    display: none;
                }
            }
        }

        /* When .node is not shown and exeption to that rule. */

        .node:not(:has(input:checked)) {
            display: none
        }

        .node:has(>input:checked)>.children>.node {
            display: grid;
            /* must be the same as in .node */
        }

        .node:has(input:checked)>.content>.description {
            display: none;
        }

        .description:empty {
            display: none;
        } /* only works if completely empty, no blanks allowed */

        /* How Radio Button is shown */

        [name="isCollapsed"] {
            appearance: none;
            padding: 0;
            margin: 0;

            &:before {
                content: "";
                display: block;
                /* width height at .7em if ther is no background image */
                width: 1.2em;
                height: 1.2em;
                background-size: 1.2em 1.2em;
                background-image: url(add_circle.svg);
            }

            &:checked:before {
                background-image: url(radio_button_checked.svg);
            }

            &:has(~ .children:empty) {
                visibility: hidden;
            }
/*
            &:checked .description {
                display: block;
            }
                */
        }
    }
}