:root {
  --spotlight-bg-secondary: linear-gradient(0deg, #171826 0%, #020314 100%) !important;
  --spotlight-box-shadow: inset 0px 1px 0px 0px var(--ui-separator);
  --spotlight-bg-secondary-hover: linear-gradient(0deg, #2D2E40 0%, #1F2033 100%) !important;
  --ui-primary: linear-gradient(0deg, #2E66D6 0%, #084ACE 100%) !important;
  --ui-primary-hover: linear-gradient(0deg, #4476DA 0%, #225DD3 100%) !important;
  --ui-secondary-hover: linear-gradient(0deg, #2D2E40 0%, #1F2033 100%) !important;
  --tx-secondary: #7A8599 !important;
  --ui-bg: #020314 !important;
}

.bg-secondary-hover,
.hover\:bg-secondary-hover:hover {
  background: var(--spotlight-bg-secondary-hover);
  background-color: revert !important;
}

.bg-secondary {
  background: var(--spotlight-bg-secondary);
  background-color: revert !important;
}

#loyalty-page__container {
  /* padding-top: 200px; */
  background: transparent;
}

#loyaly-leaderboard__header {
  margin: 0;
}

#title-bar-wrapper.compact-loyalty-header,
#layout__container:has(#loyalty-leaderboard__container) > #title-bar-wrapper {
  background: var(--spotlight-bg-secondary);
  background-color: revert !important;
  border-bottom: 1px solid var(--ui-separator);
}

#title-bar-wrapper:has(#mobile-menu) {
  /*  background: var(--page-bg) !important; */
  background: var(--ui-bg) !important;
}

#layout__container:not(:has(#loyalty-leaderboard__container)) > #title-bar-wrapper:not(.compact-loyalty-header) {
  background: transparent;
  border: 0;
}

#title-bar {
  background: transparent;
  position: relative !important;
}

#title-bar-left ul,
#title-bar-left .nav-links-desktop {
  position: absolute;
  left: 30px;
  top: 28px;
  text-transform: uppercase;
}

#loyalty-header:not(.compact-loyalty-header) {
  background: transparent;
}

#loyalty-header.compact-loyalty-header {
  background: var(--spotlight-bg-secondary);
}

.secondary-pill-button:not(.primary-pill-button),
.pill-button:not(.primary-pill-button) {
  background: var(--spotlight-bg-secondary) !important;
  border-radius: 40px;
  border: 0 !important;
  box-shadow: var(--spotlight-box-shadow);
}

.primary-pill-button {
  background: linear-gradient(0deg, #2E66D6 0%, #084ACE 100%) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
}

.primary-pill-button:hover {
  background-image: linear-gradient(0deg, #4476DA 0%, #225DD3 100%) !important;
}

.border-separator {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

#title-bar {
  gap: 0 !important;
}

#title-bar-left {
  margin-left: 44.2%;
  gap: 0;
  width: 40%;
}

#title-bar-left .pr-6.flex.gap-6 {
  width: 100%;
  justify-content: space-between;
}

.pill-button,
.text-button {
  font-family: "DM Mono";
  font-weight: 400;
  text-transform: uppercase;
}

.loyalty-quest {
  border: 0;
  box-shadow: var(--spotlight-box-shadow);
  background: var(--spotlight-bg-secondary) !important;
}

.loyalty-quest > * .secondary-pill-button:hover {
  background-color: var(--spotlight-bg-secondary-hover) !important;
}

#loyalty-header.sticky-bg-border-bottom:after {
  border-bottom: 1px solid var(--ui-separator);
}

#loyalty-header > * h1 {
  font-family: "test-manuka-bold";
  font-size: 48px;
  line-height: 48px;
  text-transform: uppercase;
}

.socials-row,
#marketplace-link,
.user-page-loyalty-currency-image,
.success-message-points-image,
.range-multiplier img {
  display: none !important;
}

#website-logo {
  gap: 0;
}

#loyalty-header.compact-loyalty-header > * h1 {
  font-size: 30px;
  line-height: 30px;
}

.fi-brands-discord,
.fi-brands-discord,
.fi-brands-twitter-alt {
  color: #ffffff !important;
}

.loyalty-points-icon-image,
#loyalty-header img,
#loyalty-history-table img,
.order-3 a.pill-button img,
#title-bar__loyalty-balance-row img,
#loyalty-quest-root-check_in img,
.leaderboard-homepage .secondary-pill-button,
.signin-modal-container .fi-rr-angle-small-left {
  display: none;
}

img[src*="apechain%20coin.png"] {
  display: none !important;
}

/* #connect-wallet-to-view-history, */

#no-loyalty-history {
  box-shadow: var(--spotlight-box-shadow);
  border: 0;
}

#connect-wallet-to-view-history {
  background-color: #020415 !important;
}

#loyalty-quests {
  gap: 12px;
}

#mobile-menu > div:last-child {
  display: none;
}

.edit-profile-modal-body > * button[role=tab] {
  font-family: "DM Mono";
  font-weight: 400;
  border: 0;
}

.edit-profile-modal-body > * button[data-state="active"] {
  box-shadow: var(--spotlight-box-shadow);
  background: var(--spotlight-bg-secondary);
}

.edit-profile-modal-body > * input,
.edit-profile-modal-body > * textarea {
  border: 0;
  background: var(--spotlight-bg-secondary);
  box-shadow: var(--spotlight-box-shadow);
}

.edit-profile-modal-body > * input[name="geolocation"] {
  height: 44px;
}

#loyalty-history-table > * .text-button {
  color: var(--tx-primary);
}

#loyalty-history-table > * .connect-button > * .text-button:hover {
  color: var(--tx-accent-hover);
}

#loyaly-leaderboard__header > * .input-field__container {
  box-shadow: var(--spotlight-box-shadow);
  border-radius: 4px;
}

#loyaly-leaderboard__header > * .input-field__container > * input {
  border: 0;
  border-radius: 4px;
  box-shadow: var(--spotlight-box-shadow);
}

.edit-profile-modal-body > * .provider-button__container {
  border: 0;
  box-shadow: var(--spotlight-box-shadow);
  background: var(--spotlight-bg-secondary);
}

#loyalty-quest__placeholder-one {
  border-radius: 8px;
}

#modal-header-check-in,
#modal-header-check-in-failed {
  background: transparent;
  background-color: var(--ui-secondary) !important;
}

#loyaly-leaderboard__header.sticky-after-bg-extend:after {
  border-bottom: 1px solid var(--ui-separator);
}

.loyalty-points {
  border-radius: 6px !important;
  background: none !important;
}

/*
#layout__container:not(:has(#loyalty-leaderboard__container)):after {
  background-image: linear-gradient(to bottom, transparent 200px, #020314), url(https://i.ibb.co/St2GLcN/spotlight-bg-new.jpg);
  background-repeat: no-repeat;
  background-color: var(--ui-bg);
  content: '';
  width: 100%;
  height: 361px;
  top: 0;
  position: absolute;
  background-position: center;
  background-size: cover;
}
*/

/* #loyalty-page__container img.absolute.object-cover.object-center.aspect-[75/32]:first-of-type */

#loyalty-page__container img.absolute.left-0.top-0.object-cover:first-of-type,
#loyalty-page__container div.absolute.left-0.top-0.object-cover:first-of-type {
  top: -85px;
  height: 364px !important;
}

#loyalty-page__container div.absolute.left-0.top-0.object-cover:first-of-type {
  background: linear-gradient(rgba(27, 28, 29, 0) 25%, #020314 100%) !important;
  height: 365px !important;
}

@media only screen and (max-width: 1023px) {
  #loyalty-page__container img.absolute.left-0.top-0.object-cover:first-of-type,
  #loyalty-page__container div.absolute.left-0.top-0.object-cover:first-of-type {
    top: -85px;
    height: 290px !important;
  }

  #loyalty-page__container div.absolute.left-0.top-0.object-cover:first-of-type {
    height: 291px !important;
  }

  #title-bar-left {
    margin-left: 0;
  }
}

@media only screen and (min-width: 620px) {
  .titlebar-right-buttons {
    position: absolute;
    right: 20px;
  }
}

@media only screen and (max-width: 620px) {
  #loyalty-header > div:nth-child(2) > div {
    margin-left: auto;
  }

  #title-bar-left ul {
    position: relative !important;
    left: 0px;
    top: 0px;
  }

  #loyalty-page__container img.absolute.left-0.top-0.object-cover:first-of-type,
  #loyalty-page__container div.absolute.left-0.top-0.object-cover:first-of-type {
    top: -30px;
    height: 290px !important;
    object-fit: cover;
  }

  #loyalty-page__container div.absolute.left-0.top-0.object-cover:first-of-type {
    height: 291px !important;
  }

  /*
  #layout__container:not(:has(#loyalty-leaderboard__container)):after {
    background-image: linear-gradient(to bottom, transparent 120px, #020314), url(https://i.ibb.co/St2GLcN/spotlight-bg-new.jpg);
    background-repeat: no-repeat;
    background-color: var(--ui-bg);
    content: '';
    width: 100%;
    height: 220px;
    top: 0;
    position: absolute;
    background-position: center;
    background-size: cover;
  }
*/

  #loyalty-page__container {
    padding-top: 120px;
    background: transparent;
  }

  .loyalty-points {
    border-radius: 4px !important;
  }

  #leaderboard .flex.gap-2.justify-between img {
    display: none !important;
  }
}

.header-loyalty-points {
  background: linear-gradient(0deg, #2E66D6 0%, #084ACE 100%);
  display: flex !important;
  padding: 12px 24px !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px;
  align-self: stretch;
  border-radius: 8px;
  box-shadow: 0px 1px 0px 0px #3E73DD inset;
}

.header-loyalty-points-balance {
  color: #fff !important;
}

#leaderboard  .w-full.text-primary-text.whitespace-pre.text-xs {
  color: var(--tx-secondary) !important;
}

.header-loyalty-points-parent {
  width: 100% !important;
  align-items: start !important;
}

#loyalty-history-table .flex-col.text-sm.text-wrap {
  flex-direction: column-reverse;
}

#section-completed {
  border: 0 !important;
  box-shadow: var(--spotlight-box-shadow);
}

#modal-header-sign-in {
  background: none !important;
}

@media only screen and (min-width: 800px) {
  .leaderboard-homepage tr td:last-child div:first-child {
    justify-content: end !important;
  }
}

.header-loyalty-points-parent div.flex {
  width: 100% !important;
}

#loyalty-quest-root-poll .loyalty-points {
  position: relative;
  /* Enables positioning of the pseudo-element */
}

#loyalty-quest-root-poll .loyalty-points::before {
  content: '';
  display: inline-block;
  width: 28px;
  /* Adjust size */
  height: 28px;
  color: white;
  /* Adjust size */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' data-name='Layer 1' viewBox='0 0 24 24'%3E%3Cpath fill='white' stroke='white' stroke-width='0.2' d='m20.5,7h-3.613c1.832-.879,3.113-2.355,3.113-4.5,0-.276-.224-.5-.5-.5s-.5.224-.5.5c0,3.063-3.271,4.189-5.839,4.442.779-.963,1.839-2.532,1.839-3.942,0-1.654-1.346-3-3-3s-3,1.346-3,3c0,1.41,1.059,2.978,1.839,3.942-2.568-.252-5.839-1.379-5.839-4.442,0-.276-.224-.5-.5-.5s-.5.224-.5.5c0,2.145,1.281,3.621,3.113,4.5h-3.613c-1.93,0-3.5,1.57-3.5,3.5v1c0,.827.673,1.5,1.5,1.5h.5v6.5c0,2.481,2.019,4.5,4.5,4.5h11c2.481,0,4.5-2.019,4.5-4.5v-6.5h.5c.827,0,1.5-.673,1.5-1.5v-1c0-1.93-1.57-3.5-3.5-3.5ZM12,1c1.103,0,2,.897,2,2,0,1.248-1.23,2.899-2,3.768-.77-.869-2-2.52-2-3.768,0-1.103.897-2,2-2ZM1,11.5v-1c0-1.378,1.122-2.5,2.5-2.5h8v4H1.5c-.276,0-.5-.224-.5-.5Zm2,8v-6.5h8.5v10h-5c-1.93,0-3.5-1.57-3.5-3.5Zm18,0c0,1.93-1.57,3.5-3.5,3.5h-5v-10h8.5v6.5Zm2-8c0,.276-.224.5-.5.5h-10v-4h8c1.378,0,2.5,1.122,2.5,2.5v1Z'/%3E%3C/svg%3E");
  /* Replace with your SVG link */
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 4px;
  /* Space between icon and the image */
  vertical-align: middle;
  /* Aligns icon with the image */
}

/* Hide the number '1' */

#loyalty-quest-root-poll .loyalty-points {
  color: transparent;
}