/*! DSAudioPlayer v1.0 | (c) 2017, Zyfex Entertainment | http://zyfex.com | http://mersadesign.com */
@import url(https://fonts.googleapis.com/css?family=Oswald:400,300,700|Slabo+27px|Questrial);

/*! roundSlider v1.0 | (c) 2015, Soundar | MIT license | http://roundsliderui.com/licence.html */
.rs-control{position:relative;outline:0 none}.rs-container{position:relative}.rs-control *,.rs-control *:before,.rs-control *:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.rs-animation .rs-transition{-webkit-transition:all .5s linear 0s;-moz-transition:all .5s linear 0s;-o-transition:all .5s linear 0s;transition:all .5s linear 0s}.rs-bar{-webkit-transform-origin:100% 50%;-moz-transform-origin:100% 50%;-ms-transform-origin:100% 50%;-o-transform-origin:100% 50%;transform-origin:100% 50%}.rs-control .rs-split .rs-path,.rs-control .rs-overlay1,.rs-control .rs-overlay2{-webkit-transform-origin:50% 100%;-moz-transform-origin:50% 100%;-ms-transform-origin:50% 100%;-o-transform-origin:50% 100%;transform-origin:50% 100%}.rs-control .rs-overlay{-webkit-transform-origin:100% 100%;-moz-transform-origin:100% 100%;-ms-transform-origin:100% 100%;-o-transform-origin:100% 100%;transform-origin:100% 100%}.rs-control.rs-error{border:1px dotted;text-align:center}.rs-readonly{height:100%;width:100%;top:0;position:absolute;z-index:100}.rs-disabled{opacity:.35}.rs-inner-container{height:100%;width:100%;position:relative;overflow:hidden}.quarter div.rs-block{height:200%;width:200%}.half.top div.rs-block,.half.bottom div.rs-block{height:200%;width:100%}.half.left div.rs-block,.half.right div.rs-block{height:100%;width:200%}.bottom>.rs-inner-container>.rs-block{top:auto;bottom:0}.right .rs-inner-container>.rs-block{right:0}div.rs-block{-webkit-border-radius:100%;border-radius:100%}.rs-block{height:100%;width:100%;display:block;position:absolute;top:0;overflow:hidden;z-index:3}.rs-block .rs-inner{-webkit-border-radius:1000px;border-radius:1000px;display:block;height:100%;width:100%;position:relative}.rs-overlay{width:50%}.rs-overlay1,.rs-overlay2{width:100%}.rs-overlay,.rs-overlay1,.rs-overlay2{position:absolute;background-color:#fff;z-index:3;top:0;height:50%}.rs-bar{position:absolute;height:0;z-index:10}.rs-bar .rs-seperator{height:0;border-bottom:medium none;display:block;float:left}.full .rs-bar,.half .rs-bar{width:50%}.half.left .rs-bar,.half.right .rs-bar,.quarter .rs-bar{width:100%}.full .rs-bar,.half.left .rs-bar,.half.right .rs-bar{top:50%}.bottom .rs-bar{top:0}.half.right .rs-bar,.quarter.right .rs-bar{right:100%}.rs-handle.rs-move{cursor:move}.rs-readonly .rs-handle.rs-move{cursor:default}.rs-path{display:block;height:100%;width:100%}.rs-split .rs-path{-webkit-border-radius:1000px 1000px 0 0;border-radius:1000px 1000px 0 0;overflow:hidden;height:50%;position:absolute;top:0;z-index:2}.rs-tooltip{text-align:center;position:absolute;cursor:default;border:1px solid transparent;z-index:10}.full .rs-tooltip{top:50%;left:50%}.bottom .rs-tooltip{top:0}.top .rs-tooltip{bottom:0}.right .rs-tooltip{left:0}.left .rs-tooltip{right:0}.half.top .rs-tooltip,.half.bottom .rs-tooltip{left:50%}.half.left .rs-tooltip,.half.right .rs-tooltip{top:50%}.rs-tooltip .rs-input{outline:0 none;border:none}.rs-tooltip-text{font-family:verdana;font-size:13px;border-radius:7px}.rs-tooltip.edit,.rs-tooltip .rs-input{padding:5px 8px}.rs-tooltip.hover,.rs-tooltip.edit:hover{border:1px solid #aaa;cursor:pointer}.rs-readonly .rs-tooltip.edit:hover{border-color:transparent;cursor:default}.rs-handle{border-radius:1000px;outline:0 none;float:left}.rs-handle.rs-handle-square{border-radius:0}.rs-handle-dot{border:1px solid #aaa;padding:6px}.rs-handle-dot:after{display:block;content:"";border:1px solid #aaa;height:100%;width:100%;border-radius:100%}.rs-seperator{border:1px solid #aaa}.rs-border{border:1px solid #aaa}.rs-path-color{background-color:#fff}.rs-range-color{background-color:#54bbe0}.rs-bg-color{background-color:#fff}.rs-handle{background-color:#838383}.rs-handle-dot{background-color:#fff}.rs-handle-dot:after{background-color:#838383}

div.DSAudioPlayer {
	top: -10px;
	margin: 50px auto;
	width: 100%;
	height: 500px;
	border-radius: 10px;
	overflow: hidden;
	position: relative;
}
div.DSAudioPlayer > .blur {
    width: 90%;
    height: 90%;
    background-size: cover;
    background-position: center;
    filter: blur(7px);
    -webkit-filter: blur(7px);
    -moz-filter:blur(7px);
    -ms-filter: blur(7px);
    -o-filter: blur(7px);
}
div.mainSection, div.dashboard{
    position: absolute;
    left: 0px;
}
div.mainSection{
    width:100%;
    height:85%;
    top:0;
}
div.dashboard{
    width:100%;
    height:28%;
    bottom:0;
}
div.mainSection > .panel1,
div.mainSection > .panel2,
div.mainSection > .panel3 {
    width: 100%;
    Height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
}
div.mainSection > .panel2{
    overflow-y: scroll;
    overflow-x: hidden;
}
div.panel1 > div.top,
div.panel1 > div.middle{
    width: 100%;
}
div.panel1 > div.top{ height: 30%; }
div.panel1 > div.middle{ height: 70%; margin-top: -20px;}

div.middle > div:not(.centered-vertically){
    width: 64px;
    height: 64px;
    background-color: rgba(255,255,255,0.15);
    border-radius: 50%;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}
div.middle > div:hover{
    background-color: rgba(255,255,255,0.3);
}
div.middle > div:not(.centered-vertically){margin: -10px 10px 10px 10px;}
div.dashboard > div:not(.centered-vertically){margin:10px;}
div.middle > div:not(.centered-vertically),
div.dashboard > div:not(.centered-vertically) {
    display: inline-block;
    vertical-align: middle;
}
div.middle > .centered-vertically,
div.dashboard > .centered-vertically {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
div.middle, div.dashboard {
    text-align: center;
}
div.dashboard > div:not(.centered-vertically) {
    width: 30px;
    height: 30px;
    display: inline-block;
    vertical-align: middle;
}
/** Buttons **/

div.middle > .play{
    width:138px !important;
    height:138px !important;
    position: relative;
}
div.middle > .play > #slider{
    float: left;
}
div.middle > .play > .playpausebtn{
    background-image: url(../DSAudioPlayer/Core/img/play.png);
    background-size: 64px auto;
    width:64px !important;
    height:64px !important;
    float: left;
    position: absolute;
    z-index: 4;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
}
div.middle > .play > .frontTiming{
    width: 90px;
    background-color: rgba(255,255,255,0.7);
    position: absolute;
    bottom: -40px; left: 50%;
    transform: translate(-50%,-50%);
    opacity: 0;

}

.backward{
    background: url(../DSAudioPlayer/Core/img/backward.png);
    background-size: 32px 32px;
}
.forward{
    background: url(../DSAudioPlayer/Core/img/forward.png);
    background-size: 32px 32px;
}
div.middle > .play, div.middle > .backward, div.middle > .forward{
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.shuffle, .share, .repeat, .sound{
    width: 32px;
    height: 32px;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
}
.shuffle {
    position: relative;
    background-color: transparent;
    border-radius: 50%;
}
.shuffle:after{
    position: absolute;
    content: '';
    height: 100%;
    width: 100%;
    background-image: url(../DSAudioPlayer/Core/img/shuffle.png);
    margin-left: -15px;
    margin-top:1px;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
}
.shuffle:hover:after{
    transform:rotateX(180deg);
    -webkit-transform:rotateX(180deg);
    -ms-transform:rotateX(180deg);
    -moz-transform:rotateX(180deg);
    -o-transform:rotateX(180deg);
}
.repeat{
    background-image: url(../DSAudioPlayer/Core/img/repeat.png);
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
}
.repeat:hover{
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
}
.repeat .active{
    background-color: red !important;
}
.sound {
    background-image:url(../DSAudioPlayer/Core/img/volume-high.png);
    animation: 0.5s both ease-in-out;
    -webkit-animation: 0.5s both ease-in-out;
    -ms-animation: 0.5s both ease-in-out;
    -moz-animation: 0.5s both ease-in-out;
    -o-animation: 0.5s both ease-in-out;
}

@-webkit-keyframes shake {
    0%, 100% {-webkit-transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-1px);}
    20%, 40%, 60%, 80% {-webkit-transform: translateX(1px);}
}
@-moz-keyframes shake {
    0%, 100% {-webkit-transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-1px);}
    20%, 40%, 60%, 80% {-webkit-transform: translateX(1px);}
}
@-o-keyframes shake {
    0%, 100% {-webkit-transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-1px);}
    20%, 40%, 60%, 80% {-webkit-transform: translateX(1px);}
}
@-ms-keyframes shake {
    0%, 100% {-webkit-transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-1px);}
    20%, 40%, 60%, 80% {-webkit-transform: translateX(1px);}
}
@keyframes shake {
    0%, 100% {transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {transform: translateX(-1px);}
    20%, 40%, 60%, 80% {transform: translateX(1px);}
}
.shake:hover {
    -webkit-animation-name: shake;
    -moz-animation-name: shake;
    -ms-animation-name: shake;
    -o-animation-name: shake;
    animation-name: shake;
}

.share {
    background:url(../DSAudioPlayer/Core/img/share.png);
    -webkit-animation: 0.5s both ease-in-out;
    -ms-animation: 0.5s both ease-in-out;
    -moz-animation: 0.5s both ease-in-out;
    -o-animation: 0.5s both ease-in-out;
    animation: 0.5s both ease-in-out;
}

@-webkit-keyframes flash {
    0%, 50%, 100% {opacity: 1;}
    25%, 75% {opacity: 0;}
}
@-ms-keyframes flash {
    0%, 50%, 100% {opacity: 1;}
    25%, 75% {opacity: 0;}
}
@-o-keyframes flash {
    0%, 50%, 100% {opacity: 1;}
    25%, 75% {opacity: 0;}
}
@-moz-keyframes flash {
    0%, 50%, 100% {opacity: 1;}
    25%, 75% {opacity: 0;}
}
@keyframes flash {
    0%, 50%, 100% {opacity: 1;}
    25%, 75% {opacity: 0;}
}
.share:hover {
    -webkit-animation-name: flash;
    -moz-animation-name: flash;
    -ms-animation-name: flash;
    -o-animation-name: flash;
    animation-name: flash;
}


/** menu Button **/
.grid-button {
    background: none;
    border: none;
    padding: 0;
    width: 100%;
}

.grid {
    display: inline-block;
    height: 4px;
    position: relative;
    width: 32px;
    transition: all 0.3s ease-in-out;
    margin-top: 15px;
}
.grid:after, .grid:before {
    content: '';
    position: absolute;
    background-color: #FFF;
    display: inline-block;
    height: 4px;
    left: 0;
    width: 32px;
    transition: all 0.3s ease-in-out;
}

.grid.open {
    background-color: #FFF;
}
.grid.open:after {
    top: 10px;
}
.grid.open:before {
    top: -10px;
}

.grid.close {
    background-color: transparent;
    transform: scale(0.9);
}
.grid.close:after, .grid.close:before {
    top: 0;
    transform-origin: 50% 50%;
}
.grid.close:before {
    transform: rotate(135deg);
}
.grid.close:after {
    transform: rotate(45deg);
}


/** Top section **/
.trackTitle, .trackSinger{
    text-align: center;
    color:#FFF;
}
.trackTitle{
    font-size:30px;
    margin-top:20px;
    font-family: 'Oswald', sans-serif;
}
.trackSinger{
    margin-top: 10px;
    font-size:16px;
    font-family: 'Questrial', sans-serif;
}




/** Panel 2 setting **/
div.panel2> ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
div.panel2 > ul > li{
    width:100%;
    height:80px;
    border-bottom:solid 1px rgba(255,255,255,0.5);
    background:rgba(255,255,255,0.5);
}
div.panel2 > ul > li:hover{
    background:rgba(255,255,255,0.8);
}
div.panel2 > ul > li > div.leftBox, div.panel2 > ul > li > div.rightBox{
    height:100%;
}
div.panel2 > ul > li > div.leftBox{float:left; width:58%;}
div.panel2 > ul > li > div.rightBox{float:right; width:42%;}
div.panel2 > ul > li > div.leftBox > .listNum{
    width:32%;
    height:100%;
    background:rgba(255,0,0,0.0);
    font-size:58px;
    font-family: 'Oswald', sans-serif;
    float:left;
    color:rgba(0,0,0,0.2);
    margin-top: -8px;
}
div.listNum > span{
    padding-left:5px;
}
div.leftBox > p{
    line-height:10px;
}
div.leftBox > p.title{
    font-size:20px;
    font-family: 'Oswald', sans-serif;
    color: #454545;
}
div.leftBox > p.singer{
    font-size:14px;
    font-family: 'Questrial', sans-serif;
    font-weight: 300;

}
div.leftBox > p.singer:before{
    content: 'By ';
}
/** Right side ***/
div.rightBox > .artwork{
    width:60px;
    height:60px;
    border-radius:50%;
    background-image: none;
    background-position: center !important;
    background-size:cover !important;
    float:right;
    margin:10px 5px 10px 0;
}
div.rightBox > p{
}
div.rightBox > .duration{
    font-size:14px;
    font-weight: bold;
    text-align: right;
    margin-right: 80px;
}
div.rightBox > .resources{
    margin: -3px 80px 0 0px;
}
div.resources > a{
    width:20px;
    height:20px;
    display: block;
    text-decoration: none;
    float:right;
    margin-left:5px;
    opacity:0.5;
}
div.resources > a:hover{
    opacity:1;
}
div.resources > a.apple{
    background: url(../DSAudioPlayer/Core/img/16-apple-24.png);
    background-size:20px;
}
div.resources > a.amazon{
    background: url(../DSAudioPlayer/Core/img/27-amazon-24.png);
    background-size:20px;
    margin-top: 2px;
}
div.resources > a.download{
    background: url(../DSAudioPlayer/Core/img/178_Download-24.png);
    background-size:20px;
}
.cur, .slash{
    display: none;
}

/** animations **/
div.panel2 > ul > li{
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}



/** Slider's Modifications **/
.rs-control .rs-range-color,
.rs-control .rs-path-color,
.rs-control .rs-handle,
.rs-control .rs-bg-color,
.play .frontTiming,
.rs-seperator,
.rs-border{
    transition: all 0.5s ease-in-out !important;
    -webkit-transition: all 0.5s ease-in-out !important;
    -ms-transition: all 0.5s ease-in-out !important;
    -moz-transition: all 0.5s ease-in-out !important;
    -o-transition: all 0.5s ease-in-out !important;
}

.rs-control .rs-range-color {
    background-color: rgba(0,0,0,0.0);
}
.rs-control .rs-path-color {
    background-color: rgba(255,255,255,0.0);
}
.rs-control .rs-handle {
    background-color: rgba(255,255,255,0.9);
}
.rs-control .rs-bg-color {
    background-color: rgba(255,255,255,0.0);
}
.rs-border{
    border: 2px solid rgba(0, 0, 0, 0);
}
/** HOVER **/
.play:hover  .rs-border{
    border: 2px solid rgba(255, 255, 255, 0.3);
}
.play:hover  .rs-handle{
    background-color: rgba(255,255,255,0.95);
}
.play:hover > .frontTiming{
    opacity: 1 !important;
}
div.rs-container.full{
    text-align: left;
}
.rs-seperator{
    border: 1px solid rgba(255,255,255,0.4);
}

/***********Social Button******************/
.share-button {
    width: 32px;
    height: 32px;
    line-height: 2em;
}

.social-toggle {
    width: 32px;
    height: 32px;
    transition: all 0.3s linear;
    background:url(../DSAudioPlayer/Core/img/share.png);
    -webkit-animation: 0.5s both ease-in-out;
    -moz-animation: 0.5s both ease-in-out;
    -o-animation: 0.5s both ease-in-out;
    -ms-animation: 0.5s both ease-in-out;
    animation: 0.5s both ease-in-out;
}
.social-toggle:hover {
    -webkit-animation-name: flash;
    animation-name: flash;
    -o-animation-name: flash;
    -moz-animation-name: flash;
    -ms-animation-name: flash;
}

.social-toggle:hover {  }

.no-js .social-toggle,
.no-js .social-toggle:hover {  }

.social-networks {
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: scale(0) translateY(-190px);
    transform: scale(0) translateY(-190px);
    opacity: 0;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
    margin-left: -45%;
    /* stops flickering */
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
}
.social-facebook, .social-email, .social-gplus, .social-twitter{
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
}
.social-facebook{
    background-image: url(../DSAudioPlayer/Core/img/facebook.jpg);
}
.social-facebook:hover{
    background-color: rgba(59,89,152,.8);
}
.social-gplus{
    background-image: url(../DSAudioPlayer/Core/img/googleplus.jpg);
}
.social-gplus:hover {
    background-color: rgba(227,68,41,.8);
}
.social-twitter{
    background-image: url(../DSAudioPlayer/Core/img/twitter.jpg);
}
.social-twitter:hover {
    background-color: rgba(108,223,234,.8);
}
.social-email{
    background-image: url(../DSAudioPlayer/Core/img/email.jpg);
}
.social-email:hover {
    background-color: rgba(31, 128, 0,.8);
}

.social-networks.open-menu,
.no-js .social-networks {
    -webkit-transform: scale(1) translateY(-90px);
    -ms-transform: scale(1) translateY(-90px);
    -moz-transform: scale(1) translateY(-90px);
    -o-transform: scale(1) translateY(-90px);
    transform: scale(1) translateY(-90px);
    opacity: 1;
}

.social-networks ul {
    position: relative;
    top: 10px;
    right: 110px;
    width: 160px;
    height: 25px;
    color: #fff;
    background: rgba(255,255,255,.5);
    margin: auto;
    padding: 0;
    list-style: none;
}

.social-networks ul:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    /**left: 0;**/
    right: 10px;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
}

.social-networks.open-menu ul:after,
.no-js .social-networks ul:after {
    margin: 25px 0;
    border-top: 12px solid rgba(255,255,255,.5);
}

.social-networks li {
    width: 40px;
    margin: 0;
    text-align: center;
    float: left;
    display: block;
    height: 25px;
    line-height: 40px;
    position: relative;
    z-index: 2;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    -ms-box-sizing: content-box;
    -o-box-sizing: content-box;
    box-sizing: content-box;
    transition: background-color .3s ease;
}

.share-button a {
    text-decoration: none;
}

.social-networks a {
    width:100%;
    height: 100%;
    display: block;
    color: white;
}

.social-networks a:hover {  }
/** ------- **/

/** EQ PLAYER **/
.eq{
    float:left;
    margin:-5px 5px 0 0;
    width:14px;
    height:15px;
    position:relative;
}
.bar1, .bar2, .bar3{
    float:left;
    width:4px;
    height:100%;
    background:black;
    position:absolute;
    bottom:0;
}
.bar1{
    animation: bar1 4s ease-in-out infinite;
    -webkit-animation: bar1 4s ease-in-out infinite;
    -o-animation: bar1 4s ease-in-out infinite;
    -moz-animation: bar1 4s ease-in-out infinite;
    -ms-animation: bar1 4s ease-in-out infinite;

}
.bar2{
    animation: bar2 4s ease-in-out infinite; left:5px;
    -webkit-animation: bar2 4s ease-in-out infinite; left:5px;
    -moz-animation: bar2 4s ease-in-out infinite; left:5px;
    -ms-animation: bar2 4s ease-in-out infinite; left:5px;
    -o-animation: bar2 4s ease-in-out infinite; left:5px;
}
.bar3{
    animation: bar3 4s ease-in-out infinite; left:10px;
    -webkit-animation: bar3 4s ease-in-out infinite; left:10px;
    -moz-animation: bar3 4s ease-in-out infinite; left:10px;
    -ms-animation: bar3 4s ease-in-out infinite; left:10px;
    -o-animation: bar3 4s ease-in-out infinite; left:10px;
}
@keyframes bar1 {
    0%   {height: 100%;} 10%  {height: 80%;} 20%  {height: 90%;} 30%  {height: 1%;}
    40%  {height: 60%;} 50%  {height: 40%;} 60%  {height: 90%;} 70%  {height: 70%;}
    80%  {height: 100%;} 90%  {height: 5%;} 100%  {height: 100%;}
}
@keyframes bar2 {
    0%   {height: 10%;} 10%  {height: 60%;} 20%  {height: 20%;} 30%  {height: 80%;}
    40%  {height: 40%;} 50%  {height: 90%;} 60%  {height: 30%;} 70%  {height: 100%;}
    80%  {height: 5%;} 90%  {height: 50%;} 100%  {height: 10%;}
}
@keyframes bar3 {
    0%   {height: 50%;} 10%  {height: 20%;} 20%  {height: 70%;} 30%  {height: 50%;}
    40%  {height: 1%;} 50%  {height: 80%;} 60%  {height: 50%;} 70%  {height: 90%;}
    80%  {height: 30%;} 90%  {height: 1%;} 100%  {height: 10%;}
}


/** RESPONSIVE **/
@media only screen and (max-device-width : 768px) {
    .sound{ /** DISABLE THE BUTTON **/
        opacity: .5;
        pointer-events: none;
    }
}

.DSAudioPlayer {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    cursor: default;
}

/** scroll **/
.DSAudioPlayer ::-webkit-scrollbar {
    width:11px;
}

.DSAudioPlayer ::-webkit-scrollbar-track {
    -webkit-border-radius:5px;
    border-radius:5px;
    background:rgba(0,0,0,0.1);
}

.DSAudioPlayer ::-webkit-scrollbar-thumb {
    -webkit-border-radius:5px;
    border-radius:5px;
    background: rgba(255, 255, 255, 0.65);
}

.DSAudioPlayer ::-webkit-scrollbar-thumb:hover {
    background:rgba(255, 255, 255, 0.75);
}

.DSAudioPlayer ::-webkit-scrollbar-thumb:window-inactive {
    background:rgba(0,0,0,0.05);
}