body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  margin: 0;
  line-height: inherit;
  color: #fff;
}

.text-sm {
  font-size: 0.7rem;
  line-height: 1.25rem;
}

.text-xl {
  font-size: 1.1rem;
  line-height: 1.75rem;
}

.text-lg {
  font-size: 0.8rem;
  line-height: 1.75rem;
}

@media (min-width: 1024px) {
  .lg\:text-xl {
    font-size: 1.1rem;
    line-height: 1.75rem;
  }
}

.line9 {
  width: 1px;
  height: 100%;
  background-color: rgb(252, 213, 53) !important;

}


.absolute.inset-0.flex.h-full.w-full.items-center.justify-center.uppercase.text-white {
  display: flex;
  justify-content: space-around;
  padding-top: 0px;
}

@media only screen and (max-width: 492px) {
  .line9 {
    display: none;
  }
}

.text-gradient {
  background: linear-gradient(#f320d8 0%, #16a6ee 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

@layer base {

  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
}

.blinking {
  -webkit-animation: 1s blink ease infinite;
  -moz-animation: 1s blink ease infinite;
  -ms-animation: 1s blink ease infinite;
  -o-animation: 1s blink ease infinite;
  animation: 1s blink ease infinite;

}

.background-image-section {
  background: url('./background.jpg') 50% center / cover no-repeat rgb(25, 25, 25);
  /* background: #163300; */

}

.border-white {
  border-color: #FCD535;
}

.bg-primary {
  background: #FCD535;
}

.text-primary {
  color: #FCD535;
}

button,
a {
  cursor: pointer;
}

input,
input:focus,
input:active,
input:hover {
  box-shadow: none;
}

.pay-input {
  border: none;
  background: #000;
}

.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

.justify-space-evenly {
  justify-content: space-evenly;
}

.countdown-box {
  background: #2a2a2a;
  width: 95px;
}

.react-tooltip {
  max-width: 250px;
  white-space: normal;
  word-break: break-word;
  z-index: 50;
  /* Make sure it's above other elements */
}

.network-btn {
  background: #050917;
  color: #fff;
  padding: 3px;
}

.clockdiv {
  background-color: #171e20;
  border-radius: 15px;
  padding: 10px;
  margin: 0px 22px;
}

.clockdiv>div span {
  font-size: 24px;
  line-height: 18px;
  color: #e5031d;
}


.progressbar-wrap .progress-item:last-child {
  margin-bottom: 0;
}

.progressbar-wrap .progress-item {
  margin-bottom: 22px;
}

.progressbar-wrap .progress-item .progress_bar {
  position: relative;
}

.progressbar-wrap .progress-item .progress_bar span {
  position: absolute;
  bottom: 2px;
  left: 60%;
  z-index: 2;
}

.progressbar-wrap .progress-item .progress {
  height: 30px;
  border-radius: 5px;
  background: #050F18;
  border: 1px solid #2F1C5A;
  margin: 5px 0 10px;
  position: relative;
}

.progressbar-wrap .progress-item .progress .progress-bar {
  border-radius: 15px;
  background-color: #7132e5;
}

.progressbar-wrap .progress-item .progress .progress-bar {
  border-radius: 5px;
  background: linear-gradient(90deg, #03e597 0%, #7132e5 82%);
  margin: 4px;
}

.progress-bar {
  width: 0;
  background-color: #4ade80;
  /* Example: green */
  height: 20px;
  border-radius: 5px;
  animation: progress 1.5s ease-in-out forwards;
}

@keyframes progress {
  to {
    width: 100%;
    /* Or any target width */
  }
}

.progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  transition: width 0.6s ease;
}

.text-green {
  color: #03E597 !important;
}

.bg-btn {
  background: linear-gradient(90deg, #03e597 0%, #7132e5 82%);
}

.heading-text {
  font-size: 27px;
  font-weight: 500;
  color: #09DB9C;
}

.text-secondary {
  color: #09DB9C;
}

.module-border-wrap {
  background: linear-gradient(#03e597, #7132e5);
  border-radius: 3px;
  padding: 2px;
  position: relative;
}

.module-border-wrap:before {
  content: "";
  z-index: -1;
  background: #111931;
  border-radius: 30px;
  position: absolute;
  inset: 2px;
}

.rounded-xl {
  border-radius: 32px;
}