@charset "utf-8";

@font-face {
    font-family: "Work Sans";
    src: url("Work-Sans.ttf");
}

* {
    padding: 0;
    margin: 0;
    border: none;
    list-style: none;
}

html,
body {
    height: 100%;
    width: 100%;
    background: #193c69;
}

body {
    font-size: 12pt;
    font-family: Verdana, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Adobe Heiti Std";
    box-sizing: border-box;
    overflow: hidden;
}

details > summary {
    list-style: inside disclosure-closed;
    color: aliceblue;
}

details[open] > summary {
    list-style: inside disclosure-open;
    color: #f0b050;
}

a:link {
    text-decoration: underline;
}

a:hover {
    text-decoration: none;
}

input,
button,
textarea {
    font-family: Verdana, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Adobe Heiti Std";
    color: #333;
    vertical-align: middle;
    outline: none;
    font-size: 10pt;
}

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
        margin: 0;
    }

    input::-webkit-calendar-picker-indicator {
        display: none;
    }

    input::-webkit-slider-runnable-track {
        -webkit-appearance: none;
        height: 15px;
        border-radius: 8px;
        box-shadow: 0 1px 1px #eee, inset 0.125em 0.125em #111;
    }

    input::-webkit-slider-thumb {
        -webkit-appearance: none;
        height: 27px;
        width: 27px;
        margin-top: -6px;
        background-color: #9bc7ff;
        border-radius: 50%;
        border: 0.125em solid rgba(205, 224, 230, 0.5);
        box-shadow: 0 0.125em 0.125em #444;
    }

select {
    outline: none;
    font-size: 10pt;
}

.disabled {
    cursor: not-allowed !important;
    filter: grayscale(1) !important;
}

.pending {
    cursor: wait !important;
}

label,
input[type="radio"],
input[type="checkbox"] {
    cursor: pointer;
}

    label.static {
        cursor: default;
    }

input[type="range"] {
    opacity: 0.75;
    transition: opacity 0.2s;
}

    input[type="range"]:hover {
        opacity: 1;
    }

input.hidden-file {
    display: none;
}

button.reload {
    padding: 5px 8px;
    background-color: #5b83c2;
    border-radius: 5px;
    color: #fff;
}

video {
    background-color: #eee;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: #64daf1;
}

#page-body {
    height: 100%;
    width: 100%;
    position: relative;
    margin: 0 auto;
}

#stageCanvas {
    height: 100%;
    width: 100%;
    display: block;
}

#page-tip {
    text-align: center;
    line-height: 2em;
    width: 340px;
    margin: 120px auto 0;
}

div.ele {
    position: absolute;
    display: none;
    left: 0;
    top: 0;
}

div.flex-horz {
    display: flex;
    flex-flow: row nowrap;
}

.autosize {
    width: fit-content;
    height: fit-content;
}

.form.dialog-flex .flex-horz {
    justify-content: space-between;
}

.form.dialog-flex .fixed {
    display: -webkit-box;
    -webkit-box-align: center;
    width: 100%;
}

.form {
    color: #fff;
}

    .form .flex-wrapper {
        min-height: 20px;
        max-height: 50px;
        margin: 4px 0;
    }

    .form .row-label {
        color: #9bc7ff;
        padding: 0 10px;
    }

    .form .input {
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        background: #1b599780;
        border: 1px solid #2b8cdd;
        color: #9bc7ff;
        padding: 0px 10px;
        min-height: 20px;
        max-height: 50px;
        border-radius: 15px;
        -webkit-appearance: none;
        -moz-appearance: none;
        transition: border-color 0.2s, background 0.2s;
    }

        .form .input:hover {
            border-color: #5b83c2;
            background: #1b5997;
        }

        .form .input:focus {
            border-color: #d0e5f7;
            background: #1b5997;
        }

    .form input[type="range"] {
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        background: #1b5997;
        color: #9bc7ff;
        border-radius: 8px;
        -webkit-appearance: none;
        -moz-appearance: none;
        min-height: fit-content !important;
        height: fit-content;
        position: relative;
        left: 50%;
        top: 50%;
        display: block;
        transform: translate(-50%, -50%);
    }

    .form .settings-input {
        width: calc(100% - 6px);
    }

    .form .wide-thumb::-webkit-slider-thumb {
        -webkit-appearance: none;
        height: 27px;
        width: 48px;
        margin-top: -6px;
        background-color: #9bc7ff;
        border-radius: 13.5px;
        border: 0.125em solid rgba(205, 224, 230, 0.5);
        box-shadow: 0 0.125em 0.125em #42474e;
    }

    .form .settings-input + span {
        height: 27px;
        width: 48px;
        display: inline-block;
        line-height: 27px;
        text-align: center;
        color: #000;
        text-overflow: ellipsis;
        z-index: 2;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        pointer-events: none;
        user-select: none;
        font-size: 85%;
    }

    .form ::-webkit-input-placeholder {
        color: #9bc7ff;
    }

    .form ::-moz-placeholder {
        color: #9bc7ff;
    }

    .form :-ms-input-placeholder {
        color: #9bc7ff;
    }

    .form input[type="radio"] {
        margin-right: 10px;
        height: 20px;
        width: 20px;
    }

    .form input[type="checkbox"] {
        margin-right: 10px;
        height: 20px;
        width: 20px;
    }

    .form label {
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        padding: 0 10px;
        color: #9bc7ff;
        display: inline-block;
    }

    .form .button {
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        background: url("bg2.png") repeat-x 0 0;
        height: 100%;
        border-radius: 15px;
        border: 1px solid #5b83c2;
        -webkit-appearance: none;
        -moz-appearance: none;
        cursor: pointer;
        user-select: none;
    }

        .form .button.primary {
            background-image: url("bg1.png");
            color: #fff;
            min-height: 50px;
            width: 100%;
        }

            .form .button.primary.half {
                width: 50%;
            }


    .form.entry {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
    }

    .form.logout {
        max-width: 360px;
        margin: auto;
    }

    .form.register .refer {
        display: none;
    }

    .form.reset .resetoption {
        display: none;
    }

    .form.common {
        min-width: 540px;
        max-width: 1080px;
        width: 80%;
        margin: auto;
    }

    .form.fullwidth {
        min-width: 540px;
        width: 90%;
        margin: auto;
    }

    .form.msgbox {
        border: 2px solid #5b83c2;
        border-radius: 20px;
        background-color: #1b5997;
    }

    .form.msgbgbox {
        border: none;
        background: url(housebg.png) no-repeat;
        background-size: 100% 100%;
    }

    .form.msgbox .button {
        width: 90px;
        height: 30px;
    }

    .form textarea {
        resize: none;
        width: 100%;
        min-height: 90px;
    }

    .form a {
        color: #d0e5f7;
        text-decoration: none;
    }

    .form label a {
        text-decoration: underline;
    }

    .form a.underscore {
        text-decoration: underline;
    }

    .form .copyright {
        height: 32px;
        line-height: 32px;
        color: #d0e5f7;
        text-align: center;
    }

    .form .reginfo {
        height: 32px;
        line-height: 32px;
        color: #d0e5f7;
        font-size: 12pt;
        text-align: left;
    }

.form-register-icon {
    height: 32px;
    width: 32px;
    margin-right: 16px;
    vertical-align: top;
}

.btnPrimary {
    background-image: url("bg1.png");
    color: #fff;
    min-height: 50px;
    padding: 0 40px;
    border-radius: 15px;
    border: 1px solid #5b83c2;
    cursor: pointer;
}

.btnSizeMedium {
    min-height: 36px;
    padding: 0 20px;
}

.centered {
    text-align: center;
}

.pop-title {
    border-bottom: 1px solid #5b83c2;
    padding: 6px 0;
    font-size: 11pt;
    min-height: 30px;
    line-height: 30px;
}

.pop-title-large {
    font-size: 16pt;
}

.pop-buttons {
    border-top: 1px solid #5b83c2;
    padding: 6px 0;
    height: 30px;
}

.pop-text {
    padding: 6px 9px;
}

.pop-icon {
    padding: 6px 9px;
}

.pop-content {
    padding: 6px 9px;
}

#prompt-fields textarea {
    height: 120px;
    padding: 10px;
    max-height: 120px !important;
}

#trophy-image {
    width: 452px;
    height: 414px;
    border: none;
    padding: 6px 9px;
}

#trophy-name {
    font-size: 16pt;
    height: 24px;
    line-height: 24px;
    padding: 6px 9px;
    color: #fc0;
}

#trophy-desc {
    color: #fff;
    padding: 6px 9px;
}

#trophy-bonus {
    font-size: 14pt;
    color: #9bc7ff;
    padding: 6px 9px;
}

.trophy-bonus-item {
    display: inline-block;
    width: 110px;
    margin: 0px 3px;
    line-height: 36px;
}

#tooltip-div,
#inputhint-div {
    display: block;
    width: 100% !important;
    height: 0 !important;
}

.tooltip {
    position: absolute;
    max-width: 100vw;
    max-height: 100vh;
    color: white;
    line-height: 1.1;
    border: 1.5px solid #85939c;
    background-color: rgba(15, 57, 90, 0.9);
    padding: 4px;
    border-radius: 4px;
    box-shadow: 0 0 20px #000;
    -moz-box-shadow: 0 0 20px #000;
    -webkit-box-shadow: 0 0 20px #000;
    z-index: 1098;
    display: none;
    box-sizing: border-box;
    white-space: pre-wrap;
}

    .tooltip a {
        text-decoration: underline;
        color: white;
        font-weight: normal;
    }

    .tooltip .moretip {
        white-space: normal;
        font-style: italic;
    }

.showPageTip .tooltip {
    display: block !important;
}

    .showPageTip .tooltip::before {
        content: " ";
        width: 0;
        height: 0;
        display: block;
        box-sizing: border-box;
        position: absolute;
        z-index: 1;
    }

    .showPageTip .tooltip.tipPlacement-top {
        transform: translate(0, -5px);
    }

    .showPageTip .tooltip.tipPlacement-bottom {
        transform: translate(0, 5px);
    }

    .showPageTip .tooltip.tipPlacement-left {
        transform: translate(-5px, 0px);
    }

    .showPageTip .tooltip.tipPlacement-right {
        transform: translate(5px, 0px);
    }

.tooltip.tipPlacement-top::before {
    border-top: 4px solid #85939c;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
}

.tooltip.tipPlacement-bottom::before {
    border-bottom: 4px solid #85939c;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
}

.tooltip.tipPlacement-left::before {
    border-left: 4px solid #85939c;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

.tooltip.tipPlacement-right::before {
    border-right: 4px solid #85939c;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

.tooltip.tipPlacement-top.arrowPlacement-left::before {
    top: 100%;
    transform: translate(0, 30%);
    left: 10px;
}

.tooltip.tipPlacement-top.arrowPlacement-center::before {
    top: 100%;
    left: 50%;
    transform: translate(-50%, 30%);
}

.tooltip.tipPlacement-top.arrowPlacement-right::before {
    top: 100%;
    right: 10px;
    transform: translate(0, 30%);
}

.tooltip.tipPlacement-bottom.arrowPlacement-left::before {
    bottom: 100%;
    left: 10px;
    transform: translate(-50%, -30%);
}

.tooltip.tipPlacement-bottom.arrowPlacement-center::before {
    bottom: 100%;
    left: 50%;
    transform: translate(0%, -30%);
}

.tooltip.tipPlacement-bottom.arrowPlacement-right::before {
    bottom: 100%;
    right: 10px;
    transform: translate(0%, -30%);
}

.tooltip.tipPlacement-left.arrowPlacement-center::before {
    left: 100%;
    top: 50%;
    transform: translate(30%, -50%);
}

.tooltip.tipPlacement-right.arrowPlacement-center::before {
    left: 0%;
    top: 50%;
    transform: translate(-130%, -50%);
}

div.qrlogin > div {
    text-align: center;
}

.login-qr {
    max-width: calc(100vw - 50px);
    max-height: calc(100vh - 330px);
    padding: 8px;
}

div.anime-fx {
    background-repeat: no-repeat;
}

@keyframes anime {
    from {
        background-position-y: 0%;
    }

    to {
        background-position-y: 100%;
    }
}

div.tool-search .button {
    background-image: url("search.png");
    cursor: pointer;
}

div.tool-settings .button {
    background-image: url("settings.png");
    cursor: pointer;
}

div.tool-exit .button {
    background-image: url("exit.png");
    cursor: pointer;
}

div.tool-help .button {
    background-image: url("help.png");
    cursor: pointer;
}

#galaxy-pop {
    overflow: hidden;
    top: auto !important;
    left: 10px;
    bottom: 46px;
}

    #galaxy-pop a.link {
        float: right;
        border: none;
        width: 16px;
        height: 16px;
        margin-left: 8px;
    }

    #galaxy-pop a img {
        width: 100%;
        height: 100%;
    }

    #galaxy-pop .title {
        color: #fff;
        font-size: 11pt;
        padding-bottom: 6px;
    }

    #galaxy-pop .description,
    #galaxy-pop .information {
        color: #d0e5f7;
        font-size: 10pt;
        padding: 3px 0px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

#feedback-sense,
#task-sense {
    z-index: 9;
}

#results-sense {
    z-index: 1199;
}

ul.sense-list {
    border: 1px solid #2b8bdc;
    background-color: #184677;
    height: auto;
    max-height: 260px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    border-radius: 0px 0px 10px 10px;
    line-height: 1.5;
}

    ul.sense-list li {
        margin: 0;
        padding: 1px 3px;
        font-size: 120%;
        min-height: 24px;
        color: #d0e5f7;
    }

        ul.sense-list li.sel {
            background-color: #19609d;
        }

a.marker-speaker {
    text-decoration: none;
    color: #2b8cdb;
}

#radar-tag {
    left: 50%;
    top: 50%;
    transform: none !important;
    z-index: 2;
}

    #radar-tag ul.ring-tag {
    }

        #radar-tag ul.ring-tag li {
            position: absolute;
        }

        #radar-tag ul.ring-tag a {
            position: absolute;
            transform: translateX(-50%) translateY(-50%) !important;
            -moz-transform: translateX(-50%) translateY(-50%) !important;
            width: 80px;
            height: 80px;
            border: 5px solid #1c609e;
            padding: 10px;
            background-color: #184677;
            border-radius: 50%;
            box-sizing: border-box;
        }

        #radar-tag ul.ring-tag li.active a {
            background-color: #227cb0;
            border: 5px solid #30f5f7;
        }

        #radar-tag ul.ring-tag li.active img {
            opacity: 1;
        }

        #radar-tag ul.ring-tag img {
            width: 80%;
            height: auto;
            margin: 10%;
            opacity: 0.6;
        }

        #radar-tag ul.ring-tag.small a {
            padding: 5px;
            width: 50px;
            height: 50px;
        }

        #radar-tag ul.ring-tag.small img {
        }

        #radar-tag ul.ring-tag .ring {
            position: absolute;
            transform: translateX(-50%) translateY(-50%) !important;
            -moz-transform: translateX(-50%) translateY(-50%) !important;
            width: 140px;
            height: 140px;
            border: 1px solid #1c609e;
            border-radius: 50%;
        }

        #radar-tag ul.ring-tag .point {
            position: absolute;
            top: -20px;
            right: -20px;
            width: 10px;
            height: 10px;
            background-color: #fc0;
            border-radius: 5px;
        }

    #radar-tag #radar-tag ul.ring-tag li.warning .ring {
        border-color: #fc0;
    }

    #radar-tag .page-pagination {
        width: 240px;
        height: 40px;
        transform: translateX(-50%) translateY(-100%);
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #fff;
    }

        #radar-tag .page-pagination .page {
            width: 40px;
            height: 40px;
            border-radius: 20px;
            border: 2px solid #1c609e;
            background-color: #184677;
            box-sizing: border-box;
            cursor: pointer;
            display: inline-block;
            background-size: 60%;
            background-position: center;
            background-repeat: no-repeat;
        }

        #radar-tag .page-pagination .pageNumber {
            color: #19609d;
        }

            #radar-tag .page-pagination .pageNumber b {
                color: #fff;
                font-weight: normal;
            }

        #radar-tag .page-pagination .disabled {
            opacity: 0.5;
        }

        #radar-tag .page-pagination .prev {
            background-image: url('./icon/iconLeft.svg')
        }

        #radar-tag .page-pagination .next {
            background-image: url('./icon/iconRight.svg')
        }

#radar-list {
    z-index: 1;
}

    #radar-list a.btn {
        position: absolute;
        width: 0;
        height: 0;
        top: 0;
        right: 0;
        border: 20px solid #2b8cdb;
        border-left-color: transparent;
        border-bottom-color: transparent;
    }

        #radar-list a.btn img {
            width: 20px;
            height: 20px;
            position: absolute;
            top: -18px;
        }

div.side-title {
    font-size: 10pt;
    color: #fff;
    font-weight: normal;
    line-height: 40px;
    height: 40px;
    margin-left: 25px;
}

ul.side-list {
    font-size: 9pt;
    margin-left: 8px;
    padding-right: 5px;
    line-height: 2em;
    height: calc(100% - 40px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

    ul.side-list li {
        color: #9dc3e2;
        padding-left: 20px;
        position: relative;
    }

    ul.side-list a.title {
        float: left;
        color: #d0e5f7;
        text-decoration: none;
    }

    ul.side-list a:link {
        color: #9dc3e2;
    }

    ul.side-list a:hover {
        color: #fff;
    }

    ul.side-list .icon {
        position: absolute;
        width: 14px;
        height: 14px;
        left: 0;
        top: 5px;
        background: url("star-b.png") no-repeat 50% 50%;
        background-size: 14px;
    }

        ul.side-list .icon.active {
            background-image: url("star-a.png");
        }

div.message-block {
    margin-left: 90px;
    height: 100%;
}

ul.message-tag {
    width: 80px;
    float: left;
    overflow: hidden;
}

    ul.message-tag li {
        margin-bottom: 5px;
        margin-left: 10px;
        background: linear-gradient(45deg, transparent 10px, #19609d 0) left;
        user-select: none;
    }

    ul.message-tag a {
        display: block;
        height: 30px;
        padding: 5px 0;
        text-align: center;
        position: relative;
    }

    ul.message-tag img {
        width: 30px;
        height: 30px;
        opacity: 0.6;
    }

    ul.message-tag li.active {
        margin-left: 0;
        background: linear-gradient(45deg, transparent 10px, #2b8ada 0) left;
    }

        ul.message-tag li.active img {
            opacity: 1;
        }

    ul.message-tag .uDot {
        position: absolute;
        font-size: 12px;
        min-width: 16px;
        height: 16px;
        line-height: 16px;
        border-radius: 8px;
        padding: 0 2px;
        background-color: rgba(242, 64, 73, 0.8);
        color: #fff;
        text-align: center;
        display: block;
        white-space: nowrap;
        box-shadow: 0 0 0 1px #fff;
        top: 2px;
        right: 2px;
        transform: scale(0.6);
        box-sizing: border-box;
        font-weight: bold;
    }

ul.message-list {
    color: #d0e5f7;
    padding: 0 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

    ul.message-list li {
        border-bottom: 1px solid #517ea9;
        padding: 15px 0;
    }

    ul.message-list a {
        color: #d0e5f7;
        text-decoration: none;
    }

        ul.message-list a:hover {
            text-decoration: underline;
        }

    ul.message-list .label {
        color: #fff;
    }

    ul.message-list .links {
        float: right;
        margin-left: 5px;
    }

    ul.message-list .meta {
        margin-bottom: 10px;
    }

    ul.message-list .text {
        margin-left: 20px;
    }

    ul.message-list.col3 {
        font-size: 0.9em;
    }

        ul.message-list.col3 li {
            width: 33%;
            float: left;
        }

div.message-filter {
    padding-top: 15px;
    border-bottom: 1px solid #517ea9;
    height: 75px;
}

div.message-search {
    background-color: #185b97;
    width: 400px;
    margin: 0 auto;
    border: 2px solid #2b8bdc;
    border-radius: 20px;
    padding-left: 15px;
}

    div.message-search .input {
        background-color: #185b97;
        height: 30px;
        width: 360px;
        color: #fff;
        color: #2b8bdc;
    }

    div.message-search .button {
        width: 30px;
        height: 30px;
        background: url("search.png") no-repeat 50% 50%;
    }

div.message-text {
    color: #d0e5f7;
    text-align: center;
    margin-top: 10px;
}

    div.message-text .num {
        color: #fff;
        font-weight: normal;
    }

div.page-control {
    position: absolute;
    display: none;
    inset: auto 50px 50px auto;
    width: 150px;
}

#task-page {
    inset: auto 0px -50px auto;
}

div.messages-page {
    width: 100%;
}

a.page {
}

    a.page img {
        width: 50px;
    }

    a.page.prev {
        float: left;
    }

    a.page.next {
        float: right;
    }

div.pageNumber {
    color: #19609d;
    text-align: center;
    line-height: 28px;
}

    div.pageNumber b {
        color: #fff;
    }

#profile-div {
}

    #profile-div .avatar {
        float: left;
        width: 80px;
        height: 80px;
        position: relative;
    }

    #profile-div .face {
        width: 100%;
        height: 100%;
        border-radius: 40px;
    }

    #profile-div .gender {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 20px;
        height: 20px;
        border-radius: 10px;
    }

    #profile-div .meta {
        margin-left: 90px;
        color: #d0e5f7;
        font-size: 9pt;
        line-height: 2em;
    }

    #profile-div .title {
        font-size: 12pt;
        color: #fff;
        font-weight: normal;
        margin-bottom: 4px;
    }

    #profile-div .description {
        line-height: 1.3;
        word-break: break-all;
    }

    #profile-div .text {
        margin-right: 15px;
    }

    #profile-div .status {
        color: #1f77c3;
    }

        #profile-div .status i {
            width: 10px;
            height: 10px;
            background-color: #1f77c3;
            border-radius: 5px;
            display: inline-block;
        }

        #profile-div .status.on {
            color: #30f5f7;
        }

            #profile-div .status.on i {
                background-color: #30f5f7;
                box-shadow: 0 0 6px;
            }

    #profile-div .button {
        font-size: 9pt;
        background-color: #19609d;
        color: #d0e5f7;
        padding: 3px 10px;
        border-radius: 15px;
    }

a.eye-switch {
    float: right;
    opacity: 0.4;
    margin-right: -30px;
    margin-top: 10px;
    display: none;
}

    a.eye-switch.on {
        opacity: 1;
    }

    a.eye-switch img {
        width: 20px;
    }

div.profile-title {
    color: #fff;
    padding: 10px 20px;
}

#history-div {
}

ul.his-list {
    height: calc(100% - 40px);
    padding: 0 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

    ul.his-list li {
        color: #d0e5f7;
    }

#cup-div {
}

ul.cup-list {
    padding: 0 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

    ul.cup-list li {
        float: left;
        width: 40px;
        height: 38px;
        padding: 5px 10px;
    }

    ul.cup-list img {
        width: 40px;
        height: 38px;
    }

#logs-div {
    padding-left: 20px;
    padding-top: 10px;
}

div.log-title {
    font-size: 12pt;
    color: #fff;
    font-weight: normal;
    margin-bottom: 10px;
}

ul.log-list {
    color: #d0e5f7;
    font-size: 10pt;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#logs-tip {
    color: #30f5f7;
    padding-left: 20px;
    padding-top: 10px;
}

div.tip-title {
    font-size: 12pt;
    font-weight: normal;
    margin-bottom: 10px;
}

ul.tip-list {
    font-size: 10pt;
    line-height: 20px;
    overflow: hidden;
}

#feedback-div,
#feedback-playlist {
    line-height: 2em;
    height: 100%;
    box-sizing: border-box;
}

div.feedback-text {
    overflow: hidden;
    color: #d0e5f7;
    line-height: 2;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    text-align: center;
}

    div.feedback-text * {
        text-align: left;
    }

    div.feedback-text p {
        margin-bottom: 15px;
        text-align: left;
    }

div.feedback-title h3 {
    font-weight: normal;
}

/* 1 跳过视频答题按钮 */
.btnStartQuestExercise {
    cursor: pointer;
    border: #22c6fb 2px solid;
    border-radius: 12px;
    display: inline-block;
    padding: 0px 8px;
    color: #fff;
    line-height: 30px;
    background: linear-gradient( 0deg, rgba(110, 240, 252, 0) 0%, rgba(110, 240, 252, 0.7) 99% );
}

div.feedback-text .highlight {
    color: #fff;
}

div.feedback-text .marking,
div.feedback-text .keyword {
    color: #d0e5f7;
    text-decoration: underline;
    padding: 0 3px;
    cursor: pointer;
}

    div.feedback-text .marking:hover,
    div.feedback-text .keyword:hover {
        color: #fff;
    }

    div.feedback-text .marking.active {
        color: #223d4f;
        background-color: #30f5f7;
    }

div.feedback-text input[type="radio"] {
    margin: 0 10px;
    height: 20px;
    width: 20px;
}

div.feedback-text input[type="checkbox"] {
    margin: 0 10px;
    height: 20px;
    width: 20px;
}

div.feedback-text .feedback-quiz {
    margin-left: 20px;
    line-height: 2;
}

    div.feedback-text .feedback-quiz h4 {
        font-size: 15px;
        text-indent: -15px;
        font-weight: normal;
    }

div.feedback-text .feedback-quiz-hint {
    padding-left: 20px;
    display: none;
}

div.feedback-text .feedback-quiz-more {
    padding-left: 20px;
}

div.feedback-text .feedback-quiz-button {
    font-size: 100%;
    background-color: #19609d;
    color: #d0e5f7;
    margin: 3px 5px;
    padding: 3px 10px;
    border-radius: 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

    div.feedback-text .feedback-quiz-button:hover {
        color: #f0f8ff;
    }

    div.feedback-text .feedback-quiz-button:active {
        background-color: #2d8bdc;
    }

div.feedback-text .feedback-quiz-imagebox {
    position: relative;
    max-width: 80%;
}

    div.feedback-text .feedback-quiz-imagebox img {
        border: none;
        width: fit-content;
        max-width: -webkit-fill-available;
    }

div.feedback-text .feedback-anime {
    position: relative;
}

div.feedback-text .feedback-script {
    font-size: 125%;
    line-height: 1.2;
    color: #fff;
    position: absolute;
    z-index: 9;
    width: 100%;
    bottom: 36px;
    padding: 8px;
    text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.8);
    box-sizing: border-box;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

div.feedback-text .feedback-quiz-optionarea {
    font-size: 100%;
}

div.feedback-text .feedback-quiz-option {
    display: inline-block;
    font-size: 100%;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    padding: 5px 8px;
    margin: 8px;
    line-height: 30px;
    border: 1px solid #2b8cdb;
    color: #d0e5f7;
    background: none;
    border-radius: 20px;
    -webkit-appearance: none;
    -moz-appearance: none;
    vertical-align: top;
}

    div.feedback-text .feedback-quiz-option:hover {
        border: 1px solid #30f5f7;
    }

div.feedback-text .feedback-quiz-textbox-single {
    display: inline;
    min-width: 120px;
    cursor: text;
    font-size: 100%;
    background: none;
    font-weight: normal;
    padding-left: 10px;
    padding-right: 10px;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #d0e5f7;
    color: #d0e5f7;
}

div.feedback-text .feedback-quiz-select {
    border: 1px solid #d0e5f7;
    color: #d0e5f7;
    background-color: #19609d;
    font-weight: normal;
    font-family: Verdana, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Adobe Heiti Std";
    min-height: 24px;
    border-radius: 4px;
    font-size: 15px;
}

    div.feedback-text .feedback-quiz-select option {
        background: none;
        min-height: 24px;
        border-radius: 4px;
        font-size: 15px;
        font-weight: normal;
        font-family: Verdana, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Adobe Heiti Std";
    }

div.feedback-text .feedback-quiz-matchtable {
    border: none;
    width: 100%;
}

div.feedback-text .feedback-quiz-matchblock {
    display: flex;
    flex-direction: column;
    margin: 4px;
}

div.feedback-text .feedback-quiz-matchleft-item {
    text-align: left;
    border: none;
    color: #d0e5f7;
    height: 25px;
    line-height: 25px;
    overflow: visible;
    padding-left: 15px;
    margin: 4px;
}

div.feedback-text .feedback-quiz-matchright-item {
    text-align: left;
    border: 1px solid #2b8cdb;
    text-decoration: none;
    color: #d0e5f7;
    height: 25px;
    padding-left: 15px;
    margin: 4px;
    line-height: 25px;
    overflow: visible;
    width: 85%;
    border-radius: 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
}

div.feedback-text .feedback-quiz-textbox-multi {
    font-size: 100%;
    color: #d0e5f7;
    border: 1px solid #d0e5f7;
    background: none;
    max-width: 940px;
    width: 100%;
    height: 15%;
    min-height: 120px;
}

div.feedback-text .feedback-quiz-option.selected {
    border: 1px solid #30f5f7;
    background-color: #30f5f780;
    color: white;
    text-decoration: none;
}

div.feedback-text .feedback-quiz-option.correct {
    border: 1px solid #30a030;
    background-color: #30a03080;
    text-decoration: none;
}

div.feedback-text .feedback-quiz-option.incorrect {
    border: 1px solid #c02020;
    background-color: #c0202080;
    text-decoration: none;
    color: gray;
}

div.feedback-text .feedback-quiz-option {
    position: relative;
}

    div.feedback-text .feedback-quiz-option::after {
        content: " ";
        width: 40px;
        height: 36px;
        display: block;
        position: absolute;
        bottom: 0;
        right: 10px;
        background-position: right center;
        background-size: 16px;
        background-repeat: no-repeat;
    }

    div.feedback-text .feedback-quiz-option.correct::after {
        background-image: url(icon_status3.png);
    }

    div.feedback-text .feedback-quiz-option.incorrect::after {
        background-image: url(icon_status1.png);
    }

    div.feedback-text .feedback-quiz-option.notified {
        border: 1px solid #70c030;
        background-color: #70c03080;
        text-decoration: none;
    }

div.feedback-text ::-webkit-input-placeholder {
    color: #d0e5f7;
}

div.feedback-text ::-moz-placeholder {
    color: #d0e5f7;
}

div.feedback-text :-ms-input-placeholder {
    color: #d0e5f7;
}

div.feedback-text .centered {
    text-align: center;
}

div.feedback-text .score {
    font-size: 125%;
    color: #f0b050;
    font-weight: normal;
}

div.feedback-text .quest-area {
    line-height: 1.8;
    margin: 10px 0px;
}

div.feedback-text audio,
div.feedback-text video {
    outline: none;
}

div.feedback-text .feedback-audio {
    height: 30px;
}

@media screen and (max-width: 864px) {
    div.feedback-text .feedback-quiz-option {
        width: calc(100% - 34px);
    }
}

@media screen and (min-width: 864px) and (max-width: 1680px) {
    div.feedback-text .feedback-quiz-option {
        width: calc(50% - 34px);
    }
}

@media screen and (min-width: 1680px) {
    div.feedback-text .feedback-quiz-option {
        width: calc(25% - 34px);
    }
}

ul.feedback-list {
    color: #30f5f7;
    line-height: 1.5;
}

    ul.feedback-list li {
        position: absolute;
        left: 0;
        right: 0;
        height: 2em;
        padding: 0 8px;
        background-color: #1f6a7f;
        overflow: hidden;
        opacity: 0.7;
        display: none;
    }

        ul.feedback-list li.open {
            border: 1px solid #30f5f7;
            height: auto;
            opacity: 1;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            display: block;
        }

            ul.feedback-list li.open a {
                text-decoration: underline;
                color: #30f5f7;
            }

    ul.feedback-list p {
        margin-bottom: 5px;
    }

#calendar-div {
    font-size: 10pt;
}

div.calendar-nav {
    padding: 10px 0;
    text-align: center;
    line-height: 20px;
    max-width: 320px;
    margin: auto;
}

    div.calendar-nav .nav {
        color: #d0e5f7;
        padding: 0 10px;
        border-radius: 30%;
        cursor: pointer;
        user-select: none;
    }

        div.calendar-nav .nav img {
            max-width: 14px;
            vertical-align: middle;
        }

        div.calendar-nav .nav:hover {
            background-color: rgba(224, 224, 224, 0.25);
        }

    div.calendar-nav .prev {
        float: left;
    }

    div.calendar-nav .next {
        float: right;
    }

    div.calendar-nav .title {
        color: #fff;
    }

table.calendar-table {
    height: calc(100% - 40px);
    font-size: 10pt;
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    overflow: scroll;
}

    table.calendar-table th {
        text-align: center;
        color: #132b50;
        background-color: #265e92;
    }

    table.calendar-table td {
        color: #eee;
        text-align: center;
        cursor: pointer;
        user-select: none;
    }

        table.calendar-table td div {
            display: -webkit-inline-box;
            -webkit-box-align: center;
            -webkit-box-pack: center;
            border-radius: 50%;
            width: 100%;
            height: 100%;
            max-width: 80px;
            max-height: 80px;
        }

            table.calendar-table td div:hover {
                background-color: rgba(224, 224, 224, 0.25);
            }

        table.calendar-table td.today div {
            background-color: rgba(192, 128, 64, 0.25);
        }

        table.calendar-table td.task div {
            color: #d0e5f7;
            font-weight: normal;
        }

        table.calendar-table td.active div {
            background-color: rgba(48, 245, 247, 0.25);
        }

#calendar-list {
    color: #d0e5f7;
    font-size: 10pt;
}

div.calendar-title {
    font-weight: normal;
    color: #fff;
    padding: 10px 0px;
    margin: 0 20px;
    line-height: 20px;
    border-bottom: 1px solid #5281ad;
}

ul.calendar-tag {
    float: right;
    display: none;
}

    ul.calendar-tag a {
        color: #d0e5f7;
        text-decoration: none;
    }

    ul.calendar-tag li {
        float: left;
        padding: 0 10px;
    }

        ul.calendar-tag li.active {
            font-weight: normal;
            color: #fff;
        }

            ul.calendar-tag li.active a {
                color: #fff;
            }

ul.calendar-task {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 20px;
    height: calc(100% - 40px);
}

    ul.calendar-task a {
        color: #d0e5f7;
        text-decoration: none;
    }

    ul.calendar-task li {
        border-bottom: 1px solid #5281ad;
        padding: 10px 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

        ul.calendar-task li.link {
            padding: 10px 0 10px 20px;
            background: url('./icon/iconArrowRight.svg') no-repeat center left/12px;
        }

    ul.calendar-task .label {
        font-weight: normal;
        color: #fff;
    }

div.layout-horz {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 10px 0;
    height: calc(100% - 120px);
}

div.horz-column {
    height: 100%;
}

div#post-control {
    height: 50px;
}

div#post-control-2 {
    height: 50px;
    padding-top: 10px;
    display: none;
}

div.editor {
    color: #d0e5f7;
    margin: 0 10px;
    width: calc(100% - 20px);
    height: 100%;
    position: absolute;
}

#framelist {
    display: flex;
    flex: 1;
    flex-flow: column nowrap;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 72px;
    width: -webkit-fill-available;
}

#framecontainer {
    margin: 0 20px;
    position: relative;
    z-index: 0;
    aspect-ratio: 16/9;
    max-width: calc(100% - 312px);
}

#frameeditor,
#frameplayer {
    width: 100%;
    height: 100%;
}

.framewrapper {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    border: 1px solid #2b8cdb;
    display: none;
    box-sizing: border-box;
}

.framelayer {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    position: absolute;
    left: 0;
    top: 0;
}

.framebase {
    z-index: 2;
}

.framestage {
    z-index: 3;
}

.selectable {
    margin: 2px;
    padding: 0;
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    cursor: pointer;
    flex-shrink: 0;
    border: 1px solid #2b80db;
}

.selected {
    border: 1px solid #ad8152;
}

.selectable:hover {
    border: 1px solid #ff0000;
}

.frameitem,
.frameholder {
    position: relative;
    width: calc(100% - 4px);
    aspect-ratio: 16/9;
    box-sizing: content-box;
}

#resselector {
    width: 200px;
    height: 100%;
}

#rescategory {
    display: flex;
    flex-wrap: wrap;
    width: 200px;
    height: 40px;
}

/* 新增预览控制区，默认隐藏 */
#frameControl {
    display: none;
}

/* 为搜索增加外框，默认隐藏同ressearch */
#topSearchCategory {
    display: none;
    position: relative;
    width: 200px;
    height: 38px;
}

    /* 为搜索增加外框右侧分类 */
    #topSearchCategory .category {
        display: none;
    }

/* 搜索限制宽度 */
#ressearch {
    width: 200px;
    height: 28px;
}

#resident {
    width: 200px;
    height: 28px;
    padding: 2px 0;
    display: none;
}

    #resident div {
        text-align: center;
        width: 100%;
        height: 100%;
        line-height: 28px;
        color: white;
        background-color: #1b5997;
    }

    #resident .button {
        border-radius: 14px;
        -webkit-box-sizing: border-box;
        width: 33.3%;
        height: 100%;
        padding: 0;
        box-sizing: border-box;
        color: #fff;
        background: url("bg1.png") repeat-x 0 0;
    }

#ressearch .input {
    border: 1px solid #2d8bdc;
    border-radius: 14px;
    -webkit-box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 0 8px;
    color: #fff;
    background-color: transparent;
}

    #ressearch .input::-webkit-input-placeholder {
        color: #2d8bdc;
    }

    #ressearch .input::-moz-placeholder {
        color: #2d8bdc;
    }

    #ressearch .input:-ms-input-placeholder {
        color: #2d8bdc;
    }

.restype {
    width: 24px;
    height: 24px;
    padding: 1px;
    margin-top: 8px;
}

    .restype img {
        width: 100%;
        height: auto;
        user-select: none;
    }

    .restype.selected {
        width: 32px;
        height: 32px;
        padding: 1px;
        margin-top: 0;
    }

.restoggle,
.pseudo-restoggle {
    margin: 2px 0;
    padding: 4px;
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-box-pack: start;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
    height: 20px;
    width: 184px;
    color: white;
    background-color: #1b5997;
}

.resprop {
    margin: 2px 0;
    padding: 4px;
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-box-pack: start;
    flex-shrink: 0;
    height: 20px;
    width: 184px;
    color: #9bc7ff;
    position: relative;
}

    .resprop input {
        position: absolute;
        right: 2px;
        height: 16px;
        border: 1px solid #2b8cdb;
        background: #1b5997;
        color: #fff;
        width: 98px;
        line-height: 16px;
    }

        .resprop input::-webkit-input-placeholder {
            color: #2b8cdb;
        }

        .resprop input::-moz-placeholder {
            color: #2b8cdb;
        }

        .resprop input:-ms-input-placeholder {
            color: #2b8cdb;
        }

    .resprop .name {
        -webkit-box-flex: 1;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        height: 24px;
        line-height: 24px;
        text-align: left;
    }

    .resprop .slider-box {
        top: 1px;
        height: 18px;
        border: none;
        width: 102px;
        color: #fff;
        text-align: center;
        position: relative;
        line-height: 18px;
    }

    .resprop .slider {
        position: absolute;
        left: 0;
        top: 0;
        height: 16px;
        border: 1px solid #2b8cdb;
        background: #1b599780;
    }

.resentry {
    margin: 2px 0;
    padding: 0;
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
    height: auto;
    width: 192px;
    position: relative;
}

    .resentry .reslabel {
        position: absolute;
        user-select: none;
        z-index: 1;
        display: -webkit-box;
        -webkit-box-align: center;
        -webkit-box-pack: center;
        left: 0;
        top: 0;
        width: -webkit-fill-available;
        height: -webkit-fill-available;
    }

.reserror {
    margin: 2px 0;
    padding: 0;
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    flex-shrink: 0;
    height: 20px;
    width: 192px;
    color: red;
    background-color: #1b5997;
}

.resentry:hover {
    background-color: #fed9fe;
}

.resimage-w {
    width: 192px;
}

.resimage-h {
    height: 192px;
}

#reslist {
    display: flex;
    flex-flow: column nowrap;
    width: 200px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    height: calc(100% - 72px);
}

    #reslist.shorter {
        height: calc(100% - 104px);
    }

.restextbtn {
    width: 32px;
    height: 32px;
    padding: 1px;
    margin-left: 8px;
    box-sizing: border-box;
}

.framestage,
.sprite2,
.sprite3,
.sprite4 {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.framefx {
    z-index: 4;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.songtitle {
    -webkit-box-flex: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    height: 24px;
    line-height: 24px;
    text-align: left;
}

.songtime {
    width: 52px;
    line-height: 24px;
    height: 24px;
    text-align: center;
}

.silent {
    width: 0px;
}

.speech {
    user-select: none;
    cursor: default;
    z-index: 300;
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    width: -webkit-fill-available;
    height: -webkit-fill-available;
}

.maker-float {
    position: absolute;
    z-index: 90;
}

.maker-icon-l {
    background: url("maker-icon.png");
    background-position-y: 0px;
    width: 32px;
    height: 32px;
    border: 0;
    cursor: pointer;
}

.maker-icon-play-l {
    background-position-x: 0px;
}

.maker-icon-pause-l {
    background-position-x: -32px;
}

.maker-icon-check-l {
    background-position-x: -64px;
}

.maker-icon-close-l {
    background-position-x: -96px;
}

.maker-icon-reload-l {
    background-position-x: -128px;
}

.maker-icon-time-l {
    background-position-x: -160px;
}

.maker-icon-down-l {
    background-position-x: -192px;
}

.maker-icon-delete-l {
    background-position-x: -224px;
}

.maker-icon-copy-l {
    background-position-x: -256px;
}

.maker-icon-spread-l {
    background-position-x: -288px;
}

.maker-icon-resize-l {
    background-position-x: -320px;
}

.maker-icon-add-l {
    background-position-x: -352px;
}

.maker-icon-edit-l {
    background-position-x: -384px;
}

.maker-icon-fx-l {
    background-position-x: -416px;
}

.maker-icon-minus-l {
    background-position-x: -448px;
}

.maker-icon-l:hover {
    background-position-y: -32px;
}

.maker-icon-active-l {
    background-position-y: -64px;
}

.maker-icon-m {
    background: url("maker-icon.png");
    background-size: 360px 72px;
    background-position-y: 0px;
    width: 24px;
    height: 24px;
    border: 0;
    cursor: pointer;
}

.maker-icon-play-m {
    background-position-x: 0px;
}

.maker-icon-pause-m {
    background-position-x: -24px;
}

.maker-icon-check-m {
    background-position-x: -48px;
}

.maker-icon-close-m {
    background-position-x: -72px;
}

.maker-icon-reload-m {
    background-position-x: -96px;
}

.maker-icon-time-m {
    background-position-x: -120px;
}

.maker-icon-down-m {
    background-position-x: -144px;
}

.maker-icon-delete-m {
    background-position-x: -168px;
}

.maker-icon-copy-m {
    background-position-x: -192px;
}

.maker-icon-spread-m {
    background-position-x: -216px;
}

.maker-icon-resize-m {
    background-position-x: -240px;
}

.maker-icon-add-m {
    background-position-x: -264px;
}

.maker-icon-edit-m {
    background-position-x: -288px;
}

.maker-icon-fx-m {
    background-position-x: -312px;
}

.maker-icon-minus-m {
    background-position-x: -336px;
}

.maker-icon-m:hover {
    background-position-y: -24px;
}

.maker-icon-active-m {
    background-position-y: -48px;
}

.maker-icon-s {
    background: url("maker-icon.png");
    background-size: 240px 48px;
    background-position-y: 0px;
    width: 16px;
    height: 16px;
    border: 0;
    cursor: pointer;
}

.maker-icon-play-s {
    background-position-x: 0px;
}

.maker-icon-pause-s {
    background-position-x: -16px;
}

.maker-icon-check-s {
    background-position-x: -32px;
}

.maker-icon-close-s {
    background-position-x: -48px;
}

.maker-icon-reload-s {
    background-position-x: -64px;
}

.maker-icon-time-s {
    background-position-x: -80px;
}

.maker-icon-down-s {
    background-position-x: -96px;
}

.maker-icon-delete-s {
    background-position-x: -112px;
}

.maker-icon-copy-s {
    background-position-x: -128px;
}

.maker-icon-spread-s {
    background-position-x: -144px;
}

.maker-icon-resize-s {
    background-position-x: -160px;
}

.maker-icon-add-s {
    background-position-x: -176px;
}

.maker-icon-edit-s {
    background-position-x: -192px;
}

.maker-icon-fx-s {
    background-position-x: -208px;
}

.maker-icon-minus-s {
    background-position-x: -224px;
}

.maker-icon-s:hover {
    background-position-y: -16px;
}

.maker-icon-active-s {
    background-position-y: -32px;
}

.task-label-button {
    position: relative;
    margin-right: 2px;
    display: inline-block;
    vertical-align: middle;
}

.check-progress {
    color: #fff;
    display: inline-block;
    padding: 0px 5px;
}

#text-editor,
#task-editor,
#pack-editor {
    height: calc(100% - 120px);
    padding: 10px 0;
    overflow-y: auto;
    display: flex;
    flex-flow: column nowrap;
    align-content: flex-start;
}

.pack-info img {
    height: 16px;
    margin: 0;
    vertical-align: middle;
}

.pack-date {
    display: none;
}

    .pack-date + .operate-icon {
        display: none;
    }

.task-fit {
    height: fit-content;
}

.task-fill {
    height: -webkit-fill-available;
}

.task-entry {
    height: 50px;
}

.task-fill .task-area {
    height: 100%;
}

.task-text {
    height: 100%;
    min-height: unset !important;
    max-height: unset !important;
    padding: 10px !important;
    line-height: 2;
}

.task-number {
    margin: auto 5px;
}

.task-type-button {
    flex: 1;
    margin: 0px;
    padding: 0px 5px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-radius: 25px;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    height: 48px;
    line-height: 48px;
    text-align: center;
    user-select: none;
}

    .task-type-button.folded {
        flex: 0;
    }

        .task-type-button.folded span {
            display: none;
        }

    .task-type-button.primary {
        background-image: url("bg1.png");
        border: 1px solid #5b83c2;
        color: #fff;
    }

.task-type-switch {
    display: flex;
    width: -webkit-fill-available;
    flex-flow: row nowrap;
    align-content: center;
    box-sizing: border-box;
    border: 1px solid #2b8cdb;
    border-radius: 25px;
    height: 50px;
}

.task-type-icon {
    width: 32px;
    height: 32px;
    margin: 0px 4px;
    vertical-align: middle;
}

#taskitem-problem-extend {
    width: 72px;
    margin-left: 4px;
    margin-right: 4px;
    vertical-align: top;
}

#taskitem-problem-insert, #taskitem-writing-insert {
    width: 110px;
    margin-left: 10px;
    vertical-align: top;
}

#taskitem-category {
    width: calc(100% - 120px);
}

#taskitem-problem-type {
    width: calc(100% - 200px);
}

#taskitem-sample-import, #taskitem-sample-aigc, #taskitem-sample-cloud {
    width: 120px;
    margin-right: 4px;
    vertical-align: top;
}

#taskitem-sample-reset {
    width: 120px;
    vertical-align: top;
}

.ins {
    text-decoration: underline;
    color: #f0b050;
}

.del {
    text-decoration: line-through;
    color: #f0b050;
}

.keyword-highlight {
    color: orangered;
}

ul.tab-row {
    border-bottom: 4px solid #2b8ada;
    width: 100%;
    padding: 0px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    min-height: 30px;
    max-height: 50px;
    margin: 4px 0 10px 0;
}

    ul.tab-row li {
        background-color: #19609d;
        color: #a3bfd8;
        text-align: center;
        border-radius: 10px 10px 0 0;
    }

        ul.tab-row li.active {
            font-weight: normal;
            background-color: #2b8ada;
            color: #fff;
        }

    ul.tab-row a {
        display: block;
        padding: 7px 10px 5px;
        line-height: 20px;
        text-align: center;
        color: inherit;
        text-decoration: none;
    }

.admin-link {
    margin: 0px 2px;
    line-height: 16px;
    vertical-align: middle;
}

.admin-icon {
    width: 16px;
    height: 16px;
    border: none;
    vertical-align: middle;
    margin: 0px 2px;
}

.admin-page {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    margin: 2px 0px;
}

    .admin-page .set-cmd {
        margin-right: 5px;
        border-radius: 10px;
        height: 28px;
        line-height: 28px;
        background-color: #19609d;
        color: #a8d7f5;
        padding: 3px 5px;
    }

    .admin-page img {
        margin-right: 5px;
    }

.admin-avatar {
    width: 64px;
    height: 64px;
    border: none;
    border-radius: 32px;
}

.status-label {
    height: 30px;
    line-height: 30px;
}

#tools-div {
    left: auto;
    right: 20px;
    top: 40px;
    width: auto;
    padding: 0 6px;
    background-color: #133d6a;
    border: 2px solid #2b8bdc;
    border-radius: 20px;
    z-index: 9;
}

.tool-search {
    float: left;
}

.tool-exit,
.tool-help,
.tool-settings {
    float: right;
}

.tool-search .input {
    height: 30px;
    max-width: 160px;
    color: #fff;
    float: left;
    background-color: transparent;
}

.tool-search .button {
    float: right;
}

.tool-block .button {
    width: 24px;
    height: 30px;
    background: none no-repeat 50% 50%;
}

.tool-dropdown {
    position: absolute;
    top: 30px;
    display: none;
}

.tool-dict {
    width: calc(100% - 12px);
}

.clear,
.form-row,
.form-prompt-row {
    zoom: 1;
}

    .clear::before,
    .form-row::before,
    .form-prompt-row::before,
    .form-prompt-row::after,
    .form-row::after,
    .clear::after {
        content: "";
        display: table;
    }

    .form-row::after,
    .clear::after,
    .form-clear-row::after {
        clear: both;
    }

.col-lg-12 {
    width: 100%;
    float: left;
    position: relative;
}

.col-lg-6 {
    width: 50%;
    float: left;
    position: relative;
}

.col-lg-4 {
    width: 33.3%;
    float: left;
    position: relative;
}

.col-m-12 {
    width: 100%;
    position: relative;
    float: left;
}

.col-m-4 {
    width: 33.3%;
    float: left;
    position: relative;
}

.col-m-3 {
    width: 25%;
    float: left;
    position: relative;
}

.col-m-6 {
    width: 50%;
    float: left;
    position: relative;
}

.col-m-8 {
    width: 66.7%;
    float: left;
    position: relative;
}

.form-row {
    position: relative;
    padding-left: 120px;
    margin-bottom: 10px;
}

.form-prompt-row {
    position: relative;
    padding-left: 120px;
    margin-bottom: 5px;
}

.form-clear-row {
    margin-bottom: 10px;
    position: relative;
}

.form-clear-row-narrow {
    margin: 0;
}

.form-clear-row input,
.form-row input {
    min-height: 50px !important;
    width: 100%;
}

.withop {
    padding-right: 30px !important;
}

.operate-icon {
    position: absolute;
    right: 10px;
    top: 0;
    border: none;
    width: 20px;
    height: 100%;
    max-height: 50px;
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

    .operate-icon.show {
        background-image: url(042b.png);
    }

        .operate-icon.show.off {
            background-image: url(042.png);
        }

    .operate-icon.clear {
        background-image: url(025b.png);
    }

    .operate-icon.date {
        background-image: url(052.png);
    }

    .operate-icon.random {
        background-image: url(085.png);
    }

    .operate-icon.nocolor {
        background-image: url(086b.png);
    }

        .operate-icon.nocolor.off {
            background-image: url(086a.png);
        }

.operate-icon-sub {
    position: absolute;
    left: 0;
    top: 0;
    border: none;
    width: 20px;
    height: 50%;
    background-size: contain;
    background-position-x: 50%;
    background-repeat: no-repeat;
    transition: filter 0.5s;
}

    .operate-icon-sub.up {
        background-image: url(084a.png);
        background-position-y: 90%;
    }

    .operate-icon-sub.down {
        background-image: url(084b.png);
        top: 50%;
        background-position-y: 10%;
    }

.form-prompt-control {
    position: relative;
}

    .form-prompt-control.checkbox-flex {
        position: relative;
        display: flex;
        flex-flow: row wrap;
    }

        .form-prompt-control.checkbox-flex label {
            width: 50%;
            line-height: 36px;
        }

.form-prompt-row .operate-icon {
    display: none;
}

    .form-prompt-row .operate-icon:hover {
        display: block;
    }

.operate-icon:not(.updown) {
    transition: filter 0.5s;
}

    .operate-icon:not(.updown):hover {
        filter: hue-rotate(180deg);
    }

.operate-icon-sub:hover {
    filter: hue-rotate(180deg);
}

.form-prompt-row input:focus ~ .operate-icon {
    display: block;
}

.form-prompt-row :hover ~ .operate-icon {
    display: block;
}

.form-prompt-row input {
    height: 36px;
    width: 100%;
}

.form-prompt-row select {
    height: 36px;
    width: 100%;
}

.form-prompt-label {
    color: #9bc7ff;
    padding: 0 5px;
    width: 120px;
    position: absolute;
    left: 0;
    top: 0;
    height: 36px;
    line-height: 36px;
    user-select: none;
}

    .form-prompt-label img {
        height: 32px;
        vertical-align: middle;
        margin-left: 5px;
        margin-right: 5px;
    }

.form-prompt-row input.operate-button {
    min-height: 30px;
    height: 30px;
    vertical-align: middle;
    width: 100%;
}

.form-prompt-row input[type="range"] {
    transform: translate(0, -50%);
    left: 0;
    position: absolute;
}

    .form-prompt-row input[type="range"] + span {
        height: 36px;
        width: 27px;
        display: inline-block;
        line-height: 36px;
        text-align: center;
        color: #000;
        text-overflow: ellipsis;
        z-index: 2;
        position: relative;
        pointer-events: none;
        user-select: none;
    }

    .form-prompt-row input[type="range"].wide-thumb + span {
        width: 48px;
    }

.form-prompt-row input[type="color"]::-webkit-color-datetime-edit {
    display: none;
}

.form-prompt-row input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 8px 20%;
}

.form-prompt-row input[type="color"]::-webkit-color-swatch {
    border-radius: 8px;
    border: none;
}

.form-prompt-row input[type="color"].transparent::-webkit-color-swatch {
    opacity: 0;
}

.form-prompt-row input[type="color"].transparent:after {
    content: attr(data-nocolor);
    color: #9bc7ff;
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    letter-spacing: 2px;
    display: block;
}

.form-clear-row select,
.form-row select {
    min-height: 50px !important;
    width: 100%;
}

.form-register-radio-row label {
    width: 16.66%;
    float: left;
    line-height: 50px;
    padding: 0 !important;
}

    .form-register-radio-row label input[type="radio"] {
        margin-right: 5px;
    }

.form-item-label {
    color: #9bc7ff;
    padding: 0 5px;
    width: 110px;
    position: absolute;
    left: 0;
    top: 0;
    height: 50px;
    line-height: 50px;
    user-select: none;
}

    .form-item-label .quick-hint {
        display: inline-block;
        width: 16px;
        height: 16px;
        line-height: 16px;
        text-align: center;
        margin: 5px;
        border-radius: 50%;
        background-color: #2b8bdc;
    }

.form-label-required {
    color: #c84030;
}

.form-status-label {
    color: #9bc7ff;
    padding: 0 5px;
    width: 110px;
    position: absolute;
    left: 0;
    top: 0;
    line-height: 30px;
    user-select: none;
}

.form-item-errinfo {
    color: #c84030 !important;
}

.form-item-control {
    min-height: 36px;
    height: 50px;
    position: relative;
}

    .form-item-control .placeholder {
        height: 50px;
        line-height: 50px;
    }

    .form-item-control .semi-width-wrapper {
        width: 50%;
        float: left;
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: stretch;
        height: 100%;
    }

        .form-item-control .semi-width-wrapper > span {
            margin-left: 2px;
            margin-right: 2px;
        }

        .form-item-control .semi-width-wrapper > input {
            flex-grow: 1;
        }

        .form-item-control .semi-width-wrapper > div {
            color: #9bc7ff;
            user-select: none;
            cursor: pointer;
        }

            .form-item-control .semi-width-wrapper > div > span {
                color: #808080;
                pointer-events: none;
            }

                .form-item-control .semi-width-wrapper > div > span.activated {
                    color: #9bc7ff;
                }

.form-item-errinput {
    border: 1px solid #c84030 !important;
    background: #714c63 !important;
}

.form-item-filebutton {
    background: url(bg1.png) repeat-x 0 0;
    display: inline-block;
    margin: 3px 5px 3px 0px;
    height: 30px;
    width: auto;
    padding: 0px 15px;
    border-radius: 15px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -webkit-appearance: none;
    cursor: pointer;
    line-height: 30px;
    color: white;
    user-select: none;
}

.checkbox-label {
    display: inline-block;
    box-sizing: border-box;
}

.checkbox-col-3 .checkbox-label {
    width: 33%;
    float: left;
}

.checkbox-col-4 .checkbox-label {
    width: 25%;
    float: left;
}

.checkbox-col-2 .checkbox-label {
    width: 50%;
    float: left;
}

.col-a,
.col-b,
.col-c {
    float: left;
}

.col-a {
    width: 50% !important;
}

.col-b {
    width: 30% !important;
}

.col-c {
    width: 20% !important;
}

.check {
    display: inline-block;
    font-weight: normal;
}

.bar {
    margin-left: 4px;
    display: inline-block;
    height: 8px;
    vertical-align: middle;
}

    .bar:after {
        content: "";
        display: inline-block;
        height: 8px;
        background-color: gray;
        position: relative;
        vertical-align: top;
    }

.icon {
    margin-left: 4px;
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.invalid {
    color: gray;
}

    .invalid .bar {
        width: 0px;
        background-color: gray;
    }

        .invalid .bar:after {
            left: 0px;
            width: 100px;
        }

    .invalid .icon {
        background-image: url(icon_status2.png);
        filter: grayscale(1);
    }

.insecure {
    color: #903;
}

    .insecure .bar {
        width: 20px;
        background-color: #903;
    }

        .insecure .bar:after {
            left: 20px;
            width: 80px;
        }

.weak {
    color: #942;
}

    .weak .bar {
        width: 40px;
        background-color: #942;
    }

        .weak .bar:after {
            left: 40px;
            width: 60px;
        }

.normal {
    color: #981;
}

    .normal .bar {
        width: 60px;
        background-color: #981;
    }

        .normal .bar:after {
            left: 60px;
            width: 40px;
        }

.strong {
    color: #9c0;
}

    .strong .bar {
        width: 80px;
        background-color: #9c0;
    }

        .strong .bar:after {
            left: 80px;
            width: 20px;
        }

.secure {
    color: #9f0;
}

    .secure .bar {
        width: 100px;
        background-color: #9f0;
    }

        .secure .bar:after {
            left: 100px;
            width: 0px;
        }

.pass {
    color: #1ea46b;
}

    .pass .icon {
        background-image: url(icon_status3.png);
    }

.fail {
    color: #eb5b52;
}

    .fail .icon {
        background-image: url(icon_status1.png);
    }

.fit-select {
    width: fit-content !important;
}

.short-input {
    width: 20% !important;
    max-width: 120px;
}

.tiny-input {
    width: 11% !important;
    padding: 0px 3px !important;
    max-width: 75px;
    text-align: center;
}

.inter-text {
    display: inline;
    padding: 0px 4px;
    color: #9bc7ff;
}

    .inter-text img {
        height: 32px;
        vertical-align: middle;
    }

#feedback-div {
    right: 260px;
    transform: none !important;
}

#feedback-playlist {
    left: calc(100% - 240px);
    width: 240px;
    transform: none !important;
}

#feedback-listbox {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    align-items: center;
}

    #feedback-listbox .item {
        padding-bottom: 3px;
        color: white;
        font-size: 1.1em;
        box-sizing: border-box;
        border-radius: 10px;
        width: 100%;
        text-align: center;
    }

    #feedback-listbox .item-thumb {
        width: 100%;
        padding-top: 55.55%;
        overflow: hidden;
        font-size: 1em;
        text-overflow: ellipsis;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        cursor: pointer;
    }

    #feedback-listbox .item:hover {
        border: 1px solid #64daf1;
        background-color: #098fcc80;
    }

    #feedback-listbox .narrowitem {
        width: 100%;
        padding-bottom: 3px;
        color: white;
        font-size: 1em;
        text-overflow: ellipsis;
        cursor: pointer;
    }

        #feedback-listbox .narrowitem:hover {
            color: #2b80db;
        }

#feedback-tip {
    width: 240px !important;
    right: 0;
    left: auto !important;
    z-index: 4;
    transform: none !important;
}

#feedback-page {
    overflow: hidden;
}

    #feedback-page .feedback-text .feedback-anime {
        height: calc(100vh - 306px);
    }

    #feedback-page .framestage {
        height: 100%;
        background-size: contain;
    }

    #feedback-page .audio-wrapper {
        position: relative;
        text-align: center;
        background-color: transparent;
    }

    #feedback-page .feedback-maxvideo {
        max-width: 100%;
        position: absolute;
        z-index: 3;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }

    /* 隐藏区域换成不显示 */
    #feedback-page .hidden {
        opacity: 0;
        /* display: none !important; */
    }

    #feedback-page .video-wrapper {
        position: relative;
        text-align: center;
        background-color: transparent;
    }

    #feedback-page .quest-wrapper {
        width: 100%;
        height: 100%;
        border: none;
        z-index: 3;
        margin: auto;
        position: relative;
        text-align: center;
        background-color: transparent;
    }

    #feedback-page .video-overlay {
        width: 100%;
        height: 100%;
        border: none;
        position: absolute;
        z-index: 5;
        overflow: hidden;
        display: none;
        color: #ffffff;
        left: 0;
        top: 0;
    }

    #feedback-page .info-box {
        width: 100%;
        height: 100%;
        max-width: 1440px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        position: absolute;
        font-size: 125%;
    }

    #feedback-page .quest-box {
        width: 100%;
        height: 100%;
        max-width: 1440px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        position: absolute;
        font-size: 100%;
        box-sizing: border-box;
        padding-bottom: 110px;
    }

    #feedback-page .overlay-controls {
        width: 360px;
        height: 96px;
        justify-content: space-between;
        position: absolute;
        right: 0%;
        top: 0%;
    }

    #feedback-page .overlay-control {
        width: 96px;
        height: 24px;
        padding-top: 72px;
        line-height: 24px;
        background-image: url(overlay-icons.png);
        background-position-y: 0px;
        cursor: pointer;
        text-align: center;
    }

        #feedback-page .overlay-control:hover {
            background-position-y: -96px;
            color: #2b80db;
        }

        #feedback-page .overlay-control.replay {
            background-position-x: 0px;
        }

        #feedback-page .overlay-control.next {
            background-position-x: -96px;
        }

        #feedback-page .overlay-control.exercise {
            background-position-x: -192px;
        }

    #feedback-page .overlay-author-info {
        top: 0%;
        left: 0%;
        position: absolute;
        font-size: 1.5em;
    }

    #feedback-page .author-info-icon {
        width: 80px;
        height: 80px;
        background-repeat: no-repeat;
        background-size: contain;
        background-clip: padding-box;
        border: 2px solid #2b80db;
        border-radius: 40px;
        margin-right: 20px;
        display: -webkit-inline-box;
        vertical-align: middle;
    }

    #feedback-page .author-info-nick {
        color: white;
        font-size: 1em;
        line-height: 40px;
        display: -webkit-inline-box;
    }

    #feedback-page .overlay-medialist {
        top: 168px;
        left: 0;
        position: absolute;
        width: 100%;
        justify-content: space-between;
        display: flex;
        flex-flow: row wrap;
    }

    #feedback-page .overlay-media-title {
        top: 110px;
        height: 36px;
        line-height: 36px;
        font-size: 1.5em;
        color: white;
        position: absolute;
    }

    #feedback-page .overlay-media-item {
        width: 32%;
        padding-bottom: 12px;
    }

    #feedback-page .overlay-media-thumb {
        width: 100%;
        padding-top: 55.55%;
        overflow: hidden;
        font-size: 1em;
        text-overflow: ellipsis;
        line-height: 1.6em;
        background-repeat: no-repeat;
        background-size: contain;
        cursor: pointer;
    }

    #feedback-page .overlay-media-item:hover {
        color: #2b80db;
    }

    #feedback-page .overlay-medialist .placeholder {
        width: 32%;
        height: 0;
    }

    #feedback-page .quest-box::after {
        content: " ";
        width: 9999px;
        height: 96px;
        border-top: 2px solid #64daf1;
        display: block;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin: auto;
        bottom: 0px;
        z-index: 1;
    }

    #feedback-page .quest-box.safety::after {
        background-color: #7af6fa66;
    }

    #feedback-page .quest-box.danger::after {
        background-color: #ea1c2466;
    }

    #feedback-page .quest-box.caution::after {
        background-color: #64daf166;
    }

    #feedback-page .quest-box.notice::after {
        background-color: #7af6fa66;
    }

    #feedback-page .quest-box .overlay-quest-top,
    /* #feedback-page .quest-box .overlay-quest-content, */
    #feedback-page .quest-box .overlay-quest-controls,
    #feedback-page .quest-box .overlay-quest-reward,
    #feedback-page .quest-box .wizardHint {
        position: absolute;
        z-index: 2;
    }

    #feedback-page .quest-box .overlay-quest-content {
        width: 68%;
        height: 100%;
        float: right;
        padding-top: 30px;
        box-sizing: border-box;
        overflow: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    #feedback-page .quest-box .sound {
        cursor: pointer;
        transition: all 0.3s;
        background: url(./speech.png) center no-repeat;
        background-size: contain;
        vertical-align: top;
        display: inline-block;
        width: 51px;
        height: 51px;
        margin-right: 10px;
    }

        #feedback-page .quest-box .sound:hover {
            background: url(./speech-hover.png) center no-repeat;
        }

    /* 456 答题星星结构处理 */
    #feedback-page .wizardHint {
        left: 6%;
        bottom: 120px;
        width: 15%;
    }
        /* 456 胜利星星结构处理 */
        #feedback-page .wizardHint.victory {
            aspect-ratio: 551 / 401;
            height: calc(90% - 150px);
            max-height: 200px;
            width: auto;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            transform: translateX(-50%) translateY(-50%);
        }

            #feedback-page .wizardHint.victory .overlay-quest-hint {
                top: 0;
                bottom: auto;
                left: auto;
                transform: translateX(-100%);
                width: auto;
            }

    #feedback-page .overlay-quest-wizard {
        background-repeat: no-repeat;
        background-size: contain;
        cursor: pointer;
        width: 100%;
        /* padding-top: 104%;*/
        aspect-ratio: 1/1;
    }

        #feedback-page .overlay-quest-wizard.victory {
        }

    #feedback-page .overlay-quest-editor {
        min-height: 75px;
        line-height: 1.5;
        height: fit-content;
        width: 100%;
        color: #ffffff;
        margin: 3px;
        padding: 3px;
        outline: 1px dotted #a8d7f5;
    }

        #feedback-page .overlay-quest-editor .replaced {
            color: #75fbfd;
            cursor: help;
            text-decoration: underline;
        }

    #feedback-page .overlay-quest-close {
        width: 18px;
        height: 18px;
        margin-top: 7px;
        left: 3%;
        top: 0%;
        background-image: url(close.png);
        background-size: contain;
        background-repeat: no-repeat;
        display: none; /*关闭在这里怎么看都不对，不应该显示，应该是离开页面自动提示警告*/
    }

    #feedback-page .overlay-quest-top {
        width: 100%;
        top: 0%;
        left: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    #feedback-page .overlay-quest-progress {
        height: 10px;
        background-color: #22c6fb30;
        border-radius: 5px;
        flex: 1;
        position: relative;
    }

        #feedback-page .overlay-quest-progress .fill {
            height: 100%;
            position: absolute;
            border-radius: 5px;
            top: 0%;
            left: 0%;
            z-index: 2;
            display: block;
            animation-name: example;
            animation-duration: 1s;
            background-color: #f8ad3b;
        }

            #feedback-page .overlay-quest-progress .fill.danger {
                background-color: #ea1c24;
            }

    #feedback-page .overlay-quest-counter {
        line-height: 24px;
        color: #f8ad3b;
        font-size: 100%;
        font-weight: 700;
        text-align: center;
        background-image: url(star-progress.png);
        background-size: 22px;
        background-repeat: no-repeat;
        margin-left: 12px;
        padding-left: 26px;
    }

        #feedback-page .overlay-quest-counter.danger {
            color: #ea1c24;
        }

        #feedback-page .overlay-quest-counter.safety {
            color: #7af6fa;
        }

    /* #feedback-page .overlay-quest-counter:before {
		width: 32px;
		height: 32px;
		left: -40px;
		background-image: url(star-progress.png);
		background-size: contain;
		background-repeat: no-repeat;
		content: " ";
		position: absolute;
		display: block;
	} */

    #feedback-page .overlay-quest-hint {
        /* left: 4%; */
        /* bottom: 276px; */
        /* width: 18%; */
        bottom: 100%;
        position: absolute;
        width: 120%;
        max-width: 290px;
        left: -10%;
        font-size: 1em;
        aspect-ratio: 293/237;
        display: none;
        background-size: cover;
        background-repeat: no-repeat;
        background-image: url(helper-dialog.png);
        display: -webkit-box;
        -webkit-box-align: center;
        -webkit-box-pack: center;
    }

        #feedback-page .overlay-quest-hint div {
            width: 100%;
            padding: 6.6% 6.6% 22.6% 6.6%;
            color: black;
            font-weight: bold;
            height: 100%;
            box-sizing: border-box;
        }

            #feedback-page .overlay-quest-hint div.replacements {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(calc(min-content), 1fr));
            }

        #feedback-page .overlay-quest-hint a {
            text-decoration: none;
            color: black;
            cursor: pointer;
        }

            #feedback-page .overlay-quest-hint a.replacement-link {
                display: flex;
                align-items: center;
                width: 100%; /* 确保撑满网格单元格 */
                max-width: 100%;
                cursor: pointer;
                text-decoration: none;
                overflow: hidden;
            }

            #feedback-page .overlay-quest-hint a:hover {
                color: white;
            }

        #feedback-page .overlay-quest-hint .link-text {
            flex: 1;
            min-width: 0; /* 关键：允许内容收缩 */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding-right: 8px; /* 与图标保持间距 */
        }

        #feedback-page .overlay-quest-hint .status-icon {
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px; /* 固定图标容器宽度 */
        }

    #feedback-page .overlay-quest-header {
        padding-top: 10px;
        box-sizing: border-box;
        height: fit-content;
        font-size: 1.2em;
    }

        #feedback-page .overlay-quest-header p.caption {
            font-weight: bold;
        }

        #feedback-page .overlay-quest-header p:nth-of-type(n + 2) {
            padding-left: 20px;
            font-weight: 400;
        }

    #feedback-page .overlay-quest-options {
        height: fit-content;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-around;
        align-content: flex-start;
        font-size: 1em;
    }

    #feedback-page .overlay-quest-option {
        box-sizing: border-box;
        border-image: url(option.png) 40 36 26 50 fill / 40px 36px 26px 50px stretch;
        cursor: pointer;
        display: -webkit-box;
        -webkit-box-pack: center;
        -webkit-box-align: center;
        border-radius: 12px;
        position: relative;
    }

        #feedback-page .overlay-quest-option.blank {
            max-width: 90%;
            width: 150px;
            height: 36px;
            line-height: 36px;
            padding-left: 25px;
            padding-right: 15px;
            margin: 5px;
            font-size: 1em;
            display: inline-block;
            background: none !important;
            color: #ffffff !important;
        }

        #feedback-page .overlay-quest-option.mini {
            height: 3.3em;
            line-height: 1.3;
            padding-left: 35px;
            padding-right: 35px;
            margin: 5px;
        }

        #feedback-page .overlay-quest-option.option-pair,
        #feedback-page .overlay-quest-option.half {
            width: 48%;
            height: 3.3em;
            line-height: 1.3;
            padding-left: 35px;
            padding-right: 35px;
            margin: 5px;
        }

        #feedback-page .overlay-quest-option.through {
            width: 100%;
            height: 3.3em;
            line-height: 1.3;
            padding-left: 35px;
            padding-right: 35px;
            margin: 5px 0px;
        }

        #feedback-page .overlay-quest-option span {
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
            text-align: center;
        }

            #feedback-page .overlay-quest-option span::before {
                content: var(--serial-number);
                color: black;
                left: 2px;
                top: 2px;
                font-weight: 700;
                text-align: center;
                width: 1.5em;
                height: 1.5em;
                font-size: 80%;
                line-height: 1.5em;
                border: none;
                position: absolute;
                display: block;
                box-shadow: inherit;
            }

        #feedback-page .overlay-quest-option.selected {
            border-width: 0px;
            border-image: url(option-selected.png) 40 36 26 50 fill / 40px 36px 26px 50px stretch;
            color: #75fbfd;
        }

        #feedback-page .overlay-quest-option.original {
            color: #75fbfd !important;
            border-image: url(option.png) 40 36 26 50 fill / 40px 36px 26px 50px stretch!important;
        }

        #feedback-page .overlay-quest-option.correct {
            color: #75fbfd;
        }

        #feedback-page .overlay-quest-option.incorrect {
            border-image: url(option-incorrect.png) 40 36 26 50 fill / 40px 36px 26px 50px stretch;
            color: #ff819c;
        }

        #feedback-page .overlay-quest-option.markcorrect {
            color: #75fbfd;
            border-image: url(option-selected.png) 40 36 26 50 fill / 40px 36px 26px 50px stretch;
        }

        #feedback-page .overlay-quest-option.header-markcorrect {
            color: #75fbfd;
            border-image: url(option-selected.png) 40 36 26 50 fill / 40px 36px 26px 50px stretch;
            display: inline-block;
            cursor: auto;
            padding: 0px 25px;
        }

        #feedback-page .overlay-quest-option.header-correct {
            border-image: url(option-selected.png) 40 36 26 50 fill / 40px 36px 26px 50px stretch;
            color: #75fbfd;
            display: inline-block;
            cursor: auto;
            padding: 0px 25px;
        }

    #feedback-page .overlay-quest-controls {
        left: 3%;
        width: 94%;
        bottom: 0px;
        height: 96px;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
    }

    #feedback-page .overlay-quest-control {
        width: 110px;
        height: 42px;
        box-sizing: border-box;
        cursor: pointer;
        display: -webkit-box;
        -webkit-box-pack: center;
        -webkit-box-align: center;
        border-radius: 12px;
        font-weight: 700;
    }

        #feedback-page .overlay-quest-control.quest-skip {
            color: #ffffff;
            border-image: url(left.png) 24 fill / 24px stretch;
        }

            #feedback-page .overlay-quest-control.quest-skip:hover {
                border-image: url(left-hover.png) 24 fill / 24px stretch;
            }

        #feedback-page .overlay-quest-control.quest-check {
            color: #ffffff;
            border-image: url(right.png) 24 fill / 24px stretch;
        }

            #feedback-page .overlay-quest-control.quest-check:hover {
                border-image: url(right-hover.png) 24 fill / 24px stretch;
            }

        #feedback-page .overlay-quest-control.quest-continue {
            color: #ffffff;
            border-image: url(right.png) 24 fill / 24px stretch;
        }

            #feedback-page .overlay-quest-control.quest-continue:hover {
                border-image: url(right-hover.png) 24 fill / 24px stretch;
            }

            #feedback-page .overlay-quest-control.quest-continue.safety {
                color: #ffffff;
                border-image: url(right.png) 24 fill / 24px stretch;
            }

                #feedback-page .overlay-quest-control.quest-continue.safety:hover {
                    border-image: url(right-hover.png) 24 fill / 24px stretch;
                }

            #feedback-page .overlay-quest-control.quest-continue.danger {
                color: #ffffff;
                border-image: url(wrong.png) 24 fill / 24px stretch;
            }

                #feedback-page .overlay-quest-control.quest-continue.danger:hover {
                    border-image: url(wrong-hover.png) 24 fill / 24px stretch;
                }

            #feedback-page .overlay-quest-control.quest-continue.caution {
                color: #ffffff;
                border-image: url(right.png) 24 fill / 24px stretch;
            }

                #feedback-page .overlay-quest-control.quest-continue.caution:hover {
                    border-image: url(right-hover.png) 24 fill / 24px stretch;
                }

    #feedback-page .overlay-quest-result {
        width: 68%;
        display: -webkit-box;
        -webkit-box-pack: start;
        -webkit-box-align: center;
        flex: 1;
    }

    #feedback-page .overlay-quest-reward {
        left: 25%;
        bottom: 128px;
        width: 50%;
        text-align: center;
    }

    #feedback-page .feedback-wiki-title {
        font-size: 110%;
        font-weight: bold;
        color: #13ffff;
        display: flex;
        width: 35%;
        flex-flow: row;
        justify-content: space-between;
    }

    #feedback-page .feedback-wiki-display {
        width: 100%;
        position: relative;
        display: flex;
        flex-flow: row nowrap;
        box-sizing: border-box;
        justify-content: space-evenly;
    }

        #feedback-page .feedback-wiki-display.full {
            height: calc(100vh - 300px);
        }

        #feedback-page .feedback-wiki-display.short {
            height: fit-content;
            max-height: calc(100vh - 300px);
        }

    #feedback-page .feedback-wiki-list {
        width: 35%;
        box-sizing: border-box;
        border: 3px solid #13ffff;
        display: flex;
        flex-flow: column nowrap;
        padding-left: 5px;
        padding-right: 5px;
        border-radius: 10px;
        overflow-y: scroll;
    }

    #feedback-page .feedback-wiki-listitem {
        color: #ffffff;
        width: 100%;
        padding: 12px 0px;
        border-bottom: 1px solid #13ffff;
        cursor: pointer;
    }

        #feedback-page .feedback-wiki-listitem.verbose {
            line-height: 34px;
        }

        #feedback-page .feedback-wiki-listitem.brief {
            line-height: 24px;
        }

        #feedback-page .feedback-wiki-listitem.selected {
            border: none;
            border-bottom: 1px solid #13ffff;
            color: #13ffff;
            font-weight: bold;
            background-color: #7afafa20;
        }

    #feedback-page .feedback-wiki-detail {
        width: calc(65% - 199px);
        visibility: hidden;
        box-sizing: border-box;
        border: 2px solid #13ffff;
        padding-left: 5px;
        padding-right: 5px;
        border-radius: 10px;
        overflow-y: scroll;
    }

    #feedback-page .feedback-wiki-text {
        margin-bottom: 10px;
    }

    #feedback-page .feedback-wiki-contents {
        margin-bottom: 10px;
    }

.flex-dtu {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    align-items: flex-end;
}

#feedback-page .feedback-reader-controls {
    width: 157px;
    height: 100%;
    box-sizing: border-box;
}

    #feedback-page .feedback-reader-controls .reader-control-button {
        width: 157px;
        height: 51px;
        line-height: 51px;
        color: #ffffff;
        text-align: center;
        background: url(right.png);
        background-size: contain;
        box-sizing: border-box;
        cursor: pointer;
    }

        #feedback-page .feedback-reader-controls.reader-control-button:hover {
            background: url(right-hover.png);
        }

@media screen and (max-width: 900px) {
    #feedback-page .feedback-maxvideo {
        max-height: calc(100vh - 270px);
    }
}

@media screen and (min-width: 900px) {
    #feedback-page .feedback-maxvideo {
        max-height: calc(100vh - 272px);
    }
}

#feedback-audio {
    width: 100%;
    overflow: hidden;
}

#galaxy-pop .rectPanelInner {
    padding: 10px 15px 0 15px;
}

#calendar-div .rectPanelInner {
    padding: 0px 20px;
}

#feedback-container {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    padding: 0px 10px;
}

#feedback-page .line {
    width: 100%;
    position: absolute;
    z-index: 2;
    background: url(070.png) left top no-repeat;
    background-size: auto 10px;
    height: 6px;
    margin-top: -6px;
    display: none;
}

.form-narrow {
}

    .form-narrow input[type="radio"] {
        margin: 0;
    }

    .form-narrow label {
        padding: 0 10px 0 0;
    }

.form-multi-3col .col-main.f-third {
    width: 33%;
    float: left;
}

.form-multi-3col .col-sub.f-third {
    width: 33%;
    float: left;
}

#setting-div .cascade-block {
    padding: 5px 10px;
    box-sizing: border-box;
}

#setting-div .checkbox-label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.form-auto-v-center-wrap {
    height: 100%;
    width: 100%;
    position: absolute;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.form-auto-v-center {
    height: 100%;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
}

.form-auto-v-content {
    margin: auto;
}

.form-content-wrap .form-auto-v-content {
    width: 80%;
}

.modal {
    z-index: 1000;
    width: 90%;
    max-height: 100vh;
    left: 50% !important;
    top: 50% !important;
    -webkit-transform: translateX(-50%) translateY(-50%) !important;
    -ms-transform: translateX(-50%) translateY(-50%) !important;
    transform: translateX(-50%) translateY(-50%) !important;
    -moz-transform: translateX(-50%) translateY(-50%) !important;
}

.modal-free {
    z-index: 1000;
    max-height: 100vh;
}

#dict-div {
    max-width: 280px;
    width: 80%;
    right: 10px;
    left: auto;
}

#dict-title .pos {
    font-size: 0.6em;
    font-style: italic;
    margin-left: 10px;
    font-weight: normal;
}

#dict-title .back {
    height: 16px;
    width: 16px;
    vertical-align: middle;
    cursor: pointer;
}

#dict-text {
    /* font-size: 130%; */
    max-height: 70vh;
    overflow-y: auto;
}

    #dict-text .inlineRow {
        margin-bottom: 6px;
    }

    #dict-text .tag {
        font-size: 12px;
        display: inline-block;
        border-radius: 12px;
        padding: 2px 8px;
        line-height: 16px;
        border: 1px #fff solid;
    }

    #dict-text .soundRow {
    }

    #dict-text .btnSpeak {
        cursor: pointer;
        transition: all 0.3s;
        background: url(./speaker.png) center no-repeat;
        background-size: auto;
        width: 26px;
        height: 20px;
        vertical-align: middle;
        display: inline-block;
    }

        #dict-text .btnSpeak:hover {
            opacity: 0.8;
        }

    #dict-text .phon {
        display: inline-block;
    }

    #dict-text .expList {
        padding-left: 36px;
    }

        #dict-text .expList li {
            list-style: decimal;
            margin-bottom: 6px;
            cursor: pointer;
        }

    #dict-text .noExpList {
        color: rgba(255, 255, 255, 0.7);
        text-align: center;
        padding: 0;
    }

#mode-container {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    padding: 10px 0 20px 0;
    justify-content: space-evenly;
    position: relative;
}

#gamemode-div {
    width: unset;
}

#mode-container li {
    background: url(game_li_bg.png) no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
    box-sizing: border-box;
    position: relative;
    user-select: none;
}

#mode-container div {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: space-evenly;
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    left: 0;
    top: 0;
    padding: 7% 7% 11% 7%;
}

    #mode-container div p:nth-of-type(1) {
        font-size: 16pt;
    }

    #mode-container div p:nth-of-type(2) {
        font-size: 10pt;
    }

    #mode-container div p:nth-of-type(3) {
        font-size: 9pt;
        color: #d0e5f7;
    }

        #mode-container div p:nth-of-type(3) span {
            color: #9cffff;
            padding-left: 2px;
            padding-right: 2px;
        }

    #mode-container div p:nth-of-type(4) {
        font-size: 9pt;
    }

        #mode-container div p:nth-of-type(4) .critical {
            color: #c42929;
        }

@media screen and (max-width: 456px) {
    #mode-container {
        width: 370px;
    }

        #mode-container li {
            width: 176px;
            padding-bottom: 88px;
        }

        #mode-container div {
            padding: 6% 6% 10% 6%;
        }

            #mode-container div p:nth-of-type(1) {
                font-size: 10pt;
            }

            #mode-container div p:nth-of-type(2) {
                font-size: 9pt;
            }

            #mode-container div p:nth-of-type(3) {
                font-size: 7.5pt;
            }

            #mode-container div p:nth-of-type(4) {
                font-size: 7.5pt;
            }
}

@media screen and (min-width: 456px) and (max-width: 684px) {
    #mode-container {
        width: 456px;
    }

        #mode-container li {
            width: 200px;
            padding-bottom: 100px;
        }
}

@media screen and (min-width: 684px) {
    #mode-container {
        width: calc(66vmin - 42px);
        min-width: 684px;
    }

        #mode-container li {
            width: calc(100% / 3.42);
            padding-bottom: calc(100% / 6.84);
        }
}

.game-mode-0 {
}

.game-mode-1 {
    filter: hue-rotate(206deg);
}

.game-mode-2 {
    filter: hue-rotate(93deg);
}

.game-mode-3 {
    filter: hue-rotate(288deg);
}

#planet-div {
    height: 50vh;
    min-height: 375px;
}

#taskimg-div {
    width: 90vw;
    height: 90vh;
}

#faq-div {
    width: 85vw;
    height: 85vh;
}

#faq-list {
    overflow-y: scroll;
    height: calc(85vh - 89px);
}

.faq-entry {
    font-size: 12pt;
}

.faq-question {
    line-height: 1.8;
    padding: 5px 11px;
    font-size: 110%;
    font-weight: normal;
    outline: none;
    text-decoration: underline;
    cursor: pointer;
}

.faq-answer {
    line-height: 1.5;
    padding: 5px 26px;
}

#gallery-list {
    width: calc(100% - 18px);
    display: flex;
    align-items: center;
    align-content: center;
    flex-wrap: nowrap;
    height: 114px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.taskimg-gallery {
    height: -webkit-fill-available;
}

.gallery-item {
    height: 100px;
    aspect-ratio: 1/1;
    box-sizing: border-box;
    background-size: cover;
}

#taskimg-selpic {
    position: relative;
    width: calc(100% - 18px);
    height: calc(100% - 270px);
}

    #taskimg-selpic img {
        position: absolute;
        max-height: 100%;
        max-width: 100%;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 50%;
        cursor: crosshair;
        z-index: 2;
    }

.image-mark {
    position: absolute;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    font-size: 2rem;
    font-weight: normal;
    background-color: #19609d;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    transform: translate(-50%, -50%);
    z-index: 5;
    user-select: none;
    cursor: pointer;
}

@media screen and (max-width: 640px) {
    #planet-div {
        width: 100vw;
    }

    #unit-container {
        height: calc(50vh - 40vw - 40px) !important;
        margin-top: 40vw !important;
    }

    .unit-flag {
        width: 10vw !important;
        height: 40vw !important;
        font-size: 2vw !important;
    }
}

@media screen and (min-width: 640px) and (max-width: 1280px) {
    #planet-div {
        min-width: 640px;
        width: 75vw;
    }
}

@media screen and (min-width: 1280px) {
    #planet-div {
        min-width: 960px;
        width: 50vw;
    }
}

.planet-unit {
    width: calc(100% - 4px);
    height: 50vh;
    min-height: 375px;
    background: url(../loads/map-00.png) no-repeat;
    background-size: cover;
}

#unit-container {
    position: relative;
    width: calc(100%);
    height: calc(50vh - 290px);
    min-height: 85px;
    margin-top: 250px;
}

.unit-flag {
    position: absolute;
    width: 65px;
    height: 250px;
    -webkit-transform: translateX(-50%) translateY(-100%) !important;
    -ms-transform: translateX(-50%) translateY(-100%) !important;
    transform: translateX(-50%) translateY(-100%) !important;
    -moz-transform: translateX(-50%) translateY(-100%) !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center calc(100% - 18px);
    cursor: pointer;
    font-size: 13px;
    user-select: none;
}

    .unit-flag.current {
        filter: hue-rotate(315deg);
    }

    .unit-flag .information_box {
        width: 100%;
        height: 16px;
        position: relative;
    }

    .unit-flag .schedule_box {
        width: 100%;
        height: 16px;
        background: url(jindu_bg2.png);
        background-size: 100% 100%;
        position: relative;
    }

        .unit-flag .schedule_box .schedule {
            height: 72%;
            position: absolute;
            top: 12%;
            left: 3%;
            z-index: 2;
            display: block;
        }

        .unit-flag .schedule_box .schedule-fill {
            width: 100%;
            height: 100%;
            z-index: 3;
            animation-name: example;
            animation-duration: 1s;
            background-image: linear-gradient( to bottom, #00e3fb, #00e3fb 10%, #0099e6 30%, #0035c6 80%, #0064e0 90%, #0039bd );
            border-radius: 3px;
            position: absolute;
            display: block;
        }

@keyframes example {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

.unit-flag .schedule_box .percent {
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 100%;
    color: #ffffff;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
}

.unit-name {
    font-size: 100%;
    position: absolute;
    width: 100%;
    height: 18px;
    left: 0px;
    bottom: 0px;
    text-align: center;
    color: #30f5f7;
    cursor: pointer;
    user-select: none;
    text-overflow: ellipsis;
}

.house1 {
    background-image: url(house1s.png);
}

.house2 {
    background-image: url(house2s.png);
}

.house3 {
    background-image: url(house3s.png);
}

.house4 {
    background-image: url(house4s.png);
}

#mask-div {
    background-color: rgba(192, 192, 192, 0.1);
    width: 100% !important;
    height: 100% !important;
}

#maskBtnClose {
    width: 40px;
    height: 40px;
    right: 2px;
    top: 2px;
    position: fixed;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    background: url(./025b.png) center no-repeat;
    background-size: 24px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

    #maskBtnClose:hover {
        opacity: 0.8;
    }

#mask-fx {
    z-index: 1099;
    width: 100% !important;
    height: 100% !important;
}

#msgbox-div {
    z-index: 1010;
    max-width: 420px;
}

#prompt-div {
    z-index: 1005;
    max-width: 420px;
}

#prompt-fields {
    max-height: calc(100vh - 148px);
    overflow: hidden scroll;
}

#operate-div {
    max-width: 420px;
}

#trophy-div {
    max-width: 480px;
}

#dataset-div {
    max-width: 720px;
}

.pop-icon {
    max-width: 32px;
}

    .pop-icon img {
        max-width: 100%;
    }

#msgbox-icon {
    max-width: 64px;
}

.pop-text {
    min-width: 120px;
}

    .pop-text pre {
        white-space: pre-wrap;
        min-width: 180px;
    }

        .pop-text pre.larger {
            font-size: 130%;
        }

#dialog-div {
    z-index: 99;
}

.page-cover-mask {
    z-index: 9999;
    position: absolute;
    left: 50%;
    top: 0;
    display: none;
    background-color: #86939c;
    text-align: center;
    transform: translateX(-50%);
}

.mask-text {
    left: 50%;
    top: 50%;
    position: absolute;
    color: #1b5997;
    font-size: 22pt;
    transform: translate(-50%, -50%);
    white-space: nowrap;
}

.audio-player {
    background-color: snow;
    margin: 2px auto;
    width: 100%;
    border-radius: 12px;
    height: 36px;
}

.audio-left {
    float: left;
    height: 32px;
    width: 32px;
    line-height: 36px;
    margin-right: 2px;
    padding: 2px;
}

.audio-right {
    float: right;
    margin: 0px 6px;
    height: 36px;
    width: calc(100% - 50px);
}

#audio-play {
    cursor: pointer;
    border: none;
}

.audio-progress-bg {
    cursor: pointer;
    background-color: #dddddd;
    position: relative;
    height: 4px;
    margin-top: 10px;
}

    .audio-progress-bg span {
        content: " ";
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: #3e87e8;
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -6px;
        margin-left: -6px;
        cursor: pointer;
    }

.audio-progress-bar {
    background-color: #649fec;
    width: 0;
    height: 4px;
}

.audio-time {
    overflow: hidden;
    height: 20px;
    line-height: 20px;
    font-size: 10pt;
    color: #184677;
}

.audio-time-rem {
    float: right;
}

.audio-time-current {
    float: left;
}

.stat-icon {
    padding: 2px;
    vertical-align: middle;
    width: 16px;
    height: 16px;
}

.quest-list-icon {
    padding: 2px;
    vertical-align: middle;
    width: 32px;
    height: 32px;
}

.reward-icon {
    padding: 2px;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    margin-left: 43px;
}

.data-list {
    border: none;
    width: 100%;
    max-width: 1620px;
    border-spacing: 0;
    border-collapse: collapse;
    color: #d0e5f7;
    font-size: 14px;
}

    .data-list tr {
        height: 25px;
        padding: 2px;
        background-color: none;
    }

        .data-list tr.alternate {
            background-color: #1c609e;
        }

    .data-list td {
        text-align: center;
        min-width: 29px;
        padding: 3px 0px;
    }

.data-set {
    border: none;
    border-spacing: 0;
    border-collapse: collapse;
    color: #d0e5f7;
    font-size: 14px;
    margin: auto;
}

    .data-set tr {
        height: 25px;
        padding: 2px;
        background-color: none;
    }

        .data-set tr.first {
            background-color: #9bc7ff;
            color: #fff;
        }

        .data-set tr.alternate {
            background-color: #1c609e;
        }

    .data-set td {
        text-align: center;
        min-width: 29px;
    }

.task-stat-chart,
.results-stat-chart {
    width: 50%;
    float: left;
    height: 380px;
    font-size: 12px;
}

.homepage-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    box-sizing: border-box;
    left: 50%;
    transform: translate(-50%, -50%);
}

.top_ul {
    width: 100%;
    height: calc(100% - 2vw - 55px);
    position: relative;
}

    .top_ul a:link {
        text-decoration: none;
        color: unset;
    }

    .top_ul a:hover {
        text-decoration: none;
        color: #f0f8ff;
    }

.label_text {
    width: 82%;
    display: flex;
    justify-content: space-between;
    position: relative;
    left: 9%;
}

.top_ul li {
    cursor: pointer;
    font-size: calc((100vw - 40px) * 0.165 / 14);
}

.top_ul .left {
    left: 7%;
}

.top_ul .right {
    right: 7%;
}

.top_ul .top {
    top: calc(3% + 30px);
}

.top_ul .bottom {
    bottom: 0;
}

.top_ul .btnCorner {
    height: calc(48% - 27px - 1vw);
    aspect-ratio: 4/3;
    position: absolute;
    box-sizing: border-box;
}

.top_ul .btnBox {
    width: 100%;
    height: 100%;
    position: relative;
    /* display: -webkit-box; */
}

.top_ul .btnCorner .hover {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    background-image: url(home_breathe1.png);
    background-size: 100% 100%;
    display: none;
}

.top_ul .btnMiddle {
    width: 34%;
    height: calc(100% + 40px);
    position: absolute;
    left: 33%;
    top: -40px;
}

    .top_ul .btnMiddle .hover {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        background: url(home_breathe2.png);
        background-size: 100% 100%;
        display: none;
        transition: all 0.5s linear 0s;
        -moz-transition: all 0.5s linear 0s;
        -webkit-transition: all 0.5s linear 0s;
        -o-transition: all 0.5s linear 0s;
    }

.top_ul > li:hover .hover {
    display: block;
}

.top_ul .cont {
    width: 100%;
    height: 100%;
}

.top_ul .btnRecommend .cont {
    background: url(icon-recommend.png) no-repeat center;
    background-size: auto 90%;
}

.top_ul .btnGame .cont {
    background: url(icon-game.png) no-repeat center;
    background-size: auto 90%;
}

.top_ul > li .xingqiu {
    width: 100%;
    height: 100%;
}

.top_ul > li .home_center_bg {
    background: url(home_center_bg.png);
    width: auto;
    height: auto;
    max-width: 95%;
    /* max-height: 94%; */
    aspect-ratio: 138/153;
    background-size: 100% 100%;
    overflow: hidden;
    z-index: 1;
    left: 0;
    top: 0;
    position: absolute;
    bottom: 0;
    right: 0;
    margin: auto;
}

.home_center_bg:after {
    content: "任 务";
    position: absolute;
    transform: translate(-50%, 0%);
    left: 50%;
    top: 2%;
    color: #00ffff;
    font-size: 120%;
}

.top_ul .title {
    font-size: 2vw;
    line-height: 1;
    color: #ffffff;
    text-align: center;
    text-shadow: 1px 1px black;
    position: absolute;
    width: 100%;
    bottom: 0;
    transform: translate(0, calc(100% - 20px));
    padding: 25px 0px 30px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.top_ul .left .title {
    background-image: url(title-l.png);
}

.top_ul .right .title {
    background-image: url(title-r.png);
}

.top_ul .center .title {
    background-image: url(title-c.png);
}

.label_text li {
    font-size: 2vw;
    color: #ffffff;
    text-align: center;
    text-shadow: 1px 1px black;
    /* display: none; */
}

    .label_text li:nth-of-type(2n + 1) {
        width: 25.2%;
    }

    .label_text li:nth-of-type(2) {
        width: 30%;
    }

.bottom_ul {
    width: 40%;
    position: absolute;
    bottom: 0%;
    left: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .bottom_ul li {
        width: 58px;
        height: 38px;
        cursor: pointer;
        border-radius: 15px;
        background: #19609d;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

        .bottom_ul li img {
            width: auto;
            height: 20px;
        }

.xingqiu p,
.rili + p {
    text-shadow: 1px 1px black;
}

.rili {
    height: 80%;
    top: 10%;
    aspect-ratio: 127/150;
    margin: auto;
    position: relative;
}

    .rili .month_img {
        position: absolute;
        top: 0;
        left: 20%;
        width: 60%;
        height: 29%;
        margin: 0 auto;
        z-index: 1;
    }

.rili_box {
    position: absolute;
    bottom: 3%;
    left: 0;
    width: 100%;
    height: 90%;
    background: url(box_rili.png);
    background-size: 100% 100%;
    z-index: 0;
}

    .rili_box .week_img {
        width: 88%;
        height: 10%;
        margin-top: 34%;
        margin-left: 6%;
    }

    .rili_box .date_text {
        width: 100%;
        line-height: 1.3;
        font-size: 320%;
        font-weight: 900;
        color: #383838;
        text-align: center;
        font-family: "Work Sans";
    }

    .rili_box .curly1 {
        background: url(curly1.png);
        background-size: 100% 100%;
        width: 15%;
        height: 15%;
        position: absolute;
        right: 6%;
        bottom: 13%;
    }

    .rili_box .curly2 {
        background: url(curly2.png);
        background-size: 100% 100%;
        width: 15%;
        height: 15%;
        position: absolute;
        right: 6%;
        bottom: 13%;
    }

.renwu_box {
    width: 100%;
    height: 75%;
    margin-top: 15%;
    display: flex;
    flex-flow: column nowrap;
}

    .renwu_box li {
        padding: 0 10%;
        box-sizing: border-box;
        width: 100%;
        height: 33%;
    }

        .renwu_box li .rw_top_div {
            height: 100%;
            display: flex;
            flex-flow: column nowrap;
            justify-content: center;
            position: relative;
        }

    .renwu_box .sectionTop {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
    }

    .renwu_box .sectionBtm {
        display: flex;
        align-items: center;
        flex: 1;
    }

    .renwu_box .sectionLeft {
        width: 28%;
    }

    .renwu_box .sectionBtm .sectionLeft {
        min-height: 40px;
    }

    .renwu_box .sectionRight {
        flex: 1;
        width: calc(100% - 70px);
        width: 62%;
    }

    .renwu_box li .rw_top_div .category_box {
        font-size: 125%;
        color: #ffffff;
        font-weight: normal;
    }

    .renwu_box li .rw_top_div .absolute_box {
        height: 80%;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }

        .renwu_box li .rw_top_div .absolute_box.task-type1 {
            background-image: url(task-type1.png);
        }

        .renwu_box li .rw_top_div .absolute_box.task-type2 {
            background-image: url(task-type2.png);
        }

        .renwu_box li .rw_top_div .absolute_box.task-type3 {
            background-image: url(task-type3.png);
        }

    .renwu_box li .rw_top_div .schedule_box {
        height: 1.6vw;
        box-sizing: border-box;
        border: 1px solid #53c2f6;
        border-radius: 0.8vw;
        position: relative;
        padding: calc(0.75% + 1px);
    }

        .renwu_box li .rw_top_div .schedule_box .schedule {
            width: 0%;
            height: 100%;
            position: relative;
            z-index: 2;
            display: block;
        }

        .renwu_box li .rw_top_div .schedule_box .schedule-fill {
            width: 100%;
            height: 100%;
            z-index: 3;
            animation-name: example;
            animation-duration: 1s;
            background-color: #00ceff;
            border-radius: calc(0.8vw - 2px);
            position: absolute;
            display: block;
        }

        .renwu_box li .rw_top_div .schedule_box .percent {
            width: 90%;
            height: 100%;
            text-align: right;
            font-size: 100%;
            color: #ffffff;
            position: absolute;
            top: 0;
            right: 5%;
            z-index: 3;
            text-overflow: ellipsis;
        }

    .renwu_box li .rw_top_div .listitem_box {
        font-size: 120%;
        color: #00ffff;
        line-height: 1.5;
    }

        .renwu_box li .rw_top_div .listitem_box > p {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }

@media screen and (min-width: 901px) and (max-height: calc((100vw - 40px) * 0.315 + 2.67vw + 250px)) {
    .homepage-wrapper {
        width: 100%;
        height: 100%;
    }

    .top_ul {
        width: auto;
        height: calc(100% - 4.4vh);
    }

        .top_ul li {
            font-size: calc((95.6vh - 250px) * 0.523 / 14);
        }

        .top_ul .title {
            font-size: 3.3vh;
        }

    .label_text li {
        font-size: 3.3vh;
    }
}

@media screen and (max-width: 900px) and (orientation: landscape) and (max-height: calc((100vw - 30px) * 0.315 + 2.67vw + 240px)) {
    .homepage-wrapper {
        width: 100%;
        height: 100%;
    }

    .top_ul {
        width: auto;
        height: calc(100% - 6vh);
    }

        .top_ul li {
            font-size: calc((94vh - 200px) * 0.578 / 14);
        }

        .top_ul .title {
            font-size: 4.5vh;
        }

    .label_text li {
        font-size: 4.5vh;
    }

    .top_ul .btnCorner {
        /* top: 27%; */
    }

    .top_ul .btnMiddle {
        width: 30.8%;
        left: 34.6%;
        top: -10%;
    }

    /* .top_ul .btnMiddle {
    width: 30.8%;
    left: 34.6%;
    top: -10%;
  } */

    .bottom_ul {
        width: 90%;
        bottom: -40px;
        left: 5%;
    }

        .bottom_ul li:nth-of-type(2) {
            margin-right: 133px;
        }

        .bottom_ul li:nth-of-type(3) {
            margin-left: 133px;
        }
}

@media screen and (orientation: portrait) {
    .hover {
        display: none;
    }

    .bottom_ul {
        width: 86%;
        left: 7%;
    }

    .top_ul {
        height: 100%;
    }

        .top_ul li {
            font-size: calc((100vw - 30px) * 0.225 / 6 * 0.6);
        }

        .top_ul .btnMiddle {
            width: 100%;
            height: calc(100% - (50vw - 15px) / 8 * 17);
            min-height: 320px;
            left: 0;
            top: 0;
            position: static;
        }

    .home_center_bg {
        display: flex;
        width: 100% !important;
        height: 100% !important;
        padding: 0 8%;
        box-sizing: border-box;
        justify-content: space-between;
        margin-top: 0 !important;
        align-items: center;
        background: url(home_center_bg_m.png) no-repeat center;
    }

        .home_center_bg:after {
            top: 1%;
            font-size: 100%;
        }

    .listitem_box {
        display: none;
    }

    .category_box {
        order: 1;
    }

    .absolute_box {
        order: 0;
    }

    .schedule_box {
        order: 2;
    }

    .renwu_box {
        width: 100% !important;
        margin-top: 0% !important;
        height: 76% !important;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: column;
    }

        .renwu_box li .rw_top_div .img1 {
            display: none;
        }

        .renwu_box li .rw_top_div .img2 {
            width: auto !important;
            height: 88% !important;
        }

        .renwu_box li > p {
            display: none;
        }

        .renwu_box li {
            padding: 0 !important;
            margin-bottom: 0% !important;
            height: 33%;
        }

            .renwu_box li .rw_top_div > span {
                color: #fff !important;
            }

            .renwu_box li .rw_top_div .schedule_box .schedule-fill {
                border-radius: 1vw !important;
            }

    .label_text {
        display: none !important;
    }

    .top_ul > li:nth-of-type(1) {
        left: 0 !important;
    }

    .top_ul > li:nth-of-type(3) {
        right: 0 !important;
    }

    .top_ul .left,
    .top_ul .right {
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        transform: none;
    }

    .top_ul .btnCorner {
        position: relative;
        width: 50%;
        height: auto;
        aspect-ratio: 16 / 17;
        float: left;
        padding: 10px;
        background-image: url(main-mobile.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .top_ul .btnMiddle {
        /* padding: 10px; */
    }

    .top_ul .cont {
        height: 75%;
        top: 5%;
        position: absolute;
    }

    .top_ul .btnCorner .title {
        font-size: 150%;
        bottom: 0;
        transform: none;
        height: 15%;
        padding: 0px;
        background: none !important;
    }

    .top_ul .btnMiddle .title {
        display: none;
    }

    .rili {
        height: 75%;
        top: 5%;
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
    }

    .rili_box .date_text {
        font-size: 280% !important;
    }

    .top_ul .btnCorner .hover {
        width: calc(100% + 20px);
        height: calc(100% + 20px);
        left: -10px;
        top: -10px;
        background-image: url(main-mobile-sel.png);
    }
}

#game-div {
    background: url(game_bg.png) no-repeat;
    background-size: auto 58%;
    background-position: 49% 50%;
}

#game-toggleTag {
    height: 100%;
}

    #game-toggleTag li {
        position: absolute;
        background: url(game_li_bg.png) no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        cursor: pointer;
        user-select: none;
        height: 23.87%;
        aspect-ratio: 290/149;
        font-size: calc((100vh - 210px) * 0.223 / 13);
    }

        #game-toggleTag li .right p:nth-of-type(1) {
            font-size: 180%;
            color: #fff;
            /*margin-top: 13%;*/
        }

        #game-toggleTag li .right p:nth-of-type(2) {
            font-size: 125%;
            color: #00ffff;
        }

        #game-toggleTag li .right p:nth-of-type(3) {
            font-size: 100%;
            color: #00ffff;
            margin-top: 8px;
        }

        #game-toggleTag li img {
            margin-left: 18%;
            margin-right: 8%;
            margin-bottom: 4%;
            width: 18%;
        }

        #game-toggleTag li .right {
            margin-bottom: 4%;
        }

.sc_img {
    position: absolute;
    bottom: 0%;
    left: 10.27%;
    width: 57px;
    height: 37px;
    background: #19609d;
    border-radius: 16px;
}

    .sc_img a {
        width: 100%;
        height: 100%;
        display: block;
    }

.ph_img {
    position: absolute;
    bottom: 0%;
    right: 10.27%;
    width: 57px;
    height: 37px;
    background: #19609d;
    border-radius: 16px;
}

    .sc_img img,
    .ph_img img {
        width: 20px;
        height: 21px;
        margin-left: 19px;
        margin-top: 6px;
    }

@media screen and (max-width: 900px) and (orientation: portrait) {
    #game-div {
        background-size: 58% auto;
    }

    #game-toggleTag {
        width: 100%;
        height: calc(100% - 37px);
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
    }

        #game-toggleTag li {
            position: static;
            background: url(mobile_li_bg.png) no-repeat;
            background-size: 100% 100%;
            aspect-ratio: 538/167;
            height: auto;
            max-height: 25%;
            width: 100%;
            font-size: calc((100vw - 30px) * 0.62 / 16);
        }

            #game-toggleTag li img {
                margin-left: 11%;
                margin-right: 8%;
                width: 11%;
            }

            #game-toggleTag li p:not(:last-of-type) {
                display: inline-block;
            }

            #game-toggleTag li p:nth-of-type(1) {
                font-size: 150% !important;
            }

    .sc_img {
        left: 4.27%;
    }

    .ph_img {
        right: 4.27%;
    }
}

@media screen and (max-width: 900px) and (orientation: landscape) {
    #game-toggleTag {
        width: 100%;
        top: -4%;
        height: 104%;
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        align-content: center;
        justify-content: space-between;
    }

        #game-toggleTag li {
            position: static;
            background: url(mobile_li_bg.png) no-repeat;
            background-size: 100% 100%;
            aspect-ratio: 538/167;
            height: auto;
            max-height: 50%;
            width: calc(50% - 8px);
            font-size: calc((100vw - 30px) * 0.28 / 16);
        }

            #game-toggleTag li img {
                margin-left: 11%;
                margin-right: 8%;
                width: 11%;
            }

            #game-toggleTag li p:not(:last-of-type) {
                display: inline-block;
            }

            #game-toggleTag li p:nth-of-type(1) {
                font-size: 150% !important;
            }

    .sc_img {
        bottom: -37px;
    }

    .ph_img {
        bottom: -37px;
    }
}

#shop-div {
    background: url(bg3.png) no-repeat;
    background-size: auto 100%;
    background-position: 50% 50%;
}

.shop_ul {
    height: 100%;
}

    .shop_ul li {
        position: absolute;
        background: url(li_bg3.png);
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        cursor: pointer;
        user-select: none;
        height: 23.87%;
        aspect-ratio: 290/122;
        font-size: calc((100vh - 210px) * 0.34 / 16);
    }

        .shop_ul li img {
            margin-left: 15%;
            margin-right: 12.5%;
            width: 12.5%;
        }

        .shop_ul li .right p:nth-of-type(1) {
            color: #fff;
            font-size: 180%;
            margin-bottom: 10%;
            font-weight: 400;
        }

        .shop_ul li .right p:nth-of-type(2) {
            color: #00ffff;
            font-size: 100%;
        }

@media screen and (max-width: 900px) and (orientation: portrait) {
    #shop-div {
        background-size: 100% auto;
    }

    #shop_ul {
        width: 100%;
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        align-content: center;
        justify-content: space-between;
    }

        #shop_ul li {
            position: static;
            background: url(mobile_li_bg3.png) no-repeat;
            background-size: 100% 100%;
            aspect-ratio: 149/109;
            height: auto;
            max-height: 33.3%;
            width: calc(50% - 8px);
            font-size: calc((100vw - 30px) * 0.34 / 9);
        }

    .shop_ul li img {
        margin-top: -15%;
        margin-left: 20%;
        margin-right: 7.5%;
        width: 27.5%;
    }

    .shop_ul li .right p:nth-of-type(1) {
        font-size: 130%;
        margin-top: 10%;
        margin-bottom: 30%;
    }

    .shop_ul li .right p:nth-of-type(2) {
        margin-left: -121%;
        font-size: 100%;
        text-align: center;
    }
}

@media screen and (max-width: 900px) and (orientation: landscape) {
    #shop_ul {
        width: 100%;
        height: 110%;
        top: -5%;
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        align-content: center;
        justify-content: space-between;
    }

        #shop_ul li {
            position: static;
            background: url(mobile_li_bg3.png) no-repeat;
            background-size: 100% 100%;
            aspect-ratio: 149/109;
            height: auto;
            max-height: 50%;
            width: calc(33.3% - 8px);
            font-size: calc((100vw - 30px) * 0.21 / 9);
        }

    .shop_ul li img {
        margin-top: -8%;
        margin-left: 20%;
        margin-right: 7.5%;
        width: 15%;
    }

    .shop_ul li .right p:nth-of-type(1) {
        font-size: 130%;
        margin-top: 6%;
        margin-bottom: 5%;
    }

    .shop_ul li .right p:nth-of-type(2) {
        margin-left: -70%;
        font-size: 100%;
        text-align: center;
    }
}

.fullscreen {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

#gameContainer {
    z-index: 10;
}

.game-control-button {
    position: absolute;
    top: 20px;
    background: url("game-controls.png");
    background-size: 160px 64px;
    background-position-y: 0px;
    width: 32px;
    height: 32px;
    border: 0;
    cursor: pointer;
    user-select: none;
    z-index: 11;
}

    .game-control-button:hover {
        background-position-y: -32px;
    }

#btnUnloadGame {
    right: 25px;
    background-position-x: 0px;
}

#btnMuteGame {
    right: 75px;
    background-position-x: -32px;
}

    #btnMuteGame.toggled {
        background-position-x: -64px;
    }

#btnHelpGame {
    right: 125px;
    background-position-x: -96px;
}

#btnShareGame {
    right: 175px;
    background-position-x: -128px;
}

.dialog-help-btn {
    background-image: url("help.png");
    cursor: pointer;
    position: absolute;
    right: 13px;
    top: 13px;
    width: 20px;
    height: 20px;
}

.dialog-set-btn {
    background-image: url("settings.png");
    cursor: pointer;
    position: absolute;
    left: 13px;
    top: 13px;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
}

@media screen and (orientation: portrait) {
    .keyboardBox:nth-of-type(11) {
        margin-left: 5%;
    }

    .keyboardBox:nth-of-type(19) {
        margin-right: 5%;
    }
}

@media screen and (orientation: portrait) {
    #text-editor,
    #task-editor {
        height: calc(100% - 100px);
    }

    div.layout-horz {
        height: calc(100% - 100px);
        justify-content: space-evenly;
    }

    div.horz-column {
        width: 100%;
        height: unset;
    }

    div#post-control {
        height: 50px;
    }

    div.editor {
        color: #d0e5f7;
        margin: 0 10px;
        width: calc(100% - 20px);
        height: 100%;
    }

    #framelist {
        display: none;
    }

    #framecontainer {
        margin: 10px 0px;
        max-width: 100%;
    }

    #resselector {
        width: 100%;
        height: 200px;
    }

    #rescategory {
        flex-direction: column;
        flex-wrap: nowrap;
        width: 40px;
        height: 200px;
        float: left;
    }

    #topSearchCategory {
        width: calc(100% - 40px);
        float: left;
    }

        #topSearchCategory .category {
            display: none;
        }

    #resident {
        width: calc(100% - 40px);
        float: left;
    }

    .restype {
        margin-top: 0px;
        margin-right: 8px;
    }

        .restype.selected {
            margin-right: 0;
        }

    .restoggle,
    .pseudo-restoggle {
        height: 152px;
        width: 50px;
        margin: 0 2px;
        text-align: center;
    }

    .resprop {
        height: 152px;
        width: 52px;
    }

        .resprop input {
            right: 0px;
            bottom: 2px;
            height: 16px;
            width: 50px;
            line-height: 16px;
        }

        .resprop .name {
            white-space: normal;
            overflow: hidden;
            height: 152px;
            line-height: 25px;
            text-align: center;
        }

        .resprop .slider-box {
            top: auto;
            bottom: 1px;
            width: 50px;
        }

    .resentry {
        margin: 0 2px;
        height: 160px;
        width: auto;
    }

    .reserror {
        margin: 0 2px;
        height: 160px;
        width: 50px;
    }

    .resimage-w {
        width: 160px;
    }

    .resimage-h {
        height: 160px;
    }

    #reslist {
        flex-flow: row nowrap;
        width: calc(100% - 40px);
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        height: 168px;
        box-sizing: border-box;
    }

        #reslist.shorter {
            flex-flow: column nowrap;
            width: calc(100% - 40px);
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            height: 136px;
        }

            #reslist.shorter .restoggle,
            #reslist.shorter .pseudo-restoggle,
            #reslist.shorter .resentry,
            #reslist.shorter .reserror {
                margin: 2px 0;
                height: 20px;
                width: calc(100% - 10px);
            }

    .silent {
        width: 0px;
    }
}

#task-block-3-title {
    color: #fff;
    padding: 20px 0 0 20px;
}

.post-button {
    width: 50%;
    height: 50px;
    float: left;
}

.post-style {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.post-text {
    height: 50px;
    box-sizing: border-box;
    width: calc(100% - 60px) !important;
}

.post-text-button {
    width: 32px;
    height: 32px;
    margin: 9px;
    display: inline-block;
    vertical-align: middle;
}

    .post-text-button img {
        width: 100%;
        border: none;
        cursor: pointer;
    }

.text-style {
    flex: 0;
    min-width: 40px;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 18px;
    line-height: 50px;
    color: white;
    border-bottom: none;
    text-align: center;
}

    .text-style:hover {
        border-bottom: 3px solid white;
    }

    .text-style.selected {
        border-bottom: 3px solid #30f5f7;
        color: #30f5f7;
    }

        .text-style.selected:hover {
            border-bottom: 3px solid #30f5f7;
        }

    .text-style.hidden {
        display: none;
    }

.text-style-list {
    flex: 1;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.text-style-input {
    flex: 1;
    box-sizing: border-box;
    position: relative;
    margin-left: 16px;
    margin-right: 16px;
}

.text-style-item {
    width: 32px;
    height: 32px;
    margin-top: 8px;
    line-height: 32px;
    text-align: center;
    vertical-align: middle;
    font-size: 20px;
    cursor: pointer;
    border-radius: 50%;
    box-sizing: border-box;
}

    .text-style-item.withbg {
        border: 1px solid white;
    }

    .text-style-item img {
        width: 100%;
        border: none;
        cursor: pointer;
    }

.text-style-input input[type="range"] {
    width: 100%;
    transform: translate(0, -50%);
    left: 0;
    position: absolute;
}

    .text-style-input input[type="range"] + span {
        height: 50px;
        width: 27px;
        display: inline-block;
        line-height: 50px;
        text-align: center;
        color: #000;
        text-overflow: ellipsis;
        z-index: 2;
        position: relative;
        pointer-events: none;
        user-select: none;
    }

ul.message-list li.quest-entry-item {
    display: none;
    padding-left: 20px;
}

.button.loading {
    position: relative;
}

    .button.loading:before {
        content: " ";
        display: inline-block;
        width: 20px;
        height: 20px;
        background: url(../assets/loading2.gif) left center;
        background-size: 20px auto;
        background-repeat: no-repeat;
        vertical-align: -0.3em;
        margin-right: 2px;
    }

.clickable {
    cursor: pointer;
    user-select: none;
}

.ui-timepicker-div.ui-timepicker-oneLine {
    padding: 1px 1px 10px 0;
}

    .ui-timepicker-div.ui-timepicker-oneLine select {
        min-width: 46px;
    }

.list-avatar {
    border: none;
    width: 40px;
    height: 40px;
    vertical-align: middle;
    margin: 2px;
}

#dataset-fields {
    overflow-y: scroll;
}

.guide-arrow {
    position: absolute;
    display: inline-block;
    background: url("guide-arrow.png");
    background-size: 32px 128px;
    background-position-x: 0px;
    width: 32px;
    height: 32px;
}

.guide-arrow-up {
    background-position-y: 0px;
    -webkit-animation: aniUp 2s infinite ease-in-out;
    animation: aniUp 2s infinite ease-in-out;
}

.guide-arrow-right {
    background-position-y: -32px;
    -webkit-animation: aniRight 2s infinite ease-in-out;
    animation: aniRight 2s infinite ease-in-out;
}

.guide-arrow-left {
    background-position-y: -64px;
    -webkit-animation: aniLeft 2s infinite ease-in-out;
    animation: aniLeft 2s infinite ease-in-out;
}

.guide-arrow-down {
    background-position-y: -96px;
    -webkit-animation: aniDown 2s infinite ease-in-out;
    animation: aniDown 2s infinite ease-in-out;
}

@-webkit-keyframes aniUp {
    0% {
        transform: translate(-50%, -20%);
    }

    50% {
        transform: translate(-50%, 30%);
    }

    100% {
        transform: translate(-50%, -20%);
    }
}

@keyframes aniUp {
    0% {
        transform: translate(-50%, -20%);
    }

    50% {
        transform: translate(-50%, 30%);
    }

    100% {
        transform: translate(-50%, -20%);
    }
}

@-webkit-keyframes aniLeft {
    0% {
        transform: translate(-20%, -50%);
    }

    50% {
        transform: translate(30%, -50%);
    }

    100% {
        transform: translate(-20%, -50%);
    }
}

@keyframes aniLeft {
    0% {
        transform: translate(-20%, -50%);
    }

    50% {
        transform: translate(30%, -50%);
    }

    100% {
        transform: translate(-20%, -50%);
    }
}

@-webkit-keyframes aniDown {
    0% {
        transform: translate(-50%, -80%);
    }

    50% {
        transform: translate(-50%, -130%);
    }

    100% {
        transform: translate(-50%, -80%);
    }
}

@keyframes aniDown {
    0% {
        transform: translate(-50%, -80%);
    }

    50% {
        transform: translate(-50%, -130%);
    }

    100% {
        transform: translate(-50%, -80%);
    }
}

@-webkit-keyframes aniRight {
    0% {
        transform: translate(-80%, -50%);
    }

    50% {
        transform: translate(-130%, -50%);
    }

    100% {
        transform: translate(-80%, -50%);
    }
}

@keyframes aniRight {
    0% {
        transform: translate(-80%, -50%);
    }

    50% {
        transform: translate(-130%, -50%);
    }

    100% {
        transform: translate(-80%, -50%);
    }
}

.guide-block {
    display: inline-block;
    border: 1px solid #69c0ff;
    border-radius: 3px;
    position: relative;
    box-sizing: border-box;
}

    .guide-block::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 3px;
        -webkit-animation: aniBlink 2s infinite ease-in-out;
        animation: aniBlink 2s infinite ease-in-out;
        box-shadow: 0 0 20px #69c0ff;
        -moz-box-shadow: 0 0 20px #69c0ff;
        -webkit-box-shadow: 0 0 20px #69c0ff;
    }

@-webkit-keyframes aniBlink {
    0% {
        opacity: 1;
        box-shadow: 0 0 30px #69c0ff;
        -moz-box-shadow: 0 0 30px #69c0ff;
        -webkit-box-shadow: 0 0 30px #69c0ff;
        background-color: rgba(15, 57, 90, 0.7);
    }

    50% {
        opacity: 0.8;
        box-shadow: 0 0 10px #69c0ff;
        -moz-box-shadow: 0 0 10px #69c0ff;
        -webkit-box-shadow: 0 0 10px #69c0ff;
        background: transparent;
    }

    100% {
        opacity: 1;
        box-shadow: 0 0 30px #69c0ff;
        -moz-box-shadow: 0 0 30px #69c0ff;
        -webkit-box-shadow: 0 0 30px #69c0ff;
        background-color: rgba(15, 57, 90, 0.7);
    }
}

@keyframes aniBlink {
    0% {
        opacity: 1;
        box-shadow: 0 0 30px #69c0ff;
        -moz-box-shadow: 0 0 30px #69c0ff;
        -webkit-box-shadow: 0 0 30px #69c0ff;
        background-color: rgba(15, 57, 90, 0.7);
    }

    50% {
        opacity: 0.8;
        box-shadow: 0 0 10px #69c0ff;
        -moz-box-shadow: 0 0 10px #69c0ff;
        -webkit-box-shadow: 0 0 10px #69c0ff;
        background: transparent;
    }

    100% {
        opacity: 1;
        box-shadow: 0 0 30px #69c0ff;
        -moz-box-shadow: 0 0 30px #69c0ff;
        -webkit-box-shadow: 0 0 30px #69c0ff;
        background-color: rgba(15, 57, 90, 0.7);
    }
}

#guide-div {
    width: 100vw;
    height: 100vh;
    z-index: 1102;
}

.guide-info {
    position: absolute;
    display: block;
    margin: 0px;
    width: fit-content;
    max-width: 33vw;
    font-size: 24px;
    font-family: "黑体";
    border: 2px solid #85939c;
    border-radius: 10px;
    background-color: rgba(15, 57, 90, 0.9);
    padding: 9px;
    box-shadow: 0 0 20px #000;
    -moz-box-shadow: 0 0 20px #000;
    -webkit-box-shadow: 0 0 20px #000;
}

    .guide-info .guide-text {
        color: #9bc7ff;
        line-height: 1.1;
        text-align: justify;
    }

    .guide-info .guide-operate {
        color: white;
        font-size: 80%;
        padding-top: 5px;
        text-align: right;
    }

    .guide-info .highlight {
        color: yellow;
    }

    .guide-info img {
        height: 24px;
        vertical-align: middle;
        border: none;
    }

#task-problem-select {
    z-index: 9;
}

.problem-list {
    margin: 0;
    padding: 4px;
    border: 1px solid #2b8cdb;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    width: 400px;
    background-color: rgba(15, 57, 90, 0.9);
}

.problem-item {
    cursor: pointer;
    width: 90px;
    height: 36px;
    border-radius: 18px;
    text-align: center;
    background-image: url("bg2.png");
    color: #000;
    vertical-align: middle;
    line-height: 36px;
    margin-bottom: 10px;
    margin-top: 10px;
}

    .problem-item:hover {
        color: #785828;
        box-shadow: 0 1px 1px #eee, inset 0.125em 0.125em #111;
    }

    .problem-item.primary {
        background-image: url("bg1.png");
        color: #fff;
    }

        .problem-item.primary:hover {
            color: #f0b050;
        }

#galaxy-page {
    width: 100%;
    bottom: 90px;
    left: 0;
    top: auto;
    height: 0;
}

    #galaxy-page .hintBox {
        position: absolute;
        left: 20%;
        bottom: 0;
    }

#galaxyList {
    width: 600px;
    left: 50%;
    transform: translate(-50%, 0%);
    bottom: 0;
    height: 0;
    position: absolute;
}

    #galaxyList .galaxyListInner {
        position: absolute;
        width: 100%;
        bottom: 60px;
        max-height: calc(100vh - 260px);
        display: none;
    }

    #galaxyList.expand .galaxyListInner {
        display: block;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
        padding: 24px;
        box-sizing: border-box;
        background: radial-gradient( 47% 47% at 50% 1%, rgba(23, 64, 98, 0.9) 0%, rgba(15, 34, 68, 0.9) 100% );
        border: 2px rgba(43, 139, 220, 0.8) solid;
        text-align: center;
    }

.galaxyListInner .title {
    width: 100%;
    color: #fff;
    display: block;
    color: #75FBFD;
    font-size: 14pt;
}

.galaxyListInner .channel {
    display: block;
    background-color: rgba(122, 246, 250, 0.2);
    color: #fff;
    border: 2px rgba(122, 246, 250, 0.9) solid;
    width: 31%;
    float: left;
    box-sizing: border-box;
    margin: 4px 1%;
    transition: all 0.3s;
    cursor: pointer;
    padding: 8px;
}

    .galaxyListInner .channel:hover,
    .galaxyListInner .channel.active {
        background-color: rgba(122, 246, 250, 0.5);
    }

#btnShowGalaxyList {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0%);
}

    #btnShowGalaxyList .globalBtnIcon {
        margin-bottom: 7px;
        font-size: 24px;
    }

.task-button {
    display: inline-block;
    width: 16px;
    height: 16px;
    cursor: pointer;
    background-position: center center;
    background-size: contain;
}

    .task-button.task-writing-edit {
        background-image: url(icon-edit.png);
    }

    .task-button.task-writing-check {
        background-image: url(icon-secure.png);
    }

.task-writing-review {
    outline: none;
}

.pageExamAi {
    width: 100%;
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 14px;
    color: #fff;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

#searchimg-div {
    width: 95%;
    max-width: 888px;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.dialog-content {
    padding: 20px;
}

.title-input-container {
    margin-bottom: 20px;
}

.title-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
}

.preview-container {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    justify-content: space-between;
    overflow-x: auto;
    padding: 5px;
}

.preview-item {
    width: 150px;
    height: 85px;
    border: 2px dashed #bdc3c7;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    background-color: transparent;
    cursor: default;
    flex-shrink: 0;
}

    .preview-item.has-image {
        border-style: solid;
        border-color: #3498db;
    }

    .preview-item.ui-sortable-helper {
        transform: rotate(5deg);
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }

.preview-image-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.preview-image {
    position: absolute;
    max-width: none;
    max-height: none;
}

.preview-placeholder {
    color: #7f8c8d;
    font-size: 14px;
    text-align: center;
    line-height: 85px;
}

.preview-controls {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    padding: 5px;
}

.sort-handle {
    width: 20px;
    height: 20px;
    background-color: rgba(52, 152, 219, 0.8);
    color: white;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: move;
    font-size: 12px;
}

.delete-btn {
    width: 20px;
    height: 20px;
    background-color: rgba(231, 76, 60, 0.8);
    color: white;
    border: none;
    border-radius: 3px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.upload-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.file-input {
    display: none;
}

.upload-btn {
    background-color: #2ecc71;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s;
}

    .upload-btn:disabled {
        background-color: #95a5a6;
        cursor: not-allowed;
    }

    .upload-btn:hover:not(:disabled) {
        background-color: #27ae60;
    }

.image-count {
    color: #7f8c8d;
    font-size: 14px;
}

.crop-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 10px;
    padding: 2px 5px;
    text-align: center;
    display: none;
}

.preview-item.has-image:hover .crop-info {
    display: block;
}