ravnur-player-public 3.4.2 → 3.4.4

package/src/styles/index.js

@@ -0,0 +1,1966 @@
+import { createElement, first } from '../utils';
+
+/* eslint max-len: 0 */
+
+import getPlaylistStyles from './playlist.css';
+
+function _getStyles(styles, rect) {
+   let videoHeight4ccLayout = 'calc(100% - 160px)';
+
+   if (rect) {
+      videoHeight4ccLayout = rect.bottom - rect.top - 160 + 'px';
+   }
+
+   return `
+.rplayer {
+   font-family: 'Roboto',sans-serif;
+   width: 100%;
+   height: 100%;
+   -webkit-user-select: none;
+   -ms-user-select: none;
+   user-select: none;
+   outline: 0;
+   position: relative;
+   z-index: 1;
+   text-align: left;
+}
+
+.rplayer, .rplayer * {
+   box-sizing: border-box;
+}
+
+.rplayer--fullscreen .rplayer__inner {
+   height: 100% !important;
+   width: 100% !important;
+   min-height: 100vh;
+   min-width: 100vw;
+   z-index: 9999999;
+   position: static;
+   padding-bottom: 0;
+   margin: 0 auto
+}
+
+@media (orientation: portrait) {
+   .rplayer--fullscreen .rplayer--iphone .rmp-extensions {
+      bottom: 40px;
+   }
+   .rplayer--fullscreen .rplayer--iphone .rmp-ext-cc__text {
+      bottom: 125px;
+   }
+}
+
+.rplayer--fullscreen:-webkit-full-screen .rplayer__inner,
+.rplayer--fullscreen:-moz-full-screen .rplayer__inner,
+.rplayer--fullscreen:-ms-fullscreen .rplayer__inner,
+.rplayer--fullscreen:fullscreen .rplayer__inner,
+   min-height: 100vh;
+   min-width: 100vw;
+}
+
+.rplayer--fullscreen .rplayer__playlist-wrapper {
+   display: none;
+}
+
+.rplayer button span {
+   display: inline;
+   padding: 0;
+}
+
+.rplayer--fullscreen .rplayer .rmp-flash-wrapper, .rplayer--fullscreen .rplayer video {
+   background-color: black;
+}
+
+.rplayer audio {
+   width: 100%
+}
+
+.rplayer video {
+   outline: 0
+}
+
+.rplayer--fullscreen {
+   position: fixed!important;
+   top: 0!important;
+   bottom: 0!important;
+   right: 0!important;
+   left: 0!important;
+   background-color: black;
+   width: 100%!important;
+   max-width: 100% !important;
+   height: 100vh !important;
+   z-index: 9999999!important;
+   display: block;
+}
+
+.rplayer--fullscreen .rplayer {
+   display: table-cell;
+   vertical-align: middle
+}
+
+.rplayer__inner {
+   margin: auto;
+   background-color: black;
+}
+
+.rplayer__inner, .rplayer__playlist-wrapper {
+   position: relative;
+   overflow: hidden;
+   width: 100%;
+   height: 100%;
+}
+
+.rplayer__inner--playing .rmp-ext-help, .rplayer__inner--playing .rmp-ext-title {
+   opacity: 0;
+   z-index: -9;
+}
+
+.rplayer__inner--loading>* {
+   visibility: hidden
+}
+
+.rplayer__inner--loading>.loader {
+   border: 4px solid #f3f3f3;
+   border-top: 4px solid #666;
+   border-radius: 50%;
+   width: 60px;
+   height: 60px;
+   animation: spin 2s linear infinite;
+   visibility: visible;
+   position: absolute;
+   left: 50%;
+   top: 50%;
+   margin-top: -30px;
+   margin-left: -30px
+}
+
+@keyframes spin {
+   0% {
+      transform: rotate(0deg)
+   }
+
+   to {
+      transform: rotate(-360deg)
+   }
+}
+
+@-webkit-keyframes spin {
+   0% {
+      transform: rotate(0deg)
+   }
+
+   to {
+      transform: rotate(360deg)
+   }
+}
+
+.rplayer .rmp-flash-wrapper,.rplayer video {
+   background-color: transparent;
+   position: absolute;
+   top: 0;
+   left: 0;
+   bottom: 0;
+   height: 100%;
+   width: 100%;
+   border: 0
+}
+
+.rplayer .rplayer__inner--cc-below .rmp-flash-wrapper[id],.rplayer .rplayer__inner--cc-below video {
+   position: relative;
+   height: ${videoHeight4ccLayout};
+}
+
+.rplayer--cc-75-below .rplayer__inner--cc-below .rmp-flash-wrapper[id],.rplayer--cc-75-below .rplayer__inner--cc-below video {
+   height: calc(100% - 110px);
+}
+
+.rplayer--cc-100-below .rplayer__inner--cc-below .rmp-flash-wrapper[id],.rplayer--cc-100-below .rplayer__inner--cc-below video {
+   height: calc(100% - 140px);
+}
+
+.rplayer--cc-125-below .rplayer__inner--cc-below .rmp-flash-wrapper[id],.rplayer--cc-125-below .rplayer__inner--cc-below video {
+   height: calc(100% - 150px);
+}
+
+.rplayer--cc-150-below .rplayer__inner--cc-below .rmp-flash-wrapper[id],.rplayer--cc-150-below .rplayer__inner--cc-below video {
+   height: calc(100% - 170px);
+}
+
+.rplayer--cc-200-below .rplayer__inner--cc-below .rmp-flash-wrapper[id],.rplayer--cc-200-below .rplayer__inner--cc-below video {
+   height: calc(100% - 200px);
+}
+
+.rplayer--fullscreen .rplayer--cc-75-below .rplayer__inner--cc-below .rmp-flash-wrapper[id],.rplayer--fullscreen .rplayer--cc-75-below .rplayer__inner--cc-below video {
+   height: calc(100vh - 130px);
+}
+
+.rplayer--fullscreen .rplayer--cc-100-below .rplayer__inner--cc-below .rmp-flash-wrapper[id],.rplayer--fullscreen .rplayer--cc-100-below .rplayer__inner--cc-below video {
+   height: calc(100vh - 160px);
+}
+
+.rplayer--fullscreen .rplayer--cc-125-below .rplayer__inner--cc-below .rmp-flash-wrapper[id],.rplayer--fullscreen .rplayer--cc-125-below .rplayer__inner--cc-below video {
+   height: calc(100vh - 180px);
+}
+
+.rplayer--fullscreen .rplayer--cc-150-below .rplayer__inner--cc-below .rmp-flash-wrapper[id],.rplayer--fullscreen .rplayer--cc-150-below .rplayer__inner--cc-below video {
+   height: calc(100vh - 210px);
+}
+
+.rplayer--fullscreen .rplayer--cc-200-below .rplayer__inner--cc-below .rmp-flash-wrapper[id],.rplayer--fullscreen .rplayer--cc-200-below .rplayer__inner--cc-below video {
+   height: calc(100vh - 230px);
+}
+
+.rmp-extensions, .rmp-ext-title {
+   height: 86px;
+   left: 0;
+   right: 0;
+   position: absolute;
+   background-repeat: repeat-x;
+
+   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA0xpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDg2NUVBOEM1QTQ0MTFFNzlGNTJDQTRCNzY1MURGNEMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDg2NUVBOEI1QTQ0MTFFNzlGNTJDQTRCNzY1MURGNEMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjAzOTcwY2FjLWEyYWMtMTE3YS05OGUxLWI5NzUzOTY2ZTQ4MyIgc3RSZWY6ZG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjAzOTcwY2FjLWEyYWMtMTE3YS05OGUxLWI5NzUzOTY2ZTQ4MyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PoORptwAAACaSURBVHjafFBbDoAgDBsbev87egsF8fEBtqmY2LRrGRtmZpvfcD7QEE7BKtYIinAruoNVAQXvKAjv2R27HHiMOpN7TN0qWjVRo7XU5iNnKFuvqfczwZTxgbj/hNJUDj/3n5xPpTJcSDIokrrMGM6dJZQvBOaisyRqgXLB2jJ1s3DHLCuOkXEMNQF1plUDt1Sbkxv4iMQG+CXAAOG1UnHx2OgyAAAAAElFTkSuQmCC');
+
+   color: ${styles.mainColor};
+   z-index: 4;
+   transition: opacity 500ms ease;
+}
+
+.rplayer--iphone .rmp-extensions, .rplayer--iphone .rmp-ext-title {
+   transition: none;
+   transform: translateZ(0);
+   z-index: 9;
+   background: linear-gradient(360deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.75) 50%, rgba(0,0,0,0) 100%);
+}
+
+.rmp-extensions {
+   background-position: bottom;
+   bottom: -26px;
+   padding-top: 26px;
+   padding-right: 5px;
+   font-size: 12px;
+   z-index: 5;
+   display: flex;
+}
+
+.rmp-ext-backward, .rmp-ext-prev-frame, .rmp-ext-play, .rmp-ext-next-frame, .rmp-ext-forward, 
+.rmp-ext-volume, .rmp-ext-progress, .rmp-ext-settings, .rmp-ext-theater, .rmp-ext-cc, .rmp-ext-toc,
+.rmp-ext-audio-tracks, .rmp-ext-search, .rmp-ext-settings, .rmp-ext-fullscreen, .rmp-ext-bottom-next,
+.rmp-ext-bottom-prev {
+   max-height: 31px;
+}
+
+.rplayer--mobile .rmp-extensions {
+   bottom: -20px;
+}
+
+.rplayer__inner--light .rmp-ext-help,
+.rmp-extensions--hidden > .rmp-extensions, .rmp-extensions--hidden > .rmp-ext-title, .rmp-extensions--hidden > .rmp-ext-help {
+   opacity: 0;
+}
+
+.rplayer__inner--light.rplayer__inner--hovering .rmp-extensions, .rplayer__inner--light.rplayer__inner--hovering .rmp-ext-help,
+.rplayer__inner--active .rmp-extensions, .rplayer__inner--active .rmp-ext-help {
+   opacity: 1;
+}
+
+.rmp-extensions button, .rmp-ext-help__button {
+   height: 32px;
+   border: none;
+   cursor: pointer;
+   position: relative;
+   background-color: transparent;
+   float: left;
+   color: ${styles.submenuColor};
+   width: 36px
+}
+
+
+.rplayer--mobile .rmp-extensions .rmp-ext-forward, .rplayer--mobile .rmp-extensions .rmp-ext-backward {
+   display: none;
+}
+
+.rplayer--mobile .arrow svg {
+   width: 24px !important;
+   height: 24px !important;
+}
+
+.rmp-extensions button svg, .rmp-ext-help__button {
+   width: 24px;
+   height: 24px;
+   display: block;
+   fill: ${styles.mainColor};
+   opacity: .75
+}
+
+.rmp-extensions button:hover svg, .rmp-ext-help__button:hover {
+   opacity: 1
+}
+
+.rmp-extensions button, .rmp-ext-title__title,
+.rplayer__playlist-item, .rmp-ext-c2pa__item {
+   padding: 0 5px;
+   outline-offset: -2px;
+}
+
+.rplayer__inner--accessibility .rmp-extensions button:focus,
+.rplayer__inner--accessibility .rmp-ext-progress__bar:focus,
+.rplayer__inner--accessibility .rmp-ext-title__title:focus,
+.rplayer__inner--accessibility .rplayer__playlist-item:focus,
+.rplayer__inner--accessibility .rmp-ext-c2pa__item:focus {
+   outline: 2px solid blue;
+}
+
+.rmp-extensions > button:first-of-type {
+   margin-left: 6px
+}
+
+.rmp-ext-placeholder {
+   position: absolute;
+   top: 0;
+   right: 0;
+   bottom: 0;
+   left: 0;
+   z-index: 1;
+   background-color: #000;
+   opacity: 0.001;
+}
+
+.rmp-ext-placeholder--animation {
+   background-color: transparent;
+   opacity: 1;
+}
+
+.rplayer__inner--light .rmp-ext-placeholder__play-btn {
+   display: inline-block;
+}
+
+.rplayer__inner--light .rmp-ext-placeholder {
+   background-color: transparent;
+   opacity: 1;
+   cursor: pointer;
+}
+
+.rplayer__inner--light.rplayer__inner--hovering .rmp-ext-placeholder__play-btn {
+   width: 78px;
+   height: 78px;
+   margin-top: -40px;
+   margin-left: -40px;
+   cursor: pointer;
+}
+
+.rplayer__inner--light.rplayer__inner--hovering .rmp-ext-placeholder__play-btn svg {
+   top: 11px;
+   left: 11px;
+   cursor: pointer;
+}
+
+.rmp-ext-placeholder__play-btn {
+   background-color: rgba(61,61,61,.75);
+   border: 0 none;
+   border-radius: 50%;
+   position: absolute;
+   width: 72px;
+   height: 72px;
+   left: 50%;
+   top: 50%;
+   margin-top: -36px;
+   margin-left: -36px;
+   display: none;
+   outline: none;
+}
+
+.rmp-ext-placeholder__icon {
+   position: absolute;
+   width: 56px;
+   height: 56px;
+   left: 50%;
+   top: 50%;
+   margin-top: -28px;
+   margin-left: -28px
+}
+
+.rmp-ext-placeholder__icon svg, .rmp-ext-placeholder__play-btn svg {
+   position: absolute;
+   width: 56px;
+   height: 56px;
+   fill: #222
+}
+
+.rmp-ext-placeholder__play-btn svg {
+   fill: ${styles.mainColor};
+   position: absolute;
+   top: 8px;
+   left: 8px;
+}
+
+.rmp-ext-placeholder--animation .rmp-ext-placeholder__icon {
+   animation: disappear-icon .75s ease 1
+}
+
+@keyframes disappear-icon {
+   0% {
+      opacity: 1
+   }
+
+   to {
+      transform: scale(2);
+      opacity: 0
+   }
+}
+
+@-webkit-keyframes disappear-icon {
+   0% {
+      opacity: 1
+   }
+
+   to {
+      transform: scale(2);
+      opacity: 0
+   }
+}
+
+.rmp-extensions .rmp-ext-play svg {
+   display: none
+}
+
+.rmp-extensions .rmp-ext-play--paused .play,.rmp-extensions .rmp-ext-play--playing .pause, .rmp-extensions .rmp-ext-play--ended .replay {
+   display: block
+}
+
+.rmp-ext-progress {
+   flex-grow: 1;
+}
+
+.rmp-ext-progress__current {
+   line-height: 32px;
+   padding: 0 8px;
+   user-select: none
+}
+
+.rmp-ext-progress__overlay {
+   background-color: #fff;
+   display: block;
+   position: absolute;
+   top: 0;
+   left: 0;
+   right: 0;
+   bottom: 0;
+   opacity: .75
+}
+
+.rmp-ext-progress__bar {
+   cursor: pointer;
+   height: 4px;
+   border-radius: 2px;
+   position: absolute;
+   top: 14px;
+   left: 16px;
+   right: 16px;
+   display: block;
+   -webkit-box-shadow: 0 0 2px 0 rgba(51,51,51,.5);
+   box-shadow: 0 0 2px 0 rgba(51,51,51,.5);
+   transition: all 50ms linear
+}
+
+.rmp-ext-progress__generic-live-stream.rmp-ext-progress__bar {
+   pointer-events: none;
+}
+.rmp-ext-progress__generic-live-stream .rmp-ext-progress__progress {
+   width: 100% !important;
+   background-color: #e62048;
+}
+.rmp-ext-progress__generic-live-stream .rmp-ext-progress__handle,
+.rmp-ext-progress__generic-live-stream .rmp-ext-progress__play-progress,
+.rmp-ext-progress__generic-live-stream.rmp-ext-progress > span:nth-child(2),
+.rmp-ext-progress__generic-live-stream.rmp-ext-progress > span:nth-child(3) {
+   display: none;
+}
+
+.rmp-ext-progress__bar:hover {
+   height: 8px;
+   margin-top: -2px
+}
+
+.rmp-ext-progress__bar-padding {
+   position: absolute;
+   z-index: 5;
+   bottom: -2px;
+   left: 0;
+   right: 0;
+   display: block;
+   height: 18px;
+   cursor: pointer;
+}
+
+.rmp-ext-progress__duration {
+   line-height: 32px;
+   padding: 0 8px;
+   user-select: none;
+   position: relative
+}
+
+.rmp-ext-progress__handle {
+   position: absolute;
+   left: 0;
+   width: 6px;
+   height: 10px;
+   top: -3px;
+   margin-left: -3px;
+   cursor: pointer;
+   background-color: #fff;
+   border-radius: 2px;
+   -webkit-box-shadow: 0 0 2px 0 rgba(51,51,51,.25);
+   box-shadow: 0 0 2px 0 rgba(51,51,51,.25);
+   z-index: 7;
+   transform: translateZ(0);
+}
+
+@media only screen and (max-device-width: 768px) and (pointer:coarse) {
+   .rmp-ext-progress__handle {
+      width: 12px !important;
+      height: 24px !important;
+      top: -9px !important;
+      margin-left: -6px !important;
+      background-color: transparent;
+      box-shadow: none;
+      transform: translateZ(0);
+      padding: 6px 5px;
+   }
+
+   .rmp-ext-progress__chapter-bubble {
+      z-index: 5;
+   }
+
+   .rmp-ext-progress__handle:before {
+      content: '';
+      display: block;
+      width: 6px;
+      height: 10px;
+      top: -3px;
+      margin-left: -3px;
+      background-color: #fff;
+      border-radius: 2px;
+      -webkit-box-shadow: 0 0 2px 0 rgba(51,51,51,.25);
+      box-shadow: 0 0 2px 0 rgba(51,51,51,.25);
+      transform: translateZ(0);
+   }
+
+   .rmp-ext-progress__bar:hover .rmp-ext-progress__handle:before {
+      height: 14px;
+   }
+}
+
+.rmp-ext-progress__progress {
+   left: 0;
+   position: absolute;
+   top: 0;
+   bottom: 0;
+   background: #fff;
+   z-index: 2
+}
+
+.rmp-ext-progress__play-progress {
+   left: 0;
+   position: absolute;
+   top: 0;
+   bottom: 0;
+   background: ${styles.accentColor};
+   z-index: 3
+}
+
+.rmp-ext-progress__bar:hover .rmp-ext-progress__handle {
+   top: -4px;
+   height: 16px
+}
+
+.rmp-ext-progress__tooltip {
+   position: absolute;
+   bottom: 80px;
+   background-color: #333;
+   padding: 4px 8px;
+   font-size: 12px;
+   border-radius: 4px;
+   display: none;
+   text-align: center;
+   z-index: 5
+}
+
+.rmp-ext-progress__thumbmail:not(:empty) {
+   margin-bottom: 7px
+}
+
+.rmp-ext-progress__thumbmail-time,.rmp-ext-volume {
+   display: inline-block
+}
+
+.rmp-ext-volume__btn .muted,.rmp-ext-volume__btn--muted .unmuted {
+   display: none
+}
+
+.rmp-ext-volume__btn--muted .muted {
+   display: block
+}
+
+.rmp-ext-progress__tooltip--visible {
+   display: flex !important;
+   justify-content: center !important;
+   flex-direction: column !important;
+   align-items: center !important;
+}
+
+.rmp-ext-progress__chapter-bubble {
+   position: absolute;
+   display: block;
+   width: 12px;
+   height: 12px;
+   top: 50%;
+   margin-top: -6px;
+   margin-left: -6px;
+   z-index: 6
+}
+
+.rmp-ext-progress__chapter-bubble:before {
+   content: '';
+   position: absolute;
+   display: block;
+   position: absolute;
+   width: 8px;
+   height: 8px;
+   border-radius: 50%;
+   background-color: ${styles.chaptersBubbleColor};
+   top: 50%;
+   margin-top: -4px;
+   margin-left: 2px;
+   -webkit-box-shadow: 0 0 2px 0 rgba(251,251,251,.85);
+   box-shadow: 0 0 2px 0 rgba(251,251,251,.85);
+}
+
+.rmp-ext-volume__selector {
+   position: absolute;
+   bottom: 56px;
+   border-radius: 4px;
+   display: none;
+   z-index: 8;
+   background-color: ${styles.submenuBgColor};
+   width: 33px;
+}
+
+.rmp-ext-volume__selector--open, .rmp-ext-volume__selector--active {
+   display: block;
+}
+
+.rmp-ext-volume__slider {
+   cursor: pointer;
+   height: 100px;
+   display: inline-block;
+   width: 4px;
+   margin: 6px 14px;
+   position: relative;
+   line-height: 32px
+}
+
+.rmp-ext-volume__handle,.rmp-ext-volume__overlay,.rmp-ext-volume__progress {
+   position: absolute;
+   -webkit-box-shadow: 0 0 2px 0 rgba(51,51,51,.5);
+   box-shadow: 0 0 2px 0 rgba(51,51,51,.5);
+   border-radius: 2px
+}
+
+.rmp-ext-volume__handle {
+   width: 12px;
+   height: 8px;
+   margin-top: -4px;
+   cursor: pointer;
+   z-index: 2;
+   left: -4px;
+   border: 1px solid #90A4AE;
+   background-color: #fff
+}
+
+.rmp-ext-volume__overlay,.rmp-ext-volume__progress {
+   left: 0;
+   right: 0;
+   bottom: 0;
+   background-color: ${styles.accentColor}
+}
+
+.rmp-ext-volume__overlay {
+   display: block;
+   top: 0;
+   background-color: #fff;
+   opacity: .75
+}
+
+.rmp-ext-theater--hidden {
+   display: none;
+}
+
+.rmp-ext-fullscreen .exit-fullscreen-icon,.rmp-ext-fullscreen--exit .fullscreen-icon,
+.rmp-ext-theater--exit .rmp-ext-theater__icon,.rmp-ext-theater .rmp-ext-theater__exit-icon {
+   display: none
+}
+
+.rmp-ext-fullscreen--exit .exit-fullscreen-icon, .rmp-ext-theater--exit .rmp-ext-theater__exit-icon {
+   display: block
+}
+
+.rmp-ext-cc__text {
+   position: absolute;
+   bottom: 60px;
+   left: 0;
+   right: 0;
+   text-align: center;
+   display: none;
+   pointer-events: none;
+   color: ${styles.mainColor};
+   font-size: 18px;
+   opacity: .85;
+   z-index: 3;
+   transition: bottom 250ms ease
+}
+
+.rmp-ext-crawl {
+   position: absolute;
+   bottom: 60px;
+   left: 0;
+   right: 0;
+   pointer-events: none;
+   z-index: 3;
+   transition: bottom 250ms ease;
+   background-color: #224367;
+   color: #FFFFFF;
+   padding: 5px 0;
+   overflow: hidden;
+   white-space: nowrap;
+}
+ 
+ .rmp-ext-crawl__text {
+   width: max-content;
+   will-change: transform;
+ }
+
+ .rmp-ext-crawl__text * {
+   color: inherit !important;
+ }
+
+ .rmp-ext-crawl > .rmp-ext-crawl__text, .rmp-ext-crawl > .rmp-ext-crawl__text > * {
+   display: inline-block;
+   margin: 0;
+   padding: 0;
+ }
+
+.rmp-ext-crawl--exist > .rmp-ext-cc__text {
+   bottom: 100px;
+}
+
+.rplayer--iphone .rmp-ext-cc__text {
+   transition: none;
+   bottom: 100px;
+   will-change: auto;
+}
+
+.rmp-extensions--hidden > .rmp-ext-cc__text {
+   bottom: 10px
+}
+
+.rmp-extensions--hidden > .rmp-ext-crawl {
+   bottom: 10px
+}
+
+.rmp-extensions--hidden.rmp-ext-crawl--exist > .rmp-ext-cc__text {
+   bottom: 50px
+}
+
+.rmp-ext-cc__text--visible {
+   display: block
+}
+
+.rmp-ext-cc__text-holder {
+   background-color: #333;
+   padding: 4px 8px;
+   border-radius: 4px;
+   display: inline-block;
+   line-height: 1.2
+}
+
+.rplayer__inner--cc-below .rmp-ext-cc__text {
+   position: static;
+   margin-top: 5px;
+}
+
+.rmp-ext-cc__selector {
+   position: absolute;
+   bottom: 56px;
+   border-radius: 4px;
+   display: none;
+   z-index: 8;
+   margin-left: -15px;
+   background-color: ${styles.submenuBgColor};
+   overflow: hidden;
+   width: 250px
+}
+
+.rmp-ext-cc__selector--open {
+   display: block
+}
+
+.rmp-ext-cc__selector .rmp-ext-cc__item {
+   padding-left: 18px;
+}
+
+.rmp-ext-cc__selector button:hover {
+   background-color: rgba(51,51,51,.25)
+}
+
+.rmp-ext-cc__item--checked:before,.rmp-ext-settings__item--checked:before,.rmp-ext-toc__lang-item--checked:before,.rmp-ext-audio-tracks__item--checked:before {
+   position: absolute;
+   content: '•';
+   margin-left: -12px;
+   font-size: 24px;
+   margin-top: -1px
+}
+
+.rmp-ext-toc {
+   width: 34px;
+   padding: 0 2px
+}
+
+.rmp-ext-toc__selector {
+   position: absolute;
+   bottom: 56px;
+   border-radius: 4px;
+   display: none;
+   z-index: 8;
+   overflow: hidden;
+   background-color: ${styles.submenuBgColor};
+   width: 250px
+}
+
+.rmp-ext-toc__chapters > .rmp-ext-toc__item {
+   width: 100%;
+   height: auto;
+   min-height: 32px;
+   text-align: left;
+   padding: 0 15px;
+}
+
+.rmp-ext-toc__chapters:empty {
+   padding-top: 0;
+}
+
+
+.rmp-ext-toc__selector--open {
+   display: block
+}
+
+.rmp-ext-toc__item,.rmp-ext-toc__selector a:hover {
+   text-decoration: none;
+   color: #000
+}
+
+.rmp-ext-toc__item {
+   margin-bottom: 14px;
+   display: block;
+   color: ${styles.submenuColor};
+   padding: 8px 0
+}
+
+.rmp-ext-toc__item:hover {
+   color: #333;
+   text-decoration: underline
+}
+
+.rmp-ext-toc__item:last-child {
+   margin-bottom: 0
+}
+
+button.rmp-ext-toc__more {
+   text-align: left;
+   width: 100%;
+   line-height: 32px;
+   padding-left: 12px;
+   border-top: 1px solid #AAA;
+}
+
+.rmp-ext-toc__more .arrow {
+   float: right;
+   width: 20px;
+   margin-top: 4px;
+}
+
+.rmp-ext-toc__more .arrow svg, button.rmp-ext-toc__back svg {
+   fill: ${styles.submenuColor}
+}
+
+.rmp-ext-toc__main-step:after, .rmp-ext-toc__languages-step:after {
+   content: ' ';
+   display: table;
+   clear: both;
+}
+
+.rmp-ext-toc__main-step, .rmp-ext-toc__languages-step, .rmp-ext-toc__translate-step {
+   display: none;
+   position: absolute;
+   left: 265px;
+   bottom: 0;
+   width: 100%;
+   overflow: auto;
+}
+
+.rmp-ext-toc__selector--main-step .rmp-ext-toc__main-step,
+.rmp-ext-toc__selector--translate-step .rmp-ext-toc__translate-step,
+.rmp-ext-toc__selector--languages-step .rmp-ext-toc__languages-step {
+   display: block;
+   position: relative;
+   left: 0;
+   width: 100%;
+}
+
+.rmp-ext-toc__selector--languages-step .rmp-ext-toc__main-step,
+.rmp-ext-toc__selector--translate-step .rmp-ext-toc__main-step,
+.rmp-ext-toc__selector--translate-step .rmp-ext-toc__languages-step {
+   display: none;
+   position: absolute;
+   left: -265px;
+}
+
+.rmp-ext-toc__selector--languages-step .rmp-ext-toc__back,
+.rmp-ext-toc__selector--translate-step .rmp-ext-toc__back {
+   border-bottom: 1px solid #AAA;
+   text-align: left;
+   width: 100%;
+   line-height: 32px;
+}
+
+.rmp-ext-toc__back span:first-of-type {
+   float: left;
+   padding: 3px 0;
+}
+
+button.rmp-ext-toc__lang-item {
+   width: 100%;
+   text-align: left;
+   padding: 0 12px 0 20px;
+   line-height: 32px;
+}
+
+
+.rmp-ext-toc__selector button:hover {
+   background-color: rgba(51,51,51,.25)
+}
+
+
+.rmp-ext-popover {
+   position: absolute;
+   bottom: 56px;
+   background-color: #666;
+   z-index: 9;
+   padding: 4px 6px;
+   border-radius: 4px;
+   font-size: 12px;
+   opacity: .875;
+   display: none
+}
+
+.rmp-annotation:hover .rmp-annotation__button,.rmp-ext-popover--visible {
+   display: block
+}
+
+.rmp-annotation {
+   position: absolute;
+   background-color: rgba(0,0,0,.8);
+   padding: 4px 6px;
+   color: #fff;
+   border: 1px solid #888;
+   display: none;
+   z-index: 3
+}
+
+.rmp-annotation--visible {
+   display: block
+}
+
+.rmp-annotation__button {
+   position: absolute;
+   top: -6px;
+   right: -6px;
+   background-color: #eee;
+   height: 18px;
+   width: 18px;
+   border-radius: 50%;
+   border: 0 none;
+   display: none;
+   cursor: pointer
+}
+
+.rmp-annotation__button svg {
+   fill: #666;
+   position: absolute;
+   top: 1px;
+   left: 1px
+}
+
+.rmp-annotation__button:hover svg {
+   fill: #333
+}
+
+.rmp-ext-poster, .rmp-ext-poster img {
+   width: 100%
+}
+.rmp-ext-poster img {
+   position: absolute;
+   margin: auto;
+   top: 0;
+   left: 0;
+   right: 0;
+   bottom: 0;
+
+   width: 100% !important;
+   height: auto !important;
+}
+
+.rmp-ext-poster {
+   position: absolute;
+   top: 0;
+   right: 0;
+   bottom: 0;
+   left: 0;
+   background-color: black;
+}
+
+.rmp-ext-poster--hidden {
+   display: none
+}
+
+.rmp-ext-settings {
+   width: 34px;
+   padding: 0 2px;
+}
+
+.rmp-ext-settings__selector {
+   position: absolute;
+   bottom: 56px;
+   border-radius: 4px;
+   display: none;
+   z-index: 8;
+   background-color: ${styles.submenuBgColor};
+   width: 260px;
+   right: 5px;
+   overflow: hidden;
+}
+
+.rmp-ext-settings__selector--open {
+   display: block
+}
+
+.rmp-ext-settings__selector button {
+   width: 100%;
+   text-align: left;
+   padding: 0 6px;
+   line-height: 32px;
+}
+
+.rmp-ext-settings__selector button:hover {
+   background-color: rgba(51,51,51,.25)
+}
+
+.rmp-ext-download__more .arrow, .rmp-ext-settings__more .arrow {
+   float: right;
+   width: 20px;
+   margin-top: 5px;
+}
+
+.rmp-ext-download__more .arrow svg, .rmp-ext-settings__more .arrow svg {
+   fill: ${styles.submenuColor}
+}
+
+.rmp-ext-settings__current-value, .rmp-ext-cc__current-value, .rmp-ext-toc__current-value {
+   float: right;
+   font-size: 11px;
+   color: #757575
+}
+
+.rmp-ext-cc__settings--progress .rmp-ext-cc__current-value {
+   font-style: italic;
+}
+
+.rmp-ext-cc__settings--progress {
+   background-color: transparent !important;
+}
+
+
+.rmp-ext-cc__settings--progress > span {
+   opacity: 0.5;
+}
+
+.rmp-ext-download__main-step, .rmp-ext-settings__main-step {
+   width: 100%;
+   left: 0;
+   position: relative;
+}
+
+.rmp-ext-download__main-step:after, .rmp-ext-download__additional-step:after,
+.rmp-ext-settings__main-step:after, .rmp-ext-settings__additional-step:after, .rplayer--right-playlist:after {
+   content: ' ';
+   display: table;
+   clear: both;
+}
+
+.rmp-ext-download__additional-step, .rmp-ext-settings__additional-step {
+   display: none;
+   position: absolute;
+   left: 265px;
+   bottom: 0;
+   width: 100%;
+   overflow: auto;
+}
+
+.rmp-ext-download__selector--additional .rmp-ext-download__additional-step,
+.rmp-ext-settings__selector--additional .rmp-ext-settings__additional-step {
+   display: block;
+   position: relative;
+   left: 0;
+   width: 100%;
+}
+
+.rmp-ext-download__selector--additional .rmp-ext-download__main-step,
+.rmp-ext-settings__selector--additional .rmp-ext-settings__main-step {
+   display: none;
+   position: absolute;
+   left: -265px;
+}
+
+button.rmp-ext-download__back, button.rmp-ext-settings__back {
+   border-bottom: 1px solid #AAA;
+}
+
+button.rmp-ext-download__back svg, button.rmp-ext-settings__back svg {
+   fill: ${styles.submenuColor};
+   float: left;
+}
+
+.rmp-ext-download__back > span:first-of-type, .rmp-ext-settings__back > span:first-of-type {
+   display: block;
+   float: left;
+   padding: 4px 0;
+}
+
+button.rmp-ext-settings__item {
+   padding-left: 20px
+}
+
+button.rmp-ext-settings__item.rmp-ext-settings__item--checked:before {
+   margin-top: -1px;
+}
+
+.rmp-ext-audio-tracks, .rmp-ext-search {
+   width: 34px;
+   padding: 0 2px;
+}
+
+.rmp-ext-search--hidden {
+   display: none;
+}
+
+.rmp-ext-audio-tracks__selector, .rmp-ext-search__selector {
+   position: absolute;
+   bottom: 56px;
+   border-radius: 4px;
+   display: none;
+   z-index: 8;
+   background-color: ${styles.submenuBgColor};
+   width: 260px;
+   right: 5px;
+   overflow: auto;
+}
+
+.rmp-ext-audio-tracks__selector--open, .rmp-ext-search__selector--open {
+   display: block
+}
+
+.rmp-ext-audio-tracks__selector button, .rmp-ext-search__selector button {
+   width: 100%;
+   text-align: left;
+   padding: 0 6px 0 20px;
+   line-height: 32px;
+}
+
+.rmp-ext-audio-tracks__selector button:hover, .rmp-ext-search__selector button:hover {
+   background-color: rgba(51,51,51,.25)
+}
+
+.rmp-ext-search__captions {
+   overflow: auto;
+   max-height: 160px;
+}
+
+.rmp-ext-search__input {
+   width: 100%;
+   margin-top: 2px;
+}
+
+.rplayer--mobile .rmp-ext-search__input {
+   height: 40px;
+}
+
+.rmp-ext-search__item--current {
+   font-weight: 600;
+}
+
+.rmp-ext-search__cc-text {
+   font-family: Roboto, "Arial Unicode Ms", Arial, Helvetica, Verdana, sans-serif;
+   overflow: hidden;
+   text-overflow: ellipsis;
+   display: inline-block !important;
+   white-space: nowrap;
+   width: 156px;
+   padding-left: 6px !important;
+   vertical-align: middle;
+}
+
+.rmp-ext-search__cc-time {
+   font-family: Roboto, "Arial Unicode Ms", Arial, Helvetica, Verdana, sans-serif;
+   display: inline-block !important;
+   width: 59px;
+   padding-right: 5px;
+   vertical-align: middle;
+   overflow: hidden;
+   margin-left: -5px;
+}
+
+button.rmp-ext-cc__more {
+   text-align: left;
+   width: 100%;
+   line-height: 32px;
+   padding-left: 20px;
+}
+
+.rmp-ext-cc__main-step button.rmp-ext-cc__more {
+   border-top: 1px solid #AAA;
+}
+
+.rmp-ext-cc__more .arrow {
+   float: right;
+   width: 20px;
+   margin-top: 4px;
+}
+
+.rmp-ext-cc__more .arrow svg, button.rmp-ext-cc__back svg {
+   fill: ${styles.submenuColor}
+}
+
+.rmp-ext-cc__main-step, .rmp-ext-cc__settings-step, .rmp-ext-cc__additional-step {
+   position: relative;
+   left: 0;
+   width: 100%;
+   overflow: auto;
+   display: block;
+}
+
+.rmp-ext-cc__selector--settings-step .rmp-ext-cc__main-step, .rmp-ext-cc__selector--additional-step .rmp-ext-cc__main-step,
+.rmp-ext-cc__selector--additional-step .rmp-ext-cc__settings-step, .rmp-ext-cc__selector--translate-step .rmp-ext-cc__main-step {
+   display: none;
+   position: absolute;
+   left: -255px;
+}
+
+.rmp-ext-cc__selector--main-step .rmp-ext-cc__settings-step, .rmp-ext-cc__selector--main-step .rmp-ext-cc__additional-step,
+.rmp-ext-cc__selector--settings-step .rmp-ext-cc__additional-step, .rmp-ext-cc__selector--translate-step .rmp-ext-cc__additional-step {
+   display: none;
+   position: absolute;
+   left: 255px;
+}
+
+.rmp-ext-cc__selector--settings-step .rmp-ext-cc__translate-wrapper, .rmp-ext-cc__selector--translate-step .rmp-ext-cc__settings-wrapper {
+   display: none;
+}
+
+.rmp-ext-cc__selector button {
+   text-align: left;
+   width: 100%;
+   line-height: 32px;
+}
+
+button.rmp-ext-cc__back {
+   border-bottom: 1px solid #AAA;
+}
+
+.rmp-ext-cc__back span:first-of-type {
+   float: left;
+   padding: 3px 0;
+}
+
+.rmp-ext-help__button {
+    position: absolute;
+    top: 8px;
+    right: 10px;
+    z-index: 6;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+}
+
+.rmp-ext-help, .rmp-ext-help__canvas {
+   position: absolute;
+   top: 0;
+   right: 0;
+   left: 0;
+   bottom: 0;
+}
+
+.rmp-ext-help__canvas, rmp-ext-help__canvas--visible .rmp-ext-help__button {
+   display: none;
+}
+
+.rmp-ext-help__canvas--visible, .rmp-ext-help__canvas--visible .rmp-ext-help__canvas {
+   display: block;
+   z-index: 999;
+}
+
+.rmp-ext-title {
+   width: 100%;
+   top: 0;
+   z-index: 2
+}
+
+.rmp-ext-title__title {
+   font-size: 20px;
+   padding: 12px 50px 0 12px;
+   opacity: 0.95;
+   display: block;
+
+   max-height: 60px;
+   overflow: hidden;
+
+   display: -webkit-box;
+   -webkit-box-orient: vertical;
+   text-overflow: ellipsis;
+   -webkit-line-clamp: 2;
+}
+
+.rmp-ext-prev, .rmp-ext-next {
+   display: none;
+   position: absolute;
+   top: 50%;
+   margin-top: -34px;
+   cursor: pointer;
+   opacity: 0.75;
+   z-index: 4;
+}
+
+.rplayer--fullscreen .rmp-ext-prev, .rplayer--fullscreen .rmp-ext-next {
+   display: block;
+}
+
+.rmp-ext-prev:hover, .rmp-ext-next:hover {
+   opacity: 1;
+}
+
+.rmp-ext-prev {
+   transition: left 150ms ease
+}
+
+.rmp-ext-next {
+   transition: right 150ms ease
+}
+
+.rmp-ext-prev, .rplayer__inner--light.rplayer__inner--hovering .rmp-ext-prev {
+   left: -120px;
+}
+
+.rplayer__inner--light .rmp-ext-prev,
+.rmp-extensions--hidden > .rmp-ext-prev {
+   left: -175px;
+}
+
+.rmp-ext-next, .rplayer__inner--light.rplayer__inner--hovering .rmp-ext-next {
+   right: -120px;
+}
+
+.rplayer__inner--light .rmp-ext-next,
+.rmp-extensions--hidden > .rmp-ext-next {
+   right: -175px;
+}
+
+@media only screen and (max-device-width: 768px){
+.rplayer__inner .rmp-ext-next:hover {
+   right: -120px !important;
+}
+
+.rplayer__inner .rmp-ext-prev:hover {
+   left: -120px !important;
+}
+}
+
+.rmp-ext-prev__button, .rmp-ext-next__button {
+   background-color: #333;
+   border: 0;
+   height: 67.5px;
+   cursor: pointer
+}
+
+.rmp-ext-prev__button {
+   border-radius: 0 50% 50% 0;
+   float: right;
+   padding-left: 0;
+}
+
+.rmp-ext-next__button {
+   border-radius: 50% 0 0 50%;
+   float: left;
+   padding-right: 0;
+}
+
+.rmp-ext-prev__thumbnail, .rmp-ext-next__thumbnail {
+    width: 120px;
+    height: 67.5px;
+    border: 5px solid #333;
+}
+
+.rmp-ext-prev__button, .rmp-ext-prev__thumbnail {
+   -webkit-box-shadow: -2px 4px 5px 0px rgba(50, 50, 50, 0.75);
+   box-shadow: -2px 4px 5px 0px rgba(50, 50, 50, 0.75);
+}
+
+.rmp-ext-next__button, .rmp-ext-next__thumbnail {
+   -webkit-box-shadow: 2px 4px 5px 0px rgba(50, 50, 50, 0.75);
+   box-shadow: 2px 4px 5px 0px rgba(50, 50, 50, 0.75);
+}
+
+.rmp-ext-next:hover {
+   right: 0 !important;
+}
+
+.rmp-ext-prev:hover {
+   left: 0  !important;
+}
+
+.rmp-ext-prev__button svg, .rmp-ext-next__button svg {
+   fill: ${styles.mainColor};
+}
+
+.rmp-no-video {
+   position: absolute;
+   top: 50%;
+   margin-top: -.5em;
+   display: block;
+   text-align: center;
+   left: 0;
+   right: 0;
+}
+
+.rmp-ext-buffering {
+   position: absolute;
+   top: 0;
+   left: 0;
+   right: 0;
+   bottom: 0;
+   background: rgba(51,51,51,.5);
+   display: none;
+   z-index: 9999;
+}
+
+.rmp-ext-buffering--processing {
+   display: block;
+}
+
+.rmp-ext-buffering__message {
+   padding: 20px;
+   display: inline-block;
+   position: absolute;
+   left: 50%;
+   top: 50%;
+   transform: translate(-50%, -50%);
+}
+
+.rmp-ext-buffering__message svg {
+   fill: #FFF;
+   opacity: .75;
+   width: 50px;
+   height: 50px;
+   animation: spin 1.5s linear infinite;
+   animation-direction: reverse;
+}
+
+.rmp-ext-buffering--processing ~ .rmp-ext-placeholder {
+   opacity: 0;
+}
+
+.rmp-ext-download__main-step {
+   position: relative;
+   left: 0;
+   width: 100%;
+   overflow: auto;
+
+   -webkit-transition: left .25s ease;
+   transition: left .25s ease;
+}
+
+.rmp-ext-download-hidden {
+   position: absolute;
+   opacity: 0;
+}
+
+.rmp-ext-download__selector {
+   position: absolute;
+   bottom: 56px;
+   border-radius: 4px;
+   display: none;
+   z-index: 8;
+   background-color: ${styles.submenuBgColor};
+   width: 200px;
+   right: 5px;
+   overflow: hidden;
+}
+
+.rmp-ext-download__selector--open {
+   display: block
+}
+
+.rmp-ext-download__selector button {
+   width: 100%;
+   text-align: left;
+   padding: 0 6px;
+   line-height: 32px;
+}
+
+.rmp-ext-download__selector button:hover {
+   background-color: rgba(51,51,51,.25)
+}
+
+.rmp-ext-c2pa {
+   display: none;
+   position: absolute;
+   right: 12px;
+   top: 12px;
+   transition: opacity .25s ease;
+}
+
+.rmp-ext-c2pa__items-wrapper {
+   max-height: 250px;
+   overflow-y: auto;
+   overflow-x: hidden;
+}
+
+.rmp-ext-c2pa--visible { 
+   display: block !important;
+}
+
+.rmp-ext-c2pa--no-data > .rmp-ext-c2pa__button > svg {
+   fill: #F7B100;
+}
+
+.rmp-ext-c2pa--invalid > .rmp-ext-c2pa__button > svg {
+   fill: #E62048;
+}
+
+.rplayer__inner--playing .rmp-ext-c2pa {
+   opacity: 0;
+}
+.rplayer__inner--hovering .rmp-ext-c2pa {
+   opacity: 1 !important;
+}
+
+.rmp-ext-c2pa__selector.rmp-ext-c2pa__selector--open {
+   display: block;
+}
+
+.rmp-ext-c2pa__selector {
+   display: none;
+   background-color: #FFFFFF;
+   padding: 16px;
+   position: absolute;
+   min-width: 320px;
+   max-width: 320px;
+   z-index: 100;
+   top: 0;
+   right: 40px;
+   border-radius: 8px;
+   width: max-content;
+}
+
+.rmp-ext-c2pa button {
+   background-color: transparent;
+   border: none;
+   cursor: pointer;
+}
+
+.rmp-ext-c2pa > button > svg {
+   width: 24px;
+   height: 24px;
+   display: block;
+   fill: #fff;
+   z-index: 100;
+   position: relative;
+}
+
+.rmp-ext-c2pa__item {
+   position: relative;
+   min-height: 45px;
+}
+
+.rmp-ext-c2pa__item--collapsed::before {
+   content: "";
+   display: block;
+   position: absolute;
+   top: 5px;
+   left: 0;
+   width: 16px;
+   height: 16px;
+   background-color: #414141;
+   border-radius: 50%;
+}
+
+.rmp-ext-c2pa__item--invalid .rmp-ext-c2pa__item--collapsed::before {
+   background-color: #E62048;
+}
+
+.rmp-ext-c2pa__item--collapsed::after {
+   content: "";
+   display: block;
+   position: absolute;
+   top: 9px;
+   left: 4px;
+   width: 8px;
+   height: 8px;
+   background-color: #A9A9A9;
+   border-radius: 50%;
+}
+
+.rmp-ext-c2pa__item:not(:last-of-type) .rmp-ext-c2pa__item--line {
+   width: 2px;
+   background-color: #414141;
+   height: 100%;
+   position: absolute;
+   left: 7px;
+   top: 21px;
+}
+
+.rmp-ext-c2pa__item--section-title {
+   font-size: 12px;
+   color: #767676;
+   margin-left: 35px;
+   margin-bottom: 5px;
+ }
+
+ .rmp-ext-c2pa__item--collapsed .rmp-ext-c2pa__item--section-title {
+   margin-left: 0;
+ }
+
+.rmp-ext-c2pa__item--wrapper {
+   display: flex;
+   align-items: start;
+   margin-bottom: 12px;
+   position: relative;
+}
+
+.rmp-ext-c2pa__item--toggler {
+   padding: 0;
+   position: absolute;
+   top: -5px;
+   right: 0px;
+   transform: rotate(0deg);
+   transition: transform .2s ease-in-out;
+}
+
+.rmp-ext-c2pa__item--toggler-opened {
+   transform: rotate(-180deg);
+}
+
+.rmp-ext-c2pa__item--thumbnail {
+   min-width: 30px;
+   height: 25px;
+   margin: 0 5px 0 0;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   overflow: hidden;
+   border-radius: 2px;
+   position: relative;
+}
+
+.rmp-ext-c2pa__item--thumbnail img {
+   object-fit: cover;
+   width: 100%;
+}
+
+.rmp-ext-c2pa__item--thumbnail svg {
+   fill: #000000;
+   width: 20px;
+   opacity: 0.8;
+}
+
+.rmp-ext-c2pa__item--info-wrapper {
+   line-height: 15px;
+   width: 100%;
+}
+
+.rmp-ext-c2pa__item:not(:last-of-type) .rmp-ext-c2pa__item--info-wrapper {
+   border-bottom: 1px solid #E5E5E5;
+   padding-bottom: 12px;
+}
+
+.rmp-ext-c2pa__item--title {
+   word-wrap: anywhere;
+   font-size: 14px;
+   font-weight: 500;
+   max-width: 230px;
+   padding-right: 20px;
+   margin-bottom: 6px;
+}
+
+.rmp-ext-c2pa__item--status-message, .rmp-ext-c2pa__item--status-message-extended {
+   font-size: 12px;
+   color: #767676;
+}
+
+.rmp-ext-c2pa__item--status-message-extended {
+   display: none;
+}
+
+.rmp-ext-c2pa__item-details-visible .rmp-ext-c2pa__item--status-message-extended {
+   display: block;
+}
+
+.rmp-ext-c2pa__item-details-visible .rmp-ext-c2pa__item--status-message {
+   display: none;
+}
+
+.rmp-ext-c2pa__view-more {
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   width: 100%;
+   height: 40px;
+   margin-top: 6px;
+   padding: 5px;
+   border-radius: 100px;
+   background-color: #3665F3 !important;
+   color: #FFFFFF !important;
+   font-weight: 700;
+   font-size: 14px;
+   text-decoration: none;
+}
+
+.rmp-ext-c2pa__item-details {
+   display: none;
+}
+
+.rmp-ext-c2pa__item-details-visible .rmp-ext-c2pa__item-details {
+   display: flex;
+   flex-direction: column;
+   align-items: flex-start;
+   margin-top: 15px;
+}
+
+.rmp-ext-c2pa__item-details-visible .rmp-ext-c2pa__item-details > div {
+   display: flex;
+}
+
+.rmp-ext-c2pa__item--collapsed {
+   padding-left: 20px;
+}
+
+.rmp-ext-c2pa__item--collapsed .rmp-ext-c2pa__item-details-visible .rmp-ext-c2pa__item-details > div:nth-child(2) {
+   flex-direction: column;
+   margin-top: 16px;
+}
+
+.rmp-ext-c2pa__item--collapsed .rmp-ext-c2pa__item-details-visible .rmp-ext-c2pa__item-details > div:nth-child(2) > .rmp-ext-c2pa__item--wrapper {
+   margin: 5px 0px 0 -5px;
+}
+
+.rmp-ext-c2pa__item-details--icon {
+   margin-top: 5px;
+}
+
+.rmp-ext-c2pa__item-details > svg {
+   min-width: 32px;
+}
+
+.rmp-ext-c2pa__item-details--wrapper {
+   margin-left: 10px;
+}
+
+.rmp-ext-c2pa__item-details--issuer {
+   color: #767676;
+   font-size: 12px;
+   display: flex;
+}
+
+.rmp-ext-c2pa__item-details--issuer-title {
+   font-weight: 700;
+   min-width: 65px;
+   margin-bottom: 4px;
+}
+
+.rmp-ext-c2pa__view-more svg {
+   fill: #FFFFFF;
+   margin-left: 5px;
+}
+
+.rmp-ext-progress__c2pa-status {
+   position: absolute;
+   left: 0;
+   top: 0;
+   bottom: 0;
+   width: 100%;
+}
+
+.rmp-ext-c2pa__items-status--wrapper {
+   font-size: 12px;
+   margin-bottom: 24px;
+   color: #767676;
+   display: flex;
+   text-transform: uppercase;
+}
+
+.rmp-ext-c2pa__items-status {
+   padding-left: 5px;
+}
+
+.rmp-ext-c2pa__items-status--success {
+   color: #767676;
+}
+
+.rmp-ext-c2pa__items-status--no-data {
+   color: #F7B100;
+}
+
+.rmp-ext-c2pa__items-status--invalid {
+   color: #E62048;
+}
+
+.rmp-ext-c2pa__items-status--undefined {
+   color: #E62048;
+}
+
+.rmp-ext-c2pa__no-data-message-wrapper {
+   display: flex;
+   align-items: center;
+   margin-bottom: 24px;
+}
+
+.rmp-ext-c2pa__no-data-message-wrapper > svg {
+   fill: #767676;
+}
+
+.rmp-ext-c2pa__no-data-message {
+   max-width: 220px;
+   margin-left: 12px;
+   font-size: 12px;
+   color: #767676;
+   font-weight: 500;
+}
+
+.rmp-ext-progress__c2pa-status--invalid-segment {
+   position: absolute;
+   top: 0;
+   bottom: 0;
+   background-color: orange;
+   z-index: 6;
+   transform: scale(1);
+   transition: all .1s ease-in-out;
+}
+
+.rmp-ext-bottom-next--hidden, .rmp-ext-bottom-prev--hidden {
+   display: none;
+}
+
+.rmp-ext-search__selector > .rmp-ext-search__cc-clear {
+   position: absolute;
+   bottom: 3px;
+   right: 5px;
+   width: 15px;
+   height: 15px;
+   padding: 0;
+}
+
+.rmp-ext-search__selector > .rmp-ext-search__cc-clear:hover {
+   background-color: transparent;
+   opacity: 0.8;
+}
+
+.rmp-ext-search__selector > .rmp-ext-search__cc-clear svg {
+   width: 15px;
+   height: 15px;
+   fill: #707070;
+}
+
+.rmp-ext-live {
+   width: 34px;
+}
+
+.rmp-ext-live .broadcast-off {
+   display: block;
+}
+
+.rmp-ext-live .broadcast-on {
+   display: none;
+}
+
+.rmp-ext-live--live .broadcast-off {
+   display: none;
+}
+
+.rmp-ext-live--live .broadcast-on {
+   display: block;
+   fill: #ff1111;
+}
+
+.rmp-ext-progress__hidden > span{
+   visibility: hidden;
+}
+
+@media only screen and (max-width: 1224px) {
+   .rmp-ext-progress__hidden > .rmp-ext-progress__current {
+      visibility: visible !important;
+   }
+}
+
+.rmp-ext-error {
+   padding: 20px;
+   text-align: center;
+   z-index: 9999;
+   position: absolute;
+   width: 100%;
+   height: 100%;
+   background-color: black;
+   color: #FFFFFF;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   flex-direction: column;
+}
+
+.rmp-ext-error > svg {
+   width: 50px;
+   height: 50px;
+   fill: #FFFFFF;
+   margin-bottom: 20px;
+}
+    
+.rmp-ext-error--hidden {
+   display: none;
+}
+
+
+
+   `;
+}
+
+export default function appendStyles(options, rect) {
+   const css = _getStyles(options, rect) + ' ' + getPlaylistStyles(options, rect);
+   const head = document.head || first(document.getElementsByTagName('head'));
+
+   const style = createElement('style', { type: 'text/css' });
+
+   if (style.styleSheet) {
+      if (window.$) {
+         window.$('<style type="text/css">' + css + '</style>').appendTo('head');
+      } else {
+         style.styleSheet.cssText = css;
+      }
+   } else {
+      style.appendChild(document.createTextNode(css));
+   }
+   head.appendChild(style);
+}