/*
 * The En Vivo card's controls (radio run 7, ruling R50): player04's
 * play/pause button and volume, as player04 shows them at its bottom right,
 * built into the card on the home page, with no frame. Colors,
 * icons and sizes are player04's (styles/player04.css): the #E8E8E8 bar, the
 * 50px dark round play button with a white 20px icon, the grey 15px volume
 * icon, and the 110px volume line with its small round handle. The volume
 * button grows to 48px and the slider to 48px high for touch (NP-DOC-02).
 * Every selector starts with an ssc-live- class, so nothing else on the page
 * is styled. Loaded only by display.index.php, in SAM's version (and
 * display.home.php until radio run 10 deleted home.php, R67); the script is
 * js/ssc-live.js.
 */
.ssc-live-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding: 10px;
  background: #E8E8E8;
}
.ssc-live-volume {
  display: flex;
  align-items: center;
}
.ssc-live-play,
.ssc-live-mute {
  position: relative;
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
}
.ssc-live-play {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background: #333333;
  color: #fff;
}
.ssc-live-mute {
  width: 48px;
  height: 48px;
  background: transparent;
  color: #6e6e6e;
}
.ssc-live-play svg,
.ssc-live-mute svg {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 15px;
  fill: currentColor;
  transform: translate(-50%, -50%);
}
.ssc-live-play svg {
  height: 20px;
}
.ssc-live-icon-pause,
.ssc-live-icon-mute,
.ssc-live-playing .ssc-live-icon-play,
.ssc-live-muted .ssc-live-icon-volume {
  display: none;
}
.ssc-live-playing .ssc-live-icon-pause,
.ssc-live-muted .ssc-live-icon-mute {
  display: block;
}
.ssc-live-novolume .ssc-live-slider {
  display: none;
}
.ssc-live-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 110px;
  height: 48px;
  margin: 0 10px;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.ssc-live-slider::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(to right, #333333 var(--ssc-live-level, 70%), #cccccc var(--ssc-live-level, 70%));
}
.ssc-live-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  margin-top: -4px;
  border: 0;
  border-radius: 100%;
  background: #333333;
}
.ssc-live-slider::-moz-range-track {
  height: 2px;
  background: #cccccc;
}
.ssc-live-slider::-moz-range-progress {
  height: 2px;
  background: #333333;
}
.ssc-live-slider::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 100%;
  background: #333333;
}
.ssc-live-play:focus:not(:focus-visible),
.ssc-live-mute:focus:not(:focus-visible),
.ssc-live-slider:focus:not(:focus-visible) {
  outline: none;
}
.ssc-live-play:focus-visible,
.ssc-live-mute:focus-visible,
.ssc-live-slider:focus-visible {
  outline: 3px solid #005B96;
  outline-offset: 2px;
}