.spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 16777271;
}

.spinner-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.spinner {
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(127, 127, 127, 0.1) 5%, #707070, rgba(52, 152, 219, 0) 80%);
    background-color: rgba(0, 0, 0, 0);
    animation: spin 1s linear infinite;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #fff 0);
    mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #fff 0);
    position: relative;
    /*z-index: 2147483647;*/
    z-index: 16777271;
}

.spinner-inline {
    width: 5rem;
    height: 5rem;
}

.spinner-fullscreen {
    width: min(10vw, 10vh);
    height: min(10vw, 10vh);
    margin-left: min(5vw, 5vh);
    margin-top: min(5vw, 5vh);
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}