/* HTML: <div class="loader"></div> */
.loader {
    height: 15px;
    aspect-ratio: 5;
    display: grid;
    --_g: no-repeat radial-gradient(farthest-side, #000 94%, #0000);
}

.loader:before,
.loader:after {
    content: "";
    grid-area: 1/1;
    background:
        var(--_g) left,
        var(--_g) right;
    background-size: 20% 100%;
    animation: l32 1s infinite;
}

.loader:after {
    background:
        var(--_g) calc(1*100%/3),
        var(--_g) calc(2*100%/3);
    background-size: 20% 100%;
    animation-direction: reverse;
}

@keyframes l32 {

    80%,
    100% {
        transform: rotate(.5turn)
    }
}

.fs-7 {
    font-size: 0.875rem !important;
}

.fs-8 {
    font-size: 0.79rem !important;
}

.fs-9 {
    font-size: 0.71rem !important;
}

.fs-10 {
    font-size: 0.625rem !important;
}

.d-flex {
    display: flex!important
}

.justify-content-center {
    justify-content: center!important
}

.d-none {
    display: none;
}

.text-center {
    text-align: center!important
}

.fw-bold {
    font-weight: 700!important
}