@vidispine/vdt-videojs 21.3.0 → 22.1.0-pre.1

package/{lib/style.css → dist/index.css}

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 .vjs-modal-dialog .vjs-modal-dialog-content, .video-js .vjs-modal-dialog, .vjs-button > .vjs-icon-placeholder:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
   position: absolute;
   top: 0;
@@ -379,7 +378,9 @@
 
 .video-js.vjs-fluid,
 .video-js.vjs-16-9,
-.video-js.vjs-4-3 {
+.video-js.vjs-4-3,
+.video-js.vjs-9-16,
+.video-js.vjs-1-1 {
   width: 100%;
   max-width: 100%;
   height: 0;
@@ -393,6 +394,14 @@
   padding-top: 75%;
 }
 
+.video-js.vjs-9-16 {
+  padding-top: 177.7777777778%;
+}
+
+.video-js.vjs-1-1 {
+  padding-top: 100%;
+}
+
 .video-js.vjs-fill {
   width: 100%;
   height: 100%;
@@ -451,8 +460,8 @@ body.vjs-full-window {
 
 .vjs-lock-showing {
   display: block !important;
-  opacity: 1;
-  visibility: visible;
+  opacity: 1 !important;
+  visibility: visible !important;
 }
 
 .vjs-no-js {
@@ -487,7 +496,13 @@ body.vjs-full-window {
   border: 0.06666em solid #fff;
   background-color: #2B333F;
   background-color: rgba(43, 51, 63, 0.7);
+  -webkit-border-radius: 0.3em;
+  -moz-border-radius: 0.3em;
   border-radius: 0.3em;
+  -webkit-transition: all 0.4s;
+  -moz-transition: all 0.4s;
+  -ms-transition: all 0.4s;
+  -o-transition: all 0.4s;
   transition: all 0.4s;
 }
 .vjs-big-play-centered .vjs-big-play-button {
@@ -502,6 +517,10 @@ body.vjs-full-window {
   border-color: #fff;
   background-color: #73859f;
   background-color: rgba(115, 133, 159, 0.5);
+  -webkit-transition: all 0s;
+  -moz-transition: all 0s;
+  -ms-transition: all 0s;
+  -o-transition: all 0s;
   transition: all 0s;
 }
 
@@ -546,6 +565,7 @@ body.vjs-full-window {
 }
 .video-js .vjs-modal-dialog {
   background: rgba(0, 0, 0, 0.8);
+  background: -webkit-linear-gradient(-90deg, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0));
   background: linear-gradient(180deg, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0));
   overflow: auto;
 }
@@ -614,6 +634,11 @@ body.vjs-full-window {
   color: #2B333F;
 }
 
+.video-js .vjs-menu *:not(.vjs-selected):focus:not(:focus-visible),
+.js-focus-visible .vjs-menu *:not(.vjs-selected):focus:not(.focus-visible) {
+  background: none;
+}
+
 .vjs-menu li.vjs-menu-title {
   text-align: center;
   text-transform: uppercase;
@@ -670,6 +695,10 @@ body.vjs-full-window {
 }
 
 .video-js .vjs-menu-button-inline {
+  -webkit-transition: all 0.4s;
+  -moz-transition: all 0.4s;
+  -ms-transition: all 0.4s;
+  -o-transition: all 0.4s;
   transition: all 0.4s;
   overflow: hidden;
 }
@@ -694,6 +723,10 @@ body.vjs-full-window {
   top: 0;
   padding: 0;
   margin: 0;
+  -webkit-transition: all 0.4s;
+  -moz-transition: all 0.4s;
+  -ms-transition: all 0.4s;
+  -o-transition: all 0.4s;
   transition: all 0.4s;
 }
 
@@ -737,15 +770,27 @@ body.vjs-full-window {
 }
 
 .vjs-has-started .vjs-control-bar {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
   visibility: visible;
   opacity: 1;
+  -webkit-transition: visibility 0.1s, opacity 0.1s;
+  -moz-transition: visibility 0.1s, opacity 0.1s;
+  -ms-transition: visibility 0.1s, opacity 0.1s;
+  -o-transition: visibility 0.1s, opacity 0.1s;
   transition: visibility 0.1s, opacity 0.1s;
 }
 
 .vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
   visibility: visible;
   opacity: 0;
+  pointer-events: none;
+  -webkit-transition: visibility 1s, opacity 1s;
+  -moz-transition: visibility 1s, opacity 1s;
+  -ms-transition: visibility 1s, opacity 1s;
+  -o-transition: visibility 1s, opacity 1s;
   transition: visibility 1s, opacity 1s;
 }
 
@@ -771,6 +816,10 @@ body.vjs-full-window {
   padding: 0;
   height: 100%;
   width: 4em;
+  -webkit-box-flex: none;
+  -moz-box-flex: none;
+  -webkit-flex: none;
+  -ms-flex: none;
   flex: none;
 }
 
@@ -779,6 +828,10 @@ body.vjs-full-window {
   line-height: 1.67;
 }
 
+.vjs-button > .vjs-icon-placeholder {
+  display: block;
+}
+
 .video-js .vjs-control:focus:before,
 .video-js .vjs-control:hover:before,
 .video-js .vjs-control:focus {
@@ -806,8 +859,18 @@ body.vjs-full-window {
 
 .video-js .vjs-progress-control {
   cursor: pointer;
+  -webkit-box-flex: auto;
+  -moz-box-flex: auto;
+  -webkit-flex: auto;
+  -ms-flex: auto;
   flex: auto;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
   align-items: center;
   min-width: 4em;
   touch-action: none;
@@ -822,7 +885,13 @@ body.vjs-full-window {
 }
 
 .vjs-liveui .vjs-progress-control {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
   align-items: center;
 }
 
@@ -831,7 +900,15 @@ body.vjs-full-window {
 }
 
 .video-js .vjs-progress-holder {
+  -webkit-box-flex: auto;
+  -moz-box-flex: auto;
+  -webkit-flex: auto;
+  -ms-flex: auto;
   flex: auto;
+  -webkit-transition: all 0.2s;
+  -moz-transition: all 0.2s;
+  -ms-transition: all 0.2s;
+  -o-transition: all 0.2s;
   transition: all 0.2s;
   height: 0.3em;
 }
@@ -881,6 +958,8 @@ body.vjs-full-window {
 .video-js .vjs-time-tooltip {
   background-color: #fff;
   background-color: rgba(255, 255, 255, 0.8);
+  -webkit-border-radius: 0.3em;
+  -moz-border-radius: 0.3em;
   border-radius: 0.3em;
   color: #000;
   float: right;
@@ -929,6 +1008,10 @@ body.vjs-full-window {
 .video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display {
   visibility: hidden;
   opacity: 0;
+  -webkit-transition: visibility 1s, opacity 1s;
+  -moz-transition: visibility 1s, opacity 1s;
+  -ms-transition: visibility 1s, opacity 1s;
+  -o-transition: visibility 1s, opacity 1s;
   transition: visibility 1s, opacity 1s;
 }
 
@@ -952,6 +1035,7 @@ body.vjs-full-window {
   /* Safari */
   -webkit-user-select: none;
   /* Konqueror HTML */
+  -khtml-user-select: none;
   /* Firefox */
   -moz-user-select: none;
   /* Internet Explorer/Edge */
@@ -968,16 +1052,25 @@ body.vjs-full-window {
 
 .video-js .vjs-slider:focus {
   text-shadow: 0em 0em 1em white;
+  -webkit-box-shadow: 0 0 1em #fff;
+  -moz-box-shadow: 0 0 1em #fff;
   box-shadow: 0 0 1em #fff;
 }
 
 .video-js .vjs-mute-control {
   cursor: pointer;
+  -webkit-box-flex: none;
+  -moz-box-flex: none;
+  -webkit-flex: none;
+  -ms-flex: none;
   flex: none;
 }
 .video-js .vjs-volume-control {
   cursor: pointer;
   margin-right: 1em;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
 }
 
@@ -994,12 +1087,20 @@ body.vjs-full-window {
 }
 
 .video-js .vjs-volume-panel {
+  -webkit-transition: width 1s;
+  -moz-transition: width 1s;
+  -ms-transition: width 1s;
+  -o-transition: width 1s;
   transition: width 1s;
 }
 .video-js .vjs-volume-panel.vjs-hover .vjs-volume-control, .video-js .vjs-volume-panel:active .vjs-volume-control, .video-js .vjs-volume-panel:focus .vjs-volume-control, .video-js .vjs-volume-panel .vjs-volume-control:active, .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control, .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active {
   visibility: visible;
   opacity: 1;
   position: relative;
+  -webkit-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s;
+  -moz-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s;
+  -ms-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s;
+  -o-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s;
   transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s;
 }
 .video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal, .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal {
@@ -1009,10 +1110,18 @@ body.vjs-full-window {
 }
 .video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-vertical, .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-vertical {
   left: -3.5em;
+  -webkit-transition: left 0s;
+  -moz-transition: left 0s;
+  -ms-transition: left 0s;
+  -o-transition: left 0s;
   transition: left 0s;
 }
 .video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover, .video-js .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active {
   width: 10em;
+  -webkit-transition: width 0.1s;
+  -moz-transition: width 0.1s;
+  -ms-transition: width 0.1s;
+  -o-transition: width 0.1s;
   transition: width 0.1s;
 }
 .video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-mute-toggle-only {
@@ -1023,10 +1132,18 @@ body.vjs-full-window {
   height: 8em;
   width: 3em;
   left: -3000em;
+  -webkit-transition: visibility 1s, opacity 1s, height 1s 1s, width 1s 1s, left 1s 1s, top 1s 1s;
+  -moz-transition: visibility 1s, opacity 1s, height 1s 1s, width 1s 1s, left 1s 1s, top 1s 1s;
+  -ms-transition: visibility 1s, opacity 1s, height 1s 1s, width 1s 1s, left 1s 1s, top 1s 1s;
+  -o-transition: visibility 1s, opacity 1s, height 1s 1s, width 1s 1s, left 1s 1s, top 1s 1s;
   transition: visibility 1s, opacity 1s, height 1s 1s, width 1s 1s, left 1s 1s, top 1s 1s;
 }
 
 .video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
+  -webkit-transition: visibility 1s, opacity 1s, height 1s 1s, width 1s, left 1s 1s, top 1s 1s;
+  -moz-transition: visibility 1s, opacity 1s, height 1s 1s, width 1s, left 1s 1s, top 1s 1s;
+  -ms-transition: visibility 1s, opacity 1s, height 1s 1s, width 1s, left 1s 1s, top 1s 1s;
+  -o-transition: visibility 1s, opacity 1s, height 1s 1s, width 1s, left 1s 1s, top 1s 1s;
   transition: visibility 1s, opacity 1s, height 1s 1s, width 1s, left 1s 1s, top 1s 1s;
 }
 
@@ -1036,6 +1153,10 @@ body.vjs-full-window {
   visibility: visible;
   opacity: 1;
   position: relative;
+  -webkit-transition: none;
+  -moz-transition: none;
+  -ms-transition: none;
+  -o-transition: none;
   transition: none;
 }
 
@@ -1047,6 +1168,9 @@ body.vjs-full-window {
 }
 
 .video-js .vjs-volume-panel {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
 }
 
@@ -1074,6 +1198,7 @@ body.vjs-full-window {
 .video-js .vjs-volume-level:before {
   position: absolute;
   font-size: 0.9em;
+  z-index: 1;
 }
 
 .vjs-slider-vertical .vjs-volume-level {
@@ -1082,6 +1207,7 @@ body.vjs-full-window {
 .vjs-slider-vertical .vjs-volume-level:before {
   top: -0.5em;
   left: -0.3em;
+  z-index: 1;
 }
 
 .vjs-slider-horizontal .vjs-volume-level {
@@ -1116,6 +1242,83 @@ body.vjs-full-window {
   left: -2em;
 }
 
+.video-js .vjs-volume-tooltip {
+  background-color: #fff;
+  background-color: rgba(255, 255, 255, 0.8);
+  -webkit-border-radius: 0.3em;
+  -moz-border-radius: 0.3em;
+  border-radius: 0.3em;
+  color: #000;
+  float: right;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 1em;
+  padding: 6px 8px 8px 8px;
+  pointer-events: none;
+  position: absolute;
+  top: -3.4em;
+  visibility: hidden;
+  z-index: 1;
+}
+
+.video-js .vjs-volume-control:hover .vjs-volume-tooltip,
+.video-js .vjs-volume-control:hover .vjs-progress-holder:focus .vjs-volume-tooltip {
+  display: block;
+  font-size: 1em;
+  visibility: visible;
+}
+
+.video-js .vjs-volume-vertical:hover .vjs-volume-tooltip,
+.video-js .vjs-volume-vertical:hover .vjs-progress-holder:focus .vjs-volume-tooltip {
+  left: 1em;
+  top: -12px;
+}
+
+.video-js .vjs-volume-control.disabled:hover .vjs-volume-tooltip {
+  font-size: 1em;
+}
+
+.video-js .vjs-volume-control .vjs-mouse-display {
+  display: none;
+  position: absolute;
+  width: 100%;
+  height: 1px;
+  background-color: #000;
+  z-index: 1;
+}
+
+.video-js .vjs-volume-horizontal .vjs-mouse-display {
+  width: 1px;
+  height: 100%;
+}
+
+.vjs-no-flex .vjs-volume-control .vjs-mouse-display {
+  z-index: 0;
+}
+
+.video-js .vjs-volume-control:hover .vjs-mouse-display {
+  display: block;
+}
+
+.video-js.vjs-user-inactive .vjs-volume-control .vjs-mouse-display {
+  visibility: hidden;
+  opacity: 0;
+  -webkit-transition: visibility 1s, opacity 1s;
+  -moz-transition: visibility 1s, opacity 1s;
+  -ms-transition: visibility 1s, opacity 1s;
+  -o-transition: visibility 1s, opacity 1s;
+  transition: visibility 1s, opacity 1s;
+}
+
+.video-js.vjs-user-inactive.vjs-no-flex .vjs-volume-control .vjs-mouse-display {
+  display: none;
+}
+
+.vjs-mouse-display .vjs-volume-tooltip {
+  color: #fff;
+  background-color: #000;
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
 .vjs-poster {
   display: inline-block;
   vertical-align: middle;
@@ -1147,8 +1350,18 @@ body.vjs-full-window {
 }
 
 .video-js .vjs-live-control {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: flex-start;
+  -webkit-align-items: flex-start;
+  -ms-flex-align: flex-start;
   align-items: flex-start;
+  -webkit-box-flex: auto;
+  -moz-box-flex: auto;
+  -webkit-flex: auto;
+  -ms-flex: auto;
   flex: auto;
   font-size: 1em;
   line-height: 3em;
@@ -1166,7 +1379,12 @@ body.vjs-full-window {
 }
 
 .video-js .vjs-seek-to-live-control {
+  align-items: center;
   cursor: pointer;
+  -webkit-box-flex: none;
+  -moz-box-flex: none;
+  -webkit-flex: none;
+  -ms-flex: none;
   flex: none;
   display: inline-flex;
   height: 100%;
@@ -1203,6 +1421,10 @@ body.vjs-full-window {
 }
 
 .video-js .vjs-time-control {
+  -webkit-box-flex: none;
+  -moz-box-flex: none;
+  -webkit-flex: none;
+  -ms-flex: none;
   flex: none;
   font-size: 1em;
   line-height: 3em;
@@ -1240,6 +1462,10 @@ body.vjs-full-window {
 }
 
 .video-js .vjs-play-control .vjs-icon-placeholder {
+  -webkit-box-flex: none;
+  -moz-box-flex: none;
+  -webkit-flex: none;
+  -ms-flex: none;
   flex: none;
 }
 
@@ -1275,19 +1501,35 @@ body.vjs-full-window {
 }
 
 video::-webkit-media-text-track-display {
+  -moz-transform: translateY(-3em);
+  -ms-transform: translateY(-3em);
+  -o-transform: translateY(-3em);
+  -webkit-transform: translateY(-3em);
   transform: translateY(-3em);
 }
 
 .video-js.vjs-user-inactive.vjs-playing video::-webkit-media-text-track-display {
+  -moz-transform: translateY(-1.5em);
+  -ms-transform: translateY(-1.5em);
+  -o-transform: translateY(-1.5em);
+  -webkit-transform: translateY(-1.5em);
   transform: translateY(-1.5em);
 }
 
 .video-js .vjs-picture-in-picture-control {
   cursor: pointer;
+  -webkit-box-flex: none;
+  -moz-box-flex: none;
+  -webkit-flex: none;
+  -ms-flex: none;
   flex: none;
 }
 .video-js .vjs-fullscreen-control {
   cursor: pointer;
+  -webkit-box-flex: none;
+  -moz-box-flex: none;
+  -webkit-flex: none;
+  -ms-flex: none;
   flex: none;
 }
 .vjs-playback-rate > .vjs-menu-button,
@@ -1352,8 +1594,7 @@ video::-webkit-media-text-track-display {
 .vjs-seeking .vjs-loading-spinner,
 .vjs-waiting .vjs-loading-spinner {
   display: block;
-  -webkit-animation: vjs-spinner-show 0s linear 0.3s forwards;
-          animation: vjs-spinner-show 0s linear 0.3s forwards;
+  animation: vjs-spinner-show 0s linear 0.3s forwards;
 }
 
 .vjs-loading-spinner:before,
@@ -1457,7 +1698,7 @@ video::-webkit-media-text-track-display {
 
 .video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before {
   font-family: VideoJS;
-  content: "";
+  content: "\f10d";
   font-size: 1.5em;
   line-height: inherit;
 }
@@ -1470,65 +1711,63 @@ video::-webkit-media-text-track-display {
 
 .video-js .vjs-audio-button + .vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before {
   font-family: VideoJS;
-  content: " ";
+  content: " \f11d";
   font-size: 1.5em;
   line-height: inherit;
 }
 
-.video-js:not(.vjs-fullscreen).vjs-layout-small .vjs-current-time,
-.video-js:not(.vjs-fullscreen).vjs-layout-small .vjs-time-divider,
-.video-js:not(.vjs-fullscreen).vjs-layout-small .vjs-duration,
-.video-js:not(.vjs-fullscreen).vjs-layout-small .vjs-remaining-time,
-.video-js:not(.vjs-fullscreen).vjs-layout-small .vjs-playback-rate,
-.video-js:not(.vjs-fullscreen).vjs-layout-small .vjs-chapters-button,
-.video-js:not(.vjs-fullscreen).vjs-layout-small .vjs-descriptions-button,
-.video-js:not(.vjs-fullscreen).vjs-layout-small .vjs-captions-button,
-.video-js:not(.vjs-fullscreen).vjs-layout-small .vjs-subtitles-button,
-.video-js:not(.vjs-fullscreen).vjs-layout-small .vjs-audio-button,
-.video-js:not(.vjs-fullscreen).vjs-layout-small .vjs-volume-control, .video-js:not(.vjs-fullscreen).vjs-layout-x-small .vjs-current-time,
-.video-js:not(.vjs-fullscreen).vjs-layout-x-small .vjs-time-divider,
-.video-js:not(.vjs-fullscreen).vjs-layout-x-small .vjs-duration,
-.video-js:not(.vjs-fullscreen).vjs-layout-x-small .vjs-remaining-time,
-.video-js:not(.vjs-fullscreen).vjs-layout-x-small .vjs-playback-rate,
-.video-js:not(.vjs-fullscreen).vjs-layout-x-small .vjs-chapters-button,
-.video-js:not(.vjs-fullscreen).vjs-layout-x-small .vjs-descriptions-button,
-.video-js:not(.vjs-fullscreen).vjs-layout-x-small .vjs-captions-button,
-.video-js:not(.vjs-fullscreen).vjs-layout-x-small .vjs-subtitles-button,
-.video-js:not(.vjs-fullscreen).vjs-layout-x-small .vjs-audio-button,
-.video-js:not(.vjs-fullscreen).vjs-layout-x-small .vjs-volume-control, .video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-current-time,
-.video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-time-divider,
-.video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-duration,
-.video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-remaining-time,
-.video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-playback-rate,
-.video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-chapters-button,
-.video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-descriptions-button,
-.video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-captions-button,
-.video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-subtitles-button,
-.video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-audio-button,
-.video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-volume-control {
+.video-js.vjs-layout-small .vjs-current-time,
+.video-js.vjs-layout-small .vjs-time-divider,
+.video-js.vjs-layout-small .vjs-duration,
+.video-js.vjs-layout-small .vjs-remaining-time,
+.video-js.vjs-layout-small .vjs-playback-rate,
+.video-js.vjs-layout-small .vjs-chapters-button,
+.video-js.vjs-layout-small .vjs-descriptions-button,
+.video-js.vjs-layout-small .vjs-captions-button,
+.video-js.vjs-layout-small .vjs-subtitles-button,
+.video-js.vjs-layout-small .vjs-audio-button,
+.video-js.vjs-layout-small .vjs-volume-control, .video-js.vjs-layout-x-small .vjs-current-time,
+.video-js.vjs-layout-x-small .vjs-time-divider,
+.video-js.vjs-layout-x-small .vjs-duration,
+.video-js.vjs-layout-x-small .vjs-remaining-time,
+.video-js.vjs-layout-x-small .vjs-playback-rate,
+.video-js.vjs-layout-x-small .vjs-chapters-button,
+.video-js.vjs-layout-x-small .vjs-descriptions-button,
+.video-js.vjs-layout-x-small .vjs-captions-button,
+.video-js.vjs-layout-x-small .vjs-subtitles-button,
+.video-js.vjs-layout-x-small .vjs-audio-button,
+.video-js.vjs-layout-x-small .vjs-volume-control, .video-js.vjs-layout-tiny .vjs-current-time,
+.video-js.vjs-layout-tiny .vjs-time-divider,
+.video-js.vjs-layout-tiny .vjs-duration,
+.video-js.vjs-layout-tiny .vjs-remaining-time,
+.video-js.vjs-layout-tiny .vjs-playback-rate,
+.video-js.vjs-layout-tiny .vjs-chapters-button,
+.video-js.vjs-layout-tiny .vjs-descriptions-button,
+.video-js.vjs-layout-tiny .vjs-captions-button,
+.video-js.vjs-layout-tiny .vjs-subtitles-button,
+.video-js.vjs-layout-tiny .vjs-audio-button,
+.video-js.vjs-layout-tiny .vjs-volume-control {
   display: none;
 }
-.video-js:not(.vjs-fullscreen).vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal:hover,
-.video-js:not(.vjs-fullscreen).vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal:active,
-.video-js:not(.vjs-fullscreen).vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, .video-js:not(.vjs-fullscreen).vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal:hover,
-.video-js:not(.vjs-fullscreen).vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal:active,
-.video-js:not(.vjs-fullscreen).vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, .video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal:hover,
-.video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal:active,
-.video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active {
+.video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal:hover, .video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, .video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover, .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal:hover, .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover, .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal:hover, .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover {
   width: auto;
   width: initial;
 }
-.video-js:not(.vjs-fullscreen).vjs-layout-x-small:not(.vjs-liveui) .vjs-subs-caps-button, .video-js:not(.vjs-fullscreen).vjs-layout-x-small:not(.vjs-live) .vjs-subs-caps-button, .video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-subs-caps-button {
+.video-js.vjs-layout-x-small:not(.vjs-liveui) .vjs-subs-caps-button, .video-js.vjs-layout-x-small:not(.vjs-live) .vjs-subs-caps-button, .video-js.vjs-layout-tiny .vjs-subs-caps-button {
   display: none;
 }
-.video-js:not(.vjs-fullscreen).vjs-layout-x-small.vjs-liveui .vjs-custom-control-spacer, .video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-custom-control-spacer {
+.video-js.vjs-layout-x-small.vjs-liveui .vjs-custom-control-spacer, .video-js.vjs-layout-tiny .vjs-custom-control-spacer {
+  -webkit-box-flex: auto;
+  -moz-box-flex: auto;
+  -webkit-flex: auto;
+  -ms-flex: auto;
   flex: auto;
   display: block;
 }
-.video-js:not(.vjs-fullscreen).vjs-layout-x-small.vjs-liveui.vjs-no-flex .vjs-custom-control-spacer, .video-js:not(.vjs-fullscreen).vjs-layout-tiny.vjs-no-flex .vjs-custom-control-spacer {
+.video-js.vjs-layout-x-small.vjs-liveui.vjs-no-flex .vjs-custom-control-spacer, .video-js.vjs-layout-tiny.vjs-no-flex .vjs-custom-control-spacer {
   width: auto;
 }
-.video-js:not(.vjs-fullscreen).vjs-layout-x-small.vjs-liveui .vjs-progress-control, .video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-progress-control {
+.video-js.vjs-layout-x-small.vjs-liveui .vjs-progress-control, .video-js.vjs-layout-tiny .vjs-progress-control {
   display: none;
 }
 
@@ -1653,12 +1892,473 @@ video::-webkit-media-text-track-display {
 
 .js-focus-visible .video-js *:focus:not(.focus-visible) {
   outline: none;
-  background: none;
 }
 
-.video-js *:focus:not(:focus-visible),
-.video-js .vjs-menu *:focus:not(:focus-visible) {
+.video-js *:focus:not(:focus-visible) {
   outline: none;
-  background: none;
 }
-button,input,select,textarea,video{outline:none}.video-js .vjs-menu-item,button:focus{outline:initial}.video-js{max-width:100%;overflow:hidden}.video-js.init{height:0!important;display:none}.video-js video{transform:translateZ(0);-webkit-transform:translateZ(0);display:block}.video-js .vjs-poster{background-size:cover}.video-js .vjs-control-bar{height:50px;padding-top:6px;display:flex;background:-moz-linear-gradient(top,transparent 0,transparent 15%,rgba(0,0,0,.3) 100%);background:-webkit-linear-gradient(top,transparent,transparent 15%,rgba(0,0,0,.3));background:linear-gradient(180deg,transparent 0,transparent 15%,rgba(0,0,0,.3));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#00000000",endColorstr="#4d000000",GradientType=0);transform:translateZ(0);-webkit-transform:translateZ(0);z-index:2}.video-js .vjs-control-bar .vdt-seekbar-wrapper{top:0;left:0;height:10px;width:100%;position:absolute;margin:0 auto}.video-js .vjs-big-play-button{font-size:90px;border:0;background-color:transparent;text-shadow:1px 2px 40px rgba(0,0,0,.4);z-index:2}.video-js .vjs-big-play-button .vjs-icon-placeholder:before{padding-top:5px}.video-js:hover .vjs-big-play-button,.video-js:hover .vjs-big-play-button:focus{background-color:transparent}.video-js .vjs-progress-control{top:0;left:0;position:absolute;display:block;width:100%;height:10px}.video-js .vjs-progress-control .vjs-load-progress{background:hsla(0,0%,100%,.2)}.video-js .vjs-progress-control .vjs-play-progress .vjs-time-tooltip,.video-js .vjs-progress-control:hover .vjs-play-progress .vjs-time-tooltip{display:none}.video-js .vjs-time-control.duration,.video-js .vjs-time-control.vjs-duration{margin-right:auto}.video-js .vdt-screenshot-button .vjs-icon-placeholder,.video-js .vjs-subs-caps-button .vjs-icon-placeholder{opacity:.6}.video-js.has-vdt-menu .vjs-subs-caps-button{display:none}.video-js.subtitles-active .vjs-subs-caps-button .vjs-icon-placeholder{opacity:1}.video-js .vjs-control{font-size:14px}.video-js .vjs-play-progress.vjs-slider-bar{background-color:red}.video-js .vjs-current-time,.video-js .vjs-no-flex .vjs-current-time,.video-js .vjs-time-control{display:block}.video-js .vjs-time-control{font-size:14px;padding:0;min-width:14px;text-align:center}.video-js .vjs-volume-panel,.video-js .vjs-volume-panel .vjs-mute-control{width:3em}.video-js .vjs-menu-button-popup .vjs-menu{bottom:20px}.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-content{background-color:rgba(28,28,28,.9);border-radius:7px}.video-js .vjs-menu-button-popup .vjs-menu li.vjs-menu-item:focus:not(.vjs-selected){background-color:transparent}.video-js .vjs-menu-button-popup .vjs-menu li.vjs-menu-item:hover:not(.vjs-selected){background-color:hsla(0,0%,100%,.2)}.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-item-text{color:#fff}.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-item.vjs-selected .vjs-menu-item-text{color:#333}.video-js .vdt-player-osd{pointer-events:none;position:absolute;top:0;left:0;height:100%;width:100%;opacity:0;z-index:4;-webkit-transform:translateZ(0) scale3d(.5,.5,.5);-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0) scale3d(.5,.5,.5);transition:all .2s ease-out}.video-js .vdt-player-osd.active{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}.video-js .vdt-player-osd table{width:100%;height:100%}.video-js .vdt-player-osd table td{vertical-align:middle;text-align:center}.video-js .vdt-player-osd table td .osd-feedback-icon:before{font-family:VideoJS;content:"\f101";font-size:50px;padding:15px;display:inline-block;height:80px;width:80px;text-align:center;background:rgba(0,0,0,.2);border-radius:100%}.video-js .vdt-player-osd table td .pause:before{content:"\f103"}.video-js .vdt-player-osd table td .volchange.high:before{content:"\f107"}.video-js .vdt-player-osd table td .volchange.mid:before{content:"\f106"}.video-js .vdt-player-osd table td .volchange.low:before{content:"\f105"}.video-js .vdt-player-osd table td .mute:before,.video-js .vdt-player-osd table td .volchange.null:before{content:"\f104"}.video-js .vdt-player-osd table td .unmute:before{content:"\f107"}.video-js .vdt-player-osd table td .backward-jump:before,.video-js .vdt-player-osd table td .forward-jump:before{content:"\f101\f101";letter-spacing:-38px;padding-left:0;padding-right:34px}.video-js .vdt-player-osd table td .backward-jump:before{-webkit-transform:scaleX(-1);transform:scaleX(-1)}@keyframes vjs-spinner-fade{0%{border-top-color:hsla(0,0%,100%,.6)}35%{border-top-color:#fff}to{border-top-color:hsla(0,0%,100%,.6)}}.video-js .vjs-loading-spinner{margin:-40px 0 0 -40px;opacity:.85;border:5px solid hsla(0,0%,100%,.7);width:80px;height:80px;border-radius:100px;z-index:5}.video-js .vjs-loading-spinner:after,.video-js .vjs-loading-spinner:before{margin:-5px}.video-js .vjs-text-track-display,.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display{bottom:0;transition:transform .3s ease-out;-webkit-transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.video-js .vjs-text-track-display>div,.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display>div{display:table;width:100%;height:100%;margin:0!important}.video-js .vjs-text-track-display .vjs-text-track-cue,.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display .vjs-text-track-cue{width:100%!important;bottom:0!important;top:auto!important;left:auto!important;right:auto!important;font-size:18px!important;height:auto!important;padding-bottom:1.5%;display:table-cell}.video-js .vjs-text-track-display .vjs-text-track-cue>div,.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display .vjs-text-track-cue>div{padding:2px 4px;line-height:1.25;border-radius:2px}.video-js.vjs-fullscreen .vjs-text-track-display .vjs-text-track-cue,.video-js.vjs-user-inactive.vjs-playing.vjs-fullscreen .vjs-text-track-display .vjs-text-track-cue{-webkit-backface-visibility:hidden;backface-visibility:hidden;font-size:24px!important}.video-js.vjs-controls-enabled.vjs-user-active .vjs-control-bar,.video-js.vjs-has-started.vjs-user-inactive.vjs-paused .vjs-control-bar,.video-js.vjs-has-started.vjs-user-inactive.vjs-playing:not(.vjs-fullscreen) .vjs-control-bar,.video-jsdiv .vjs-control-bar{opacity:1}.video-js.vjs-has-started.vjs-user-inactive.vjs-playing:not(.controls-below-player) .vjs-control-bar,.video-js:not(.controls-below-player) .vjs-control-bar{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translate3d(0,50px,0);transition:transform .3s ease-in-out}.video-js.vjs-controls-enabled.vjs-user-active:not(.controls-below-player) .vjs-control-bar,.video-js.vjs-has-started.vjs-user-inactive.vjs-paused:not(.controls-below-player) .vjs-control-bar{transform:translateZ(0);-webkit-transform:translateZ(0)}.video-js.vjs-controls-enabled.vjs-user-active:not(.controls-below-player):not(.vjs-controls-disabled) .vjs-text-track-display,.video-js.vjs-has-started.vjs-user-inactive.vjs-paused:not(.controls-below-player):not(.vjs-controls-disabled) .vjs-text-track-display{transform:translate3d(0,-50px,0)}.video-js .vdt-timecode{display:inline;font-family:"monospace",sans-serif;margin-left:20px}.video-js .vdt-timecode input,.video-js .vdt-timecode span{font-size:16px}.video-js .vdt-timecode span{text-align:center;display:inline-block}.video-js .vdt-timecode input{display:inline-block;width:auto;border:0;background:transparent;color:inherit;width:21px}@media (max-width:640px){.video-js .vdt-timecode{flex-grow:3}}.video-js .vdt-timecode.duration{margin-left:0;margin-right:auto}.video-js .vdt-timecode.duration span{cursor:default}.video-js .vdt-timecode.duration:before{content:"/";display:inline-block;margin:0 5px;font-size:16px}@media (max-width:640px){.video-js .vdt-timecode.duration{display:none}}.video-js .vdt-cinema-button,.video-js .vdt-screenshot-button,.video-js .vdt-settings-menu-button{cursor:pointer}.video-js .vdt-cinema-button:after,.video-js .vdt-screenshot-button:after,.video-js .vdt-settings-menu-button:after{content:"\f10b";font-family:VideoJS;font-size:22px}.video-js .vdt-cinema-button:active,.video-js .vdt-cinema-button:focus,.video-js .vdt-screenshot-button:active,.video-js .vdt-screenshot-button:focus,.video-js .vdt-settings-menu-button:active,.video-js .vdt-settings-menu-button:focus{opacity:.6}.video-js .vdt-cinema-button:after{content:"\f10a"}.video-js .vdt-settings-menu-button:after{content:"\f110"}.video-js .vdt-help-overlay,.video-js .vdt-waveform-visual{position:absolute;top:0;left:0;background:#888;height:100%;width:100%;display:none;background:#88bfe8;background:-moz-linear-gradient(top,#88bfe8 0,#71a1c4 100%);background:-webkit-linear-gradient(top,#88bfe8,#71a1c4);background:linear-gradient(180deg,#88bfe8 0,#71a1c4);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#88bfe8",endColorstr="#71a1c4",GradientType=0)}.video-js .vdt-help-overlay canvas,.video-js .vdt-waveform-visual canvas{height:100%;width:100%}.video-js.vjs-has-started .vdt-waveform-visual{display:block}.video-js .vdt-help-overlay{font-size:15px;background:transparent;z-index:2;transition:opacity 1s ease-in-out;opacity:0;padding-bottom:12px}.video-js .vdt-help-overlay>table{height:100%;margin:0 auto}.video-js .vdt-help-overlay>table td.vdt-help-contents table{border-radius:7px;max-height:400px;-webkit-backdrop-filter:blur(10px);background:rgba(0,0,0,.6)}.video-js .vdt-help-overlay>table td.vdt-help-contents table td{padding:6px}.video-js .vdt-help-overlay>table td.vdt-help-contents table td:nth-child(2),.video-js .vdt-help-overlay>table td.vdt-help-contents table td td:nth-child(4){padding:4px 9px}.video-js .vdt-help-overlay>table td.vdt-help-contents table td:nth-child(2){padding-right:32px}.video-js .vdt-help-overlay>table td.vdt-help-contents table td:first-child div,.video-js .vdt-help-overlay>table td.vdt-help-contents table td:nth-child(3) div{text-align:center;padding:3px;border:1px solid #fff;border-radius:2px;background:hsla(0,0%,100%,.1);font-size:13px;min-width:21px}.video-js .vdt-help-overlay>table td.vdt-help-contents table td:first-child{padding-left:16px}.video-js .vdt-help-overlay>table td.vdt-help-contents table td:last-child{padding-right:16px}.video-js .vdt-help-overlay>table td.vdt-help-contents table tr:first-child td{padding-top:16px}.video-js .vdt-help-overlay>table td.vdt-help-contents table tr:last-child td{padding-bottom:16px}.video-js .vdt-help-overlay>table td{vertical-align:middle}.video-js .vdt-help-overlay.active{display:block;opacity:1}.video-js.controls-below-player:not(.vjs-controls-disabled).vjs-fullscreen .vjs-text-track-display,.video-js.controls-below-player:not(.vjs-controls-disabled).vjs-fullscreen.vjs-user-inactive.vjs-playing .vjs-text-track-display{bottom:60px}.video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled){overflow:visible;width:auto;height:auto;background-color:transparent;margin-bottom:70px}.video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled) video{position:relative}.video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled) .vjs-control-bar{transform:translate3d(0,60px,0);transition:all .3s ease-in-out;background:transparent}.video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled) .vjs-control-bar .vdt-timecode:not(.vjs-menu-item-text),.video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled) .vjs-control-bar .vjs-button:not(.vjs-menu-item-text){color:#333}.video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled).on-dark .vjs-control-bar .vdt-timecode:not(.vjs-menu-item-text),.video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled).on-dark .vjs-control-bar .vjs-button:not(.vjs-menu-item-text){color:#efefef}.video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled) .vjs-progress-holder{margin:0 auto}.video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled) .vjs-menu{bottom:35px}.video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled) .vjs-poster{height:auto}.video-js .vjs-picture-in-picture-control,.video-js .vjs-play-progress .vjs-time-tooltip,.video-js .vjs-play-progress:before,.video-js .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-time-tooltip,.video-js .vjs-progress-control:hover .vjs-time-tooltips,.video-js .vjs-remaining-time{display:none}
+
+textarea, select, input, button, video {
+  outline: none;
+}
+
+button:focus, .video-js .vjs-menu-item {
+  outline: initial;
+}
+
+.video-js {
+  max-width: 100%;
+  overflow: hidden;
+}
+.video-js.init {
+  height: 0px !important;
+  display: none;
+}
+.video-js video {
+  transform: translate3d(0px, 0px, 0px);
+  -webkit-transform: translate3d(0px, 0px, 0px);
+  display: block;
+}
+.video-js .vjs-poster {
+  background-size: cover;
+}
+.video-js .vjs-control-bar {
+  height: 50px;
+  padding-top: 6px;
+  display: flex;
+  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+15,0.3+100 */
+  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0.3) 100%);
+  /* FF3.6-15 */
+  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0.3) 100%);
+  /* Chrome10-25,Safari5.1-6 */
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0.3) 100%);
+  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#00000000", endColorstr="#4d000000",GradientType=0 );
+  /* IE6-9 */
+  transform: translate3d(0px, 0px, 0px);
+  -webkit-transform: translate3d(0px, 0px, 0px);
+  z-index: 2;
+}
+.video-js .vjs-control-bar .vdt-seekbar-wrapper {
+  top: 0px;
+  left: 0px;
+  height: 10px;
+  width: 100%;
+  position: absolute;
+  margin: 0 auto;
+}
+.video-js .vjs-big-play-button {
+  font-size: 90px;
+  border: 0px;
+  background-color: transparent;
+  text-shadow: 1px 2px 40px rgba(0, 0, 0, 0.4);
+  z-index: 2;
+}
+.video-js .vjs-big-play-button .vjs-icon-placeholder:before {
+  padding-top: 5px;
+}
+.video-js:hover .vjs-big-play-button,
+.video-js:hover .vjs-big-play-button:focus {
+  background-color: transparent;
+}
+.video-js .vjs-progress-control {
+  top: 0px;
+  left: 0px;
+  position: absolute;
+  display: block;
+  width: 100%;
+  height: 10px;
+}
+.video-js .vjs-progress-control .vjs-load-progress {
+  background: rgba(255, 255, 255, 0.2);
+}
+.video-js .vjs-progress-control:hover .vjs-play-progress .vjs-time-tooltip,
+.video-js .vjs-progress-control .vjs-play-progress .vjs-time-tooltip {
+  display: none;
+}
+.video-js .vjs-time-control.duration, .video-js .vjs-time-control.vjs-duration {
+  margin-right: auto;
+}
+.video-js .vjs-subs-caps-button .vjs-icon-placeholder, .video-js .vdt-screenshot-button .vjs-icon-placeholder {
+  opacity: 0.6;
+}
+.video-js.has-vdt-menu .vjs-subs-caps-button {
+  display: none;
+}
+.video-js.subtitles-active .vjs-subs-caps-button .vjs-icon-placeholder {
+  opacity: 1;
+}
+.video-js .vjs-control {
+  font-size: 14px;
+}
+.video-js .vjs-play-progress.vjs-slider-bar {
+  background-color: #f00;
+}
+.video-js .vjs-current-time,
+.video-js .vjs-time-control,
+.video-js .vjs-no-flex .vjs-current-time {
+  display: block;
+}
+.video-js .vjs-time-control {
+  font-size: 14px;
+  padding: 0px;
+  min-width: 14px;
+  text-align: center;
+}
+.video-js .vjs-volume-panel {
+  width: 3em;
+}
+.video-js .vjs-volume-panel .vjs-mute-control {
+  width: 3em;
+}
+.video-js .vjs-menu-button-popup .vjs-menu {
+  bottom: 20px;
+}
+.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
+  background-color: rgba(28, 28, 28, 0.9);
+  border-radius: 7px;
+}
+.video-js .vjs-menu-button-popup .vjs-menu li.vjs-menu-item:focus:not(.vjs-selected) {
+  background-color: transparent;
+}
+.video-js .vjs-menu-button-popup .vjs-menu li.vjs-menu-item:hover:not(.vjs-selected) {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-item-text {
+  color: white;
+}
+.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-item.vjs-selected .vjs-menu-item-text {
+  color: #333;
+}
+.video-js .vdt-player-osd {
+  pointer-events: none;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  height: 100%;
+  width: 100%;
+  opacity: 0;
+  z-index: 4;
+  -webkit-transform: translate3d(0px, 0px, 0px) scale3d(0.5, 0.5, 0.5);
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  transform: translate3d(0px, 0px, 0px) scale3d(0.5, 0.5, 0.5);
+  transition: 200ms ease-out all;
+}
+.video-js .vdt-player-osd.active {
+  opacity: 1;
+  -webkit-transform: scale3d(1, 1, 1);
+  transform: scale3d(1, 1, 1);
+}
+.video-js .vdt-player-osd table {
+  width: 100%;
+  height: 100%;
+}
+.video-js .vdt-player-osd table td {
+  vertical-align: middle;
+  text-align: center;
+}
+.video-js .vdt-player-osd table td .osd-feedback-icon:before {
+  font-family: VideoJS;
+  content: "\f101";
+  font-size: 50px;
+  padding: 15px;
+  display: inline-block;
+  height: 80px;
+  width: 80px;
+  text-align: center;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 100%;
+}
+.video-js .vdt-player-osd table td .pause:before {
+  content: "\f103";
+}
+.video-js .vdt-player-osd table td .volchange.high:before {
+  content: "\f107";
+}
+.video-js .vdt-player-osd table td .volchange.mid:before {
+  content: "\f106";
+}
+.video-js .vdt-player-osd table td .volchange.low:before {
+  content: "\f105";
+}
+.video-js .vdt-player-osd table td .mute:before, .video-js .vdt-player-osd table td .volchange.null:before {
+  content: "\f104";
+}
+.video-js .vdt-player-osd table td .unmute:before {
+  content: "\f107";
+}
+.video-js .vdt-player-osd table td .forward-jump:before, .video-js .vdt-player-osd table td .backward-jump:before {
+  content: "\f101\f101";
+  letter-spacing: -38px;
+  padding-left: 0px;
+  padding-right: 34px;
+}
+.video-js .vdt-player-osd table td .backward-jump:before {
+  -webkit-transform: scaleX(-1);
+  transform: scaleX(-1);
+}
+@keyframes vjs-spinner-fade {
+  0% {
+    border-top-color: rgba(255, 255, 255, 0.6);
+  }
+  35% {
+    border-top-color: white;
+  }
+  100% {
+    border-top-color: rgba(255, 255, 255, 0.6);
+  }
+}
+.video-js .vjs-loading-spinner {
+  margin: -40px 0 0 -40px;
+  opacity: 0.85;
+  border: 5px solid rgba(255, 255, 255, 0.7);
+  width: 80px;
+  height: 80px;
+  border-radius: 100px;
+  z-index: 5;
+}
+.video-js .vjs-loading-spinner:after, .video-js .vjs-loading-spinner:before {
+  margin: -5px;
+}
+.video-js .vjs-text-track-display, .video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display {
+  bottom: 0px;
+  transition: transform 300ms ease-out;
+  -webkit-transform: translate3d(0px, 0px, 0px);
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+.video-js .vjs-text-track-display > div, .video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display > div {
+  display: table;
+  width: 100%;
+  height: 100%;
+  margin: 0px !important;
+}
+.video-js .vjs-text-track-display .vjs-text-track-cue, .video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display .vjs-text-track-cue {
+  width: 100% !important;
+  bottom: 0px !important;
+  top: initial !important;
+  left: initial !important;
+  right: initial !important;
+  font-size: 18px !important;
+  height: auto !important;
+  padding-bottom: 1.5%;
+  display: table-cell;
+}
+.video-js .vjs-text-track-display .vjs-text-track-cue > div, .video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display .vjs-text-track-cue > div {
+  padding: 2px 4px 2px 4px;
+  line-height: 1.25;
+  border-radius: 2px;
+}
+.video-js.vjs-fullscreen .vjs-text-track-display .vjs-text-track-cue, .video-js.vjs-user-inactive.vjs-playing.vjs-fullscreen .vjs-text-track-display .vjs-text-track-cue {
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  font-size: 24px !important;
+}
+.video-js.vjs-has-started.vjs-user-inactive.vjs-playing:not(.vjs-fullscreen) .vjs-control-bar, .video-jsdiv .vjs-control-bar, .video-js.vjs-controls-enabled.vjs-user-active .vjs-control-bar, .video-js.vjs-has-started.vjs-user-inactive.vjs-paused .vjs-control-bar {
+  opacity: 1;
+}
+.video-js.vjs-has-started.vjs-user-inactive.vjs-playing:not(.controls-below-player) .vjs-control-bar, .video-js:not(.controls-below-player) .vjs-control-bar {
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  transform: translate3d(0px, 50px, 0px);
+  transition: transform 300ms ease-in-out;
+}
+.video-js.vjs-controls-enabled.vjs-user-active:not(.controls-below-player) .vjs-control-bar, .video-js.vjs-has-started.vjs-user-inactive.vjs-paused:not(.controls-below-player) .vjs-control-bar {
+  transform: translate3d(0px, 0px, 0px);
+  -webkit-transform: translate3d(0px, 0px, 0px);
+}
+.video-js.vjs-controls-enabled.vjs-user-active:not(.controls-below-player):not(.vjs-controls-disabled) .vjs-text-track-display, .video-js.vjs-has-started.vjs-user-inactive.vjs-paused:not(.controls-below-player):not(.vjs-controls-disabled) .vjs-text-track-display {
+  transform: translate3d(0px, -50px, 0px);
+}
+.video-js .vdt-timecode {
+  display: inline;
+  font-family: "monospace", sans-serif;
+  margin-left: 20px;
+}
+.video-js .vdt-timecode input, .video-js .vdt-timecode span {
+  font-size: 16px;
+}
+.video-js .vdt-timecode span {
+  text-align: center;
+  display: inline-block;
+}
+.video-js .vdt-timecode input {
+  display: inline-block;
+  width: auto;
+  border: 0px;
+  background: transparent;
+  color: inherit;
+  width: 21px;
+}
+@media all and (max-width: 640px) {
+  .video-js .vdt-timecode {
+    flex-grow: 3;
+  }
+}
+.video-js .vdt-timecode.duration {
+  margin-left: 0px;
+  margin-right: auto;
+}
+.video-js .vdt-timecode.duration span {
+  cursor: default;
+}
+.video-js .vdt-timecode.duration:before {
+  content: "/";
+  display: inline-block;
+  margin: 0px 5px;
+  font-size: 16px;
+}
+@media all and (max-width: 640px) {
+  .video-js .vdt-timecode.duration {
+    display: none;
+  }
+}
+.video-js .vdt-cinema-button,
+.video-js .vdt-settings-menu-button,
+.video-js .vdt-screenshot-button {
+  cursor: pointer;
+}
+.video-js .vdt-cinema-button:after,
+.video-js .vdt-settings-menu-button:after,
+.video-js .vdt-screenshot-button:after {
+  content: "\f10b";
+  font-family: VideoJS;
+  font-size: 22px;
+}
+.video-js .vdt-cinema-button:active, .video-js .vdt-cinema-button:focus,
+.video-js .vdt-settings-menu-button:active,
+.video-js .vdt-settings-menu-button:focus,
+.video-js .vdt-screenshot-button:active,
+.video-js .vdt-screenshot-button:focus {
+  opacity: 0.6;
+}
+.video-js .vdt-cinema-button:after {
+  content: "\f10a";
+}
+.video-js .vdt-settings-menu-button:after {
+  content: "\f110";
+}
+.video-js .vdt-waveform-visual, .video-js .vdt-help-overlay {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  background: #888;
+  height: 100%;
+  width: 100%;
+  display: none;
+  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#88bfe8+0,71a1c4+100 */
+  background: #88bfe8;
+  /* Old browsers */
+  background: -moz-linear-gradient(top, #88bfe8 0%, #71a1c4 100%);
+  /* FF3.6-15 */
+  background: -webkit-linear-gradient(top, #88bfe8 0%, #71a1c4 100%);
+  /* Chrome10-25,Safari5.1-6 */
+  background: linear-gradient(to bottom, #88bfe8 0%, #71a1c4 100%);
+  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#88bfe8", endColorstr="#71a1c4",GradientType=0 );
+  /* IE6-9 */
+}
+.video-js .vdt-waveform-visual canvas, .video-js .vdt-help-overlay canvas {
+  height: 100%;
+  width: 100%;
+}
+.video-js.vjs-has-started .vdt-waveform-visual {
+  display: block;
+}
+.video-js .vdt-help-overlay {
+  font-size: 15px;
+  background: transparent;
+  z-index: 2;
+  transition: opacity 1s ease-in-out;
+  opacity: 0;
+  padding-bottom: 12px;
+}
+.video-js .vdt-help-overlay > table {
+  height: 100%;
+  margin: 0 auto;
+}
+.video-js .vdt-help-overlay > table td.vdt-help-contents table {
+  border-radius: 7px;
+  max-height: 400px;
+  -webkit-backdrop-filter: blur(10px);
+  background: rgba(0, 0, 0, 0.6);
+}
+.video-js .vdt-help-overlay > table td.vdt-help-contents table td {
+  padding: 6px 6px;
+}
+.video-js .vdt-help-overlay > table td.vdt-help-contents table td:nth-child(2), .video-js .vdt-help-overlay > table td.vdt-help-contents table td td:nth-child(4) {
+  padding: 4px 9px;
+}
+.video-js .vdt-help-overlay > table td.vdt-help-contents table td:nth-child(2) {
+  padding-right: 32px;
+}
+.video-js .vdt-help-overlay > table td.vdt-help-contents table td:first-child div, .video-js .vdt-help-overlay > table td.vdt-help-contents table td:nth-child(3) div {
+  text-align: center;
+  padding: 3px;
+  border: 1px solid white;
+  border-radius: 2px;
+  background: rgba(255, 255, 255, 0.1);
+  font-size: 13px;
+  min-width: 21px;
+}
+.video-js .vdt-help-overlay > table td.vdt-help-contents table td:first-child {
+  padding-left: 16px;
+}
+.video-js .vdt-help-overlay > table td.vdt-help-contents table td:last-child {
+  padding-right: 16px;
+}
+.video-js .vdt-help-overlay > table td.vdt-help-contents table tr:first-child td {
+  padding-top: 16px;
+}
+.video-js .vdt-help-overlay > table td.vdt-help-contents table tr:last-child td {
+  padding-bottom: 16px;
+}
+.video-js .vdt-help-overlay > table td {
+  vertical-align: middle;
+}
+.video-js .vdt-help-overlay.active {
+  display: block;
+  opacity: 1;
+}
+.video-js.controls-below-player:not(.vjs-controls-disabled).vjs-fullscreen.vjs-user-inactive.vjs-playing .vjs-text-track-display, .video-js.controls-below-player:not(.vjs-controls-disabled).vjs-fullscreen .vjs-text-track-display {
+  bottom: 60px;
+}
+.video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled) {
+  overflow: visible;
+  width: auto;
+  height: auto;
+  background-color: transparent;
+  margin-bottom: 70px;
+}
+.video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled) video {
+  position: relative;
+}
+.video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled) .vjs-control-bar {
+  transform: translate3d(0px, 60px, 0px);
+  transition: all 300ms ease-in-out;
+  background: transparent;
+}
+.video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled) .vjs-control-bar .vjs-button:not(.vjs-menu-item-text), .video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled) .vjs-control-bar .vdt-timecode:not(.vjs-menu-item-text) {
+  color: #333;
+}
+.video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled).on-dark .vjs-control-bar .vjs-button:not(.vjs-menu-item-text), .video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled).on-dark .vjs-control-bar .vdt-timecode:not(.vjs-menu-item-text) {
+  color: #efefef;
+}
+.video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled) .vjs-progress-holder {
+  margin: 0 auto;
+}
+.video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled) .vjs-menu {
+  bottom: 35px;
+}
+.video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled) .vjs-poster {
+  height: initial;
+}
+.video-js .vjs-play-progress:before,
+.video-js .vjs-remaining-time,
+.video-js .vjs-picture-in-picture-control,
+.video-js .vjs-progress-control:hover .vjs-time-tooltips,
+.video-js .vjs-play-progress .vjs-time-tooltip,
+.video-js .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-time-tooltip {
+  display: none;
+}