:root {
  --brand: var(--primary-app-color);
  --brand-dark: var(--primary-app-color);
  --text: #2d2d2d;
  --muted: #6c757d;
  --bg: #f7faf6;
}


#auth a {
  color: var(--brand-dark);
}

#auth .brand {
  color: var(--brand) !important;
}

#auth .auth-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
#authWithAjaxModal #auth .auth-wrapper {
	min-height: unset !important;
}

#auth .card.auth-card {
  width: 100%;
  max-width: 480px;
  border: 0;
  border-radius: 1rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .08);
}

#auth .card.auth-card .card-header {
  background: #fff;
  border-bottom: 0;
  padding: 2rem 2rem 0 2rem;
}

#auth .card.auth-card .card-body {
  padding: 2rem;
}

#auth .logo-badge {
	width: 60px;
	height: 60px;
	border-radius: 4px;
	background: var(--primary-app-color);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

#auth .btn-brand {
  background: var(--brand);
  border-color: var(--brand);
  color: #0b2610;
  font-weight: 600;
}

#auth .btn-brand:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
}

#auth .form-control:focus {
  border-color: #d2d8dd;
  box-shadow: unset !important;
}

#auth .input-group {
	border-radius: 4px !important;
}
#auth #togglePassword {
	border-left: none;
	border-color: #ced4da;
}

#auth .btn-outline-secondary:hover {
	color: #6c757d !important;
	background-color: #fff !important;
	border-left: #d2d8dd !important;
}
#auth .input-group-append {
	margin-left: unset !important;
}

#auth  .btn-outline-secondary.focus, #auth .btn-outline-secondary:focus {
	box-shadow: unset !important;
}

#auth .input-group-text {
  background: #fff;
  border-right: 0;
}


#auth .input-group .form-control {
  border-left: 0;
}

#auth a:hover {
  color: var(--primary-app-color);
  text-decoration: none;
}

#auth .btn.focus, #auth .btn:focus {
	box-shadow: unset !important;
}

#auth .small-muted {
  color: var(--muted);
}

#auth .footer-note {
	font-size: 15px;
	color: var(--muted);
	font-weight: 600;
}

#auth .password-strength .progress {
  height: 8px;
  border-radius: 6px;
  background: #e9ecef;
}


#auth .socal-login #socal-facebook{
    width: 50px;
    margin-right: 10px;
}

#auth .socal-login #socal-google{
    width: 37px;
}

#auth .socal-login #socal-facebook img , #auth .socal-login #socal-google img{
    width: 100%;
}