@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.gg-login-area {
	box-sizing: border-box;
	width: 100%;
	max-width: 400px;
	min-height: 100px;
	background-color: hsl(0, 0%, 88%);
	background-image: url('bates-watermark.png');
	background-repeat: no-repeat;
	background-position: 95% 3%;
	background-size: 230px auto;
	color: hsl(0, 0%, 27%);
	padding: 1.5em 1.5em .5em;
	margin-bottom: 1em;
	font-size: 14px;
	border-top: 3px solid HSL(0, 0%, 35%);
	font-weight: 300;
	position: relative;

	.gg-error {
		background: hsl(0, 87%, 97%);
		padding: 0.7em;
		margin: 1em 0;
		color: hsl(0, 87%, 32%);
		text-align: center;
	}

	& a {
		color: hsl(350, 78%, 30%);
		border-bottom: 0;

		&:hover {
			border-bottom: 0;
		}
	}

	& input[type="submit"] {
		border: none;
		border-radius: 4px;
		background: hsl(350, 78%, 30%);
		color: hsl(0, 0%, 100%);
		cursor: pointer;
		padding: .7em .9em;

		&:hover {
			box-shadow: 0 0 2em hsla(0, 0%, 0%, .5) inset;
		}
	}

	.submit-wrap {
		padding: 1em 0;
		display: flex;
		justify-content: space-between;
		align-content: center;
		align-items: center;

		& a, & input {
			display: block;
			margin: 0;
			line-height: 1.2em;
			padding: .8em .9em;
			font-size: 1em;
		}
	}

	& a.help-link {
		border-radius: 4px;
		box-sizing: border-box;
		text-align: center;
	}

	@media (min-width: 1400px) {
		.submit-wrap {
			padding-top: 2em;
		}

		& a.help-link {
			background: hsla(0, 0%, 100%, 0.4);
		}
	}

	&.loading {
		color: hsl(0, 96%, 25%);
		padding-top: 2em;
	}

	&.loading:after {
		content: '';
		display: block;
		position: absolute;
		z-index: 101;
		border-radius: 50%;

		animation: rotate .8s infinite linear;

		border: 5px solid currentColor;
		border-right-color: transparent !important;

		padding: 12px;
		left: calc(50% - 12px);
		top: 30%;

		transition: .3s;
	}

}


#gg-blackout-msg {
	line-height: 1.4em;
	padding: 2em;
	display: block;
	border: 1px solid hsla(0, 87%, 32%, .5)
}

.gg-direct-login-container {

	.action-button {
		display: block;
		border-radius: 3px;
		padding: .7em 1em;
		width: max-content;
		margin-inline: auto;
		border: none;

		&:hover {
			text-decoration-thickness: .8px !important;
			text-decoration-color: hsl(from currentColor h s l / 33%) !important;
			outline: 1px solid currentColor;
		}
	}

	.primary-button {
		background: hsl(350, 78%, 30%);
		color: white;

		&:hover {
			color: white;
			border: none;
			box-shadow: 0 0 200px hsla(0, 0%, 0%, .3) inset;
		}
	}

	.secondary-button {
		background: hsl(0 5% 87%);
		color: #881124;

		&:hover {
			box-shadow: 0 0 200px hsla(0, 0%, 0%, .1) inset;
		}
	}
}