.mejs-offscreen { left: -10000px; top: -10000px; width: 1px; height: 1px; overflow: hidden; position: absolute !important; } .mejs-container { background: rgb(0, 0, 0); text-align: left; text-indent: 0px; font-family: Helvetica,Arial; vertical-align: top; position: relative; } .me-plugin { position: absolute; } .mejs-embed { background: rgb(0, 0, 0); margin: 0px; padding: 0px; width: 100%; height: 100%; overflow: hidden; } .mejs-embed body { background: rgb(0, 0, 0); margin: 0px; padding: 0px; width: 100%; height: 100%; overflow: hidden; } .mejs-fullscreen { overflow: hidden !important; } .mejs-container-fullscreen { left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; position: fixed; z-index: 1000; } .mejs-container-fullscreen .mejs-mediaelement { width: 100%; height: 100%; } .mejs-container-fullscreen video { width: 100%; height: 100%; } .mejs-clear { clear: both; } .mejs-background { left: 0px; top: 0px; position: absolute; } .mejs-mediaelement { left: 0px; top: 0px; width: 100%; height: 100%; position: absolute; } .mejs-poster { background-position: 50% 50%; left: 0px; top: 0px; position: absolute; background-repeat: no-repeat; background-size: contain; } :root .mejs-poster img { display: none; } .mejs-poster img { padding: 0px; border: 0px currentColor; border-image: none; } .mejs-overlay { left: 0px; top: 0px; position: absolute; } .mejs-overlay-play { cursor: pointer; } .mejs-overlay-button { background: url("bigplay.svg") no-repeat; margin: -50px 0px 0px -50px; left: 50%; top: 50%; width: 100px; height: 100px; position: absolute; } .no-svg .mejs-overlay-button { background-image: url("bigplay.png"); } .mejs-overlay:hover .mejs-overlay-button { background-position: 0px -100px; } .mejs-overlay-loading { background: linear-gradient(rgba(50, 50, 50, 0.9), rgba(0, 0, 0, 0.9)); margin: -40px 0px 0px -40px; left: 50%; top: 50%; width: 80px; height: 80px; position: absolute; } .mejs-overlay-loading span { background: url("loading.gif") no-repeat 50% 50%; width: 80px; height: 80px; display: block; } .mejs-container .mejs-controls { background: linear-gradient(rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7)); margin: 0px; padding: 0px; left: 0px; width: 100%; height: 30px; bottom: 0px; list-style-type: none; position: absolute; } .mejs-container .mejs-controls div { margin: 0px; padding: 0px; border: 0px currentColor; border-image: none; width: 26px; height: 26px; line-height: 11px; font-family: Helvetica,Arial; font-size: 11px; float: left; display: block; list-style-type: none; background-image: none; } .mejs-controls .mejs-button button { background: url("controls.svg") no-repeat; margin: 7px 5px; padding: 0px; border: 0px currentColor; border-image: none; width: 16px; height: 16px; line-height: 0; font-size: 0px; text-decoration: none; display: block; position: absolute; cursor: pointer; } .no-svg .mejs-controls .mejs-button button { background-image: url("controls.png"); } .mejs-controls .mejs-button button:focus { outline: rgb(153, 153, 153) dotted 1px; } .mejs-container .mejs-controls .mejs-time { padding: 10px 3px 0px; width: auto; height: 17px; text-align: center; color: rgb(255, 255, 255); overflow: hidden; display: block; box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; } .mejs-container .mejs-controls .mejs-time a { margin: 1px 2px 0px 0px; width: auto; color: rgb(255, 255, 255); line-height: 12px; font-size: 11px; float: left; display: block; } .mejs-controls .mejs-play button { background-position: 0px 0px; } .mejs-controls .mejs-pause button { background-position: 0px -16px; } .mejs-controls .mejs-stop button { background-position: -112px 0px; } .mejs-controls div.mejs-time-rail { width: 200px; padding-top: 5px; direction: ltr; } .mejs-controls .mejs-time-rail span { border-radius: 2px; width: 180px; height: 10px; display: block; position: absolute; cursor: pointer; -moz-border-radius: 2px; -webkit-border-radius: 2px; } .mejs-controls .mejs-time-rail a { border-radius: 2px; width: 180px; height: 10px; display: block; position: absolute; cursor: pointer; -moz-border-radius: 2px; -webkit-border-radius: 2px; } .mejs-controls .mejs-time-rail .mejs-time-total { background: linear-gradient(rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8)); margin: 5px; } .mejs-controls .mejs-time-rail .mejs-time-buffering { animation:buffering-stripes 2s linear infinite; width: 100%; background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-size: 15px 15px; -webkit-background-size: 15px 15px; -moz-background-size: 15px 15px; -o-background-size: 15px 15px; -webkit-animation: buffering-stripes 2s linear infinite; -moz-animation: buffering-stripes 2s linear infinite; -o-animation: buffering-stripes 2s linear infinite; } .mejs-controls .mejs-time-rail .mejs-time-loaded { background: linear-gradient(rgba(44, 124, 145, 0.8), rgba(78, 183, 212, 0.8)); width: 0px; } .mejs-controls .mejs-time-rail .mejs-time-current { background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8)); width: 0px; } .mejs-controls .mejs-time-rail .mejs-time-handle { background: rgb(255, 255, 255); margin: 0px; border-radius: 5px; border: 2px solid rgb(51, 51, 51); border-image: none; top: -2px; width: 10px; text-align: center; display: none; position: absolute; cursor: pointer; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .mejs-controls .mejs-time-rail .mejs-time-float { background: rgb(238, 238, 238); border: 1px solid rgb(51, 51, 51); border-image: none; top: -26px; width: 36px; height: 17px; text-align: center; color: rgb(17, 17, 17); margin-left: -18px; display: none; position: absolute; } .mejs-controls .mejs-time-rail .mejs-time-float-current { margin: 2px; left: 0px; width: 30px; text-align: center; display: block; } .mejs-controls .mejs-time-rail .mejs-time-float-corner { border-width: 5px; border-style: solid; border-color: rgb(238, 238, 238) transparent transparent; border-radius: 0px; border-image: none; left: 13px; top: 15px; width: 0px; height: 0px; line-height: 0; display: block; position: absolute; -moz-border-radius: 0; -webkit-border-radius: 0; } .mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float { width: 48px; } .mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float-current { width: 44px; } .mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float-corner { left: 18px; } .mejs-controls .mejs-fullscreen-button button { background-position: -32px 0px; } .mejs-controls .mejs-unfullscreen button { background-position: -32px -16px; } .mejs-controls .mejs-volume-button { } .mejs-controls .mejs-mute button { background-position: -16px -16px; } .mejs-controls .mejs-unmute button { background-position: -16px 0px; } .mejs-controls .mejs-volume-button { position: relative; } .mejs-controls .mejs-volume-button .mejs-volume-slider { background: rgba(50, 50, 50, 0.7); margin: 0px; border-radius: 0px; left: 0px; top: -115px; width: 25px; height: 115px; display: none; position: absolute; z-index: 1; -moz-border-radius: 0; -webkit-border-radius: 0; } .mejs-controls .mejs-volume-button:hover { border-radius: 0px 0px 4px 4px; -moz-border-radius: 0 0 4px 4px; -webkit-border-radius: 0 0 4px 4px; } .mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-total { background: rgba(255, 255, 255, 0.5); margin: 0px; left: 11px; top: 8px; width: 2px; height: 100px; position: absolute; } .mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-current { background: rgba(255, 255, 255, 0.9); margin: 0px; left: 11px; top: 8px; width: 2px; height: 100px; position: absolute; } .mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-handle { background: rgba(255, 255, 255, 0.9); margin: 0px; border-radius: 1px; left: 4px; top: -3px; width: 16px; height: 6px; position: absolute; cursor: n-resize; -moz-border-radius: 1px; -webkit-border-radius: 1px; } .mejs-controls a.mejs-horizontal-volume-slider { width: 56px; height: 26px; vertical-align: middle; float: left; display: block; position: relative; } .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total { background: linear-gradient(rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8)); margin: 0px; padding: 0px; border-radius: 2px; left: 0px; top: 11px; width: 50px; height: 8px; font-size: 1px; position: absolute; -moz-border-radius: 2px; -webkit-border-radius: 2px; } .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8)); margin: 0px; padding: 0px; border-radius: 2px; left: 0px; top: 11px; width: 50px; height: 8px; font-size: 1px; position: absolute; -moz-border-radius: 2px; -webkit-border-radius: 2px; } .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle { display: none; } .mejs-controls .mejs-captions-button { position: relative; } .mejs-controls .mejs-captions-button button { background-position: -48px 0px; } .mejs-controls .mejs-captions-button .mejs-captions-selector { background: rgba(50, 50, 50, 0.7); padding: 10px 10px 0px; border-radius: 0px; border: 1px solid transparent; border-image: none; width: 85px; height: 100px; right: -51px; bottom: 26px; overflow: hidden; visibility: hidden; position: absolute; -moz-border-radius: 0; -webkit-border-radius: 0; } .mejs-controls .mejs-captions-button .mejs-captions-selector ul { margin: 0px; padding: 0px; overflow: hidden; display: block; list-style-type: none !important; } .mejs-controls .mejs-captions-button .mejs-captions-selector ul li { margin: 0px 0px 6px; padding: 0px; color: rgb(255, 255, 255); overflow: hidden; display: block; list-style-type: none !important; } .mejs-controls .mejs-captions-button .mejs-captions-selector ul li input { margin: 3px 3px 0px 5px; clear: both; float: left; } .mejs-controls .mejs-captions-button .mejs-captions-selector ul li label { padding: 4px 0px 0px; width: 55px; line-height: 15px; font-family: helvetica,arial; font-size: 10px; float: left; } .mejs-controls .mejs-captions-button .mejs-captions-translations { margin: 0px 0px 5px; font-size: 10px; } .mejs-chapters { left: 0px; top: 0px; width: 10000px; position: absolute; z-index: 1; -xborder-right: solid 1px #fff; } .mejs-chapters .mejs-chapter { background: linear-gradient(rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7)); border: 0px currentColor; border-image: none; overflow: hidden; float: left; position: absolute; } .mejs-chapters .mejs-chapter .mejs-chapter-block { padding: 5px; color: rgb(255, 255, 255); font-size: 11px; border-right-color: rgb(51, 51, 51); border-bottom-color: rgb(51, 51, 51); border-right-width: 1px; border-bottom-width: 1px; border-right-style: solid; border-bottom-style: solid; display: block; cursor: pointer; } .mejs-chapters .mejs-chapter .mejs-chapter-block-last { border-right-color: currentColor; border-right-width: 0px; border-right-style: none; } .mejs-chapters .mejs-chapter .mejs-chapter-block:hover { background: linear-gradient(rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6)); } .mejs-chapters .mejs-chapter .mejs-chapter-block .ch-title { margin: 0px 0px 3px; line-height: 12px; font-size: 12px; font-weight: 700; display: block; white-space: nowrap; -ms-text-overflow: ellipsis; } .mejs-chapters .mejs-chapter .mejs-chapter-block .ch-timespan { margin: 3px 0px 4px; line-height: 12px; font-size: 12px; display: block; white-space: nowrap; -ms-text-overflow: ellipsis; } .mejs-captions-layer { left: 0px; text-align: center; bottom: 0px; color: rgb(255, 255, 255); line-height: 20px; font-size: 16px; position: absolute; } .mejs-captions-layer a { color: rgb(255, 255, 255); text-decoration: underline; } [lang=ar].mejs-captions-layer { font-size: 20px; font-weight: 400; } .mejs-captions-position { left: 0px; width: 100%; bottom: 15px; position: absolute; } .mejs-captions-position-hover { bottom: 35px; } .mejs-captions-text { background: rgba(20, 20, 20, 0.5); padding: 3px 5px; white-space: pre-wrap; } .me-cannotplay { } .me-cannotplay a { color: rgb(255, 255, 255); font-weight: 700; } .me-cannotplay span { padding: 15px; display: block; } .mejs-controls .mejs-loop-off button { background-position: -64px -16px; } .mejs-controls .mejs-loop-on button { background-position: -64px 0px; } .mejs-controls .mejs-backlight-off button { background-position: -80px -16px; } .mejs-controls .mejs-backlight-on button { background-position: -80px 0px; } .mejs-controls .mejs-picturecontrols-button { background-position: -96px 0px; } .mejs-contextmenu { background: rgb(255, 255, 255); padding: 10px; border-radius: 4px; border: 1px solid rgb(153, 153, 153); border-image: none; left: 0px; top: 0px; width: 150px; position: absolute; z-index: 1001; } .mejs-contextmenu .mejs-contextmenu-separator { background: rgb(51, 51, 51); margin: 5px 6px; height: 1px; font-size: 0px; } .mejs-contextmenu .mejs-contextmenu-item { padding: 4px 6px; color: rgb(51, 51, 51); font-family: Helvetica,Arial; font-size: 12px; cursor: pointer; } .mejs-contextmenu .mejs-contextmenu-item:hover { background: rgb(44, 124, 145); color: rgb(255, 255, 255); } .mejs-controls .mejs-sourcechooser-button { position: relative; } .mejs-controls .mejs-sourcechooser-button button { background-position: -128px 0px; } .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector { background: rgba(50, 50, 50, 0.7); padding: 10px; border-radius: 0px; border: 1px solid transparent; border-image: none; width: 130px; height: 100px; right: -10px; bottom: 26px; overflow: hidden; visibility: hidden; position: absolute; -moz-border-radius: 0; -webkit-border-radius: 0; } .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul { margin: 0px; padding: 0px; overflow: hidden; display: block; list-style-type: none !important; } .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li { margin: 0px 0px 6px; padding: 0px; color: rgb(255, 255, 255); overflow: hidden; display: block; list-style-type: none !important; } .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li input { margin: 3px 3px 0px 5px; clear: both; float: left; } .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li label { padding: 4px 0px 0px; width: 100px; line-height: 15px; font-family: helvetica,arial; font-size: 10px; float: left; } .mejs-postroll-layer { background: rgba(50, 50, 50, 0.7); left: 0px; width: 100%; height: 100%; bottom: 0px; overflow: hidden; position: absolute; z-index: 1000; } .mejs-postroll-layer-content { width: 100%; height: 100%; } .mejs-postroll-close { background: rgba(50, 50, 50, 0.7); padding: 4px; top: 0px; right: 0px; color: rgb(255, 255, 255); position: absolute; z-index: 100; cursor: pointer; } div.mejs-speed-button { width: 46px !important; position: relative; } .mejs-controls .mejs-speed-button.mejs-button button { background: none; width: 36px; color: rgb(255, 255, 255); line-height: normal; font-size: 11px; } .mejs-controls .mejs-speed-button .mejs-speed-selector { background: rgba(50, 50, 50, 0.7); padding: 0px; border-radius: 0px; border: 1px solid transparent; border-image: none; left: -10px; top: -100px; width: 60px; height: 100px; overflow: hidden; visibility: hidden; position: absolute; -moz-border-radius: 0; -webkit-border-radius: 0; } .mejs-controls .mejs-speed-button:hover > .mejs-speed-selector { visibility: visible; } .mejs-controls .mejs-speed-button .mejs-speed-selector ul li label.mejs-speed-selected { color: rgba(33, 248, 248, 1); } .mejs-controls .mejs-speed-button .mejs-speed-selector ul { margin: 0px; padding: 0px; overflow: hidden; display: block; list-style-type: none !important; } .mejs-controls .mejs-speed-button .mejs-speed-selector ul li { margin: 0px 0px 6px; padding: 0px 10px; color: rgb(255, 255, 255); overflow: hidden; display: block; list-style-type: none !important; } .mejs-controls .mejs-speed-button .mejs-speed-selector ul li input { margin: 3px 3px 0px 5px; clear: both; float: left; display: none; } .mejs-controls .mejs-speed-button .mejs-speed-selector ul li label { padding: 4px 0px 0px; width: 60px; color: rgb(255, 255, 255); line-height: 15px; font-family: helvetica,arial; font-size: 11.5px; margin-left: 5px; float: left; cursor: pointer; } .mejs-controls .mejs-speed-button .mejs-speed-selector ul li:hover { background-color: rgba(255, 255, 255, 0.4) !important; } .mejs-controls .mejs-skip-back-button.mejs-button { background: url("skipback.png") no-repeat 3px 3px; } .mejs-controls .mejs-skip-back-button.mejs-button button { background: none; color: rgb(255, 255, 255); line-height: normal; font-size: 9px; }