/*-- Player and Playlists --*/
#television .video-container {display: block;}
#player .video-container {display: block;}
.video-container{max-width: 100%;display: grid;grid-template-columns: repeat(4, 1fr);grid-template-rows: repeat(1, 1fr);grid-auto-flow: dense;background:#31333c}
.playlist-wrap{width:100%;height:auto;overflow-y:auto;background-color:#212228;grid-column: span 1;}
#live{grid-column: span 3;grid-row: span 2;}
#television .playlist-wrap{max-height:10rem}
#playlist-one .playlist-wrap{max-height:30rem}
#playlist-two .playlist-wrap{max-height:30rem}
.playlist-wrap::-webkit-scrollbar{width:10px}
.playlist-wrap::-webkit-scrollbar-track{background:rgba(255,255,255,0.17);border-radius:var(--radius-10)}
.playlist-wrap::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:var(--radius-10)}
.player-poster{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;cursor:pointer}
.player-poster::after{content:'\f04b';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--fontAwesomeFree);font-size:3.4rem;font-weight:var(--w900);color:var(--whiteColor);opacity:.8}
.player-poster:hover::after{color:var(--mainColor);opacity:1}
.player-poster img.poster{display:block!important;width:100%;height:100%!important;object-fit:contain;image-rendering:-webkit-optimize-contrast;filter:brightness(0.3) saturate(1.3)}
.channel-list,.playlist-one,.playlist-two{display:grid;gap:10px;padding:10px;counter-reset:numChannel 0 numEpisode 0 hTwoEpisode 0 hThreeEpisode 0}
.channel-list{grid-template-columns:repeat(var(--grid-4), var(--fraction))}
.playlist-one{grid-template-columns:repeat(auto-fit, minmax(min(100%, 65px), 1fr))}
.playlist-two{grid-template-columns:repeat(var(--grid-1), var(--fraction))}
.channel-list .playlist{display:flex;align-items:center;overflow:hidden;background-color:rgba(255,255,255,0.17);cursor:pointer;border-radius:var(--radius-5);transition:all .35s cubic-bezier(.17,.67,.83,.67)}
.playlist-one .playlist{display:flex;justify-content:center;align-items:center;padding:10px;overflow:hidden;background:#31333c;color:var(--whiteColor);font-size:1rem;font-weight:var(--w500);cursor:pointer;box-shadow:var(--mainShadow);border-radius:var(--radius-3);transition:all .35s cubic-bezier(.17,.67,.83,.67)}
.playlist-one .playlist::before{content:counter(numEpisode, decimal-leading-zero);counter-increment:numEpisode}
.playlist-two .playlist{display:flex;align-items:center;overflow:hidden;background-color:#31333c;cursor:pointer;border-radius:var(--radius-5);transition:all .35s cubic-bezier(.17,.67,.83,.67)}
.channel-list .playlist.active,.channel-list .playlist:hover{background-color:rgba(255,255,255,0.25)}
.playlist-one .playlist.active,.playlist-one .playlist:hover{background:var(--mainColor);color:var(--whiteColor);box-shadow: 0px 15px 20px rgb(90 96 147 / 40%);transform: translateY(-5px);}
.playlist-two .playlist.active,.playlist-two .playlist:hover{background-color:rgba(255,255,255,0.17)}
.channel-info{display:flex;gap:12px;align-items:center;flex:1;padding:0 12px 0 0;overflow:hidden}
.playlist-info{display:flex;gap:12px;align-items:center;flex:1;padding:10px;overflow:hidden}
.channel-info::after,.playlist-info::after{content:'\f142';font-family:var(--fontAwesomeFree);font-weight:var(--w900);color:var(--mainColor);margin-left:auto}
.channel-list .playlist.active .channel-info::after,.playlist-two .playlist.active .playlist-info::after{animation:flashColor 1s linear infinite}
@keyframes flashColor{0%,35%,60%,100%{opacity:0}25%{opacity:1;color:#7fff00}50%{opacity:1;color:#0091ea}75%{opacity:1;color:#ff1493}}
.channel-info .channel-logo{position:relative;width:100px;height:100%;overflow:hidden;background:rgba(0,0,0,0.6);border-radius:var(--radius-5) 0 0 var(--radius-5)}
.channel-info .channel-logo::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30px;height:30px;box-sizing:border-box;border:1.5px solid rgba(255,255,255,0.36);border-top-color:var(--mainColor);border-radius:var(--radius-100);animation:waitingLoading 0.6s linear infinite}
.playlist-info .playlist-poster{width:55px;height:55px;overflow:hidden;background:rgba(0,0,0,0.6);border-radius:var(--radius-100)}
.channel-info .channel-logo img.logo{display:block!important;width:100%;height:100%;z-index:1;aspect-ratio:var(--mediumLandscapeRatio);object-fit:cover;filter:saturate(1.3);border-radius:var(--radius-5) 0 0 var(--radius-5)}
.playlist-info .playlist-poster img.poster{display:block!important;width:100%;height:100%;aspect-ratio:var(--squareRatio);object-fit:cover;filter:saturate(1.3);border-radius:var(--radius-100)}
.playlist-two .playlist.active img.poster{animation:spinPoster 10s infinite linear}
@keyframes spinPoster{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.playlist-info .title-info{flex:1;overflow:hidden}
.channel-info h2.channel-name,.playlist-info h2.playlist-title,.playlist-info h3.episode-counter{color:var(--whiteColor);font-family:var(--bodyFont);font-size:1rem;font-weight:var(--w500);margin:0;flex:1;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:all .35s cubic-bezier(.17,.67,.83,.67)}
.playlist-info h3.episode-counter{font-style:italic;color:var(--metaColor);opacity:.6}
.channel-info h2.channel-name::before{content:counter(numChannel, decimal-leading-zero) ".";counter-increment:numChannel;color:var(--mainColor);margin:0 2px 0 0}
.playlist-info h2.playlist-title::before{content:counter(hTwoEpisode, decimal-leading-zero) ".";counter-increment:hTwoEpisode;color:var(--mainColor);margin:0 2px 0 0}
.playlist-info h3.episode-counter::before{content:"Episode: " counter(hThreeEpisode, decimal-leading-zero) " | ";counter-increment:hThreeEpisode}
.playlist-control{display:flex;gap:10px;justify-content:center;align-items:center;padding:10px;margin:5px 0 0;background:#24252c;grid-column: span 1;}
#scroll-up,#previous,#counter,#next,#scroll-down{display:flex;align-items:center;justify-content:center;height:40px;line-height:40px;padding:0 13px;background-color:#31333c;color:var(--whiteColor);font-size:1rem;font-weight:var(--w500);cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,0.17);border-radius:var(--radius-5)}
#counter{cursor:not-allowed;user-select:none;-webkit-user-select:none}
#previous .prev-text,#scroll-up .up-text{margin:0 0 0 4px}
#next .next-text,#scroll-down .down-text{margin:0 4px 0 0}
#scroll-up:hover,#previous:hover,#next:hover,#scroll-down:hover{opacity:.9}
/*-- Loadings --*/
.loading-one{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;z-index:10;border-radius:var(--radius-100)}
.loading-one .circle{content:'';position:absolute;width:100%;height:100%;border:calc(60px / 10) solid transparent;border-radius:var(--radius-100)}
.loading-one .circle.circle-1{border-top-color:var(--mainColor);animation:circleSpinner 1s infinite}
.loading-one .circle.circle-2{border-bottom-color:var(--mainColor);animation:circleSpinner 1s infinite alternate}
@keyframes circleSpinner{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.loading-two{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;z-index:10;animation-delay:1s}
.loading-two .dot{position:relative;width:1.2em;height:1.2em;margin:0.8em;border-radius:var(--radius-100)}
.loading-two .dot::before{content:'';position:absolute;width:100%;height:100%;background:inherit;border-radius:inherit;animation:loadTwo 2s ease-out infinite}
.loading-two .dot:nth-child(1){background:var(--mainColor)}
.loading-two .dot:nth-child(1)::before{animation-delay:0.2s}
.loading-two .dot:nth-child(2){background:var(--mainColor)}
.loading-two .dot:nth-child(2)::before{animation-delay:0.4s}
.loading-two .dot:nth-child(3){background:var(--mainColor)}
.loading-two .dot:nth-child(3)::before{animation-delay:0.6s}
.loading-two .dot:nth-child(4){background:var(--mainColor)}
.loading-two .dot:nth-child(4)::before{animation-delay:0.8s}
.loading-two .dot:nth-child(5){background:var(--mainColor)}
.loading-two .dot:nth-child(5)::before{animation-delay:1s}
@keyframes loadTwo{50%,75%{transform:scale(2.5)}80%,100%{opacity:0}}
.loading-three{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:20px;z-index:10}
.loading-three .dot-1{position:absolute;left:1px;top:1px;width:18px;height:18px;background:var(--mainColor);border-radius:var(--radius-100);animation:spinOne 2.5s 0s infinite both}
.loading-three .dot-2{position:absolute;width:20px;height:20px;background:var(--mainColor);border-radius:var(--radius-100);animation:spinTwo 2.5s 0s infinite both}
@keyframes spinOne{0%,100%{box-shadow:0 0 0 var(--mainColor),0 0 0 var(--mainColor),0 0 0 var(--mainColor),0 0 0 var(--mainColor),0 0 0 var(--mainColor),0 0 0 var(--mainColor),0 0 0 var(--mainColor),0 0 0 var(--mainColor)}50%{transform:rotate(180deg)}25%,75%{box-shadow:28px 0 0 var(--mainColor),-28px 0 0 var(--mainColor),0 28px 0 var(--mainColor),0 -28px 0 var(--mainColor),20px -20px 0 var(--mainColor),20px 20px 0 var(--mainColor),-20px -20px 0 var(--mainColor),-20px 20px 0 var(--mainColor)}100%{transform:rotate(360deg);box-shadow:0 0 0 var(--mainColor),0 0 0 var(--mainColor),0 0 0 var(--mainColor),0 0 0 var(--mainColor),0 0 0 var(--mainColor),0 0 0 white,0 0 0 var(--mainColor),0 0 0 var(--mainColor)}}
@keyframes spinTwo{0%,100%{box-shadow:0 0 0 var(--mainColor),0 0 0 var(--mainColor),0 0 0 var(--mainColor),0 0 0 var(--mainColor),0 0 0 var(--mainColor),0 0 0 var(--mainColor),0 0 0 var(--mainColor),0 0 0 var(--mainColor)}50%{transform:rotate(-180deg)}25%,75%{box-shadow:52px 0 0 var(--mainColor),-52px 0 0 var(--mainColor),0 52px 0 var(--mainColor),0 -52px 0 var(--mainColor),38px -38px 0 var(--mainColor),38px 38px 0 var(--mainColor),-38px -38px 0 var(--mainColor),-38px 38px 0 var(--mainColor);background:transparent}100%{transform:rotate(-360deg);box-shadow:0 0 0 var(--mainColor),0 0 0 var(--mainColor),0 0 0 var(--mainColor),0 0 0 var(--mainColor),0 0 0 var(--mainColor),0 0 0 var(--mainColor),0 0 0 var(--mainColor),0 0 0 var(--mainColor)}}
.loading-four{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10}
.loading-four span{display:inline-block;width:30px;height:30px;vertical-align:middle;margin:3px 2px;border-radius:var(--radius-100);animation:loadFour 0.8s linear infinite alternate}
.loading-four span:nth-child(1){animation-delay:-1s;background:var(--mainColor)}
.loading-four span:nth-child(2){animation-delay:-0.8s;background:var(--mainColor)}
.loading-four span:nth-child(3){animation-delay:-0.26666s;background:var(--mainColor)}
.loading-four span:nth-child(4){animation-delay:-0.8s;background:var(--mainColor)}
.loading-four span:nth-child(5){animation-delay:-1s;background:var(--mainColor)}
@keyframes loadFour{from{transform:scale(0,0)}to{transform:scale(1,1)}}
.loading-five{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100px;height:100px;display:flex;justify-content:space-around;align-items:center;z-index:10}
.loading-five .line{width:4px;height:20px;background-color:var(--mainColor);border-radius:var(--radius-3);animation:loadFive 1s ease infinite}
.loading-five .line:nth-child(1),.loading-five .line:nth-child(10){animation-delay:0.8s}
.loading-five .line:nth-child(2),.loading-five .line:nth-child(9){animation-delay:0.6s}
.loading-five .line:nth-child(3),.loading-five .line:nth-child(8){animation-delay:0.4s}
.loading-five .line:nth-child(4),.loading-five .line:nth-child(7){animation-delay:0.2s}
.loading-five .line:nth-child(6),.loading-five .line:nth-child(5){animation-delay:0s}
@keyframes loadFive{0%,100%{transform:scale(0)}50%{transform:scale(1.5)}}
.loading-six{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:70px;height:70px;z-index:10}
.loading-six .pulse{position:absolute;width:100%;height:100%;background-color:var(--mainColor);border-radius:var(--radius-100);animation:loadSix 1s 0s linear infinite both}
.loading-six .pulse:nth-child(2){animation-delay:0.33333s}
.loading-six .pulse:nth-child(3){animation-delay:0.66666s}
@keyframes loadSix{0%{opacity:0;transform:scale(0)}5%{opacity:1}100%{opacity:0}}
.loading-seven{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10}
.loading-seven .round{position:absolute;width:60px;height:60px;border:3px solid var(--mainColor);border-right-color:transparent;border-left-color:transparent;border-radius:var(--radius-100);animation:loadSevenRotate 1s cubic-bezier(.09,.57,.49,.9) infinite}
.loading-seven .dot{position:absolute;width:23px;height:23px;background-color:var(--mainColor);border-radius:var(--radius-100);animation:loadSevenScale 1s cubic-bezier(.09,.57,.49,.9) infinite}
@keyframes loadSevenRotate{0%{transform:translate(-50%,-50%) rotate(0deg)}50%{transform:translate(-50%,-50%) rotate(180deg)}100%{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes loadSevenScale{0%,100%{opacity:1;transform:translate(-50%,-50%) scale(1)}30%{opacity:.3;transform:translate(-50%,-50%) scale(.15)}}