/* Site-wide due-date reminder modal.
   Mirrors the small-screen treatment in sop-chat.css so the modal is usable on
   mobile, where the app uses the same responsive layout as desktop. */

#dueReminderModal .modal-title {
    font-weight: 600;
}

#dueReminderModal #dueReminderMessage {
    font-size: 1rem;
    line-height: 1.55;
}

@media (max-width: 575.98px) {
    #dueReminderModal .modal-dialog {
        margin: 0.5rem;
    }

    #dueReminderModal .modal-footer {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 0.5rem;
    }

    #dueReminderModal .modal-footer > .btn,
    #dueReminderModal .modal-footer > a.btn {
        width: 100%;
        margin: 0;
    }
}