/* Periodic Table interaction/layout corrections. */
#info-modal-id.info-modal {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: min(92vw, 720px) !important;
  height: auto !important;
  max-height: 88vh !important;
  overflow: auto !important;
  margin: 0 !important;
  padding: 24px !important;
  border: 2px solid !important;
  border-image: linear-gradient(-45deg,
    var(--leftGrad, var(--dc-ink, #101010)) 10%,
    var(--centerGrad, var(--dc-line, #c9c9c3)) 50%,
    var(--rightGrad, var(--dc-accent, #3157ff)) 100%) 1 !important;
  background: var(--dc-paper, var(--bg)) !important;
  color: var(--dc-ink, var(--text)) !important;
  box-shadow: 0 18px 55px rgba(0, 0, 0, .28) !important;
}

#info-modal-id .data {
  width: 100% !important;
  height: auto !important;
}

#info-modal-id .data > img {
  display: block !important;
  width: min(100%, 500px) !important;
  height: auto !important;
  max-height: 42vh !important;
  object-fit: contain !important;
  margin: 14px auto !important;
}

#info-modal-id .card-stats {
  flex-wrap: wrap;
  gap: 16px;
  padding: 14px;
}

#info-modal-id .card-stats ul {
  margin: 0;
  padding: 0;
}

@media (max-width: 640px) {
  #info-modal-id.info-modal {
    width: calc(100% - 28px) !important;
    max-height: 84vh !important;
    padding: 18px !important;
  }

  #info-modal-id .data h1 {
    padding-right: 34px;
    font-size: 1.8rem !important;
  }
}