.page {
    background-attachment: fixed;
    background-image: radial-gradient(ellipse at center,
            #12121250 35%,
            #12121260 45%,
            #12121280 55%,
            #121212A0 65%,
            #121212 100%), url('../images_new/logged-out-background.png');
    background-size: cover;
    background-position: center;
    position: relative;
}

.page.page-red {
    background-attachment: fixed;
    background-image: radial-gradient(ellipse at center,
            #12121250 35%,
            #12121260 45%,
            #12121280 55%,
            #121212A0 65%,
            #121212 100%), url('../images_new/logged-out-red-background.png');
    background-size: cover;
    background-position: center;
    position: relative;
}

.page.page-not-found {
    background-attachment: fixed;
    background-image: radial-gradient(ellipse at center,
            #12121250 35%,
            #12121260 45%,
            #12121280 55%,
            #121212A0 65%,
            #121212 100%), url('../images_new/logged-out-not-found-background.png');
    background-size: cover;
    background-position: center;
    position: relative;
}

/* radial-gradient(ellipse at top,
            #12121240 35%,
            #12121260 45%,
            #121212A0 55%,
            #121212 70%,
            #121212 100%) */

.background-logged-out-try-out {
    background-image: url('../images_new/try-out-box.png');
    background-size: 800px auto;
    background-position: center bottom;
    background-repeat: no-repeat;
    width: 100%;
    height: 300px;
    mask-image: linear-gradient(to top,
            transparent 0%,
            rgba(0, 0, 0, 0.15) 10%,
            rgba(0, 0, 0, 0.4) 20%,
            rgba(0, 0, 0, 0.7) 32%,
            #000 48%);
    -webkit-mask-image: linear-gradient(to top,
            transparent 0%,
            rgba(0, 0, 0, 0.15) 10%,
            rgba(0, 0, 0, 0.4) 20%,
            rgba(0, 0, 0, 0.7) 32%,
            #000 48%);
}

.top-0 {
    top: 0;
}

#close-promotion-section {
    display: none;
    position: absolute;
    top: var(--spacing-xl);
    right: var(--spacing-xl);
}

.height-unset {
    height: unset;
}

.background-logged-out-promo {
    background-image: radial-gradient(circle at 8% 50%,
            rgba(29, 216, 135, 0.14) 0%,
            rgba(29, 216, 135, 0.05) 30%,
            transparent 55%),
        linear-gradient(110deg,
            rgba(29, 216, 135, 0.07) 0%,
            rgba(15, 15, 15, 0.95) 45%,
            rgba(29, 216, 135, 0.04) 100%), url('../images_new/logged-out-background.png');
    background-size: 800px auto;
    background-position: right top;
    background-repeat: no-repeat;
}

.font-family-orbitron {
    font-family: 'Orbitron', sans-serif;
}

.line-height-1 {
    line-height: 1;
}

.max-width-500px {
    max-width: 500px;
}

#input-type-5-dropdown .dropdown-open {
    background: var(--dark-700);
    border: 1px solid var(--dark-600);
    border-radius: var(--spacing-md);
    color: var(--shades-0);
    padding: var(--spacing-md);
    width: 100%;
}

#input-type-5-dropdown .dropdown-open::placeholder {
    color: var(--dark-50);
}

#input-type-5-dropdown .dropdown-open:disabled {
    background: var(--dark-800);
    color: var(--dark-50);
}

@media screen and (max-width: 768px) {
    .background-logged-out-try-out {
        background-image: url('../images_new/try-out-box-tablet.png');
        background-size: 800px auto;
        background-position: center bottom;
        background-repeat: no-repeat;
        width: 100%;
        height: 300px;
        mask-image: linear-gradient(to top,
                transparent 0%,
                rgba(0, 0, 0, 0.15) 10%,
                rgba(0, 0, 0, 0.4) 20%,
                rgba(0, 0, 0, 0.7) 32%,
                #000 48%);
        -webkit-mask-image: linear-gradient(to top,
                transparent 0%,
                rgba(0, 0, 0, 0.15) 10%,
                rgba(0, 0, 0, 0.4) 20%,
                rgba(0, 0, 0, 0.7) 32%,
                #000 48%);
    }

    .max-width-unset-tablet {
        max-width: unset;
    }

    .max-width-500px-tablet {
        max-width: 500px;
    }

    .z-index-1-tablet {
        z-index: 1;
    }

    .z-index-2-tablet {
        z-index: 2;
    }

    .background-logged-out-tablet {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 30vh;
        height: 30dvh;

        background-image: url('../images_new/logged-out-background.png');
        background-size: 800px auto;
        background-position: left center;
        background-repeat: no-repeat;

        -webkit-mask-image: radial-gradient(ellipse 100% 100% at 100% 0%,
                #121212A0 0%,
                #12121290 50%,
                #12121280 60%,
                #12121260 70%,
                #12121240 80%,
                transparent 100%);
        mask-image: radial-gradient(ellipse 100% 100% at 100% 0%,
                #121212A0 0%,
                #12121290 50%,
                #12121280 60%,
                #12121260 70%,
                #12121240 80%,
                transparent 100%);
    }

    .background-logged-out-red-tablet {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 30vh;
        height: 30dvh;

        background-image: url('../images_new/logged-out-red-background.png');
        background-size: 800px auto;
        background-position: left center;
        background-repeat: no-repeat;

        -webkit-mask-image: radial-gradient(ellipse 100% 100% at 100% 0%,
                #121212A0 0%,
                #12121290 50%,
                #12121280 60%,
                #12121260 70%,
                #12121240 80%,
                transparent 100%);
        mask-image: radial-gradient(ellipse 100% 100% at 100% 0%,
                #121212A0 0%,
                #12121290 50%,
                #12121280 60%,
                #12121260 70%,
                #12121240 80%,
                transparent 100%);
    }

    .background-logged-out-not-found-tablet {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 30vh;
        height: 30dvh;

        background-image: url('../images_new/logged-out-not-found-background.png');
        background-size: 800px auto;
        background-position: left center;
        background-repeat: no-repeat;

        -webkit-mask-image: radial-gradient(ellipse 100% 100% at 100% 0%,
                #121212A0 0%,
                #12121290 50%,
                #12121280 60%,
                #12121260 70%,
                #12121240 80%,
                transparent 100%);
        mask-image: radial-gradient(ellipse 100% 100% at 100% 0%,
                #121212A0 0%,
                #12121290 50%,
                #12121280 60%,
                #12121260 70%,
                #12121240 80%,
                transparent 100%);
    }
}