@import 'bootstrap.min.css';
    @import 'font-awesome.min.css';
    @import 'preloader.css';

/*--------------------*/
/* 01. Web Fonts */
/*--------------------*/

	@import url('https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700,900');

 :root {
      --brand-primary: #2563eb;
      --brand-secondary: #6366F1;
      --brand-dark: #3a7bd5;
    }
    body {
      font-family: 'Inter', sans-serif;
      background: #f8f9fa;
    }
.text-dark {
    color: #3f51b8 !important;
}
    .form-icon {
      position: absolute;
      top: 50%;
      left: 1rem;
      transform: translateY(-50%);
      color: #9ca3af;
    }
    .form-control {
      padding-left: 2.75rem;
    }
    .bg-gradient {
      /* background: linear-gradient(135deg, #3A7BD5 0%, #3A6073 100%); */
      /* background: linear-gradient(135deg, #3B82F6 0%, #6366F1 50%, #3A59D8 100%); */

      /* background: linear-gradient(135deg, #4f7df3 0%, #3b6ddf 40%, #3753c7 100%); */
      background: linear-gradient(135deg, #3a7bd5 0%, #3f51b8 40%, #3d4bb3 70%, #3a60d5 100%);
      /* background: linear-gradient(135deg, #3A7BD5 0%, #3A6073 100%); */
      /* background: linear-gradient(135deg, #3B82F6 0%, #6366F1 50%, #3A59D8 100%); */






      color: #fff;
      position: relative;
      overflow: hidden;
    }
    .bg-gradient::before, .bg-gradient::after {
      content: '';
      position: absolute;
      border-radius: 50%;
      background: rgba(255,255,255,0.1);
      filter: blur(80px);
    }
    .bg-gradient::before {
      width: 50%;
      height: 50%;
      top: -25%;
      left: -25%;
    }
    .bg-gradient::after {
      width: 50%;
      height: 50%;
      bottom: -25%;
      right: -25%;
    }
    .login-btn {
      background-color: var(--brand-dark);
      color: #fff;
      font-weight: 600;
      transition: 0.3s ease;
    }
    .login-btn:hover {
      background-color:var(--brand-secondary);
      color: #fff;
    }
  .login-btn:focus {
    box-shadow: 0 0 0 0.2rem rgb(169 176 230 / 50%);
}


      .recover-btn {
      background-color: var(--brand-secondary);
      color: #fff;
      font-weight: 600;
      transition: 0.3s ease;
    }
    .recover-btn:hover {
      background-color: var(--brand-primary);
      color: #fff;
    }
    .recover-btn:focus {
      box-shadow: 0 0 0 0.2rem #0298ca;
    }

    .form-input {
    display: block;
    width: 100%;
    /* height: calc(1.5em + .75rem + 2px); */
    padding: .675rem 2.8rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #1f2937;
    background-color: #f9fafb;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    /* transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; */
    }

input:focus
{
  outline: none !important;
  box-shadow: none !important;
  border-color: none !important; /* same as normal border */
}

    /* Focus hone par placeholder gayab */
input::placeholder {
  color: #999;
  transition: opacity 0.3s ease;
}
input:focus::placeholder {
  opacity: 0;
}


.pwdMask {
  position: relative;
}

.pwdMask .pwd-toggle {
  color: #cccccc;
      position: absolute;
    z-index: 2;
    right: 10px;
    top: 18px;
}

.panel-login .pwdMask .pwd-toggle,
.panel-signup .pwdMask .pwd-toggle {
  top: 15px;
  right: 5px;
}

.pwdMask .pwd-toggle:hover,
.pwdMask .pwd-toggle:focus {
  cursor: pointer;
}

.pwdMask .pwd-toggle:hover,
.pwdMask .pwd-toggle:focus,
.pwdMask .pwd-toggle.fa-eye {
  color: #4f77ff;
}

.fade-box {
  opacity: 0;  display:none;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  position: absolute;
  width: 100%;
}

.fade-box.show {
  opacity: 1; display:block;
  visibility: visible;
  position: relative;
}

#loginDiv, #recoverDiv {
  transition: all 0.5s ease;
}
#backIcon{ cursor: pointer }

.error {
    border: 2px solid red !important;
}