/*------------------------------------------------------------------
[Table of contents]

1. Color
3. RTL variables
3. variables
4. fonts

Direction :  LTR
Style:       Light
-------------------------------------------------------------------*/
body .mejs-volume-button > .mejs-volume-slider,
body .mejs-container .mejs-controls {
  direction: ltr;
  background: #fafafa;
  -webkit-box-shadow: inset 0px 0px 0px 1px #e1e1e1;
  box-shadow: inset 0px 0px 0px 1px #e1e1e1;
}

body .mejs-container,
body .mejs-embed, body .mejs-embed body {
  background: #333333;
}

body .mejs-time {
  color: #a1a1a1;
}

body .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
body .mejs-controls .mejs-time-rail .mejs-time-total {
  background: #e1e1e1;
}

body .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,
body .mejs-controls .mejs-time-rail .mejs-time-loaded {
  background: #e3e3e3;
}

body .mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-handle,
body .mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-current,
body .mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-total,
body .mejs-controls .mejs-time-rail .mejs-time-current,
body .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
  background: #ff5733;
}

body .mejs-controls .mejs-time-rail .mejs-time-float {
  background: #ff5733;
  border-color: #ff5733;
  color: #FFFFFF;
}

body .mejs-controls .mejs-time-rail .mejs-time-float-corner {
  border-color: #ff5733 transparent transparent transparent;
}

body .mejs-time-handle-content {
  border-color: #f02a00;
}

body .mejs-controls .mejs-button.mejs-play button {
  background: url("data:image/svg+xml;charset=utf8,%3Csvg fill='%23707070' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'%3E\a     %3Cpath d='M8 5v14l11-7z'/%3E\a     %3Cpath d='M0 0h24v24H0z' fill='none'/%3E\a%3C/svg%3E") no-repeat;
}

body .mejs-controls .mejs-button.mejs-pause button {
  background: url("data:image/svg+xml;charset=utf8,%3Csvg fill='%23707070' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'%3E\a     %3Cpath d='M6 19h4V5H6v14zm8-14v14h4V5h-4z'/%3E\a     %3Cpath d='M0 0h24v24H0z' fill='none'/%3E\a%3C/svg%3E") no-repeat;
}

body .mejs-controls .mejs-volume-button.mejs-mute button {
  background: url("data:image/svg+xml;charset=utf8,%3Csvg fill='%23707070' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'%3E\a     %3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/%3E\a     %3Cpath d='M0 0h24v24H0z' fill='none'/%3E\a%3C/svg%3E") no-repeat;
}

body .mejs-controls .mejs-volume-button.mejs-unmute button {
  background: url("data:image/svg+xml;charset=utf8,%3Csvg fill='%23707070' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'%3E\a     %3Cpath d='M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z'/%3E\a     %3Cpath d='M0 0h24v24H0z' fill='none'/%3E\a%3C/svg%3E") no-repeat;
}

body .mejs-fullscreen-button button {
  background: url("data:image/svg+xml;charset=utf8,%3Csvg fill='%23707070' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'%3E\a     %3Cpath d='M0 0h24v24H0z' fill='none'/%3E\a     %3Cpath d='M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z'/%3E\a%3C/svg%3E") no-repeat;
}