.video-container {
    height: auto;
 }
 .audio-modal{
    z-index: 100;
    position: fixed;
    margin: 0px;
    color: var(--iq-white);
    background: #141414;
    bottom: 0px;
    right: 0px;
    font-size: 16px;
    width: 100%;
    height: 95px;
    text-align: center;
    line-height: 50px;
    padding-bottom: 100px;
    /* background-color:transparent; */
 }

 .remove-audio{
    /* margin-left: 580px; */
    position: fixed;     
 }

 /* new player css  */

 .player {
    height: 5vh;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
 }

 .details {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    /* margin-top: 15px; */
 }

.track-art {
margin: 15px;
height: 70px;
width: 120px;
background-image: url("https://images.pexels.com/photos/262034/pexels-photo-262034.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260");
background-size: cover;
/* border-radius: 15%; */
}

.now-playing {
font-size: 1rem;
}

.track-name {
font-size: 1rem;
}

.track-artist {
font-size: 1rem;
}

.buttons {
display: flex;
flex-direction: row;
align-items: center;
}

.playpause-track, .prev-track, .next-track {
padding: 25px;
opacity: 0.8;
/* Smoothly transition the opacity */
transition: opacity .2s;
}

.playpause-track:hover, .prev-track:hover, .next-track:hover {
opacity: 1.0;
}

.slider_container {
width: 75%;
max-width: 400px;
display: flex;
justify-content: center;
align-items: center;
/* padding-bottom: 30px; */
}

/* Modify the appearance of the slider */
.seek_slider, .volume_slider {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 5px;
background: black;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}

/* Modify the appearance of the slider thumb */
.seek_slider::-webkit-slider-thumb, .volume_slider::-webkit-slider-thumb {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 15px;
height: 15px;
background: white;
cursor: pointer;
border-radius: 50%;
}

.seek_slider:hover, .volume_slider:hover {
opacity: 1.0;
}

.seek_slider {
width: 60%;
}

.card-body {
  padding: 0.25rem;
}

.volume_slider {
width: 30%;
}

.current-time, .total-duration {
padding: 10px;
}

i.fa-volume-down, i.fa-volume-up {
padding: 10px;
}

i.fa-play-circle, i.fa-pause-circle, i.fa-step-forward, i.fa-step-backward {
cursor: pointer;
}

/* playlist css */

.list-modal{
    z-index: 100;
    position: fixed;
    margin: 0px;
    color: var(--iq-white);
    background: #141414;
    bottom: 100px;
    right: 0px;
    font-size: 16px;
    width: 35%;
    max-height: 400px;
    /* text-align: center; */
    line-height: 10px;
    padding: 10px;
    /* overflow-y: scroll;
    overflow-x: hidden; */
   
 }

 .playlistTables{
   overflow-y: scroll;
   overflow-x: hidden;
   max-height: 380px;
 }

 .listicon{
   margin-top: 40px;
   margin-left: 130px;
 }

 .modal-content {
   background-color: #080808;
 }

 @media only screen and (max-width: 768px) {
    .player {
       flex-direction: column;
       margin-top: 45px;
       height: 1vh;
    }

    .audio-modal{
    z-index: 100;
    position: fixed;
    margin: 0px;
    color: var(--iq-white);
    background: #141414;
    bottom: 0px;
    right: 0px;
    font-size: 13px;
    width: 100%;
    height: 120px;
    text-align: center;
    line-height: 0px;
    /* background-color:transparent; */
    }
    
    .playpause-track, .prev-track, .next-track {
       /* padding: 5px; */
       padding-top: 10px;
       padding-right: 25px;
       padding-bottom: 5px;
       padding-left: 25px;
       
    }

    .list-modal{ 
      bottom: 130px;     
      width: 100%; 
   }

    .remove-audio {
       margin-left: -170px;
       margin-top: 0px;   
      z-index: 999;
    }

    .details {
       margin-top: 15px;
    }
    .track-name {
      display: none;
   }
   .track-artist {
      display: none;
   }
   .listicons{
      margin-bottom: 15px;
   }

 }