html,
body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

.vslider-player {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.vslider-player .eump-cover {
  pointer-events: none;
}

.player-preview {
  position: relative;
  margin: 10px;
  background: green;
}

.mediaholder {
  position: fixed;
  padding: 1px;
  top: 20px;
  right: 20px;
  width: 300px;
  background: #ffffff;
}
.mediaholder:hover .mediaholder-control {
  opacity: 1;
}
.mediaholder.mediaholder__expanded {
  width: 80%;
  right: 10%;
  top: 10%;
  padding: 20px;
}
.mediaholder.mediaholder__expanded .mediaholder-viewport {
  background: #000000;
  margin-right: 200px;
}
.mediaholder.mediaholder__expanded .mediaholder-players {
  display: block;
}
.mediaholder.mediaholder__expanded .mediaholder-players .eump-cover {
  background: rgba(10, 10, 10, 0.7);
}
.mediaholder.mediaholder-muted .mediaholder-controls .eump-vol-muted-button {
  display: flex;
}
.mediaholder.mediaholder-muted .mediaholder-controls .eump-vol-unmuted-button {
  display: none;
}
.mediaholder.mediaholder__expanded .mediaholder-controls {
  right: 210px;
}
.mediaholder.mediaholder__expanded .mediaholder-controls .eump-popup-button-on {
  display: flex;
}
.mediaholder.mediaholder__expanded .mediaholder-controls .eump-popup-button-off {
  display: none;
}
.mediaholder.mediaholder__muted .mediaholder-controls .eump-vol-muted-button {
  display: flex;
}
.mediaholder.mediaholder__muted .mediaholder-controls .eump-vol-unmuted-button {
  display: none;
}

.mediaholder-viewport {
  background: #000000;
  position: relative;
}
.mediaholder-viewport .mediaholder-player {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.mediaholder-players {
  display: none;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 200px;
}

.mediaholder-controls {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
}
.mediaholder-controls .mediaholder-control {
  position: absolute;
}

.mediaholder-control {
  width: 70px;
  height: 70px;
  cursor: pointer;
  position: absolute;
  bottom: 0;
  opacity: 0.5;
}
.mediaholder-control svg {
  fill: #ffffff;
  width: 70%;
}

.mediaholder-fullscreen-control {
  display: none;
}

.mediaholder-popup-control {
  right: 10px;
}

.mediaholder-mute-control {
  left: 10px;
}

.eump-vol-muted-button {
  display: none;
}

.eump-vol-unmuted-button {
  display: flex;
}

.eump-popup-button-on {
  display: none;
}

.eump-popup-button-off {
  display: flex;
}