.modal .modal-responsive-dialog {
    margin: 10px auto;
    width: min(900px, calc(100vw - 20px));
}

.modal .modal-dialog.modal-sm.modal-responsive-dialog {
    width: min(300px, calc(100vw - 20px));
}

.modal .modal-dialog.modal-lg.modal-responsive-dialog {
    width: min(900px, calc(100vw - 20px));
}

.modal .modal-responsive-content {
    display: flex;
    flex-direction: column;
    height: auto;
    max-height: calc(100vh - 20px) !important;
    overflow: hidden !important;
}

.modal .modal-responsive-scroll {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.modal .modal-responsive-body {
    flex: 1 1 auto;
    height: auto !important;
    min-height: 0;
    overflow-y: auto;
}

.modal .modal-responsive-footer {
    flex: 0 0 auto;
    padding: 10px 15px;
    background: #fff;
    border-top: 1px solid #e5e5e5;
}

.modal .modal-responsive-actions-row {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 0 -15px;
}

@media (max-width: 767px) {
    .modal .modal-responsive-dialog,
    .modal .modal-dialog.modal-sm.modal-responsive-dialog,
    .modal .modal-dialog.modal-lg.modal-responsive-dialog {
        margin: 5px auto;
        width: calc(100vw - 10px);
    }

    .modal .modal-responsive-content {
        max-height: calc(100vh - 10px) !important;
    }

    .modal .modal-header {
        padding: 10px 15px;
    }

    .modal .modal-responsive-footer .btn {
        float: none !important;
        width: 100%;
        margin: 4px 0;
        white-space: normal;
    }
}