/* HTML: <div class="loader"></div> */
.loader {
    width: 40px;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(farthest-side, #ED303C 94%, #0000),
        radial-gradient(farthest-side, #3B8183 94%, #0000),
        radial-gradient(farthest-side, #FAD089 94%, #0000),
        radial-gradient(farthest-side, #FF9C5B 94%, #0000),
        #ED303C;
    background-size: 105% 105%;
    background-repeat: no-repeat;
    animation: l5 2s infinite;
}

@keyframes l5 {
    0% {
        background-position: 50% -50px, -40px 50%, 50% calc(100% + 50px), calc(100% + 50px) 50%
    }

    20%,
    25% {
        background-position: 50% -50px, -50px 50%, 50% calc(100% + 50px), 50% 50%
    }

    45%,
    50% {
        background-position: 50% -50px, -50px 50%, 50% 50%, 50% 50%
    }

    75%,
    75% {
        background-position: 50% -50px, 50% 50%, 50% 50%, 50% 50%
    }

    95%,
    100% {
        background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%
    }
}

.zoomIn {
    animation: zoomIn 0.35s ease-out forwards;
    transform-origin: top left;
}

.fadeIn {
    animation: fadeIn 0.25s forwards;
    opacity: 0;
}

.fadeIn:nth-child(1) {
    animation-delay: 0.5s;
}

.fadeIn:nth-child(2) {
    animation-delay: 0.65s;
}

.fadeIn:nth-child(3) {
    animation-delay: 0.80s;
}

.fadeIn:nth-child(4) {
    animation-delay: 0.95s;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


@keyframes zoomIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }

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

/* HTML: <div class="loader"></div> */
/* HTML: <div class="loader"></div> */
.start_question_loader {
    width: 65px;
    aspect-ratio: 1;
    position: relative;
}

.start_question_loader:before,
.start_question_loader:after {
    content: "";
    position: absolute;
    border-radius: 50px;
    box-shadow: 0 0 0 3px inset lightgreen;
    animation: l4 2.5s infinite;
}

.start_question_loader:after {
    animation-delay: -1.25s;
}

@keyframes l4 {
    0% {
        inset: 0 35px 35px 0;
    }

    12.5% {
        inset: 0 35px 0 0;
    }

    25% {
        inset: 35px 35px 0 0;
    }

    37.5% {
        inset: 35px 0 0 0;
    }

    50% {
        inset: 35px 0 0 35px;
    }

    62.5% {
        inset: 0 0 0 35px;
    }

    75% {
        inset: 0 0 35px 35px;
    }

    87.5% {
        inset: 0 0 35px 0;
    }

    100% {
        inset: 0 35px 35px 0;
    }
}

@keyframes background-ripple {
    0% {
        width: 0px;
        height: 0px;
        opacity: 0.4;
    }

    50% {
        width: 100%;
        height: 100%;
        opacity: 0.2;
    }

    100% {
        width: 150%;
        height: 150%;
        opacity: 0;
    }
}

.animate-background-ripple {
    animation: background-ripple 0.6s ease-out forwards;
}

.finish_questionpack_loader {
    height: 4px;
    width: 130px;
    --c: no-repeat linear-gradient(to right, #42a5f5, #2196f3, #1e88e5);
    background: var(--c),var(--c),#d7b8fc;
    background-size: 60% 100%;
    animation: l16 3s infinite;
  }
  @keyframes l16 {
    0%   {background-position:-150% 0,-150% 0}
    66%  {background-position: 250% 0,-150% 0}
    100% {background-position: 250% 0, 250% 0}
  }