
.orbit-loader-wrapper {
    display: none;
    place-content: center;
    place-items: center;
    height: 100%;
    width: 100%;
    --size: 4rem;
    --duration: 2s;
    --bg: #4254c6;

    [data-mantine-color-scheme="dark"] & {
        --bg: #6573d0;
    }

    #react-entry-point:has(>div._dash-loading) + & {
        display: grid;
        position: fixed;
        inset: 0;
    }
    /* #react-entry-point:has(*:not(#_pages_content)[data-dash-is-loading="true"]) + & {
        display: grid;
        position: fixed;
        inset: 0;
        z-index: 9999;
        animation: loader-appear 5s forwards;
    } */
}
@keyframes loader-appear {
    0% {
        display: none;
    }
    99% {
        display: none;
        opacity: 0;
    }
    100% {
        display: grid;
        position: fixed;
        inset: 0;
        background: var(--mantine-color-body);
        opacity: 1;
    }
}

div._dash-loading {
    display: none;
}
.orbit-loader-wrapper.fullscreen {
    height: 100vh;
    width: 100vw;
    height: 100svh;
    width: 100svw;
}
.orbit-loader-middle {
    height: var(--size);
    width: var(--size);
    border-radius: 50%;
    background: var(--bg);
    position: relative;
    animation: orbit-loader-spin var(--duration) ease-in-out infinite;
}
.orbit-loader-half {
    background: var(--bg);
    position: absolute;
}
.orbit-loader-top {
    top: 0;
    left: 0;
    width: var(--size);
    height: calc(var(--size) / 2);
    border-radius: calc(var(--size) / 2) calc(var(--size) / 2) 0 0;
    animation: orbit-loader-top var(--duration) ease-in-out infinite;
}
.orbit-loader-right {
    top: 0;
    right: 0;
    width: calc(var(--size) / 2);
    height: var(--size);
    border-radius: 0 calc(var(--size) / 2) calc(var(--size) / 2) 0;
    animation: orbit-loader-right var(--duration) ease-in-out infinite;
}
.orbit-loader-bottom {
    bottom: 0;
    left: 0;
    width: var(--size);
    height: calc(var(--size) / 2);
    border-radius: 0 0 calc(var(--size) / 2) calc(var(--size) / 2);
    animation: orbit-loader-bottom var(--duration) ease-in-out infinite;
}
.orbit-loader-left {
    top: 0;
    left: 0;
    width: calc(var(--size) / 2);
    height: var(--size);
    border-radius: calc(var(--size) / 2) 0 0 calc(var(--size) / 2);
    animation: orbit-loader-left var(--duration) ease-in-out infinite;
}
.orbit-loader-quarter {
    height: calc(var(--size) / 2);
    width: calc(var(--size) / 2);
    background: var(--bg);
    position: absolute;
}
.orbit-loader-top-left {
    top: 0;
    left: 0;
    border-radius: 100% 0 0 0;
    animation: orbit-loader-top-left var(--duration) ease-in-out infinite;
}
.orbit-loader-top-right {
    top: 0;
    right: 0;
    border-radius: 0 100% 0 0;
    animation: orbit-loader-top-right var(--duration) ease-in-out infinite;
}
.orbit-loader-bottom-right {
    bottom: 0;
    right: 0;
    border-radius: 0 0 100% 0;
    animation: orbit-loader-bottom-right var(--duration) ease-in-out infinite;
}
.orbit-loader-bottom-left {
    bottom: 0;
    left: 0;
    border-radius: 0 0 0 100%;
    animation: orbit-loader-bottom-left var(--duration) ease-in-out infinite;
}
@keyframes orbit-loader-spin {
    0% {
        transform: rotate(0);
    }
    25% {
        transform: rotate(90deg);
    }
    50% {
        transform: rotate(90deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes orbit-loader-top {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(0, calc(-1 * var(--size) / 2));
    }
    50% {
        transform: translate(0, calc(-1 * var(--size) / 2));
    }
    100% {
        transform: translate(0, 0);
    }
}
@keyframes orbit-loader-right {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(calc(var(--size) / 2), 0);
    }
    50% {
        transform: translate(calc(var(--size) / 2), 0);
    }
    100% {
        transform: translate(0, 0);
    }
}
@keyframes orbit-loader-bottom {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(0, calc(var(--size) / 2));
    }
    50% {
        transform: translate(0, calc(var(--size) / 2));
    }
    100% {
        transform: translate(0, 0);
    }
}
@keyframes orbit-loader-left {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(calc(-1 * var(--size) / 2), 0);
    }
    50% {
        transform: translate(calc(-1 * var(--size) / 2), 0);
    }
    100% {
        transform: translate(0, 0);
    }
}
@keyframes orbit-loader-top-left {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(calc(-1 * var(--size) / 2), calc(-1 * var(--size) / 2));
    }
    50% {
        transform: translate(calc(-1 * var(--size) / 2), calc(-1 * var(--size) / 2));
    }
    100% {
        transform: translate(0, 0);
    }
}
@keyframes orbit-loader-top-right {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(calc(var(--size) / 2), calc(-1 * var(--size) / 2));
    }
    50% {
        transform: translate(calc(var(--size) / 2), calc(-1 * var(--size) / 2));
    }
    100% {
        transform: translate(0, 0);
    }
}
@keyframes orbit-loader-bottom-right {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(calc(var(--size) / 2), calc(var(--size) / 2));
    }
    50% {
        transform: translate(calc(var(--size) / 2), calc(var(--size) / 2));
    }
    100% {
        transform: translate(0, 0);
    }
}
@keyframes orbit-loader-bottom-left {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(calc(-1 * var(--size) / 2), calc(var(--size) / 2));
    }
    50% {
        transform: translate(calc(-1 * var(--size) / 2), calc(var(--size) / 2));
    }
    100% {
        transform: translate(0, 0);
    }
}
