.reveal-dialog { padding: 0; border: 0; background: transparent; width: min(440px, calc(100vw - 32px)); max-height: 90dvh; color: #0F133A; font-family: 'Roboto', sans-serif; overflow: auto; }
.reveal-dialog::backdrop { background: #0009; }
.reveal-dialog .modal-body { padding: 30px 24px 24px; }
.reveal-dialog .modal-heading { margin: 20px 0; font-size: 25px; }
.reveal-dialog .modal-text-description { font-size: 17px; line-height: 1.5; margin: 12px 0 24px; }
.reveal-dialog-close { float: right; }
.reveal-dialog .modal-btn { width: 100%; margin-top: 14px; }
.reveal-dialog .modal-secondary-btn { display: block; margin: 14px auto 0; min-height: 44px; font-size: 18px; }
.reveal-dialog input:not([type=file]) { width: 100%; padding: 12px; font-size: 16px; border: 1px solid #ddd; border-radius: 10px; margin: 10px 0; }
.reveal-dialog input[type=file] { display: block; width: 100%; margin: 12px 0; }
.reveal-dialog label { display: block; margin-top: 16px; font-weight: 500; }
.reveal-dialog [role=alert] { color: #CC0000; overflow-wrap: anywhere; }
.reveal-dialog button:focus-visible, .reveal-dialog input:focus-visible { outline: 2px solid #989595; outline-offset: 2px; }

/* Use Magoo's normal grey close icon, never the inverted white modal X. */
.reveal-dialog .btn-close { width: 36px; height: 36px; padding: 4px; opacity: 1; filter: none; background: #E4E4E4 url('../img/close.svg') center / 28px no-repeat; border: 0; border-radius: 50%; box-shadow: none !important; }
.reveal-dialog button, .reveal-dialog .modal-body, .reveal-dialog .modal-content { box-shadow: none; }
.reveal-dialog textarea { display: block; width: 100%; box-sizing: border-box; border: 1px solid #ddd; border-radius: 10px; padding: 12px; margin-top: 8px; font: 16px/1.4 'Roboto', sans-serif; resize: vertical; }
.reveal-dialog textarea:focus-visible { outline: 2px solid #989595; outline-offset: 2px; }
.reveal-dialog input:focus, .reveal-dialog textarea:focus { border-color: #ddd; }