:root {
  --switch-height: 18px;
  --switch-width: 30px;

  --radio-group-size: 18px;
  --radio-group-svg-size: 10px;

  --checkbox-size: 18px;
  --checkbox-svg-size: 10px;

  --table-height: 48px;

  --tab: rgba(var(--hex-natural-white), 0.05);
  --tab-border: rgba(var(--hex-natural-white), 0.05);

  --countdownTimer: rgba(var(--hex-natural-white), 0.1);

  --bank-status-online: rgb(var(--hex-success));
  --bank-status-offline: rgb(var(--hex-danger));
  --bank-status-disturbance: rgb(var(--hex-warning));

  --input: rgba(var(--hex-natural-black), 0.4);
  --input-border: rgba(var(--hex-border), 0.1);
  --input-border-hover: var(--primary-600);

  --switch-checked-translate: calc(100% - 3px);

  --card-foreground: var(--foreground);

  --popover: var(--background-600);
  --popover-foreground: var(--foreground);

  --category-games-menu-bg-default: linear-gradient(
    105.55deg,
    #7e7f81 0.5%,
    rgba(40, 41, 41, 0.8) 40.8%,
    rgba(44, 44, 44, 0.06) 70.74%,
    hsla(200, 1%, 50%, 0.75) 100.19%
  );

  --register-login-heading: var(--primary-500);

  --apk-header: linear-gradient(138deg, rgba(255, 233, 199, 1) -4.92%, rgba(241, 182, 98, 1) 91.39%);

  --table-seperator: rgba(var(--hex-natural-white), 0.1);

  --lottery-prize-number: rgba(var(--hex-natural-white), 0.1);
  --bonus-cashback-container: var(--background-500);

  --active-carousel-indicator: var(--primary-500);
  --inactive-carousel-indicator: rgba(var(--hex-natural-white), 0.3);

  --bonus-popover-content: var(--background-500);
  --bonus-popover-card: var(--background-600);
  --bonus-popover-nominal: linear-gradient(
    rgba(255, 252, 243, 1),
    rgba(239, 210, 154, 1),
    rgba(250, 226, 199, 1),
    rgba(222, 171, 122, 1)
  );
  --card-togel-star: rgb(var(--hex-warning));
  --togel-number-featured-bg: var(--main-gradient);
  --modal-filter: rgba(var(--hex-natural-white), 0.05);
  --market-result: var(--background-500);
  --header: var(--background-500);

  --togel-number-default-bg: linear-gradient(180deg, rgba(94, 80, 54, 0.27) 0%, rgba(111, 87, 44, 0.80) 70%, #917D35 100%);

  --popover-quick-depo: var(--background-500);
  --quick-depo-border: var(--primary-500);

  --popover-apk-link-alternatif-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.65);

  --category-games-menu-border-bottom: linear-gradient(
    to bottom,
    var(--main-gradient-from),
    var(--main-gradient-via),
    var(--main-gradient-to)
  );

  --card-togel-real-market-text: rgba(249, 211, 110, 1);
  --card-togel-default-border-hover: linear-gradient(
    80deg,
    var(--main-gradient-from) 16%,
    var(--main-gradient-via) 63%,
    var(--main-gradient-to)
  );

  --wallet-page-bg: radial-gradient(
    113.09% 119.76% at 38.93% -19.23%,
    rgba(75, 81, 88, 0.5) 0%,
    rgba(41, 44, 49, 0.4) 100%
  );

  --footer-bg: var(--background-500);

  --ticket-tg-darker-gradient: rgb(38, 42, 49);
  --ticket-tg-lighter-gradient: rgb(83, 91, 101);
  --ticket-tg: radial-gradient(
    151.51% 252.96% at 38.93% -40.76%,
    var(--ticket-tg-lighter-gradient) 0%,
    var(--ticket-tg-darker-gradient) 94.46%
  );

  --wallet-card-header: linear-gradient(
    51.85deg,
    #42474d -6.67%,
    #2c3137 48.53%,
    #151419 94.75%
  );
}

input::selection {
  background-color: oklch(92.2% 0 0);
  color: oklch(20.5% 0 0);
}

.register-button {
  position: relative;
  outline: 1px solid var(--register-border);
  outline-offset: -1px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.register-button .top-text,
.register-button .bottom-text {
  transition: all;
  transition-duration: 300ms;
}

.register-button .bottom-text {
  position: absolute;
  transform: translateY(25px);
}

.register-button:hover .top-text {
  position: absolute;
  transform: translateY(-50px);
}

.register-button:hover .bottom-text {
  position: relative;
  transform: translateY(0);
}

.register-button::before {
  display: block;
  position: absolute;
  width: 200%;
  height: 200%;
  background: radial-gradient(white 0%, transparent 70%) border-box;
  mix-blend-mode: overlay;
  animation: 4s infinite linear register-shine;
  pointer-events: none;
}

@keyframes register-shine {
  0% {
    transform: translateX(-100%);
    opacity: 1;
  }

  45% {
    transform: translateX(0);
  }

  75% {
    transform: translateX(100%);
  }

  80% {
    opacity: 0;
  }

  100% {
    transform: translateX(-100%);
    opacity: 0;
  }
}

.primary-button,
.secondary-button,
.login-button {
  position: relative;
  z-index: 0;
  backdrop-filter: blur(2px);
}

.primary-button::before {
  background: var(--primary-border);
}

.secondary-button::before {
  background: var(--secondary-border);
}

.login-button::before {
  background: var(--login-border);
}

.bonus-toast-notification::before {
  background: linear-gradient(
      rgba(255, 255, 255, 0.3),
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0.35)
    )
    border-box;
}

.primary-button::before,
.secondary-button::before,
.login-button::before,
.bonus-toast-notification::before {
  display: block;
  border: solid 1px transparent;
  border-radius: inherit;
  position: absolute;
  z-index: 1;

  mask:
    linear-gradient(white) border-box,
    linear-gradient(white) padding-box;
  mask-position: center, center;
  mask-size:
    100% 100%,
    100% 100%;
  mask-repeat: no-repeat, no-repeat;
  mask-composite: subtract;
}

.bonus-toast-notification {
  background: linear-gradient(rgb(45 83 51), rgb(19 32 21)) border-box;
  position: relative;
}

@keyframes slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.animate-marquee {
  animation: marquee var(--marquee-duration, 10s) linear infinite;
}

.animate-marquee-reverse {
  animation: marquee var(--marquee-duration, 10s) linear infinite reverse;
}

.animate-marquee:hover,
.animate-marquee-reverse:hover {
  animation-play-state: paused;
}

.apk-bg {
  box-shadow: var(--download-apk-shadow);
  background-image: var(--download-apk-background);
}

.apk-header {
  background: var(--apk-header);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.deposit_button_main {
  color: var(--deposit-button-main-color);
  transition: transform 0.3s ease;
}
.deposit_button_main::before,
.deposit_button_main::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
  border-radius: inherit;
  box-shadow: var(--deposit-button-main-box-shadow);
}
.deposit_button_main::before {
  background: var(--deposit-button-main-background);
  opacity: 1;
}
.deposit_button_main::after {
  background: var(--deposit-button-main-background-hover);
  opacity: 0;
}
.deposit_button:hover .deposit_button_main {
  transform: translateY(-3px);
}
.deposit_button:hover .deposit_button_main::after {
  opacity: 1;
}
.deposit_button:active .deposit_button_main {
  transform: translateY(1px);
}
.deposit_plus_icon > g > path {
  fill: var(--deposit-button-plus-color);
}
.deposit_plus_icon > g {
  filter: var(--deposit-button-plus-filter-id);
}
.deposit_button_bottom {
  background: var(--deposit-button-bottom-background);
  box-shadow: var(--deposit-button-bottom-box-shadow);
  transition: box-shadow 0.3s ease;
}
.deposit_button:hover .deposit_button_bottom {
  box-shadow: var(--deposit-button-bottom-box-shadow-hover);
}
.deposit_button:active .deposit_button_bottom {
  box-shadow: var(--deposit-button-bottom-box-shadow-active);
}

*:focus {
  outline: none !important;
}

*:focus-visible {
  outline: none !important;
}

.footer-gradient-container {
  box-shadow: 0 -4px 8px 0 rgba(var(--hex-natural-black), 0.12);
  background: linear-gradient(
    180deg,
    var(--hex-footer-gradient-container-light) 0%,
    var(--hex-footer-gradient-container-dark) 100%
  );
}

.popover-apk-link-alternatif-border {
  padding: 1px;
  border-radius: 10px;
  box-shadow: var(--popover-apk-link-alternatif-shadow);
  background: var(--popover-apk-link-alternatif-border);
}

.popover-apk-link-alternatif {
  border-radius: 10px;
  background: var(--popover-apk-link-alternatif);
}