:root {
  --primaryColor: #36b54d;
  --secondaryColor: #125736;
}

/* Loading Screen */
#loading {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 0.5rem;
}

.custom-loader {
  width: 75px;
  height: 75px;
  display: grid;
  border-radius: 50%;
  -webkit-mask: radial-gradient(farthest-side, #0000 40%, #000 41%);
  background: linear-gradient(0deg, #36b54d80 50%, #36b54dff 0) center/8px 100%,
    linear-gradient(90deg, #36b54d40 50%, #36b54dbf 0) center/100% 8px;
  background-repeat: no-repeat;
  animation: s3 0.5s infinite steps(12);
}
.custom-loader::before,
.custom-loader::after {
  content: "";
  grid-area: 1/1;
  border-radius: 50%;
  background: inherit;
  opacity: 0.915;
  transform: rotate(30deg);
}
.custom-loader::after {
  opacity: 0.83;
  transform: rotate(60deg);
}

@keyframes s3 {
  100% {
    transform: rotate(1turn);
  }
}