body{
	margin:0px;
	padding: 0px;
	background: #333;
}

#box{
	height: 200px;
	width: 90%;
	background: #2d2d2d;
	border-radius: 5px;
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
}

#main{
	height: 400px;
	width: 50%;
	background: white;
	border-radius: 5px;
	position: absolute;
	top:50%;
	left:70%;
	transform: translate(-50%, -50%);
	z-index: 99;

}
#loginform, #signupform, #forgotpasswordform{
	position: absolute;
	top:50%;
	left: 70%;
	transform: translate(-50%, -50%);
	z-index: 999;
}

#signupform form input[type="checkbox"]{
margin-bottom: 20px;
}



/*=================================Sign up form=================================================================*/
#signupform{
	position: absolute;
	top: 50%;
	width: 60%;
	/*height:;*/
	/*background-color: rgba(0, 0 , 0, 0.8);*/
	z-index: 110;
	visibility: hidden;

}


/*#addClient p{
	color: white;
	margin-bottom: -10px;
	cursor: pointer;
}*/
#signupform form{
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	box-sizing: border-box;
	padding: 20px;
	border-radius: 10px;
	/*border-color: #555;*/
	width: 100%;
	background: white;
	box-shadow: 0px 2px 10px 1px;
	
}
#signupform input, #loginform input, #forgotpasswordform input{
	position: relative;
    border:none;
	outline: none;
	border-bottom: 1px solid #999;
	background: none;
/*	color: white;*/
     color: #333;
     transition: 0.5;

}
#signupform input:hover, #loginform input:hover{
	border-bottom: 1px solid green;
}

#signupform form input[type="submit"]{
	position: absolute;
	bottom:0%;
	left: 5%;

	width: 120px;
	height: 30px;
	background: linear-gradient(to top, rgba(117,137,12,1), rgba(164,179,87,1)) !important;
	color: #fafafa !important;
	border-radius: 5px;
	border-color: #555; 
	margin-bottom: 20px;
	font-family:monospace;
	font-size: 16px;
	cursor: pointer;

}

#signupform form input[type="button"]{
	position: absolute;
	bottom:0%;
	right: 5%;
	width: 120px;
	height: 30px;
	background: linear-gradient(to top, rgba(117,137,12,1), rgba(164,179,87,1)) !important;
	color: #fafafa !important;
	border-radius: 5px;
	border-color: #555; 
	margin-bottom: 20px;
	font-family:monospace;
	font-size: 16px;
	cursor: pointer;
	text-transform: uppercase;
		
}



.inputText{
	position: absolute;
	line-height: 50px;
	
	/*color: #fafafa;*/
	color: #333;
	font-size: 15px;
	transition: 0.5s;
	opacity: .8;
	
}
/*==============================lable text animation==================================================*/
.focus .inputText{
	transform: translateY(-20px);
	font-size: 12px;
	opacity: 1;
	color: #00bcd4;
}
/*======================================================================================================*/

#signupform form input[type="text"],
#signupform form input[type="email"],
#signupform form input[type="address"],
#signupform form input[type="password"]
{
	padding: 10px 5px;
	/*box-sizing: border-box;*/
	width: 100%;
	/*border:2px solid #333;*/
	/*border-radius: 5px;*/
/*	outline:none;*/
	transition: all 0.2s ease;
	overflow: hidden;
	font-size: 15px;
	margin-top: 0;
	background: none;
	color: #333;

}




/*-------------------------------Name Adn Last Name--------------------------------*/
.firstrow{

	width: 100%;
	min-height: 65px;
	margin-top:25px;
	
}
.firstrow .inner-form{
	width: 30%;
	float: left;
	margin-right:4%; 
	background: none;
	
}
.firstrow .inner-form:nth-child(2){
	margin-right:4%;
}
.firstrow .inner-form:last-child{
	margin-right:0;
}

.idNo{

	width: 100%;
	min-height: 65px;
	margin:0;
	margin-bottom: 25px;
}
.idNo .inner-form{
	width: 98%;
	float: left;
	margin-right:4%; 
	background: none;
	margin-top: -20px;
	
}
/*.firstrow .inner-form:nth-child(2){
	margin-right:4%;
}
.firstrow .inner-form:last-child{
	margin-right:0;
}*/
/*-------------------------------------------Email, Mobile And Phone no---------------------*/
.secondrow{

	width: 100%;
	min-height: 65px;
	
	
}

.secondrow .inner-form{
	width: 30%;
	float: left;
	margin-right:4%; 
	
}
.secondrow .inner-form:last-child{
	margin:0;

}

/*------------------------------------Address-------------------------------------------*/
.add{

	width: 100%;
	min-height: 65px;
	margin:0;
}

.add .inner-form{
	
	float: left;
	margin-right: 2%;
	
	
}

.add .inner-form:first-child{
	width: 40%;
	margin-right:4%; 
}

.add .inner-form:nth-child(2){
width: 15%;
margin-right:4%; 
}
.add .inner-form:nth-child(3){
width: 11%;
margin-right:4%; 
}
.add .inner-form:last-child{
margin-right:0;
width: 20%
	
}

/*---------------------------------Username And Password---------------------------------------------*/

.lastrow{

	width: 100%;
	min-height: 65px;
}

.lastrow .inner-form{
	float: left;
	margin-right:4%; 
}
.lastrow .inner-form:first-child{
	width: 30%;
	margin-right:4%; 
}
.lastrow .inner-form:nth-child(2){
	width: 30%;

}

.lastrow .inner-form:last-child{
	width: 30%;
	margin-right:0;
}


/*.idNo{
	width: 30%;
	min-height: 65px;
    margin:0;	

}*/
 
/*--------------------------------------------------Submit-------------------------------------------*/
/*.btn input[type="submit"]{
width: 120px;
height: 30px;
background: linear-gradient(to top, rgba(117,137,12,1), rgba(164,179,87,1)) !important;
color: #fafafa !important;
border-radius: 5px;
border-color: #555;

font-size: 15px;
cursor: pointer;
margin-left: 5%;
margin-bottom: 0px !important;
}
.btn input[type="button"]{
width: 120px;
height: 30px;
background: linear-gradient(to top, rgba(117,137,12,1), rgba(164,179,87,1)) !important;
color: #fafafa !important;
border-radius: 5px;
border-color: #555;
margin-top: -10 !important;
margin-left: 20px;
font-size: 15px;
cursor: pointer;
}*/
/*--------------------------------------------terms And Condition--------------------------------------*/
.checkbox{
	position: relative;
	margin-bottom: 30px;
	left:10;
	float: left;
	
}
.terms{
	color: #333;
	cursor: pointer;
}
.terms_text{
 width: 40%;
 height: 100px;
 overflow: scroll;
 border:2px solid #555;
 border-radius: 2%;
 background:#fafafa;
 padding: 15px;
 text-align: justify;

}


.ram{
	display: none;
}


 .error{
 	color:red;
 	font-style: italic;
	margin-top: 10px;
 	visibility: hidden;
 	
 }


 
/*===============================for popup code form======================================*/
#popup{
	position: relative;
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0 , 0, 0.7);
	z-index: 1;
	display: none;
}

 #popup form input
{
	padding: 10px 5px;
	/*box-sizing: border-box;*/
	width: 100%;
	/*border:2px solid #333;*/
	/*border-radius: 5px;*/
	/*outline:none;*/
	transition: all 0.2s ease;
	overflow: hidden;
	font-size: 15px;
	margin-top: 0;
	position: relative;
    border:1px solid #999;
	/*outline: none;*/
	background: none;
     color: #333;
     transition: 0.5;

}
#popup input:hover{
	border: 1px solid green;
}


/*#popup p{
	color: white;
	margin-bottom: -10px;
}*/

.inside_pop{
	width: 400px;
	height: 200px;
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	background: white;
	box-shadow: 1px 2px 10px 1px;
	box-sizing: border-box;
	border-radius: 5px;
	padding: 10px;
	text-align: center;	
}

.pop_input{
	text-align: center;
	padding: 10px;
	margin-top: 5%;
	cursor: pointer;
}



.pop_input #verify{
	width: 70%;
	height: 20px;

}


.modal_close{
position: absolute;
top:5%;
right:5%;
text-decoration: none;
font-size: 30px;
/*color: #00bcd4;*/
color: #333;
cursor: pointer;
transition: 0.4s;
}

.modal_close:hover{
	font-size: 40px;
}

#forgotPopup{
	position: relative;
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0 , 0, 0.7);
	z-index: 1;
	display: none;
}

 #forgotPopup form input
{
	padding: 10px 5px;
	/*box-sizing: border-box;*/
	width: 100%;
	/*border:2px solid #333;*/
	/*border-radius: 5px;*/
	/*outline:none;*/
	transition: all 0.2s ease;
	overflow: hidden;
	font-size: 15px;
	margin-top: 0;
	position: relative;
    border:1px solid #999;
	/*outline: none;*/
	background: none;
     color: #333;
     transition: 0.5;

}
#forgotPopup input:hover{
	border: 1px solid green;
}


/*#popup p{
	color: white;
	margin-bottom: -10px;
}*/

.inside_pop{
	width: 400px;
	height: 220px;
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	background: white;
	box-shadow: 1px 2px 10px 1px;
	box-sizing: border-box;
	border-radius: 5px;
	padding: 10px;
	text-align: center;	
}

.pop_input{
	text-align: center;
	padding: 10px;
	margin-top: 5%;
	cursor: pointer;
}



.pop_input #verify{
	width: 70%;
	height: 20px;

}

/*=================================verify button=======================================================================*/
#verify_code, #resend_code{
	position: absolute;
	bottom:0%;
	left: 20%;
	width: 100px;
	height: 30px;
	background: linear-gradient(to top, rgba(117,137,12,1), rgba(164,179,87,1)) !important;
	color: #fafafa !important;
	border-radius: 5px;
	border-color: #555; 
	margin-bottom: 10px;
	cursor: pointer;
		
}
#resend_code{
	left: 55%;
}


#forgotVerify_code, #forgotResend_code{
	position: absolute;
	bottom:8%;
	left: 20%;
	width: 100px;
	height: 30px;
	background: linear-gradient(to top, rgba(117,137,12,1), rgba(164,179,87,1)) !important;
	color: #fafafa !important;
	border-radius: 5px;
	border-color: #555; 
	margin-bottom: 10px;
	cursor: pointer;
		
}
#forgotResend_code{
	left: 55%;
}

/*====================================================================================================================*/
 
 @media (max-width: 768px){
	.inside_pop{
		width: 80%;
	}
	#verify_code, #resend_code{
		width: 80px;
	}

	
	#signupform form input[type="button"]{
	left:50%;
	}
 }

/*---------------------------------------------------------------*/

#forgotpasswordform{
	top:45%;
	left:75%;
	visibility: hidden;
}
#loginform h1, #signupform h1, #forgotpasswordform h1{
	font-size: 25px;
	color:turquoise;
	letter-spacing: 1px;
	text-align: center;
}
/**/
#loginform input, #forgotpasswordform input{
	height: 40px;
	width: 300px;
	border: none;
	outline: none;
	border-bottom: 1px solid #999;
	margin:5px;


}
/*=====================================login button==============================================================*/
#loginform form input[type="submit"]{
 	width: 100px;
 	height: 35px;
	background: linear-gradient(to top, rgba(117,137,12,1), rgba(164,179,87,1));
	font-family:monospace;
	font-size: 16px;
	color:white;
	border:none;
	border-radius: 5px;
	margin-top: 30px;
 	border-bottom: none;
 	cursor: pointer;
}
/*=======================================================================================================================*/


 
#loginform button, #signupform button, #forgotpasswordform button{
	height: 35px;
	width: 130px;
	background: turquoise;
	font-family:monospace;
	font-size: 16px;
	color:white;
	border:none;
	border-radius: 5px;
	margin-top: 30px;
	margin-left: 175px;
}

#login_btn, #signup_btn, #forgotpassword_btn{
	height: 35px;
	width: 120px;
	background: transparent;
	color: white;
	border: 1px solid white;
	border-radius: 5px;
	outline: none;
	position: absolute;
	left:75%;
	top:65%;
	transform: translate(-50%, -50%);
	transition: 0.5s;

}
#signup_btn{
	left:25%;
	top:35%;
}
#forgotpassword_btn{
	left:25%;
	top:80%;
}

#login_btn:hover, #signup_btn:hover, #forgotpassword_btn:hover{
	background: white;
	color: #2d2d2d;
	font-size: 15px;

	cursor: pointer;
}

#login_msg, #signup_msg, #forgotpassword_msg{
	font-family: arial;
	font-size: 20px;
	color: white;
	position: absolute;
	top: 35%;
	left:75%;
	transform: translate(-50%, -50%);
	opacity: 0.8;
	z-index: 1;

}
#signup_msg{
	left:25%;
	top:15%;
}

#forgotpassword_msg{
	left:25%;
	top:60%;
}
#mobile_signup_btn, #mobile_login_btn, #mobile_forgotpassword_btn{
	display: none;
}
#mobile_signup_btn,{
	display: none;
}



/*--------------------------------------Media------------------------------------------------------------
*/
@media(max-width: 768px){
	#box{
		width: 90%;
		background: none;	
	}
#main{
	height: 400px;
	width: 100%;
	top:50%;
	left:50%;
}
#loginform, #signupform, #forgotpasswordform{
	top:50%;
	left:50%;
}
#signupform{
	
	visibility: hidden;

	
}
#loginform{
/*	display: none;*/
}
  #forgotpassword_msg,
 #login_btn, #signup_btn, #forgotpassword_btn {
 	display: none;
 }
 #signup_msg{
 top:-90%;
 left: 50%;
 font-size: 15px;
 
 transform: translate(-50%, -50%);
 }
 #login_msg{
 top:-100%;
 left: 50%;
 font-size: 15px;
 transform: translate(-50%, -50%);
 display: none;
 }

 #mobile_signup_btn, #mobile_login_btn, #mobile_forgotpassword_btn{
 	position: absolute;
 	top:-50%;
 	left:50%;
 	display: block;
 	z-index:1;
 	height: 35px;
	width: 120px;
	background: transparent;
	color: white;
	border: 1px solid white;
	border-radius: 5px;
	outline: none;
	transform: translate(-50%, -50%);
	transition: 0.5s;
 }
 #mobile_signup_btn{
top:-70%;

 }
 #mobile_login_btn{
 	top:-80%;
 	display: none;
 }
 #mobile_forgotpassword_btn{
 	top:170%;
 }

}
/*----------------------------------------------------------------------------------*/
@media(max-width: 768px){

#signupform form input[type="text"],
#signupform form input[type="email"],
#signupform form input[type="address"],
#signupform form input[type="password"]
{
	
	margin-top: 0;
	

}
#signupform form{
	width: 90%;

	}
	.firstrow .inner-form:first-child{
	width: 45%;
	margin-left:0%;
	margin-right: 10%;
	
}
.firstrow .inner-form:nth-child(2){
	width:45%;
	margin-right:0%;

}
.firstrow .inner-form:last-child{
	width: 100%;
	float: left;
	margin-right:2%; 
	margin-bottom:0px;
	margin-top: 0px;
}

	.secondrow .inner-form:first-child{
	width: 100%;
	float: left;
	margin-right:2%; 
	margin-bottom: 0px;
	
}
.secondrow .inner-form:nth-child(2){
	width:45%;
	margin-right: 10%;

}
.secondrow .inner-form:last-child{
	width:45%;
	
}


.add .inner-form:first-child{
	width: 100%;
	margin-top: 0px;

}

.add .inner-form:nth-child(2){
width: 25%;
margin-top: 0px;
margin-right: 10%;

}
.add .inner-form:nth-child(3){
width: 25%;
margin-top: 0px;
margin-right: 10%;
margin-bottom: 0px;
}
.add .inner-form:last-child{
margin-right:0;
width: 25%;
margin-top: 0;
margin-bottom: 0px;
	
}

.lastrow .inner-form:first-child{
	width: 100%;
	margin-top: 0;
	margin-bottom:0;
}
.lastrow .inner-form:nth-child(2){
	width: 46%;
	margin-bottom:0;
	margin-right: 8%;
}


.lastrow .inner-form:last-child{
	width: 46%;
	margin-bottom: 0;

}




/*#signupform form input[type="submit"]{
width: 120px;
height: 40px;
margin-bottom: 0px;
left:0%;
}
#signupform form input[type="button"]{
width: 100px;
height: 40px;
margin-top: 10px;

 }*/
}
 
 @media (max-width: 786px){
	#signupform{
		width: 100%;
		

	}
		#signupform form{
		width: 100%;
		height: auto;

	}
	#signupform form input[type="submit"],
	 #signupform form input[type="button"]{
		bottom:2%;
		
	}
 }

/*===========================Auto fill Background color===================================*/
#signupform input:-webkit-autofill,
#signupform input:-webkit-autofill:hover,
#signupform input:-webkit-autofill:focus,
#signupform input:-webkit-autofill:active {
    -webkit-animation: autofill 0s forwards;
    animation: autofill 0s forwards;
    -webkit-text-fill-color: #333;
}

@keyframes autofill {
    100% {
        background: transparent;
        color: inherit;
    }
}

@-webkit-keyframes autofill {
    100% {
        background: transparent;
        color: inherit;
    }
}


#loginform input:-webkit-autofill,
#loginform input:-webkit-autofill:hover,
#loginform input:-webkit-autofill:focus,
#loginform input:-webkit-autofill:active {
    -webkit-animation: autofill 0s forwards;
    animation: autofill 0s forwards;
    -webkit-text-fill-color: #333;
}

@keyframes autofill {
    100% {
        background: transparent;
        color: inherit;
    }
}

@-webkit-keyframes autofill {
    100% {
        background: transparent;
        color: inherit;
    }
}