.error {
   color: red;
}
/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.loading-modal {
    display:    none;
    position:   fixed;
    z-index:    100000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('/cms-assets/media/ajax-loader.gif') 
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading .loading-modal {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .loading-modal {
    display: block;
}

.comma-separated-element:not(:empty):not(:last-child):after {
   content: ", ";
}

/* Form containers always have row spacing; other editable containers opt in
   when a child requests half width. The marker may be on its CMS wrapper. */
[data-cms-editable-templates~="all-contact-info-fields"],
[data-cms-editable-templates~="form-name"],
[data-cms-editable-templates~="form-home-phone"],
[data-cms-editable-templates~="form-cell-phone"],
[data-cms-editable-templates~="form-email"],
[data-cms-editable-templates~="form-address"],
[data-cms-editable-templates~="all-form-fields"],
[data-cms-editable-templates~="form-text-input"],
[data-cms-editable-templates]:has(> .cms-half-width, > * > .cms-half-width) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem var(--cms-form-column-gap, 1rem);
}

[data-cms-editable-templates~="all-contact-info-fields"] > *,
[data-cms-editable-templates~="form-name"] > *,
[data-cms-editable-templates~="form-home-phone"] > *,
[data-cms-editable-templates~="form-cell-phone"] > *,
[data-cms-editable-templates~="form-email"] > *,
[data-cms-editable-templates~="form-address"] > *,
[data-cms-editable-templates~="all-form-fields"] > *,
[data-cms-editable-templates~="form-text-input"] > *,
[data-cms-editable-templates]:has(> .cms-half-width, > * > .cms-half-width) > * {
    min-width: 0;
}

/* Match Bootstrap row gutters without negative outer margins. */
[data-cms-editable-templates~="all-contact-info-fields"],
[data-cms-editable-templates~="form-name"],
[data-cms-editable-templates~="form-home-phone"],
[data-cms-editable-templates~="form-cell-phone"],
[data-cms-editable-templates~="form-email"],
[data-cms-editable-templates~="form-address"],
[data-cms-editable-templates~="all-form-fields"],
[data-cms-editable-templates~="form-text-input"] {
    --cms-form-column-gap: 1.5rem;
}

@media (min-width: 992px) {
    [data-cms-editable-templates]:has(> .cms-half-width, > * > .cms-half-width) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    [data-cms-editable-templates]:has(> .cms-half-width, > * > .cms-half-width) > * {
        grid-column: span 2;
    }

    [data-cms-editable-templates]:has(> .cms-half-width, > * > .cms-half-width) > .cms-half-width,
    [data-cms-editable-templates]:has(> .cms-half-width, > * > .cms-half-width) > :has(> .cms-half-width) {
        grid-column: span 1;
    }
}

/* Hidden conditional controls must not leave an empty grid cell. */
[data-cms-condition-hidden] {
    display: none !important;
}

/* Repeat templates stay editable; visitors use independently named entries. */
[data-repeat-source-hidden] { display: none !important; }
.cms-repeat-group { margin-block: 1.5rem; }
.cms-repeat-entry { border: 1px solid #d9dfe5; border-radius: .5rem; padding: 1rem; margin-bottom: 1rem; }
[data-repeat-template] { min-height: 4rem; }
[data-repeat-template]:not(:has(> [data-cms-component-id], > cms))::after { content: "Use Edit to Add Fields to This Group"; display: block; padding: 1rem; color: #667085; }