* {
  font-family: arial;
}

/******************** TITLE HEADER **************/
header {
  text-align: center;
  background-color: #e2e2e2;
  font-family: arial;
  font-size: 1.3em;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  margin: auto;
  border-radius: 5px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

a {
  text-decoration: none;
  color: black;
}

#subBanner {
  text-align: center;
  font-family: arial;
  font-size: 1.0em; 
  margin-top: 180px;
}

/******************* SECTION TITLE & CONTENT *******************/
/* describes the look of the section header */
.section {
  display: block;
  background-color: #e2e2e2;
  outline: none;
  border: none;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* hor offset, ver offset, blur, spread, colour */
  border-radius: 25px 25px 0 0;
  margin: auto;
  width: 80%;
  min-width: 250px;
  padding: 15px;
  font-size: 1.0em;
  text-align: left; 
}

/* describes the wrapper holding content inside the collapsible */
.content {
  display: block;
  background-color: #f0f0f0;
  border: none;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  border-radius: 0 0 25px 25px;
  margin: auto;
  width: 80%;
  min-width: 250px;
  max-height: auto;
  padding: 15px;
  font-size: 1.0em; 
}

.content p {
  margin: 0 auto;
  padding: 5px;
}

/************************************ TABLE *********************************/

.basicTable {
  padding: 10px;
}

td {
  padding: 5px;
}


/******************************* INPUT ELEMENTS *****************************/

/* note that input type datetime local is styled in each section above because it needs to look different 
depending on where the input element is located (i.e. different in identification vs growth data table */

input[type=date] {
  width: 150px;
  height: 40px;
  padding: 2px;
  border-radius: 5px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  border: none;
  outline: none;
}

select {
  width: 100px;
  height: 40px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  border: none;
  font-size: 0.9em;
  outline: none;
}

/* when the data element is selected give it a nicer look */
input[type=text]:focus, input[type=number]:focus, input[type=date]:focus, select:focus {
  box-shadow: 0 0 0.75px 0.75px black;
}

#calcCorrAge {
  background-color: white;
  border: none;
  outline: none;
  border-radius: 100px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2);
  float: left;
  margin: auto;
  font-size: 1.1em;
  width: 120px;
  height: 40px;
  cursor: pointer;
  font-weight: bold;
}


/************************************* FOOTER ***************************************/
footer {
  text-align: center;
  font-family: arial;
  font-size: 0.75em;
  padding: 10px;
}