#base {
    display: grid;
    padding: 0 1rem 1rem 1rem;
    gap: 1rem;
    overflow-y: auto;
    scrollbar-width: none;
    max-height: 100%;

    input {
        .input();
    }

    .password.widget {
        .password_widget();
    }

    form {
        .panel();

        @media (max-width: 1023px) {
            padding: 1rem 0.7rem 1rem 0.7rem;
        }

        @media (min-width: 1024px) {
            width: max-content;
            padding: 1rem;
        }

        .panel2() {
            display: grid;
            row-gap: 1rem;
            &:is(.pro *) {
                display: grid;
            }
            
            > .button {
                .button();
                min-height: 36px;
                max-width: max-content;
                justify-self: center;
                padding: 0 16px;
            }

            label {
                display: grid;
                gap: 3px;
                .title {
                    .title();
                }
            }

            .create {
                &:is(.dark *) {
                    color: #b98675;
                }
                &:is(.light *) {
                    color: #4f3b58;
                }
            }
        }

        .basic.panel {
            .panel2();
        }

        .pro.panel {
            .panel2();
            display: none;
        }
    }
}
