/*--------------------------------------------------------------
# Video grid
--------------------------------------------------------------*/

#videoMediaContainer {
    z-index: 1;
    display: flex;
    /* display: block; */
    /* display: inline-flex; */
    /* align-content: center; */
    /* align-content: flex-start; */
    /* align-content: initial; */
    /* align-content: space-evenly; */
    align-content: var(--align-content);
    /* align-content: space-between; */
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    position: absolute;
    left: 0px;
    bottom: 0px;
    /* bottom: auto; */
    top: 0px;
    right: 0px;
    overflow: auto;
    /* text-align-last: center; */
    padding-top: 3rem;
}

.Camera {
    position: relative;
    vertical-align: middle;
    align-self: center;
    border-radius: 10px;
    overflow: hidden;
    display: inline-block;
    background: transparent;
    /* border-radius: 5px; */
    border: var(--border);
    box-shadow: var(--box-shadow);
    animation: show 0.4s ease;
    width: var(--camera-width);
    margin: var(--camera-margin);
    height: var(--camera-height);
    /* max-height: calc(var(--camera-width) / 1.77); */
    /* max-height: calc(var(--camera-width) / 1.333); */
    max-height: calc(var(--camera-width));
    max-width: calc(var(--camera-height) * 1.5);
    /* max-width: calc(var(--camera-height) * 2); */
    /* min-width: 49%; */
    min-height: 125px;
    /* max-width: calc(var(--camera-height) * 1.7777777778); */
    /* added to maintain the height ratio, otherwise it becomes a view vertically stretched */
    /* vertical-align: -webkit-baseline-middle; */

    /* max-height: 90vh; */
    transition: all 0.5s ease-in-out;
}

.Camera:fullscreen video {
    object-fit: contain;
}

#videoMediaContainer i {
    position: absolute;
    display: none;
    /* display: flex; */
    /* top: 0; */
    top: 5px;
    color: rgb(0, 255, 71);
    /* color: gray; */
    font-size: 14px;
    align-items: center;
    padding: 5px;
    margin: 5px;
    width: auto;
    height: 25px;
    border-radius: 5px;
    /* background: rgba(0, 0, 0, 0.4); */
    font-size: 2rem;
}

#videoMediaContainer i.raised {
    color: rgb(0, 255, 71);
}

#videoMediaContainer i:hover,
#videoMediaContainer i.raised:hover {
    cursor: pointer;
    color: orangered;
}

.audio {
    position: absolute;
    right: 0;
    color: #fff;
    margin: 5px;
    width: auto;
    height: 25px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.1);
}

.username {
    position: absolute;
    bottom: 0;
    color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
    padding: 5px;
    margin: 5px;
    width: auto;
    height: 25px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.4);
}

.fscreen {
    position: absolute;
    right: 0;
    bottom: 0px;
    color: #fff;
    margin: 5px;
    width: auto;
    height: 25px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.1);
}

#videoMediaContainer img {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    width: 250px;
    display: none;
}

.videoMenuBar {
    z-index: 2;
    position: absolute;
    padding: 3px;
    background: var(--bg);
    font-size: small;
    font-weight: bold;
    text-align: center;
    width: 100%;
    cursor: default;
    /* center */
    top: 18px;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    overflow: hidden;
}

.videoMenuBar button {
    float: right;
    margin-right: 3px;
    color: #fff;
    background: transparent;
    border-radius: 5px;
    display: inline;
    border: none;
}

.videoMenuBar button:hover {
    background: orangered;
    /* color: grey; */
    transition: all 0.3s ease-in-out;
}

#videoMediaContainer video {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
}

video {
    width: 100%;
    height: 100%;
    object-fit: var(--videoObjFit);
    border-radius: 5px;
    cursor: pointer;
    max-width: 99vw;
}

video:hover {
    opacity: 0.8;
}

video:fullscreen {
    object-fit: contain;
    opacity: 1;
}

.mirror {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.blur {
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}

#screenMediaContainer {
    display: flex;
    position: relative;
    top: 0;
    left: 0;
    width: 99vw;
    height: 80vh;
    height: 85vh;
    display: none;
}
#screenMediaContainer .Camera {
    width: 100%;
    height: 100%;
}
#screenMediaContainer.screenPlaying {
    display: flex;
}
#screenMediaContainer.screenPlaying .Camera {
    min-width: 100%;
    min-width: max-content;
    margin: auto;
    width: max-content;
    max-height: 75vh;
}
#screenMediaContainer.screenPlaying .Camera video {
    object-fit: fill;
}

#screenMediaContainer.screenPlaying ~ #videoMediaContainer {
    position: relative;
    top: 0;
    height: 19vh;
    position: absolute;
    top: auto;
    height: 18vh;
    width: 100vw;
    display: block;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: auto;
    white-space: nowrap;
}
#screenMediaContainer.screenPlaying ~ #videoMediaContainer .Camera {
    /* --camera-height: 14vh !important;
    --camera-width: 125px !important; */
    --camera-height: 100px !important;
    /* width: 125px; */
    /* height: 15vh; */
    /* display: inline-flex; */
}

@media screen and (max-width: 576px) {
    #videoMediaContainer {
        display: flex;
    }
    .Camera {
        min-width: 45%;
        max-width: calc(var(--camera-height) * 2);
    }
    #screenMediaContainer.screenPlaying {
        width: 99vw !important;
        height: 80vh !important;
    }
    #screenMediaContainer.screenPlaying .Camera {
        min-width: 95vw !important;
        /* height: 75vh; */
        max-height: 90vh;
        max-height: 50vh;
        max-width: 95vw;
    }
    #screenMediaContainer.screenPlaying .Camera video {
        width: 95vw !important;
        /* height: auto; */
    }
    #screenMediaContainer.screenPlaying ~ #videoMediaContainer {
        /* min-height: 100px;
        min-width: 125px; */
    }
    #screenMediaContainer.screenPlaying ~ #videoMediaContainer .Camera {
        --camera-height: 100px !important;
        min-height: 100px;
        min-width: 150px;
    }
}

#youtubeMediaContainer,
#youtubeMediaContainer,
#youtubeMediaContainer iframe {
    position: fixed;
    top: 2rem;
    left: 2rem;
    width: 90%;
    height: 75%;
    left: 5%;
    z-index: 3;
    box-shadow: 2px 2px 2px 2px lightsteelblue;
    margin: auto;
    max-width: 85%;
    max-height: 75%;
}
#youtubeMediaContainer .youtubeCloseBtn {
    position: absolute;
    right: 5px;
    top: 0.5rem;
    width: 25px;
    height: 25px;
    z-index: 20;
    background-color: red;
    border-radius: 5px;
    padding: 5px 0 0 0;
}

#youtubeMediaContainer .youtubeCloseBtn:hover {
    color: black !important;
    font-weight: 900;
}

#__youTube {
    /* position: absolute;
    top: 2vh;
    left: 2vw;
    width: 95vw;
    margin: auto;
    min-width: 95vw;
    height: 80vh;
    min-height: 80vh;
    opacity: 1;
    z-index: 10; */
}
#__youtube iframe {
    /* object-fit: cover;
    top: 0px;
    left: 0;
    width: 100%;
    height: 100%; */
}

#__youtube iframe video {
    /* object-fit: cover;
    top: 0px;
    left: 0;
    width: 100%;
    height: auto; */
}

/* @media screen and (max-width: 576px) and (orientation: landscape) {
    #screenMediaContainer.screenPlaying .Camera {
        max-height: 90vh;
    }
} */

@keyframes show {
    0% {
        opacity: 0;
        transform: scale(0.4) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* https://codepen.io/ksarpotdar/pen/OJxWEPb?editors=0100 */
/* // BASIC */

ul.topVideoContainer {
    display: flex;
    flex-wrap: wrap;
    height: 125px;
    max-height: 150px;
    height: 98vh;
    max-height: 100vh;
    overflow: auto;
}

li.middleVideoContainer {
    height: 40vh;
    flex-grow: 1;
}

li.middleVideoContainer:last-child {
    /* // There's no science in using "10" here. In all my testing, this delivered the best results. */
    flex-grow: 10;
}

li.middleVideoContainer video,
li.middleVideoContainer img {
    max-height: 100%;
    min-width: 100%;
    object-fit: cover;
    vertical-align: bottom;
}

/* // ADVANCED */

/* // Portrait */

@media (max-aspect-ratio: 1/1) {
    li.middleVideoContainer {
        height: 30vh;
    }
}

/* // Short screens */

@media (max-height: 480px) {
    li.middleVideoContainer {
        height: 30vh;
    }
}

/* // Smaller screens in portrait */

@media (max-aspect-ratio: 1/1) and (max-width: 480px) {
    ul.topVideoContainer {
        flex-direction: row;
    }

    li.middleVideoContainer {
        height: auto;
        width: 50%;
    }
    li.middleVideoContainer img,
    li.middleVideoContainer video {
        width: 100%;
        max-height: 75vh;
        min-width: 0;
    }
}

ul.topVideoContainer.filmstrip {
    flex-wrap: nowrap;
    overflow: auto;
    /* // height:125px; */
}

ul.topVideoContainer.filmstrip li.middleVideoContainer {
    height: auto;
    /* // width:auto; */
}

ul.topVideoContainer.filmstrip li.middleVideoContainer img {
    /* // height:125px; */
    width: auto;
}

ul.topVideoContainer::-webkit-scrollbar {
    width: 0.5em;
    height: 0.5em;
}

ul.topVideoContainer::-webkit-scrollbar-button {
    background: #ccc;
}

ul.topVideoContainer::-webkit-scrollbar-track-piece {
    background: #888;
}

ul.topVideoContainer::-webkit-scrollbar-thumb {
    background: #eee;
}