/* First-paint loader — production front/public/loader.css (48px, three stacked 2px arcs: one rotating, two rotating
   while fading in 0.08s / 0.16s later) in the MedApp primary colour on white. A same-origin file, never an inline
   <style> (CSP and the desktop policy, apps/desktop/scripts/lib/desktop-policy.mjs). React replaces #root's content. */
#medapp-initial-loader {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
}

#medapp-initial-loader .loading {
  position: relative;
  box-sizing: border-box;
  border: 2px solid transparent;
  border-radius: 50%;
  block-size: 48px;
  inline-size: 48px;
}

#medapp-initial-loader .effect-1,
#medapp-initial-loader .effect-2,
#medapp-initial-loader .effect-3 {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid transparent;
  border-radius: 50%;
  block-size: 100%;
  border-inline-start: 2px solid #2563EB;
  inline-size: 100%;
}

#medapp-initial-loader .effect-1 {
  animation: medapp-loader-rotate 0.72s linear infinite;
}

#medapp-initial-loader .effect-2 {
  animation: medapp-loader-rotate-opacity 0.72s linear infinite 0.08s;
}

#medapp-initial-loader .effect-3 {
  animation: medapp-loader-rotate-opacity 0.72s linear infinite 0.16s;
}

@keyframes medapp-loader-rotate {
  0% {
    transform: rotate(0deg);
  }

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

@keyframes medapp-loader-rotate-opacity {
  0% {
    opacity: 0.1;
    transform: rotate(0deg);
  }

  100% {
    opacity: 1;
    transform: rotate(1turn);
  }
}