/* Scale & rotate pulse spinner */
.spinner-scale-rotate {
    width: 33.6px;
    height: 33.6px;
    animation: scale-rotate 2s infinite linear;
    background-color: #325d88;
    border-radius: 50%;
}

@keyframes scale-rotate {
    0% {
        transform: scale(0) rotate(-45deg) translateY(0);
    }

    50% {
        transform: scale(1.25) rotate(960deg) translateY(100%);
    }

    100% {
        transform: scale(0) rotate(2000deg) translateY(0);
    }
}

/* Multi-div bouncing dots spinner */
.spinner-multi-div {
    display: flex;
    gap: 8px;
}

    .spinner-multi-div > div {
        width: 8px;
        height: 8px;
        background-color: #325d88;
        border-radius: 50%;
        animation: multi-bounce 1.4s infinite ease-in-out both;
    }

        .spinner-multi-div > div:nth-child(1) {
            animation-delay: -0.32s;
        }

        .spinner-multi-div > div:nth-child(2) {
            animation-delay: -0.16s;
        }

@keyframes multi-bounce {
    0%, 80%, 100% {
        transform: scale(0);
    }

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

/* Skewing spinner */
.spinner-skew {
    width: 56px;
    height: 56px;
    animation: skew-spin 2s infinite ease;
    border-radius: 50%;
    background-color: #325d88;
}

@keyframes skew-spin {
    10% {
        transform: skewX(60deg);
    }

    20% {
        transform: skewX(-60deg);
    }

    30% {
        transform: skewX(0deg);
    }

    40% {
        transform: skewY(60deg);
    }

    50% {
        transform: skewY(-60deg);
    }

    60% {
        transform: skewY(0);
    }
}

/* 3D cube spinner */
.spinner-3d {
    width: 44.8px;
    height: 44.8px;
    animation: spinner-3d-spin 2s infinite ease;
    transform-style: preserve-3d;
}

    .spinner-3d > div {
        background-color: rgba(50,93,136,0.2);
        height: 100%;
        position: absolute;
        width: 100%;
        border: 2.2px solid #325d88;
    }

        .spinner-3d > div:nth-of-type(1) {
            transform: translateZ(-22.4px) rotateY(180deg);
        }

        .spinner-3d > div:nth-of-type(2) {
            transform: rotateY(-270deg) translateX(50%);
            transform-origin: top right;
        }

        .spinner-3d > div:nth-of-type(3) {
            transform: rotateY(270deg) translateX(-50%);
            transform-origin: center left;
        }

        .spinner-3d > div:nth-of-type(4) {
            transform: rotateX(90deg) translateY(-50%);
            transform-origin: top center;
        }

        .spinner-3d > div:nth-of-type(5) {
            transform: rotateX(-90deg) translateY(50%);
            transform-origin: bottom center;
        }

        .spinner-3d > div:nth-of-type(6) {
            transform: translateZ(22.4px);
        }

@keyframes spinner-3d-spin {
    0% {
        transform: rotate(45deg) rotateX(-25deg) rotateY(25deg);
    }

    50% {
        transform: rotate(45deg) rotateX(-385deg) rotateY(25deg);
    }

    100% {
        transform: rotate(45deg) rotateX(-385deg) rotateY(385deg);
    }
}

/* Concentric rings spinner */
.spinner-concentric {
    width: 56px;
    height: 56px;
    display: grid;
    border: 4.5px solid transparent;
    border-radius: 50%;
    border-right-color: #325d88;
    animation: spinner-a4dj62 1s infinite linear;
}

    .spinner-concentric::before,
    .spinner-concentric::after {
        content: "";
        grid-area: 1/1;
        margin: 2.2px;
        border: inherit;
        border-radius: 50%;
        animation: spinner-a4dj62 2s infinite;
    }

    .spinner-concentric::after {
        margin: 8.9px;
        animation-duration: 3s;
    }

@keyframes spinner-a4dj62 {
    100% {
        transform: rotate(1turn);
    }
}

.spinner-scale-rotate {
    width: 33.6px;
    height: 33.6px;
    animation: scale-rotate 2s infinite linear;
    background-color: #325d88;
    border-radius: 50%;
}

@keyframes scale-rotate {
    0% {
        transform: scale(0) rotate(-45deg) translateY(0);
    }

    50% {
        transform: scale(1.25) rotate(960deg) translateY(100%);
    }

    100% {
        transform: scale(0) rotate(2000deg) translateY(0);
    }
}

.spinner-multi-div {
    display: flex;
    gap: 8px;
}

    .spinner-multi-div > div {
        width: 8px;
        height: 8px;
        background-color: #325d88;
        border-radius: 50%;
        animation: multi-bounce 1.4s infinite ease-in-out both;
    }

        .spinner-multi-div > div:nth-child(1) {
            animation-delay: -0.32s;
        }

        .spinner-multi-div > div:nth-child(2) {
            animation-delay: -0.16s;
        }

@keyframes multi-bounce {
    0%, 80%, 100% {
        transform: scale(0);
    }

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

.spinner-skew {
    width: 56px;
    height: 56px;
    animation: skew-spin 2s infinite ease;
    border-radius: 50%;
    background-color: #325d88;
}

@keyframes skew-spin {
    10% {
        transform: skewX(60deg);
    }

    20% {
        transform: skewX(-60deg);
    }

    30% {
        transform: skewX(0deg);
    }

    40% {
        transform: skewY(60deg);
    }

    50% {
        transform: skewY(-60deg);
    }

    60% {
        transform: skewY(0);
    }
}

.spinner-3d {
    width: 44.8px;
    height: 44.8px;
    animation: spinner-3d-spin 2s infinite ease;
    transform-style: preserve-3d;
    position: relative;
}

    .spinner-3d > div {
        background-color: rgba(50,93,136,0.2);
        height: 100%;
        position: absolute;
        width: 100%;
        border: 2.2px solid #325d88;
    }

        .spinner-3d > div:nth-of-type(1) {
            transform: translateZ(-22.4px) rotateY(180deg);
        }

        .spinner-3d > div:nth-of-type(2) {
            transform: rotateY(-270deg) translateX(50%);
            transform-origin: top right;
        }

        .spinner-3d > div:nth-of-type(3) {
            transform: rotateY(270deg) translateX(-50%);
            transform-origin: center left;
        }

        .spinner-3d > div:nth-of-type(4) {
            transform: rotateX(90deg) translateY(-50%);
            transform-origin: top center;
        }

        .spinner-3d > div:nth-of-type(5) {
            transform: rotateX(-90deg) translateY(50%);
            transform-origin: bottom center;
        }

        .spinner-3d > div:nth-of-type(6) {
            transform: translateZ(22.4px);
        }

@keyframes spinner-3d-spin {
    0% {
        transform: rotate(45deg) rotateX(-25deg) rotateY(25deg);
    }

    50% {
        transform: rotate(45deg) rotateX(-385deg) rotateY(25deg);
    }

    100% {
        transform: rotate(45deg) rotateX(-385deg) rotateY(385deg);
    }
}

.spinner {
    width: 56px;
    height: 56px;
    border: 11.2px #325d88 double;
    border-left-style: solid;
    border-radius: 50%;
    animation: spinner-aib1d7 0.75s infinite linear;
}

@keyframes spinner-aib1d7 {
    to {
        transform: rotate(360deg);
    }
}

.spinner-conic {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    padding: 1.1px;
    background: conic-gradient(#0000 10%,#325d88) content-box;
    -webkit-mask: repeating-conic-gradient(#0000 0deg,#000 1deg 20deg,#0000 21deg 36deg), radial-gradient(farthest-side,#0000 calc(100% - 9px),#000 calc(100% - 9px));
    -webkit-mask-composite: destination-in;
    mask-composite: intersect;
    animation: spinner-d55elj 1s infinite steps(10);
}

@keyframes spinner-d55elj {
    to {
        transform: rotate(1turn);
    }
}

.spinner-orbit {
    --d: 24.6px;
    width: 4.5px;
    height: 4.5px;
    border-radius: 50%;
    color: #325d88;
    box-shadow: calc(1*var(--d)) calc(0*var(--d)) 0 0, calc(0.707*var(--d)) calc(0.707*var(--d)) 0 1.1px, calc(0*var(--d)) calc(1*var(--d)) 0 2.2px, calc(-0.707*var(--d)) calc(0.707*var(--d)) 0 3.4px, calc(-1*var(--d)) calc(0*var(--d)) 0 4.5px, calc(-0.707*var(--d)) calc(-0.707*var(--d))0 5.6px, calc(0*var(--d)) calc(-1*var(--d)) 0 6.7px;
    animation: spinner-a90wxe 1s infinite steps(8);
}

@keyframes spinner-a90wxe {
    100% {
        transform: rotate(1turn);
    }
}

.spinner-radiate {
    position: relative;
    width: 9px;
    height: 9px;
}
.spinner-radiate div {
    position: absolute;
    width: 50%;
    height: 150%;
    background: #325d88;
    transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1%));
    animation: spinner-fzua35 1s calc(var(--delay) * 1s) infinite ease;
}
.spinner-radiate div:nth-child(1) { --delay: 0.1; --rotation: 36; --translation: 150; }
.spinner-radiate div:nth-child(2) { --delay: 0.2; --rotation: 72; --translation: 150; }
.spinner-radiate div:nth-child(3) { --delay: 0.3; --rotation: 108; --translation: 150; }
.spinner-radiate div:nth-child(4) { --delay: 0.4; --rotation: 144; --translation: 150; }
.spinner-radiate div:nth-child(5) { --delay: 0.5; --rotation: 180; --translation: 150; }
.spinner-radiate div:nth-child(6) { --delay: 0.6; --rotation: 216; --translation: 150; }
.spinner-radiate div:nth-child(7) { --delay: 0.7; --rotation: 252; --translation: 150; }
.spinner-radiate div:nth-child(8) { --delay: 0.8; --rotation: 288; --translation: 150; }
.spinner-radiate div:nth-child(9) { --delay: 0.9; --rotation: 324; --translation: 150; }
.spinner-radiate div:nth-child(10) { --delay: 1; --rotation: 360; --translation: 150; }
@keyframes spinner-fzua35 {
    0%, 10%, 20%, 30%, 50%, 60%, 70%, 80%, 90%, 100% {
        transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1%));
    }
    50% {
        transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1.5%));
    }
}

.spinner-shadow-pulse {
    position: relative;
    width: 22.4px;
    height: 22.4px;
}

    .spinner-shadow-pulse::before,
    .spinner-shadow-pulse::after {
        content: '';
        width: 100%;
        height: 100%;
        display: block;
        animation: spinner-b4c8mmmd 0.5s backwards, spinner-49opz7md 1.25s 0.5s infinite ease;
        border: 5.6px solid #325d88;
        border-radius: 50%;
        box-shadow: 0 -33.6px 0 -5.6px #325d88;
        position: absolute;
    }

    .spinner-shadow-pulse::after {
        animation-delay: 0s, 1.25s;
    }

@keyframes spinner-b4c8mmmd {
    from {
        box-shadow: 0 0 0 -5.6px #325d88;
    }
}

@keyframes spinner-49opz7md {
    to {
        transform: rotate(360deg);
    }
}

.spinner-dual-orbit {
    position: relative;
    width: 56px;
    height: 56px;
}

    .spinner-dual-orbit > div {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 13.4px solid rgba(50, 93, 136, 0.1);
        position: absolute;
        top: 0;
        left: 0;
        animation: spinner-g7vlvwmd 0.65s linear infinite;
        z-index: 0;
    }

        .spinner-dual-orbit > div::before {
            content: '';
            height: 13.4px;
            width: 13.4px;
            border-radius: 50%;
            background: #325d88;
            position: absolute;
            top: 50%;
            animation: spinner-h1vps1md 1.3s infinite reverse steps(1);
            transform: translate(calc(2 * var(--translate-2)), calc(var(--translate) * 1%));
            z-index: 1;
        }

        .spinner-dual-orbit > div:nth-of-type(1) {
            --translate: -50;
            --translate-2: calc(56px / 8);
        }

            .spinner-dual-orbit > div:nth-of-type(1)::before {
                right: 0;
            }

        .spinner-dual-orbit > div:nth-of-type(2) {
            --translate: 50;
            --translate-2: calc(-56px / 8);
            animation-delay: 0.65s;
            animation-direction: reverse;
            transform: translate(21.3px, 0);
        }

            .spinner-dual-orbit > div:nth-of-type(2)::before {
                left: 0;
                transform: translate(calc(-56px / 4), -50%);
                animation-direction: normal;
            }

@keyframes spinner-h1vps1md {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

@keyframes spinner-g7vlvwmd {
    from {
        transform: translate(calc(var(--translate) * 1%), 0) translate(calc(var(--translate-2)), 0) rotate(0deg);
    }

    to {
        transform: translate(calc(var(--translate) * 1%), 0) translate(calc(var(--translate-2)), 0) rotate(360deg);
    }
}
.spinner-tri-ring {
    width: 56px;
    height: 56px;
    display: grid;
    border: 4.5px solid #0000;
    border-radius: 50%;
    border-color: #325d88 #0000;
    animation: spinner-e04l1k 1s infinite linear;
}

    .spinner-tri-ring::before,
    .spinner-tri-ring::after {
        content: "";
        grid-area: 1/1;
        margin: 2.2px;
        border: inherit;
        border-radius: 50%;
    }

    .spinner-tri-ring::before {
        border-color: #325d88 #0000;
        animation: inherit;
        animation-duration: 0.5s;
        animation-direction: reverse;
    }

    .spinner-tri-ring::after {
        margin: 8.9px;
    }

@keyframes spinner-e04l1k {
    100% {
        transform: rotate(1turn);
    }
}
.spinner-comet {
    position: relative;
    width: 15.7px;
    height: 15.7px;
}

    .spinner-comet div {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: 0;
        animation: spinner-4t3wzl 1.25s infinite backwards;
    }

        .spinner-comet div:nth-child(1) {
            animation-delay: 0.15s;
            background-color: rgba(50, 93, 136, 0.9);
        }

        .spinner-comet div:nth-child(2) {
            animation-delay: 0.3s;
            background-color: rgba(50, 93, 136, 0.7);
        }

        .spinner-comet div:nth-child(3) {
            animation-delay: 0.45s;
            background-color: rgba(50, 93, 136, 0.5);
        }

        .spinner-comet div:nth-child(4) {
            animation-delay: 0.6s;
            background-color: rgba(50, 93, 136, 0.3);
        }

        .spinner-comet div:nth-child(5) {
            animation-delay: 0.75s;
            background-color: rgba(50, 93, 136, 0.1);
        }

@keyframes spinner-4t3wzl {
    0% {
        transform: rotate(0deg) translateY(-200%);
    }

    60%, 100% {
        transform: rotate(360deg) translateY(-200%);
    }
}