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

	@media (max-width: 1024px) {
		align-items: flex-start;
	}

	.rectangle-content {
		margin: 80px;
		width: 416px;

		.text-login {
			display: flex;
			flex-direction: column;
		
			p {
				text-align: center;
				font-size: 20px;
				color: #d9534f;
				margin-bottom: 8px;
			}
		
			.login-form {
				max-width: 400px;
				padding: 20px;
				background-color: var(--popup-background);
				border-radius: var(--general-radius);
		
				table {
					width: 100%;
					margin-bottom: 20px;
					border-collapse: collapse;
		
					tr {
						td {
							padding: 10px;
							vertical-align: middle;
						}
					}
				}
		
				input[type="email"],
				input[type="password"] {
					width: 100%;
					padding: 8px;
					padding-right: 0;
					font-size: 16px;
					border: var(--general-border);
					border-radius: var(--input-radius);
					
				}
		
				.btn {
					margin: 0;
					padding: 0;
					display: block;
					width: 100%;
					padding: 10px;
					font-size: 16px;
					background-color: var(--primary-button);
					border: none;
					border-radius: var(--general-border-radius);
					color: #fff;
					cursor: pointer;
					margin-bottom: 10px;
		
					&:hover {
						background-color: var(--primary-button-hover);
					}
				}
		
			}
			.reset-link {
				margin-top: 8px;
		
				a {
					text-decoration: none;
					margin-top: 15px;
		
					&:hover {
						text-decoration: underline;
					}
				}
			}
		}
	}
}