dialog { border: none; padding: 16px; overflow: hidden; }

dialog#designer-alerts[open] { display: block; height: auto; width: 840px; padding: 0; max-width: unset; border: 1px solid #ccc; }

/* Target only non-polyfilled dialog (role=dialog is added by dialog-polyfill) to avoid issue: blurry text from percent translate causing subpixel antialiasing in Safari */
dialog#designer-alerts:not([role="dialog"]) { top: 50%; bottom: unset; transform: translateY(-50%); border: none; }

dialog .promo-alert { display: flex; padding-top: 20px; align-items: center; gap: 32px; }

dialog .about-trade-alert img { display: flex; order: 1; width: 160px; }

dialog .welcome-at-alert img { display: flex; width: 300px; }

dialog .promo-alert .promo-alert-content { flex-grow: 1; font-size: 18px; }

dialog .promo-alert .promo-alert-content h4 { margin-top: 0; font-size: 22px; }

/* Have to manually recreate a modal dialog so address autocomplete can appear above dialog. The dialog-polyfill also doesn't reposition this dialog for us (in Safari). */
dialog#address-dialog { position: fixed; top: 0; left: 0; margin: 5% auto; max-height: 90vh; border: 1px solid #ccc; overflow: auto; z-index: 1; }

/* Target only non-polyfilled dialog (role=dialog is added by dialog-polyfill) to avoid issue: blurry text from percent translate causing subpixel antialiasing in Safari */
dialog#address-dialog:not([role="dialog"]) { top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; border: none; }

div.picker { height: 100%; }

dialog:not([open]) { display: none; }

dialog::backdrop, dialog + .backdrop { background: rgba(52, 52, 52, 0.75); }

dialog + .backdrop { display: none; position: fixed; top: 0; bottom: 0; left: 0; right: 0; }

dialog + .backdrop.backdrop-shown { display: block; }

dialog button.close { top: 8px; right: 8px; position: absolute; background: none; border: none; width: auto; height: 32px; padding: 0; border-radius: 0; line-height: 24px; z-index: 100000; cursor: pointer; }

dialog button.close:active { position: absolute; top: 9px; }

dialog button.close > svg.svg-icon { width: 32px; height: 32px; }

#alert-indicator { display: none; align-items: center; margin-right: 16px; padding: 4px 10px; border-color: #D95941; }

#alert-indicator.shown { display: flex; }

dialog div.designer-alerts-content { padding: 12px 32px 32px; font-size: 16px; line-height: normal; }

div.designer-alerts-content h4 { font-family: 'National2',-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; margin: 24px 0 0; font-weight: 500; font-size: 18px; }

div.designer-alerts-content p { margin: 10px 0 24px; }

div.designer-alerts-content button.secondary { margin: 0 4px 8px 0; }

div.designer-alerts-content .cmyk-warning button.primary { margin: 0 4px 8px 0; }

div.designer-alerts-content p.alert-fine-print { margin: 8px 0 0; font-size: 13px; color: #666; }

dialog div.content { margin-top: 28px; padding: 0 20px; overflow: auto; }

dialog div.content div.preview { margin: 0 8px 16px; background-color: #C7CACC; overflow: auto; }

dialog > div.content > div.pager { visibility: hidden; }

dialog div.content h2 { margin: 0; }

dialog div.content h3 { margin: 0 0 16px 0; }

dialog div.content fieldset legend { margin-bottom: 12px; }

dialog div.content > label { display: block; margin: 16px 0 8px 0; }

dialog div.content > div.actions { height: 68px; background: #FFFFFF; box-shadow: inset 0 1px 0 0 #E4E4E4; padding: 16px 0; position: sticky; bottom: 0; left: 0; right: 0; column-gap: 16px; }

dialog div.content > div.actions form { display: flex; justify-content: space-between; align-items: center; }

dialog div.content > div.actions .button.secondary { margin-right: 16px; }

dialog div.content > div.actions .button.primary { flex-grow: 1; }

fieldset { border: none; margin: 0; padding: 0; margin-top: 16px; }

dialog div.row { margin-bottom: 12px; }

/* fieldset > div { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: stretch; column-gap: 11px; } */
@media (min-width: 900px) { dialog div.content { margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 68px; grid-template-areas: "image form" "pager actions"; } dialog div.content > div.actions { grid-area: actions; padding: 16px 32px; justify-content: stretch; } dialog div.content > div.preview { width: 420px; height: 420px; margin: 0; grid-area: image; } dialog div.content > div.pager { grid-area: pager; } dialog div.content > div.details { height: 420px; overflow: auto; padding: 24px 32px 40px 32px; grid-area: form; } dialog div.content > div.details fieldset > div.lg-3-across { display: grid; justify-content: space-between; align-items: stretch; grid-template-columns: repeat(3, 111px); } dialog div.content > div.details div.file { background: #F4F4F4; border: 1px solid #B4B4B4; border-radius: 4px 4px 4px 4px; padding: 12px 16px; margin-bottom: 24px; } dialog div.content > div.details div.file > div:first-child { display: grid; grid-template-columns: 30px auto; column-gap: 13px; font-family: 'National2',-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; font-size: 14px; align-items: center; margin-bottom: 18px; } dialog div.content > div.details div.file > div > div { font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } dialog div.content > div.details div.file img { margin: 0; display: inline-block; } dialog div.content > div.details div.file div.permissions { display: grid; align-items: center; grid-template-columns: 16px auto; column-gap: 12px; } dialog div.content > div.details div.file label { color: #343434; font-size: 14px; font-family: 'National2',-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; font-weight: normal; text-transform: none; } dialog div.content > div.details div.row { display: flex; flex-direction: row; margin-bottom: 18px; } dialog div.content > div.details div.row > label { width: 82px; margin-right: 14px; } dialog div.content > div.details div.row > input { width: auto; flex-grow: 1; } dialog div.content > div.details div.customize.option { width: 100%; } dialog div.content > div.details div.customize.option > label { width: 100%; height: 100%; align-items: start; } dialog div.content > div.details div.customize.option > label > span.content > span { margin: 0; } dialog div.content > div.details div.customize.option > label > span > span:not(:first-child) { font-size: 12px; } }

/* Modal on smaller viewports */
@media (max-width: 901px) { dialog, dialog#designer-alerts#designer-alerts { overflow: auto; width: 100vw; height: 100vh; padding-top: 24px; max-width: none; max-height: none; position: fixed; top: 0; bottom: 0; left: 0; right: 0; transform: none; } dialog div.details { padding-bottom: 20px; } dialog div.preview { height: 45vh; max-height: 45vh; overflow: hidden; } dialog div.content { overflow: visible; width: calc(100vw - 32px); /* margin: 28px 0 0 0; */ margin: 28px auto 0; max-width: 500px; padding-bottom: 120px; } dialog .promo-alert { flex-direction: column; } dialog .about-trade-alert img { display: none; } }