.add_all,.add_all_cover_ul,.add_all_without_cover_ul,.add_all_with_cover_ul,.add_all_cover_without_child_ul,.add_all_without_cover_ol,.add_all_cover_ol,.add_all_with_cover_ol{
 cursor:pointer;
 list-style:none;
}
.sm2-bar-ui {
 position: relative;
 display: inline-block;
 width: 100%;
 font-family: helvetica, arial, verdana, sans-serif;
 font-weight: normal;
 -webkit-background-clip: padding-box;
 background-clip: padding-box;
 -moz-osx-font-smoothing: grayscale;
 -webkit-font-smoothing: antialiased;
 font-smoothing: antialiased;
 text-rendering: optimizeLegibility;
 min-width: 20em;
 max-width: 30em;
 border-radius: 2px;
 overflow: hidden;
 transition: max-width 0.2s ease-in-out;
}

.sm2-bar-ui .sm2-playlist li {
 text-align: center;
 font-size: 92.5%;
 line-height: 1em;
}

.sm2-bar-ui ul {
 line-height: 1em;
}

/* want things left-aligned? */
.sm2-bar-ui.left .sm2-playlist li {
 text-align: left;
}

.sm2-bar-ui .sm2-playlist li .load-error {
  cursor: help;
}

.sm2-bar-ui.full-width {
 max-width: 100%;
 z-index: 5;
}

.sm2-bar-ui.fixed {
 position:relative;
 bottom:auto;
 left: 0px;
 border-radius: 0px;
 z-index: 999;
}

@media(min-width:768px) {
  .sm2-bar-ui.fixed .bd,
  .sm2-bar-ui.bottom .bd {
   padding-left: 2%;
   padding-right: 2%;
  }
}

@media(min-width:1280px) {
  .sm2-bar-ui.fixed .bd,
  .sm2-bar-ui.bottom .bd {
   padding-left: 12%;
   padding-right: 12%;
  }
}

.sm2-bar-ui.bottom {
 top: auto;
 bottom: 0px;
 left: 0px;
 border-radius: 0px;
 overflow: visible;
}

.sm2-bar-ui.playlist-open .bd {
 border-bottom-left-radius: 0px;
 border-bottom-right-radius: 0px;
 border-bottom-color: transparent;
}

.sm2-bar-ui .bd,
.sm2-bar-ui .sm2-extra-controls {
 position: relative;
 background-color: #2D8FF3;
}

.sm2-bar-ui.flat .sm2-box-shadow {
 display: none;
 box-shadow: none;
}


@media(min-width:100px){
 .sm2-bar-ui .bd {
   display: table;
   height: 100px;
  }
 #music_player_album_cover{
    padding-left:7px;
    padding-top: 5px;
  }
  .album_cover_img{
    width:35px;
  }
}

@media(min-width:768px){
 .sm2-bar-ui .bd {
   display: table;
   height: 55px;
  }
  #music_player_album_cover{
    padding-left:10px;
    padding-top: 0px;
  }
  .album_cover_img{
    width:42px;
  }
}

.sm2-bar-ui .sm2-playlist-wrapper {
 background-color: #161B21;
}

.repeat{
  color:#8CC2F8;
}

.previous,.next,.sm2-inline-time,.sm2-inline-duration,.sm2-playlist-bd {
 color: #fff;
}


.sm2-bar-ui .bd a {
 text-decoration: none;
}

.sm2-bar-ui {
 font-size: 15px;
 text-shadow: none;
}

.sm2-bar-ui .sm2-inline-element,.sm2-bar-ui .progress_class{
 position: relative;
 display: inline-block;
 vertical-align: middle;
 padding: 0px;
 overflow: hidden;
}


@media(min-width:100px){
  .sm2-bar-ui .star_class,.sm2-bar-ui .shuffle_class,.sm2-bar-ui .repeat_class,
  .sm2-bar-ui .prev_class,.sm2-bar-ui .play_class,.sm2-bar-ui .next_class
  ,.sm2-bar-ui .menu_class,.sm2-bar-ui .mute_class,.sm2-bar-ui .volume_class,.sm2-bar-ui .progress_class,.sm2-bar-ui .center_line{
    position: absolute;
  }
  .progress_class{
    top:46px;
  }
  .center_line{
   display: block;
    border-bottom: 1px solid #7DBAF8;
    width: 97%;
    top: 46px;
    margin-left: 12px;
  }
    .sm2-bar-ui .star_class{
    left:5px;
    top:0px;
  }
  .sm2-bar-ui .shuffle_class{
    left:50px;
    top:0px;
  }
  .sm2-bar-ui .repeat_class{
    left:90px;
    top:0px;
  }
  .sm2-bar-ui .menu_class{
    right:45px;
    top:0px;
  }
  .sm2-bar-ui .mute_class{
    right:10px;
    top:0px;
  }
  .sm2-bar-ui .prev_class{
    top:60px;
    left:20px;
  }
  .sm2-bar-ui .play_class{
    top:50px;
    left:46%;
  }
  .sm2-bar-ui .next_class{
    top:40px;
    right: 20px;
  }
  .icon-line{
    display: none;
    position: absolute;
   color: #000;
   border: 1px solid #7DBAF8;
   width: 40%;
   transform: rotate(30deg);
   -ms-transform: rotate(30deg); /* IE 9 */
   -webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
   -moz-transform:rotate(30deg); /* mozila */
   margin-top: 10px;
  }
}

@media(min-width:768px) {
  .sm2-bar-ui .sm2-inline-element,.sm2-bar-ui .progress_class{
   position: relative;
  }
  .center_line{
    display:none;
  }
   .progress_class{
    top:0px;
  }
  .sm2-bar-ui .star_class{
    left:0px;
    top:0px;
  }
  .sm2-bar-ui .shuffle_class{
    left:0px;
    top:0px;
  }
  .sm2-bar-ui .repeat_class{
    left:0px;
    top:0px;
  }
  .sm2-bar-ui .menu_class{
    right:0px;
    top:0px;
  }
  .sm2-bar-ui .mute_class{
    right:0px;
    top:0px;
  }
  .sm2-bar-ui .prev_class{
    top:0px;
    left:0px;
  }
  .sm2-bar-ui .play_class{
    top:0px;
    left:0px;
  }
  .sm2-bar-ui .next_class{
    top:0px;
    right: 0px;
  }
  .icon-line{
  display: none;
  position: absolute;
  color: #000;
  border: 1px solid #7DBAF8;
  width: 21%;
   transform: rotate(30deg);
   -ms-transform: rotate(30deg); /* IE 9 */
   -webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
   -moz-transform:rotate(30deg); /* mozila */
  margin-top: 7px;
}
}

.sm2-bar-ui .sm2-button-element .sm2-button-bd {
 position: relative;
}

.sm2-bar-ui .sm2-inline-element,.sm2-bar-ui .progress_class,
.sm2-bar-ui .sm2-button-element .sm2-button-bd {
 min-width: 2.8em;
 min-height: 2.8em;
}

.sm2-bar-ui .sm2-inline-button {
 position: absolute;
 top: 0px;
 left: 0px;
 width: 100%;
 height: 100%;
}

@media(min-width:100px){
    .sm2-bar-ui .sm2-inline-status {
   line-height: 100%;
   display: inline-block;
   min-width: 90%;
   max-width: 90%;
   padding-left: 0.75em;
   padding-right: 0.75em;
  }
    .sm2-progress{
  margin-top: 10px;
  display:none;
    }
    .sm2-progress .sm2-progress-track,
  .sm2-progress .sm2-progress-ball,
  .sm2-progress .sm2-progress-bar {
   position: relative;
   width: 100%;
   height: 0.45em;
   border-radius: 0.65em;
  }

}

@media(min-width:480px){
    .sm2-bar-ui .sm2-inline-status {
   line-height: 100%;
   display: inline-block;
   min-width: 94%;
   max-width: 94%;
   padding-left: 0.75em;
   padding-right: 0.75em;
  }
    .sm2-progress{
  margin-top: 10px;
  display:none;
    }
    .sm2-progress .sm2-progress-track,
  .sm2-progress .sm2-progress-ball,
  .sm2-progress .sm2-progress-bar {
   position: relative;
   width: 100%;
   height: 0.45em;
   border-radius: 0.65em;
  }

}

@media(min-width:768px){
  .sm2-bar-ui .sm2-inline-status {
   line-height: 100%;
   display: inline-block;
   min-width: 200px;
   max-width: 20em;
   padding-left: 0.75em;
   padding-right: 0.75em;
  }
    .sm2-progress{
  margin-top: 10px;
  display:block;
  }
  .sm2-progress .sm2-progress-track,
  .sm2-progress .sm2-progress-ball,
  .sm2-progress .sm2-progress-bar {
   position: relative;
   width: 100%;
   height: 0.15em;
   border-radius: 0.65em;
  }
}

.sm2-bar-ui .sm2-inline-status a:hover {
 background-color: transparent;
 text-decoration: underline;
}

.sm2-inline-time,
.sm2-inline-duration {
 display: table-cell;
 width: 1%;
 font-size: 13px;
 line-height: 0.9em;
 min-width: 2em; /* if you have sounds > 10:00 in length, make this bigger. */
 vertical-align: middle;
 position: relative;
 top: -3px;
}

.sm2-bar-ui .sm2-playlist {
 position: relative;
 height: 1.45em;
}

.sm2-bar-ui .sm2-playlist-target {
 position: relative;
 min-height: 1em;
}

.sm2-bar-ui .sm2-playlist ul {
 position: absolute;
 left: 0px;
 top: 0px;
 width: 100%;
 list-style-type: none;
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
}

.sm2-bar-ui p,
.sm2-bar-ui .sm2-playlist ul,
.sm2-bar-ui .sm2-playlist ul li {
 margin: 0px;
 padding: 0px;
}

.sm2-bar-ui .sm2-playlist ul li {
 position: relative;
}

.sm2-bar-ui .sm2-playlist ul li,
.sm2-bar-ui .sm2-playlist ul li a {
 position: relative;
 display: block;
 height: 1.5em;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 text-align: center;
}

.sm2-row {
 display: table-row;
}

.sm2-progress-bd {
 padding: 0px 0.8em;
}



.sm2-progress .sm2-progress-bar {
 position: absolute;
 left: 0px;
 top: 0px;
 width: 0px;
 background-color: white;
 background-image: url(../images/black-33.png);
 background-image: none, none;
}

.volume-shade,
.playing .sm2-progress .sm2-progress-track,
.paused .sm2-progress .sm2-progress-track {
 cursor: pointer;
}

.playing .sm2-progress .sm2-progress-ball {
 cursor: -moz-grab;
 cursor: -webkit-grab;
 cursor: grab;
}

.sm2-progress .sm2-progress-track {
 background-color: #7DBAF8;
 background-image: url(../images/black-33.png); /* legacy */
 background-image: none, none; /* modern browsers */
}

/* scrollbar rules have to be separate, browsers not supporting this syntax will skip them when combined. */
.sm2-playlist-wrapper ul::-webkit-scrollbar-track {
 background-color: rgba(0,0,0,0.4);
}

.playing.grabbing .sm2-progress .sm2-progress-track,
.playing.grabbing .sm2-progress .sm2-progress-ball {
 cursor: -moz-grabbing;
 cursor: -webkit-grabbing;
 cursor: grabbing;
}

.sm2-bar-ui.grabbing .sm2-progress .sm2-progress-ball {
 -webkit-transform: scale(1.15);
 transform: scale(1.15);
}

.sm2-inline-button {
 background-position: 50% 50%;
 background-repeat: no-repeat;
 image-rendering: -moz-crisp-edges;
 image-rendering: -webkit-optimize-contrast;
 image-rendering: crisp-edges;
 -ms-interpolation-mode: nearest-neighbor;
 -ms-interpolation-mode: bicubic;
}





.sm2-bar-ui .sm2-volume-control {
 cursor:pointer;
 position: absolute;
 top: 30px;
 left: 0px;
 width: 100%;
 height: 0.15em;
}

.play-pause:hover,
.paused .play-pause:hover,.playing .play-pause:hover {
 opacity:1;
}

@media(min-width:100px){
  .sm2-bar-ui .sm2-button-element .volume_bar {
   min-width: 5em;
   min-height: 2.8em;
   padding: 0px 0px 0px 40px;
    display:none;
  }
  .play-pause{
   background-image: url(../images/icomoon/entypo-25px-ffffff/PNG/play.png);
   background-image: none, url(../images/icomoon/entypo-25px-ffffff/SVG/play.svg);
   background-size: 90%;
   background-position: 100% 100%;
   opacity:0.5;
  }

  .playing .play-pause {
   background-image: url(../images/icomoon/entypo-25px-ffffff/PNG/pause.png);
   background-image: none, url(../images/icomoon/entypo-25px-ffffff/SVG/pause.svg);
   background-size: 90%;
   background-position: 100% 100%;
   opacity:0.5;
  }
}

@media(min-width:768px){
   .sm2-bar-ui .sm2-button-element .volume_bar {
   min-width: 5em;
   min-height: 2.8em;
   padding: 0px 0px 0px 40px;
   display:block;
   position: relative;
   top: -9px;
  }
  .play-pause{
   background-image: url(../images/icomoon/entypo-25px-ffffff/PNG/play.png);
   background-image: none, url(../images/icomoon/entypo-25px-ffffff/SVG/play.svg);
   background-size: 67.5%;
   background-position: 40% 53%;
   opacity:0.5;
  }
  .playing .play-pause {
   background-image: url(../images/icomoon/entypo-25px-ffffff/PNG/pause.png);
   background-image: none, url(../images/icomoon/entypo-25px-ffffff/SVG/pause.svg);
   background-size: 67.5%;
   background-position: 40% 53%;
   opacity:0.5;
  }
}



@media(min-width:100px){
  .icon-volume{
  cursor: pointer;
  font-size:22px;
  }
  .sm2-bar-ui .sm2-button-element .mute {
   min-width: 3em;
   min-height: 2.8em;
   padding: 12px 20px 10px 20px;
   color:white;
  }
  .previous {
   color: #FFF;
   display: inline-block;
   vertical-align: middle;
   font-size: 20px;
   padding: 0px;
   opacity:0.5;
  }

  .next {
   display: inline-block;
   vertical-align: middle;
   color: #FFF;
    transform: rotate(180deg);
   -ms-transform: rotate(180deg); /* IE 9 */
   -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
   -moz-transform:rotate(180deg); /* mozila */
   font-size: 20px;
   padding: 0px;
   opacity:0.5;
  }

 .star{
 color: #8CC2F8;
 display: inline-block;
 vertical-align: middle;
 font-size: 26px;
 padding: 10px;
}

.shuffle {
 background-size: 45%;
 background-position: 50% 50%;
 padding: 10px;
 font-size:26px;
 color:#8CC2F8
}
.repeat {
 background-position: 50% 43%;
 background-size: 54%;
 font-size:26px;
 padding: 10px;

}
}

@media(min-width:768px){
  .icon-volume{
  cursor: pointer;
  font-size:15px;
  }
  .sm2-bar-ui .sm2-button-element .mute {
   min-width: 3em;
   min-height: 2.8em;
   padding: 20px 20px 10px 20px;
   color:white;
  }
  .previous {
   color: #FFF;
   display: inline-block;
   vertical-align: middle;
   font-size: 12px;
   padding: 15px;
   opacity:0.5;
  }
 .next {
   display: inline-block;
   vertical-align: middle;
   color: #FFF;
  transform: rotate(180deg);
   -ms-transform: rotate(180deg); /* IE 9 */
   -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
   -moz-transform:rotate(180deg); /* mozila */
   font-size: 12px;
   padding: 15px;
   opacity:0.5;
 }

.star{
 color: #8CC2F8;
 display: inline-block;
 vertical-align: middle;
 font-size: 24px;
 padding: 10px;
}

.shuffle {
 background-size: 45%;
 background-position: 50% 50%;
 padding: 10px;
 font-size:24px;
 color:#8CC2F8
}
.repeat {
 background-position: 50% 43%;
 background-size: 54%;
 font-size:24px;
 padding: 10px;

}
}


.sm2-volume-control {
 background-color:#fff;
 width: 100%;
 height: 3px;
}

.sm2-volume-control,
.sm2-volume-shade {
 background-position: 42% 50%;
 background-size: 56%;
}

.volume-shade {
 filter: alpha(opacity=33); /* <= IE 8 */
 opacity: 0.33;
}

.menu {
 background-image: url(../images/icomoon/entypo-25px-ffffff/PNG/list2.png);
 background-image: none, url(../images/icomoon/entypo-25px-ffffff/SVG/list2.svg);
 background-size: 85%;
 background-position: 54% 51%;
}

.icon-uniE61F:hover {
  color:white;
  }

.icon-uniE61F {
 color: #FFF;
 display: inline-block;
 vertical-align: middle;
 font-size: 30px;
 padding: 6px;
}

.previous:hover,.next:hover{
  color:white;
  opacity:1;
}

.previous,
.next {
 background-size: 49.5%;
 background-position: 50% 50%;
}

.sm2-extra-controls .previous,
.sm2-extra-controls .next {
 backgound-size: 53%;
}


#shuffle a:hover,#star a:hover,#repeat a:hover{
  color:white;
}



.sm2-extra-controls .repeat {
 background-position: 50% 45%;
}

@-webkit-keyframes spin {
 0% {
  -webkit-transform: rotate(0deg);
 }
 100% {
  -webkit-transform: rotate(360deg);
 }
}

@-moz-keyframes spin {
 0% {
  transform: rotate(0deg);
 }
 100% {
  transform: rotate(360deg);
 }
}

@keyframes spin {
 0% {
  transform: rotate(0deg);
 }
 100% {
  transform: rotate(360deg);
 }
}

.sm2-element ul {
 font-size: 14px;
 list-style-type: none;
}

@media(min-width:768px){
 .sm2-element ul {
   font-size: 95%;
   list-style-type: none;
  }
}
.sm2-element ul,
.sm2-element ul li {
 margin: 0px;
 padding: 0px;
}

.bd.sm2-playlist-drawer {
 z-index: 3;
 border-radius: 0px;
 width: 100%;
 height: 0px;
 border: none;
 background-image: none;
 display: block;
 overflow: hidden;
 transition: height 0.2s ease-in-out;
}

@media(min-width:100px){
  .sm2-bar-ui.fixed .bd.sm2-playlist-drawer,
.sm2-bar-ui.bottom .bd.sm2-playlist-drawer {
 position: absolute;
 top: 42px;
}
}

@media(min-width:768px){
.sm2-bar-ui.fixed .bd.sm2-playlist-drawer,
.sm2-bar-ui.bottom .bd.sm2-playlist-drawer {
 position: relative;
 top: 0px;
}
}



.sm2-bar-ui.fixed .sm2-playlist-wrapper,
.sm2-bar-ui.bottom .sm2-playlist-wrapper {
 padding-bottom: 0px;
}
.sm2-bar-ui-top-align{
    margin-top:140px;
}

.sm2-bar-ui .bd.sm2-playlist-drawer {
 opacity: 0.5;
 transform: translateZ(0);
}

.sm2-bar-ui.playlist-open .bd.sm2-playlist-drawer {
 opacity: 1;
 background:#161B21;
 font-size: 18px;
 line-height: 24px;
}

.sm2-bar-ui.playlist-open .bd.sm2-playlist-drawer a {
 -webkit-filter: none; /* blur(0px) was still blurred on retina displays, as of 07/2014 */
}

.sm2-bar-ui.fixed.playlist-open .bd.sm2-playlist-drawer .sm2-playlist-wrapper,
.sm2-bar-ui.bottom.playlist-open .bd.sm2-playlist-drawer .sm2-playlist-wrapper {
 padding-bottom: 0.5em;
 box-shadow: none;
}

.sm2-bar-ui .bd.sm2-playlist-drawer {
 transition: all 0.2s ease-in-out;
 transition-property: transform, height, opacity, background-color, -webkit-filter;
}

.sm2-bar-ui .bd.sm2-playlist-drawer a {
 transition: -webkit-filter 0.2s ease-in-out;
}


.sm2-playlist-wrapper {
 position: relative;
 padding: 0.5em 0.5em 0.5em 0.25em;
 background-image: none, none;
}

.sm2-playlist-wrapper ul li {
 border-top: 1px solid #1F2429;
 padding:10px;
 height: 50px;
}

.sm2-playlist-wrapper ul li a {
 display: block;
 vertical-align: middle;
}

.sm2-playlist-wrapper ul li a.sm2-exclude {
 display: inline-block;
}

.sm2-playlist-wrapper ul li a.sm2-exclude .label {
 font-size: 95%;
 line-height: 1em;
 margin-left: 0px;
 padding: 2px 4px;
}

.sm2-playlist-wrapper ul li a{
  color:#92A0B1;
}

.sm2-playlist-wrapper ul li:hover a {
 color:#92A0B1;
}

.sm2-bar-ui.dark-text .sm2-playlist-wrapper ul li:hover a {
 background-color: rgba(255,255,255,0.1);
 background-image: url(../images/black-10.png);
 background-image: none, none;
}

.sm2-playlist-wrapper ul li.selected a {
  color:white;
}

.sm2-bar-ui.dark-text ul li.selected a {
 background-color: rgba(255,255,255,0.1);
 background-image: url(../images/black-10.png);
 background-image: none, none;
}

.sm2-bar-ui .disabled {
 filter: alpha(opacity=33); /* <= IE 8 */
 opacity: 0.33;
}

.sm2-bar-ui .bd .sm2-button-element.disabled:hover {
 background-color: transparent;
}

.sm2-button-element .active a{
  color:white;
}

.sm2-button-bd .active{
  color: white;
}

.firefox-fix {
 position: relative;
 display: inline-block;
 width: 100%;
 height: 100%;
}

/* some custom scrollbar trickery, where supported */

.sm2-playlist-wrapper ul::-webkit-scrollbar {
 width: 10px;
}

.sm2-playlist-wrapper ul::-webkit-scrollbar-track {
 background: rgba(0,0,0,0.33);
 border-radius: 10px;
}

.sm2-playlist-wrapper ul::-webkit-scrollbar-thumb {
 border-radius: 10px;
 background: #fff;
}

.sm2-extra-controls {
 font-size: 0px;
 text-align: center;
}

.sm2-bar-ui .label {
 position: relative;
 display: inline-block;
 font-size: 0.7em;
 margin-left: 0.25em;
 vertical-align: top;
 background-color: rgba(0,0,0,0.25);
 border-radius: 3px;
 padding: 0px 3px;
 box-sizing: padding-box;
}

.sm2-bar-ui .sm2-playlist-drawer .label {
 font-size: 0.8em;
 padding: 0px 3px;
}

/* --- full width stuff --- */
@media(min-width:100px){
 .sm2-bar-ui .progress_class {
   /* collapse */
   display: none;
   width: 1%;
 }
}

@media(min-width:768px){
 .sm2-bar-ui .progress_class {
   /* collapse */
   display: table-cell;
   width: 1%;
 }
}


.sm2-bar-ui .sm2-inline-element{
 /* collapse */
 display: table-cell;
 width: 1%;
}

@media(min-width:768px){
 .sm2-bar-ui .sm2-inline-status {
   /* full width */
   width: 90%;
   min-width: 90%;
   max-width: 90%;
  }
}

@media(min-width:768px){
 .sm2-bar-ui .sm2-inline-status {
   /* full width */
   width: 100%;
   min-width: 100%;
   max-width: 100%;
  }
}

.sm2-bar-ui > .bd {
 width: 100%;
}

.sm2-bar-ui .sm2-playlist-drawer {
 /* re-hide playlist */
 display: block;
 overflow: hidden;
}