/*
 * Copyright © 2020. Spectrollay
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

/* 自定义滚动条 */
custom-scrollbar {
    display: block;
    opacity: 1;
    overflow-y: hidden;
    position: absolute;
    right: 0; /* 右侧显示 */
    transition: opacity 1s;
}

custom-scrollbar-track {
    display: block;
    overflow-y: hidden;
    position: absolute;
}

custom-scrollbar-thumb {
    display: block;
    min-height: 35px;
    overflow-y: hidden;
    position: absolute;
}

/* 主要滚动条 */
custom-scrollbar.primary_custom_scrollbar {
    width: 22px;
}

custom-scrollbar.primary_custom_scrollbar custom-scrollbar-track {
    background-color: #58585A;
    height: calc(100% - 16px);
    right: 8px;
    top: 8px;
    width: 6px;
}

custom-scrollbar.primary_custom_scrollbar custom-scrollbar-thumb {
    background-color: #E6E8EB;
    border: 2px solid #000000;
    box-shadow: inset 0 -4px #58585A, inset 0 -7px #F9FAFA, inset 3px 3px #F9FAFA, inset -3px 0 #F9FAFA;
    cursor: pointer;
    right: 3px;
    width: 12px;
}

/* 次要滚动条 */
custom-scrollbar.secondary_custom_scrollbar {
    height: 100%;
    top: 0;
    width: 18px;
}

custom-scrollbar.secondary_custom_scrollbar custom-scrollbar-track {
    background-color: transparent;
    height: 100%;
    right: 6px;
    top: 0;
    width: 6px;
}

custom-scrollbar.secondary_custom_scrollbar custom-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.4);
    border: 0;
    box-shadow: unset;
    cursor: default;
    right: 4px;
    width: 10px;
}


/* 文章样式 */
article_block {
    display: block;
    min-width: 270px;
    text-align: center;
    width: 90%;
}

article_title {
    color: #FFFFFF;
    display: block;
    font-family: "Minecraft Seven", sans-serif;
    font-size: 21px;
    height: auto;
    margin: 15px;
}

article_date, article_subtitle {
    display: block;
    font-family: "Minecraft Seven", sans-serif;
    font-size: 18px;
    height: auto;
    margin: 10px;
}

article_detail {
    display: block;
    font-family: "NotoSans Bold", sans-serif;
    margin: 0 6px;
    text-align: left;
}

article_note {
    background-color: rgba(46, 107, 229, 0.1);
    border-left: 6px solid #2E6BE5;
    display: block;
    font-size: 16px;
    font-weight: bold;
    margin: 6px 0;
    padding: 10px;
}

article_list_title {
    background-color: rgba(255, 255, 255, 0.05);
    border-left: 6px solid #FFFFFF;
    display: block;
    font-size: 17px;
    margin: 10px 0;
    padding: 4px 0 4px 10px;
}

article_list {
    display: block;
    margin: 10px 0;
    padding-left: 16px;
    position: relative;
}

article_list:before {
    background-color: #FFFFFF;
    content: "";
    height: 6px;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
}

article_list_l2 {
    display: block;
    margin: 10px 0;
    padding-left: 32px;
    position: relative;
}

article_list_l2:before {
    background-color: #FFFFFF;
    content: "";
    height: 6px;
    left: 16px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 6px;
}

article_list_l3 {
    display: block;
    margin: 10px 0;
    padding-left: 48px;
    position: relative;
}

article_list_l3:before {
    border: 2px solid #FFFFFF;
    box-sizing: border-box;
    content: "";
    height: 6px;
    left: 32px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
}

article_list_l4 {
    display: block;
    margin: 10px 0;
    padding-left: 60px;
    position: relative;
}

article_list_l4:before {
    border: 2px solid #FFFFFF;
    box-sizing: border-box;
    content: "";
    height: 6px;
    left: 48px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 6px;
}


/* Badge */
.badge_area {
    align-items: center;
    display: flex;
}

.badge {
    height: 6px;
    margin-right: 6px;
    width: 6px;
}

.green_badge {
    background-color: #6CC349;
}

.blue_badge {
    background-color: #8CB3FF;
}

.yellow_badge {
    background-color: #FFE866;
}

.red_badge {
    background-color: #F46D6D;
}


/* Banner */
.banner_area {
    align-items: center;
    display: flex;
    justify-content: center;
}

.banner {
    align-items: center;
    color: #FFFFFF;
    display: flex;
    font-family: "NotoSans Bold", sans-serif;
    hyphens: auto;
    justify-content: center;
    margin: 10px 20px;
    min-height: 30px;
    padding: 10px;
    text-align: center;
    width: calc(100% - 40px);
    word-wrap: break-word;
}

.neutral_banner {
    background-color: #1E1E1F;
}

.information_banner {
    background-color: #2E6BE5;
}

.important_banner {
    background-color: #FFE866;
    color: #000000;
    font-weight: bolder;
}


/* 按钮 */
button {
    align-items: center;
    display: flex;
    justify-content: center;
}

.btn {
    cursor: pointer;
    font-family: "NotoSans Bold", sans-serif;
    height: 40px;
    justify-self: center;
    margin: 6px;
}

.extra_small_btn {
    width: 100px;
}

.small_btn {
    width: 130px;
}

.middle_btn {
    width: 200px;
}

.large_btn {
    width: 272px;
}

.normal_btn {
    background-color: #D0D1D4;
    border: 2px solid #1E1E1F;
    box-shadow: inset 0 -4px #58585A, inset 3px 3px rgba(255, 255, 255, 0.6), inset -3px -7px rgba(255, 255, 255, 0.4);
    color: #000000;
    padding-bottom: 6px;
}

.normal_btn:hover {
    background-color: #B1B2B5;
    box-shadow: inset 0 -4px #58585A, inset 3px 3px rgba(255, 255, 255, 0.8), inset -3px -7px rgba(255, 255, 255, 0.6);
}

.normal_btn:active {
    background-color: #B1B2B5;
    box-shadow: inset 3px 3px rgba(255, 255, 255, 0.8), inset -3px -3px rgba(255, 255, 255, 0.6);
    height: 36px;
    margin-top: 10px;
    padding-bottom: 2px;
}

.green_btn {
    background-color: #3C8527;
    border: 2px solid #1E1E1F;
    box-shadow: inset 0 -4px #1D4D13, inset 3px 3px rgba(255, 255, 255, 0.2), inset -3px -7px rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
    padding-bottom: 6px;
}

.green_btn:hover {
    background-color: #2A641C;
    box-shadow: inset 0 -4px #1D4D13, inset 3px 3px rgba(255, 255, 255, 0.4), inset -3px -7px rgba(255, 255, 255, 0.3);
}

.green_btn:active {
    background-color: #1D4D13;
    box-shadow: inset 3px 3px rgba(255, 255, 255, 0.4), inset -3px -3px rgba(255, 255, 255, 0.3);
    height: 36px;
    margin-top: 10px;
    padding-bottom: 2px;
}

.red_btn {
    background-color: #C33636;
    border: 2px solid #1E1E1F;
    box-shadow: inset 0 -4px #AD1D1D, inset 3px 3px rgba(255, 255, 255, 0.2), inset -3px -7px rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
    padding-bottom: 6px;
}

.red_btn:hover {
    background-color: #C02D2D;
    box-shadow: inset 0 -4px #AD1D1D, inset 3px 3px rgba(255, 255, 255, 0.5), inset -3px -7px rgba(255, 255, 255, 0.4);
}

.red_btn:active {
    background-color: #AD1D1D;
    box-shadow: inset 3px 3px rgba(255, 255, 255, 0.5), inset -3px -3px rgba(255, 255, 255, 0.4);
    height: 36px;
    margin-top: 10px;
    padding-bottom: 2px;
}

.disabled_btn {
    background-color: #D0D1D4;
    border: 2px solid #8C8D90;
    box-shadow: inset 0 -4px #B1B2B5;
    color: #48494A;
    cursor: not-allowed;
    padding-bottom: 6px;
}

.disabled_btn img {
    filter: invert(100%) grayscale(100%) brightness(50%);
}

/* 带有图标的按钮 */
.button_img {
    width: 14px;
}

.button_img.left {
    margin-right: 4px;
}

.button_img.right {
    margin-left: 4px;
}

.link_img, .link_img_black {
    height: 14px;
    margin-bottom: -1.5px;
    padding-right: 6px;
    width: 14px;
}

/* 侧边栏按钮 */
.sidebar_btn {
    background-color: #48494A;
    border: 2px solid #131313;
    box-shadow: inset -1px -1px #1E1E1F, inset 1px 1px #1E1E1F, inset -2px -2px #313233, inset 2px 2px #6D6D6E;
    color: #FFFFFF;
    height: 40px;
    margin: 6px;
    padding-bottom: 2px;
    width: 140px;
}

.sidebar_btn:hover, .sidebar_btn:active {
    background-color: #67686A;
    border: 2px solid #FFFFFF;
    box-shadow: unset;
    height: 40px;
    margin: 6px;
    padding-bottom: 2px;
}

/* 带有Tooltip的按钮 */
.btn_with_tooltip_cont {
    display: inline-block;
    position: relative;
}

.btn_tooltip {
    background-color: #1F1F1F;
    color: #FFFFFF;
    opacity: 0;
    padding: 5px;
    position: absolute;
    right: 10px;
    text-align: center;
    top: -30px;
    transition: opacity 0.6s;
    visibility: hidden;
    z-index: 1;
}

.btn_with_tooltip_cont:hover .btn_tooltip {
    opacity: 1;
    visibility: visible;
}

.tip_icon {
    height: 20px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}


/* Checkbox 复选框 */
custom-checkbox {
    display: inline-block;
    margin: 5px;
}

.custom-checkbox {
    background-color: #8C8D90;
    border: 2px solid #1E1E1F;
    box-shadow: inset 2px 2px rgba(255, 255, 255, 0.2), inset -2px -2px rgba(255, 255, 255, 0.1);
    cursor: pointer;
    height: 20px;
    position: relative;
    width: 20px;
}

.custom-checkbox:hover {
    background-color: #B1B2B5;
}

.custom-checkbox:active {
    background-color: #58585A;
}

.custom-checkbox.on {
    background-color: #3C8527;
}

.custom-checkbox.on:hover {
    background-color: #2A641C;
}

.custom-checkbox.on:active {
    background-color: #1D4D13;
}

.custom-checkbox.disabled {
    background-color: #D0D1D4;
    border: 2px solid #8C8D90;
    box-shadow: none;
    cursor: not-allowed;
}

.custom-checkbox.disabled:hover, .custom-checkbox.disabled:active {
    background-color: #D0D1D4;
    border: 2px solid #8C8D90;
    box-shadow: none;
}

.custom-checkbox img {
    display: none;
    height: 27px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 27px;
}

.custom-checkbox.disabled img {
    filter: grayscale(100%) brightness(50%);
}

.custom-checkbox.on img {
    display: block;
}


/* 删除线 */
del-line {
    text-decoration: line-through;
}

/* Divider 分割线 */
divider {
    background-color: #58585A;
    display: block;
    height: 2px;
    margin: 6px 0;
    width: 100%;
}

divider-box {
    box-shadow: inset 0 2px #333334, inset 0 -2px #5A5B5C;
    display: block;
    height: 4px;
    margin: 6px 0;
    width: 100%;
}

/* Line 分割线 */
line {
    background-color: #48494A;
    display: block;
    height: 2px;
    margin: 1px 0;
    width: 100%;
}

vertical-line {
    background-color: #FFFFFF;
    display: inline-block;
    height: 100%;
    margin: 0 6px;
    width: 2px;
}


/* Dropdown 下拉菜单 */
custom-dropdown {
    cursor: pointer;
    display: block;
    font-size: 14px;
    margin: 6px; /* 外边距,js里有用到 */
    position: relative;
    width: calc(100% - 12px); /* 减去外边距的2倍 */
}

custom-dropdown .disabled_dropdown {
    cursor: not-allowed;
}

.dropdown_label {
    align-items: center;
    background-color: #D0D1D4;
    border: 2px solid #1E1E1F;
    box-shadow: inset 0 -4px #58585A, inset 3px 3px rgba(255, 255, 255, 0.6), inset -3px -7px rgba(255, 255, 255, 0.4);
    box-sizing: border-box; /* 包括内边距和边框 */
    color: #000000;
    display: flex;
    height: 40px;
    padding: 10px 10px 16px 10px;
}


.dropdown_label:hover {
    background-color: #B1B2B5;
    box-shadow: inset 0 -4px #58585A, inset 3px 3px rgba(255, 255, 255, 0.8), inset -3px -7px rgba(255, 255, 255, 0.6);
}


.dropdown_label.disabled_dropdown {
    background-color: #D0D1D4;
    border: 2px solid #8C8D90;
    box-shadow: inset 0 -4px #B1B2B5;
    color: #48494A;
    cursor: not-allowed;
}

.dropdown_arrow {
    position: absolute;
    right: 10px;
    top: calc(50% - 2px);
    transform: translateY(-50%);
    width: 24px;
}

.disabled_dropdown_arrow {
    filter: invert(100%) grayscale(100%) brightness(50%);
}

.dropdown_options {
    background-color: #58585A;
    border: 2px solid #1E1E1F;
    box-shadow: inset 2px 0 #8C8D90, inset -2px 0 #8C8D90, inset 0 2px #8C8D90, inset 0 -2px #8C8D90;
    color: #FFFFFF;
    display: none;
    left: 0;
    position: absolute;
    top: 0;
    width: calc(100% - 4px); /* 减去边框的2倍 */
    z-index: 5;
}

.dropdown_option {
    align-items: center;
    box-shadow: inset 0 1px #8C8D90, inset 0 -1px #8C8D90;
    box-sizing: border-box; /* 包括内边距和边框 */
    cursor: pointer;
    display: flex;
    height: 40px;
    justify-content: space-between;
    padding: 0 10px;
    width: 100%
}

.dropdown_checkmark {
    width: 24px;
}

.dropdown_option.selected .dropdown_checkmark {
    display: block;
}

.dropdown_option .dropdown_checkmark {
    display: none;
}


/* Modal弹窗 */
.normal_overlay {
    z-index: 13;
}

#overlay_alert_modal {
    z-index: 15;
}

#overlay_first_visit_today_modal {
    z-index: 17;
}

#overlay_compatibility_modal {
    z-index: 19;
}

#overlay_status_modal {
    z-index: 99;
}

modal_area {
    border: 2px solid #1E1E1F;
    display: none;
    left: 50%;
    max-width: calc(min(600px, 100vw));
    min-width: 320px;
    outline: none;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 12;
}

.normal_modal {
    z-index: 14;
}

#alert_modal {
    z-index: 16;
}

#first_visit_today_modal {
    z-index: 18;
}

#compatibility_modal {
    z-index: 20;
}

#status_modal {
    z-index: 100;
}

modal {
    background-color: #313233;
    color: #FFFFFF;
    display: block;
    text-align: center;
}

modal_title_area {
    background-color: #48494A;
    box-shadow: inset 2px 2px rgba(255, 255, 255, 0.2), inset -2px -2px rgba(255, 255, 255, 0.1);
    display: block;
    font-size: 18px;
    height: 40px;
    position: relative;
}

modal_title {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    left: 50%;
    position: absolute;
    top: calc(50% - 1px);
    transform: translate(-50%, -50%);
    width: 100%;
}

modal_close_btn {
    align-items: center;
    cursor: pointer;
    display: flex;
    height: calc(100% - 8px);
    justify-content: center;
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
}

modal_close_btn:hover, modal_close_btn:active {
    background-color: #58585A;
}

.modal_close_btn_img {
    height: 20px;
    width: 20px;
}

modal_content {
    display: grid;
    align-items: center;
    max-height: calc(min(450px, calc(90vh - 150px)));
    min-height: 60px;
    overflow-y: auto;
    padding: 10px 10px 10px 10px;
    scrollbar-width: none;
}

modal_checkbox_area {
    align-items: center;
    background-color: #48494A;
    border-bottom: 2px solid #333334;
    border-top: 2px solid #5A5B5C;
    cursor: pointer;
    display: flex;
    justify-content: left;
    padding: 2px;
}

modal_button_area {
    align-items: center;
    background-color: #48494A;
    border-bottom: 2px solid #333334;
    border-top: 2px solid #5A5B5C;
    display: flex;
    justify-content: center;
    padding: 2px 0;
}

modal_textfield_area {
    background-color: #48494A;
    border-bottom: 2px solid #333334;
    border-top: 2px solid #5A5B5C;
    display: block;
    padding: 2px 0;
    text-align: left;
}

modal_textfield_title {
    margin: 10px;
}

.modal_custom_btn {
    width: 100%;
}

modal_button_group {
    width: calc(100% - 20px);
}

modal_button_list {
    align-items: center;
    display: flex;
}

.modal_btn {
    width: calc(100% - 10px);
}


/* Pop 弹窗 */
.pop_area {
    align-items: center;
    bottom: 40px;
    display: flex;
    flex-direction: column-reverse; /* 让新消息从下往上排 */
    left: 50%;
    overflow: hidden;
    pointer-events: none;
    position: fixed;
    transform: translateX(-50%);
    width: min(90%, 500px);
    z-index: 100;
}

.pop {
    background-color: #1F1F1F;
    color: white;
    margin: 6px 0;
    opacity: 0;
    padding: 10px 20px;
    pointer-events: none;
    text-align: center;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.pop.show {
    opacity: 1;
    transform: translateY(0);
}

.pop.success {
    color: #6CC349;
}

.pop.process {
    color: #FFE866;
}

.pop.error {
    color: #F46D6D;
}

.pop.vip {
    color: #FEE039;
}

.pop.debug_text {
    background-color: #FFE866;
    color: #000000;
}


/* Slider 滑块 */
.slider_content {
    align-items: center;
    display: flex;
    height: 30px;
    justify-content: center;
    margin: 14px 0;
    width: 100%;
}

.slider {
    background-color: #8C8D90;
    border: 2px solid #1E1E1F;
    box-shadow: inset 2px 2px rgba(255, 255, 255, 0.4), inset -2px -2px rgba(255, 255, 255, 0.2);
    cursor: pointer;
    height: 8px; /* 进度条高度 */
    margin: 6px;
    position: relative; /* 相对定位,用于子元素绝对定位的参考 */
    width: 100%; /* 进度条宽度 */
}

.slider_process {
    background-color: #3C8527;
    bottom: 0;
    box-shadow: inset 2px 2px rgba(255, 255, 255, 0.4), inset -2px -2px rgba(255, 255, 255, 0.2);
    left: 0;
    max-width: 100%;
    position: absolute;
    top: 0;
    transition: width 100ms linear;
}

.slider_slider {
    background-color: #D0D1D4;
    border: 2px solid #1E1E1F;
    box-shadow: inset 0 -4px #58585A, inset 2px 2px rgba(255, 255, 255, 0.6), inset -2px -6px rgba(255, 255, 255, 0.4);
    height: 28px;
    position: absolute; /* 相对于包含它的.slider元素绝对定位 */
    top: 50%; /* 滑块垂直居中 */
    transform: translate(-50%, -50%); /* 水平和垂直居中 */
    transition: left 100ms linear;
    width: 28px;
    z-index: 1;
}

.slider_slider:hover, .slider_slider:active, .slider_content:hover .slider_slider, .slider_slider.active {
    background-color: #B1B2B5;
    box-shadow: inset 0 -4px #58585A, inset 2px 2px rgba(255, 255, 255, 0.8), inset -2px -6px rgba(255, 255, 255, 0.6);
}

.slider_segment { /* Set Slider的分段线样式 */
    background-color: #1E1E1F;
    height: 8px;
    position: absolute;
    top: 50%; /* 分段线垂直居中 */
    transform: translateY(-50%); /* 分段线垂直居中 */
    width: 2px;
}

.slider_value_info {
    cursor: default;
}

.disabled_slider {
    cursor: not-allowed;
}

.disabled_slider.slider {
    background-color: #CFD0D4;
    border: 2px solid #8C8D90;
}

.disabled_slider .slider_segment {
    background-color: #8C8D90;
}

.disabled_slider .slider_process {
    background-color: #CFD0D4;
    box-shadow: inset 2px 2px rgba(255, 255, 255, 0.4), inset -2px -2px rgba(255, 255, 255, 0.2);
}


.disabled_slider .slider_slider {
    background-color: #CFD0D4;
    border: 2px solid #8C8D90;
    box-shadow: inset 0 -4px #B0B1B5, inset 2px 2px rgba(255, 255, 255, 0.6), inset -2px -6px rgba(255, 255, 255, 0.4);
}

.disabled_slider .slider_slider:hover, .disabled_slider .slider_slider:active, .slider_content:hover .disabled_slider .slider_slider, .disabled_slider .slider_slider.active {
    background-color: #CFD0D4;
    border: 2px solid #8C8D90;
    box-shadow: inset 0 -4px #B0B1B5, inset 2px 2px rgba(255, 255, 255, 0.6), inset -2px -6px rgba(255, 255, 255, 0.4);
}


/* Switch 开关 */
.switch_content {
    margin: 6px;
}

.switch {
    cursor: pointer;
    height: 24px;
    overflow: visible;
    position: relative;
    width: 58px;
}

.normal_switch {
    background: linear-gradient(to right, #3C8527 50%, #8C8D90 50%); /* 左半部分绿色,右半部分灰色 */
    border: 2px solid #1E1E1F;
    box-shadow: inset 2px 2px rgba(255, 255, 255, 0.2), inset -2px -2px rgba(255, 255, 255, 0.1);
}

.disabled_switch {
    background-color: #D0D1D4;
    border: 2px solid #8C8D90;
    cursor: not-allowed;
}

.switch_style {
    background-color: transparent;
    height: 16px;
    position: absolute;
    top: 3px;
    width: 16px;
}

.switch_style.left {
    left: 6px;
}

.switch_style.right {
    right: 7px;
}

.switch_style.left img, .switch_style.right img {
    height: 16px;
}

.disabled_switch .switch_style.left img {
    filter: grayscale(100%) brightness(50%);
}

.disabled_switch .switch_style.right img {
    filter: invert(100%) grayscale(100%) brightness(50%);
}

@keyframes bounce_left {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(0);
    }
    48% {
        transform: translateX(-2px);
    }
    52% {
        transform: translateX(0px);
    }
}

@keyframes bounce_right {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(0);
    }
    48% {
        transform: translateX(2px);
    }
    52% {
        transform: translateX(0px);
    }
}

.switch_bounce_left {
    animation: bounce_right 175ms ease-in-out 2;
}

.switch_bounce_right {
    animation: bounce_left 175ms ease-in-out 2;
}

.switch_slider {
    background-color: #D0D1D4;
    height: 28px;
    left: -2px;
    position: absolute;
    top: -6px;
    transition: left 125ms cubic-bezier(0.34, 1.56, 0.64, 1);
    width: 28px;
    z-index: 1;
}

.normal_switch .switch_slider {
    border: 2px solid #1E1E1F;
    box-shadow: inset 0 -4px #58585A, inset 2px 2px rgba(255, 255, 255, 0.6), inset -2px -6px rgba(255, 255, 255, 0.4);
}

.disabled_switch .switch_slider {
    border: 2px solid #8C8D90;
    box-shadow: inset 0 -4px #B1B2B5;
}

.normal_switch .switch_slider:hover, .normal_switch .switch_slider:active, .normal_switch .switch:hover .switch_slider, .normal_switch .switch_slider.active {
    background-color: #B1B2B5;
    box-shadow: inset 0 -4px #58585A, inset 2px 2px rgba(255, 255, 255, 0.8), inset -2px -6px rgba(255, 255, 255, 0.6);
}

.switch.on .switch_slider {
    left: 28px;
}


/* Tag */
.tag_area {
    align-items: center;
}

.tag {
    color: #000000;
    display: inline-flex;
    font-size: 12px;
    margin-right: 5px;
    padding: 0 2px;
    text-wrap: nowrap;
    vertical-align: 10%;
}

.black_tag {
    background-color: #1E1E1F;
    color: #FFFFFF;
}

.green_tag {
    background-color: #6CC349;
}

.blue_tag {
    background-color: #8CB3FF;
}

.yellow_tag {
    background-color: #FFE866;
}

.red_tag {
    background-color: #F46D6D;
}


/* TextField文本框 */
.text_field_container {
    display: flex;
    height: auto;
    margin: 6px;
}

text-field {
    align-self: center;
    display: block;
    flex: 1;
    margin: 6px 0;
    min-height: 40px;
    position: relative;
}

.disabled_text_field {
    cursor: not-allowed;
}

.input {
    background-color: #313233;
    border: 2px solid #1E1E1F;
    box-shadow: inset 0 4px #242425;
    box-sizing: border-box; /* 包括内边距和边框 */
    caret-color: #6CC349;
    color: #FFFFFF;
    cursor: text;
    font-family: "NotoSans Bold", sans-serif;
    height: max(100%, 40px);
    min-height: 40px;
    outline: none;
    overflow-y: hidden;
    overscroll-behavior: contain;
    padding: 10px 10px 11px 10px;
    resize: none;
    touch-action: pan-y;
    width: 100%;
}

.disabled_text_field .input {
    background-color: #D0D1D4;
    border: 2px solid #8C8D90;
    box-shadow: inset 0 4px #B1B2B5;
    color: #48494A;
    pointer-events: none;
}

.input::selection {
    background-color: rgba(108, 195, 73, 0.5);
}

.hint {
    color: #B1B2B5;
    font-size: 14px;
    height: 23px;
    left: 10px;
    pointer-events: none; /* 允许点击穿透 */
    position: absolute;
    top: 11px;
    transition: opacity 0.2s ease;
}

.disabled_text_field .hint {
    color: #48494A;
}

.text_field_container custom-button {
    align-self: center;
}

.input_btn {
    width: 120px;
}