/* Dialog chrome shared by document pages, dynamic dialogs and GWT popups.
   Feature styles should only size the dialog or lay out its contents. */
.dt-dialog-surface {
    box-sizing: border-box;
    background: #1a1a1c;
    color: #f7f3ea;
    border: 1px solid #ffffff2b;
    border-radius: 14px;
    box-shadow: 0 24px 80px #0009;
}
.dt-dialog {
    position: fixed;
    inset: 0;
    margin: auto;
    width: min(var(--dialog-width, 460px), calc(100% - 32px));
    max-width: none;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 28px;
    text-align: left;
    font: 14px/1.7 Inter, system-ui, sans-serif;
}
.dt-dialog, .dt-dialog * { box-sizing: border-box; }
.dt-dialog:not([open]) { display: none; }
.dt-dialog::backdrop, .dt-dialog-scrim { background: #000a; backdrop-filter: blur(4px); }
.dt-dialog-scrim { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 16px; }
.dt-dialog-scrim[hidden] { display: none; }
.dt-dialog--inline { position: relative; inset: auto; margin: 0; width: min(460px, 100%); }
.dt-dialog--inline:not([open]) { display: block; }
.dt-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 20px; }
.dt-dialog-heading > :first-child { min-width: 0; overflow-wrap: anywhere; }
.dt-dialog-heading :is(h1,h2), .dt-dialog-heading > .dt-dialog-title { margin: 0; color: #f7f3ea; font: 700 28px/1.25 'Barlow Condensed', sans-serif; }
.dt-dialog-heading form { flex-shrink: 0; margin: 0; }
.dt-dialog-heading--attached { margin: 0; padding: 16px 20px; border-bottom: 1px solid #ffffff14; }
.dt-dialog-close {
    box-sizing: border-box; display: grid; place-items: center; flex-shrink: 0;
    width: 40px; height: 40px; margin: 0; padding: 0;
    border: 1px solid #ffffff26; border-radius: 9px;
    background: #ffffff0a; color: #c8bfae; cursor: pointer; font: 28px/1 Arial, sans-serif;
}
.dt-dialog-close:hover { color: #ffcc1a; background: #ffffff14; }
.dt-dialog :focus-visible, .dt-dialog-surface .dt-dialog-close:focus-visible { outline: 2px solid #ffcc1a; outline-offset: 3px; }
.dt-dialog > p { color: #c8bfae; font: 14px/1.7 Inter, sans-serif; margin: 0 0 24px; overflow-wrap: anywhere; }
/* GWT positions and sizes its popups itself; only their chrome is shared. */
.dt-dialog-glass { position: fixed !important; width: 100% !important; height: 100% !important; background: #000a; backdrop-filter: blur(4px); }
@media (max-width: 480px) {
    .dt-dialog { padding: 20px; }
    .dt-dialog-heading { gap: 12px; }
    .dt-dialog-heading--attached { padding: 12px 14px; }
}