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

h1 {
    padding: 0 !important; 
}

.box {
    max-width: 1200px;
    margin: 0 auto;
    text-align: left;
    padding: 0 20px;
    width: 100%; 

    display: flex;
    flex-direction: column;
    justify-content: center;
}

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

.playlist-header {
    display: flex;
    flex-direction: row;

    a {
        text-decoration: none !important;
    }
    
    button {
        display: flex;
        justify-content: center;
        align-items: center;

        width: 100px;
        height: 25px;
        margin-left: 20px; 
        border-radius: 8px;
        background-color: #3f4c5d !important;
        border-color: #3f4c5d !important;
        padding: 0.8em 1.5em; 
    }

    button:hover {
        background-color: grey;
        color: white;
    }
}

#playlist-container  {
    
    height: max-content; 
    /* max-height: 500px;  */
    /* max-height: auto;  */
    overflow-x: scroll; 
    width: 100%; 


    overflow-x: auto;
    white-space: nowrap;
    flex-shrink: 0; 

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

    border: 1px solid grey; 
    border-radius: 8px;

    margin: 5px 0 35px 0; 
    padding: 0 12px 0 0; 

    img {
        cursor: pointer;
        height: auto; 
        /* width: 95%;
        height: 100%;   */
        width: 240px; 
        height: 135px; 
        margin-right: 16px;
        border-radius: 8px;
        display: block; 
    }

    p {
        overflow: hidden; 
        text-overflow: ellipsis;
        margin-bottom: 0 !important;
    }
}

.playlist-video {
    display: flex;
    flex-direction: column;
    padding: 12px 0 0 12px; 
    width: 250px; 
    height: 180px;
}

.video-info {
    display: flex;
    flex-direction: column;
    width: 95%;
    overflow: hidden; 
    text-overflow: ellipsis;
}