@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Permanent+Marker&display=swap");
@import url(https://cdn.jsdelivr.net/npm/remixicon/fonts/remixicon.css); *{padding:0;margin:0;box-sizing:border-box;}
.pro_ads_img{position:relative;max-width:100%;text-align:center;}
.pro_ads_img img{filter:blur(0.9px);width:100%;}
.pro_ads_img::before{content:"This option available in Pro Version only";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:1;font-size:20px;max-width:80%;font-weight:bold;}
.elementor-element .icon{position:relative;}
.elementor-element .icon .bl_icon::after{content:"MP";font-size:11px;position:absolute;right:5px;top:5px;background:#4527A4;color:#fff;padding:2px 5px 3px 5px;border-radius:3px;font-family:monospace;text-align:center;line-height:1;vertical-align:middle;}
.art-video-player{max-width:100% !important;height:600px !important;}:root{--light-clr:#e5e5e5;--primary-clr:#6490f6;--secondary-clr:#c1daff;--active-clr:rgba(149, 153, 186, 0.4);--player-bg:rgba(5, 9, 51, 0.4);--scrollbar-track:rgb(79, 78, 78);--scrollbar-thumb:rgb(116, 116, 116);}
.playlist-wrapper{font-family:"Nunito", sans-serif;display:flex;align-items:center;justify-content:center;height:100vh;}
.playlist-container{position:relative;width:90%;min-height:80vh;background:#00112473;box-shadow:0 0 5px rgba(0, 0, 0, 0.4);border-radius:15px;overflow:hidden;}
.playlist-container::after, .playlist-container::before{content:"";position:absolute;width:250px;aspect-ratio:1/1;border-radius:50%;transition:5s ease-in-out;}
.playlist-container::after{top:-3%;left:-5%;transform:scale(1);background-color:#5768af;}
.playlist-container:hover::after{left:85%;transform:scale(1.2);background-color:#a0acbd;}
.playlist-container::before{bottom:-3%;right:-5%;transform:scale(1);background-color:#ab4c72;}
.playlist-container:hover::before{right:85%;transform:scale(1.2);background-color:#bda5ad;}
.playlist-container .content{position:absolute;inset:0;width:100%;height:100%;display:grid;grid-template-columns:100%;place-items:center;background:rgba(53, 54, 72, 0.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255, 255, 255, 0.5);border-radius:inherit;box-shadow:0 0.5px 0 1px rgba(255, 255, 255, 0.2) inset, 0 1px 0 0 rgba(255, 255, 255, 0.6) inset, 0 4px 16px rgba(0, 0, 0, 0.1);z-index:10;color:var(--light-clr);overflow-y:auto;padding:30px 30px 10px;}
.playlist-container .content::-webkit-scrollbar{width:7px;}
.playlist-container .content::-webkit-scrollbar-track{box-shadow:inset 0 0 0.3rem var(--scrollbar-track);border-radius:40px;margin:18px 0;}
.playlist-container .content::-webkit-scrollbar-thumb{box-shadow:inset 0 0 0.5rem var(--scrollbar-thumb);background-color:var(--primary-clr);outline:none;border-radius:40px;}
.slider-playlist{display:grid;grid-template-columns:45% 55%;align-items:center;}
.playlist-container .swiper{width:300px;height:auto;display:flex;}
.playlist-container .swiper-slide{display:grid;grid-template-rows:4fr 1fr;padding:15px;border-radius:10px;background-color:#d3d2d6;box-shadow:0 0.5px 0 1px rgba(255, 255, 255, 0.2) inset, 0 1px 0 0 rgba(255, 255, 255, 0.6) inset, 0 4px 16px rgba(0, 0, 0, 0.1);user-select:none;}
.playlist-container .swiper-slide img{aspect-ratio:1/1;border-radius:5px;margin-bottom:14px;pointer-events:none;}
.playlist-container .swiper-slide h1{width:max-content;font-family:"Permanent Marker", serif;font-size:18px;letter-spacing:2px;color:#222224;text-transform:uppercase;transform:rotate(-3deg);margin:auto;}
.playlist{width:100%;}
.playlist-item{display:grid;grid-template-columns:15% 65% 15% 5%;align-items:center;width:100%;height:auto;padding:8px 10px;margin-bottom:15px;border-bottom:2px solid var(--primary-clr);color:var(--light-clr);cursor:pointer;user-select:none;}
.playlist-item img{width:70%;aspect-ratio:1/1;border-radius:5px;overflow:hidden;}
.playlist-item .song p:nth-child(1){font-weight:500;margin-bottom:3px;}
.playlist-item .song p:nth-child(2){font-weight:300;opacity:0.5;}
.playlist-item i{font-size:1.2rem;color:var(--light-clr);}
.active-playlist-item{background-color:var(--active-clr);border-radius:5px;}
.playlist-container .player{position:sticky;left:0;bottom:0;width:100%;border:1px solid rgba(255, 255, 255, 0.3);border-radius:10px;background:var(--player-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:2px 2px 10px 2px rgba(0, 0, 0, 0.25);display:flex;flex-direction:column;align-items:center;padding:10px 0 5px;z-index:15;overflow:hidden;}
.controls{display:flex;justify-content:center;align-items:center;column-gap:25px;}
.controls svg{width:24px;height:24px;cursor:pointer;transform:scale(1);will-change:transform;}
.controls #shuffleBtn path{stroke:#fff;}
.controls #nextBtn path,
.controls #prevBtn path{fill:#fff;}
#playPauseBtn{width:45px;aspect-ratio:1/1;margin:5px 0;color:var(--primary-clr);outline:0;background:var(--light-clr);border:2px solid rgba(255, 255, 255, 0.3);border-radius:50%;box-shadow:0 10px 20px rgba(5, 36, 28, 0.3);font-size:1.5rem;transform:scale(1);will-change:transform;}
#playPauseIcon{display:flex;align-items:center;justify-content:center;}
#playPauseIcon::before{content:' ' !important;}
#playPauseIcon.fa-pause svg.pause{display:block;}
#playPauseIcon.fa-pause svg.play{display:none;}
#playPauseIcon.fa-play svg.pause{display:none;}
#shuffleBtn:hover,
#prevBtn:hover,
#nextBtn:hover,
#playPauseBtn:hover{transform:scale(1.05);}
.volume{position:relative;display:flex;align-items:center;}
.volume svg path{stroke:#fff;}
#volume-range{position:absolute;left:30px;top:9px;appearance:none;-webkit-appearance:none;width:120px;height:4px;background:var(--primary-clr);border-radius:4px;cursor:pointer;padding:0;}
#volume-range::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;background:var(--light-clr);width:12px;aspect-ratio:1/1;border-radius:50%;}
#progress-bar{appearance:none;-webkit-appearance:none;width:90%;height:5px;background:linear-gradient(90deg, var(--light-clr), var(--secondary-clr), var(--primary-clr), var(--secondary-clr), var(--light-clr));border-radius:4px;margin:12px 0 16px;cursor:pointer;padding:0;}
#progress-bar::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;background:var(--light-clr);width:15px;aspect-ratio:1/1;border-radius:50%;}
.plyr--html5 .plyr__volume{justify-content:flex-end;}
.plyr--html5 .plyr__progress input{width:100%;}
@media(max-width:1300px){
.playlist-container .swiper{width:270px;}
}
@media(max-width:1100px){
.playlist-container .content{padding:40px 20px 20px;}
.playlist-container .swiper{width:240px;}
.slider-playlist{grid-template-columns:50% 50%;}
}
@media(max-width:900px){
.playlist-container .content{padding:30px 40px 20px;overflow-x:hidden;}
.playlist{margin-bottom:60px;}
.slider-playlist{grid-template-columns:100%;}
.playlist-container.swiper{margin:30px auto 50px;}
.playlist-container .player{width:110%;}
#volume-range{width:50px;}
}
@media(max-width:580px){
.playlist-container .content{overflow-x:hidden;}
.playlist-container.swiper{width:220px;margin:20px auto 35px;}
.playlist-item{margin-bottom:10px;}
.playlist-container .player{width:115%;}
.controls{column-gap:15px;}
.controls i{font-size:1.3rem;}
#playPauseBtn{width:40px;font-size:1.2rem;}
.volume i{font-size:0.9rem;}
#volume-range{left:20px;top:6px;width:40px;}
} .classic-playlist-container{width:min(100%, 900px);overflow:hidden;margin:auto auto;}
.classic-playlist-container .album-art{width:220px;height:220px;border-radius:12px;overflow:hidden;transition:transform 0.4s ease;}
.classic-playlist-container .album-art:hover{transform:scale(1.05);}
.classic-playlist-container .album-art img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s ease;}
.classic-playlist-container .track-info h2{font-size:1.6rem;margin-bottom:8px;}
.classic-playlist-container .track-info p{color:#a0a0c0;font-size:1.2rem;}
.classic-playlist-container .progress-container{width:100%;height:6px;background:#32364394;border-radius:10px;margin:20px 0;cursor:pointer;position:relative;}
.classic-playlist-container .progress{width:0%;height:100%;background:linear-gradient(90deg, #6a5acd, #00d4ff);border-radius:10px;transition:width 0.1s linear;}
.classic-playlist-container .time{display:flex;justify-content:space-between;width:100%;font-size:0.9rem;color:#a0a0c0;}
.classic-playlist-container .controls{display:flex;gap:15px;align-items:center;flex-wrap:wrap;justify-content:flex-start;margin-top:26px;}
.classic-playlist-container .btn{width:48px;height:48px;background:rgba(255, 255, 255, 0.1);border:none;border-radius:4px;color:#32364394;border:1px solid #32364394;font-size:1.2rem;cursor:pointer;transition:all 0.3s ease;display:flex;align-items:center;justify-content:center;}
.classic-playlist-container .btn:hover{background:linear-gradient(90deg, #6a5acd, #00d4ff);transform:translateY(-3px);color:#F7F7F7;}
.classic-playlist-container .btn.play-pause{color:#F7F7F7;background:linear-gradient(90deg, #6a5acd, #00d4ff);}
.classic-playlist-container .btn.play-pause:hover{background:linear-gradient(90deg, #6a5acd, #00d4ff);}
.classic-playlist-container .volume-container{display:flex;align-items:center;gap:10px;width:200px;}
.classic-playlist-container .volume-icon{cursor:pointer;font-size:1.2rem;color:#32364394;transition:color 0.3s ease;}
.classic-playlist-container .volume-icon:hover{color:#00d4ff;}
.classic-playlist-container .volume-slider{-webkit-appearance:none;width:120px;height:6px;background:#32364394;border-radius:10px;outline:none;cursor:pointer;}
.classic-playlist-container .volume-slider::-webkit-slider-runnable-track{height:6px;border-radius:10px;background:#32364394;}
.classic-playlist-container .volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;}
.classic-playlist-container .volume-slider::-webkit-slider-runnable-track{background:linear-gradient(90deg, #6a5acd, #00d4ff) 0% 0% / 100% 100% no-repeat, #333;background-size:var(--volume-percent, 100%) 100%;background-position:left center;}
.classic-playlist-container .volume-slider::-moz-range-progress{background:linear-gradient(90deg, #6a5acd, #00d4ff);border-radius:10px 0 0 10px;height:6px;}
.classic-playlist-container .volume-slider::-moz-range-track{background:#32364394;border-radius:10px;height:6px;}
.classic-playlist-container .volume-slider::-moz-range-thumb{width:12px;height:12px;background:#00d4ff;border-radius:50%;border:none;}
.classic-playlist-container .playlist{width:100%;max-height:376px;overflow-y:auto;}
.classic-playlist-container .playlist-item{display:flex;align-items:center;padding:12px 14px;gap:15px;cursor:pointer;margin:0;transition:all 0.3s ease;border-bottom:1px solid #60647076;}
.classic-playlist-container .playlist-item:first-child{border-top:1px solid #60647076;}
.classic-playlist-container .playlist-item:hover{background:rgba(96, 100, 112, 0.25);}
.classic-playlist-container .playlist-item.active{background:rgba(96, 100, 112, 0.25);}
.classic-playlist-container .playlist-item img{width:50px;height:50px;border-radius:8px;object-fit:cover;}
.classic-playlist-container .playlist-item-info{flex:1;}
.classic-playlist-container .playlist-item-info h4{font-size:1rem;margin-bottom:4px;color:#333;}
.classic-playlist-container .playlist-item-info p{font-size:0.85rem;color:#a0a0c0;}
.classic-playlist-container .playlist-item-right{display:flex;align-items:center;gap:12px;}
.classic-playlist-container .playlist-item-duration{font-size:0.9rem;color:#a0a0c0;min-width:40px;text-align:right;}
.classic-playlist-container .playlist-sound-wave{display:flex;align-items:center;gap:3px;height:20px;}
.classic-playlist-container .playlist-item .playlist-sound-wave span{width:3px;background:#00d4ff;border-radius:2px;animation:soundWave 1.2s infinite ease-in-out;}
.classic-playlist-container .playlist-sound-wave span:nth-child(1){height:6px;animation-delay:0s;}
.classic-playlist-container .playlist-sound-wave span:nth-child(2){height:12px;animation-delay:0.1s;}
.classic-playlist-container .playlist-sound-wave span:nth-child(3){height:16px;animation-delay:0.2s;}
.classic-playlist-container .playlist-sound-wave span:nth-child(4){height:10px;animation-delay:0.3s;}
.classic-playlist-container .playlist-sound-wave span:nth-child(5){height:8px;animation-delay:0.4s;}
@keyframes soundWave {
0%,
100%{transform:scaleY(0.4);opacity:0.6;}
50%{transform:scaleY(1);opacity:1;}
}
.classic-playlist-container .playlist::-webkit-scrollbar{width:6px;}
.classic-playlist-container .playlist::-webkit-scrollbar-thumb{background:#6a5acd;border-radius:10px;}
.classic-playlist-container .player-container{display:flex;justify-content:space-between;gap:30px;padding-bottom:10px;}
.classic-playlist-container .player-container .player-thumb{max-width:220px;width:100%;border-radius:12px;overflow:hidden;}
.classic-playlist-container .player-container .player-thumb img{width:100%;height:100%;}
.classic-playlist-container .player-container .player-meta{width:calc(100% - 250px);}
.classic-playlist-container .player-meta-header{display:flex;justify-content:space-between;align-items:flex-end;}
.classic-playlist-container .player-meta-header .volume-container{max-width:200px;width:100%;justify-content:flex-end;}
.classic-playlist-container .player-meta-header .track-info{width:calc(100% - 220px);}
.classic-playlist-container .progress-tooltip{position:absolute;bottom:18px;left:0;background:rgba(26, 26, 46, 0.9);color:#e0e0e0;padding:6px 10px;border-radius:8px;font-size:0.85rem;pointer-events:none;opacity:0;transition:opacity 0.2s ease;transform:translateX(-50%);white-space:nowrap;box-shadow:0 4px 12px rgba(0, 0, 0, 0.5);}
.classic-playlist-container .progress-tooltip::after{content:'';position:absolute;top:100%;left:50%;margin-left:-5px;border:5px solid transparent;border-top-color:rgba(26, 26, 46, 0.9);}
.classic-playlist-container .progress-container:hover .progress-tooltip{opacity:1;}
@media(max-width:768px){
.classic-playlist-container .player-container .player-thumb{max-width:180px;width:100%;border-radius:12px;overflow:hidden;}
.classic-playlist-container .player-container .player-meta{width:calc(100% - 180px);}
.classic-playlist-container .album-art{width:180px;height:180px;}
.classic-playlist-container .volume-container{width:160px;}
.classic-playlist-container .playlist-sound-wave span{width:2px;}
.classic-playlist-container .progress-container{margin:16px 0;}
.classic-playlist-container .controls{margin-top:18px;}
.classic-playlist-container .playlist-sound-wave span:nth-child(1){height:5px;}
.classic-playlist-container .playlist-sound-wave span:nth-child(2){height:10px;}
.classic-playlist-container .playlist-sound-wave span:nth-child(3){height:14px;}
.classic-playlist-container .playlist-sound-wave span:nth-child(4){height:9px;}
.classic-playlist-container .playlist-sound-wave span:nth-child(5){height:7px;}
}
@media(max-width:676px){
.classic-playlist-container .player-container .player-thumb{max-width:150px;width:100%;}
.classic-playlist-container .player-container .player-meta{width:calc(100% - 150px);}
.classic-playlist-container .album-art{width:150px;height:150px;}
.classic-playlist-container .btn{width:40px;height:40px;}
.classic-playlist-container .btn.play-pause{width:40px;height:40px;}
.classic-playlist-container .controls{gap:8px;}
.classic-playlist-container .player-meta-header .volume-container{max-width:152px;}
.classic-playlist-container .player-meta-header .track-info{width:calc(100% - 172px);}
.classic-playlist-container .player-container{gap:20px;}
}
@media(max-width:540px){
.classic-playlist-container .player-container{flex-direction:column;gap:10px;padding-bottom:30px;}
.classic-playlist-container .player-meta-header .volume-container{max-width:100%;}
.classic-playlist-container .player-container .player-meta{width:100%;}
.classic-playlist-container .album-art{width:100%;}
.classic-playlist-container .player-container .player-thumb{max-width:100%;width:100%;}
.classic-playlist-container .player-meta-header{align-items:flex-start;}
.classic-playlist-container .player-meta-header .volume-container{max-width:152px;}
.classic-playlist-container .player-meta-header .track-info{width:calc(100% - 172px);}
}
@media(max-width:400px){
.classic-playlist-container .player-meta-header .volume-container{width:110px;}
.classic-playlist-container .player-meta-header .volume-container input{width:100%;}
.classic-playlist-container .player-meta-header .track-info{width:calc(100% - 120px);}
}
.container-video-playlist{max-width:1200px;margin:0 auto;display:flex;background:white;border-radius:8px;overflow:hidden;box-shadow:0 4px 20px rgba(0, 0, 0, 0.1);}
@media(max-width:992px){
.container-video-playlist{flex-direction:column;}
} .container-video-playlist .video-player{position:relative;flex:2;background:#000;width:100%;aspect-ratio:16 / 9;min-height:340px;max-height:720px;overflow:hidden;}
.container-video-playlist #main-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#111;}
.container-video-playlist .center-control{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:60px;height:60px;background:rgba(170, 0, 0, 1);backdrop-filter:blur(8px);border-radius:50%;color:white;font-size:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0.92;transition:all 0.3s ease;z-index:25;box-shadow:0 8px 32px rgba(0, 0, 0, 0.5);}
.container-video-playlist .center-control:hover{transform:translate(-50%, -50%) scale(1.08);background:rgba(170, 0, 0, 0.5);}
.container-video-playlist .center-control.hidden{opacity:0;transform:translate(-50%, -50%) scale(0.8);pointer-events:none;}
.container-video-playlist .custom-controls{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.65) 40%, transparent 100%);backdrop-filter:blur(10px);padding:12px 16px 16px;opacity:0;transition:opacity 0.35s ease;z-index:20;}
.container-video-playlist .video-player:hover .custom-controls, .container-video-playlist .video-player.playing .custom-controls, .container-video-playlist .custom-controls:hover{opacity:1;}
.container-video-playlist .controls-wrapper{display:flex;flex-direction:row;justify-content:space-between;gap:10px;}
.container-video-playlist .progress-row{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:500;flex:4;}
.container-video-playlist .time-display{min-width:110px;text-align:center;letter-spacing:0.5px;}
.container-video-playlist .progress-container{position:relative;height:8px;background:rgba(255, 255, 255, 0.25);border-radius:4px;cursor:pointer;flex:1;width:100%;transition:height 0.2s;}
.container-video-playlist .progress-container:hover{height:9px;}
.container-video-playlist .progress-bar{height:100%;width:0;background:linear-gradient(to right, #c00, #a00);border-radius:4px;transition:width 0.08s linear;box-shadow:0 0 12px rgba(170, 0, 0, 0.6);}
.container-video-playlist .progress-tooltip{position:absolute;bottom:100%;left:0;transform:translateX(-50%);background:rgba(0, 0, 0, 0.88);color:white;padding:6px 8px;border-radius:4px;font-size:14px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity 0.15s ease;z-index:30;box-shadow:0 4px 12px rgba(0, 0, 0, 0.5);min-width:40px;text-align:center;}
.container-video-playlist .progress-container:hover .progress-tooltip{opacity:1;}
.container-video-playlist .controls-main{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.container-video-playlist .btn{background:none;border:none;color:white;font-size:18px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:50%;transition:all 0.2s ease;}
.container-video-playlist .btn:hover{background:rgba(255, 255, 255, 0.15);transform:scale(1.12);}
.container-video-playlist .btn:active{transform:scale(0.96);}
.container-video-playlist .play-pause{font-size:24px;}
.container-video-playlist .volume-group{display:flex;align-items:center;gap:8px;}
.container-video-playlist .volume-slider{width:100px;height:6px;background:rgba(255, 255, 255, 0.3);border-radius:3px;cursor:pointer;}
.container-video-playlist .volume-fill{height:100%;width:100%;background:#c00;border-radius:3px;}
.container-video-playlist .overlay{position:absolute;bottom:24px;left:24px;color:#00aaff;font-size:26px;font-weight:bold;text-shadow:2px 2px 8px rgba(0, 0, 0, 0.8);pointer-events:none;max-width:75%;}
.container-video-playlist .more-videos{position:absolute;bottom:8px;left:24px;color:#ddd;font-size:13px;text-transform:uppercase;letter-spacing:0.8px;pointer-events:none;}
.container-video-playlist .playlist{flex:1;background:#f9f9f9;border-left:1px solid #e0e0e0;overflow-y:auto;max-height:calc(6 * 84px);position:relative;}
.container-video-playlist .playlist::before{content:"";position:sticky;top:0;left:0;right:0;height:60px;background:linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:5;pointer-events:none;mask-image:linear-gradient(to bottom, black 40%, transparent 100%);-webkit-mask-image:linear-gradient(to bottom, black 40%, transparent 100%);}
.container-video-playlist .header{background:#c00;color:white;padding:14px 18px;font-weight:bold;font-size:15px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:10;border-bottom:1px solid #a00;}
.container-video-playlist .header span{font-size:13px;font-weight:normal;}
.container-video-playlist ul{list-style:none;padding:0;margin:0;}
.container-video-playlist li{height:69px;box-sizing:border-box;display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid #eee;cursor:pointer;transition:background 0.18s;}
.container-video-playlist li:hover, .container-video-playlist li.active{background:#f0f0f0;}
.container-video-playlist li.active{font-weight:600;}
.container-video-playlist li img{width:80px;height:45px !important;object-fit:cover;border-radius:4px !important;margin-right:14px;flex-shrink:0;background:#222;}
.container-video-playlist .title{flex:1;font-size:14px;line-height:1.35;}
.container-video-playlist .duration{font-size:12.5px;color:#666;margin-left:10px;white-space:nowrap;}
.container-video-playlist .playlist::-webkit-scrollbar{width:6px;}
.container-video-playlist .playlist::-webkit-scrollbar-thumb{background:#bbb;border-radius:3px;}
.container-video-playlist .playlist::-webkit-scrollbar-thumb:hover{background:#999;}
.container-video-playlist .playlist{scrollbar-width:thin;scrollbar-color:#bbb #f9f9f9;}
.container-video-playlist .time-display{color:#fff;font-weight:700;}
.container-video-playlist .toggle-container{position:relative;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500;white-space:nowrap;}
.container-video-playlist .toggle-container:hover::after{content:attr(data-tooltip);position:absolute;top:-40px;left:50%;transform:translateX(-50%);background:rgba(0, 0, 0, 0.88);color:white;padding:6px 12px;border-radius:4px;font-size:12px;white-space:nowrap;pointer-events:none;z-index:30;box-shadow:0 4px 12px rgba(0, 0, 0, 0.5);opacity:0;transition:opacity 0.2s ease;}
.container-video-playlist .toggle-container:hover::after{opacity:1;}
.container-video-playlist .switch{position:relative;display:inline-block;width:40px;height:18px;}
.container-video-playlist .switch input{opacity:0;width:0;height:0;}
.container-video-playlist .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#555;transition:.4s;border-radius:26px;}
.container-video-playlist .slider:before{position:absolute;content:"";height:14px;width:14px;left:3px;bottom:2px;background-color:white;transition:.4s;border-radius:50%;}
.container-video-playlist input:checked+.slider{background-color:#a00;}
.container-video-playlist input:checked+.slider:before{transform:translateX(21px);}
.card-audio-playlist{display:flex;justify-content:center;align-items:center;}
.card-audio-playlist i{width:100%;text-shadow:-4px -4px 6px #18191b, 4px 4px 6px #34373d;}
.card-audio-playlist .app-container{position:relative;background-color:#26282c;border-radius:30px;box-shadow:0 0 10px rgba(0, 0, 0, 0.5), 2px 2px 10px rgba(0, 0, 0, 0.5);text-align:center;overflow:hidden;box-sizing:border-box;padding-bottom:20px;max-width:400px;width:100%;font-size:15px;color:white;}
.card-audio-playlist #uiWrap{position:relative;padding:0 40px;box-sizing:border-box;z-index:3;margin-top:-60px;}
.card-audio-playlist #albumArt{position:relative;z-index:1;width:100%;height:auto;border-radius:15px;margin-bottom:-100px;}
.card-audio-playlist #fade{position:relative;z-index:2;width:100%;height:100px;background:linear-gradient(180deg, rgba(38,40,44,0) 0%, rgba(38,40,44,1) 82%);}
.card-audio-playlist #trackTitle{font-size:1.7rem;}
.card-audio-playlist button{display:inline-flex;align-items:center;justify-content:center;color:#ffffff;font-size:1em;font-weight:400;border:none;border-radius:60px;height:2.5rem;width:2.5rem;background:#26282c;box-shadow:4px 4px 8px #18191b, -4px -4px 8px #34373d;}
.card-audio-playlist button:hover{box-shadow:2px 2px 5px #18191b, -2px -2px 5px #34373d;}
.card-audio-playlist button:active{background:#26282c;box-shadow:inset 2px 2px 5px #18191b, inset -2px -2px 5px #34373d;}
.card-audio-playlist .audio-controls{text-align:center;}
.card-audio-playlist #playPauseBtnPlaylist{height:60px;width:60px;margin:0 20px 20px;}
.card-audio-playlist #shuffleBtn.active,
.card-audio-playlist #loopBtn.active{color:rgba(0, 146, 172, 1);}
.card-audio-playlist #volume{position:absolute;display:flex;align-items:center;justify-content:left;padding:0;top:10px;left:10px;z-index:3;background-color:rgba(0,0,0,0);}
.card-audio-playlist #volume-bar{position:relative;width:100px;transform:translateY(-3px);opacity:0;transition:all 0.3s ease-out;transition-delay:1000ms;}
.card-audio-playlist #volume:hover #volume-bar, .card-audio-playlist #volume:active #volume-bar{opacity:1;transition:all 0.3s ease-out;}
.card-audio-playlist .muted{pointer-events:none;opacity:0.7;}
.card-audio-playlist #muteBtn{box-shadow:none;background:none;font-size:0.8em;}
.card-audio-playlist #volumeSlider{position:absolute;top:0;left:0;width:100%;height:5px;margin:0;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background:rgba(0, 0, 0, 0.6);outline:none;border-radius:10px;}
.card-audio-playlist .volume-indicator{position:absolute;height:5px;width:0;background:white;border-radius:5px;pointer-events:none;top:0;left:0;}
.card-audio-playlist #volumeSlider::-webkit-slider-thumb{position:relative;-webkit-appearance:none;width:10px;height:10px;border-radius:50%;cursor:pointer;z-index:2;background:white;}
.card-audio-playlist #volumeSlider::-moz-range-thumb{position:relative;width:10px;height:10px;border-radius:50%;cursor:pointer;z-index:2;background:white;}
.card-audio-playlist #volumeSlider::-ms-thumb{width:10px;height:10px;border-radius:50%;cursor:pointer;z-index:2;background:white;}
.card-audio-playlist .seek-bar{position:relative;height:40px;}
.card-audio-playlist #seekSlider{position:absolute;top:0;left:0;width:100%;height:5px;margin:0;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background:rgba(0, 0, 0, 0.2);outline:none;border-radius:10px;}
.card-audio-playlist .buffering-indicator{position:absolute;top:0;left:0;height:5px;border-radius:10px;background:rgba(0, 146, 172, 1);width:0;pointer-events:none;z-index:1;opacity:0.4;}
.card-audio-playlist .seek-indicator{position:absolute;top:0;left:0;height:5px;background:rgba(0, 146, 172, 1);border-radius:10px;pointer-events:none;z-index:1;width:0;}
.card-audio-playlist #seekSlider::-webkit-slider-thumb{position:relative;-webkit-appearance:none;width:10px;height:10px;border-radius:50%;cursor:pointer;z-index:2;background:rgba(0, 146, 172, 1);box-shadow:4px 4px 8px #18191b, -4px -4px 8px #34373d;}
.card-audio-playlist #seekSlider::-moz-range-thumb{position:relative;width:10px;height:10px;border-radius:50%;cursor:pointer;z-index:2;background:rgba(0, 146, 172, 1);box-shadow:4px 4px 8px #18191b, -4px -4px 8px #34373d;}
.card-audio-playlist #seekSlider::-ms-thumb{width:10px;height:10px;border-radius:50%;cursor:pointer;z-index:2;background:rgba(0, 146, 172, 1);box-shadow:4px 4px 8px #18191b, -4px -4px 8px #34373d;}
.card-audio-playlist #seekSlider::-webkit-slider-thumb:hover{box-shadow:2px 2px 5px #18191b, -2px -2px 5px #34373d;}
.card-audio-playlist #volumeSlider::-moz-range-thumb:hover{box-shadow:2px 2px 5px #18191b, -2px -2px 5px #34373d;}
.card-audio-playlist #volumeSlider::-ms-thumb:hover{box-shadow:2px 2px 5px #18191b, -2px -2px 5px #34373d;}
.card-audio-playlist #seekSlider::-moz-range-thumb:hover{box-shadow:2px 2px 5px #18191b, -2px -2px 5px #34373d;}
.card-audio-playlist #seekSlider::-ms-thumb:hover{box-shadow:2px 2px 5px #18191b, -2px -2px 5px #34373d;}
.card-audio-playlist #currentTime, .card-audio-playlist #trackTime{position:absolute;top:-30px;font-size:0.7em;}
.card-audio-playlist #currentTime{left:0;}
.card-audio-playlist #trackTime{right:0;}
.card-audio-playlist #likeBtn{box-shadow:none;background:none;margin:10px 20px;transition:all 200ms cubic-bezier(.17,-0.99,.61,1.73);}
.card-audio-playlist #likeBtn:hover{transform:scale(1.3);transition:all 200ms cubic-bezier(.17,-0.99,.61,1.73);}
.card-audio-playlist #loopBtn, .card-audio-playlist #shuffleBtn{box-shadow:none;background:none;margin:0 10px;font-size:0.9rem;}
.modern-player img{display:block;max-width:unset !important;width:100%;height:100%;object-fit:cover;object-position:center center;}
.modern-audio-playlist .player-block{display:flex;align-self:center;justify-self:center;overflow:hidden;max-height:453px;border-radius:40px;font-family:"Oswald", sans-serif;background-color:#131414;}
.modern-audio-playlist  .modern-player{position:relative;z-index:1;overflow:hidden;padding:50px;max-width:625px;width:100%;background:linear-gradient( -65deg, rgba(11, 11, 13, 1), rgba(18, 18, 19, 1), rgba(49, 51, 52, 1) );border-radius:40px;border:transparent;}
.modern-audio-playlist  .modern-player::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:40px;border:1px solid transparent;background:linear-gradient(-90deg, rgba(0, 0, 0, 1), rgba(102, 102, 102, 1)) border-box;mask:linear-gradient(#fff 0, #fff 100%) padding-box, linear-gradient(#fff 0, #fff 100%);mask-composite:exclude;}
.modern-audio-playlist .modern-player.open-playlist + .playlist,
.modern-audio-playlist .modern-player.open-playlist + .playlist .playlist__content{width:500px;opacity:1;}
.modern-audio-playlist .modern-player.open-playlist + .playlist{padding-right:60px;}
.modern-audio-playlist .playlist{width:0;height:100%;transition:all 0.4s;}
.modern-audio-playlist .playlist__content{display:flex;flex-direction:column;height:100%;gap:20px;padding:50px 50px 50px 30px;opacity:0;transition:all 0.2s;}
.modern-audio-playlist .playlist__top{display:flex;justify-content:space-between;align-items:center;gap:25px;}
.modern-audio-playlist .playlist__title{margin:0;font-size:1.5rem;line-height:1.5;font-weight:400;color:rgba(103, 103, 103, 1);text-transform:uppercase;}
.modern-audio-playlist .playlist__control{position:relative;display:flex;align-items:center;justify-content:center;width:24px;height:24px;cursor:pointer;}
.modern-audio-playlist .playlist__content i{position:absolute;width:15px;height:3px;background-color:rgba(103, 103, 103, 1);transition:0.3s background-color;}
.modern-audio-playlist .playlist__content i:first-child{transform:rotate(-45deg);}
.modern-audio-playlist .playlist__content i:last-child{transform:rotate(45deg);}
.modern-audio-playlist .playlist__list{display:flex;flex-direction:column;gap:5px;overflow-y:auto;max-height:310px;padding-right:16px;}
.modern-audio-playlist .playlist__list::-webkit-scrollbar{width:4px;}
.modern-audio-playlist .playlist__list::-webkit-scrollbar-track{background-color:transparent;}
.modern-audio-playlist .playlist__list::-webkit-scrollbar-thumb{background-color:rgba(255, 255, 255, 0.05);border-radius:2px;}
.modern-audio-playlist .playlist__item{display:flex;align-items:center;justify-content:space-between;padding:5px 10px;max-height:30px;border-radius:6px;background-color:transparent;cursor:pointer;transition:all 0.3s;font-family:"Poppins", sans-serif;}
.modern-audio-playlist .playlist__item.current{background-color:rgba(255, 255, 255, 0.05);}
.modern-audio-playlist .playlist__song, .modern-audio-playlist .playlist__duration{font-size:0.875rem;font-weight:300;line-height:1.4;color:rgba(103, 103, 103, 1);}
.modern-audio-playlist .playlist__song-name{color:#e6e6e6;}
.modern-audio-playlist .player__settings{display:flex;align-items:center;justify-content:flex-end;gap:20px;}
.modern-audio-playlist .player__settings input{display:none;}
.modern-audio-playlist .player__playlist-btn, .modern-audio-playlist .player__settings-btn{display:flex;align-items:center;justify-content:center;padding:8px;border-radius:50%;background-color:transparent;cursor:pointer;transition:all 0.3s;}
.modern-audio-playlist .player__playlist-btn.active, .modern-audio-playlist .player__settings-btn.active{filter:brightness(0) saturate(100%) invert(97%) sepia(100%) saturate(0%) hue-rotate(66deg) brightness(105%) contrast(104%);}
.modern-audio-playlist .player__settings-btn.active + .player__settings-block{flex:1;max-width:100%;}
.modern-audio-playlist .player__settings-block{display:flex;align-items:center;overflow:hidden;width:0;transition:0.5s all;}
.modern-audio-playlist .player__autoplay-block{display:flex;align-items:center;gap:8px;font-size:1.125rem;line-height:1.5;font-weight:400;color:#e6e6e6;}
.modern-audio-playlist .player__settings-checkbox{position:relative;display:flex;width:50px;height:24px;transform:translateY(1px);}
.modern-audio-playlist .player__settings-switch{position:absolute;cursor:pointer;inset:0;border-radius:24px;background-color:rgba(103, 103, 103, 1);transition:0.4s all;}
.modern-audio-playlist .player__settings-switch:before{position:absolute;content:"";height:16px;width:16px;left:4px;bottom:4px;border-radius:50%;transition:all 0.4s;background-color:white;}
.modern-audio-playlist  input:checked + .player__settings-switch:before{transform:translateX(26px);}
.modern-audio-playlist  input:checked + .player__settings-switch{background-color:rgb(51, 142, 51);}
.modern-audio-playlist .player__box{margin-top:15px;}
.modern-audio-playlist .player__bars{position:relative;display:flex;align-items:flex-end;gap:4px;width:100%;height:155px;cursor:pointer;}
.modern-audio-playlist .player__bar{min-height:2px;width:8px;height:0;max-height:155px;background:linear-gradient( to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.05) );transition:height 0.2s ease-out, background 1s ease-out;cursor:pointer;pointer-events:all;}
.modern-audio-playlist .player__bar.color{background:linear-gradient( 120deg, rgba(59, 180, 155, 0.5) 0%, rgba(137, 58, 255, 0.5) 53%, rgba(253, 134, 241, 0.4) 100% );}
.modern-audio-playlist .player__audio{display:none;}
.modern-audio-playlist .player__info{display:flex;align-items:flex-end;justify-content:space-between;margin-top:30px;}
.modern-audio-playlist .player__music-info{display:flex;flex-direction:column;}
.modern-audio-playlist .player__music-author, .modern-audio-playlist .player__duration{font-size:1rem;line-height:1.5;font-weight:400;color:rgba(255, 255, 255, 0.4);text-transform:uppercase;}
.modern-audio-playlist .player__music-title{margin:0;font-size:1.5rem;line-height:1.5;font-weight:400;color:white;text-transform:uppercase;}
.modern-audio-playlist .player__controller{display:flex;align-items:center;justify-content:space-between;margin-top:25px;}
.modern-audio-playlist .player__controls{display:flex;align-items:center;gap:44px;}
.modern-audio-playlist .player__next-btn, .modern-audio-playlist .player__prev-btn{display:flex;align-items:center;justify-content:center;padding:5px;border-radius:50%;background-color:transparent;cursor:pointer;transition:0.3s all ease-in-out;}
.modern-audio-playlist .player__next-btn.disabled, .modern-audio-playlist .player__prev-btn.disabled{filter:brightness(0) saturate(100%) invert(45%) sepia(1%) saturate(914%) hue-rotate(318deg) brightness(91%) contrast(101%);cursor:default;pointer-events:none;}
.modern-audio-playlist .player__pause-icon, .modern-audio-playlist .player__play-icon, .modern-audio-playlist .player__replay-btn img{display:flex;align-items:center;justify-content:center;padding:11px;border-radius:50%;background-color:transparent;cursor:pointer;transition:0.3s all ease-in-out;}
.modern-audio-playlist .player__pause-icon:active, .modern-audio-playlist .player__play-icon:active, .modern-audio-playlist .player__replay-icon:active{background-color:rgba(255, 255, 255, 0.05);}
.modern-audio-playlist .player__pause-icon.hidden, .modern-audio-playlist .player__play-icon.hidden, .modern-audio-playlist .player__play-btn.hidden, .modern-audio-playlist .player__replay-btn.hidden{display:none;}
.modern-audio-playlist .player__volume-btn{position:relative;cursor:pointer;padding-right:5px;height:24px;}
.modern-audio-playlist .player__volume-block{position:absolute;overflow:hidden;z-index:10;width:0;bottom:-10px;left:30px;display:flex;align-items:center;justify-content:center;border-radius:10px;background-color:#414143;transition:all 0.3s;}
.modern-audio-playlist .player__volume-block input{overflow:hidden;margin:20px;width:100%;height:10px;--range:20%;appearance:none;outline:none;border-radius:2px;background:linear-gradient( to right, white var(--range), rgba(87, 87, 87, 0.46) var(--range) );cursor:pointer;}
.modern-audio-playlist .player__volume-block input[type="range"]::-webkit-slider-thumb{cursor:pointer;appearance:none;width:1px;height:1px;opacity:0;}
.modern-audio-playlist .player__volume-icon{position:absolute;inset:0;opacity:1;width:max-content !important;visibility:visible;transition:all 0.3s;}
.modern-audio-playlist .player__volume-default.hidden, .modern-audio-playlist .player__volume-high.hidden, .modern-audio-playlist .player__volume-mute.hidden{opacity:0;visibility:hidden;}
.modern-audio-playlist .player__volume-btn:hover .player__volume-block{width:180px;}
.modern-audio-playlist .player__random-btn{display:flex;align-items:center;justify-content:center;padding:8px;border-radius:50%;background:transparent;cursor:pointer;transition:all 0.3s;}
.modern-audio-playlist .player__random-btn.active{filter:brightness(0) saturate(100%) invert(97%) sepia(100%) saturate(0%) hue-rotate(66deg) brightness(105%) contrast(104%);}
@media screen and (max-width:1280px){
.modern-audio-playlist .player-block{flex-direction:column;max-height:100%;}
.modern-audio-playlist .player.open-playlist + .playlist,
.modern-audio-playlist .player.open-playlist + .playlist .playlist__content{width:100%;height:450px;opacity:1;}
.modern-audio-playlist .playlist__list{max-height:none;}
.modern-audio-playlist .playlist{width:100%;height:0;}
}
@media screen and (max-width:620px){
.modern-audio-playlist .player__controls{gap:10px;}
.modern-audio-playlist .player__volume-btn{width:40px;}
}
@media screen and (max-width:460px){
.modern-audio-playlist .player-block{border-radius:20px;}
.modern-audio-playlist .player{border-radius:20px;padding:40px 20px 20px;}
.modern-audio-playlist .player::before{border-radius:20px;}
.modern-audio-playlist .player__settings{gap:10px;}
.modern-audio-playlist .playlist__content{padding:20px;}
.modern-audio-playlist .playlist__item{max-height:100%;}
.modern-audio-playlist .playlist__song{display:flex;flex-direction:column;gap:5px;}
}
@media (hover: hover) and (pointer: fine) {
.modern-audio-playlist .playlist__control:hover i {
background-color: white;
}
.modern-audio-playlist .player__pause-icon:hover, .modern-audio-playlist .player__play-icon:hover, .modern-audio-playlist .player__replay-icon:hover, .modern-audio-playlist .player__random-btn:hover, .modern-audio-playlist .player__next-btn:hover, .modern-audio-playlist .player__prev-btn:hover {
background-color: rgba(255, 255, 255, 0.05);
}
.modern-audio-playlist .player__playlist-btn:hover, .modern-audio-playlist .player__settings-btn:hover {
filter: brightness(0) saturate(100%) invert(97%) sepia(100%) saturate(0%)
hue-rotate(66deg) brightness(105%) contrast(104%);
background-color: rgba(255, 255, 255, 0.05);
}
.modern-audio-playlist .playlist__item:hover {
background-color: rgba(255, 255, 255, 0.05);
}
}