/*  The white card the hosted portal page draws behind an embedded form.

    This is PAGE chrome, not widget styling, and it is deliberately not part of
    ep-public-form.css. A form embedded on a customer's own site should sit on
    whatever surface that site provides; imposing a white card there would make
    it look pasted on. Only infoportal.aspx links this file.

    No max-width here on purpose. The page's own #wrapper is already capped at
    1200px, which is what legacy renders inside too, so adding a second narrower
    cap only produced a thin strip of gray down each side and a magic number
    nobody could justify. The panel fills its container and the container does
    the constraining.  */

.ep-portal-surface {
    background: #ffffff;
    border: 1px solid #e3e7eb;
    border-radius: 6px;
    padding: 28px 32px 32px;
    margin: 0 auto;
    box-shadow: 0 1px 2px rgba(20, 24, 29, .04);
}

/*  Breathing room under the card, mirroring the 16px between the header and the
    top of it.

    The card is its container's last child, so a plain bottom margin collapses
    through and the page ends flush against the card edge. Padding on #wrapper
    does not work either: something with higher specificity already sets it, and
    winning that fight on a shared page element is not worth it. display:flow-root
    on the immediate parent establishes a block formatting context, which stops
    the collapse and lets the card keep its own margin.

    Only infoportal.aspx links this stylesheet, so #webPortalContent is never
    touched on a customer's embedded form.  */
#webPortalContent {
    display: flow-root;
}

.ep-portal-surface {
    margin-bottom: 16px;
}

@media (max-width: 720px) {
    .ep-portal-surface {
        padding: 18px 16px 22px;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }
}