.screen-reader-text {/* Reusable, toolbox kind of class */ position: absolute; top: -9999px; left: -9999px;}

.podcast-image {width: 100%;}

.podcast-image img {width: 100%;}
.podcast-container {font-size: 1em; margin: 0 auto; width: 100%;}

.podcast-container .player {min-height: 100px; margin: 0; position: relative; border: 1px solid #ddd; padding: 20px; background: #eee;}

.podcast-container .player .large-toggle-btn {border: 1px solid #a1a1a1; border-radius: 100%; display: block; font-size: 1.5em; height: 80px; overflow: hidden; padding: 22px 0 0 6px; position: relative; text-align: center; width: 80px; background-color: #333; cursor: pointer;}
.podcast-container .player .large-toggle-btn .large-play-btn,
.podcast-container .player .large-toggle-btn .large-pause-btn {display: inline-block; position: relative; color: #fff;}
.podcast-container .player .large-toggle-btn .large-play-btn:before {content: ""; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-style: normal;}
.podcast-container .player .large-toggle-btn .large-pause-btn {left: -2px;}
.podcast-container .player .large-toggle-btn + .large-pause-btn {border: none;}
.podcast-container .player .large-toggle-btn .large-pause-btn:before {content: ""; font-family: "Font Awesome\ 5 Free"; font-weight: 900; font-style: normal;}

.podcast-container .player .player-buttons {text-align: center; display: inline-block;}
.podcast-container .player .player-buttons .timebtn {display: inline-block; border: 3px solid #333; background: none; margin: 2px; margin-top: 15px; cursor: pointer; font-size: 9pt; font-weight: bold; border-radius: 100%; height: 35px; width: 35px; text-align: center;}
.podcast-container .player .player-buttons .timebtn:hover {background: #333; color: #fff;}
.podcast-container .player .player-buttons .timebtn .fa-stack-1x {font-family: sans-serif !important; font-size: 8px; font-weight: normal;}

.podcast-container .player .info-box {position: relative; top: 15px; width: calc(100% - 95px); display: inline-block; padding: 0 0 0 30px; vertical-align: top;}
.podcast-container .player .info-box .track-description-text {font-size: 80%;}
.podcast-container:not(.individual-player) .player .info-box .track-info-box {margin: 0 0 6px 0; visibility: hidden; width: 100%; zoom: 1;}
.podcast-container .player .info-box .track-info-box .track-title-text {font-weight: bold; text-align: left;}
.podcast-container .player .info-box .track-info-box .audio-time {opacity: 0.7; font-size: 12px;}
.podcast-container .player .info-box .track-info-box .audio-time .duration {float: right;}
.podcast-container .player .info-box .track-info-box:after {clear: both; display: block; font-size: 0; height: 0; visibility: hidden;}


@media screen and (max-width: 600px) {.podcast-container .player .player-buttons {display: block; width: 100%; text-align: right;}
  .podcast-container .player .player-buttons .timebtn {top: -80px; position: relative;}
  .podcast-container .player .info-box {display: block; width: 100%; padding: 0;}
}

.podcast-container .player .progress-box {position: relative;}
.podcast-container .player .progress-box .progress-cell {height: 12px; position: relative;}
.podcast-container .player .progress-box .progress-cell .progress {background: #ddd; border: 1px solid #d9d9d9; border-radius: 5px; height: 8px; position: relative; width: auto; cursor: pointer;}
.podcast-container .player .progress-box .progress-cell .progress .progress-buffer {background: #337ab7; height: 100%; width: 0; transition: 0.2s;}
.podcast-container .player .progress-box .progress-cell .progress .progress-indicator {background: #fff; border: 1px solid #bebebe; border-radius: 50%; cursor: pointer; height: 25px; left: 0; overflow: hidden; position: absolute; top: -10px; width: 25px; transition: 0.2s;}

.podcast-container .player .time-hover-box {position: absolute; display: none; background: #000; color:#fff; border-radius: 4px; top:-40px; opacity: 0.9; padding: 2px 3px; font-size: 10px;}

.podcast-container .player .controls-box {display: none; top: 25px; float: right; position: relative;}
.podcast-container .player .controls-box i:hover {filter: opacity(80%);}
.podcast-container .player .controls-box .previous-track-btn {cursor: pointer; display: inline-block;}
.podcast-container .player .controls-box .previous-track-btn:before {content: ""; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-style: normal;}
.podcast-container .player .controls-box .next-track-btn {cursor: pointer; display: inline-block;}
.podcast-container .player .controls-box .next-track-btn:before {content: ""; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-style: normal;}
.podcast-container .player:before, .podcast-container .player:after {content: " "; display: table;}
.podcast-container .player:after {clear: both; display: block; font-size: 0; height: 0; visibility: hidden;}

.podcast-container .play-list {display: block; margin: 0 auto 20px auto; width: 100%;}
.podcast-container .play-list .play-list-row {display: block; margin: 10px 0; width: 100%; position: relative;}
.podcast-container .play-list .play-list-row .track-image {display: inline-block; width: 100px; line-height: 0}
.podcast-container .play-list .play-list-row .track-controls {display: inline-block; padding-left: 15px; width: calc(100% - 100px);}

.podcast-container .play-list .play-list-row .track-info {font-size: 70%; opacity: 0.7;}
.podcast-container .play-list .play-list-row .track-title .playlist-track {color: #000; text-decoration: none;}
.podcast-container .play-list .play-list-row .track-title .playlist-track:hover {text-decoration: underline;}
.podcast-container .play-list .play-list-row .small-toggle-btn {cursor: pointer; display: inline-block; height: 20px; position: relative; text-align: center; width: 20px;}
.podcast-container .play-list .play-list-row .track-number {margin-right: 10px;}

.podcast-container .play-list .play-list-row .small-toggle-btn .small-play-btn,
.podcast-container .play-list .play-list-row .small-toggle-btn .small-pause-btn {display: inline-block;}
.podcast-container .play-list .play-list-row .small-toggle-btn .small-play-btn:hover,
.podcast-container .play-list .play-list-row .small-toggle-btn .small-pause-btn:hover {opacity: 0.7;}
.podcast-container .play-list .play-list-row .small-toggle-btn .small-play-btn:before {content: ""; font-size: 0.85em; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-style: normal;}
.podcast-container .play-list .play-list-row .small-toggle-btn .small-pause-btn:before {content: ""; font-size: 0.85em; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-style: normal;}

.podcast-container .play-list .play-list-row .small-toggle-btn .small-play-btn::after {content: ''; display: none; position: absolute; width: 35px; height: 35px; border: 2px solid transparent; border-radius: 50%; box-sizing: border-box; animation: drawCircle 1s linear infinite; pointer-events: none; top: 0px; left: -10px;}

@keyframes drawCircle {0% {border-top-color: blue; transform: rotate(0deg); } 25% {border-right-color: blue; transform: rotate(90deg); } 50% {border-bottom-color: blue; transform: rotate(180deg); } 75% {border-left-color: blue; transform: rotate(270deg); } 100% {border-top-color: blue; transform: rotate(360deg); }}

.podcast-container .play-list .play-list-row .small-toggle-btn:hover .small-play-btn::after {display: block; animation-play-state: running;}


.podcast-container .play-list .play-list-row .track-title {display: inline-block;}
.podcast-container .play-list .play-list-row .track-title .playlist-track {text-decoration: none;}
.podcast-container .play-list .play-list-row .track-title .playlist-track:hover {text-decoration: underline;}
.podcast-container .play-list .play-list-row .track-title.active-track {font-weight: bold;}
.podcast-container .play-list .play-list-row:before, .podcast-container .play-list .play-list-row:after {content: " "; display: table;}
.podcast-container .play-list .play-list-row:after {clear: both; display: block; font-size: 0; height: 0; visibility: hidden;}

.individual-player {margin-bottom: 10px; }
.podcast-container-multi .podcast-image {margin-bottom: 1em;}

@media screen and (max-width: 600px) {.podcast-container .play-list .play-list-row .track-title .playlist-track {padding-left: 10px}}

.playlist-waveform {display: none; position: absolute; bottom: 0; right: 20px;}
.individual-player .playlist-waveform {position: relative;}
.play-list-row.current .playlist-waveform {display: block;}
.player.playing .playlist-waveform {display: block;}
.playlist-waveform ul {width:50px; height:45px; display:flex; justify-content:center; align-items:center; padding:0; margin:0; transition:ease 0.2s; position:relative;}
.playlist-waveform ul li{list-style:none; height:30px; width:4px; border-radius:30%; background: #2f2f2f; margin:0 1px; padding:0; animation-name: wave4; animation-duration: 0.5s; animation-iteration-count: infinite; animation-direction: alternate; transition:ease 0.2s;}
.playlist-waveform ul li:nth-child(2) {animation-name: wave2; animation-delay:0.2s;}
.playlist-waveform ul li:nth-child(3) {animation-name: wave3; animation-delay:0.23s; animation-duration: 0.4s;}
.playlist-waveform ul li:nth-child(4) {animation-name: wave4; animation-delay:0.1s; animation-duration: 0.3s;}
.playlist-waveform ul li:nth-child(5) {animation-delay:0.5s;}
.playlist-waveform ul li:nth-child(6) {animation-name: wave2; animation-duration: 0.5s;}
.playlist-waveform ul li:nth-child(8) {animation-name: wave4; animation-delay:0.4s; animation-duration: 0.25s;}
.playlist-waveform ul li:nth-child(9) {animation-name: wave3; animation-delay:0.15s;}
.playlist-waveform ul li:nth-child(10) {animation-delay:0.5s;}

.play-list-row.current.pause .playlist-waveform ul li{animation-duration: 999s;}

@keyframes wave1 {from {transform:scaleY(1);} to {transform:scaleY(0.5);}}
@keyframes wave2 {from {transform:scaleY(0.3);} to {transform:scaleY(0.6);}}
@keyframes wave3 {from {transform:scaleY(0.6);} to {transform:scaleY(0.8);}}
@keyframes wave4 {from {transform:scaleY(0.2);} to {transform:scaleY(0.5);}}


.podcast-image img {border-radius: 8px; max-width: 100%; height: auto; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);}
.individual-player .track-image img {border-radius: 8px; max-width: 100%; height: auto; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);}
.track-image-div {width: 20%;}
.track-player-div {width: 80%;}

@media screen and (max-width: 600px) {
  .track-image-div {width: 100%;}
  .track-player-div {width: 100%; padding: 0;}
  .episode-info {margin-top: 10px;}
}
.episode-info {font-size: 10pt; opacity: 0.8; text-align: right;}