@charset "UTF-8";

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;

}
/*This is for the background colour*/
#container{
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
background: rgb(127,0,255);
background: linear-gradient(90deg, rgba(127,0,255,0.14627100840336138) 35%, rgba(225,0,255,0.15467436974789917) 100%);
}

/*This is for the login and signup page white box */

#page{
	height: auto;
	width: 300px;
	box-shadow: 0px 0px 10px #ccc;
	background: white;
	border-radius: 15px;
	padding: 50px 25px;

}

/*login and sign up page coding start*/

#login h1,#signup h1 {
	font-family: 'Ubuntu', sans-serif;
}

#login_email,#login_password,#username,#password,#email,#phone{
	border: none;
	border-bottom: 1px solid #ccc;
	padding: 10px;
	padding-left: 3px ;
	width: 100%;
	margin-top: 20px;
	font-size: 16px;
   font-family: 'Ubuntu', sans-serif;
   outline: none;
   color: #727272;
}

#login_frm{

margin-top: 30px;
}

#signup_frm{

margin-top: 10px;
}

#login_btn,#signup_btn{
	width: 100%;
	border: none;
	font-size: 16px;
	padding: 10px;
	background: #7F00FF;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #E100FF, #7F00FF);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #E100FF, #7F00FF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	color: white;
  font-family: 'Ubuntu', sans-serif;
  outline: none;	
  cursor: pointer;
  margin-top: 30px;
}

#login p,#signup p{
	 font-family: 'Ubuntu', sans-serif;
	 margin-top: 20px;
	 font-size: 14px;
	 text-align: center;
}

#login span,#signup span{
	color: blue;
	cursor: pointer;
}

#signup{
	display: none;
}

#small,#l_small_e,#l_small_p,#s_small_p{
	  font-family: 'Ubuntu', sans-serif;
	  color: red;
	  margin-top: 3px;
	  display: none;
}

#upper,#lower,#symbol,#number{
	  font-family: 'Ubuntu', sans-serif;
	  color: red;
	  margin-top: 3px;
	  display: ;
}

#password_line{
	 font-family: 'Ubuntu', sans-serif;
	  color: red;
	  margin-top: 3px;
	  display: none;
}


#password_box{
	width: 100%;
	height: auto;
	border: 1px solid red;
	border: none;
	padding: 5px;
	background: white;
	display: none;
}


#loader{
	position: absolute;
	top: 260px;
	left: 190px;
	color: red;
	display: none;

}

#check{
	position: absolute;
	top: 260px;
	left: 190px;
	color: green;
	display: none;
}

#u_loader{
	position: absolute;
	top: 310px;
	left: 105px;
	color: red;
}

#u_check{
	position: absolute;
	top: 310px;
	left: 105px;
	color: green;
		display: none;
}

#l_loader{
	position: absolute;
	top: 328px;
	left: 105px;
	color: red;
}

#l_check{
	position: absolute;
	top: 328px;
	left: 105px;
	color: green;
		display: none;
}

#n_loader{
	position: absolute;
	top: 345px;
	left: 105px;
	color: red;
}

#n_check{
	position: absolute;
	top: 345px;
	left: 105px;
	color: green;
		display: none;
}

#s_loader{
	position: absolute;
	top: 363px;
	left: 145px;
	color: red;
}

#s_check{
	position: absolute;
	top: 363px;
	left: 145px;
	color: green;
	display: none;
}

#second{
	border: 1px solid inherit;
	margin-top: -20px;
}