/* Aregue todo su codigo personalizado aqui */
:root {
  --player-primary: #232428;
}
.esplayer-tops-artist {
  font-size: .875rem;
  font-weight: 500;
}

.program-button {
    padding: 0.4rem;
    font-size: .75rem;
    text-transform: uppercase;
    font-weight: 700;
    color: #212121;
    flex: 1 0 auto;
    border: 0;
    border-radius: 0;
    background-color: #fff;
}

.esplayer-tops-image-container span {
  position: absolute;
  z-index: 5;
  font-weight: 500;
  color: #fff;
  font-size: 1.75rem;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, .25);
}


.player-modal button[data-close] {
position: absolute;
right: 0;
color: #ffffff;
top: -2rem;
}





#app-super .player-modal h2 {
color: #262626;
font-weight: 700;
}


#app-super .station-image {
width: 50px;
height: 50px;
border-radius: .5rem;
border: 1px solid #dc0d0d00;
padding: 0.15rem;
box-shadow: var(--shadow-l);
object-fit: contain;
}

#app-super .station-name {
white-space: nowrap;
font-size: 18px !important;
display: inline-flex;
position: relative;
text-align:center;
}

#app-super .player-range-wrapper {
position: relative;
height: 100%;
width: 2px;
background-color: rgb(36 36 36 / 40%);
}

div#player-volume {
    position: absolute;
}

.dropdown {
height: 140px;
background-color: rgb(255 255 255);
padding: 1.1rem;
border-radius: 10rem;
left: 50%;
box-shadow: var(--shadow-l);
transform: translateX(-50%);
bottom: calc(100% + .5rem);
transition: opacity var(--duration), transform var(--duration);
}

#app-super {
--progress-primary: #fff;
--progress-secondary: #fff;
--player-wrapper: 1140px;
}

#app-super.is-expanded .historyp-item:first-child::after {
background: var(--accent, #000);
opacity: 0.65; /* Opacidad del Progrso Extendido */
}




#app-super.is-expanded:has(.offcanvas-player.is-active) .player-wrapper {
left: 12rem;
}

.player-wrapper {
transition: left var(--duration);
left: 0;
}

#app-super .historyp-item:hover {
background-color: rgb(255 255 255 / 10%);
}

/* Texto --Sonando en vivo-- */
.stream-description {
font-size: .875rem;
max-width: 400px;
}

/* Borde de la caratula */
#app-super.is-expanded .player .player-artwork-style {
border-radius: .375rem;
}

/* Boton cerrar video mas pequeño */
.modal-video [data-close] {
right: -1rem;
top: -1rem;
padding: .5rem;
}
.historyp-time {
color: rgb(255 255 255 / 85%);
font-weight: 500;
}

#app-super .historyp-title {
width: 100%;
text-align: center;
padding: 1.25em;
cursor: pointer;
font-weight: 500;
font-size: 16px;
}

@media (min-width: 992px) {
.app-player .btn {
  --btn-fs: 0.875vw;
  --btn-padding: 0.75vw;
  --i-size: 1vw;
  --btn-gap: 0.5vw;
}
}

.admin-bar #app-super.is-expanded .offcanvas-player,
.admin-bar #app-super.is-expanded .player {
margin-top: 29px;
}

#app-super:not(.is-expanded) .player::before {
content: "";
height: 4px;
pointer-events: none;
background-image: linear-gradient(122deg, #3c9cdc, #37b376 38%, #46C31D 67%, #facf18);

width: var(--song-progress, 0%);
display: block;
position: absolute;
transition: width var(--long-duration);
top: -4px;
left: 0;
z-index: 1;
}
marquee {
  display: block !important;
  width: 100%;
}