*{    
    margin:0;
    padding:0;
    box-sizing:border-box;
    text-transform: capitalize; 
}
body{
    background-color: #fff;
    padding: 20px;
    overflow-x: hidden;
}

.main-video-container{  
   background-color: #fff;
   padding: 15px;
}
.main-video{  
    width: 100%;
 }
.main-vid-title{
    margin-top: 10px;
    font: size 12px;
    color:#444;    
}
.video-list-container{
  
    border: 2px solid #eee;
    background-color:#fff;
    padding: 15px 15px 15px 35px;   
}
.list{
    display: flex; 
    align-items:center;    
    padding: 10px;
    gap: 5px;
    border:1px solid #eee;
    cursor:pointer;
    border-radius: 5px;
    margin-bottom: 10px; 
    min-width: 300px;
    width:auto !important;

}   
.list:last-child{
    margin-bottom: 0;
}

.list:hover{
    background-color: #fffae5;
    color:#fff;
}
.list:active{
    background-color: #eae1be;
    
}
.container-fluid .video-list-container .list:active .list-title {
    color:#10815b;
}
.list-video{    
    color:#444;
    width:20px;
    flex:1;
    flex-direction: column;
}
.list-title{
    font-size: 17px;
    text-align:center;
    flex:1;
    flex-direction: column;
    color:#444
}

@media (max-width:450px) {
    .video-list-container{
        border: none !important;
        padding:15px;
    }
    .main-vid-title{
        margin-top: 10px;
        font-size: 15px;
        text-align:center;  
        
    }
    .list{
        flex-flow:column;
        gap: 10px;
    }
    .list-video{
        width: 100%;
    }
    .list-title{
        font: size 15px;
        text-align:center;
    }
}