/* Style for initial spinner component placed in index.html based on Material Design Spinner component */

.init-spinner-container {
    position: absolute;
    top: calc(50vh - 50px);
    left: calc(50vw - 50px);
}

.init-spinner {
    animation: init-spinner-linear-rotate 2s linear infinite;
    display: block;
    position: relative;
    height: 100px;
    width: 100px;
}

.init-spinner svg {
    position: absolute;
    transform: rotate(-90deg);
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    transform-origin: center;
    overflow: visible;
}

.init-spinner svg circle {
    animation-name: init-spinner-stroke-rotate-100;
    stroke: #ffcc00;
    stroke-dasharray: 282.743px;
    stroke-width: 10%;
    transition-property: stroke;
    animation-duration: 4000ms;
    animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
    animation-iteration-count: infinite;
    fill: transparent;
    transform-origin: center;
    transition: stroke-dashoffset 225ms linear;
}

@keyframes init-spinner-linear-rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes init-spinner-stroke-rotate-100 {
    0% {
        stroke-dashoffset: 268.606171575px;
        transform: rotate(0);
    }

    12.5% {
        stroke-dashoffset: 56.5486677px;
        transform: rotate(0);
    }

    12.5001% {
        stroke-dashoffset: 56.5486677px;
        transform: rotateX(180deg) rotate(72.5deg);
    }

    25% {
        stroke-dashoffset: 268.606171575px;
        transform: rotateX(180deg) rotate(72.5deg);
    }

    25.0001% {
        stroke-dashoffset: 268.606171575px;
        transform: rotate(270deg);
    }

    37.5% {
        stroke-dashoffset: 56.5486677px;
        transform: rotate(270deg);
    }

    37.5001% {
        stroke-dashoffset: 56.5486677px;
        transform: rotateX(180deg) rotate(161.5deg);
    }

    50% {
        stroke-dashoffset: 268.606171575px;
        transform: rotateX(180deg) rotate(161.5deg);
    }

    50.0001% {
        stroke-dashoffset: 268.606171575px;
        transform: rotate(180deg);
    }

    62.5% {
        stroke-dashoffset: 56.5486677px;
        transform: rotate(180deg);
    }

    62.5001% {
        stroke-dashoffset: 56.5486677px;
        transform: rotateX(180deg) rotate(251.5deg);
    }

    75% {
        stroke-dashoffset: 268.606171575px;
        transform: rotateX(180deg) rotate(251.5deg);
    }

    75.0001% {
        stroke-dashoffset: 268.606171575px;
        transform: rotate(90deg);
    }

    87.5% {
        stroke-dashoffset: 56.5486677px;
        transform: rotate(90deg);
    }

    87.5001% {
        stroke-dashoffset: 56.5486677px;
        transform: rotateX(180deg) rotate(341.5deg);
    }

    100% {
        stroke-dashoffset: 268.606171575px;
        transform: rotateX(180deg) rotate(341.5deg);
    }
}