/* v19 */  

/* mobile first */
:root {
  --nav-primary-height: 31px;
  --btn-size: 22px;
  --icon-size: 22px;
  --info-font-size: 14px;
  --spacer-width: 11px;
  --nav-margin-lr: 14px;
  --sec-nav-margin-top-bottom: 6px;
}



@media only screen and (min-width: 361px) {
  :root {
  --nav-primary-height: 32px;
    --btn-size: 24px;
    --icon-size: 24px;
    --info-font-size: 16px;
    --spacer-width: 11px;
    --nav-margin-lr: 16px;
    --sec-nav-margin-top-bottom: 6px;
  }
}





* { 
  box-sizing: border-box; 
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
} 


  
[class*="btn-"] { 
  background-color: #f0f0f0; 
  display: inline-block; 
  margin-top: 4px;
  border-radius: 2px;
  width: var(--btn-size); 
  height: var(--btn-size); 
} 

.btn-prev {
  content: url("../images/prev_24dp.svg");
} 

.btn-next { 
  content: url("../images/next_24dp.svg");
} 

.btn-play { 
  content: url("../images/play_24dp.svg");
} 

.btn-pause { 
 content: url("../images/pause_24dp.svg");  
} 

.btn-home { 
 content: url("../images/home_24dp.svg");   
} 

.btn-continue { 
 content: url("../images/loop_24dp.svg");
} 

.btn-endless { 
 content: url("../images/endless_24dp.svg");
} 

.btn-expand-nav {
 content: url("../images/expand_24dp.svg");
} 

.btn-expand-nav-expanded {
  content: url("../images/expand_less_24dp.svg");
} 

.btn-plus {
  content: url("../images/plus_24dp.svg"); 
} 

.btn-minus{
  content: url("../images/minus_24dp.svg"); 
} 

.btn-interval{
  content: url("../images/interval_24dp.svg"); 
} 
.btn-interval-active{
  content: url("../images/interval_active_24dp.svg"); 
} 

.div-spacer-nav {
  display: inline-block; 
  width: var(--spacer-width);
}

.div-h-spacer {
  height: 4px;
}

.div-pause {
  content: url("../images/speed_Green_24dp.svg");
}

.div-speed {
  content: url("../images/speed_24dp.svg");
}


[class*="icon-"] { 
  width: var(--icon-size);
  height: var(--icon-size); 
} 

.icon-relax{
  content: url("../images/relax_24dp.svg");
}

.icon-speed{
  content: url("../images/speed_24dp.svg");
}

.icon-font{
  content: url("../images/font_24dp.svg");
}

.span-pause-speed {
  margin: 0px;
  position: absolute;
  -ms-transform: translateY(20%);
  transform: translateY(20%);
  font-size: var(--info-font-size);
}


.nav-primary{
  position: -webkit-sticky;
  position:sticky; 
  top:0;
  width: 98%;
  height: var(--nav-primary-height);
  /* Höhe ergibt sich aus den Elementen darin */
  background:#e0e0e0; 
}


.nav-secondary{
  position: -webkit-sticky;
  position:sticky;
  padding: 0px;
  max-height: 0;
  width: 98%;
  display: flex; 
  overflow: hidden;
  background-color: #fbfbfb;
  // background-color: SkyBlue;

}

.nav-block-pause {
  width: 32%;
  display: flex; 
  justify-content: flex-start; 
  margin: var(--sec-nav-margin-top-bottom) var(--nav-margin-lr);
}

.nav-block-other {
  width: 33%;  
  display: flex; 
  justify-content: flex-end; 
  margin: var(--sec-nav-margin-top-bottom); 
  padding: 0 var(--nav-margin-lr);
}

