/* GENERATED FILE. Do not edit. Source: ep-portal-surface.less in this folder.
   Edit the .less, then run: node Styles/build-standalone.js */
/*  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(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12);
}
/*  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: 767px) {
  .ep-portal-surface {
    padding: 18px 16px 22px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
}