/* =========================================================
   LOADING PAGE
   ========================================================= */

html,
body {
    margin: 0;

    width: 100%;
    min-height: 100%;
}


body {
    min-height: 100vh;

    overflow: hidden;

    color: #ffffff;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    background: #101217;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.loading-container {
    width: 100%;
    min-height: 100vh;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 24px;

    box-sizing: border-box;
}


/* =========================================================
   LOADING BOX
   ========================================================= */

.loading-box {
    padding: 24px 32px;

    display: flex;

    align-items: center;
    gap: 14px;

    border-radius: var(--radius-large);

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.35);
}


.loading-box p {
    margin: 0;

    color: var(--text-muted);

    font-size: 14px;
}


/* =========================================================
   SPINNER
   ========================================================= */

.loading-spinner {
    width: 18px;
    height: 18px;

    border-radius: 50%;

    border: 2px solid rgba(255, 255, 255, 0.18);

    border-top-color:
        rgba(255, 255, 255, 0.85);

    animation:
        loading-spin 0.8s linear infinite;
}


@keyframes loading-spin {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}