/* NG Property Services — customer login */

.ngps-login-page {
  --ngps-login-accent:       #febe10;
  --ngps-login-accent-dark:  #e6ac10;
  --ngps-login-text:         #10302a;
  --ngps-login-footer-bg:    #282828;
  --ngps-login-text-muted:   #49535b;
  --ngps-login-soft-bg:      #f7f7f5;
  --ngps-login-line:         rgba(16, 48, 42, 0.12);
  --ngps-login-ease:         cubic-bezier(0.22, 1, 0.36, 1);

  background-color: var(--ngps-login-soft-bg);
}

.ngps-login-page .tp-login-wrapper {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ngps-login-line);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(16, 48, 42, 0.08);
}

.ngps-login-page .tp-login-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #201b17 0%, var(--ngps-login-accent) 50%, #201b17 100%);
}

.ngps-login-page .tp-login-title {
  font-weight: 600;
  color: var(--ngps-login-text);
}

.ngps-login-page .tp-login-top p {
  color: var(--ngps-login-text-muted);
}

.ngps-login-page .tp-login-top p a,
.ngps-login-page .tp-login-mail p a,
.ngps-login-page .tp-login-forgot a {
  color: var(--ngps-login-text);
}

.ngps-login-page .tp-login-top p a:hover,
.ngps-login-page .tp-login-mail p a:hover,
.ngps-login-page .tp-login-forgot a:hover {
  color: var(--ngps-login-accent-dark);
}

.ngps-login-page .tp-login-top p a::after,
.ngps-login-page .tp-login-forgot a::after {
  background-color: var(--ngps-login-accent);
}

.ngps-login-page .tp-login-option-item a:hover {
  border-color: rgba(254, 190, 16, 0.45);
  background-color: rgba(254, 190, 16, 0.06);
}

.ngps-login-page .tp-login-mail::after {
  background-color: var(--ngps-login-line);
}

.ngps-login-page .tp-login-input input {
  border-color: var(--ngps-login-line);
  border-radius: 10px;
  background-color: #fff;
}

.ngps-login-page .tp-login-input input:focus {
  border-color: var(--ngps-login-accent);
  box-shadow: 0 0 0 3px rgba(254, 190, 16, 0.18);
}

.ngps-login-page .tp-login-input-title label {
  color: var(--ngps-login-text);
}

.ngps-login-page .tp-login-remeber input:checked ~ label::after {
  border-color: var(--ngps-login-accent-dark);
  background-color: var(--ngps-login-accent);
}

.ngps-login-page .tp-login-remeber label::after {
  border-radius: 4px;
}

.ngps-login-page .tp-login-remeber label {
  line-height: 1.45;
}

.ngps-login-page .tp-login-bottom .tp-login-btn {
  border-color: var(--ngps-login-accent);
  background-color: var(--ngps-login-accent);
  color: var(--ngps-login-text);
  border-radius: 100px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: background-color 0.35s var(--ngps-login-ease), color 0.35s var(--ngps-login-ease), border-color 0.35s var(--ngps-login-ease);
}

.ngps-login-page .tp-login-bottom .tp-login-btn:hover {
  border-color: var(--ngps-login-footer-bg);
  background-color: var(--ngps-login-footer-bg);
  color: #fff;
}