body{
	margin:0px;
	font-family: "Roboto", serif;
	font-optical-sizing: auto;
}

.header{
	height:100vh;
	display:flex;
	justify-content:center;
}

.header-text{
	width:500px;
	height:500px;
	margin:25vh;
}

.container{
	margin:1%;
}

.container-1{
	margin:1%;
}

.grid-4{
	display:grid;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr 1fr;
}

.card{
	box-shadow:1px 1px 10px 1px #b8b4b4;
	border-radius:20px;
	text-align:center;
}

.nametag{
	width:auto;
	display:block;
	padding:10px 10px 10px 50px;
	margin-bottom:20px;
	text-align:left;
}

.box{
	display:flex;
	justify-content: center;
	border-radius:10px;
	box-shadow:1px 1px 10px 1px #b8b4b4;
	padding:20px 20px 20px 20px;
}

.box-2{
	display:flex;
	justify-content: center;
	border-radius:10px;
	padding:10px 10px 10px 10px;
}

.grid-2{
	width:auto;
	
}

.grid-area{
	display:flex;
	padding:10px;
	justify-content: center;
}

.login-form{
	margin:25vh;
}

.btn{
	transition:0.4s;
	margin-left:20px;
	padding:10px 20px 10px 20px;
	text-decoration:none;
	color:white;
	font-weight:bold;
	background-color:#4327a1;
	border-radius:40px;
	border:0px;
	box-shadow:0px 0px 5px 0px #4327a1;
}

.btn:hover{
	transition:0.4s;
	box-shadow:0px 0px 10px 0px #4327a1;
}

.input-group{
	display:grid;
	grid-template-rows:1fr 1fr;
	margin:10px 20% 10px 20%;
}

.input-group-reg{
	display:grid;
	grid-template-rows:1fr 1fr;
	margin:10px 1% 10px 1%;
}

.input-group-reg label{
	padding:10px;
}

.input-group-reg input{
	padding:15px 20px 15px 20px;
	border-radius:40px;
	border:0px;
	box-shadow:0px 0px 10px 0px #b8b4b4;
}
.average{
	margin-top:20px;
	padding:15px 20px 15px 20px;
	width:15%;
	border-radius:40px;
	border:0px;
	box-shadow:0px 0px 10px 0px #b8b4b4;
}

.box-3{
	width:10%;
	display:block;
	padding:20px;
	border-radius:10px;
	box-shadow:1px 1px 10px 1px #b8b4b4;
}

.average:focus{
	outline:none;
}

.input-group label{
	padding:10px;
}

.input-group input{
	padding:15px 20px 15px 20px;
	border-radius:40px;
	border:0px;
	box-shadow:0px 0px 10px 0px #b8b4b4;
}

.input-group select{
	padding:15px 20px 15px 20px;
	border-radius:5px;
	border:0px;
	box-shadow:0px 0px 10px 0px #b8b4b4;
}

.inputmod{
	box-shadow:0px 0px 10px 0px rgba(0,0,0,0.4) !important;
}


.input-group select:focus{
	outline:none;
}

option{
	font-weight:bold;
}

.custom-select{
	padding:15px 20px 15px 20px;
	border-radius:40px;
	font-weight:bold;
	border:0px;
	box-shadow:0px 0px 10px 0px #b8b4b4;
}

.input-group input:focus{
	outline:none;
}

.input-group-reg input:focus{
	outline:none;
}


.submit-group{
	display:grid;
	grid-template-columns:1fr 1fr;
	margin:10px 25% 10px 25%;
}

.submit-group input{
	border:0px;
	ransition:0.4s;
	padding:15px 20px 15px 20px;
	margin:10px;
	color:white;
	font-weight:bold;
	background-color:#4327a1;
	border-radius:40px;
	box-shadow:0px 0px 5px 0px #4327a1;
}

.navbar{
	box-shadow:0px 0px 10px 0px #b8b4b4;
	padding:20px;
	display:flex;
}

.links{
	padding:30px;
	font-weight:bold;
	font-size:20px;
	float:right;
}

.links a{
	text-decoration:none;
	color:#7e827f;
	padding: 0px 10px 0px 10px;
}

.links a:hover{
	transition:0.4s;
	color:#a9abaa;
}

.modal{
	transition:0.4s;
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	overflow: auto;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.4);
}


.btn-close{
	font-weight:bold;
	color:black;
	border-radius:40px;
	border:0px;
	background-color:#cf1919;
	color:white;
	font-weight:bold;
	padding:10px 20px 10px 20px;
}

.btn-delete{
	font-weight:bold;
	color:black;
	border-radius:5px;
	border:0px;
	background-color:#cf1919;
	color:white;
	font-weight:bold;
	width:30px;
	height:30px;
	text-align:center;
}

.center{
	display:flex;
	justify-content: center;
}

.center-mob{
	display:flex;
	justify-content: center;
}

.modal-content {
  	background-color: #fefefe;
  	background-color: rgb(0,0,0);
  	background-color: rgba(0,0,0,0.0);
  	
  	color:white;
  	border-radius:10px;
  	padding: 20px;
  	width:auto;
  	margin:10% 30% 0% 30%;
}

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

.first{
	width:70%;
	text-align:left;
}

.middle{
	text-align:left;
}

.last{
	text-align:left;
}

th{
	padding:20px !important;
	border-bottom:4px solid #4327a1;
	border-radius:5px;
}

td{
	padding:20px !important;
	text-align:center;
}

tr a{
	text-decoration:none;
	color:black;
}

tr{
	transition:0.4s;
	text-decoration:none;
	padding:20px;
	width:auto;
	color:black;
	border-bottom:4px solid white;
}
tr:hover{
	transition:0.4s;
	font-weight:bold;

}

.card1{
	margin:10px;
	padding:50px;
	border-radius:10px;
	box-shadow:1px 1px 10px 1px #b8b4b4;
}

.card2{
	margin:10px;
	padding:50px;
	border-radius:10px;
}

.grid-2{
	display:grid;
	width:100%;
	grid-template-columns: 1fr 1fr;
}

.block{
	display:flex;

	padding:10px;
}

.def{
	padding:10px;
}



@media only screen and (max-width: 600px) {
	body{
		overflow-x:hidden !important;
		padding:0px 0px 0px 0px !important;
		margin:0px 0px 0px 0px !important;
	}

	.modal-content{
		width:auto;
		margin:0px !important;
		border-radius:0px;
		height:95vh;
		padding-top:25vh;
	}

	#activatemodal{
		margin-top:40px;
		margin-left:0px;
	}

    .login-form{
        margin:0vh !important;
    }
    
	.navbar{
		width:auto;
	}

	.navbar h1{
		margin:0px;
		font-size:30px;
	}

	.container-1{
		padding:10px 10px 10px 10px !important;
		margin:0px 0px 0px 0px !important;
	}

	.container{
		padding:0px 0px 0px 0px !important;
		margin:0px 0px 0px 0px !important;
	}

	.box{
		padding:5px 5px 5px 5px;
	}

	.box-2{
		display:block;
		margin:0px 0px 0px 0px;
		overflow-x: scroll;
	}

	.nametag{
		padding:10px 10px 10px 50px;
		font-size:15px;
	}

	.grid-2{
		grid-template-columns: 1fr !important;
		padding:0px 0px 0px 0px !important;
		margin:0px 0px 0px 0px !important;
	}

	.card2{
		display:block;
		width:auto;
		width:100%;
		padding:0px 0px 0px 0px !important;
		margin:0px 0px 0px 0px !important;
	}

	.card1{
		padding:5px 5px 5px 5px !important;

	}

	table{
		width:auto;
	}

	tr{
		width:5% !important;
		padding:0px 0px 0px 0px;
	}

	.center-mob{
		display:block !important;
	}

	.first{
		width:10%;
	}

	.def label, input{
		margin:0px;
		padding:0px;
	}

	.submit-group{
		padding:0px 0% 0px 0% !important;
	}
}