1/* Accessibility: hide screen reader texts (and prefer "top" for RTL languages).
  2Reference: http://blog.rrwd.nl/2015/04/04/the-screen-reader-text-class-why-and-how/ */
  3.mejs-offscreen {
  4    border: 0;
  5    clip: rect( 1px, 1px, 1px, 1px );
  6    -webkit-clip-path: inset( 50% );
  7            clip-path: inset( 50% );
  8    height: 1px;
  9    margin: -1px;
 10    overflow: hidden;
 11    padding: 0;
 12    position: absolute;
 13    width: 1px;
 14    word-wrap: normal;
 15}
 16
 17.mejs-container {
 18    background: #000;
 19    box-sizing: border-box;
 20    font-family: 'Helvetica', Arial, serif;
 21    position: relative;
 22    text-align: left;
 23    text-indent: 0;
 24    vertical-align: top;
 25}
 26
 27.mejs-container * {
 28    box-sizing: border-box;
 29}
 30
 31/* Hide native play button and control bar from iOS to favor plugin button */
 32.mejs-container video::-webkit-media-controls,
 33.mejs-container video::-webkit-media-controls-panel,
 34.mejs-container video::-webkit-media-controls-panel-container,
 35.mejs-container video::-webkit-media-controls-start-playback-button {
 36    -webkit-appearance: none;
 37    display: none !important;
 38}
 39
 40.mejs-fill-container,
 41.mejs-fill-container .mejs-container {
 42    height: 100%;
 43    width: 100%;
 44}
 45
 46.mejs-fill-container {
 47    background: transparent;
 48    margin: 0 auto;
 49    overflow: hidden;
 50    position: relative;
 51}
 52
 53.mejs-container:focus {
 54    outline: none;
 55}
 56
 57.mejs-iframe-overlay {
 58    height: 100%;
 59    position: absolute;
 60    width: 100%;
 61}
 62
 63.mejs-embed,
 64.mejs-embed body {
 65    background: #000;
 66    height: 100%;
 67    margin: 0;
 68    overflow: hidden;
 69    padding: 0;
 70    width: 100%;
 71}
 72
 73.mejs-fullscreen {
 74    overflow: hidden !important;
 75}
 76
 77.mejs-container-fullscreen {
 78    bottom: 0;
 79    left: 0;
 80    overflow: hidden;
 81    position: fixed;
 82    right: 0;
 83    top: 0;
 84    z-index: 1000;
 85}
 86
 87.mejs-container-fullscreen .mejs-mediaelement,
 88.mejs-container-fullscreen video {
 89    height: 100% !important;
 90    width: 100% !important;
 91}
 92
 93/* Start: LAYERS */
 94.mejs-background {
 95    left: 0;
 96    position: absolute;
 97    top: 0;
 98}
 99
100.mejs-mediaelement {
101    height: 100%;
102    left: 0;
103    position: absolute;
104    top: 0;
105    width: 100%;
106    z-index: 0;
107}
108
109.mejs-poster {
110    background-position: 50% 50%;
111    background-repeat: no-repeat;
112    background-size: cover;
113    left: 0;
114    position: absolute;
115    top: 0;
116    z-index: 1;
117}
118
119:root .mejs-poster-img {
120    display: none;
121}
122
123.mejs-poster-img {
124    border: 0;
125    padding: 0;
126}
127
128.mejs-overlay {
129    -webkit-box-align: center;
130    -webkit-align-items: center;
131        -ms-flex-align: center;
132            align-items: center;
133    display: -webkit-box;
134    display: -webkit-flex;
135    display: -ms-flexbox;
136    display: flex;
137    -webkit-box-pack: center;
138    -webkit-justify-content: center;
139        -ms-flex-pack: center;
140            justify-content: center;
141    left: 0;
142    position: absolute;
143    top: 0;
144}
145
146.mejs-layer {
147    z-index: 1;
148}
149
150.mejs-overlay-play {
151    cursor: pointer;
152}
153
154.mejs-overlay-button {
155    background: url('mejs-controls.svg') no-repeat;
156    background-position: 0 -39px;
157    height: 80px;
158    width: 80px;
159}
160
161.mejs-overlay:hover > .mejs-overlay-button {
162    background-position: -80px -39px;
163}
164
165.mejs-overlay-loading {
166    height: 80px;
167    width: 80px;
168}
169
170.mejs-overlay-loading-bg-img {
171    -webkit-animation: mejs-loading-spinner 1s linear infinite;
172            animation: mejs-loading-spinner 1s linear infinite;
173    background: transparent url('mejs-controls.svg') -160px -40px no-repeat;
174    display: block;
175    height: 80px;
176    width: 80px;
177    z-index: 1;
178}
179
180@-webkit-keyframes mejs-loading-spinner {
181    100% {
182        -webkit-transform: rotate(360deg);
183                transform: rotate(360deg);
184    }
185}
186
187@keyframes mejs-loading-spinner {
188    100% {
189        -webkit-transform: rotate(360deg);
190                transform: rotate(360deg);
191    }
192}
193
194/* End: LAYERS */
195
196/* Start: CONTROL BAR */
197.mejs-controls {
198    bottom: 0;
199    display: -webkit-box;
200    display: -webkit-flex;
201    display: -ms-flexbox;
202    display: flex;
203    height: 40px;
204    left: 0;
205    list-style-type: none;
206    margin: 0;
207    padding: 0 10px;
208    position: absolute;
209    width: 100%;
210    z-index: 3;
211}
212
213.mejs-controls:not([style*='display: none']) {
214    background: rgba(255, 0, 0, 0.7);
215    background: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.35));
216    background: linear-gradient(transparent, rgba(0, 0, 0, 0.35));
217}
218
219.mejs-button,
220.mejs-time,
221.mejs-time-rail {
222    font-size: 10px;
223    height: 40px;
224    line-height: 10px;
225    margin: 0;
226    width: 32px;
227}
228
229.mejs-button > button {
230    background: transparent url('mejs-controls.svg');
231    border: 0;
232    cursor: pointer;
233    display: block;
234    font-size: 0;
235    height: 20px;
236    line-height: 0;
237    margin: 10px 6px;
238    overflow: hidden;
239    padding: 0;
240    position: absolute;
241    text-decoration: none;
242    width: 20px;
243}
244
245/* :focus for accessibility */
246.mejs-button > button:focus {
247    outline: dotted 1px #999;
248}
249
250.mejs-container-keyboard-inactive a,
251.mejs-container-keyboard-inactive a:focus,
252.mejs-container-keyboard-inactive button,
253.mejs-container-keyboard-inactive button:focus,
254.mejs-container-keyboard-inactive [role=slider],
255.mejs-container-keyboard-inactive [role=slider]:focus {
256    outline: 0;
257}
258
259/* End: CONTROL BAR */
260
261/* Start: Time (Current / Duration) */
262.mejs-time {
263    box-sizing: content-box;
264    color: #fff;
265    font-size: 11px;
266    font-weight: bold;
267    height: 24px;
268    overflow: hidden;
269    padding: 16px 6px 0;
270    text-align: center;
271    width: auto;
272}
273
274/* End: Time (Current / Duration) */
275
276/* Start: Play/Pause/Stop */
277.mejs-play > button {
278    background-position: 0 0;
279}
280
281.mejs-pause > button {
282    background-position: -20px 0;
283}
284
285.mejs-replay > button {
286    background-position: -160px 0;
287}
288
289/* End: Play/Pause/Stop */
290
291/* Start: Progress Bar */
292.mejs-time-rail {
293    direction: ltr;
294    -webkit-box-flex: 1;
295    -webkit-flex-grow: 1;
296        -ms-flex-positive: 1;
297            flex-grow: 1;
298    height: 40px;
299    margin: 0 10px;
300    padding-top: 10px;
301    position: relative;
302}
303
304.mejs-time-total,
305.mejs-time-buffering,
306.mejs-time-loaded,
307.mejs-time-current,
308.mejs-time-float,
309.mejs-time-hovered,
310.mejs-time-float-current,
311.mejs-time-float-corner,
312.mejs-time-marker {
313    border-radius: 2px;
314    cursor: pointer;
315    display: block;
316    height: 10px;
317    position: absolute;
318}
319
320.mejs-time-total {
321    background: rgba(255, 255, 255, 0.3);
322    margin: 5px 0 0;
323    width: 100%;
324}
325
326.mejs-time-buffering {
327    -webkit-animation: buffering-stripes 2s linear infinite;
328            animation: buffering-stripes 2s linear infinite;
329    background: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
330    background: linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
331    background-size: 15px 15px;
332    width: 100%;
333}
334
335@-webkit-keyframes buffering-stripes {
336    from {
337        background-position: 0 0;
338    }
339    to {
340        background-position: 30px 0;
341    }
342}
343
344@keyframes buffering-stripes {
345    from {
346        background-position: 0 0;
347    }
348    to {
349        background-position: 30px 0;
350    }
351}
352
353.mejs-time-loaded {
354    background: rgba(255, 255, 255, 0.3);
355}
356
357.mejs-time-current,
358.mejs-time-handle-content {
359    background: rgba(255, 255, 255, 0.9);
360}
361
362.mejs-time-hovered {
363    background: rgba(255, 255, 255, 0.5);
364    z-index: 10;
365}
366
367.mejs-time-hovered.negative {
368    background: rgba(0, 0, 0, 0.2);
369}
370
371.mejs-time-current,
372.mejs-time-buffering,
373.mejs-time-loaded,
374.mejs-time-hovered {
375    left: 0;
376    -webkit-transform: scaleX(0);
377        -ms-transform: scaleX(0);
378            transform: scaleX(0);
379    -webkit-transform-origin: 0 0;
380        -ms-transform-origin: 0 0;
381            transform-origin: 0 0;
382    -webkit-transition: 0.15s ease-in all;
383    transition: 0.15s ease-in all;
384    width: 100%;
385}
386
387.mejs-time-buffering {
388    -webkit-transform: scaleX(1);
389        -ms-transform: scaleX(1);
390            transform: scaleX(1);
391}
392
393.mejs-time-hovered {
394    -webkit-transition: height 0.1s cubic-bezier(0.44, 0, 1, 1);
395    transition: height 0.1s cubic-bezier(0.44, 0, 1, 1);
396}
397
398.mejs-time-hovered.no-hover {
399    -webkit-transform: scaleX(0) !important;
400        -ms-transform: scaleX(0) !important;
401            transform: scaleX(0) !important;
402}
403
404.mejs-time-handle,
405.mejs-time-handle-content {
406    border: 4px solid transparent;
407    cursor: pointer;
408    left: 0;
409    position: absolute;
410    -webkit-transform: translateX(0);
411        -ms-transform: translateX(0);
412            transform: translateX(0);
413    z-index: 11;
414}
415
416.mejs-time-handle-content {
417    border: 4px solid rgba(255, 255, 255, 0.9);
418    border-radius: 50%;
419    height: 10px;
420    left: -7px;
421    top: -4px;
422    -webkit-transform: scale(0);
423        -ms-transform: scale(0);
424            transform: scale(0);
425    width: 10px;
426}
427
428.mejs-time-rail:hover .mejs-time-handle-content,
429.mejs-time-rail .mejs-time-handle-content:focus,
430.mejs-time-rail .mejs-time-handle-content:active {
431    -webkit-transform: scale(1);
432        -ms-transform: scale(1);
433            transform: scale(1);
434}
435
436.mejs-time-float {
437    background: #eee;
438    border: solid 1px #333;
439    bottom: 100%;
440    color: #111;
441    display: none;
442    height: 17px;
443    margin-bottom: 9px;
444    position: absolute;
445    text-align: center;
446    -webkit-transform: translateX(-50%);
447        -ms-transform: translateX(-50%);
448            transform: translateX(-50%);
449    width: 36px;
450}
451
452.mejs-time-float-current {
453    display: block;
454    left: 0;
455    margin: 2px;
456    text-align: center;
457    width: 30px;
458}
459
460.mejs-time-float-corner {
461    border: solid 5px #eee;
462    border-color: #eee transparent transparent;
463    border-radius: 0;
464    display: block;
465    height: 0;
466    left: 50%;
467    line-height: 0;
468    position: absolute;
469    top: 100%;
470    -webkit-transform: translateX(-50%);
471        -ms-transform: translateX(-50%);
472            transform: translateX(-50%);
473    width: 0;
474}
475
476.mejs-long-video .mejs-time-float {
477    margin-left: -23px;
478    width: 64px;
479}
480
481.mejs-long-video .mejs-time-float-current {
482    width: 60px;
483}
484
485.mejs-broadcast {
486    color: #fff;
487    height: 10px;
488    position: absolute;
489    top: 15px;
490    width: 100%;
491}
492
493/* End: Progress Bar */
494
495/* Start: Fullscreen */
496.mejs-fullscreen-button > button {
497    background-position: -80px 0;
498}
499
500.mejs-unfullscreen > button {
501    background-position: -100px 0;
502}
503
504/* End: Fullscreen */
505
506/* Start: Mute/Volume */
507.mejs-mute > button {
508    background-position: -60px 0;
509}
510
511.mejs-unmute > button {
512    background-position: -40px 0;
513}
514
515.mejs-volume-button {
516    position: relative;
517}
518
519.mejs-volume-button > .mejs-volume-slider {
520    -webkit-backface-visibility: hidden;
521    background: rgba(50, 50, 50, 0.7);
522    border-radius: 0;
523    bottom: 100%;
524    display: none;
525    height: 115px;
526    left: 50%;
527    margin: 0;
528    position: absolute;
529    -webkit-transform: translateX(-50%);
530        -ms-transform: translateX(-50%);
531            transform: translateX(-50%);
532    width: 25px;
533    z-index: 1;
534}
535
536.mejs-volume-button:hover {
537    border-radius: 0 0 4px 4px;
538}
539
540.mejs-volume-total {
541    background: rgba(255, 255, 255, 0.5);
542    height: 100px;
543    left: 50%;
544    margin: 0;
545    position: absolute;
546    top: 8px;
547    -webkit-transform: translateX(-50%);
548        -ms-transform: translateX(-50%);
549            transform: translateX(-50%);
550    width: 2px;
551}
552
553.mejs-volume-current {
554    background: rgba(255, 255, 255, 0.9);
555    left: 0;
556    margin: 0;
557    position: absolute;
558    width: 100%;
559}
560
561.mejs-volume-handle {
562    background: rgba(255, 255, 255, 0.9);
563    border-radius: 1px;
564    cursor: ns-resize;
565    height: 6px;
566    left: 50%;
567    position: absolute;
568    -webkit-transform: translateX(-50%);
569        -ms-transform: translateX(-50%);
570            transform: translateX(-50%);
571    width: 16px;
572}
573
574.mejs-horizontal-volume-slider {
575    display: block;
576    height: 36px;
577    position: relative;
578    vertical-align: middle;
579    width: 56px;
580}
581
582.mejs-horizontal-volume-total {
583    background: rgba(50, 50, 50, 0.8);
584    border-radius: 2px;
585    font-size: 1px;
586    height: 8px;
587    left: 0;
588    margin: 0;
589    padding: 0;
590    position: absolute;
591    top: 16px;
592    width: 50px;
593}
594
595.mejs-horizontal-volume-current {
596    background: rgba(255, 255, 255, 0.8);
597    border-radius: 2px;
598    font-size: 1px;
599    height: 100%;
600    left: 0;
601    margin: 0;
602    padding: 0;
603    position: absolute;
604    top: 0;
605    width: 100%;
606}
607
608.mejs-horizontal-volume-handle {
609    display: none;
610}
611
612/* End: Mute/Volume */
613
614/* Start: Track (Captions and Chapters) */
615.mejs-captions-button,
616.mejs-chapters-button {
617    position: relative;
618}
619
620.mejs-captions-button > button {
621    background-position: -140px 0;
622}
623
624.mejs-chapters-button > button {
625    background-position: -180px 0;
626}
627
628.mejs-captions-button > .mejs-captions-selector,
629.mejs-chapters-button > .mejs-chapters-selector {
630    background: rgba(50, 50, 50, 0.7);
631    border: solid 1px transparent;
632    border-radius: 0;
633    bottom: 100%;
634    margin-right: -43px;
635    overflow: hidden;
636    padding: 0;
637    position: absolute;
638    right: 50%;
639    visibility: visible;
640    width: 86px;
641}
642
643.mejs-chapters-button > .mejs-chapters-selector {
644    margin-right: -55px;
645    width: 110px;
646}
647
648.mejs-captions-selector-list,
649.mejs-chapters-selector-list {
650    list-style-type: none !important;
651    margin: 0;
652    overflow: hidden;
653    padding: 0;
654}
655
656.mejs-captions-selector-list-item,
657.mejs-chapters-selector-list-item {
658    color: #fff;
659    cursor: pointer;
660    display: block;
661    list-style-type: none !important;
662    margin: 0 0 6px;
663    overflow: hidden;
664    padding: 0;
665}
666
667.mejs-captions-selector-list-item:hover,
668.mejs-chapters-selector-list-item:hover {
669    background-color: rgb(200, 200, 200) !important;
670    background-color: rgba(255, 255, 255, 0.4) !important;
671}
672
673.mejs-captions-selector-input,
674.mejs-chapters-selector-input {
675    clear: both;
676    float: left;
677    left: -1000px;
678    margin: 3px 3px 0 5px;
679    position: absolute;
680}
681
682.mejs-captions-selector-label,
683.mejs-chapters-selector-label {
684    cursor: pointer;
685    float: left;
686    font-size: 10px;
687    line-height: 15px;
688    padding: 4px 10px 0;
689    width: 100%;
690}
691
692.mejs-captions-selected,
693.mejs-chapters-selected {
694    color: rgba(33, 248, 248, 1);
695}
696
697.mejs-captions-translations {
698    font-size: 10px;
699    margin: 0 0 5px;
700}
701
702.mejs-captions-layer {
703    bottom: 0;
704    color: #fff;
705    font-size: 16px;
706    left: 0;
707    line-height: 20px;
708    position: absolute;
709    text-align: center;
710}
711
712.mejs-captions-layer a {
713    color: #fff;
714    text-decoration: underline;
715}
716
717.mejs-captions-layer[lang=ar] {
718    font-size: 20px;
719    font-weight: normal;
720}
721
722.mejs-captions-position {
723    bottom: 15px;
724    left: 0;
725    position: absolute;
726    width: 100%;
727}
728
729.mejs-captions-position-hover {
730    bottom: 35px;
731}
732
733.mejs-captions-text,
734.mejs-captions-text * {
735    background: rgba(20, 20, 20, 0.5);
736    box-shadow: 5px 0 0 rgba(20, 20, 20, 0.5), -5px 0 0 rgba(20, 20, 20, 0.5);
737    padding: 0;
738    white-space: pre-wrap;
739}
740
741.mejs-container.mejs-hide-cues video::-webkit-media-text-track-container {
742    display: none;
743}
744
745/* End: Track (Captions and Chapters) */
746
747/* Start: Error */
748.mejs-overlay-error {
749    position: relative;
750}
751.mejs-overlay-error > img {
752    left: 0;
753    max-width: 100%;
754    position: absolute;
755    top: 0;
756    z-index: -1;
757}
758.mejs-cannotplay,
759.mejs-cannotplay a {
760    color: #fff;
761    font-size: 0.8em;
762}
763
764.mejs-cannotplay {
765    position: relative;
766}
767
768.mejs-cannotplay p,
769.mejs-cannotplay a {
770    display: inline-block;
771    padding: 0 15px;
772    width: 100%;
773}
774/* End: Error */