@sapudex/web-components 0.111.0

package/src/themes/MediaPlayer.css

@@ -0,0 +1,1916 @@
+:host {
+  --udex-media-player-height: 500px;
+  --udex-media-player-width: 100%;
+  --udex-media-player-mobile-height: 150px;
+  --udex-media-player-mobile-width: 100%;
+  --udex-media-player-controls-bar-height: 48px;
+  --udex-media-player-controls-bar-small-height: 34px;
+  --udex-media-player-base-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="white"><path d="M423.5 49h-335c-13 0-24 12-24 27v329c0 15 11 27 24 27h335c13 0 24-12 24-27V76c0-15-11-27-24-27zm0 431h-335c-40 0-72-33-72-75V76c0-41 32-75 72-75h335c40 0 72 34 72 75v329c0 42-32 75-72 75z"></path></svg>');
+  --udex-media-player-pause-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="white"><path d="M358 480h-33q-11 0-18.5-7.5T299 454V58q0-11 7.5-18.5T325 32h33q11 0 18.5 7.5T384 58v396q0 11-7.5 18.5T358 480zm-171 0h-33q-11 0-18.5-7.5T128 454V58q0-11 7.5-18.5T154 32h33q11 0 18.5 7.5T213 58v396q0 11-7.5 18.5T187 480z"></path></svg>');
+  --udex-media-player-play-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="white"><path d="M122 480q-11 0-18.5-7.5T96 454V58q0-11 7.5-18.5T122 32q7 0 15 5l269 198q10 8 10 21t-10 21L137 475q-8 5-15 5zm25-372v296l200-148z"></path></svg>');
+  --udex-media-player-skip-forward-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="white"><path d="M503 236q9 7 9 20 0 12-9 20L298 442q-7 6-16 6-11 0-18.5-7.5T256 422V90q0-11 7.5-18.5T282 64q9 0 16 6zm-256 0q9 7 9 20 0 12-9 20L42 442q-7 6-16 6-11 0-18.5-7.5T0 422V90q0-11 7.5-18.5T26 64q9 0 16 6zm199 20L307 143v226zm-256 0L51 143v226z"></path></svg>');
+  --udex-media-player-skip-backward-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="white"><path d="M10 276q-10-8-10-20t10-20L214 70q8-6 16-6 11 0 18.5 7.5T256 90v332q0 11-7.5 18.5T230 448q-8 0-16-6zm256 0q-10-8-10-20t10-20L470 70q8-6 16-6 11 0 18.5 7.5T512 90v332q0 11-7.5 18.5T486 448q-8 0-16-6zM66 256l139 113V143zm256 0 139 113V143z"></path></svg>');
+  --udex-media-player-volume-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="white"><path d="M427 63q40 38 62.5 88T512 256t-22.5 105-62.5 88q-9 7-17 7-11 0-18.5-7.5T384 430t8-19q32-30 50.5-70t18.5-85-18.5-85-50.5-70q-8-8-8-19t7.5-18.5T410 56q8 0 17 7zm-179 6q5-5 14-5 11 0 18.5 7t7.5 19v332q0 11-7.5 18.5T262 448q-7 0-14-5l-128-91H26q-11 0-18.5-7.5T0 326V186q0-11 7.5-18.5T26 160h94zm92 49q17 0 30.5 16.5t24 39 16 46T416 256t-5.5 36-16 45.5-24 39T340 393q-11 0-18.5-6.5T314 370q0-14 15-27 15-14 25.5-37.5T365 256t-10.5-49.5T329 169t-15-27q0-10 7.5-17t18.5-7zm-103 21-94 67q-5 5-15 5H51v90h77q10 0 15 5l94 67V139z"></path></svg>');
+  --udex-media-player-volume-muted-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="white"><path d="M262 64q11 0 18.5 7.5T288 90v332q0 11-7.5 18.5T262 448q-7 0-14-5l-128-91H26q-11 0-18.5-7.5T0 326V186q0-11 7.5-18.5T26 160h94l128-91q7-5 14-5zm-25 75-94 67q-7 5-15 5H51v90h77q10 0 15 5l94 67V139zm268 172q7 7 7 17 0 11-7.5 18.5T486 354q-10 0-18-8l-51-53-53 55q-8 8-18 8-11 0-18.5-7.5T320 330q0-10 7-17l55-57-55-57q-7-7-7-17 0-11 7.5-18.5T346 156q10 0 18 8l53 55 51-53q8-8 18-8 11 0 18.5 7.5T512 184q0 10-7 17l-53 55z"></path></svg>');
+  --udex-media-player-fullscreen-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="white"><path d="M486 0q11 0 18.5 7.5T512 26v108q0 11-7.5 18.5T486 160t-18-7.5-7-18.5V87l-97 97q-8 8-18 8-11 0-18.5-7.5T320 166q0-10 8-18l97-97h-47q-11 0-18.5-7T352 26t7.5-18.5T378 0h108zM230 32q11 0 18.5 7.5T256 58t-7.5 18-18.5 7H90q-7 0-7 7v140q0 11-7 18.5T58 256t-18.5-7.5T32 230V90q0-24 17-41t41-17h140zm224 224q11 0 18.5 7.5T480 282v140q0 24-17 41t-41 17H282q-11 0-18.5-7.5T256 454t7.5-18 18.5-7h140q7 0 7-7V282q0-11 7-18.5t18-7.5zm-306 71q7-7 18-7t18.5 7.5T192 346t-7 18l-98 97h47q11 0 18.5 7t7.5 18-7.5 18.5T134 512H26q-11 0-18.5-7.5T0 486V378q0-11 7.5-18.5T26 352t18 7.5 7 18.5v47z"></path></svg>');
+  --udex-media-player-exit-fullscreen-icon: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M8.53125 14.1562C8.875 14.1562 9.15625 14.2812 9.375 14.5312C9.625 14.75 9.75 15.0312 9.75 15.375V21.375C9.75 21.7188 9.625 22 9.375 22.2188C9.15625 22.4375 8.875 22.5469 8.53125 22.5469C8.1875 22.5469 7.90625 22.4375 7.6875 22.2188C7.46875 22 7.35938 21.7188 7.35938 21.375V18.2812L4.03125 21.5625C3.8125 21.7812 3.53125 21.8906 3.1875 21.8906C2.84375 21.8906 2.5625 21.7812 2.34375 21.5625C2.09375 21.3125 1.96875 21.0312 1.96875 20.7188C1.96875 20.4062 2.09375 20.125 2.34375 19.875L5.625 16.5938H2.53125C2.1875 16.5938 1.90625 16.4844 1.6875 16.2656C1.46875 16.0156 1.35938 15.7188 1.35938 15.375C1.35938 15.0312 1.46875 14.75 1.6875 14.5312C1.90625 14.2812 2.1875 14.1562 2.53125 14.1562H8.53125ZM21.7031 6.98438C22.0469 6.98438 22.3281 7.10938 22.5469 7.35938C22.7969 7.57812 22.9219 7.85938 22.9219 8.20312C22.9219 8.54688 22.7969 8.82812 22.5469 9.04688C22.3281 9.26562 22.0469 9.375 21.7031 9.375H15.75C15.4062 9.375 15.1094 9.26562 14.8594 9.04688C14.6406 8.82812 14.5312 8.54688 14.5312 8.20312V2.20312C14.5312 1.85938 14.6406 1.57812 14.8594 1.35938C15.1094 1.10937 15.4062 0.984375 15.75 0.984375C16.0938 0.984375 16.375 1.10937 16.5938 1.35938C16.8125 1.57812 16.9219 1.85938 16.9219 2.20312V5.29688L20.2031 2.01562C20.4531 1.76562 20.7344 1.64062 21.0469 1.64062C21.3906 1.64062 21.6875 1.76562 21.9375 2.01562C22.1562 2.26562 22.2656 2.54688 22.2656 2.85938C22.2656 3.17188 22.1562 3.45312 21.9375 3.70312L18.6094 6.98438H21.7031ZM4.92188 10.5C4.54688 10.5 4.23438 10.3906 3.98438 10.1719C3.76562 9.95312 3.65625 9.65625 3.65625 9.28125V6.75C3.65625 5.6875 4.01562 4.79688 4.73438 4.07812C5.45312 3.35938 6.34375 3 7.40625 3H9.89062C10.2656 3 10.5625 3.125 10.7812 3.375C11.0312 3.59375 11.1562 3.89062 11.1562 4.26562C11.1562 4.64062 11.0312 4.95312 10.7812 5.20312C10.5625 5.42188 10.2656 5.53125 9.89062 5.53125H7.40625C6.59375 5.53125 6.1875 5.9375 6.1875 6.75V9.28125C6.1875 9.65625 6.0625 9.95312 5.8125 10.1719C5.59375 10.3906 5.29688 10.5 4.92188 10.5ZM20.5312 13.4531C20.9062 13.4531 21.2031 13.5781 21.4219 13.8281C21.6406 14.0469 21.75 14.3438 21.75 14.7188V17.2031C21.75 18.2656 21.3906 19.1562 20.6719 19.875C19.9844 20.5938 19.0938 20.9531 18 20.9531H15.5156C15.1406 20.9531 14.8438 20.8438 14.625 20.625C14.4062 20.375 14.2969 20.0625 14.2969 19.6875C14.2969 19.3125 14.4062 19.0156 14.625 18.7969C14.8438 18.5469 15.1406 18.4219 15.5156 18.4219H18.0469C18.3906 18.4219 18.6719 18.3125 18.8906 18.0938C19.1406 17.875 19.2656 17.5781 19.2656 17.2031V14.6719C19.2656 14.2969 19.375 14 19.5938 13.7812C19.8438 13.5625 20.1562 13.4531 20.5312 13.4531Z" fill="white"/></svg>');
+  --udex-media-player-close-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="white"><path d="m292 256 117 116q7 7 7 18 0 12-7.5 19t-18.5 7q-10 0-18-8L256 292 140 408q-8 8-18 8-11 0-18.5-7.5T96 390q0-10 8-18l116-116-116-116q-8-8-8-18 0-11 7.5-18.5T122 96t18 7l116 117 116-117q7-7 18-7t18.5 7.5T416 122t-7 18z"></path></svg>');
+  --udex-media-player-big-play-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="white"><path d="M256 0q53 0 100 20t81.5 54.5T492 156t20 100-20 100-54.5 81.5T356 492t-100 20-100-20-81.5-54.5T20 356 0 256t20-100 54.5-81.5T156 20 256 0zm0 461q43 0 80.5-16t65-44 43.5-65 16-80-16-80.5-43.5-65-65-43.5T256 51t-80 16-65 43.5-44 65T51 256t16 80 44 65 65 44 80 16zm85-226q11 8 11 21t-11 21l-109 77q-7 5-14 5-11 0-18.5-7.5T192 333V179q0-11 7.5-18.5T218 153q7 0 14 5z"></path></svg>')
+}
+
+
+.udex-media-player__container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.video-js:not(.udex-media-player__video-embed):not(.udex-media-player__iframe-poster):not(.udex-media-player__fluid) {
+  width: var(--udex-media-player-width);
+  height: var(--udex-media-player-height);
+}
+
+
+/* Video-js library styles */
+
+.vjs-svg-icon {
+  fill: currentColor;
+  background-position: 50%;
+  background-repeat: no-repeat;
+  display: inline-block;
+  height: 1.8em;
+  width: 1.8em;
+}
+
+.vjs-svg-icon:before {
+  content: none!important
+}
+
+.vjs-control:focus .vjs-svg-icon,.vjs-svg-icon:hover {
+  filter: drop-shadow(0 0 .25em #fff)
+}
+
+.video-js .vjs-big-play-button .vjs-icon-placeholder:before,.video-js .vjs-modal-dialog,.vjs-button>.vjs-icon-placeholder:before,.vjs-modal-dialog .vjs-modal-dialog-content {
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%
+}
+
+.video-js .vjs-big-play-button .vjs-icon-placeholder:before,.vjs-button>.vjs-icon-placeholder:before {
+  text-align: center
+}
+
+.video-js {
+  background-color: #000;
+  box-sizing: border-box;
+  color: #fff;
+  display: inline-block;
+  font-family: var(--sapFontFamily);
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1;
+  padding: 0;
+  position: relative;
+  vertical-align: top;
+  word-break: normal;
+  --sapContent_IconColor: #fff;
+}
+
+.video-js:-moz-full-screen {
+  position: absolute
+}
+
+.video-js:-webkit-full-screen {
+  height: 100%!important;
+  width: 100%!important
+}
+
+.video-js[tabindex="-1"] {
+  outline: none
+}
+
+.video-js *,.video-js :after,.video-js :before {
+  box-sizing: inherit
+}
+
+.video-js ul {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  list-style-position: outside;
+  margin: 0
+}
+
+.video-js.vjs-1-1,.video-js.vjs-16-9,.video-js.vjs-4-3,.video-js.vjs-9-16,.video-js.vjs-fluid {
+  max-width: 100%;
+  width: 100%
+}
+
+.video-js.vjs-1-1:not(.vjs-audio),.video-js.vjs-16-9:not(.vjs-audio),.video-js.vjs-4-3:not(.vjs-audio),.video-js.vjs-9-16:not(.vjs-audio),.video-js.vjs-fluid:not(.vjs-audio){
+  height: 0
+}
+
+.video-js.vjs-16-9:not(.vjs-audio) {
+  padding-top: 56.25%
+}
+
+.video-js.vjs-4-3:not(.vjs-audio) {
+  padding-top: 75%
+}
+
+.video-js.vjs-9-16:not(.vjs-audio) {
+  padding-top: 177.7777777778%
+}
+
+.video-js.vjs-1-1:not(.vjs-audio) {
+  padding-top: 100%
+}
+
+.video-js .vjs-tech,
+.video-js.vjs-fill:not(.vjs-audio) {
+  height: 100%;
+  width: 100%
+}
+
+
+.video-js.vjs-audio .vjs-tech {
+  display: none
+}
+
+.vjs-lock-showing {
+  display: block!important;
+  opacity: 1!important;
+  visibility: visible!important
+}
+
+.vjs-no-js {
+  background-color: #000;
+  color: #fff;
+  font-family: Arial,Helvetica,sans-serif;
+  font-size: 18px;
+  height: 150px;
+  margin: 0 auto;
+  padding: 20px;
+  text-align: center;
+  width: 300px
+}
+
+.vjs-no-js a,.vjs-no-js a:visited {
+  color: #66a8cc
+}
+
+.vjs-big-play-button .vjs-svg-icon {
+  height: 1em;
+  left: 50%;
+  line-height: 1;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%,-50%);
+  width: 1em
+}
+
+.vjs-controls-disabled .vjs-big-play-button,
+.vjs-error .vjs-big-play-button,
+.vjs-has-started .vjs-big-play-button,
+.vjs-using-native-controls .vjs-big-play-button {
+  display: none;
+}
+
+.vjs-has-started.vjs-paused:not(.vjs-audio):not(.vjs-controls-disabled) .vjs-big-play-button {
+  display: block;
+}
+
+.vjs-has-started.vjs-paused.vjs-show-big-play-button-on-pause:not(.vjs-seeking,.vjs-scrubbing,.vjs-error) .vjs-big-play-button {
+  display: block;
+}
+
+.js-focus-visible .vjs-menu :not(.vjs-selected):focus:not(.focus-visible),.video-js .vjs-menu :not(.vjs-selected):focus:not(:focus-visible) {
+  background: none
+}
+
+.vjs-audio .vjs-control-bar,.vjs-has-started .vjs-control-bar {
+  display: flex;
+  opacity: 1;
+  transition: visibility .1s,opacity .1s;
+  visibility: visible
+}
+
+.video-js .vjs-control:focus,.video-js .vjs-control:focus:before,.video-js .vjs-control:hover:before {
+  outline-color: rgb(0, 95, 204);
+  text-shadow: 0 0 1em #fff
+}
+
+
+@keyframes vjs-spinner-show {
+  to {
+      visibility: visible
+  }
+}
+
+@keyframes vjs-spinner-spin {
+  to {
+      transform: rotate(1turn)
+  }
+}
+
+@keyframes vjs-spinner-fade {
+  0% {
+      border-top-color: #73859f
+  }
+
+  20% {
+      border-top-color: #73859f
+  }
+
+  35% {
+      border-top-color: #fff
+  }
+
+  60% {
+      border-top-color: #73859f
+  }
+
+  to {
+      border-top-color: #73859f
+  }
+}
+
+.video-js.vjs-audio .vjs-captions-button {
+  display: none
+}
+
+.vjs-chapters-button .vjs-menu ul {
+  width: 24em
+}
+
+.video-js.vjs-audio .vjs-descriptions-button {
+  display: none
+}
+
+
+@supports (display: grid) {
+  .vjs-text-track-settings .vjs-modal-dialog-content {
+      display:grid;
+      grid-template-columns: 1fr 1fr;
+      grid-template-rows: 1fr;
+      padding: 20px 24px 0
+  }
+
+  .vjs-track-settings-controls .vjs-default-button {
+      margin-bottom: 20px
+  }
+
+  .vjs-text-track-settings .vjs-track-settings-controls {
+      grid-column: 1/-1
+  }
+
+  .vjs-layout-small .vjs-text-track-settings .vjs-modal-dialog-content,.vjs-layout-tiny .vjs-text-track-settings .vjs-modal-dialog-content,.vjs-layout-x-small .vjs-text-track-settings .vjs-modal-dialog-content {
+      grid-template-columns: 1fr
+  }
+}
+
+@media print {
+  .video-js>:not(.vjs-tech):not(.vjs-poster) {
+      visibility: hidden
+  }
+}
+
+.vjs-mouse.vjs-playlist {
+  font-size: 15px
+}
+
+.vjs-mouse.vjs-playlist .vjs-playlist-description {
+  height: 30px;
+  line-height: 23px
+}
+
+@media (min-width: 600px) {
+  .vjs-mouse.vjs-playlist {
+      font-size:17px
+  }
+
+  .vjs-mouse.vjs-playlist .vjs-playlist-description {
+      height: 34px;
+      line-height: 26px
+  }
+
+  .vjs-playlist .vjs-playlist-name {
+      line-height: 22px
+  }
+}
+
+@media (max-width: 520px) {
+  .vjs-mouse.vjs-playlist .vjs-selected .vjs-playlist-now-playing-text,.vjs-mouse.vjs-playlist .vjs-up-next .vjs-up-next-text,.vjs-playlist .vjs-selected .vjs-playlist-now-playing-text,.vjs-playlist .vjs-up-next .vjs-up-next-text {
+      display:none
+  }
+}
+
+@media (min-width: 521px) {
+  .vjs-playlist img {
+      min-height:85px
+  }
+}
+
+@media (max-width: 750px) {
+  .vjs-playlist .vjs-playlist-duration {
+      display:none
+  }
+}
+
+
+.vjs-modal-dialog .vjs-modal-dialog-content, .video-js .vjs-modal-dialog {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.video-js:-moz-full-screen {
+  position: absolute;
+}
+
+.video-js:-webkit-full-screen {
+  width: 100% !important;
+  height: 100% !important;
+}
+
+.video-js[tabindex="-1"] {
+  outline: none;
+}
+
+.video-js *,
+.video-js *:before,
+.video-js *:after {
+  box-sizing: inherit;
+}
+
+.video-js ul {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  list-style-position: outside;
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.video-js.vjs-fluid,
+.video-js.vjs-16-9,
+.video-js.vjs-4-3,
+.video-js.vjs-9-16,
+.video-js.vjs-1-1 {
+  width: 100%;
+  max-width: 100%;
+}
+
+.video-js.vjs-1-1,.video-js.vjs-16-9,.video-js.vjs-4-3,.video-js.vjs-9-16,.video-js.vjs-fluid {
+  max-width: 100%;
+  width: 100%
+}
+
+.video-js .vjs-tech {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+}
+
+body.vjs-full-window,
+body.vjs-pip-window {
+  padding: 0;
+  margin: 0;
+  height: 100%;
+}
+
+.vjs-full-window .video-js.vjs-fullscreen,
+body.vjs-pip-window .video-js {
+  position: fixed;
+  overflow: hidden;
+  z-index: 1000;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+}
+
+.video-js.vjs-fullscreen:not(.vjs-ios-native-fs),
+body.vjs-pip-window .video-js {
+  width: 100% !important;
+  height: 100% !important;
+  padding-top: 0 !important;
+  display: block;
+}
+
+.video-js.vjs-fullscreen.vjs-user-inactive {
+  cursor: none;
+}
+
+.vjs-pip-container .vjs-pip-text {
+  position: absolute;
+  bottom: 10%;
+  font-size: 2em;
+  background-color: rgba(0, 0, 0, 0.7);
+  padding: 0.5em;
+  text-align: center;
+  width: 100%;
+}
+
+.vjs-layout-tiny.vjs-pip-container .vjs-pip-text,
+.vjs-layout-x-small.vjs-pip-container .vjs-pip-text,
+.vjs-layout-small.vjs-pip-container .vjs-pip-text {
+  bottom: 0;
+  font-size: 1.4em;
+}
+
+.vjs-hidden {
+  display: none !important;
+}
+
+.vjs-disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.video-js .vjs-offscreen {
+  height: 1px;
+  left: -9999px;
+  position: absolute;
+  top: 0;
+  width: 1px;
+}
+
+.video-js .vjs-big-play-button:focus:not(:focus-visible) {
+  outline: rgb(0, 95, 204) auto 2px;
+}
+
+.video-js .vjs-big-play-button {
+  font-size: 3em;
+  height: 20%;
+  max-height: 100px;
+  max-width: 100px;
+  width: auto;
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 0;
+  cursor: pointer;
+  opacity: 1;
+  background-color: rgba(0, 0, 0, 0.4);
+  border-radius: 50%;
+  transition: all 0.4s;
+  line-height: 0;
+}
+
+.video-js .vjs-big-play-button [ui5-icon] {
+  width: 100%;
+  height: 100%;
+}
+
+.video-js.vjs-16-9 .vjs-big-play-button {
+  width: calc(20% / 1.778);
+}
+
+.video-js.vjs-4-3 .vjs-big-play-button {
+  width: calc(20% / 1.333); 
+}
+
+.video-js.vjs-1-1 .vjs-big-play-button {
+  width: 20%;
+}
+
+.video-js.vjs-9-16 .vjs-big-play-button {
+  width: calc(20% / 0.5625);
+}
+
+.video-js .vjs-big-play-button:before {
+  line-height: inherit;
+  vertical-align: middle;
+}
+.video-js .vjs-big-play-button:before {
+  content: var(--udex-media-player-big-play-icon);
+  width: 100%;
+  height: 100%;
+}
+
+.video-js:hover .vjs-big-play-button,
+.video-js .vjs-big-play-button:focus {
+  transition: all 0s;
+}
+
+.vjs-controls-disabled .vjs-big-play-button,
+.vjs-has-started .vjs-big-play-button,
+.vjs-using-native-controls .vjs-big-play-button,
+.vjs-error .vjs-big-play-button {
+  display: none;
+}
+
+.vjs-has-started.vjs-paused.vjs-show-big-play-button-on-pause:not(.vjs-seeking, .vjs-scrubbing, .vjs-error) .vjs-big-play-button {
+  display: block;
+}
+
+.video-js button {
+  background: none;
+  border: none;
+  color: inherit;
+  display: inline-block;
+  font-size: inherit;
+  line-height: inherit;
+  text-transform: none;
+  text-decoration: none;
+  transition: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.vjs-control .vjs-button {
+  width: 100%;
+  height: 100%;
+}
+
+.video-js .vjs-control.vjs-close-button {
+  cursor: pointer;
+  height: 3em;
+  position: absolute;
+  right: 0;
+  top: 0.5em;
+  z-index: 2;
+}
+.video-js .vjs-modal-dialog {
+  background: rgba(0, 0, 0, 0.8);
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0));
+  overflow: auto;
+}
+
+.video-js .vjs-modal-dialog > * {
+  box-sizing: border-box;
+}
+
+.vjs-modal-dialog .vjs-modal-dialog-content {
+  font-size: 1.2em;
+  line-height: 1.5;
+  padding: 20px 24px;
+  z-index: 1;
+}
+
+.vjs-menu-button {
+  cursor: pointer;
+}
+
+.vjs-menu-button.vjs-disabled {
+  cursor: default;
+}
+
+.vjs-workinghover .vjs-menu-button.vjs-disabled:hover .vjs-menu {
+  display: none;
+}
+
+.vjs-menu .vjs-menu-content {
+  display: block;
+  padding: 0;
+  margin: 0;
+  overflow: auto;
+}
+
+.vjs-menu .vjs-menu-content > * {
+  box-sizing: border-box;
+}
+
+.vjs-scrubbing .vjs-control.vjs-menu-button:hover .vjs-menu {
+  display: none;
+}
+
+.vjs-menu li {
+  display: flex;
+  justify-content: center;
+  list-style: none;
+  margin: 0;
+  padding: 3px 6px 3px 6px;
+  line-height: 18px;
+  font-size: 12px;
+  text-align: center;
+}
+
+.vjs-menu li.vjs-menu-item:focus,
+.vjs-menu li.vjs-menu-item:hover,
+.js-focus-visible .vjs-menu li.vjs-menu-item:hover {
+  background-color: var(--udexColorGrey7, #475E75);
+  color: #FFFFFF;
+}
+
+.vjs-menu li.vjs-selected,
+.vjs-menu li.vjs-selected:focus,
+.vjs-menu li.vjs-selected:hover,
+.js-focus-visible .vjs-menu li.vjs-selected:hover {
+  background-color: var(--udexColorGrey2, #EAECEE);
+  color: var(--udexColorGrey9, #223548);
+}
+
+.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;
+  font-size: 1em;
+  line-height: 2em;
+  padding: 0;
+  margin: 0 0 0.3em 0;
+  font-weight: bold;
+  cursor: default;
+}
+
+.vjs-menu-button-popup .vjs-menu {
+  display: none;
+  position: absolute;
+  bottom: 0;
+  min-width: 105px;
+  left: -3em;
+  height: 0em;
+  border-top-color: rgba(43, 51, 63, 0.7);
+}
+
+.vjs-pip-window .vjs-menu-button-popup .vjs-menu {
+  left: unset;
+  right: 1em;
+}
+
+.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
+  background-color: var(--udexColorGrey10, #1A2733);
+  position: absolute;
+  width: 100%;
+  bottom: var(--udex-media-player-controls-bar-height);
+  max-height: 15em;
+  text-transform: capitalize;
+}
+.vjs-subs-caps-button .vjs-menu .vjs-menu-content {
+  min-width: 105px;
+}
+
+.vjs-layout-tiny .vjs-menu-button-popup .vjs-menu .vjs-menu-content,
+.vjs-layout-x-small .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
+  max-height: 5em;
+}
+
+.vjs-layout-small .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
+  max-height: 10em;
+}
+
+.vjs-layout-medium .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
+  max-height: 14em;
+}
+
+.vjs-layout-large .vjs-menu-button-popup .vjs-menu .vjs-menu-content,
+.vjs-layout-x-large .vjs-menu-button-popup .vjs-menu .vjs-menu-content,
+.vjs-layout-huge .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
+  max-height: 25em;
+}
+
+.vjs-workinghover .vjs-menu-button-popup.vjs-hover .vjs-menu,
+.vjs-menu-button-popup .vjs-menu.vjs-lock-showing {
+  display: block;
+}
+
+.video-js .vjs-menu-button-inline {
+  transition: all 0.4s;
+  overflow: hidden;
+}
+
+.video-js .vjs-menu-button-inline:before {
+  width: 2.222222222em;
+}
+
+.video-js .vjs-menu-button-inline:hover,
+.video-js .vjs-menu-button-inline:focus,
+.video-js .vjs-menu-button-inline.vjs-slider-active {
+  width: 12em;
+}
+
+.vjs-menu-button-inline .vjs-menu {
+  opacity: 0;
+  height: 100%;
+  width: auto;
+  position: absolute;
+  left: 4em;
+  top: 0;
+  padding: 0;
+  margin: 0;
+  transition: all 0.4s;
+}
+
+.vjs-menu-button-inline:hover .vjs-menu,
+.vjs-menu-button-inline:focus .vjs-menu,
+.vjs-menu-button-inline.vjs-slider-active .vjs-menu {
+  display: block;
+  opacity: 1;
+}
+
+.vjs-menu-button-inline .vjs-menu-content {
+  width: auto;
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+}
+
+.video-js .vjs-control-bar {
+  display: none;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: var(--udex-media-player-controls-bar-height);
+  background-color: var(--udexColorGrey10, #1A2733);
+}
+
+.video-js:not(.vjs-controls-disabled, .vjs-using-native-controls, .vjs-error) .vjs-control-bar.vjs-lock-showing {
+  display: flex !important;
+}
+
+.vjs-has-started .vjs-control-bar {
+  display: flex;
+  visibility: visible;
+  opacity: 1;
+  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;
+  transition: visibility 1s, opacity 1s;
+}
+
+.vjs-controls-disabled .vjs-control-bar,
+.vjs-using-native-controls .vjs-control-bar,
+.vjs-error .vjs-control-bar {
+  display: none !important;
+}
+
+.vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+}
+
+.video-js .vjs-control {
+  position: relative;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 24px;
+  margin-right: 16px;
+  flex: none;
+}
+
+.video-js .vjs-control.vjs-fullscreen-control {
+  margin-right: 12px;
+}
+
+.video-js .vjs-control.vjs-play-control {
+  margin-left: 12px;
+}
+
+.video-js .vjs-control.vjs-remaining-time {
+  margin: 0;
+}
+
+.video-js .vjs-control.vjs-progress-control,
+.video-js .vjs-control.vjs-time-control {
+  margin: 0 16px 0 0;
+}
+
+.video-js .vjs-control.vjs-visible-text {
+  width: auto;
+  padding-left: 1em;
+  padding-right: 1em;
+}
+
+.vjs-button > .vjs-icon-placeholder:before {
+  content: '';
+  background-image: var(--udex-media-player-base-icon);
+  font-size: 1.8em;
+  line-height: var(--udex-media-player-controls-bar-height);
+  display: block;
+  height: var(--udex-media-player-controls-bar-height);
+  width: 100%;
+  background-size: 24px 24px;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.vjs-play-control > .vjs-icon-placeholder:before{
+  background-image: var(--udex-media-player-play-icon);
+}
+
+.vjs-skip-forward-5  > .vjs-icon-placeholder:before, 
+.vjs-skip-forward-10  > .vjs-icon-placeholder:before, 
+.vjs-skip-forward-30  > .vjs-icon-placeholder:before {
+  background-image: var(--udex-media-player-skip-forward-icon);
+}
+
+.vjs-skip-backward-5  > .vjs-icon-placeholder:before, 
+.vjs-skip-backward-10  > .vjs-icon-placeholder:before, 
+.vjs-skip-backward-30 > .vjs-icon-placeholder:before{
+  background-image: var(--udex-media-player-skip-backward-icon);
+}
+.vjs-play-control.vjs-playing > .vjs-icon-placeholder:before{
+  background-image: var(--udex-media-player-pause-icon);
+}
+.vjs-play-control.vjs-paused > .vjs-icon-placeholder:before{
+  background-image: var(--udex-media-player-play-icon);
+}
+.vjs-mute-control> .vjs-icon-placeholder:before {
+  background-image: var(--udex-media-player-volume-icon);
+}
+.vjs-mute-control.vjs-vol-0 > .vjs-icon-placeholder:before {
+  background-image: var(--udex-media-player-volume-muted-icon);
+}
+.vjs-subs-caps-button > .vjs-icon-placeholder:before {
+  content: 'CC';
+  background-image: none;
+  font-family: var(--sapFontFamily);
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.video-js .vjs-fullscreen-control .vjs-icon-placeholder:before, .vjs-icon-fullscreen-enter:before{
+  background-image: var(--udex-media-player-fullscreen-icon);
+}
+
+.video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder:before,
+.vjs-icon-fullscreen-exit:before {
+  background-image: var(--udex-media-player-exit-fullscreen-icon);
+}
+
+.vjs-close-button > .vjs-icon-placeholder:before {
+  background-image: var(--udex-media-player-close-icon);
+}
+
+body.vjs-full-window.vjs-fullscreen .vjs-fullscreen-control > .vjs-icon-placeholder:before {
+  background-image: var(--udex-media-player-close-icon);
+}
+
+.vjs-playback-rate > .vjs-icon-placeholder:before {
+  display: none;
+}
+
+.vjs-button > .vjs-icon-placeholder {
+  display: block;
+}
+
+.vjs-button > .vjs-svg-icon {
+  display: inline-block;
+}
+
+.video-js .vjs-control:focus:before,
+.video-js .vjs-control:hover:before,
+.video-js .vjs-control:focus {
+  text-shadow: 0em 0em 1em white;
+}
+
+.video-js *:not(.vjs-visible-text) > .vjs-control-text {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.video-js .vjs-custom-control-spacer {
+  display: none;
+}
+
+.video-js .vjs-progress-control {
+  cursor: pointer;
+  flex: auto;
+  display: flex;
+  align-items: center;
+  min-width: 4em;
+  touch-action: none;
+}
+
+.video-js .vjs-progress-control.disabled {
+  cursor: default;
+}
+
+.vjs-live .vjs-progress-control {
+  display: none;
+}
+
+.vjs-liveui .vjs-progress-control {
+  display: flex;
+  align-items: center;
+}
+
+.video-js .vjs-progress-holder {
+  flex: auto;
+  transition: all 0.2s;
+  height: 4px;
+}
+
+.video-js .vjs-progress-control .vjs-progress-holder {
+  margin: 0;
+}
+
+.video-js .vjs-progress-control:hover .vjs-progress-holder {
+  font-size: 1.6666666667em;
+}
+
+.video-js .vjs-progress-control:hover .vjs-progress-holder.disabled {
+  font-size: 1em;
+}
+
+.video-js .vjs-progress-holder .vjs-play-progress,
+.video-js .vjs-progress-holder .vjs-load-progress,
+.video-js .vjs-progress-holder .vjs-load-progress div {
+  position: absolute;
+  display: block;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  width: 0;
+}
+
+.video-js .vjs-play-progress {
+  background-color: #fff;
+}
+
+.video-js .vjs-volume-level:before,
+.video-js .vjs-play-progress:before {
+  content: "";
+  position: absolute;
+  right: -4px;
+  line-height: 8px;
+  z-index: 1;
+  height: 8px;
+  width: 8px;
+  background-color: #fff;
+  border-radius: 8px;
+  bottom: -2px;
+}
+
+.vjs-svg-icons-enabled .vjs-play-progress:before {
+  content: none !important;
+}
+
+.vjs-play-progress .vjs-svg-icon {
+  position: absolute;
+  top: -0.35em;
+  right: -0.4em;
+  width: 0.9em;
+  height: 0.9em;
+  pointer-events: none;
+  line-height: 0.15em;
+  z-index: 1;
+}
+
+.video-js .vjs-load-progress {
+  background: var(--udexColorGrey4 ,#A9B4BE);
+}
+
+.video-js .vjs-load-progress div {
+  background: var(--udexColorGrey4 ,#A9B4BE);
+}
+
+.video-js .vjs-time-tooltip {
+  background-color: rgba(255, 255, 255, 0.8);
+  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-progress-holder:focus .vjs-time-tooltip {
+  display: none;
+}
+
+.video-js .vjs-progress-control:hover .vjs-time-tooltip,
+.video-js .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-time-tooltip {
+  display: block;
+  font-size: 0.6em;
+  visibility: visible;
+}
+
+.video-js .vjs-progress-control.disabled:hover .vjs-time-tooltip {
+  font-size: 1em;
+}
+
+.video-js .vjs-progress-control .vjs-mouse-display {
+  display: none;
+  position: absolute;
+  width: 1px;
+  height: 100%;
+  background-color: #000;
+  z-index: 1;
+}
+
+.video-js .vjs-progress-control:hover .vjs-mouse-display {
+  display: block;
+}
+
+.video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display {
+  visibility: hidden;
+  opacity: 0;
+  transition: visibility 1s, opacity 1s;
+}
+
+.vjs-mouse-display .vjs-time-tooltip {
+  color: #fff;
+  background-color: #000;
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
+.video-js .vjs-slider {
+  position: relative;
+  cursor: pointer;
+  padding: 0;
+  margin: 0 0.45em 0 0.45em;
+  /* iOS Safari */
+  -webkit-touch-callout: none;
+  /* Safari, and Chrome 53 */
+  -webkit-user-select: none;
+  /* Non-prefixed version, currently supported by Chrome and Opera */
+  -moz-user-select: none;
+       user-select: none;
+  background-color: var(--udexColorGrey6,#5B738B);
+}
+
+.video-js .vjs-slider.disabled {
+  cursor: default;
+}
+
+.video-js .vjs-slider:focus {
+  text-shadow: 0em 0em 1em white;
+  box-shadow: 0 0 1em #fff;
+}
+
+.video-js .vjs-mute-control {
+  cursor: pointer;
+  flex: none;
+}
+.video-js .vjs-volume-control {
+  cursor: pointer;
+  margin-right: 1em;
+  display: flex;
+  align-items: center;
+}
+
+.video-js .vjs-volume-control.vjs-volume-horizontal {
+  width: 5em;
+}
+
+.video-js .vjs-volume-panel .vjs-volume-control {
+  visibility: visible;
+  opacity: 0;
+  width: 1px;
+  height: 1px;
+  margin-left: -1px;
+}
+
+.video-js .vjs-volume-panel {
+  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;
+  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 {
+  width: 60px;
+  height: 3em;
+  margin-right: 0;
+}
+.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;
+  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: 100px;
+  transition: width 0.1s;
+}
+.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-mute-toggle-only {
+  width: 4em;
+}
+
+.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical {
+  height: 8em;
+  width: 3em;
+  left: -3000em;
+  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 {
+  transition: visibility 1s, opacity 1s, height 1s 1s, width 1s, left 1s 1s, top 1s 1s;
+}
+
+.video-js .vjs-volume-panel {
+  display: flex;
+  align-items: center;
+}
+
+.video-js .vjs-volume-bar {
+  margin: 1.35em 0.45em;
+}
+
+.vjs-volume-bar.vjs-slider-horizontal {
+  width: 5em;
+  height: 4px;
+}
+
+.vjs-volume-bar.vjs-slider-vertical {
+  width: 4px;
+  height: 5em;
+  margin: 1.35em auto;
+}
+
+.video-js .vjs-volume-level {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  background-color: #fff;
+}
+.video-js .vjs-volume-level:before {
+  position: absolute;
+  font-size: 0.9em;
+  z-index: 1;
+}
+
+.vjs-slider-vertical .vjs-volume-level {
+  width: 0.3em;
+}
+.vjs-slider-vertical .vjs-volume-level:before {
+  top: -0.5em;
+  left: -0.3em;
+  z-index: 1;
+}
+
+.vjs-svg-icons-enabled .vjs-volume-level:before {
+  content: none;
+}
+
+.vjs-volume-level .vjs-svg-icon {
+  position: absolute;
+  width: 0.9em;
+  height: 0.9em;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.vjs-slider-horizontal .vjs-volume-level {
+  height: 0.3em;
+}
+.vjs-slider-horizontal .vjs-volume-level:before {
+  line-height: 0.35em;
+  right: -0.5em;
+}
+
+.vjs-slider-horizontal .vjs-volume-level .vjs-svg-icon {
+  right: -0.3em;
+  transform: translateY(-50%);
+}
+
+.vjs-slider-vertical .vjs-volume-level .vjs-svg-icon {
+  top: -0.55em;
+  transform: translateX(-50%);
+}
+
+.video-js .vjs-volume-panel.vjs-volume-panel-vertical {
+  width: 4em;
+}
+
+.vjs-volume-bar.vjs-slider-vertical .vjs-volume-level {
+  height: 100%;
+}
+
+.vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level {
+  width: 100%;
+}
+
+.video-js .vjs-volume-vertical {
+  width: 3em;
+  height: 8em;
+  bottom: 8em;
+  background-color: #A9B4BE;
+}
+
+.video-js .vjs-volume-horizontal .vjs-menu {
+  left: -2em;
+}
+
+.video-js .vjs-volume-tooltip {
+  background-color: #fff;
+  background-color: rgba(255, 255, 255, 0.8);
+  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%;
+}
+
+.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;
+  transition: visibility 1s, opacity 1s;
+}
+
+.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;
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 100%;
+}
+
+.vjs-has-started .vjs-poster,
+.vjs-using-native-controls .vjs-poster {
+  display: none;
+}
+
+.vjs-audio.vjs-has-started .vjs-poster,
+.vjs-has-started.vjs-audio-poster-mode .vjs-poster,
+.vjs-pip-container.vjs-has-started .vjs-poster {
+  display: block;
+}
+
+.vjs-poster img {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
+.video-js .vjs-live-control {
+  display: flex;
+  align-items: flex-start;
+  flex: auto;
+  font-size: 1em;
+  line-height: 3em;
+}
+
+.video-js:not(.vjs-live) .vjs-live-control,
+.video-js.vjs-liveui .vjs-live-control {
+  display: none;
+}
+
+.video-js .vjs-seek-to-live-control {
+  align-items: center;
+  cursor: pointer;
+  flex: none;
+  display: inline-flex;
+  height: 100%;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+  font-size: 1em;
+  line-height: 3em;
+  width: auto;
+  min-width: 4em;
+}
+
+.video-js.vjs-live:not(.vjs-liveui) .vjs-seek-to-live-control,
+.video-js:not(.vjs-live) .vjs-seek-to-live-control {
+  display: none;
+}
+
+.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge {
+  cursor: auto;
+}
+
+.vjs-seek-to-live-control .vjs-icon-placeholder {
+  margin-right: 0.5em;
+  color: #888;
+}
+
+.vjs-svg-icons-enabled .vjs-seek-to-live-control {
+  line-height: 0;
+}
+
+.vjs-seek-to-live-control .vjs-svg-icon {
+  width: 1em;
+  height: 1em;
+  pointer-events: none;
+  fill: #888888;
+}
+
+.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge .vjs-icon-placeholder {
+  color: red;
+}
+
+.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge .vjs-svg-icon {
+  fill: red;
+}
+
+.video-js .vjs-time-control {
+  flex: none;
+  font-size: var(--udexTypographyBodyXXSFontSize, 12px);
+  line-height:var(--udex-media-player-controls-bar-height);
+  min-width: 2em;
+  width: auto;
+}
+
+.vjs-live .vjs-time-control,
+.vjs-live .vjs-time-divider,
+.video-js .vjs-current-time,
+.video-js .vjs-duration {
+  display: none;
+}
+
+.vjs-time-divider {
+  display: none;
+  line-height: 3em;
+}
+
+.video-js .vjs-play-control {
+  cursor: pointer;
+}
+
+.video-js .vjs-play-control .vjs-icon-placeholder {
+  flex: none;
+}
+
+.vjs-text-track-display {
+  position: absolute;
+  bottom: var(--udex-media-player-controls-bar-height);
+  left: 0;
+  right: 0;
+  top: 0;
+  pointer-events: none;
+}
+
+.vjs-error .vjs-text-track-display {
+  display: none;
+}
+
+.video-js.vjs-controls-disabled .vjs-text-track-display,
+.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display {
+  bottom: var(--udex-media-player-controls-bar-height);
+}
+
+.video-js .vjs-text-track {
+  font-size: 1.4em;
+  text-align: center;
+  margin-bottom: 0.1em;
+}
+
+.vjs-subtitles {
+  color: #fff;
+}
+
+.vjs-captions {
+  color: #fc6;
+}
+
+.vjs-tt-cue {
+  display: block;
+}
+
+video::-webkit-media-text-track-display {
+  transform: translateY(-3em);
+}
+
+.video-js.vjs-controls-disabled video::-webkit-media-text-track-display,
+.video-js.vjs-user-inactive.vjs-playing video::-webkit-media-text-track-display {
+  transform: translateY(-1.5em);
+}
+
+.video-js .vjs-picture-in-picture-control {
+  cursor: pointer;
+  flex: none;
+}
+
+.vjs-pip-window .vjs-picture-in-picture-control {
+  display: none;
+}
+
+.video-js .vjs-fullscreen-control {
+  cursor: pointer;
+  flex: none;
+}
+
+.vjs-pip-window .vjs-fullscreen-control {
+  display: none;
+}
+
+.vjs-playback-rate > .vjs-menu-button,
+.vjs-playback-rate .vjs-playback-rate-value {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.vjs-playback-rate .vjs-playback-rate-value {
+  pointer-events: none;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: var(--udex-media-player-controls-bar-height);
+  text-align: center;
+}
+
+.vjs-playback-rate .vjs-menu {
+  width: 4em;
+  left: -2.7rem;
+}
+
+.vjs-error .vjs-error-display .vjs-modal-dialog-content {
+  font-size: 1.4em;
+  text-align: center;
+}
+
+.vjs-loading-spinner {
+  background-clip: padding-box;
+  border: .6em solid #2b333fb3;
+  border-radius: 50%;
+  box-sizing: border-box;
+  display: none;
+  height: 5em;
+  left: 50%;
+  opacity: .85;
+  position: absolute;
+  text-align: left;
+  top: 50%;
+  transform: translate(-50%,-50%);
+  visibility: hidden;
+  width: 5em
+}
+
+.vjs-seeking.vjs-paused .vjs-loading-spinner, .vjs-waiting.vjs-paused .vjs-loading-spinner, .vjs-paused .vjs-loading-spinner {
+  display: none;
+}
+
+.vjs-seeking .vjs-loading-spinner,.vjs-waiting .vjs-loading-spinner {
+  align-items: center;
+  animation: vjs-spinner-show 0s linear .3s forwards;
+  display: flex;
+  justify-content: center
+}
+
+.vjs-error .vjs-loading-spinner {
+  display: none
+}
+
+.vjs-loading-spinner:after,.vjs-loading-spinner:before {
+  border: inherit;
+  border-color: #fff #0000 #0000;
+  border-radius: inherit;
+  box-sizing: inherit;
+  content: "";
+  height: inherit;
+  opacity: 1;
+  position: absolute;
+  width: inherit
+}
+
+.vjs-seeking .vjs-loading-spinner:after,.vjs-seeking .vjs-loading-spinner:before,.vjs-waiting .vjs-loading-spinner:after,.vjs-waiting .vjs-loading-spinner:before {
+  animation: vjs-spinner-spin 1.1s cubic-bezier(.6,.2,0,.8) infinite,vjs-spinner-fade 1.1s linear infinite
+}
+
+.vjs-seeking .vjs-loading-spinner:before,.vjs-waiting .vjs-loading-spinner:before {
+  border-top-color: #fff
+}
+
+.vjs-seeking .vjs-loading-spinner:after,.vjs-waiting .vjs-loading-spinner:after {
+  animation-delay: .44s;
+  border-top-color: #fff
+}
+
+.vjs-chapters-button .vjs-menu ul {
+  width: 24em;
+}
+
+.vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-svg-icon {
+  width: 1.5em;
+  height: 1.5em;
+}
+
+.video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder {
+  vertical-align: middle;
+  display: inline-block;
+  margin-bottom: -0.1em;
+}
+
+.video-js .vjs-audio-button + .vjs-menu .vjs-description-menu-item .vjs-menu-item-text .vjs-icon-placeholder,
+.video-js .vjs-audio-button + .vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder {
+  vertical-align: middle;
+  display: inline-block;
+  margin-bottom: -0.1em;
+}
+
+.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-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-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-volume-control {
+  display: none;
+}
+.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.vjs-layout-x-small .vjs-progress-control, .video-js.vjs-layout-tiny .vjs-progress-control {
+  display: none;
+}
+.video-js.vjs-layout-x-small .vjs-custom-control-spacer {
+  flex: auto;
+  display: block;
+}
+
+.vjs-modal-dialog.vjs-text-track-settings {
+  background-color: #2B333F;
+  background-color: rgba(43, 51, 63, 0.75);
+  color: #fff;
+  height: 70%;
+}
+
+.vjs-error .vjs-text-track-settings {
+  display: none;
+}
+
+.vjs-text-track-settings .vjs-modal-dialog-content {
+  display: table;
+}
+
+.vjs-text-track-settings .vjs-track-settings-colors,
+.vjs-text-track-settings .vjs-track-settings-font,
+.vjs-text-track-settings .vjs-track-settings-controls {
+  display: table-cell;
+}
+
+.vjs-text-track-settings .vjs-track-settings-controls {
+  text-align: right;
+  vertical-align: bottom;
+}
+
+.vjs-text-track-settings select {
+  font-size: inherit;
+}
+
+.vjs-track-setting > select {
+  margin-right: 1em;
+  margin-bottom: 0.5em;
+}
+
+.vjs-text-track-settings fieldset {
+  margin: 10px;
+  border: none;
+}
+
+.vjs-text-track-settings fieldset span {
+  display: inline-block;
+  padding: 0 0.6em 0.8em;
+}
+
+.vjs-text-track-settings fieldset span > select {
+  max-width: 7.3em;
+  margin-bottom: 0.5em;
+}
+
+.vjs-text-track-settings legend {
+  color: #fff;
+  font-weight: bold;
+  font-size: 1.2em;
+}
+
+.vjs-text-track-settings .vjs-label {
+  margin: 0 0.5em 0.5em 0;
+}
+
+.vjs-track-settings-controls button:focus,
+.vjs-track-settings-controls button:active {
+  outline-style: solid;
+  outline-width: medium;
+  background-image: linear-gradient(0deg, #fff 88%, #73859f 100%);
+}
+
+.vjs-track-settings-controls button:hover {
+  color: rgba(43, 51, 63, 0.75);
+}
+
+.vjs-track-settings-controls button {
+  background-color: #fff;
+  background-image: linear-gradient(-180deg, #fff 88%, #73859f 100%);
+  color: #2B333F;
+  cursor: pointer;
+  border-radius: 2px;
+  margin-bottom: var(--udexSpacer16)
+}
+
+.vjs-track-settings-controls .vjs-default-button {
+  margin-right: 1em;
+}
+
+.vjs-title-bar {
+  background: rgba(0, 0, 0, 0.9);
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 60%, rgba(0, 0, 0, 0) 100%);
+  font-size: 1.2em;
+  line-height: 1.5;
+  transition: opacity 0.1s;
+  padding: 0.666em 1.333em 4em;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+.vjs-error .vjs-title-bar {
+  display: none;
+}
+
+.vjs-title-bar-title,
+.vjs-title-bar-description {
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vjs-title-bar-title {
+  font-weight: bold;
+  margin-bottom: 0.333em;
+}
+
+.vjs-playing.vjs-user-inactive .vjs-title-bar {
+  opacity: 0;
+  transition: opacity 1s;
+}
+
+.video-js .vjs-skip-forward-5 {
+  cursor: pointer;
+}
+.video-js .vjs-skip-forward-10 {
+  cursor: pointer;
+}
+.video-js .vjs-skip-forward-30 {
+  cursor: pointer;
+}
+.video-js .vjs-skip-backward-5 {
+  cursor: pointer;
+}
+.video-js .vjs-skip-backward-10 {
+  cursor: pointer;
+}
+.video-js .vjs-skip-backward-30 {
+  cursor: pointer;
+}
+
+.vjs-resize-manager {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+  z-index: -1000;
+}
+
+.js-focus-visible .video-js *:focus:not(.focus-visible) {
+  outline: none;
+}
+
+.video-js *:focus:not(:focus-visible) {
+  outline: none;
+}
+
+.vjs-audio .vjs-big-play-button
+{
+  display: none;
+}
+
+.vjs-audio .vjs-control-bar{
+  display: flex;
+}
+
+.udex-media-player__fluid .udex-media-player__vjs-poster > picture > img,
+.udex-media-player__fluid .udex-media-player__vjs-poster > picture,
+.video-js.udex-media-player__video.udex-media-player__fluid > iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+} 
+
+.udex-media-player__iframe-poster .udex-media-player__vjs-poster {
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0px;
+  padding: 0px;
+  inset: 0px;
+}
+
+.udex-media-player__iframe-poster .udex-media-player__vjs-poster .vjs-big-play-button{
+  cursor: pointer;
+}
+.udex-media-player__iframe-poster .udex-media-player__vjs-poster .vjs-big-play-button:before {
+  content: '';
+}
+
+.vjs-modal-dialog.vjs-text-track-settings {
+  background-color: #00000080;
+  container-type: inline-size;
+  container-name: settings;
+}
+
+.vjs-modal-dialog.vjs-text-track-settings .vjs-modal-dialog-content {
+  padding: var(--udexSpacer24) var(--udexSpacer32);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.vjs-modal-dialog.vjs-text-track-settings .vjs-track-settings-colors, 
+.vjs-modal-dialog.vjs-text-track-settings .vjs-track-settings-font, 
+.vjs-modal-dialog.vjs-text-track-settings .vjs-track-settings-controls {
+  display: flex;
+  flex-direction: column;
+  margin: 0 0 var(--udexSpacer24) 0;
+  flex-grow: 1;
+  gap: var(--udexSpacer24);
+  min-width:250px;
+}
+
+.vjs-modal-dialog.vjs-text-track-settings .vjs-track-settings-controls {
+  justify-content: flex-end;
+  align-items: flex-end;
+  gap: var(--udexSpacer16);
+  flex-direction: row;
+}
+
+.vjs-modal-dialog.vjs-text-track-settings .vjs-track-settings-controls .vjs-default-button {
+  margin: 0;
+  margin-bottom: var(--udexSpacer16);
+}
+
+.vjs-modal-dialog.vjs-text-track-settings .vjs-close-button.vjs-control.vjs-button {
+  height: 24px;
+  right: var(--udexSpacer32);
+  top: var(--udexSpacer24);
+  margin: 0;
+}
+
+.vjs-modal-dialog.vjs-text-track-settings .vjs-close-button.vjs-control.vjs-button .vjs-icon-placeholder:before {
+  height: 24px;
+}
+
+.vjs-modal-dialog.vjs-track-setting > select {
+  margin: 0;
+}
+
+.vjs-modal-dialog.vjs-text-track-settings fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+.vjs-modal-dialog.vjs-text-track-settings legend {
+  margin-bottom: var(--udexSpacer16);
+  font-weight: 500;
+  font-size: 1rem;
+}
+
+.vjs-modal-dialog.vjs-text-track-settings .vjs-label {
+  margin: 0 var(--udexSpacer8) var(--udexSpacer8) 0;
+}
+
+.vjs-modal-dialog.vjs-text-track-settings fieldset span {
+  padding: 0 var(--udexSpacer16) 0 0;
+}
+
+@media (width < 680px) {
+  .vjs-modal-dialog.vjs-text-track-settings .vjs-modal-dialog-content {
+    padding: var(--udexSpacer16) var(--udexSpacer24);
+  }  
+  .vjs-modal-dialog.vjs-text-track-settings .vjs-close-button.vjs-control.vjs-button {
+    right: var(--udexSpacer24);
+    top: var(--udexSpacer16);
+  }
+  .vjs-modal-dialog.vjs-text-track-settings .vjs-track-settings-colors, .vjs-modal-dialog.vjs-text-track-settings .vjs-track-settings-font, .vjs-modal-dialog.vjs-text-track-settings .vjs-track-settings-controls {
+    gap: var(--udexSpacer8);
+  }
+  .vjs-modal-dialog.vjs-text-track-settings legend {
+    margin-bottom: var(--udexSpacer8);
+  }
+}
+
+@media (max-width: 980px) {
+  .video-js .vjs-control {
+    width: 18px;
+  }
+
+  .vjs-button > .vjs-icon-placeholder:before {
+    background-size: 18px 18px;
+  }
+
+  .vjs-button > .vjs-icon-placeholder:before {
+    line-height: var(--udex-media-player-controls-bar-small-height);
+    height: var(--udex-media-player-controls-bar-small-height);
+  }
+
+  .video-js .vjs-control-bar {
+    height: var(--udex-media-player-controls-bar-small-height);
+  }
+
+  .vjs-text-track-display ,
+  .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
+    bottom: var(--udex-media-player-controls-bar-small-height);
+  }
+
+  .vjs-playback-rate .vjs-playback-rate-value,
+  .video-js .vjs-time-control {
+    line-height:var(--udex-media-player-controls-bar-small-height);
+  }
+
+  .video-js.vjs-controls-disabled .vjs-text-track-display,
+  .video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display {
+    bottom: var(--udex-media-player-controls-bar-small-height);
+  }
+  .video-js:not(.udex-media-player__video-embed):not(.udex-media-player__iframe-poster):not(.udex-media-player__fluid)  {
+    height: var(--udex-media-player-mobile-height);
+    width: var(--udex-media-player-mobile-width);
+  }
+}