@import url('./pantilt.css');
@import url('./datePicker.css');
@import url('./window.division.css');
:root {
    /** 主题名字 **/
    --themeName: default;

    /* ==================== 基础颜色变量 ==================== */
    /** 默认颜色 **/
    --ws-player-default-color: #15171A;
    /** 默认hover颜色 **/
    --ws-player-default-color-hover: #006fff;
    /** 图标默认颜色 **/
    --ws-player-default-icon-color: #15171a;
    /** 图标hover选中颜色 **/
    --ws-player-default-icon-color-selected: #006fff;

    /* 文字颜色 */
    --ws-player-text-primary: #fff;
    --ws-player-text-secondary: #909aa5;
    --ws-player-text-tertiary: #b2bac2;
    --ws-player-text-hover: #3d7ccb;
    --ws-player-text-active: #1c6bd6;

    /* 背景色 */
    --ws-player-bg-primary: #fff;
    --ws-player-bg-secondary: #f5f5f5;
    --ws-player-bg-tertiary: #e8e8e8;
    --ws-player-bg-mask: rgba(0, 0, 0, 0.3);
    --ws-player-bg-mask-light: rgba(0, 0, 0, 0.5);
    --ws-player-bg-overlay: rgba(0, 0, 0, 0.7);
    --ws-player-bg-modal: rgba(0, 0, 0, 0.15);

    /* 边框/分割线颜色 */
    --ws-player-border-light: #e5e7ea;
    --ws-player-border-divider: #f0f0f0;
    --ws-player-border-slider: #d9dce0;

    /* 状态颜色 */
    --ws-player-color-talking: #2CFF00;
    --ws-player-color-recording: #FF0000;
    --ws-player-color-progress-light: #459DF5;
    --ws-player-color-progress-bg: rgba(231, 231, 231, 0.3);
    --ws-player-color-progress-hover: rgba(231, 231, 231, 0.7);
    --ws-player-color-error: rgba(255, 255, 255, 0.8);

    /* 录像类型颜色 */
    --ws-player-record-timed-color: rgba(39, 208, 90, 0.4);
    --ws-player-record-alarm-color: rgba(233, 70, 58, 0.4);
    --ws-player-record-motion-color: rgba(244, 204, 28, 0.4);

    /* 按钮颜色 */
    --ws-player-btn-default-bg: #f5f5f5;
    --ws-player-btn-default-hover-bg: #e8e8e8;
    --ws-player-btn-primary-bg: #1890ff;
    --ws-player-btn-primary-hover-bg: #40a9ff;
    --ws-player-btn-close-color: #999;

    /* ==================== 组件变量 ==================== */
    /* 播放窗口背景色 */
    --ws-player-window-background: #1c2834;
    /* 播放选中边框颜色 */
    --ws-player-window-border-selected: #009cff;
    /* 播放未选中的颜色 */
    --ws-player-window-border: #161A1E;
    /* 顶部操作栏背景色 */
    --ws-top-control-background: rgba(0, 0, 0, .85);
    /* 顶部操作栏高度 */
    --ws-player-top-container-height: 40px;
    /* 顶部按钮图标控制 */
    --ws-player-top-refresh-replay-icon: url(./icon/refresh-replay.svg);
    --ws-player-top-draw-triangle-icon-off: url(./icon/draw-triangle_off.svg);
    --ws-player-top-draw-triangle-icon-on: url(./icon/draw-triangle_on.svg);
    --ws-player-top-talk-icon-off: url(./icon/talk-off.svg);
    --ws-player-top-talk-icon-on: url(./icon/talk-on.svg);
    --ws-player-top-record-icon: url(./icon/RecordNormal.svg);
    --ws-player-top-recording-icon: url(./icon/Recording.svg);
    --ws-player-top-close-audio-icon: url(./icon/voice-null.svg);
    --ws-player-top-open-audio-icon: url(./icon/voice-have_hover.svg);
    --ws-player-top-capture-icon: url(./icon/snapshot.svg);
    --ws-player-top-close-icon: url(./icon/close.svg);
    --ws-player-top-more-icon-hover: url(./icon/more.svg);
    /* 分辨率小时，顶部更多下拉按钮样式 */
    --ws-player-top-more-vertical-background: #000;
    --ws-player-top-more-vertical-color: #fff;
    /* 顶部主辅码流下拉背景色 */
    --ws-player-top-streamtype-list-background: #2a2b37;
    --ws-player-top-streamtype-list-li-hover-background: #3b414d;
    --ws-player-top-streamtype-list-li-active-background: #1c6bd6;
    --ws-player-top-streamtype-list-color: '#000';
    --top-down-svg: url(./icon/down.svg);

    /* 底部控制栏背景色 */
    --ws-bottom-control-background: #121a23;
    /* 底部控制栏高度 */
    --ws-real-bottom-control-height: 60px;
    --ws-record-bottom-control-height: 60px;
    /* 底部图标按钮大小 */
    --ws-bottom-icon-size-width: 21px;
    --ws-bottom-icon-size-height: 20px;
    --ws-bottom-icon-size-margin: 0 8px;
    /** 选择框边框颜色 */
    --ws-select-self-adaption-border-color: rgba(217, 220, 224, 1);
    /* 分屏按钮图标 */
    --ws-player-auto-screen-icon: url(./icon/screen_auto.svg);
    --ws-player-auto-screen-icon-corner: url(./icon/screen_auto_corner.svg);
    --ws-player-one-screen-icon: url(./icon/screen_1.svg);
    --ws-player-one-screen-icon-corner: url(./icon/screen_1_corner.svg);
    --ws-player-two-screen-icon: url(./icon/screen_2.svg);
    --ws-player-two-screen-icon-corner: url(./icon/screen_2_corner.svg);
    --ws-player-three-screen-icon: url(./icon/screen_3.svg);
    --ws-player-three-screen-icon-corner: url(./icon/screen_3_corner.svg);
    --ws-player-four-screen-icon: url(./icon/screen_4.svg);
    --ws-player-four-screen-icon-corner: url(./icon/screen_4_corner.svg);
    --ws-player-six-screen-icon: url(./icon/screen_6.svg);
    --ws-player-six-screen-icon-corner: url(./icon/screen_6_corner.svg);
    --ws-player-seven-screen-icon: url(./icon/screen_7.svg);
    --ws-player-seven-screen-icon-corner: url(./icon/screen_7_corner.svg);
    --ws-player-eight-screen-icon: url(./icon/screen_8.svg);
    --ws-player-eight-screen-icon-corner: url(./icon/screen_8_corner.svg);
    --ws-player-nine-screen-icon: url(./icon/screen_9.svg);
    --ws-player-nine-screen-icon-corner: url(./icon/screen_9_corner.svg);
    --ws-player-ten-screen-icon: url(./icon/screen_10.svg);
    --ws-player-ten-screen-icon-corner: url(./icon/screen_10_corner.svg);
    --ws-player-thirteen-screen-icon: url(./icon/screen_13.svg);
    --ws-player-thirteen-screen-icon-corner: url(./icon/screen_13_corner.svg);
    --ws-player-fourteen-screen-icon: url(./icon/screen_14.svg);
    --ws-player-fourteen-screen-icon-corner: url(./icon/screen_14_corner.svg);
    --ws-player-sixteen-screen-icon: url(./icon/screen_16.svg);
    --ws-player-sixteen-screen-icon-corner: url(./icon/screen_16_corner.svg);
    --ws-player-seventeen-screen-icon: url(./icon/screen_17.svg);
    --ws-player-seventeen-screen-icon-corner: url(./icon/screen_17_corner.svg);
    --ws-player-twenty-screen-icon: url(./icon/screen_20.svg);
    --ws-player-twenty-screen-icon-corner: url(./icon/screen_20_corner.svg);
    --ws-player-twenty-five-screen-icon: url(./icon/screen_25.svg);
    --ws-player-twenty-five-screen-icon-corner: url(./icon/screen_25_corner.svg);
    --ws-player-custom-screen-icon: url(./icon/screen_custom_division.svg);
    --ws-player-custom-screen-icon-corner: url(./icon/screen_custom_corner.svg);
    --ws-player-more-screen-icon: url(./icon/screen_more.svg);
    --ws-player-more-screen-icon-corner: url(./icon/screen_more_corner.svg);
    /* 拉伸铺满选择框背景 */
    --ws-player-player-adapter-list-background: #2a2b37;
    --ws-player-top-adapter-li-hover-background: #3b414d;
    --ws-player-player-adapter-li-active-background: #1a78ea;
    --ws-player-player-adapter-color: #b2bac2;
    /* 更多分割页面布局 */
    --ws-player-more-screen-icon: url(./icon/screen-more-icon.svg);
    --ws-player-more-screen-space-background: rgb(18, 47, 74);
    --ws-player-more-screen-space-border: 1px solid rgb(12, 117, 172);
    --ws-screen-num-list-text-size: 12px;
    --ws-screen-num-list-text-color: #b2bac2;
    --ws-screen-num-list-text-margin: 6px;
    --ws-screen-num-list-hover-background: unset;
    --ws-screen-num-list-active-background: unset;
    /* 锁定操作栏 */
    --ws-player-top-operate-unlock-icon: url(./icon/top-operate-lock.svg);
    --ws-player-top-operate-locking-icon: url(./icon/top-operate-locking.svg);
    /* 全部关闭按钮 */
    --ws-player-clossall-icon: url(./icon/close-all.svg);
    --ws-player-clossall-icon-hover: url(./icon/close-all-hover.svg);
    /* 全屏按钮 */
    --ws-player-fullscreen-icon: url(./icon/fullscreen.svg);
    --ws-player-fullscreen-icon-hover: url(./icon/fullscreen-hover.svg);
    /* 播放配置 */
    --ws-player-setting-icon: url(./icon/setting.svg);
    --ws-player-setting-icon-hover: url(./icon/setting-hover.svg);
    /* 分割线颜色 */
    --ws-bottom-spread-color: rgba(229, 231, 234, 1);
    /* 录像回放所需按钮 */
    --ws-player-record-filter-icon: url(./icon/record_filter.svg); /* 录像筛选 */
    --ws-player-record-play-icon: url(./icon/record_play.svg); /* 开始播放按钮图标 */
    --ws-player-record-pause-icon: url(./icon/record_pause.svg); /* 暂停播放按钮图标 */
    --ws-player-record-play-rewind-icon: url(./icon/play-rewind.svg); /* 倒放按钮图标 */
    --ws-player-record-play-single-rewind-icon: url(./icon/single-rewind.svg); /* 倒放单帧按钮图标 */
    --ws-player-record-play-single-play-icon: url(./icon/single-play.svg); /* 正放单帧按钮图标 */
    --ws-player-record-play-play-icon: url(./icon/play-play.svg); /* 正放按钮图标 */
    --ws-player-record-speed-left-icon: url(./icon/speed_left.svg); /* 降低倍速按钮图标 */
    --ws-player-record-speed-right-icon: url(./icon/speed_right.svg); /* 增高倍速按钮图标 */
    --ws-player-record-simultaneously-icon: url(./icon/recordSimultaneously.svg); /* 同步播放 */
    --ws-player-record-cancel-simultaneously-icon: url(./icon/cancelRecordSimultaneously.svg); /* 同步播放 */
    --ws-player-record-speed-text-color: #b2bac2; /* 倍速文字颜色 */
    /* 进度条背景色 */
    --ws-player-record-progress-background-color: linear-gradient(0deg, #445160 0%, #1c2834 100%);
    --ws-player-record-progress-height: 60px;
    --ws-player-record-progress-operate-height: 0px;
    --ws-player-record-progress-operate-bg: #fff;
    --ws-player-record-progress-operate-border: #e5e7ea;
    --down-svg: url(./icon/down.svg);
    /* 自定义布局数字样式 */
    --ws-player-custom-screen-number-bg: #000;
    --ws-player-custom-screen-number-color: #fff;
    --ws-player-custom-screen-number-hover-bg: #006fff;
}

.ws-player {
  position: relative;
  background-color: var(--ws-player-window-background);
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 100%;
}
.ws-player .player-wrapper {
  width: 100%;
  flex: 1;
  overflow: hidden;
  /* 位置通过定位实现 */
  position: relative;
  user-select: none;
}
.ws-player .player-wrapper.nocontrol {
  height: 100%;
}
.ws-player .wsplayer-item {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ws-player-window-background);
  /*overflow: hidden;*/
}
.fullplayer .wsplayer-item{
  position: absolute;
}
.ws-player .wsplayer-item.selected {
  border: 1px solid var(--ws-player-window-border-selected);
  transition: all cubic-bezier(0.19, 1, 0.22, 1) .3s;
}
.ws-player .wsplayer-item.unselected {
  border: 1px solid var(--ws-player-window-border);
  transition: all cubic-bezier(0.19, 1, 0.22, 1) .3s;
}
.ws-player.fullplayer .player-wrapper .wsplayer-item.selected {
  width: calc(100% - 2px);
  height: calc(100% - 2px);
}
.ws-player.fullplayer .player-wrapper .wsplayer-item.unselected {
  display: none;
}
.ws-player .kind-stream-canvas {
  width: 100%;
  height: 100%;
  position: absolute;
}
.ws-player .ws-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;
  transition: 0.3s;
}
.ws-player .player-control {
  position: absolute;
  width: 100%;
  background: var(--ws-top-control-background);
  visibility: hidden;
  user-select: none;
  overflow: visible;
}
.ws-player .top-control-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 35;
  top: 0;
  height: var(--ws-player-top-container-height);
  color: var(--ws-player-text-primary);
  overflow: visible;
  /* 启用弹性收缩，允许子元素在空间不足时缩小 */
  flex-wrap: nowrap;
}
.ws-player .top-control-bar.locking {
  visibility: visible !important;
}

/* 全屏状态下顶部操作栏智能隐藏 */
.ws-player .top-control-bar {
  transition: transform 0.35s ease, opacity 0.35s ease, visibility 0.35s ease;
}
.ws-player .top-control-bar.topbar-auto-hidden {
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.ws-player .record-control-bar {
  display: none;
  z-index: 20;
  bottom: 0;
  height: 39px;
  visibility: visible;
  color: var(--ws-player-text-primary);
}
.ws-player .stream-info {
  font-size: 12px;
  height: 100%;
  letter-spacing: 0;
  line-height: 40px;
  color: var(--ws-player-text-primary);
  white-space: nowrap;
}
.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: var(--ws-player-color-progress-bg);
  height: 100%;
  width: 100%;
}
.ws-player .progress-bar_light {
  position: absolute;
  height: 100%;
  background: var(--ws-player-color-progress-light);
  z-index: 2;
}
.ws-player .progress-bar_hover_light {
  position: absolute;
  cursor: pointer;
  background: var(--ws-player-color-progress-hover);
  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;
  user-select: none;
  color: var(--ws-player-color-error);
  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: var(--ws-player-bg-mask);
  pointer-events: none; /* 让鼠标事件穿透，不影响底层元素的鼠标事件 */
}
.ws-player .center-play-icon {
  width: 60px;
  height: 60px;
  background-image: url(./icon/play-n.png);
  pointer-events: auto; /* 恢复播放按钮的点击事件 */
  cursor: pointer;
}
.ws-player .center-play-icon:hover {
  background-image: url(./icon/play-h.png);
}
.ws-player .opt-icons {
  display: flex;
  margin-right: 10px;
  justify-content: flex-end;
  flex: 1;
  position: relative;
  flex-shrink: 0;
}
.ws-player .opt-icon {
  width: 20px;
  height: 20px;
  margin: 0 6px;
  cursor: pointer;
  flex-shrink: 0;
  min-width: 20px;
}

.ws-player .ws-talking-recording {
  position: absolute;
  left:  12px;
  top: calc(var(--ws-player-top-container-height) + 12px);
  z-index: 10;
  display: flex;
  align-items: center;
}

.ws-player .ws-talking {
  display: none;
  align-items: center;
  padding: 4px 12px;
  z-index: 10;
  line-height: 18px;
  color: var(--ws-player-text-primary);
  font-size: 14px;
  user-select: none;
  border-radius: 50px;
  background: var(--ws-player-bg-overlay);
}

.ws-player .ws-talking::before {
    margin-right: 8px;
    display: inline-block;
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ws-player-color-talking);
}

.ws-player .ws-local-recording {
  display: none;
  margin-left: 8px;
  align-items: center;
  padding: 4px 12px;
  line-height: 18px;
  color: var(--ws-player-text-primary);
  font-size: 14px;
  user-select: none;
  border-radius: 50px;
  /* background: rgba(0, 176, 210, 0.9); */
  background: var(--ws-player-bg-overlay);
}

.ws-player .ws-local-recording::before{
  margin-right: 8px;
  display: inline-block;
  content:'';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ws-player-color-recording);
}

.ws-player .top-down-icon {
  width: 20px;
  height: 20px;
  mask-image: var(--top-down-svg);
  -webkit-mask-image: var(--top-down-svg);
  background: var(--ws-player-text-primary);
}

@keyframes soundPulse {
    0%   { background-image: url(./icon/talk-small-voice.png); }
    25%  { background-image: url(./icon/talk-middle-voice.png); }
    50%  { background-image: url(./icon/talk-large-voice.png); }
    75%  { background-image: url(./icon/talk-middle-voice.png); }
    100% { background-image: url(./icon/talk-small-voice.png); }
}
.ws-player .custom-talk-wrapper {
    width: 100%;
    height: 100%;
    cursor: pointer;
    position: absolute;
    z-index: 9;
}
.ws-player .custom-talk-wrapper .talk-audio-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--ws-player-text-primary);
}
.ws-player .custom-talk {
    width: 128px;
    height: 128px;
}
.ws-player .custom-talk.off {
  background-image: url(./icon/talk-nll-voice.png);
}
.ws-player .custom-talk.on {
  background-image: url(./icon/talk-large-voice.png);
  animation: soundPulse 3s ease-in-out infinite;
}

.ws-player .hidden-deep{
  display: none !important;
}

/*.ws-player .audio-icon.on:hover {*/
/*  background-image: url(./icon/voice-have_hover.svg);*/
/*}*/

.ws-player .draw-triangle-icon.off {
  mask-image: var(--ws-player-top-draw-triangle-icon-off);
  -webkit-mask-image: var(--ws-player-top-draw-triangle-icon-off);
  background-color: var(--ws-player-bg-primary);
}
.ws-player .draw-triangle-icon.on {
  mask-image: var(--ws-player-top-draw-triangle-icon-on);
  -webkit-mask-image: var(--ws-player-top-draw-triangle-icon-on);
  background-color: var(--ws-player-default-icon-color-selected);
}
.ws-player .talk-icon.off {
  mask-image: var(--ws-player-top-talk-icon-off);
  -webkit-mask-image: var(--ws-player-top-talk-icon-off);
  background-color: var(--ws-player-bg-primary);
}
.ws-player .talk-icon.on {
  background: var(--ws-player-top-talk-icon-on);
}
.ws-player .audio-icon.off {
  mask-image: var(--ws-player-top-close-audio-icon);
  -webkit-mask-image: var(--ws-player-top-close-audio-icon);
  background-color: var(--ws-player-bg-primary);
}
.ws-player .audio-icon.off:hover {
  background-color: var(--ws-player-default-icon-color-selected);
}
.ws-player .audio-icon.on {
  mask-image: var(--ws-player-top-open-audio-icon);
  -webkit-mask-image: var(--ws-player-top-open-audio-icon);
  background-color: var(--ws-player-default-icon-color-selected);
}
.ws-player .refresh-replay-icon {
  mask-image: var(--ws-player-top-refresh-replay-icon);
  -webkit-mask-image: var(--ws-player-top-refresh-replay-icon);
  background-color: var(--ws-player-bg-primary);
}
.ws-player .capture-icon {
  mask-image: var(--ws-player-top-capture-icon);
  -webkit-mask-image: var(--ws-player-top-capture-icon);
  background-color: var(--ws-player-bg-primary);
}
.ws-player .capture-icon:hover {
  background-color: var(--ws-player-default-icon-color-selected);
}
.ws-player .close-icon {
  mask-image: var(--ws-player-top-close-icon);
  -webkit-mask-image: var(--ws-player-top-close-icon);
  background-color: var(--ws-player-bg-primary);
}
.ws-player .close-icon:hover {
  background-color: var(--ws-player-default-icon-color-selected);
}
.ws-player .record-icon {
  mask-image: var(--ws-player-top-record-icon);
  -webkit-mask-image: var(--ws-player-top-record-icon);
  background-color: var(--ws-player-bg-primary);
}
.ws-player .more-icon {
  mask-image: var(--ws-player-top-more-icon-hover);
  -webkit-mask-image: var(--ws-player-top-more-icon-hover);
  background-color: var(--ws-player-bg-primary);
}
.ws-player .ws-more{
  position: relative;
}
.ws-player .capture-icon.more {
  mask-image: var(--ws-player-top-capture-icon);
  -webkit-mask-image: var(--ws-player-top-capture-icon);
  background-color: var(--ws-player-default-icon-color);
}
.ws-player .record-icon.more {
  mask-image: var(--ws-player-top-record-icon);
  -webkit-mask-image: var(--ws-player-top-record-icon);
  background-color: var(--ws-player-default-icon-color);
}
.ws-player .draw-triangle-icon.off.more {
  mask-image: var(--ws-player-top-draw-triangle-icon-off);
  -webkit-mask-image: var(--ws-player-top-draw-triangle-icon-off);
  background-color: var(--ws-player-default-icon-color);
}
.ws-player .talk-icon.off.more {
  mask-image: var(--ws-player-top-talk-icon-off);
  -webkit-mask-image: var(--ws-player-top-talk-icon-off);
  background-color: var(--ws-player-default-icon-color);
}
.ws-player .audio-icon.off.more {
  mask-image: var(--ws-player-top-close-audio-icon);
  -webkit-mask-image: var(--ws-player-top-close-audio-icon);
  background-color: var(--ws-player-default-icon-color);
}
.ws-player .refresh-replay-icon.more {
  mask-image: var(--ws-player-top-refresh-replay-icon);
  -webkit-mask-image: var(--ws-player-top-refresh-replay-icon);
  background-color: var(--ws-player-default-icon-color);
}
.ws-player .close-icon.more {
  mask-image: var(--ws-player-top-close-icon);
  -webkit-mask-image: var(--ws-player-top-close-icon);
  background-color: var(--ws-player-bg-primary);
}

.ws-player .ws-record.recording .record-icon,
.ws-player .record-icon.recording,
.ws-player .record-icon.recording:hover {
  mask-image: unset!important;
  -webkit-mask-image: unset!important;
  background: var(--ws-player-top-recording-icon)!important;
}

.ws-player .ws-audio:hover .audio-icon.on,
.ws-player .audio-icon.on:hover {
  background-image: var(--ws-player-top-open-audio-icon);
}

.ws-player .ws-refresh-replay:hover .refresh-replay-icon,
.ws-player .refresh-replay-icon:hover,
.ws-player .ws-draw-triangle:hover .draw-triangle-icon.off,
.ws-player .draw-triangle-icon.off:hover,
.ws-player .ws-draw-triangle:hover .draw-triangle-icon.on,
.ws-player .draw-triangle-icon.on:hover,
.ws-player .ws-talk:hover .talk-icon.off,
.ws-player .talk-icon.off:hover,
.ws-player .ws-record:hover .record-icon,
.ws-player .record-icon:hover,
.ws-player .ws-audio:hover .audio-icon.off,
.ws-player .audio-icon.off:hover,
.ws-player .ws-capture:hover .capture-icon,
.ws-player .capture-icon:hover {
  background: var(--ws-player-default-icon-color-selected);
}

.ws-player .ws-refresh-replay:hover .ws-icon-tip,
.ws-player .ws-draw-triangle:hover .ws-icon-tip,
.ws-player .ws-talk:hover .ws-icon-tip,
.ws-player .ws-record:hover .ws-icon-tip,
.ws-player .ws-audio:hover .ws-icon-tip,
.ws-player .ws-capture:hover .ws-icon-tip {
  color: var(--ws-player-text-hover);
}

.ws-player .opt-icons-vertical{
  display: none;
  flex-direction: column;
  position: absolute;
  right: 0;
  background: var(--ws-player-top-more-vertical-background);
  color: var(--ws-player-top-more-vertical-color);
  top: 36px;
  border-radius: 4px;
  visibility: visible !important; /* 兼容存在老 wsplayer 情况下参数适配 */
  opacity: 1; /* 兼容存在老 wsplayer 情况下参数适配 */
}

.ws-player .opt-icons-vertical.show{
  display: flex;
}

.ws-player .opt-icons-vertical > div{
  width: 120px;
  display: flex;
  height: 32px;
  align-items: center;
  justify-content: flex-start;
}

.ws-player .opt-icons-vertical > div:lang(foreign){
  width: 130px;
  justify-content: flex-start;
}

.ws-player .opt-icons-vertical .ws-icon-tip{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-player .ws-control {
  display: flex;
  justify-content: space-between;
  flex-shrink: 0;
  align-items: center;
  width: 100%;
  background: var(--ws-bottom-control-background);
  overflow-x: clip;
}
.ws-control.ws-real-player {
  height: var(--ws-real-bottom-control-height);
}
.ws-control.ws-record-player {
  height: var(--ws-record-bottom-control-height);
}
.ws-control .ws-select-self-adaption{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 32px;
  z-index: 105;
  border-radius: 4px;
  border: solid 1px var(--ws-select-self-adaption-border-color);
  cursor: pointer;
}

.ws-control .ws-select-self-adaption .ws-select-show{
  display: flex;
  align-items: center;
  color: var(--ws-player-player-adapter-color);
  user-select: none;
}

.ws-control .ws-select-self-adaption span {
  width: 20px;
  height: 20px;
  mask-image: var(--down-svg);
  -webkit-mask-image: var(--down-svg);
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--ws-player-default-icon-color);
}

.ws-control .ws-select-self-adaption .ws-self-adaption-type{
  position: absolute;
}
.ws-control .ws-select-self-adaption .ws-select-ul{
  padding: 0;
  width: 100px;
  background: var(--ws-player-player-adapter-list-background);
  position: absolute;
  bottom: 20px;
  margin-bottom: 0;
  left: -50px;
  z-index: 20;
  border-radius: 4px;
  overflow: hidden;
}
.ws-control .ws-select-self-adaption .ws-select-ul .ws-select-type-item{
  height: 32px;
  line-height: 32px;
  text-align: center;
  cursor: pointer;
  margin-top: 4px;
  font-size: 14px;
  list-style: none;
  color: var(--ws-player-player-adapter-color);
  width: 100%;
  padding: 0 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ws-control .ws-select-self-adaption .ws-select-ul .ws-select-type-item.selected{
  background: var(--ws-player-player-adapter-li-active-background);
}
.ws-control .ws-select-self-adaption .ws-select-ul .ws-select-type-item:hover{
  background-color: var(--ws-player-player-adapter-li-active-background);
}

.ws-control .ws-select-self-adaption .ws-select-ul .ws-select-type-item.active{
  background-color: var(--ws-player-player-adapter-li-active-background);
}

.ws-player .ws-record-control{
  position: relative;
  display: flex;
  flex-direction: column;
  height: calc(var(--ws-player-record-progress-height) + var(--ws-player-record-progress-operate-height));
  cursor: pointer;
  background-color: var(--ws-player-record-progress-background-color);
  overflow: hidden;
}
.ws-player .ws-record-control .wsplayer-record-progress-operate {
  position: relative;
  width: 100%;
  height: var(--ws-player-record-progress-operate-height);
  background: var(--ws-player-record-progress-operate-bg);
  border-bottom: 1px solid var(--ws-player-record-progress-operate-border);
  display: flex;
  justify-content: center;
}

.ws-player .ws-record-control .wsplayer-record-progress-operate .scale-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 120px;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;

}

.ws-player .wsplayer-record-progress-operate .scale-container .zoom-out {
  width: 20px;
  height: 20px;
  -webkit-mask-image: url(./icon/ptz-icon1.svg);
  mask-image: url(./icon/ptz-icon1.svg);
  background-color: var(--ws-player-default-icon-color);
}

.ws-player .wsplayer-record-progress-operate .scale-container .zoom-out:hover,
.ws-player .wsplayer-record-progress-operate .scale-container .zoom-in:hover {
  background-color: var(--ws-player-default-icon-color-selected);
}

.ws-player .wsplayer-record-progress-operate .scale-container .scale-slider {
  position: relative;
  width: 53px;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  background-color: var(--ws-player-border-slider);
}

.scale-slider-active {
  position: absolute;
  left: 0;
  right: 0;
  width: 0;
  height: 100%;
  background-color: var(--ws-player-default-color-hover);
}

.ws-player .wsplayer-record-progress-operate .scale-container .zoom-in {
  width: 20px;
  height: 20px;
  -webkit-mask-image: url(./icon/ptz-icon2.svg);
  mask-image: url(./icon/ptz-icon2.svg);
  background-color: var(--ws-player-default-icon-color);
}



.ws-player .ws-record-control .wsplayer-record-progress-operate .record-progress-time {
  margin-top: 1px;
  width: 146px;
  height: 22px;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--ws-player-default-color-hover);
  color: var(--ws-player-text-primary);
  border-radius: 4px;
}
.ws-player .ws-timeline{
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  z-index: 10;
}
.ws-player .ws-timeline-group{
  width: 100%;
  height: 8px;
  display: flex;
  justify-content: space-between;
  word-wrap: initial;
}
.ws-player .ws-time-space{
  height: 4px;
  border-left: 1px solid var(--ws-player-text-secondary);
}
.ws-player .ws-time-space-long{
  height: 8px;
}
.ws-player .ws-time-point{
  color: var(--ws-player-text-secondary);
  width: 0;
  position: relative;
  left: -20px;
  top: 0;
}
.ws-player .ws-time-point:first-child{
  left: 0;
}
.ws-player .ws-time-point:last-child{
  left: -40px;
}
.ws-player #ws-cursor{
  height: 40px;
  border-left: 1px solid var(--ws-player-text-primary);
  position: absolute;
  top: 0;
  z-index: 20;
}
.ws-player .ws-cursor-time{
  position: relative;
}
.ws-player .ws-cursor-time span{
  position: absolute;
  top: 40px;
  left: -32px;
  color: var(--ws-player-text-secondary);
}
.ws-player #ws-record-time-box{
  height: 22px;
  border-left: 1px solid var(--ws-player-text-primary);
  position: absolute;
  top: 0;
  z-index: 20;
}
.ws-player .ws-record-time{
  position: relative;
  color: var(--ws-player-text-primary);
}
.ws-player .ws-record-time span{
  position: absolute;
  top: 22px;
  left: -32px;
}
.ws-player .ws-record-area{
  flex: 1;
  height: var(--ws-player-record-progress-height);
  width: 100%;
}
.ws-player .ws-ctrl-icon {
  width: var(--ws-bottom-icon-size-width);
  height: var(--ws-bottom-icon-size-height);
  margin: var(--ws-bottom-icon-size-margin);
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}
.ws-player .ws-ctrl-btn-spread{
  border-left: 1px solid var(--ws-bottom-spread-color);
  margin: 0 8px;
  height: 20px;
}
.ws-player .full-screen-icon {
    -webkit-mask-image: var(--ws-player-fullscreen-icon); /* Chrome 需要前缀 */
    mask-image: var(--ws-player-fullscreen-icon);

}
.ws-player .full-screen-icon:hover {
  background-image: var(--ws-player-fullscreen-icon-hover);
}
.ws-player .top-operate-unlock {
    -webkit-mask-image: var(--ws-player-top-operate-unlock-icon); /* Chrome 需要前缀 */
    mask-image: var(--ws-player-top-operate-unlock-icon);
}

.ws-player .top-operate-locking {
    -webkit-mask-image: var(--ws-player-top-operate-locking-icon); /* Chrome 需要前缀 */
    mask-image: var(--ws-player-top-operate-locking-icon);
}

.ws-player .close-all-video {
    -webkit-mask-image: var(--ws-player-clossall-icon); /* Chrome 需要前缀 */
    mask-image: var(--ws-player-clossall-icon);
}
.ws-player .setting-icon {
  -webkit-mask-image: var(--ws-player-setting-icon); /* Chrome 需要前缀 */
    mask-image: var(--ws-player-setting-icon);
}


/* 底部按钮共同样式 */
.ws-player .ws-ctrl-icon,
.ws-player .ws-screen-num-list-bg {
  background-color: var(--ws-player-default-color);
  -webkit-mask-size: contain;
  mask-size: contain;
}
.ws-player .ws-ctrl-icon.active,
.ws-player .ws-screen-num-list.active .ws-screen-num-list-bg {
  background-color: var(--ws-player-default-icon-color-selected); /* 目标颜色 */
}

/* 更多按钮 hover-active 状态（弹窗打开时保持hover样式） */
.ws-player .ws-ctrl-icon-wrapper.hover-active {
  background: var(--ws-screen-num-list-hover-background);
}

/* 底部按钮包裹层 - 悬浮时显示背景 */
.ws-player .ws-ctrl-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  cursor: pointer;
}
.ws-player .ws-ctrl-icon-wrapper:hover {
  background: var(--ws-screen-num-list-hover-background);
}
/* 选中状态背景色 */
.ws-player .ws-ctrl-icon-wrapper:has(.ws-ctrl-icon.active),
.ws-player .ws-ctrl-icon-wrapper:has(.ws-ctrl-record-icon.active) {
  background: var(--ws-screen-num-list-active-background);
}
.ws-player .ws-ctrl-icon-wrapper .ws-ctrl-icon,
.ws-player .ws-ctrl-icon-wrapper .ws-ctrl-record-icon {
  margin: 0;
}

.wsplayer .ws-ctrl-speed-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  cursor: pointer;
}

/* 自动分屏 */
.ws-player .auto-screen-icon {
  -webkit-mask-image: var(--ws-player-auto-screen-icon); /* Chrome 需要前缀 */
  mask-image: var(--ws-player-auto-screen-icon);
}

/* 一分屏 */
.one-screen-icon {
  -webkit-mask-image: var(--ws-player-one-screen-icon); /* Chrome 需要前缀 */
  mask-image: var(--ws-player-one-screen-icon);
}
/* 二分屏 */
.two-screen-icon {
  -webkit-mask-image: var(--ws-player-two-screen-icon); /* Chrome 需要前缀 */
  mask-image: var(--ws-player-two-screen-icon);
}
/* 三分屏 */
.three-screen-icon {
  -webkit-mask-image: var(--ws-player-three-screen-icon); /* Chrome 需要前缀 */
  mask-image: var(--ws-player-three-screen-icon);
}

/* 四分屏 */
.four-screen-icon {
  -webkit-mask-image: var(--ws-player-four-screen-icon); /* Chrome 需要前缀 */
  mask-image: var(--ws-player-four-screen-icon);
}
/* 六分屏 */
.six-screen-icon {
  -webkit-mask-image: var(--ws-player-six-screen-icon); /* Chrome 需要前缀 */
  mask-image: var(--ws-player-six-screen-icon);
}

/* 七分屏 */
.seven-screen-icon {
  -webkit-mask-image: var(--ws-player-seven-screen-icon); /* Chrome 需要前缀 */
  mask-image: var(--ws-player-seven-screen-icon);
}

/* 八分屏 */
.eight-screen-icon {
  -webkit-mask-image: var(--ws-player-eight-screen-icon); /* Chrome 需要前缀 */
  mask-image: var(--ws-player-eight-screen-icon);
}

/* 九分屏 */
.nine-screen-icon {
  /* background-image: var(--ws-player-nine-screen-icon); */
  -webkit-mask-image: var(--ws-player-nine-screen-icon); /* Chrome 需要前缀 */
  mask-image: var(--ws-player-nine-screen-icon);
}

/* 十分屏 */
.ten-screen-icon {
  -webkit-mask-image: var(--ws-player-ten-screen-icon); /* Chrome 需要前缀 */
  mask-image: var(--ws-player-ten-screen-icon);
}
/* 十三分屏 */
.thirteen-screen-icon {
  -webkit-mask-image: var(--ws-player-thirteen-screen-icon); /* Chrome 需要前缀 */
  mask-image: var(--ws-player-thirteen-screen-icon);
}
/* 十四分屏 */
.fourteen-screen-icon {
  -webkit-mask-image: var(--ws-player-fourteen-screen-icon); /* Chrome 需要前缀 */
  mask-image: var(--ws-player-fourteen-screen-icon);
}

/* 十六分屏 */
.sixteen-screen-icon {
  -webkit-mask-image: var(--ws-player-sixteen-screen-icon); /* Chrome 需要前缀 */
  mask-image: var(--ws-player-sixteen-screen-icon);
}
/* 十七分屏 */
.seventeen-screen-icon {
  -webkit-mask-image: var(--ws-player-seventeen-screen-icon); /* Chrome 需要前缀 */
  mask-image: var(--ws-player-seventeen-screen-icon);
}

/* 二十分屏 */
.twenty-screen-icon {
  -webkit-mask-image: var(--ws-player-twenty-screen-icon); /* Chrome 需要前缀 */
  mask-image: var(--ws-player-twenty-screen-icon);
}

/* 二十五分屏 */
.twenty-five-screen-icon {
  -webkit-mask-image: var(--ws-player-twenty-five-screen-icon); /* Chrome 需要前缀 */
  mask-image: var(--ws-player-twenty-five-screen-icon);
}

/* 自定义分屏 */
.custom-screen-icon {
  -webkit-mask-image: var(--ws-player-custom-screen-icon); /* Chrome 需要前缀 */
  mask-image: var(--ws-player-custom-screen-icon);
}

/* 更多分屏 */
.more-screen-icon {
  -webkit-mask-image: var(--ws-player-more-screen-icon); /* Chrome 需要前缀 */
  mask-image: var(--ws-player-more-screen-icon);
}

.custom-screen-icon-recent {
  -webkit-mask-image: var(--ws-player-custom-screen-icon); /* Chrome 需要前缀 */
  mask-image: var(--ws-player-custom-screen-icon);
}

.ws-player .screen-more-icon {
    background-size: contain;
    background-repeat: no-repeat;
}

.ws-player .auto-screen-icon-corner {
    -webkit-mask-image: var(--ws-player-auto-screen-icon-corner); /* Chrome 需要前缀 */
    mask-image: var(--ws-player-auto-screen-icon-corner);
}
.ws-player .one-screen-icon-corner {
    -webkit-mask-image: var(--ws-player-one-screen-icon-corner); /* Chrome 需要前缀 */
    mask-image: var(--ws-player-one-screen-icon-corner);
}

.ws-player .two-screen-icon-corner {
    -webkit-mask-image: var(--ws-player-two-screen-icon-corner); /* Chrome 需要前缀 */
    mask-image: var(--ws-player-two-screen-icon-corner);
}

.ws-player .three-screen-icon-corner {
    -webkit-mask-image: var(--ws-player-three-screen-icon-corner); /* Chrome 需要前缀 */
    mask-image: var(--ws-player-three-screen-icon-corner);
}

.ws-player .four-screen-icon-corner {
    -webkit-mask-image: var(--ws-player-four-screen-icon-corner); /* Chrome 需要前缀 */
    mask-image: var(--ws-player-four-screen-icon-corner);
}

.ws-player .six-screen-icon-corner {
  -webkit-mask-image: var(--ws-player-six-screen-icon-corner); /* Chrome 需要前缀 */
    mask-image: var(--ws-player-six-screen-icon-corner);
}

.ws-player .seven-screen-icon-corner {
  -webkit-mask-image: var(--ws-player-seven-screen-icon-corner); /* Chrome 需要前缀 */
    mask-image: var(--ws-player-seven-screen-icon-corner);
}

.ws-player .eight-screen-icon-corner {
    -webkit-mask-image: var(--ws-player-eight-screen-icon-corner); /* Chrome 需要前缀 */
    mask-image: var(--ws-player-eight-screen-icon-corner);
}

.ws-player .nine-screen-icon-corner {
    -webkit-mask-image: var(--ws-player-nine-screen-icon-corner); /* Chrome 需要前缀 */
    mask-image: var(--ws-player-nine-screen-icon-corner);
}
.ws-player .ten-screen-icon-corner {
    -webkit-mask-image: var(--ws-player-ten-screen-icon-corner); /* Chrome 需要前缀 */
    mask-image: var(--ws-player-ten-screen-icon-corner);
}
.ws-player .thirteen-screen-icon-corner {
    -webkit-mask-image: var(--ws-player-thirteen-screen-icon-corner); /* Chrome 需要前缀 */
    mask-image: var(--ws-player-thirteen-screen-icon-corner);
}
.ws-player .fourteen-screen-icon-corner {
    -webkit-mask-image: var(--ws-player-fourteen-screen-icon-corner); /* Chrome 需要前缀 */
    mask-image: var(--ws-player-fourteen-screen-icon-corner);
}

.ws-player .sixteen-screen-icon-corner {
    -webkit-mask-image: var(--ws-player-sixteen-screen-icon-corner); /* Chrome 需要前缀 */
    mask-image: var(--ws-player-sixteen-screen-icon-corner);
}
.ws-player .seventeen-screen-icon-corner {
    -webkit-mask-image: var(--ws-player-seventeen-screen-icon-corner); /* Chrome 需要前缀 */
    mask-image: var(--ws-player-seventeen-screen-icon-corner);
}
.ws-player .twenty-screen-icon-corner {
    -webkit-mask-image: var(--ws-player-twenty-screen-icon-corner); /* Chrome 需要前缀 */
    mask-image: var(--ws-player-twenty-screen-icon-corner);
}

.ws-player .twenty-five-screen-icon-corner {
  -webkit-mask-image: var(--ws-player-twenty-five-screen-icon-corner); /* Chrome 需要前缀 */
  mask-image: var(--ws-player-twenty-five-screen-icon-corner);
}

.ws-player .custom-screen-icon-corner {
  -webkit-mask-image: var(--ws-player-custom-screen-icon-corner); /* Chrome 需要前缀 */
  mask-image: var(--ws-player-custom-screen-icon-corner);
}

.ws-player .more-screen-icon-corner {
  -webkit-mask-image: var(--ws-player-more-screen-icon-corner); /* Chrome 需要前缀 */
  mask-image: var(--ws-player-more-screen-icon-corner);
}



.ws-player .ws-screen-num-list-container {
    position: absolute;
    padding: 16px 10px 8px 10px;
    border-radius: 2px;
    z-index: 100;
    bottom: 60px;
    right: 30px;
    cursor: default;
    background-color: var(--ws-player-more-screen-space-background);
    border: var(--ws-player-more-screen-space-border);
}
.ws-player .ws-screen-num-list-container:lang(foreign) {
    width: 230px;
}

.ws-player .ws-screen-num-list-container .ws-screen-num-list-cont {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* 最近使用的自定义布局容器 - 不换行，从左到右排布 */
.ws-player .ws-screen-num-list-container .ws-recent-custom-list {
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.ws-player .ws-screen-num-list-container .ws-screen-list-split-line {
    width: 100%;
    height: 0;
    border: 1px solid var(--ws-player-border-light);
    margin: 12px 0 8px 0;
}

.ws-player .ws-screen-num-list-cont-nowrap {
    display: flex;
    flex-wrap: nowrap;
}
.ws-player .ws-screen-num-list-container .ws-screen-num-list-cont .ws-screen-num-list {
    margin-top: 10px;
    width: 48px;
    height: 48px;
    margin: 0 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.ws-player .ws-screen-num-list-container .ws-recent-custom-list .ws-screen-num-list {
    margin-top: 10px;
    width: 32px;
    height: 32px;
    margin: 0 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.ws-player .ws-screen-num-list-container .ws-screen-num-list-cont .ws-screen-num-list:hover {
  background: var(--ws-screen-num-list-hover-background);
}
.ws-player .ws-screen-num-list-container .ws-screen-num-list-cont .ws-screen-num-list.active {
   background: var(--ws-screen-num-list-active-background);
}
.ws-player .ws-screen-num-list-container .ws-screen-num-list-cont .ws-screen-num-list:lang(foreign) {
    width: 65px;
}

.ws-player .ws-screen-num-list-bg {
    width: 20px;
    height: 20px;
    margin: 0 auto;
}
.ws-player .ws-screen-num-list-text {
    font-size: var(--ws-screen-num-list-text-size);
    text-align: center;
    color: var(--ws-screen-num-list-text-color);
    margin: var(--ws-screen-num-list-text-margin);;
}

.ws-player .ws-screen-num-list.ws-select-screen-num-active .ws-screen-num-list-text,
.ws-player .ws-screen-num-list-auto.active .screen-auto-text,
.ws-player .ws-screen-num-list-3.active .screen-3-text,
.ws-player .ws-screen-num-list-6.active .screen-6-text,
.ws-player .ws-screen-num-list-8.active .screen-8-text,
.ws-player .ws-screen-num-list-16.active .screen-16-text,
.ws-player .ws-screen-num-list-25.active .screen-25-text,
.ws-player .ws-screen-num-list-custom.active .screen-custom-text
 {
    color: var(--ws-player-text-active);
}

/* 最近使用的自定义布局样式 */
.ws-player .ws-screen-num-list-custom-recent {
    position: relative;
    flex-shrink: 0;
}

.ws-player .ws-screen-num-list-custom-recent .ws-screen-num-list-text {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
}

/* 自定义布局数字样式 - 黑色背景白色数字 */
.ws-player .ws-custom-screen-number {
    width: 18px;
    height: 14px;
    background-color: var(--ws-player-custom-screen-number-bg, #000);
    color: var(--ws-player-custom-screen-number-color, #fff);
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    line-height: 1.2;
    border-radius: 2px;
}

.ws-player .ws-screen-num-list-custom-recent .ws-screen-num-list-close {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 12px;
    height: 12px;
    font-size: 12px;
    line-height: 0.8;
    text-align: center;
    color: var(--ws-player-text-tertiary);
    cursor: pointer;
    border-radius: 50%;
    background-color: rgba(157, 166, 177, 1);
    opacity: 0;
    transition: opacity 0.2s;
}

.ws-player .ws-screen-num-list-custom-recent:hover .ws-screen-num-list-close {
    opacity: 1;
    color: var(--ws-player-text-primary);
}

.ws-player .ws-screen-num-list-custom-recent .ws-screen-num-list-close:hover {
    background-color: var(--ws-player-default-color-hover);
}

.ws-player .ws-screen-num-list-no-data {
    width: 100%;
    text-align: center;
    color: var(--ws-player-text-tertiary);
    font-size: 12px;
    padding: 8px 0;
}

.ws-player .ws-flex {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ws-player .ws-flex-end {
  justify-content: flex-end;
}

.ws-player .ws-flex-left {
  justify-content: center;
}

.ws-player .ws-ctrl-record-icon {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  margin: 0 4px;
  background-color: var(--ws-player-default-icon-color);
  background-repeat: no-repeat;
  background-position: center;
  background-image: none;
  cursor: pointer;
  mask-size: contain;
}
.ws-player .ws-ctrl-record-icon.active {
  background-color: var(--ws-player-default-icon-color-selected);
}

.ws-player .ws-record-speed-txt {
  color: var(--ws-player-record-speed-text-color);
  width: unset;
  text-align: center;
  margin: 0;
  padding: 1px 0;
  line-height: 20px;
  font-weight: 600;
  background: transparent;
}

.ws-player .ws-record-play {
  -webkit-mask-image: var(--ws-player-record-play-icon);
  mask-image: var(--ws-player-record-play-icon);
}
.ws-player .ws-record-pause {
  -webkit-mask-image: var(--ws-player-record-pause-icon);
  mask-image: var(--ws-player-record-pause-icon);
}

.ws-player .ws-record-play-rewind {
  -webkit-mask-image: var(--ws-player-record-play-rewind-icon);
  mask-image: var(--ws-player-record-play-rewind-icon);
}
.ws-player .ws-record-play-single-rewind {
  -webkit-mask-image: var(--ws-player-record-play-single-rewind-icon);
  mask-image: var(--ws-player-record-play-single-rewind-icon);
}
.ws-player .ws-record-play-single-play {
  -webkit-mask-image: var(--ws-player-record-play-single-play-icon);
  mask-image: var(--ws-player-record-play-single-play-icon);
}
.ws-player .ws-record-play-play {
  -webkit-mask-image: var(--ws-player-record-play-play-icon);
  mask-image: var(--ws-player-record-play-play-icon);
}

.ws-player .ws-record-filter {
  -webkit-mask-image: var(--ws-player-record-filter-icon);
  mask-image: var(--ws-player-record-filter-icon);
}

.ws-player .ws-record-simultaneously {
  -webkit-mask-image: var(--ws-player-record-simultaneously-icon);
  mask-image: var(--ws-player-record-simultaneously-icon);
  border-radius: 0;
}
.ws-player .ws-record-cancel-simultaneously {
  -webkit-mask-image: var(--ws-player-record-cancel-simultaneously-icon);
  mask-image: var(--ws-player-record-cancel-simultaneously-icon);
  border-radius: 0;
}

.ws-player .ws-record-speed-sub {
  -webkit-mask-image: var(--ws-player-record-speed-left-icon);
  mask-image: var(--ws-player-record-speed-left-icon);
}
.ws-player .ws-record-speed-add {
  -webkit-mask-image: var(--ws-player-record-speed-right-icon);
  mask-image: var(--ws-player-record-speed-right-icon);
}

/* 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;
  }
}

.wsplayer-item .stream {
  margin-left: 6px;
  display: flex;
  overflow-x: clip;
  flex-shrink: 1;
  min-width: 0;
}

.wsplayer-item .stream-type .stream-type-select{
  background: var(--ws-player-top-streamtype-list-li-active-background);
  color: var(--ws-player-top-streamtype-list-color);
}

.wsplayer-item .stream-type .stream-type-item:last-child {
  border-right: 0;
}

.wsplayer-item .select-container {
  margin-right: 8px;
  position: relative;
  user-select: none;
  flex-shrink: 1;
  min-width: 0;
}

.wsplayer-item .select-show {
  width: 120px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: var(--ws-player-text-primary);
  font-size: 14px;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1px 0 8px;
}

.wsplayer-item .select-show:lang(zh-cn) {
  width: 80px;
}

.wsplayer-item .select-show .code-stream {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wsplayer-item .select-ul {
  background-color: var(--ws-player-top-streamtype-list-background);
  color: var(--ws-player-top-streamtype-list-color);
  width: 100px;
  position: absolute;
  left: 0;
  top: 40px;
  padding: 0 4px 4px 4px;
  box-sizing: border-box;
  border-radius: 4px;
  overflow: hidden;
}

.wsplayer-item .select-ul:lang(zh-cn){
  width: 87px;
}

.wsplayer-item .select-ul li {
  height: 32px;
  line-height: 32px;
  text-align: center;
  cursor: pointer;
  margin-top: 4px;
  font-size: 14px;
  list-style: none;
  padding: 0 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wsplayer-item .select-ul li:hover {
  background-color: var(--ws-player-top-streamtype-list-li-hover-background);
}

.wsplayer-item .select-ul li.active {
  background-color: var(--ws-player-top-streamtype-list-li-active-background);
}

.wsplayer-item ul,
.wsplayer-item li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ws-select-show-option {
  font-size: 14px;
  width: 60px;
  margin-right: 4px;
  padding: 2px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.ws-tag-container{
  position: absolute;
  height: 66px;
  color: var(--ws-player-text-primary);
}
.ws-tag-container .ws-tag-content{
  position: absolute;
  padding: 16px;
  box-sizing: border-box;
  top: 64px;
  left: 42px;
  min-width: 160px;
  max-width: max-content;
  text-align: left;
  word-break: keep-all;
  visibility: visible;
  font-size: 12px;
  background: url(./icon/IotComboBackGround.png) no-repeat;
  background-size: 100% 100%;
}

.ws-tag-container .ws-tag-content p{
  white-space: nowrap;
}

.ws-tag-container .ws-tag-content-alarm{
  background: url(./icon/IotComboBackGround-alarm.png) no-repeat !important;
  background-size: 100% 100% !important;
}

.ws-tag-container p{
  margin: 0;
  padding: 0;
  line-height: 24px;
}
.ws-tag-container .ws-tag-title{
  line-height: 56px;
  min-width: 180px;
  font-size: 14px !important;
  cursor: pointer;
  position: relative;
  max-width: 960px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 0 36px 0 60px;
  height: 80px;
}
.ws-tag-container .ws-tag-title span{
  position: relative;
  z-index: 30;
}
.ws-tag-container .ws-left-png{
  position: absolute;
  left: 0;
}
.ws-tag-container .ws-middle-png{
  position: absolute;
  width: calc(100% - 171px);
  left: 95px;
}
.ws-tag-container .ws-right-png{
  position: absolute;
  right: 0;
}

.cRaw-container {
  overflow: hidden;
}

.ws-custom-dom-style {
  position: absolute;
  width: 100%;
  height: 100%;
}

.wsplayer-mobile-layer-container {
  position: relative;
  height: 100%;
  transition: all 0.3s ease;
}

.wsplayer-mobile-layer-container .bottom-controller-container {
  height: 60px;
  width: 100%;
  background-color: var(--ws-player-bg-mask);
  position: absolute;
  bottom: 0;
  z-index: 100;
}

.wsplayer-mobile-layer-container .wsplayer-control-btns {
  position: absolute;
  z-index: 100;
  width: 100%;
  height: 60px;
  padding-right: 20px;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background-color: var(--ws-player-bg-mask);
  background: linear-gradient(180.00deg, rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.4) 94.057%);
}

.wsplayer-mobile-layer-container .wsplayer-control-btns .mobile-opt-icon {
  width: 48px;
  height: 48px;
  padding: 8px;

}

.wsplayer-control-btns .mobile-opt-icon .mobile-show-pantilt-icon {
  width: 100%;
  height: 100%;
  margin-right: 10px;
}

.wsplayer-control-btns .mobile-opt-icon .mobile-speed-control-icon {
  width: 100%;
  height: 100%;
  margin-right: 10px;
  background-color: var(--ws-player-default-icon-color);
  -webkit-mask-image: url(./icon/mobile-speed-control-icon.svg);
  mask-image: url(./icon/mobile-speed-control-icon.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.wsplayer-control-btns .mobile-opt-icon .mobile-speed-control-icon:hover {
  background-color: var(--ws-player-default-icon-color-selected);
}

.wsplayer-control-btns .mobile-opt-icon .mobile-show-pantilt-icon.off {
  background-color: var(--ws-player-default-icon-color);
  -webkit-mask-image: url(./icon/hide-pantilt.svg);
  mask-image: url(./icon/hide-pantilt.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.wsplayer-control-btns .mobile-opt-icon .mobile-show-pantilt-icon.on {
  background-color: var(--ws-player-default-icon-color-selected);
  -webkit-mask-image: url(./icon/hide-pantilt-on.svg);
  mask-image: url(./icon/hide-pantilt-on.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.wsplayer-control-btns .mobile-opt-icon .mobile-refresh-replay-icon {
  width: 100%;
  height: 100%;
  margin-right: 10px;
  mask-image: var(--ws-player-top-refresh-replay-icon);
  -webkit-mask-image: var(--ws-player-top-refresh-replay-icon);
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #fff;
}

.wsplayer-control-btns .mobile-opt-icon .mobile-refresh-replay-icon:hover {
  background-color: #006fff;
}

.wsplayer-control-btns .mobile-opt-icon .mobile-audio-icon.off {
  width: 100%;
  height: 100%;
  margin-right: 10px;
  background-image: var(--ws-player-top-close-audio-icon);
  background-repeat: no-repeat;
  background-size: cover;
}

.wsplayer-control-btns .mobile-opt-icon .mobile-audio-icon.on {
  width: 100%;
  height: 100%;
  margin-right: 10px;
  background-image: var(--ws-player-top-open-audio-icon);
  background-repeat: no-repeat;
  background-size: cover;
}
.wsplayer-control-btns .mobile-opt-icon .mobile-draw-triangle-icon.off{
  width: 100%;
  height: 100%;
  margin-right: 10px;
  background-image: var(--ws-player-top-draw-triangle-icon-off);
  background-repeat: no-repeat;
  background-size: cover;
}

.wsplayer-control-btns .mobile-opt-icon .mobile-draw-triangle-icon.on{
  width: 100%;
  height: 100%;
  margin-right: 10px;
  background-image: var(--ws-player-top-draw-triangle-icon-on-hover);
  background-repeat: no-repeat;
  background-size: cover;
}

.wsplayer-control-btns .mobile-opt-icon .mobile-talk-icon.off {
  width: 100%;
  height: 100%;
  margin-right: 10px;
  background-image: var(--ws-player-top-talk-icon-off);
  background-repeat: no-repeat;
  background-size: cover;
}

.wsplayer-control-btns .mobile-opt-icon .mobile-talk-icon.on {
  width: 100%;
  height: 100%;
  margin-right: 10px;
  background-image: var(--ws-player-top-talk-icon-on);
  background-repeat: no-repeat;
  background-size: cover;
}


.wsplayer-mobile-pantilt {
  width: 140px;
  height: 140px;
  bottom: 24px;
  left: 24px;
  border-radius: 50%;
  position: absolute;
  z-index: 100;
}

.wsplayer-mobile-pantilt {
  background-image:
  url(./icon/wsplayer-mobile-pantilt-t-bg.png),
  url(./icon/wsplayer-mobile-pantilt-rt-bg.png),
  url(./icon/wsplayer-mobile-pantilt-r-bg.png),
  url(./icon/wsplayer-mobile-pantilt-rb-bg.png),
  url(./icon/wsplayer-mobile-pantilt-b-bg.png),
  url(./icon/wsplayer-mobile-pantilt-lb-bg.png),
  url(./icon/wsplayer-mobile-pantilt-l-bg.png),
  url(./icon/wsplayer-mobile-pantilt-lt-bg.png);
  background-size: 0 0;
}

/* 默认 */
.wsplayer-mobile-pantilt.default-bg {
  background: url(./icon/wsplayer-mobile-pantilt-bg.png)
}
/* 上 */
.wsplayer-mobile-pantilt.t-bg {
  background: url(./icon/wsplayer-mobile-pantilt-t-bg.png)
}
/* 右上 */
.wsplayer-mobile-pantilt.rt-bg {
  background: url(./icon/wsplayer-mobile-pantilt-rt-bg.png)
}
/* 右 */
.wsplayer-mobile-pantilt.r-bg {
  background: url(./icon/wsplayer-mobile-pantilt-r-bg.png)
}
/* 右下 */
.wsplayer-mobile-pantilt.rb-bg {
  background: url(./icon/wsplayer-mobile-pantilt-rb-bg.png)
}
/* 下 */
.wsplayer-mobile-pantilt.b-bg {
  background: url(./icon/wsplayer-mobile-pantilt-b-bg.png)
}
/* 左下 */
.wsplayer-mobile-pantilt.lb-bg {
  background: url(./icon/wsplayer-mobile-pantilt-lb-bg.png)
}
/* 左 */
.wsplayer-mobile-pantilt.l-bg {
  background: url(./icon/wsplayer-mobile-pantilt-l-bg.png)
}
/* 左上 */
.wsplayer-mobile-pantilt.lt-bg {
  background: url(./icon/wsplayer-mobile-pantilt-lt-bg.png)
}



.mobile-wsplayer-pause-play-container {
  position: absolute;
  left: calc(50% - 100px);
  top: calc(50% - 100px);
  width: 200px;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mobile-wsplayer-round-10 {
  width: 32px;
  height: 32px;
  background-image: url(./icon/round-10.png);
  border-radius: 50%;
  cursor: pointer;
}

.mobile-wsplayer-back-10 {
  width: 32px;
  height: 32px;
  background-image: url(./icon/back-10.png);
  border-radius: 50%;
  cursor: pointer;
}

.wsplayer-mobile-speed-container {
  position: absolute;
  top: 0;
  right: 0;
  width: 140px;
  height: 100%;
  z-index: 100;
  display: flex;
  flex-direction: column;
  color: var(--ws-player-text-primary);
  font-size: 16px;
  padding: 40px 20px;
  background: var(--ws-player-bg-mask-light);
}

.wsplayer-mobile-speed-container div {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--ws-player-text-primary);
}

.mobile-panTilt-stick {
  width: 50px;
  height: 50px;
  background-color: var(--ws-player-bg-mask);
  border-radius: 50%;
  position: absolute;
  top: 45px;
  left: 45px;
}

/* 全屏样式 */
.wsplayerfullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9999 !important;
}

/* 录像类型过滤弹窗样式 */

.record-filter-modal-container {
  position: fixed;
  z-index: 999;
  background-color: var(--ws-player-custom-division-background);
  border-radius: 8px;
  box-shadow: var(--ws-player-custom-division-box-shadow);
  flex-direction: column;
  width: 285px;
  padding: 16px;
}

.record-filter-modal-header {
  height: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--ws-player-custom-division-title-color);
}

.record-filter-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ws-player-record-filter-default-color);
}

.record-filter-close {
  font-size: 20px;
  color: var(--ws-player-btn-close-color);
  cursor: pointer;
  transition: color 0.3s;
}

.record-filter-close:hover {
  color: var(--ws-player-top-close-icon-hover-color);
}

.record-filter-content {
  margin: 12px 0;
  flex: 1;
}

.record-filter-option {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.record-filter-option:last-child {
  margin-bottom: 0;
}

.record-filter-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.record-filter-checkbox-inner {
  position: relative;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  outline: none;
  cursor: pointer;
  margin-right: 8px;
}

.record-filter-checkbox-input {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
  margin: 0;
}

.record-filter-checkbox-box {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
  border: 1px solid var(--ws-player-record-filter-checkbox-border-color, #d9d9d9);
  border-radius: 2px;
  background-color: var(--ws-player-record-filter-checkbox-bg, #fff);
  transition: all 0.3s;
}

.record-filter-checkbox-box::after {
  position: absolute;
  top: 50%;
  left: 22%;
  display: table;
  width: 5.71428571px;
  height: 9.14285714px;
  border: 2px solid #fff;
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg) scale(0) translate(-50%, -50%);
  opacity: 0;
  content: " ";
  transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
}

/* checked state */
.record-filter-checkbox-input:checked + .record-filter-checkbox-box {
  background-color: var(--ws-player-record-filter-checkbox-checked-bg, #1890ff);
  border-color: var(--ws-player-record-filter-checkbox-checked-bg, #1890ff);
}

.record-filter-checkbox-input:checked + .record-filter-checkbox-box::after {
  opacity: 1;
  transform: rotate(45deg) scale(1) translate(-50%, -50%);
  transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
}

/* indeterminate state - 蓝色边框 + 白色背景 + 中间蓝色小方块 */
.record-filter-checkbox-input:indeterminate + .record-filter-checkbox-box {
  background-color: #fff;
  border-color: var(--ws-player-record-filter-checkbox-checked-bg, #1890ff);
}

.record-filter-checkbox-input:indeterminate + .record-filter-checkbox-box::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background-color: var(--ws-player-record-filter-checkbox-checked-bg, #1890ff);
  border: none;
  border-radius: 0;
  transform: translate(-50%, -50%);
  opacity: 1;
  content: " ";
}

/* hover state */
.record-filter-checkbox:hover .record-filter-checkbox-input:not(:checked) + .record-filter-checkbox-box {
  border-color: var(--ws-player-record-filter-checkbox-checked-bg, #1890ff);
}

/* disabled state */
.record-filter-checkbox-input:disabled + .record-filter-checkbox-box {
  cursor: not-allowed;
  background-color: #f5f5f5;
  border-color: #d9d9d9;
}

.record-filter-checkbox-input:disabled:checked + .record-filter-checkbox-box {
  background-color: rgba(24, 144, 255, 0.5);
  border-color: rgba(24, 144, 255, 0.5);
}

.record-filter-checkbox-color {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  margin-right: 4px;
}

.timed-color {
  background-color: var(--ws-player-record-timed-color);
}

.alarm-color {
  background-color: var(--ws-player-record-alarm-color);
}

.motion-color {
  background-color: var(--ws-player-record-motion-color);
}

.record-filter-checkbox-label {
  font-size: 14px;
  color: var(--ws-player-custom-division-default-left-list-color);
}

.record-filter-footer {
  display: flex;
  justify-content: flex-end;
    gap: 12px;
}

.record-filter-btn {
  border: none;
  border-radius: 2px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
  color: var(--ws-player-custom-division-btn-primary-bg);
  width: 48px;
  height: 24px;
}

.reset-btn {
  background-color: var(--ws-player-custom-division-btn-info-bg);
  color: var(--ws-player-custom-division-btn-info-color);
  border: var(--ws-player-custom-division-btn-info-border);
  cursor: pointer;
  border-radius: 4px;
}

.confirm-btn {
  background-color: var(--ws-player-custom-division-btn-primary-bg);
  color: var(--ws-player-custom-division-btn-primary-color);
  border: var(--ws-player-custom-division-btn-primary-border);
  cursor: pointer;
  border-radius: 4px;
}