@property --loader-arc {
    syntax: "<angle>";
    inherits: true;
    initial-value: 20deg;
}

@property --loader-from {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0deg;
}

.custom-scale {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 999999;
    opacity: 1;
}

@media (min-width: 1200px) {
    .custom-scale {
        left: calc(50% + 8.125rem);
    }
}

.modal .custom-scale {
    left: 50%;
}

body:has(.modal.show :is(.line-scale, .spinner-border):not(.d-none):not([style*="display: none"])) .custom-scale:not(.custom-scale-inline):not(.modal .custom-scale) {
    display: none !important;
}

.custom-scale.custom-scale-inline {
    --loader-color: currentColor;     position: relative;
    left: auto;
    top: auto;
    transform: none;
    vertical-align: middle;
    font-size: 8px; }

.line-scale {
    --loader-color: rgb(var(--bs-primary-rgb));
    --loader-width: .26em;
    display: inline-block;
    width: 3em;
    height: 3em;
    font-size: 24px;     line-height: 0;
}

    .line-scale:not(.custom-scale) {
        position: relative;
    }

    .line-scale > div {
        position: absolute;
        box-sizing: border-box;
        margin: 0;
        background: var(--loader-color);
    }

        .line-scale > div:nth-child(1) {
            left: calc(50% - 1.5em);
            top: calc(50% - 1.5em);
            width: 3em;
            height: 3em;
            border-radius: 50%;
            background: conic-gradient(from var(--loader-from), transparent 0, var(--loader-color) var(--loader-arc), transparent var(--loader-arc));
            -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--loader-width)), #000 calc(100% - var(--loader-width) + .01em));
            mask: radial-gradient(farthest-side, transparent calc(100% - var(--loader-width)), #000 calc(100% - var(--loader-width) + .01em));
            animation: loader-arc 1.4s ease-in-out infinite, loader-step 5.6s step-end infinite, loader-spin 1.6s linear infinite;
        }

            .line-scale > div:nth-child(1)::after {
                content: "";
                position: absolute;
                inset: 0;
                border-radius: 50%;
                background: radial-gradient(circle at 50% calc(var(--loader-width) / 2), var(--loader-color) calc(var(--loader-width) / 2 - .01em), transparent calc(var(--loader-width) / 2));
                transform: rotate(calc(var(--loader-from) + var(--loader-arc)));
            }

        .line-scale > div:nth-child(2) {
            left: calc(50% - .4em);
            top: calc(50% + .1em);
            width: .58em;
            height: .42em;
            border-radius: 50%;
            rotate: -20deg;
            animation: loader-note-hop .7s ease-in-out infinite alternate;
        }

        .line-scale > div:nth-child(3) {
            left: calc(50% + .1em);
            top: calc(50% - .7em);
            width: .09em;
            height: .98em;
            border-radius: .045em;
            animation: loader-note-hop .7s ease-in-out infinite alternate;
        }

        .line-scale > div:nth-child(4) {
            left: calc(50% + .15em);
            top: calc(50% - .7em);
            width: .3em;
            height: .5em;
            background: none;
            border: .09em solid var(--loader-color);
            border-left: 0;
            border-bottom: 0;
            border-radius: 0 .4em 0 0;
            animation: loader-note-hop .7s ease-in-out infinite alternate;
        }

        .line-scale > div:nth-child(5) {
            display: none;
        }

.spinner-border {
    --loader-width: max(8.7cqw, 2px);
    position: relative;
    container-type: size;
    border: 0;
    border-radius: 0;
    vertical-align: middle;
    animation: none;
}

.spinner-border-sm {
    --bs-spinner-width: 1.5em;
    --bs-spinner-height: 1.5em;
}

.btn .spinner-border {
    width: 1.5em;
    height: 1.5em;
    margin-block: -.25em;
}

    .spinner-border::before,
    .spinner-border::after {
        content: "";
        position: absolute;
    }

    .spinner-border::before {
        inset: 0;
        border-radius: 50%;
        background:
            radial-gradient(circle at calc(50% + (50cqw - var(--loader-width) / 2) * sin(var(--loader-from) + var(--loader-arc))) calc(50% - (50cqw - var(--loader-width) / 2) * cos(var(--loader-from) + var(--loader-arc))), currentColor calc(var(--loader-width) / 2 - .5px), transparent calc(var(--loader-width) / 2)),
            conic-gradient(from var(--loader-from), transparent 0, currentColor var(--loader-arc), transparent var(--loader-arc));
        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--loader-width)), #000 calc(100% - var(--loader-width) + .5px));
        mask: radial-gradient(farthest-side, transparent calc(100% - var(--loader-width)), #000 calc(100% - var(--loader-width) + .5px));
        animation: loader-arc 1.4s ease-in-out infinite, loader-step 5.6s step-end infinite, loader-spin 1.6s linear infinite;
    }

        .spinner-border::after {
        --stem: max(3cqw, 1.5px);
        left: 36.7cqw;
        top: 26.7cqw;
        width: 28.3cqw;
        height: 40.6cqw;
        background:
            radial-gradient(closest-side, currentColor 92%, transparent) 0 26.6cqw / 19.3cqw 14cqw no-repeat,
            linear-gradient(currentColor, currentColor) calc(19.3cqw - var(--stem)) 0 / var(--stem) 32.7cqw no-repeat,
            radial-gradient(10cqw 16.7cqw at 0 100%, transparent 68%, currentColor 69% 99%, transparent 100%) calc(19.3cqw - var(--stem)) 0 / 10cqw 16.7cqw no-repeat;
        animation: loader-note-hop-cq .7s ease-in-out infinite alternate;
    }

@keyframes loader-arc {
    0% {
        --loader-arc: 20deg;
        --loader-from: 0deg;
    }

    50% {
        --loader-arc: 270deg;
        --loader-from: 0deg;
    }

    100% {
        --loader-arc: 20deg;
        --loader-from: 270deg;
    }
}

@keyframes loader-step {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(270deg);
    }

    50% {
        transform: rotate(540deg);
    }

    75% {
        transform: rotate(810deg);
    }

    100% {
        transform: rotate(1080deg);
    }
}

@keyframes loader-spin {
    from {
        rotate: 0deg;
    }

    to {
        rotate: 360deg;
    }
}

@keyframes loader-note-hop {
    from {
        transform: translateY(.1em);
    }

    to {
        transform: translateY(-.14em);
    }
}

@keyframes loader-note-hop-cq {
    from {
        transform: translateY(3.3cqw);
    }

    to {
        transform: translateY(-4.7cqw);
    }
}