#btn_vodpages {
    width:fit-content;
}
.vod_body{ 
    display:flex;
    background-color: #000000;
    height: 100%;
    /* display:flex;
     background-color: green;
     flex-direction: row;
   flex-grow: 0;
   flex-shrink: 0;
   height: 100vh;
   width:100vh;
   border-collapse: collapse;
   margin-left: 10vw;
   width: calc(100vw - 3vw - 8px);
    
    */
}

#vod_right {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content:space-between;
    /*flex-wrap:nowrap;
       width:0;
    */
}

#vod_movies_container {
    display: flex;
    height:100%;
    width:100%;
    background-color:#500000FF;

    justify-content: center;
    justify-self: center;
    align-self: center;
    overflow: hidden; /* Hides overflowed content */
    text-overflow: ellipsis; /* Adds ellipsis for overflowing text */
    white-space: nowrap; /* Prevents text wrapping */
    
       /*   flex-flow: row wrap;*/
}
#vod_movies{

    height:100%;
    padding:10px;
    box-sizing: border-box;
    background-color:#300000FF;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-column-gap: 10px;
    grid-row-gap: 20px;
    padding: calc((1vh + 1vw)/2);
     
    /*
       grid-template-rows: repeat(auto-fill, 1fr); 
       justify-self: center;
       width: 100%; //stretch to fit 
       align-self: center;
    */
width:100%;
}

#vod_movie {
    display:flex;
    flex-direction: column;
    height: 100%;
    
    padding: 2%;
    box-sizing: border-box; /*to exclude padding, so pad inside*/
    overflow: hidden; /* do it here to disalllow childs to stretch this  */
    
    overflow: hidden; /* Control overflow */

   /* align-items: center;*/
   /* margin:auto; dont use here*/ 
}

#vod_movie.hover {
   /*margin: 2px;*/
   /*padding: 50px;*/
  transform: scale(105%);
}

#vod_movie_img {
    display:flex;
   
    height: 85%;
    width: auto;
    color: white;
    
    padding: 3px;
    box-sizing: border-box;
    object-fit: contain;
    
    min-height: 0%;
    /*align-self: center;*/
    
}

#vod_movie_name {
  
    flex-grow: 0;
    flex-shrink: 0;
    height: 10%;
  
    color: white;
    font-size: calc((2.0vh + 2.0vw)/2.5);
    margin:auto;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* Limit to 2 lines */
      line-height: 1.2; /* Adjust as needed */
     min-height: calc(1.2em * 2); /* Minimum height to ensure at least 3 lines of space */

    overflow: hidden; /* Hide overflowed content */
    text-overflow: ellipsis; /* Add ellipsis (...) */
 
    max-height: 3em; /* Adjust according to line-height */
    white-space: pre-line; /* Allow text to wrap */
    width: 90%;
    text-align: center;
   


}


#vod_movie_year {
    height: auto;
    /*height: fit-content;*/
    
    color: #9090FFFF;
    text-align: right;
    font-size: 1.8vh;
    
}

#vod_buttons_container {

    display:flex;
    height: fit-content;
    border-collapse: separate;
    border-spacing: 12px;
    background-color: pink;


}

#btn_vodpage_previous {
    font-size: calc((1vh+1vw)*4);
}