/*
  1. Base
*/

div#pre-load-img-container {
  display: none; }

/*
  2. Components
*/
div.top-container {
  margin-bottom: 40px;
  position: relative; }
  div.top-container div.amplitude-visualization {
    width: 100px;
    height: 100px;
    margin: auto;
    background-color: rgba(0, 0, 0, 0); }


div.control-container {
  margin-top: 40px;
  display: flex; }
  div.control-container div.amplitude-prev {
    width: 18px;
    height: 24px;
    background: url("/static/assets/images/visualization/prev.svg");
    background-size: cover;
    cursor: pointer;
    margin: auto;
    margin-top: 10px; }
  div.control-container div.amplitude-play-pause {
    width: 30px;
    height: 44px;
    cursor: pointer;
    margin: auto; }
    div.control-container div.amplitude-play-pause.amplitude-playing {
      background: url("/static/assets/images/visualization/pause.svg") no-repeat center; }
    div.control-container div.amplitude-play-pause.amplitude-paused {
      background: url("/static/assets/images/visualization/play.svg") no-repeat center; }
  div.control-container div.amplitude-next {
    width: 18px;
    height: 24px;
    background: url("/static/assets/images/visualization/next.svg");
    background-size: cover;
    cursor: pointer;
    margin: auto;
    margin-top: 10px; }

div.meta-data-container {
  margin-top: 40px; }
  div.meta-data-container span.now-playing-name {
    display: block;
    text-align: center;
    margin-bottom: 15px;
    font-size: 28px;
    font-weight: 700;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
  div.meta-data-container span.now-playing-artist-album {
    display: block;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7); }

/*
  3. Layout
*/
div#visualizations-player {
  width: 325px;
  padding: 25px;
  border-radius: 20px;
  margin: auto;
  margin-top: 50px;
  position: relative; }