@import url('https://fonts.googleapis.com/css2?family=Darker+Grotesque:wght@400;500;600;700;800;900&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#v-player{
font-family: 'Darker Grotesque', sans-serif;
  max-width:560px;
  margin:20px auto;
}
#podcast-player{
  border:1px solid #E7E9F0;
  border-radius:8px;
  padding:20px 25px 10px;
}
.epidode-header{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  color:#879EB4;
}
.epidode-header p{
  margin:0;
  font-size:18px;
}
.epidode-header p a{
  color:#879EB4;
  text-decoration:none;
}
.episode-download{
  font-size:14px;
  color:#879EB4;
  transition:all 0.2s ease-in-out;
}
.episode-download:hover{
  color:#6868d5;
}
#podcast-player .episode-title{
  margin:5px 0 20px;
  font-size:24px;
  line-height:1.2;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
#controls,
.second-part{
  color:#879EB4;
  font-weight:500;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
}
.first-part,
.second-part{ 
  position:relative;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}
.second-part{ 
   flex-grow: 1;
}
#controls i{
  cursor:pointer;
}
#play,
#pause{
  padding:0 15px;
  font-size:36px;
  color:#27509b;
}
#pause{
  display:none;
}
#prev-15,
#next-15{
  position:relative;
  display: inline-block;
  color:#879EB4;
  min-width:30px;
  height:30px;
  cursor:pointer;
  transition:all 0.2s ease-in-out;
  background-color:#C3CED9;
}
#prev-15:hover,
#next-15:hover{
  color:#6868d5;
  background-color:#6868d5;
}
#prev-15::before,
#next-15::before{
  content: "";
  position: absolute;
  background:url("https://howwesolve.com/wp-content/uploads/2020/04/arrow-sec-white.svg") center no-repeat;
  background-size: contain;
  width: 30px;
  height: 30px;
  left: 0;
  top: 0;
}
#prev-15::before{
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}
#prev-15::after,
#next-15::after{
  content:'15';
  position:absolute;
  line-height:30px;
  width:30px;
  text-align:center;
  top:0;
  left:0;
  font-size:16px;
}
#controls .time.current{
  min-width: 45px;
  text-align:right;
}
#controls .time.till-end{
  min-width: 50px;
  text-align:left;
}
#controls .progress-bar {
  margin:0 10px;
  width:100%;
  position:relative;
  height:8px;
  border-radius: 50px;
  overflow:hidden;
}
#controls .default-bar{
  position:absolute;
  top:0;
  left:0;
  width: 100%;
  height: 8px;
  background-color: #E7E9F0;
  border-radius: 50px;
}
#controls .fill-bar {
  position:absolute;
  top:0;
  left:0;
  width: 0;
  height: 8px;
  background-color: #6868d5;
  border-radius: 50px;
}
#controls #seek{
  position:absolute;
  top:0;
  left:0;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  background-color: rgba(0,0,0,0);
  border-radius:50px;
  outline: none; 
  cursor:pointer;
}
#controls #seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 8px;
  height: 8px;
  background: transparent;
  cursor: pointer;
}
#controls #seek::-moz-range-thumb {
  width: 8px;
  height: 8px;
  background: transparent;
  cursor: pointer;
}
#controls #speed{
  position:relative;
  cursor:pointer;
  line-height:30px;
  min-width:40px;
  text-align:center;
}
#controls #speed::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  border:1px solid #C3CED9;
  border-radius:4px;
  width:40px;
  height:30px;
  transition:all 0.2s ease-in-out;
}
#controls #speed:hover{
  color:#6868d5;
}
#controls #speed:hover::before{
  border-color:#6868d5;
}
.wave{
  margin:10px -25px;
  font-size: 0;
}

.wave svg path{
  d:path('M450,40 L0,40 L0,17.3134328 C18.6666667,24.8756219 32,28.6567164 40,28.6567164 C52,28.6567164 71,5.97014925 86,5.97014925 C101,5.97014925 107,19.7014925 122,19.7014925 C137,19.7014925 143,0 156,0 C169,0 177,36.4179104 194,36.4179104 C211,36.4179104 208,20.2985075 220,20.2985075 C232,20.2985075 240,28.6567164 256,28.6567164 C272,28.6567164 276,5.97014925 289,5.97014925 C302,5.97014925 314,23.2835821 326,23.2835821 C338,23.2835821 354,10.7462687 365,10.7462687 C376,10.7462687 397,32.8358209 408,32.8358209 C415.333333,32.8358209 429.333333,27.6616915 450,17.3134328 L450,40 Z');
  animation: 4s infinite;
}

@keyframes morph {
  0%, 100%{
    d:path('M450,40 L0,40 L0,17.3134328 C18.6666667,24.8756219 32,28.6567164 40,28.6567164 C52,28.6567164 71,5.97014925 86,5.97014925 C101,5.97014925 107,19.7014925 122,19.7014925 C137,19.7014925 143,0 156,0 C169,0 177,36.4179104 194,36.4179104 C211,36.4179104 208,20.2985075 220,20.2985075 C232,20.2985075 240,28.6567164 256,28.6567164 C272,28.6567164 276,5.97014925 289,5.97014925 C302,5.97014925 314,23.2835821 326,23.2835821 C338,23.2835821 354,10.7462687 365,10.7462687 C376,10.7462687 397,32.8358209 408,32.8358209 C415.333333,32.8358209 429.333333,27.6616915 450,17.3134328 L450,40 Z');
  }
 30%{
    d:path('M450,40 L0,40 L0,13.3333333 C14.6666667,9.12280702 26,7.01754386 34,7.01754386 C46,7.01754386 53,26.6666667 68,26.6666667 C83,26.6666667 90,16.1403509 105,16.1403509 C120,16.1403509 141,0 154,0 C167,0 173,20.3508772 190,20.3508772 C207,20.3508772 225,0 237,0 C249,0 245,16.1403509 261,16.1403509 C277,16.1403509 278,9.8245614 291,9.8245614 C304,9.8245614 314,28.7719298 326,28.7719298 C338,28.7719298 354,13.3333333 365,13.3333333 C376,13.3333333 397,7.01754386 408,7.01754386 C415.333333,7.01754386 429.333333,9.12280702 450,13.3333333 L450,40 Z')
  }
  70%{
    d:path('M450,40 L0,40 L0,17.3134328 C17.3333333,9.75124378 30,5.97014925 38,5.97014925 C50,5.97014925 57,28.6567164 72,28.6567164 C87,28.6567164 99,2.98507463 114,2.98507463 C129,2.98507463 142,28.6567164 155,28.6567164 C168,28.6567164 166,10.7462687 183,10.7462687 C200,10.7462687 206,32.8358209 218,32.8358209 C230,32.8358209 234,0 250,0 C266,0 270,14.9253731 283,14.9253731 C296,14.9253731 309,5.97014925 321,5.97014925 C333,5.97014925 343,32.8358209 354,32.8358209 C365,32.8358209 387,8.35820896 398,8.35820896 C405.333333,8.35820896 422.666667,11.3432836 450,17.3134328 L450,40 Z')
  }
}

@media (max-width: 767px){
  #controls{
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    text-align:center;
  }
  .first-part,
  .second-part{ 
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    padding:10px 0;
  }
}