#mainLoading.hg-loading-ready {
  --hg-loading-primary: var(--color-primary, #1A56DB);
  --hg-loading-bg: #ffffff;
  background: var(--hg-loading-bg);
}
#mainLoading.hg-loading-ready .hg-loading-text {
  position: absolute;
  left: 50%;
  top: calc(50% + 78px);
  transform: translateX(-50%);
  max-width: min(80vw, 420px);
  color: #64748b;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#mainLoading.hg-loading-ring .ddr,
#mainLoading.hg-loading-dots .ddr,
#mainLoading.hg-loading-bar .ddr,
#mainLoading.hg-loading-image .ddr {
  display: none;
}
#mainLoading.hg-loading-bars .ddr {
  background-color: var(--hg-loading-primary);
}
#mainLoading.hg-loading-ring::after {
  content: "";
  width: 64px;
  height: 64px;
  border: 5px solid rgba(26, 86, 219, 0.16);
  border-top-color: var(--hg-loading-primary);
  border-radius: 50%;
  animation: hgLoadingSpin 0.86s linear infinite;
}
#mainLoading.hg-loading-dots::after {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--hg-loading-primary);
  box-shadow: -28px 0 0 rgba(26, 86, 219, 0.38), 28px 0 0 rgba(26, 86, 219, 0.38);
  animation: hgLoadingDots 0.95s ease-in-out infinite;
}
#mainLoading.hg-loading-bar::before {
  content: "";
  width: min(280px, 68vw);
  height: 8px;
  border-radius: 999px;
  background: rgba(26, 86, 219, 0.12);
}
#mainLoading.hg-loading-bar::after {
  content: "";
  position: absolute;
  width: 72px;
  height: 8px;
  border-radius: 999px;
  background: var(--hg-loading-primary);
  animation: hgLoadingBar 1.2s ease-in-out infinite;
}
#mainLoading.hg-loading-image::after {
  content: "";
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background-image: var(--hg-loading-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  animation: hgLoadingImage 1.25s ease-in-out infinite;
}
@keyframes hgLoadingSpin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes hgLoadingDots {
  0%, 100% {
    transform: scale(0.78);
    box-shadow: -28px 0 0 rgba(26, 86, 219, 0.38), 28px 0 0 rgba(26, 86, 219, 0.38);
  }
  50% {
    transform: scale(1);
    box-shadow: -28px 0 0 var(--hg-loading-primary), 28px 0 0 var(--hg-loading-primary);
  }
}
@keyframes hgLoadingBar {
  0% {
    transform: translateX(-104px);
  }
  50% {
    transform: translateX(104px);
  }
  100% {
    transform: translateX(-104px);
  }
}
@keyframes hgLoadingImage {
  0%, 100% {
    transform: scale(0.96);
    opacity: 0.72;
  }
  50% {
    transform: scale(1.04);
    opacity: 1;
  }
}