html, body {
  height: 100%;
  background-color: lightblue;
  font-family: Arial, Helvetica, sans-serif;
}

.row {
  position: relative;
  display: flex;  
  height: 100%;
}

.column {
  flex: 50%;
  position: relative;
}

.background{
  display:  flex;
  flex-direction: column;
  height: 100%;
}

.pageTitle{
  margin: auto;
  padding: 2%;
  font-size:x-large;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}

.centralContent { 
  background-color: white;
  margin-top: auto;
  margin-bottom: 5%;
  margin-right: auto;
  margin-left: auto;
  width: 80%;
  border: 3px solid black;
  border-radius: 15px;
  padding: 10px;
  flex-grow: 1;
}

.inputDiv{
  border: 1px solid black;
  margin: 1%;
  padding: 1%;
  min-height: 5%;
}

.middleDiv{
  position: relative;
  top: 10px;
  text-align: justify;
}

.bottomDiv{
  position: absolute;
  bottom: 1px;
  text-align: justify;
}

.table{
  width: 100%;
  border-collapse: collapse;
}

.tableCell{  
  width: 33%;
  text-align: center;
  border: 1px solid;
  border-collapse: collapse;
}

.tableHeader{  
  width: 33%;
  text-align: center;
  font-weight: bold;
  border: 1px solid;
  border-collapse: collapse;
}

.tableLine{
  width: 100%;
}

.saveBtn{
  transition-duration: 0.2s;
  width: 98%;
  margin: 1%;
  color: white;
  border-radius: 5px;
  border-width: 1px;

  background-color: #4CAF50;
}

.saveBtn:hover {
  background-color: white;
  color: black;
}

.clearBtn{
  transition-duration: 0.2s;
  width: 98%;
  margin: 1%;
  color: white;
  border-radius: 5px;
  border-width: 1px;

  background-color: lightsalmon;
}

.clearBtn:hover{
  background-color: white;
  color: black;
}