.videoplayer {
  color: var(--elli-videoplayer-color, #ffffff);
  background: var(--elli-videoplayer-bg, #000000);
  border: var(--elli-videoplayer-border-width, 0) solid var(--elli-videoplayer-border-color, transparent);
  border-radius: var(--elli-videoplayer-border-radius, .5rem);
  overflow: hidden;
}

.videoplayer iframe,
.videoplayer video {
  display: block;
  inline-size: 100%;
  aspect-ratio: var(--elli-videoplayer-aspect-ratio, 16 / 9);
  background: var(--elli-videoplayer-bg, #000000);
  border: 0;
}

.videoplayer iframe {
  block-size: auto;
}

.mejs__poster.mejs__layer,
.mejs__overlay-play {
    width: 100% !important;
    height: auto !important;
    top: 0;
    bottom: 0;
}

.videoplayer .mejs__container {
  inline-size: 100% !important;
  max-inline-size: 100%;
  color: var(--elli-videoplayer-color, #ffffff);
  background: var(--elli-videoplayer-bg, #000000);
  border-radius: var(--elli-videoplayer-border-radius, .5rem);
  overflow: hidden;
}

.videoplayer .mejs__mediaelement,
.videoplayer .mejs__poster {
  background: var(--elli-videoplayer-bg, #000000);
}

.videoplayer .mejs__controls {
  min-block-size: var(--elli-videoplayer-controls-height, 3rem);
  background: var(--elli-videoplayer-controls-bg, rgba(0, 0, 0, .85));
  color: var(--elli-videoplayer-controls-color, #ffffff);
}

.videoplayer .mejs__button > button {
  inline-size: var(--elli-videoplayer-control-button-size, 2.75rem);
  block-size: var(--elli-videoplayer-control-button-size, 2.75rem);
  color: var(--elli-videoplayer-controls-color, #ffffff);
}

.videoplayer .mejs__time {
  color: var(--elli-videoplayer-controls-color, #ffffff);
}

.videoplayer .mejs__time-total {
  background: var(--elli-videoplayer-progress-bg, rgba(255, 255, 255, .35));
}

.videoplayer .mejs__time-loaded {
  background: var(--elli-videoplayer-progress-loaded-bg, rgba(255, 255, 255, .55));
}

.videoplayer .mejs__time-current {
  background: var(--elli-videoplayer-progress-current-bg, #ffffff);
}

.videoplayer .mejs__captions-layer,
.videoplayer .mejs__captions-text {
  color: var(--elli-videoplayer-caption-color, #ffffff);
  background: var(--elli-videoplayer-caption-bg, rgba(0, 0, 0, .85));
  font-size: var(--elli-videoplayer-caption-font-size, 1rem);
}

.videoplayer video::cue {
  color: var(--elli-videoplayer-caption-color, #ffffff);
  background: var(--elli-videoplayer-caption-bg, rgba(0, 0, 0, .85));
  font-size: var(--elli-videoplayer-caption-font-size, 1rem);
}

.videoplayer :where(button, a, input, select, textarea, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline-width: var(--elli-videoplayer-focus-width, var(--jsd-elli-focus-ring-width, 3px));
  outline-style: solid;
  outline-color: var(--elli-videoplayer-focus-color, var(--jsd-elli-focus-ring-color, #0d6efd));
  outline-offset: var(--elli-videoplayer-focus-offset, var(--jsd-elli-focus-ring-offset, 2px));
  box-shadow: var(--jsd-elli-focus-ring-shadow, 0 0 0 3px color-mix(in srgb, var(--jsd-elli-focus-ring-color, #0d6efd), transparent 70%));
}