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

	html, body
	{
		width: 100%;
		height: 100%;
		background: white;
		font-size: 16px;
		line-height: 1.5;
		font-family: Arial, Helvetica, sans-serif;
	}
	
	.nav_container
	{
		padding: 10px 50px 3px 50px;
		box-shadow: 0 0 5px silver;
		z-index: 10;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%; 
		background-color: white;
		display: flex;
		justify-content: center;
	}
	
	.logo_container img
	{
		
		width: 220px;
		margin-left: -40px;
		
	}
	
	.logo_container
	{
		flex: 1;
		justify-content: flex-start
	}
	
	/* REGISTER FORM STYLING */
	
	.all-container
	{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		position: relative;
		flex: 1;
		border: 10px solid #8FBC8F;
		border-left: 28px solid #8FBC8F;
		border-right: 31px solid #8FBC8F;
		width: 100%;
		/* background: darkblue; */
	}
	
	.nyif-bg
	{
		background: white;
	}
	
		.nyif-bg img
		{
			width: 600px;
			height: 100%;
		}
		
		.form_img
		{
			display: flex;
			justify-content: center;
		}
	
	.form_container
	{
		background-color: white;
		margin-left: 40px;
		width: 650px;
		padding: 25px;
		
	}
	
	.form_control
	{
		padding: 5px 0;
	}
	
	.form_control p
	{
		padding: 5px 0 10px 0;
	}
	
	.all-container .form_input
	{
		width: 100%;
		outline: none;
		font-size: 16px;
		padding: 8px;
		border: 1px solid green;
		border-radius: 5px;
		box-shadow: 0px 1px 3px green;
	}
	
	.form_container h2
	{
		text-align: center;
		color: green;
	}
	
	.form_button
	{
		width: 100%;
		margin: 0;
		padding: 10px;
		background: #32CD32;
		border: 0px;
		border-radius: 5px;
		cursor: pointer;
		font-size: 20px;
		color: white;
	}
	
	.form_button:hover
	{
		
		background: darkgreen;
		color: white;
		transition: 1s;
	}
	
	
	/*=========================LOGIN FORM STYLING========================= */
	
	.login_container
	{
		background: white;
		padding: 40px;
		margin-left: auto;
		margin-right: auto;
		display: block;
		width: 500px;
	}
	
		
	.form_controll
	{
		display: -ms-flexbox; 
		display: flex;
		margin-bottom: 15px;
	}
	
	.icon
	{
	   padding: 10px;
	   background: green;
	   color: white;
	   min-width: 50px;
	   text-align: center;
	}
	
	.input-field 
	{
		width: 100%;
		padding: 10px;
		outline: none;
		border: 1px solid darkgreen;
		display: inline-block;
		overflow: hidden;
	}
	
	.form_controll p
	{
		padding: 5px 0 10px 0;
	}

	
	.label
	{
		padding-bottom: 10px;
	}

	
	
	
	
	
	/* ALER MESSAGE */
	
	.success_message
	{
		display: block;
		padding: 10px;
		background-color: green;
		color: white;
		border-radius: 30px;
		margin-bottom: 15px;
	}
	

	
	.error_message
	{
		display: block;
		padding: 10px;
		background-color: #fffacd;
		color: darkred;
		border-radius: 30px;
		border-radius: 30px;
		margin-bottom: 15px;
	}
	
	
	
	/*========= @media for update form ================*/
	
	@media only screen and (max-width: 720px)

	{
		.nyif-bg
		{
			background: darkblue;
			width: 100%;
		}
	
		.nyif-bg img
		{
			width: 100%;
			height: 100%;
		}
		
		
		
		.form_container
		{
			overflow: hidden;
			margin: auto;
			width: 100%;
			padding: 30px;
			/* background: darkred; */
		}
		
		.form_img img
		{
			width: 270px;
		}
		
		.login_container
		{
			padding: 15px;
			width: 420px;
		}
		
		.input-field 
		{
			width: 100%;
		}
		
		.login_image img
		{
			width: 270px;
		}
	}