.w3-animate-opacity {
  animation: opac 0.8s;
}
@keyframes opac {
  from {opacity: 0} to {opacity: 1}
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  ms-overflow-style: none;
  overscroll-behavior: contain;
  scrollbar-width: none;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}
.modal::-webkit-scrollbar {
  display: none;
}
.modal-button {
  position: relative;
  margin: 0.4rem;
  border-radius: 0.8rem;
  padding: 0.8rem;
  background-color: var(--w3-theme-l1-background-color) !important;
  color: var(--w3-theme-l1-color) !important;
}
@media (hover:hover) {
.modal-button:hover {
  background-color: var(--w3-theme-background-color) !important;
  color: var(--w3-theme-color) !important;
}}
.modal-card {
  padding: 1.6rem;
  background-color: var(--w3-theme-l3-background-color) !important;
  color: var(--w3-theme-l3-color) !important;
}
.modal-prompt {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 35rem;
  border-radius: 0.8rem;
  transform: translate(-50%, -50%);
}
.modal-promo {
  z-index: 19;
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
.modal-prompt {
  width: 60rem;
}
}