/*Base Layout-------------------------------------------------- */
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    max-height:90%;
    overflow: hidden;
    font-size:1em;
    color: white;
  }

  #main {
    display: flex;
    flex-direction:  row;
    flex-wrap: wrap;
    min-width : 100%;
    max-width : 100%;
    width : 100%;
    overflow: hidden;
  }

  

  #podcasts_all,#episodes_all {
    display: flex;
    align-items: center; 
    justify-content: center;
    min-height:100%;
    max-height:100%;
    height: 100%;
    line-height: 100%; 
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
    border-radius :6px;
    border-color: white;
    border-width: 3px;
    border: solid;
    box-sizing: border-box;
    background:green;
    opacity:1;
    
  }

  #podcasts_status {
    display:flex;
    min-height:100%;
    max-height:100%;
    white-space: nowrap;
    overflow: hidden;
    margin-top: 2px;
    margin-bottom: 2px;
  }

#podcasts_header_buttons {
  display:flex;
  flex-direction: row;
  background: green;
}

#downloads_all {
    min-height:100%;
    max-height:100%;
    height:100%;
    background: black;
    display:flex;
  }

  #podcasts_refresh {
    min-height:100%;
    max-height:100%;
    height:100%;
    background:white;
    display:flex;
  }

  #podcasts_refresh_img {
    border-radius: 12px;
  }

  #podcast_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* aligns items to the left horizontally */
    align-content: flex-start;   /* aligns rows to the top vertically */
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    border-bottom: 1px solid white;
  }

  #podcast_list::-webkit-scrollbar {
    display: none; /* Chrome, Edge, Safari */
  }

  .podcast {
    position: relative;
    align-items: center;
    box-sizing: border-box;    
  }

  .podcast_border.selected {
    opacity: 1;
  }

  .podcast_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .podcast_border {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    opacity: 0;           /* hidden by default */
    pointer-events: none;
    box-sizing: border-box;
    border : 1px solid blue;
  }

  #episode_list {
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
  }

  #episodes_img {
    display:flex;
    height: 100%;
    aspect-ratio: 1 / 1;
  }

  .episode_wrapper {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    max-width:100%;
    overflow:hidden;
    border-top: 1px  solid;
    border-bottom: 1px  solid;
  }

  

  #episodes_status {
    display:flex;
    overflow:hidden;
  }

  .episode_name {
    display:flex;
    width:70%;
    min-width:70%;
    max-width:70%;
    overflow:hidden;
  }

  .mark_played_wrapper {
    display: none;
    font-size: 9px;
    flex-direction: row;
    overflow: hidden;
    color: rgb(94, 237, 94);
  }

  .mark_played {
    display:flex;
    justify-content: center;
    text-align: center;
    min-height:40px;
    max-height:40px;
    height:40px;
    width:25%;
    min-width:25%;
    max-width:25%;
    overflow: hidden;
  }

  .episode_played {
    max-width:10%;
    height:100%;
    overflow:hidden;
  }

  .show_mark_played_wrapper {
    max-width:10%;
    height:100%;
    overflow:hidden;
  }

  .episode_downloaded {
    max-width:10%;
    height:100%;
    overflow:hidden;
  }

  #player {
    display: flex;
    flex-direction: column;
    width: 100vw;
    min-width: 100vw;
    max-width: 100vw;
  }

  #podcast_playing {
    display:flex;
    text-wrap: wrap;
  }

  #playing_wrapper {
    display:flex;
    flex-direction: row;
  }

  #episode_playing {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    text-wrap: wrap;
    overflow: hidden;
  }

  #controls {
    display:flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }

  .audio_button {
    aspect-ratio: 1 / 1;

  }

  #timeline {
    display: flex;
  }


  #player_status {
      display: flex;
  }