.ws-player {
  position: relative;
  background-color: #000000;
  display: flex;
  justify-content: center;
}
.ws-player .player-wrapper {
  position: relative;
  width: 100%;
  height: calc(100% - 30px);
  overflow: hidden;
}
.ws-player .player-wrapper.nocontrol {
  height: 100%;
}
.ws-player .wsplayer-item {
  position: absolute;
  width: calc(50% - 2px);
  height: calc(50% - 2px);
}
.ws-player .wsplayer-item-0 {
  top: 0;
  left: 0;
}
.ws-player .wsplayer-item-1 {
  top: 0;
  right: 0;
}
.ws-player .wsplayer-item-2 {
  bottom: 0;
  left: 0;
}
.ws-player .wsplayer-item-3 {
  bottom: 0;
  right: 0;
}
.ws-player .wsplayer-item.selected {
  border: 1px solid #009cff;
  transition: all cubic-bezier(0.19, 1, 0.22, 1) .3s;
}
.ws-player .wsplayer-item.unselected {
  border: 1px solid #161A1E;
}
.ws-player .player-wrapper.fullplayer .wsplayer-item.selected {
  width: calc(100% - 2px);
  height: calc(100% - 2px);
}
.ws-player .player-wrapper.fullplayer .wsplayer-item.unselected {
  display: none;
}
.ws-player .kind-stream-canvas {
  width: 100%;
  height: 100%;
}
.ws-player .full-content {
  width: 100%;
  height: 100%;
}
.ws-player .default-status {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 10;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
}
.ws-player .player-control {
  position: absolute;
  width: 100%;
  background: rgba(0,0,0, .8);
  visibility: hidden;
  user-select: none;
}
.ws-player .top-control-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 20;
  top: 0;
  height: 30px;
  color: #fff;
}
.ws-player .record-control-bar {
  z-index: 20;
  bottom: 0;
  height: 39px;
  visibility: visible;
  color: #fff;
}
.ws-player .record-control-right,
.ws-player .record-control-left {
  height: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ws-player .record-control-left {
  float: left;
}
.ws-player .record-control-right {
  float: right;
}
.ws-player .wsplayer-progress-bar {
  position: relative;
  height: 5px;
  margin: 0 10px;
  cursor: pointer;
}
.ws-player .progress-bar_background {
  position: absolute;
  background: rgba(231, 231, 231, 0.3);
  height: 100%;
  width: 100%;
}
.ws-player .progress-bar_light {
  position: absolute;
  height: 100%;
  background: #459DF5;
  z-index: 2;
}
.ws-player .progress-bar_hover_light {
  position: absolute;
  cursor: pointer;
  background: rgba(231, 231, 231, 0.7);
  height: 100%;
}
.ws-player .error {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 30;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  color: rgba(255,255,255, .8);
  font-size: 30px;
}
.ws-player .play-pause-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 30;
  width: 100%;
  height: 100%;
  visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, .3);
}
.ws-player .center-play-icon {
  width: 60px;
  height: 60px;
  background-image: url(./icon/play-n.png);
}
.ws-player .center-play-icon:hover {
  background-image: url(./icon/play-h.png);
}
.ws-player .opt-icons {
  display: flex;
}
.ws-player .opt-icon {
  width: 20px;
  height: 20px;
  margin: 0 10px;
}
.ws-player .audio-icon.off {
  background-image: url(./icon/AudioOffNormal.png);
}
.ws-player .audio-icon.off:hover {
  background-image: url(./icon/AudioOffHover.png);
}
.ws-player .audio-icon.on {
  background-image: url(./icon/AudioOnPress.png);
}
.ws-player .capture-icon {
  background-image: url(./icon/SnapNormal.png);
}
.ws-player .capture-icon:hover {
  background-image: url(./icon/SnapHover.png);
}
.ws-player .close-icon {
  background-image: url(./icon/CloseNormal.png);
}
.ws-player .close-icon:hover {
  background-image: url(./icon/CloseHover.png);
}
.ws-player .play-icon.play {
  background-image: url(./icon/pause-n.png);
}
.ws-player .play-icon.play:hover {
  background-image: url(./icon/pause-h.png);
}
.ws-player .play-icon.pause {
  background-image: url(./icon/start-n.png);
}
.ws-player .play-icon.pause:hover {
  background-image: url(./icon/start-h.png);
}

.ws-player .ws-control {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30px;
  width: 100%;
  background: #4C5054;
}
.ws-player .ws-ctrl-icon {
  width: 21px;
  height: 20px;
  margin: 0 10px;
  background-repeat: no-repeat;
  background-position: center;
}
.ws-player .one-screen-icon {
  background-image: url(./icon/tip_1-n.png);
}
.ws-player .one-screen-icon:hover {
  background-image: url(./icon/tip_1-h.png);
}
.ws-player .four-screen-icon {
  background-image: url(./icon/tip_4-n.png);
}
.ws-player .four-screen-icon.active {
  background-image: url(./icon/tip_4-p.png);
}
.ws-player .four-screen-icon:hover {
  background-image: url(./icon/tip_4-h.png);
}

.ws-player .flex {
  display: flex;
}

/* spinner 动画 */
@keyframes spinner-line-fade-more {
  0%, 100% {
    opacity: 0; /* minimum opacity */
  }
  1% {
    opacity: 1;
  }
}

@keyframes spinner-line-fade-quick {
  0%, 39%, 100% {
    opacity: 0.25; /* minimum opacity */
  }
  40% {
    opacity: 1;
  }
}

@keyframes spinner-line-fade-default {
  0%, 100% {
    opacity: 0.22; /* minimum opacity */
  }
  1% {
    opacity: 1;
  }
}

@keyframes spinner-line-shrink {
  0%, 25%, 100% {
    /* minimum scale and opacity */
    transform: scale(0.5);
    opacity: 0.25;
  }
  26% {
    transform: scale(1);
    opacity: 1;
  }
}