/* the orbitorium screen */

@media (min-width: 1rem) {
  #layout__container .relative > #loyalty-page__container {
    padding-top: 200px !important;
  }
}

@media (min-width: 40rem) {
  #layout__container .relative > #loyalty-page__container {
    padding-top: 220px !important;
  }
}

@media (min-width: 48rem) {
  #layout__container .relative > #loyalty-page__container {
    padding-top: 260px !important;
  }
}

@media (min-width: 64rem) {
  #layout__container .relative > #loyalty-page__container {
    padding-top: 320px !important;
  }
}

@media (min-width: 80rem) {
  #layout__container .relative > #loyalty-page__container {
    padding-top: 380px !important;
  }
}

@media (min-width: 96rem) {
  #layout__container .relative > #loyalty-page__container {
    padding-top: 400px !important;
  }
}

@media (min-width: 120rem) {
  #layout__container .relative > #loyalty-page__container {
    padding-top: 500px !important;
  }
}

@media (max-width: 80rem) {
  div[id*="loyalty-quest"] .secondary-pill-button,
  div[id*="loyalty-quest"] .secondary-pill-button span {
    font-size: 12px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
}

#loyalty-page__container > div:first-child {
  height: quto !important;
  min-height: auto;
  flex: 1 1 auto;
  z-index: 2;
  position: absolute;
  width: 100%;
  aspect-ratio: 32 / 9;
}

#loyalty-page__container > img {
  min-height: auto !important;
  width: 100% !important;
  overflow: visible;
  position: absolute;
  z-index: 1;
  top: 0px;
  padding: 0;
  margin: 0;
  aspect-ratio: 32 / 9;
  height: auto;
  object-fit: cover;
}

h1 {
  font-size: 120%;
  font-weight: bold;
}

h2 {
  font-size: 105%;
}

#earn-loyalty-points > div:nth-child(2) > div > h1 {
  display: none;
}

.header-loyalty-points-parent {
  text-align: center;
}

.header-description-parent {
  display: none;
}

#leaderboard table tbody tr:nth-child(odd) {
  background-color: #111140;
}

#leaderboard table tbody tr td:nth-child(2) {
  padding-right: 0.5em;
}

#loyalty-history-table > div > div > div:nth-child(odd) {
  background-color: #111140;
}