.bc-video-player {
  position: relative;
  .bc-video-player-overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 999;
  }
  .bc-video-player-overlay:hover {
    cursor: pointer;
  }
  .no-video-display {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 12px;
    color: #808da1;
    background: #f7f8fa;
    border: 1px solid #c4c6cf;
  }
}
.video-player-fullscreen-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .xgplayer-skin-default {
    .xgplayer-controls {
      visibility: hidden;
    }
    &.xgplayer-is-fullscreen {
      z-index: 1000;
    }
    .close-video-btn {
      position: fixed;
      right: 16px;
      top: 16px;
      width: 36px;
      height: 36px;
      background-color: transparent;
      border: transparent;
      border-radius: 500px;
      padding: 0 10px;
      z-index: 1002;
      font-family: "NextIcon";
      .next-btn-icon.next-icon-alone:before {
        font-size: 14.5px;
        color: #fff;
        width: 16px;
        height: 16px;
      }
      &:hover {
        background-color: rgba(0, 0, 0, 0.4);
      }
    }
    .video-player-operation-bar {
      height: 63px;
      line-height: 63px;
      width: 532px;
      padding: 0 0 0 12px;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 0 0 8px 8px;
      top: 0;
      left: 0;
      right: 0;
      margin: auto;
      position: absolute;
      z-index: 1001;
      pointer-events: none;
      .video-timeline {
        pointer-events: all;
        width: 330px;
        margin: 0 0 0 4px;
        display: inline-block;
        vertical-align: middle;
        .next-range-inner {
          vertical-align: middle;
          cursor: pointer;
          width: 330px;
          height: 4px;
          background-color: #e6e8eb;
          .next-range-slider {
            display: none;
          }
          .next-range-scale {
            height: 4px;
          }
        }
      }
      .next-balloon-tooltip {
        width: 42px;
        height: 33px;
        line-height: 33px;
      }
      .video-timeline-text {
        display: inline-block;
        overflow: hidden;
        height: 17px;
        line-height: 17px;
        width: 84px;
        margin-left: 8px;
        font-size: 12px;
        color: #ffffff;
        letter-spacing: 0;
        vertical-align: text-top;
      }
      .video-operate-btn {
        pointer-events: all;
        width: 36px;
        height: 36px;
        line-height: 36px;
        background-color: transparent;
        border: transparent;
        border-radius: 500px;
        padding: 0 10px;
        vertical-align: middle;
        & + .video-operate-btn {
          margin-left: 8px;
        }
        .next-btn-icon.next-icon-alone:before {
          font-size: 16px;
          color: #fff;
          width: 16px;
          height: 16px;
          vertical-align: baseline;
          font-family: "NextIcon";
        }
        &:hover {
          background-color: rgba(0, 0, 0, 0.4);
        }
      }
    }
  }
  .vs-overlay {
    background-color: rgba(0, 0, 0, 0.5);
    .next-balloon-tooltip {
      width: 42px;
      height: 33px;
      line-height: 33px;
      text-align: center;
    }
  }
}
:not(:root):fullscreen::backdrop {
  background-color: #fff;
}