.modal-header {
  background: rgb(0, 164, 100) !important;
  color: rgb(236,255,247);
  border: 0 !important;
}

.btn-close {
  padding: 0.5rem;
  opacity: 0.75;
  transition: opacity 0.2s;
}

.btn-close:hover {
  opacity: 1;
}

.btn-close {
  padding: 0.5rem;
  opacity: 1 !important;
  filter: brightness(0) saturate(100%) invert(98%) sepia(19%) saturate(368%) hue-rotate(79deg) brightness(103%) contrast(96%);
}

.btn-close:hover {
  opacity: 0.6 !important;
}

:root {
  --modal-width-percent: 90;
  --aspect-ratio: 0.75;
}

#imageContainer {
  background-color: #f8f9fa;
  margin: 0 auto;
}

.modal-dialog {
  margin: 10px auto;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 768px) {
  .modal-dialog {
    margin: auto !important;
  }
}

@media (max-width: 768px) {
  .modal-content {
    border: 0;
    border-radius: 0;
  }
}

.btn-close {
  padding: 0.5rem;
  opacity: 1 !important;
  filter: brightness(0) saturate(100%) invert(98%) sepia(19%) saturate(368%) hue-rotate(79deg) brightness(103%) contrast(96%);
}

.btn-close:hover {
  opacity: 0.8 !important;
}

.modal-content {
  background: none;
}

.modal-open {
  /*overflow: hidden;*/
  /*max-width: 100vw;*/
  /*max-height: 100vh;*/
}

#urlModal.show {
  display: flex !important;
}

#modalwrapper {
  display: flex;
  justify-self: center;
}