.modal {
position: fixed;
width: 100%;
height: 100%;
padding: 0;
backdrop-filter: blur(7.5px) saturate(200%);
-webkit-backdrop-filter: blur(7.5px) saturate(200%);
background-color: rgba(0, 0, 0, .3);
opacity: 0;
transition: .5s;
z-index: 100;
}
.modal.show {
opacity: 1;
}
.modal .modal-content {
width: 90%;
top: -100%;
max-width: 500px;
border-radius: 3px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
background: #ffffff;
transition-delay: .5s;
transition: .5s;
}
.modal.show .modal-content {
top: 40px;
}
.modal .modal-header,
.modal .modal-body,
.modal .modal-footer {
width: calc(100% - 30px);
padding: 20px 15px;
}
.modal .modal-body {
max-height: calc(100vh - (40px * 2) - (20px * 6) - (20px * 2) - 50px);
overflow: scroll;
}
.modal .modal-header {
border-bottom: 1px solid #DEDEDE;
}
.modal .modal-footer {
border-top: 1px solid #DEDEDE;
}
.modal .modal-header .modal-title {
width: calc(100% - 20px);
font-size: 20px;
line-height: 20px;
font-weight: 400;
}
.modal .modal-header .modal-close {
width: 20px;
height: 20px;
line-height: 20px;
font-size: 20px;
cursor: pointer;
color: rgba(0,0,0,.5);
text-align: right;
transition: .3s;
}
.modal .modal-header .modal-close:hover {
color: rgba(0,0,0,.8);
}

.modal .custom-form {
position: relative;
float: left;
width: 100%;
max-width: 100%;
padding: 0;
margin: 0;
}

.modal .custom-form .modal-footer {
margin-top: -15px;
}
.modal .modal-footer .btn {
float: right;
}
.modal .modal-footer .btn:nth-child(2) {
margin-right: 10px;
}