.modal-component {
  --fade-duration: 0.2s;
  --backdrop-opacity: .15;
}

.modal-dialog-full-width {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
}

.modal-content-full-width {
  height: auto !important;
  min-height: 100% !important;
}

.modal-xl {
  max-width: 90% !important;
}

.modal-fade-enter-active {
  opacity: 0;
  display: block;
  transition: opacity var(--fade-duration) ease;
}

.modal-fade-leave-active {
  opacity: 1;
  display: block;
  transition: opacity var(--fade-duration) ease;
}

.modal-fade-enter-from,
.modal-fade-leave-to {
  opacity: 0;
}

.modal-fade-enter-to {
  opacity: 1;
}

.modal-backdrop {
  opacity: var(--backdrop-opacity);
}

.modal-backdrop-enter-active {
  opacity: 0;
  display: block;
  transition: opacity var(--fade-duration) ease;
}

.modal-backdrop-leave-active {
  opacity: var(--backdrop-opacity);
  display: block;
  transition: opacity var(--fade-duration) ease;
}


.modal-backdrop-enter-from,
.modal-backdrop-leave-to {
  opacity: 0;
}

.modal-backdrop-enter-to {
  opacity: var(--backdrop-opacity);
}