@media (min-width: 768px) {
	.login-body {
		padding: 30px;
		text-align: center;
	}
}

.login-card {
	min-height: 100vh;
	display: flex;
	max-width: 500px;
	justify-content: center;
	flex-direction: column;
	padding: 0 20px 90px 20px;
	margin: 0 auto;
}

@media (min-width: 768px) {
	.login-card {
		border-radius: 20px;
	}
}

.alert-magic-link-sent {
	height: 70px;
	border: 1px solid var(--bs-border-color);
	background-color: var(--bs-body-bg);
	border-radius: 35px;
	padding: 10px 35px;
	display: flex;
	align-items: center;
	text-align: left;
	gap: 15px;
}

@media (min-width: 577px) {
	.alert-magic-link-sent {
		gap: 10px;
		font-size: 18px;
	}
}

.wrapper-txt-login-email {
	display: flex;
	background-color: var(--bs-body-bg);
	border: 1px solid var(--bs-border-color);
	padding: 7px;
	border-radius: 35px;
}

.wrapper-txt-login-email .btn {
	background-color: var(--bs-secondary-bg);
}

.wrapper-txt-login-email input {
	flex-grow: 1;
	border: 0;
	background-color: transparent;
}

@media (min-width: 577px) {
	.wrapper-txt-login-email {
		width: 100%;
	}
	.wrapper-txt-login-email input {
		font-size: 18px;
	}
}

.wrapper-txt-login-email:hover > .btn, .wrapper-txt-login-email input:focus ~ .btn {
	background-color: #0B57D0;
	color: white;
	gap: 8px;
}

.wrapper-txt-login-email:hover > .btn > .icon, .wrapper-txt-login-email input:focus ~ .btn > .icon {
	background-color: #fff;
	max-width: 24px;
	transition: max-width .1s;
}

.wrapper-txt-login-email:focus-within {
	outline: 1px solid #0B57D0;
	border-color: #0B57D0;
}