#player-interface {
  height:130px;
}


#player-interface.large {
  width:790px;
}

#player-interface.small {
  width:385px;
  width: 100%;
}

#player-interface.fixed { 
  position: fixed;
  z-index:5000;
  top:280px;
}

#player-interface-inner {
  display:block;
  position:relative;
  width:inherit;
  height:inherit;
}

#player-interface-overlay {
  display:block;
  width:inherit; height:inherit;
  background-color: #6c6c6c;
  opacity: 0.8;
  filter:alpha(opacity=80);
  position:absolute;
  top:0; left:0;
  -moz-border-radius:5px 5px 0 0;
  -webkit-border-radius:5px 5px 0 0;
  border-radius:5px 5px 0 0;
}

#media-picture {
  width:110px;
  height:110px;
}

#media-picture img {
  width:100%; height:100%;
}

#tb-media-player {
  position:absolute;
  top:0; left:0;
  opacity: 1;
  padding:10px;
  display: flex;
}


#player-controller span { display:none; }


/* LARGE */
#player-controller {
  position:relative;
  height:50px;
  width:140px;
  float:left;
  margin-top:15px;
  margin-left:15px;
}

#player-interface #player-controller a {
  position:absolute;
  bottom:4px;
  display:block;
  background:transparent url(img/player/buttons_large.png) 0 0 no-repeat;
}

#player-interface #player-controller a#button-backward {
  left:0;
  width:32px; height:32px;
  background-position: 0 -134px;
}

#player-interface #player-controller a#button-play {
  left:37px;
  width:48px; height:48px;
  background-position: 0 0;
}

#player-interface #player-controller a#button-pause {
  left:37px;
  width:48px; height:48px;
  background-position: 0 -50px;
}

#player-interface #player-controller a#button-forward {
  left:90px;
  width:32px; height:32px;
  background-position: 0 -100px;
}

#player-interface #player-controller a#button-backward:hover { background-position: -34px -134px; }
#player-interface #player-controller a#button-play:hover { background-position: -50px 0; }
#player-interface #player-controller a#button-pause:hover { background-position: -50px -50px; }
#player-interface #player-controller a#button-forward:hover { background-position: -34px -100px; }


#media-player {
  float:left;
  margin-top:33px;
}

#products-datas {
  height:15px;
  color:#e1e1e1;
  margin-left:15px;
  font-size:12px;
  width:480px;
  line-height:13px;
}

#products-datas .slash {
  color:#fff;
  font-weight:bold;
  font-size:13px;
}

#player-interface.large #products-cart-action {
border-left:1px solid #969595;
float:right;
height:85px;
margin-left:10px;
padding-left:22px;
text-align:right;
width:150px;
}


/* SMALL */
#playlist-tracks-wrapper {
  overflow:auto;
  height:237px;
}


#player-interface.small #player-interface-overlay  {
  -moz-border-radius:0 0 20px 40px;
  background-color:#6C6C6C;
  height:58%;
}

#player-interface.small #player-interface-inner {
  background:#414141;
}


#player-interface.small #products-cart-action {
 border-left:1px solid #969595;
 text-align:right;
 float:right;
 width:180px;
 padding-left:4px;
 height:45px;
  padding-top: 15px;
  padding-top: 15px;
}

#player-interface.small #media-infos {

}

#player-interface.small #products-datas {
  font-size:15px;
  margin-left:20px;
  float:left;
  width:450px;
  height:64px;
  overflow:hidden;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#player-interface.small #product-label {
  display:block;
}

#player-interface.small #products-datas .slash { font-size:11px;}

#player-interface.small #player-controller a {
  background:transparent url(img/player/buttons_small.png) 0 0 no-repeat;
}

#player-interface.small #player-controller {
  height:40px;
  width:85px;
  margin-top:5px;
  margin-left:20px;
}

#player-interface.small #media-player {margin-top:10px;}

#player-interface.small #player-controller a#button-backward {
  width:22px; height:22px;
  background-position: 0 -67px;
}



#player-interface.small #player-controller a#button-play {
  left:25px;
  width:30px; height:30px;
  background-position: 0 0;
}

#player-interface.small #player-controller a#button-pause {
  left:25px;
  width:30px; height:30px;
  background-position: 0 -34px;
}

#player-interface.small #player-controller a#button-forward {
  left:58px;
  width:22px; height:22px;
  background-position: 0 -92px;
}

#player-interface.small #player-controller a#button-backward:hover { background-position: -23px -67px;}
#player-interface.small #player-controller a#button-play:hover { background-position: -32px 0;}
#player-interface.small #player-controller a#button-pause:hover { background-position: -31px -34px;}
#player-interface.small #player-controller a#button-forward:hover { background-position: -23px -92px; }


#playlist-tracks.small .title-player-wrapper { width:250px; overflow:hidden;}

/* PLAYLIST */
.set-track { cursor:pointer; }


#track-list-header {
  height:20px;
}

#playlist-tracks #track-list-header li {
  display:block;
  float:left;
  height:20px;
  line-height:20px;
  background:#6c6c6c;
  color:#fff;
  margin:0;
  padding:0;
  border-bottom: 1px solid #8F8F8F;
  border-left: 1px solid #8F8F8F;
  text-indent:3px;
  font-weight:bold;
}

#track-list-header-buttons {width: 40px; }
#track-list-header-title {width: 329px; }
#track-list-header-name {width: 192px; }
#track-list-header-label {width: 165px; }
#track-list-header-action {width: 48px; }

#playlist-tracks .playlist-track-listing .track { width:355px; }
#playlist-tracks .title-player-wrapper { width:305px; overflow:hidden;}
#playlist-tracks .track-product-name { float:left; width:192px; overflow:hidden;}
#playlist-tracks .track-product-label { float:left; width:165px; overflow:hidden;}


#playlist-tracks .track.activ .track-title {
 font-size:11px;
 line-height:15px;
}

#playlist-tracks {
  padding:4px;
  border:1px solid #DDDDDD;
  background:#eee;
}

#playlist-tracks li {
  padding:2px 0;
  border-bottom:1px solid #ccc;
}

#playlist-tracks li.odd { background:#fff; }
#playlist-tracks li.even { background:#f5f5f5; }
#playlist-tracks li.current-track { background:#FFFDC6; }



#playlist-tracks .track {
  float:left;
}

.track-action {
  float:right;
  padding-right:2px;
}

.title-player-wrapper {
width:245px;
overflow:hidden;
}


#player-cart  {
  color:#fff;
  height:18px;
  display: flex;
  gap: 10px;
}

#player-cart span.product-price {
  display:block;
  font-size:15px;
  font-weight:bold;
  color:#E0E0E0;
  width:65px;
  text-align:center;
  line-height: 25px;
}

#player-cart .player-cart-button-wrapper {

}

#player-cart input {
	display: none;
}
#player-cart .mini-cart-button { float:right;}
#player-cart .cart-button { float:right;}


.link-track-button {
  width:16px; height:16px;
  display:block;
  float:left;
  background:transparent url(img/bt_action.png) -18px 0 no-repeat;
}
.link-track-button span { display:none; }

.mini-cart-button span {
  display:none;
}

/* LARGE */
.large #player-cart span.product-price {
  font-size:17px;
  width:130px;
  text-align:center;
  padding:10px 0;
}

.large #player-cart .player-cart-button-wrapper {
  background:#FFFFFF;
  border:1px solid #BBD652;
  height:27px;
  padding:1px;
  width:127px;
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
  border-radius:4px;
}

.large #player-cart input {
  border:none;
  float:left;
  font-size:11px;
  height:27px;
  width:20px;
}

.large #player-cart .cart-button span {
  color:#4F4F4F;
  line-height:26px;
  padding-left:29px;
  font-size:10px;
}


.large .cart-button {
  display:inline-block;
}

#media-player-onair-title {
  content: 'test';
  height:14px;
  color:#fff;
  font-size:10px;
  overflow: hidden;
  width: 190px;
}

#media-player-scrubber {
  position:relative;
  width:180px; height:10px;
  border:1px solid #fff;
  border-radius:4px;
  cursor:pointer;
}

#media-player-scrubber-progress {
  position:absolute;
  width:0%; height:10px;
  background:#ff9900;
  border-radius:4px;
}

/* MOBILE --------------------------------------------*/
@media only screen and (max-width: 899px) {

  #player-interface.small {
    margin-top: 20px;
    width: 100%;
  }

  #media-picture img {
    width: 120px;
    height: 120px;
  }

  #player-interface {
    height: 145px;
  }

  #player-interface.small #player-controller {
    height: 40px;
    width: 85px;
    margin-top: 15px;
    margin-left: 0;
  }

  #player-interface.small #tb-media-player {
    display: flex;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
  }

  #player-interface.small #media-picture {
    width: 120px;
    height: 120px;
    float: initial;
  }

  #player-interface.small #media-infos {
    float: initial;
    width: calc(100% - 130px);
    max-width: calc(100% - 130px);
    overflow: hidden;
  }

  #player-interface.small #products-datas {
    font-size: 16px;
    margin-left: 0;
    float: initial;
    width: 100%;
    height: 70px;
    overflow: hidden;
  }

  #player-interface.small #products-datas  {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  #player-interface.small #products-datas .slash  {
    display: none;
  }

  .player-cart-button-wrapper input {
    display: none;
  }

  .player-cart-button-wrapper .mini-cart-button {
    display: inline-block;
    background: transparent url(img/cart_icons.png) 0 0 no-repeat;
    width: 33px;
    height: 27px;
    border-radius: 3px 3px 3px 3px;
    outline: none;
    font: bold 10px helvetica, verdana, arial, sans-serif;
    text-align: left;
    background-position: 0 0;
    background-color: #bbd652;
  }

  #player-cart .player-cart-button-wrapper {
    border: 0;
    background: transparent;
    padding: 0;
    margin-top: 6px;
    margin-left: 5px;
  }

  #player-interface.small #products-cart-action {
    position: absolute;
    border: 0;
    bottom: -3px;
    right: 0px;
    float: none;
    width: 120px;
    height: 45px;
  }

  #player-cart {
    display: flex;
    gap: 5px;
  }

  #player-cart span.product-price {
    display: initial;
    font-size: 17px;
    font-weight: bold;
    color: #E0E0E0;
    width: 71px;
    margin-top: 4px;
    margin-left: 0;
    text-align: right;
  }


  #media-player {
    display: none;
  }

}