:root {
  --green-100: #00ab55;
  --black-100: #2d2d2d;
  --bg-black-200: #1a1a1a;
  --brown-100: #0e0000;
  --black-300: #374151;
  --white: #fff;
  --white-100: #f3f4f6;
  --grey: #d1d5db;
  --grey-100: #b2b2b2;
  --grey-200: #d4d4d4;
}
.text-green-100 {
  color: var(--green-100);
}
.bg-green-100 {
  background-color: var(--green-100);
}

/* font size */
.f-24 {
  font-size: 24px;
}
.f-12 {
  font-size: 12px;
}
.f-14 {
  font-size: 14px;
}
.font-weight-bold {
  font-weight: 700 !important;
}

.login-screen {
  background-image: url(images/login-screen.png);
  min-height: 100vh;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}
.login-screen.login-one {
  background-image: url(images/login-one-bg.png);
  background-position: center;
}
.login-screen.login-three {
  background-image: url(images/login-three-bg.png);
  background-position: center;
}
.login-screen.login-four {
  background-image: url(images/login-four-bg.png);
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.login-screen.login-five {
  background-image: url(images/login-five-bg.png);
}
.login-screen.login-eight {
  background-image: url(images/login-bg-eight.png);
}
.login-bg-six {
  background-image: url(images/login-img-six-bg.png);
  background-size: cover;
  background-repeat: no-repeat;
}
/* .login-bg-nine{
  background-image: url(../images/login-nine.png);
  background-size: cover;
  background-repeat: no-repeat;
} */
.login-bg-seven {
  background-image: url(images/login-img-seven-bg.png);
  background-size: cover;
  background-repeat: no-repeat;
}
.login-bg-nine .login-two-bg.ht-100vh {
  height: 92vh;
}
.login-nine-section {
  padding: 25px;
}
.login-nine-section .login-img-opacity {
  opacity: 1;
}
.login-img-opacity {
  opacity: 0;
}
.login-two-bg.ht-100vh {
  height: 100vh;
}
.login-screen.login-five .login-card {
  min-width: 480px;
  width: 100%;
  height: 100%;
  max-width: 480px;
  margin: auto;
  height: 100vh;
  justify-content: center;
}
.login-screen.login-eight .login-card {
  /* min-width: 100% !important; */
}
.login-screen.login-five .login-card .card-body.p-64px {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.login-screen.login-five .login-card {
  min-width: 480px;
  width: 100%;
  height: 100%;
  max-width: 480px;
  margin: auto;
  height: 100vh;
  justify-content: center;
  border-radius: 0;
  background-color: rgba(255, 255, 255, 0.8);
}
.login-screen.login-eight .login-card {
  background-color: rgba(255, 255, 255, 1);
}
.login-screen.login-four .card-body.p-64px {
  padding: 45px 64px !important;
}
.login-four-section {
  background-color: rgba(255, 255, 255, 0.95);
}
.login-screen.login-four .login-content .form-control {
  background-color: transparent;
  border: 1px solid #e5e4e4;
}
.login-screen.login-five .login-content .form-control {
  background-color: transparent;
  border: 1px solid #d3cece;
}
.login-screen.login-four .login-card {
  border-radius: 0px;
  background-color: transparent;
  box-shadow: none !important;
  border: none !important;
}
.login-screen.login-four .login-content {
  min-height: auto;
}
.login-screen.login-three .login-card {
  min-width: 480px;
  width: 100%;
  background-color: #dfe1e3;
  opacity: 0.99;
}
.login-screen.login-three .login-content {
  min-height: 85vh;
}
.login-screen.login-three .login-content .form-control {
  background-color: transparent;
  border: 1px solid #ccc;
}
.login-screen.login-two {
  background-image: none;
  min-height: 100vh;
}
.login-two-section {
  height: 100%;
}
.login-two-bg {
  height: 92vh;
  overflow: hidden;
}

.login-two-bg img {
  height: 100%;
  width: 100%;
}
/* .login-two .login-two-bg {
    background-image: url(../images/login-two-bg.png);
    height: 100%;

} */
/* .login-two .login-two-bg{
  background-image: url(../images/login-two-bg.png);
} */
.login-content {
  min-height: 87vh;
}
.card-body.p-64px {
  padding: 64px;
}
.form-control:focus {
  border-color: #00aa5d;
  box-shadow: 0 0 0 0.25rem rgb(224 247 236);
}
.form-control {
  display: block;
  width: 100%;
  padding: 0.44rem 0.75rem;
}
.btn.bg-green-100:hover {
  background-color: #03c56d;
}
.form-control {
  font-size: 14px;
}
.form-control::placeholder {
  color: #919eab;
}
.rounded-16px {
  border-radius: 16px;
}
.login-card {
  min-width: 480px;
  width: 100%;
}
.login-btn {
  padding: 9px;
}
.password-field {
  position: relative;
}
.password-field .eye-icon-open {
  position: absolute;
  right: 9px;
  top: 10px;
  color: #637381;
}
.password-field input#password {
  padding-right: 30px;
}