/* CSS Document */

		
			/*assign full width inputs*/
	input[type=text],
	input[type=password] {
		width: 40%;
		padding: 12px 20px;
		margin: 8px 0;
		display: inline-block;
		border: 1px solid #ccc;
		box-sizing: border-box;
	}

	/*set a style for the buttons*/
	button {
		background-color: #4CAF50;
		color: white;
		padding: 14px 20px;
		margin: 8px 0;
		border: none;
		cursor: pointer;
		width: auto;;
	}

	/* set a hover effect for the button*/
	button:hover {
		opacity: 0.8;
	}

	/*set extra style for the cancel button*/
	.cancelbtn {
		width: auto;
		padding: 10px 18px;
		background-color: #f44336;
	}

	/*centre the display image inside the container*/
	.imgcontainer {
		text-align: center;
		margin: 24px 0 12px 0;
		position: relative;
	}

	/*set padding to the container*/
	.containerc {
		padding: 20px;
		background-color:#FFFFFF;
		width: 80%;
	}
	
	/*set the forgot password text*/
	span.psw {
		float: right;
		padding-top: 16px;
	}

	/*set the Modal background*/
	.modal {
		display: none;
		position: fixed;
		z-index: 1;
		left: 0;
		top: 0;
		width: 90%;
		height: 100%;
		overflow: auto;
		background-color: rgb(0, 0, 0);
		background-color: rgba(0, 0, 0, 0.4);
		padding-top: 10px;
		margin-top:10%;
		margin-left:5%;
		border-radius: 10px;
		opacity:0.9;
		
	}

	/*style the model content box*/
	.modal-content {
		background-color: #fefefe;
		margin: 5% auto 15% auto;
		border: 1px solid #888;
		width: 100%;
	}

	/*style the close button*/
	.close {
		position: absolute;
		right: 10px;
		top: 10px;
		color: #000;
		font-size: 35px;
		font-weight: bold;
	}
	
	.close:hover,
	.close:focus {
		color: red;
		cursor: pointer;
	}

	/* add zoom animation*/
	.animate {
		-webkit-animation: animatezoom 0.6s;
		animation: animatezoom 0.6s
	}
	
	@-webkit-keyframes animatezoom {
		from {
			-webkit-transform: scale(0)
		}
		to {
			-webkit-transform: scale(1)
		}
	}
	
	@keyframes animatezoom {
		from {
			transform: scale(0)
		}
		to {
			transform: scale(1)
		}
	}
	
	@media screen and (max-width: 370px) {
		span.psw {
			display: block;
			float: none;
		}
		.cancelbtn {
			width: 200px;
		}
	}