* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Style the body */

body {
background-color: transparent;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}


.formwrap {
margin-left: auto;
margin-right: auto;
padding: 5 10 5 5;
margin-top: 20px;
border-radius: 10px;
height: auto;
width: 70%;
border:solid 2px gray;
background-color: #e1fafe;
 
}

.formwrap h2{
text-align: center;
text-decoration: underline;
font-family: Arial, Helvetica, sans-serif;

}


/* Column container */
.row {  
  display: flex;
  flex-wrap: wrap;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-left: 0;
  max-height: auto;
}

.rowSubject {  
  display: flex;
  flex-wrap: wrap;
  margin: 10;
  padding: 10 10 20 10;
  max-height: auto;
}

.rowtable {  
  display: flex;
  flex-wrap: wrap;
  margin-top: 0;
  margin-bottom: 0;
  padding: 5px;
  max-height: auto;
}


/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.lside {
  flex: 30%;
  background-color: white;
  padding: 3px 10px 3px 20px;
  margin-top: auto;
  margin-bottom: auto;
  text-align: right;
  max-width: 30%;
  background-color: #e1fafe;
  
 }

/* Main column */
.rside {  
  flex: 70%;
  background-color: #e1fafe;
  margin-top: 0;
  padding: 3px 20px 3px 10px;
  max-width: 70%;
}


/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
  .row {   
    flex-direction: column;
    margin-bottom: 0;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  }

  .rowtable {  
  flex-direction: row;
}

.formwrap {
height: auto;
padding: 5 5 5 5;
width: 95%;
}

.formwrap h1 {
  font-size: .8rem;
}

  .lside {

  text-align: left;
  max-width: 100%;
  margin-bottom: 2px;
  padding-bottom: 2px;
  }

.rside {  
    max-width: 100%;
    margin-top: 0;
    padding-top: 0;
      }


}