.ivs-player
{
  position: relative;
  width: 100%;
  overflow: hidden;
}

.ivs-player *
{
  transition: all .15s ease-in-out;
  transform-origin: top left;
}

.ivs-player .video
{
  height: 100%;
}

.ivs-player video.ivs
{
  display: block;
  width: 100%;
  pointer-events: none;
  /* allow other elements to overlap video on ios */
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  height: 100%;
  object-fit: cover;
}

.ivs-player .playground
{
  display: contents;
}

.ivs-player .playground > *,
.ivs-player .activity
{
  position: absolute;
  left: 0;
  top: 0;
}

.ivs-player .message,
.ivs-player .activity
{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.ivs-player .message span
{
  font-weight: bold;
  position: relative;
  padding: 0 .25rem;
  z-index: 1;
  color: #fff;
}

.ivs-player .message span:before
{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background:#000d;
  filter: blur(.5rem);
  z-index: -1;
}

.ivs-player .error-message span
{
  color: #f88;
}

.ivs-player .controls
{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 3rem;
  background:#0008;
  background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
  display: flex;
}

.ivs-player:not(.initialized) .controls
{
  display: none;
}

.ivs-player.hide-controls .controls
{
  bottom: -3rem;
}

.ivs-player .controls > *,
.ivs-player .controls button
{
  width: 3rem;
  height: 3rem;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 1.5rem;
}

.ivs-player .controls .streams,
.ivs-player .controls .streams button
{
  width: unset;
}

.ivs-player .controls .streams span
{
  font-size: .8rem;
}

.ivs-player .controls button
{
  padding: 0;
  /* kill branding */
  background: transparent !important;
  border: none !important;
  color: white !important;
}

.ivs-player .controls-group,
.ivs-player .qualities,
.ivs-player .streams
{
  position: relative;
}

.ivs-player .controls-group button
{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transition: all .3s ease-in-out;
}

.ivs-player .menu
{
  position: absolute;
  left: 0;
  bottom: 100%;
  margin: 0;
  padding: 0;
  font-size: .8rem;
  background: #0009;
  border-radius: .25rem;
  overflow: hidden;
}

.ivs-player .menu.right
{
  left: unset;
  right: 0;
}

.ivs-player .menu:not(:focus)
{
  opacity: 0;
  animation: h-0 .15s step-end both;
}

@keyframes h-0
{
  to { height: 0; }
}

.ivs-player .menu li
{
  list-style-type: none;
  padding: .5rem 1rem .5rem 1.5rem;
  position: relative;
  white-space: nowrap;
}

.ivs-player .menu li:hover
{
  background: #fff2;
}

.ivs-player .menu li.selected::before
{
  content: '';
  display: block;
  position: absolute;
  left: 0.7rem;
  top: 50%;
  width: 0;
  height: 0;
  border: .35rem solid transparent;
  border-left-color: white;
  transform: translateY(-50%);
}

.ivs-player .controls-group:not(.show-2) button:nth-child(2),
.ivs-player .controls-group.show-2 button:first-child
{
  z-index: 0;
  opacity: 0;
}

.ivs-player .activity::before,
.ivs-player .activity::after
{
  content: '';
  display: inline-block;
  width: 4rem;
  height: 4rem;
  border-radius: 4rem;
  border: .3rem solid white;
  border-top-color: transparent;
  border-bottom-color: transparent;
  animation: ivs-activity 1.5s linear infinite;
}

.ivs-player .activity::after
{
  width: 3rem;
  height: 3rem;
  border-width: .2rem;
  border-left-color: transparent;
  animation: ivs-activity 1s linear infinite reverse;
  margin-left: -3.5rem;
}

@keyframes ivs-activity
{
  to { transform: rotate(360deg); }
}

.ivs-player .btn-quality .badge
{
  position: absolute;
  top: .4rem;
  right: 0;
  font-size: .6rem;
}

.embed-responsive .ivs-countdown
{
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 1000px;
  text-align: center;
}

.embed-responsive .ivs-countdown:empty
{
  display: none;
}