/* Caption Settings  */
.mf-caption-settings {
  display: none;
  flex-flow: row wrap;
  align-content: flex-start;
  position: absolute;
  top: 10px;
  right: 10px;
  width: calc(100% - 20px);
  overflow: auto;
  max-height: calc(100% - 20px);
  background: #23262c;
  color: #FFF;
  z-index: 3;
  border-radius: 6px;
  max-width: 800px;
}

.mf-caption-settings.open {
  display: flex !important;
}

.plyr button.mf-caption-settings-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 10px;
  right: 10px;
  color: #FFF;
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 32px;
  background: transparent;
  cursor: pointer;
  outline-color: #4698CB;
}

.mf-caption-settings-close:focus {
  outline: none;
  border-color: #4698cb;
  box-shadow: 0 0 0 2px rgba(70, 152, 203, 0.4);
}

.mf-caption-settings-close svg {
  width: 20px;
  height: 20px;
}

.mf-caption-settings-close:hover {
  opacity: 0.7;
}

.mf-caption-setting-item {
  width: calc(50% - 25px);
  padding: 10px;
  display: flex;
}

.mf-caption-setting-item > div {
  margin-right: 10px;
}

.mf-caption-setting-item > div:last-child {
  margin-right: 0;
}

.mf-caption-setting-label {
  display: block;
  font-family:'SourceSansPro', Arial, Helvetica, sans-serif;
  font-weight: 600;
  margin-bottom: 5px;
}

.mf-caption-setting-select-container {
  position: relative;
}

.mf-caption-settings-select-arrow {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  pointer-events: none;
}

.mf-caption-setting-select {
  -webkit-appearance: none;
  appearance: none;
  background-color: #23262c;
  border: 1px solid #444952;
  border-radius: 4px;
  padding: 0 30px 0 10px;
  margin: 0;
  width: 100%;
  height: 36px;
  font-family: inherit;
  font-size: 16px;
  cursor: inherit;
  line-height: inherit;
  color: #e3e3e4;
  font-family:'SourceSansPro', Arial, Helvetica, sans-serif;
}

.mf-caption-setting-select:focus {
  outline: none;
  border-color: #4698cb;
  box-shadow: 0 0 0 2px rgba(70, 152, 203, 0.4);
}

.plyr.font-size-200 .plyr__captions {
  font-size: 200%;
}

.plyr__menu__container .plyr__control.plyr__control--hidden {
  display: none;
}

/* Caption Background Settings */
.plyr.caption-background-black .plyr__captions .plyr__caption, .plyr.caption-background-black.caption-background-opacity-semitransparent .plyr__captions .plyr__caption { background: rgba(0,0,0,0.65); }
.plyr.caption-background-white .plyr__captions .plyr__caption, .plyr.caption-background-white.caption-background-opacity-semitransparent .plyr__captions .plyr__caption { background: rgba(255,255,255,0.65); }
.plyr.caption-background-red .plyr__captions .plyr__caption, .plyr.caption-background-red.caption-background-opacity-semitransparent .plyr__captions .plyr__caption { background: rgba(255, 0, 0, 0.65); }
.plyr.caption-background-green .plyr__captions .plyr__caption, .plyr.caption-background-green.caption-background-opacity-semitransparent .plyr__captions .plyr__caption { background: rgba(0, 255, 0, 0.65); }
.plyr.caption-background-blue .plyr__captions .plyr__caption, .plyr.caption-background-blue.caption-background-opacity-semitransparent .plyr__captions .plyr__caption { background: rgba(0, 0, 255, 0.65); }
.plyr.caption-background-yellow .plyr__captions .plyr__caption, .plyr.caption-background-yellow.caption-background-opacity-semitransparent .plyr__captions .plyr__caption { background: rgba(255, 255, 0, 0.65); }
.plyr.caption-background-magenta .plyr__captions .plyr__caption, .plyr.caption-background-magenta.caption-background-opacity-semitransparent .plyr__captions .plyr__caption { background: rgba(255, 0, 255, 0.65); }
.plyr.caption-background-cyan .plyr__captions .plyr__caption, .plyr.caption-background-cyan.caption-background-opacity-semitransparent .plyr__captions .plyr__caption { background: rgba(0, 255, 255, 0.65); }

.plyr.caption-background-black.caption-background-opacity-transparent .plyr__captions .plyr__caption { background: rgba(0,0,0,0); }
.plyr.caption-background-white.caption-background-opacity-transparent .plyr__captions .plyr__caption { background: rgba(255,255,255,0); }
.plyr.caption-background-red.caption-background-opacity-transparent .plyr__captions .plyr__caption { background: rgba(255,0,0,0); }
.plyr.caption-background-green.caption-background-opacity-transparent .plyr__captions .plyr__caption { background: rgba(0,255,0,0); }
.plyr.caption-background-blue.caption-background-opacity-transparent .plyr__captions .plyr__caption { background: rgba(0,0,255,0); }
.plyr.caption-background-yellow.caption-background-opacity-transparent .plyr__captions .plyr__caption { background: rgba(255,255,0,0); }
.plyr.caption-background-magenta.caption-background-opacity-transparent .plyr__captions .plyr__caption { background: rgba(255,0,255,0); }
.plyr.caption-background-cyan.caption-background-opacity-transparent .plyr__captions .plyr__caption { background: rgba(0,255,255,0); }

.plyr.caption-background-black.caption-background-opacity-opaque .plyr__captions .plyr__caption { background: rgba(0,0,0,1); }
.plyr.caption-background-white.caption-background-opacity-opaque .plyr__captions .plyr__caption { background: rgba(255,255,255,1); }
.plyr.caption-background-red.caption-background-opacity-opaque .plyr__captions .plyr__caption { background: rgba(255,0,0,1); }
.plyr.caption-background-green.caption-background-opacity-opaque .plyr__captions .plyr__caption { background: rgba(0,255,0,1); }
.plyr.caption-background-blue.caption-background-opacity-opaque .plyr__captions .plyr__caption { background: rgba(0,0,255,1); }
.plyr.caption-background-yellow.caption-background-opacity-opaque .plyr__captions .plyr__caption { background: rgba(255,255,0,1); }
.plyr.caption-background-magenta.caption-background-opacity-opaque .plyr__captions .plyr__caption { background: rgba(255,0,255,1); }
.plyr.caption-background-cyan.caption-background-opacity-opaque .plyr__captions .plyr__caption { background: rgba(0,255,255,1); }

/* Caption Window Settings */
.plyr.caption-window-black .plyr__captions, .plyr.caption-window-black.caption-window-opacity-transparent .plyr__captions { background: rgba(0,0,0,0); }
.plyr.caption-window-white .plyr__captions, .plyr.caption-window-white.caption-window-opacity-transparent .plyr__captions { background: rgba(255,255,255,0); }
.plyr.caption-window-red .plyr__captions, .plyr.caption-window-red.caption-window-opacity-transparent .plyr__captions { background: rgba(255, 0, 0, 0); }
.plyr.caption-window-green .plyr__captions, .plyr.caption-window-green.caption-window-opacity-transparent .plyr__captions { background: rgba(0, 255, 0, 0); }
.plyr.caption-window-blue .plyr__captions, .plyr.caption-window-blue.caption-window-opacity-transparent .plyr__captions { background: rgba(0, 0, 255, 0); }
.plyr.caption-window-yellow .plyr__captions, .plyr.caption-window-yellow.caption-window-opacity-transparent .plyr__captions { background: rgba(255, 255, 0, 0); }
.plyr.caption-window-magenta .plyr__captions, .plyr.caption-window-magenta.caption-window-opacity-transparent .plyr__captions { background: rgba(255, 0, 255, 0); }
.plyr.caption-window-cyan .plyr__captions, .plyr.caption-window-cyan.caption-window-opacity-transparent .plyr__captions { background: rgba(0, 255, 255, 0); }

.plyr.caption-window-black.caption-window-opacity-semitransparent .plyr__captions { background: rgba(0,0,0,0.65); }
.plyr.caption-window-white.caption-window-opacity-semitransparent .plyr__captions { background: rgba(255,255,255,0.65); }
.plyr.caption-window-red.caption-window-opacity-semitransparent .plyr__captions { background: rgba(255, 0, 0, 0.65); }
.plyr.caption-window-green.caption-window-opacity-semitransparent .plyr__captions { background: rgba(0, 255, 0, 0.65); }
.plyr.caption-window-blue.caption-window-opacity-semitransparent .plyr__captions { background: rgba(0, 0, 255, 0.65); }
.plyr.caption-window-yellow.caption-window-opacity-semitransparent .plyr__captions { background: rgba(255, 255, 0, 0.65); }
.plyr.caption-window-magenta.caption-window-opacity-semitransparent .plyr__captions { background: rgba(255, 0, 255, 0.65); }
.plyr.caption-window-cyan.caption-window-opacity-semitransparent .plyr__captions { background: rgba(0, 255, 255, 0.65); }

.plyr.caption-window-black.caption-window-opacity-opaque .plyr__captions { background: rgba(0,0,0,1); }
.plyr.caption-window-white.caption-window-opacity-opaque .plyr__captions { background: rgba(255,255,255,1); }
.plyr.caption-window-red.caption-window-opacity-opaque .plyr__captions { background: rgba(255, 0, 0, 1); }
.plyr.caption-window-green.caption-window-opacity-opaque .plyr__captions { background: rgba(0, 255, 0, 1); }
.plyr.caption-window-blue.caption-window-opacity-opaque .plyr__captions { background: rgba(0, 0, 255, 1); }
.plyr.caption-window-yellow.caption-window-opacity-opaque .plyr__captions { background: rgba(255, 255, 0, 1); }
.plyr.caption-window-magenta.caption-window-opacity-opaque .plyr__captions { background: rgba(255, 0, 255, 1); }
.plyr.caption-window-cyan.caption-window-opacity-opaque .plyr__captions { background: rgba(0, 255, 255, 1); }

/* Caption Color Setting */
.plyr.caption-color-black .plyr__captions .plyr__caption, .plyr.caption-color-black.caption-color-opacity-opaque .plyr__captions .plyr__caption { color: rgba(0,0,0,1); }
.plyr.caption-color-white .plyr__captions .plyr__caption, .plyr.caption-color-white.caption-color-opacity-opaque .plyr__captions .plyr__caption { color: rgba(255,255,255,1); }
.plyr.caption-color-red .plyr__captions .plyr__caption, .plyr.caption-color-red.caption-color-opacity-opaque .plyr__captions .plyr__caption { color: rgba(255, 0, 0, 1); }
.plyr.caption-color-green .plyr__captions .plyr__caption, .plyr.caption-color-green.caption-color-opacity-opaque .plyr__captions .plyr__caption { color: rgba(0, 255, 0, 1); }
.plyr.caption-color-blue .plyr__captions .plyr__caption, .plyr.caption-color-blue.caption-color-opacity-opaque .plyr__captions .plyr__caption { color: rgba(0, 0, 255, 1); }
.plyr.caption-color-yellow .plyr__captions .plyr__caption, .plyr.caption-color-yellow.caption-color-opacity-opaque .plyr__captions .plyr__caption { color: rgba(255, 255, 0, 1); }
.plyr.caption-color-magenta .plyr__captions .plyr__caption, .plyr.caption-color-magenta.caption-color-opacity-opaque .plyr__captions .plyr__caption { color: rgba(255, 0, 255, 1); }
.plyr.caption-color-cyan .plyr__captions .plyr__caption, .plyr.caption-color-cyan.caption-color-opacity-opaque .plyr__captions .plyr__caption { color: rgba(0, 255, 255, 1); }

.plyr.caption-color-black.caption-color-opacity-semitransparent .plyr__captions .plyr__caption { color: rgba(0,0,0,0.65); }
.plyr.caption-color-white.caption-color-opacity-semitransparent .plyr__captions .plyr__caption { color: rgba(255,255,255,0.65); }
.plyr.caption-color-red.caption-color-opacity-semitransparent .plyr__captions .plyr__caption { color: rgba(255, 0, 0, 0.65); }
.plyr.caption-color-green.caption-color-opacity-semitransparent .plyr__captions .plyr__caption { color: rgba(0, 255, 0, 0.65); }
.plyr.caption-color-blue.caption-color-opacity-semitransparent .plyr__captions .plyr__caption { color: rgba(0, 0, 255, 0.65); }
.plyr.caption-color-yellow.caption-color-opacity-semitransparent .plyr__captions .plyr__caption { color: rgba(255, 255, 0, 0.65); }
.plyr.caption-color-magenta.caption-color-opacity-semitransparent .plyr__captions .plyr__caption { color: rgba(255, 0, 255, 0.65); }
.plyr.caption-color-cyan.caption-color-opacity-semitransparent .plyr__captions .plyr__caption { color: rgba(0, 255, 255, 0.65); }

/* Caption Text Edge Style Setting */
.plyr.caption-edge-raised .plyr__captions .plyr__caption { text-shadow: rgb(34 34 34) 1px 1px, rgb(34 34 34) 2px 2px, rgb(34 34 34) 3px 3px; }
.plyr.caption-edge-depressed .plyr__captions .plyr__caption { text-shadow: rgb(204 204 204) 1px 1px, rgb(204 204 204) 0px 1px, rgb(34 34 34) -1px -1px, rgb(34 34 34) 0px -1px; }
.plyr.caption-edge-uniform .plyr__captions .plyr__caption { text-shadow: rgb(34 34 34) 0px 0px 4px, rgb(34 34 34) 0px 0px 4px, rgb(34 34 34) 0px 0px 4px, rgb(34 34 34) 0px 0px 4px; }
.plyr.caption-edge-dropshadow .plyr__captions .plyr__caption { text-shadow: rgb(34 34 34) 2px 2px 3px, rgb(34 34 34) 2px 2px 4px, rgb(34 34 34) 2px 2px 5px; }

/* Caption Font Family */
.plyr.font-family-mediaflow .plyr__captions .plyr__caption { font-family:'SourceSansPro', Arial, Helvetica, sans-serif; }
.plyr.font-family-proportionalsansserif .plyr__captions .plyr__caption { font-family: sans-serif; }
.plyr.font-family-monospacesansserif .plyr__captions .plyr__caption { font-family: "Andale Mono", "Lucida Console", monospace; }
.plyr.font-family-proportionalserif .plyr__captions .plyr__caption { font-family: serif; }
.plyr.font-family-monospaceserif .plyr__captions .plyr__caption { font-family: "Courier New", monospace; }
.plyr.font-family-casual .plyr__captions .plyr__caption { font-family: "Comic Sans MS", Impact, fantasy; }
.plyr.font-family-smallcaps .plyr__captions .plyr__caption {
  font-family: sans-serif;
  font-variant: small-caps;
}

/* Caption Settings Responsiveness */
.mf-caption-settings.mf-caption-settings--small {
  flex-flow: row wrap;
}
.mf-caption-settings.mf-caption-settings--small .mf-caption-setting-item {
  width: 100%;
}

/*
Poster background size cover to support vertical videos (use contain for the hosted player).
Vertical video is only supported with the JS embed.
*/
.plyr .plyr__poster{ background-size:cover; }
.hosted-video-player .plyr .plyr__poster { background-size: contain; }