.plan-container {
    display: grid;
    grid-template-columns: var(--app-sidebar-width) 1fr;

    .sub-plan-list {
        background-color: var(--bs-sidebar-bg);
        display: flex;
        flex-direction: column;
        padding-block: var(--app-panel-spacing);

        .sub-plan-item {
            display: flex;
            gap: calc(10 * var(--rem-size));
            align-items: center;
            padding-inline: var(--app-panel-spacing);

            &.selected {
                background-color: var(--app-color-white);
            }

            .sub-plan-marker {
                border-radius: 50%;
                height: calc(16 * var(--rem-size));
                width: calc(16 * var(--rem-size));
            }

            .sub-plan-name {
                flex-grow: 1;

                a {
                    display: block;
                    padding-block: var(--app-sidebar-item-padding);
                    color: var(--bs-body-color);
                    text-decoration: none;
                }
            }
        }
    }

    .sub-plan-details {
        padding: var(--app-panel-spacing);
    }
}