.app-nav{background:transparent;border-radius:5px;bottom:20px;justify-content:space-between;left:30px;padding:8px 12px;position:absolute;right:10px;z-index:10}.app-logo,.app-nav{align-items:center;display:flex}.app-logo{gap:8px}.logo-icon{align-items:center;background:#4299e1;border-radius:3px;display:flex;font-size:10px;height:20px;justify-content:center;width:20px}.app-name{background:hsla(0,0%,100%,.6);color:#2f2f2f;font-size:20px;font-weight:600;padding:2px 20px}.back-to-app{background:hsla(0,0%,100%,.8);border:1px solid #97bf15;font-size:20px;font-weight:400;padding:10px}.back-to-app i{font-size:.95em;font-weight:800;margin-right:10px}.video-wrapper-outer{background:#2f2f2f;padding:90px 80px}.video-container{align-items:flex-start;border-radius:5px;display:flex;gap:40px;margin:0 auto;max-width:100%}.main-player,.video-navigation{box-sizing:border-box}.main-player{background:#2f2f2f;flex:3.5;height:auto;overflow:hidden}.video-wrapper{position:relative}.main-video{background-color:#000;display:block;height:auto;transition:opacity .25s ease;width:100%}.video-info{background:linear-gradient(135deg,#1e3a5f,#15304d);padding:24px}.video-title{color:#fff;font-size:1.8rem;font-weight:600;margin-bottom:12px}.video-description{color:#b3b3b3;font-size:1rem;line-height:1.5}.video-navigation{border-radius:5px;flex:1;overflow:hidden}.video-list{display:flex;flex-direction:column;overflow-y:auto!important;width:calc(100% - 20px)}.video-list-rail{position:relative}.video-list,.video-list-rail{box-sizing:border-box;height:100%}.video-list .video-item:last-child{padding-bottom:0}.video-item{cursor:pointer;display:flex;gap:12px;padding:0 0 17px 20px;transition:all .3s ease}.video-item.active .play-overlay{display:none}.video-item.active .video-thumbnail:after{background:rgba(0,0,0,.4)!important}.video-thumbnail{aspect-ratio:16/9;height:100%;overflow:hidden;position:relative;width:100%}#mainPlayOverlay svg{opacity:.8}.video-thumbnail .play-overlay{z-index:2}#mainPlayOverlay{z-index:30}.app-nav{z-index:20}#mainPlayOverlay,.app-nav{opacity:1;pointer-events:none}#mainPlayOverlay.is-ready,.app-nav.is-ready,.main-video.active{opacity:1;pointer-events:auto}.main-video.active{z-index:2}.main-video.inactive{opacity:0;pointer-events:none;z-index:1}#stagingVideo,.main-video{height:100%;inset:0;object-fit:cover;position:absolute;transition:opacity .25s ease;width:100%;z-index:1}.video-buffer-frame{background-position:50%;background-size:cover;inset:0;position:absolute;transition:opacity .2s ease}.video-navigation .video-list{overflow-anchor:none}.video-buffer-frame{opacity:1;z-index:3}.video-buffer-frame.hidden{opacity:0}.main-video{position:relative;z-index:1}.thumbnail-image{height:100%;object-fit:fill;transition:transform .3s ease;width:100%}.video-item:hover .thumbnail-image{transform:scale(1.05)}.thumbnail-image,.thumbnail-video{display:block;height:100%;object-fit:cover;position:relative;width:100%;z-index:0}.video-item:hover .video-thumbnail:after{opacity:.6}.video-thumbnail:after{background:rgba(0,0,0,.2);content:"";inset:0;opacity:1;pointer-events:none;position:absolute;transition:opacity .2s ease;z-index:1}.play-overlay{align-items:center;background:hsla(0,0%,100%,.8);border-radius:50%;color:rgba(0,0,0,.7);display:flex;height:30px;justify-content:center;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:all .3s ease;width:30px}.video-item:hover .play-overlay{transform:translate(-50%,-50%) scale(1.1)}.big-play{align-items:center;background:rgba(0,0,0,.25);color:#fff;cursor:pointer;display:flex;inset:0;justify-content:center;opacity:1;position:absolute;transition:opacity .2s}#mainPlayOverlay{height:75px;width:75px;z-index:20}#mainPlayOverlay.hidden{opacity:0;pointer-events:none}.item-title{color:#fff;font-size:.9rem;font-weight:600;line-height:1.3}.item-description,.item-title{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;margin-bottom:4px;overflow:hidden}.item-description{color:#b3b3b3;font-size:.8rem}.video-duration{color:#888;font-size:.75rem;font-weight:500}.loading{opacity:.6;pointer-events:none}.main-video.loading{background:#000 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='20' fill='none' stroke='%23fff' stroke-width='4' stroke-dasharray='80' stroke-dashoffset='60'%3E%3CanimateTransform attributeName='transform' type='rotate' dur='1s' repeatCount='indefinite' values='0 50 50;360 50 50'/%3E%3C/circle%3E%3C/svg%3E") no-repeat 50%;background-size:50px 50px}.app-nav--inside{bottom:20px;display:block;left:20px;position:absolute;z-index:5}.app-nav--outside{display:none}@media (max-width:1024px){.video-container{gap:15px;padding:15px}.video-title{font-size:1.5rem}.navigation-title{font-size:1.2rem}}@media (max-width:768px){.app-nav{background:#404040;bottom:0;left:0;margin-top:6px;position:relative;right:0}.app-name{color:#fff;display:contents;font-size:14px}.app-logo{display:block}.back-to-app{font-size:10px;padding:3px 6px}.video-container{background:#2f2f2f;flex-direction:column;gap:20px;padding:10px}.main-player{order:1}#mainPlayOverlay{height:40px;width:40px}#mainPlayOverlay,.app-nav{opacity:1}.video-navigation{background:#404040;display:block;height:auto;max-height:none;order:2;overflow:visible!important}.video-list-rail{padding-bottom:0;padding-top:0}.video-list{-webkit-overflow-scrolling:touch;height:400px!important;max-height:400px;overflow-x:hidden;overflow-y:auto!important;width:100%}.video-title{font-size:1.4rem}.video-wrapper{aspect-ratio:16/9;position:relative;width:100%}.main-video{height:100%;min-height:0;object-fit:cover;width:100%}.video-item{align-items:stretch;flex-direction:column;padding:0 0 12px}.video-thumbnail{aspect-ratio:16/9;height:auto;width:100%}.app-nav--inside{display:none}.app-nav--outside{display:block;position:static}}@media (max-width:599px){.video-wrapper-outer{padding:30px 32px 49px}.video-container{gap:18px;padding:5px}.video-info{padding:18px}.video-title{font-size:1.2rem}.video-description{font-size:.9rem}.navigation-title{font-size:1.1rem;margin-bottom:15px}.video-navigation{padding:15px 0 15px 10px}.video-item{align-items:stretch;flex-direction:column;padding:0 0 14px}.video-thumbnail{aspect-ratio:16/9;height:auto;margin-left:8px;width:100%}.item-title{font-size:.85rem}.item-description{font-size:.75rem}.video-duration{font-size:.7rem}}.video-list{padding-right:20px;width:calc(100% - 10px)}@media (min-width:600px) and (max-width:1400px){.app-name{font-size:15px;padding:2px 10px}.app-nav--inside{bottom:8px;left:8px}.video-wrapper-outer{padding:40px 60px}.hero.app-header{min-height:400px}.video-container{gap:30px;padding:15px}.video-navigation{flex:1.4}.video-thumbnail{aspect-ratio:16/9;height:auto;width:100%}.video-item{gap:16px;padding:0 0 20px 10px}.play-overlay{height:25px;width:25px}.video-list{padding-right:15px;width:100%}@media (width:768px){.video-navigation{padding:15px 0 15px 10px;.video-list{padding-right:15px;width:98%}}}}#videoList{overflow-y:auto}#videoList::-webkit-scrollbar{background:transparent;width:4px}#videoList::-webkit-scrollbar-track{background:#444748}#videoList::-webkit-scrollbar-thumb{background-color:#fff;border:none;border-radius:4px}#videoList::-webkit-scrollbar-thumb:hover{background-color:#e5e5e5}#videoList::-webkit-scrollbar-button{display:none;height:0;width:0}#videoList::-webkit-scrollbar-corner{background:transparent}