.footer-wrapper {
  background-color: var(--second-background);
  color: var(--second-font);
}

#l-s .page-content {
  padding: 0px 64px;
}

#banner-section {
  background: url("https://gbmida.s3.eu-west-2.amazonaws.com/banner.png")
    var(--background-light-grey) 50% / cover no-repeat;
  height: 300px;
  flex-shrink: 0;
}

#token-image {
  width: 200px;
  height: 200px;
  flex-shrink: 0;
  aspect-ratio: 1/1;
  object-fit: cover;
  border: 10px solid var(--background);
  border-radius: 50%;
  background-color: var(--background);
  align-self: center;
  margin-top: -90px;
  display: none;
}

#token-short-info {
  display: flex;
  align-self: center;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-direction: column;
}

#token-symbol-badge {
  padding: 6px 12px;
  border-radius: var(--radius-small);
  background: var(--primary);
  color: var(--btn-primary-text);
  font-weight: 600;
}

#token-symbol-text {
  color: var(--text);
  font-size: 64px;

  font-weight: 600;
  line-height: 120%;
  letter-spacing: -2.56px;
}

#token-short-description {
  text-align: center;
  max-width: 730px;
  color: var(--text-grey);
  font-weight: 500;
}

#token-info-type {
  display: flex;
  align-items: center;
  border-radius: var(--radius-big);
  border: 1px solid rgba(0, 0, 0, 0.1);
  width: 100%; /* fill whatever space is available */
  margin: 0 auto; /* center it when the parent is wider */
  margin-top: 10px;
  background: var(--background);
  margin-top: 20px;
  grid-column: span 2;
}

#token-info-type > div {
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  padding: 16px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1 0 0;
  text-align: center;
}

#token-info-type > div:first-of-type {
  border: none;
}

#token-info-type > div > div:first-of-type {
  font-weight: 600;
  color: var(--text);
}

#token-info-type > div > div:last-child {
  color: var(--text-light-grey);
  font-size: 14px;

  font-weight: 600;

  letter-spacing: -0.28px;
}

#l-s {
  margin-top: 15px;
  background-color: var(--second-background);
  width: 100%;
  color: var(--second-font);
}

#l-s-tabs {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  align-self: stretch;
  margin-top: 20px;
  border-bottom: 1px solid var(--stroke-grey);
}

#l-s-tabs > div {
  color: #888;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.36px;
  display: flex;
  padding: 12px 16px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

#l-s-tabs > div.active {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.36px;
  color: var(--secondary);
}

#l-s-tabs .tab-indicator {
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 3px;
  width: 0;
  transform: translateX(0);
  background: var(--secondary);
  transition: transform 250ms cubic-bezier(0.2, 0.7, 0, 1),
    width 250ms cubic-bezier(0.2, 0.7, 0, 1);
  pointer-events: none;
}

#l-s-tab-title {
  margin-top: 59px;
  font-size: 32px;
  font-weight: 600;
  line-height: 120%; /* 38.4px */
  letter-spacing: -1.28px;
}

#funds-raised-bar {
  border-radius: var(--radius-big);
  background: var(--primary);
  color: var(--btn-primary-text);
  padding: 7px;
  width: 100%;
  text-align: center;
  margin-top: 20px;
  font-size: 24px;
  font-weight: 400;
  line-height: 150%; /* 36px */
  letter-spacing: -0.48px;
  height: 93px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#funds-raised-bar.is-loading {
  position: relative;
  overflow: hidden;
  color: transparent;
}

/* subtle shimmer sweep */
#funds-raised-bar.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: funds-shimmer 1.2s linear infinite;
}

/* optional soft inner highlight that hints at “text” */
#funds-raised-bar.is-loading::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 60%;
  height: 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #funds-raised-bar.is-loading::after {
    animation: none;
  }
}

@keyframes funds-shimmer {
  100% {
    transform: translateX(100%);
  }
}

/* keep layout intact while loading */
#funds-raised-bar .sk-text {
  visibility: visible;
}
#funds-raised-bar.is-loading .sk-text {
  visibility: hidden;
}

#stats-bar,
#wave-bar {
  display: flex;
  border-radius: var(--radius-big);
  margin-top: 10px;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 24px */
  letter-spacing: -0.32px;
  align-items: flex-start;
  background: var(--secondary);
  color: var(--btn-secondary-text);
}

#wave-bar {
  gap: 5px;
  align-items: stretch;
  position: relative;
  overflow: hidden;
  background: transparent;
}

.wave-box,
#stats-bar .left,
#stats-bar .right {
  padding: 16px;
  display: flex;
  gap: 13px;
  flex-direction: column;
}

.wave-box {
  flex-basis: 0;
  background: var(--primary);
  color: var(--btn-primary-text);
  white-space: nowrap;
}

#wave-bar div.wave-box:first-of-type {
  border-top-left-radius: var(--radius-big);
  border-bottom-left-radius: var(--radius-big);
}

#wave-bar div.wave-box:last-of-type {
  border-top-right-radius: var(--radius-big);
  border-bottom-right-radius: var(--radius-big);
}

.wave-box.not-reached {
  background: var(--secondary);
  color: var(--btn-secondary-text);
}

.wave-box > div:last-of-type,
#stats-bar .left > div:last-of-type,
#stats-bar .right > div:last-of-type {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.48px;
}

#stats-bar .left {
  background: var(--primary);
  color: var(--btn-primary-text);
  border-radius: var(--radius-big);
}

#stats-bar .right {
  display: flex;
  align-items: flex-end;
  flex: 1;
}

#stats-bar.is-loading .left,
#stats-bar.is-loading .right {
  min-height: 90px;
}

#stats-bar.is-loading .left > div,
#stats-bar.is-loading .right > div {
  display: none;
}

/* ===== Skeleton (full-width shimmer) ===== */
#stats-bar {
  position: relative;
  overflow: hidden; /* clip shimmer to rounded corners */
}

/* Hide real text & interactions while loading */
#stats-bar.is-loading {
  color: transparent;
}
#stats-bar.is-loading * {
  pointer-events: none;
}
#stats-bar.is-loading .gbm-tooltip {
  visibility: hidden;
}

/* Full-width shimmer overlay on the wrapper */
#stats-bar.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: statsbar-sweep 1.2s linear infinite;
  z-index: 4; /* above skeleton lines */
}
@keyframes statsbar-sweep {
  100% {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  #stats-bar.is-loading::after {
    animation: none;
  }
}

/* Overlay “lines” to suggest layout (no per-line shimmer now) */
#stats-bar .sk {
  position: absolute;
  z-index: 3; /* below the full-bar shimmer */
  top: 0;
  bottom: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

/* 50/50 split during loading */
#stats-bar.is-loading .sk-left {
  left: 0;
  width: 50%;
  border-radius: var(--radius-big);
}
#stats-bar.is-loading .sk-right {
  left: 50%;
  right: 0;
}

/* Base blocks that read on both panels */
#stats-bar .sk-line {
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.26);
}
#stats-bar .sk-number {
  height: 24px;
}

#stats-bar .sk-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* push skeleton lines to the right */
}
#stats-bar .sk-right .sk-line,
#stats-bar .sk-right .sk-number {
  align-self: flex-end; /* ensure each line anchors right */
}

/* Width helpers */
#stats-bar .w-70 {
  width: 70%;
}
#stats-bar .w-60 {
  width: 60%;
}
#stats-bar .w-50 {
  width: 50%;
}
#stats-bar .w-40 {
  width: 40%;
}
#stats-bar .w-35 {
  width: 35%;
}

/* Hide overlays once loaded */
#stats-bar:not(.is-loading) .sk {
  display: none;
}

/* ------- Wave Bar Skeleton ------- */

/* Keep your layout; ensure shimmer clips to rounded corners */
#wave-bar {
  position: relative;
  overflow: hidden;
}

/* Full-bar shimmer sweep (like the stats bar you liked) */
#wave-bar.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: wavebar-sweep 1.2s linear infinite;
  z-index: 4;
  pointer-events: none;
}
@keyframes wavebar-sweep {
  100% {
    transform: translateX(100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  #wave-bar.is-loading::after {
    animation: none;
  }
}

/* Boxes marked .sk are placeholders */
#wave-bar.is-loading .wave-box.sk {
  position: relative;
  overflow: hidden;
  flex: 1 1 0; /* 3 equal boxes while loading */
  border-radius: 0; /* middle ones */
}
#wave-bar.is-loading .wave-box.sk:first-child {
  border-top-left-radius: var(--radius-big);
  border-bottom-left-radius: var(--radius-big);
}
#wave-bar.is-loading .wave-box.sk:last-child {
  border-top-right-radius: var(--radius-big);
  border-bottom-right-radius: var(--radius-big);
}

/* Hide real content inside skeletons, but keep our lines visible */
#wave-bar.is-loading .wave-box.sk :not(.sk-line) {
  color: transparent !important;
  fill: transparent !important;
  stroke: transparent !important;
}

/* The lines that suggest title + big number */
#wave-bar .sk-line {
  display: block;
  width: 100%;
  height: 12px;
  margin: 6px 0;
  border-radius: 999px;
  position: relative;
  z-index: 1; /* under the full-bar shimmer */
  background: rgba(255, 255, 255, 0.4); /* tune 0.35–0.55 for contrast */
}

/* Width helpers */
#wave-bar .w-70 {
  width: 70%;
}
#wave-bar .w-60 {
  width: 60%;
}
#wave-bar .w-55 {
  width: 55%;
}
#wave-bar .w-45 {
  width: 45%;
}
#wave-bar .w-40 {
  width: 40%;
}
#wave-bar .w-35 {
  width: 35%;
}

/* Hide placeholders after loading */
#wave-bar:not(.is-loading) .wave-box.sk {
  display: none;
}

#l-s-referral-stats,
#l-s-user-stats,
#l-s-stats {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

#l-s-referral-stats,
#l-s-user-stats {
  margin-top: 20px;
}

#l-s-referral-stats {
  grid-template-columns: repeat(3, 1fr);
}

.box-transparent-btn {
  cursor: pointer;
  text-decoration: underline;
  border: none;
  background-color: transparent;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

.box-transparent-btn:active {
  color: var(--primary);
}

#copy-referral-code .gbm-tooltip-text {
  color: var(--primary);
  max-width: 510px;
  width: unset;
  padding: 5px;
  font-size: 12px;
  font-weight: 500;
}

.l-s-stats-box {
  position: relative;
  background-color: var(--secondary);
  color: var(--btn-secondary-text);
  border-radius: var(--radius-big);
  display: flex;
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
  flex: 1 0 0;
}

.l-s-stats-box.primary {
  background-color: var(--primary);
  color: var(--btn-primary-text);
}

.l-s-stats-box > div {
  display: flex;
  flex-direction: column;
  gap: 13px;
  z-index: 1;
}

.l-s-stats-box > div > div:first-child {
  font-weight: 500;
  word-spacing: 2px;
}

.l-s-stats-box > div > div:last-child {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.48px;
}

.l-s-stats-box svg.circle-svg {
  position: absolute;
  bottom: 0;
  right: 0;
  max-width: 100% !important;
  max-height: 100% !important;
}

#l-s-referral-stats .l-s-stats-box svg.circle-svg,
#l-s-user-stats .l-s-stats-box svg.circle-svg {
  width: 54px !important;
  height: 43px !important;
}

/* 1) Activate skeleton on boxes marked .sk while the container is .is-loading */
#l-s-referral-stats.is-loading > .l-s-stats-box.sk,
#l-s-stats.is-loading > .l-s-stats-box.sk,
#l-s-user-stats.is-loading > .l-s-stats-box.sk {
  position: relative;
  overflow: hidden; /* clip shimmer to rounded corners */
}

/* 2) Hide real content INSIDE skeleton boxes but KEEP our .sk-line/.sk-number visible */
#l-s-referral-stats.is-loading
  > .l-s-stats-box.sk
  :not(.sk-line):not(.sk-number),
#l-s-stats.is-loading > .l-s-stats-box.sk :not(.sk-line):not(.sk-number),
#l-s-user-stats.is-loading > .l-s-stats-box.sk :not(.sk-line):not(.sk-number) {
  width: 100%;
  color: transparent !important;
  fill: transparent !important;
  stroke: transparent !important;
}

/* If your decorative bg SVG is present, hide it in skeleton state */
#l-s-referral-stats.is-loading > .l-s-stats-box.sk .circle-svg,
#l-s-stats.is-loading > .l-s-stats-box.sk .circle-svg,
#l-s-user-stats.is-loading > .l-s-stats-box.sk .circle-svg {
  display: none !important;
}

/* 3) Full-card shimmer that sweeps over each skeleton box */
#l-s-referral-stats.is-loading > .l-s-stats-box.sk::after,
#l-s-stats.is-loading > .l-s-stats-box.sk::after,
#l-s-user-stats.is-loading > .l-s-stats-box.sk::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: ls-sweep 1.2s linear infinite;
  z-index: 2; /* above lines, below nothing else */
  pointer-events: none;
}

/* Motion safety */
@media (prefers-reduced-motion: reduce) {
  #l-s-referral-stats.is-loading > .l-s-stats-box.sk::after,
  #l-s-stats.is-loading > .l-s-stats-box.sk::after,
  #l-s-user-stats.is-loading > .l-s-stats-box.sk::after {
    animation: none;
  }
}

/* 4) Lines that suggest "title" + "big number" */
#l-s-referral-stats .sk-line,
#l-s-stats .sk-line,
#l-s-user-stats .sk-line {
  display: block;
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.4); /* tweak 0.35–0.55 for contrast */
  margin: 6px 0;
  position: relative;
  z-index: 1; /* under the shimmer overlay */
}

/* 5) Width helpers for visual variety */
#l-s-referral-stats .w-60,
#l-s-stats .w-60,
#l-s-user-stats .w-60 {
  width: 60%;
}
#l-s-referral-stats.w-55,
#l-s-stats .w-55,
#l-s-user-stats .w-55 {
  width: 55%;
}
#l-s-referral-stats .w-50,
#l-s-stats .w-50,
#l-s-user-stats .w-50 {
  width: 50%;
}
#l-s-referral-stats .w-45,
#l-s-stats .w-45,
#l-s-user-stats .w-45 {
  width: 45%;
}
#l-s-referral-stats .w-40,
#l-s-stats .w-40,
#l-s-user-stats .w-40 {
  width: 40%;
}
#l-s-referral-stats .w-30,
#l-s-stats .w-30,
#l-s-user-stats .w-30 {
  width: 30%;
}

/* 6) Keyframes used by the shimmer */
@keyframes ls-sweep {
  100% {
    transform: translateX(100%);
  }
}

#referral-earnings-data,
#referred-bonus-data {
  max-height: 350px;
  overflow-x: hidden;
  overflow-y: auto;
}

.l-s-tab {
  display: none;
}

.l-s-tab.active {
  display: block;
}

.l-s-tab.sale-information.active {
  display: grid;
  grid-template-columns: 1fr 0.5fr;
  column-gap: 20px;
  align-items: start;
  row-gap: 20px;
}

.l-s-table-wrapper {
  border-radius: var(--radius-big);
  border: 1px solid var(--stroke-grey);
  background: var(--background);
  margin-top: 20px;
  padding-bottom: var(--table-general-padding);
}

.l-s-select-view {
  padding: 24px var(--table-general-padding);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--stroke-grey);
}

#select-sort {
  display: none !important;
}

.l-s-filter-controller {
  display: none;
}

.l-s-select-view > div:first-child {
  display: flex;
  align-items: center;
  gap: 16px;
}

.l-s-select-view > div:first-child > div:first-child {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.48px;
}

.l-s-select-view > div:first-child > div:last-child {
  font-size: 14px;

  font-weight: 600;

  letter-spacing: -0.28px;
  display: flex;
  height: 28px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius-small);
  background: #eee;
}

.l-s-filter-section {
  padding: 24px var(--table-general-padding);
  border-bottom: 1px solid var(--stroke-grey);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 0.3fr;
  grid-template-rows: auto;
  justify-items: center;
  justify-items: start;
}

.l-s-filter-section .gbm-header.step-option-label {
  font-weight: 600;
}

.l-s-sort-section {
  padding: 16px var(--table-general-padding);
  background-color: var(--second-background);
  color: var(--text-light-grey);
  row-gap: 16px;
  column-gap: 16px;
  grid-auto-columns: 1fr;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1.2fr repeat(4, 1fr) 0.5fr;
}

.auction-item-title {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  display: flex;
  align-items: center;
}

.l-s-listing-view {
  padding: 0px var(--table-general-padding) 0;
  max-height: 650px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
}

#bid-modal .modal-content > div::-webkit-scrollbar,
#bid-modal .modal-content::-webkit-scrollbar {
  max-height: 8px;
}

.l-s-listing-view-item {
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-rows: auto;
  grid-template-columns: 1.2fr repeat(4, 1fr) 0.5fr;
  column-gap: 16px;
  padding-bottom: 16px;
  padding-top: 16px;
  border-bottom: 1px solid var(--stroke-grey);
  justify-items: start;
}

.l-s-listing-view-item:last-of-type {
  border: none;
}

.l-s-listing-view-item-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
}

.l-s-listing-view-item-box.inline {
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}

.l-s-listing-view-item-box .first {
  font-weight: 700;
}

.l-s-listing-view-item-box .second {
  font-weight: 600;

  color: var(--text-light-grey);
}

.l-s-listing-view-item-box .second.text-primary {
  color: var(--primary);
}

.l-s-listing-view-item-box .second.text-primary .ens-avatar-image {
  height: 17px;
  width: 17px;
  margin-right: 5px;
}

.l-s-listing-view-item-box .mobile-title {
  color: var(--text-light-grey);
  font-size: 14px;
  font-weight: 500;
  line-height: 150%; /* 21px */
  letter-spacing: -0.28px;
  display: none;
}

.l-s-listing-view-item-box:first-of-type {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.table-nft-image {
  width: 55px;
  height: 55px;
  aspect-ratio: 1/1;
  border-radius: var(--radius-medium);
  cursor: pointer;
}

.table-image {
  width: 24px;
  height: 24px;
  aspect-ratio: 1/1;
}

.auction-time-circle {
  display: inline-block;
  border: 1px solid var(--secondary);
  width: 8px;
  height: 8px;
  background-color: var(--secondary);
  border-radius: 50%;
}

.bid-btn {
  display: flex;
  height: 40px;
  padding: 0px 23px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-medium);
  cursor: pointer;
}

.l-s-listing-view .bid-btn {
  align-self: center;
}

.range-values-display {
  margin: 0;
  margin-top: -10px;
  margin-right: 5px;
  color: var(--text-grey);

  font-weight: 400;
}

.auction-filter-item {
  padding: 0 50px;
  width: 100%;
}

.l-s-sales-info {
  display: flex;
  padding: 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  flex: 1 0 0;
  border-radius: var(--radius-big);
  border: 1px solid var(--stroke-grey);
  background: var(--background);
}

.l-s-sales-info-title {
  font-size: 28px;

  font-weight: 600;

  letter-spacing: -0.56px;
}

.l-s-sales-info-subtitle {
  font-size: 18px;

  font-weight: 600;

  letter-spacing: -0.36px;
}

.l-s-sale-info-subsection .l-s-sales-info-subtitle {
  font-size: 16px;
}

.l-s-sales-info p {
  color: var(--text-grey);
  font-weight: 500;
}

.l-s-sales-info > div > p:last-of-type {
  margin-bottom: 0;
}

.l-s-sales-info > div > p.d-mb {
  margin-bottom: 1em;
}

.l-s-sale-info-subsection p {
  margin-top: 0;
}

.l-s-sales-info-image {
  border-radius: var(--radius-big);
  background: var(--second-background);
  height: 400px;
  align-self: stretch;
}

.l-s-sales-info-boxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  row-gap: 24px;
  column-gap: 24px;
}

.l-s-sales-info-boxes > div {
  display: flex;
  padding: 16px 24px 24px 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex: 1 0 0;
  border-radius: var(--radius-medium);
  border: 1px solid var(--stroke-grey);
  background: var(--second-background);
  color: var(--second-font);
}

.l-s-sales-info-boxes > div h1 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.4px;
  margin: 0;
  border-bottom: 1px solid var(--stroke-grey);
  width: 100%;
  padding-bottom: 16px;
}

.l-s-sales-info-boxes > div .info-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.l-s-sales-info-boxes > div .info-box > div:first-of-type {
  font-weight: 700;
}

.l-s-sales-info-boxes > div .info-box > div:last-of-type {
  font-weight: 500;
}

.l-s-posted-notes > div {
  margin-top: 50px;
  min-width: 420px;
}

.l-s-posted-notes > div:first-of-type {
  margin-top: 0;
}

.l-s-tab.active.justify-content-mobile-friendly {
  display: flex;
  gap: 24px;
}

.l-s-posted-notes > div > div:first-of-type {
  display: flex;
  padding: 12px 24px;
  align-self: stretch;
  background: var(--primary);
  color: var(--btn-primary-text);
  border-top-left-radius: var(--radius-big);
  border-top-right-radius: var(--radius-big);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.36px;
  word-spacing: 4px;
}

.l-s-posted-notes > div > div:last-of-type {
  display: flex;
  padding: 12px 24px;
  padding-bottom: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  gap: 12px;
  background: var(--background);
  border-bottom-left-radius: var(--radius-big);
  border-bottom-right-radius: var(--radius-big);
  border: 1px solid var(--stroke-grey);
  border-top: none;
}

.l-s-posted-notes > div > div:last-of-type .info-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.l-s-posted-notes > div > div:last-of-type .info-box > div:first-of-type {
  font-weight: 700;
}

.l-s-posted-notes > div > div:last-of-type .info-box > div:last-of-type {
  color: var(--text-grey);
  text-align: right;
  font-weight: 500;
}

.l-s-token-link-box {
  display: flex;
  padding: 8px;
  align-items: center;
  gap: 16px;
  flex: 1 0 0;
  border-radius: var(--radius-small);
  border: 1px solid var(--stroke-grey);
  width: 100%;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 24px */
  letter-spacing: -0.32px;
}

.l-s-token-link-box > div:first-child {
  flex: 1 1 0;
  min-width: 0;
}

.l-s-token-link-box > div:last-of-type {
  display: flex;
  padding: 4px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius-small);
  background: rgba(var(--primary-rgb), 0.1);
  flex: 0 0 auto;
  cursor: pointer;
}

.l-s-select-activity-view {
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
}

#share-stats-btn,
#share-stats-btn-mobile {
  display: flex;
  padding: 8px 24px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 24px */
  letter-spacing: -0.32px;
}

#share-stats-btn-mobile {
  display: none;
}

.l-s-activity-title {
  font-size: 24px;
  font-weight: 600; /* 36px */
  letter-spacing: -0.48px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.l-s-activity-title span {
  display: flex;
  width: 32px;
  height: 32px;
  padding: 0px 5px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  aspect-ratio: 1/1;
  border-radius: 1000px;
  text-align: center;
  font-weight: 700;
  font-size: 21px;
}

.l-s-activity-title.winning span {
  background: var(--primary);
  color: var(--btn-primary-text);
}

.l-s-activity-title.outbid span {
  background: var(--important);
  color: var(--btn-important-text);
}

#activity-view-mobile-deviser {
  display: none;
}

.l-s-winning {
  margin-top: 10px;
}
.l-s-outbid {
  margin-top: 30px;
}

.referral-section .l-s-table-wrapper,
.l-s-winning .l-s-table-wrapper,
.l-s-outbid .l-s-table-wrapper {
  margin-top: 24px;
  padding: var(--table-general-padding);
  padding-top: 25px;
}

.referral-section .l-s-sort-section,
.l-s-winning .l-s-sort-section,
.l-s-outbid .l-s-sort-section {
  background: var(--background);
  padding: 0;
  grid-template-columns: 1fr 1fr 1fr 3fr;
  border-bottom: 1px solid var(--stroke-grey);
  padding-bottom: 16px;
  margin-right: 20px;
}

.referral-section .l-s-sort-section {
  /* grid-template-columns: 1.2fr repeat(3, 1fr); */
  grid-template-columns: repeat(4, 1fr);
  margin-right: 0;
}

.referral-section .l-s-activity-title {
  margin-top: 36px;
}

#listings-winning,
#listings-outbid {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: 335px;
  padding-right: 20px;
  overflow-x: hidden;
}

.list-view-activity-table-item {
  display: grid;
  border-bottom: 1px solid var(--stroke-grey);
  padding-top: 24px;
  padding-bottom: 24px;
  grid-auto-columns: 1fr;
  grid-template-columns: repeat(3, 1fr) 3fr;
  align-items: center;
  column-gap: 16px;
  row-gap: 16px;
  grid-template-rows: auto;
}

.referral-section .list-view-activity-table-item {
  /* grid-template-columns: 1.2fr repeat(3, 1fr); */
  grid-template-columns: repeat(4, 1fr);
}

.list-view-activity-table-item:last-of-type {
  border: none;
}

.list-view-activity-table-item > div {
  font-weight: 700;
}

.list-view-activity-table-item .l-s-listing-view-item-box.inline {
  align-items: center;
}

.list-view-activity-table-item .l-s-listing-view-item-box.inline button {
  font-weight: 600;
  display: flex;
  height: 40px;
  padding: 0px 24px;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.list-view-activity-table-item
  .l-s-listing-view-item-box.inline
  button.bid-btn.btn-dark {
  padding: 0 10px;
}

.list-view-activity-image-box {
  display: flex;
  gap: 16px;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.36px;
}

.list-view-activity-image-box img {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  aspect-ratio: 1/1;
  border-radius: 1000px;
}

.list-view-activity-image-box.nft-image img {
  border-radius: var(--radius-medium);
  cursor: pointer;
}

.l-s-listing-view-btn-holder {
  display: flex;
  gap: 10px;
  align-items: center;
}

#card-listings-winning,
#card-listings-outbid {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--stroke-grey);
}

.l-s-description {
  color: var(--text-grey);
  letter-spacing: -0.32px;
  font-weight: 500;
  margin-top: 24px;
  margin-bottom: 24px;
}

/* ################## CAROUSEL */
.carousel-wrapper {
  display: flex;
  gap: 15px;
  align-items: center;
  color: var(--table-font);
}

.winner-carousel-stats > div:first-of-type,
.looser-carousel-stats > div:first-of-type {
  width: 70px;
  font-size: 48px;
  font-weight: 300;
}

.winner-carousel-stats > div:last-of-type,
.looser-carousel-stats > div:last-of-type {
  font-size: 20px;
  font-weight: 600;
  width: 70px;
}

.looser-carousel-stats {
  color: var(--important);
}

.carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-top: 10px;
}

.carousel-track {
  display: flex;
  transition: transform 0.3s ease;
  cursor: grab;
  align-items: flex-start;
}

.carousel-track:active {
  cursor: grabbing;
}

.carousel-buttons {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  width: 100%;
  pointer-events: none;
}

.carousel-button {
  pointer-events: all;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: white;
  font-size: 24px;
  padding: 10px;
  cursor: pointer;
  border-radius: 50%;
  outline: none;
}

.carousel-button.left {
  left: 10px; /* Position inside the track */
}

.carousel-button.right {
  right: 10px; /* Position inside the track */
}

.carousel-button:active {
  transform: scale(0.9);
}

.carousel-button.hidden {
  visibility: hidden;
  pointer-events: none;
}

.carousel-indicator {
  max-width: 240px;
  width: 100%;
  margin: 12px 0 0 auto;
}

.carousel-indicator__track {
  position: relative;
  width: 100%;
  height: 4px;
  background: rgba(var(--secondary-rgb), 0.2);
  border-radius: 2px;
  overflow: hidden;
}
.carousel-indicator__thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--secondary);
  transition: transform 0.3s ease, width 0.3s ease;
}

.l-s-activity-card {
  display: flex;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  border-radius: var(--radius-big);
  border: 1px solid var(--stroke-grey);
  background: var(--background);
  width: 316px;
  flex-shrink: 0;
  margin-left: 5px;
  margin-right: 5px;
}

.l-s-activity-card img {
  width: 48px;
  height: 48px;
  aspect-ratio: 1/1;
  border-radius: var(--radius-medium);
}

.activity-card-title {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.48px;
  cursor: pointer;
}

.activity-card-subtitle {
  color: var(--text-grey);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.activity-card-subtitle .btn-dark {
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 18px */
  letter-spacing: -0.24px;
  padding: 6px 24px;
  height: auto;
}

.small-text {
  color: var(--text-light-grey);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.28px;
}

.l-s-activity-card .bid-button-holder {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-top: 16px;
}

.list-view-activity-table-item.listing-ended
  .l-s-listing-view-btn-holder
  .btn-primary,
.carousel-item.listing-ended .bid-button-holder .gbm-btn.btn-primary {
  display: none !important;
}

.l-s-activity-card .bid-button-holder button {
  display: flex;
  height: 48px;
  padding: 0px 24px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  border-radius: var(--radius-medium);
  font-weight: 600;
  letter-spacing: -0.32px;
  cursor: pointer;
}

.l-s-activity-card .auction-details-wrapper {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 16px;
}

#chart {
  display: none;
  justify-content: center;
  align-items: center;
  width: 100%;
}

#chart g[aria-label="rect"] rect[disabled="true"] {
  fill: var(--disabled);
  cursor: not-allowed !important;
}

#chart .chart-tooltip-text p {
  margin-block-start: 0.3em;
  margin-block-end: 0.3em;
}

#chart [aria-label="y-axis tick label"] text tspan {
  font-size: 12px;
}

.chart-tooltip {
  position: relative;
  display: inline-block;
}

.chart-tooltip .chart-tooltip-text {
  visibility: hidden;
  background-color: #fff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05);
  color: #241f1a;
  word-wrap: normal;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  text-align: left;
  /* Position the tooltip */
  position: absolute;
  margin-left: 10px;
  z-index: 1;
  border-radius: var(--radius-medium);
  border: 1px solid var(--stroke-grey);

  display: none;
  width: 333px;
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.chart-tooltip:hover .chart-tooltip-text {
  visibility: visible;
}

.chart-tooltip-text .title {
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 30px */
  letter-spacing: -0.4px;
}

.chart-tooltip-text .secondary-theme-box {
  display: flex;
  padding: 12px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  border-radius: var(--radius-small);
  background-color: rgba(var(--secondary-rgb), 0.1);
  color: var(--secondary);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 21px */
  letter-spacing: -0.28px;
}

.chart-tooltip-text .live-auction-text {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 21px */
  letter-spacing: -0.28px;
}

.chart-tooltip-text .live-auction-text > div:first-of-type {
  width: 8px;
  height: 8px;
  background-color: var(--green-color);
  border-radius: 1000px;
}

.chart-tooltip-text .cost-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 21px */
  letter-spacing: -0.28px;
}

.chart-tooltip-text .cost-box > div:last-of-type {
  color: var(--text-grey);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 21px */
  letter-spacing: -0.28px;
}

.chart-tooltip-text .open-auction-text {
  color: var(--primary);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 21px */
  letter-spacing: -0.28px;
}

.chart-tooltip-text .highest-bids-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}

.chart-tooltip-text .highest-bids-box .title {
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 21px */
  letter-spacing: -0.28px;
}

.chart-tooltip-text .highest-bids-box-item {
  display: flex;
  padding: 8px 12px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  border-radius: var(--radius-small);
  background: var(--second-background);
  color: var(--text-light-grey);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 18px */
  letter-spacing: -0.24px;
  text-align: center;
}

.chart-tooltip-text .highest-bids-box-item.no-bids {
  justify-content: center;
}

.chart-tooltip-text .highest-bids-box-item > div:last-of-type {
  color: var(--text-grey);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 21px */
  letter-spacing: -0.28px;
}

#bid-modal .modal-body {
  padding: 0;
  background-color: transparent;
  box-shadow: none;
}

#bid-modal .modal-body > .modal-header:first-of-type {
  display: none;
}

#bid-modal .modal-content .modal-auction-container .modal-header {
  display: flex;
}

#bid-modal .modal-content {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
  max-height: 800px;
  background-color: transparent;
  overflow-x: hidden;
  overflow-y: hidden;
}

#bid-modal .modal-content .modal-header {
  width: 100%;
}

#bid-modal .modal-content > div {
  background-color: var(--background);
  border-radius: var(--radius-big);
  padding: 24px 40px 40px 40px;
  width: 520px;
  max-height: 800px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  flex-shrink: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
}

#bid-modal .modal-content > .auction-ended {
  align-self: center;
}

#bid-modal .modal-content > .auction-live,
#bid-modal .modal-content > div:last-of-type {
  display: none;
  height: min(95vh, 800px);
  flex: 1 1 auto;
  align-self: stretch;
}

#bid-modal .modal-content > .auction-live {
  display: flex;
}

#bid-modal .modal-auction-container {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  flex-shrink: 0;
  width: 100%;
}

#bid-modal .modal-content > div:first-of-type {
  width: 795px;
}

#bid-modal .modal-content > div:nth-of-type(2) p:nth-of-type(2) {
  color: var(--text-light-grey);
  font-weight: 500;
  font-size: 16px;
  font-style: normal;
  line-height: 150%; /* 24px */
  letter-spacing: -0.32px;
  margin: 0;
}

#modal-total-earned {
  color: var(--text);
  font-weight: 700;
}

#bid-modal .modal-content > div:nth-of-type(2) .modal-header-text {
  display: flex;
  align-items: center;
}

#modal-total-bids {
  margin-left: 12px;
  display: flex;
  height: 30px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius-small);
  background: #eee;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.28px;
}

#modal-select-cheapest-bundle-title-mobile,
#modal-select-cheapest-bundle-title {
  color: var(--text-grey);
  font-size: 16px;
  font-weight: 500;
  line-height: 100%; /* 12px */
  letter-spacing: -0.24px;
  margin-bottom: 12px;
  margin-top: -15px;
}

#modal-select-cheapest-bundle-title-mobile {
  display: none;
}

#modal-auction-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: 100%;
  margin-top: 8px;
}

#modal-auction-info .nft-media-container {
  grid-row: 1 / span 4;
  grid-column: 1;
}

#modal-auction-info .nft-media {
  border-radius: var(--radius-medium);
  cursor: pointer;
  position: relative;
}

#modal-auction-info .nft-media img {
  border-radius: var(--radius-medium);
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

#modal-auction-info .overlay-shadow {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 41px;
  border-radius: 0 0 var(--radius-medium) var(--radius-medium);
  background: rgba(68, 68, 68, 0.45);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 17px;
}

#modal-auction-info .overlay-shadow > div:first-of-type,
#modal-auction-info .overlay-shadow > div:last-of-type {
  color: var(--background);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.28px;
}

#modal-auction-info .overlay-shadow > div:last-of-type {
  font-weight: 300;
}

#modal-auction-info > .cost-message {
  display: flex;
  padding: 12px 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  flex: 1 0 0;
  border-radius: var(--radius-medium);
  border: 1px solid var(--stroke-grey);
}

#modal-auction-info > .cost-message > div:first-of-type {
  color: var(--text-light-grey);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.28px;
}

#modal-auction-info > .cost-message > div:last-of-type {
  display: flex;
  height: 18px;
  align-items: center;
  gap: 12px;
  align-self: stretch;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.36px;
}

#modal-auction-info > .cost-message > div:last-of-type img {
  width: 28px;
  height: 28px;
  aspect-ratio: 1/1;
  border-radius: 1000px;
}

.auction-time-circle.time-green-circle {
  animation: blinkingLightGreen 2.5s linear infinite;
  border-color: var(--green-color);
}

@keyframes blinkingLightGreen {
  0% {
    opacity: 1;
    background-color: var(--green-color);
    box-shadow: 0 0 10px var(--green-color), 0 0 15px var(--green-color),
      0 0 20px var(--green-color), 0 0 30px var(--green-color);
  }
  50% {
    opacity: 0;
    opacity: 0.5;
    background-color: var(--dark-green-color);
    box-shadow: 0 0 5px var(--dark-green-color);
  }
  100% {
    opacity: 1;
    background-color: var(--green-color);
    box-shadow: 0 0 10px var(--green-color), 0 0 15px var(--green-color),
      0 0 20px var(--green-color), 0 0 30px var(--green-color);
  }
}

#hammer-time-section {
  color: #f6f5f5;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 21px */
  letter-spacing: -0.28px;
  display: none;
  height: 28px;
  padding: 4px 8px;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-small);
  background: var(--primary);
  cursor: pointer;
}

#bids-enabled {
  width: 100%;
}

#double-bid-message,
#minimum-bid-message {
  font-size: 16px;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: -0.48px;
  cursor: pointer;
}

#double-bid-message span,
#minimum-bid-message span {
  text-decoration: underline;
}

.arrow-icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.arrow-icon {
  display: flex;
  width: 40px;
  height: 40px;
  padding: 1px;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 1px solid var(--primary);
  background: var(--primary);
  margin-top: -18px;
  z-index: 2;
}

.modal-bid-input {
  position: relative;
}

.modal-bid-input p {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 24px */
  letter-spacing: -0.32px;
  position: absolute;
  color: var(--text-light-grey);
  right: 15px;
  top: 15px;
  margin: 0;
}

.modal-bid-input:last-of-type p {
  top: 15px;
  color: var(--primary);
}

.modal-bid-input .bid-input {
  text-align: left;
  -moz-appearance: textfield;
}

.modal-bid-input .bid-input::-webkit-inner-spin-button,
.modal-bid-input .bid-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.bid-input {
  margin: 5px 0;
  height: 50px;
  width: 100%;
  background-color: transparent;
  border-radius: var(--radius-medium);
  border: 1px solid var(--text-grey);
  cursor: text;
  width: 100%;
  padding: 20px 24px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.36px;
}

.bid-input.primary {
  border-color: var(--primary);
  background-color: rgba(var(--primary-rgb), 0.2);
  color: var(--primary);
  font-weight: 700;
}

.bid-input:disabled {
  background-color: transparent;
  color: var(--text);
  border: 1px dotted var(--primary);
  cursor: not-allowed;
}

.incentive {
  margin-top: 16px;
  display: flex;
  gap: 16px;
  align-items: center;
}

.incentive-logo {
  display: flex;
  height: 32px;
  padding: 8px 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius-small);
  border: 1px solid #d5d5d5;
}

.incentive-text {
  color: var(--text-light-grey);
  font-weight: 600;
}

.bid-btn-wrapper {
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.bid-btn-wrapper .gbm-btn {
  display: flex;
  height: 56px;
  padding: 0px 24px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex: 1 0 0;
  border-radius: var(--radius-medium);
  font-size: 18px;
  font-weight: 600;
  line-height: 100%; /* 18px */
  letter-spacing: -0.36px;
  max-width: 320px;
}

#buy-now-msg {
  color: var(--text-grey);
  font-weight: 500;
  margin-top: 8px;
}

#upcoming-auction-min-bid-msg,
#bids-disabled {
  display: none;
}

.share-btn {
  cursor: pointer;
  background-color: transparent;
  margin-top: 16px;
  color: var(--text);
  height: 56px;
  padding: 0px 24px;
  width: 100% !important;
  border-radius: var(--radius-medium);
  border: 1px solid var(--text);
  font-size: 18px;
  font-weight: 600;
  line-height: 100%; /* 18px */
  letter-spacing: -0.36px;
}

.share-options {
  position: relative;
}

.share-options-expanded {
  position: absolute;
  border: none;
  padding: 0;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.05);
  color: var(--text);
  background: var(--background);
  z-index: 99;
  top: 0;
  left: 0;
  right: 0;
  display: none;
  border: 1px solid var(--stroke-grey);
  border-radius: var(--radius-medium);
}

.share-options-expanded p {
  margin: 0;
  display: block;
  height: 3rem;
  line-height: 3rem;
  padding-left: 1em;
  padding-right: 3em;
  cursor: pointer;
  position: relative;
  transition: 0.3s color ease-in-out;
  font-weight: bold;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.share-options-expanded p svg {
  margin-right: 5px;
}

.share-options-expanded p:hover {
  background-color: #f0f0f0;
  cursor: pointer;
}

#modal-select-cheapest-bundle .custom-dropdown {
  width: 100%;
}

#modal-bid-primary-box {
  background-color: var(--primary);
  color: var(--btn-primary-text);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.4px;
  height: 106px;
  display: flex;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  align-self: stretch;
  border-radius: var(--radius-medium);
}

#modal-bid-primary-box > div:last-of-type {
  width: 100%;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 24px */
  letter-spacing: -0.32px;
  display: flex;
  justify-content: space-between;
}

.secondary-dot {
  background-color: var(--secondary);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  aspect-ratio: 1 / 1;
  margin-right: 10px;
}

.secondary-dot canvas {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.previous-bid {
  display: flex;
  padding: 20px 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  border-radius: var(--radius-medium);
  border: 1px solid var(--stroke-grey);
  background: var(--background);
  width: 100%;
  margin-top: 8px;
}

.previous-bid.user-bid {
  border-color: var(--secondary);
}

.previous-bid > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 27px */
  letter-spacing: -0.36px;
}

.previous-bid > div .bidder-info a {
  text-decoration: none;
  color: inherit;
}

.previous-bid > div:last-of-type {
  color: var(--text-light-grey);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 24px */
  letter-spacing: -0.32px;
}

.previous-bid:last-of-type {
  margin-bottom: 8px;
}

.share-x-btn {
  width: 127px;
  height: 45px;
  background: black;
  color: white;
  border: none;
  padding: 5px;
  border-radius: var(--radius-medium);
  cursor: pointer;
  font-family: inherit;
  align-self: end;
  font-weight: 600;
}

.share-x-btn span {
  margin-left: 8px;
}

.link-arrow-wrapper {
  display: flex;
  padding: 4px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius-small);
  background: rgba(var(--primary-rgb), 0.1);
  cursor: pointer;
}

#full-history-btn {
  height: 56px;
  padding: 0px 24px;
  font-size: 18px;
  font-weight: 600;
  line-height: 100%; /* 18px */
  letter-spacing: -0.36px;
}

#not-enough-to-bid {
  visibility: hidden;
  min-height: 18px;
  margin: 0;
  font-size: 14px;
}

#incorrect-number-type {
  display: none;
  margin-top: 3px;
  margin-bottom: 3px;
  font-size: 14px;
}

.info-value-winner {
  padding: 14px 0;
  font-weight: bolder;
  display: flex;
  align-items: center;
  gap: 12px;
}

#timerCountdown canvas,
#timerCountdown .ens-avatar-image {
  border-radius: 50%;
  height: 28px;
  width: 28px;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.info-value-winner a {
  text-decoration: none;
  color: inherit;
}

#bids-disabled-upper-msg {
  color: var(--primary);
  font-size: 20px;
}

#bid-modal .previous-bid .ens-avatar-image {
  width: 20px;
  height: 20px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  object-fit: cover;
}

.learn-more-btn {
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 24px */
  letter-spacing: -0.32px;
  font-weight: 600;
  color: var(--secondary);
  text-decoration: underline;
  cursor: pointer;
  background: transparent;
  border: none;
  margin-left: -8px;
  padding: 0;
  width: auto;
  height: auto;
}

#transaction-confirmation-modal .modal-body,
#bid-confirmation-modal .modal-body {
  width: 100%;
  max-width: 642px;
  padding: 48px 40px;
}

#transaction-confirmation-modal .modal-content,
#bid-confirmation-modal .modal-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

#transaction-confirmation-modal .modal-content > div,
#bid-confirmation-modal .modal-content > div,
#bid-confirmation-modal .modal-content .bid-confirmed > div {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

#transaction-confirmation-modal .modal-content .gbm-modal-header,
#spending-limit-modal .modal-content .gbm-modal-header,
#bid-confirmation-modal .modal-content .gbm-modal-header {
  width: 100%;
  text-align: center;
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%; /* 38.4px */
  letter-spacing: -1.28px;
}

#bid-confirmation-modal .bid-submitted .processing-text {
  color: var(--text-grey);
  width: 100%;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 24px */
  letter-spacing: -0.32px;
}

#transaction-confirmation-modal .explorer-link a,
#bid-confirmation-modal .explorer-link a {
  color: var(--secondary);
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 24px */
  letter-spacing: -0.32px;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

#bid-confirmation-modal .modal-content .bid-confirmed {
  gap: 32px;
}

#transaction-confirmation-modal .modal-content,
#bid-confirmation-modal .modal-content .bid-confirmed p {
  margin: 0;
  text-align: center;
}

#bid-confirmation-modal .modal-content .bid-confirmed > div {
  gap: 8px;
}

#remove-referral .modal-content .gbm-input-boxed,
#enter-referral .modal-content .gbm-input-boxed,
#bid-confirmation-modal .modal-content .bid-confirmed .gbm-input-boxed {
  height: 56px;
  padding: 0px 16px;
  width: 100%;
  border-radius: var(--radius-medium);
  border: 1px solid var(--stroke-grey);
  font-size: 16px;
}

#transaction-confirmed-svg,
#transaction-failed-svg,
#bid-confirmed-svg,
#spending-limit-svg,
#bid-failed-svg {
  display: flex;
  width: 56px;
  height: 56px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 1000px;
  background-color: var(--primary);
}

#bid-failed-svg,
#transaction-failed-svg,
#spending-limit-svg {
  background-color: var(--important);
}

.auction-item-explanatory-text {
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 24px */
  letter-spacing: -0.32px;
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

#load-more-div {
  width: 100%;
  justify-content: center;
  margin-top: 40px;
  display: none;
}

.gbm-btn.load-more {
  background-color: var(--secondary);
  color: var(--btn-secondary-text);
  border-color: var(--secondary);
}

.gbm-btn.load-more:hover {
  background-color: rgba(var(--secondary-rgb), 0.9);
}

#spending-limit-modal .modal-body {
  padding: 48px 40px;
  max-width: 642px;
}

#spending-limit-modal .modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
}

#spending-limit-modal .modal-content p {
  color: var(--text-grey);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 24px */
  letter-spacing: -0.32px;
  margin: 0;
}

#spending-limit-modal .modal-content p:last-of-type {
  margin-top: 24px;
}

#reset-all-filters-btn {
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: -0.32px;
  min-width: 65px;
}

#reset-all-filters-mobile-btn {
  display: none;
}

#activity-view-segment-mobile-control {
  display: none !important;
}

#nft-modal .modal-content {
  max-height: min(calc(var(--vh, 1vh) * 70), 600px);
  max-height: min(70dvh, 600px);
}

#disclaimer-modal .modal-body .gbm-btn,
#nft-modal .modal-body .gbm-btn {
  display: flex;
  height: 56px;
  padding: 0px 24px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-medium);
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: -0.36px;
  width: 100%;
}

.nft-display-info {
  display: grid;
  gap: 23px;
  /* remove the gap with help of calc */
  grid-template-columns: calc(47% - 11.5px) calc(53% - 11.5px);
  margin: 24px 0;
  max-width: 1160px;
}

.bundle-nft-media {
  margin: 0;
  border-radius: var(--radius-medium);
}

.bundle-nft-media img {
  border-radius: var(--radius-medium);
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.nft-bundle-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 17px;
  column-gap: 28px;
  align-content: start;
}

.nft-bundle-info .box {
  display: flex;
  padding: 10px 12px;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  flex-shrink: 0;
  border-radius: var(--radius-medium);
  border: 1px solid var(--stroke-grey);
}

.nft-bundle-info .box.span-2 {
  grid-column: 1 / -1;
}

.nft-bundle-info .box .label {
  color: var(--text-light-grey);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.28px;
}

.nft-bundle-info .box .value {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.36px;
}

.nft-bundle-info .box .value.token-image {
  display: flex;
  gap: 12px;
  align-items: center;
}

.nft-bundle-info .box .value.token-image img {
  width: 28px;
  height: 28px;
  aspect-ratio: 1/1;
  border-radius: 1000px;
}

#modal-auction-info-bundle .plus-sign {
  color: var(--primary);
  font-size: 26px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: -0.52px;
}

#l-s-referred-sort,
#l-s-referral-sort {
  display: none !important;
}

.show-on-mobile {
  display: none;
}

#referral-segment-mobile-control {
  display: none !important;
}

.sale-info-img {
  max-width: 100%;
  height: auto; /* keeps aspect ratio */
  display: block; /* avoids extra inline gap */
  padding: 0 10px;
}

.l-s-linkedIn-link {
  margin-top: 12px;
  color: var(--primary);
  text-align: center;
  width: 100%;
  display: block;
}

@media screen and (max-width: 1370px) {
  #modal-select-cheapest-bundle-title {
    display: none;
  }
  #modal-select-cheapest-bundle-title-mobile {
    display: block;
  }
  #bid-modal .modal-body > .modal-header:first-of-type {
    display: flex;
    margin-bottom: 24px;
  }
  #bid-modal .modal-content .modal-auction-container .modal-header {
    display: none;
  }
  #bid-modal .modal-body {
    padding: 24px 19px 40px 40px;
    background-color: var(--background);
    border-radius: var(--radius-big);
    box-shadow: 0 4px 27px rgba(0, 0, 0, 0.15);
    max-height: 95vh;
    overflow-y: hidden;
  }

  #bid-modal .modal-content {
    flex-direction: column;
    align-items: start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
    padding: 0;
    border-radius: 0;
    max-height: 85vh;
  }

  #bid-modal .modal-content > .auction-live,
  #bid-modal .modal-content > div:last-of-type {
    height: unset;
    flex: 0 0 auto;
    align-self: center;
  }

  #bid-history-container {
    margin-bottom: 40px;
  }

  #bid-modal .modal-content > div {
    max-height: unset;
    height: unset;
    width: 795px;
    padding: 0;
    box-shadow: none;
    padding-right: 21px;
    border-radius: 0;
  }

  #bid-modal .modal-content > div {
    overflow-y: hidden;
    overflow-x: hidden;
  }

  #nft-modal .modal-body {
    max-width: 95%;
  }
}

@media screen and (max-width: 1143px) {
  .l-s-tab.active.justify-content-mobile-friendly {
    flex-direction: column;
  }
}

@media screen and (max-width: 913px) {
  #bid-modal .modal-body {
    width: 90%;
  }
  #bid-modal .modal-content,
  #bid-modal .modal-content > div,
  #bid-modal .modal-content > div:first-of-type {
    width: 100%;
  }

  #nft-modal .modal-content {
    max-height: calc(var(--vh, 1vh) * 80);
    max-height: 80dvh;
  }

  .nft-display-info {
    grid-template-columns: none;
    max-height: unset;
  }

  .l-s-tab.sale-information.active {
    display: flex;
    gap: 20px;
    flex-direction: column;
  }
}

@media screen and (max-width: 600px) {
  #modal-auction-info .overlay-shadow > div:first-of-type {
    display: none;
  }

  .sale-info-img {
    padding: 0;
  }
  .sale-info-video {
    padding: 0;
    max-width: 100%;
    height: auto;
    display: block;
  }
}

@media screen and (max-width: 480px) {
  #banner-section {
    height: 160px;
    aspect-ratio: 393/160;
  }

  #token-short-info {
    padding: 0 16px;
  }

  #token-image {
    width: 120px;
    height: 120px;
    margin-top: -50px;
    border-width: 5px;
  }

  #token-symbol-badge {
    margin-top: -5px;
  }

  #token-symbol-text {
    font-size: 32px;
    letter-spacing: -1.28px;
  }

  #token-info-type {
    margin-top: 16px;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
  }

  #token-info-type > div:first-of-type,
  #token-info-type > div {
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

  #token-info-type > div:last-of-type {
    border: none;
  }

  #l-s {
    margin-top: 15px;
  }

  #l-s .page-content {
    padding: 0px 16px;
  }

  #l-s-tabs {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--stroke-grey);
    margin-top: 10px;
    justify-content: flex-start;
    gap: 1px;
    overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap;
  }

  #l-s-tabs > div.active,
  #l-s-tabs > div {
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%; /* 27px */
    letter-spacing: -0.36px;
    margin-bottom: -1.5px;
  }

  #l-s-referral-stats,
  #l-s-user-stats,
  #l-s-stats {
    margin-top: 16px;
  }

  #stats-bar {
    font-size: 14px;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: -0.28px;
    margin-top: 8px;
  }

  #stats-bar .left {
    width: 50% !important;
  }

  #funds-raised-bar {
    height: 66px;
  }

  #funds-raised-bar,
  .wave-box > div:last-of-type,
  #stats-bar .left > div:last-of-type,
  #stats-bar .right > div:last-of-type {
    font-size: 18px;
    line-height: 150%;
    letter-spacing: -0.36px;
  }

  #l-s-referral-stats,
  #l-s-user-stats,
  #l-s-stats {
    column-gap: 8px;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 8px;
    margin-top: 8px;
  }

  .l-s-stats-box > div > div:first-child {
    font-size: 14px;
    font-weight: 600;
    line-height: 150%; /* 21px */
    letter-spacing: -0.28px;
  }

  .l-s-stats-box > div > div:last-child {
    font-size: 18px;
    line-height: 150%; /* 27px */
    letter-spacing: -0.36px;
  }

  #l-s-user-stats .l-s-stats-box svg.circle-svg,
  .l-s-stats-box svg.circle-svg {
    width: 50px !important;
    height: 49px !important;
  }

  #l-s-referral-stats .small.l-s-stats-box > div > div:last-child {
    font-size: 15px;
  }

  #view-segment-control {
    display: none !important;
  }

  #hammer-time-section {
    padding: 2px 4px;
    font-size: 12px;
    height: auto;
  }

  #hammer-time-section .gbm-tooltip-text {
    left: 0;
  }

  #hammer-time-section svg {
    height: 14px;
    width: 14px;
  }

  .l-s-table-wrapper {
    margin-top: 20px;
    background-color: transparent;
    border: none;
  }

  .l-s-select-view {
    display: flex;
    padding: 24px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 0px;
    align-self: stretch;
    background-color: var(--background);
    border: 1px solid var(--stroke-grey);
    border-radius: var(--radius-big);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  .l-s-select-view > div:first-child {
    flex-direction: column;
    align-items: start;
    gap: 8px;
  }

  .l-s-select-view > div:nth-child(2) {
    width: 100%;
  }

  .l-s-select-view > div:nth-child(2) .gbm-segment-control label {
    font-size: 16px;
  }

  .l-s-filter-controller {
    display: flex;
    height: 56px;
    padding: 0 16px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    background-color: var(--secondary);
    color: var(--background);
    font-weight: 600;
    border-bottom-left-radius: var(--radius-big);
    border-bottom-right-radius: var(--radius-big);
    cursor: pointer;
  }

  .l-s-filter-controller.active {
    border-radius: 0;
    background-color: var(--dark-secondary);
  }

  .l-s-filter-controller.active svg {
    transform: rotate(180deg);
  }

  .l-s-filter-section {
    display: none;
  }

  .l-s-filter-section.show {
    display: flex;
    background-color: var(--background);
    border: 1px solid var(--stroke-grey);
    border-radius: var(--radius-big);
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    padding: 24px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    align-self: stretch;
  }

  .l-s-filter-section .auction-filter-item {
    padding: 0;
  }

  .l-s-filter-section .auction-filter-item-small {
    align-self: stretch;
  }
  #reset-all-filters-btn.transparent-underline-btn {
    display: none;
  }

  #reset-all-filters-mobile-btn {
    display: block;
    height: 48px;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%; /* 24px */
    letter-spacing: -0.32px;
  }

  .l-s-sort-section.normal-listing-view {
    display: none !important;
  }

  #select-sort {
    display: flex !important;
    margin-top: 20px;
    width: 100%;
  }

  .l-s-winning,
  .l-s-outbid {
    margin-top: 0;
  }

  .l-s-listing-view {
    overflow-y: hidden;
    max-height: unset;
    padding: 0;
    margin-top: 4px;
  }

  .l-s-listing-view-item:last-of-type {
    border: 1px solid var(--stroke-grey);
  }

  .l-s-listing-view-item {
    padding: 16px;
    align-items: flex-start;
    border-radius: var(--radius-big);
    border: 1px solid var(--stroke-grey);
    background: var(--background);
    margin-top: 16px;
    grid-template-columns: 1fr 1fr;
    row-gap: 24px;
    column-gap: 24px;
  }

  .l-s-listing-view-item-box:first-of-type {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    grid-column: span 2;
  }

  .l-s-listing-view-item-box:first-of-type .first {
    font-size: 20px;
    font-weight: 700;
    line-height: 150%; /* 30px */
    letter-spacing: -0.4px;
  }

  .l-s-listing-view-item-box:first-of-type .second {
    font-size: 14px;
    font-weight: 600;
    line-height: 150%; /* 21px */
    letter-spacing: -0.28px;
    margin-top: 4px;
  }

  .l-s-listing-view-item-box .second {
    font-size: 14px;
    letter-spacing: -0.28px;
    color: var(--text-grey);
  }

  .l-s-listing-view-item-box.inline .l-s-listing-view-item-box {
    display: block;
  }

  .l-s-listing-view-item-box {
    gap: 2px;
  }

  .l-s-listing-view-item .bid-btn {
    width: 100%;
    grid-column: span 2;
    font-size: 16px;
    font-weight: 600;
    line-height: 150%; /* 24px */
    letter-spacing: -0.32px;
    height: 48px;
  }

  .l-s-listing-view-item-box .mobile-title {
    display: block;
    margin-bottom: 4px;
  }

  .l-s-listing-view-item-box .hide-on-mobile {
    display: none;
  }

  #chart figure {
    margin: 0;
  }

  #chart svg g[aria-label="y-axis label"] {
    display: none !important;
  }

  .color-legend-swatches-wrap {
    flex-direction: column;
    align-items: flex-start;
  }

  .color-legend-swatch {
    margin-left: 12px;
  }

  .l-s-select-activity-view {
    display: none;
  }

  #activity-view-mobile-deviser {
    display: block;
  }
  #activity-view-segment-mobile-control {
    display: flex !important;
    margin-top: 64px;
  }

  #share-stats-btn-mobile {
    display: flex;
    margin-top: 16px;
    justify-content: start;
  }

  #activity-view-segment-mobile-control label {
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%; /* 27px */
    letter-spacing: -0.36px;
    display: flex;
    height: 48px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex: 1 0 0;
    border-radius: 1000px;
  }

  #activity-view-segment-mobile-control label > div {
    padding: 0;
  }

  #activity-view-segment-mobile-control label > div > span {
    display: flex;
    height: 24px;
    padding: 0 8px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 21px */
    letter-spacing: -0.72px;
    text-align: center;
    border-radius: 1000px;
  }

  #activity-view-segment-mobile-control,
  #activity-view-segment-mobile-control .gbm-indicator {
    border-radius: 1000px;
  }

  #activity-view-segment-mobile-control.winning .gbm-indicator {
    background-color: var(--primary);
  }

  #activity-view-segment-mobile-control.winning > label > div.primary span {
    background-color: var(--background);
    color: var(--primary);
  }
  #activity-view-segment-mobile-control.winning > label > div.important span {
    background-color: var(--important);
    color: var(--btn-important-text);
  }

  #activity-view-segment-mobile-control.loosing .gbm-indicator {
    background-color: var(--important);
  }

  #activity-view-segment-mobile-control.loosing > label > div.primary span {
    background-color: var(--primary);
    color: var(--btn-primary-text);
  }

  #activity-view-segment-mobile-control.loosing > label > div.important span {
    background-color: var(--background);
    color: var(--important);
  }

  .l-s-activity-title {
    display: none;
  }

  .l-s-winning .l-s-table-wrapper,
  .l-s-outbid .l-s-table-wrapper {
    padding: 0;
  }

  .l-s-winning .l-s-sort-section,
  .l-s-outbid .l-s-sort-section {
    display: none !important;
  }

  #l-s-winning-sort,
  #l-s-outbid-sort {
    margin-top: 24px;
    width: 100% !important;
  }

  .carousel {
    overflow: hidden; /* native scroll */
    overflow-x: hidden;
    margin-top: 0;
  }

  @supports (-webkit-overflow-scrolling: touch) {
    .carousel {
      -webkit-overflow-scrolling: touch;
    }
  }

  .carousel-track {
    display: flex; /* break the horizontal row */
    transform: none !important; /* ignore JS transforms */
    transition: none !important;
    cursor: auto;
    flex-direction: column;
    align-items: center;
  }

  .carousel-indicator {
    display: none !important;
  }

  .carousel-item {
    width: 100%;
    margin: 0;
    margin-top: 16px;
    padding: 24px !important;
  }

  .carousel-item:first-of-type {
    margin: 0;
  }

  #bid-modal .modal-body {
    width: 95%;
    padding: 12px 0 12px 10px;
  }

  .l-s-outbid {
    display: none;
  }

  /* #nft-modal .modal-content,
  #bid-modal .modal-content {
    max-height: calc(var(--vh, 1vh) * 75);
    max-height: 75dvh;
  } */

  .nft-display-info {
    margin: 12px 0;
  }
  .nft-bundle-info {
    gap: 12px;
  }

  .nft-bundle-info .box .label {
    font-size: 13px;
  }

  .nft-bundle-info .box .value {
    font-size: 16px;
  }

  .nft-bundle-info .box .value.token-image {
    gap: 5px;
  }

  .nft-bundle-info .box .value.token-image img {
    height: 16px;
    width: 16px;
  }

  #bid-modal .close-modal-btn {
    margin-right: 10px;
  }
  #bid-modal .modal-content > div {
    padding-right: 10px;
  }

  #bid-modal .modal-content .modal-header {
    flex-direction: column;
    align-items: start;
    gap: 8px;
  }

  #bid-modal .modal-auction-container {
    gap: 0px;
  }

  #modal-auction-info {
    gap: 10px;
    margin-bottom: 16px;
  }

  #modal-auction-info .nft-media-container {
    grid-row: 1 / span 2;
  }

  #modal-auction-info > .cost-message > div:last-of-type {
    gap: 6px;
    font-size: 16px;
  }

  #timerCountdown canvas,
  #timerCountdown .ens-avatar-image,
  #bid-modal .previous-bid .ens-avatar-image,
  #bid-modal .previous-bid .secondary-dot,
  #modal-auction-info > .cost-message > div:last-of-type img {
    height: 20px;
    width: 20px;
    margin-right: 0 !important;
  }

  #modal-auction-info > .cost-message {
    padding: 7px;
    max-height: 70px;
    gap: 4px;
  }

  #modal-auction-info > .cost-message > div:first-of-type {
    font-size: 12px;
  }

  #modal-auction-info .info-value-winner {
    padding: 0;
    font-size: 14px;
    gap: 6px;
  }

  .incentive {
    gap: 5px;
    display: grid;
  }

  .incentive-logo {
    height: 25px;
    padding: 4px 6px;
  }

  .incentive-text {
    grid-column: none;
    font-size: 14px;
  }

  .incentive > a.learn-more-btn {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
    display: block;
    margin-left: 0;
  }

  .bid-btn-wrapper {
    gap: 13px;
    margin-top: 20px;
    display: grid;
    width: 100%;
    justify-content: stretch;
  }

  .bid-btn-wrapper .gbm-btn {
    font-size: 15px;
    height: 50px;
    width: 100%;
    max-width: unset;
  }

  #place-bid-btn {
    grid-row: 1;
  }

  .share-btn {
    margin-top: 13px;
    height: 50px;
  }

  #bids-disabled-upper-msg {
    margin-top: 10px;
  }

  .previous-bid {
    padding: 14px;
  }

  .previous-bid > div {
    font-size: 16px;
  }

  .previous-bid > div:last-of-type {
    font-size: 13px;
  }

  #bid-modal .previous-bid .gap-8 {
    gap: 4px !important;
  }

  .previous-bid .link-arrow-wrapper svg {
    width: 15px;
    height: 15px;
  }

  .l-s-sales-info {
    margin-top: 16px;
    padding: 24px;
    gap: 28px;
  }

  .l-s-sales-info > div img.sale-info-img,
  .l-s-sales-info p {
    margin: 0;
    margin-top: 12px;
  }
  .l-s-sales-info > div > p.d-mb {
    margin-bottom: 0;
  }

  .l-s-sale-info-subsection p {
    margin: 0;
  }

  .l-s-sales-info-subtitle {
    margin-top: 12px;
  }

  .l-s-sales-info-boxes {
    grid-template-columns: none;
    margin-top: 24px;
  }

  .l-s-posted-notes {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .l-s-posted-notes > div {
    min-width: unset;
    width: 100%;
    margin-top: 24px;
  }

  .l-s-sales-info-boxes > div {
    padding: 16px;
  }

  #bid-modal .modal-body,
  #nft-modal .modal-body,
  #transaction-confirmation-modal .modal-body,
  #bid-confirmation-modal .modal-body {
    max-height: unset;
    max-width: unset;
    width: 100%;
    min-height: 100%;
    border-radius: 0;
  }

  #bid-confirmation-modal .modal-body {
    padding: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #bid-confirmation-modal .modal-content {
    max-height: calc(var(--vh, 1vh) * 85);
    max-height: 85dvh;
  }

  #nft-modal .modal-content {
    max-height: min(calc(var(--vh, 1vh) * 70), 600px);
    max-height: min(70dvh, 600px);
  }

  /* #bid-modal .modal-body {
    max-height: calc(var(--vh, 1vh) * 85);
    max-height: 85dvh;
  } */

  #modal-auction-info > .cost-message:nth-child(2) {
    max-height: unset;
  }

  #modal-auction-info-bundle {
    line-height: 0 !important;
  }

  .make-block-on-mobile {
    display: block;
  }

  #token-short-description {
    font-size: 15px;
  }

  #partner-logo {
    max-width: 100%;
  }

  #double-bid-message,
  #minimum-bid-message {
    font-size: 14px;
  }

  #double-bid-message span,
  #minimum-bid-message span {
    display: block;
  }

  .l-s-stats-box,
  .wave-box,
  #stats-bar .sk,
  #stats-bar .left,
  #stats-bar .right {
    gap: 2px;
    padding: 8px 16px;
  }

  #stats-bar .sk {
    gap: 8px;
  }

  .l-s-stats-box {
    gap: 0px;
  }
  .l-s-stats-box > div:first-of-type {
    gap: 2px;
  }

  #stats-bar.is-loading .left,
  #stats-bar.is-loading .right {
    min-height: 69px;
  }

  #l-s-referred-sort,
  #l-s-referral-sort {
    width: 100% !important;
    display: inline-block !important;
  }

  .referral-section .l-s-sort-section {
    display: none;
  }

  .referral-section .l-s-table-wrapper {
    padding: 0;
  }

  .referral-section .list-view-activity-table-item {
    grid-template-columns: repeat(2, 1fr);
    border: 1px solid var(--stroke-grey);
    border-radius: var(--radius-big);
    background: var(--background);
    padding: 24px;
    width: 100%;
    row-gap: 16px;
    margin-bottom: 16px;
  }

  .referral-section .list-view-activity-table-item > div:first-of-type {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.48px;
    grid-column: 1 / -1;
    text-align: center;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--stroke-grey);
  }

  .referral-section .list-view-activity-table-item > div:last-of-type {
    grid-column: 1 / -1;
    grid-row: 2;
    color: var(--text-grey);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.36px;
  }

  .show-on-mobile {
    display: block;
  }

  .referral-section .l-s-activity-title.show {
    display: block;
  }

  #wave-bar {
    overflow-x: scroll;
  }

  #referral-segment-mobile-control {
    display: flex !important;
    margin-top: 20px;
  }

  .referral-section .l-s-activity-title {
    margin-top: 20px;
  }

  #referral-earnings-data,
  #referred-bonus-data {
    max-height: unset;
  }

  #l-s-referral-stats
    .small.l-s-stats-box.ellipsis-text
    > div
    > div:last-child {
    max-width: 135px;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}