.player {
  display: table;
  width: 100%;
  max-width: 665px;
  text-align: center;
  background: linear-gradient(147.8deg, rgba(176, 30, 255, 0.8) 34.16%, rgba(225, 70, 124, 0.8) 104.51%);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  border-radius: 20px;
  -webkit-box-shadow: none;
          box-shadow: none;
  padding: 28px 32px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .player {
    padding: 16px 20px;
  }
}

.player .song-title {
  font-size: 20px;
  font-weight: 400;
  color: #FFFFFF;
  margin: 0 0 6px 0;
}

@media (max-width: 768px) {
  .player .song-title {
    font-size: 16px;
  }
}

.player .song-author {
  font-family: "Genos", sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: #FFFFFF;
  text-transform: uppercase;
  margin: 0 0 50px 0;
}

@media (max-width: 768px) {
  .player .song-author {
    margin: 0 0 20px 0;
  }
}

.wrap-buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  margin: auto;
}

@media (max-width: 768px) {
  .wrap-buttons {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    position: relative;
  }
}

.wrap-buttons__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 40%;
}

@media (max-width: 768px) {
  .wrap-buttons__item {
    width: 100%;
    margin: 20px 0;
    position: relative;
  }
}

.wrap-buttons__item img {
  cursor: pointer;
}

.wrap-buttons__sound {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 30%;
}

@media (max-width: 768px) {
  .wrap-buttons__sound {
    display: none;
  }
}

.wrap-buttons__sound img {
  cursor: pointer;
}

.wrap-buttons__control {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 30%;
}

@media (max-width: 768px) {
  .wrap-buttons__control {
    width: 100%;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    position: absolute;
  }
  .wrap-buttons__control svg {
    position: relative;
    z-index: 1;
  }
}

.wrap-buttons__control .repeat {
  margin-right: 10px;
  cursor: pointer;
}

.wrap-buttons__control .shuffle {
  cursor: pointer;
}

.wrap-buttons__control img {
  cursor: pointer;
  width: auto;
}

.wrap-buttons .btn {
  cursor: pointer;
  padding: 0 12px;
  min-width: auto;
  height: auto;
  min-height: auto;
}

.progress__container {
  width: 100%;
  margin: 40px 0 0 0;
}

@media (max-width: 768px) {
  .progress__container {
    margin: 20px 0 0 0;
  }
}

.progress__container .progress {
  background: transparent;
  width: 100%;
  height: 3px;
  cursor: pointer;
}

.progress__container .range {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  overflow: hidden;
  height: 3px;
}

.progress__container .range::-webkit-slider-runnable-track {
  height: 3px;
  background-color: rgba(255, 255, 255, 0.5);
}

.progress__container .range::-webkit-slider-thumb {
  background: #0C0C0C;
  cursor: pointer;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  -webkit-appearance: none;
  margin-top: -4px;
  -webkit-box-shadow: -400px 0 0 400px #0C0C0C;
          box-shadow: -400px 0 0 400px #0C0C0C;
}

.progress__container .range::-moz-range-track {
  height: 5px;
  background-color: rgba(255, 255, 255, 0.5);
}

.progress__container .range::-moz-range-thumb {
  background: #0C0C0C;
  cursor: pointer;
  height: 5px;
  border-radius: 0;
  box-shadow: -400px 0px 0px 400px #0C0C0C;
  padding: 0;
  margin: 0;
}

.wrap-buttons__item_line {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.wrap-buttons__item_line .volume {
  background-color: transparent;
  border-radius: 0;
  height: 3px;
  max-width: 70px;
}

.wrap-buttons__item_line .range {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  overflow: hidden;
  height: 3px;
}

.wrap-buttons__item_line .range::-webkit-slider-runnable-track {
  height: 3px;
  background-color: rgba(255, 255, 255, 0.5);
}

.wrap-buttons__item_line .range::-webkit-slider-thumb {
  background: #ffffff;
  cursor: pointer;
  width: 13px;
  height: 13px;
  -webkit-appearance: none;
  margin-top: -4px;
  -webkit-box-shadow: -400px 0 0 400px #ffffff;
          box-shadow: -400px 0 0 400px #ffffff;
}

.wrap-buttons__item_line .range::-moz-range-track {
  height: 4px;
  background: #ffffff;
}

.wrap-buttons__item_line .range::-moz-range-thumb {
  background: #ffffff;
  cursor: pointer;
  height: 4px;
  border-radius: 0;
  box-shadow: -400px 0px 0px 400px #ffffff;
  padding: 0;
  margin: 0;
}

.song-time {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 5px 0;
}

.song-time span {
  color: #ffffff;
}

.active path {
  opacity: 0.5;
}
/*# sourceMappingURL=player.css.map */