$spinnerAnimationDuration: 1.4s; $animationCbFunction: cubic-bezier(0.46, 0.03, 0.52, 0.96); $spinnerAnimation: $spinnerAnimationDuration $animationCbFunction infinite; $white: #ffffff; @keyframes indeterminateShortRotation {
    0% {
        transform: rotate(0deg);
    }

    8% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(470deg);
    }
}

@keyframes indeterminateShortCircleTranslateUp {
    8% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-42%);
    }

    56% {
        transform: translateY(-42%);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes indeterminateShortRotationReduceMotion {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes indeterminateShortCircleTransformsTheme {
    8% {
        transform: scale(1);
        fill: @theme indeterminateShortPrimary;
    }

    50% {
        transform: scale(0.6);
        fill: @theme indeterminateShortSecondary;
    }

    56% {
        transform: scale(0.6);
        fill: @theme indeterminateShortSecondary;
    }

    100% {
        transform: scale(1);
        fill: @theme indeterminateShortPrimary;
    }
}

@keyframes indeterminateShortCircleTransformsFill {
    8% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.6);
    }

    56% {
        transform: scale(0.6);
    }

    100% {
        transform: scale(1);
    }
}

#web-shell-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    position: fixed;
    width: 100vw;
    z-index: 20010;
}

#web-shell-spinner .circularSpinnerOuter {
    position: absolute;
    &:nth-of-type(2) {
        transform: rotate(90deg);
    }

    &:nth-of-type(3) {
        transform: rotate(180deg);
    }

    &:nth-of-type(4) {
        transform: rotate(270deg);
    }
}

#web-shell-spinner .circularSpinnerInner {
    will-change: transform;
    animation: indeterminateShortCircleTranslateUp $spinnerAnimation;
    @media screen and (prefers-reduced-motion: reduce) {
        transform: translateY(-42%); animation: 20s $animationCbFunction infinite; }
}

#web-shell-spinner .circularSpinnerCircle {
    position: absolute;
    will-change: transform;
    fill: @theme indeterminateShortPrimary;
    animation: indeterminateShortCircleTransformsTheme $spinnerAnimation;
    animation-iteration-count: infinite;
    @media screen and (prefers-reduced-motion: reduce) {
        animation: none; }

    &.fill {
        animation: indeterminateShortCircleTransformsFill $spinnerAnimation;
        @media screen and (prefers-reduced-motion: reduce) {
            animation: none; }
    }
}

@keyframes IndeterminateShort-indeterminateShortRotation {
0% {
transform: rotate(0deg);
}

8% {
transform: rotate(0deg);
}

100% {
transform: rotate(470deg);
}
}

@keyframes IndeterminateShort-indeterminateShortCircleTranslateUp {
8% {
transform: translateY(0);
}

50% {
transform: translateY(-42%);
}

56% {
transform: translateY(-42%);
}

100% {
transform: translateY(0);
}
}

@keyframes IndeterminateShort-indeterminateShortRotationReduceMotion {
0% {
transform: rotate(0deg);
}

50% {
transform: rotate(180deg);
}

100% {
transform: rotate(360deg);
}
}

@keyframes IndeterminateShort-indeterminateShortCircleTransformsTheme {
8% {
transform: scale(1);
fill: var(--ids-indeterminate-indeterminateShortPrimary-54d1c4);
}

50% {
transform: scale(0.6);
fill: var(--ids-indeterminate-indeterminateShortSecondary-54d1c4);
}

56% {
transform: scale(0.6);
fill: var(--ids-indeterminate-indeterminateShortSecondary-54d1c4);
}

100% {
transform: scale(1);
fill: var(--ids-indeterminate-indeterminateShortPrimary-54d1c4);
}
}

@keyframes IndeterminateShort-indeterminateShortCircleTransformsFill {
8% {
transform: scale(1);
}

50% {
transform: scale(0.6);
}

56% {
transform: scale(0.6);
}

100% {
transform: scale(1);
}
}

#web-shell-spinner.IndeterminateShort-wrapper {
box-sizing: border-box;
vertical-align: middle;
will-change: transform;
animation: IndeterminateShort-indeterminateShortRotation 1.4s linear;
animation-iteration-count: infinite;
}

@media screen and (prefers-reduced-motion: reduce) {

#web-shell-spinner.IndeterminateShort-wrapper {
animation: IndeterminateShort-indeterminateShortRotationReduceMotion 20s linear infinite
}
}

#web-shell-spinner .IndeterminateShort-circularSpinnerOuter {
position: absolute;
width: 128px; 
height: 128px;
}

#web-shell-spinner .IndeterminateShort-circularSpinnerOuter:nth-of-type(2) {
transform: rotate(90deg);
}

#web-shell-spinner .IndeterminateShort-circularSpinnerOuter:nth-of-type(3) {
transform: rotate(180deg);
}

#web-shell-spinner .IndeterminateShort-circularSpinnerOuter:nth-of-type(4) {
transform: rotate(270deg);
}

#web-shell-spinner .IndeterminateShort-circularSpinnerInner {
will-change: transform;
animation: IndeterminateShort-indeterminateShortCircleTranslateUp 1.4s cubic-bezier(0.46, 0.03, 0.52, 0.96) infinite;
width: 128px; 
height: 128px;
}

@media screen and (prefers-reduced-motion: reduce) {

#web-shell-spinner .IndeterminateShort-circularSpinnerInner {
transform: translateY(-42%);
animation: 20s cubic-bezier(0.46, 0.03, 0.52, 0.96) infinite
}
}

#web-shell-spinner .IndeterminateShort-circularSpinnerCircle {
position: absolute;
will-change: transform;
fill: var(--ids-indeterminate-indeterminateShortPrimary-54d1c4);
animation: IndeterminateShort-indeterminateShortCircleTransformsTheme 1.4s cubic-bezier(0.46, 0.03, 0.52, 0.96) infinite;
animation-iteration-count: infinite;
width: 128px; 
height: 128px;
}

@media screen and (prefers-reduced-motion: reduce) {

#web-shell-spinner .IndeterminateShort-circularSpinnerCircle {
animation: none
}
}

#web-shell-spinner .IndeterminateShort-circularSpinnerCircle.IndeterminateShort-fill {
animation: IndeterminateShort-indeterminateShortCircleTransformsFill 1.4s cubic-bezier(0.46, 0.03, 0.52, 0.96) infinite;
}

@media screen and (prefers-reduced-motion: reduce) {

#web-shell-spinner .IndeterminateShort-circularSpinnerCircle.IndeterminateShort-fill {
  animation: none
}
}

:root {
--ids-indeterminate-indeterminateShortPrimary-54d1c4: #0077c5;
--ids-indeterminate-indeterminateShortSecondary-54d1c4: #34bfff;
}

#web-shell-spinner .IndeterminateShort-creditkarma.IndeterminateShort-light {
--ids-indeterminate-indeterminateShortPrimary-54d1c4: #008600;
--ids-indeterminate-indeterminateShortSecondary-54d1c4: #d4d7dc;
}
    
#web-shell-spinner .IndeterminateShort-mint.IndeterminateShort-light {
--ids-indeterminate-indeterminateShortPrimary-54d1c4: #0493a3;
--ids-indeterminate-indeterminateShortSecondary-54d1c4: #07c4d9;
}

#web-shell-spinner .IndeterminateShort-quickbooks.IndeterminateShort-light {
--ids-indeterminate-indeterminateShortPrimary-54d1c4: #2ca01c;
--ids-indeterminate-indeterminateShortSecondary-54d1c4: #2ca01c;
}

#web-shell-spinner .IndeterminateShort-ttfullservice.IndeterminateShort-light,#web-shell-spinner  .IndeterminateShort-turbotax.IndeterminateShort-light {
--ids-indeterminate-indeterminateShortPrimary-54d1c4: #037c8f;
--ids-indeterminate-indeterminateShortSecondary-54d1c4: #037c8f;
}

#web-shell-spinner .IndeterminateShort-proconnect.IndeterminateShort-light {
--ids-indeterminate-indeterminateShortSecondary-54d1c4: #21abf6;
}

#web-shell-spinner .IndeterminateShort-turbo.IndeterminateShort-light {
--ids-indeterminate-indeterminateShortPrimary-54d1c4: #c9007a;
--ids-indeterminate-indeterminateShortSecondary-54d1c4: #c9007a;
}