/* 預設：顯示縮圖、隱藏 video */
.video-card {
    /* display: flex;
    justify-content: center; */
    /* align-items: center; */
    /* padding: 12px; */
    font-size: 0.9rem !important;
    position: relative;


    /* 與預覽無關的css */
    height: 300px;
    /* width: 260px; */
    padding-top: 170px;
    padding-left: 16px;
    padding-right: 16px;

    border-radius: 16px;
}


/* thumb-preview 是「容器（框架）」thumb 是「實際的圖片內容（img）」 */
/* thumb-preview 是「靜態縮圖層」video-preview 是「動態影片層」 */

/* 容器 */
/* video preview */
.thumb-preview-grid {
    /* 放置.thumb-grid的影片截圖img的容器 */
    position: absolute;
    height: 120px;

    width: 212px;

    top: 30%;
    /* left: 60px; */
    left: 50%;
    /* transform: translate(0%, -50%); */
    transform: translate(-50%, -50%);
}

.thumb-grid {
    /* 還沒滑動的影片截圖容器，不會預覽撥放，需要縮小 */
    position: absolute;
    /* height: 120px; */

    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;

}

/* 容器 */
.video-preview-grid {
    /* 大小剛好，滑動進去會縮小，且影片自動撥放的容器 */
    position: absolute;

    display: none;
    height: 120px;
    width: 212px;


    top: 30%;
    /* left: 0; */
    left: 50%;
    /* left: 60px;*/
    /* transform: translate(0%, -50%); */
    transform: translate(-50%, -50%);
}

/* icon view */
.btn-group {
    border: 1px solid rgb(107, 107, 107);
    border-radius: 4px;
    color:rgb(0, 0, 0);
}

#btnList {
    border-radius: 4px 0 0 4px;
}

#btnGrid {
    border-radius: 4px 0 0 4px;
}

.grid_active {
    background: linear-gradient(90deg, #878787 4.93%, #878787  121.62%);
    color:white!important;;
}