:root{
    font-size: 62.5%;
}

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 1;
}




/* ------------- header area -  jumbotron -------------- */
.jumbotron {
  text-align: center;
  background-color: transparent;
  color: black;
  border-radius: 0;
  border-bottom: 10px solid black;
}

.description {
  white-space: pre-wrap;
  
}

/* ------------- main container - timetable ------------ */ 

.main-container{   /* added content */
  width: 80%;
  justify-content:center !important;
  padding-bottom: 10px;
 
}

.row {
  white-space: pre-wrap;
  height: 80px;
  border-top: 1px solid white;
}

/* ----------------  timeblock fields -----------------  */

.time-block {
  
  text-align: center;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
    /* testpoint background - remove later */ 
  background-color: beige;  

}



.hour {
  background-color: #ffffff;         /*    -  temporary disabled */ 
  color: #000000;
  border-top: 1px dashed #000000;
  /* stylling added */
  border-bottom: 1px dashed #000000;
  padding: 1.5rem 2.5rem;  
 
     
}


/* ------- txt - calendar timeline ------  */

textarea {
  background-color: aliceblue; 
  width:100%; 
  background: transparent; 
  /* border: none; */
  resize: none;
  color: #000000;
  border-left: 1px solid black;
  padding: 10px;
}

.past {
  background-color: #d3d3d3;
  color: white;
}

.present {
  background-color: #ff6961;
  color: white;
}

.future {
  background-color: #77dd77;
  color: white;
}

/* ------------------ save button block ---------------------- */ 
.saveBtn {
  border-left: 1px solid black;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  background-color: #06aed5;
  color: white;
}

.saveBtn i:hover {
  cursor: pointer;  /* pointer added */
  font-size: 25px;
  transition: all 0.5s ease-in-out;

}



 /* ---------------------- footer section --------------------- */

.footer{
  border-radius: 0;
  border-top: 10px solid black;
  background-color: transparent;
}

#licence{
  text-align: center;
  color: lightskyblue;
  padding: 5rem;
  max-height: 20rem;

}












/* -------------------- Media -----------------------------------------*/ 


@media screen and (max-width: 1024px) {
  
  
  .container {
    flex-direction: column !important; 
}


.row #textarea, .saveBtn, .time-block {
  width: 100% !important;
  height: auto;
  justify-content: space-around !important;
  margin: 5px;
  padding:2px;
  border: 0.5rem;
  
 }
 .saveBtn {
  border-radius: 15rem;
 }

}