@import "../variables";

#notloggedin {
	position:relative;
	width:100%;
	height:100%;
	color:$white;
	display:flex;
	justify-content:center;
	align-items:center;

	background: $green; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNDllNGE5IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwZTI4YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
	background: -moz-linear-gradient(-45deg, $green 0%, #00e28b 70%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,$green), color-stop(70%,#00e28b)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(-45deg, $green 0%,#00e28b 70%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(-45deg, $green 0%,#00e28b 70%); /* Opera 11.10+ */
	background: -ms-linear-gradient(-45deg, $green 0%,#00e28b 70%); /* IE10+ */
	background: linear-gradient(135deg, $green 0%,#00e28b 70%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#24D390', endColorstr='#00e28b',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
}

_:-ms-fullscreen, #notloggedin {
	justify-content:flex-start;
}

.sign-base {
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	margin-left:20px;
	position:relative;
	background-color:$white;
	border-radius:7px;

	.account-dashboard-page-title {
		padding-bottom: 40px;
	}
}

.sign-in {
	width:500px;
	margin:auto;

	&-sorry-logo {
		width:50px;
		height:50px;
		background-color: $black;
		position:relative;
		background-position: center;
		background-size: 46%;
		background-image: url("../../images/prototypo-icon-white.svg");
		background-repeat: no-repeat;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 50%;
		transition: background-color .2s ease;
	}

	&-sorry-message {
		color: $dark-grey;
		text-align: center;
	}

	&-sorry-text {
		font-size: 20px;
		padding: 10px;
		color: $dark-grey;
		text-align: center;
	}

	&-container {
		display: flex;
		flex-direction: column;
		padding: 0;
	}

	&-oauth {
		padding: 30px 40px 0 40px;

		&-label {
			display: block;
			padding-bottom: 15px;
			color: $medium-grey;
		}

		&-buttons {
			display: flex;

			.oauth-button {
				flex: 1;

				& + .oauth-button {
					margin-left: 5px;
				}
			}
		}
	}

	&-separator {
		position: relative;
		text-align: center;
		color: $medium-grey;
		margin: 30px 40px 0 40px;

		&-text {
			position: absolute;
			top: 0;
			bottom: 0;
			font-size: .8em;
			background: #fff;
			padding: 0 5px;
		}

		&-line {
			height: 1px;
			padding: 0;
			color: $light-grey;
			background-color: $light-grey;
			border: 0;
		}
	}

	&-form {
		display:flex;
		width:100%;
		padding:30px 40px 10px 40px;
		flex-direction:column;

		& .input-with-label {
			flex: auto;
		}
	}

	&-help-needed {
		padding: .5em;
		transition: 400ms ease;
		align-self:flex-end;
		color:$medium-grey;
		font-style:italic;

		&:hover {
			padding: .5em 1em;
			background-color: $white;
			color: $dark-grey;
			color:$medium-grey;
		}
	}

	&-h1 {
		color: white;
	}


}

.sign-up {
	width:550px;
	margin:auto;
}

.forgotten-password {
	margin:auto;
}
