/* /Components/Layout/AccountLayout.razor.rz.scp.css */
.page[b-6gpazw4gtq] {
    padding-top: 0px;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 9px;
    display: grid;
    grid-template-columns: 194px auto;
    grid-template-rows: 54px auto;
}

main[b-6gpazw4gtq] {
    align-content: start;
    position: relative;
    background-color: #fefefe;
    border-radius: 6px;
    height: calc(100dvh - 63px);
    border: 1px solid #e8e8e8;
    grid-row: 2/3;
    grid-column: 2/3;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 40px;
    overflow-y: auto;
    display: grid;
}

.topbar[b-6gpazw4gtq] {
    height: 54px;
    width: 100%;
    grid-row: 1/2;
    grid-column: 1/3;
    display: grid;
    grid-template-columns: 105px 6px 225px auto;
}

    .topbar > img[b-6gpazw4gtq] {
        align-self: center;
    }

    .topbar select[b-6gpazw4gtq] {
        background: none;
        border: none;
        font-size: 0.9em;
    }


    .topbar select[b-6gpazw4gtq] {
        transition: width 0.2s ease;
    }

        .topbar select option[b-6gpazw4gtq] {
            background: none; /* background inside dropdown */
        }

            .topbar select option:hover[b-6gpazw4gtq] {
                background-color: #d1e3ff;
            }


    .topbar span[b-6gpazw4gtq] {
        color: #8f8f8f;
        align-self: center;
    }

        .topbar span:last-of-type[b-6gpazw4gtq] {
            justify-self: left;
            margin-left: 4px;
            color: #181818;
        }

    .topbar .top-nav[b-6gpazw4gtq] {
        display: none;
        justify-self: end;
        width: 64px;
    }


.sidebar[b-6gpazw4gtq] {
    height: calc(100dvh - 63px);
    width: 194px;
    padding-left: 12px;
    padding-right: 12px;
    grid-row: 2/3;
    grid-column: 1/2;
}

.blur[b-6gpazw4gtq] {
    display: none;
    background-color: #181818;
    opacity: 0.75;
    width: 100%;
    height: 100%;
    position: absolute;
}

@media (max-width: 1024px) {

    .page[b-6gpazw4gtq] {
        grid-template-columns: 1fr;
    }

    main[b-6gpazw4gtq] {
        grid-column: 1/2;
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 16px;
    }

    .topbar[b-6gpazw4gtq] {
        grid-template-columns: 90px 6px 195px auto;
    }

        .topbar > img[b-6gpazw4gtq] {
            width: 90px;
        }

        .topbar span[b-6gpazw4gtq] {
            width: 3px;
            justify-self: center;
        }

        .topbar select[b-6gpazw4gtq] {
            font-size: 0.85em;
        }


        .topbar .top-nav[b-6gpazw4gtq] {
            display: inline;
        }


    .blur.show[b-6gpazw4gtq] {
        display: block;
    }

    .sidebar.show[b-6gpazw4gtq] {
        z-index: 0;
        background-color: #fefefe;
    }
}


@media (max-width: 768px) {

    .sidebar[b-6gpazw4gtq] {
        width: 100%;
    }
}


/* For Chrome, Safari, and Opera */
main[b-6gpazw4gtq] {
    overflow: auto; /* or scroll, depending on need */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

    main[b-6gpazw4gtq]::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }
/* /Components/Layout/AccountNav.razor.rz.scp.css */
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* /Components/Layout/MainNav.razor.rz.scp.css */
/* /Components/Layout/NoNavLayout.razor.rz.scp.css */
.page[b-4561bg020x] {
    padding-top: 0px;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 9px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 54px auto;
    background-color: #fefefe;
}


.topbar[b-4561bg020x] {
    height: 54px;
    width: 100%;
    grid-row: 1/2;
    grid-column: 1/2;
    display: grid;
    grid-template-columns: 105px 12px auto;
}

    .topbar img[b-4561bg020x] {
        align-self: center;
    }

    .topbar h2[b-4561bg020x] {
        align-self: center;
        margin: 0px;
        font-size: 0.9em;
        font-weight: 400;
    }



    .topbar span[b-4561bg020x] {
        color: #8f8f8f;
        align-self: center;
        justify-self: center;
    }



main[b-4561bg020x] {
    /*background-color: #fefefe;
    border-radius: 6px;*/
    height: calc(100dvh - 63px);
    /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);*/
    grid-row: 2/3;
    grid-column: 1/2;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 40px;
}



@media (max-width: 767px) {

    .topbar[b-4561bg020x] {
        grid-template-columns: 90px 12px auto;
    }

        .topbar img[b-4561bg020x] {
            width: 90px;
        }

        .topbar span[b-4561bg020x] {
            width: 6px;
        }

        .topbar h2[b-4561bg020x] {
            font-size: 0.85em;
        }


    main[b-4561bg020x] {
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 16px;
    }
}
/* /Components/Layout/StoryLayout.razor.rz.scp.css */
.page[b-ktnikkpwpj] {
    padding-top: 0px;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 9px;
    display: grid;
    grid-template-columns: 194px auto;
    grid-template-rows: 54px auto;
}

main[b-ktnikkpwpj] {
    align-content: start;
    position: relative;
    background-color: #fefefe;
    border-radius: 6px;
    height: calc(100dvh - 63px);
    border: 1px solid #e8e8e8;
    grid-row: 2/3;
    grid-column: 2/3;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 40px;
    overflow-y: auto;
    display: grid;
}

.topbar[b-ktnikkpwpj] {
    height: 54px;
    width: 100%;
    grid-row: 1/2;
    grid-column: 1/3;
    display: grid;
    grid-template-columns: 105px 6px auto 64px;
}

    .topbar > img[b-ktnikkpwpj] {
        align-self: center;
    }

    .topbar select[b-ktnikkpwpj] {
        background: none;
        border: none;
        font-size: 0.9em;
        justify-self: left;
    }


    .topbar select[b-ktnikkpwpj] {
        transition: width 0.2s ease;
    }

        .topbar select option[b-ktnikkpwpj] {
            background: none; /* background inside dropdown */
        }

            .topbar select option:hover[b-ktnikkpwpj] {
                background-color: #d1e3ff;
            }


    .topbar span[b-ktnikkpwpj] {
        color: #8f8f8f;
        align-self: center;
    }


    .topbar .top-nav[b-ktnikkpwpj] {
        display: none;
        justify-self: end;
        width: 64px;
    }


.sidebar[b-ktnikkpwpj] {
    height: calc(100dvh - 63px);
    width: 194px;
    padding-left: 12px;
    padding-right: 12px;
    grid-row: 2/3;
    grid-column: 1/2;
}

.blur[b-ktnikkpwpj] {
    display: none;
    background-color: #181818;
    opacity: 0.75;
    width: 100%;
    height: 100%;
    position: absolute;
}

@media (max-width: 1024px) {

    .page[b-ktnikkpwpj] {
        grid-template-columns: 1fr;
    }

    main[b-ktnikkpwpj] {
        grid-column: 1/2;
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 16px;
    }

    .topbar[b-ktnikkpwpj] {
        grid-template-columns: 90px 6px auto 64px;
    }

        .topbar > img[b-ktnikkpwpj] {
            width: 90px;
        }

        .topbar span[b-ktnikkpwpj] {
            width: 3px;
            justify-self: center;
        }

        .topbar select[b-ktnikkpwpj] {
            font-size: 0.85em;
        }


        .topbar .top-nav[b-ktnikkpwpj] {
            display: inline;
        }


    .blur.show[b-ktnikkpwpj] {
        display: block;
    }

    .sidebar.show[b-ktnikkpwpj] {
        z-index: 0;
        background-color: #fefefe;
    }
}


@media (max-width: 768px) {

    .sidebar[b-ktnikkpwpj] {
        width: 100%;
    }
}


/* For Chrome, Safari, and Opera */
main[b-ktnikkpwpj] {
    overflow: auto; /* or scroll, depending on need */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

    main[b-ktnikkpwpj]::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }
/* /Components/Layout/StoryNav.razor.rz.scp.css */

/* /Components/Pages/home.razor.rz.scp.css */
.main[b-lm8bmcmc8v] {
    display:grid;
    grid-template-columns: auto auto auto;
}

.content[b-lm8bmcmc8v] {
    grid-column: 2/3;
    width: 1120px;
}



@media (max-width: 1420px) {
    .main[b-lm8bmcmc8v] {
        grid-template-columns: auto;
    }

    .content[b-lm8bmcmc8v] {
        grid-column: 1/2;
        width: 100%;
    }
}
/* /Components/Pages/Introduction.razor.rz.scp.css */
.main[b-xih0du1f6r] {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    position: relative;
}

.content[b-xih0du1f6r] {
    grid-column: 2/3;
    display: grid;
    overflow-x: hidden;
}

    .content .book[b-xih0du1f6r] {
        display: grid;
        grid-column: 1/2;
        grid-row: 1/2;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        justify-self: center;
    }



        .content .book > img[b-xih0du1f6r] {
            width: 250px;
            grid-column: 1/2;
            grid-row: 1/2;
        }




.controller[b-xih0du1f6r] {
    height: 64px;
    grid-template-columns: 64px 64px auto 64px 64px 64px;
}


    .controller label[b-xih0du1f6r] {
        font-size: 0.9em;
        text-align: center;
        justify-self: center;
        align-self: center;
    }


    .controller input[b-xih0du1f6r] {
        justify-self: stretch;
        background: none;
        border: none;
    }

    .controller select[b-xih0du1f6r] {
        background: none;
        border: none;
        font-size: 0.9em;
        text-align: center;
    }


@media (max-width: 1490px) {
    .main[b-xih0du1f6r] {
        grid-template-columns: 1fr;
    }

    .content[b-xih0du1f6r] {
        grid-column: 1/2;
    }
}




@media(max-width: 480px) {
    .controller[b-xih0du1f6r] {
        grid-template-columns: 45px 45px auto 45px 45px 45px;
    }


        .controller label[b-xih0du1f6r] {
            font-size: 0.85em;
        }

        .controller select[b-xih0du1f6r] {
            font-size: 0.85em;
        }
}

@media(max-width: 400px) {

    .controller[b-xih0du1f6r] {
        grid-template-columns: 40px 40px auto 40px 40px 40px;
    }

        .controller label[b-xih0du1f6r] {
            font-size: 0.75em;
        }

        .controller select[b-xih0du1f6r] {
            font-size: 0.75em;
        }
}
/* /Components/Pages/Story.razor.rz.scp.css */
.switch[b-zgq0zr1hin] {
    grid-template-columns: auto auto auto auto auto;
}

#preorder-background[b-zgq0zr1hin] {
    height: 100vh;
    width: 100%;
    background-color: black;
    opacity: 0.7;
    position: fixed;
    left: 0;
    top: 0;
}

#preorder-modal[b-zgq0zr1hin] {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: auto;
    grid-gap: 12px;
    cursor: pointer;
    width: 400px;
}

    #preorder-modal > img[b-zgq0zr1hin] {
        width: 100%;
    }

    #preorder-modal > button[b-zgq0zr1hin] {
        color: white;
    }

    #preorder-modal .buttons[b-zgq0zr1hin] {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        position: absolute;
        bottom: 45px;
    }

        #preorder-modal .buttons button[b-zgq0zr1hin] {
            background-color: transparent;
            border-color: transparent;
        }

            #preorder-modal .buttons button img[b-zgq0zr1hin] {
                width: 85%;
            }

#review-background[b-zgq0zr1hin] {
    height: 100vh;
    width: 100%;
    background-color: black;
    opacity: 0.7;
    position: fixed;
    left: 0;
    top: 0;
}

#review-modal[b-zgq0zr1hin] {
    position: fixed;
    left: 50%;
    top: 50%;
    overflow: auto;
    max-height: calc(100dvh - 58px);
    transform: translate(-50%, -50%);
    background: white;
    margin: 20px auto 10px;
    padding: 20px;
    border-radius: 2px;
    display: grid;
    grid-template-rows: auto auto auto;
    grid-template-columns: 2fr auto auto;
    grid-gap: 0px;
    max-width: 655px;
}

    #review-modal h2[b-zgq0zr1hin] {
        grid-column: 1/4;
        text-align: center;
        font-size: 1.3em;
        margin-top: 0px;
        margin-bottom:12px;
    }



    #review-modal .stars[b-zgq0zr1hin] {
        grid-column: 1/4;
        justify-self: center;
        display: grid;
        grid-template-columns: auto auto auto auto auto;
        grid-template-rows: 1fr;
        margin-bottom:22px;
    }

        #review-modal .stars img[b-zgq0zr1hin] {
            width: 30px;
            
        }


    #review-modal .author[b-zgq0zr1hin] {
        grid-column: 1/4;
        justify-self: center;
        margin-top: 12px;
        margin-bottom: 12px;
    }

    #review-modal p[b-zgq0zr1hin] {
        grid-column: 1/4;
        margin-top:0px;
    }


    #review-modal .danger[b-zgq0zr1hin] {
        grid-column: 2/3;
        color: #181818;
    }

    #review-modal .success[b-zgq0zr1hin] {
        grid-column: 3/4;
        margin-left: 12px;
        color: #e97c52;
    }

@media screen and (max-width: 855px) {
    #review-modal[b-zgq0zr1hin] {
        width: 75%;
    }
}


@media screen and (max-width: 690px) {
    #review-modal[b-zgq0zr1hin] {
        width: 85%;
    }
}


@media screen and (max-width: 620px) {
    #review-modal[b-zgq0zr1hin] {
        width: 90%;
    }
}


@media screen and (max-width: 550px) {
    #review-modal[b-zgq0zr1hin] {
        width: 95%;
    }
}


@media screen and (max-width: 450px) {

    #preorder-modal[b-zgq0zr1hin] {
        transform: translate(-50%, -45%);
        grid-gap: 18px;
        cursor: pointer;
        width: 90%;
    }
}
/* /Components/Sections/Account/PurchaseHistory.razor.rz.scp.css */
.card[b-j51yvphqgw] {
    padding: 24px;
    margin-bottom: 24px;
}


    .card .refund[b-j51yvphqgw] {
        display: grid;
        gap: 6px;
        margin-bottom: 18px;
        border-bottom: 1px solid #e8e8e8;
        padding-bottom: 6px;
    }

        .card .refund label:first-of-type[b-j51yvphqgw] {
            color: #0b3778;
            background-color: #b0f2fe;
            border: solid 1px #88e3fe;
            padding: 3px 5px;
            justify-self: start;
            font-size: 0.9em;
            border-radius: 6px;
        }

        .card .refund label:last-of-type[b-j51yvphqgw] {
            color: #404040;
            font-size: 0.9em;
        }

    .card .purchase[b-j51yvphqgw] {
        display: grid;
        row-gap: 3px;
        grid-template-rows: auto auto auto auto auto;
        grid-template-columns: 100px auto;
    }

        .card .purchase img[b-j51yvphqgw] {
            grid-column: 1/2;
            grid-row: 1/6;
        }


        .card .purchase h2[b-j51yvphqgw] {
            grid-column: 2/3;
            font-size: 1.1em;
            margin: 0px;
        }

            .card .purchase h2 span[b-j51yvphqgw] {
                color: #8c8c8c;
                font-size: 0.9em;
                margin-left: 12px;
            }

        .card .purchase label[b-j51yvphqgw] {
            display: none;
            color: #181818;
            font-size: 0.85em;
        }

        .card .purchase h3[b-j51yvphqgw] {
            grid-column: 2/3;
            margin: 0px;
            color: #181818;
        }


            .card .purchase h3:first-of-type[b-j51yvphqgw] {
                align-self: end;
                color: #8c8c8c;
            }

                .card .purchase h3:first-of-type span[b-j51yvphqgw] {
                    color: #181818;
                }

            .card .purchase h3:last-of-type[b-j51yvphqgw] {
                align-self: start;
                justify-self: start;
            }

            .card .purchase h3.Active[b-j51yvphqgw] {
                background-color: #d0fdd6;
                border: 1px solid #a1fab6;
                color: #056a64;
                border-radius: 6px;
                padding: 3px 5px;
            }


            .card .purchase h3.Revoked[b-j51yvphqgw] {
                background-color: #ffc7c6;
                border: 1px solid#ffa8ae;
                color: #7a1557;
                border-radius: 6px;
                padding: 3px;
            }

        .card .purchase h4[b-j51yvphqgw] {
            margin: 0px;
            grid-row: 5/6;
            color: #8c8c8c;
            font-weight: 400;
        }

            .card .purchase h4 span[b-j51yvphqgw] {
                color: #181818;
                font-weight: 700;
            }


@media (max-width: 615px) {

    .card .purchase h2[b-j51yvphqgw] {
        font-size: 1.0em;
    }

        .card .purchase h2 span[b-j51yvphqgw] {
            display:none;
        }

    .card .purchase label[b-j51yvphqgw] {
        display: block;
    }
}


@media (max-width:656px) {

    .card .purchase h2 span[b-j51yvphqgw] {
        margin-left: 0px;
    }

}
/* /Components/Sections/Story/Audiobook.razor.rz.scp.css */
.main[b-w4iwkn8mse] {
    display: grid;
    grid-template-columns: auto 600px auto;
    position: relative;
}

.content[b-w4iwkn8mse] {
    grid-column: 2/3;
    display: grid;
    overflow-x: hidden;
    gap: 24px;
    padding-bottom: 64px;
}

    .content .narrators[b-w4iwkn8mse] {
        grid-column: 1/2;
        grid-row: 1/2;
        overflow-x: hidden;
        overflow-y: auto;
        width: 250px;
        justify-self: center;
        background-color: #f3f3f3;
        padding: 12px;
        transition: transform 0.5s ease; /* duration and easing */
    }

        .content .narrators.open[b-w4iwkn8mse] {
            transform: translateX(-50%);
        }

        .content .narrators h1[b-w4iwkn8mse] {
            font-size: 1em;
            margin-top: 0px;
            text-align: center;
        }

        .content .narrators button.narrator[b-w4iwkn8mse] {
            display: grid;
            grid-template-columns: 32px auto;
            grid-template-rows: auto auto;
            margin-bottom: 12px;
            font-weight: 400;
        }

        .content .narrators .narrator img[b-w4iwkn8mse] {
            grid-column: 1/2;
            grid-row: 1/3;
            justify-self: center;
            align-self: start;
            margin-top: 1px;
        }


        .content .narrators .narrator span[b-w4iwkn8mse] {
            grid-column: 2/3;
            text-align: left;
        }

            .content .narrators .narrator span:last-of-type[b-w4iwkn8mse] {
                font-size: 0.8em;
            }

    .content .book[b-w4iwkn8mse] {
        display: grid;
        grid-column: 1/2;
        grid-row: 1/2;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        justify-self: center;
        transition: transform 0.5s ease; /* duration and easing */
    }

        .content .book.open[b-w4iwkn8mse] {
            transform: translateX(50%);
        }

        .content .book > img[b-w4iwkn8mse] {
            width: 250px;
            grid-column: 1/2;
            grid-row: 1/2;
        }

        .content .book button[b-w4iwkn8mse] {
            background-color: #181818;
            border-radius: 25px;
            border: none;
            width: 46px;
            height: 46px;
            justify-self: start;
            align-self: center;
            grid-column: 1/2;
            grid-row: 1/2;
            background-color: #E97C52;
            transform: translateX(-50%);
        }


.controller[b-w4iwkn8mse] {
    height: 64px;
    grid-template-columns: 64px 64px auto 64px 64px 64px;
}


    .controller label[b-w4iwkn8mse] {
        font-size: 0.9em;
        text-align: center;
        justify-self: center;
        align-self: center;
    }


    .controller input[b-w4iwkn8mse] {
        justify-self: stretch;
        background: none;
        border: none;
    }

    .controller select[b-w4iwkn8mse] {
        background: none;
        border: none;
        font-size: 0.9em;
        text-align: center;
    }


@media (max-width: 670px) {
    .main[b-w4iwkn8mse] {
        grid-template-columns: auto;
    }

    .content[b-w4iwkn8mse] {
        grid-column: 1/2;
    }
}


@media(max-width: 570px) {
    .content .narrators[b-w4iwkn8mse],
    .content .narrators.open[b-w4iwkn8mse] {
        transform: translateX(0%);
    }

    .content .book[b-w4iwkn8mse] {
        transform: translateX(0%);
    }

        .content .book.open[b-w4iwkn8mse] {
            transform: translateX(90%);
        }
}


@media(max-width: 480px) {
    .controller[b-w4iwkn8mse] {
        grid-template-columns: 45px 45px auto 45px 45px 45px;
    }


        .controller label[b-w4iwkn8mse] {
            font-size: 0.85em;
        }

        .controller select[b-w4iwkn8mse] {
            font-size: 0.85em;
        }
}

@media(max-width: 400px) {

    .controller[b-w4iwkn8mse] {
        grid-template-columns: 40px 40px auto 40px 40px 40px;
    }

        .controller label[b-w4iwkn8mse] {
            font-size: 0.75em;
        }

        .controller select[b-w4iwkn8mse] {
            font-size: 0.75em;
        }
}
/* /Components/Sections/Story/FlashCards.razor.rz.scp.css */
.main[b-pdnmtgcgfy] {
    display: grid;
    grid-template-columns: auto 724px auto;
    margin-bottom: 64px;
}

.content[b-pdnmtgcgfy] {
    grid-column: 2/3;
}

.cards[b-pdnmtgcgfy] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.card[b-pdnmtgcgfy] {
    min-height: 175px;
    grid-template-columns: auto 54px;
    grid-template-rows: 20px auto 48px auto 48px 48px;
}

    .card.selected[b-pdnmtgcgfy] {
        border-color: #e97c52;
        transform: scale(102%, 102%);
        margin-top: 6px;
        margin-bottom: 6px;
    }

    .card button.bookmark[b-pdnmtgcgfy] {
        grid-row: 1/2;
        grid-column: 2/3;
        align-self: start;
        justify-self: end;
        margin-top: -4px;
    }

    .card .characters[b-pdnmtgcgfy] {
        margin-bottom: 20px;
        margin-top: 20px;
        min-height: 28px;
    }

    .card p[b-pdnmtgcgfy],
    .card .characters[b-pdnmtgcgfy] {
        grid-row: 2/3;
        grid-column: 1/3;
        justify-self: center;
        align-self: center;
        padding-left: 12px;
        padding-right: 12px;
    }

    .card button.play[b-pdnmtgcgfy],
    .card button.pause[b-pdnmtgcgfy] {
        grid-row: 3/4;
        grid-column: 1/3;
    }

    .card p.breakdown[b-pdnmtgcgfy] {
        grid-row: 4/5;
        grid-column: 1/3;
        white-space: pre-line;
        font-size: 1.1rem;
        line-height: 1.5;
        padding-left: 20px;
        padding-right: 20px;
    }

    .card a.ask-chatGPT[b-pdnmtgcgfy] {
        grid-row: 5/6;
        grid-column: 1/3;
        color: #e97c52;
        margin: 0px;
        justify-self: center;
        align-self: start;
        font-size: 1em;
        text-decoration:none;
        font-weight:600;
    }

    .card button.expander[b-pdnmtgcgfy] {
        grid-row: 6/7;
        grid-column: 1/3;
        border-radius: 0px 0px 10px 10px;
    }

.controller[b-pdnmtgcgfy] {
    height: 64px;
    grid-template-columns: 64px 64px auto 64px 64px 64px;
}


    .controller label[b-pdnmtgcgfy] {
        font-size: 0.9em;
        text-align: center;
        justify-self: center;
        align-self: center;
    }


    .controller input[b-pdnmtgcgfy] {
        justify-self: stretch;
        background: none;
        border: none;
    }

    .controller select[b-pdnmtgcgfy] {
        background: none;
        border: none;
        font-size: 0.9em;
        text-align: center;
    }




@media (max-width: 790px) {
    .main[b-pdnmtgcgfy] {
        grid-template-columns: 1fr;
    }

    .content[b-pdnmtgcgfy] {
        grid-column: 1/2;
    }
}





@media(max-width: 480px) {
    .card p[b-pdnmtgcgfy],
    .card .characters[b-pdnmtgcgfy] {
        padding-left: 9px;
        padding-right: 9px;
    }

    .controller[b-pdnmtgcgfy] {
        grid-template-columns: 45px 45px auto 45px 45px 45px;
    }


        .controller label[b-pdnmtgcgfy] {
            font-size: 0.85em;
        }

        .controller select[b-pdnmtgcgfy] {
            font-size: 0.85em;
        }
}

@media(max-width: 400px) {

    .controller[b-pdnmtgcgfy] {
        grid-template-columns: 40px 40px auto 40px 40px 40px;
    }

        .controller label[b-pdnmtgcgfy] {
            font-size: 0.75em;
        }

        .controller select[b-pdnmtgcgfy] {
            font-size: 0.75em;
        }
}
/* /Components/Sections/Story/Music.razor.rz.scp.css */
.main[b-xnj2mvkxuf] {
    display: grid;
    grid-template-columns: auto 724px auto;
    margin-bottom: 64px;
}

.content[b-xnj2mvkxuf] {
    grid-column: 2/3;
}


h1[b-xnj2mvkxuf] {
    text-align: center;
    text-transform: uppercase;
    font-size: 1.3em;
}

h2[b-xnj2mvkxuf] {
    text-align: center;
    text-transform: uppercase;
    font-size: 1.1em;
    margin-bottom: 40px;
}



.controller[b-xnj2mvkxuf] {
    height: 64px;
    grid-template-columns: 74px 260px 64px 64px auto 64px 64px 64px;
    align-content: center;
}

    .controller img.album[b-xnj2mvkxuf] {
        justify-self: center;
    }

    .controller .title[b-xnj2mvkxuf] {
        display: grid;
        grid-template-rows: auto auto;
        grid-template-columns: 1fr;
    }

    .controller label.album[b-xnj2mvkxuf] {
        font-size: 0.85em;
    }

    .controller label.time[b-xnj2mvkxuf] {
        text-align: center;
        align-self:center;
        font-size: 0.85em;
    }

    .controller button#play-button[b-xnj2mvkxuf],
    .controller button#pause-button[b-xnj2mvkxuf] {
        grid-column: 3/4;
        grid-row: 1/2;
    }

    .controller input[b-xnj2mvkxuf] {
        justify-self: stretch;
    }


@media (max-width: 1490px) {
    .main[b-xnj2mvkxuf] {
        grid-template-columns: 1fr;
    }

    .content[b-xnj2mvkxuf] {
        grid-column: 1/2;
    }
}



@media(max-width: 850px) {

    .controller[b-xnj2mvkxuf] {
        grid-template-columns: 64px 64px auto 64px 64px 64px;
    }

        .controller img.album[b-xnj2mvkxuf] {
            display: none;
        }

        .controller .title[b-xnj2mvkxuf] {
            display: none;
        }


        .controller button#play-button[b-xnj2mvkxuf],
        .controller button#pause-button[b-xnj2mvkxuf] {
            grid-column: 1/2;
        }
}



@media(max-width:500px){
    .controller[b-xnj2mvkxuf] {
        grid-template-columns: 45px 64px auto 64px 45px 45px;
    }
}
/* /Components/Sections/Story/quiz.razor.rz.scp.css */
.main[b-gsmmo3zz5h] {
    display: grid;
    grid-template-columns: auto 724px auto;
    margin-bottom: 64px;
}

.content[b-gsmmo3zz5h] {
    grid-column: 2/3;
    display: grid;
}

.scores[b-gsmmo3zz5h] {
    grid-column: 2/3;
    justify-self: center;
    margin-top: 12px;
    text-align: center;
}

    .scores img[b-gsmmo3zz5h] {
        margin-right: 6px;
        margin-left: 6px;
    }


.component[b-gsmmo3zz5h] {
    grid-column: 2/3;
    display: grid;
}


.off-screen[b-gsmmo3zz5h] {
    position: fixed;
    left: -1000px;
    top: -1000px;
}




@media (max-width:800px) {
    .main[b-gsmmo3zz5h] {
        grid-template-columns: auto;
    }

    .content[b-gsmmo3zz5h] {
        grid-column: 1/2;
    }
}


@media (max-width:480px) {

    .scores[b-gsmmo3zz5h] {
        margin-top: 0px;
    }
}
/* /Components/Sections/Story/Translation.razor.rz.scp.css */
.main[b-wyj7s1qnrg] {
    display: grid;
    grid-template-columns: auto 1192px auto;
}

.content[b-wyj7s1qnrg] {
    grid-column: 2/3;
}


h1[b-wyj7s1qnrg] {
    text-align: center;
    text-transform: uppercase;
    font-size: 1.3em;
}

h2[b-wyj7s1qnrg] {
    text-align: center;
    text-transform: uppercase;
    font-size: 1.1em;
    margin-bottom: 40px;
}



@media (max-width: 1490px) {
    .main[b-wyj7s1qnrg] {
        grid-template-columns: 1fr;
    }

    .content[b-wyj7s1qnrg] {
        grid-column: 1/2;
    }
}
/* /Components/Views/Quiz/IllustrationView.razor.rz.scp.css */
.illustration[b-1zgjmkahdk] {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-column-gap: 12px;
    justify-self: center;
    align-self: center;
}

    .illustration img[b-1zgjmkahdk] {
        grid-column: 1/2;
        grid-row: 1/2;
        justify-self: center;
        align-self: center;
    }

    .illustration button[b-1zgjmkahdk] {
        justify-self: end;
        align-self: end;
        grid-column: 1/2;
        grid-row: 1/2;
        margin-bottom: -15px;
        margin-right: -35px;
        background-color: transparent;
        border: none;
    }


@media (max-width: 550px) {
    .illustration > img[b-1zgjmkahdk] {
        width: 100%;
        height: auto;
    }

    .illustration button[b-1zgjmkahdk] {
        margin-right: -20px;
    }

        .illustration button img[b-1zgjmkahdk] {
            width: 64px;
            height: 64px;
        }
}
/* /Components/Views/Quiz/OptionsView.razor.rz.scp.css */
.illustration[b-5wcftj6vzt] {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-column-gap: 12px;
    justify-self: center;
    align-self: center;
}

    .illustration img[b-5wcftj6vzt] {
        grid-column: 1/2;
        grid-row: 1/2;
        justify-self: center;
        align-self: center;
    }

    .illustration button[b-5wcftj6vzt] {
        justify-self: end;
        align-self: end;
        grid-column: 1/2;
        grid-row: 1/2;
        margin-bottom: -15px;
        margin-right: -35px;
        background-color: transparent;
        border: none;
    }



button.bordered.correct[b-5wcftj6vzt] {
    border-color: #18dd81;
    background-color: #18dd81;
    color: #fefefe;
}


button.bordered.wrong[b-5wcftj6vzt] {
    border-color: #fe7096;
    background-color: #fe7096;
    color: #fefefe;
}




@media (max-width: 550px) {
    .illustration > img[b-5wcftj6vzt] {
        width: 100%;
        height: auto;
    }

    .illustration  button[b-5wcftj6vzt] {
        margin-right: -20px;
    }

    .illustration  button  img[b-5wcftj6vzt]{
        width:64px;
        height:64px;
    }
}
/* /Components/Views/Quiz/QuestionView.razor.rz.scp.css */
/* /Components/Views/Quiz/QuizComingSoonView.razor.rz.scp.css */
.container[b-t1behh4x6n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 2rem;
    padding: 1rem;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

h2[b-t1behh4x6n] {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

p[b-t1behh4x6n] {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
}
/* /Components/Views/Quiz/QuizCompleteView.razor.rz.scp.css */
.quiz-result-container[b-meublqe7kw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 2rem;
    padding: 1rem;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.result-image[b-meublqe7kw] {
    height: auto;
    margin-bottom: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.result-text h2[b-meublqe7kw] {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.result-text p[b-meublqe7kw] {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
}



@media (max-width:450px){
    .result-image[b-meublqe7kw] {
        width:100%;
    }
}
/* /Components/Views/Quiz/QuizNotAvailableView.razor.rz.scp.css */
.container[b-kli3uj675k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 2rem;
    padding: 1rem;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

h2[b-kli3uj675k] {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

p[b-kli3uj675k] {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
}
/* /Components/Views/Shared/AlertView.razor.rz.scp.css */
.card[b-yubf1is4q3] {
    display: grid;
    grid-template-columns: 35px auto;
    padding: 12px;
}



    .card.Warning[b-yubf1is4q3] {
        background-color: #fff6b5;
        border-color: #feee8e;
    }

    .card.Info[b-yubf1is4q3] {
        background-color: #b0f2fe;
        border-color: #88e3fe;
    }

    .card.Error[b-yubf1is4q3] {
        background-color: #ffc7c6;
        border-color: #ffa8ae;
    }

    .card.Success[b-yubf1is4q3] {
        background-color: #d0fdd6;
        border-color: #a1fab6;
    }



.Error[b-yubf1is4q3] {
    color: #7a1557;
}

.Info[b-yubf1is4q3] {
    color: #0b3778;
}

.Warning[b-yubf1is4q3] {
    color: #7a5d0d;
}

.Success[b-yubf1is4q3] {
    color: #056a64;
}

ul[b-yubf1is4q3] {
    grid-column: 1/3;
}