:root {
  --loader-primary-color: #00880d;
  --loader-primary-bg: var(--color-bg);
  --loader-size: 84px;
  --loader-thickness: 6px;
  background-color: var(--color-bg);
}

.root-loader {
  visibility: hidden;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--loader-size);
  height: var(--loader-size);
  animation-play-state: paused;
}

.root-loader * {
  animation-play-state: paused !important;
}

.animate-loader,
.animate-loader * {
  animation-play-state: running !important;
}

.spinner {
  width: 100px;
  height: 100px;
  animation: spin 1s linear infinite; /* Add spinning animation */
}

.background-circle {
  fill: none;
  stroke: var(--loader-primary-color); /* Stroke color */
  stroke-width: var(--loader-thickness);
}

.progress-circle {
  fill: none;
  stroke: var(--loader-primary-bg); /* Gradient for progress */
  stroke-width: var(--loader-thickness);
  stroke-dasharray: 283;
  stroke-dashoffset: 141.5;
  animation: progress 2s linear infinite; /* Add progress animation */
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes progress {
  0% {
    stroke-dashoffset: 283;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

.icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
}

#all-canvas > canvas {
  display: none;
  position: fixed;
  z-index: 9;
  top: 0;
  width: 100%;
}