.third-container {
}

.third-light-container {
}

.shadow-blur {
}

.stake-and-earn-background {
}

@media (max-width: 640px) {
  .stake-and-earn-background {
  }
}

.neon-border {
  position: relative;
  border-radius: 10px;
  box-shadow: 0px 3px 37.13px 0px #ff00f540;
}

.neon-border::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  background: linear-gradient(
    122.98deg,
    #c554ff 22.1%,
    #55a6ff 37.27%,
    #5fff72 51.24%,
    #fff340 64.81%,
    #ff9623 83.16%,
    #ff7f00 83.17%,
    #ff2d25 98.74%
  );
  border-radius: 10px;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: xor;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
}

.primary-border {
  position: relative;
  border-radius: 10px;
}

.primary-border::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(0deg, #3d475c, #3d475c),
    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(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  pointer-events: none;
  z-index: 1;
}

.toaster-custom {
  box-shadow: 0px 0px 10px 0px #ff00f540;
  background-color: #000000;
  border: 1px solid #f16122;
  border-radius: 10px;
  color: #ffffff;
}

@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: #f16122 !important;
}

.points-category-filter {
  position: relative;
  border-radius: 10px;
  background-clip: padding-box;
  background-color: #0b0024 !important;
}

.points-category-filter::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(0deg, #3d475c, #3d475c),
    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(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  pointer-events: none;
  z-index: 1;
}

.exclusive-rewards-card {
  position: relative;
  border-radius: 10px;
  background-clip: padding-box;
  background-color: #0b0024;
}

.exclusive-rewards-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    165.26deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.2) 49.66%,
    rgba(255, 255, 255, 0.4) 99.32%
  );
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  pointer-events: none;
  z-index: 1;
}

.popup-shadow {
  box-shadow: 0px 3px 37.13px 0px #ff00f540;
}

.points-balance-container {
  background: #ffffff1a;
  backdrop-filter: blur(20px);
  border-radius: 10px;
}

.points-balance-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(0deg, #3d475c, #3d475c),
    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(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  pointer-events: none;
  z-index: 1;
}

.neon-tooltip-container {
  position: relative;
  background: #140b2b !important;
  border-radius: 12px;
  box-shadow: 0px 3px 37.13px 0px #ff00f540;
  backdrop-filter: blur(20px);
}

.neon-tooltip-container::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  background: linear-gradient(
    122.98deg,
    #c554ff 22.1%,
    #55a6ff 37.27%,
    #5fff72 51.24%,
    #fff340 64.81%,
    #ff9623 83.16%,
    #ff7f00 83.17%,
    #ff2d25 98.74%
  );
  border-radius: inherit;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: xor;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
}

.popup-border-inactive {
  position: relative;
}

.popup-border-inactive::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  background: linear-gradient(0deg, #3d475c, #3d475c),
    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%
    );
  border-radius: inherit;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: xor;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
}

.popup-border-active {
  position: relative;
}

.popup-border-active::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  background: linear-gradient(
    122.98deg,
    #c554ff 22.1%,
    #55a6ff 37.27%,
    #5fff72 51.24%,
    #fff340 64.81%,
    #ff9623 83.16%,
    #ff7f00 83.17%,
    #ff2d25 98.74%
  );
  border-radius: inherit;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: xor;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
}

.coming-soon-container {
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(2px);
  border-radius: 10px;
}

@media (min-width: 768px) {
  .io-maintenance-gradient-bg {
    background: linear-gradient(
      to right,
      transparent 0,
      transparent 5rem,
      #ffcd3e33 5rem,
      #ffcd3e33 100%
    );
  }
}

.alert-body svg path {
  fill: #000;
}

.otaku-closed-icon-button svg path {
  fill: #fff;
}

.rank-neon-container-alt {
  position: relative;
  box-shadow: 0px 0px 8px 0px #ffffff;
}

.rank-neon-container-alt::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  background: #ffffff;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: xor;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  z-index: -1;
}

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

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