.full-screen-loader-background {
    align-items: center;
    background: radial-gradient(rgba(20, 20, 20, .8), rgba(0, 0, 0, .8));
    display: flex;
    height: 100vh;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 9998;
}

.loader-container {
    align-items: center;
    background-color: #eaf2ff;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 7px 2px inset, rgba(0, 0, 0, 0.16) 0px 7px 14px 0px;
    display: flex;
    height: 120px;
    justify-content: center;
    width: 240px;
}

.loader {
    aspect-ratio: 4;
    --_g1: no-repeat radial-gradient(farthest-side, #eb3237 85%, #0000);
    --_g2: no-repeat radial-gradient(farthest-side, #284b8c 85%, #0000);
    background:
        var(--_g1) left,
        var(--_g2) right;
    background-size: 25% 100%;
    display: grid;
    height: 15px;
    opacity: 1;
    z-index: 9999;
}

.loader:before,
.loader:after {
    animation: loader 1s infinite linear;
    aspect-ratio: 1;
    border-radius: 50%;
    content: "";
    grid-area: 1/1;
    height: inherit;
    margin: auto;
    opacity: 1;
    transform-origin: -100% 50%;
    z-index: 9999;
}

.loader:before {
    --_g3: no-repeat radial-gradient(farthest-side, #284b8c 82%, #0000);
    background:
        var(--_g3);
}

.loader:after {
    animation-delay: -.5s;
    --_g4: no-repeat radial-gradient(farthest-side, #eb3237 82%, #0000);
    background:
        var(--_g4);
    --s: -1;
    transform-origin: 200% 50%;
}

@keyframes loader {

    58%,
    100% {
        transform: rotate(calc(var(--s, 1)*1turn))
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}