/* LOGIN */
:root {
	--black: #000;
	--white: #fff;

	--grey:             #ccc;
	--grey-dark:        #4c4c4c;
	--grey-medium:		#999;
	--grey-light:		#e5e5e5;
	--grey-ultra-light:	#f2f2f2;

	--brand-primary:        #003366;
	--brand-primary-dark:   #dc870a;
	--brand-secondary:      #6ec5c2;
	--brand-secondary-dark: #458280;

	--error:        #de4949;
	--error-dark:   #c71f1f;
	--success:      #68ab69;
	--success-dark: #4f8c50;

	--font-primary: 'Lato', sans-serif;
	--font-size:    1rem;
	--line-height:  1;

	--bg-color:   var(--white);
	--text-color: var(--grey-dark);


	--form-input:  var(--grey-ultra-light);
	--form-border: var(--grey-light);
	--form-label:  var(--grey-dark);
	--form-shadow: 160, 160, 160;
	--form-text:   var(--grey-dark);

	--input-bg:     rgba(120,120,120,0.15);
	--input-border: rgba(120,120,120,0.4);
	--input-color:  rgba(0,0,0,0.67);
	--input-hover:  var(--brand-secondary);

	--max-width: 560px;
}

html, body {
	font-family: var(--font-primary);
	font-size: var(--font-size);
	height: 100%;
	line-height: var(--line-height);
	margin: 0;
	padding: 0;
}

a,
a:visited {
	color: var(--brand-secondary);
	transition: color .25s;
}

a:hover,
a:focus {
	color: var(--brand-secondary-dark);
}

.text-center {
	text-align: center;
}
.mb60 {
	margin-bottom: 60px;
}

.login {
	background-color: var(--bg-color);
	color: var(--text-color);
	display: grid;
	grid-template-rows: 1fr auto;
}

.wrapper {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--max-width);
	padding-top: 30px;
	width: 100%;
}

.portal-branding {
	/*display: flex;
	flex-direction: column; */
	margin-bottom: 40px;
	text-align: center;
}

.portal-branding .smaller {
	height: 75px;
	width: 75px;
}

.portal-branding-title {
	align-items: center;
	display: inline-grid;
	gap: 10px;
	grid-template-columns: 40px auto 40px;
	letter-spacing: 2px;
	margin: 10px auto 0;
	max-width: 30%;
}

.user-form {
	display: none;
}
.user-form.show {
	display: block;
}

.form-div {
	border: 1px solid var(--form-border);
	box-shadow: 0 0 0 5px rgba(var(--form-shadow), 0.15);
	padding: 40px;
	width: auto;
}

.form-row {
	display: flex;
	flex-direction: column;
	margin-bottom: 15px;
}

.form-row .form-error {
	color: var(--error);
	font-size: 0.75rem;
	margin-top: 5px;
}

.form-title {
	margin-top: 0;
	text-align: center;
}

label {
	color: var(--text-color);
	display: block;
	font-family: var(--font-mono);
	font-size: 0.875rem;
	letter-spacing: 1px;
	line-height: 1;
	margin-bottom: 8px;
	margin-left: 0;
}

.field-required {
	color: var(--error);
}

input[type='text'],
input[type='email'],
input[type='password'] {
	border: 1px solid var(--form-border);
	color: var(--text-color);
	font-weight: 300;

	background-color: var(--input-bg);
	border: 1px solid var(--input-border);
	padding: 12px 15px;
}

input[type='text'].error,
input[type='email'].error,
input[type='password'].error {
	border-color: var(--error);
}

input[type='text']:hover, 
input[type='text']:focus,
input[type='email']:hover, 
input[type='email']:focus,
input[type='password']:hover, 
input[type='password']:focus {
	border-color: var(--input-hover);
	outline: none;
}

.form-grid {
	align-items: center;
	display: grid;
	gap: 30px;
	grid-template-columns: 1fr 1fr;
}

.form-grid-column:nth-child(2) {
	text-align: right;
}

a.form-link,
a.form-link:visited {
	display: inline-block;
	font-size: 0.875rem;
	width: max-content;
}

.button {
	background-color: var(--brand-secondary);
	border: 1px solid var(--brand-secondary);
	border-radius: 27.5px;
	color: var(--white);
	cursor: pointer;
	display: inline-block;
	font-size: 0.75rem;
	letter-spacing: 2px;
	line-height: 1;
	padding: 10px 24px;
	text-align: center;
	text-transform: uppercase;
	transition: background-color 0.25 ease
				border-color 0.25 ease
				color 0.25 ease;
	width: max-content;
}

.button:hover,
.button:focus {
	background-color: var(--brand-secondary-dark);
	border-color: var(--brand-secondary-dark);
	color: var(--white);
}

.portal-notification {
	border-left: 5px solid currentColor;
	color: var(--white);
	font-size: 0.75rem;
	padding: 10px;
}
.portal-notification + .user-form, 
.portal-notification + .user-form + .user-form {
	margin-top: 20px;
}
.portal-notification.notify-error {
	background-color: var(--error);
	border-color: var(--error-dark);
}
.portal-notification.notify-success {
	background-color: var(--success);
	border-color: var(--success-dark);
}

.footer {
	background-color: var(--white);
	border-top: 1px solid var(--grey-light);
	font-size: 0.75rem;
	line-height: 1.25;
	padding: 15px;
	text-align: center;
}

.wdc-badge {
	display: inline-block;
	height: 17px;
	margin-top: -5px;
	width: 23px;
}