#quickLoginUserName {
    padding-right: 20px;
    font-weight: bold;
}

body {
    background: var(--bg);
}

#page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-build-in-progress {
    border: dashed 5px var(--app-color);
    height: 300px;
    margin: 3vh auto 10vh auto;
    max-width: 300px;
    text-align: center;
    border-radius: 50%;
    width: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .app-build-in-progress > p {
        font-weight: var(--extrabold);
        font-size: 15px;
        color: var(--app-color);
    }

.quick_view #pagewrapper {
    margin-top: 0;
}

.quick_view #page {
    margin-top: var(--margin);
}

    .quick_view #page header, .quick_view #page footer {
        display: none;
    }

.non-fhub, html body .non-fhub, html body #mainContent .non-fhub, html body .playground .non-fhub {
    display: none !important;
}

main {
    padding: var(--margin);
    padding-bottom: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

    main .main-content-container {
        display: flex;
        flex-direction: column;
        gap: var(--margin);
        border-radius: 2rem;
        flex-grow: 1;
    }

        main .main-content-container h1 {
            margin: 0;
            padding: 0;
        }

.main-cta-links a {
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    border: solid 2px;
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    min-width: 8rem;
    color: white;
    line-height: 100%;
    scale: .97;
}

    .main-cta-links a:not(:hover) {
        text-decoration: none;
    }

    .main-cta-links a:before {
        opacity: .5;
        font-size: 120%;
        margin: 0;
    }

.loader {
    opacity: 0;
    pointer-events: none;
    transition: opacity 2s;
    border: 5px solid #eaeaea;
    border-top: none;
    border-radius: 50%;
    --width: clamp(50px, 200px, 50%);
    width: var(--width);
    aspect-ratio: 1 / 1;
    position: absolute;
    z-index: 5;
    left: calc(50% - var(--width) / 2);
    top: calc(50% - var(--width) / 2);
    grid-area: stack;
    transition: opacity .5s;
}

.loading .loader {
    opacity: 1;
    animation: spin 1s linear infinite;
}