.file_preview, .template_preview  {
    display: inline-block;
    position: relative;
    overflow: hidden;
    /* This is temporary width and height, these'll be overriden when the source img is loaded. */
    /* If you already know size of a preview frame you can hardcode it here. */
    width: auto;
    height: 45px;
    border-radius: 3px;
    cursor: pointer;
    /* background: rgba(0,0,0,0.01); /* hack for chrome viewport issue */
    background: transparent; /* hack for chrome viewport issue */

}

.file_preview_container {
    display: block;
    position: relative
}
#active_request_list .file_preview_container{
    padding-right: 5px;
    margin-bottom: 0px;
    display: inline-block;
}
#pending_request_list .file_preview_container{
    display: inline-block;
    position: relative;
    vertical-align: middle;
    margin: 2px;
}
.file_preview_container .file_broken {
}

.file_preview_container .video_preview img {
    height: 100%;
}

.file_preview_container img.single_image {
    max-width: 100%;
    max-height: 100%;
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.file_preview_container .preview_slider {
    width: 2px;
    height: 100%;
    background: #ddd;
    position: absolute;
    z-index: 99;
    top: 0;
    opacity: 0.6;
}

.file_preview_container .mc_item img.single_image{
    aspect-ratio: 16/9;
    object-fit: cover;
    object-position: top center;
}