body{
	background: var(--primary-color);
	color: #212121;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	font-size: 18px;
	padding: 10% 0 0 0;
	min-height: 100vh;
}
.login-text{
	color: #fafafa;
	margin: 5px;
	font-family: Pristina;
	font-size: 2em;
}
.logo{
	transition: transform 0.8s ease-in-out;
}
.logo:hover{
	-webkit-transform: rotate(3deg);
}
.control{
	outline: none;
	padding: 10px 10%;
}
.control .forgot, .forgot a{
	font-size: 14px;
	text-align: right;
	font-style: italic;
	color: #fafafa;
}
.control input[type=submit]{
	outline: none;
	background-color: #FFF;
	border: none;
	color: #3F51B5;
	padding: 7px 20px;
	text-decoration: none;
	margin: 4px 2px;
	cursor: pointer;
	box-shadow: 0 0 10px 2px #80cdeb;
	
}
input[type=text], input[type=password], input[type=number], input[type=email]{
	border: none;
	border-radius: 4px;
	background: #fafafa;
	border-bottom: 4px solid #0086c3;
	padding: 9px 12px 8px 12px;
	outline: none;
	-webkit-transition: border-bottom 0.4s ease-in-out;
	transition: border-bottom 0.4s ease-in-out;
}
input[type=text]:focus, input[type=password]:focus, input[type=number]:focus, input[type=email]:focus{
	border-bottom: 4px solid #29b6f6;
}
input[type=search] {
	background-color: white;
	background-image: url('searchicon.png');
	background-position: 10px 10px; 
	background-repeat: no-repeat;
	padding-left: 40px;
}
textarea {
	width: 100%;
	height: 150px;
	padding: 12px 20px;
	box-sizing: border-box;
	border: 2px solid #ccc;
	border-radius: 4px;
	background-color: #f8f8f8;
	resize: none;
}
select {
	font-size: 18px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	/* Some browsers will not display the caret when using calc, so we put the fallback first */ 
	background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") white no-repeat 98.5% !important; /* !important used for overriding all other customisations */
	background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") white no-repeat calc(100% - 10px) !important; /* Better placement regardless of input width */

	border: none;
	border-radius: 4px;
	background: #fafafa;
	border-bottom: 4px solid #0086c3;
	padding: 9px 12px 8px 12px;
	outline: none;
	-webkit-transition: border-bottom 0.4s ease-in-out;
	transition: border-bottom 0.4s ease-in-out;
}
.form{
	color: #fafafa;
	margin: auto;
	background: #3F51B5;
	padding: 5px;
	width: 500px;
	box-shadow: 0px 0px 200px 5px #3F51B5;
	border-radius: 5px;
}
@media (max-width:801px) {
	body{
		padding: 10px;
	}
	.field label{
		display: none;
	}
	.field input, .field select{
		width: 90%;
	}
	.form{
		width: 100%;
		height: 100vh;
	}
}
.field{
	margin: 10px;
}
label, input {
	font-size: 18px;
	/* in order to define widths */
	display: inline-block;
}

label {
	width: 20%;
	/* positions the label text beside the input */
	text-align: right;
	vertical-align: middle;
}
label + select {
	width: 60%;
	margin: 0 4%;
}
label + input{
	width: 60%;
	margin: 0 4%;
}

/* only the submit button is matched by this selector,
but to be sure you could use an id or class for that button */
input + input {
	float: right;
}
.new_data{
	padding: 0 0 10px 0;
	text-align: right;
}