.video-js .vjs-big-play-button {
    border: 1px solid;
    width: 80px;
    height: 80px;
    border-radius: 83px;
    background-color: unset;
    z-index: 10000;
}
.video-js.vjs-paused .vjs-big-play-button {
    /*display: block !important;*/
    display: none !important; /* decided to turn off button */
}
.video-js .vjs-big-play-button .vjs-icon-placeholder{
    font-size: 45px;
    position: absolute;
    left: 18px;
    top: 15px;
}
.video-js .vjs-big-play-button .vjs-icon-placeholder:before {
    content: "\f101" !important;
    color: transparent !important;
    -webkit-text-stroke: 1px #FFF !important;
    text-stroke: 1px #FFF !important;
}

.vjs-custom-time-display {
    color: #4d4d4d;
    font-size: 14px;
    margin-left: calc(2.5% + 10px);
    position: relative;
    top: -30px;
    display: inline-block;
    height: fit-content;
    background: #dfdfdfc4;
    padding: 5px 5px;
    border-radius: 7px;
}

.vid-start-duration{
    color: #4d4d4d;
    font-size: 14px;
    position: absolute;
    bottom: 35px;
    display: inline-block;
    background: #dfdfdfc4;
    padding: 4px 5px;
    border-radius: 7px;
    left: 0;
    margin-left: calc(2.5% + 10px);
}
.video-js.vjs-has-started .vid-start-duration{
    display: none !important;
}

.vid-bottom-content{
    position: absolute;
    bottom: 0;
}

.vjs-control-bar > *:not(.vjs-custom-time-display):not(.vjs-progress-control):not(.vjs-slider-handle):not(.vjs-custom-volume-control) {
    display: none;
}

.vjs-theme-city .vjs-progress-control {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: 95%;
    height: 20px;
    margin: 0 auto;
}

.video-js .vjs-slider-handle {
    width: 16px;            /* Ширина круга */
    height: 16px;           /* Высота круга */
    background: #FFF;       /* Цвет заливки (можно заменить на нужный) */
    border: 2px solid #000;  /* Обводка для лучшей видимости, можно убрать или изменить */
    border-radius: 50%;     /* Делаем его круглым */
    position: absolute;
    top: 50%;
    right: 0;               /* Привязываем к правой стороне родителя (который перемещается вместе с прогрессом) */
    transform: translate(50%, -50%);  /* Сдвиг, чтобы центр круга совпадал с правой границей полосы */
    cursor: pointer;
    z-index: 2;             /* Чтобы handle был выше полосы прогресса */
}

.video-js .vjs-control-bar{
    background: unset;
}

.vjs-play-progress .vjs-time-tooltip{
    display: none !important;
}

.video-js .vjs-load-progress, .video-js .vjs-play-progress, .video-js .vjs-load-progress div, .video-js .vjs-progress-holder{
    border-radius: 4px;
}

.video-js .vjs-load-progress div{
    background-color: darkgray;
}
.video-js .vjs-progress-holder{
    background-color: lightgrey;
}

/* Стили для кастомной кнопки */
.vjs-custom-fullscreen-button {
    position: absolute;
    top: 23px;  /* отступ от верхнего края плеера */
    right: 23px; /* отступ от правого края плеера */
    width: 24px; /* ширина кнопки */
    height: 24px; /* высота кнопки */
    background: url('/assets/image/video/fullscreen_2.png') no-repeat center center;
    background-size: contain;
    cursor: pointer;
    z-index: 1000; /* чтобы кнопка была поверх видео */
    opacity: 0;
    transition: visibility 0.1s, opacity 0.1s;
}

.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-custom-fullscreen-button {
    visibility: visible;
    opacity: 0;
    pointer-events: none;
    transition: visibility 1s, opacity 1s;
}


.vjs-has-started .vjs-custom-fullscreen-button, .vjs-audio-only-mode .vjs-custom-fullscreen-button {
    visibility: visible;
    opacity: 1;
}

.video-js{
    border-radius: 10px !important;
    overflow: hidden;
}

/* CustomVolumeControl.css */

.vjs-custom-volume-control {
    position: relative;
    width: 24px;
    height: 129px;
    margin-right: calc(2.5% + 10px);
    margin-left: auto;
    top: -135px;
}

.vjs-custom-volume-icon {
    position: absolute;
    bottom: 0;
    width: 24px;
    height: 24px;
    background: url('/assets/image/video/volume.png') no-repeat center;
    background-size: contain;
    cursor: pointer;
}

.vjs-custom-volume-slider {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 80px;
    background: rgba(255,255,255,0.3);
    border-radius: 3px;
    visibility: hidden;
    margin-bottom: 8px;
    transition: visibility 0s linear 0.2s;
}

.vjs-custom-volume-control:hover .vjs-custom-volume-slider,
.vjs-custom-volume-control.dragging .vjs-custom-volume-slider {
    visibility: visible;
    transition-delay: 0s;
}

.vjs-custom-volume-handle {
    position: absolute;
    left: -4px;
    width: 14px;
    height: 14px;
    background: #fff;
    border: 1px solid #000;
    border-radius: 50%;
    cursor: pointer;
}


.videos-list{
    margin: 20px 0;
}

.videos-list .video-card .video-js.vjs-fluid {
    width: 100%;      /* Занимает всю ширину контейнера */
    max-height: 320px; /* Максимальная высота 320px */
}

.video-card{
    margin-bottom: 20px;

    margin-top: 20px;
    border: 1px solid #8c52ff;
    border-radius: 3px;
    box-shadow: 1px 1px 4px 1px darkgrey;
    padding: 10px 10px;
}
.video-wrapper{
    position: relative;
}
.video-card:last-child{
    margin-bottom: 0;
}

.video-card .vid-title{
    font-size: 18px;
    font-weight: bold;
    width: fit-content;
    margin-bottom: 10px;
}

.video-card .vid-description{
    margin-top: 10px;
    font-size: 16px;
}

.video-card .vid-description .description-desktop{
    display: none;
}

.video-card .vid-description .description-show-more{
    cursor: pointer;
    text-decoration: underline;
}

@media (max-width: 620px) {
    .video-card .vid-description {
        font-size: 14px;
    }
    .video-card .vid-description span{
        line-height: 21px;
    }
    .vid-start-duration{
        bottom: 18px;
        left: 23px;
        margin-left: 0;
    }
}

.video-card .vid-title, .video-card .vid-description span{
    background: #f6f7fb;
    color: #545454;
    border-radius: 5px;
    padding: 2px 6px;
}

.video-card .vid-title a{
    color: #545454;
    text-decoration: none;
}

.video-card .vid-description span{
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone; /* для поддержки в некоторых браузерах */
    line-height: 23px;
}

.vid-bottom{
    display: flex;
    align-items: center;
    column-gap: 7px;
    margin-top: 10px;
}

.vid-tags{
    margin-top: 10px;
}

.vid-tags a{
    background: #ededed;
    border-radius: 3px;
    padding: 2px 8px;
    color: #626262;
}
.vid-tags a:hover{
    background: #dfdfdf;
}

.vid-tags, .vid-bottom{
    margin-left: 6px;
}

.vid-tags span{
    padding-right: 10px;
    text-decoration: underline;
}

.video-card .video-converting-placeholder img{
    width: 100%;
}

.vid-bottom .right-block{
    display: flex;
    align-items: center;
    gap: 15px;
}

.tags-autocomplete-wrapper{
    position: relative;
}

.tags-autocomplete-wrapper .autocomplete-tag-input{
    width: 100%;
}

#edit-video input{
    box-sizing: border-box;
}

.selected-tags{
    display: flex;
    gap: 20px;
    align-items: center;
}

.selected-tags .tag{
    display: flex;
    gap: 5px;
    align-items: center;
}

.selected-tags .tag .tag-name{

}

.selected-tags .tag .remove-tag-cross{
    display: flex;
    align-items: center;
    width: 20px;
    cursor: pointer;
}

.selected-tags .tag .remove-tag-cross img{
    width: 100%;
}