/* Compact SweetAlert2 dialogs on phones. Loaded only on pages that use
   SweetAlert2; desktop dialog sizing is intentionally unchanged. */
@media (max-width: 575.98px) {
    .swal2-popup {
        width: min(280px, calc(100vw - 40px)) !important;
        padding: .9em .8em 1em !important;
        font-size: .84rem !important;
    }

    .swal2-popup .swal2-icon {
        width: 3.4em !important;
        height: 3.4em !important;
        margin: .5em auto .75em !important;
    }

    .swal2-popup .swal2-title {
        margin-bottom: .3em !important;
        font-size: 1.42em !important;
    }

    .swal2-popup .swal2-content {
        font-size: .95em !important;
    }

    .swal2-popup .swal2-actions {
        margin-top: .75em !important;
    }

    .swal2-popup .swal2-styled {
        min-width: 64px;
        padding: .48em 1.35em !important;
        font-size: .9em !important;
    }

    /* SweetAlert's error animation targets the normal 5em icon. A fixed
       glyph keeps the X centred when the mobile icon is made smaller. */
    .swal2-popup .swal2-icon.swal2-error .swal2-x-mark {
        display: none !important;
    }

    .swal2-popup .swal2-icon.swal2-error::after {
        content: '\00d7';
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        color: #f27474;
        font-family: Arial, sans-serif;
        font-size: 3rem;
        font-weight: 300;
        line-height: 1;
    }
}