.video-js .vjs-progress-control:hover .vjs-time-tooltip,
.video-js .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-time-tooltip,
.video-js.vjs-scrubbing.vjs-touch-enabled .vjs-progress-control .vjs-time-tooltip {
    white-space: nowrap;
}

.video-js .vjs-volume-tooltip {
    white-space: nowrap;
}

.playback-dialog {
    position: relative;
    margin: 0;

    display: flex;
    flex-direction: column;

    width: 100%;
    height: 100%;
    background: transparent;
    border: none;

    .el-dialog__header {
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        box-sizing: border-box;
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 48px;
        background: rgba(2, 2, 2, 0.6);
        border-radius: 0px 0px 0px 0px;
        backdrop-filter: blur(13.7px);
        z-index: 9;

        .title {
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: bold;
            font-size: 16px;
            color: #FFFFFF;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }

        .close {
            width: 24px;
            height: 24px;
            background: url('@/assets/images/playbackVideo/close.svg') no-repeat center / 100% 100%;
            cursor: pointer;
        }
    }

    .el-dialog__body {
        position: relative;
        height: 0;
        flex: 1;
        background: transparent;

        &>div {
            width: 100%;
            height: 100%;
        }
    }
}

.vjs-marker {
    position: relative;
    width: 1px;
    background: transparent !important;
    // transform: translateX(4px) !important;

    &::after {
        content: '';
        position: absolute;
        left: -1px;
        bottom: 0;
        width: 2px;
    }

    &::before {
        content: '';
        position: absolute;
        left: -7px;
        bottom: 14px;
        width: 14px;
        height: 14px;
        border-radius: 50% !important;
    }

    // 待处理
    &.pending {
        &::after {
            height: 9px;
            background: #ff7411 !important;
        }

        &::before {
            bottom: 9px;
            background: #ff7411 !important;
        }
    }

    // 待审核
    &.reviewed {
        &::after {
            height: 6px;
            background: #ff472f !important;
        }

        &::before {
            bottom: 6px;
            background: #ff472f !important;
        }
    }

    // 处理中
    &.processing {
        &::after {
            height: 12px;
            background: #ffff61 !important;
        }

        &::before {
            bottom: 12px;
            background: #ffff61 !important;
        }
    }

    // 已完成
    &.done {
        &::after {
            height: 16px !important;
            background: #06d957 !important;
        }

        &::before {
            bottom: 16px;
            background: #06d957 !important;
        }
    }

    // 已完结
    &.ended {
        &::after {
            height: 16px !important;
            background: #06d957 !important;
        }

        &::before {
            bottom: 16px;
            background: #06d957 !important;
        }
    }

    // 待处理
    &.noneEvent {
        &::after {
            height: 16px;
            background: #76F6FF !important;
        }

        &::before {
            bottom: 16px;
            background: #76F6FF !important;
        }
    }
}

.vjs-marker:hover {
    transform: scale(1, 1) !important;
}

.vjs-progress-control.vjs-control {
    .vjs-tip {
        bottom: 54px !important;
        transform: translateX(3px);
    }
}

.vjs-control-bar {
    height: 48px !important;
    background: rgba(2, 2, 2, 0.52) !important;

    &>.vjs-control {
        margin-top: auto !important;
        height: 30px !important;
    }
}

.vjs-playback-rate .vjs-menu {
    z-index: 99;
}