:root{ --rojo-chilango:#ed0000; }
.ChilangoPlayer { position: fixed; height: 1px; bottom: 190px; z-index: 999; }
.RC-MainPlayer { padding: 0 10px; display: inline-block;}
@media (min-width:680px) {
    .ChilangoPlayer { position: sticky; height: 1px; top:102px; z-index: 999; }
}

.RC-MainPlayer .hidden{display:none!important;}
.RC-Icon{ cursor: pointer;}
.RC-Icon img{width:46px;}
.RC-Player { position: relative; padding: 10px; border: 2px solid var(--rojo-chilango); border-radius: 20px; background-color: white; height: 140px; width: 320px; box-sizing: border-box; }
.RC-Close{color:var(--rojo-chilango);position: absolute;top:0px; right:10px;}
.RC-Close svg{width:20px; cursor: pointer;}
.RC-PlayerMainContent { display: grid; grid-template-columns: 100px 1fr; gap: 10px; }
.volume, .mute{cursor: pointer;}
.RC-Image { width:100px; height: 100px; overflow: hidden; position: relative; border-radius: 10px;}
.RC-Image img { width: 100%; height: 100%; object-fit: cover; }
.playerMeta a {width: 100%; display: block; text-align: center;}
.RadioLogo{ height: 65px; margin:auto; }
.playerControl { display: grid; grid-template-columns: 30px 1fr; }
.playerControl input { accent-color: var(--rojo-chilango ); width: 100%; }
.play, .stop { z-index: 9; width: 50%; height: 50%; background: #ffffff; border-radius: 50%; opacity: 0.8; cursor: pointer; box-shadow: 0 0 5px 7px  rgba(255,255,255,0.5); transition: all 0.3s; position: absolute; top: 25%; left: 25%; }
.play svg, .stop svg{width:100%; height: 100%;} .stop{opacity: 0;}
.RC-Image:hover .play, .RC-Image:hover .stop { opacity: 1;}
.playerMarquee { position: relative; width: 100%; height: 25px; overflow: hidden; }
.playerMarqueeContent { font-family: sans-serif; font-size: 15px; color: #000000; position: absolute; width: max-content; height: 100%; margin: 0; line-height: 2; text-align: center; -moz-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%); -moz-animation: marqueePlayer 10s linear infinite; -webkit-animation: marqueePlayer 10s linear infinite; animation: marqueePlayer 10s linear infinite; }
.playerMarqueeHover { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgb(255,255,255); background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.4962359943977591) 19%, rgba(255,255,255,0) 26%, rgba(255,255,255,0) 74%, rgba(255,255,255,0.5) 81%, rgba(255,255,255,1) 100%); }
/* Move it (define the animation) */
@-moz-keyframes marqueePlayer {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes marqueePlayer {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes marqueePlayer {
 0%   {
 -moz-transform: translateX(100%); /* Firefox bug fix */
 -webkit-transform: translateX(100%); /* Firefox bug fix */
 transform: translateX(100%);
 }
 100% {
 -moz-transform: translateX(-100%); /* Firefox bug fix */
 -webkit-transform: translateX(-100%); /* Firefox bug fix */
 transform: translateX(-100%);
 }
}