:root {
    --overlayloading_text: rgba(230, 230, 230, 1);
    --overlayloading_border: rgb(163, 160, 160);
    --overlayloading_bg: rgba(7, 7, 7, 0.6);
}

.mainOverlayLoading {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    color: var(--overlayloading_text) !important;
    z-index: 100;
    font-family: 'Buckin';
    background: #000;
}

.mainOverlayLoading .loading-svg {
    width: 50px;
    height: 50px;
    margin-top: 20px;
    animation: spinMainLoading 1s linear infinite;
}

.mainOverlayLoading .overlay-content {
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    bottom: 0;
    /*background: rgba(0, 0, 0, 0.4);*/
    height: 100%;
    width: 100%;
    padding: 20px;
    padding-bottom: 10vw;
}

.mainOverlayLoading iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

@keyframes spinMainLoading {
    0% {
        transform: rotate(0deg);
    }

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

.mainContentOverlayLoading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.mainContentOverlayLoading .RadialProgress {
    --hue: 220;
    --holesize: 65%;
    --track-bg: var(--overlayloading_border); /*hsl(233 34% 92%);*/

    block-size: 100px;
    inline-size: 100px;
    min-inline-size: 100px;
    min-block-size: 100px;
    display: grid;
    place-items: center;
    position: relative;
    font-weight: 700;
    font-size: max(3vmin, 1.4rem);

    &::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 50%;
        z-index: -1;
        background: conic-gradient(
            var(--overlayloading_text),
            var(--overlayloading_text) var(--progress, 0%),
            var(--track-bg) var(--progress, 0%) 100% /* Fond en blanc */
        );

        mask-image: radial-gradient(transparent var(--holesize), black calc(var(--holesize) + 0.5px));
        z-index: 2;
    }
}

.mainContentOverlayLoading .input-range {
    width: 100%;
}

.mainContentOverlayLoading .input-range-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--overlayloading_bg);
    border-radius: 20px;
    border: 3px solid var(--overlayloading_border);
    padding: 20px 26px;
    width: 320px;
    backdrop-filter: blur(6px);
    margin-top: 15px;
}