body {	
background-color: #000000;
background-image: linear-gradient(147deg, #000000 0%, #2c3e50 74%);
}

*{
	font-family:Arial;
	font-weight:lighter;
	margin:0;
	padding:0;
}
textarea:focus, input:focus{
    outline: none;
}
h1 {
	font-size: 2.3em;
	text-align: center;
	color: #fff;
	animation: glow 3s ease-in-out infinite alternate;
  }
  
  
  @keyframes glow {
	from {
	  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6, 0 0 20px #0073e6, 0 0 25px #0073e6, 0 0 30px #0073e6, 0 0 35px #0073e6;
	}
	to {
	  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #0073e6, 0 0 40px #0073e6, 0 0 50px #0073e6, 0 0 60px #0073e6, 0 0 70px #0073e6;
	}
  }


.clear{
	clear:both;
}
.redt{color:red!important;}
.greent{color:green!important;}

.login_panel{
	text-align:center;
	margin:15vh auto;
	width:50vw;
	padding:3vw;

	border:1px rgb(255, 255, 255) solid;
	box-shadow:0px 0px 20px 4px #3399FF;

	border-radius:2em;
	
	background-color: #2d3436;
	background-image: linear-gradient(315deg, #2d3436 0%, #000000 74%);
	background-image:url('../images/bac3.png');

	animation: border-flicker 5s linear infinite,scale-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.head{
	margin-top: -12vh;
	font-size:2em;
	text-shadow:0px 1px 2px rgb(255, 255, 255);
	padding-bottom:20px;
	margin-bottom:0vh;
	
}
.logo{
	margin: 3vh auto;
	width: 7vw;
	height: 7vw;
	border: 1px #ffffff solid;
	border-radius: 50%;
	background: url('../images/logo.png');
	background-color: #fff;
	background-position: center;
	background-size: cover;
	animation: border-flicker 5s linear infinite,scale-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	
}
table.login{
	
	width:100%;
	padding-bottom:20px;
	margin-bottom:10px;
}

table.login tr th{
	padding: 20px; width: 25px; border-radius: 30px; color: #000; background-color: #fff; text-align: center; font-size: 20px; border:2px #3A78B8 solid;
}

table.login tr th span{
	margin-trim: 0;
}
table.login input[type=number],table.login input[type=text],table.login input[type=email],.login input[type=password]{
	margin-left:30px;
	float:left;
	width:100%;
	padding:10px;
	border:1px #3A78B8 solid;
	border-radius:30px;
	font-size:2em;
}
table.login input[type=text]:hover,input[type=email]:hover,.login input[type=password]:hover{
	box-shadow:0px 0px 5px 1px  #BCCCDD;
	
}
table.login input[type=submit]{
	height: 100px;
	color: #097CBF;
	font-weight:bold;
	text-shadow:1px 1px 0px #fafafa;
	font-size:15pt;
	width:50%;
	padding:15px;
	border:1px #ccc solid;
	border-radius:30px;
	box-shadow:0px 0px 5px 1px #097CBF;
}
table.login input[type=submit]:hover{
	box-shadow:0px 0px 10px 2px  #33CC33;
}

.left-footer{
	line-height:20px;
	font-weight: normal;
	text-align:center;
	margin:0 auto;
	text-shadow:0px 0px 1px #097CBF;
	letter-spacing:1px;
	font-size:12px;
	color:#BCCCDD;
	width:300px;
}
.left-footer a{
	text-decoration:none!important;
	color: #fff;
	font-size:1em;
	letter-spacing:2px;
}
/**/
.alertt{
	position: absolute;
	z-index: 2;
	bottom: 5vh;
	width: 50%;
	margin-bottom:10px;
	
	left: 24%;
	background-color: #fff;
	border-radius:10px;
	padding:1em;
	font:1.2em;
	font-weight:normal;
	text-align:center;
	box-shadow:0px 0px 5px 1px #097CBF;

}

.footer {
	width: 196px;
	border: 1px #666 solid;
	height: 20px;
	padding: 6px;
	float: right;
	background-color: #fff;
	border-radius: 20px;
	color: #666;
}



/* ----------------------------------------------
 * Generated by Animista on 2020-11-4 15:24:7
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-in-bottom
 * ----------------------------------------
 */
 @-webkit-keyframes scale-in-bottom {
	0% {
	  -webkit-transform: scale(0);
			  transform: scale(0);
	  -webkit-transform-origin: 50% 100%;
			  transform-origin: 50% 100%;
	  opacity: 1;
	}
	100% {
	  -webkit-transform: scale(1);
			  transform: scale(1);
	  -webkit-transform-origin: 50% 100%;
			  transform-origin: 50% 100%;
	  opacity: 1;
	}
  }
  @keyframes scale-in-bottom {
	0% {
	  -webkit-transform: scale(0);
			  transform: scale(0);
	  -webkit-transform-origin: 50% 100%;
			  transform-origin: 50% 100%;
	  opacity: 1;
	}
	100% {
	  -webkit-transform: scale(1);
			  transform: scale(1);
	  -webkit-transform-origin: 50% 100%;
			  transform-origin: 50% 100%;
	  opacity: 1;
	}
  }
  


@keyframes border-flicker {
	0% {
	  opacity:0.1;
		-webkit-box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
		-moz-box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
		box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
	}
	25% {
	  opacity:0.5;
		-webkit-box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
		-moz-box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
		box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
	}
	75% {
	  opacity:0.8;
		-webkit-box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
		-moz-box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
		box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
	}

	
	100% {
		opacity:1;
		  -webkit-box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
		  -moz-box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
		  box-shadow: 0px 0px 78px 4px rgba(16,134,232,0.73);
	  }
	
}
  
@media screen and (max-width: 850px) {
	.login_panel{
		
		width: 90%;
	}
	.head{
		margin-top: -9vh;
		font-size: 2em;
	}
	.logo{
		width: 11vh;
		height: 11vh;
	}	
}

@media screen and (max-width: 400px) {
	.all{
		margin: 0;
	}


	.login_panel{
		width: 85%;
	}
	.login_panel table{
		margin-left: 0;
	}
	.login_panel table tr th{
		display: none;
		width: 0;
		padding: 0;
		margin: 0;
	}
	.login_panel table tr td input{
		font-size:0.5em;


	}
	.head{
		margin-top: -9vh;
		font-size: 1.5em;
	}
	.logo{
		width: 11vh;
		height: 11vh;
	}	

	.left-footer{
		font-size: 0.7em;
	}
}

.orangt{
	color:orange!important;
}

.whitet{
	color:#fff!important;
}
.loader {
	margin: 0 auto;
	/*border: 16px solid #f3f3f3; /* Light grey */
	/*border-top: 16px solid #3498db; /* Blue */
	border-radius: 50%;
	width: 120px;
	height: 120px;
	animation: spin 2s linear infinite;
	background: url('../images/logo.png');
	background-color: #fff;
	background-position: center;
	background-size: cover;
  }
  
  @keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
  }