* {
  scrollbar-width: thin;
  scrollbar-color: #434345 #18181b; /* thumb color, track color */
}

/* For Chrome, Edge, Safari */
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background: #1e1e2f;
  border-radius: 8px;
}
*::-webkit-scrollbar-thumb {
  background-color: #71717a;
  border-radius: 8px;
  border: 2px solid #1e1e2f; /* padding around thumb */
  transition: background-color 0.3s ease;
}
*::-webkit-scrollbar-thumb:hover {
  background-color: #71717a;
}

html, body {
  touch-action: manipulation; 
}
button, a {
  touch-action: manipulation;
}

/* ==================== Custom Toastr Styling ==================== */

/* Base toast container styling */
#toast-container > div {
  background-color: #292929 !important;
  border-radius: 12px !important;
  padding: 16px 20px 16px 48px !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4), 0 0 1px rgba(139, 92, 246, 0.2) !important;
  border: 1px solid rgba(113, 113, 122, 0.2) !important;
  color: #e5e5e5 !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Left colored bar for all toasts */
#toast-container > div::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 4px !important;
  border-radius: 12px 0 0 12px !important;
}

/* Success Toast - Green bar */
#toast-container > .toast-success::before {
  background: linear-gradient(180deg, #10b981, #059669) !important;
}

#toast-container > .toast-success {
  backdrop-filter: blur(10px) !important;
  background-color: rgba(16, 185, 129, 0.20) !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4), 0 0 12px rgba(16, 185, 129, 0.15) !important;
}

/* Error Toast - Red bar */
#toast-container > .toast-error::before {
  background: linear-gradient(180deg, #ef4444, #dc2626) !important;
}

#toast-container > .toast-error {
  backdrop-filter: blur(10px) !important;
  background-color: rgba(239, 68, 68, 0.20) !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4), 0 0 12px rgba(239, 68, 68, 0.15) !important;
}

/* Warning Toast - Orange/Amber bar */
#toast-container > .toast-warning::before {
  background: linear-gradient(180deg, #f59e0b, #d97706) !important;
}

#toast-container > .toast-warning {
  backdrop-filter: blur(10px) !important;
  background-color: rgba(245, 158, 11, 0.20) !important;
  border: 1px solid rgba(245, 158, 11, 0.25) !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4), 0 0 12px rgba(245, 158, 11, 0.15) !important;
}

/* Info Toast - Violet bar */
#toast-container > .toast-info::before {
  background: linear-gradient(180deg, #8b5cf6, #7c3aed) !important;
}

#toast-container > .toast-info {
  backdrop-filter: blur(10px) !important;
  background-color: rgba(139, 92, 246, 0.20) !important;
  border: 1px solid rgba(139, 92, 246, 0.25) !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4), 0 0 12px rgba(139, 92, 246, 0.15) !important;
}

/* Toast icon styling */
#toast-container > div .toast-message::before {
  position: relative !important;
  z-index: 1 !important;
}

/* Success icon color */
#toast-container > .toast-success {
  color: #10b981 !important;
}

/* Error icon color */
#toast-container > .toast-error {
  color: #ef4444 !important;
}

/* Warning icon color */
#toast-container > .toast-warning {
  color: #f59e0b !important;
}

/* Info icon color */
#toast-container > .toast-info {
  color: #8b5cf6 !important;
}

/* Toast title styling */
#toast-container > div .toast-title {
  color: #ffffff !important;
  font-weight: 600 !important;
  margin-bottom: 4px !important;
}

/* Toast message styling */
#toast-container > div .toast-message {
  color: #ffffff !important;
}

/* Close button styling */
#toast-container > div .toast-close-button {
  color: #a1a1aa !important;
  opacity: 0.8 !important;
  font-weight: 300 !important;
}

#toast-container > div .toast-close-button:hover {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Progress bar styling */
#toast-container > div .toast-progress {
  background-color: rgba(225, 225, 225, 0.742) !important;
}

/* ==================== End Custom Toastr Styling ==================== */

/* snow effect */
.snowflake {
  color: #fff;
  font-size: 1em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 5px #000;
}

.snowflake,
.snowflake .inner {
  animation-iteration-count: infinite;
  animation-play-state: running
}

@keyframes snowflakes-fall {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(110vh)
  }
}

@keyframes snowflakes-shake {

  0%,
  100% {
    transform: translateX(0)
  }

  50% {
    transform: translateX(80px)
  }
}

.snowflake {
  position: fixed;
  top: -10%;
  z-index: 9999;
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
  pointer-events: none;
  animation-name: snowflakes-shake;
  animation-duration: 3s;
  animation-timing-function: ease-in-out
}

.snowflake .inner {
  animation-duration: 10s;
  animation-name: snowflakes-fall;
  animation-timing-function: linear
}

.snowflake:nth-of-type(0) { left: 4%; animation-delay: 0.3s; animation-duration: 10.2s }
.snowflake:nth-of-type(0) .inner { animation-delay: 1.1s; animation-duration: 6.8s }

.snowflake:nth-of-type(1) { left: 11%; animation-delay: 1.8s; animation-duration: 9.6s }
.snowflake:nth-of-type(1) .inner { animation-delay: 0.6s; animation-duration: 7.5s }

.snowflake:nth-of-type(2) { left: 23%; animation-delay: 3.2s; animation-duration: 11.4s }
.snowflake:nth-of-type(2) .inner { animation-delay: 3.2s; animation-duration: 8.3s }

.snowflake:nth-of-type(3) { left: 31%; animation-delay: 0.8s; animation-duration: 12.1s }
.snowflake:nth-of-type(3) .inner { animation-delay: 2.4s; animation-duration: 9.9s }

.snowflake:nth-of-type(4) { left: 38%; animation-delay: 4.1s; animation-duration: 10.8s }
.snowflake:nth-of-type(4) .inner { animation-delay: 1.9s; animation-duration: 8.2s }

.snowflake:nth-of-type(5) { left: 47%; animation-delay: 2.3s; animation-duration: 9.9s }
.snowflake:nth-of-type(5) .inner { animation-delay: 0.5s; animation-duration: 7.1s }

.snowflake:nth-of-type(6) { left: 54%; animation-delay: 5.2s; animation-duration: 11.7s }
.snowflake:nth-of-type(6) .inner { animation-delay: 3.8s; animation-duration: 8.9s }

.snowflake:nth-of-type(7) { left: 62%; animation-delay: 0.7s; animation-duration: 10.4s }
.snowflake:nth-of-type(7) .inner { animation-delay: 2.5s; animation-duration: 6.5s }

.snowflake:nth-of-type(8) { left: 70%; animation-delay: 2.6s; animation-duration: 12.8s }
.snowflake:nth-of-type(8) .inner { animation-delay: 4.3s; animation-duration: 9.7s }

.snowflake:nth-of-type(9) { left: 78%; animation-delay: 3.7s; animation-duration: 11.1s }
.snowflake:nth-of-type(9) .inner { animation-delay: 1.3s; animation-duration: 7.3s }

.snowflake:nth-of-type(10) { left: 86%; animation-delay: 0.5s; animation-duration: 13.2s }
.snowflake:nth-of-type(10) .inner { animation-delay: 3.5s; animation-duration: 10.4s }

.snowflake:nth-of-type(11) { left: 93%; animation-delay: 4.9s; animation-duration: 9.4s }
.snowflake:nth-of-type(11) .inner { animation-delay: 5.1s; animation-duration: 8.8s }

.snowflake:nth-of-type(12) { left: 8%; animation-delay: 1.2s; animation-duration: 11.6s }
.snowflake:nth-of-type(12) .inner { animation-delay: 4.6s; animation-duration: 6.4s }

.snowflake:nth-of-type(13) { left: 17%; animation-delay: 2.5s; animation-duration: 12.5s }
.snowflake:nth-of-type(13) .inner { animation-delay: 2.7s; animation-duration: 9.2s }

.snowflake:nth-of-type(14) { left: 28%; animation-delay: 3.2s; animation-duration: 10.9s }
.snowflake:nth-of-type(14) .inner { animation-delay: 0.9s; animation-duration: 7.7s }

.snowflake:nth-of-type(15) { left: 36%; animation-delay: 1.8s; animation-duration: 13.8s }
.snowflake:nth-of-type(15) .inner { animation-delay: 5.2s; animation-duration: 9.9s }

.snowflake:nth-of-type(16) { left: 52%; animation-delay: 0.4s; animation-duration: 12.3s }
.snowflake:nth-of-type(16) .inner { animation-delay: 3.9s; animation-duration: 6.9s }

.snowflake:nth-of-type(17) { left: 68%; animation-delay: 2.4s; animation-duration: 11.5s }
.snowflake:nth-of-type(17) .inner { animation-delay: 4.7s; animation-duration: 8.1s }

.snowflake:nth-of-type(18) { left: 76%; animation-delay: 1.6s; animation-duration: 9.7s }
.snowflake:nth-of-type(18) .inner { animation-delay: 0.8s; animation-duration: 7.4s }

.snowflake:nth-of-type(19) { left: 89%; animation-delay: 3.4s; animation-duration: 10.6s }
.snowflake:nth-of-type(19) .inner { animation-delay: 2.3s; animation-duration: 6.2s }

.snowflake:nth-of-type(20) { left: 96%; animation-delay: 0.9s; animation-duration: 11.9s }
.snowflake:nth-of-type(20) .inner { animation-delay: 4.8s; animation-duration: 8.7s }

.snowflake:nth-of-type(21) { left: 6%; animation-delay: 2.7s; animation-duration: 10.3s }
.snowflake:nth-of-type(21) .inner { animation-delay: 1.2s; animation-duration: 7.6s }

.snowflake:nth-of-type(22) { left: 13%; animation-delay: 1.9s; animation-duration: 11.8s }
.snowflake:nth-of-type(22) .inner { animation-delay: 4.1s; animation-duration: 8.4s }

.snowflake:nth-of-type(23) { left: 21%; animation-delay: 3.6s; animation-duration: 9.5s }
.snowflake:nth-of-type(23) .inner { animation-delay: 0.7s; animation-duration: 6.3s }

.snowflake:nth-of-type(24) { left: 33%; animation-delay: 0.6s; animation-duration: 12.9s }
.snowflake:nth-of-type(24) .inner { animation-delay: 2.2s; animation-duration: 9.8s }

.snowflake:nth-of-type(25) { left: 42%; animation-delay: 4.4s; animation-duration: 11.1s }
.snowflake:nth-of-type(25) .inner { animation-delay: 3.9s; animation-duration: 7.9s }

.snowflake:nth-of-type(26) { left: 57%; animation-delay: 1.1s; animation-duration: 13.3s }
.snowflake:nth-of-type(26) .inner { animation-delay: 5.0s; animation-duration: 9.4s }

.snowflake:nth-of-type(27) { left: 64%; animation-delay: 2.9s; animation-duration: 9.8s }
.snowflake:nth-of-type(27) .inner { animation-delay: 1.8s; animation-duration: 6.7s }

.snowflake:nth-of-type(28) { left: 73%; animation-delay: 0.8s; animation-duration: 12.1s }
.snowflake:nth-of-type(28) .inner { animation-delay: 4.4s; animation-duration: 8.6s }

.snowflake:nth-of-type(29) { left: 82%; animation-delay: 3.3s; animation-duration: 10.7s }
.snowflake:nth-of-type(29) .inner { animation-delay: 2.0s; animation-duration: 7.2s }

.snowflake:nth-of-type(30) { left: 91%; animation-delay: 1.5s; animation-duration: 11.4s }
.snowflake:nth-of-type(30) .inner { animation-delay: 5.5s; animation-duration: 8.9s }