/*Skin-1*/
.knr_player {
    margin-bottom: 20px;
    margin-top: 20px;
    padding: 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.knr_play_button {
    height: 96px;
    padding: 19px;
    box-sizing: border-box;
    background-repeat: no-repeat;
    cursor: pointer;
}
.player-bg {
    height: 65px;
    width: 65px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    text-align: center;
    position: relative;
    -webkit-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}
.text-center{
    text-align: center;
}


.knr_player .knr-volume-controls img.speaker-icon,
.knr_player .knr-volume-controls img.mute-icon {
    display: inline-block;
}
.knr_player .knr_play.player-animate > .play-icon,
.knr_player .knr_play:not(.player-animate) > .pause-icon,
.knr_player .knr-volume-controls.mute .speaker-icon,
.knr_player .knr-volume-controls:not(.mute) .mute-icon {
    display:none;
}

.knr img{
    height: auto;
    max-width: 100%;
    vertical-align: middle;
    width: inherit;
}
/*.knr_control img,*/
.the_content img.speaker-icon,
img.speaker-icon,img.mute-icon,
.the_content img.mute-icon {
    width: 30px;
    height: 30px;
    cursor: pointer;
    padding: 0;
}
.knr_player .player-bg.knr_play img {
    padding: 0;
}

/*Skin-2*/
.knr_player_2 {
    margin-top: 10px;
    margin-bottom: 10px;
}
.knr_player_2 .knr_player_box p{
  margin-bottom: 3px;
}
.knr_player_2 .knr_player_box p:last-child{
  margin-bottom: 10px;
}
.knr_player_2 .knr_volume_control.mute .speaker-icon,
.knr_player_2 .knr_play_control.player-animate>.play-icon,
.knr_player_2 .knr_volume_control:not(.mute) .mute-icon,
.knr_player_2 .knr_play_control:not(.player-animate)>.pause-icon {
    display:none;
}
.knr_player_2 .knr_play_control .play-icon,
.knr_player_2 .knr_play_control .pause-icon {
    width: 30px;
    height: 30px;
    cursor: pointer;
    padding: 0;
}
.knr_player_rect {
    display: inline-flex;
    max-height: 250px;
    align-items: center;
    padding: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
}
.knr.knr_player_2 .knr_player_rect img {
    margin-right: 10px;
    padding: 0;
    max-width: 120px;
    max-height: 120px;
}
.knr_player_2 .knr_player_icon{
    width: 150px;
    height: 150px;
    padding: 10px;
}
.knr_player_2 .knr_control {
    display: inline-flex;
}
.knr_player_2 .knr_volume_control> .knr_volume{
    z-index: -99;
    visibility: hidden;
    animation-duration: 1s;
}
.knr_player_2 .knr_volume_control:hover .knr_volume{
    z-index: 1;
    visibility: visible;
}
.knr_player_2 .knr_volume_control {
    width: 100px;
    height: 50px;
    position: relative;
    margin-left: 10px;
}
.knr_player_2 .knr_volume_control .knr_volume {
    position: absolute;
    left: 35px;
    top: 15px;
    margin: 0 auto;
    height: 5px;
    width: 50px;
    background: #555;
    border-radius: 15px;
}
.knr_player_2 .knr_volume_control .knr_volume .ui-slider-range-min {
  height: 5px;
  width: 50px;
  position: absolute;
  background: #2ecc71;
  border: none;
  border-radius: 10px;
  outline: none;
}
.knr_player_2 .knr_volume_control .knr_volume .ui-slider-handle {
  width: 15px;
  height: 20px;
  border-radius: 20px;
  background: #e5aa17;
  position: absolute;
  margin-top: -5px;
  cursor: pointer;
  outline: none;
}

img.speaker-icon,
img.mute-icon {
  padding: 0!important;
}

/*skin-3*/
/*Playlist player*/
.knr_palyer_pl_play {
  /*width: 330px;*/
  min-height: 400px;
  background: -webkit-linear-gradient(90deg, #1F1C2C 10%, #928DAB 90%);
  /* Chrome 10+, Saf5.1+ */
  background: -moz-linear-gradient(90deg, #1F1C2C 10%, #928DAB 90%);
  /* FF3.6+ */
  background: -ms-linear-gradient(90deg, #1F1C2C 10%, #928DAB 90%);
  /* IE10 */
  background: -o-linear-gradient(90deg, #1F1C2C 10%, #928DAB 90%);
  /* Opera 11.10+ */
  background: linear-gradient(90deg, #1F1C2C 10%, #928DAB 90%);
  /* W3C */
  overflow: auto;
  margin-bottom: 15px;
  border-radius: 13px;
  box-shadow: 0 10px 8px -8px #333;
  color: #fff;
}

.knr_palyer_pl_play .audio-image {
  position: relative;
  overflow: hidden;
  height: 200px;
  margin-top: 10px;
  margin-bottom: 10px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.text-center {
  text-align: center;
}

.text-bold {
  font-weight: bold;
}

.knr_palyer_pl_play .audio-player {
  margin: 5px;
}

.knr_palyer_pl_play .volume {
  -webkit-appearance: none;
  width: 100%;
  height: 2px;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background: -moz-linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background: -webkit-linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.5s;
  transition: 0.5s;;
}

.knr_palyer_pl_play .volume::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background: -moz-linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background: -webkit-linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  cursor: pointer;
  transition: 0.5s;
  -webkit-transition: 0.5s;
}

.knr_palyer_pl_play .volume:hover {
  opacity: 1;
}

.knr_palyer_pl_play .volume::-moz-range-thumb {
  width: 15px;
  height: 15px;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background: -moz-linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background: -webkit-linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  cursor: pointer;
  transition: 0.5s;
  -webkit-transition: 0.5s;
}


/*Control*/
.knr_palyer_pl_play .knr_control {
  width: 100%;
  text-align: center;
  margin-top: 10px;
}
.knr_palyer_pl_play .buttons {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.knr_palyer_pl_play .next,
.knr_palyer_pl_play .prev,
.knr_palyer_pl_play .stop,
.knr_palyer_pl_play .pause,
.knr_palyer_pl_play .play {
  max-width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  margin: 0 2px;
  cursor: pointer;
  height: auto;
  width: 20%;
}

/*Play tracker*/
.knr_palyer_pl_play .tracker {
  width: 100%;
  display: inline-flex;
  align-items: center;
}

.knr_palyer_pl_play .progress-bar {
    background-color: #1a1a1a;
    height: 5px;
    width: 100%;
    margin-right: 5px;
    border-radius: 5px;
    box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
}

.knr_palyer_pl_play .stripes {
    background-size: 30px 30px;
    background-image: linear-gradient(
        135deg,
        rgba(255, 255, 255, .15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, .15) 50%,
        rgba(255, 255, 255, .15) 75%,
        transparent 75%,
        transparent
    );
}

.knr_palyer_pl_play .progress-bar-inner {
  display: block;
  height: 5px;
  width: 0;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background: -moz-linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background: -webkit-linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
  position: relative;
  transition: 0.5s;
  -webkit-transition: 0.5s;
}

.knr_palyer_pl_play .duration {
    padding: 4px 8px;
    background: #000;
    color: #fff;
    border-radius: 5px;
    width: 60px;
    text-align: center;
}

.knr_palyer_pl_play .playlist {
  list-style: none;
    margin: 0;
    padding: 0;
}

.knr_palyer_pl_play .playlist li {
  cursor: pointer;
  margin: 5px 0;
  border-radius: 5px;
  padding: 3px;
  transition: 0.5s;
  -webkit-transition: 0.5s;
}

.knr_palyer_pl_play .playlist li:hover,
.knr_palyer_pl_play .playlist li.active {
  font-weight: bold;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background: -moz-linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background: -webkit-linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  -webkit-animation: gradientBG 15s ease infinite;
  -moz-animation: gradientBG 15s ease infinite;
  animation: gradientBG 15s ease infinite;
}


@-webkit-keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@-moz-keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}