.third-container {
  border: 1px solid #c5abf3;
  background: linear-gradient(90deg, #413b95 0%, #5a39aa 100%);
}

.bg-table,
.third-light-container,
.stake-unstake-container {
  background: linear-gradient(
    154.7deg,
    rgba(255, 255, 255, 0.03) -2.12%,
    rgba(255, 255, 255, 0.12) 99.56%
  );
}

.stake-unstake-container {
  backdrop-filter: blur(30px);
}

.shadow-blur {
  box-shadow: 1px 1px 10px 0px #00000066;
  backdrop-filter: blur(20px);
}

.stake-and-earn-background {
  background: url("/playarcade-v3/main-stake-and-earn-banner.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

@media (max-width: 640px) {
  .stake-and-earn-background {
    background: url("/playarcade-v3/main-stake-and-earn-banner-mobile.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
}

.toaster-custom {
  background: linear-gradient(180deg, #4ae192 0%, #07723a 100%);
  border: 1px solid #8c8c8c;
  border-radius: 10px;
  color: #fff;
}

@media (max-width: 480px) {
  .Toastify__toast-container {
    gap: 6px;
    margin-top: 60px;
  }

  .Toastify__toast-container {
    gap: 6px;
    margin-top: 53px;
  }

  .toaster-custom,
  .Toastify__toast {
    width: 250px;
    padding: 10px;
    font-size: 12px;
    min-width: 250px;
    min-height: 48px;
    border-radius: 10px;
  }
}

.toaster-custom .Toastify__close-button {
  color: #fff;
  opacity: 1;
}

.toaster-custom .Toastify__progress-bar--success {
  background: #53faa3 !important;
}

.playarcade-mobile-header {
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  background: #000000b2;
  box-shadow: 0px 2px 4px 0px #53faa31a;
}

.dropdown-menu-container {
  /* Ensure it has a background if the ::after is only for the border */
  background: linear-gradient(180deg, #1e1e1e 0%, #020202 100%);
  position: relative;
  border-radius: 0.625rem;
  /* Original background */
}

.dropdown-menu-container::after {
  content: "";
  position: absolute;
  inset: -1px; /* Controls the perceived border thickness */
  padding: 1px; /* Should match the absolute value of inset */
  border-radius: inherit; /* Match the parent's border-radius */
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.25) 100%
  );
  /* This is your borderImageSource gradient */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; /* For Safari/Chrome */
  mask-composite: exclude; /* Standard */
  pointer-events: none;
  z-index: 1; /* Or adjust as needed based on other positioned elements */
}

.wallet-label {
  background: linear-gradient(
    154.7deg,
    rgba(255, 255, 255, 0.03) -2.12%,
    rgba(255, 255, 255, 0.12) 99.56%
  );
}

.change-username-modal,
.playaracade-bg-primary,
.two-fa-playaracade-container,
.notification-modal-container {
  background: linear-gradient(180deg, #1e1e1e 0%, #020202 100%);
  box-shadow: 1px 1px 10px 0px #00000066;
}

.stake-and-earn-background::after,
.stake-unstake-container::after,
.playaracade-bg-primary::after,
.chart-stake-filter::after {
  content: "";
  position: absolute;
  inset: -1px; /* Controls the perceived border thickness */
  padding: 1px; /* Should match the absolute value of inset */
  border-radius: 0.625rem; /* Match the parent's border-radius */
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.25) 100%
  ); /* This is your borderImageSource gradient */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; /* For Safari/Chrome */
  mask-composite: exclude; /* Standard */
  pointer-events: none;
  z-index: 1; /* Or adjust as needed based on other positioned elements */
}

.bottom-background {
  background: linear-gradient(
    360deg,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(22, 22, 22, 0.7) 100%
  );
  backdrop-filter: blur(30px);
}

.pa-body-container {
  background: linear-gradient(180deg, #53faa3 0%, #002211 100%);
  border-radius: 20px;
}

.progress-bar-container {
  width: 100%;
  height: 4px;
  background-color: #ffffff1a;
  border-radius: 100px;
  overflow: hidden;
}

@media (min-width: 768px) {
  .progress-bar-container {
    height: 10px;
  }
}

.progress-bar {
  height: 100%;
  background: #47db90;
  transition: width 0.3s ease;
  border-radius: 73.59px;
}

.button-secondary-pa {
  color: #fff;
  font-weight: bold;
  position: relative;
  backdrop-filter: blur(20px);
  border-radius: 100px !important;
  background: #ffffff0d;
}

.button-secondary-pa:hover {
  background: #ffffff4d;
}

.button-secondary-pa::before {
  inset: 0;
  content: "";
  padding: 1px;
  position: absolute;
  border-radius: 100px;
  background: linear-gradient(
    165.26deg,
    #ffffff 0%,
    rgba(255, 255, 255, 0.3) 49.66%,
    rgba(255, 255, 255, 0.5) 99.32%
  );
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.vip-banner-profile-container {
  border-radius: 20px;
  background-image: url("/playarcade-v3/image/vip-banner-image.png");
  background-size: cover;
  background-position: center;
}

@media (max-width: 768px) {
  .vip-banner-profile-container {
    box-shadow: 0px 0px 40px 0px #2600ff40;
  }
}

.secondary-container,
.chart-stake-filter {
  background: linear-gradient(180deg, #1e1e1e 0%, #020202 100%);
}

.notification-item-container {
  background: linear-gradient(
    154.7deg,
    rgba(255, 255, 255, 0.03) -2.12%,
    rgba(255, 255, 255, 0.12) 99.56%
  );
  box-shadow: 1px 1px 10px 0px #00000066;
}

.notification-modal-container::after,
.change-username-modal::after,
.two-fa-playaracade-container::after {
  content: "";
  position: absolute;
  inset: -1px; /* Controls the perceived border thickness */
  padding: 1px; /* Should match the absolute value of inset */
  border-radius: 0.625rem; /* Match the parent's border-radius */
  background: linear-gradient(
    165.26deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0) 49.66%,
    rgba(255, 255, 255, 0.2) 99.32%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; /* For Safari/Chrome */
  mask-composite: exclude; /* Standard */
  pointer-events: none;
  z-index: 1; /* Or adjust as needed based on other positioned elements */
}

.claim-reward-component-background {
  background: linear-gradient(
      154.7deg,
      rgba(255, 255, 255, 0.03) -2.12%,
      rgba(255, 255, 255, 0.12) 99.56%
    ),
    linear-gradient(180deg, #4ae192 0%, #07723a 100%);
  box-shadow: 1px 1px 10px 0px #00000066;
}

.pa-list-container {
  background: linear-gradient(
    154.7deg,
    rgba(255, 255, 255, 0.03) -2.12%,
    rgba(255, 255, 255, 0.12) 99.56%
  );
  box-shadow: 1px 1px 10px 0px #00000066;
}

.table-container {
  background: linear-gradient(
    154.7deg,
    rgba(255, 255, 255, 0.03) -2.12%,
    rgba(255, 255, 255, 0.12) 99.56%
  );
  position: relative;
  border-radius: 0.625rem;
}

.table-container::after {
  content: "";
  position: absolute;
  inset: -1px; /* Controls the perceived border thickness */
  padding: 1px; /* Should match the absolute value of inset */
  border-radius: inherit; /* Match the parent's border-radius */
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.25) 100%
  );
  /* This is your borderImageSource gradient */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; /* For Safari/Chrome */
  mask-composite: exclude; /* Standard */
  pointer-events: none;
  z-index: 1; /* Or adjust as needed based on other positioned elements */
}

[data-theme="playarcadeV3"] .pagination-active {
  background: linear-gradient(180deg, #1e1e1e 0%, #020202 100%) !important;
  border: 1px solid #49d79e;
  border-radius: 5px;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
}

.active-currency-modal {
  background: linear-gradient(180deg, #1e1e1e 0%, #020202 100%);
  position: relative;
  border-radius: 0.625rem;
  backdrop-filter: blur(15px);
}

.active-currency-modal::after {
  content: "";
  position: absolute;
  inset: -1px; /* Controls the perceived border thickness */
  padding: 1px; /* Should match the absolute value of inset */
  border-radius: inherit; /* Match the parent's border-radius */
  background: linear-gradient(
    165.26deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0) 49.66%,
    rgba(255, 255, 255, 0.2) 99.32%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; /* For Safari/Chrome */
  mask-composite: exclude; /* Standard */
  pointer-events: none;
  z-index: 1; /* Or adjust as needed based on other positioned elements */
}

.box-shadow-container {
  box-shadow: 1px 1px 10px 0px #00000066;
}

.gradient-color-first::before {
  inset: 0;
  content: "";
  padding: 1px;
  position: absolute;
  background: linear-gradient(
    165.26deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0) 49.66%,
    rgba(255, 255, 255, 0.2) 99.32%
  );
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.gradient-color-second::before {
  inset: 0;
  content: "";
  padding: 1px;
  position: absolute;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.25) 100%
  );

  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.activate-filter {
  border-color: #53faa3 !important;
}

.activate-filter .filter-icon {
  color: #53faa3 !important;
}

.box-shadow-container {
  box-shadow: 1px 1px 10px 0px #00000066;
}

.gradient-color-first::before {
  inset: 0;
  content: "";
  padding: 1px;
  position: absolute;
  background: linear-gradient(
    165.26deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0) 49.66%,
    rgba(255, 255, 255, 0.2) 99.32%
  );
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.gradient-color-second::before {
  inset: 0;
  content: "";
  padding: 1px;
  position: absolute;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.25) 100%
  );

  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.activate-filter {
  border-color: #53faa3 !important;
}

.activate-filter .filter-icon {
  color: #53faa3 !important;
}

.gradient-border-container-pa3 {
  position: relative;
  z-index: 0;
  box-shadow: 1px 1px 10px 0px #00000066;
}

.gradient-border-container-pa3::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px; /* border thickness */
  border-radius: inherit;
  background: linear-gradient(
    165.26deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0) 49.66%,
    rgba(255, 255, 255, 0.2) 99.32%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

.gradient-border-container-pa4 {
  position: relative;
  z-index: 0;
  background: linear-gradient(180deg, #1e1e1e 0%, #020202 100%);
  box-shadow: 1px 1px 10px 0px #00000066;
}

.gradient-border-container-pa4::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px; /* border thickness */
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.25) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

.gradient-border-container-pa4:hover {
  background: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.6) 0%,
      rgba(0, 0, 0, 0.6) 100%
    ),
    #49d79e;
}

.bg-balance-banner {
  border-radius: 20px;
  background-size: cover;
  background-position: center;
  box-shadow: 0px 0px 30px 0px #00ffcc4d;
  background: linear-gradient(180deg, #53faa3 0%, #021 100%);
}

.switch-button-color {
  background: #00000080;
  backdrop-filter: blur(10px);
}

.subtext-color {
  color: #828282;
}