nav{
  /*temp settings for update_timer object*/
  display: block;
  position: fixed;
  top: calc(100vh*0.65);
  right: 10px;
  z-index: 99;
}
/*Progress bar at bottom*/
.progress { 
  /*margin-top: 26px;*/
  height: 5px;  
  position: fixed;/*absolute;*/
  z-index: 100;
  bottom: 68px;
  width: 100vw;
  /*background-color: rgba(0,0,0,0.75);*/
}

#progress-amount {
  display: block;
  height: 5px; /*100%*/
  background-color: var(--lemon);
  width: 0;
  padding: 0;
}

.bottom-10px{
  margin-top: 10px;
}
.dashed-border{
  border: 1px dashed var(--darkish-sky);
}

.glass_circle{
  background: rgba(255,255,255,0.4);
  width: 45px;
  height: 45px;
  line-height: 35px;
  border-radius: 50%;
  color:var(--backish-blue);
}
#canvas{
  position: absolute;
  margin-top: -303px;
  margin-left: auto;
  margin-right:auto;
  left:0;
  right:0;
  transform: rotate(-90deg);
}
/* Bottom menu and player*/
#currSong, .closeBtn, #list-icon, #listIcon{display: none;}
#player, #player2{
  display: block;
  position: fixed;
  bottom: 0;
  z-index: 100;
  float:none;
  box-sizing: content-box;
  background-color: var(--dark-smoke);
  padding: 0px;
  border-radius: 15px;
}
#player{height: 65px;}
#player2{height: 68px;}

/*vol_input
.volume-vertical{
  display: flex; position: fixed; bottom: 73px;
  transform:rotate(-90deg);  width: 80px;
}.volume-none{display: none;}*/
/*Playlist elements*/
input[type="range"]{
  color: var(--lemon);
  --thumb-height: 1.125em;
  --thumb-width: 1.125em;
  --track-height: 1.125em;
  --track-color: rgba(0,0,0,0.2);
  background: var(--light-sky);
  width:12.5em;
  border-radius: 1.125em;
}
input[type="range"],input[type="range"]::-moz-range-track,input[type="range"]::-moz-range-thumb {
	appearance: none;
	transition: all ease 100ms;
	height: var(--thumb-height);
}

input[type="range"]::-moz-range-thumb {
	background: currentColor;
	border: 0;
	width: var(--thumb-width, var(--thumb-height));
	border-radius: var(--thumb-width, var(--thumb-height));
}
input[type="range"]::-moz-range-progress {
	appearance: none;
	background: currentColor;
	transition-delay: 30ms;
}

input[type="range"]::-moz-range-track,input[type="range"]::-moz-range-progress {
	height: var(--track-height);/*calc(var(--track-height) + 1px)*/;
	border-radius: var(--track-height);
}

#artwork{
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
}
.col_23{width:23.5%;}
.col80{width:80%;}
/*img{filter: opacity(30%);}*/
.col_artist{
  /*background-color: var(--dark-smoke);*/
  width: 65%;
  padding: 10px;
}

.colArtist{
  /*5px 10px*/
  padding: 0px;}
.colImg{
  width: 100%;/*20%*/
  height: 220px;
  /*padding: 7px;*/
}
.colImg img, .col15 img, .imgCol{
  border-radius: 5px;
}

#dark_bkg{
  background:rgba(0,0,0,0.75);
  height: 100vh;
}
#play2, #playBtn{
  border:4px var(--lemon) solid;
  border-radius: 50%;
}
.bold_medium{
  font-size: medium;
  font-weight: bold;
}

.bkg_cd_case{
  background: no-repeat url("../assets/vinyl_record.svg");
  background-size: cover;
  background-position-x: center;
}

.bkg_cd_icon{
  height: 300px;
  background: no-repeat url("../assets/CD_icon.svg");
  background-position-x: center;
  /*margin-left: 28px;
  margin-top: -5px;*/
}
#coverCD{
  background-size:300px;
  display: grid;
  place-items: center;
  padding-top: calc(100vh*0.07);
}
#coverCD img{
  border-radius: 50%;
  border: 5px var(--black-transparent) solid;
}
.vinyl_like{
  /*https://www.pyxofy.com/css-art-how-to-make-a-turntable/*/
  background: repeating-radial-gradient(var(--dark-smoke),
  var(--darkish-sky) 3px,
  var(--darkish-sky) 3px);
}
/*Player controls*/

.paused path{
  fill: var(--light-sky);
  stroke: var(--light-sky);
}
.paused circle,.play_on circle{
  fill: var(--dark-smoke);
  stroke:var(--lemon);
}
/*.play_on circle{fill: var(--dark-smoke);stroke: var(--lemon);}*/

#station_info, #stationInfo{
  position: absolute;
  width: 30%;
}
#stationInfo{
  bottom: 68px;
}
#station_info{
  width: 100vw;
  bottom: 60px;
}
.info_block{
  width: 100%;
  position: absolute;
  bottom: 0px;
  border-radius: 5px;
}
.info_block div > span.small {  
  position: absolute;
  right: 5px;
}
.pos_rel{
  position: relative;
}
#stat_name h3{margin:0px;}
#cover_title{padding-left: 10px;}
#cover_art{
  position: relative;
  text-align: center;
}
#cover_art img{ border-radius: 8px; /*filter: opacity(50%);*/ }

.outer_div{
  align-items: stretch;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  overflow-y: hidden;
}
.card{
  max-width: 19%;/*23.5%;*/
  flex-basis: 20%;/*23.5%;*/
  flex-grow: 0;
  flex-shrink: 0;
  margin-right: 8px;
}

.center{text-align: center;}
.cardTitle{margin-right: 10px;}
.no_desktop{display: none;}
/*.cardTitle h2{margin: 0px;}*/
@media (max-width: 700px) {
  /*.vol_pad{ padding: 5px 20vw;}*/
  .outer_div{
    width: 100%;
    overflow-x: auto;
    /*flex-wrap: nowrap;all items in one single row*/
  }
  #cover_art{
    display: block;
    padding-top: 5px;
  }
  .card{
    /*43% x-scrollable*/
    max-width: 47%;
    flex-basis: 47%;
    margin-right: auto;
    margin-left: auto;
  }
  .cardTitle{ 
    margin-right: 0px; 
    margin-top: 1vh;
    text-align: center;
  }
  .info_block{ left:0px;}
  /*.cardTitle h2{ /*margin:0px;// font-size: medium;}*/
  #coverCD img{width: 70vw;}
  #coverCD{padding-top: calc(100vh*0.07);}
  /*.bkg_cd_icon{ margin-left: 55px; }*/
  #stationInfo{ 
    bottom: 65px;/*142px;*/
    position: fixed;
    width: 100%;
    /*border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    added atop progress bar
    border-radius: 15px 15px 0px 0px;*/
  }
  #player2{ 
    height: 65px;
    width: 97%;
    margin-left: 1.5vw;
  }

  #art_title{ display: none; }
  #now_song, .no_mobil {display: none;}
  #timer{font-size: medium;}

  /*
  .bottom-10px{ margin-bottom: 0px; }
  .bottomText h2{line-height: normal;}*/
  .colImg, .imgCol{padding: 0px;}
  
  .col2, #amia, #artwork, .col_50{width: 100%;}
  #artwork, #dark_bkg{
    height: 100vh;
  }
  #dark_bkg,#cover_title{
    display: block;
  }
  .col_23{width: 50%;}
  
  #listIcon, #toggle-list, #playBtn{
    display: block;  
  }
  
  #list-icon{
    height: 28px;
    width: 28px;    
    background-color: var(--light-sky);
    border: 1px solid var(--light-sky);
  }
  #canvas{
    margin-top: calc(0.75*100vw*-1);
  }
  /*ul li:nth-child(4){text-align: center;}*/
}