/* Base modal structure. Brand styling lives in the theme (old-style.css -> "Gravity Form - Confirmation Popup Modal"). */ /* Needed explicitly: .gf-modal sets display:flex, which would otherwise beat the user-agent [hidden] rule. */ .gf-modal[hidden] { display: none; } /* Fills the viewport, not the document: the dialog centres on screen height regardless of how tall the page is. The JS moves this element to on open so no transformed ancestor can become its containing block. */ .gf-modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; /* Gutter around the dialog; the dialog itself is width:100% of what's left. */ padding: 30px; } .gf-modal__overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: rgba(0, 0, 0, 0.8); cursor: pointer; } .gf-modal__dialog { position: relative; z-index: 1; width: 100%; max-width: 800px; max-height: 90vh; max-height: 90dvh; /* accounts for mobile browser chrome */ overflow: auto; padding: 2.5rem; text-align: center; background: #fff; border-radius: 3px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25); } .gf-modal__dialog:focus { outline: none; } .gf-modal__close { position: absolute; top: 10px; right: 10px; padding: 0; border: 0; background: none; font-size: 24px; font-weight: bold; line-height: 1; color: inherit; cursor: pointer; } .gf-modal__close:hover { opacity: 0.8; } body.gf-modal-open { overflow: hidden; }