#para1 { 
  background:#98bf90;
  height:5%;
  width:1%;
  position:relative;
  border: 3px solid;
  text-align: center;
 color: black;
}

#para2 {
 padding :0.5 em;
  background:#98bf80;
  border: 3px solid;
  height:5%;
  width:1%;
  position:relative;
  text-align: center;
 color: black;
}

#para3 {
  padding :0.5 em;
  background:#98bf70;
  border: 3px solid;
  height:5%;
  width:1%;
  position:relative;
  text-align: center;
  color: black;
}

#para3 {
  padding :0.5 em;
  background:#98bf70;
  border: 3px solid;
  height:5%;
  width:1%;
  position:relative;
  text-align: center;
  color: black;
}

#para4 {
  padding :0.5 em;
  background:#98bf60;
  border: 3px solid;
  height:5%;
  width:1%;
  position:relative;
  text-align: center;
  color: black;
}
#para5 {
  padding :0.5 em;
  background:#98bf50;
  border: 3px solid;
  height:5%;
  width:1%;
  position:relative;
  text-align: center;
  color: black;
}

#para6 {
  padding :0.5 em;
  background:#98bf40;
  border: 3px solid;
  height:5%;
  width:1%;
  position:relative;
  text-align: center;
  color: black;
}

#para7 {
  padding :0.5 em;
  background:#98bf45;
  border: 3px solid;
  height:5%;
  width:1%;
  position:relative;
  text-align: center;
  color: black;
}

#para8 {
  padding :0.5 em;
  background:#98bf40;
  border: 3px solid;
  height:5%;
  width:1%;
  position:relative;
  text-align: center;
  color: black;
}
#para9 {
  padding :0.5 em;
  background:#98bf35;
  border: 3px solid;
  height:5%;
  width:1%;
  position:relative;
  text-align: center;
  color: black;
}

#para10 {
  padding :0.5 em;
  background:#98bf30;
  border: 3px solid;
  height:5%;
  width:1%;
  position:relative;
  text-align: center;
  color: black;
}




#panel1, #flip1 {
  padding: 5px;
  text-align: left;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel1 {
  padding: 50px;
  display: none;
}

#panel2, #flip2 {
  padding: 5px;
  text-align: left;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel2 {
  padding: 50px;
  display: none;
}

#panel3, #flip3 {
  padding: 5px;
  text-align: left;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel3 {
  padding: 50px;
  display: none;
}

#panel4, #flip4 {
  padding: 5px;
  text-align: left;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel4 {
  padding: 50px;
  display: none;
}

#panel5, #flip5 {
  padding: 5px;
  text-align: left;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel5 {
  padding: 50px;
  display: none;
}

#panel6, #flip6 {
  padding: 5px;
  text-align: left;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel6 {
  padding: 50px;
  display: none;
}


#panel7, #flip7 {
  padding: 5px;
  text-align: left;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel7 {
  padding: 50px;
  display: none;
}


#panel8, #flip8 {
  padding: 5px;
  text-align: left;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel8 {
  padding: 50px;
  display: none;
}

#panel9, #flip9 {
  padding: 5px;
  text-align: left;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel9 {
  padding: 50px;
  display: none;
}

#panel10, #flip10 {
  padding: 5px;
  text-align: left;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel10 {
  padding: 50px;
  display: none;
}

</style>