{"version":3,"file":"frontend-playlist.css","mappings":"AAAA,yBACA,YACI,sCACA,SACA,+BACA,kCACA,YACE,kDACA,YACE,kDAEF,YACE,0CAGJ,aACE,WACA,kBACA,gCAGF,cACE,aACA,gCAEF,UACE,qDACA,WAEE,SACA,8CAEF,qBACE,0DAEF,aACE,gDAEF,YACE,gDAEF,YACE,sCAEF,aACE,6CAKJ,UACE,oDACA,YACE,wDAGJ,4BACE,UACA,sCAEF,WACE,uCAEF,kBACE,YACA,kBACA,iCAOF,UACE,mCAGF,eACE,kBACA,2CAEF,UACE,kBACA,wHACA,YACA,UACA,8BACA,oBAGF,GACE,OACE,MAEF,UACE,uCAGJ,eACE,kBACA,YACA,kBACA,WACA,6CAGF,iBACE,WACA,WACA,YACA,gBACA,kBACA,mDAGF,SACE,sDAGF,SACE,qCAGF,cACE,gCAGF,kBACE,+BAGF,wBACE,qCAGF,WACE,WACA,4BACA,2BAEF,oCACE,YACE,2CAGJ,kBACE,iGACA,kDACA,2BACA,aACA,uCAEF,kBACE,sCAGF,mBACE,YACA,2BAEF,sCACE,kBACE,4BAGJ,sCACE,kBACE,2BAGJ,sCACE,mBACE,wCAEF,WACE,yCAGJ,YACE,sBACA,aACA,mBACA,mBACA,6BACA,6BACA,iBACA,mBACA,2DACA,SACI,iEAGJ,kBACI,iEAIJ,eACI,uEAIJ,eACI,2BAGN,uCACE,kBACE,4BAGJ,uCACE,kBACE,2BAGJ,uCACE,mBACE,yCAGJ,kBACE,gBACA,oBACA,WACA,+CAEF,iBACE,eACA,mDAEF,UACE,iBACA,4CAEF,YACE,uCAEF,YACE,SACA,uBACA,gDAEF,YACE,sBACA,QACA,cACA,aACA,mDACA,iBAEI,0EAEJ,cACE,iBACA,qBACA,qBACA,uBACA,gBACA,4BACA,oBACA,gBACA,eACA,kDAGJ,eACE,YACA,cACA,eACA,0BAEF,iDACE,eACE,+CAGJ,cACE,WACA,aACA,2BAEF,6CACE,cACE,2BAGJ,6CACE,cACE,iDAGJ,UACE,sCAEF,cACE,qDAEF,UACE,gBACA,eACA,gBACA,uBACA,oBACA,qBACA,4BACA,qBACA,iBACA,eACA,0BAEF,sDACE,oBACE,eACA,8CAGJ,aACE,cACA,eACA,iBACA,2CAEF,YACE,uBACA,SACA,gDAEF,eACE,kDAEF,cACE,aACA,kBACA,gBACA,sDAEF,UACE,iBACA,qDAcF,KACE,mEACA,YACE,4BACA,6BACA,0CAGJ,QACE,+BAEF,eACE,WACA,sBACA,gBACA,kBACA,eACA,gDAGA,WACE,YACA,qBACA,mCAEF,cACE,qHAIF,eACE,WACA,iCAEF,aACE,cACA,qBACA,kCAEF,WACE,eACA,cACA,2CAEF,cACE,wCAEF,iBACE,YACA,WACA,qCAEF,cACE,kBACA,QACA,WACA,6BACA,aACA,gDAIN,eACE,wCAGF,gBACE,kBACA,sCAGA,YACE,sCAEF,YACE,yDAWF,KACE,8CAEF,YACC,oDAED,qBACE,4BACA,4CAEF,SACE,uCAEF,eACE,uBACA,oBACA,qBACA,4BACA,qBACA,iBACA,eACA,8CAEF,eACE,cACA,4BACA,6BACA,oDAEF,WACE,YACA,qBACA,uCAEF,cACE,aACA,iBACA,WACA,mCAEF,UACE,sBACA,gBACA,kBACA,gBACA,qCAEF,UACE,cAEA,qBACA,8CAEF,UACE,aACA,gBACA,WACA,kBACA,0CAEF,cACE,YACA,WACA,kBACA,QACA,SACA,gCACA,mBACA,kBACA,8CAEF,iBACE,QACA,SACA,gCACA,YACA,WACA,UACA,qDAEF,iBACE,YACA,WACA,kBACA,4CAGA,cACE,aACA,WACA,sCAEF,WACE,eACA,uBACA,gBACA,aACA,mBACA,kBACA,0DAEF,cACE,SACA,eACA,SACA,YACA,+BACA,4CAEF,iBACE,eACA,qDAEF,eACE,WACA,oDAGJ,iBACE,6CAEF,YACE,oDACA,mBACA,cACA,gDACC,UACC,8CAGJ,YACE,yCAEF,QACE,0DAEF,WACE,wBACA,kBACA,kBACA,QACA,OACA,6BACA,gBACA,eACA,WACA,mDAEF,iBACE,QACA,OACA,6BACA,gBACA,WACA,YACA,0DAEF,WACE,wBACA,iBACA,kBACA,QACA,QACA,6BACA,eACA,gBACA,WACA,mDAEF,iBACE,QACA,QACA,6BACA,gBACA,WACA,YACA,C","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      padding: 0;\r\n    }\r\n    .video-item {\r\n      padding: 6px;\r\n    }\r\n    .item-active {\r\n      background: #a7a7a7;\r\n      padding: 6px;\r\n      border-radius: 3px;\r\n      // .video-block__title,\r\n      // .video-block__description {\r\n      //   color: #fff !important;\r\n\r\n      // }\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    .video__top {\r\n      grid-column: span 12;\r\n      padding: 0px;\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      .video__right {\r\n        height: 90vw;\r\n      }\r\n    }\r\n    .video__right {\r\n      display: flex;\r\n      flex-direction: column;\r\n      row-gap: 10px;\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: 10px;\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      margin:5px 0; \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        margin-bottom: 0;\r\n        margin-top: 8px;\r\n      }\r\n    }\r\n    .video-block__container {\r\n      flex-basis: 100%;\r\n      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      margin-top: 0;\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    .video-item {\r\n      cursor: pointer;\r\n    }\r\n    .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  \r\n\r\n  \r\n/**\r\n* CSS for video playslist\r\n*/\r\n.h5vp_playlist {\r\n  .simplelist {\r\n    .h5vp_playlist_container {\r\n      gap: 0;\r\n      .video__thumb {\r\n        display: flex;\r\n        border-bottom-left-radius: 0;\r\n        border-bottom-right-radius: 0;\r\n      }\r\n    }\r\n    .video__thumb {\r\n      margin: 0;\r\n    }\r\n    li {\r\n      background: #fff;\r\n      color: #222;\r\n      border: 1px solid #dddddd;\r\n      list-style: none;\r\n      position: relative;\r\n      cursor: pointer;\r\n      /* height: 200px;\r\n      position: relative; */\r\n      span.video_thumb {\r\n        width: 100px;\r\n        height: auto;\r\n        display: inline-block;\r\n      }\r\n      img {\r\n        max-width: 100%;\r\n        /* height: 200px;\r\n        object-fit: cover; */\r\n      }\r\n      &.item-active, &:hover, a:focus {\r\n        background: #222;\r\n        color: #fff;\r\n      }\r\n      a {\r\n        color: inherit;\r\n        display: block;\r\n        text-decoration: none;\r\n      }\r\n      h3 {\r\n        margin: 10px;\r\n        font-size: 18px;\r\n        color: inherit\r\n      }\r\n      a div.title {\r\n        font-size: 18px;\r\n      }\r\n      .svg svg {\r\n        fill: currentColor;\r\n        height: 20px;\r\n        width: 20px;\r\n      }\r\n      a svg {\r\n        z-index: 999999;\r\n        position: absolute;\r\n        top: 50%;\r\n        right: 10px;\r\n        transform: translate(0, -50%);\r\n        fill: #00b3ff;\r\n      }\r\n    }\r\n  }\r\n  .plyr__volume input[type=\"range\"] {\r\n    overflow: hidden;\r\n  }\r\n\r\n  .plyr__menu [role=\"menu\"] {\r\n    max-height: 250px;\r\n    overflow-y: scroll;\r\n  }\r\n  .plyr {\r\n    .preload_poster {\r\n      display: none;\r\n    }\r\n    + .preload_poster {\r\n      display: none;\r\n    }\r\n  }\r\n}\r\n\r\n\r\n\r\n\r\n/* css for listwithposter */\r\n.h5vp_playlist {\r\n  .listwithposter {\r\n    .h5vp_playlist_container  {\r\n      gap: 0;\r\n    }\r\n    .owl-carousel {\r\n     display: flex; \r\n    }\r\n    .plyr .plyr__poster {\r\n      background-size: cover;\r\n      background-repeat: no-repeat;\r\n    }\r\n    .video-item {\r\n      padding: 0;\r\n    }\r\n    .title {\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    .video__thumb  {\r\n      margin-bottom: 0;\r\n      display: block;\r\n      border-bottom-left-radius: 0;\r\n      border-bottom-right-radius: 0;\r\n    }\r\n    li span.video_thumb {\r\n      width: 100px;\r\n      height: auto;\r\n      display: inline-block;\r\n    }\r\n    li img {\r\n      max-width: 100%;\r\n      height: 200px;\r\n      object-fit: cover;\r\n      width: 100%;\r\n    }\r\n    li {\r\n      color: #ffffff;\r\n      border: 1px solid #dddddd;\r\n      list-style: none;\r\n      position: relative;\r\n      background: #ffffff;\r\n    }\r\n    li a {\r\n      color: #ffffff;\r\n      /* padding: 5px 20px; */\r\n      display: block;\r\n      text-decoration: none;\r\n    }\r\n    li a .overlay {\r\n      width: 100%;\r\n      height: 200px;\r\n      background: #000000;\r\n      opacity: 0.3;\r\n      position: absolute;\r\n    }\r\n    li a .svg {\r\n      z-index: 999999;\r\n      height: 50px;\r\n      width: 50px;\r\n      position: absolute;\r\n      top: 50%;\r\n      left: 50%;\r\n      transform: translate(-50%, -50%);\r\n      background: #00b3ff;\r\n      border-radius: 50%;\r\n    }\r\n    li a .svg svg {\r\n      position: absolute;\r\n      top: 50%;\r\n      left: 50%;\r\n      transform: translate(-50%, -50%);\r\n      height: 20px;\r\n      width: 20px;\r\n      fill: #ffffff;\r\n    }\r\n    li a div.video_title {\r\n      position: absolute;\r\n      bottom: 10px;\r\n      width: 100%;\r\n      text-align: center;\r\n    }\r\n    li {\r\n      .noImage {\r\n        max-width: 100%;\r\n        height: 200px;\r\n        width: 100%;\r\n      }\r\n      h3 {\r\n        margin: 10px;\r\n        font-size: 18px;\r\n        justify-content: center;\r\n        font-weight: 600;\r\n        display: flex;\r\n        align-items: center;\r\n        text-align: center;\r\n      }\r\n      a div.video_title span {\r\n        font-size: 14px;\r\n        top: 10px;\r\n        position: fixed;\r\n        left: 50%;\r\n        height: 100%;\r\n        transform: translate(-50%, 0px);\r\n      }\r\n      a .title {\r\n        text-align: center;\r\n        font-size: 18px;\r\n      }\r\n      &.active a .overlay {\r\n        background: #000000;\r\n        opacity: 0.6;\r\n      }\r\n    }\r\n    .h5vp_playlist_item {\r\n      position: relative;\r\n    }\r\n    &.h5vpNotSlide {\r\n      display: grid;\r\n      grid-template-columns: repeat(3, minmax(150px, 1fr));\r\n      grid-gap: 20px 20px; /* row gap / col gap */\r\n      margin: 20px 0;\r\n       li {\r\n        width: 100%;\r\n      }\r\n    }\r\n    .owl-nav span {\r\n      display: none;\r\n    }\r\n    .owl-nav {\r\n      height: 0;\r\n    }\r\n    .owl-nav .owl-prev:before {\r\n      content: \"\\2039\";\r\n      font-family: \"dashicons\";\r\n      margin-right: 10px;\r\n      position: absolute;\r\n      top: 50%;\r\n      left: 0;\r\n      transform: translate(0, -60%);\r\n      line-height: 1em;\r\n      font-size: 60px;\r\n      color: #fff;\r\n    }\r\n    .owl-nav .owl-prev {\r\n      position: absolute;\r\n      top: 50%;\r\n      left: 0;\r\n      transform: translate(0, -60%);\r\n      overflow: hidden;\r\n      width: 23px;\r\n      height: 100%;\r\n    }\r\n    .owl-nav .owl-next:before {\r\n      content: \"\\203A\";\r\n      font-family: \"dashicons\";\r\n      margin-left: 10px;\r\n      position: absolute;\r\n      top: 50%;\r\n      right: 0;\r\n      transform: translate(0, -60%);\r\n      font-size: 60px;\r\n      line-height: 1em;\r\n      color: #fff;\r\n    }\r\n    .owl-nav .owl-next {\r\n      position: absolute;\r\n      top: 50%;\r\n      right: 0;\r\n      transform: translate(0, -60%);\r\n      overflow: hidden;\r\n      width: 23px;\r\n      height: 100%;\r\n    }\r\n  }\r\n\r\n\r\n  }\r\n"],"names":[],"sourceRoot":""}