body {
}

/*.thumb-tile {
    cursor: pointer;
    height: 33%;
}

.viewer-container {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;*/ /* prevent scroll */
/*}

.viewer-container img,
.viewer-container video {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.middle-flex-grow {
    flex: 1 1 auto;
    overflow: hidden;
    min-height: 0;
}

.two-line-truncate {
    display: -webkit-box;
    -webkit-line-clamp: 2;*/ /* number of lines */
    /*-webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.two-line-height {
    line-height: 1.2em;
    height: calc(1.2em * 2);
}

.one-line-height {
    line-height: 1.2em;
    height: calc(1.2em * 1);
}*/

/*.h-100 {
    min-height: 0;
}*/

/* Main viewer container */
/*.viewer-container {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #000;*/ /* optional */
/*}*/

/* Thumbnail tiles */
/*.thumb-tile {
    cursor: pointer;
    height: 100px;*/ /* IMPORTANT: prevents full-screen thumbnails */
    /*min-height: 100px;
    max-height: 100px;
    overflow: hidden;
    background-color: #111;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .thumb-tile:hover {
        transform: scale(1.03);
        box-shadow: 0 0 6px rgba(184, 134, 11, 0.4);*/ /* darkgoldenrod glow */
    /*}*/

    /* Thumbnail images */
    /*.thumb-tile img,
    .thumb-tile video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }*/

/* Main preview content */
/*.viewer-container img,
.viewer-container video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}*/


/* Main viewer */
/*.viewer-main img,
.viewer-main video {
    width: 100%;
    height: 100%;
    object-fit: cover;*/ /* matches Stitch */
/*}*/

/* Thumbnail tiles */
/*.viewer-thumb {
    min-height: 0;*/ /* critical for flex children */
/*}

    .viewer-thumb img,
    .viewer-thumb video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }*/

/*.viewer-main img,
.viewer-main video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.viewer-thumb img,
.viewer-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.viewer-thumb {
    min-height: 0;*/ /* critical for flex children */
    /*cursor: pointer;
}*/


/* Main image */
/*.viewer-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;*/ /* matches Google Stitch */
/*}*/

/* Thumbnail images */
/*.viewer-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}*/

/* Video thumbnail wrapper */
/*.thumb-video {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: white;
}*/


/* Main image/video */
.viewer-main-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Thumbnail image/video */
.viewer-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Video thumbnail wrapper */
.thumb-video {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #111;
    color: white;
}

/* Video icon */
.thumb-video-icon {
    font-size: 2rem;
    opacity: 0.8;
}

/* Video label */
.thumb-video-label {
    font-size: 0.75rem;
    margin-top: 0.25rem;
    text-align: center;
    padding: 0 4px;
}

/* Generic file thumbnail */
.thumb-generic {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}


.full-screen-height {
    display: flex;
    flex-direction: column;
    height: 80vh;
    overflow: hidden;
    min-height: 0;
}

/*There's no way this is the right way to do this*/
.sixty-percent-screen-height {
    display: flex;
    flex-direction: column;
    height: 60vh;
    overflow: hidden;
    min-height: 0;
}

/*this is so stupid there's no possible way this is correct*/
.fifty-percent-screen-height {
    display: flex;
    flex-direction: column;
    height: 50vh;
    overflow: hidden;
    min-height: 0;
}

.viewer-flex {
    flex: 1 1 auto;
    overflow: hidden;
    min-height: 0; /* CRITICAL */
}

.viewer-thumb {
    height: 100px;
    min-height: 100px;
    max-height: 100px;
}

.viewer-main {
    display: flex;
    justify-content: center;
    align-items: center;
}

.two-line-truncate {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* number of lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.two-line-height {
    line-height: 1.2em;
    height: calc(1.2em * 2);
}