.videos-slide {
    position: relative;
    justify-content: center;
    align-items: center;
    height: calc(100dvh - 60px);
    width: 100%;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none; /* IE and Edge */
    background: transparent;
    z-index: 4;
    max-width: 480px;
    /* margin: auto; */
}

.videos-slide.videos-slide-scroll .video-slide-item {
    background: #000;
}

.videos-slide::-webkit-scrollbar {
    display: none;
}

.videos-slide .video-slide-item {
    height: calc(100dvh - 60px);
    width: 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    max-width: 480px;
    margin: auto;
    padding: 10px 0;
    background-color: var(--web-background);
}

.videos-slide .video-slide-item img.video-item-thumbnail {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
    cursor: pointer;
    background: #000;
}


.videos-slide .video-slide-item img.video-item-thumbnail.full-width {

    /* height: auto; */

    object-fit: contain;
}

.videos-slide .video-slide-item img.img-emoji {
    width: 20px;
    margin-left: 5px;
}

.video-content-item {
    /* max-width: 100%; */
    height: 100%;
    background: #000;
    position: relative;
    border-radius: 5px;
    /* aspect-ratio: 0.5625 / 1; */
    margin: auto;
    /* min-width: 300px; */
}

.video-content-item .react-loading-skeleton {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.video-content-item .load-ding {
    position: absolute;
    z-index: 2;
    top: 47%;
    left: 45%;
}

.hide-thumbnail .videos-slide .video-slide-item.active-item {
    /* transition: opacity 1s ease-in-out; */
    /*opacity: 0;*/
    background: transparent;
}

.hide-thumbnail .videos-slide .video-slide-item.active-item .video-content-item {
    /*transition: opacity 1s ease-in-out;*/
    /*opacity: 0;*/
    background: transparent;
}

.hide-thumbnail .videos-slide .video-slide-item.active-item img.video-item-thumbnail {
    transition: opacity 1s ease-in-out;
    opacity: 0;
}

.video-content-item .content-feed-detail {

    overflow-y: auto;

    width: 90%;
}

.video-content-item .feed-detail-content {
    overflow: unset;
    padding-bottom: 10px;
}

.video-page.videos-slide-scroll #video-slide {
    opacity: 0;
}

.video-page.videos-slide-scroll #wrapper-controls-media {
    display: none;
    opacity: 0;
}

.video-page .wrapper-controls-media {
    /* display: block; */
    bottom: 20px;
}

.video-page.videos-slide-scroll .wrapper-controls-media {
    display: none;
}

.video-page .wrapper-seek-bar {
    bottom: -7px;
}

.video-loading .wrapper-seek-bar {
    display: none
}

.wrapper-seek-bar #seek-bar {
    bottom: -3px !important;
}

.video-page .wrapper-seek-bar #seek-bar {
    bottom: -3px !important;
}

.video-page .btn-volume {

    top: calc(calc(100dvh - 88px) * -1);
    height: 40px;
    margin-right: -5px;
}

.video-content-item .fa-play {

    position: absolute;
    top: calc(50% - 0.5em);
    left: calc(50% - 0.5em);
    color: #ffff;
    font-size: 2em;
    cursor: pointer;
    margin-left: 0.2em;
    display: none;
}

.video-page .feed-detail {
    max-height: 80dvh;
    background: transparent;
    padding: 5px 10px 5px 10px;
    overflow: hidden;
    width: 100%;
    bottom: 0;
}

.video-page .feed-detail.show-more {
    bottom: 0;
    padding: 10px;
    padding-bottom: 20px;
}

.video-page .feed-detail.show-more .content-feed-detail {
    width: 88%;
    max-height: 75dvh;
    /* overflow-y: auto; */
}

.video-page .feed-detail .text-read-more {

    color: #fff;

}

.video-page .feed-detail.show-more .text-read-more {

}

.content-feed-detail::-webkit-scrollbar {
    width: 0;
}

.wrapper-video-comment {
    /* position: relative; */
    right: 0;
    left: 0;
    /* width: 100%; */
    /* height: 100%; */
    background: transparent;
    display: flex;
    /* margin-left: 472px; */
    z-index: 9999;
    top: 0;
    flex-direction: column;
    /* aspect-ratio: 0.5625 / 1; */
    /* display: none; */
    min-width: 300px;
    flex: 1;
    height: calc(100dvh - 60px);
    /* background: #f00; */
    padding: 10px 0;
    /* flex-basis: max-content; */
    max-width: 430px;
}

.video-comment {
    /* position: absolute; */
    bottom: 0;
    width: 100%;
    /* height: 90%; */
    /* display: flex; */
    flex-direction: column;
    z-index: 5;
    background: #fff;
    padding-top: 5px;
    display: flex;
    max-width: 430px;
    flex: 1;
    /* display: flex; */
    height: calc(100dvh - 80px);
}

.wrapper-video-comment .close-comment {
    height: 10dvh;
    background: transparent; /* background: #f00; */
    align-items: center;
    justify-content: center;
    display: none; /* flex: 1; */
}

.wrapper-video-comment .close-comment button {
    border: none;
    background: transparent;
    outline: none;
    box-shadow: none;
    padding: 0;
}

.wrapper-video-comment .close-comment button svg {
    fill: #fff;
    margin-top: 30px;
}

.video-comment .comment-list {
    width: 100%;
    padding: 0 5px;
    /* border: 1px solid; */
    flex: 1;
    /* height: 20px; */
    background: #fff;
    overflow-y: auto;
    /* height: calc(100dvh - 171px); */
}

.video-comment .box_comment {
    /* height: 50px; */
}

.video-page .main-content {
    justify-content: center;
}

.video-content-item .fa.fa-circle-o-notch {
    font-size: 40px !important;
    width: 1em !important;
    /*display: block;*/
    height: 1em;
    top: calc(50% - 0.5em);
    position: absolute;
    left: calc(50% - 0.5em);
    color: #fff;
    font-weight: unset !important;
    display: none;
}

.video-loading .video-content-item .fa.fa-circle-o-notch {
    display: inline !important;
}

@media screen and (min-width: 932px) {
    .video-page .public-DraftEditorPlaceholder-inner {

        margin-top: 10px;

        margin: 10px;
    }
}

@media screen and (max-width: 932px) {
    .videos-slide {
        width: 100%;
        max-width: unset;
    }

    .wrapper-seek-bar #seek-bar {
        bottom: -7px !important;
    }

    .wrapper-video-comment .close-comment {
        display: flex;
    }

    .video-comment, .wrapper-video-comment {
        bottom: 0;
        z-index: 4;
        position: fixed;
        padding-top: 10px;
        height: 90dvh;
        max-width: unset;
        width: 100%;
    }

    .video-comment .comment-list {
        scrollbar-width: none;
    }

    .video-comment .public-DraftEditorPlaceholder-root {
        margin-top: 10px;
        margin-left: 10px;
    }

    .video-comment #placeholder-editor {

    }

    .showComment .menu-bottom {
        display: none !important;
    }


    .video-page .feed-detail.show-more {
        bottom: 0;
        background: #0a0a0a70;
    }

    .btn-volume {
        top: 10px !important;
        margin-right: 10px !important;
    }

    .videos-slide {
        height: calc(100dvh - 50px);
        /* background: #000; */
        /* overflow-y: hidden; */
    }

    .videos-slide .video-slide-item {
        height: calc(100dvh - 50px);
        padding: 0;
        width: 100%;
        max-width: unset;
    }

    .video-content-item {
        border-radius: 0;
        height: calc(100dvh - 50px);
        width: 100%;
        max-width: unset;
    }

    .video-page .meidia-video#video-slide {
        top: 0;
        left: 0;
        height: calc(100dvh - 50px);
        width: 100%;
    }

    .video-page .meidia-video#video-slide video {
        /* width: 100%; */
    }

    .video-page.videos-slide-scroll #video-slide {
        opacity: 1;
    }

    .video-page.videos-slide-scroll #wrapper-controls-media {
        display: none;
        opacity: 0;
    }

    .video-page .wrapper-controls-media {
        width: 100%;
        bottom: 52px;
        display: block;
    }

    .video-page .text-read-more {
        color: #fff;
    }

    .showComment .main .main-content .videos-slide {
        /*overflow-y: initial;*/
    }

    .showComment .main, .showComment .main-content, .showComment .videos-slide, .showComment .video-slide-item {
        height: 100dvh;
    }

    .video-comment:before {
        content: "";
        width: 100px;
        height: 4px;
        background: #230f0f;
        margin: auto;
        margin-bottom: 10px;
        border-radius: 5px;
    }

    .showComment .wrapper-controls-media {
        display: none !important;
    }

    .videos-slide .video-slide-item img.video-item-thumbnail {
        border-radius:0
    }
}