:host {
  --video-border-radius: 5px;
}

dxp-video {
 display: block;
 justify-items: stretch;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

#content-remote {
  height: 100vh;
}

n-video {
  margin-bottom: 2rem;
}

.overlay-text {
  color: red;
  text-shadow: 0 0 4px #6a6a6a;
  top: -8rem;
  position: relative;
}

.poster-container {
  position: relative;
}

.video-item {
  position: relative;
}

.video-item > div {
  position: absolute;
  top: 0;
  left: 0;
}

.video-item svg {
  position: absolute;
  top: 40%;
  left: 45%;
  cursor: pointer;
  opacity: 0.6;
}

.video-item svg:hover {
  opacity: 0.9;
}

.video-item-active, .video-item-video {
  display: block;
}

#video-modal::part(header) {
  display: none;
}

.preview-el, .video-el {
  border-radius: var(--video-border-radius);
}

.duration-text{
  position: absolute;
  bottom: 5%;
  right: 5%;
}