#dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  padding: 0;
  margin: 0;
  z-index: 1000;
}

#dialog.d_none {
  display: none;
}

#dialog::backdrop {
  background: transparent;
  position: static;
}

.tab_loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 2rem 0;
}

.spinner {
  width: 2rem;
  height: 2rem;
  border: 0.2rem solid rgba(0, 0, 0, 0.2);
  border-top-color: rgb(60, 77, 145);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Media-Queries: */
@media (max-width: 1000px) {
  .dexdlg {
    grid-template-rows: minmax(0, 50%) minmax(0, 50%);
    grid-template-columns: 1fr;
    height: 90vh;
    min-height: 0;
  }
  .dexdlg::after {
    width: 0;
    border: 0;
  }
  .dexdlg_left {
    grid-template-rows: minmax(0, 1fr) auto auto;
    min-height: 0;
  }

  .dexdlg_screen img,
  .dexdlg_screen .poke_img {
    max-width: calc(100% - 1.13rem);
    max-height: calc(100% - 1.13rem);
    position: absolute;
  }
  .dexdlg_right {
    width: 100%;
    box-shadow: inset 0 0 0 0.2rem rgb(204, 204, 204);
  }
  .dexdlg_content {
    flex: 1 1 auto;
    padding-left: 1rem;
    min-height: 0;
    overflow: auto;
  }
  .bar {
    margin: 0.8rem 0;
  }
  .evo_chain {
    margin-top: 2rem;
    flex-direction: row;
    justify-content: center;
  }
  .evo_arrow {
    padding: 0 0.5rem 0.5rem 0.5rem;
    rotate: 270deg;
  }

}

@media (max-width: 560px) {
  .dexdlg {
    width: 95%;
    height: 92vh;
    padding: 0.5rem;
  }
  .dexdlg_left {
    padding: 0.4rem;
    gap: 0.5rem;
  }
  .dexdlg_right {
    border-width: 0.15rem;
  }
  .dexdlg_nav .tab {
    min-width: auto;
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
  }
  .bar_label {
    flex: 0 0 8rem;
    font-size: 0.85rem;
  }
  .bar_track i {
    font-size: 0.55rem;
    line-height: 1.5rem;
  }
  .evo_card {
    width: 7rem;
    padding: 0.2rem 0.4rem;
  }
  .evo_label {
    font-size: 0.8rem;
  }
}

@media (max-width: 500px) {
  .evo_chain {
    flex-direction: column;
  }
  .evo_arrow {
    padding: 0;
    rotate: unset;
  }
}

@media (max-width: 400px) {
  .btn {
    font-size: 0.85rem;
    padding: 0.4rem 0.6rem;
  }
  .dexdlg_controls {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.4rem;
  }
  .dexdlg_nav {
    gap: 0.4rem;
  }
  .dexdlg_content {
    padding: 0.5rem;
  }
}

@media (max-width: 350px) {
  .dexdlg {
    width: 100%;
    height: 100vh;
    border-radius: 0;
    padding: 0.3rem;
  }
  .dexdlg_left,
  .dexdlg_right {
    border-radius: 0.375rem;
  }
  .dexdlg_nav .tab {
    padding: 0.3rem 0.5rem;
    font-size: 0.75rem;
  }
  .bar_label {
    flex: 0 0 6rem;
    font-size: 0.75rem;
  }
  .evo_card {
    width: 5.5rem;
    padding: 0.1rem 0.3rem;
  }
  .evo_label {
    font-size: 0.7rem;
  }
}

/* Media-Queries for wider Screens */
@media (min-width: 3840px) {
  html {
    font-size: 20px;
  }
  .dexdlg {
    width: min(80rem, 90vw);
    height: min(48rem, 86vh);
  }
  .dexdlg__controls .btn {
    height: 3rem;
    font-size: 1.05rem;
  }
  .dexdlg__content {
    padding: 1.1rem 1.5rem;
  }
  .bar_track {
    height: 1.9rem;
  }
  .bar_track i {
    line-height: 1.9rem;
  }
  .evo_card {
    width: 9rem;
  }
}

@media (min-width: 5120px) {
  .dexdlg_nav .tab {
    min-width: 9rem;
    min-height: 2.5rem;
    font-size: larger;
  }

  html {
    font-size: 24px;
  }
  .dexdlg {
    width: min(110rem, 80vw);
    height: min(64rem, 86vh);
  }
  .dexdlg__controls .btn {
    height: 3.2rem;
    font-size: 1.1rem;
  }
  .evo_card {
    width: 11rem;
  }
}

@media (min-width: 6400px) {
  html {
    font-size: 26px;
  }
  .dexdlg {
    width: min(128rem, 78vw);
    height: min(72rem, 86vh);
  }
}

@media (min-width: 7680px) {
  html {
    font-size: 30px;
  }
  .dexdlg {
    width: min(150rem, 74vw);
    height: min(84rem, 86vh);
  }
}