#timesliderpanel {
    position: absolute;
    border-radius: 5px;
    bottom: 20px;
    right: 20px;
    height: 150px; /* Specify a height */
    width: 300px; /* 0 width - change this with JavaScript */
    /* position: fixed; Stay in place */
    z-index: 999; /* Stay on top */
    background-color: white; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    /* padding-top: 60px; Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
    box-shadow: 5px 2px 4px #888888;  /*hor. offset, vert. offset, blur*/
  }

  .playcontrols {
    padding:6px;
    color: rgb(70,70,70);
  }

  .timeslider {
    width: 100%;
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    height: 5px;
    background: #d3d3d3; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
    margin: 20px 20px 20px 20px;
  }
  
  #timecontrols {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
  }

  .button.play {
    width: 74px;
    height: 74px;
    border-style: solid;
    border-width: 37px 0px 37px 74px;
    border-color: red blue green yellow;
  }