#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

:root {
    --rz-light: #F9F9F9;
    --rz-primary: #1B84FF;
    --rz-secondary: #FF6530;
    --rz-success: #17C653;
    --rz-info: #7239EA;
    --rz-warning: #F6C000;
    --rz-danger: #F8285A;
    --rz-accordion-item-background-color: #fff;
    --rz-text-font-family: 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --rz-card-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.08);
    --rz-form-field-label-floating-background-color: #fff;
    --rz-button-border-radius: 0.5rem;
    --rz-tree-node-selected-border-radius: 0.25rem;
    --rz-selectbar-border-radius: 0.5rem;
}

.rz-body:not(.material-content) {
    margin: 0.5rem;
    border-radius: 0.5rem;
    background-color: #fefefe;
}

    .rz-body:not(.material-content):before {
        background: #4CBC9A;
        top: -8.375rem;
        right: 35%;
    }

    .rz-body:not(.material-content):after {
        background: #FF6A59;
        right: 0rem;
        bottom: 0rem;
    }

    .rz-body:not(.material-content):before, .rz-body:not(.material-content):after {
        content: "";
        position: fixed;
        filter: blur(12.5rem);
        width: 17.125rem;
        height: 17.125rem;
        border-radius: 100%;
        z-index: -3;
        opacity: 0.5;
    }

.font-default {
    font-size: 1rem;
    line-height: 1rem;
}

.head-image-style {
    width: 80px;
    height: 80px;
    border: 2px solid #eae8f1;
    box-shadow: 0px 0px 20px 0px #2c2c2c33;
    padding: 3px;
    border-radius: 50%;
}

.rz-card {
    border: 1px solid #F1F1F4;
    background-color: #fff;
    background-clip: border-box;
    border-radius: 0.5rem;
}

.rz-dialog {
    background-color: #fff;
    border-radius: 0.5rem;
}

.rz-dialog-titlebar {
    background-color: #fff;
    padding: 0.5rem 1.5rem;
    box-shadow: inset 0 -0.5px 2px 0 #cfcfcf;
}

.rz-dialog-title {
    display: inline;
    font-size: 1.2rem;
    font-weight: 600;
}

.rz-dialog-titlebar-close {
    position: absolute;
    top: 0rem;
    right: 1.25rem;
}

    .rz-dialog-titlebar-close .rzi-times:before {
        font-size: 1.5rem;
        content: "close";
        width: 2.2rem;
        height: 2.2rem;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .rz-dialog-titlebar-close .rzi-times:hover:before {
        background: rgba(0, 0, 0, 0.11);
    }

.border-line {
    height: 1px;
    width: 100%;
    background-color: rgba(51,51,51,0.2);
}

.border-line-1 {
    width: 50%;
    height: 5px;
    background-color: #ff6530;
    margin-top: -2px;
    transition: all .4s ease-in-out;
}

.border-line-2 {
    width: 50%;
    height: 5px;
    background-color: #ff6530;
    margin-top: -2px;
    margin-left: 50%;
    transition: all .4s ease-in-out;
}

.login-left {
    border-right: 1px solid rgba(12, 13, 15, 0.06);
    position: relative;
}

.login-button {
    background-color: rgba(255,255,255,0) !important;
    color: #000 !important;
    width: 100%;
    height: 136px;
    border-radius: 0;
}

.home-yinliu {
    background-image: url("/img/Graphic.png");
    background-size: 260px;
    background-repeat: no-repeat;
    background-position: calc(100% - 20px) calc(100%);
}

.home-baokao {
    background: linear-gradient(to right, #1194ef, #65cefe);
}

.home-ceping {
    background: linear-gradient(to right, #FF5565, #FF8590);
}

.finger-zimu {
    background: linear-gradient(to right, #bee4ff, #def5ff);
}

.finger-word {
    background: linear-gradient(to right, #FF5565, #FF8590);
}

.color-back-liner-orign {
    color: #fff;
    background: linear-gradient(to right, #ff6530, #ffffff);
    padding: 0.5rem !important;
}

.home-goto-arrow {
    width: 50%;
    transition: all 300ms linear;
}

    .home-goto-arrow:hover {
        transform: scale(1.3);
        transition: all 300ms linear;
    }

.separator {
    display: block;
    height: 0;
    border-bottom: 1px solid #f4f4f4;
}

    .separator.separator-dashed {
        border-bottom-style: dashed;
        border-bottom-color: #E1E3EA;
    }

.center-button {
    width: max-content;
    margin: 0 auto;
}

.nomorl-button {
    width: max-content;
}

.button-md {
    font-weight: normal;
}

.strat-border, .bottom-border, .top-border {
    border: 0;
    position: relative;
}

    .strat-border:after {
        top: 0;
        left: 0;
        bottom: 0;
        border-left-width: 6px;
        border-right-width: calc(.4rem - 6px);
        border-left-style: solid;
        border-right-style: solid;
        border-left-color: inherit;
        border-right-color: transparent;
        border-top-left-radius: .4rem;
        border-bottom-left-radius: .4rem;
        content: "";
        position: absolute;
        box-sizing: border-box;
    }

    .bottom-border:after {
        bottom: 0;
        right: 0;
        left: 0;
        border-bottom-width: 6px;
        border-top-width: calc(.4rem - 6px);
        border-bottom-style: solid;
        border-top-style: solid;
        border-bottom-color: inherit;
        border-top-color: transparent;
        border-bottom-left-radius: .4rem;
        border-bottom-right-radius: .4rem;
        content: "";
        position: absolute;
        box-sizing: border-box;
    }

    .top-border:after {
        top: 0;
        right: 0;
        left: 0;
        border-top-width: 6px;
        border-bottom-width: calc(.4rem - 6px);
        border-top-style: solid;
        border-bottom-style: solid;
        border-top-color: inherit;
        border-bottom-color: transparent;
        border-top-left-radius: .4rem;
        border-top-right-radius: .4rem;
        content: "";
        position: absolute;
        box-sizing: border-box;
    }

.border-soft-yellow {
    border-color: #f3a222;
}

.border-soft-blue {
    border-color: #3d98da;
}

.border-soft-green {
    border-color: rgba(69,196,160,1);
}

.border-soft-sky {
    border-color: rgba(94,185,240,1);
}

.border-soft-grape {
    border-color: rgba(137,76,227,0.6);
}

.rz-mb-0 > a {
    color: #000;
}

.light-bottom {
    border-bottom: 1px solid #fff;
}

.color-orange .rzi-star {
    color: #ff6530;
}

.course-card-deital {
    text-indent: 2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.hasPaid {
    position: relative;
    overflow: hidden;
}

    .hasPaid .course-card-tag {
        position: absolute;
        font-size: 1.5rem;
        line-height: 3rem;
        color: #fff;
        background: #ff6530;
        right: 0;
        top: 0;
        z-index: 2;
        padding: 0 3rem;
        -webkit-transform-origin: left bottom;
        -moz-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: translate(29.29%, -100%) rotate(45deg);
        -moz-transform: translate(29.29%, -100%) rotate(45deg);
        transform: translate(29.29%, -100%) rotate(45deg);
        text-indent: 0;
    }

.overPaid {
    position: relative;
    overflow: hidden;
}

    .overPaid .course-card-tag {
        position: absolute;
        font-size: 1.5rem;
        line-height: 3rem;
        color: #fff;
        background: #a3a3a3;
        right: 0;
        top: 0;
        z-index: 2;
        padding: 0 3rem;
        -webkit-transform-origin: left bottom;
        -moz-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: translate(29.29%, -100%) rotate(45deg);
        -moz-transform: translate(29.29%, -100%) rotate(45deg);
        transform: translate(29.29%, -100%) rotate(45deg);
        text-indent: 0;
    }

.rz-selectbutton .rz-button.rz-button-lg, .rz-selectbutton .rz-button.rz-button-md {
    background-color: #fff;
}

.course-video-player {
    width: 100%;
    max-width: 100%;
    height: 0;
    padding-top: 56.28% !important;
}

.rz-border-radius-6 .rz-progressbar-value {
    border-radius: 1.5rem;
}

.lesson-video-list .rz-navigation-menu .rz-navigation-item-wrapper {
    background-color: #eee;
    border-radius: 0.5rem;
}

.lesson-video-list .rz-navigation-menu .rz-navigation-item-wrapper-active {
    background-color: #ff6530;
    color: #fff;
}

    .lesson-video-list .rz-navigation-menu .rz-navigation-item-wrapper-active .rz-navigation-item-icon {
        color: #fff;
    }

.lesson-video-list .rz-navigation-menu .rz-navigation-item-icon {
    color: #000;
}

.lesson-video-list .rz-navigation-menu .rz-navigation-item {
    margin: 0.25rem 0;
    border-radius: 0.5rem;
}

.lesson-video-list .rz-navigation-item {
    border-bottom: none;
    border-radius: 0.5rem;
}

.lesson-video-list .rz-navigation-menu .rz-navigation-item-wrapper:hover {
    background-color: #ff6530;
    color: #fff;
}

    .lesson-video-list .rz-navigation-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-icon {
        background-color: #ff6530;
        color: #fff;
    }

.course-video-has-played .rz-navigation-item-wrapper {
    background-color: #e4f4ff !important;
}

    .course-video-has-played .rz-navigation-item-wrapper.rz-navigation-item-wrapper-active {
        background-color: #ff6530 !important;
        color: #fff !important;
    }

    .course-video-has-played .rz-navigation-item-wrapper:hover {
        background-color: #ff6530 !important;
        color: #fff !important;
    }

        .course-video-has-played .rz-navigation-item-wrapper:hover .rz-navigation-item-icon {
            background-color: #ff6530 !important;
            color: #fff !important;
        }

.course-video-title-content {
    border-right: 1px solid #e1e1e1;
}

.question-progress-right {
    width: 8rem;
}

.question-progress-height {
    height: 0.75rem;
}

.question-course-image {
    padding: 0.25rem;
    border: 1px solid #e2e2e2;
    border-radius: 0.5rem;
}

.userinfo-menu-button {
    position: absolute !important;
    top: 0;
    right: 0;
    background: none !important;
}

ul.rz-profile-menu .rz-navigation-menu {
    background-color: #fff;
}

.chat-fit-content {
    width: fit-content;
    max-width: 80%;
}

.chat-head-image-style {
    width: 2rem;
    height: 2rem;
    box-shadow: 0px 0px 20px 0px #2c2c2c33;
    border-radius: 50%;
}

.chat-card-content {
    height: 32rem;
    overflow: auto;
}

.left-orign-pad {
    border-left: 5px solid #ff6530;
    padding-left: 0.75rem;
}

.left-blue-pad {
    border-left: 5px solid #3499db;
    padding-left: 0.75rem;
}

.realname-image {
    width: 375px;
    height: 256px;
    position: relative;
    border-radius: 16px;
}

.realname-image-upload {
    position: absolute;
}

    .realname-image-upload .rz-fileupload-buttonbar {
        background-color: transparent;
        padding: 0;
    }

        .realname-image-upload .rz-fileupload-buttonbar .rz-fileupload-choose {
            width: 375px;
            height: 256px;
            background-color: transparent;
            color: transparent;
            box-shadow: none;
            border-radius: 0.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

            .realname-image-upload .rz-fileupload-buttonbar .rz-fileupload-choose:not(.rz-state-disabled):hover:not(:active) {
                background-color: rgba(0,0,0,0.1);
                color: #fff;
            }

            .realname-image-upload .rz-fileupload-buttonbar .rz-fileupload-choose .rz-button-text {
                font-size: 1.5rem;
            }

.changed-headimage {
    position: absolute;
}

    .changed-headimage .rz-fileupload-buttonbar {
        background-color: transparent;
        padding: 0;
    }

        .changed-headimage .rz-fileupload-buttonbar .rz-fileupload-choose {
            width: 240px;
            height: 240px;
            background-color: transparent;
            color: transparent;
            box-shadow: none;
            border-radius: 0.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

            .changed-headimage .rz-fileupload-buttonbar .rz-fileupload-choose:not(.rz-state-disabled):hover:not(:active) {
                background-color: rgba(0,0,0,0.1);
                color: #fff;
            }

            .changed-headimage .rz-fileupload-buttonbar .rz-fileupload-choose .rz-button-text {
                font-size: 1.5rem;
            }

.conplete-changed-headimage {
    position: absolute;
}

    .conplete-changed-headimage .rz-fileupload-buttonbar {
        background-color: transparent;
        padding: 0;
    }

        .conplete-changed-headimage .rz-fileupload-buttonbar .rz-fileupload-choose {
            width: 160px;
            height: 160px;
            background-color: transparent;
            color: transparent;
            box-shadow: none;
            border-radius: 0.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

            .conplete-changed-headimage .rz-fileupload-buttonbar .rz-fileupload-choose:not(.rz-state-disabled):hover:not(:active) {
                background-color: rgba(0,0,0,0.1);
                color: #fff;
            }

            .conplete-changed-headimage .rz-fileupload-buttonbar .rz-fileupload-choose .rz-button-text {
                font-size: 1.5rem;
            }

.terms-content {
    text-indent: 2em;
    text-align: justify;
}

    .terms-content > p {
        margin-top: 1em;
        margin-bottom: 1em;
        color: #60697b;
        line-height: 1.7;
        letter-spacing: 0;
    }

img {
    object-fit: cover;
}

.message-button:not(.rz-state-disabled):active {
    background-image: none;
}

.message-button:not(.rz-state-disabled):hover:not(:active) {
    background-image: none;
}

.rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):focus:not(:active), .rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):active {
    background-color: transparent;
    color: var(--rz-primary);
}

.lift {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    transform: translateY(0);
    transition: all 0.3s ease;
}

    .lift:hover {
        transform: translateY(-0.4rem);
        box-shadow: 0rem 0.25rem 1.25rem rgba(52, 63, 82, 0.1);
    }

.beijing {
    background-color: #FF6666;
}

.tianjin {
    background-color: #FF9966;
}

.shanghai {
    background-color: #FFCCCC;
}

.chongqing {
    background-color: #FFCC99;
}

.hebei {
    background-color: #99CCCC;
}

.shanxi1 {
    background-color: #FF9999;
}

.shanxi2 {
    background-color: #996699;
}

.liaoning {
    background-color: #CC9999;
}

.jilin {
    background-color: #CCCC99;
}

.heilongjiang {
    background-color: #CC9966;
}

.jiangsu {
    background-color: #CC9999;
}

.zhejiang {
    background-color: #99CC66;
}

.anhui {
    background-color: #003366;
}

.fujian {
    background-color: #993333;
}

.jiangxi {
    background-color: #CCCC00;
}

.shandong {
    background-color: #663366;
}

.henan {
    background-color: #0066CC;
}

.hubei {
    background-color: #336633;
}

.hunan {
    background-color: #99CC33;
}

.guangdong {
    background-color: #921cd9;
}

.hainan {
    background-color: #66CC33;
}

.sichuan {
    background-color: #0099CC;
}

.guizhou {
    background-color: #009966;
}

.yunnan {
    background-color: #FF9933;
}

.gansu {
    background-color: #009966;
}

.qinghai {
    background-color: #CCCC33;
}

.neimenggu {
    background-color: #CCCC33;
}

.guangxi {
    background-color: #336666;
}

.xizang {
    background-color: #99CCCC;
}

.ningxia {
    background-color: #336699;
}

.xinjiang {
    background-color: #666600;
}

.xianggang {
    background-color: #663366;
}

.aomen {
    background-color: #669966;
}

.taiwan {
    background-color: #003399;
}

.province-base {
    --bs-bg-opacity: 1;
    padding: 0.5rem 0.75rem;
    color: #fff;
}

.home-duo-base {
    background-position: right bottom;
    background-size: 45% auto;
    background-repeat: no-repeat;
    background-clip: border-box;
}

.home-duo-base-1 {
    background-image: url(/img/fenxi.png);
}

.home-duo-base-2 {
    background-image: url(/img/shuju.png);
}

.home-duo-base-3 {
    background-image: url(/img/bangong.png);
}

.rz-treenode-content span {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: block !important;
}

.material-card-deital {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.text-gradient-purple-blue {
    background-color: var(--theme-text-gradient-purple);
    background-image: linear-gradient(90deg, var(--theme-text-gradient-purple), var(--theme-text-gradient-blue));
    color: #0000;
    -webkit-background-clip: text;
    background-clip: text;
}

.rz-header a, .rz-header a:hover, .rz-header a:focus {
    color: var(--rz-link-color) !important;
}

.material-detial-menu .rz-navigation-item {
    border-radius: 0.25rem;
}

.material-detial-menu .rz-navigation-menu .rz-navigation-item .rz-navigation-item-link {
    padding-left: 2rem !important;
}

.material-detial-menu .rz-navigation-item .rz-navigation-item-wrapper {
    border-radius: 0.25rem;
}

    .material-detial-menu .rz-navigation-item .rz-navigation-item-wrapper .rz-navigation-item-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.material-detial-menu .rz-navigation-menu .rz-navigation-item-wrapper {
    background-color: transparent;
}

    .material-detial-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover {
        background-color: var(--rz-panel-menu-item-2nd-level-active-background-color);
    }

.material-detial-menu .rz-navigation-menu .rz-navigation-item-active, .material-detial-menu .rz-navigation-menu .rz-navigation-item-wrapper-active {
    background-color: var(--rz-panel-menu-item-2nd-level-active-background-color);
}

.course-detial-content img {
    width: 100%;
}

.base-keyboard-char {
    height: 5rem;
    width: 5rem;
    font-size: 3em;
    flex-shrink: 0;
    justify-content: center;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.char-need-input {
    background-color: #fff;
    border: 1px solid #e3e3e3;
    color: #e3e3e3;
}

.char-has-input {
    background-color: #ddfde4;
    border: 1px solid #ddfde4;
    color: #67da9c;
}

.char-in-input {
    background-color: #3295db;
    color: #fff;
}

.char-in-input-error {
    animation: dance 0.2s;
    background-color: #ee3f3a;
    color: #fff;
}

.keyboard-key-advanced {
    -webkit-animation: pulse 0.2s;
    animation: pulse 0.2s;
    background-color: #3295db !important;
    color: #fff;
}

.keyboard-key-advanced-need {
    background-color: #3295db !important;
    color: #fff;
}

.keyboard-key-advanced-error {
    -webkit-animation: pulse 0.2s;
    animation: pulse 0.2s;
    background-color: #ee3f3a !important;
    color: #fff;
}

.advanced-keyboard-key {
    height: 3.5vw;
    background-color: #efefee;
    font-size: 1vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 0.3vw;
}

    .advanced-keyboard-key p {
        line-height: 1.1;
    }

.base-syllable-single {
    height: 7rem;
    width: 10rem;
    font-size: 2.5em;
    flex-shrink: 0;
    justify-content: center;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
}

    .base-syllable-single p {
        line-height: 1.2;
        margin-bottom: 0;
    }

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }

    50% {
        -webkit-transform: scale3d(0.9,0.9,0.9);
        transform: scale3d(0.9,0.9,0.9)
    }

    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

@keyframes pulse {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }

    50% {
        -webkit-transform: scale3d(0.9,0.9,0.9);
        transform: scale3d(0.9,0.9,0.9)
    }

    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

@-webkit-keyframes dance {
    0% {
        transform: rotate(0) translateY(0px);
    }

    25% {
        transform: rotate(1deg) translateY(5px);
    }

    50% {
        transform: rotate(-1deg) translateY(0px);
    }

    75% {
        transform: rotate(1deg) translateY(5px);
    }

    100% {
        transform: rotate(0) translateY(0px);
    }
}

@keyframes dance {
    0% {
        transform: rotate(0) translateY(0px);
    }

    25% {
        transform: rotate(1deg) translateY(5px);
    }

    50% {
        transform: rotate(-1deg) translateY(0px);
    }

    75% {
        transform: rotate(1deg) translateY(5px);
    }

    100% {
        transform: rotate(0) translateY(0px);
    }
}

.home-social {
    position: absolute;
    top: 0.1rem;
    left: calc(50% - 5rem);
    width: 10rem;
    height: 2rem;
    background-color: #1B84FF;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    transform: perspective(1rem) rotateX(-4deg) rotateY(0deg) translateZ(0);
}

.home-social-text {
    position: absolute;
    left: calc(50% - 3rem);
    font-size: 1.35rem;
    line-height: 1.4;
    letter-spacing: 0.2rem;
    color: #fff;
}

.about-map-back {
    background-image: url(/img/map.png);
    background-size: auto;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    position: relative;
}

.zhifafenqu-button:hover {
    color: #1B84FF !important;
}
/*原有样式复制*/
/*loading*/
.loading-area {
    width: 100%;
    height: 100vh;
    text-align: center;
    background-color: transparent;
    background-image: linear-gradient(0deg, #bbd3e2, #eedcfa);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.loading-progress {
    position: relative;
    width: 18rem;
    height: 18rem;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    font-size: 2rem;
    margin-bottom: 3rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "\9a6c\4e0a\5c31\597d");
    }

.w-350px {
    width: 350px !important;
}

.h-40px {
    height: 40px !important;
}

.h-60px {
    height: 60px !important;
}

.h-100px {
    height: 100px !important;
}

.w-35 {
    width: 35% !important;
}

@media (min-width: 768px) {
    .w-md-75 {
        width: 75% !important;
    }
}

@media (min-width: 992px) {
    .w-lg-500px {
        width: 500px !important;
    }

    .order-lg-2 {
        order: 2 !important;
    }

    .order-lg-1 {
        order: 1 !important;
    }

    .w-lg-350px {
        width: 350px !important;
    }

    .w-lg-650px {
        width: 650px !important;
    }

    .p-lg-15 {
        padding: 3.75rem !important;
    }

    .py-lg-20 {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }

    .mt-lg-20 {
        margin-top: 5rem !important;
    }

    .h-lg-75px {
        height: 75px !important;
    }

    .mb-lg-20 {
        margin-bottom: 5rem !important;
    }
}

@media (min-width: 1200px) {
    .w-xl-500px {
        width: 500px !important;
    }

    .w-xl-700px {
        width: 700px !important;
    }
}

.flex-center {
    justify-content: center;
    align-items: center;
}


.border-line {
    height: 1px;
    width: 100%;
    background-color: rgba(51,51,51,0.2);
}

.border-line-1 {
    width: 50%;
    height: 5px;
    background-color: #ff6530;
    margin-top: -2px;
    transition: all .4s ease-in-out;
}

.border-line-2 {
    width: 50%;
    height: 5px;
    background-color: #ff6530;
    margin-top: -2px;
    margin-left: 50%;
    transition: all .4s ease-in-out;
}

.stepper-nav {
    display: flex;
    flex-direction: column;
    align-items: start;
}

.stepper-item {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: stretch;
    padding: 0;
    margin: 0;
}

    .stepper-item.current {
        transition: color 0.2s ease;
    }

.stepper-wrapper {
    display: flex;
    align-items: center;
}

.stepper-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    margin-right: 1.5rem;
    z-index: 1;
    transition: color 0.2s ease;
    border: 1px dashed rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.03);
}

.rounded-3 {
    border-radius: 0.625rem !important;
}

.stepper-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stepper-number {
    color: #fff;
    font-size: 1.35rem;
    font-weight: 600;
}

.stepper-item.current .stepper-label .stepper-title {
    opacity: 1;
    color: #fff;
    font-weight: 600;
    margin-bottom: 0;
    font-size: 1.25rem;
}

.stepper-title {
    opacity: 0.7;
    color: #fff;
    font-weight: 600;
    margin-bottom: 0;
    font-size: 1.25rem;
}

.stepper-desc {
    opacity: 0.7;
    color: #fff;
    font-weight: 400;
}

.stepper-line {
    display: block;
    flex-grow: 1;
    margin-left: 23px;
    border-left: 1px dashed rgba(255, 255, 255, 0.3);
    margin-top: 2px;
    margin-bottom: 2px;
}

.stepper-item.current .stepper-icon {
    transition: color 0.2s ease;
    background-color: #50cd89;
    border: 0;
}

.stepper-item.current .stepper-check {
    display: none;
}

.stepper-item.completed .stepper-check {
    color: #50cd89;
    display: inline-block;
    font-size: 1.25rem;
}

.stepper-item.completed .stepper-number {
    display: none;
}

.stepper-item.completed .stepper-title {
    opacity: 1;
}

.stepper-item.pending .stepper-check {
    display: none;
}

.user-head-image {
    width: 75px;
    height: 75px;
    border-radius: 0.75rem;
}

.col-border-bottom-orange-1 {
    border-bottom: 1px solid #ff6530;
}

.col-border-bottom-orange-3 {
    border-bottom: 3px solid #ff6530;
}

.col-border-bottom-blue-1 {
    border-bottom: 1px solid #3499db;
}

.col-border-bottom-blue-3 {
    border-bottom: 3px solid #3499db;
}

.big-select-button {
    border-width: 1px;
    border-style: dashed;
    padding: 1.75rem;
    display: flex;
    align-items: center;
    border-radius: 0.75rem;
    width: 100%;
    background: none;
}

    .big-select-button:focus {
        border-color: #009ef7;
        background-color: #f1faff;
        outline: none;
    }

        .big-select-button:focus .rzi {
            color: #009ef7;
        }

.menu-bottom-area {
    bottom: 0;
    position: fixed;
    text-align: center;
    align-content: center;
    width: var(--rz-sidebar-width);
    padding: 1rem;
}

.mycourse-card-image-radius {
    border-top-left-radius: var(--rz-card-border-radius);
    border-top-right-radius: var(--rz-card-border-radius);
}

.mycourse-card-info-radius {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: var(--rz-card-border-radius);
    border-bottom-right-radius: var(--rz-card-border-radius);
}

.mycourse-card-button-radius {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}

.mycourse-border-bottom {
    border-bottom: 1px solid #ff6530;
}

.border-bottom-gary {
    border-bottom: 1px solid var(--rz-base-300);
}

.syllable-typing-char-detial {
    width: 1.5rem;
    height: 1.5rem;
    text-align: center;
    background-color: #ddd;
    display: inline-block;
    margin-right: 0.25rem;
}

.syllable-typing-syllable-detial {
    text-align: center;
    background-color: #ff0000;
    display: inline-block;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin-right: 0.25rem;
    color: #fff;
}

.syllable-typing-content {
    padding: 2rem;
}

.s-t-l-m {
    margin-right: 1px;
    margin-left: 1px;
}

.syllable-typing-startInput {
    animation: inputchar 1s infinite;
}

@keyframes inputchar {
    0% {
        background: #000;
        color: #fff;
    }

    50% {
        background: #000;
        color: #fff;
    }

    51% {
        background: #fff;
        color: #000;
    }

    100% {
        background: #fff;
        color: #000;
    }
}

.syllable-typing-hidden {
    filter: blur(3px);
}

.s-t-z-s-ud {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.s-t-z-s-udk {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
}

.s-t-z-s-uk {
    color: #fff;
    border-bottom: 1px solid #000;
}

.s-t-hanzi {
    font-size: 1.25rem;
}

.hasInput {
    color: #000;
    border-bottom: none;
}

.justhanzi .syllable-typing-startInput, .justhanzi .s-t-z-s-ud .syllable-typing-startInput {
    animation: inputhanzi 1s infinite;
}

@keyframes inputhanzi {
    0% {
        background: #000;
        color: #000;
    }

    50% {
        background: #000;
        color: #000;
    }

    51% {
        background: #f5f5f5;
        color: #f5f5f5;
    }

    100% {
        background: #f5f5f5;
        color: #f5f5f5;
    }
}

/*上下看打相关样式*/
.row-typing-inputbox-area {
    width: 100%;
    background: transparent;
    outline: none;
    border: none;
    resize: none;
    padding: 0;
    line-break: anywhere;
    text-align: left;
}

    .row-typing-inputbox-area:focus {
        outline: none;
        border: none;
    }

    .row-typing-inputbox-area:hover {
        border: none;
    }

.row-typing-input-style {
    border: 0px;
    border-bottom: 1px solid #808080;
    width: 100%;
    outline: none;
    letter-spacing: 1px;
    padding: 0;
}

.IsCorrect {
    color: #008000;
}

.IsError {
    color: #ff0000;
}

.InlineOut {
    color: #ff0000;
}

.row-typing-border-bottom {
    box-shadow: 0 -5px 2px -5px #000 inset;
}
/*大号字体*/
.row-typing-bottom-border .row-typing-big-size {
    font-size: 2rem;
    color: #000;
    padding-top: 0.5rem;
    row-gap: 2rem;
    letter-spacing: 0.3rem;
}

    .row-typing-bottom-border .row-typing-big-size > span {
        height: 6rem;
    }

.row-typing-should-input .row-typing-big-size {
    font-size: 2rem;
    color: #434343;
    letter-spacing: 0.3rem;
}

    .row-typing-should-input .row-typing-big-size span {
        height: 8rem;
    }

.row-typing-user-input .row-typing-big-size {
    font-size: 2rem;
    line-height: 8rem;
    color: #434343;
    padding-top: 0.75rem;
    letter-spacing: 0.3rem;
}
/*中号字体*/
.row-typing-bottom-border .row-typing-middle-size {
    font-size: 1.5rem;
    color: #000;
    row-gap: 1rem;
    letter-spacing: 0.2rem;
}

    .row-typing-bottom-border .row-typing-middle-size > span {
        height: 5rem;
    }

.row-typing-should-input .row-typing-middle-size {
    font-size: 1.5rem;
    color: #434343;
    letter-spacing: 0.2rem;
}

    .row-typing-should-input .row-typing-middle-size > span {
        height: 6rem;
    }

.row-typing-user-input .row-typing-middle-size {
    font-size: 1.5rem;
    line-height: 6rem;
    color: #434343;
    padding-top: 0.75rem;
    letter-spacing: 0.2rem;
}
/*小号字体*/
.row-typing-bottom-border .row-typing-small-size {
    font-size: 1.2rem;
    color: #000;
    row-gap: 0.8rem;
    letter-spacing: 0.15rem;
}

    .row-typing-bottom-border .row-typing-small-size > span {
        height: 4rem;
    }

.row-typing-should-input .row-typing-small-size {
    font-size: 1.2rem;
    color: #434343;
    letter-spacing: 0.15rem;
}

    .row-typing-should-input .row-typing-small-size > span {
        height: 4.8rem;
    }

.row-typing-user-input .row-typing-small-size {
    font-size: 1.2rem;
    line-height: 4.8rem;
    color: #434343;
    padding-top: 0.75rem;
    letter-spacing: 0.15rem;
}

.row-typing-input-area-scroll {
    height: calc(100% - 11rem);
    overflow: scroll;
}

.margin-bottom-line {
    border-bottom: 1px dotted #808080;
    padding-bottom: 0.25rem;
}

.font-size-115 {
    font-size: 1.15rem;
    letter-spacing: 0.15rem;
}

    .font-size-115 span {
        flex: none !important;
    }

.typing-center .rz-tabview-panels .rz-tabview-panel {
    padding-top: 0;
}

.card-incard-full-width {
    margin: 0 calc(-1 * var(--rz-card-padding));
}

.card-incard-full-width-top {
    border-bottom: 1px solid #808080;
    border-radius: var(--rz-card-border-radius) var(--rz-card-border-radius) 0 0;
}

.card-incard-full-width-bottom {
    border-bottom: 1px solid #808080;
    border-radius: 0 0 var(--rz-card-border-radius) var(--rz-card-border-radius);
}

.typing-center-dataview {
    border: 1px dotted #808080;
}

.w-125px {
    width: 125px;
}

.typing-center-card-background {
    background-position: right top;
    background-size: 30% auto;
    background-repeat: no-repeat;
    background-clip: border-box;
}

.typing-center-icon-text {
    display: flex;
    align-items: center;
    gap: 0.3rem
}

/*键位分区训练样式*/
.char-typing-no-typing {
    color: #000;
}

.char-typing-has-typing {
    color: #c6c6c6;
}

.char-typing-should-typing {
    animation: inputchar 1s infinite;
}

.char-typing-small {
    font-size: 1.5rem;
}

.char-typing-middle {
    font-size: 2rem;
}

.char-typing-big {
    font-size: 3rem;
}

/*左右看打相关样式*/
.leftandright-small {
    font-size: 18px;
    letter-spacing: 2px;
    text-align: justify;
    line-height: 26px;
    user-select: none;
}

.leftandright-middle {
    font-size: 20px;
    letter-spacing: 2px;
    text-align: justify;
    line-height: 30px;
    user-select: none;
}

.leftandright-big {
    font-size: 22px;
    letter-spacing: 2px;
    text-align: justify;
    line-height: 34px;
    user-select: none;
}

@keyframes progressCaption {
    0% {
        background-size: 0 100%;
    }

    100% {
        background-size: 100% 100%;
    }
}

.video-list-dec {
    -webkit-line-clamp: 2;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    font-size: 0.75rem;
}

.w-100px {
    width: 240px;
    height: 100%;
}

.mycourse-course-bottom {
    border-bottom: 1px dashed rgba(0,0,0,0.2);
}

.course-info-list {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.course-info-list-icon {
    font-size: 1rem;
    color: #ff6530;
}

.course-info-price-bg {
    background-image: url(/img/course-price.png);
    background-position-x: 30rem;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.message-info-list {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.message-info-list-icon {
    font-size: 1.25rem;
    color: #3499db;
}

.border-right-line {
    border-right: 1.5px dotted #7b7b7b;
}

.course-function-card {
    box-shadow: var(--rz-shadow-0) !important;
    background-color: #f4f8fb;
}

    .course-function-card:hover {
        box-shadow: var(--rz-shadow-3) !important;
    }

.course-video-button {
    border-bottom-left-radius: var(--rz-border-radius-8);
    border-top-left-radius: var(--rz-border-radius-8);
    border-top-right-radius: var(--rz-border-radius-0);
    border-bottom-right-radius: var(--rz-border-radius-0);
}

@media screen and (max-width:1200px) {
    .hidden-md {
        display: none;
    }
}

.separator {
    display: block;
    height: 0;
    border-bottom: 1px solid #f4f4f4;
}

    .separator.separator-dashed {
        border-bottom-style: dashed;
        border-bottom-color: #E1E3EA;
    }

.dashboard-icon {
    border-radius: 50%;
    font-size: 2rem;
    padding: 2rem;
}

.course-dashboard-little {
    border: 1px dotted var(--rz-base-600);
    width: 8rem;
}

.confirmBox {
    text-align: center;
    line-height: 1.2rem;
    padding-top: 10px;
}

.autoDialogBox {
    min-height: auto;
    min-width: auto;
    width: auto;
}

.dialogImageViewer {
    width: 100% !important;
    height: 100%;
    background: none;
    pointer-events: none;
    transform: none;
    animation-duration: .3s;
    user-select: none;
}

.rz-treenode-children .rz-treenode {
    padding-left: 1rem !important;
}

    .rz-treenode-children .rz-treenode .rz-treenode-children .rz-treenode {
        padding-left: 0 !important;
    }


/*------------------------------*/
.store-container {
    line-height: 0;
    margin: 50px auto;
    width: 50%;
}

.stroke {
    stroke: #0170bb;
    stroke-width: 5;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}

.round-end {
    stroke-linecap: round;
}

#store {
    animation: fadeIn 0.8s ease-in;
}

.border-animation {
    background-color: white;
    border-radius: 10px;
    position: relative;
}

    .border-animation:after {
        content: "";
        background: linear-gradient(45deg, #ccc 48.9%, #0170bb 49%);
        background-size: 300% 300%;
        border-radius: 10px;
        position: absolute;
        top: -5px;
        left: -5px;
        height: calc(100% + 10px);
        width: calc(100% + 10px);
        z-index: -1;
        animation: borderGradient 8s linear both infinite;
    }

@keyframes borderGradient {
    0%, 100% {
        background-position: 0% 100%;
    }

    50% {
        background-position: 100% 0%;
    }
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

#browser {
    transform: translateY(-100%);
    -webkit-animation: moveDown 1.5s cubic-bezier(0.77, -0.5, 0.3, 1.5) forwards;
    animation: moveDown 1.5s cubic-bezier(0.77, -0.5, 0.3, 1.5) forwards;
}

@keyframes moveDown {
    from {
        transform: translate(0, -100%);
    }

    to {
        transform: translate(0, 0);
    }
}

#toldo {
    animation: fadeIn 1s 1.4s ease-in forwards;
}

.grass {
    animation: fadeIn 0.5s 1.6s ease-in forwards;
}

#window {
    animation: fadeIn 0.5s 1.8s ease-in forwards;
}

#door {
    animation: fadeIn 0.5s 2s ease-in forwards;
}

#sign {
    transform-origin: 837px 597px;
    animation: pendulum 1.5s 2s ease-in-out alternate;
}

.trees {
    animation: fadeIn 0.5s 2.2s ease-in forwards;
}

#toldo,
.grass,
#window,
#door,
.trees,
.cat,
.cat-shadow,
.box,
.parachute,
.tshirt,
.cap,
.ball,
#text,
#button,
.sky-circle,
.sky-circle2,
.sky-circle3 {
    opacity: 0;
}

@keyframes pendulum {
    20% {
        transform: rotate(60deg);
    }

    40% {
        transform: rotate(-40deg);
    }

    60% {
        transform: rotate(20deg);
    }

    80% {
        transform: rotate(-5deg);
    }
}

.cat {
    transform-origin: 1145px 620px;
}

.cat-shadow {
    transform-origin: 1115px 625px;
}

#store:hover .cat {
    animation: catHi 3s 3s cubic-bezier(0.7, -0.5, 0.3, 1.4);
}

#store:hover .cat-shadow {
    animation: catShadow 4s 2s cubic-bezier(0.7, -0.5, 0.3, 1.4) alternate;
}

@keyframes catHi {
    0%, 100% {
        opacity: 0;
        transform: scale(0.8);
    }

    10%, 60% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes catShadow {
    0%, 100% {
        transform: translate(40px, -35px) scale(0.3);
    }

    10%, 60% {
        opacity: 1;
        transform: translate(-5px, 10px) scale(0.5);
    }

    60% {
        opacity: 0;
    }
}

.box,
.parachute {
    transform-origin: 430px 100px;
    animation: moveBox 14s 4s linear forwards infinite;
}

.parachute {
    animation: parachute 14s 4s linear forwards infinite;
}

@keyframes moveBox {
    0% {
        opacity: 0;
        transform: translate(0, -150px) rotate(20deg);
    }

    15% {
        opacity: 1;
        transform: translate(0, 100px) rotate(-15deg);
    }

    25% {
        transform: translate(0, 250px) rotate(10deg);
    }

    30% {
        transform: translate(0, 350px) rotate(-5deg);
    }

    35% {
        opacity: 1;
        transform: translate(0, 570px) rotate(0deg);
    }

    45%, 100% {
        opacity: 0;
        transform: translate(0, 570px);
    }
}

@keyframes parachute {
    0% {
        transform: translate(0, -150px) rotate(20deg) scale(0.8);
        opacity: 0;
    }

    15% {
        transform: translate(0, 100px) rotate(-15deg) scale(1);
        opacity: 1;
    }

    25% {
        transform: translate(0, 250px) rotate(10deg);
    }

    30% {
        transform: translate(0, 350px) rotate(-5deg);
    }

    33% {
        transform: translate(0, 460px) rotate(0deg) scale(0.9);
        opacity: 1;
    }

    45%, 100% {
        transform: translate(0, 480px);
        opacity: 0;
    }
}

.tshirt {
    animation: fadeInOut 42s 10s ease-in forwards infinite;
}

.cap {
    animation: fadeInOut 42s 24s ease-in forwards infinite;
}

.ball {
    animation: fadeInOut 42s 38s ease-in forwards infinite;
}

#text,
#button {
    animation: fadeIn 1s 5s ease-in forwards;
}

@keyframes fadeInOut {
    5%, 12% {
        opacity: 1;
    }

    20% {
        opacity: 0;
    }
}

.cloud {
    animation: clouds 50s linear backwards infinite;
}

.cloud2 {
    animation: clouds 40s 40s linear backwards infinite;
}

.plane {
    animation: clouds 30s linear backwards infinite;
    will-change: transform;
}

@keyframes clouds {
    from {
        transform: translate(-150%, 0);
    }

    to {
        transform: translate(150%, 0);
    }
}

.sky-circle {
    animation: fadeInOut 10s 5s ease-in infinite;
}

.sky-circle2 {
    animation: fadeInOut 12s 30s ease-in infinite;
}

.sky-circle3 {
    animation: fadeInOut 8s 40s ease-in infinite;
}

span > i {
    font-variation-settings: "FILL" 1 !important;
}
a > i {
    font-variation-settings: "FILL" 1 !important;
}

a {
    text-decoration: none !important;
}
.rz-rating .rzi-star:before {
    font-variation-settings: "FILL" 1;
}


.hljs {
    display: block;
    overflow-x: auto;
    background: white;
    color: black;
}

.hljs-comment,
.hljs-quote,
.hljs-variable {
    color: #008000;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-built_in,
.hljs-name,
.hljs-tag {
    color: #00f;
}

.hljs-string,
.hljs-title,
.hljs-section,
.hljs-attribute,
.hljs-literal,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-addition {
    color: #a31515;
}

.hljs-deletion,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-meta {
    color: #2b91af;
}

.hljs-doctag {
    color: #808080;
}

.hljs-attr {
    color: #f00;
}

.hljs-symbol,
.hljs-bullet,
.hljs-link {
    color: #00b0e8;
}


.hljs-emphasis {
    font-style: italic;
}

.hljs-strong {
    font-weight: bold;
}