main {
  display: flex;
  flex-direction: column;
  height:100vh;
}
#wrapper {
  flex: 1;
}
.container, .container > .row {
  height: 100%;
}
#login-form, .registration form, .password-recovery form, .customer-form {
  margin: auto;
  width: 350px;
  background: white;
  padding: 30px;
  border-radius: 20px;
  box-shadow: 1px 2px 0px 0 rgba(0, 0, 0, 0.2);
}
.login {
  text-align: center;
}

.registration, .password-recovery {
  display: none;
  text-align: center;
}
.show-registration, .show-forgot-password, .show-login {
  cursor: pointer;
}
.forgot-password {
  margin: 10px 0;
}
.no-account {
  margin: 10px 0;
}
.login-wrapper {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.divider {
	text-align: center;
	margin: 15px 0;
	position: relative;
	color: #666;
	font-size: 0.9rem;
}

.divider::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 1px;
	background: #e1e5e9;
}
.divider span {
	background: rgba(255, 255, 255, 0.95);
	padding: 0 20px;
	position: relative;
    top: 0px;
}
.social-btn {
	flex: 1;
	padding: 7px;
	border: 2px solid #e1e5e9;
	border-radius: 12px;
	background: white;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-weight: 500;
	text-decoration: none;
	color: #333;
	width:100%;
	margin-bottom: 15px
}

.google-btn:hover {
	border-color: #4285f4;
	background: #f8f9ff;
	transform: translateY(-1px);
}

.facebook-btn:hover {
	border-color: #1877f2;
	background: #f0f4ff;
	transform: translateY(-1px);
}

.google-icon {
	width: 20px;
	height: 20px;
	background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTIyLjU2IDEyLjI1YzAtLjc4LS4wNy0xLjUzLS4yLTIuMjVIMTJ2NC4yNmg1LjkyYy0uMjYgMS4zNy0xLjA0IDIuNTMtMi4yMSAzLjMxdjIuNzdoMy41N2MyLjA4LTEuOTIgMy4yOC00Ljc0IDMuMjgtOC4wOXoiIGZpbGw9IiM0Mjg1RjQiLz48cGF0aCBkPSJNMTIgMjNjMi45NyAwIDUuNDYtLjk4IDcuMjgtMi42NmwtMy41Ny0yLjc3Yy0uOTguNjYtMi4yMyAxLjA2LTMuNzEgMS4wNi0yLjg2IDAtNS4yOS0xLjkzLTYuMTYtNC41M0gyLjE4djIuODRDMy45OSAyMC41MyA3LjcgMjMgMTIgMjN6IiBmaWxsPSIjMzRBODUzIi8+PHBhdGggZD0iTTUuODQgMTQuMDljLS4yMi0uNjYtLjM1LTEuMzYtLjM1LTIuMDlzLjEzLTEuNDMuMzUtMi4wOVY3LjA3SDIuMThDMS40MyA4LjU1IDEgMTAuMjIgMSAxMnMuNDMgMy40NSAxLjE4IDQuOTNsMi44NS0yLjIyLjgxLS42MnoiIGZpbGw9IiNGQkJDMDUiLz48cGF0aCBkPSJNMTIgNS4zOGMxLjYyIDAgMy4wNi41NiA0LjIxIDEuNjRsMy4xNS0zLjE1QzE3LjQ1IDIuMDkgMTQuOTcgMSAxMiAxIDcuNyAxIDMuOTkgMy40NyAyLjE4IDcuMDdsMy42NiAyLjg0Yy44Ny0yLjYgMy4zLTQuNTMgNi4xNi00LjUzeiIgZmlsbD0iI0VBNDMzNSIvPjwvc3ZnPg==') no-repeat center;
	background-size: contain;
}

.facebook-icon {
	width: 20px;
	height: 20px;
	background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTI0IDEyLjA3M2MwLTYuNjI3LTUuMzczLTEyLTEyLTEycy0xMiA1LjM3My0xMiAxMmMwIDUuOTkgNC4zODggMTAuOTU0IDEwLjEyNSAxMS44NTR2LTguMzg1SDcuMDc4di0zLjQ3aDMuMDQ3VjkuNDNjMC0zLjAwNyAxLjc5Mi00LjY2OSA0LjUzMy00LjY2OSAxLjMxMiAwIDIuNjg2LjIzNSAyLjY4Ni4yMzV2Mi45NTNIMTUuODNjLTEuNDkxIDAtMS45NTYuOTI1LTEuOTU2IDEuODc0djIuMjVoMy4zMjhsLS41MzIgMy40N2gtMi43OTZ2OC4zODVDMTkuNjEyIDIzLjAyNyAyNCAxOC4wNjIgMjQgMTIuMDczeiIgZmlsbD0iIzE4NzdGMiIvPjxwYXRoIGQ9Ik0xNi42NzEgMTUuNTQzbC41MzItMy40N2gtMy4zMjh2LTIuMjVjMC0uOTQ5LjQ2NS0xLjg3NCAxLjk1Ni0xLjg3NGgxLjUxM1Y0Ljk5NnMtMS4zNzQtLjIzNS0yLjY4Ni0uMjM1Yy0yLjc0MSAwLTQuNTMzIDEuNjYyLTQuNTMzIDQuNjY5djIuNjQySDcuMDc4djMuNDdoMy4wNDd2OC4zODVhMTIuMTE4IDEyLjExOCAwIDAwMy43NSAwdi04LjM4NWgyLjc5NnoiIGZpbGw9IiNGRkZGRkYiLz48L3N2Zz4=') no-repeat center;
	border-radius: 4px;
	position: relative;
}