.mistvideo {
  line-height: 1.2;
  font-size: 14.5px;
}
.mistvideo svg {
  margin: 2.5px;
}
.mistvideo-background { background-color: $background; }
.mistvideo-totalTime:before {
  content: '/';
  margin: 0.2em;
}
.mistvideo-progress {
  padding: 10px 0;
  margin: -10px 0;
  z-index: 2; /*keep above control bar*/
}
.mistvideo-progress > * {
  height: 2px;
  background-color: $progressBackground;
  opacity: 0.95;
  position: relative;
}
.mistvideo-novideo .mistvideo-progress > *,
.mistvideo-progress:hover > * {
  height: 10px;
}

.mistvideo-progress:not(:hover) > * {
  transition: height 0.25s ease-in 0.5s;
}
.mistvideo-progress .bar {
  height: inherit;
  width: 0;
  position: absolute;
  border-right: inherit;
  background-color: $accent;
  z-index: 2; /*keep above buffer bar(s)*/
}
.mistvideo-progress .buffer {
  height: inherit;
  width: 0;
  position: absolute;
  background-color: $semiFill;
}
.mistvideo-progress .bar:after {
  content: '';
  border: 5px solid $accent;
  border-radius: 5px;
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
}

.mistvideo-play[data-state="playing"] svg.play {
  display: none;
}
.mistvideo-play[data-state="paused"] svg.pause {
  display: none;
}
.mistvideo-main { align-items: center; }

svg.icon.timeout {
  display: inline-block;
  height: 1em;
  width: 1em;
  margin: 0;
  margin-right: 0.25em;
  vertical-align: top;
}

.mist.largeplay, .mist.muted {
  position: absolute;
  opacity: 0.5;
}
.mist.largeplay {
  top: 50%;
  left: 0;
  right: 0;
  margin: auto;
  transform: translateY(-50%);
}
.mist.muted {
  top: 0;
  right: 0;
  margin: 1em;
}
.mistvideo-secondaryVideo {
  z-index: 1;
  width: 50%;
  height: 50%;
}
.mistvideo-polling {
  display: inline-block;
  position: relative;
  width: 25px;
  height: 25px;
}
.mistvideo-polling svg.icon.loading {
  z-index: 0;
  opacity: 1;
}
.mistvideo[data-show-submenu] .mistvideo-submenu {
  right: 5px;
}
.mistvideo[data-show-submenu] .mistvideo-controls {
  bottom: 0;
}
.mistvideo-error[data-passive] {
  bottom: auto;
  left: auto;
  margin: 0.5em;
  padding: 0.5em;
}
.mistvideo-error[data-passive] .message {
  max-width: none;
}
.mistvideo-error .mistvideo-buttoncontainer {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
}
.mistvideo-error .mistvideo-buttoncontainer .mistvideo-button {
  white-space: nowrap;
}
.browser-ie .mist.icon.loading {
  animation: spin 1.5s infinite linear;
  transform-origin: 50% 50%;
}
.browser-ie .mist.icon.loading .spin { animation: none; }