/* Podcast Player */
.onkoaudio-player
{
    background-color: #fff;
    position: relative;
}
.onkoaudio-player .player-header
{
    display: flex;
    flex-direction: row;
    padding: 1rem;
    border-top: 1px solid #1D355F;
    border-left: 1px solid #1D355F;
    border-right: 1px solid #1D355F;
}
.player-header .player-header-icon
{
    width: 250px;
    height: 250px;
}
.player-header .player-header-text
{
    padding-left: 2rem;
}
.player-header-text h2.podcast-headline
{
    margin-bottom: 1rem;
}
.player-header-text p.podcast-interlocutor
{
    color: #3C7BB1;
    font-size: 1.5rem;
}
.onkoaudio-player .player-controls
{
    display: flex;
    flex-direction: row;
    padding: 1rem;
    align-items: center;
    border-left: 1px solid #1D355F;
    border-right: 1px solid #1D355F;
}
.player-controls .plause
{
    font-size: 2rem;
    color: #1D355F;
    padding-right: 1rem;
    cursor: pointer;
}
.player-controls .start-time,
.player-controls .ent-time
{
    color: #1D355F;
}
.player-controls .tracker
{
    flex: 1 1 0;
    width: 0;
    padding: 0 1rem;
    display: flex;
}
.player-progress 
{
    background-color: #1D355F;
    appearance: none;
    width: 100%;
    height: 3px;
    outline: none;
    margin: 0;
    cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb 
{
    appearance: none;
    width: 3px;
    height: 20px;
    background: #1D355F;
    border: 0;
    border-radius: 0;
    cursor: grab;
}
input[type="range"]::-moz-range-thumb
{
    appearance: none;
    width: 3px;
    height: 20px;
    background: #1D355F;
    border: 0;
    border-radius: 0;
    cursor: grab;
}
.onkoaudio-player .player-playlist
{
    padding: 1rem;
    border-left: 1px solid #1D355F;
    border-right: 1px solid #1D355F;
}
.player-playlist .onkoaudio-item
{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 1rem;
    cursor: pointer;
}
.player-playlist .onkoaudio-item:last-child
{
    margin-bottom: 0;
}
.player-playlist .play-icon
{
    font-size: 1.5rem;
    width: 20px;
    text-align: center;
    color:#1D355F;
}
.player-playlist .audio-title
{
    font-size: 1rem;
    flex: 1 1 0;
    width: 0;
    color:#1D355F;
    padding-left: 1rem;
    padding-right: 1rem;
}
.player-playlist .playing .audio-title
{
    color: #4bb71b;
}
.player-playlist .audio-date {
    padding-right: 1rem;
}
.player-playlist .playing-icon
{
    display: none;
    align-items: flex-end;
    justify-content: center;
    height: 20px;
    width: 20px;
}
.playing-icon .bar 
{
    height: 1px;
    width: 16px;
    background: #1D355F;
    animation: up  0.9s linear infinite;
    margin: 0.5px;
}
@keyframes up 
{
    0% {
        height: 1px;
    }
    50% {
        height: 20px;
    }
    100% {
        height: 1px;
    }
}
.playing-icon .bar:nth-child(2) 
{
    animation-delay: 0.36s;
}
.playing-icon .bar:nth-child(3) 
{
    animation-delay: 0.12s;
}
.onkoaudio-details
{
    display: none;
    padding: 1rem;
    border-left: 1px solid #1D355F;
    border-right: 1px solid #1D355F;
}
.tab-control
{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 1rem 1rem 1rem;
    border-left: 1px solid #1D355F;
    border-right: 1px solid #1D355F;
    border-bottom: 1px solid #1D355F;
}
.details-img
{
    float: left;
    max-width: clamp(250px, 50vh, 700px);
    padding-right: 1rem;
}
.backward-icon,
.forward-icon
{
    display: none;
}
.onkoaudio-links
{
    padding: 1rem;
    border-bottom: 1px solid #1D355F;
    border-left: 1px solid #1D355F;
    border-right: 1px solid #1D355F;
    display: flex;
    justify-content: space-between;
}
.onkoaudio-abo,
.onkoaudio-share
{
    width: 50%;
    display: flex;
    flex-direction: column;
    z-index: 5;
    background-color: #1D355F;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.7s ease-in-out;
}
.onkoaudio-abo.expanded,
.onkoaudio-share.expanded
{
    max-height: 300px;
}
.onkoaudio-abo
{
    position: absolute;
    bottom: 0;
    left: 0;
}
.onkoaudio-share
{
    position: absolute;
    bottom: 0;
    right: 0;
}
.onkoaudio-overlay-header
{
    padding: 1rem;
}
.onkoaudio-overlay-body
{
    padding: 0 2rem 2rem 2rem;
    display: flex;
}
.onkoaudio-abo .onkoaudio-overlay-body
{
    flex-direction: column;
}
.onkoaudio-share .onkoaudio-overlay-body
{
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap;
}
a.subscribe-link,
a.share-link
{
    color: #fff;
}
a.subscribe-link
{
    width: 100%;
}
.share-link svg
{
    width: 40px;
    height: 40px;
}
.close-overlay
{
    color: #fff;
    float: right;
    font-size: 1.25rem;
    cursor: pointer;
}
.close-overlay:hover
{
    color: #6A9AC5;
}

/* Podcast New */
.newest-podcast-row 
{
    display: flex;
    flex-direction: column;
}
.newest-podcast-item 
{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-bottom: 2rem;
}
.podcast-img
{
    max-width: clamp(150px, 15vh, 250px);
    height: auto;
}
.newest-podcast-play
{
    width: 60px;
    height: 60px;
    margin: 1rem;
}
.newest-podcast-text h3,
.newest-podcast-text p
{
    margin-bottom: 0;
    padding-bottom: 0.5rem;
}
.newest-podcast-text p
{
    color:#3C7BB1;
}
.newest-podcast-links span
{
    color: #3C7BB1;
    cursor: pointer;
}
.newest-podcast-links span:hover
{
    color: #6A9AC5;
}
.shownotes-modal .modal-dialog
{
    max-width: 1600px;
}
.podcast-row
{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.podcast-row > *
{
  max-width: 250px;
  width: 100%;
}
.podcast-box
{
  position: relative;
}
.podcast-box .podcast-img
{
  width: 100%;
  height: auto;
  max-width: 200px;
  margin-top: 2rem;
}
.podcast-box p
{
  position: absolute;
  padding: 5px 15px;
  background: #1E3560;
  border-radius: 2rem;
  right: 30px;
  bottom: -35px;
  color: #fff;
}

@media screen and (max-width: 1024px)
{
    .podcast-img 
    {
        max-width: clamp(150px, 14vh, 200px);
        height: auto;
    }
}

@media screen and (max-width: 620px) 
{
    .backward-icon,
    .plause,
    .forward-icon
    {
        padding-right: 1rem;
        padding-left: 1rem;
        font-size: 2rem;
        color: #1D355F;
        padding-right: 1rem;
        cursor: pointer;
        display: block;
    }
    .backward-icon.inactive,
    .forward-icon.inactive
    {
        color:#3C7BB1;
        cursor: default;
    }
    .onkoaudio-player .player-controls
    {
        flex-wrap: wrap;
    }
    .control-items
    {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding-bottom: 1rem;
    }
    .onkoaudio-player .player-header
    {
        flex-wrap: wrap;
    }
    .player-header .player-header-text
    {
        width: 100%;
    }
    .player-header .player-header-icon
    {
        display: none;
    }
    .player-header-text p.podcast-interlocutor
    {
        font-size: 1rem;
    }
    .tab-control
    {
        flex-wrap: wrap;
        justify-content: center;
    }
    .tab-control .onkovideo-btn
    {
        margin: 0.5rem;
    }
    .player-playlist .audio-title
    {
        font-size: 1rem;
    }
    .player-playlist,
    .onkoaudio-details-wrapper
    {
        max-height: 410px;
        overflow: scroll;
    }
    .podcast-row
    {
        justify-content: space-between;
    }
    .podcast-row > *
    {
        max-width: 175px;
        margin-left: 1rem;
        margin-right: 1rem;
    }
    .podcast-box .podcast-img
    {
        max-width: 175px;
    }
    .podcast-box p
    {
        right: 45px;
    }
    .newest-podcast-play
    {
        display: none;
    }
    .podcast-img
    {
        padding-right: 1rem;
        max-width: 150px;
    }
    .newest-podcast-text h3
    {
        font-size: 1.25rem;
    }
    .player-header-text h2.podcast-headline
    {
        text-align: left;
    }
    input[type="range"]::-webkit-slider-thumb 
    {
        width: 5px;
    }
    input[type="range"]::-moz-range-thumb
    {
        width: 5px;
    }
    .onkoaudio-share .onkoaudio-overlay-body
    {
      justify-content: space-between;
    }
    .onkoaudio-abo, 
    .onkoaudio-share
    {
      width: 100%;
    }
    .details-img
    {
        max-width: 100%;
        float: none;
    }
}
@media screen and (max-width: 450px)
{
    .podcast-row > *
    {
        max-width: 130px;
    }
    .podcast-box .podcast-img {
        max-width: 130px;
      }
      .podcast-box p {
        right: -5px;
        font-size: 0.75rem;
      }
      .newest-podcast-text h3
      {
        font-size: 1rem;
      }
      .newest-podcast-text p
      {
        font-size: 0.75rem;
      }
      .onkoaudio-links
      {
          flex-direction: column;
          align-items: center;
          padding-bottom: 0;
      }
      .onkoaudio-links .onkovideo-btn
      {
        margin-bottom: 1rem;
      }
}