@import 'fonts.css';
:root, [data-bs-theme=djuu-light] {
    --bs-background-color: #ffffff; /*网站背景色*/
    --bs-nav-color: #000000; /*导航栏背景色*/
    --bs-menu-color: #000000; /*菜单栏背景色*/
    --bs-navplay-color: rgba(47, 46, 50, 1); /*悬浮播放背景色*/
    --bs-background-offcanvas: #efefef; /*弹出插件背景色*/
    --bs-modal-bg-djuu: #efefef;

    --bs-emphasis-color-rgb: #ffffff; /*导航栏文本颜色*/
    --bs-text-color: #000000; /*文本颜色*/
    --bs-text-color2: #000000; /*文本颜色2*/
    --bs-text-color3: #ffffff; /*文本颜色3*/
    --bs-span-color: #999999; /*span标签颜色*/
    --bs-span-color2: #cccccc; /*span标签颜色*/
    --bs-text-menu-color: #ffffff; /*span标签颜色*/
    --bs-text-player-color: #ffffff; /*span标签颜色*/
    --bs-menu-svg-active: #db1d40; /*菜单栏选中颜色*/

    --bs-djuu-border-color: rgba(204, 204, 204, 0.3);

    --bs-background-list1: rgba(0, 0, 0, 0); /*舞曲列表背景色1*/
    --bs-background-list2: rgba(204, 204, 204, 0.3); /*舞曲列表背景色2*/
    --bs-background-select: #ffffff; /*分类选项*/
    --bs-background-selected: #db1d40; /*分类选项选中*/
    --bs-background-selbox: rgba(204, 204, 204, 0.3); /*舞曲列表背景色3*/
    --bs-background-playmsg: rgba(204, 204, 204, 0.3); /*播放背景色*/
    --bs-background-usermsg: rgba(204, 204, 204, 0.3); /*user背景色*/
    --bs-background-btn-download: #db1d40; /*下载按钮背景色*/
    --bs-background-btn-collect: #18759F; /*收藏按钮背景色*/
    --bs-background-btn-share: #00965e; /*分享按钮背景色*/
    --bs-background-btn-follow: #18759F; /*关注按钮背景色*/
    --bs-background-btn-notfollow: #db1d40; /*取关按钮背景色*/
    --bs-background-btn-hot: rgba(220, 53, 69, 1);
    --bs-background-btn-like: rgba(255, 193, 7, 1);
    --bs-background-servers: rgba(204, 204, 204, 0.3); /*servers背景色*/
    --bs-background-vip-selector: rgba(238, 238, 238, 0.6);
    --bs-background-vip-selector2: #faf6ed;
    --bs-background-vip-select: #ffc107;
    --bs-text-vip-selector: #000000;
    --djuu-active: rgba(204, 204, 204, 0.7);

    --djuu-listmore: url("/template/wap/djremix/assets/images/list/listmore_light.png");
    --djuu-sel-time: url("/template/wap/djremix/assets/images/list/time_light.png");
    --djuu-lang: url("/template/wap/djremix/assets/images/list/lang_light.png");
    --djuu-byid: url("/template/wap/djremix/assets/images/list/byid_light.png");
    --djuu-concern: url("/template/wap/djremix/assets/images/remix/concern_light.png");
    --djuu-local: url("/template/wap/djremix/assets/images/remix/local_light.png");
    --djuu-key: url("/template/wap/djremix/assets/images/list/key_light.png");
    --djuu-addmusic: url("/template/wap/djremix/assets/images/play/addmusic_light.png");
    --djuu-add: url("/template/wap/djremix/assets/images/play/add_light.png");
    --djuu-folder: url("/template/wap/djremix/assets/images/play/folder_light.png");
    --djuu-star: url("/template/wap/djremix/assets/images/play/star_light.png");
    --djuu-star2: url("/template/wap/djremix/assets/images/play/star_light2.png");
    --djuu-downloadone: url("/template/wap/djremix/assets/images/play/downloadone_light.png");
    --djuu-path: url("/template/wap/djremix/assets/images/list/path_light.png");
    --djuu-time: url("/template/wap/djremix/assets/images/play/time_light.png");
    --djuu-size: url("/template/wap/djremix/assets/images/play/size_light.png");
    --djuu-bpm: url("/template/wap/djremix/assets/images/play/bpm_light.png");
    --djuu-edit: url("/template/wap/djremix/assets/images/user/edit_light.png");
    --djuu-del: url("/template/wap/djremix/assets/images/user/del_light.png");
    --djuu-logo: url("/template/wap/djremix/assets/images/logo_m.png");

}

[data-bs-theme=djuu-dark] {
    --bs-background-color: #1a1a1a; /*网站背景色*/
    --bs-nav-color: #000000; /*导航栏背景色*/
    --bs-menu-color: #000000; /*菜单栏背景色*/
    --bs-navplay-color: rgba(47, 46, 50, 1); /*悬浮播放背景色*/
    --bs-background-offcanvas: rgb(11 12 23); /*弹出插件背景色*/
    --bs-modal-bg-djuu: rgba(47, 46, 50, 1);
    --bs-emphasis-color-rgb: #ffffff; /*导航栏文本颜色*/
    --bs-text-color: #cccccc; /*文本颜色*/
    --bs-text-color2: #000000; /*文本颜色2*/
    --bs-text-color3: #ffffff; /*文本颜色3*/
    --bs-span-color: #999999; /*span标签颜色*/
    --bs-span-color2: #cccccc; /*span标签颜色*/
    --bs-text-menu-color: #ffffff; /*span标签颜色*/
    --bs-text-player-color: #ffffff; /*span标签颜色*/
    --bs-menu-svg-active: #db1d40; /*菜单栏选中颜色*/
    --bs-djuu-border-color: #000000;
    --bs-background-list1: rgba(0, 0, 0, 0); /*舞曲列表背景色1*/
    --bs-background-list2: rgba(0, 0, 0, 1); /*舞曲列表背景色2*/
    --bs-background-select: #000000; /*分类选项*/
    --bs-background-selected: #db1d40; /*分类选项选中*/
    --bs-background-selbox: rgba(0, 0, 0, 0.5); /*舞曲列表背景色3*/
    --bs-background-playmsg: rgba(0, 0, 0, 0.5); /*播放背景色*/
    --bs-background-usermsg: rgba(0, 0, 0, 0.5); /*user背景色*/
    --bs-background-btn-download: #db1d40; /*下载按钮背景色*/
    --bs-background-btn-collect: #18759F; /*收藏按钮背景色*/
    --bs-background-btn-share: #00965e; /*分享按钮背景色*/
    --bs-background-btn-follow: #18759F; /*关注按钮背景色*/
    --bs-background-btn-notfollow: #db1d40; /*取关按钮背景色*/
    --bs-background-servers: rgba(0, 0, 0, 0.3); /*servers背景色*/
    --bs-background-vip-selector: #ffffff;
    --bs-background-vip-selector2: #faf6ed;
    --bs-background-vip-select: #ffc107;
    --bs-text-vip-selector: #000000;
    --bs-modal-bg:#222222;
    --djuu-active: rgba(47, 46, 50, 1);
    --djuu-listmore: url("/template/wap/djremix/assets/images/list/listmore.png");
    --djuu-sel-time: url("/template/wap/djremix/assets/images/list/time.png");
    --djuu-lang: url("/template/wap/djremix/assets/images/list/lang.png");
    --djuu-byid: url("/template/wap/djremix/assets/images/list/byid.png");
    --djuu-concern: url("/template/wap/djremix/assets/images/remix/concern.png");
    --djuu-local: url("/template/wap/djremix/assets/images/remix/local.png");
    --djuu-key: url("/template/wap/djremix/assets/images/list/key.png");
    --djuu-addmusic: url("/template/wap/djremix/assets/images/play/addmusic.png");
    --djuu-add: url("/template/wap/djremix/assets/images/play/add.png");
    --djuu-folder: url("/template/wap/djremix/assets/images/play/folder.png");
    --djuu-star: url("/template/wap/djremix/assets/images/play/star.png");
    --djuu-downloadone: url("/template/wap/djremix/assets/images/play/downloadone.png");
    --djuu-path: url("/template/wap/djremix/assets/images/list/path.png");
    --djuu-time: url("/template/wap/djremix/assets/images/play/time.png");
    --djuu-size: url("/template/wap/djremix/assets/images/play/size.png");
    --djuu-bpm: url("/template/wap/djremix/assets/images/play/bpm.png");
    --djuu-edit: url("/template/wap/djremix/assets/images/user/edit.png");
    --djuu-del: url("/template/wap/djremix/assets/images/user/del.png");
    --djuu-logo: url("/template/wap/djremix/assets/images/logo.png");
}

::-webkit-input-placeholder {
    font-size: 0.8rem;
}

::-moz-placeholder {
    font-size: 0.8rem;
}

:-ms-input-placeholder {
    font-size: 0.8rem;
}

@keyframes spin {
    from {
        transform: rotate(0deg); /* 起始角度 */
    }
    to {
        transform: rotate(360deg); /* 结束角度，完整的一圈 */
    }
}
.paused .pic{
animation: spin 5s linear infinite; /* 动画名称、持续时间2秒、线性动画、无限循环 */
display: block; /* 可选，确保图片是块级元素，以便更好地控制其大小 */
height: 3rem;
width: 3rem;
background-position: center;
background-size: cover;

}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    font-size: 0.8rem;
}

input:-moz-placeholder, textarea:-moz-placeholder {
    font-size: 0.8rem;
}

input::-moz-placeholder, textarea::-moz-placeholder {
    font-size: 0.8rem;
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    font-size: 0.8rem;
}


html {
    height: 100%;
    width: 100%;
}
body {
    background: var(--bs-background-color);
    color: var(--bs-text-color);
    font-size: 0.9rem;
}

.djuu-text-white {
    color: var(--bs-text-color3);
}

.djuu-text-black {
    color: var(--bs-text-color2);
}

.djuu-text-color {
    color: var(--bs-text-color);
}

.djuu-bg-header {
    background-color: var(--bs-nav-color);
    height: 4rem;
    width: 100%;
}

.djuu-bg-header-search-fixed {
    position: fixed;
    top: 3.5rem;
    z-index: 10;
    width: 100%;
}

.djuu-bg-header-search {
    background-color: var(--bs-nav-color);
    height: 4rem;
    width: 100%;
}

.djuu-bg-memu {
    background-color: var(--bs-menu-color);
    height: 3.5rem;
    width: 100%;
}

.djuu-bg-navplayer {
    background-color: var(--bs-navplay-color);
    height: 3.5rem;
    width: 100%;
    bottom: 3.5rem !important;
}

.djuu-navplayer-container {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-right: auto;
    margin-left: auto;
}

.djuu-player-img {
    height: 3rem;
    width: 3rem;
    background-position: center;
    background-size: cover;
}

.fs-menu {
    color: var(--bs-text-menu-color);
    font-size: 0.8rem !important;
}

.fs-illustrate {
    font-size: 0.75rem !important;
}
.index-search{
    position: relative;
    padding: 10px 0;
    box-sizing: border-box;
    background: #000;
    width: 100%;
}

.index-search input{
    width: 100%;
    border-radius: 5px;
    background-color: var(--bs-modal-bg-djuu);
    border: none;
    height: 40px;
    padding-left: 10px;
    box-sizing: border-box;
    color: #A09F9F;
    font-size: 12px;
}

.index-search button{
    position: absolute;
    height: 40px;
    border: unset;
    right: 0;
    background: var(--bs-background-btn-download);
    color: #fff;
    padding: 0 20px;
    border-radius: 5px;
    line-height: 40px;
}

.index-search button img{
    width: 15px;
    height: 15px;
    margin: 10px 10px;
}
.fs-span {
    color: var(--bs-span-color);
    font-size: 0.8rem !important;
}

.fs-span2 {
    color: var(--bs-span-color2);
    font-size: 0.8rem !important;
}

.djuu_class_selector {
    font-size: 14px;
    padding: 3px 0;
    background: var(--bs-background-list2);
}

.djuu-selected {
    background-color: var(--bs-background-selected);
    color: var(--bs-text-color3);
}

.classScroll::-webkit-scrollbar {
    display: none;
}

.djuu_img_box {
    width: 7rem !important;
	overflow:hidden;
}

.djuu_img_show {
    width: 7rem !important;
    height: 7rem !important;
}
.bottom-height {
    height: 7rem;
}

.bottom-height2 {
    height: 3.5rem;
}

.djuu-header-logo {
    padding-bottom: 0.25rem !important;
    max-height: 2.8rem !important;
    width: auto;
}

.djuu-header-navsvg {
    width: 1.5rem !important;
    height: 1.5rem !important;
}

.djuu-menu-svg {
    width: 1.5rem !important;
    height: 1.5rem !important;
}

.djuu-list-svg {
    width: 1.5rem !important;
    height: 1.5rem !important;
}

.djuu-musicmenu-btn {
    width: 1.5rem !important;
    height: 1.5rem !important;
}

.djuu-list-svg svg .replaceable {
    fill: red;
}

.djuu-list-item {
    height: 3rem;
}

.djuu-list-bg1 {
    background-color: var(--bs-background-list1);
}

.djuu-list-bg2 {
    background-color: var(--bs-background-list1);
}

.djuu-ml-span {
    display: inline-block !important;
    color: var(--bs-span-color) !important;
    font-size: 0.6rem !important;
    min-width: 4rem !important;
    margin-right: 0.25rem !important;
}

.djuu-nav-player-play-svg {
    width: 1.3rem !important;
    height: 1.5rem !important;
}

.djuu-nav-player-svg {
    width: 2rem !important;
    height: 2rem !important;
}

.fs-musicname {
    font-size: 0.8rem !important;
}

.text-roll {
    animation: 30s wordsLoop linear infinite normal;
}

@keyframes wordsLoop {
    0% {
        transform: translateX(0);
        -webkit-transform: translateX(0);
    }
    20% {
        transform: translateX(0);
        -webkit-transform: translateX(0);
    }
    60% {
        transform: translateX(-55%);
        -webkit-transform: translateX(-55%);
    }
    100% {
        transform: translateX(0);
        -webkit-transform: translateX(0);
    }
}

@-webkit-keyframes wordsLoop {
    0% {
        transform: translateX(0);
        -webkit-transform: translateX(0);
    }
    20% {
        transform: translateX(0);
        -webkit-transform: translateX(0);
    }
    60% {
        transform: translateX(-55%);
        -webkit-transform: translateX(-55%);
    }
    100% {
        transform: translateX(0);
        -webkit-transform: translateX(0);
    }
}

.text-roll:hover {
    animation-play-state: paused;
}

.nav-item-acive .fs-menu {
    color: var(--bs-menu-svg-active) !important;
    overflow: hidden;
}

.nav-item-acive img {
    filter: drop-shadow(0 -200px var(--bs-menu-svg-active)) !important;
    -webkit-filter: drop-shadow(0 -200px var(--bs-menu-svg-active)) !important;
    transform: translateY(200px) !important;
}

.djuu-list-selbox {
    background-color: var(--bs-background-selbox);
}

.djuu-list-sel-svg {
    width: 1.5rem !important;
    height: 1.5rem !important;
}

.fs-selector {
    font-size: 14px;
    line-height: 30px;
    height: 30px;
}

.collapse[data-djuu-listmore]:not(.show) {
    display: block !important;
    height: 1.6rem !important;
}

.collapsing[data-djuu-listmore] {
    height: 1.6rem;
    overflow: hidden;
    transition: height 0.35s ease;
}

.djuu-toast {
    top: 3.1rem !important;
    /*bottom: 6rem !important;*/
    /*right: 0 !important;*/
}

.djuu-list-end {
    font-size: 0.8rem !important;
    color: var(--bs-span-color);
}

.djuu_djshow_box {
    width: 7em !important;
}

.djuu_djshow_img_show {
    width: 7em !important;
    height: 7em !important;
}

.djuu-offcanvas {
    width: 60vw !important;
    background: var(--bs-background-offcanvas);
    color: var(--bs-text-color) !important;
}

.fs-play-musicname {
    color: var(--bs-text-player-color);
    font-size: 1rem !important;
    height: 40px;
    line-height: 40px;
}

.djuu-btn-download {
    color: var(--bs-text-color3);
    background: var(--bs-background-btn-download);
    width: 5.5rem;
    height: 2rem;
    font-size: 1rem;
}

.djuu-btn-collect {
    color: var(--bs-text-color3);
    background: var(--bs-background-btn-collect);
    width: 5.5rem;
    height: 2rem;
    font-size: 1rem;
}

.djuu-btn-share {
    color: var(--bs-text-color3);
    background: var(--bs-background-btn-share);
    width: 5.5rem;
    height: 2rem;
    font-size: 1rem;
}

.djuu-btn-down {
    color: var(--bs-text-color3);
    /*background: var(--bs-background-btn-hot);*/
    width: 5rem;
    height: 2rem;
    font-size: 0.75rem;
}

.djuu-btn-recommend {
    color: var(--bs-text-color3);
    /*background: var(--bs-background-btn-like);*/
    width: 5rem;
    height: 2rem;
    font-size: 0.75rem;
}

.djuu-btn-svg {
    width: 1.1rem !important;
    height: 1.1rem !important;
}

.djuu-play-msg {
    height: 6rem !important;
    background-color: var(--bs-background-playmsg);
}

.djuu-play-img {
    width: 6rem !important;
    height: 6rem !important;
    background-position: center;
    background-size: cover;
}
.djuu-play-img .img-fluid{
    border-radius:50%;
    margin-top:5px
}
.djuu-djshow-list-bg {
    height: 7rem !important;
    min-height: 7rem !important;
    background-color: var(--bs-background-playmsg);
}

.djuu-djshow-list-img {
    width: 7rem !important;
    min-width: 7rem !important;
    height: 7rem !important;
    min-height: 7rem !important;
    background-position: center;
    background-size: cover;
}

.djuu-play-dj-img {
    width: 3rem !important;
    height: 3rem !important;
    background-position: center;
    background-size: cover;
}

.djuu-list-play-svg {
    width: 1.2rem !important;
    height: 1.2rem !important;
}

.djuu-play-btn-svg {
    width: 2.5rem !important;
    height: 2.5rem !important;
}

.djuu-play-btn-svg-mode {
    width: 2rem !important;
    height: 2rem !important;
}

.djuu-btn-follow {
    color: var(--bs-text-color3);
    background: var(--bs-background-btn-follow);
    width: 4.5rem;
    height: 1.5rem;
    font-size: 0.8rem;
}

.djuu-btn-notfollow {
    color: var(--bs-text-color3);
    background: var(--bs-background-btn-notfollow);
    width: 4.5rem;
    height: 1.5rem;
    font-size: 0.8rem;
}

/*user*/
.djuu-user-msg {
    height: 12rem !important;
    background-color: var(--bs-background-usermsg);
}

.djuu-user-info {
    color: var(--bs-span-color);
}

/*about preLogin*/
.djuu-login-logo {
    max-height: 2.9rem !important;
    height: 2.9rem !important;
    width: 100%;
}

.djuu-login-logo2 {
    max-height: 2rem !important;
    height: 2rem !important;
    width: 100%;
}

.tip_text {
    position: relative;
    display: block;
    padding: 0 0.5rem;
    height: 1rem;
    margin: 1rem auto;
    text-align: center;
    color: var(--bs-text-color);
    font-size: 0.7rem;
}

.djuu-login-select {
    font-size: 0.8rem !important;
    color: var(--bs-text-color);
}

.djuu-login-btnlogo {
    width: 3rem !important;
    height: 3rem !important;
}

.fs-code {
    font-size: 0.8rem !important;
    width: 7rem;
}

.fs-code-disabled {
    color: var(--bs-span-color);
}

.djuu-user-list-bg {
    color: var(--bs-text-color);
    background-color: var(--bs-background-usermsg);
}

.djuu-collect-show {
    width: 4rem !important;
    height: 4rem !important;
}

.djuu-collect-btn {
    height: 1.2rem !important;
    width: 1.2rem !important;
}

.djuu-icon-img {
    width: 2rem !important;
    height: 2rem !important;
    background-position: center;
    background-size: cover;
}
.djuu_box{
    width: 80%;
}
.djuu_box .name{
    margin-bottom: 3px;
}
.djuu_pic{
    width: 35px;
    height: 35px;
    border-radius: 5px;
}
.djuu-bg-modal {
    background-color: var(--bs-modal-bg-djuu) !important;
}

.djuu-servers-content {
    color: var(--bs-text-color) !important;
    padding: 0.5rem;
    background-color: var(--bs-background-servers);
}

.djuu-servers-content * {
    color: var(--bs-text-color) !important;
    background-color: initial !important;
}

.djuu-offcanvas-musicmenu {
    background: var(--bs-background-offcanvas);
    color: var(--bs-text-color) !important;
    height: 40vh !important;
    border-radius: 15px 15px 0 0;
}

.djuu-offcanvas-musicmenu2 {
    background: var(--bs-background-offcanvas);
    color: var(--bs-text-color) !important;
    height: 75vh !important;
}

.djuu-musicmenu-list-bg {
    height: 3rem;
    background: var(--bs-background-offcanvas);
    color: var(--bs-text-color) !important;
}

.djuu-download-svg {
    width: 1.2rem !important;
    height: 1.2rem !important;
}

.djuu-offcanvas-pay {
    background: var(--bs-background-offcanvas);
    color: var(--bs-text-color) !important;
}

.djuu-pay-list-bg {
    height: 3rem;
    background: var(--bs-background-offcanvas);
    color: var(--bs-text-color) !important;
}

.djuu-vip-select {
    background: var(--bs-background-vip-selector) !important;
    color: var(--bs-text-vip-selector) !important;
    width: 9rem !important;
    height: 10rem !important;
}

.djuu-vip-selected {
    box-shadow: inset 0 0 0 3px var(--bs-background-vip-select);
    background: var(--bs-background-vip-selector2) !important;
}

.djuu-vip-select-promotion-title {
    padding: 0.2rem 0;
}

.djuu-vip-select-title {
    font-size: 1rem !important;
}

.djuu-vip-select-price {
    font-size: 1.1rem !important;
}

.djuu-vip-select-price > span {
    font-size: 1.5rem !important;
}

.djuu-vip-select-promotion-price {
    color: var(--bs-span-color);
    font-size: 0.8rem !important;
}

.djuu-dropdown-history {
    width: 100% !important;
    max-height: 50vh;
    position: fixed !important;
    top: 3.84rem !important;
    font-size: 0.9rem !important;
}

.djuu-dropup-playlist {
    width: 100% !important;
    max-height: 50vh;
    position: fixed !important;
    bottom: 6.8rem !important;
    font-size: 0.9rem !important;
}

.djuu-dropup-playlist2 {
    width: 100% !important;
    max-height: 50vh;
    position: fixed !important;
    bottom: 3rem !important;
    font-size: 0.9rem !important;
}

.djuu-play-music-list {
    height: 21.5rem !important;
    overflow: hidden !important;
}

.djuu-play-music-list-item {
    color: var(--bs-text-color) !important;
    background: var(--bs-background-selbox);
}

.djuu-play-music-list-item.active {
    color: var(--bs-text-color3) !important;
}

.djuu-play-music-list-item:hover.active {
    color: var(--bs-text-color3) !important;
}

.djuu-play-music-list-item:hover {
    color: var(--bs-text-color2) !important;
}

.djuu-play-list-content-item {
    height: 2.3rem;
    background-color: var(--bs-background-list1);
}

#loginForm, #regForm, #getpassForm, #setpassForm, #loginqqbindForm, #bindemailForm, #rebindtelForm, #rebindemailForm, #changepassForm, #loginwxbindForm, #bindtelForm, #payForm, #loginphForm {
    width: 100%;
}

.djuu-border-line {
    border-bottom: 1px solid var(--bs-djuu-border-color) !important;
}

#musicMenuLabel {
    color: var(--bs-text-color) !important;
}

.offcanvas-title {
    color: var(--bs-text-color) !important;
}

.djuu-player-msg {
    color: var(--bs-text-player-color);
    min-width: 5rem !important;
}

.djuu-djshow-parent {
    width: 30% !important;
    margin-bottom: calc(10% / 2) !important;
}

.djuu-djshow-parent:not(:nth-child(3n)) {
    margin-right: calc(10% / 2) !important;
}

.djuu-djshow-container {
    width: 100%;
    padding-top: 100%;
    position: relative;
	overflow: hidden;
}

.djuu-djshow-container img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#playtime, #totaltime {
    color: #ffffff;
}

.pxico {
    width: 2rem !important;
    min-width: 2rem !important;
    height: 2rem !important;
    min-height: 2rem !important;
    line-height: 2rem;
    text-align: center;
    margin-right: 0.5rem;
}

.pxnum1 {
    background-color: #e60050;
    color: #ffffff;
    font-weight: bold
}

.pxnum2 {
    background-color: #0066CC;
    color: #ffffff;
    font-weight: bold
}

.pxnum3 {
    background-color: #FFCC00;
    color: #ffffff;
    font-weight: bold
}

.pxnum {
    background-color: #dcdcdc;
    color: #000000;
}

.djuu-sort-img {
    height: 3rem;
    width: 3rem;
}

.djuu-player-djmsg {
    height: 4rem !important;
}

.djuu-active {
    background-color: var(--djuu-active);
}

/*svg*/
[data-bs-theme=djuu-dark] .btn-close {
    filter: var(--bs-btn-close-white-filter);
}

#menu-home {
    background-image: url("../images/home.png");
    background-size: 1.5rem 1.5rem;
}

.nav-item-acive #menu-home {
    background-image: url("../images/home_active.png");
    background-size: 1.5rem 1.5rem;
}

#menu-top {
    background-image: url("../images/top.png");
    background-size: 1.5rem 1.5rem;
}

.nav-item-acive #menu-top {
    background-image: url("../images/top_active.png");
    background-size: 1.5rem 1.5rem;
}

#menu-musiclist {
    background-image: url("../images/musiclist.png");
    background-size: 1.5rem 1.5rem;
}

.nav-item-acive #menu-musiclist {
    background-image: url("../images/musiclist_active.png");
    background-size: 1.5rem 1.5rem;
}

#menu-remix {
    background-image: url("../images/remix.png");
    background-size: 1.5rem 1.5rem;
}

.nav-item-acive #menu-remix {
    background-image: url("../images/remix_active.png");
    background-size: 1.5rem 1.5rem;
}

#menu-mine {
    background-image: url("../images/mine.png");
    background-size: 1.5rem 1.5rem;
}

.nav-item-acive #menu-mine {
    background-image: url("../images/mine_active.png");
    background-size: 1.5rem 1.5rem;
}

.djuu-list-morelist {
    background-image: var(--djuu-listmore);
    background-size: 100%;
    float: right;
    margin-right: -10px;
    margin-bottom: 5px;
}

.djuu-list-sel-path {
    background-image: var(--djuu-path);
    background-size: 1.5rem 1.5rem;
}

.djuu-list-sel-time {
    background-image: var(--djuu-sel-time);
    background-size: 1.5rem 1.5rem;
}

.djuu-list-sel-lang {
    background-image: var(--djuu-lang);
    background-size: 1.5rem 1.5rem;
}

.djuu-list-sel-byid {
    background-image: var(--djuu-byid);
    background-size: 1.5rem 1.5rem;
}

.djuu-list-sel-concern {
    background-image: var(--djuu-concern);
    background-size: 1.5rem 1.5rem;
}

.djuu-list-sel-local {
    background-image: var(--djuu-local);
    background-size: 1.5rem 1.5rem;
}

.djuu-list-sel-bpm {
    background-image: var(--djuu-bpm);
    background-size: 1.5rem 1.5rem;
}

.djuu-list-sel-key {
    background-image: var(--djuu-key);
    background-size: 1.5rem 1.5rem;
}

.djuu-addmusic {
    background-image: var(--djuu-addmusic);
    background-size: 1.5rem 1.5rem;
}

.djuu-add {
    background-image: var(--djuu-add);
    background-size: 1.5rem 1.5rem;
}

.djuu-folder {
    background-image: var(--djuu-folder);
    background-size: 1.5rem 1.5rem;
}

.djuu-star {
    background-image: var(--djuu-star);
    background-size: 1.5rem 1.5rem;
}

.djuu-downloadone {
    background-image: var(--djuu-downloadone);
    background-size: 1.5rem 1.5rem;
}

.djuu-down-path {
    background-image: var(--djuu-path);
    background-size: 1.2rem 1.2rem;
}

.djuu-down-time {
    background-image: var(--djuu-time);
    background-size: 1.2rem 1.2rem;
}

.djuu-down-size {
    background-image: var(--djuu-size);
    background-size: 1.2rem 1.2rem;
}

.djuu-down-bpm {
    background-image: var(--djuu-bpm);
    background-size: 1.2rem 1.2rem;
}

.djuu-edit {
    background-image: var(--djuu-edit);
    background-size: 1.2rem 1.2rem;
}

.djuu-del {
    background-image: var(--djuu-del);
    background-size: 1.2rem 1.2rem;
}

.djuu-logo {
    background-image: var(--djuu-logo);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center;
}

.djuu-logo2 {
    background-image: var(--djuu-logo);
    background-repeat: no-repeat;
    background-size: auto 100%;
}

.user-icon {
	width: 3rem;
    position: absolute;
    top: 0;
    right: 0;
}
.zj-selected{
	color: var(--bs-background-selected);
}
.djuu-ba{
	width: 100%;
    left: 0;
    bottom: 0;
	color:#fff;
    text-align: center;
    height: 1.5rem;
    line-height: 1.5rem;
    font-size: 0.8rem;
    font-weight: bold;
    background: rgb(0 0 0 / 40%);
}

.djuu_detail{
    font-size: 28px;
    border: 2px solid;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    color:#ffffff;
}
.djuu_play{
    width: 15rem;
    height: 15rem;
    background: none;
    position: relative;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}
.djuu_mobile{
    width: 15rem;
    height: 15rem;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}
.djuu_cover{
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
    position: absolute;
    overflow: hidden;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.music-player__pointer {
    width: 90px;
    height: 200px;
    background: url(https://www.dj95.com/static/assets/images/player-line-m.png) no-repeat 0 0;
    background-size: 90px 200px;
    z-index: 9;
    margin-left: 140px;
}
@font-face {
  font-family: "iconfont";
  src: url('iconfont.ttf?t=1717510894454') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-music:before {
  content: "\e642";
}

.djuu-zzr{
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
}
.banner1 {
    width: 100%;
    height: 160px;
    position: relative;
    overflow: hidden;
}

.banner1 ul {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    list-style-type: none;
    transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* 添加平滑过渡 */
}

.banner1 ul li {
    float: left;
    height: 100%;
}

.banner1 ul img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.banner1 .btn {
    background-color: #000000c7;
    opacity: 0.2;
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* 垂直居中优化 */
    cursor: pointer;
    text-align: center;
    font-size: 20px;
    color: #fff;
    border-radius: 50%; /* 圆形按钮 */
    padding: 5px;
    transition: opacity 0.3s ease; /* 按钮过渡效果 */
    z-index: 10;
}

.banner1 .btn:hover {
    opacity: 0.7;
}

.banner1 .btn_l {
    left: 10px;
}

.banner1 .btn_r {
    right: 10px;
}

/* 小圆点样式优化 */
.banner1 ol {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 8px;
    z-index: 10;
}

.banner1 ol li {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease; /* 小圆点过渡 */
}

.banner1 ol li.on {
    width: 20px;
    border-radius: 4px;
    background-color: var(--bs-background-color); /* 激活状态样式 */
}
.gradient-progress {
    --progress: 0%;
    width: 100%;
    height: 8px;
    background: #ffffff;
    -webkit-appearance: none;
    border-radius: 10px;
}

/* Chrome样式 */
.gradient-progress::-webkit-slider-runnable-track {
    height: 4px;
    background: linear-gradient(
        to right,
        rgba(100,255,218,1) 0%,    /* 绿色 */
        rgba(0,212,255,1) 100%      /* 蓝色 */
    ) 0/var(--progress) no-repeat,   /* 已播放部分 */
    rgba(255,255,255,0.3);           /* 未播放部分（白色半透明） */
    border-radius: 2px;
}

.gradient-progress::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: #00d4ff;
    border-radius: 50%;
    margin-top: -5px;
    box-shadow: 0 0 4px rgba(0,212,255,0.5);
}

/* Firefox样式 */
.gradient-progress::-moz-range-track {
    height: 4px;
    background: rgba(255,255,255,0.3);  /* 未播放背景 */
    border-radius: 2px;
}

.gradient-progress::-moz-range-progress {
    background: linear-gradient(
        90deg,
        rgba(100,255,218,1) 0%,
        rgba(0,212,255,1) 100%
    );
    height: 4px;
    border-radius: 2px;
}

.gradient-progress::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: #00d4ff;
    border-radius: 50%;
    border: none;
    box-shadow: 0 0 4px rgba(0,212,255,0.5);
}
/* 核心：父容器控制一行排列 */
.recommend-container {
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding: 4px 0;
}

.recommend-text {
  margin-right: 12px; 
}

.recommend-refresh {
  font-size: 14px !important; 
  cursor: pointer;
  color: #165DFF; 
  padding: 2px 8px; 
  border-radius: 4px; 
  transition: background-color 0.2s;
}
.changeall {
    background: url(/template/web/default/assets/images/typeicon.png) no-repeat -242px -4px;
    padding-left: 25px;
    cursor: pointer;
    color: var(--text-color);
    height: 35px;
    line-height: 30px;
}
.djuu_zhiz{
    margin-top: 5px;
    letter-spacing: 1px;
}