/* Questo file viene utilizzato come foglio di stile per i modal di anteprima dei vod */
/* Si può selezionare la scelta di modal di anteprima dal modal di impostazioni personalizzabili dal portale admin */

.li_metadatati_preview {
    color: white;
    padding: 5px;
    list-style: none;
}

#imgElementInfoVideoCover {
    max-height: 100%;
    /* object-fit: cover; */
    object-position: 100% 20%;
}

#imgElementInfoVideoCover {
    /* max-height:      30vh; */
    /* object-fit:      cover;
    object-position: 100% 20%; */
    aspect-ratio: 16 / 9;
}

#imgElementInfoVideoCover {
    /* min-width:               100%;
    max-width:               100%; */
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    width: 100%;
}

.info_video_element_list_value {
    display: inline-block;
}

.div_tag_description_preview {
    font-size: medium;
    color: #fff;
    text-transform: uppercase;
    word-break: break-word;
    overflow-y: scroll;
    max-height: 9vw;
}

.div_title_preview {
    font-size: xx-large;
    color: var(--main-text-color-video, white);
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
}

.desc_preview {
    padding: 0;
    color: var(--main-text-color-video, white);
    font-size: 16px;
    display: -webkit-box;
    overflow-wrap: break-word;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    position: inherit;
}

.div_title_preview {
    text-align: center;
    font-size: 24px;
    color: var(--main-text-color-video, white);
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
}

.div_subtitle_preview {
    text-align: center;
    font-size: 20px;
    color: var(--main-text-color-video, white);
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
}

.li_metadatati_preview {
    width: 25% !important;
    overflow: hidden;
    text-overflow: ellipsis;
    list-style-type: none;
    color: var(--main-text-color-video, white);
    text-align: center;
    font-size: 13px;
}

#metadati_row {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
}

#previewVodSelected .container-fluid {
    height: inherit;
    color: var(--main-text-color-video, white);
}

#previewVodSelected {
    height: inherit;
}

#previewVodSelected li:first-child {
    width: 100%;
}

#previewVodSelected ::-webkit-scrollbar-track {
    background: var(--complementary-background-primary-color-video, white);
    margin-top: 5px;
}

#previewVodSelected ::-webkit-scrollbar {
    height: 5px !important;
}

#previewVodSelected .close_button_modal {
    border-radius: 100%;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}


#previewVodModalOpenIDTitle:hover {
    background-color: #929AAB;
    color: #D3D5FD;
}

#previewVodModalOpen .modal-body {
    height: 100%;
}

#previewVodModalOpen .modal-dialog {
    max-height: 90vh !important;
    height: fit-content !important;
}

#previewVodModalOpen .modal-body {
    height: 100%;
}

.modal_preview_vod_content {
    border-radius: 10px !important;
    border: 5px solid #084163 !important;
}

.li_tag_list_preview {
    white-space: nowrap;
    overflow: auto;
    text-transform: uppercase;
    display: block;
}

#InfoVodPreviewModalContainer .list_no_style {
    margin-left: 0;
}

#InfoVodPreviewModalContainer ul.list_no_style li {
    margin-bottom: 10px;
}

.tagOneLine {
    border: 1px solid var(--main-text-color-video, white);
    border-radius: 5px;
}

@media screen and (max-width: 990px) {
    .div_tag_description_preview {
        max-height: 45vh;
    }

    /* .modal_preview_video_thumb_container
    {
        height: 28vh;
    } */
}

@media screen and (max-width: 767px) {
    .div_tag_description_preview {
        font-size: 10px !important;
        max-height: 41vh !important;
    }

    .div_title_preview {
        font-size: 18px !important;
    }

    /* .modal_preview_video_thumb_container
    {
        height: 25vh !important;
    } */
}

@media screen and (max-width: 767px) and (orientation: landscape) {
    .modal_preview_vod_content {
        width: 60vw;
        margin: 10px auto;
    }
}