/* vsq-player */
#player {
  position: relative;
  font-family: 'Exo 2', "Arial", "sans-serif";
  font-size: 14px;
}
#player .flowplayer {
  background-image: none !important;
  background-color: #333;
}
#player .vsq-engine {
  width: 50%;
  height: auto;
  max-height: 100%;
}
#player img {
  width: 100%;
  height: 100%;
}
#player .vsq-hidden-master .vsq-master,
#player .vsq-hidden-content .vsq-content {
  display: none;
}
#player .vsq-hidden-master .vsq-content,
#player .vsq-hidden-content .vsq-master {
  width: 100%;
}
#player .vsq-engine.vsq-fullscale {
  width: 100%;
}

#player .vsq-engine.vsq-master {
  left: 0;
  right: auto;
}
#player .vsq-engine.vsq-content {
  left: auto;
  right: 0;
}
#player .vsq-contentleft .vsq-engine.vsq-master {
  left: auto;
  right: 0;
}
#player .vsq-contentleft .vsq-engine.vsq-content {
  left: 0;
  right: auto;
}

#player .vsq-contentleft.vsq-pip-bottom .vsq-engine.vsq-master {
}
#player .vsq-contentleft.vsq-pip-bottom .vsq-engine.vsq-content {
  top: auto;
  bottom: 0;
  transform: none;
}
.flowplayer .fp-menu .fp-dropdown,
#player .vsq-menu .fp-dropdown {
  display: none;
  width: auto;
  background-color: #191919 !important;
  background-color: rgba(23, 23, 23, 0.7) !important;
  border-radius: 5px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.flowplayer .fp-menu.dropdown-open .fp-dropdown,
#player .vsq-menu.dropdown-open .fp-dropdown {
  display: block;
}
.flowplayer .fp-menu .fp-dropdown li,
#player .vsq-menu li {
  font-family: 'Exo 2', "Arial", "sans-serif";
  font-size: 16px !important;
  text-align: left;
  white-space: nowrap;
  color: #fff;
  cursor: pointer;
  border-top: 1px solid #3e3a3a;
  line-height: 40px;
  padding: 0 30px 0 15px !important;
}
.flowplayer .fp-menu .fp-dropdown li:first-child,
#player .vsq-menu li:first-child {
  border-top: none;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.flowplayer .fp-menu .fp-dropdown li:last-child,
#player .vsq-menu li:last-child {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.flowplayer .fp-dropdown li.active,
#player .vsq-menu li.vsq-active,
#player .vsq-menu li.vsq-current {
  background-repeat: no-repeat;
  background-color: transparent !important;
  background-position: right -2px center;
}
.flowplayer .fp-dropdown li.active,
#player .vsq-menu li.vsq-current {
  cursor: default !important;
  background-image: url(../../images/player/checked_active.png);

}
#player .vsq-menu li.vsq-active {
  cursor: default !important;
  background-image: url(../../images/player/checked.png);
}

.flowplayer .fp-dropdown.fp-dropup,
.flowplayer .fp-menu .fp-dropdown {
  bottom: 40px;
}

#player .vsq-modal {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 20;
}

#player .vsq-is-toast .fp-ui .fp-controls,
#player .vsq-is-toast .fp-ui .fp-time,
#player .vsq-is-toast .fp-ui .fp-fullscreen,
#player .vsq-is-toast .fp-ui .fp-unload,
#player .vsq-is-toast .fp-ui .fp-speed,

#player .vsq-is-nontransient-message .fp-ui .fp-controls,
#player .vsq-is-nontransient-message .fp-ui .fp-time,
#player .vsq-is-nontransient-message .fp-ui .fp-fullscreen,
#player .vsq-is-nontransient-message .fp-ui .fp-unload,
#player .vsq-is-nontransient-message .fp-ui .fp-speed
{
  opacity: 0.5;
}

/* darkening the play button when toast is shown */
#player .fp-ui::before {
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;
  z-index: -1;
  background-color: rgba(0,0,0,0.5);
  opacity: 0;
  transition: 0.3s opacity;
}

#player .vsq-is-toast .fp-ui::before {
  opacity: 1;
}

#player .vsq-modal .vsq-login,
#player .vsq-modal .vsq-transient,
#player .vsq-modal .vsq-nontransient,
#player .vsq-modal .vsq-question,
#player .vsq-modal .vsq-toast,
#player .vsq-modal .vsq-presence {
  display: none;
}
#player .vsq-is-login .vsq-modal,
#player .vsq-is-login .vsq-modal .vsq-login {
  display: block;
}
#player .vsq-is-nontransient-message .vsq-modal,
#player .vsq-transient-error .vsq-modal,
#player .vsq-transient-error .vsq-modal .vsq-transient {
  display: block;
}
#player .vsq-is-question .vsq-modal,
#player .vsq-is-fatalerror .vsq-modal {
  display: block;
}
#player .vsq-is-toast .vsq-modal,
#player .vsq-is-toast .vsq-modal .vsq-toast {
  display: inline-block;
}
#player .vsq-modal .vsq-toast {
  display: none;
  width: 150px;
  background-color: rgba(23, 23, 23, 0.7);
  color: #fff;
  padding: 10px;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 0;
  right: 0;
  cursor: default;
}
#player .vsq-limitedseek .fp-timeline,
#player .vsq-limitedseek .fp-buffer {
  cursor: default;
}
#player .vsq-limitedseek .fp-timeline-tooltip {
  z-index: 22;
}
#player .vsq-limitedseek .vsq-progress {
  position: absolute;
  top: 0;
  left: auto;
  height: 100%;
  cursor: col-resize;
}
#player .vsq-presencecheck .vsq-modal {
  display: block;
}
#player .vsq-modal .vsq-question .vsq-buttons button {
  margin: 0 0.5rem;
}
#player .vsq-modal .vsq-presence .vsq-button-continue {
  display: none;
}
#player .vsq-modal .vsq-presence.vsq-checkfailed .vsq-button-present {
  display: none;
}
#player .vsq-modal .vsq-presence.vsq-checkfailed .vsq-button-continue {
  display: inline-block;
}

.flowplayer {
  text-align: left;
}
.flowplayer .fp-menu {
  z-index: 30;
}
.flowplayer.is-finished .fp-ui {
  background: url(images/icons/player_replay.png) center no-repeat;
}
.is-splash.flowplayer .fp-ui,
.is-paused.flowplayer .fp-ui {
  background-image: url(../../images/player/title_play.png);
  background-image: -webkit-image-set(
    "../../images/player/title_play.png" 1x,
    "../../images/player/title_play_2x.png" 2x,
    "../../images/player/title_play_3x.png" 3x,
  );
  background-image: image-set(
    "../../images/player/title_play.png" 1x,
    "../../images/player/title_play_2x.png" 2x,
    "../../images/player/title_play_3x.png" 3x,
  );
  background-size: 20%;
}
.flowplayer.is-loading .fp-ui,
.flowplayer.is-finished .fp-ui,
.is-splash.flowplayer .fp-ui,
.is-paused.flowplayer .fp-ui {
  background-color: rgba(2, 10, 13, 0.65);
}
.flowplayer .fp-fullscreen {
}

.flowplayer.vsq-is-networkerrorretrying .fp-waiting { display: block; }

.flowplayer.is-mouseover.is-playing .fp-controls {
  background: -webkit-linear-gradient(90deg, rgba(51,51,51,1) 0%, rgba(0,0,0,0) 100%);
  background: -ms-linear-gradient(90deg, rgba(51,51,51,1) 0%, rgba(0,0,0,0) 100%);
  background: -o-linear-gradient(90deg, rgba(51,51,51,1) 0%, rgba(0,0,0,0) 100%);
  background: linear-gradient(0deg, rgba(51,51,51,1) 0%, rgba(0,0,0,0) 100%);
}
.flowplayer.is-mouseover .fp-controls {
  height: 59px;
  background-color: transparent;
}
.flowplayer .fp-controls,
.flowplayer .fp-title,
.flowplayer .fp-fullscreen,
.flowplayer .fp-unload,
.flowplayer .fp-close,
.flowplayer .fp-embed,
.flowplayer.aside-time .fp-time {
  background-color: transparent;
}
.flowplayer .fp-timeline {
  height: 4px;
  border-radius: 3px;
  background-color: #191919;
  background-color: rgba(125, 125, 125, 0.2);
  margin: 0 55px 0 55px;
}
.has-menu.flowplayer .fp-timeline {
  margin: -2px 55px -2px 55px;
}
.is-long.flowplayer .fp-timeline,
.has-menu.is-long.flowplayer .fp-timeline {
  margin: -2px 85px;
}
.flowplayer .fp-buffer {
  background-color: #595959;
}
.flowplayer .fp-time {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.flowplayer .fp-time em {
  bottom: 43px;
}
.flowplayer .fp-elapsed {
}
.flowplayer .fp-remaining,
.flowplayer .fp-duration,
.has-menu.flowplayer .fp-remaining,
.has-menu.flowplayer .fp-duration {
  right: 10px;
}
.flowplayer .fp-timeline-tooltip {
  bottom: 57px;
  background-color: rgba(0,0,0,0.5);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  padding: 0 7px;
  line-height: 20px;
}
.flowplayer .fp-tooltip:before,
.flowplayer .fp-dropdown.fp-dropup:before {
  display: none;
}

.flowplayer .fp-play {
  display: block;
  left: 5px;
  width: 40px;
  height: 40px !important;
  background-image: url(../../images/player/play.png);
  background-image: -webkit-image-set(
    "../../images/player/play.png" 1x,
    "../../images/player/play_2x.png" 2x,
    "../../images/player/play_3x.png" 3x,
  );
  background-image: image-set(
    "../../images/player/play.png" 1x,
    "../../images/player/play_2x.png" 2x,
    "../../images/player/play_3x.png" 3x,
  );
}
.flowplayer .fp-play:before,
.is-playing.flowplayer .fp-play:before,
.flowplayer .fp-mute:before,
.flowplayer .fp-fullscreen:before,
.flowplayer.is-fullscreen .fp-fullscreen:before,
.flowplayer.is-ready.is-muted .fp-mute:before,
.flowplayer .fp-menu:before {
  content: none;
}
.is-playing.flowplayer .fp-play {
  background-image: url(../../images/player/pause.png);
  background-image: -webkit-image-set(
    "../../images/player/pause.png" 1x,
    "../../images/player/pause_2x.png" 2x,
    "../../images/player/pause_3x.png" 3x,
  );
  background-image: image-set(
    "../../images/player/pause.png" 1x,
    "../../images/player/pause_2x.png" 2x,
    "../../images/player/pause_3x.png" 3x,
  );
}
.flowplayer .fp-volume {
  left: 45px;
  bottom: 17px;
}
.flowplayer .fp-mute {
  width: 40px;
  height: 40px;
  top: -18px;
  background-image: url(../../images/player/volume_4.png);
  background-image: -webkit-image-set(
    "../../images/player/volume_4.png" 1x,
    "../../images/player/volume_4_2x.png" 2x,
    "../../images/player/volume_4_3x.png" 3x,
  );
  background-image: image-set(
    "../../images/player/volume_4.png" 1x,
    "../../images/player/volume_4_2x.png" 2x,
    "../../images/player/volume_4_3x.png" 3x,
  );
}
.flowplayer .fp-volume.fp-volume-level0 .fp-mute {
  background-image: url(../../images/player/volume_0.png);
  background-image: -webkit-image-set(
    "../../images/player/volume_0.png" 1x,
    "../../images/player/volume_0_2x.png" 2x,
    "../../images/player/volume_0_3x.png" 3x,
  );
  background-image: image-set(
    "../../images/player/volume_0.png" 1x,
    "../../images/player/volume_0_2x.png" 2x,
    "../../images/player/volume_0_3x.png" 3x,
  );
}
.flowplayer .fp-volume.fp-volume-level1 .fp-mute {
  background-image: url(../../images/player/volume_1.png);
  background-image: -webkit-image-set(
    "../../images/player/volume_1.png" 1x,
    "../../images/player/volume_1_2x.png" 2x,
    "../../images/player/volume_1_3x.png" 3x,
  );
  background-image: image-set(
    "../../images/player/volume_1.png" 1x,
    "../../images/player/volume_1_2x.png" 2x,
    "../../images/player/volume_1_3x.png" 3x,
  );
}
.flowplayer .fp-volume.fp-volume-level2 .fp-mute {
  background-image: url(../../images/player/volume_2.png);
  background-image: -webkit-image-set(
    "../../images/player/volume_2.png" 1x,
    "../../images/player/volume_2_2x.png" 2x,
    "../../images/player/volume_2_3x.png" 3x,
  );
  background-image: image-set(
    "../../images/player/volume_2.png" 1x,
    "../../images/player/volume_2_2x.png" 2x,
    "../../images/player/volume_2_3x.png" 3x,
  );
}
.flowplayer .fp-volume.fp-volume-level3 .fp-mute {
  background-image: url(../../images/player/volume_3.png);
  background-image: -webkit-image-set(
    "../../images/player/volume_3.png" 1x,
    "../../images/player/volume_3_2x.png" 2x,
    "../../images/player/volume_3_3x.png" 3x,
  );
  background-image: image-set(
    "../../images/player/volume_3.png" 1x,
    "../../images/player/volume_3_2x.png" 2x,
    "../../images/player/volume_3_3x.png" 3x,
  );
}
.flowplayer .fp-volume.fp-volume-level4 .fp-mute {
  background-image: url(../../images/player/volume_4.png);
  background-image: -webkit-image-set(
    "../../images/player/volume_4.png" 1x,
    "../../images/player/volume_4_2x.png" 2x,
    "../../images/player/volume_4_3x.png" 3x,
  );
  background-image: image-set(
    "../../images/player/volume_4.png" 1x,
    "../../images/player/volume_4_2x.png" 2x,
    "../../images/player/volume_4_3x.png" 3x,
  );
}
.flowplayer.is-ready.is-muted .fp-mute {
  background-image: url(../../images/player/mute.png);
  background-image: -webkit-image-set(
    "../../images/player/mute.png" 1x,
    "../../images/player/mute_2x.png" 2x,
    "../../images/player/mute_3x.png" 3x,
  );
  background-image: image-set(
    "../../images/player/mute.png" 1x,
    "../../images/player/mute_2x.png" 2x,
    "../../images/player/mute_3x.png" 3x,
  );
}
.flowplayer .fp-volumeslider {
  width: 100px;
}

.flowplayer .fp-fullscreen {
  width: 40px;
  height: 40px;
  top: auto;
  left: auto;
  bottom: 0;
  right: 0;
  background-image: url(../../images/player/fullscreen.png);
  background-image: -webkit-image-set(
    "../../images/player/fullscreen.png" 1x,
    "../../images/player/fullscreen_2x.png" 2x,
    "../../images/player/fullscreen_3x.png" 3x,
  );
  background-image: image-set(
    "../../images/player/fullscreen.png" 1x,
    "../../images/player/fullscreen_2x.png" 2x,
    "../../images/player/fullscreen_3x.png" 3x,
  );
  z-index: 12;
}

.flowplayer .fp-brand {
  text-indent: 300px;
  z-index: -10;
}

/* subtitle */
.flowplayer .fp-menu {
  width: 40px;
  height: 40px;
  top: auto;
  left: auto;
  bottom: 0;
  right: 85px;
  background-image: url(../../images/player/subtitle.png);
  background-image: image-set(
    "../../images/player/subtitle.png" 1x,
    "../../images/player/subtitle_2x.png" 2x,
    "../../images/player/subtitle_3x.png" 3x,
  );
}
.flowplayer .fp-menu.dropdown-open {
  background-image: url(../../images/player/subtitle_active.png);
  background-image: image-set(
    "../../images/player/subtitle_active.png" 1x,
    "../../images/player/subtitle_active_2x.png" 2x,
    "../../images/player/subtitle_active_3x.png" 3x,
  );
}

.flowplayer .fp-menu.dropdown-open li[data-subtitle-index].disabled {
  cursor: normal;
  pointer-events: none;
  opacity: 0.6;
  font-style: italic;
}

.flowplayer.is-mouseout .vsq-quality-selector,
.flowplayer.is-mouseout .vsq-layoutchooser,
.flowplayer.is-mouseout .vsq-layoutchooser-slider {
  opacity: 0;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  -webkit-transition: opacity .15s .3s;
  -moz-transition: opacity .15s .3s;
  transition: opacity .15s .3s;
}

/* quality chooser - settings icon */
#player .vsq-quality-selector {
  position: absolute;
  z-index: 12;
  width: 40px;
  height: 40px;
  top: auto;
  left: auto;
  bottom: 0;
  right: 40px;
  background-image: url(../../images/player/settings.png);
  background-image: -webkit-image-set(
    "../../images/player/settings.png" 1x,
    "../../images/player/settings_2x.png" 2x,
    "../../images/player/settings_3x.png" 3x,
  );
  background-image: image-set(
    "../../images/player/settings.png" 1x,
    "../../images/player/settings_2x.png" 2x,
    "../../images/player/settings_3x.png" 3x,
  );
}
#player .vsq-quality-selector.dropdown-open {
  background-image: url(../../images/player/settings_active.png);
  background-image: -webkit-image-set(
    "../../images/player/settings_active.png" 1x,
    "../../images/player/settings_active_2x.png" 2x,
    "../../images/player/settings_active_3x.png" 3x,
  );
  background-image: image-set(
    "../../images/player/settings_active.png" 1x,
    "../../images/player/settings_active_2x.png" 2x,
    "../../images/player/settings_active_3x.png" 3x,
  );
}
#player .vsq-quality-selector .fp-dropdown {
  left: auto;
  right: 0;
}

/* layout chooser */
#player .vsq-layoutchooser {
  display: none;
  position: absolute;
  width: 40px;
  height: 40px;
  top: auto;
  left: auto;
  bottom: 0;
  right: 85px;
  background-image: url(../../images/player/layout.png);
  background-image: -webkit-image-set(
    "../../images/player/layout.png" 1x,
    "../../images/player/layout_2x.png" 2x,
    "../../images/player/layout_3x.png" 3x,
  );
  background-image: image-set(
    "../../images/player/layout.png" 1x,
    "../../images/player/layout_2x.png" 2x,
    "../../images/player/layout_3x.png" 3x,
  );
}
#player .vsq-layoutchooser-controls-shown .vsq-layoutchooser {
  display: block;
}
#player .has-menu .vsq-layoutchooser {
  right: 135px;
}
#player .vsq-layoutchooser-shown .vsq-layoutchooser {
  background-image: url(../../images/player/layout_active.png);
  background-image: -webkit-image-set(
    "../../images/player/layout_active.png" 1x,
    "../../images/player/layout_active_2x.png" 2x,
    "../../images/player/layout_active_3x.png" 3x,
  );
  background-image: image-set(
    "../../images/player/layout_active.png" 1x,
    "../../images/player/layout_active_2x.png" 2x,
    "../../images/player/layout_active_3x.png" 3x,
  );
}
#player .vsq-layoutchooser-container {
  display: none;
  position: absolute;
  width: 80%;
  height: 25%;
  top: 37.5%;
  left: 10%;
  z-index: 13;
  vertical-align: middle;
}
#player .vsq-layoutchooser-container > div {
  display: table;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  background-color: rgba(23, 23, 23, 0.7);
  border-radius: 5px;
  width: 100%;
  height: 100%;
}
#player .vsq-layoutchooser-container > div > div {
  display: inline-block;
  box-sizing: border-box;
  flex-grow: 1;
  height: 100%;
  width: 19.9%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 70%;
  border-right: 1px solid #3e3a3a;
  position: relative;
}
#player .vsq-layoutchooser-container > div > div span {
  display: block;
  width: 100%;
  position: absolute;
  bottom: 0;
  z-index: 1;
  color: #fff;
  line-height: 30px;
  font-size: 100%;
  white-space: nowrap;
  text-align: center;
  padding: 0 0 5px 0;
}
#player .vsq-layoutchooser-container > div > div:nth-child(5) {
  border-right: 0;
}
#player .vsq-layoutchooser-shown .vsq-layoutchooser-container {
  display: block;
}
/* layout chooser slider */
#player .vsq-layoutchooser-slider {
  display: none;
  -webkit-appearance: none;
  width: 150px;
  height: 40px;
  background: transparent;
  position: absolute;
  bottom: 0;
  right: 185px;
}
#player .vsq-layoutchooser-controls-shown .vsq-layoutchooser-slider {
  display: block;
}
#player .vsq-layoutchooser-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 18px;
  margin-top: -7px;
  width: 26px;
  background: url(../../images/player/layoutchooser.png) no-repeat;
  cursor: col-resize;
  border-radius: 0;
  border: 0;
}
#player .vsq-layoutchooser-slider:hover::-webkit-slider-thumb {
  background: url(../../images/player/layoutchooser_active.png)  no-repeat;
}
#player .vsq-layoutchooser-slider:active::-webkit-slider-thumb {
  background: url(../../images/player/layoutchooser_active.png)  no-repeat;
}
#player .vsq-layoutchooser-slider::-moz-range-thumb {
  height: 18px;
  width: 26px;
  background: url(../../images/player/layoutchooser.png)  no-repeat;
  background-repeat: no-repeat;
  cursor: col-resize;
  border-radius: 0;
  border: 0;
}
#player .vsq-layoutchooser-slider:hover::-moz-range-thumb {
  background: url(../../images/player/layoutchooser_active.png)  no-repeat;
}
#player .vsq-layoutchooser-slider:active::-moz-range-thumb {
  background: url(../../images/player/layoutchooser_active.png)  no-repeat;
}
#player .vsq-layoutchooser-slider::-ms-thumb {
  height: 18px;
  width: 26px;
  background: url(../../images/player/layoutchooser.png)  no-repeat;
  background-repeat: no-repeat;
  cursor: col-resize;
  border-radius: 0;
  border: 0;
}
#player .vsq-layoutchooser-slider:hover::-ms-thumb {
  background: url(../../images/player/layoutchooser_active.png)  no-repeat;
}
#player .vsq-layoutchooser-slider:active::-ms-thumb {
  background: url(../../images/player/layoutchooser_active.png)  no-repeat;
}
#player .vsq-layoutchooser-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  cursor: col-resize;
  background: #292929;
  background: rgba(41, 171, 226, 0.5);
  border-color: transparent;
  color: transparent;
  border-radius: 5px;
  border: 0;
}
#player .vsq-layoutchooser-slider::-moz-range-track {
  width: 100%;
  height: 5px;
  cursor: col-resize;
  background: #292929;
  background: rgba(41, 171, 226, 0.5);
  border-color: transparent;
  color: transparent;
  border-radius: 5px;
  border: 0;
}
#player .vsq-layoutchooser-slider::-moz-focus-outer {
  border: 0;
}
#player .vsq-layoutchooser-slider::-ms-track {
  width: 100%;
  height: 5px;
  cursor: col-resize;
  background: #292929;
  background: rgba(41, 171, 226, 0.5);
  border-color: transparent;
  color: transparent;
  border-radius: 5px;
  border: 0;
  animate: 0.2s;
}
#player .vsq-layoutchooser-slider:focus {
  outline: none;
}
#player .vsq-layoutchooser-container .pip-content {
  background-image: url(../../images/player/layout_pipcontent_3x.png);
}
#player .vsq-layoutchooser-container .pip-master {
  background-image: url(../../images/player/layout_pipmaster_3x.png);
}
#player .vsq-layoutchooser-container .split {
  background-image: url(../../images/player/layout_split_3x.png);
}
#player .vsq-layoutchooser-container .master-only {
  background-image: url(../../images/player/layout_masteronly_3x.png);
}
#player .vsq-layoutchooser-container .content-only {
  background-image: url(../../images/player/layout_contentonly_3x.png);
}

#player .vsq-modal .vsq-login {
  background-color: rgba(23, 23, 23, 0.7);
  color: #fff;
  width: 100%;
  height: 100%;
  cursor: default;
  margin: 0px 0 0 0;
  overflow: auto;
}
#player .vsq-modal .vsq-login .row {
  min-width: 242px;
  max-width: 70%;
  margin: 10px auto;
  text-align: center;
  display: block;
}
#player .vsq-modal .vsq-login .vsq-title {
  padding-top: 20px;
  color: #ccc;
  font-weight: bold;
  font-size: 24px;
  line-height: 44px;
  white-space: nowrap;
}

#player .vsq-modal .vsq-login .vsq-message {
  margin: 1rem auto 1rem auto;
}

#player .vsq-modal .vsq-login.vsq-login-hasoauthazure .vsq-message {
  margin: 0rem auto 0rem auto;
}
#player .vsq-modal .vsq-login.vsq-login-hasoauthazure .vsq-message div {
  margin: 0.5rem auto 0.5rem auto;
}

#player .vsq-modal .vsq-login .vsq-loginmessage div,
#player .vsq-modal .vsq-login .vsq-message div {
  color: #ccc;
}
#player .vsq-modal .vsq-login .vsq-loginmessage div {
  margin-bottom: 1rem;
  font-weight: bold;
}
#player .vsq-modal .vsq-login .vsq-loginmessage.row {
  margin-top: 0;
  margin-bottom: 0;
}

#player .vsq-modal .vsq-login input {
  width: 200px;
  padding: 0 20px;
  font-size: 16px;
  height: 35px;
  line-height: 35px;
  border-radius: 10px;
  border: 1px solid #444;
  color: #999;
  background-color: #21282a;
  background-color: rgba(33, 40, 42, 0.95);
}
#player .vsq-modal .vsq-login input:-webkit-autofill {
  width: 200px;
  padding: 0 20px;
  font-size: 16px;
  height: 35px;
  line-height: 35px;
  border-radius: 10px;
  border: 1px solid transparent;
  color: #999;
  background-color: rgba(33, 40, 42, 0.4);
}
#player .vsq-modal .vsq-login input:focus {
  outline: 0;
  border: 1px solid #fff;
  color: #fff !important;
}
#player .vsq-modal .vsq-login .submit {
  width: 244px;
  text-align: right;
}
#player .vsq-modal .vsq-login .submit a {
  color: #29abe2;
  text-decoration: none;
  float: left;
  line-height: 33px;
  font-weight: bold;
}
#player .vsq-modal .vsq-login .submit a:focus,
#player .vsq-modal .vsq-login .submit a:hover {
  text-decoration: underline;
}

#player .vsq-modal .vsq-login .oauthlogincontainer {
  margin-top: 1.5rem;
  border-top: 1px solid black;
  padding-top: 1.5rem;
}

#player .vsq-modal .vsq-login .oauthlogincontainer a {
  color: #ccc;
}

#player .vsq-presence input,
#player .vsq-question button,
#player .vsq-transient input,
#player .vsq-nontransient input,
#player .vsq-toast input,
#player .vsq-modal .vsq-login .submit input {
  padding: 0 20px;
  width: auto;
  height: 33px;
  line-height: 33px;
  font-size: 16px;
  cursor: pointer;
  background-color: #29abe2;
  font-weight: bold;
  color: #fff;
  border: 0;
  border-radius: 10px;
}

#player .vsq-presence .vsq-message,
#player .vsq-question .vsq-message,
#player .vsq-nontransient .vsq-message,
#player .vsq-transient .vsq-message,
#player .vsq-toast .vsq-message {
  font-size: 18px;
  margin: 0 0 0.5rem 0;
}
/* no margin needed as there's no button below */
#player .vsq-toast .vsq-message {
  margin: 0;
}

#player .vsq-presence .vsq-remainingtime {
  margin-bottom: 0.5rem;
}

/* modal centered windows */
#player .vsq-is-nontransient-message .vsq-modal .vsq-nontransient,
#player .vsq-transient-error .vsq-modal .vsq-transient,
#player .vsq-is-question .vsq-modal .vsq-question,
#player .vsq-presencecheck .vsq-modal .vsq-presence,
#player .vsq-is-fatalerror .vsq-modal .vsq-fatalerror {
  display: flex;
}
#player .vsq-modal b {
  font-weight: bold;
}
#player .vsq-question,
#player .vsq-nontransient,
#player .vsq-transient,
#player .vsq-presence,
#player .vsq-fatalerror {
  color: #fff;
  cursor: default;
  justify-content: center;
  align-items: center;
  margin: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
#player .vsq-question a,
#player .vsq-nontransient a,
#player .vsq-transient a,
#player .vsq-presence a,
#player .vsq-fatalerror a {
  color: #fff;
  text-decoration: underline;
}
#player .vsq-question .vsq-wrap,
#player .vsq-nontransient .vsq-wrap,
#player .vsq-transient .vsq-wrap,
#player .vsq-presence .vsq-wrap {
  background-color: rgba(23, 23, 23, 0.7);
  border-radius: 5px;
  padding: 20px;
  overflow-y: auto;
  max-height: calc( 100% - 40px );
}

#player .vsq-presence,
#player .vsq-nontransient,
#player .vsq-transient {
  text-align: center;
}
#player .vsq-presence .vsq-message,
#player .vsq-nontransient .vsq-message,
#player .vsq-transient .vsq-message {
  text-align: center;
}
#player .vsq-nontransient .vsq-message span {
  width: auto; 
}

#player .is-fullscreen.flowplayer .fp-subtitle p {
  font-size: 32px;
  line-height: 2.1;
}

#player .vsq-fatalerror {
  display: none;
  background-color: #171717;
  width: 100%;
  height: 100%;
  text-align: center;
  cursor: default;
}
#player .vsq-fatalerror .vsq-wrap {
  position: relative;
  color: #fff;
  font-size: 22px;
}
#player .vsq-is-fatalerror .vsq-fatalerror {
  display: block;
}

#player .is-live.vsq-nobroadcast .fp-player {
  background-image: url(../../images/player/nobroadcast.png);
  background-repeat: no-repeat;
  background-size: 100%;
}
#player .is-live.vsq-nobroadcast.flowplayer.is-loading .fp-ui {
  background-color: transparent;
}

#player .vsq-progress-percent-container {
  position: absolute;
  right: 0;
  top: 0;
  padding-right: 5px;
}
#player .vsq-progress-percent {
  color: #fff;
  font-weight: bold;
  font-size: 2.3rem;
  line-height: normal;
  filter: drop-shadow(1px 1px 1px #000);
}
#player .vsq-progress-percent:after {
  display: inline-block;
  font: normal normal normal 24px/1 "Material Design Icons";
  font-size: inherit;
  text-rendering: auto;
  line-height: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\F158";
}
#player .vsq-progress-percent-container.done .vsq-progress-percent {
  color: #70df00;
}

#player .vsq-progress-percent-container.done .vsq-progress-percent:after {
  content: "\F135";
}
#player .vsq-progress-timeleft {
  color: #fff;
  font-weight: normal;
  font-size: 1rem;
  text-align: right;
  filter: drop-shadow(1px 1px 1px #000);
}
#player .vsq-progress-timeleft.resetting {
  color: #c12c2c;
}
#player .vsq-progress-percent-container.timeout .vsq-progress-timeleft {
  color: #c12c2c;
}
#player .vsq-progress-timeleft:after {
  display: inline-block;
  font: normal normal normal 24px/1 "Material Design Icons";
  font-size: inherit;
  text-rendering: auto;
  line-height: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f51f";
  opacity: 0.6;
}

#player .vsq-progress-percent-container.done .vsq-progress-timeleft,
#player .vsq-progress-percent-container.done .vsq-progress-timeleft:after {
  display: none;
}

/* chapter */
#player .vsq-chapter-wrap {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 19;

  display: none;
  box-sizing: border-box;
  background-color: rgba(23, 23, 23, 0.7);
  color: #fff;
  width: 100%;
  min-height: 100%;
  max-height: 100%;
  overflow: auto;
  padding: 30px 60px;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1rem;
}
#player .vsq-chapter-wrap > div {
  background-color: #29ABE2;
  box-sizing: border-box;
  border-radius: 5px;
  width: 100%;
  padding: 10px 30px;
  display: none;
}
#player .vsq-chapter-wrap.question .vsq-chapter-question {
  height: 100%;
  flex-direction: column;
  display: flex;
  overflow: hidden;
  overflow-y: auto;
}
#player .vsq-chapter-wrap.question .vsq-chapter-question .content {
  flex-grow: 1;
  overflow: auto;
}
#player .vsq-chapter-wrap .content {
  padding: 1em 0;
}
#player .vsq-chapter-wrap > div > div {
  width: 100%;
}
#player .vsq-chapter-wrap .title-row {
  position: relative;
}
#player .vsq-chapter-wrap .title {
  text-align: center;
  width: 100%;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.2rem;
}
#player .vsq-chapter-wrap .remaining {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.2rem;
}
#player .vsq-chapter-wrap .vsq-chapter-question .content {
}
#player .vsq-chapter-wrap .vsq-chapter-summary .content {
  text-align: center;
}
#player .vsq-chapter-wrap .button-wrap {
  text-align: center;
  margin-top: 1em;
}
#player .vsq-chapter-wrap .button-wrap button {
  font-size: 1.2rem;
  font-weight: bold;
  color: #fff;
  line-height: 1.5rem;
  padding: 0 .5em;
  background-color: #29ABE2;
  border: 1px solid #6fc6eb;
  border-radius: 5px;
}
#player .vsq-chapter-wrap .answers-wrap {
  margin-top: 1em;
}
#player .vsq-chapter-wrap .answer-wrap {
  margin-top: 0.5em;
}
#player .vsq-chapter-wrap .answer-wrap .input-wrap {
  padding: 0 10px;
}
#player .vsq-chapter-wrap .answer-wrap label > div {
  display: inline;
  vertical-align: top;
}
#player .vsq-chapter-wrap.summary .vsq-chapter-summary {
  display: block;
  overflow: hidden;
  overflow-y: auto;
  max-height: 100%;
}
#player .vsq-chapter-wrap.summary.continue .restart {
  display: none;
}
#player .vsq-chapter-wrap.summary.restart .continue {
  display: none;
}
#player .vsq-chapter-wrap.summary .button-wrap {
  margin-bottom: 1em;
}
#player .vsq-chapter-wrap.loading button,
#player .vsq-chapter-wrap .disabled {
  pointer-events: none;
  opacity: 0.3;
}
#player .flowplayer.is-mouseover .fp-timeline.vsq-has-chapters {
  overflow: visible;
}
#player .vsq-chapter-point {
  position: absolute;
  display: block;
  cursor: pointer;
  height: 8px;
  width: 8px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #000;
  top: -3px;
  top: calc( ( -1 * ( 100% / 2 ) ) - 1px);
}
#player .vsq-chapter-wrap .content::-webkit-scrollbar,
#player .vsq-chapter-question::-webkit-scrollbar,
#player .vsq-chapter-summary::-webkit-scrollbar {
  width: 4px;
  border-radius: 6px;
}
#player .vsq-chapter-wrap .content::-webkit-scrollbar-track,
#player .vsq-chapter-question::-webkit-scrollbar-track,
#player .vsq-chapter-summary::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, .28);
}
#player .vsq-chapter-wrap .content::-webkit-scrollbar-thumb,
#player .vsq-chapter-question::-webkit-scrollbar-thumb,
#player .vsq-chapter-summary::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 6px;
}
#player .vsq-chapter-wrap .content::-webkit-scrollbar-thumb:hover,
#player .vsq-chapter-question::-webkit-scrollbar-thumb:hover,
#player .vsq-chapter-summary::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* browser zoom fix when fullscreen and there is no content  */
#player .flowplayer.is-fullscreen.vsq-hidden-content .vsq-master {
  width: inherit !important;
  height: inherit !important;
  max-height: none !important;
}

#player .flowplayer.is-loading .vsq-countdown {
  display: block;
}
#player .vsq-countdown {
  display: none;
  padding: 2em 0;
  width: 80%;
  background: rgba(255, 255, 255, .7);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 10%;
  text-align: center;
  font-size: 2vw;
  line-height: 1;
}
#player .vsq-countdown span {
  display: inline-block;
  width: 5em;
}

@media all and (max-width: 600px) {
  #player .vsq-layoutchooser-controls-shown .vsq-layoutchooser-slider {
    display: none;
  }
  #player .vsq-chapter-wrap .title-row {
    display: flex;
    flex-wrap: wrap;
  }
  #player .vsq-chapter-wrap .title {
    width: auto;
    flex-grow: 1;
  }
  #player .vsq-chapter-wrap .remaining {
    position: static;
    margin-left: 10px;
  }
  #player .flowplayer.vsq-singlevideo.is-fullscreen .vsq-engine.vsq-master {
    top: 50%;
    transform: translate(0, -50%);
  }
  #player .vsq-modal .vsq-login .row {
    min-width: 242px;
    max-width: 90%;
  }  
  #player .vsq-modal .vsq-login .vsq-title {
    font-size: 18px;
    line-height: 36px;
    padding-top: 0;
  }
  #player .vsq-modal .vsq-message {
    font-size: 13px;
  }
  #player .vsq-question button,
  #player .vsq-transient input,
  #player .vsq-nontransient input,
  #player .vsq-toast input,
  #player .vsq-modal .vsq-login .submit input {
    font-size: 13px;
  }

  #player .vsq-modal .vsq-login input,
  #player .vsq-modal .vsq-login .submit input {
    font-size: 13px;
    line-height: 25px;
    height: 25px;
  }

  #player .vsq-modal .vsq-login .oauthlogincontainer {
    margin-top: .5rem;
    padding-top: .5rem;
  }

}