.authContainer {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 50px;
	padding: 15svh;
	width: 100svw;
	height: 100svh;

	& > .appLogo {
		margin-top: -50px;
		width: 30svw;
		max-width: 150px;
		height: auto;
	}

	& > .formContainer {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		width: 95svw;
		max-width: 450px;

		& > .formTitle {
			font-size: 2rem;
			font-weight: 300;
			text-align: center;
			color: #d94253;
		}

		& > .form {
			display: flex;
			flex-direction: column;
			align-items: stretch;
			gap: 15px;
			padding: 20px;
			border: 1px solid #d94253;
			border-radius: 10px;
			background-color: #f9e2e5;

			& > .error {
				text-align: center;
				color: #fefefa;
			}

			& > .forgetLink {
				position: relative;
				width: max-content;
				font-size: 0.8rem;
				color: #dff8f2;
				cursor: pointer;

				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 0;
					display: block;
					width: 0;
					height: 1px;
					background-color: #dff8f2;
					transition: width 0.3s ease;
				}

				&:hover::after {
					width: 100%;
				}
			}

			& > .submitButton {
				align-self: center;
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 10px;
				padding: 7px 42px;
				border: 1px solid #e1e1e1;
				border-radius: 5px;
				background-color: #ffffff;
				font-size: 1rem;
				color: #d94253;
				cursor: pointer;
				transition: border-color 0.3s ease, background-color 0.3s ease,
					color 0.3s ease;

				&:hover {
					border-color: #d94253;
					background-color: #d94253;
					color: #ffffff;
				}

				& > svg {
					position: absolute;
					top: 50%;
					right: 10px;
					transform: translateY(-50%);
					width: 20px;
				}
			}
		}
	}
}