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

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

	--brand-primary:      #ffa21b;
	--brand-primary-dark: #dc870a;

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

	--branding-hashes: var(--grey-light);
	--branding-logo:   url('/images/svgs/wdc-logo.svg');

	/* --font-primary: 'Montserrat', sans-serif; */
	--font-primary: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	/* --font-mono:    'Overlock'; */
	--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-primary);

	--max-width: 560px;
}

@media (prefers-color-scheme: dark) {
	:root {
		/* --brand-secondary: ; */
		--branding-hashes: var(--grey-dark);
		--branding-logo:   url('/images/svgs/wdc-logo-white.svg');

		--bg-color:   #3b3e42;
		--text-color: var(--white);

		--form-input:  var(--grey-ultra-light);
		--form-border: #353535;
		--form-label:  var(--white);
		--form-shadow: 200, 200, 200;
		--form-text:   var(--grey-dark);

		--input-bg:     #384246;
		/* --input-border: rgba(0,0,0,0.4); */
		--input-hover:  var(--brand-primary);
	}
}

html, body {
	font-family: var(--font-primary);
	font-size: var(--font-size);
	line-height: var(--line-height);
}

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

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

.login {
	background-color: var(--bg-color);
	color: var(--text-color);
}

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

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

.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%;
}

.portal-branding-title::before,
.portal-branding-title::after {
	border-top: 1px solid var(--branding-hashes);
	content: '';
	display: block;
	height: 1px;
	width: 100%;
}

.portal-logo,
.portal-branding-logo {
	background-image: var(--branding-logo);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	height: 80px;
	margin-left: auto;
	margin-right: auto;
	width: 370px;
}

.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-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: 5px;
}

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='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.75rem;
	width: max-content;
}

.button {
	background-color: var(--brand-primary);
	border: 1px solid var(--brand-primary);
	color: var(--white);
	cursor: pointer;
	display: inline-block;
	font-size: 0.75rem;
	letter-spacing: 0;
	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: transparent;
	color: var(--brand-primary);
}

.portal-notification {
	border-left: 5px solid currentColor;
	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);
}