:root {
  --q10spin-navy: #001060;
  --q10spin-blue: #2563eb;
  --q10spin-cyan: #12baf2;
  --q10spin-orange: #ff7a00;
}

.q10-single-loading-wrap {
  min-height: clamp(180px, 34vh, 360px);
  display: grid;
  place-items: center;
  padding: 24px;
}

.q10-single-loading {
  width: 100%;
  min-height: clamp(180px, 30vh, 320px);
  display: grid;
  place-items: center;
  align-content: center;
  justify-items: center;
  gap: 14px;
  text-align: center;
}

.q10-single-loading__spinner {
  width: clamp(58px, 6vw, 82px);
  height: clamp(58px, 6vw, 82px);
  border-radius: 999px;
  background:
    conic-gradient(
      from 220deg,
      var(--q10spin-navy) 0deg,
      var(--q10spin-blue) 110deg,
      var(--q10spin-cyan) 220deg,
      var(--q10spin-orange) 300deg,
      var(--q10spin-navy) 360deg
    );
  -webkit-mask: radial-gradient(circle at center, transparent 58%, #000 60%);
  mask: radial-gradient(circle at center, transparent 58%, #000 60%);
  animation: q10SingleRealSpinner 1s linear infinite;
  box-shadow: 0 10px 28px rgba(0,16,96,.14);
}

.q10-single-loading__label {
  color: #475569;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
}

@keyframes q10SingleRealSpinner {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}