#mainRegister,
#mainLogin {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: clamp(350px, 24.5vw, 900px);
}

#divRegister,
#divLogin {
	display: flex;
	flex-direction: column;
	gap: 25px;
	padding: 45px;
	border-radius: 35px;
	border: 1px white solid;
}

.divRegisterInput,
.divLoginInput,
#divLoginButtonSubmit {
	gap: 1px;
	display: flex;
	flex-direction: column;
}

.divRegisterInputExtra {
	display: flex;
	flex-direction: column;
}

.paragraphRegisterInput,
.paragraphLoginInput {
	margin: 0 0 5px;
	font-size: 15px;
}

#divLoginButtonSubmit {
	margin-top: 25px;
}

.inputRegister,
#buttonRegisterSubmit,
.inputLogin,
#buttonLoginSubmit {
	padding: clamp(2px, 0.2vw, 7px) clamp(8px, 0.6vw, 16px);
	border-radius: calc(clamp(17px, 1vw, 24px) / 2);
	border: none;
	font-size: clamp(17px, 0.8vw, 22px);
}

.inputRegister:focus,
.inputLogin:focus {
	outline: none;
}

.inputRegister::placeholder,
.inputLogin::placeholder {
	color: rgb(40, 40, 40);
}

.divPasswordInput {
	position: relative;
	display: flex;
	align-items: center;
}

.inputPassword {
	--height-show-password-button: 44px;
	width: calc(100% - 2 * clamp(8px, 0.6vw, 16px) - (var(--height-show-password-button) - 4px));
	padding-right: calc(clamp(8px, 0.6vw, 16px) + (var(--height-show-password-button) - 4px));
}

.buttonShowPassword {
	position: absolute;
	top: calc((clamp(17px, 0.8vw, 22px) + 2 * clamp(2px, 0.2vw, 7px) + 5px) / 2);
	right: 0;
	transform: translateY(-50%);
	height: 44px;
	width: 44px;
	background-color: transparent;
	border: none;
}

.buttonShowPassword:focus-visible {
	border: unset;
}

.svgShowPassword {
	height: calc(clamp(17px, 0.8vw, 22px) + clamp(2px, 0.2vw, 7px));
	pointer-events: none;
}

.svgShowPassword rect {
	transform-box: fill-box;
	transform-origin: 0% 50%;
	transform: scaleX(1);
	opacity: 1;
	transition:
		transform 0.75s ease,
		opacity 0.75s ease-out;
}

.svgShowPassword.showPasswordActive rect {
	opacity: 0;
	transform: scaleX(0);
}

footer {
	position: fixed;
	top: 92%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#labelMoodDataConsent {
	font-size: 13px;
}

@media (max-height: 1050px), (max-width: 400px) {
	#mainRegister {
		position: static;
		transform: none;
		margin: clamp(25px, 2.5vw, 45px) auto 0;
		width: min(85%, 500px);
	}

	#mainLogin {
		position: static;
		transform: none;
		margin: 100px auto 0;
		width: min(85%, 500px);
	}

	.inputRegister,
	#buttonRegisterSubmitm,
	.inputLogin,
	#buttonLoginSubmit {
		border-radius: calc(clamp(12px, 1.8vw, 18px) / 2);
		font-size: clamp(11px, 1.8vw, 18px);
	}

	.inputPassword {
		--height-show-password-button: 44px;
		width: calc(100% - 2 * clamp(8px, 0.6vw, 16px) - (var(--height-show-password-button) - 4px));
		padding-right: calc(clamp(8px, 0.6vw, 16px) + (var(--height-show-password-button) - 4px));
	}

	.buttonShowPassword {
		top: calc((clamp(11px, 1.8vw, 18px) + 2 * clamp(2px, 0.2vw, 7px) + 5px) / 2);
	}

	.svgShowPassword {
		height: calc(clamp(11px, 1.8vw, 18px) + clamp(2px, 0.2vw, 7px));
	}

	footer {
		position: static;
		transform: none;
		margin: 50px auto 0;
	}
}