.play-button {
  background-image: url('/static/admin/icons/play.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
  width: 20px;
  height: 20px;
  border: none;
  background-color: transparent;
  cursor: pointer;
  margin-left: 0;           /* default */
  transition: margin-left 0.3s ease;
}

.play-button.playing {
  margin-left: 8px; /* Flyttar knappen lite åt höger när den spelar */
  transition: margin-left 0.3s ease;
}



.play-button-small {
  background-image: url('/static/admin/icons/play.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  width: 12px;
  height: 12px;
  border: none;
  background-color: transparent;
  cursor: pointer;
  margin-left: 0;           /* default */
  transition: margin-left 0.3s ease;
}

.play-button-small.playing {
  margin-left: 4px; /* Flyttar knappen lite åt höger när den spelar */
  transition: margin-left 0.3s ease;
}




.playlist-button,
.cue-button,
.info-button {
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.playlist-button {
  background-image: url('/static/admin/icons/playlist.svg');
}

.cue-button {
  background-image: url('/static/admin/icons/plus-circle.svg');
}

.info-button {
  background-image: url('/static/admin/icons/info.svg');
}

.playlist-button:active,
.cue-button:active, 
.info-button:active {
    transform: scale(0.95);
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2);
}

.tooltip-css {
    position: absolute;
    background:  #A5A9B4;
	display: block;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 9999;
    transform: translateX(-50%);
}

.tooltip-css::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color:  #A5A9B4 transparent transparent transparent;
}


#current-time {
    display: inline-block;
    margin-left: 500px; /* avstånd från volymknappen */
    vertical-align: middle;
	color: white;
    font-size: 0.9em;
    white-space: nowrap;
}

#extra-space {
    display: inline-block;
    vertical-align: middle;
	margin-right: 40px;
	color: white;
    font-size: 0.9em;
    white-space: nowrap;
}

#total-passed, #middle-span, #total-time{
    display: inline-block;
    vertical-align: middle;
	margin-right: -6px;
	color: white;
    font-size: 0.9em;
    white-space: nowrap;
}

#total-time{
    display: inline-block;
    vertical-align: middle;
	margin-right: -16px;
	color: white;
    font-size: 0.9em;
    white-space: nowrap;
}