.modal.fade .modal-dialog {
    transform: translate(0, -25%);
    transition: transform 0.3s ease-out;
}

.modal.show .modal-dialog,
.modal.in .modal-dialog {
    transform: translate(0, 0);
}

/* Keep modal visually below top edge on tall content */
.modal-dialog {
    margin: 1.75rem auto;
}

.modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 3.5rem);
    overflow: hidden;
}

.modal-dialog-scrollable .modal-body {
    max-height: calc(100vh - 10rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.modal.fade.in,
.modal.fade.show {
    opacity: 1;
}

.modal-backdrop.in,
.modal-backdrop.show {
    opacity: 0.5;
}