body:has(.tl-login) {
	overflow: hidden;
}

body:has(.tl-login) .tl-app-content {
	width: 100%;
	padding-top: 0;
}

body:has(.tl-login) .tl-app-footer {
	display: none;
}

@media (min-width: 768px) and (min-height: 600px) {

	body:has(.tl-login) {
		overflow: hidden;
	}

}

/*
------------------------------------------------
Login
------------------------------------------------
*/

.tl-login {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100dvh;
	min-height: 100vh;

	padding: 32px var(--tl-page-padding);

	box-sizing: border-box;
}


.tl-login-inner {
	width: 100%;
	max-width: 430px;
}


/*
------------------------------------------------
Login Branding
------------------------------------------------
*/

.tl-login-brand {
	margin-bottom: 24px;

	text-align: center;
}


.tl-login-brand h1 {
	margin: 0;

	color: var(--tl-color-text);

	font-size: 2em;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -.025em;
}


.tl-login-brand p {
	margin: 7px 0 0;

	color: var(--tl-color-text-secondary);

	font-size: .9375em;
	line-height: 1.3;
}


/*
------------------------------------------------
Login Panel
------------------------------------------------
*/

.tl-login-panel {
	width: 100%;

	padding: 24px;

	box-sizing: border-box;

	background: var(--tl-color-surface);
	border: 1px solid var(--tl-color-border-soft);
	border-radius: calc(var(--tl-radius) + 2px);

	box-shadow:
		0 1px 2px rgba(0, 0, 0, .03),
		0 8px 24px rgba(0, 0, 0, .06);
}


/*
------------------------------------------------
Login Heading
------------------------------------------------
*/

.tl-login-heading {
	margin-bottom: 20px;
}


.tl-login-heading h2 {
	margin: 0;

	color: var(--tl-color-text);

	font-size: 1.125em;
	line-height: 1.25;
}


.tl-login-heading p {
	margin: 6px 0 0;

	color: var(--tl-color-text-secondary);

	font-size: .875em;
	line-height: 1.45;
}


/*
------------------------------------------------
Login Notices
------------------------------------------------
*/

.tl-login .tl-notice,
.tl-login-notice,
.tl-login-error {
	margin: 0 0 18px;
	padding: 12px 14px;

	border-radius: var(--tl-radius);

	font-size: .875em;
	line-height: 1.4;
}


.tl-login-notice {
	background: #eef6f0;
	border: 1px solid #b9d7c0;

	color: #355e3b;
}


.tl-login-error {
	background: #fbefef;
	border: 1px solid #e4c2c2;

	color: #7a3636;
}


/*
------------------------------------------------
Login Form
------------------------------------------------
*/

.tl-login-form {
	width: 100%;
}


.tl-login .tl-form-field {
	margin-bottom: 18px;
}


.tl-login .tl-form-field label {
	display: block;

	margin: 0 0 7px;

	color: var(--tl-color-text);

	font-size: .875em;
	font-weight: 700;
	line-height: 1.2;
}


.tl-login input[type="text"],
.tl-login input[type="email"],
.tl-login input[type="password"] {
	display: block;

	width: 100%;
	min-height: 48px;
	padding: 10px 12px;

	box-sizing: border-box;

	background: var(--tl-color-surface);
	border: 1px solid var(--tl-color-border);
	border-radius: var(--tl-radius);

	color: var(--tl-color-text);

	font: inherit;
	font-size: 1em;

	-webkit-appearance: none;
	appearance: none;
}


.tl-login input[type="text"]:focus,
.tl-login input[type="email"]:focus,
.tl-login input[type="password"]:focus {
	outline: none;

	border-color: var(--tl-color-primary);

	box-shadow: 0 0 0 3px rgba(37, 99, 166, .12);
}


/*
------------------------------------------------
Password Label Row
------------------------------------------------
*/

.tl-login-label-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}


.tl-login .tl-login-label-row label {
	margin-bottom: 7px;
}


.tl-login-label-row a,
.tl-login-label-row a:visited {
	color: var(--tl-color-primary);

	font-size: .8125em;
	font-weight: 600;
	text-decoration: none;
}


.tl-login-label-row a:hover,
.tl-login-label-row a:focus {
	color: var(--tl-color-primary-hover);
}


/*
------------------------------------------------
Login Submit
------------------------------------------------
*/

.tl-login .tl-login-submit {
	margin: 4px 0 0;
}


.tl-login .tl-login-submit button {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	min-height: 48px;
	padding: 10px 18px;

	background: var(--tl-color-primary);
	border: 1px solid var(--tl-color-primary);
	border-radius: var(--tl-radius);

	color: #fff;

	font: inherit;
	font-size: .9375em;
	font-weight: 700;

	cursor: pointer;
}


.tl-login .tl-login-submit button:hover,
.tl-login .tl-login-submit button:focus {
	background: var(--tl-color-primary-hover);
	border-color: var(--tl-color-primary-hover);

	color: #fff;
}


/*
------------------------------------------------
Secondary Login Action
------------------------------------------------
*/

.tl-login-secondary-action {
	margin-top: 18px;

	text-align: center;
}


.tl-login-secondary-action a,
.tl-login-secondary-action a:visited {
	color: var(--tl-color-text-secondary);

	font-size: .8125em;
	font-weight: 600;
	text-decoration: none;
}


.tl-login-secondary-action a:hover,
.tl-login-secondary-action a:focus {
	color: var(--tl-color-primary);
}


/*
------------------------------------------------
Larger Screens
------------------------------------------------
*/

@media (min-width: 768px) {

	.tl-login {
		padding-top: 48px;
		padding-bottom: 48px;
	}


	.tl-login-brand {
		margin-bottom: 26px;
	}


	.tl-login-brand h1 {
		font-size: 2.25em;
	}


	.tl-login-panel {
		padding: 28px;
	}

}