/* cyrillic-ext */
@font-face {
    font-family: 'Noto Sans Mono';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 100%;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/notosansmono/v30/BngcUXNETWXI6LwhGYvaxZikqZqK6fBq6kPvUce2oAZ2d_Cj_9SrdWM_.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
    font-family: 'Noto Sans Mono';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 100%;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/notosansmono/v30/BngcUXNETWXI6LwhGYvaxZikqZqK6fBq6kPvUce2oAZ2fvCj_9SrdWM_.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
    font-family: 'Noto Sans Mono';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 100%;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/notosansmono/v30/BngcUXNETWXI6LwhGYvaxZikqZqK6fBq6kPvUce2oAZ2dvCj_9SrdWM_.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
    font-family: 'Noto Sans Mono';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 100%;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/notosansmono/v30/BngcUXNETWXI6LwhGYvaxZikqZqK6fBq6kPvUce2oAZ2efCj_9SrdWM_.woff2) format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* vietnamese */
@font-face {
    font-family: 'Noto Sans Mono';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 100%;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/notosansmono/v30/BngcUXNETWXI6LwhGYvaxZikqZqK6fBq6kPvUce2oAZ2dfCj_9SrdWM_.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
    font-family: 'Noto Sans Mono';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 100%;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/notosansmono/v30/BngcUXNETWXI6LwhGYvaxZikqZqK6fBq6kPvUce2oAZ2dPCj_9SrdWM_.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Noto Sans Mono';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 100%;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/notosansmono/v30/BngcUXNETWXI6LwhGYvaxZikqZqK6fBq6kPvUce2oAZ2evCj_9SrdQ.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


.opacity1 {
    opacity: 1 !important;
}

.detail {
    width: max-content;
    min-height: 100vh;
    box-sizing: border-box;
    position: relative;
    margin: 0 auto;
}

.detail .content_box {
    width: auto !important;
    margin: 0 auto;
    color: #fff;
    display: flex;
    padding-bottom: 40px;
    position: relative;
    box-sizing: border-box;
    justify-content: center;
    padding-top: 10px;
}

.detail .content_box .menu_box {
    color: var(--sub-font-color);
}

.detail .content_box .menu_box .study {
    color: #ccc;
}

.detail .content_box .menu {
    position: sticky;
    top: 60px;
    left: 0;
    margin-right: 15px;
    padding: 0 0 10px;
    z-index: 2;
    background-color: var(--content-bg-color);
    border-radius: 5px;
}

.detail .content_box .show_menu{
    position: sticky;
    top: 80px;
    left: 0;
    margin-right: 5px;
    z-index: 2;
    min-width: 145px;
    display: flex;
    justify-content: right;
}
.detail .content_box .show_menu div{
    width: 34px;
    height: 61px;
    background-color: #333333;
    border-radius: 3px;
    display: flex;
    justify-content: center;
}
.detail .content_box .show_menu img{
    width: 14px;
    height: 14px;
}

.detail .content_box .menu .item {
    min-width: 140px;
    height: 44px;
    margin-bottom: 5px;
    border-radius: 5px;
    font-size: 14px;
    line-height: 44px;
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    padding: 0 10px;
    box-sizing: border-box;
}

.detail .content_box .menu .item:hover {
    background-color: var(--list-item-hover-color);
}

.detail .content_box .menu .item:hover .item_menu {
    display: block;
}

.detail .content_box .menu .cur_not_allowed:hover .item_menu {
    display: none !important;
}

.detail .content_box .menu .item_one {
    background-color: rgb(51, 51, 51);
}

.detail .content_box .menu .item img {
    width: 16px;
    height: 16px;
    margin: 0 10px 0 0;
}

.detail .content_box .menu .item svg {
    width: 16px;
    height: 16px;
    margin: 5px 10px 0 0;
    color: var(--sub-font-color);
}

.detail .content_box .menu .item .img {
    margin: 5px 0px 0 0;
}

.detail .content_box .menu .item .arrow {
    font-size: 9px;
    position: absolute;
    right: 8px;
    top: 50%;
    line-height: 44px;
    transform: translateY(-50%);
}


.detail .content_box .menu .item .textOne {
    font-size: 14px;
        padding: 0 10px
}

.detail .content_box .menu .item .textTwo {
    font-size: 18px;
    padding: 0 10px
}

.detail .content_box .menu .item_two {
    justify-content: space-between;
    padding-left: 2px;
}

.detail .content_box .menu .study {
    margin-top: 14px;
    width: 145px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, #522dca, #9e43ed);
    height: 28px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 28px;
    cursor: pointer;
}

.detail .content_box .menu .study .img {
    margin-right: 15px;
    margin-top: 10px
}

.detail .content_box .menu .practiceClass {
    width: 145px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #9E43ED;
    border-radius: 15px;
    font-weight: 400;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 12px;
    margin-top: 30px;
    cursor: pointer;
}


.detail .content_box .menu .item_menu {
    position: absolute;
    right: 0;
    top: 0;
    transform: translateX(100%);
    width: 140px;
    /*background-color: #141414;*/
    background-color: var(--content-bg-color);
    padding: 6px 10px;
    box-sizing: border-box;
    display: none;
    border: var(--beat-item-border);
    border-radius: 5px;
}

.detail .content_box .menu .item_menu .item_itm:last-child {
    margin-bottom: 0 !important;
}

.detail .content_box .menu .item_menu .item_itm {
    line-height: 30px;
    display: flex;
    align-items: center;
    opacity: 0.7;
    margin-bottom: 8px;
    color: var(--sub-font-color);
    cursor: pointer;
}

.detail .content_box .menu .item_menu .item_itm:hover {
    opacity: 1;

    background-color: var(--list-item-hover-color);
}

.detail .content_box .menu .item_menu .item_itm:hover .img {
    background-color: rgb(158, 67, 237);
    border: transparent;
}

.detail .content_box .menu .item_menu .item_itm:hover .img img {
    opacity: 1 !important;
}

.detail .content_box .menu .item_menu .item_itm .img {
    width: 14px;
    height: 14px;
    border: 1px solid #a3a3a3;
    border-radius: 50%;
    margin-right: 10px;
    box-sizing: border-box;
    position: relative;
}

.detail .content_box .menu .item_menu .item_itm .img img {
    width: 7px;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}

.detail .content_box .menu .item_menu .itemClick {
    opacity: 1;
}

.detail .content_box .menu .item_menu .itemClick .img {
    background-color: rgb(158, 67, 237);
    border: transparent;
}

.detail .content_box .menu .item_menu .itemClick .img img {
    opacity: 1;
}

.detail .content_box .menu2 {
    margin-right: 5px;
    z-index: 2;
    /*position: fixed;*/
    left: 20px;
    /* transform: translateY(-50%); */
    /*background-color: rgb(34, 34, 34);*/
    padding:5px;
    margin-top: 40px;
}
.detail .content_box .menu2 .item {
    width: 145px;
    height: 44px;
    margin-bottom: 5px;
    border-radius: 5px;
    font-size: 14px;
    line-height: 44px;
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    padding: 0 15px;
    box-sizing: border-box;
}

.detail .content_box .menu2 .item:hover {
    /*background-color: #141414;*/
}

/*.detail .content_box .menu2 .item:hover .item_menu {*/
/*    display: block;*/
/*}*/

.detail .content_box .menu2 .cur_not_allowed:hover .item_menu {
    display: none !important;
}

.detail .content_box .menu2 .item_one {
    /*background-color: rgb(51, 51, 51);*/
        cursor: pointer;
}
.detail .content_box .menu2 .item_one h2 {
    /*background-color: rgb(51, 51, 51);*/
    cursor: pointer;
    color: var(--main-font-color);
}

.detail .content_box .menu2 .item img {
    width: 15px;
    height: 15px;
    margin: 0 10px 0 0;
}

.detail .content_box .menu2 .item .img {
    margin: 0 10px 0 0;
}

.detail .content_box .menu2 .item .arrow {
    font-size: 9px;
    /*position: absolute;*/
    right: 53px;
    top: 29px;
    line-height: 44px;
    fill: white;
    margin: 12px 0px 0px 10px;
    /*transform: translateY(-50%);*/
}
.arrow-svg {
    height: 15px;
    width: 15px;
    color: var(--main-font-color)
}

.detail .content_box .menu2 .item .textOne {
    font-size: 14px;
}

.detail .content_box .menu2 .item .textTwo {
    font-size: 18px;
}

.detail .content_box .menu2 .item_two {
    justify-content: space-between;
}

.detail .content_box .menu2 .study {
    margin-top: 20px;
    width: 145px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, #522dca, #9e43ed);
    height: 28px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 28px;
    cursor: pointer;
}

.detail .content_box .menu2 .study .img {
    margin-right: 15px;
}

.detail .content_box .menu2 .item_menu {
    position: absolute;
    left: 0px;
    top: 45px;
    width: 140px;
    background-color: var(--content-bg-color);
    padding: 6px 10px;

    box-sizing: border-box;
    z-index: 10;
    display: none;

    border: var(--beat-item-border);
    border-radius: 5px;
}

.detail .content_box .menu2 .item_menu .item_itm:last-child {
    margin-bottom: 0 !important;
}

.detail .content_box .menu2 .item_menu .item_itm {
    line-height: 30px;
    display: flex;
    align-items: center;
    opacity: 0.7;
    margin-bottom: 8px;
    color: var(--main-font-color);
    cursor: pointer;
}

.detail .content_box .menu2 .item_menu .item_itm:hover {
    opacity: 1;
    background-color: var(--list-item-hover-color);
}

.detail .content_box .menu2 .item_menu .item_itm:hover .img {
    background-color: rgb(158, 67, 237);
    border: transparent;
}

.detail .content_box .menu2 .item_menu .item_itm:hover .img img {
    opacity: 1 !important;
}

.detail .content_box .menu2 .item_menu .item_itm .img {
    width: 14px;
    height: 14px;
    border: 1px solid #a3a3a3;
    border-radius: 50%;
    margin-right: 10px;
    box-sizing: border-box;
    position: relative;
}

.detail .content_box .menu2 .item_menu .item_itm .img img {
    width: 7px;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}

.detail .content_box .menu2 .item_menu .itemClick {
    opacity: 1;
}

.detail .content_box .menu2 .item_menu .itemClick .img {
    background-color: rgb(158, 67, 237);
    border: transparent;
}

.detail .content_box .menu2 .item_menu .itemClick .img img {
    opacity: 1;
}


.detail .content_box .puzi {
    width: 960px;
    background-color: var(--tab-main-bg-color);
    box-sizing: border-box;
    border-radius: 5px;
}

.detail .content_box .puzi .puzi_con {
    width: 100%;
    position: relative;
    min-height: 80vh;
}

.detail .content_box .red {
    width: 100%;
    position: sticky;
    top: 60px;
    left: 0;
    z-index: 1;
    margin-top: 5px;
}

.detail .content_box .page_type {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    line-height: 30px;
    font-size: 12px;
    gap: 30px;

    margin: 0 -10px 0 -15px;
    padding: 0 10px 0 15px;;
    border-bottom: 1px solid;
    border-color: var(--tabbar-border-line-color);
}

.detail .content_box .page_type .item {
    left: 0;
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
    padding:0 15px;
    color: var(--sub-font-color);
}

.detail .content_box hr {
    border-width: 0.5px;
    border-color: var(--content-split-line-color);
    margin-bottom: 20px;
}


.detail .content_box .page_type .item h2{
    cursor: pointer;
}

.detail .content_box .page_type .item .butt{
    cursor: pointer;
    color: #ccc;
    font-size: 14px;
}

.detail .content_box .page_type .separator {
    width: 1px; /* 分隔符的宽度 */
    height: 10px; /* 分隔符的高度 */
    background-color: #ccc; /* 分隔符的颜色 */
}


.detail .content_box .page_type .click {
    font-weight: bold;
    background-color: var(--tab-main-bg-color);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    text-align: center;
    padding: 0 15px;
    box-shadow: var(--tabbar-box)
}

.detail .content_box .red .page_type  .separator {
    width: 2px; /* 分隔符的宽度 */
    height: 20px; /* 分隔符的高度 */
    background-color: #ccc; /* 分隔符的颜色 */
}

.detail .content_box .smallMore {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    display: none;
}

.detail .content_box .smallMore div {
    width: 4px;
    height: 4px;
    border-radius: 4px;
    background-color: #fff;
    margin: 2px 0;
}

.detail .content_box .right_box {
    margin-left: auto;
    display: flex;
    position: relative;
    /*position: absolute;*/
    /*top: 50%;*/
    /*transform: translateY(-50%);*/
    /*right: 20px;*/
    /*display: flex;*/
    /*align-items: center;*/
}

.detail .score-version-btn {
    margin: 0 5px;
    color: #CCCCCC;
    position: relative;
}

.detail .score-version-btn .score-version-title {
    display: flex;
}

.detail .score-version-btn .select-arrow {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid rgb(207, 207, 207);
    margin-left: 4px;
    margin-top: 12px;
}

.detail .score-version-select {
    position: absolute;
    top: 30px;
    right: -10px;
    background-color: #424242;
    border-radius: 5px;
    padding: 5px 0;
    z-index: 20;
    min-width: 100px;
}

.detail .score-version-select .score-version-item {
    padding: 0 10px;
    cursor: pointer;
    display: flex;
    font-size: 12px;
    line-height: 24px;
}

.detail .score-version-select .score-version-item:hover {
    background-color: #2c2c2c;
}

.detail .score-version-select .score-version-item .img {
    width: 14px;
    height: 14px;
    border: 1px solid #a3a3a3;
    border-radius: 50%;
    margin-right: 5px;
    margin-top: 5px;
    box-sizing: border-box;
    position: relative;
}

.detail .score-version-select .score-version-item .img img {
    width: 7px;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}

.detail .score-version-select .item-clicked .img {
    background-color: #9E43ED;
}

.detail .score-version-select .item-clicked .img img {
    opacity: 1;
}


.detail .content_box .EditBtn {
    padding: 0 15px;
    /*background-color: #424242;*/
    border-radius: 16px;
    line-height: 28px;
    text-align: center;
    color: #CCCCCC;
    cursor: pointer;
    font-size: 12px;
    margin-right: 6px;
    display: flex;
    align-items: center;
}

.detail .content_box .EditBtn .img {
    width: 12px;
    margin-right: 3px;
    height: 12px;
}

.detail .content_box .EditBtn .img img {
    width: 12px;
    height: 12px;
}

.detail .EditLyricsContainer {
    width: 800px;
    height: 80vh;
    background-color: #2A2A2A;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    color: rgb(207, 207, 207);
    text-align: center;
    box-sizing: border-box;
    padding-top: 30px;
}

.detail .EditLyricsContainer .EditLyricsTitle {
    font-size: 18px;
    margin-bottom: 30px;
}

.detail .EditLyricsContainer textarea {
    width: 90%;
    height: calc(100% - 85px - 60px);
    border: none;
    background-color: #404040;
    color: rgb(207, 207, 207);
    resize: none;
    font-size: 14px;
    line-height: 1.8;
    padding: 10px;
    box-sizing: border-box;
}

.detail .EditLyricsContainer .EditLyricsFooter {
    height: 60px;
    width: 100%;
    margin-top: 20px;
}

.detail .EditLyricsContainer .EditLyricsFooter .btn {
    width: 100px;
    height: 30px;
    background-color: #9E43ED;
    color: #fff;
    border-radius: 15px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
}

.detail .EditLyricsContainer .EditLyricsFooter .cancelBtn {
    margin-left: 40px;
    background-color: #565656;
}

.detail .EditLyricsContainer .closeDialog {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 16px;
    height: 16px;
    background-color: transparent;
    cursor: pointer;
}

.detail .content_box .generateMusic {
    padding: 0 15px;
    background-color: rgb(98, 49, 209);
    border-radius: 16px;
    line-height: 32px;
    text-align: center;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
}

.detail .content_box .generateMusicIng {
    background-color: rgb(91, 91, 91);
}

.detail .content_box .section-tabHeader {
    padding:20px 10px 0 15px;
    background-color: var(--content-bg-color);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

/*.detail .content_box .section-tabHeader header {*/
/*    margin-bottom: 15px;*/
/*    !*flex: 1;*!*/
/*    !*padding-left: 0;*!*/
/*    !*box-sizing: border-box;*!*/
/*    !*width: 0;*!*/
/*}*/

.detail .content_box .section-tabHeader h1 {
    font-size: 24px;
    font-weight: bold;
    /*line-height: 22px;*/
    /*text-align: center;*/
    color: var(--main-font-color);
    width: 100%;
    /*overflow: hidden;*/
    /*text-overflow: ellipsis;*/
    /*white-space: nowrap;*/
}

.newPractice{
    position: relative;
}
.new-label{
    position: absolute;
            top: -2px;
            right: -12px;
            background-color: red;
            color: white;
            font-size: 10px;
            font-weight: bold;
            /*padding: 2px 6px;*/
            line-height: 16px;
            border-radius: 3px;
}

.detail .content_box .section-tabHeader h1 a{
    text-decoration: underline;
    color: inherit;
    user-select: text;
}

.detail .content_box .section-tabHeader .header-info{
    margin-bottom: 15px;
}
.detail .content_box .section-tabHeader .header-item{
    line-height: 20px;
}

.detail .content_box .section-tabHeader .more-action{
    padding-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
}

.detail .content_box .section-tabHeader .more-action button {
    background-color: var(--rounded-btn-bg-color);
    color: var(--rounded-btn-text-color);
    position: relative;
    font-weight: 500;
    font-size: 13px;
}

.detail .content_box .section-tabHeader .more-action .btnRounded{
    border-radius: 50%;
    width: 26px;
    height: 26px;
}

.detail .content_box .section-tabHeader .more-action .btnRounded svg{
     position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.detail .content_box .section-tabHeader .more-action svg {
    color: var(--rounded-btn-svg-color);
    width: 16px;
    height: 16px;

}
.detail .content_box .section-tabHeader .more-action .btnRounded img {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: red;
}

.detail .content_box .section-tabHeader .more-action .download {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    justify-content: space-between; /* 水平分布 */
    gap: 5px;

    height: 28px;
    background-color: var(--rounded-btn-bg-color);
    border-radius: 16px;
    padding: 0 12px;
}
.detail .content_box .section-tabHeader .download .img {
    width: 16px;
    height: 16px;
    margin-bottom: 5px;
}

.detail .content_box .section-tabHeader .goCover {
    padding: 0 15px;
    height: 28px;
    line-height: 28px;
    border-radius: 23px;
    display: flex;
    align-items: center;
}

.detail .content_box .section-tabHeader .goCover .img {
    width: 18px;
    height: 18px;
    margin-right: 8px;
}

.detail .content_box .section-tabHeader .goCover .img img {
    width: 100%;
    height: 100%;
}

.detail .content_box .section-tabHeader .more-action .btn-print{
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    justify-content: space-between; /* 水平分布 */
    gap: 5px;

    height: 28px;
    background-color: #383838;
    border-radius: 16px;
    padding: 0 12px;
}

.detail .content_box .section-tabHeader .btn-print-icon{
 background: url('https://cdn.lamucal.com/public/static/sprites/songInfoSide/sprites.png') -56px -0px no-repeat;
 background-size: 134px 18px;
 width: 15px;
 height:15px;
}
.detail .content_box .section-tabHeader .btn-print-text{

}

.detail .content_box .section-downbeat.stickyBeat {
    position: sticky;
    top: 14px;
    left: 0;
    z-index: 1;
}

.detail .content_box .section-downbeat header {
    padding-left: 15px;
    height: 30px;
    align-content: center;
    margin-top: 14px;
    margin-bottom: 14px;
}

.detail .content_box .section-downbeat header h2 {
    font-size: 16px;
    font-weight: bold;
    color: var(--main-font-color);
}

.detail .content_box .section-lyrics {

}
.detail .content_box .section-lyrics header {
    padding-left: 20px;
    min-height: 30px;
    align-content: center;
    padding-bottom: 15px;
}

.detail .content_box .section-lyrics header h2 {
    font-size: 16px;
    font-weight: bold;
    color: var(--main-font-color);
}

.detail .content_box .section-tabHeader header {
    /*flex: 1;*/
    padding-right: 30px;
    box-sizing: border-box;
    line-height: 24px;
    /*padding-top: 15px;*/
    padding-bottom: 15px;
}
.detail .content_box .section-tabHeader header h1{
    display: inline;
}

.detail .content_box .section-tabHeader h1 {
    font-size: 24px;
    font-weight: bold;
    line-height: 22px;
    text-align: center;
    color: var(--main-font-color);

}


.detail .content_box .section-tabHeader .header-info{
    margin-bottom: 20px;
}

.detail .content_box .section-tabHeader .header-info li{
    font-size: 13px;
    margin-bottom: 4px;
    color: var(--sub-font-color);
}

.detail .content_box .section-tabHeader h2 {
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    color: var(--sub-font-color);
    display: flex;
    justify-content: center;
}

.detail .content_box .section-tabHeader img {
    width: 26px;
    height: 26px;
    cursor: pointer;
}

.detail .content_box .section-tabHeader .share {
    margin: 0 30px 0 20px;
    position: relative;
}

.detail .content_box .section-tabHeader .share .share_box {
    background-color: #000;
    position: absolute;
    bottom: -10px;
    right: 0;
    transform: translate(0, 100%);
    z-index: 2;
    border-radius: 5px;
    padding: 0 20px;
    box-sizing: border-box;
    display: none;
}

.detail .content_box .section-tabHeader .share .share_box .item {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: rgb(142, 142, 142);
    font-size: 14px;
}

.detail .content_box .section-tabHeader .share .share_box .item :hover {
    color: rgb(147, 51, 234);
}

.detail .content_box .section-tabHeader .share .share_box .item .img {
    margin-right: 10px;
    flex-shrink: 0;
}

.detail .content_box .section-tabHeader .download {
    /*background-image: linear-gradient(to right, rgb(89, 47, 205), rgb(158, 67, 237));*/
    background-color: #424242;
    padding: 0 15px;
    height: 28px;
    line-height: 28px;
    border-radius: 23px;
    font-weight: 500;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    cursor: pointer;
}

.detail .content_box .section-tabHeader .add-setlist {
    background-color: #424242;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    position: relative;
}

.detail .content_box .section-tabHeader .add-setlist svg {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.detail .content_box .section-tabHeader .goCover {
    /*background-image: linear-gradient(to right, rgb(89, 47, 205), rgb(158, 67, 237));*/
    background-color: #424242;
    padding: 0 15px;
    height: 28px;
    line-height: 28px;
    border-radius: 23px;
    font-weight: 500;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    margin-right: 19px;
    cursor: pointer;
}

.detail .content_box .section-tabHeader .goCover .img {
    width: 18px;
    height: 18px;
    margin-right: 8px;
}

.detail .content_box .section-tabHeader .goCover .img img {
    width: 100%;
    height: 100%;
}

.detail .content_box h2 {
    font-size: 16px;
    color: var(--main-font-color);
}

.bottomArrowBox {
    position: sticky;
    top: 150px;
    z-index: 1;
    cursor: pointer;
}

.bottomArrowBox svg {
    color: var(--sub-font-color)
}

.bottomArrowBoxMore {
    position: sticky;
    bottom: 32vh;
    z-index: 3;
}

.bottomArrowBoxMore .bottomArrow {
    transform: rotate(180deg);
}

.bottomArrowBox .bottomArrow {
    width: 40px;
    height: 40px;
    position: absolute;
    right: 8px;
    top: 6px;
    display: flex; /* 使用 flexbox 布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

.bottomArrowBox .bottomArrow img {
    width: 16px;
    height: 16px;
}

.detail .controler {
    width: 100%;
    background-color: var(--content-bg-color);
    position: sticky;
    bottom: 0;
    z-index: 2;
    border-top: 1px solid;
    border-color: var(--tabbar-border-line-color);
}

.detail .controler .top_btn {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
    height: 58px;
}

.detail .controler .top_btn .play_btn {
    width: 40px;
    height: 40px;
    margin-right: 20px;
    cursor: pointer;
    position: relative;
    background: black;
    border-radius: 50%;
}

.play-loading {
    border: 4px solid #212121;
    /* Light grey */
    border-top: 3px solid #9e43ed;
    /* Blue */
    border-radius: 50%;
    width: 36px;
    height: 36px;
    animation: spin 2s linear infinite;
    pointer-events: none;
    position: absolute;
    transform: translate(-50%, -50%);
    top: -8%;
    left: 25%;
}

.play-new {
    width: 36px;
    height: 36px;
    /*padding-bottom: 10px;*/
}

.play-loading2 {
    border: 4px solid #212121;
    /* Light grey */
    border-top: 3px solid #9e43ed;
    /* Blue */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
    pointer-events: none;
    position: absolute;
    transform: translate(-50%, -50%);
    top: -9%;
    left: -10%;
}

.positionLeft10 {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.positionRight10 {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.bottom_arrow {
    border-style: solid;
    border-top-width: 10px;
    border-left-width: 6px;
    border-right-width: 6px;
    border-bottom-width: 0;
    border-color: transparent;
    border-top-color: var(--main-font-color);
}

.bottom_arrow:hover {
    border-top-color: var(--sub-font-color);
}

.top_arrow {
    border-style: solid;
    border-top-width: 0;
    border-left-width: 6px;
    border-right-width: 6px;
    border-bottom-width: 10px;
    border-color: transparent;
    border-bottom-color: var(--main-font-color);
}

.top_arrow:hover {
    border-bottom-color: var(--sub-font-color);
}

.left_arrow {
    border-style: solid;
    border-top-width: 6px;
    border-left-width: 0;
    border-right-width: 10px;
    border-bottom-width: 6px;
    border-color: transparent;
    border-right-color: var(--main-font-color);
}

.left_arrow:hover {
    border-right-color:  var(--sub-font-color);
}

.right_arrow {
    border-style: solid;
    border-top-width: 6px;
    border-left-width: 10px;
    border-right-width: 0;
    border-bottom-width: 6px;
    border-color: transparent;
    border-left-color: var(--main-font-color);
}

.right_arrow:hover {
    border-left-color: var(--sub-font-color);
}

.detail .other_btn .play-icon {
    position: relative;
    margin: 0 auto 3px;
    width: 20px;
    height: 14px;
    border: 1px solid var(--main-font-color);
    border-radius: 5px;
}

.detail .other_btn .playBt {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;    /* 垂直居中 */
}

.detail .other_btn .play-icon .play {
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 8px solid var(--main-font-color);
}

.detail .other_btn .play-icon .pause {
    width: 9px;
    height: 9px;
}

.detail .other_btn .play-icon .pause::before,
.detail .other_btn .play-icon .pause::after {
    content: '';
    position: absolute;
    background-color: #C2C0C0;
    width: 3px;
    height: 8px;
    top: 50%;
    transform: translate(15%, -50%);
}

.detail .other_btn .play-icon .pause::before {
    left: 28%;
}

.detail .other_btn .play-icon .pause::after {
    right: 28%;
}
.autoScrollArrow {
    margin: 0 auto 8px;
    position: relative;
    width: 4px; /* 矩形宽度 */
    height: 10px; /* 矩形高度 */
    background-color: var(--main-font-color); /* 矩形颜色 */
    /*margin: 100px auto; !* 居中 *!*/
}

.autoScrollArrow::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -5px; /* 调整倒三角的位置 */
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid var(--main-font-color); /* 三角形颜色 */
}

/* 整个容器 */
.progress-container {
    /*background-color: rgb(51,51,51);*/
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 58px;
    margin: 0 10% auto 10%;
}

/* 图标样式 */
.icon {
    width: 45px;
    height: 30px;
    display: flex;
    font-size: 20px;
    justify-content: center;
    align-items: center;
    /*border: 1px solid #000;*/
    /*background-color: #f0f0f0;*/
    cursor: pointer;
    margin: 0 10px;
}

.icon .xtop{
    padding-bottom: 5px;
}
.icon .play {
    margin-left: 10px;
    width: 30px;
    height: 0;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 18px solid #FFFFFF;
}

.icon .pause {
    width: 30px;
    height: 18px;
    position: relative;
}

.icon .pause::before,
.icon .pause::after {
    content: '';
    position: absolute;
    background-color: #FFFFFF;
    width: 4px;
    height: 16px;
    top: 50%;
    transform: translate(15%, -50%);
}

.icon .pause::before {
    left: 30%;
}

.icon .pause::after {
    right: 30%;
}

.playIcon {
    content: '';
    width: 0;
    height: 0;
    border-left: 10px solid #000; /* 三角形的颜色 */
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    position: absolute;
}

/* 进度条样式 */
.progress-range {
    -webkit-appearance: none;
    width: 50%;
    height: 1px;
    background: #e0e0e0;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    margin: 0 10px;
}

.progress-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    background-color: #007BFF;
    border-radius: 50%;
    cursor: pointer;
}

.progress-range::-moz-range-thumb {
    width: 15px;
    height: 15px;
    background-color: #007BFF;
    border-radius: 50%;
    cursor: pointer;
}

.detail .controler .top_btn .other_btn {
    width: 100%;
    height: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    overflow: hidden;
    overflow-x: auto;
}

.detail .controler .top_btn .other_btn .item {
    width: 83px;
    color: var(--main-font-color);
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
}

.detail .controler .top_btn .other_btn .item .top_text {
    text-align: center;
    position: relative;
    margin-bottom: 2px;
}


.detail .controler .top_btn .other_btn .item:hover {
    color: var(--sub-font-color)
}

.detail .controler .top_btn .other_btn .item .icon_font {
    width: 18px;
    height: 18px;
    opacity: 0.7;
    margin: 0 auto;
}

.detail .controler .top_btn .other_btn .item .icon_signature {
    height: 18px;
    margin: 0 auto;
}


.detail .controler .top_btn .other_btn .item:has(.btn_name:hover) .icon_font,
.detail .controler .top_btn .other_btn .icon_font:hover {
    opacity: 1;
}

.detail .controler .top_btn .other_btn .itemClick,
.detail .controler .top_btn .other_btn .itemClick .icon_font {
    opacity: 1;
    color: rgb(152, 66, 234) !important;
}

.icon_font_color,
.icon_font_color div {
    color: rgb(152, 66, 234) !important;
}


.detail .controler .bottom_btn {
    line-height: 24px;
    text-align: center;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    font-size: 14px;
    background-color: rgb(31, 31, 31);
    min-height: 26px;
    width: 100%;
    overflow: hidden;
}

.detail .controler .bottom_btn .item {
    width: max-content;
    flex-shrink: 0;
    padding: 0 12px;
    white-space: nowrap;
    -webkit-user-select: none;
    /* Chrome all / Safari all */
    -moz-user-select: none;
    /* Firefox all */
    -ms-user-select: none;
    /* IE 10+ */
    user-select: none;
    /* Likely future */
}

.detail .controler .bottom_btn div {
    flex: 1;
    border-top: 2px solid rgb(88, 84, 84);
    border-left: 2px solid rgb(88, 84, 84);
    border-bottom: 2px solid rgb(88, 84, 84);
    cursor: pointer;
    color: rgb(137, 137, 137);
}

.detail .controler .bottom_btn .selected {
    background-color: #000;
}


.detail .controler .bottom_btn div:hover {
    background-color: #000;
}

.detail .controler .bottom_btn div:last-child {
    border-right: 2px solid rgb(88, 84, 84);
}

.detail .music_detail {
    margin-left: 5px;
    position: sticky;
    top: 60px;
    left: 0;
}

.detail .music_detail .video,
.detail .music_detail .video .videoDom {
    width: 300px;
    height: 200px;
    position: relative;
    background-color: #000;
    border-radius: 5px;
    /* object-fit: cover; */
}

.detail .music_detail .video .videoDom img {
    border-radius: 5px;
}

.detail .videoDom:hover .default,
.detail.videoDom:hover .default_btn {
    opacity: 0.8;
    cursor: pointer;
}

.detail .videoDom .default_btn {
    background-color: red;
    width: 68px;
    height: 48px;
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.detail .videoDom .arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid #fff;
}

.detail .music_detail .video .videoMp3 {
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
}

.detail .music_detail .video .copy {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* background-color: rgba(245, 3, 3, 0.5); */
    z-index: 2;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s;
}

.detail .music_detail .video .copy .x {
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 20px;
    cursor: pointer;
}

.detail .music_detail .video .copy .copy_text {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 20px;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.detail .music_detail .video .play {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.detail .music_detail .video .pause {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.detail .music_detail .video .user_info {
    position: absolute;
    width: 100%;
    top: 10px;
    left: 0;
    padding: 0 20px 0 10px;
    box-sizing: border-box;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
}

.detail .music_detail .video .user_info .user_img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #fff;
    margin-right: 10px;
}

.detail .music_detail .video .user_info .user_name {
    flex: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-shadow: rgba(0, 0, 0, 0.5);
    color: rgb(238, 238, 238);
    cursor: pointer;
    font-size: 18px;
}

.detail .music_detail .video .user_info .more {
    cursor: pointer;
    padding: 0 10px;
    position: relative;
}

.detail .music_detail .video .user_info .more .div {
    width: 4px;
    height: 4px;
    background-color: #fff;
    border-radius: 50%;
    margin-bottom: 2px;
}

.detail .music_detail .video .user_info .more:hover .more_text {
    visibility: visible;
}

.detail .music_detail .video .user_info .more .more_text {
    padding: 4px 6px;
    border-radius: 4px;
    visibility: hidden;
    position: absolute;
    bottom: -4px;
    left: 50%;
    font-size: 12px;
    transform: translate(-50%, 100%);
    white-space: nowrap;
    background-color: #000;
}


.detail .music_info {
    width: 300px;
    background-color: #282828;
    border-radius: 5px;
    padding: 10px 16px;
    box-sizing: border-box;
    margin-top: 10px;
}

.detail .music_info .music_info_text {
    width: 300px;
    color: rgb(251, 251, 251);
    font-weight: 700;
    font-size: 18px;
    padding-bottom: 18px;
}

.detail .music_info .item {
    display: flex;
    padding-bottom: 18px;
}

.detail .music_info .item .item_star {
    align-items: center;
}

.detail .music_info .item .item_tit {
    width: 110px;
    color: rgb(103, 103, 103);
    font-size: 12px;
    line-height: 20px;
    flex-shrink: 0;
    padding-right: 5px;
    overflow-wrap: break-word;
}

.detail .music_info .item .item_text {
    width: 150px;
    color: rgb(196, 196, 196);
    font-size: 14px;
    line-height: 20px;
    white-space: wrap;
}

.detail .music_info .item .star {
    display: flex;
    cursor: pointer;
    align-items: center;
}

.detail .music_info .item .star .img {
    margin: 0 2px;
}

.detail .recommend {
    color: #cccccc;
    padding: 10px;
    background-color: var(--content-bg-color);
    margin-top: 10px;
    border-radius: 5px;
}
.detail .recommend .recommend_tit {
    font-size: 16px;
    font-weight: 600;
    line-height: 27px;
    margin-top: 10px;
    margin-bottom: 10px;
}


.detail .recommend_music_list .item {
    /*width: 300px;*/
    height: 65px;
    display: flex;
    align-items: center;
    border-bottom: var(--list-item-bottom-line);
    cursor: pointer;
}

.detail .recommend_music_list a:last-child .item {
    border-bottom:none
}
.detail .recommend_music_list .item:hover {
    background-color: var(--list-item-hover-color);
}

.detail .recommend_music_list .item img {
    width: 80px;
    height: 45px;
    margin-right: 10px;
}

.detail .recommend_music_list .item .name_box {
    flex-grow: 1;
}

.detail .recommend_music_list .item .name {
    width: 100%;
    font-size: 14px;
    height: 21px;
    position: relative;
}

.detail .recommend_music_list .item .name_cen {
    color: var(--main-font-color);
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail .recommend_music_list .item .user {
    font-size: 12px;
    line-height: 24px;
    color: var(--sub-font-color);
}

.question {
    width: 100%;
    height: 200px;
    background-color: blue;
    position: absolute;
    bottom: 0;
    left: 0;
}


.hiddenText {
    font-size: 20px;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0;
    font-family: "Noto Sans Mono", monospace !important;
}

/* DIV模式 */
.lyricsDivMode {
    white-space: pre-wrap;
    /* 合并空白字符并自动换行 */
    word-wrap: break-word;
    /* 支持长单词的换行 */
    word-break: break-word;
    /* 支持长单词的换行 */
    overflow-wrap: break-word;
    /* 处理超长单词 */

}

.lyricsDivMode .line {
    margin-top: 0;
    /* margin-top: 20px; */
    /* margin-bottom: 20px; */
}

/* .lyricsDivMode .segment {

    margin-top: 10px;
    margin-bottom: 10px;
} */

.lyricsDivMode .w {
    display: inline-block;
    /* line-height:1em */
    margin-top: 8px;
}

.lyricsDivMode .w span+span {
    display: inline-block;
    /* margin-bottom: 20px;
    padding-bottom: 5px; */
    margin-top: 5px;
}


.lyricsContent {
    width: 100%;
    min-height: 50vh;
    padding: 0 20px 80px;
    cursor: default;
    line-height: 1.1em;
    font-size: 16px;
    font-optical-sizing: auto;
    box-sizing: border-box;
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently supported by Chrome, Opera and Edge */

    font-family: "Noto Sans Mono", monospace !important;
}

.lyricsContent pre {
    font-family: "Noto Sans Mono", monospace !important;
}

.lyricsContent .line {
    display: block;
    margin-top: 10px;
}


/* 只有歌词模式 */
.noChordModeContent {
    height: 30vh;
    background-color: var(--tab-main-bg-color);
    line-height: 1.2em;
    white-space: pre-wrap;
    text-align: center;

    overflow-y: hidden;
    overflow-x: hidden;

    position: sticky;
    bottom: 0;
    min-height: 0 !important;
    z-index: 1;
}

.section-lyrics .noChordModeContent {
    overflow-y: auto;
}

.noChordModeContent .curLine .l {
    background-image: none;
}

.noChordModeContent .segment {
    margin: 0 auto !important;
}

pre {
    margin: 0 !important;
}

.noChordModeContent pre {
    white-space: pre-wrap;
}

/*和弦-默认*/
.lyricsContent .c {
    cursor: pointer;
    color: var(--main-font-color);
    font-weight: var(--lyrics-chord-font-weight);
}

/*歌词-默认*/
.lyricsContent .l {
    cursor: pointer;
    color: var(--lyrics-default-text-color);
    font-weight: 400;
}

/*空歌词-默认*/
.lyricsContent .e {
    cursor: pointer;
    color: var(--lyrics-default-text-color);
}

/*结构信息*/
.lyricsContent .segment {
    color: var(--lyrics-default-text-color);
    /*font-size: 16px;*/
    /*font-weight: 300;*/
    /*padding-bottom: 10px;*/
    /*padding: 5px 10px;*/
    margin-right: 20px;
    /*background-color: #404040;*/
    border-radius: 5px;
    display: block;
    width: max-content;
    cursor: pointer;
    /*padding: 2px 7px;*/
    /*border-left: 1px solid #999;*/
    /*border-right: 1px solid #999;*/
}

/* .lyricsContent .segment::before {
    content: "[";
}

.lyricsContent .segment::after {
    content: "]";
} */


span {
    display: inline;
}


.chord-popup {
    display: none;
    position: absolute;
    bottom: 100%;
    /* 将浮动div显示在按钮上方 */
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 150px;
    background-color: black;
    /*border: 1px solid #ccc;*/
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.chord-popup .show {
    display: block;
}

.chord-popup .chord-chart-label {
    color: #ccc;
}


.red .sheetMusic {
    width: 100%;
    height: 100vh;
    background-color: #000;
    display: none;
    position: relative;
}

.red .sheetMusic #unity-loading-bar {
    width: 200px;
    height: 20px;
    border-radius: 15px;
    background-color: #fff;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    overflow: hidden;
}

.red .sheetMusic #loadLine {
    width: 0;
    height: 20px;
    border-radius: 15px;
    background-color: rgb(152, 66, 234);
    position: absolute;
    top: 0;
    left: 0;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    text-align: right;
}

.red .sheetMusic #loadMove {
    width: 50px;
    height: 20px;
    border-radius: 15px;
    background-color: rgb(152, 66, 234);
    position: absolute;
    top: 0;
    left: 0;
    line-height: 20px;
    animation: goLoading 2s 0s infinite;
}

.sheetMusic {
    width: 100%;
    height: 100vh;
    background-color: #000;
    display: none;
    position: relative;
}

.sheetMusic #unity-loading-bar {
    width: 200px;
    height: 20px;
    border-radius: 15px;
    background-color: #fff;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    overflow: hidden;
}

.sheetMusic #loadLine {
    width: 0;
    height: 20px;
    border-radius: 15px;
    background-color: rgb(152, 66, 234);
    position: absolute;
    top: 0;
    left: 0;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    text-align: right;
}

.sheetMusic #loadMove {
    width: 50px;
    height: 20px;
    border-radius: 15px;
    background-color: rgb(152, 66, 234);
    position: absolute;
    top: 0;
    left: 0;
    line-height: 20px;
    animation: goLoading 2s 0s infinite;
}

.sheetMusic .unity-canvas-class {
    width: 100%;
    height: calc(100vh - 118px);
    position: sticky;
    top: 60px;
    left: 0;
}

@keyframes goLoading {
    from {
        margin-left: -50px;
    }

    to {
        margin-left: 200px;
    }
}

.red .sheetMusic .unity-canvas-class {
    width: 100%;
    height: calc(100vh - 180px);
    position: sticky;
    top: 80px;
    left: 0;
}


/* chordsContainer */
.chordsContainer {
    height: 110px;
    position: sticky;
    max-width: 960px;
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-behavior: smooth;
    padding-left: 10px;
}


.chordsContainer .chord-chart-wrapper {
    display: inline-block;
    cursor: pointer;
}

.chordsContainer .piano {
    width: 150px;
    margin-top: 15px;
    margin-right: 20px;
}

.chordsContainer .string6 {
    width: 70px;
    margin-right: 5px;
    margin-top: 5px;
}

.chordsContainer .string4 {
    width: 55px;
    margin-right: 5px;
    margin-top: 5px;
}

/* chordsContainer */
.chordsContainer2 {
    z-index: 9;
    height: 150px;
    position: sticky;
    max-width: 960px;
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-behavior: smooth;
    background-color: black;
    padding-left: 10px;
}


.chordsContainer2 .chord-chart-wrapper {
    display: inline-block;
    cursor: pointer;
}

.chordsContainer2 .piano {
    width: 150px;
    margin-top: 15px;
    margin-right: 20px;
}

.chordsContainer2 .string6 {
    width: 70px;
    margin-right: 5px;
    margin-top: 5px;
}

.chordsContainer2 .string4 {
    width: 55px;
    margin-right: 5px;
    margin-top: 5px;
}
.chordsContainer2 .chord-chart-label {
    color: white;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently supported by Chrome, Opera and Edge */
}


.chordsContainer .chord-chart-label {
    color: var(--sub-font-color);
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently supported by Chrome, Opera and Edge */
}

.chordsContainer .chord-chart-wrapper svg {
    color: var(--sub-font-color);
    fill: var(--sub-font-color);
}

/* beats ---------------- */

.musicDialogBox {
    width: 30%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.musicDialogBox .Tracks {
    width: 100%;
    height: auto;
    margin: auto;
}

.musicDialogBox .closeMusicDialog {
    position: absolute;
    right: 2%;
    top: 2%;
    width: 10%;
    height: 10%;
    background-color: transparent;
    cursor: pointer;
}

.downDialogBox {
    width: 400px;
    height: 196px;
    background-color: rgb(42, 42, 42);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    font-size: 14px;
    color: rgb(207, 207, 207);
    text-align: center;
    padding-top: 60px;
    box-sizing: border-box;
}

.downDialogBox .closeDialog {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 16px;
    height: 16px;
    background-color: transparent;
    cursor: pointer;
}

.downDialogBox .btn {
    color: #fff;
    background-image: linear-gradient(to right, rgb(89, 47, 205), rgb(158, 67, 237));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 126px;
    height: 32px;
    margin: 30px auto;
    cursor: pointer;
}

.downDialogBox .btn .icon27 {
    width: 16px;
    height: 15px;
    margin-right: 5px;
}


@font-face {
    font-family: 'ChordFont';
    src: url('/static/font/ChordFont-Regular.woff2') format('woff2');
    font-display: swap;
}

.beatsContainer {
    font-family: "ChordFont" !important;
    z-index: 9;
    padding-top: 2px;
    padding-bottom: 2px;
    position: relative;
    overflow: hidden;
}

.beatsContainer.beatsHorizontal{
    background-color: var(--tab-main-bg-color);
}

.beatsContainer span {
    font-family: "ChordFont" !important;
}


.beatsContainer .beats {
    height: 60px;
    white-space: nowrap;
    min-height: 0;
}

.beatsHorizontal .beats {
    height: 60px;
    white-space: nowrap;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    scrollbar-width: none;
}

.beatsContainer .beatsMore {
    height: auto;
    white-space: wrap;
    padding-bottom: 30px;
    display: flex;
    flex-wrap: wrap;
}

.beatsContainer .cursor {
    position: absolute;
    top: 0;
    left: 240px;
    width: 5px;
    height: 64px;
    background-color: #939393;
    border-radius: 5px;
    z-index: 2;
}

.beatsContainer .cursor-padding {
    width: 60px;
    height: 60px;
    display: inline-block;
    vertical-align: top;
}

.beatsContainer .cursor-padding-end {
    width: 60px;
    height: 60px;
    display: inline-block;
    vertical-align: top;
}

.beatsContainer .cursor-label {
    font-size: 22px;
    color: white;
    z-index: 3;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 7px;
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently supported by Chrome, Opera and Edge */
}

.beatsVertical .cursor {
    display: none;
}

.beatsContainer .beat {
    cursor: pointer;
    /* Changes the cursor to a hand */
}

.beatsContainer .beat:hover {
    opacity: 80%;
}

.beatsVertical .cursor-padding {
    display: none;
}

.beatsVertical .cursor-padding-end {
    display: none;
}

.beatsVertical .cursor-label {
    display: none;
}

.beatsContainer .beat-padding {
    width: 60px;
    height: 60px;
    display: inline-block;
    vertical-align: top;
}

.beatsContainer .beat {
    padding: 1px;
    width: 60px;
    height: 60px;
    display: inline-block;
    border: var(--beat-item-border);
    position: relative;
    background-color: var(--beat-item-bg-color);
    vertical-align: top;
    box-sizing: border-box;
}

.beatsContainer .current-beat {
    background-color:var(--beat-item-current-bg-color);

}

.beatsContainer .current-beat .label .label-chord {
    color: var(--beat-item-current-text-color);
}

.beatsContainer .pass-beat {
    background-color: var(--beat-item-passed-bg-color);
}

.beatsContainer .beat .label {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.beatsContainer .beat .label-chord {
    display: flex;
    align-items: center;
    font-size: 22px;
    color: var(--beat-item-chord-color);
    height: 100%;
    padding-left: 5px;
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently supported by Chrome, Opera and Edge */
}

.beatsContainer .measure:after {
    content: '';
    margin: 0;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -2px;
    background: var(--beat-item-measure-bg);
    border-radius: 2px;
    width: 2px;
    margin-left: 2px;
}

.beatsContainer .measure,
.beatsContainer .measure-line-start,
.beatsContainer .beat:first-child,
.beatsContainer .cursor-padding+.beat,
.beatsContainer .beat-padding+.beat {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.beatsContainer .beat:has(+ .measure),
.beatsContainer .beat:has(+ .measure-line-start),
.beatsContainer .beat:last-child,
.beatsContainer .beat:has(+ .cursor-padding-end) {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

/*和弦-当前行*/
.curLine .c {
    color: var(--main-font-color);
}

/*歌词-当前行*/
.curLine .l {
    font-weight: 600;
}

/*和弦-当前行-高亮*/
.curLine .light {
    color: var(--lyrics-hilight-text-color);
}

/*和弦、歌词-当前行变色*/
.curLine .e,
.curLine .l {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-color: var(--lyrics-hilight-text-color);
    background-image: var(--lyrics-hilight-img-bg);
    background-repeat: no-repeat;
    background-position: 0 0;
}


.loading {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: calc(100vw - var(--scrollbar));
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.loading_text {
    text-align: center;
    font-size: 52px;
    font-weight: bold;
    color: #fff;
}


.detail .popover {
    background-color: rgb(6, 6, 6);
    background-color: #000;
    border-radius: 4px;
    position: absolute;
    top: -10px;
    left: 0;
    transform: translate(0, -100%);
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.19);
    font-size: 14px;
    display: none;
}

.detail .top_btn .popoverOne {
    left: 280px;
}

.detail .popover .item {
    padding: 8px 16px;
    width: 100%;
    box-sizing: border-box;
    color: #fff;
    white-space: nowrap;
    background-color: #000;
    border-radius: 4px;
    text-align: center;
}

.detail .popover .item:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

.detail .popover .itemClick {
    background-color: rgba(255, 255, 255, 0.3);
}

.detail .top_btn .popoverTwo {
    left: auto;
    right: 244px;
    padding: 20px 15px;
    width: 230px;
    box-sizing: border-box;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    line-height: 2;
    display: block;
}

/* 样式化原生的滑块 */
.detail .top_btn .popoverTwo input[type="range"] {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    background: transparent;
    height: 16px;
    position: absolute;
    top: 0;
    left: 0;
}

.slider-box {
    width: 100%;
    position: relative;
    height: 16px;
}

/* 滑条划过的宽度，默认值为0 */
.slider-box .slider-value {
    background-image: linear-gradient(to right, rgb(152, 68, 230) 0%, rgb(152, 68, 230) 100%, rgb(77, 77, 77) 100%, rgb(77, 77, 77) 100%);
    height: 6px;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    border-radius: 4px;
    z-index: 1;
}

.slider-box .slider-bg {
    width: 100%;
    background: rgb(77, 77, 77);
    height: 6px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    border-radius: 4px;
}

/* 滑条圆形的样式 */
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    background-color: #fff;
    border-radius: 50%;
    position: relative;
    z-index: 2;
}


.saveMusicList {
    width: 600px;
    height: 350px;
    background-color: rgb(42, 42, 42);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    font-size: 20px;
    color: #fff;
    display: flex;
    flex-direction: column;
}

.saveMusicList .dialog_tit {
    line-height: 56px;
    padding: 0 20px;
    box-sizing: border-box;
    background-color: #000;
}

.saveMusicList .closeDialog {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 16px;
    height: 16px;
    background-color: transparent;
    cursor: pointer;
}

.saveMusicList .list {
    flex: 1;
    width: 100%;
    overflow: hidden;
    overflow-y: auto;
    padding: 0 20px;
    box-sizing: border-box;
    background-color: rgb(20, 14, 14);
}

.saveMusicList .list .item {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 10px 0;
    box-sizing: border-box;
    cursor: pointer;
}

.saveMusicList .list .item .img {
    width: 80px;
    height: 45px;
    object-fit: cover;
    margin-right: 20px;
}

.saveMusicList .list .item .info {
    color: rgb(154, 154, 154);
    font-size: 12px;
}

.saveMusicList .list .item .tit {
    color: #fff;
    font-size: 18px;
}

.saveMusicList .btnBox {
    width: 100%;
    background-color: #000;
    padding: 0 20px;
    display: flex;
    justify-content: flex-end;
    box-sizing: border-box;
    padding: 10px 20px 10px 0;
}

.saveMusicList .btnBox .item {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    box-sizing: border-box;
    line-height: 20px;
    font-size: 14px;
    border: 1px solid #fff;
    border-radius: 20px;
    cursor: pointer;
    opacity: 0.8;
}

.saveMusicList .btnBox .item .icon {
    width: 14px;
    height: 14px;
    margin-right: 4px;
}

.addSetlist {
    z-index: 1000;
}

.addSetlistBox {
    width: 400px;
    height: 196px;
    background-color: rgb(42, 42, 42);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    font-size: 20px;
    color: rgb(207, 207, 207);
    box-sizing: border-box;
    padding: 50px 20px 0;
}

.addSetlistBox .closeDialog {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 16px;
    height: 16px;
    background-color: transparent;
    cursor: pointer;
}

.addSetlistBox .input {
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 18px;
    border-radius: 15px;
    padding: 0 20px;
    box-sizing: border-box;
    margin: 10px 0;
}

.addSetlistBox .btnBox {
    width: 100%;
    display: flex;
    padding: 0 30px;
    box-sizing: border-box;
    margin-top: 10px;
    align-items: center;
}

.addSetlistBox .btnBox .item {
    display: flex;
    justify-content: center;
    color: rgb(156, 163, 175);
    font-size: 14px;
    width: 50%;
    cursor: pointer;
}

.addSetlistBox .btnBox .item .round {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: relative;
    border: 1px solid #fff;
    box-sizing: border-box;
    margin-left: 10px;
}

.addSetlistBox .btnBox .item .choose {
    width: 14px;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}

.addSetlistBox .btnBox .item .roundClick {
    background-color: rgb(147, 51, 234);
}

.addSetlistBox .btnBox .item .roundClick .choose {
    opacity: 1;
}

.addSetlistBox .btnBox .btn {
    width: 126px;
    line-height: 32px;
    font-size: 14px;
    color: #fff;
    margin: 0 auto;
    background-image: linear-gradient(to right, rgb(89, 47, 205), rgb(158, 67, 237));
    border-radius: 16px;
    text-align: center;
}

button {
    all: unset; /* 重置所有默认样式 */
    cursor: pointer; /* 设置鼠标指针样式 */
    background: none; /* 移除背景 */
    border: none; /* 移除边框 */
    padding: 0; /* 移除内边距 */
    margin: 0; /* 移除外边距 */
    font: inherit; /* 继承父元素的字体样式 */
    color: inherit; /* 继承字体颜色 */
    outline: none; /* 移除聚焦时的轮廓 */
    box-shadow: none; /* 移除阴影 */
}



@media screen and (max-width: 768px) {
    .saveMusicList {
        width: 100%;
    }

    .detail .content_box {
        width: 100%;
        padding-top: 0;
        padding-bottom: 0;
        display: block;
    }

    .detail .recommend .recommend_tit {
        padding: 0 20px;
        box-sizing: border-box;
    }

    .detail .recommend_music_list .item {
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }

    .lyricsContent {
        padding: 0 0 120px 10px;
        box-sizing: border-box;
        font-size: 16px;
    }

    .hiddenText {
        font-size: 16px;
    }

    .detail .puzi {
        width: calc(100vw - var(--scrollbar)) !important;
    }

    .lyricsContent .segment {
        font-size: 16px;
    }

    .detail .content_box .red {
        top: 70px;
    }

    .bottomArrowBox {
        top: 300px;
    }

    .bottomArrowBoxMore {
        bottom: 35vh;
    }


    .beatsContainer .cursor {
        left: 120px;
    }

    .detail .content_box .section-tabHeader header {
        padding-left: 0;
    }

    .musicDialogBox {
        width: 80%;
    }

    .downDialogBox {
        width: 300px;
    }

    .detail .popover {
        left: 50% !important;
        transform: translate(-50%, -100%) !important;
    }

    .detail .controler {
        position: sticky;
        bottom: 0;
        left: 0;
        z-index: 1;
    }

    .detail .controler .bottom_btn {
        font-size: 10px;
        line-height: 30px;
        min-height: 34px;
        width: 100%;
        overflow-X: auto;
    }

    .detail .controler .bottom_btn .item {
        padding: 0 15px;
        white-space: nowrap;
    }

    .detail .content_box .red .page_type {
        top: 70px;
    }

    .detail .content_box .menu {
        position: fixed;
        top: 50%;
        left: 10px;
        /* transform: translateY(-50%); */
        background-color: rgb(34, 34, 34);
        padding: 10px;
        display: none;
    }

    .detail .content_box .smallMore {
        display: block;
    }

    .detail .controler .top_btn {
        padding-right: 110px;
        height: 80px;
        box-sizing: border-box;
    }

    .detail .controler .videoDom {
        position: absolute !important;
        top: 0;
        right: 0;
    }

    .detail .music_detail {
        margin: 0;
        position: static;
    }

    .detail .music_detail .video {
        margin-bottom: 10px;
    }

    .detail .music_detail .video,
    .detail .music_detail .video .videoDom {
        width: 0;
        height: 0;
        position: static;
    }

    #ytplayer {
        width: 110px;
        height: 80px;
        position: fixed;
        bottom: 34px;
        right: 0;
        z-index: 1;
    }

    .beatsContainer .beats {
        height: 51.75px;
    }

    .beatsContainer .cursor-padding,
    .beatsContainer .cursor-padding-end {
        width: 51.75px;
        height: 51.75px;
    }

    .beatsContainer .beatsMore {
        height: auto;
        overflow: hidden;
        overflow-y: auto;
    }


    .beatsContainer .beat,
    .beatsContainer .beat-padding {
        width: 51.75px;
        height: 51.75px;
    }

    .beatsContainer .cursor {
        left: 140.625px;
        height: 54.875px;
    }
}