body {
	display: flex;
	place-content: center;
	height: 100vh;
	background-image: linear-gradient(135deg, #ff9d00 0%, #ffdc6a 100%);
}

.login-page-row {
	width: 80rem;
	display: flex;
	align-items: center;
	padding: 2rem;
}

.login-gallery {
	width: 60%;
	border-radius: 0.5rem;
	overflow: hidden;
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.login-swiper {
}

.login-swiper .swiper-pagination {
	text-align: left;
	padding-inline: 4rem;
	--swiper-pagination-bottom: 3rem;
	--swiper-pagination-color: #fff;
	--swiper-pagination-bullet-inactive-color: #fff;
}

.login-slide {
	color: #fff;
}

.login-slide::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 10%, rgba(0, 0, 0, 0) 60%); */
}

.login-gallery-img {
	position: relative;
}

.login-gallery-img img {
	width: 100%;
	aspect-ratio: 1 / 1.1;
	object-fit: cover;
}

.login-slide-body {
	position: absolute;
	z-index: 1;
	bottom: 1rem;
	left: 0;
	width: 80%;
	padding: 4rem;
}

.login-slide-title {
}

.login-slide-text {
}

.login-card {
	width: 50%;
	margin-left: -10%;
	position: relative;
	z-index: 1;
	background-color: #fff;
	border-radius: 0.5rem;
	box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.2);
}

.login-card-body {
	padding: 5rem;
	text-align: center;
}

.login-logo {
}

.login-logo img {
	width: 10rem;
}

.login-form {
}

.login-control {
}

.login-form-group {
	position: relative;
	margin-bottom: 1.5em;
	text-align: left;
}

.login-form-group label {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	transition: 0.2s transform ease;
	color: #838383;
	transform: translateY(-50%) scale(1);
	transform-origin: left;
	font-size: 1em;
	font-weight: 500;
	cursor: text;
}

.login-form-group input {
	width: 100%;
	padding: 0.5rem 0;
	border: none;
	border-bottom: 1px solid #d0d0d0;
	border-radius: 0;
}

.login-form-group input::placeholder {
	color: transparent;
}

.login-form-group input:focus {
	outline: none;
	border-bottom-color: #17a2b8;
}

.login-form-group input:focus + label,
.login-form-group input:not(:placeholder-shown):not(:focus) + label,
.login-form-group input:valid + label {
	transform: translateY(-2em) scale(0.8);
	/* color: #17a2b8; */
}

.login-form-group input:not(:placeholder-shown):not(:valid):not(:focus) + label {
	color: red;
}

.login-form-group input:not(:placeholder-shown):valid:not(:focus) + label {
	/* color: #1cb500; */
}

.login-form-group input:valid {
	background-color: #fff;
}

.validation-error {
    color: red;
}

.login-btn {
	background-color: #d6882c;
	color: #fff;
	font-size: 1.1em;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    border-radius: 0.5rem;
    transition: 0.3s;
}

.login-btn:hover {
    background-color: #ff9d00;
    color: #fff;
}

.login-footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	text-align: center;
}

.login-footer-copy {}

@media (max-width: 768px) {
	.login-page-row {
		flex-direction: column;
	}

	.login-page-row,
	.login-gallery {
		width: 100%;
	}

	.login-card {
		width: 90%;
		margin-left: 0;
		margin-top: -5rem;
	}

	.login-card-body {
		padding: 3rem;
	}
}