body {
	width: 98%;
	margin: 0 auto;
	margin-bottom: 10%;
    
}

.container-fluid {
  background-color: #14a4de;
  margin-top: 1%;
  width: 100%;

}

.header {
	text-align: center;
	width: 95%;
	margin: 0 auto;
	margin-top: 1%;
	margin-bottom: 1%;
}

h1 {
   font-size: 35px;
   margin-top: -1%;
}

.image img{
	 height: 100px;
}

.heading {
	text-align: center;
	font-weight: bold;
	font-size: 25px;
	color: #14a4de;
	margin-top: 1%;
}

.container{
	width: 90%;
	margin: 0 auto;
}

.inputform {
	width: 40%;
	margin: 0 auto;
	margin-top: 2%;
	text-align: center;
}

.table {
	width: 90%;
	margin: 0 auto;
}

.table h5{
	width: 90%;
	margin: 0 auto;
}
.note {
	width: 90%;
	margin: 0 auto;
}

label {
	font-size: 20px;
}

.records {
  empty-cells: hide;
}

.home_tab {
   position: fixed;
}


footer {
  background-color: #003a4a;
  color: #fff;
  display: flex;
  justify-content: center;
  padding: 10px 0;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  margin-top:500px;
}



/* If the screen size is 800px wide or less */
@media screen and (max-width: 1200px) {
 
 body {
	margin-bottom: 20%;   
}
 h1 {
    font-size: 35px;
    margin-top: -1%;
  }
  .image img {
	 height: 80px;	
}

.heading {
	text-align: center;
	font-weight: bold;
	font-size: 25px;
	color: #14a4de;
	margin-top: 1%;
}

.header {
	
	width: 90%;
	margin: 0 auto;
	margin: 2% 0;
}

.inputform {
	width: 60%;
	margin: 0 auto;
	margin-top: 2%;
	text-align: center;
}

.table {
	width: 95%;
	margin: 0 auto;
}

.table h5{
	width: 95%;
	margin: 0 auto;
}
.note {
	width: 95%;
	margin: 0 auto;
}

label {
	font-size: 16px;
}

.table {
	width: 95%;
	margin: 0 auto;
	display: block;
 	max-width: -moz-fit-content;
  	max-width: fit-content;
  	overflow-x: auto;
  	white-space: nowrap;
}

}


/* If the screen size is 800px wide or less */
@media screen and (max-width: 800px) {
 
	body {
	   margin-bottom: 20%;   
   }
	h1 {
	   font-size: 25px;
	   margin-top: -1%;
	 }
	 .image img {
		height: 60px;	
   }
   
   .heading {
	   text-align: center;
	   font-weight: bold;
	   font-size: 20px;
	   color: #14a4de;
	   margin-top: 1%;
   }
   
   .header {
	   
	   width: 95%;
	   margin: 0 auto;
	   margin: 2% 0;
   }
   
   .inputform {
	   width: 80%;
	   margin: 0 auto;
	   margin-top: 2%;
	   text-align: center;
   }
   
   .table {
	width: 90%;
	margin: 0 auto;
}

.table h5{
	width: 90%;
	margin: 0 auto;
}
.note {
	width: 90%;
	margin: 0 auto;
}
   
   label {
	   font-size: 16px;
   }
   
   .table {
	   width: 95%;
	   margin: 0 auto;
	   display: block;
		max-width: -moz-fit-content;
		 max-width: fit-content;
		 overflow-x: auto;
		 white-space: nowrap;
   }
   
   }

/* If the screen size is 600px wide or less */
@media screen and (max-width: 600px) {
 
 body {
	margin-bottom: 20%;   
}
 h1 {
    font-size: 16px;
    margin-top: -1%;
  }
  .image img {
	 height: 60px;
	
}

.heading {
	text-align: center;
	font-weight: bold;
	font-size: 18px;
	color: #14a4de;
	margin-top: 1%;
}

.header {
	
	width: 95%;
	margin: 0 auto;
	margin: 2% 0;
}

.inputform {
	width: 90%;
	margin: 0 auto;
	margin-top: 2%;
	text-align: left;
}


.table {
	width: 98%;
	margin: 0 auto;
}

.table h5{
	width: 98%;
	margin: 0 auto;
}
.note {
	width: 98%;
	margin: 0 auto;
}

label {
	font-size: 16px;
}

.table {
	width: 95%;
	margin: 0 auto;
	display: block;
  	max-width: -moz-fit-content;
 	max-width: fit-content;
  	overflow-x: auto;
  	white-space: nowrap;
}

}