* {
	box-sizing: border-box;
	font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif ;
	font-size: 16px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
body {
	background-color: #435165;
	margin: 0;
}

.home-site-link {
  text-decoration: none;
  color: #a8b7cb;
  font-size: 16px; 
  font-weight: 600;
}
.home-site-link:visited {
  color: #90a1bb;
}
.home-site-link:hover {
  color: #6CA0A6;
}
.home-site-link:active {
  color: #004A53;
}

.login, .register {
	width: 400px;
	background-color: #ffffff;
	box-shadow: 0 0 9px 0 rgba(158, 138, 138, 0.3);
	margin-top: 80px;
}
.login h1, .register h1 {
	text-align: center;
	color: #00383F;
	font-size: 25px;
  padding: 21px 0 20px 0;
	 border-bottom: 1px solid #dee0e4;
}
.login .links, .register .links {
	text-align:center;
	font-weight: 400;
	margin-bottom:0px;
}
.login .links a, .register .links a {
	color: #93a7bd;
	font-size: .9em;
	text-decoration: none;
	display: inline-flex;
	font-weight: 400;
}
.login .links a:hover, .register .links a:hover {
	color: #69829e;
	transition: all 0.3s;
	font-weight: 550;
}
.login .links a.active, .register .links a.active {
	border-bottom: 0px solid #86B0B6;
	color: #00383F;
	font-weight:800;
}



.login .links2, .register .links2 {
  display: flex;
  padding: 0 15px 1px 15px;
  font-weight: 700;
}

.login .links2 a, .register .links2 a {
  color: #a9b4c7;
  text-decoration: none;
  display: inline-flex;
  padding: 0 10px 10px 10px;
  font-weight: 700;
}

.login .links2 a:hover, .register .links2 a:hover {
  color: #6CA0A6;
  transition: all 0.3s;
  font-weight: 700;
}

.login .links2 a.active, .register .links2 a.active {
  border-bottom: 3px solid #86B0B6;
  color: #86B0B6;
  font-weight:700;
}





.login form, .register form {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding-top: 20px;
}
.login form label, .register form label {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 12%;
	height: 50px;
	background-color: #86B0B6;
	color: #00383F;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}
.login form input[type="password"], .login form input[type="text"], .login form input[type="email"], .register form input[type="password"], .register form input[type="text"], .register form input[type="email"] {
	width: 80%;
	height: 50px;
	border: 1px solid #dee0e4;
	border-left: 0;
	margin-bottom: 20px;
	padding: 0 15px;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	outline: 0;
}
.register textarea {
	width: 80%;
	border: 1px solid #dee0e4;
	border-left: 0;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	outline: 0;
}
.login form input[type="password"]:hover, .login form input[type="text"]:hover, .login form input[type="email"]:hover, .register form input[type="password"]:hover, .register form input[type="text"]:hover, .register form input[type="email"]:hover, .register textarea:hover {
	outline:1px solid #bec7d2; 
	outline-offset:-1px;
	background-color:#EFF4F5;
}
.register form input[type="checkbox"] {
	padding:20px;
}
.login form input[type="password"]:focus, .login form input[type="text"]:focus, .login form input[type="email"]:focus, .register form input[type="password"]:focus, .register form input[type="text"]:focus, .register form input[type="email"]:focus, .register textarea:focus {
	outline:1px solid #bec7d2; 
	outline-offset:-1px;
	background-color:#EFF4F5;
}
.login form input[type="password"]::placeholder, .login form input[type="text"]::placeholder, .login form input[type="email"]::placeholder, .register form input[type="password"]::placeholder, .register form input[type="text"]::placeholder, .register form input[type="email"]::placeholder {
	color: #828A95;
}
.smaller_placeholder[type="text"].smaller_placeholder::-webkit-input-placeholder {
	color: #828A95;
	font-size:15px;
}
select {     /* Drop Down Box  &  Numbers (Votes, Parent ID) */
	color: black;
	border:1px solid #bec7d2;
	outline: 0px;
}
select:focus {
	color: black;
	outline:1px solid #bec7d2; 
	border-left:1px solid #bec7d2;
	outline-offset:-1px;
}
select:hover {
	color: black;
	border:1px solid #bec7d2;
	outline:1px solid #bec7d2; 
	border-left:1px solid #bec7d2;
}
.login form input[type="password"]:focus, .login form input[type="password"]:hover, .login form input[type="text"]:focus, .login form input[type="text"]:hover, .login form input[type="email"]:focus, .login form input[type="email"]:hover, .register form input[type="password"]:focus, .register form input[type="password"]:hover, .register form input[type="text"]:focus, .register form input[type="text"]:hover, .register form input[type="email"]:focus, .register form input[type="email"]:hover {
	outline:1px solid #8d9197; 
	outline-offset:-1px;
	border-left:1px solid #8d9197;
}
.login form input[type="submit"], .register form input[type="submit"] {
	width: 100%;
	padding: 15px;
	margin-top: 20px;
	background-color: #6CA0A6;
	border: 0;
	cursor: pointer;
	font-weight: 700;
	color: #ffffff;
	transition: background-color 0.3s;
	border-radius: 0;
	appearance: none;
}
.login form input[type="submit"]:hover, .login form input[type="submit"]:focus, .register form input[type="submit"]:hover, .register form input[type="submit"]:focus {
	background-color: #004A53;
	color: white;
	font-weight:700;
	transition: background-color 0.3s; 
	border: 0px;
	outline: 0px;
}
.login form .msg, .register form .msg {
	padding: 0 20px;
	width: 100%;
}
.login form .fb-btn, .login form .gl-btn, .register form .fb-btn, .register form .gl-btn {
	display: flex;
	text-decoration: none;
	position: relative;
	border-radius: 4px;
	text-align: center;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 500;
	font-size: 14px;
	width: 92%;
	margin: 15px 0 5px 0;
	padding: 15px;
	transition: background-color 0.2s;
}
.login form > a, .register form > a {
	text-decoration: none;
	color: #5b6574;
	width: 100%;
	padding: 5px 20px;
}
.login form > a:hover, .register form > a:hover {
	color: #394049;
}
@media screen and (max-width: 400px) {
.login, .register {
	width: 95%;
}
}
/* Force e-mail placeholder to E-mail (first it is forced lowercase by javascript for the e-mail javascript, but this forces it back to Capitalized) */
	::-webkit-input-placeholder {
		text-transform: initial;
	}
	:-moz-placeholder { 
		text-transform: initial;
	}
	::-moz-placeholder {  
		text-transform: initial;
	}
	:-ms-input-placeholder { 
		text-transform: initial;
	} 
/* Capitalize Real Name & Display Name 
	input[name="real_name"] {
		text-transform: capitalize;
	}
/* E-mail Requirements Block */
	#email_message {
		display: none;
		background: #E7EFF1;
		color: #000;
		position: relative;
		text-align: center;
		width: 100%;
		border-radius: 7px;
		font-family: arial, cambria, helvetica, verdana, times, 'times new roman', garamond, sans-serif; 
		font-size: .75em;
	}
	#email_message .space-down {
		padding-bottom: 20px;
	}
	#email_message .bottom-space {
		background-color: white;
	}
/* Real Name Requirements Block */
	#real_name_message {
		display: none;
		background: #E7EFF1;
		color: #000;
		position: relative;
		text-align: center;
		width: 100%;
		border-radius: 7px;
		font-family: arial, cambria, helvetica, verdana, times, 'times new roman', garamond, sans-serif; 
		font-size:.75em;
	}
	#real_name_message .space-down {
		padding-bottom: 20px;
	}
	#real_name_message .bottom-space {
		background-color: white;
	}
/* Display Name Requirements Block */
	#display_name_message {
		display: none;
		background: #E7EFF1;
		color: #000;
		position: relative;
		text-align: center;
		width: 100%;
		border-radius:7px;
		font-family: arial, cambria, helvetica, verdana, times, 'times new roman', garamond, sans-serif; 
		font-size: .75em;
	}
	#display_name_message .space-down {
		padding-bottom:20px;
	}
	#display_name_message .bottom-space {
		background-color: white;
	}
/* The Password Requirements Box is shown when the user clicks on the password field */
	#message {
		display: none;
		background: #E7EFF1;
		color: #000;
		position: relative;
		text-align: center;
		width: 100%;
		border-radius:5px;
		transition: all .1s ease-in-out;
	}
	#message .bottom {
		background-color: white;
	}
/* Add a green text color and a checkmark when the requirements are right */
	.valid {
		color: #0F8C34;
		font-family: arial, cambria, helvetica, verdana, times, 'times new roman', garamond, sans-serif; 
		font-weight: 400;
		transition: all .1s ease-in-out;
	}
	.valid:before {
		position: relative;
		content: "✔";
		left: -8px;
		color: #0F8C34;
		transition: all .1s ease-in-out;
	}
/* Add a red text color and an "x" when the requirements are wrong */
	.invalid {
		color: #D70F0F;
		font-family: arial, cambria, helvetica, verdana, times, 'times new roman', garamond, sans-serif;
		font-weight:400;
		transition: all .1s ease-in-out;
	}
	.invalid:before {
		position: relative;
		content: "✖";
		left: -8px;
		color: #D70F0F;
		transition: all .1s ease-in-out;
	}
.link-back {
	color: #689CA4;
	font-size: 16px;
	text-decoration: none;
	display: inline-flex;
	font-weight: 400;
}
.link-back:hover {
	color: #9ABDC2;
	transition: all 0.3s;
	font-weight: 400;
}
.link-back.active {
	border-bottom: 0px solid #86B0B6;
	color: #00383F;
	font-weight:700;
}
#togglePassword {
	margin-top: 15px;
}
#toggleCPassword {
	margin-top: 15px;
}
[data-title] {
	position: relative;
	align-items: center;
	font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif ;
}
[data-title]:hover:after {
	opacity: 1;
	visibility: visible;
}
[data-title]:after {
	content: attr(data-title);
	background-color: #000000;
	color: #FFF;
	font-size: 14px;
	font-weight: 400;
	position: absolute;
	padding: 10px 12px 10px 12px;
	bottom: 1.8em;
	right: -0.7em;
	box-shadow: 1px 1px 3px #222222;
	opacity: 0;
	border: 1px solid #111111;
	z-index: 99999;
	visibility: hidden;
	line-height: 150%;
	white-space: pre;
	border-radius: 14px;
	text-align: left;
}

.availability {
	font-family:Arial; 
	background-color: #86B0B6; 
	color: black;
	font-weight:400;
	width: 170px; 
	height:40px; 
	display: none; 
	margin-bottom: 16px;
	border: 2px solid black;
	border-radius:8px;
}
.availability:hover, .availability:focus { 
	box-shadow: 0 0 0 3px rgba(134, 176, 182, .3);
	border: 3px solid #00383F;
	color: black;
	font-weight:550;
}
.availability:focus {
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .20);
	color: black;
	font-weight:550;
}
.box {
   display: inline-flex;
   align-items:center;
   text-align:center;
   vertical-align:middle;
}