/* 
   http://css-tricks.com/snippets/css/a-guide-to-flexbox/
   https://developer.mozilla.org/en-US/docs/Web/CSS/flex
*/   

body{
  background-color: red;
  display: flex;

  /*align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start; /* main axis */
}
#songsSection{
    background-color: lightgreen;
    float: flex-right;
#    width: 300px;
#    top: 100px;
#    right: 10px;
#    position: fixed;
}

#markerSection{
    background-color: lightblue;
    display: flex;
#    width: 300px;
#    position: fixed;
#    top: 100px;
#    right: 320px;
}
#timeSection{
    background-color: lightpink;
#    width: 70px;
    display: flex;
    flex-direction: column;
#    align-content:  stretch;
#    justify-content: space-between;
    align-items: flex-end;
}


nav{
  background-color: khaki;
  height: 100vh;
}

.small{
    margin: 1px;
}

.loopClass input{
    margin: 1px;
    border: 0px;
    padding: 0px;
    padding-right: 1px;
}

/* button style mm    ---   flytta till annan css-fil*/
.dataOutput div{
   display: inline-block; 
}
    
    
.currentSong {
  color: white;
  background-color: purple;
}

.currentMarker{
  color: white;
  background-color: purple;
}

.currentStopMarker{
  color: white;
  background-color: purple;
}

.currentLoop{
  color: white;
  background-color: purple;
}