/* login.php only — the one page with no nav bar, so it brings its own card. */

.main_card {
	background-color: #fafafa;
	box-sizing: border-box;
	border: 1px solid #bdbdbd;
	padding: 0;
	display: block;
	margin: 16px auto 34px auto;
	width: 550px;
	overflow: hidden;
}

.main_card .top {
	background-color: #1E88E5;
	padding: 10px;
	font-size: 25px;
	box-sizing: border-box;
	color: white;
	line-height: 40px;
}

.main_card .title {
	padding-left: 7px;
	flex: 1;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.inner {
	background-color: #fafafa;
}

.login-bar {
	background: #ffffff;
	border-top: 1px solid #bdbdbd;
	text-align: right;
	white-space: nowrap;
	overflow-x: auto;
}

.login-body {
	padding: 20px;
}

.login-error {
	color: #d32f2f;
	margin-bottom: 14px;
	font-size: 14px;
}

/* Smartphones */
@media only screen and (max-device-width : 500px) {
	body {
		background-color: white;
	}

	.main_card {
		margin-top: 0;
		margin-bottom: 0;
		min-width: 100%;
		width: 100%;
		box-shadow: none;
		border: none;
		border-radius: 0;
	}

	.title {
		padding-left: 7px;
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}

	.top {
		font-size: 20px;
		border-radius: 0;
		line-height: 32px;
		height: 52px;
	}
}

@media (prefers-color-scheme: dark) {
	body { background: #212121; }

	.main_card, .login-bar { border-color: #555; }
	.main_card .top {
		background-color: #2b2b2b;
		box-shadow: 0 1px 6px rgba(0, 0, 0, 0.21);
	}

	.login-bar { background-color: #2b2b2b; }
	.inner { background: #353535; }

	.login-error { color: #ef5350; }
}

@media (prefers-color-scheme: dark) and (max-device-width : 500px) {
	body { background: #2b2b2b; }
}