#outer
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#login_left_side
{
	float: left;
	box-sizing: border-box;
	width: 55%;
	vertical-align: middle;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

#login_right_side
{
	width: 45%;
	float: left;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow-y: scroll;
}
#registration_form {
	padding: 2em 0;
}
#login_right_side img {
	display: none;
}
.login_option
{
	display: inline-block;
}

.login_option a
{
	text-decoration: none;
	color: white;
}

#site_title
{
	font-weight: bold;
	color: white;
	font-size: 1.2em;
}

#vert_spacer
{
	margin-bottom: 2em;
}

#welcome_message_image
{
	position: absolute;
	top: 35%;
	left: 10%;
	width: 38%;
	max-width: 599px;
}

.login_form_field {
	display: block;
	vertical-align: top;
	box-sizing: border-box;
	min-height: 60px;
}

#login_button, #register_button {
	width: 60px;
	height: 60px;
	margin-top: 2em;
	display: flex;
	align-items: center;
	justify-content: center;
}

#login_button, #register_button {
	margin-top: 2em;
	display: flex;
	align-items: center;
	justify-content: center;
}

#login_button i, #register_button i {
	font-size: 2em;
	position: relative;
	top: 0;
	left: 0;
	display: flex;
}

#login_wrapper {
	width: 66.667%;
	margin: auto;
}

#login_wrapper input[type=text], #login_wrapper input[type=password],  #login_wrapper input[type=email], #login_wrapper select {
	margin-bottom: .3em;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	box-sizing: border-box;
	margin-top: 1em;
	border: none;
	padding: .5em;
}

#login_button_wrapper {
	margin-bottom: 3em;
	display: flex;
    justify-content: right;
}
#login_button_wrapper a {
	position: relative;
	top: 0;
}
#login_button_wrapper a:hover {
	top: -1px;
}
.outlined_button
{
	background: none;
	border: solid 1px white;
	border-radius: 3px;
	color: white;
	text-decoration: none;
	padding-top: .3em;
	padding-bottom: .3em;
	padding-left: .5em;
	padding-right: .5em;
	text-align: center;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: white;
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: white;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: white;
}

.current_page
{
	font-weight: bold;
}

#login_wrapper #choose_service_lines {
	height: 200px;
}

#spinner
{
	text-align: center;
	margin: auto;
	margin-top: .5em;
	display: none;
}

#forgot_password {
	display: inline-block;
	font-size: .8em;
	margin-bottom: .5em;
	color: white;
	text-decoration: none;
	float: right;
	opacity: .74;
}

#ad_login
{
	display: inline-block;
	font-size: .8em;
	margin-bottom: .5em;
	margin-right: 1em;
	color: white;
	text-decoration: none;
	float: right;
	opacity: .74;
}

.clear
{
	clear: both;
}

.short {
	color:#FF0000;
}
 
.weak, .no_match {
	color: #E66C2C;
}
 
.good {
	color: #2D98F3;
}
 
.strong, .match {
	color: #006400;
}


@media screen and (max-width: 1024px) {
	#site_title {
		font-size: 1.5rem;
		text-align: center;
	}

	#left_side
	{
		height: auto;
		width: 100%;
		padding: 0;
	}
	#welcome_message_image
	{
		position: static;
		display: block;
		width: 100%;
		top: 0;
		left: 0;
	}

	#right_side
	{
		width: 100%;
		padding: 2em;
		height: auto;
	}
	#login_wrapper
	{
		margin-top: 0;
		width: 90%;
	}
	#login_option
	{
		text-align: center;
	}
	#login_left_side
	{
		display: block;
		width: 100%;
		height: auto;
	}
	#login_right_side
	{
		width: 100%;
		padding: 2em;
	}
	#welcome_message_image
	{
		position: relative;
		display: block;
		margin: auto;
	}
}

@media screen and (max-width: 500px) {
	#login_button {
		float: none;
		display: block;
		margin: 2em auto;
	}
}