/* Add your own CSS styles there */

:root {
  --tx-accent: #FA8100 !important;
  --ui-secondary-hover: #F4FFEC !important;
}

.secondary-pill-button {
  border: 1.5px solid var(--ui-stroke-for-btn, #ADFFA6) !important;
  background: var(--ui-secondary, #FFF) !important;
  /* btn-drop-shadow */
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25) !important;
}

.secondary-pill-button:hover {
  background: var(--ui-secondary-hover, #F4FFEC) !important;
}

#loyalty-leaderboard > p:first-of-type {
  font-family: "Orbitron" !important;
}

#loyalty-shop .grid > div > div {
  box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.20);
  border-radius: 12px;
}

#loyalty-shop .grid > div > div > a {
  box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.20);
}

.show-active {
  box-shadow: 0 0 4px 0 #FA8100;
  text-shadow: 0 0 4px rgba(250, 129, 0, 0.25);
}

.loyalty-points {
  border-radius: 6px;
  border: 1px solid var(--ui-stroke-for-outcome, #69FF5C);
  /* outcome-box-inner-shadow */
  box-shadow: 0 5px 6px 1px rgba(0, 0, 0, 0.15) inset;
}

.range-multiplier > div {
  border-radius: 6px;
  border: 1px solid var(--ui-stroke-for-outcome, #69FF5C);
  /* outcome-box-inner-shadow */
  box-shadow: 0 5px 6px 1px rgba(0, 0, 0, 0.15) inset;
}

[id^="loyalty-quest-root"] {
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.20) !important;
}

.claim-token-section > div:first-child > div:first-child {
  box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.20);
  border-radius: 0.75rem;
}

.token-info-section > div:first-child > div:first-child {
  box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.20);
}

/* .claim-token-section > div:first-child > div:first-child > div:first-child div:nth-of-type(2) {
  background: var(--ui-secondary, #FFF) !important;
} */

.input-field__container input {
  box-shadow: inset 0 5px 6px 1px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--ui-stroke-for-outcome, #69FF5C) !important;
  background: var(--ui-secondary-hover, #F4FFEC) !important;
  border-radius: 6px;
}

.claim-token-section > div:first-child > div:first-child > div:first-child > div:nth-child(2) {
  background-color: var(--ui-secondary-hover) !important;
  border-top: none !important;
  background-image: linear-gradient(to right, black 50%, transparent 0%) !important;
  background-position: top !important;
  background-size: 25px 1px !important;
  background-repeat: repeat-x !important;
}