/* Global Styles & Colors */
:root {
  --color-background: #386933;

  
  --color-warmup:#787c7e;
  --color-work:#6aaa64;
  --color-rest:#ADD8E6;
  --color-activityrest:#c9b458;
  --color-setrest:#c9b458;
  --color-cooldown:#787c7e;
}

  html {
    height: 100%;
  }

  body {
    height: 100%;
    background-color: var(--color-background);
    margin: 0;
    padding: 0;
    /* Prevent scrollbar appearing on page transition */
    overflow-y: hidden;
  }


#header {
  display:flex;
  background-color:rgb(0, 54, 7);
  color:white;
  height:5em;
  line-height:5em;
  margin-bottom:1em;

}


.header_left {
  display:inline-block;
  width:25%;
  height:100%;
}
.header_mid {
  display:inline-block;
  width:50%;
  height:100%;
  
}
.header_right {
  display:inline-block;
  width:25%;
  height:100%;
  text-align:right;
}




#pagetitle {
  font-size:3rem;
  font-family:arial;
  height:100%;
  text-align:center;
  vertical-align: middle;
    


}

#headericons {
  height:100%;
  padding:0.5em;
  margin-right:0.5em;
}

#headericons img{
  height:4em;
  display:inline-block;
  margin-right:5px;

}

#screen_selection{
  display:block;
  align-items: center; 
  font-family:arial;

}

#screen_running{
  display:block;
  font-family:arial;
  font-size:2em;
  
}

#screen_footer{
  background-color:black;
  position: fixed;
  left: 0;
  bottom: 0;
  height:7em;
  width: 100%;
  text-align: center;
  padding:5px;
  font-family:arial;


}


#screen_footer input[type=button] {
  font-size:1.5em;
  
  height:4em;
  width:7em;
}


#screen_info {
  display:none;
}


#screen_config {
  display:none;
}



#screen_complete {
  display:none;
  font-size:2em;
}


#screen_complete input[type=button] {
  font-size:1em;
  
  height:3em;
  width:7em;
}



#screen_config input[type=button] {
  font-size:1em;
  
  height:3em;
  width:7em;
}


.infobox {

  position: absolute;

  top: 6em;
  left:1em;
  right:1em;
  height:80%;
  margin-left:3%;
  margin-right:3%;

  z-index: 10;

  background-color:white;
  border-radius: 25px;
  
}
.infobox_content {
  position:relative;
  overflow-y: scroll;
  margin:20px;
  height:95%;
  font-family:arial;
  font-size:1.5em;


}


#slots1 {
  margin: 0 auto;
  height: 200px;
  width:90%;

}

@media (min-width:650px)  { 
  #slots1 {
    margin:0 auto;
    height:200px;
    width:600px;
  
  }
  


}

.centered{
  text-align: center;
}



#div_total_time{
  margin-top:1em;
  text-align: center;
  font-size:2rem;
}
#exercise_list{
  font-size:2rem;
  text-align: center;

}    
#div_set_count{
  font-size:2rem;
  text-align: center;
}

#div_activity_count{
  font-size:2rem;
  text-align: center;
}
#div_rep_count{
  font-size:2rem;
  text-align: center;
}

#div_activity {
  font-size:6rem;
  text-align: center;

}

#div_countdown {
  font-size:7rem;
  text-align: center;
}




#div_remaining_time{
  font-size:3rem;
  text-align: center;
}