/* Page background */
body {
  background-color: #3D87CF;
}

/* Title bar with WINAMP text */
#webamp #title-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 275px;
  height: 14px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-image: url(data:image/png;base64,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);
}

/* Winamp player container */
#webamp {
  position: relative;
  display: inline-block;
}

/* Main window background */
#webamp #main-window {
  width: 275px;
  height: 116px;
  background-repeat: no-repeat;
  background-position: 0 0;
  position: relative;
}

/* Actions container positioning */
#webamp .actions {
  position: absolute;
  bottom: 9px;
  left: 16px;
  display: flex;
  gap: 0;
}

/* Individual button sizes */
#webamp .actions button {
  width: 23px !important;
  height: 18px !important;
  min-width: 23px !important;
  max-width: 23px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  border: none;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 23px 18px !important;
  cursor: pointer;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-block;
  font-size: 0;
  line-height: 18px !important;
  text-indent: -9999px;
  overflow: hidden;
  vertical-align: top;
  box-sizing: border-box !important;
}

/* Eject button */
#webamp #eject {
  position: absolute;
  bottom: 9px;
  left: 136px;
  width: 22px !important;
  height: 16px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  min-height: 16px !important;
  max-height: 16px !important;
  border: none;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 22px 16px !important;
  cursor: pointer;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0;
  line-height: 16px !important;
  text-indent: -9999px;
  overflow: hidden;
  box-sizing: border-box !important;
}

/* Track title display */
#webamp #title {
  position: absolute;
  top: 26px;
  left: 111px;
  width: 153px;
  height: 7px;
  overflow: hidden;
  line-height: 7px;
}

/* Clutter bar */
#webamp #clutter-bar {
  position: absolute;
  top: 22px;
  left: 10px;
  width: 8px;
  height: 43px;
}

/* Play/Pause/Stop Indicator */
#webamp #play-pause {
  position: absolute;
  top: 28px;
  left: 26px;
  height: 9px;
  width: 9px;
  background-repeat: no-repeat;
}

/* Time display */
#webamp #time {
  position: absolute;
  top: 26px;
  left: 39px;
  width: 63px;
  height: 13px;
  line-height: 13px;
}

/* Character sprites - each character is 5x6 pixels */
#webamp .character {
  display: inline-block;
  width: 5px;
  height: 6px;
  background-repeat: no-repeat;
  background-position: 0 0;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
  overflow: hidden;
}

/* Digit sprites - each digit is 9x13 pixels (for time display) */
#webamp .digit {
  display: inline-block;
  width: 9px;
  height: 13px;
  background-repeat: no-repeat;
  background-position: 0 0;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
  overflow: hidden;
}

/* Individual digit positioning for time display (MM:SS format) */
#webamp #time #minute-first-digit {
  position: absolute;
  pointer-events: none;
  left: 9px;
  height: 13px;
  width: 9px;
}

#webamp #time #minute-second-digit {
  position: absolute;
  pointer-events: none;
  left: 21px;
  height: 13px;
  width: 9px;
}

#webamp #time #second-first-digit {
  position: absolute;
  pointer-events: none;
  left: 39px;
  height: 13px;
  width: 9px;
}

#webamp #time #second-second-digit {
  position: absolute;
  pointer-events: none;
  left: 51px;
  height: 13px;
  width: 9px;
}

/* Position slider */
#webamp #position {
  position: absolute;
  top: 72px;
  left: 16px;
  width: 248px;
  height: 10px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent !important;
  background-image: none !important;
  cursor: pointer;
  border: none;
  outline: none;
  box-shadow: none;
  margin: 0;
  padding: 0;
}

#webamp #position::-webkit-slider-runnable-track {
  width: 100%;
  height: 10px;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  border-radius: 0;
}

#webamp #position::-moz-range-track {
  width: 100%;
  height: 10px;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  border-radius: 0;
}

#webamp #position::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 29px;
  height: 10px;
  margin-top: 8px;
  cursor: pointer;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAKCAYAAABIQFUsAAAAAXNSR0IArs4c6QAAAK1JREFUOE9jTE0r/l+Wqs1AL7Bp1RwGxtTU4v9ladoMK+ZNoqm9RT1HGWY0uDLU9J5AtdTJ049B38KT6pYzcusx7Fqcw3Dv7k1MSwsbpzOAFFAb/P96iWH3ulm4LW0sjKa2nQz1/UvxWwpyEbWBa1AabktBkQ0KCmqDFTOaGYTFxDGDV0ornOHn22MMB7cto7adYPOOHT7IICElgZqQQPmHHgCeZZbM7aeHfXA7ANS/dLL+0aMXAAAAAElFTkSuQmCC);
  border: none;
}

#webamp #position::-moz-range-thumb {
  width: 29px;
  height: 10px;
  margin-top: 8px;
  border: none;
  cursor: pointer;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAKCAYAAABIQFUsAAAAAXNSR0IArs4c6QAAAK1JREFUOE9jTE0r/l+Wqs1AL7Bp1RwGxtTU4v9ladoMK+ZNoqm9RT1HGWY0uDLU9J5AtdTJ049B38KT6pYzcusx7Fqcw3Dv7k1MSwsbpzOAFFAb/P96iWH3ulm4LW0sjKa2nQz1/UvxWwpyEbWBa1AabktBkQ0KCmqDFTOaGYTFxDGDV0ornOHn22MMB7cto7adYPOOHT7IICElgZqQQPmHHgCeZZbM7aeHfXA7ANS/dLL+0aMXAAAAAElFTkSuQmCC);
}

/* Bitrate display (kbps) */
#webamp #kbps {
  position: absolute;
  top: 42px;
  left: 111px;
  width: 30px;
  height: 7px;
  overflow: hidden;
  line-height: 7px;
}

/* Sample rate display (khz) */
#webamp #khz {
  position: absolute;
  top: 42px;
  left: 156px;
  width: 30px;
  height: 7px;
  overflow: hidden;
  line-height: 7px;
}

/* Shuffle button */
#webamp #shuffle {
  position: absolute;
  bottom: 11px;
  left: 164px;
  width: 47px !important;
  height: 15px !important;
  min-width: 47px !important;
  max-width: 47px !important;
  min-height: 15px !important;
  max-height: 15px !important;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 47px 15px !important;
  border: none;
  cursor: pointer;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0;
  line-height: 15px !important;
  text-indent: -9999px;
  overflow: hidden;
  box-sizing: border-box !important;
}

/* Repeat button */
#webamp #repeat {
  position: absolute;
  bottom: 11px;
  left: 210px;
  width: 28px !important;
  height: 15px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  min-height: 15px !important;
  max-height: 15px !important;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 28px 15px !important;
  border: none;
  cursor: pointer;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0;
  line-height: 15px !important;
  text-indent: -9999px;
  overflow: hidden;
  box-sizing: border-box !important;
}

/* EQ button */
#webamp #eq-button {
  position: absolute;
  bottom: 46px;
  left: 219px;
  width: 23px !important;
  height: 12px !important;
  min-width: 23px !important;
  max-width: 23px !important;
  min-height: 12px !important;
  max-height: 12px !important;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAMCAYAAACJOyb4AAAAAXNSR0IArs4c6QAAAQVJREFUOE9jXLv12H8GKoPr9+8zrJi+kIERZLiTlyXVjN+37TjD0nVrGW6euIgw/Nz56xRb8OH5B4Zz588xnL92neHRxZuYhvf2TEWxpLgkG84vyiwHs/umd4JpdD6y4Q8v4TD8GAPEgqMtnxhefHgCNwhmKMxgZEtAbBTDcbkcl+EwL4AMArmaLMO7W9rhQUHI5ciWEHQ5vljFFubIvkA2/MGFG4gIBSUhagBYaoEbDjIUlPC/f3hPDfPBSfHB+esMjC1Tlv4H2fbj+w+qGAwzBGy4oaHv/////jMwMEJKgf//UUuD///+MTAwMoIkoPr+M4BYCHVQ8f8QcRBgZPjP8A9oJgBwI/kppYFRaAAAAABJRU5ErkJggg==);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 23px 12px !important;
  border: none;
  cursor: pointer;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0;
  line-height: 12px !important;
  text-indent: -9999px;
  overflow: hidden;
  box-sizing: border-box !important;
}

/* Playlist button */
#webamp #playlist-button {
  position: absolute;
  bottom: 46px;
  left: 242px;
  width: 23px !important;
  height: 12px !important;
  min-width: 23px !important;
  max-width: 23px !important;
  min-height: 12px !important;
  max-height: 12px !important;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 23px 12px !important;
  border: none;
  cursor: pointer;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0;
  line-height: 12px !important;
  text-indent: -9999px;
  overflow: hidden;
  box-sizing: border-box !important;
}

/* Media info container */
#webamp .media-info {
  position: absolute;
  bottom: 58px;
  left: 207px;
}

/* Mono indicator */
#webamp .media-info #mono {
  display: inline-block;
  width: 27px;
  height: 12px;
  background-repeat: no-repeat;
  background-position: 0 0;
  margin-left: 5px;
}

/* Stereo indicator */
#webamp .media-info #stereo {
  display: inline-block;
  width: 29px;
  height: 12px;
  background-repeat: no-repeat;
  background-position: 0 0;
  margin-left: -3px;
}

/* Volume slider */
#webamp #volume {
  position: absolute;
  top: 57px;
  left: 107px;
  width: 68px;
  height: 13px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  transition: none !important;
  background-position: 0 0;
  border: none;
  outline: none;
  box-shadow: none;
  margin: 0;
  padding: 0;
}

#webamp #volume::-webkit-slider-runnable-track {
  width: 100%;
  height: 13px;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  border-radius: 0;
}

#webamp #volume::-moz-range-track {
  width: 100%;
  height: 13px;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  border-radius: 0;
}

#webamp #volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 11px;
  cursor: pointer;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAALCAYAAABPhbxiAAAAAXNSR0IArs4c6QAAAHlJREFUKFNj1Nd3+X/nwSUGUoCKgh4DIze/2P/zN66Qoo/BUEOHgZGBgeH/reevGC5fvUVQ87kTFxjOX7vOsG3ZVEyNccFBDIvWrmNAp0GmDheN+EII5seDW1cjAmfh3FUEQxWkABSqYI2geLT3DiVKE0wRWCO5KQcAY/WOBeS6JW8AAAAASUVORK5CYII=);
  border: none;
  margin-top: 9px;
}

#webamp #volume::-moz-range-thumb {
  width: 14px;
  height: 11px;
  border: none;
  cursor: pointer;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAALCAYAAABPhbxiAAAAAXNSR0IArs4c6QAAAHlJREFUKFNj1Nd3+X/nwSUGUoCKgh4DIze/2P/zN66Qoo/BUEOHgZGBgeH/reevGC5fvUVQ87kTFxjOX7vOsG3ZVEyNccFBDIvWrmNAp0GmDheN+EII5seDW1cjAmfh3FUEQxWkABSqYI2geLT3DiVKE0wRWCO5KQcAY/WOBeS6JW8AAAAASUVORK5CYII=);
  margin-top: 9px;
}