.l_01_middle { display: flex; flex-direction: column; }

.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; }
.bodyContainer { display: flex; flex-direction: column; justify-content: space-evenly; }

#operation { margin: 40px 0px; }

#loadingContainer { flex: 1; display: flex; justify-content: center; align-items: center; }

#loading { width: 150px; height: 150px; background-image: url(../../Imgs/Common/loading3.gif); background-position: center; background-repeat: no-repeat; background-size: auto; box-sizing: border-box; padding: 45px 51px 70px 51px; text-align: center; }

#operationContainer { display: flex; justify-content: center; align-items: flex-end; margin: 10px 0px; padding: 0px 100px; }

.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; }

#helpText {width:100%; height:118px;overflow:auto; flex: 0; box-sizing: border-box; }

 

    #fileName { font-size: 24px; width: 26em; height: 2.7em; line-height: 2.7em; box-sizing: border-box; border: #ccc 1px solid; text-align: center; cursor: pointer; border-radius: 8px; flex: 1; overflow: hidden; }

#btnSeparateGroup { width: 260px; display: flex; margin-left: 20px; }

#btnSeparate { font-size: 24px; width: 138px; height: 2.7em; line-height: 2.7em; text-align: center; color: white; background-image: linear-gradient(#feb370,#fc6a11, #f61f17); background-color: black; cursor: pointer; border-top-left-radius: 16px; border-bottom-left-radius: 16px; }


#rateOptions { position: relative; width: 122px; }

#rateOptionBtn { width: 100%; height: 100%; background-color: var(--SecondaryColor5); border-top-right-radius: 16px; border-bottom-right-radius: 16px; position: relative; display: flex; justify-content: center; align-items: center; }

    #rateOptionBtn::after { content: ""; position: absolute; width: 10px; height: 10px; right: 10px; top: 26px; border: 5px solid transparent; border-top: 10px solid #999; box-sizing: border-box; cursor: pointer; }

#rateOptionList { position: absolute; top: 64px; left: 0px; width: 122px; background-color: black; color: white; display: flex; flex-direction: column; justify-content: space-around; align-items: center; z-index: 10; }

.vipOptionItem:before { position: absolute; top: 6px; left: 6px; content: ""; width: 26px; height: 13px; background-image: url('../../Imgs/Common/viptag.png'); }

.rateOptionItem { position: relative; font-size: 24px; cursor: pointer; height: 2.3em; line-height: 2.3em; width: 100%; text-align: center; }

    .rateOptionItem:after { content: "kbps"; font-size: 12px; }

    .rateOptionItem:not(:last-child) { border-bottom: solid 1px var(--BorderColor); }


#playControls { display: flex; justify-content: center; margin: 10px 0px; }

    #playControls > div { margin: 0px 30px; }

#btnStart { width: 40px; height: 40px; background: url('../../Imgs/Common/play2.png') no-repeat center; background-size: cover; box-shadow: rgba(200,200,200) 1px 2px 5px; border-radius: 100%; cursor: pointer; }

#btnPause { width: 40px; height: 40px; background: url('../../Imgs/Common/pause2.png') no-repeat center; background-size: cover; box-shadow: rgba(200,200,200) 1px 2px 5px; border-radius: 100%; cursor: pointer; }

#btnStop { width: 40px; height: 40px; background: url('../../Imgs/Common/stop2.png') no-repeat center; background-size: cover; box-shadow: rgba(200,200,200) 1px 2px 5px; border-radius: 100%; cursor: pointer; }


#container { /*width: 100%;*/ /*flex: 1;*/ padding: 0px 100px; }


    #container > div { display: flex; align-items: center; height: 100px; }


        #container > div wave { /*height: 100px !important;*/ }

    #container .waveform { /*width: 1000px;*/ display: inline-block; vertical-align: middle; flex: 1; flex-basis: 85%; }

    #container .trackCheckBox { width: 100px; height: 60px; text-align: center; cursor: pointer; border: solid 1px violet; margin-right: 10px; border-radius: 8px; font-size: 16px; box-sizing: border-box; display: flex; justify-content: space-evenly; align-items: center; }

        #container .trackCheckBox svg { width: 32px; height: auto; }

        #container .trackCheckBox .trackName { display: block; }

        #container .trackCheckBox[mult=true] { color: #ccc; fill: #ccc; border-color: #ccc; }

        #container .trackCheckBox[mult=false] { /*            color: white;
            border-color: violet;
            background-color: violet;*/ color: white; fill: white; background-color: violet; }

#downloadContainer { display: flex; justify-content: center; margin: 20px 0px }


#btnDownload { width: 70px; height: 30px; display: flex; justify-content: space-evenly; align-items: center; border: solid 1px #fc6a11; border-radius: 16px; cursor: pointer; }

    #btnDownload:before { content: ""; display: block; width: 20px; height: 20px; background: url('../../Imgs/Common/icon_masterDownload_hover.png') no-repeat center; background-size: cover; margin-left: 10px; margin: 20px 0px; }

    #btnDownload:after { content: "下载"; font-weight: bold; color: #fc6a11; }