*{font-family: 'Roboto', sans-serif;}

.flexdiv{
	display: flex;

}

.alert-sm{ padding:4px!important; color:#FFF!important;}
.alert-green{ background:#090;}
.alert-danger2{ background:#F00;}
.alert-info2{ background:#009;}
.form-control{ padding:10px; border:1px solid #000;}
.small_button{  border-radius:50%; width:20px; height:20px; display:inline-block; text-align:center;}
.small_button .fa{ color: #FFF !important;
  font-size: 10px !important;
  line-height: 20px;
  vertical-align: middle;
  margin-top: -5px;}
  .datatable span{ color:#000;font-size:13px;}
.colour_2{ background:#94f4f4; rgba(0, 0, 0, 0.24) 0px 3px 8px;}
.loaddiv {
  position: fixed;
  top: 50%;
  left: 50%;
  transition: 0.5s ease;
  -webkit-transition: 0.5s ease;
  -moz-transition: 0.5s ease;
  -ms-transition: 0.5s ease;
  -o-transition: 0.5s ease;
  transform: translate(-50%, -40%);
  -webkit-transform: translate(-50%, -40%);
  -moz-transform: translate(-50%, -40%);
  -ms-transform: translate(-50%, -40%);
  -o-transform: translate(-50%, -40%);
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px, 0 -2px 3px rgba(0, 0, 0, 0.23);
  background: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  padding: 0.4em;
  opacity: 0;
  height: 60px;
  width: 60px;
  visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.loaddiv.active {
  opacity: 1;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  visibility: visible;
  z-index: 99999;
}
.loaddiv.active .box {
  animation: loadanimate 1.3s ease infinite;
  -webkit-animation: loadanimate 1.3s ease infinite;
}
.loaddiv .box {
  position: relative;
  height: 80%;
  width: 80%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
 border:4px solid #150c58;
  transition: 0.4s ease;
  -webkit-transition: 0.4s ease;
  -moz-transition: 0.4s ease;
  -ms-transition: 0.4s ease;
  -o-transition: 0.4s ease;
}
.loaddiv .box::after {
  position: absolute;
  bottom: -5px;
  left: 0;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  height: 15px;
  width: 15px;
  content: "";
  background: rgb(10, 69, 133);
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

@-webkit-keyframes loadanimate {
  0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }
  100% {
    transform: rotate(720deg);
    -webkit-transform: rotate(720deg);
    -moz-transform: rotate(720deg);
    -ms-transform: rotate(720deg);
    -o-transform: rotate(720deg);
  }
}

@keyframes loadanimate {
  0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }
  100% {
    transform: rotate(720deg);
    -webkit-transform: rotate(720deg);
    -moz-transform: rotate(720deg);
    -ms-transform: rotate(720deg);
    -o-transform: rotate(720deg);
  }
}
		body{
			background:white;
			background-size: 5px 5px;
		  	max-width: 870px; 
		  	width: 100%;
		  	color: black;
		  	position: fixed;
		  	height: 100%;
		  	margin: 0 auto !important; 
		  	float: none !important;
		  	/*border: 1px solid; */
		}


.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  margin-bottom: 0px!important;
}

.head1,.divs .head, div h6, div h5, .divs h6{ height:30px!important; line-height:30px!important;} 

		.icons{
			position: absolute;
			  z-index: 9999;
			margin-top:-70px;
			padding:10px;
		}
		.icons .icon{
			/*position: absolute;
			bottom: 10px;*/
			
		}
		
		.icons .icon1{
			 
		}
		.icons .icon2{
			right: 2%;
		}
		.icons .numdiv{
			position: absolute;
			left: 20%;
			width: 250px;
			opacity: 0;
			visibility: hidden;
			top: -100px;
			transition: 0.2s ease;
			background-color: white;
			border-radius: 5px;
			box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
		}
		.numdiv.active{
			top: -120px;
			opacity:1;
			visibility:visible;
					}
		.numdiv .closeicon{
			float: right;
		}
		.numdiv h6{
			padding: 0.4em;
			text-align: center;
			color:#150c58;
			font-size: 1.1em;
			border-bottom: 1px solid gainsboro;
		}
		.numdiv li{
			list-style: none;
			padding: 0.4em;
			color: gray;
			font-style: italic;
			margin:  3% 0;
			background: rgba(0,0,0,0.05);
		}
		.numdiv .closeicon i{

			color: darkslateblue;

		}
		.icons .icon2{
			display: flex;
			justify-content: flex-end;
		}
	
		 .icon2 a img,  .icon1 .div{
			background-color: linen;
		height: 40px;
		width: 40px;
		padding: 0.2em;
		border-radius: 50%;
		marign: 5px;
		display: flex;

		justify-content: center;
		align-items: center;
		}
		 .icon2 img{

		box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px,0 0 0 2px white,0 0 0 4px cadetblue;
		}

		  .icon1 .div{
			
		box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px,0 0 0 2px white,0 0 0 4px steelblue;
		}
		.icons .div i{
			color: #150c58;
			font-size: 2em;

		}
		.div1,.div2{
			width: 100%;
			padding: 0.2em;
			display: flex;
		}
		.div2 .head{
			padding: 0.2em;
			color: #94f4f4;
		}
		.div2 .last{

			background:rgba(255,255,255,0.4);
			margin-top: 2%;
		}

		.divs{
			flex: 1;
			width: 100%;
		border-radius: 5px;
		margin:  2% 1%;
		background: darkslateblue;
		color: white;
	}
	.divs .head{
		width: 100%;
		text-align: center;
	}
	.head1{
		background: #94f4f4;
		color: #150c58;
		margin-bottom: 2%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.head1 h6{
		font-weight: 600;
		margin-top: 0.4%;
	}
	.divs .text,.divs .last{
		display: flex;

	}
	.div1 .last,.div1 .text{
		margin-top: 2%;
		margin-bottom: 2%;
		height: 30px;
	}
	.div1 .last{
		background: rgba(0,0,0,0.2);
	}
	.div1 .last h6{
		color: wheat;
	}
	.divs h6{
		flex: 1;
		width: 100%;
		text-align: center;
	}
	.div2 .divs{
		background-color: #150c58;
	}
	.div2 .text h6:nth-child(2){
		flex: 0 0 70%;
		text-align: right;
		width: 100%;
		padding-right: 0.1em;
	}
	.div2 .text h6:nth-child(1){
		flex: 0 0 30%;
		width: 100%;
	}
		p{
		    display: block;
		    margin-block-start: 0em;
		    margin-block-end: 0em;
		    margin-inline-start: 0px;
		    margin-inline-end: 0px;
		}
		.firsttable{
			width: 100%;
		}
		
body{
	position: relative;
}
		.header{
			width: 100%;
			position: relative;
			padding: 0.2em;
			background-color: #150c58;
			color:white ;
			font-family: georgia;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.header .name{
			text-align: center;
		}
		.header .name h4{
			font-weight: 600;
			font-family: georgia;
		}
		.header div{
			padding: 0.2em;
		}
		.header .img img{
			height: 50px;
			width: 50px;
		}
	
	marquee{
		padding: 0.2em;

		background: #94f4f4;
		color:#000;

		box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	}
	div.heading{
		width: 100%;
		text-align: center;

	}
	.heading h5{
		color: #150c58;
		font-family: monospace;
	}
	.firsttable{

	width: 98%;
	margin-top: 1%;
	margin-left: 1%;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	background-color: #150c58;
	
	}
	.divs h6{
		height: 20px;

	}
	.firsttable td:not(.head td):nth-child(2){

		font-size: 1.5em;
		color: white;
		text-align: center;
		
	}
	.firsttable td strong div{
	    font-size:1.2em;
	
	}
	.firsttable .head{
		background: rgba(255,255,255,0.2);
		border-bottom: 2px solid #94f4f4 ;
		color:#94f4f4 ;
		margin-bottom: 2%;
		

	}
	.firsttable tr:not(.head){
		height: 50px;
	}
	.divs .div2{
		width: 120px;
	}
	.div2 .head{
		border-bottom: 2px solid white;
		margin-bottom: 2%;
	}
	.firsttable h6{
		color: white;
	}
	.firsttable td{
		padding: 0.2em;
	}
	.firsttable .head td{
		padding: 0.2em;
		text-align: center;
	}
	.table2{
		background-color: white;
		color: darkslateblue;
		width: 98%;
		margin: 1%;
		text-align: center;

		box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	}
	.table2 th{
			height: 30px;
		padding: 0.2em;

		margin-bottom: 1%;
		background-color: #150c58;
		color: white;
		box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
		font-weight: 400;
	}
	.table2 th:nth-child(1){
		width: 40%;
		text-align: left;
	}
	.table2 td{
		border-bottom: 1px solid gainsboro;
	}
.table2 td:nth-child(odd){
	background: rgba(0,0,0,0.1);

}



					.header .name{
			flex: 0 0 70%;
		}
		@media screen and (min-width: 900px){

		.header .name h4{
			font-size: 3em;
		}
		.icons .icon{
				bottom: 55px;
		}
		.icons .icon2{
			right: 40%;
		
		}
		}

		@media screen and (max-width: 900px){
		.divs h6{
			font-size: 0.95em;
		}
		.table2 td{
			font-weight: 600;
			font-size: 0.8em;
		}
		.table2 th{
			font-size: 0.85em;
		}

		 .div1 .last h6{

		font-size: 0.85em;
		}
		 .div2 .last h6{

		font-size: 0.8em;
		}
		
		.divs h5{
			font-size: 1em;
		}
		
		.header .name h4{
			font-size: 1.5em;
		}
		}
			 .fa{
				font-size: 2vw;
				align-self: center;
			}


.navbar {
  width: 100%;
  background-color: #150c58;
  border-top: 3px solid white ;
bottom: 0; 
  padding: 0px;
  /*height: 50px;*/
  padding-top:10px;
  /*padding: 0;*/
  max-width: 870px; 
  position: fixed;
  overflow: auto;
}

#main{
	font-size: 3vw;
}

.navbar a {
  float: left;
  color:white ;
  text-decoration: none;
  width: 20%;
  text-align: center;
}

.navbar a:hover {
  background-color: #000;
}

.navbar a.active {
  color:black;
  background-color:#94f4f4 ;
}

.navbar1 {
  width: 100%;
  background-color: #150c58;
  bottom:0; 
  height: 8vw;
  /*padding: 0;*/
  max-width: 870px; 
  position:fixed;
  overflow: auto;
}

.navbar1 a {
  float: left;
  /*padding: 12px;*/
  color:#94f4f4 ;
  text-decoration: none;
  /*height: 15vw;*/
  width: 16%; /* Four links of equal widths */
  text-align: center;
}

.navbar1 a:hover {
  background-color: #000;
}

.navbar1 a.active {
  color:black;
  background-color:#94f4f4 ;
}
i{
	font-size: 1vw;
	color#94f4f4 ;}

span{
	font-size: 1vw;
	color:#94f4f4 ;
}



@media screen and (max-width: 580px) {
		body{
		  width: 100%;
		  height: 100%;
		  margin: 0 auto !important; 
		  float: none !important;
		}
		.logo{
			text-shadow: 1px 1px 2px #082b34;
			font-family: 'Roboto', sans-serif;
			padding-top: 1%;
			margin: 0px;
			width: 100%;

			float: center;
			text-align: center;
			/*font-size: 5vw;*/
		}

		header {
		  position: relative;
		  height: 250px;
		  background: linear-gradient(#00008b, #00008b);
		}

		h1 {
		  padding:0px;
		  font: 44px "Arial";
		}

		header h1 {
		  color:#94f4f4 ;
		}

		svg {
		  position: absolute;
		  bottom: 0;
		  width: 100%;
		  height: 10vw;
		  /* set height to pixels if you want angle to change with screen width */
		}

		#main{
			font-size: 6vw;
		}
		.gs{
			font-size: 4.3vw;
		}

		.head_img{
			margin: auto;
			width: 75%;
			height: 85%;
			position: relative;
			background: url('./images/d1.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}
		.but{
				background-color: #150c58;
			  	color:#94f4f4 ;
			  	width: 80%;
			  	padding: 12px 20px;
			  	border: none;
			  	margin-top: 3%;
			  	border-radius: 4px;
			  	cursor: pointer;
			}

		 .fa{
				font-size: 7vw;
				align-self: center;
			}


		.navbar a {
		  float: left;
		  /*padding: 12px;*/
		  
		  color:white;
		  text-decoration: none;
		  font-size: 17px;
		  /*height: 15vw;*/
		  width: 20%; /* Four links of equal widths */
		  text-align: center;
		}

		.navbar a:hover {
		  background-color: #000;
		}

		.navbar a.active {
		  color:black;
		  background-color:white;
		}

		.navbar1 {
		  width: 100%;
		  background-color: #150c58;
		  bottom:0;
		  padding-top:10px; 
		  height: 13vw;
		  /*padding: 0;
		  /*max-width: 570px; */
		  position:fixed;
		  overflow: auto;
		}

		.navbar1 a {
		  float: left;
		  /*padding: 12px;*/
		  color:#94f4f4 ;
		  text-decoration: none;
		  font-size: 17px;
		  /*height: 15vw;*/
		  width: 16.5%; /* Four links of equal widths */
		  text-align: center;
		}

		.navbar1 a:hover {
		  background-color: #000;
		}

		.navbar1 a.active {
		  color:black;
		  background-color:#94f4f4 ;
		}
		i{
			font-size: 8vw;
			color:white ;		}

		span{
			font-size: 2vw;
			color:white ;
		}

	}
form{ width:94%; margin-left:3%; }
form label{ margin:0px; text-align:left; width:100%;}

#my_table{ margin-bottom:200px!important;}
input[type=submit],button {
  background-color: darkblue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5vw;
  /*border-radius: 4px;*/
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}


input[type=text],input[type=number], select, textarea {
  width: 100%;
  padding: 5px 10px;
  border: 1px solid  #999;
  border-radius: 4px;
  color: black;
  box-sizing: border-box;
  resize: vertical;
  margin-bottom:1em;
}

::placeholder {
  color:#CCC;
  opacity: 1; /* Firefox */
}

::-ms-input-placeholder { /* Edge 12 -18 */
  color: #CCC;
}


label{ color:#000; font-size:.95em;}

#myTable td,#myTable th{ border:1px solid #CCC; border-collapse:collapse; padding:2px; font-size:13px; vertical-align:top;}
#myTable th{ background:#006; color:#FFF;}
#myTable tr.alt{ background:#f2f2f2;}
#myTable .fa{ color:#C60; font-size:13px;}

#myTable tr:hover td{ background:#FFC!important;}

.btn-small{ padding:4px!important; font-size:12px; margin-right:4px; float:right;}
.jconfirm-title{ color:#000!important;}