:root {
  --song_fsize: 1.25rem;
  --song_list_fsize: 1.25rem;
}

  .fbox, .fbox_list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    height: 2rem;
    align-content: space-between;
    align-items:center;
    margin:0px;
    margin-top:.94rem;
  }
  .fbox_list {
    margin-bottom:.94rem;
}
  .fbil {
    display:inline-flex;
    flex-direction: row;
    /* width: 100%; */
    height: 2rem;
    align-content: space-between;
    align-items:center;
    margin:0px;
    /* outline: 1px solid #ff66ff; */
  }

  .fbox-list { height:1.25rem;}

  .fbox div { margin:0px; }
  
.t-time, .t-time-list {
    font-family: 'Trebuchet MS', Helvetica, sans-serif;
    font-size: var(--song_fsize);
    flex-shrink:0;
    flex-grow:1;
}

.t-time-list { font-size:18px; }

.music {
    margin:0px;
    padding:0px;
    flex-shrink:0;
    flex-grow:2;
    font-family: 'Trebuchet MS', Helvetica, sans-serif;
    text-decoration: none; 
}
.music {
    font-size: 1.31rem;
}
.music-list {
    font-size: 1.125rem;        
    position:relative; 
    left:-20px;
}
.iblock {

  display: inline-block;
}
.circle_box {
  height: 2rem; width:2rem;
  outline: 1 solid orange;
}
a.music {
    /* font-size: var(--song_fsize); */
    outline:none;
    /* outline: 1px solid #564; */
    margin:0;
    margin-left:1rem;
    padding:0;
    border:0;
    color: white;
    position:relative;
    left:0;
    top:0;
    text-decoration: none;
    white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    a.music:hover .circle {
    background-color:blueviolet; 
    background-color:rgb(168, 58, 231);
    opacity: .70; 
    }
    
    .pos_rel {
     position: relative
    }
    .t-title {
      margin-left:.8rem;
      width: 25rem;
      flex-basis: auto; /* default value */
      flex-grow: 1;
    }
    
    .t-time {
      width: 10rem;
      flex-basis: auto; /* default value */
      flex-grow: 0;
      
    }
    
        .circle {
          width: 1.7rem;
          height: 1.7rem;
          transition: background-color 0.3s ease;
          background-color:dodgerblue;
          background-color:#137FED;
          border-radius: 50%;
          /* vertical-align: middle; */
          opacity: .64; 
          position:absolute;
          left:0rem;
          top: .18rem;
        
        }
    
    .play_it {
      visibility: visible;
      width: 0; 
      height: 0; 
      border-top:.3rem solid transparent;
      border-bottom: .3rem solid transparent;
      border-left: .6rem solid rgb(255, 255, 255);
      position:absolute;
      left:0.62rem;
      top: .7rem;
      outline:none;
      opacity:1;
      
    }
    .pause_it {
      visibility: hidden;
      width: .2rem; 
      height: .6rem; 
      border-top: 0px solid transparent;
      border-bottom: 0px solid transparent;
      border-left: .20rem solid rgb(255, 255, 255);
      border-right: .20rem solid rgb(255, 255, 255);
      position:absolute;
      left:0.58rem;
      top: .72rem;
      outline:none;
      opacity:0;
      
    }
    
    .f_single { 
      font-size: var(--song_fsize); 
      font-family: 'Trebuchet MS', Helvetica, sans-serif;
      color:#f5e187;
     
    }
    .v-pad {
       height: .625rem; 
    }
    .f_list { 
      font-size: var(--song_list_fsize); 
      font-family: 'Trebuchet MS', Helvetica, sans-serif;
      color: #f5e187;
    }


    ul.f_list_items, #content ul.f_list_items {
        list-style-type: none;
        margin: 0;  padding: 0;    
    }
   
    ul.f_list_items li, #content ul.f_list_items li {
        margin: 0;  padding: 0;    
        list-style-type: none;
        }
        #content ul.f_list_items li:last-child, ul.f_list_items li:last-child {
        margin-bottom:1.562rem;
      }
     /* end play and pause styles using css bordermade buttons */