/*
 * Responsive Bootstrap modal dialogs.
 *
 * Many dialogs set their size inline for desktop (max-width:30%, width:400px, min-width:900px, ...).
 * On phones/tablets that squeezes the dialog to a sliver or pushes it off-screen, so below desktop
 * width we ignore those inline sizes and let the dialog fill the screen (Bootstrap's own mobile sizing).
 * !important is required to beat the inline styles.
 */
@media (max-width: 991.98px) {
    .modal-dialog {
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 3.5rem) !important;
        margin: 1.75rem auto !important;
    }
}

@media (max-width: 575.98px) {
    .modal-dialog {
        max-width: calc(100% - 1rem) !important;
        margin: 0.5rem auto !important;
    }
}