body {
	--background-color: #f1f1f1;
}

/* FROM page.php */

	/* W3.CSS 4.15 December 2020 by Jan Egil and Borge Refsnes */
		html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}

	/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
		html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
		
		
		button,input,select,textarea,optgroup{font:inherit;margin:0}optgroup{font-weight:bold}
		button,input{overflow:visible}button,select{text-transform:none}
		button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}
		button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}
		button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}
		
		

		[type=checkbox],[type=radio]{padding:0}
		[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
		[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
		[type=search]::-webkit-search-decoration{-webkit-appearance:none}
		::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
	/* End extract */

	html,body{font-family:Roboto,Verdana,sans-serif;font-size:15px;line-height:1.5}html{overflow-x:hidden;overflow-y:scroll;}
	h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}
	.w3-serif{font-family:serif}.w3-sans-serif{font-family:sans-serif}.w3-cursive{font-family:cursive}.w3-monospace{font-family:monospace}
	h1,h2,h3,h4,h5,h6{font-family:"Segoe UI",Arial,sans-serif;font-weight:400;margin:10px 0; color: #008000;}.w3-wide{letter-spacing:4px}
	hr{border:0;border-top:1px solid #eee;margin:20px 0}

	h1 {
	  font-size: 42px;
	}
	h2 {
	  font-size: 32px;
	}

	p {
	  margin-top: 1.2em;
	  margin-bottom: 1.2em;
	  font-size: 15px;
	}
	hr {
	  margin:20px -16px;
	}

	/*@media only screen and (max-device-width: 480px) {*/
	@media only screen and (max-width: 500px) {

		/* #main {padding:24px;padding:16px} */

		h1 {
		  font-size: 30px;
		}
		h2 {
		  font-size: 25px;
		}
	}
/* End page.php */

/* FROM register.php */
* {
	box-sizing: border-box;
}

body {
	background-color: var(--background-color);
}

#pageContainer {
	background-color: #ffffff;
	margin: 100px auto 0px auto;
	font-family: Roboto;
	padding: 40px;
	width: 70%;
	min-width: 300px;
}

h1 {
	text-align: center;
}

input {
	padding: 10px;
	width: 100%;
	font-size: 17px;
	font-family: Roboto;
	border: 1px solid #aaaaaa;
}

/* Mark input boxes that gets an error on validation: */
input.invalid {
	background-color: #ffdddd;
}

button {
	background-color: #04AA6D;
	color: #ffffff;
	border: none;
	padding: 10px 20px;
	font-size: 17px;
	font-family: Roboto;
	cursor: pointer;
}

button:hover {
	opacity: 0.8;
}

#prevBtn {
	background-color: #bbbbbb;
}

.cancelBtn {
	background-color: #f33;
}

/* End register.php */


/* End ROW COL */
.row {
	display: -ms-flexbox;
	/* IE10 */
	display: flex;
	-ms-flex-wrap: wrap;
	/* IE10 */
	flex-wrap: wrap;
	margin: 0 -16px;
}

.col-25 {
	-ms-flex: 25%;
	/* IE10 */
	flex: 25%;
}

.col-50 {
	-ms-flex: 50%;
	/* IE10 */
	flex: 50%;
}

.col-75 {
	-ms-flex: 75%;
	/* IE10 */
	flex: 75%;
}

.col-25,
.col-50,
.col-75 {
	padding: 0 16px;
}
/* End Row Col */

/* FORM */
select {
	width: 100%;
	padding: 12px 20px;
	margin: 8px 0;
	display: block;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
}

textarea {
	width: 100%;
	padding: 10px;
	font-size: 17px;
	font-family: Roboto;
	border: 1px solid #aaaaaa;
	box-sizing: border-box;
	resize: vertical;
}
/* End FORM */

/* Style buttons */
.btn {
	border: none; /* Remove borders */
	color: white; /* White text */
	padding: 12px 16px; /* Some padding */
	font-size: 16px; /* Set a font size */
	cursor: pointer; /* Mouse pointer on hover */
}

.success {background-color: #04AA6D;} /* Green */
.success:hover {background-color: #46a049;}

.info {background-color: #2196F3;} /* Blue */
.info:hover {background: #0b7dda;}

.warning {background-color: #ff9800;} /* Orange */
.warning:hover {background: #e68a00;}

.danger {background-color: #f44336;} /* Red */
.danger:hover {background: #da190b;}

.default {background-color: #e7e7e7; color: black;} /* Gray */
.default:hover {background: #ddd;}
/* END Style buttons */



/****************************************************************/
/****************************************************************/

/* CUSTOM RADIO & CHECKBOX BUTTONS */
.checkcontainer {
	display: block;
	position: relative;
	padding-left: 35px;
	margin-bottom: 12px;
	cursor: pointer;
	font-size: 17px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Hide the browser's default button */
.checkcontainer input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}

.checkcontainer input[type=checkbox] {
	height: 0;
	width: 0;
}

/* Create a custom radio button */
.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	background-color: #eee;
	
	height: 22px;
	width: 22px;
}

.radio-container.checkcontainer .checkmark {
	border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.checkcontainer:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the button is checked, add a blue background */
.checkcontainer input:checked ~ .checkmark {
	background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the indicator (dot/circle) when checked */
.checkcontainer input:checked~.checkmark:after {
	display: block;
}

/* Style the indicator (dot/circle) */
.radio-container.checkcontainer .checkmark:after {
	top: 7px;
	left: 7px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}

.checkbox-container.checkcontainer .checkmark:after {
	left: 9px;
	top: 5px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
/* END CUSTOM RADIO & CHECKBOX BUTTONS */