body {
	margin: 0;
	padding: 0;
}
.warning {
	font-size: 24px;
	text-align: center;
	color: rgb(63, 72, 86);
	border: 1px solid red;
}
.tree {
	height:500px; 
	overflow-y:scroll; 
	border:1px solid #ccc;
}
.tree li:hover {cursor:pointer;}
.tree input {display:inline;}
.errors {margin:10px 0px; border: 1px dotted red; padding:10px;}
.success {
	margin:10px 0px; 
	padding:10px;
}
.invisible {
	display: none;
}
.formContainer {
	text-align: left;
}
.formContainer,
.formContainerCode {
	width: 650px;
	margin: 10px auto;
	background-color: white;
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
	padding: 20px;
}
.formContainer input,
.formContainerCode input {
	padding: 5px;
	color: rgb(63, 72, 86);
	cursor: pointer;
	outline: none;
	font-size: 18px;
	border: none;
	border: 1px solid gray;
	transition: all 0.3s ease-in-out;
	width: 96%;
}
.formContainer input.halfSize {
	width: 46%;
}
.formContainer input.thirdSize {
	width: 29%;
}
.formContainerCode input.halfSize {
	width: 48.5%;
}
.formContainer input:focus,
.formContainerCode input:focus {
	box-shadow: 0 0 10px rgba(66, 134, 244,0.6);
	transition: all 0.3s ease-in-out;
}
.formContainer input[type="submit"],
.formContainerCode input[type="submit"] {
	outline: none;
	border: none;
	background: rgba(60, 187, 102, 1);
	cursor: pointer;
	color: white;
	padding: 5px 10px;
	border: 1px solid rgba(60, 187, 102, 1);
	transition: all 0.3s ease-in-out;
}
.formContainer input[type="submit"]:hover,
.formContainerCode input[type="submit"]:hover {
	border: 1px solid rgba(38, 119,	64, 1);
	box-shadow: 0 0 10px rgba(38, 119,	64, 1);
	transition: all 0.3s ease-in-out;
}
.formDescriptions {
	display: block;
	font-size: 22px;
	color: rgb(63, 72, 86);
	margin: 10px 0px 3px 0px;
	text-align: justify;
	text-indent: 20px;
	margin-bottom: 10px;
}
.requiredField {
	color: red;
	font-size: 20px;
	position: relative;
	top: -5px;
	left: -12px;
}
.requiredFieldDescription {
	color: red;
}
input[type=password]:invalid {
	border: solid 2px red;
}
.engaged,
.registerInfo {
	margin: 10px auto;
	text-align: center;
	font-size: 20px;
	padding: 20px;
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.engaged input[type="submit"],
.registerInfo input[type="submit"] {
	font-size: 20px;
	outline: none;
	border: none;
	background: rgba(60, 187, 102, 1);
	cursor: pointer;
	color: white;
	padding: 5px 10px;
	border: 1px solid rgba(60, 187, 102, 1);
	transition: all 0.3s ease-in-out;
}
.engaged input[type="submit"]:hover,
.registerInfo input[type="submit"]:hover {
	border: 1px solid rgba(38, 119,	64, 1);
	box-shadow: 0 0 10px rgba(38, 119,	64, 1);
	transition: all 0.3s ease-in-out;
}

/* The message box is shown when the user clicks on the password field */
#message {
    display:none;
    color: #000;
    position: relative;
    padding-left: 20px;
    margin-top: 10px;
}
#message span {
	display: block;
    padding: 0 35px;
    font-size: 18px;
}
/* Add a green text color and a checkmark when the requirements are right */
.valid {
    color: green;
}
.valid:before {
    position: relative;
    left: -35px;
    content: "✔";
}
/* Add a red text color and an "x" when the requirements are wrong */
.invalid {
    color: red;
}
.invalid:before {
    position: relative;
    left: -35px;
    content: "✖";
}
.register_information {
	width: 600px;
	margin: 0 auto;
}

/*TABS*/
.tabs {
	list-style-type: none;
	padding: 0;
	margin: 0;
	position: relative;
	width: 650px;
	margin: 0 auto;
}
.tabs:after {
	content: "";
	clear: both;
	display: block;
	height: 240px;
}
.tabs li {
	float: left;
}
.tabs li > input {
	display: none;
}
.tabs li > label {
	display: inline-block;
	border: 1px solid #5EC785;
	border-right-width: 0;
	border-bottom-width: 0;
	height: 30px;
	line-height: 30px;
	padding: 5px 20px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	font-size: 20px;
}
.tabs li:last-child > label {
	border-right-width: 1px;
}
.tabs .tab-content {
	display: none;
	position: absolute;
	left: 0;
	padding: 20px;
	border: 1px solid #5EC785;
	overflow-y: auto;

	-moz-transition: opacity .5s ease-in-out;
	-webkit-transition: opacity .5s ease-in-out;
	transition: opacity .5s ease-in-out;
}

/* Functional */

.tabs li > input:checked + label {
	background-color: #5EC785;
}
.tabs li > input:checked ~ .tab-content {
	display: block;
}