/*** remove page title ***/
#block-t2portal-page-title {
	display: none;
}

.box {
    display: flex;
    flex-direction: column;
    justify-content: center;

    width: 100%; 
    max-width: 1600px;
    margin: 0 auto;
    text-align: left;
    padding: 0 20px;
}

.body {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#video-player-container {
    margin: 0 25px 0 25px; 
    display: flex;
    flex-direction: column;
    align-items: left;
    width: 75%;
}

video {
    border-radius: 8px;
    width: 100%;
    flex: 1; 
}

.video-description-container {
    display: flex;
    flex-direction: column;
    padding-top: 20px; 
    /* width: 960px;  */
    /* width: 640px; */
}

.video-title {
    margin: 0 25px 0 25px; 
    padding: 0 0 8px 0; 
}

#playlist-container  {
    
    width: 25%; 
    height: max-content; 
    max-height: 500px; 
    overflow-y: auto;
    flex-shrink: 0; 

    display: flex;
    flex-direction: column;
    align-items: center;

    border: 1px solid grey; 
    border-radius: 8px;
    margin: 0 16px 0 0; 
    padding: 5px 0 5px 0; 

    a {
        width: 50%;
        margin-right: 16px;
        border-radius: 8px;
    }

    img {
        display: block; 
        cursor: pointer;
        border-radius: 8px;
        /* width: 320px;
        height: 180px; */
        /* width: 100%;  */

        width: 176px; 
        height: 99px; 
    }
}

.playlist-video {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 10px 0 10px 0; 
    /* width: 640px; */
    width: 95%; 
    height: 120px; 
}

.thumbnail-container {
    padding: 0 12px 0 0; 
}

.video-info {
    display: flex;
    flex-direction: column;    
    width: 50%; 
    /* width: 320px; */
    /* height: 180px; */
    overflow: hidden; 
    text-overflow: ellipsis;
}

@media (max-width: 1100px) {
    
    .box {
        margin: 0 16px 16px 0; 
    }

    .body {
        flex-direction: column;
        align-items: center;
    }

    .video-title {
        margin: 0; 
    }

    #video-player-container {
        width: 100%;
    }

    #playlist-container {
        width: 100%; 
    }

    .playlist-video {
        justify-content: none;
    }

    .video-info {
        width: 100%;
    }
}