.modal-dialog {
  overflow-y: initial !important;
  overflow-x: auto;
  display: table;
  max-width: initial;
  position: relative;
}

.modal-dialog.modal-attached {
  min-width: 1px;
  position: absolute;
}

.modal-dialog.modal-attached > .modal-content {
  display: inline-block;
}

.modal-body {
  max-height: calc(100vh - 69px - 2px - (0.5rem * 2));
  overflow-y: auto;
}

@media (max-width: 767px) {
  .modal-body {
    width: calc(100vw - 20px);
  }
}

/* desktop view, make modal cover middle of screen */
@media (min-width: 768px) {
  .modal-body {
    width: auto;
    min-width: 40vw;
    max-width: 90vw;
  }
  .modal-dialog.modal-popup .modal-body {
    min-width: auto;
  }
}

@media (min-width: 576px) {
  .modal-body {
    max-height: calc(100vh - 69px - 2px - (1.75rem * 2));
  }
}

.modal-dialog .modal-header {
  background-color: #0067a6;
}

.modal-dialog .modal-header.modal-warning {
  background-color: #f0ad4e;
}

.modal-dialog .modal-header .modal-title {
  color: white;
}

.modal-dialog button.close {
  color: white;
  font-size: 2em;
  background-color: transparent;
  border-color: transparent;
}

.modal-dialog .modal-spinner,
.modal-dialog .modal-success,
.modal-dialog .modal-error {
  width: 100%;
  text-align: center;
  padding: 10px;
}

.modal-spinner .modal-spinner-icon {
  color: #0067a6;
}