.dj-player-wrap {
  font-family: Arial, sans-serif;
  font-size: 12px;
  min-height: 40px;
  padding-bottom: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.dj-player-wrap::-webkit-scrollbar { height: 6px; }
.dj-player-wrap::-webkit-scrollbar:vertical { width: 0; display: none; }
.dj-player-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }
.dj-player-wrap .bg { background: url(img/player.png); }
.dj-player-wrap .mode-bg { background: url(img/mode.png); }
.dj-player-wrap .player { margin-left: auto; margin-right: auto; width: 980px; height: 35px; overflow: hidden; }
.dj-player-wrap .player-l { float: left; width: 3px; height: 35px; background-position: 0 0; }
.dj-player-wrap .player-r { float: left; width: 3px; height: 35px; background-position: -11px 0; }
.dj-player-wrap .player-block { float: left; width: 960px; display: block; height: 35px; background-position: 0 -38px; background-repeat: repeat-x; }
.dj-player-wrap .player-block .playlist { float: left; margin-top: 8px; margin-left: 10px; margin-right: 10px; width: 240px; height: 18px; border: 1px solid #6d6d6d; background: #585858; position: relative; display: inline; }
.dj-player-wrap .player-block .playlist p { position: absolute; width: 10px; height: 11px; left: 4px; top: 3px; background-position: -43px -13px; margin: 0; padding: 0; }
.dj-player-wrap .player-block .playlist span { position: absolute; left: 0; top: 0; padding-left: 20px; padding-right: 10px; color: #adadad; display: block; background-color: #0b0d09; border-right: 1px solid #6d6d6d; line-height: 18px; height: 18px; overflow: hidden; }
.dj-player-wrap .player-block .playlist .select { position: absolute; right: 0; top: 0; border: 3px solid #585858; width: 238px; height: 12px; z-index: 3; display: none; }
.dj-player-wrap .player-block .playlist select { width: 183px; height: 18px; position: absolute; top: 0; left: 56px; background: #0b0d09; border: none; padding: 2px; color: #adadad; padding-top: 1px; z-index: 1; font-size: 12px; }
.dj-player-wrap .seprator { float: left; width: 3px; height: 35px; background-position: -17px 0; }
.dj-player-wrap .player-block .controls { float: left; width: auto; height: 35px; padding-left: 5px; padding-right: 5px; }
.dj-player-wrap .player-block .controls a { margin-left: 5px; display: inline; }
.dj-player-wrap .player-block .controls a.single-mode { float: left; width: 29px; height: 26px; display: block; background-position: 0 -40px; margin-top: 5px; margin-left: 0; }
.dj-player-wrap .player-block .controls a:hover.single-mode,
.dj-player-wrap .player-block .controls a.single-mode-select { background-position: 0 -5px; }
.dj-player-wrap .player-block .controls a.random-mode { float: left; width: 28px; height: 26px; display: block; background-position: -61px -40px; margin-top: 5px; margin-left: 0; }
.dj-player-wrap .player-block .controls a:hover.random-mode,
.dj-player-wrap .player-block .controls a.random-mode-select { background-position: -61px -5px; }
.dj-player-wrap .player-block .controls a.order-mode { float: left; width: 28px; height: 26px; display: block; background-position: -31px -40px; margin-top: 5px; margin-left: 0; }
.dj-player-wrap .player-block .controls a:hover.order-mode,
.dj-player-wrap .player-block .controls a.order-mode-select { background-position: -31px -5px; }
.dj-player-wrap .player-block .controls a.pre { float: left; width: 26px; height: 26px; display: block; background-position: -92px -40px; margin-top: 5px; }
.dj-player-wrap .player-block .controls a:hover.pre { background-position: -92px -5px; }
.dj-player-wrap .player-block .controls a.pause { float: left; width: 30px; height: 30px; display: block; background-position: -171px -40px; margin-top: 4px; }
.dj-player-wrap .player-block .controls a:hover.pause { background-position: -171px -5px; }
.dj-player-wrap .player-block .controls a.play { float: left; width: 30px; height: 30px; display: block; background-position: -130px -40px; margin-top: 4px; }
.dj-player-wrap .player-block .controls a:hover.play { background-position: -130px -5px; }
.dj-player-wrap .player-block .controls a.next { float: left; width: 26px; height: 27px; display: block; background-position: -253px -40px; margin-top: 4px; }
.dj-player-wrap .player-block .controls a:hover.next { background-position: -253px -5px; }
.dj-player-wrap .player-block .controls a.download { float: left; width: 34px; height: 20px; display: block; background-position: -58px -10px; margin-top: 8px; color: #999; padding-left: 23px; line-height: 20px; text-decoration: none; }
.dj-player-wrap .player-block .controls a.collect { float: left; display: block; margin-top: 8px; width: 43px; height: 20px; background-position: -58px -10px; color: #999; text-align: center; text-decoration: none; line-height: 20px; }
.dj-player-wrap .player-block .info { float: left; width: 259px; height: 26px; color: #adadad; padding: 2px 5px; }
.dj-player-wrap .player-block .info .song-name { float: left; width: 169px; height: 15px; margin-top: 2px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: pointer; }
.dj-player-wrap .player-block .info .s { float: left; width: 5px; height: 15px; line-height: 15px; margin-top: 2px; text-align: right; }
.dj-player-wrap .player-block .info .time { float: left; height: 15px; line-height: 15px; margin-top: 2px; text-align: right; }
.dj-player-wrap .player-block .info .tracks { float: left; width: 249px; height: 7px; background-position: 0 -198px; margin-top: 5px; padding-left: 3px; position: relative; }
.dj-player-wrap .player-block .info .tracks .download-bar { position: absolute; left: 0; top: -1px; width: 30%; height: 7px; margin-left: 2px; display: inline; background-position: 0 -231px; background-repeat: repeat-x; min-width: 2px; z-index: 0; }
.dj-player-wrap .player-block .info .tracks .download-bar .l { float: left; width: 3px; height: 7px; background-position: 0 -224px; margin-left: -3px; font-size: 0; position: relative; display: inline; }
.dj-player-wrap .player-block .info .tracks .download-bar .r { float: right; width: 5px; height: 7px; background-position: 0 -238px; margin-right: -3px; font-size: 0; position: relative; display: inline; }
.dj-player-wrap .player-block .info .tracks .seek-bar { position: absolute; left: 0; top: 0; width: 10%; height: 7px; margin-left: 2px; display: inline; background-position: 0 -271px; background-repeat: repeat-x; min-width: 2px; z-index: 1; }
.dj-player-wrap .player-block .info .tracks .seek-bar .l { float: left; width: 4px; height: 7px; background-position: 0 -262px; margin-left: -3px; margin-top: -1px; font-size: 0; position: relative; display: inline; }
.dj-player-wrap .player-block .info .tracks .seek-bar .r { float: right; width: 3px; height: 7px; background-position: -1px -279px; margin-right: -3px; margin-top: 0; font-size: 0; position: absolute; right: 0; display: inline; }
.dj-player-wrap .player-block .info .tracks .seek-bar .point { position: absolute; right: 0; width: 13px; height: 13px; background-position: -146px -12px; margin-right: -5px; margin-top: -4px; }
.dj-player-wrap .player-block .volumn { float: left; width: 100px; height: 26px; color: #adadad; padding: 2px 5px; }
.dj-player-wrap .player-block .volumn .mute { float: left; width: 20px; height: 17px; background-position: -287px -2px; margin-top: 10px; display: none; }
.dj-player-wrap .player-block .volumn .unmute { float: left; width: 20px; height: 17px; background-position: -287px -22px; margin-top: 10px; }
.dj-player-wrap .player-block .volumn .line { float: left; width: 60px; background-position: 0 -107px; margin-top: 11px; margin-left: 10px; display: inline; }
.dj-player-wrap .player-block .volumn .tracks { float: left; width: 90%; height: 10px; padding-left: 6px; position: relative; }
.dj-player-wrap .player-block .volumn .tracks .volumn-bar { position: absolute; left: 0; top: 0; width: 40%; height: 10px; margin-left: 2px; display: inline; background-position: 0 -85px; background-repeat: repeat-x; min-width: 2px; }
.dj-player-wrap .player-block .volumn .tracks .volumn-bar .l { float: left; width: 4px; height: 10px; background-position: 0 -75px; margin-left: -3px; font-size: 0; position: relative; display: inline; }
.dj-player-wrap .player-block .volumn .tracks .volumn-bar .r { float: right; width: 3px; height: 10px; background-position: -1px -95px; margin-right: -3px; font-size: 0; position: absolute; right: 0; display: inline; }
.dj-player-wrap .player-block .volumn .tracks .volumn-bar .point { position: absolute; right: 0; width: 15px; height: 15px; background-position: -122px -12px; margin-right: -5px; margin-top: -2px; }