/* Custom CSS to increase modal width globally and make it responsive */
.modal-dialog.modal-dialog-centered {
    max-width: 95vw !important;
}

@media (min-width: 576px) {
    .modal-dialog.modal-dialog-centered {
        max-width: 500px !important;
    }
}

@media (min-width: 768px) {
    .modal-dialog.modal-dialog-centered {
        max-width: 600px !important;
    }
}

@media (min-width: 992px) {
    .modal-dialog.modal-dialog-centered {
        max-width: 800px !important;
    }
}

@media (min-width: 1200px) {
    .modal-dialog.modal-dialog-centered {
        max-width: 900px !important;
    }
}