/* Aregue todo su codigo personalizado aqui */
.main-news {
  background: #fff;
}

.main-ytlist {
  background: linear-gradient(
      200deg,
      rgba(250, 250, 250, 0.05) 0%,
      rgba(250, 250, 250, 0.05) 53%,
      rgba(64, 64, 64, 0.05) 53%,
      rgba(64, 64, 64, 0.05) 100%
    ),
    linear-gradient(
      315deg,
      #00c3ff 18%,
      #00c3ff,
      rgba(188, 188, 188, 0.05) 100%
    ),
    linear-gradient(
      141deg,
      rgba(4, 4, 4, 0.05) 0%,
      rgba(4, 4, 4, 0.05) 18%,
      rgba(188, 188, 188, 0.18) 18%,
      rgba(188, 188, 188, 0.05) 100%
    ),
    linear-gradient(152deg, #07B5D4, #07B5D4);
}

.main-ytlist .section-heading {
  color: #fff;
}
.main-ytlist .section-heading::before,
.main-ytlist .section-heading::after {
  background-color: #fff;
}

.nexo-tops-artist {
  font-size: 0.875rem;
  font-weight: 500;
}

.nexo-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: rgb(0 0 0 / 25%);
}

.program-super {
  --program-accent: #00c3ff;
  --program-active-color: #fff;
  --program-cols-min: 14rem;
  --program-accent-active: #00c3ff;
}

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

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

#app-super .station-image {
  width: 50px;
  height: 50px;
  border-radius: 0.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;
}

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

.dropdown {
  position: absolute;
  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% + 0.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: 0.875rem;
}

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

/* Boton cerrar video mas pequeño */
.modal-video [data-close] {
  right: -1rem;
  top: -1rem;
  padding: 0.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;
}