.tvx-spinner {
/*    display: inline-block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
*/
}

.tvx-spinner {
    --sp-color: #666666;
    --sp-size: 0.5em;
    display: inline-block;
    width: calc(var(--sp-size) * 10);
    height: calc(var(--sp-size) * 10);
}

    .tvx-spinner div {
        animation: tvx-spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        transform-origin: calc(var(--sp-size) * 5) calc(var(--sp-size) * 5);
    }

        .tvx-spinner div:after {
            content: " ";
            display: block;
            position: absolute;
            width: var(--sp-size);
            height: var(--sp-size);
            border-radius: 50%;
            background: #fff;
            margin: calc(var(--sp-size) * -0.5) 0 0 calc(var(--sp-size) * -0.5);
            background-color: var(--sp-color);
        }

        .tvx-spinner div:nth-child(1) {
            animation-delay: -0.036s;
        }

            .tvx-spinner div:nth-child(1):after {
                top: calc(var(--sp-size) * 7.875);
                left: calc(var(--sp-size) * 7.875);
            }

        .tvx-spinner div:nth-child(2) {
            animation-delay: -0.072s;
        }

            .tvx-spinner div:nth-child(2):after {
                top: calc(var(--sp-size) * 8.5);
                left: calc(var(--sp-size) * 7);
            }

        .tvx-spinner div:nth-child(3) {
            animation-delay: -0.108s;
        }

            .tvx-spinner div:nth-child(3):after {
                top: calc(var(--sp-size) * 8.875);
                left: calc(var(--sp-size) * 6);
            }

        .tvx-spinner div:nth-child(4) {
            animation-delay: -0.144s;
        }

            .tvx-spinner div:nth-child(4):after {
                top: calc(var(--sp-size) * 9);
                left: calc(var(--sp-size) * 5);
            }

        .tvx-spinner div:nth-child(5) {
            animation-delay: -0.18s;
        }

            .tvx-spinner div:nth-child(5):after {
                top: calc(var(--sp-size) * 8.875);
                left: calc(var(--sp-size) * 4);
            }

        .tvx-spinner div:nth-child(6) {
            animation-delay: -0.216s;
        }

            .tvx-spinner div:nth-child(6):after {
                top: calc(var(--sp-size) * 8.5);
                left: calc(var(--sp-size) * 3);
            }

        .tvx-spinner div:nth-child(7) {
            animation-delay: -0.252s;
        }

            .tvx-spinner div:nth-child(7):after {
                top: calc(var(--sp-size) * 7.875);
                left: calc(var(--sp-size) * 2.125);
            }

        .tvx-spinner div:nth-child(8) {
            animation-delay: -0.288s;
        }

            .tvx-spinner div:nth-child(8):after {
                top: calc(var(--sp-size) * 7);
                left: calc(var(--sp-size) * 1.5);
            }

.SpinnerMod {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed; /* Stay in place */
    inset: 0;
    width: 100%; /* 100% Full width */
    height: 100%; /* 100% Full height */
    z-index: 10003; /* Sit on top (higher is top)*/

    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0, 0, 0); /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
    backdrop-filter: blur(4px);
}

@keyframes tvx-spinner {
    0% {
        transform: rotate(0deg);
    }

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


.tvx-spinner.spinner-primary, .tvx-spinner .spinner-primary::after {
    --sp-color: var(--bs-primary);
}

.tvx-spinner.spinner-secondary, .tvx-spinner .spinner-secondary::after {
    --sp-color: var(--bs-secondary);
}

.tvx-spinner.spinner-success, .tvx-spinner .spinner-success::after {
    --sp-color: var(--bs-success);
}

.tvx-spinner.spinner-info, .tvx-spinner .spinner-info::after {
    --sp-color: var(--bs-info);
}

.tvx-spinner.spinner-warning, .tvx-spinner .spinner-warning::after {
    --sp-color: var(--bs-warning);
}

.tvx-spinner.spinner-danger, .tvx-spinner .spinner-danger::after {
    --sp-color: var(--bs-danger);
}

.tvx-spinner.spinner-light, .tvx-spinner .spinner-light::after {
    --sp-color: var(--bs-light);
}

.tvx-spinner.spinner-dark, .tvx-spinner .spinner-dark::after {
    --sp-color: var(--bs-dark);
}