.vpm-container{display:flex;flex-direction:column;width:auto;margin:20px auto;padding:15px;background-color:#fff;box-shadow:0 0 10px rgb(0 0 0 / .1);border-radius:8px}@media (min-width:768px){.vpm-container{flex-direction:row;height:95vh}}.vpm-player-container{flex:3;padding:10px}.vpm-player{width:100%;height:0;padding-bottom:56.25%;position:relative;background-color:#000;border-radius:5px;overflow:hidden}.r1_iframe_embed{position:relative;overflow:hidden;width:100%;height:0;padding-top:56.25%}.r1_iframe_embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}.vpm-video-info{padding:15px 0}.vpm-video-info h2{margin-bottom:10px!important;font-size:1.5rem!important;margin-top:0!important;font-weight:bold!important}.vpm-video-info p{color:#666;line-height:1.5}.vpm-playlist-container{flex:1;padding:10px;overflow-y:hidden;border-top:1px solid #eee}@media (min-width:768px){.vpm-playlist-container{border-top:none;border-left:1px solid #eee}}.vpm-playlist-header{padding:10px 0;font-size:1.2rem;font-weight:700;border-bottom:1px solid #eee;margin-bottom:10px}.vpm-playlist-items{max-height:calc(100% - 40px);overflow-y:auto}.vpm-playlist-item{display:flex;margin-bottom:10px;cursor:pointer;transition:background-color 0.2s;border-radius:5px;overflow:hidden}.vpm-playlist-item:hover{background-color:#f0f0f0}.vpm-playlist-item.active{background-color:#e0e0e0}.vpm-playlist-thumbnail{width:120px;height:68px;min-width:120px;position:relative}.vpm-playlist-thumbnail img{width:100%;height:100%;object-fit:cover}.vpm-duration{position:absolute;bottom:5px;right:5px;background-color:rgb(0 0 0 / .7);color:#fff;padding:2px 5px;font-size:.7rem;border-radius:3px}.vpm-playlist-details{padding:5px 10px;overflow:hidden}.vpm-playlist-details h3{font-size:0.9rem!important;margin-bottom:5px!important;font-weight:700;margin-top:0!important;white-space:normal;overflow:hidden;text-overflow:ellipsis;line-height:1.7}.vpm-playlist-details p{font-size:.8rem;color:#666}.vpm-player.loading{position:relative;background:#000}.vpm-player.loading::after{content:"";position:absolute;top:50%;left:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border:3px solid rgb(255 255 255 / .3);border-radius:50%;border-top-color:#fff;animation:spin 1s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}.vpm-player.loading iframe{opacity:.5}@media (max-width:991px){.vpm-player-container{scroll-margin-top:20px}}