body {
    /*padding-top: 16px;*/
    padding-bottom: 16px;
}
.navbar {
  margin-bottom: 30px;
}
.sounds {
  outline: 1px solid #ccc;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
}
.sounds.active {
  background: #d3f6ff;
}

.sounds:hover {
  background: #d3f6ff;
}
.player {
  width: 600px;
  max-width: 90%;
  margin: 0 auto 30px auto;
}

#audio {
  width: 100%;
}

#graph {
  background-color: rgb(200, 0, 200);
  margin-bottom: 16px;
  position: relative;
}
#graph img {
  width: 100%;
  height: 70px;
  position: relative;
  display: none;
  /* outline: 1px solid red; */
}

#graph div {
  content:'';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color: rgb(100, 0, 100);
}


.pagination-wrap {
  padding-top: 24px;
  display:flex;
  justify-content: center;
}



/* search */
.form-search {
  max-width: 600px;
  margin: 0 auto;
  margin-bottom: 32px;
}

.search-wrap {
  position: relative;
}

.search-autocomplete {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 9999;
  background-color: #FFF;
  outline: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

.search-autocomplete div {
  padding: 4px 8px;
}