/* Login.ashx -- page-specific styles (dark theme, matches Core.css palette) */

#AuthWrap {
	display: flex;
	justify-content: center;
	padding: 30px 10px 50px;
}

.AuthCard {
	width: 100%;
	max-width: 420px;
	background-color: #282828;
	border: 1px solid #4C4C4C;
	border-radius: 8px;
	padding: 28px 26px 32px;
	box-shadow: 0 6px 24px rgba(0,0,0,.4);
}

#AuthTitle {
	margin: 0 0 4px;
	font: 300 26pt Oswald, sans-serif;
	color: #DDD;
	text-align: center;
}

.AuthStatus {
	display: none;
	margin: 14px 0;
	padding: 10px 14px;
	border-radius: 5px;
	font: 12pt 'PT Sans', sans-serif;
	line-height: 1.4;
}
.AuthStatus.Show { display: block; }
.AuthStatus.Error   { background-color: #3A1F1F; border: 1px solid #A6453F; color: #FFB3AD; }
.AuthStatus.Success { background-color: #1F3A24; border: 1px solid #4C8F5C; color: #B7F5C1; }
.AuthStatus.Info    { background-color: #23303A; border: 1px solid #4C7A8F; color: #ADD9F5; }

.Step { display: none; }
.Step.Active { display: block; }

.AuthDebug {
	display: none;
	margin: 10px 0 0;
	padding: 10px 12px;
	background-color: #1A1310;
	border: 1px solid #A6453F;
	border-radius: 5px;
	color: #FFB3AD;
	font: 10.5pt/1.5 Consolas, 'Courier New', monospace;
	white-space: pre-wrap;
	word-break: break-word;
	max-height: 260px;
	overflow: auto;
}
.AuthDebug.Show { display: block; }

.AuthHint {
	margin: 0 0 18px;
	color: #CCC;
	font: 13pt 'PT Sans', sans-serif;
	line-height: 1.5;
}

.AuthEmphasis {
	color: #FFFFC0;
	font-weight: bold;
}

.AuthCard LABEL {
	display: block;
	margin: 14px 0 6px;
	color: #DDD;
	font: 12pt 'PT Sans', sans-serif;
	text-transform: uppercase;
	letter-spacing: .5px;
}

.AuthCard INPUT[type=email],
.AuthCard INPUT[type=password],
.AuthCard INPUT[type=text] {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 11px 12px;
	background-color: #1E1E1E;
	border: 1px solid #4C4C4C;
	border-radius: 5px;
	color: #FFF;
	font: 14pt 'PT Sans', sans-serif;
}
.AuthCard INPUT:focus {
	outline: none;
	border-color: #728242;
	background-color: #232323;
}
.AuthCard INPUT.FieldError {
	border-color: #A6453F;
}

.AuthFine {
	margin: 12px 0 0;
	color: #BBB;
	font: 11pt 'PT Sans', sans-serif;
	line-height: 1.5;
}

.AuthBtn {
	display: block;
	margin: 20px auto;
	padding: 5px 20px;
	border: 0;
	border-radius: 5px;
	background: linear-gradient(to bottom, #03A9F4, #2196F3);
	color: #FFF;
	font: 14pt 'PT Sans', sans-serif;
	text-shadow: 1px 1px 0 #0000009e;
	cursor: pointer;
	transition: filter 150ms;
    box-shadow: 1px 1px 1px #000000;
}
.AuthBtn:hover { filter: brightness(1.12); }
.AuthBtn:disabled { opacity: .55; cursor: default; filter: none; }

.AuthLink {
	display: inline-block;
	margin: 14px 10px 0 0;
	color: #FFFFC0;
	font: 11pt 'PT Sans', sans-serif;
	text-decoration: none;
	cursor: pointer;
}
.AuthLink:hover { color: #FF9D9D; text-decoration: underline; }

@media (max-width: 480px) {
	#AuthWrap { padding: 14px 8px 40px; }
	.AuthCard { padding: 22px 18px 26px; border-radius: 6px; }
	#AuthTitle { font-size: 22pt; }
}