form#lds-membership-form {
    --color-error-text: #fff;
    --color-error-bg: #faa;
    --font-size: 14px;
    --font-size-heading: 18px;
    --font-size-label: var(--font-size);
    --font-size-small: 13px;
    --field-border: 1px solid #ddd;
    --field-radius: 5px;
    --field-padding: 4px;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "details" "contact" "address" "company" "comments" "confirm";

    gap: 10px;
    width: 900px;
    border: var(--field-border);
    border-radius: var(--field-radius);
    background-color: #fdfdfd;
    margin-block: var(--form-margin-block, 0);
    margin-inline: var(--form-margin-inline, auto);
    padding: 10px 20px;
    font-size: var(--font-size);
    text-align: var(--form-text-align, left);

    @media (min-width: 768px) {
        --form-margin-block: 30px;
        grid-template-columns: repeat(2, minmax(200px, 1fr));
        grid-template-areas: "details contact" "address company" "comments comments" "confirm actions";
    }

    &.has-questions {
        grid-template-areas: "details" "contact" "address" "company" "questions" "comments" "confirm";

        @media (min-width: 768px) {
            grid-template-areas: "details contact" "address company" "questions questions" "comments comments" "confirm actions";
        }
    }

    .membership-form__details {grid-area: details;}

    .membership-form__contact {grid-area: contact;}

    .membership-form__address {grid-area: address;}

    .membership-form__company {grid-area: company;}

    .membership-form__questions {grid-area: questions;}

    .membership-form__comments {grid-area: comments;}

    .membership-form__confirm {grid-area: confirm;}

    .membership-form__actions {grid-area: actions;}

    > fieldset {
        border: 0;
    }

    > fieldset > :is(h2, h3, h4) {
        font-size: var(--font-size-heading);
        width: 100%;
        margin-bottom: 0;
    }

    .membership-form__group {
        display: flex;
        gap: 10px;
        padding-block: 8px;

        &.address-autofill {
            display: none;
            max-height: 68px;
        }
    }

    .membership-form__item {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin: 0;

        label {
            font-size: var(--font-size-label);
            margin: 0;
        }

        :is(input, mapbox-address-autofill) {
            width: 100%;
            border-radius: var(--field-radius);
            border: var(--field-border);
            outline: 0;

            ::placeholder {
                color: #aaa;
            }
        }

        mapbox-address-autofill {
            border: 0;
        }

        textarea {
            width: 240px;
            border: var(--field-border);
            border-radius: var(--field-radius);
            padding: var(--field-padding);
        }

        input {
            height: 30px;
            padding: 0 var(--field-padding);
        }

        .reqd {
            color: #b94a48;
        }

    }

    .membership-form__address .membership-form__item > div {
        display: flex;
        justify-content: space-between;

        .membership-form__address-toggle {
            visibility: hidden;
            margin-left: 10px;
            padding-inline: 8px;
            border: none;
            display: inline;
            text-decoration: underline;
            background-color: transparent!important;
            border-width: 0;
            line-height: 1;
        }

    }

    .membership-form__confirm .membership-form__item {
        flex-direction: row;
        align-items: flex-start;
        gap: 8px;
        width: 320px;

        > input {
            margin-top: 4px;
        }

        > label {
            font-size: var(--font-size-small);
        }

    }

    .membership-form__item:has(.parsley-error-list) :where(input) {
        border-radius: var(--field-radius) var(--field-radius) 0 0;
    }

    ul.parsley-error-list {
        background-color: var(--color-error-bg);
        list-style: none;
        margin-top: -2px;
        border-radius: 0 0 var(--field-radius) var(--field-radius);

        &,
        li {
            max-width: fit-content;
        }

        li {
            color: var(--color-error-text);
            font-size: var(--font-size-small);
        }
    }

    .membership-form__actions .button--submit {
        width: 140px;
        padding: 4px;
        border-radius: var(--field-radius);
    }

}

mapbox-search-listbox div[class$="--ResultsAttribution"]{
    display: none;
}

.LDSCMSForm.sending .form-submit:after { content: url("/html/images/loading_16x16.gif"); margin-left: 15px; width: 10px; height: 10px; }