.pageHead { display: flex; padding: 0px 0px; width: calc( 100% - 200px); justify-content: space-between; margin: 20px 100px; box-sizing: border-box; border-bottom: solid 1px #ccc; }



.l_index_music { display: flex; flex-direction: row !important; padding: 0 100px; }

/*-----------------filter------Start-----------*/
.filterContainer { width: 524px; height: 150px; position: relative; background-color: var(--SecondaryColor); padding: 16px 20px; box-sizing: border-box; border-radius: 8px 8px 0px 0px; margin-left: 20px; border: 1px solid #ccc; border-bottom: none; }
    .filterContainer:after { content: "条件搜索"; position: absolute; top: -0.75em; left: 1em; width: 5em; height: 1.5em; line-height: 1.5em; text-align: center; }
    .filterContainer:before { content: ""; position: absolute; top: -1px; left: 1em; width: 5em; height: 1px; background-color: #e1e1e1; }
    .filterContainer .s_1 { display: flex; }
    .filterContainer .s_1_l { flex: 1; }
    .filterContainer .s_1_r { width: 200px; margin-left: 20px; }
    .filterContainer .s_2 { display: flex;margin-top:4px; }
    .filterContainer .s_2_l { flex: 1; }
    .filterContainer .s_2_r { width: 180px;  display: flex; align-items: center; }
    .filterContainer .s_3 { display: flex; }
    .filterContainer .s_3_l { flex: 1; display: flex; }
    .filterContainer .s_3_r { width: 160px; }

    .filterContainer .filterMusicName { height: 2em; line-height: 2em; display: flex; }
        .filterContainer .filterMusicName:before { content: "音乐名:"; width: 44px; }
        .filterContainer .filterMusicName input { border: solid 1px #ccc; outline: none; flex: 1; padding: 0px 5px;box-sizing:border-box; }

    .filterContainer .filterCopyright { margin-top: 8px; display: flex; }
        .filterContainer .filterCopyright .filterCopyrightTitle { display: inline; position: relative; width: 44px; }
        .filterContainer .filterCopyright .filterCopyrightTitle {color:var(--PrimaryColor); }
            /*.filterContainer .filterCopyright .filterCopyrightTitle:before { content: "CC许可:"; }*/
            .filterContainer .filterCopyright .filterCopyrightTitle .CC { width: 14px; height: 14px; display: inline-block; vertical-align: middle; position: absolute; top: -7px; left: -7px; }
                .filterContainer .filterCopyright .filterCopyrightTitle .CC > svg { fill: var(--PrimaryColor); stroke: var(--PrimaryColor); }
    .filterContainer .copyrightValues { flex: 1; display: flex; }
        .filterContainer .copyrightValues .copyrightCheckBlock { width: 48px; flex-shrink: 1;text-align:right; }
            .filterContainer .copyrightValues .copyrightCheckBlock input { width: 18px; height: 18px; display: inline-block; vertical-align: middle; cursor: pointer; }
            .filterContainer .copyrightValues .copyrightCheckBlock div { width: 18px; height: 18px; display: inline-block; vertical-align: middle; }
                .filterContainer .copyrightValues .copyrightCheckBlock div > svg { fill: #ccc; stroke: #ccc; }

    .filterContainer .filterBPM { height: 2em; line-height: 2em; display: flex; }
        .filterContainer .filterBPM:before { content: "BPM:"; width: 34px; }
    .filterContainer .filterTime { margin-top: 6px; height: 2em; line-height: 2em; display: flex; }
        .filterContainer .filterTime:before { content: "时长:"; width: 34px; }

    .filterContainer .bpmValues { display: flex; }
        .filterContainer .bpmValues input { border: solid 1px #ccc; width: 68px; outline: none; padding: 0px 5px;box-sizing:border-box; }
    .filterContainer .timeValues { display: flex; }
        .filterContainer .timeValues input { border: solid 1px #ccc; width: 68px; outline: none;  box-sizing: border-box; }



.filterBtn { display: flex; align-items: flex-end; justify-content: flex-end; position: absolute; bottom: 10px; right: 20px; }
    .filterBtn .btnSearch { width: 47px; padding-left: 35px; height: 2em; line-height: 2em; text-align: center; background-color: black; border-radius: 4px; position: relative; cursor: pointer; color: white; }
        .filterBtn .btnSearch:before { position: absolute; top: 5px; left: 5px; content: ""; width: 26px; height: 13px; background-image: url('../../Imgs/Common/viptag.png'); }
    .filterBtn .btnClearSearch { color: #aaa; cursor: pointer; margin-left: 20px; }
/*-----------------filter------End-----------*/
/*-----------------MusicTag------Start-----------*/
.tagListContainer { display: flex; align-items: center; }
    .tagListContainer:before { content: "标签:"; width: 44px; }

    .tagListContainer .tagClassItemContainer { flex: 1; display: flex; justify-content: flex-start; }
    .tagListContainer .tagClassItem { padding:0px 5px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
        .tagListContainer .tagClassItem.slctd { background-color: #ddd; }
        .tagListContainer .tagClassItem .tagClass { width: 100%; text-align: center; display: inline-block; height: 2em; line-height: 2em; color: var(--PrimaryColor); }

        .tagListContainer .tagClassItem .subTags { list-style: none; margin: 0; padding: 0; position: absolute; top: 7px; left: 0px; background: #eeeeee; width: 100%; height: calc(100% - 8px); z-index: 3; display: flex; flex-direction: column; box-sizing: border-box; padding: 10px 10px; }

    .tagListContainer ul li { box-sizing: border-box; padding: 5px 15px 5px 15px; height: 3em; display: inline-flex; justify-content: center; align-items: center; }
        .tagListContainer ul li:hover { background-color: wheat; }
        .tagListContainer ul li.slctd { background-color: wheat; }
        .tagListContainer ul li .tagID { display: none; }
        .tagListContainer ul li .tagName { display: inline-block; vertical-align: middle; }

.cbxAll {}
    .cbxAll span { color: var(--PrimaryColor2); }
    .cbxAll input { cursor: pointer;vertical-align:middle; }


.selectedTagContainer { flex: 1; display: flex; flex-wrap: wrap; overflow-y: auto; height: 50px; }
    .selectedTagContainer .slctdTag { position: relative; margin-top: 2px; border: 1px solid #ccc; border-radius: 8px; box-sizing: border-box; padding: 2px 20px 2px 4px; height: 22px; }

        .selectedTagContainer .slctdTag .btnDeleteTag { cursor: pointer; display: inline-block; vertical-align: middle; position: absolute; right: 2px; top: 2px; }
            .selectedTagContainer .slctdTag .btnDeleteTag svg { width: 16px; height: 16px; fill: black; }
/*-----------------MusicTag------End-----------*/


/*-----------------ToTop------Start-----------*/
.l_index_toTop { width: 50px; height: 50px; position: fixed; bottom: 70px; left: 120px; cursor: pointer; display: none; }
    .l_index_toTop svg { fill: #ccc; }
/*-----------------ToTop------End-----------*/
/*-----------------music------Start-----------*/
.musicItem { display: flex; align-items: center; justify-content: space-between; }

.BPM:before { content: "BPM:"; color: #999 }

.btnDownload { cursor: pointer; }

.btnPlay { cursor: pointer; }

.musicContainer { box-sizing: border-box; padding-left: 50px; margin-top: 40px; flex: 1; overflow: hidden; }
.musicItem { width: 100%; display: flex; }
    .musicItem:not(:first-child) { margin-top: 20px; }

    .musicItem .ThumbnailContainer { width: 100px; height: auto; margin-right: 30px; }
        .musicItem .ThumbnailContainer .Thumbnail { width: 100%; height: auto; }


    .musicItem .waveContainer { flex: 1; overflow: hidden; width: 800px; height: 100px; position: relative; }
        .musicItem .waveContainer .waveProgress { height: 100px; position: absolute; top: 0; left: 0; background-color: rgba(255,255,255,0.3);z-index:10; }
        .musicItem .waveContainer .WaveImg { width: 100%; height: 100px; position: absolute; top: 0; left: 0; }
        .musicItem .waveContainer .waveform { width: 100%; height: 100px; position: absolute; top: 0; left: 0; }

    .musicItem .MusicName { width: 100px; position: relative; }
        .musicItem .MusicName [isnew=true] { width: 30px; height: 20px; position: absolute; top: -20px; left: -16px; display: block !important; fill: var(--PrimaryColor); transform: rotate(-15deg); }

.channelTagContainer { display: flex; flex-direction: column; justify-content: space-between; margin-left: 20px; width: 120px; }
    .channelTagContainer .musicTag { color: #ccc; margin-top: 10px; }

.musicItem .channel { width: 120px; text-align: center; color: #999; overflow: hidden; }
.musicItem .bpmtimes { width: 100px; text-align: center; }
.musicItem .btnDownload { margin-left: 20px; width: 20px; height: 20px; background-image: url('../../Imgs/Common/icon_masterDownload_hover.png'); background-repeat: no-repeat; background-size: cover; }
.musicItem .btnPlay { width: 40px; height: 40px; background-repeat: no-repeat; background-size: cover; }
.musicItem .statePlay { background-image: url('../../Imgs/Common/play.png'); }
.musicItem .stateStop { background-image: url('../../Imgs/Common/pause.png'); }

.musicItem .downloadCopyRightContainer { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.musicItem .CopyRightTag { margin-left: 20px; margin-top: 10px; }
    .musicItem .CopyRightTag[CopyRightTag*="CC"] .CC { display: inline-block !important; }
    .musicItem .CopyRightTag[CopyRightTag*="BY"] .BY { display: inline-block !important; }
    .musicItem .CopyRightTag[CopyRightTag*="SA"] .SA { display: inline-block !important; }
    .musicItem .CopyRightTag[CopyRightTag*="NC"] .NC { display: inline-block !important; }
    .musicItem .CopyRightTag[CopyRightTag*="ND"] .ND { display: inline-block !important; }
    .musicItem .CopyRightTag[CopyRightTag*="CC0"] .CC0 { display: inline-block !important; }

.musicItem .collectionContainer { cursor: pointer; width: 32px; height: 32px; margin-left: 20px; }
    .musicItem .collectionContainer svg { fill: #e1e1e1; transition: all linear 200ms; }
    .musicItem .collectionContainer[HasCollect=true] svg { fill: #feb370; }

.musicItem .CopyRightTag > div { width: 16px; height: 16px; }
    .musicItem .CopyRightTag > div svg { fill: #ccc; }
        .musicItem .CopyRightTag > div svg path { stroke: #ccc; }

.loadmore { text-align: center; color: #aaa; cursor: pointer; margin: 20px 0px; }
/*-----------------music------End-----------*/



/*-----------------FilterMusic------Start-----------*/
.filterMusicContainer { box-sizing: border-box; padding-left: 50px; margin-top: 40px; flex: 1; overflow: hidden; }


/*-----------------FilterMusic------End-----------*/




.tagItemsListContainer { width: 0px; height: 100px; display: inline-flex; vertical-align: top; margin-left: 10px; flex-direction: column; box-sizing: border-box; padding: 10px; }
.open .tagItemsListContainer { width: 180px }
.fix .tagItemsListContainer { position: fixed; left: 282px; top: 0px; }
.tagItemsListContainer .tagItem { cursor: pointer; }