.w3-animate-opacity {
  animation: opac 0.8s;
}
@keyframes opac {
  from {opacity: 0} to {opacity: 1}
}
.w3-hoverable tbody tr:hover {
  background-color: #ccc;
}
.w3-responsive {
  display: block;
  overflow-x: auto;
}
.w3-round-large {
  border-radius: 0.8rem;
}

.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-button-loading::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3rem;
  width: 3rem;
  margin: auto;
  border: 0.5rem solid transparent;
  border-radius: 50%;
  border-top-color: var(--w3-theme-d5-background-color);
  content: "";
  animation: modal-button-loading-spinner 1s ease infinite;
}
@keyframes modal-button-loading-spinner {
  from {transform: rotate(0turn);}
  to {transform: rotate(1turn);}
}
.modal-calculate {
  z-index: 11;
}
.modal-card {
  padding: 0.8rem;
  background-color: var(--w3-theme-l3-background-color) !important;
  color: var(--w3-theme-l3-color) !important;
}
.modal-card img {
  margin-bottom: 0.8rem;
  border-radius: 0.8rem;
  width: 100%;
}
.modal-content {
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
  width: 100%;
  border-radius: 0.8rem;
  transform: none;
}
.modal-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 30rem;
  width: 30rem;
  border-radius: 0.8rem;
  transform: translate(-50%, 100%);
}
.modal-image {
  z-index: 9;
}
.modal-map {
  z-index: 7;
}
#modal-map-iframe {
  border-radius: 0.8rem;
}
.modal-report {
  z-index: 13;
}
.modal-search {
  z-index: 5;
}
.modal-table-disable {
  cursor: not-allowed;
  pointer-events: none;
  background-color: var(--w3-theme-background-color) !important;
  color: var(--w3-theme-color) !important;
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
.modal-card {
  border-radius: 0.8rem;
}
.modal-content {
  top: 50%;
  left: 50%;
  max-width: 100rem;
  transform: translate(-50%, -50%);
}
.modal-empty {
  transform: translate(-50%, -50%);
}
}