{"version":3,"file":"frontend-playlist.css","mappings":"AACA,yBACI,aACA,sCACA,SACA,+BACA,iCACE,aACA,iDACE,aAEF,iDACE,aAGJ,yCACE,cACA,WACA,kBAGF,+BACE,eACA,aAEF,+BACE,WACA,oDACE,kBACA,YACA,SAEF,6CACE,sBAEF,yDACE,cAEF,+CACE,aAEF,+CACE,aAEF,qCACE,cAKJ,4CACE,WACA,mDACE,aAGJ,uDACE,6BAEF,gCACE,WAGF,kCACE,gBACA,kBAEF,0CACE,WACA,kBACA,wHACA,YACA,UACA,8BAGF,mBACE,GACE,QAEF,KACE,YAGJ,qCACE,gBACA,kBACA,YACA,kBACA,WAGF,4CACE,kBACA,WACA,WACA,YACA,gBACA,kBAGF,kDACE,UAGF,qDACE,UAGF,oCACE,eAGF,+BACE,mBAGF,8BACE,yBAGF,oCACE,YACA,WACA,4BAEF,0BACE,oCACE,cAGJ,yCACE,mBACA,iGACA,kDACA,2BACA,aAEF,sCACE,mBAGF,0BACE,sCACE,oBAGJ,0BACE,sCACE,oBAGJ,yBACE,sCACE,qBAGJ,uCACE,aACA,sBACA,aACA,mBACA,mBACA,6BACA,6BACA,iBACA,mBACA,0DACI,UAGJ,gEACI,mBAIJ,gEACI,gBAIJ,sEACI,gBAGN,0BACE,uCACE,oBAGJ,0BACE,uCACE,oBAGJ,yBACE,uCACE,qBAGJ,uCACE,mBACA,gBACA,oBACA,WAEF,8CACE,kBACA,eAEF,kDACE,WACA,iBAEF,2CACE,aAEF,sCACE,aACA,SACA,uBAEF,+CACE,aACA,sBACA,QACA,cACA,kDACI,gBACA,kBAEJ,yEACE,eACA,iBACA,qBACA,qBACA,uBACA,gBACA,4BACA,oBAGJ,iDACE,gBACA,gBACA,cACA,eAEF,yBACE,iDACE,iBAGJ,6CACE,eACA,WAEF,0BACE,6CACE,gBAGJ,yBACE,6CACE,gBAGJ,+CACE,WAGF,gEACE,WACA,gBACA,eACA,gBACA,uBACA,oBACA,qBACA,4BACA,qBACA,iBACA,eAEF,yBACE,sDACE,qBACA,gBAGJ,4CACE,cACA,cACA,eACA,iBAEF,0CACE,aACA,uBACA,SAEF,+CACE,gBAEF,iDACE,eACA,aACA,kBACA,gBAEF,qDACE,WACA,iB","sources":["webpack://html5-video-player-pro/./src/components/playlist.scss"],"sourcesContent":["/* Additional custom styles can be added here */\r\n.h5vp_playlist_container {\r\n    display: grid;\r\n    grid-template-columns: repeat(12, 1fr);\r\n    gap: 24px;\r\n    background-color: transparent;\r\n    .hidden {\r\n      display: none;\r\n      .preload_poster {\r\n        display: none;\r\n      }\r\n      + .preload_poster {\r\n        display: none;\r\n      }\r\n    }\r\n    .preload_poster { \r\n      display: block;\r\n      width: 100%;\r\n      aspect-ratio: 16 /9;\r\n    }\r\n  \r\n    video {\r\n      max-width: 100%;\r\n      display: none;\r\n    }\r\n    .plyr {\r\n      width: 100%;\r\n      &.plyr--youtube iframe {\r\n        position: relative;\r\n        height: 200%;\r\n        top: -50%;\r\n      }\r\n      .plyr__poster {\r\n        background-size: cover;\r\n      }\r\n      .plyr__video-embed iframe {\r\n        display: block;\r\n      }\r\n      .preload_poster {\r\n        display: none;\r\n      }\r\n      + .preload_poster {\r\n        display: none\r\n      }\r\n      video {\r\n        display: block;\r\n      }\r\n\r\n    }\r\n    \r\n    .plyr__video-embed {\r\n      width: 100%;\r\n      iframe {\r\n        display: none;\r\n      }\r\n    }\r\n    &.playlist_loaded .video__right {\r\n      aspect-ratio: auto !important;\r\n    }\r\n    .w-100 {\r\n      width: 100%;\r\n    } \r\n    \r\n    .shimmer {\r\n      overflow: hidden;\r\n      position: relative;\r\n    }\r\n    .shimmer::before {\r\n      content: \"\";\r\n      position: absolute;\r\n      background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);\r\n      height: 100%;\r\n      z-index: 1;\r\n      animation: shimmer 1s infinite;\r\n    }\r\n    \r\n    @keyframes shimmer {\r\n      0% {\r\n        width: 0;\r\n      }\r\n      100% {\r\n        width: 100%;\r\n      }\r\n    }\r\n    .faux-image {\r\n      background: #dddddd;\r\n      border-radius: 8px;\r\n      height: 100%;\r\n      position: absolute;\r\n      width: 100%;\r\n    }\r\n    \r\n    .faux-text::before {\r\n      position: absolute;\r\n      content: \"\";\r\n      width: 100%;\r\n      height: 100%;\r\n      background: #dddddd;\r\n      border-radius: 4px;\r\n    }\r\n    \r\n    .faux-text.short::before {\r\n      width: 60%;\r\n    }\r\n    \r\n    .faux-text.shortage::before {\r\n      width: 40%;\r\n    }\r\n    \r\n    .flex-wrap {\r\n      flex-wrap: wrap;\r\n    }\r\n    \r\n    .mb-1 {\r\n      margin-bottom: 1rem;\r\n    }\r\n    \r\n    body {\r\n      background-color: #a3bbe2;\r\n    }\r\n    \r\n    .video--bg {\r\n      height: 100%;\r\n      width: 100%;\r\n      padding: 30px 60px 30px 60px;\r\n    }\r\n    @media (max-width: 1199px) {\r\n      .video--bg {\r\n        padding: 15px;\r\n      }\r\n    }\r\n    .video__wrapper {\r\n      border-radius: 20px;\r\n      background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);\r\n      box-shadow: 0px 0px 12px 0px rgba(255, 255, 255, 0.37);\r\n      backdrop-filter: blur(20px);\r\n      padding: 15px;\r\n    }\r\n    .video__left {\r\n      grid-column: span 8;\r\n      // margin-bottom: 30px;\r\n    }\r\n    @media (max-width: 1666px) {\r\n      .video__left {\r\n        grid-column: span 8;\r\n      }\r\n    }\r\n    @media (max-width: 1199px) {\r\n      .video__left {\r\n        grid-column: span 7;\r\n      }\r\n    }\r\n    @media (max-width: 991px) {\r\n      .video__left {\r\n        grid-column: span 12;\r\n      }\r\n    }\r\n    .video__right {\r\n      display: flex;\r\n      flex-direction: column;\r\n      row-gap: 12px;\r\n      grid-column: span 4;\r\n      margin-bottom: 30px;\r\n      overflow-y: scroll !important;\r\n      overflow-x: hidden !important;\r\n      max-height: 800px;\r\n      aspect-ratio: 4/4.3;\r\n      &::-webkit-scrollbar {\r\n          width: 5px;\r\n      }\r\n      /* Track */\r\n      &::-webkit-scrollbar-track {\r\n          background: #f1f1f1; \r\n      }\r\n     \r\n      /* Handle */\r\n      &::-webkit-scrollbar-thumb {\r\n          background: #888; \r\n      }\r\n      \r\n      /* Handle on hover */\r\n      &::-webkit-scrollbar-thumb:hover {\r\n          background: #555; \r\n      }\r\n    }\r\n    @media (max-width: 1666px) {\r\n      .video__right {\r\n        grid-column: span 4;\r\n      }\r\n    }\r\n    @media (max-width: 1199px) {\r\n      .video__right {\r\n        grid-column: span 5;\r\n      }\r\n    }\r\n    @media (max-width: 991px) {\r\n      .video__right {\r\n        grid-column: span 12;\r\n      }\r\n    }\r\n    .video__thumb {\r\n      border-radius: 20px;\r\n      overflow: hidden;\r\n      display: inline-flex;\r\n      width: 100%;\r\n    }\r\n    .video__thumb--small {\r\n      border-radius: 8px;\r\n      cursor:pointer;\r\n    }\r\n    .video__thumb--small > img {\r\n      width: 100%;\r\n      object-fit: cover;\r\n    }\r\n    .video__container {\r\n      display: flex;\r\n    }\r\n    .video-block {\r\n      display: flex;\r\n      gap: 12px;\r\n      align-items: flex-start;\r\n    }\r\n    .video-block__content {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 2px;\r\n      max-width: 48%;\r\n      h2 {\r\n          line-height: 80%;\r\n          margin-bottom: 0px;\r\n      }\r\n      .video-block__description {\r\n        font-size: 14px;\r\n        line-height: 135%;\r\n        -webkit-line-clamp: 3;\r\n        word-wrap: break-word;\r\n        text-overflow: ellipsis;\r\n        overflow: hidden;\r\n        -webkit-box-orient: vertical;\r\n        display: -webkit-box;\r\n      }\r\n    }\r\n    .video-block__container {\r\n      flex-basis: 100%;\r\n      min-width: 150px;\r\n      max-width: 48%;\r\n      cursor: pointer;\r\n    }\r\n    @media (max-width: 767px) {\r\n      .video-block__container {\r\n        min-width: 100px;\r\n      }\r\n    }\r\n    .video-block__title {\r\n      font-size: 19px;\r\n      color: #000;\r\n    }\r\n    @media (max-width: 1199px) {\r\n      .video-block__title {\r\n        font-size: 20px;\r\n      }\r\n    }\r\n    @media (max-width: 991px) {\r\n      .video-block__title {\r\n        font-size: 16px;\r\n      }\r\n    }\r\n    .video-block__title > a {\r\n      color: #000;\r\n    }\r\n  \r\n    .video-item .video-block__title--small {\r\n      color: #000;\r\n      font-weight: 700;\r\n      font-size: 15px;\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n      display: -webkit-box;\r\n      -webkit-line-clamp: 2;\r\n      -webkit-box-orient: vertical;\r\n      word-wrap: break-word;\r\n      line-height: 135%;\r\n      cursor: pointer;\r\n    }\r\n    @media (max-width: 767px) {\r\n      .video-block__title--small > a {\r\n        -webkit-line-clamp: 1;\r\n        font-size: 13px;\r\n      }\r\n    }\r\n    .video-block .meta {\r\n      display: block;\r\n      color: #787878;\r\n      font-size: 13px;\r\n      line-height: 135%;\r\n    }\r\n    .video__uploader {\r\n      display: flex;\r\n      align-items: self-start;\r\n      gap: 15px;\r\n    }\r\n    .video__uploader__sub {\r\n      font-weight: 700;\r\n    }\r\n    .video__uploader__image {\r\n      max-width: 50px;\r\n      display: flex;\r\n      border-radius: 50%;\r\n      overflow: hidden;\r\n    }\r\n    .video__uploader__image > img {\r\n      width: 100%;\r\n      object-fit: cover;\r\n    }\r\n  }\r\n  \r\n  \r\n  /*# sourceMappingURL=style.css.map */\r\n  "],"names":[],"sourceRoot":""}