:root {
  --loader-width: 64px;
  --loader-height: 64px;
}
body,
html {
  height: 100%;
}

.module-loader {
  width: 100%;
  margin-top: 50vh;
  transform: translateY(-50%);
}

.module-loader h3 {
  text-align: center;
  color: #08395B;
  font-family: Verdana;
}

/*
The loaders use CSS custom properties (variables) to control the attributes of the loaders
*/
.spinner {
  box-sizing: border-box;
  margin: 0 auto;
  flex-grow: 0;
  flex-shrink: 0;
}
.spinner.medium {
  --loader-width: 56px;
  --loader-height: 56px;
}
.spinner.small {
  --loader-width: 36px;
  --loader-height: 36px;
  --line-width: 2px;
}
.spinner:before, .spinner:after {
  box-sizing: border-box;
  flex-grow: 0;
  flex-shrink: 0;
}
.spinner.quantum-spinner {
  --primary-circle-offset:calc(((var(--loader-width,100px) * 0.2) / 2) - var(--line-width,3px));
  --secondary-circle-offset:calc(((var(--loader-width,100px) * 0.4) / 2) - var(--line-width,3px));
  /*- (var(--line-width,4px) * 2)*/
  position: relative;
  width: var(--loader-width, 100px);
  height: var(--loader-height, 100px);
  transform-origin: center center;
  border-radius: 50%;
  border: var(--line-width, 3px) solid rgba(0, 0, 0, 0);
  border-top-color: var(--loader-color-primary,#08395B);
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  animation: momentum var(--animation-duration, 3s) linear infinite;
}

/*
In order to get optimal results, please only change the
variables above and don't change anything in the actual loader code
*/
@keyframes momentum {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
.quantum-spinner:before {
  content: "";
  position: absolute;
  transform-origin: center center;
  top: var(--primary-circle-offset, 10px);
  left: var(--primary-circle-offset, 10px);
  width: calc(var(--loader-width,100px) * 0.8);
  height: calc(var(--loader-height,100px) * 0.8);
  border-radius: 50%;
  border: var(--line-width, 3px) solid rgba(0, 0, 0, 0);
  border-top-color: var(--loader-color-primary,#08395B);
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  opacity: 0.7;
  filter: hue-rotate(3eg);
  animation: momentum calc(var(--animation-duration, 3s) * 2) linear infinite;
}
.quantum-spinner:after {
  content: "";
  position: absolute;
  top: var(--secondary-circle-offset, 20px);
  left: var(--secondary-circle-offset, 20px);
  width: calc(var(--loader-width,100px) * 0.6);
  height: calc(var(--loader-height,100px) * 0.6);
  border-radius: 50%;
  transform-origin: center center;
  border: var(--line-width, 3px) solid rgba(0, 0, 0, 0);
  border-top-color: var(--loader-color-primary,#08395B);
  opacity: 0.3;
  filter: hue-rotate(6eg);
  animation: momentum var(--animation-duration, 3s) linear infinite;
}