.modal-backdrop {
  --bs-backdrop-zindex: 9999;
  --bs-backdrop-bg: var(--dark-grey);
  --bs-backdrop-opacity: 0.1;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--bs-backdrop-zindex);
  width: 100vw;
  height: 100vh;
  background-color: var(--bs-backdrop-bg);
}
.modal-backdrop.fade {
  opacity: 0;
}
.modal-backdrop.show {
  opacity: var(--bs-backdrop-opacity);
}
.modal-open{
  overflow: hidden;
}
.modal{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
  display: none;
}
.modal.show{
  display: block;
}
.modal.fade .modal-dialog {
  --bs-modal-margin: 1.75rem;
  --bs-modal-width: 88rem;
  position: relative;
  width: 100%;
  margin: var(--bs-modal-margin);
  display: flex;
  align-items: center;
  min-height: calc(100% - var(--bs-modal-margin)* 2);
  max-width: var(--bs-modal-width);
  margin-right: auto;
  margin-left: auto;
  -webkit-transform: translate(0, -50px);
  -moz-transform: translate(0, -50px);
  transform: translate(0, -50px);
  -moz-transition: transform .3s ease-out;
  -webkit-transition: transform .3s ease-out;
  transition: transform .3s ease-out;
}
.modal.show .modal-dialog {
  -webkit-transform: none;
  -moz-transform: none;
  transform: none;
}
.modal-content{
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  outline: 0;
  background: var(--white);
}
.btn-close {
  position: absolute;
  top: 4.8rem;
  right: 4.8rem;
}
.btn-close img {
  width: 2.3rem;
}
@media(min-width:768px) and (max-width:991.98px) {
  .modal.fade .modal-dialog {
    --bs-modal-width: 70rem;
  }
  .btn-close {
    top: 3.2rem;
    right: 3.2rem;
  }
}
@media(max-width:767.98px){
  .modal.fade .modal-dialog {
    --bs-modal-width: calc(100% - 2rem)
  }
  .btn-close {
    top: 2.4rem;
    right: 2.4rem;
  }
  .btn-close img {
    width: 2rem;
  }
}