body {
    background-color: rgba(255,255,255,0.8);
    font-size: xx-large;
 }
input[type=submit] {
  background-color: lightgreen;
  color: darkgreen;
  height: 5em;
  font-size: xx-large;
  font-weight: 900;
  width:150%;
}
input[type=text], input[type=number], input[type=time]  {   
    height: 3em;
    font-size: large;
}
 input[type=datetime-local]  {   
    height: 3em;
    font-size: xx-large;
}
 
.item{
    font-family: sans-serif;
}
.item.thisstop{
    font-weight: bold;
    font-color: crimson;
}
.item1 {
    grid-column-start: 1;
    grid-column-end:2;
}
.item2{
    grid-column-start: 2;
    grid-column-end:3;
}
.item3{
    grid-column-start: 3;
    grid-column-end:4;
}
.item4{
    grid-column-start: 4;
    grid-column-end:5;
}
.item5 {
    grid-column-start: 1;
    grid-column-end:2;
}

/*
==================  Grid and Flexbox mods here ==================================  
================== Start with defining and styling areas =============================================
*/
 .logo{
     grid-area: logo;
     align-self: center;
     background-color: yellow;
 }
 .page-header{
    display: flex;
    grid-area: page-header;
    align-items: center;
    background-color: crimson;
    color: white;
    font-weight: bold;
    font-size: larger;
    justify-content: center;
 }
.run-header{
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    grid-area: run-header;
    color: darkblue;
    background-color: lightyellow;
    font-weight: normal;
}
.location-header{
    grid-area: location-header;
     align-items: center;
    display: flex;
    flex-direction: column;
    color:darkgreen;
    background-color: yellow;
}

.action1{
    grid-area: action1;
    align-items: center;
    display: flex;
    flex-direction: column;
    color:darkblue;
    background-color: lightgrey;
    justify-content: space-between;
}
.action2{
    grid-area: action2;
    align-items: center;
    display: flex;
    flex-direction: column;
    color:darkblue;
    background-color: darkgrey;
    justify-content: space-between;
}
.action3{
    grid-area: action3;
    align-items: center;
    display: flex;
    flex-direction: column;
    color:darkblue;
    background-color: lightgrey;
    justify-content: space-between;
}
.action4{
    grid-area: action4;
    align-items: center;
    display: flex;
    flex-direction: column;
    color:darkblue;
    background-color: darkgrey;
    justify-content: space-between;
}
.action5{
    grid-area: action5;
    align-items: center;
    display: flex;
    flex-direction: column;
    color:darkblue;
    background-color: lightgrey;
    justify-content: space-between;
}
 .footer {
   display: flex;
   grid-area: footer;
   justify-content: center;
   align-items: center;
   color: lightgrey;
   background-color: lightyellow;
 }
  .grid-container{
    width: 98%;
    display: grid;
   background-color: crimson;
   color: white;
   padding: 12px 20px;
   border: none;
   border-radius: 4px;
   cursor: pointer;
   grid-template-rows: 3em 6em;
   grid-auto-rows: 14rem;
   grid-template-columns: 1fr ;
   grid-template-areas:
           "page-header"
           "run-header"
           "action1"
           "action2"
           "action3"
           "action4"
           "action5"
           "footer";
    grid-column-gap: 10px;
    grid-row-gap:   5px;
    padding: 10px;
}
  .grid-container2{
    width: 98%;
    display: grid;
   background-color: crimson;
   color: white;
   padding: 12px 20px;
   border: none;
   border-radius: 4px;
   cursor: pointer;
   grid-template-rows: 3em ;
   grid-auto-rows: 14rem;
   grid-template-columns: 1fr ;
   grid-template-areas:
           "page-header"
           "selection1"
           "selection2"
           "footer";
    grid-column-gap: 10px;
    grid-row-gap:   5px;
    padding: 10px;
}
.selection1{
    grid-area: selection1;
    align-items: center;
    display: flex;
    flex-direction: column;
    color:darkblue;
    background-color: darkgrey;
    justify-content: center;
    font-size: xx-large;
}
.selection2{
    grid-area: selection2;
    align-items: center;
    display: flex;
    flex-direction: column;
    color:darkblue;
    background-color: darkgrey;
    justify-content: center;
}
/*
==================  Grid and Flexbox mods end ==================================  
==================  Global styles here  =============================================
*/
p {
    color: crimson;
}
h2 { 
    color:crimson;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}
h3 { 
    color:crimson;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}
.ErrorBar {
    color:yellow;
    background-color: crimson;
    text-align: center;
    font-size: x-large;
}
.ErrorMsgs {
    color:white;
    background-color: crimson;
    text-align: center;
    font-size: small;
}
.WarnBar {
    color:darkgray;
    background-color:gold;
    text-align: center;
    font-size: x-large;
}
.WarnMsgs {
    color:darkgray;
    background-color: gold;
    text-align: center;
    font-size: small;
}
/*
==================  Variations & Fallbacks here ==================================  
*/
@media all and (min-width: 992px) {
.grid-container{
    width: 98%;
    display: grid;
   grid-template-rows: 3em 2em;
   grid-auto-rows: 4rem;
   grid-template-areas:
           "page-header"
           "run-header"
           "action1"
           "action2"
           "action3"
           "action4"
           "action5"
           "footer";
}
.run-header{
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-around;
    grid-area: run-header;
    color: darkblue;
    background-color: lightyellow;
    font-weight: normal;
    font-size: x-large;
}
 .action1{
    flex-direction: row;
    justify-content: space-around;
    font-size: x-large;
  }
   .action2{
    flex-direction: row;
    justify-content: space-around;
    font-size: x-large;
  }
  .action3{
    flex-direction: row;
    justify-content: space-around;
    font-size: x-large;
  }
   .action4{
    flex-direction: row;
    justify-content: space-around;
    font-size: x-large;
  }
  .action5{
    flex-direction: row;
    justify-content: space-around;
    font-size: x-large;
  }
  input[type=submit] {
  background-color: lightgreen;
  color: darkgreen;
  height: 1.7em;
  font-size: x-large;
  font-weight: 900;
}
input[type=text], input[type=number], input[type=time]  {   
    height: 2em;
    font-size: large;
}
input[type=datetime-local]  {   
    height: 3em;
    font-size: x-large;
}
 .grid-container2{
    width: 98%;
    display: grid;
   background-color: crimson;
   color: white;
   padding: 12px 20px;
   border: none;
   border-radius: 4px;
   cursor: pointer;
   grid-template-rows: 3em ;
   grid-auto-rows: 6rem;
   grid-template-columns: 1fr ;
   grid-template-areas:
           "page-header"
           "selection1"
           "selection2"
           "footer";
    grid-column-gap: 10px;
    grid-row-gap:   5px;
    padding: 10px;
}
.selection1{
    grid-area: selection1;
    align-items: center;
    display: flex;
    flex-direction: column;
    color:darkblue;
    background-color: darkgrey;
    justify-content: center;
}
.selection2{
    grid-area: selection2;
    align-items: center;
    display: flex;
    flex-direction: column;
    color:darkblue;
    background-color: darkgrey;
    justify-content: center;
}
}
/* ============ end of media setup =====================

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted red;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 360px;
  background-color: #ff6;
  color: #111;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}