/**
 * The default transition, used when the element is visible
 * since the beginning of the animation
 * ---
 * @access private
 * @type transition
 * @group transition
 */
/**
 * The enter transition, used when the element is not visible on the screen
 * since the beginning of the animation and become visible
 * ---
 * @access private
 * @type transition
 * @group transition
 */
/**
 * The leave transition, used when the element is visible on the screen
 * since the beginning of the animation and is removed
 * ---
 * @access private
 * @type transition
 * @group transition
 */
/**
 * The stand transition, used when the element is going to accelerate,
 * like movements from bottom to top
 * ---
 * @access private
 * @type transition
 * @group transition
 */
/**
 * The out transition, used when the element is going to deaccelerate,
 * like movements from top to bottom
 * ---
 * @access private
 * @type transition
 * @group transition
 */
.md-spinner {
  width: 1em;
  height: 1em;
  display: inline-flex;
}
.md-spinner > svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-90deg);
  transform-origin: center;
}
.md-spinner > svg > circle {
  fill: none;
  stroke: currentcolor;
  stroke-dasharray: 138.2304px;
  transform-origin: center;
  transition: stroke-dashoffset 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.md-spinner.md-adjust-baseline {
  position: relative;
  top: 0.13em;
}
.md-spinner.md-primary > svg > circle {
  stroke: var(--md-primary);
}
.md-spinner.md-accent > svg > circle {
  stroke: var(--md-secondary);
}
.md-spinner.md-indeterminate {
  animation: md-spinner-rotate 2s linear infinite;
}
.md-spinner.md-indeterminate.md-spinner-enter > svg, .md-spinner.md-indeterminate.md-spinner-leave-active > svg {
  opacity: 0;
  transform: scale(0.1);
  transform-origin: center;
  transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-property: opacity, transform;
}
.md-spinner.md-indeterminate.md-spinner-enter.md-spinner-enter-active > svg {
  opacity: 1;
  transform: scale(1);
}
.md-spinner.md-indeterminate > svg > circle {
  animation: 4s infinite cubic-bezier(0.25, 0.8, 0.25, 1);
  animation-name: md-spinner-stroke-rotate;
}

@keyframes md-spinner-rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes md-spinner-stroke-rotate {
  0% {
    stroke-dashoffset: 131.31888px;
    transform: rotate(0);
  }
  12.5% {
    stroke-dashoffset: 27.64608px;
    transform: rotate(0);
  }
  12.51% {
    stroke-dashoffset: 27.64608px;
    transform: rotateX(180deg) rotate(72.5deg);
  }
  25% {
    stroke-dashoffset: 131.31888px;
    transform: rotateX(180deg) rotate(72.5deg);
  }
  25.1% {
    stroke-dashoffset: 131.31888px;
    transform: rotate(270deg);
  }
  37.5% {
    stroke-dashoffset: 27.64608px;
    transform: rotate(270deg);
  }
  37.51% {
    stroke-dashoffset: 27.64608px;
    transform: rotateX(180deg) rotate(161.5deg);
  }
  50% {
    stroke-dashoffset: 131.31888px;
    transform: rotateX(180deg) rotate(161.5deg);
  }
  50.01% {
    stroke-dashoffset: 131.31888px;
    transform: rotate(180deg);
  }
  62.5% {
    stroke-dashoffset: 27.64608px;
    transform: rotate(180deg);
  }
  62.51% {
    stroke-dashoffset: 27.64608px;
    transform: rotateX(180deg) rotate(251.5deg);
  }
  75% {
    stroke-dashoffset: 131.31888px;
    transform: rotateX(180deg) rotate(251.5deg);
  }
  75.01% {
    stroke-dashoffset: 131.31888px;
    transform: rotate(90deg);
  }
  87.5% {
    stroke-dashoffset: 27.64608px;
    transform: rotate(90deg);
  }
  87.51% {
    stroke-dashoffset: 27.64608px;
    transform: rotateX(180deg) rotate(341.5deg);
  }
  100% {
    stroke-dashoffset: 131.31888px;
    transform: rotateX(180deg) rotate(341.5deg);
  }
}