#player {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;

  display: flex;
  justify-content: center;
  align-items: center;

  border-top: var(--fg-color) solid 1px;
  color: var(--fg-color);
  background-color: var(--bg-color);
}

#player #play-btn {
  display: flex;
  justify-content: center;
  align-items: center;
}

#player .play-icon {
  font-size: 32px;
  cursor: pointer;
}

#player #seekbar {
  margin: 0px 20px 0px 20px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 480px;
  height: 36px;
}

#player #seekbar #bar {
  width: 100%;
  height: 5px;
  background-color: rgb(240, 240, 240);
  border-radius: 10px;
}

#player #seekbar #bar-played {
  position: absolute;
  left: 0;
  width: 0;
  height: 5px;
  background-color: rgb(150, 150, 150);
  border-radius: 10px;
}

#player #seekbar #pos {
  position: absolute;
  left: calc(0% - 8px);
  width: 15px;
  height: 15px;
  background-color: rgb(100, 100, 100);
  border-radius: 50%;
}

#player #time {
  font-size: 80%;  
}

#player #duration {
  font-size: 80%;  
}

#player #title {
  margin: 0px 0px 0px 10px;
  width: 256px;
  text-align: right;
}

#player #hidden-player {
  display: none;
}