html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;
}

.lucida {
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
}

.overHid {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icon {
  background: url(/images/icons/player-widget-icons.png?997355168) no-repeat 0 0;
}

.playerWrapper a {
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
  color: #fff;
  text-decoration: none;
}

.playerWrapper {
  width: 530px;
  min-height: 60px;
  background-color: #34393e;
  margin: auto;
  position: relative;
  overflow: hidden;
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
  font-size: 12px;
  box-sizing: border-box;
  max-height: 100%;
}

.bgBigCover,
.bgSmallCover {
  display: none;
  z-index: -1;
}

.playerWrapper.wMega {
  padding-top: 210px;
}

.wMega .bgBigCover {
  position: absolute;
  display: block;
  top:-160px;
  left:0;
  width: 100%;
  min-height: 370px;
  max-height: 530px;
  z-index: 0;
}

.playerControlsWrapper.wSmallCover {
  padding-left: 172px;
}

.wSmallCover .bgSmallCover{
  position: absolute;
  display: block;
  top:0;
  left:0;
  width: 152px;
  min-height: 152px;
  z-index: 0;
}

.playerControlsWrapper {
  height: 116px;
  color: #fff;
  padding: 17px 20px 19px;
  z-index: 1;
  position: relative;
  background-color: #34393e;
}

.wMega .playerControlsWrapper {
  box-shadow: 0 -15px 22px rgba(0,0,0,0.17);
}

.controlsTrackName a,
.controlsArtistName a {
  opacity: 0.8;
  filter: alpha(opacity=80);
}

.controlsTrackName a:hover,
.controlsArtistName a:hover {
  opacity: 1;
  filter: alpha(opacity=100);
}

.controlsTrackName {
  font-size: 15px;
  max-width: 100%;
  font-weight: bold;
  min-height: 10px;
  padding-right: 80px;
}

.controlsArtistName {
  max-width: 100%;
  padding-right: 80px;
  margin-top: 1px;
  min-height: 14px;
}

.logoLink {
  position: absolute;
  width: 61px;
  height: 24px;
  right: 20px;
  top: 13px;
  background: url(/images/icons/player-widget-logo.png?7702020919) no-repeat left bottom;
}

.site4sync .logoLink {
  background-image: url(/4sync.com/images/icons/player-widget-logo.png?7702020919);
}

.logoLink:hover {
  background-position: left top;
}

.controlsTimeAndProgress {
  height: 14px;
  padding: 17px 0 14px;
  font-size: 9px;
  position: relative;
}

.controlsTimeAndProgress * {
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.controlsTimeFrom,
.controlsTimeTo {
  position: absolute;
  width: 45px;
  left:0;
  top: 13px;
  text-align: left;
  cursor: default;
}

.controlsTimeTo {
  left: auto;
  right: 0;
  text-align: right;
}

.controlsProgressbar {
  position: absolute;
  top: 17px;
  left: 45px;
  right: 45px;
  height: 6px;
  border-radius: 3px;
  background-color: #484e53;
  cursor: pointer;
}

.controlsProgressbarBuffering {
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 6px;
  border-radius: 3px;
  background-color: #545b60;
}

.controlsProgressbarCurrent {
  position: absolute;
  top: 0;
  left: 0;
  height: 6px;
  border-radius: 3px;
  background-color: #5498de;
  width: 30%;
  max-width: 100% !important;
}

.controlsProgressbarMarker {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 7px;
  right: -7px;
  top: -4px;
  background-color: #fff;
}

.controlsProgressbarMarker:after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 2px;
  left: 5px;
  top: 5px;
  background-color: #bfbfbf;
}

.controlsProgressbarMarker:hover:after {
  background-color: #5498de;
}

.controlsButtons * {
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.controlsButtons:after {
  content: "";
  display: block;
  clear: both;
  float: none;
  height: 0;
}

.controlsPlayPause {
  width: 36px;
  height: 36px;
  border: 1px solid #484e53;
  border-radius: 2px;
  cursor: pointer;
  float: left;
  margin-right: 10px;
  background-position: center -42px;
  opacity: 0.8;
  filter: alpha(opacity=80);
}

.controlsPlayPause:hover {
  opacity: 1;
  filter: alpha(opacity=100);
}

.isPlaying .controlsPlayPause {
  background-position: center -16px;
}

.isLoading .controlsPlayPause {background: url(/images/loaders/loader-gray-bg.gif?3954169291) no-repeat center center;}
.lt.isLoading .controlsPlayPause {background: url(/images/loaders/loader-lt-gray-bg.gif?4205434620) no-repeat center center;}

.controlsRew,
.controlsFF {
  width: 28px;
  height: 18px;
  margin-top: 10px;
  float: left;
  cursor: pointer;
  background-position: center -75px;
  opacity: 0.8;
  filter: alpha(opacity=80);
}

.controlsRew:hover,
.controlsFF:hover {
  opacity: 1;
  filter: alpha(opacity=100);
}

.controlsRew.disabled,
.controlsFF.disabled {
  opacity: 0.2;
  filter: alpha(opacity=20);
  cursor: default;
}

.controlsFF {
  background-position: center -96px;
}

.controlsListenerCounter {
  margin: 11px 0 0 20px;
  padding-left: 15px;
  color: #878c90;
  font-size: 9px;
  float: left;
  background-position: -8px -118px;
}

.controlsShare,
.controlsDownload {
  width: 26px;
  height: 26px;
  margin: 5px 0 0 12px;
  font-size: 12px;
  float: right;
  cursor: pointer;
  background-position: center 5px;
  overflow: hidden;
  opacity: 0.8;
  filter: alpha(opacity=80);
}

.controlsDownload {
  background-position: center -174px;
}

.controlsShare:hover,
.controlsDownload:hover {
  opacity: 1;
  filter: alpha(opacity=100);
}

.playerPlaylistWrapper {
  color: #fff;
  height: 168px;
  background: #282d31;
  border-top: 1px solid #24292d;
  z-index: 1;
}

.playerPlaylistItem {
  padding: 15px 23px 16px 48px;
  position: relative;
  border-bottom: 1px solid #24292d;
  cursor: pointer;
}

.playerPlaylistItem > * {
  color: #fff;
  opacity: 0.4;
  filter: alpha(opacity=40);
}

.playerPlaylistItem:hover {
  background-color: #34393e;
  border-color: #34393e;
}

.playerPlaylistItem:hover > *,
.playerPlaylistItem.isCurrent > *,
.playerPlaylistItem.isPlaying > * {
  opacity: 1;
  filter: alpha(opacity=100);
}

.playerPlaylistItem .ind {
  position: absolute;
  width: 8px;
  height: 8px;
  left: 22px;
  top: 19px;
  background-position: center -140px;
}

.playerPlaylistItem.isPlaying .ind {
  background-position: center -159px;
}

.playerPlaylistItemName {
  padding-right: 45px;
  font-size: 11px;
}

.playerPlaylistItemLength {
  position: absolute;
  right: 23px;
  top: 15px;
  font-size: 9px;
}

/*mini player size*/

.wMini .playerControlsWrapper {
  height: 38px;
  padding: 11px 13px;
}

.wMini .wSmallCover.playerControlsWrapper {
  padding-left: 75px;
}

.wMini .wSmallCover .bgSmallCover {
  width: 60px;
  min-height: 60px;
}

.wMini .controlsListenerCounter {
  display: none;
}

.wMini .controlsButtons {
  padding-right: 90px;
}

.wMini .controlsTimeAndProgress {
  display: none;
  position: absolute;
  left: 62px;
  right: 175px;
}

.wMini .controlsTrackName,
.wMini .controlsArtistName {
  position: absolute;
  left: 62px;
  right: 175px;
  padding: 0;
}

.wMini .controlsArtistName {
  margin-top: 19px;
}

.wMini .wSmallCover .controlsTimeAndProgress,
.wMini .wSmallCover .controlsTrackName,
.wMini .wSmallCover .controlsArtistName {
  left: 125px;
}

.wMini.isPlaying .controlsTrackName,
.wMini.isPlaying .controlsArtistName {
  display: none;
}

.wMini.isPlaying .controlsTimeAndProgress {
  display: block;
}

.wMini .logoLink {
  right: 16px;
  top: 16px;
}

.wMini .playerControlsWrapper:before {
  content: "";
  position: absolute;
  height: 60px;
  width: 1px;
  background-color: #484e53;
  top: 0;
  right: 90px;
}

.wMini.lt .playerControlsWrapper:before {
  background-color: #cfdde7;
}

.wMini .playerSharing {
  padding: 10px 20px;
}

.wMini .playerSharing:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  float: none;
}

.wMini .controlsRew,
.wMini .controlsFF,
.wMini .playerSharingInput,
.wMini .shArtist,
.wMini .shName {
  display: none !important;
}

.wMini .playerSharingTitle {
  float: left;
  padding: 10px 20px 0 0;
  font-weight: bold;
}

.wMini .playerSharingButtons {
  float: left;
}

.wMini .playerSharingClose {
  top: 24px;
}

.errorOverlayBlock {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #444b51;
  color: #fff;
}

.playerWrapper .errorOverlayText a,
.playerWrapper.lt .errorOverlayText a,
.playerWrapper .errorOverlayText a:hover {
  color: #fff;
}

.errorOverlayBlock .errorOverlayText {
  position: absolute;
  height: 45px;
  line-height: 20px;
  text-align: center;
  width: 100%;
  top: 45%;
  margin-top: -15px;
  font-size: 13px;
}

.site4sync .errorOverlayBlock .errorOverlayText {
  height: 30px;
  line-height: 30px;
  top: 50%;
}

/*cover*/

.playerCoverOverlay {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 5;
  top:0;
  bottom:0;
  left:0;
  right:0;
  color: #fff;
  background-color: rgba(22,27,32,0.9);
}

.IE8 .playerCoverOverlay {
  background: url(/images/ie-dark-overlay-90.png?2457737358);
}

.lt .playerCoverOverlay .logoLink {
  background-image: url(/images/icons/player-widget-logo.png?7702020919);
}

.site4sync .lt .playerCoverOverlay .logoLink {
  background-image: url(/4sync.com/images/icons/player-widget-logo.png?7702020919);
}

.lt .playerCoverOverlay .icon {
  background-image: url(/images/icons/player-widget-icons.png?997355168);
}

.playerWrapper.lt .playerCoverTitle * {
  color: #fff;
}

.wMega .playerCoverTitle,
.wNormal.wPlaylist .playerCoverTitle {
  z-index: 1;
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  height: 19px;
  line-height: 19px;
  padding: 17px 20px;
  background-color: rgba(25,27,29,0.7);
  border-radius: 2px;
}

.wNormal .playerCoverTitle,
.wMini .playerCoverTitle {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  height: auto;
  line-height: normal;
  padding: 19px 20px;
  background-color: rgba(25,27,29,0.7);
  border-radius: 0;
}

.IE8 .wNormal .playerCoverTitle,
.IE8 .wMega .playerCoverTitle,
.IE8 .wMini .playerCoverTitle {
  background: url(/images/ie-dark-overlay-70.png?1037965424);
}

.wMini .playerCoverTitle {
  padding: 11px 20px;
}

.wNormal.wPlaylist .playerCoverTitle strong,
.wNormal.wPlaylist .playerCoverTitle span {
  display: inline;
  font-size: 15px;
}

.wNormal .playerCoverTitle strong,
.wMini .playerCoverTitle strong {
  display: block;
  font-size: 15px;
}

.wNormal .playerCoverTitle span,
.wMini .playerCoverTitle span {
  display: none;
}

.playerCoverImg {
  position: absolute;
  display: block;
  top:0;
  left:0;
  width: 100%;
  min-height: 100%;
  z-index: 0;
}

.playerCoverFilename {
  padding-right: 80px;
}

.wMega .playerCoverFilename,
.wNormal.wPlaylist .playerCoverFilename {
  font-size: 15px;
}

.wNormal .playerCoverFilename,
.wMini .playerCoverFilename {
  font-size: 12px;
}

.playerCoverLogo {
  opacity: 1;
  filter: alpha(opacity=100);
}

.wMega .playerCoverLogo,
.wNormal.wPlaylist .playerCoverLogo {
  top: 13px;
}

.wNormal .playerCoverLogo {
  top: 23px;
}

.wMini .playerCoverLogo {
  top: 17px;
}

.wMega .playerCoverPlayButton,
.wNormal.wPlaylist .playerCoverPlayButton {
  position: absolute;
  width: 92px;
  height: 92px;
  background-color: rgba(25,27,29,0.7);
  cursor: pointer;
  top: 50%;
  margin-top: -46px;
  left: 50%;
  margin-left: -46px;
  border-radius: 8px;
  display: block;
}

.IE8 .wMega .playerCoverPlayButton,
.IE8 .wNormal.wPlaylist .playerCoverPlayButton  {
  background: url(/images/ie-dark-overlay-70.png?1037965424);
}

.wNormal .playerCoverPlayButton,
.wMini .playerCoverPlayButton {
  display: none;
}

.wMega .playerCoverOverlay .controlsPlayPause,
.wNormal.wPlaylist .playerCoverOverlay .controlsPlayPause {
  display: none;
}

.wNormal .controlsPlayPause,
.wMini .controlsPlayPause {
  display: block;
}

.wMega .playerCoverPlayButton:hover,
.wNormal.wPlaylist .playerCoverPlayButton:hover {
  background-color: rgba(25,27,29,0.8);
}

.IE8 .playerCoverPlayButton:hover,
.IE8 .wNormal.wPlaylist .playerCoverPlayButton:hover  {
  background: #46494d;
}

.wMega .playerCoverPlayButton .innerButton,
.wNormal.wPlaylist .innerButton {
  position: absolute;
  left: 6px;
  top: 6px;
  right: 6px;
  bottom: 6px;
  border-radius: 4px;
  border: 2px solid #fff;
  background-position: center -215px;
}

.wMega .playerCoverImg[src*="4sh_music_embed_player_default_cover"],
.wNormal.wPlaylist .playerCoverImg[src*="4sh_music_embed_player_default_cover"],
.wMini.wPlaylist .playerCoverImg[src*="4sh_music_embed_player_default_cover"] {
  top: 50%;
  margin-top: -265px;
}

/*sharing*/

.playerSharing {
  position: absolute;
  z-index: 10;
  top:0;
  bottom:0;
  left:0;
  right:0;
  color: #fff;
  padding: 16px 20px;
  font-size: 15px;
  background-color: rgba(22,27,32,0.9);
  display: none;
}

.IE8 .playerSharing {
  background: url(/images/ie-dark-overlay-90.png?2457737358);
}

.lt .playerSharing .icon {
  background-image: url(/images/icons/player-widget-icons.png?997355168);
}

.wMega .playerSharing {
  top: 210px;
}

.playerSharingInput {
  border: 0;
  outline: 0;
  width: 100%;
  margin: 20px 0 10px;
  background-color: #fff;
  border-radius: 2px;
  font-size: 12px;
  padding: 7px 10px 8px;
  display: block;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
}

.playerSharingClose {
  width: 13px;
  height: 13px;
  position: absolute;
  right: 18px;
  top: 18px;
  background-position: center -204px;
  cursor: pointer;
  opacity: 0.8;
  filter: alpha(opacity=80);
}

.playerSharingClose:hover {
  opacity: 1;
  filter: alpha(opacity=100);
}

.playerSharingButtons:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  float: none;
}

.playerSharingButtons .icon {
  float: left;
  width: 40px;
  height: 40px;
  border-radius: 2px;
  margin-right: 10px;
  cursor: pointer;
  opacity: 0.95;
  filter: alpha(opacity=95);
}

.playerSharingButtons .icon:hover {
  opacity: 1;
  filter: alpha(opacity=100);
}

.fb {
  background-color: #637bad;
  background-position: center -280px;
}


.gp {
  background-color: #d76a53;
  background-position: center -308px;
}


.tw {
  background-color: #23c9ea;
  background-position: center -337px;
}


.vk {
  background-color: #6086ae;
  background-position: center -364px;
}


.em {
  background-color: #8bb4cc;
  background-position: center -392px;
}

/*light theme styles*/

.lt .icon {
  background-image: url(/images/icons/player-widget-icons-lt.png?2453007368);
}

.playerWrapper.lt a {
  color: #484e53;
}

.playerWrapper.lt  {
  background-color: #fafafa;
  border: 1px solid #dee2e5;
}

.lt .playerControlsWrapper {
  background-color: #fafafa;
  color: #484e53;
}

.lt .logoLink {
  background-image: url(/images/icons/player-widget-logo-lt.png?1458391711);
}

.site4sync .lt .logoLink {
  background-image: url(/4sync.com/images/icons/player-widget-logo-lt.png?1458391711);
}

.lt .controlsProgressbar {
  background-color: #b3bac0;
}

.lt .controlsProgressbarBuffering {
  background-color: #a5acb2;
}

.lt .controlsProgressbarMarker {
  border: 1px solid #cacaca;
}

.lt .playerPlaylistWrapper {
  color: #484e53;
  background: #fff;
  border-top: 1px solid #dee2e5;
}

.lt .playerPlaylistItem {
  border-bottom: 1px solid #f2f3f5;
}

.lt .playerPlaylistItem * {
  color: #484e53;
}

.lt .playerPlaylistItem:hover {
  background-color: #fafafa;
}

.lt .controlsPlayPause {
  border: 1px solid #c2c7cc;
}

.lt .brn_scroller__bar {
  background-color: #b1bcc2;
}

.lt .controlsTrackName a,
.lt .controlsArtistName a,
.lt .controlsPlayPause,
.lt .controlsRew,
.lt .controlsFF,
.lt .controlsShare,
.lt .playerPlaylistItem * {
  opacity: 0.75;
  filter: alpha(opacity=75);
}

.lt .controlsTrackName a:hover,
.lt .controlsArtistName a:hover,
.lt .controlsPlayPause:hover,
.lt .controlsRew:hover,
.lt .controlsFF:hover,
.lt .controlsShare:hover,
.lt .playerPlaylistItem:hover *,
.lt .playerPlaylistItem.isPlaying * {
  opacity: 1;
  filter: alpha(opacity=100);
}

.custom_tip_left {
  float: right;
  width: 0;
  height: 26px;
  margin-top: 5px;
  position: relative;
  opacity: 0;
  filter: alpha(opacity=0);
  transition: opacity 0.2s 0.2s ease-out;
}

.custom_tip_left .tip_cont {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 11px;
  color: #fff;
  padding: 5px 10px;
  background: #191919;
  border-radius: 3px;
}

.custom_tip_left .tip_arr {
  position: absolute;
  height: 0;
  width: 0;
  top: 50%;
  right: -12px;
  margin-top: -6px;
  border: transparent 6px solid;
  border-left-color: #191919;
}

.controlsDownload:hover + .custom_tip_left {
  opacity: 1;
  filter: alpha(opacity=100);
}

.lang-ja .tip_cont,
.lang-ko .tip_cont,
.lang-zh .tip_cont {
  white-space: nowrap;
}

.site4sync .jsDelayCounterBlock,
.slideshowWrapper .jsDelayCounterBlock {
  display: none !important;
}

.jsDelayCounterBlock .errorOverlayText a {
  color: #31a0ff;
}

.jsDelayCounterBlock .errorOverlayText a:hover {
  color: #31a0ff;
  text-decoration: underline;
}

.loadingLine {
  position: absolute;
  left: 0;
  top: 0;
  height: 4px;
  z-index: 2;
  width: 0;
  background: #31a0ff;

  animation-iteration-count: 1;
  animation-timing-function: ease;
  animation-name: progressBarPlayerLoad;
}

@keyframes progressBarPlayerLoad {
  0% {width: 0;}
  100% {width: 100%}
}