.mt0
{
    margin-top: 0px;
}

.main-color{
    /* background: linear-gradient(90deg, #162a39, #194d75); */
    background: linear-gradient(90deg, #446f8f, #6d91cb);

}

.main-color-rtl{
    background: #16527f;

}

.height100{
    height: 100%;
}

.text-color-white{
    color: white;
    font-size: 28px;
}

.text-color-white-for{
    color: white;
}

.swiper-width{
    width: 230px !important;
}

.icon-circle{
    border: 2px solid #2b9fa3;
    border-radius: 50px;
    padding: 10px 10px;
}

.pd{
    padding: 15px;
    width: 250px;
}


.player {
    transition: all .2s ease;
    position: fixed;
    background-color: rgb(34, 42, 84);
    left: 0;
    right: 0;
    bottom: -17vh;
    height: 17vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
.player.open {
  bottom: 70px;
}
.p-controls-panel {
  width: 90%;
  display: flex;
  align-items: center;
}


.p-buttons {
  width: 20%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.p-title {
  width: 40%;
  color: #fff;
  text-align: start;
}
.p-stop {
  width: 40%;
  display: flex;
  justify-content: end;
}
.p-stop > div {
  /* background-color: red; */
  width: 40%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.p-stop-btn {
  cursor: pointer;
  color: #fff;
}

.p-playpause-track,
.p-prev-track,
.p-next-track {
  padding: 20px;
  opacity: 0.8;
  transition: opacity .2s;
}

.p-playpause-track:hover,
.p-prev-track:hover,
.p-next-track:hover {
  opacity: 1.0;
}

.p-seek-slider_container {
  width: 100%;
  max-width: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Modify the appearance of the slider */
.p-seek_slider,
.p-volume_slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 3px;
  background: black;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

/* Modify the appearance of the slider thumb */
.p-seek_slider::-webkit-slider-thumb,
.p-volume_slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  background: white;
  cursor: pointer;
  border-radius: 50%;
}

.p-seek_slider:hover,
.p-volume_slider:hover {
  opacity: 1.0;
}

.p-seek_slider {
  background-color: #fff;
  width: 100%;
  cursor: pointer;
  height: 3px;
}

.p-volume_slider {
  background-color: #fff;
  width: 30%;
  cursor: pointer;
  height: 3px;
}

.p-current-time,
.p-total-duration {
  color: #fff;
  padding: 5px;
}

i.fa-volume-down,
i.fa-volume-up {
  color: #fff;
  padding: 5px;
}

i.fa-play-circle,
i.fa-pause-circle,
i.fa-step-forward,
i.fa-step-backward {
  color: #fff;
  cursor: pointer;
}
.p-title-p {
  display: none;
}
@media (max-width: 500px) {

  .p-controls-panel {
    width: 100%;
    display: flex;
    flex-direction: column;
    /* align-items: center; */
  }
  .p-buttons {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
  }

  .p-title {
    display: none;
    width: 100%;
    color: #fff;
    text-align: start;
  }
  .p-stop {
    /* display: none; */
    width: 100%;
    display: flex;
    justify-content: end;
  }
  .p-stop > div {
    /* background-color: red; */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .p-title-p {
    display: block;
    overflow-x: auto;
  }
  .p-title-sm {
    width: 300px;
  }
  .p-volume-slider_container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .p-volume_slider {
    width: 60%;
  }
}