{"version":3,"file":"public.css","mappings":"AAAA,UAEE,aACA,qBAEA,+BAJA,UAKE,CAEF,gBACE,uBACA,WACA,yCACE,0BACA,YAIF,+BACE,YAGJ,eACE,qBAEF,iBACE,uBAEF,gBACE,sBAKF,4BACE,YACA,SAGJ,yEACE,UACA,uBAEF,sBAEE,aACA,yBAEA,aAJA,kBAGA,WAEA,YACA,2BAEE,iBACA,kBACA,WAHA,gBAGA,CAKF,2BACE,aAEA,SADA,sBACA,CAEA,qEACE,YAEF,sCACE,2BACA,iDACE,iBAKN,2BAIE,kBACA,OACA,oBAHA,gBADA,iBAIA,CAMA,2CACE,gBAEF,kCACE,YAEA,oBADA,QACA,CAGJ,8BACE,4BACA,YAEA,iBACA,eAFA,iBAEA,CAEF,2BACE,kBAGA,+BACE,eAOJ,4BACE,OACA,cACA,gBACA,qCAEE,oBAEF,+BACE,eAEA,iBADA,YACA,CAGJ,6BACE,4BAEF,8BACE,6BAEF,sCACE,sBAIJ,qBACE,GACE,UAGF,GACE,sBAKJ,oCAEI,sCACE,sBACA,gDACE,aAEF,gDAEE,mBADA,UACA,CAEF,iDACE,iBAMR,oCAGM,gDACE,kBACA,wDAEE,4BADA,wBACA,CAGJ,oEACE","sources":["webpack://yt-player/./src/style.scss"],"sourcesContent":[".ytPlayer {\r\n  width: 100%;\r\n  display: flex;\r\n  float: none !important;\r\n\r\n  .ytWrapper {\r\n    width: 100%;\r\n  }\r\n  .plyr {\r\n    background: transparent;\r\n    width: 100%;\r\n    .plyr__control--overlaid {\r\n      backdrop-filter: blur(4px);\r\n      height: auto;\r\n      // animation-name: opacityIn;\r\n      // animation-duration: 1s;\r\n    }\r\n    .plyr__control {\r\n      height: auto;\r\n    }\r\n  }\r\n  &.left {\r\n    justify-content: left;\r\n  }\r\n  &.center {\r\n    justify-content: center;\r\n  }\r\n  &.right {\r\n    justify-content: right;\r\n  }\r\n}\r\n\r\n.hideYoutubeUI .plyr {\r\n  iframe {\r\n    height: 200%;\r\n    top: -50%;\r\n  }\r\n}\r\n.hideControlsWhenPause .plyr--paused:not(.plyr--loading) .plyr__controls {\r\n  opacity: 0;\r\n  transition: opacity 0.5s;\r\n}\r\n.ytWrapper .watermark {\r\n  position: absolute;\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  width: 100%;\r\n  padding: 15px;\r\n  z-index: 999;\r\n  span {\r\n    padding: 8px 15px;\r\n    background: green;\r\n    border-radius: 3px;\r\n    color: #fff;\r\n  }\r\n}\r\n\r\n.timelineWrapper {\r\n  .timeline {\r\n    display: flex;\r\n    justify-content: center;\r\n    gap: 25px;\r\n\r\n    &:last-child:not(:first-child) .videoBorder {\r\n      border: none;\r\n    }\r\n    &.videoRight {\r\n      flex-direction: row-reverse;\r\n      .videoText {\r\n        text-align: right;\r\n      }\r\n    }\r\n  }\r\n\r\n  .videoBox {\r\n    // border-right: 1px dashed #bcbfd2;\r\n    position: relative;\r\n    margin-top: 20px;\r\n    align-self: center;\r\n    flex: 1;\r\n    margin-bottom: 130px;\r\n    // #player {\r\n    //   background: blueviolet;\r\n    //   border-radius: 15px;\r\n    //   padding: 15px;\r\n    // }\r\n    .plyr__controls {\r\n      border-radius: 0;\r\n    }\r\n    iframe {\r\n      height: 200%;\r\n      top: -50%;\r\n      pointer-events: none;\r\n    }\r\n  }\r\n  .videoBorder {\r\n    border-left: 1px dashed #333;\r\n    height: 100%;\r\n    position: absolute;\r\n    margin-left: 11px;\r\n    margin-top: 8px;\r\n  }\r\n  .videoDot {\r\n    position: relative;\r\n    // width: 22px;\r\n    // margin-left: -16px;\r\n    img {\r\n      margin-top: 3px;\r\n    }\r\n  }\r\n  // .videoDot img {\r\n  //   position: absolute;\r\n  //   margin-left: -11px;\r\n  // }\r\n  .videoText {\r\n    flex: 1;\r\n    padding-top: 0;\r\n    text-align: left;\r\n    .content {\r\n      padding: 20px;\r\n      padding-top: 0;\r\n    }\r\n    h3 {\r\n      font-size: 25px;\r\n      margin-top: 0;\r\n      line-height: 100%;\r\n    }\r\n  }\r\n  .borderLeft {\r\n    border-left: 1px dashed #ddd;\r\n  }\r\n  .borderRight {\r\n    border-right: 1px dashed #ddd;\r\n  }\r\n  .plyr__video-wrapper {\r\n    border-radius: initial;\r\n  }\r\n}\r\n\r\n@keyframes opacityIn {\r\n  from {\r\n    opacity: 0;\r\n  }\r\n\r\n  to {\r\n    transform: opacity 0.9;\r\n  }\r\n}\r\n\r\n// media query\r\n@media screen and (max-width: 768px) {\r\n  #yt-player .timelineWrapper {\r\n    .timeline {\r\n      flex-direction: column;\r\n      .videoDot {\r\n        display: none;\r\n      }\r\n      .videoBox {\r\n        width: 100%;\r\n        margin-bottom: 15px;\r\n      }\r\n      .videoText {\r\n        text-align: left;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n@media screen and (max-width: 600px) {\r\n  #yt-player .timelineWrapper {\r\n    .timeline {\r\n      .videoBox {\r\n        margin-bottom: 5px;\r\n        #player {\r\n          border-width: 0px !important;\r\n          border-radius: 3px !important;\r\n        }\r\n      }\r\n      .videoBox .videoText .content {\r\n        padding: 0;\r\n      }\r\n    }\r\n  }\r\n}\r\n"],"names":[],"sourceRoot":""}