@font-face {
  font-family: 'exo2';
  src: url("../fonts/exo2.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
body, html, input, button, select, textarea, .ts-glass-card, .btn, .ts-pill-btn, .ts-chip, h1, h2, h3, h4, h5, h6, .navbar {
  font-family: 'exo2', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.title-element {
  margin-top: 50px;
  margin-bottom: 50px;
  text-align: center;
}
.input-wrapper-element {
  max-width: 390px; 
  margin-bottom: 20px;
}
#snackbar {
  visibility: hidden;
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translate(-50%, 20px) scale(0.96);
  min-width: 280px;
  max-width: 90vw;
  width: max-content;
  padding: 14px 26px;
  background: rgba(13, 20, 38, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #f8fafc;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-align: center;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8),
              0 0 20px rgba(56, 189, 248, 0.25),
              0 0 30px rgba(236, 72, 153, 0.2);
  z-index: 100000;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

#snackbar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #38bdf8 0%, #818cf8 33%, #ec4899 66%, #ef4444 100%);
}

#snackbar.show {
  visibility: visible !important;
  pointer-events: auto;
  animation: toast_cycle 4.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes toast_cycle {
  0% {
    opacity: 0;
    transform: translate(-50%, 20px) scale(0.96);
  }
  6% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
  92% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 10px) scale(0.98);
  }
}
.disable-dbl-tap-zoom {
  touch-action: manipulation;
}
      .danger_modal {
          display: none; /* Hidden by default */
          position: fixed; /* Stay in place */
          z-index: 1; /* Sit on top */
          padding-top: 100px; /* Location of the box */
          left: 0;
          top: 0;
          width: 100%; /* Full width */
          height: 100%; /* Full height */
          overflow: auto; /* Enable scroll if needed */
          background-color: rgb(0,0,0); /* Fallback color */
          background-color: rgba(100,0,0,0.7); /* Black w/ opacity */
      }

      .success_modal {
          display: none; /* Hidden by default */
          position: fixed; /* Stay in place */
          z-index: 1; /* Sit on top */
          padding-top: 100px; /* Location of the box */
          left: 0;
          top: 0;
          width: 100%; /* Full width */
          height: 100%; /* Full height */
          overflow: auto; /* Enable scroll if needed */
          background-color: rgb(0,0,0); /* Fallback color */
          background-color: rgba(0,100,0,0.7); /* Black w/ opacity */
      }

      .exists_modal {
          display: none; /* Hidden by default */
          position: fixed; /* Stay in place */
          z-index: 1; /* Sit on top */
          padding-top: 100px; /* Location of the box */
          left: 0;
          top: 0;
          width: 100%; /* Full width */
          height: 100%; /* Full height */
          overflow: auto; /* Enable scroll if needed */
          background-color: rgb(0,0,0); /* Fallback color */
          background-color: rgba(100,100,0,0.7); /* Black w/ opacity */
      }

      /* Modal Content */
      .generic_modal-content {
          background-color: #fefefe;
          margin: auto;
          padding: 20px;
          border: 1px solid #888;
          width: 25%;
      }

      /* The Close Button */
      .generic_close {
          color: #aaaaaa;
          float: right;
          font-size: 28px;
          font-weight: bold;
      }

      .generic_close:hover,
      .generic_close:focus {
          color: #000;
          text-decoration: none;
          cursor: pointer;
      }

/* ANIMATIONS */

/* Simple CSS3 Fade-in-down Animation */
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

/* Simple CSS3 Fade-in Animation */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fadeIn {
  opacity:0;
  -webkit-animation:fadeIn ease-in 1;
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}

.fadeIn.first {
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.fadeIn.second {
  -webkit-animation-delay: 0.6s;
  -moz-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.fadeIn.third {
  -webkit-animation-delay: 0.8s;
  -moz-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

.fadeIn.fourth {
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}

/* Simple CSS3 Fade-in Animation */
.underlineHover:after {
  display: block;
  left: 0;
  bottom: -10px;
  width: 0;
  height: 2px;
  background-color: #56dabe;
  content: "";
  transition: width 0.2s;
}

.underlineHover:hover {
  color: #0d0d0d;
}

.underlineHover:hover:after{
  width: 100%;
}

/* Global Mobile Viewport & Input Focus Zoom Prevention */
@media screen and (max-width: 1024px) {
  input,
  select,
  textarea,
  .form-control,
  .search-field,
  .ts-input {
    font-size: 16px !important; /* Enforces iOS Safari 16px threshold to eliminate auto-zoom on focus */
  }
}

html {
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  max-width: 100%;
  overflow-x: hidden;
  margin: 0;
  -webkit-overflow-scrolling: touch;
}

/* On mobile screens, disable background-attachment: fixed to allow 60fps/120fps GPU-accelerated scrolling without CPU repaints */
@media screen and (max-width: 768px) {
  body {
    background-attachment: scroll !important;
  }
}