#loginbutton {
	padding: 0.5rem;
	text-align: center;
	margin-right: 0.5rem;
	align-self: flex-end;
	font-size: 2rem;
}

#signupbutton {
	padding: 0.5rem;
	text-align: center;
	margin-right: 0.5rem;
	align-self: flex-end;
	font-size: 2rem;
}

#createbutton {
	padding: 0.5rem;
	text-align: center;
	margin-right: 0.5rem;
	align-self: flex-end;
	font-size: 2rem;
}

#refreshbutton {
	padding: 0.5rem;
	text-align: center;
	margin-right: 0.5rem;
	align-self: flex-end;
	font-size: 2rem;
}

#submitbutton {
	padding: 0.5rem;
	text-align: center;
	margin-right: 0.5em;
	align-self: flex-end;
	font-size: 2rem;
}


input[type=text] {
	width: 100%;
	min-width: 28rem;
	padding: 1rem;
	margin: 4px 0;
	box-sizing: border-box;
	border: 1px solid rgba(0, 0, 0, 0.3);
	border-radius: 4px;
}

input[type=password] {
	width: 100%;
	min-width: 28rem;
	padding: 1rem;
	margin: 4px 0;
	box-sizing: border-box;
	border: 1px solid rgba(0, 0, 0, 0.3);
	border-radius: 4px;
}

/*
input[type=submit] {
	background-color: #7986CB;
	border: none;
	color: white;
	padding: 6px;
	text-align: center;
	vertical-align: middle;
	font-size: 16px;
}
	*/

div.message-area {
	border: 2px solid #346598;
	border-radius: 8px;
	/* Slightly rounded corners */
	padding: 1rem;
	color: #346598;
}

div.message-error {
	border: 2px solid red;
	border-radius: 8px;
	/* Slightly rounded corners */
	padding: 1rem;
	background-color: #ffd6d6;
}

div.body-content {
	background-color: #fff9c7;
	padding-bottom: 4.8rem;
}

div.container-start {
	width: 60%;
	margin: auto;
	font-size: 2.2rem;
}

h1 {
	color: #346598;
}

input:invalid {
	border: 1px dashed red;
}

input:valid {
	border: 1px solid rgba(0, 0, 0, 0.3);

}


.step-one {
	/*
	background-color: #346598; 
	padding: 16px; 
	border-radius: 8px;
	color: #dddddd;
	*/
}

.step-two {
	/*
	padding: 16px; 
	border-radius: 8px;
	color: #dddddd;
	*/
}

.inactive {
	color: #999999;
}

/*
.button {
	background-color: #7986CB;
	border: none;
	color: white;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	cursor: pointer;
}
	
*/


@media screen and (max-width: 900px) {
	div.container-start {
		width: 70%;
		font-size: 2rem;
	}


}

@media screen and (max-width: 500px) {
	div.container-start {
		width: 95%;
		font-size: 1.8rem;
	}


}