.keyboard-plugin {
    position: relative;
    margin: 10px auto auto;
    opacity: 1;
    overflow: hidden
}

.keyboard-plugin .hand {
    position: absolute;
    pointer-events: none;
    height: 363px;
    top: -10px;
    left: 0px;
    opacity: 0.9;
    transform: translateX(55px) scale(1.55);
}

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

.flex-wrap {
    display: flex;
    flex-wrap: wrap;
}

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

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

.flex-column {
    display: flex;
    flex-direction: column;
    align-items: center;
}

img {
    user-select: none;
}

.img-radius {
    width: 80px;
    border-radius: 50%;
}

figure {
    text-align: center;
}

.img-placeholder {
    max-width: 100%;
    text-align: center;
}

.text-primary {
    color: #007bff;
}

.text-secondary {
    color: #6c757d;
}

.text-success {
    color: #28a745;
}

.text-info {
    color: #17a2b8;
}

.text-warning {
    color: #ffc107;
}

.text-danger {
    color: #dc3545;
}

.text-light {
    color: #f8f9fa;
}

.text-dark {
    color: #343a40;
}

.text-gray {
    color: gray;
}

.text-yellow {
    color: yellow;
}

.text-vertical {
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 2px;
}

.bg-clear {
    background-color: transparent;
    border: none;
}

.bg-white {
    background-color: #ffffff;
}

.bg-yellow-light {
    background-color: #fffbeb;
}

.bg-red-light {
    background-color: #fee2e2;
}

.bg-teal-light {
    background-color: #ccfbef;
}

.bg-blue-light {
    background-color: #dbeafe;
}

.bg-green-light {
    background-color: #dcfce7;
}

.overline {
    text-decoration: line-through;
}

/* 基础阴影 */
.shadow {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 悬停动画 */
.hover-lift {
    transition: transform 0.3s ease;
}

/* 悬停上浮 */
.hover-lift:hover {
    transform: translateY(-5px);
}

.border-round {
    border-radius: 5px;
}

.border-circle {
    border-radius: 50%;
}

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

.separator::after, .separator::before {
    content: '';
    background: rgba(50, 50, 50, 0.06);
    max-width: 20%;
    height: 1px;
    margin: 0 1em;
    flex: 1;
}

.bold-text, .text-bold {
    font-weight: bold;
    text-shadow: 0 -1px 0px rgba(0, 0, 0, .2);
}

.beautiful-line {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(241, 107, 107, 0.75), rgba(0, 0, 0, 0));
    margin: 20px 0;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    justify-content: center;
}

.grid-container70 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
    gap: 15px;
    justify-content: left;
}

.grid-container180 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 5px;
    justify-content: center;
}

.grid-container260 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 15px;
    justify-content: center;
}

.grid-container350 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 15px;
    justify-content: center;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

#content-container p {
    margin: 15px 0;
}

#content-container ol li {
    margin: 15px 15px;
}

#content-container ul li {
    margin: 15px 15px;
}

#content-container h3, #content-container h4 {
    color: black;
    background-color: #f1f1f1;
    line-height: 30px;
    border-radius: 5px;
    font-weight: bold;
}

#content-container h3 {
    font-size: 1.5em;
}

#content-container h4 {
    font-size: 1.2em;
}

h3, h4 {
    padding-left: 5px;
}

.line-h {
    display: inline;
    font-size: 1em;
    font-weight: bold;
}

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
    border: 3px solid #f1f1f1;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.music-switch {
    cursor: pointer;
    width: 36px;
}

.music-switch .on, .music-switch .off {
    width: 36px;
}

.music-switch img {
    animation: rotate360 10s linear infinite;
}

.mt3 {
    margin-top: 3px;
}

.mt5 {
    margin-top: 5px;
}

.mt8 {
    margin-top: 8px;
}

.mt10 {
    margin-top: 10px;
}

.mt15 {
    margin-top: 15px;
}

.mt20 {
    margin-top: 20px;
}

.mt30 {
    margin-top: 30px;
}

.mt40 {
    margin-top: 40px;
}

.mt50 {
    margin-top: 50px;
}

.mb3 {
    margin-bottom: 3px;
}

.mb5 {
    margin-bottom: 5px;
}

.mb8 {
    margin-bottom: 8px;
}

.mb10 {
    margin-bottom: 10px;
}

.mb15 {
    margin-bottom: 15px;
}

.mb20 {
    margin-bottom: 20px;
}

.mb30 {
    margin-bottom: 30px;
}

.mb40 {
    margin-bottom: 40px;
}

.mb50 {
    margin-bottom: 50px;
}

.plr5 {
    padding: 0px 5px;
}

.plr10 {
    padding: 0px 10px;
}

.plr15 {
    padding: 0px 15px;
}

.plr20 {
    padding: 0px 20px;
}

.plr30 {
    padding: 0px 30px;
}

.plr40 {
    padding: 0px 40px;
}

.plr50 {
    padding: 0px 50px;
}

.p10 {
    padding: 10px;
}

.p15 {
    padding: 15px;
}

.p20 {
    padding: 20px;
}

.p30 {
    padding: 30px;
}

.p40 {
    padding: 40px;
}

.p50 {
    padding: 50px;
}

.text-2x {
    font-size: 2rem;
}

.text-3x {
    font-size: 3rem;
}

.text-4x {
    font-size: 4rem;
}

.text-5x {
    font-size: 5rem;
}

.w-h-2x {
    width: 2rem;
    height: 2rem;
}

.w-h-3x {
    width: 3rem;
    height: 3rem;
}

.w-h-4x {
    width: 4rem;
    height: 4rem;
}

.w-h-5x {
    width: 5rem;
    height: 5rem;
}

.tag-list {
    padding: 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tag-list li {
    display: inline-block;
    padding: 0 5px;
    margin: 0px !important;
}

.tag-list li a {
    display: block;
    line-height: 20px;
}

.tag-list li:nth-child(21n+1) a {
    color: #66bcff;
    font-size: 15px
}

.tag-list li:nth-child(21n+2) a {
    color: #68d46d;
    font-size: 18px
}

.tag-list li:nth-child(21n+3) a {
    color: #f58797;
    font-size: 19px
}

.tag-list li:nth-child(21n+4) a {
    color: #66bcff;
    font-size: 15px
}

.tag-list li:nth-child(21n+5) a {
    color: #9ed96a;
    font-size: 18px
}

.tag-list li:nth-child(21n+6) a {
    color: #68d9c2;
    font-size: 14px
}

.tag-list li:nth-child(21n+7) a {
    color: #77d46a;
    font-size: 16px
}

.tag-list li:nth-child(21n+8) a {
    color: #7fdcfb;
    font-size: 13px
}

.tag-list li:nth-child(21n+9) a {
    color: #d983ee;
    font-size: 18px
}

.tag-list li:nth-child(21n+10) a {
    color: #6d86b3;
    font-size: 17px
}

.tag-list li:nth-child(21n+11) a {
    color: #b3b0f6;
    font-size: 18px
}

.tag-list li:nth-child(21n+12) a {
    color: #f792e5;
    font-size: 17px
}

.tag-list li:nth-child(21n+13) a {
    color: #ebc53c;
    font-size: 15px
}

.tag-list li:nth-child(21n+14) a {
    color: #b0d5f5;
    font-size: 14px
}

.tag-list li:nth-child(21n+15) a {
    color: #ffa646;
    font-size: 16px
}

.tag-list li:nth-child(21n+16) a {
    color: #888;
    font-size: 15px
}

.tag-list li:nth-child(21n+17) a {
    color: #7fdcfb;
    font-size: 16px
}

.tag-list li:nth-child(21n+18) a {
    color: #959fff;
    font-size: 15px
}

.tag-list li:nth-child(21n+19) a {
    color: #a6da6d;
    font-size: 14px
}

.tag-list li:nth-child(21n+20) a {
    color: #ff7f58;
    font-size: 13px
}

.tag-list li:nth-child(21n+21) a {
    color: #91BEDA;
    font-size: 13px
}

tbody tr:nth-child(odd) td {
    background-color: #f8f9fa;
}

tbody tr:nth-child(even) td {
    background-color: #ffffff;
}

tbody tr:hover td {
    background-color: #d1e7dd;
    transition: background-color 0.2s;
}

.marquee-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 30px;
    background: linear-gradient(to top in oklch, rgb(254 232 232) 0%, hsla(55, 92%, 95%, 0) 100%);
    opacity: 0.7;
}

.marquee-wrapper {
    position: absolute;
    white-space: nowrap;
    will-change: transform;
}

.marquee-content {
    display: inline-block;
    padding-right: 50px;
}

.marquee-content ul {
    display: inline-block;
    margin: 0;
    padding: 0;
    list-style: none;
}

.marquee-content li {
    display: inline-block;
    margin-right: 30px;
    color: #666;
    font-size: 14px;
    line-height: 30px;
}

.switch-container {
    /*margin: 20px;*/
    display: inline-flex; /* 使开关和文字同行显示 */
    align-items: center;
    gap: 10px; /* 开关与外部文字间距 */
}

/* 开关标题（可选，用于描述开关功能） */
.switch-title {
    font-size: 14px;
    color: #333;
}

/* 隐藏原生checkbox */
.toggle-checkbox {
    display: none;
}

/* 开关容器（包含滑块和内部文案） */
.toggle-label {
    position: relative;
    display: inline-block;
    width: 80px; /* 加宽以容纳文字 */
    height: 30px;
    background-color: #ccc;
    border-radius: 15px;
    cursor: pointer;
    transition: background-color 0.3s;
    overflow: hidden; /* 隐藏超出容器的文字 */
}

/* 开关内部文案（关闭状态） */
.toggle-label .off-text {
    position: absolute;
    right: 8px; /* 靠右显示 */
    line-height: 30px; /* 垂直居中 */
    font-size: 12px;
    color: white;
    transition: opacity 0.3s;
}

/* 开关内部文案（开启状态） */
.toggle-label .on-text {
    position: absolute;
    left: 8px; /* 靠左显示 */
    line-height: 30px;
    font-size: 12px;
    color: white;
    opacity: 0; /* 未选中时隐藏 */
    transition: opacity 0.3s;
}

/* 滑块样式 */
.toggle-label::after {
    content: '';
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: white;
    top: 2px;
    left: 2px;
    transition: transform 0.3s;
    z-index: 1; /* 滑块在文字上方，避免遮挡 */
}

/* 选中状态样式 */
.toggle-checkbox:checked + .toggle-label {
    background-color: #5cb85c;
}

/* 选中时滑块位置 */
.toggle-checkbox:checked + .toggle-label::after {
    transform: translateX(50px); /* 滑动距离=开关宽度-滑块宽度 */
}

/* 选中时显示开启文案，隐藏关闭文案 */
.toggle-checkbox:checked + .toggle-label .on-text {
    opacity: 1;
}

.toggle-checkbox:checked + .toggle-label .off-text {
    opacity: 0;
}

.icon-new, .icon-new-right {
    right: -5px;
}

.icon-new, .icon-new-left {
    position: absolute;
    top: -5px;
    z-index: 10;
    width: 28px;
}

/* open div begin */
.ajax_window {
    width: 400px;
    border: 1px #94b2bc solid;
    position: relative;
    z-index: 2000;
    background-color: #eef6fc;
    border-radius: 5px;
    filter: progid:DXImageTransform.Microsoft.Shadow(Color=#c5d0d4, Direction=120, strength=3);
}

.ajax_window h2 {
    height: 25px;
    font-size: 12px;
    background-color: #1a1a1a;
    /*background-color: #3bb3e0;*/
    padding-top: 5px;
    padding-left: 10px;
    margin: -1px;
    color: white;
    border-radius: 5px;
}

.ajax_window h2 a {
    position: absolute;
    right: 5px;
    font-size: 12px;
    color: white;
}

.ajax_wait {
    margin: 0px;
    padding-top: 15px;
    color: #2e5b77;
    text-align: center;
    background: #eef6fc;
    height: 95%;
    width: 100%;
    overflow-y: auto;
    overflow-x: auto;
}

.ajax_wait p {
    margin-top: 15px;
    margin-bottom: 25px;
}

.loading_gif {
    margin: 0px;
    height: 40px;
    background: url(/static/css/images/blue-loading-dc2fd7c0ed853c56b4ac65710af3bd0a.gif) no-repeat left center;
    width: 50px;
    margin-top: -30px;
    margin-left: 100px;
    /**float: left;**/
}

.loading {
    margin: 0px;
    padding: 40px 20px;
    background: #f5fafe url(/static/css/images/loading-50c5e3e79b276c92df6cc52caeb464f0.gif) repeat-x 0 -247px;
    overflow: hidden;
    text-align: center;
    height: 20px;
}

.loading .pic {
    margin: 0px;
    height: 20px;
    background: url(/static/css/images/loading-50c5e3e79b276c92df6cc52caeb464f0.gif) no-repeat left center;
    width: 120px;
    float: left;
}

.loading .tips {
    color: #F93;
    text-align: left;
    font-size: 14px;
    margin: 0px;
    height: 20px;
    width: 100px;
    padding: 0 0 0 10px;
}

.wrong .pic {
    /*modify*/
    margin: 10px 10px 10px 30px;
    padding: 0 0 0 0px;
    width: 40px;
    height: 40px;
    display: inline;
    background: url(/static/css/images/block-c9e79bf41871576fec7155a58194b832.gif) no-repeat 2px -108px;
    float: left;
}

.wrong .tips {
    color: #F93;
}

.right .pic {
    margin: 10px 10px 10px 30px;
    padding: 0 0 0 0px;
    width: 40px;
    height: 40px;
    background: url(/static/css/images/block-c9e79bf41871576fec7155a58194b832.gif) no-repeat 2px -66px;
    float: left;
    display: inline;
}

.right .tips {
    color: #81ad7f;
}

.warning .pic {
    margin: 10px 10px 10px 30px;
    padding: 0 0 0 0px;
    width: 40px;
    height: 40px;
    background: url(/static/css/images/block-c9e79bf41871576fec7155a58194b832.gif) no-repeat 2px -155px;
    float: left;
    display: inline;
}

.warning .tips {
    color: #F93;
}

.questions .pic {
    margin: 10px 10px 10px 30px;
    padding: 0 0 0 0px;
    width: 40px;
    height: 40px;
    background: url(/static/css/images/block-c9e79bf41871576fec7155a58194b832.gif) no-repeat 2px -203px;
    float: left;
    display: inline;
}

.questions .tips {
    color: #4095ad;
}

input.but {
    padding: 1px 0 0 1px;
    background: url('/static/css/images/rating-cb7345fd15835e4fd494ed778f820521.png') no-repeat scroll 0px -283px;
    border: 0;
    height: 17px;
    cursor: pointer;
    text-align: center;
    width: 55px;
    overflow: hidden;
    line-height: 17px;
    color: #363e6c;
}

.pop_layer {
    background-color: #4d4d4d;
    position: absolute;
    z-index: 99;
    left: 0;
    top: 0;
    display: none;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
}

/* 自定义 CSS */
.modal-dialog {
    min-width: 45%;
    max-width: 80%;
    height: auto;
}

.modal-title {
    color: #333333;
}

.modal-content {
    background: linear-gradient(45deg, #1d8ae2, #bce5eb, #dff2f7, #bce5eb, #1d8ae2);
    opacity: 0.9;
    animation: change360 300s infinite linear;
}

.modal-header {
    padding: 5px;
    border-bottom: 1px solid #e5e5e5;
}

/* 为 bootbox 的内容设置字体颜色 */
.bootbox-body {
    color: #333; /* 字体颜色 */
    /*background-color: #fff; !* 背景颜色 *!*/
    font-size: 1.5rem;
}

/* 如果需要设置标题的背景色和字体颜色 */
.bootbox-header {
    background-color: #f0f0f0; /* 标题背景颜色 */
    color: #333; /* 标题字体颜色 */
}

/* 如果需要设置按钮的样式 */
.bootbox-footer button {
    color: #fff; /* 按钮字体颜色 */
    background-color: #337ab7; /* 按钮背景颜色 */
}

.bar {
    padding: 15px;
    background-color: #f5f5f5;
}

.dark-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
}

/* 弹层内容样式 */
.dark-modal {
    background: #1a1a1a;
    min-width: 450px;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.95);
    opacity: 0.9;
    color: white;
    text-align: center;
    user-select: none;
    overflow-wrap: anywhere;
}

.overlay-show {
    background: rgba(0, 0, 0, 0.7);
    opacity: 1;
    visibility: visible;
}

/* 弹层内容中的按钮样式 */
.button-container button#hideDarkModal {
    color: white;
    background-color: #dc3545;
    border: none;
    padding: 6px 20px;
    border-radius: 5px;
    cursor: pointer;
    opacity: 0.8;
}

.button-container button#hideDarkModal:hover, .button-container button#hideDarkModal:active {
    opacity: 1;
}

.button-container {
    text-align: right;
    margin-top: 20px;
}

/* 弹出层对话相关 */
.enhanced-dialog {
    border-radius: 15px !important;
    border: none !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2) !important;
    animation: popIn 0.6s;
}

@keyframes popIn {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.dialog-header {
    padding: 25px;
    text-align: center;
    border-bottom: 3px solid rgba(0, 0, 0, 0.1);
}

.success-header {
    background: #27ae60;
}

.fail-header {
    background: #c0392b;
}

.rating-container {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 20px 0;
}

.rating-icon {
    font-size: 32px;
    opacity: 0;
    animation: iconFloat 0.5s ease-out forwards;
}

@keyframes iconFloat {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.pie-container {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 20px auto;
}

.customer-container {
    color: #7f8c8d;
    margin-top: 15px
}

.pie-chart {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.pie-background {
    fill: none;
    stroke: #ecf0f1;
    stroke-width: 8;
}

.pie-progress {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s ease-out;
}

.success-progress {
    stroke: #2ecc71;
}

.fail-progress {
    stroke: #e74c3c;
}

.percentage-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    font-weight: bold;
    color: #2c3e50;
}

.action-btn {
    min-width: 140px;
    border-radius: 25px;
    padding: 12px 30px;
    transition: all 0.3s;
    border: none;
    /*margin: 10px;*/
}

.action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

@keyframes change360 {
    100% {
        filter: hue-rotate(360deg);
    }
}

@keyframes rotate360 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}