body {
	margin:0;
	padding: 0;
	height: 100%;
	width: 100%;
	display: grid;
	grid-template-rows: auto auto auto;
	grid-gap: 2px;
	align-items: start;
}


header, .topnav {
	grid-row: 1;
	min-height: 6vh;
   background-color: white;
	 border-bottom: 3px solid #f2f2f2;
   font-size: 1.3vw;
   margin: 0;
}


.topnav a {
  text-align: center;
  padding: 2px 12px;
  text-decoration: none;
  border-left: 1px solid #f2f2f2;
  display: inline-block;
}

.topnav a:hover {
  background-color: #ddd;
}


.topnav .icon {
  display: none;
	font-size: 6.5vw;  
}

.topnav .printicon {
	font-size: 2.5vw;  
}

.activelink {
	box-shadow: 0px 2px darkblue;
	color: darkblue;
}

.logo {
	height: 3vw;
}

.logocaption 
{
   font-size:1.8vw;
   color: darkblue;
   margin:0;
   padding:0;
}

main {
	grid-row: 2;
	min-height: 80vh;
	display: grid;
	grid-template-rows: 35px auto;
	grid-gap: 5px;
	overflow: auto;
}

footer {
	grid-row: 3;
	border-radius: 4px;
	background-color: rgb(4,113,148);
	color: silver;
	text-align: center;	
}

.footerlinks 
{
	display: grid;
	grid-template-columns: 1fr 2fr 2fr 2fr;
	justify-content: space-around;
	align-items: start;
	padding: 0px 1em;
}

.footerlinks .footerlinksrow
{
	display: flex;
	padding: 5px 3em;
	justify-content: space-around;
	align-items: start;
	flex-direction: column;
}

.footerlink
{
	color:white;
	text-decoration: none;
	margin: 2px;
	font-size: .8em;
}

.reportButton {
	margin: 10px;
	min-height: 30px;

}
.reportButton > * {
	margin: 10px;
	padding: 5px;
	
}

.buttonsNav {
	grid-row: 1;
	align-self: start;	
	justify-self: start;
	display: flex;
	padding-bottom: 4px;	
	margin: 0;
	flex-wrap: nowrap;
	background-color: white;
	border-bottom: 3px solid #f2f2f2;	
	
	animation-duration: 5s;
	animation-timing-function: linear;
	animation-iteration-count: 10;
	animation-direction: alternate;	

	animation-name: slidein;
}

.buttonsNav  a {
  text-align: center;
  margin: 4px;
  padding: 6px 12px;
  text-decoration: none;
  border-left: 1px solid #f2f2f2;  
  font-size: 1.3vw;
    display: inline-block;
	
}

.buttonsNav a:hover {
  background-color: #ddd;
}

.outputNav {
	grid-row: 2;
	justify-self: stretch;
	margin: 10px;
	align-self: start;
	width: 99%;	
	overflow-x: auto;
}

.filterform {
	border-radius: 4px;
	background-color: #f5f5f5;
  border: 1px solid #c1c1c1;
  	box-shadow: 1px 1px black;
	max-width: 98%;
	padding: .5em;
	margin: 5px;
}

.filterform input {
	border-radius: 4px;
	height: 2vw;
	max-width: 8vw;
	margin: 4px;
	grid-row: 2;
}

.filterform select {
	border-radius: 4px;
	box-shadow: -1px -1px black;
	height: 2.2vw;
	max-width: 8.5vw;
	margin: 4px;
}

.tdhr {
	background-color:darkgrey;
	border:0;
	height: .8px;
	width: 75%;
	margin: 1px;
	margin-left: 12%;
}

.grid2col {
   display: grid;
	grid-template-columns: 1fr 1fr;
   font-size:0.9em;
   background-color: #f5f5f5;
   	justify-self: center;
}
.grid3col {
   display: grid;
	grid-template-columns: 1fr 1fr 1fr;
   font-size:0.9m;
   background-color: #f5f5f5;
   	justify-self: center;
}

.grid4col {
	display: grid;
	 grid-template-columns: 1fr 1fr 1fr 1fr;
	font-size:0.9m;
	background-color: #f5f5f5;
	justify-self: center;
 }

 .grid7col {
	display: grid;
	 grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	font-size:0.9m;
	background-color: #f5f5f5;
	justify-self: center;
 }

 

.student {
	display: grid;
	grid-template-columns: auto 400px;
	grid-template-rows: 140px auto auto auto;
	grid-gap: 5px;
}

.student .imagespanel {
	grid-row: 1;
	grid-column: 2 / 4;
	display: grid;
	grid-template-columns: 120px 120px 120px;
	grid-gap: 5px;
	margin-right: 7%;
}

.student .heading {
	grid-row: 1;
	grid-column: 1;
	justify-self: start;
}

.student .photo {
	grid-row: 1;

}

.student .thumb {
	grid-row: 1;

}
.student .sign {
	grid-row: 1;

}
.student .fee {
	grid-row: 4;
	grid-column: 1 / 5;
}
.student .course {
	grid-row: 3;
	grid-column: 1 / 5;
}
.student .courses {
	grid-row: 5;
	grid-column: 1 / 5;
}

.filterform .table-row td {
	box-shadow: 0px 1px grey;
}

.feesAccrued {
}

.actionicon {
	font-weight: bold;
	font-size: 16px;
	text-decoration: none;
	color: blue;
	margin: 0;
}


.fieldLink {
	font-weight: bold;
	font-size: 1.3 vw;
	text-decoration: none;
	color: blue;
}

.fieldLinkSmall {
	font-weight: bold;
	font-size: 0.8 vw;
	text-decoration: none;
	color: blue;
}

.fieldLinkRed {
	font-weight: bold;
	font-size: 1.3 vw;
	text-decoration: none;
	color: red;
}

.backButton {
	position: absolute;
	top: 70px;
	right: 10px;
	font-weight: bold;
	font-size: 1.3 vw;
	text-decoration: none;
	padding: 2px;
	background: lightgrey;
	border: 1px solid darkgrey;
}

@media screen and (max-width: 600px) {
	
	.grid3col {
		grid-template-columns: 1fr;
	}
	.grid2col {
		grid-template-columns: 1fr;
	}
	.student {
		grid-template-columns: 1fr;
	}
	
	.footerlinks 
	{
		grid-template-columns: auto;
	}

	.student .courses { overflow: scroll; }
	
	.student .imagespanel {
		grid-row: 2;
		grid-column: 1 / 4;
		justify-self: start;
		overflow: auto;
		width: 96%;
	}
	
	.buttonsNav {
		font-size: 5vw;
	}
	.topnav a{
		font-size: 6vw;
	}
	.buttonsNav a{
		font-size: 3vw;
	}
	.outputNav {
		overflow: auto;
	}
	
	.topnav a:not(:first-child) {
		display: none;
	}
	.topnav a.icon {
		float: right;
		display: block;
	}
	
	.topnav .printicon {
		font-size: 8.5vw;  
	}
	
	.topnav.responsive {
		position: relative;
	}
	
	.topnav.responsive .icon {
		position: absolute;
		right: 0;
		top: 0;
	}
	.topnav.responsive a:not(:last-child) {
		animation-duration: 0.5s;
		animation-name: slidein;
		float: none;
		text-align: left;
		display: block;
	}
	.logo {
		height: 8vh;
		max-height: 8vh;
	}
    .logocaption 
    {
		font-size:3.8vh;
		font-weight: bold;
    }
	
	.filterform input {
		min-height: 8vw;
		max-width: 16vw;
	}
	
	.filterform select {
		min-height: 8vw;
		max-width: 20vw;
	}

}

@media print {
  @page { margin: 0.3cm; overflow:auto;} 
  body { margin: 0.3cm; overflow:auto;}
  html {overflow:auto;}
  main{
	  grid-template-rows: 5px auto;
	  overflow:auto;
	  padding-top: 20px;
  }
  .topnav {
	  background-color: transparent;
	  max-width: 16%;
	  font-size: 0.5em;
	  height: 0;
  }
  .logo {
	  width:30%;
	  height: 30%;
  }
 
  .topnav > a, .buttonsNav, .actionicon, .printicon, input, button, select, .paginatedRowsLabel,footer {
	  display: none;
  }
  .outputNav {
	  overflow: auto;
  }
  
  

  table {
	  border-collapse:collapse;
  }

  td,th {
	  border: 1px dotted black;
  }
  
}

@-webkit-keyframes slidein {
  0%   {margin-left:200px; }
  100% {margin-left:0px;}
}

@-moz-keyframes slidein {
  0%   {margin-left:200px; }
  100% {margin-left:0px;}
}

@keyframes slidein {
  0%   {color: white; }
  100% {color: black;}
}