.auth .logo img {max-width: 320px;}

.auth {
	position: relative;
	background-image: url(../images/login-bg.png);
	background-size: cover;
	background-position: center;
	height: 100vh;
}

.auth .auth-wrap {
  	display: flex;
  	align-items: center;
	justify-content: center;
	overflow: hidden;
	height: 100%;
}

.auth:before {
    position: absolute;
    content: " ";
    background-color: rgb(0 0 0 / 30%);
    height: 100%;
    left: 0;
    width: 100%;
}

.auth .login-box {
	position: relative;
  	z-index: 2;
	width: 100%;
  	max-width: 430px;
  	text-align: center;
}

.auth .login-box .top-wrap {padding: 0 35px;}

.auth form {
	margin: 30px auto 0;
	max-width: 340px;
}

.auth .input-group .icon {
  	width: 25px;
  	height: 25px;
  	margin-right: 12px;
  	display: flex;
}

.auth .icon-wrap {
    display: flex;
    align-items: center;
    width: auto;
    height: 100%;
    flex: 0 0 auto;
    margin-right: 8px;
	font: var(--font-secondary);
	font-size: 14px;
}


.auth .input-group .icon img {
  	width: 100%;
  	height: 100%;
  	object-fit: contain;	
}

.auth .input-group input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-main);
}

.auth .options {
    display: inline-block;
    margin: 0 20px;
}

.auth .login-btn {
  	width: 100%;
  	padding: 10px;
  	border: none;
  	font-weight: 600;
  	color: var(--text-main) !important;
  	letter-spacing: 0.5px;
  	transition: all 0.3s ease;
  	font-size: 18px;
  	margin: 30px 0;
  	max-width: 280px;
	border-radius: 0;
}

.auth .forgot a {
  	margin: 0;
  	color: var(--text-main);
	font-size: 16px;
	text-decoration: none;
}

.auth .footer {
	padding-top: 30px;
  	margin-top: 30px;
  	color: var(--text-main);
	border-top: 2px solid var(--text-muted);
	font-size: 16px;
    letter-spacing: 1px;
}

.auth .footer p>small {letter-spacing: 5px;}
.auth .footer p:last-child {margin: 0;}
.auth .footer span {color: var(--accent-gold);}

@media (max-width: 575px) {
	.auth .login-box .top-wrap {padding: 0;}
	.auth .logo img {max-width: 250px;}
	.auth .footer p:last-child {margin: 0;}
	.auth .login-box {padding: 30px 15px;}
	.auth .footer {padding-top: 20px;margin-top: 20px;}
	.auth .icon-wrap {font-size: 14px;margin-right: 6px;}
	.auth .input-group .icon {width: 20px;height: 20px;margin-right: 5px;}
	.auth .input-group {padding: 0 5px;}
	.auth form {margin-top: 15px;}
	.auth .login-btn {margin: 15px 0;}
	.auth .input-group input {
		font-size: 16px;
		line-height: 1.25;
		padding: 0 5px 2px;
	}
}