/* Shared by the startup screen, application overlay, and DevExtreme indicators. */
#nb-global-spinner,
body nb-spinner {
  background: rgba(255, 255, 255, 0.9);
}

#nb-global-spinner {
  position: fixed;
  inset: 0;
  z-index: 1003;
  display: flex;
  align-items: center;
  justify-content: center;
}

#nb-global-spinner > div:not(:first-child) {
  display: none;
}

body nb-spinner .message {
  /* Keep the loading message available to assistive technology. */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

#nb-global-spinner > div:first-child,
body nb-spinner .spin-circle {
  width: 150px !important;
  height: 150px !important;
  flex-shrink: 0;
}

body .dx-loadindicator-icon {
  --ignite-ring-shadow: 1px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

body .dx-loadindicator-icon > .dx-loadindicator-segment {
  display: none;
}

#nb-global-spinner > div:first-child,
body nb-spinner .spin-circle,
body .dx-loadindicator-icon {
  position: relative;
  border: 0 !important;
  border-radius: 50%;
  box-shadow: 0 var(--ignite-ring-shadow, 3px) var(--ignite-ring-shadow, 3px) 0 rgb(217, 83, 11);
  animation: ignite-loading-spin 2s linear infinite !important;
}

#nb-global-spinner > div:first-child::before,
#nb-global-spinner > div:first-child::after,
body nb-spinner .spin-circle::before,
body nb-spinner .spin-circle::after,
body .dx-loadindicator-icon::before,
body .dx-loadindicator-icon::after {
  content: '';
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  box-shadow: 0 var(--ignite-ring-shadow, 3px) var(--ignite-ring-shadow, 3px) 0 rgb(216, 134, 12);
  animation: ignite-loading-spin 3s linear infinite;
}

#nb-global-spinner > div:first-child::after,
body nb-spinner .spin-circle::after,
body .dx-loadindicator-icon::after {
  inset: 10%;
  box-shadow: 0 var(--ignite-ring-shadow, 3px) var(--ignite-ring-shadow, 3px) 0 rgb(255, 61, 61);
  animation-duration: 1.5s;
}

@keyframes ignite-loading-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  #nb-global-spinner > div:first-child,
  #nb-global-spinner > div:first-child::before,
  #nb-global-spinner > div:first-child::after,
  body nb-spinner .spin-circle,
  body nb-spinner .spin-circle::before,
  body nb-spinner .spin-circle::after,
  body .dx-loadindicator-icon,
  body .dx-loadindicator-icon::before,
  body .dx-loadindicator-icon::after {
    animation: none !important;
  }
}