.loginFormStyleEmployee {
  z-index: 10;
  margin-top: 15px;
  .employeeCard {
    .submit-bar {
      @apply w-full;
      height: 2rem !important;
    }
    .employeeCard 
      .submit-bar .submit-bar header
      {
        line-height: 2rem !important;
        font-size: 16px;
        
      }
  }
}
.banner .bannerCard{
  min-width: 420px !important;
  background-color: transparent;
}
.employeeForgotPassword .employeeCard .field .field-container .component-in-front {
  border: 1px solid;
  border-right: none;
  height: 32px !important;
  margin-top: -16px !important;
  z-index: 999;
  background-color:#ffffffeb;
}
@screen dt {
  .employeeForgotPassword .employeeCard .field .field-container .component-in-front {
    border: 1px solid black;
    border-right: none;
    height: 32px !important;
    margin-top: -16px !important;
    z-index: 999;
    background-color: #ffffffeb;

  }
 .loginFormStyleEmployee .employeeCard, .banner .bannerCard{
    min-width: 270px !important;
   
    background-color: #ffffffd6 !important
  }
  .employeeForgotPassword .employeeCard, .employeeChangePassword .employeeCard{
    max-width: 270px !important;
    min-width: 270px !important;
    background-color: #ffffffeb
  }
}

.employeeForgotPassword .employee-card-input {
  margin-bottom: 0px;
  border-left: none;
}

.employeeForgotPassword .field-container {
  margin: 10px 0;
}
.employeeForgotPassword {
  .submit-bar {
    @apply w-full;
    background-color: #5a1166 !important;
  }
}
.employeeChangePassword .submit-bar {
  width: 100% !important;
}
.employeeChangePassword .card-text {
  text-align: center;
}
.employeeChangePassword .input-otp-wrap {
  text-align: center;
}
.submit-bar {
  .submit-bar {
    @apply w-full;
  }
}
.loginFormStyleEmployee .bannerHeader p,
.employeeForgotPassword .bannerHeader p,
.employeeChangePassword .bannerHeader p {
  font-size: 19px;
}
.employeeCard .card-sub-header {
  font-size: 24px;
}
.loginFormStyleEmployee .employeeCard .card-label, .employeeForgotPassword .employeeCard .card-label{
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 10px !important;
  color: #0B0C0C;
  z-index: 10 !important;
}
.banner .bannerHeader {
  margin-bottom: 20px;
}
.employeeCard .card-label{
  font-weight: normal;
  font-size: 16px;
  line-height: 19px;
  color: #0B0C0C;
}
.profile-label-margin{
   margin-top: 10px;
}
.loginFormStyleEmployee .primary-label-btn{
  font-size: 12px;
}
.employeeForgotPassword .employeeCard .card-label-desc {
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
  color: #505a5f;
  margin-top: 15px;
}
.employeeChangePassword .employeeCard .card-text {
  margin-bottom: 15px;
  font-size: 16px;
  color: #505a5f;
}
.employeeCard .card-label{
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 10px !important;
  color: #0b0c0c;
  
}
@media screen and (max-width: 768px) {
  .employeeChangePassword .employeeCard .card-text {
    margin-top: 7px;
  }
  .employeeCard .card-sub-header {
    font-size: 18px;
  }
}
.employeeChangePassword .employeeCard .card-text-button {
  text-align: center !important;
  margin-bottom: 12px !important;
}
.employeeChangePassword .employeeCard .input-otp-wrap {
  margin-bottom: 10px;
}
.employee .loginContainer {
  padding-top: 0px !important;
}
.banner {
  height: calc(100vh ) !important;
}

.employeeChangePassword .employeeCard .field .field-container{
  margin-bottom: 24px;
}
.upyog-copyright-footer-web
{
  display: none;
}
.employeeForgotPassword .employeeCard  .employee-card-sub-header, .employeeChangePassword .employeeCard  .employee-card-sub-header, .loginFormStyleEmployee .employeeCard .employee-card-sub-header{
  font-size: 24px !important;
  line-height: 28px !important;
  margin-bottom: 0px !important;
}
@media screen and (max-width : 768px){
  .employeeForgotPassword .employeeCard  .employee-card-sub-header, .employeeChangePassword .employeeCard  .employee-card-sub-header, .loginFormStyleEmployee .employeeCard .employee-card-sub-header{
    font-size: 18px !important;
    line-height: 21px !important;
    margin-bottom: 0px !important;
    z-index: 10 !important;
  }
  .loginFormStyleEmployee .employeeCard, .banner .bannerCard{
    min-width: 270px !important;
    z-index: 10 !important;
    background-color: #ffffffd6 !important;
    margin-top: 0 !important;
  }
  .employeeForgotPassword .employeeCard, .employeeChangePassword .employeeCard{
    max-width: 250px !important;
    min-width: 250px !important;
    margin-top: -50% !important;
    background-color: #ffffffeb;
  }
}
.employeeChangePassword .employeeCard .card-text{
  margin-top: 18px !important;
  margin-bottom: 20px !important;
}
.employeeBackbuttonAlign{
  display: none;
}
.employee-select-wrap .select{
height: 2.0rem !important;
background-color: white !important;

}
.employee-select-wrap.login-city-dd {
  .options-card{
  max-height: 150px;
  }
}
.banner .bannerCard, .loginFormStyleEmployee .employeeCard{
  background-color: transparent;
}

@media screen and (max-width: 768px){
  .employeeBackbuttonAlign{
    display: block;
    position: absolute;
    top: 20px;
    left: 20px;
  }
  .banner{
    padding-bottom: 40px;
    height: 100vh !important;
    z-index: 1;
  }
  .topbar{
    background: white;
  }
  .employee .loginContainer{
    padding-top: 0px !important;
  }
  .removeBottomMargin{
    margin-bottom: 0px !important;
  }
  .employee-select-wrap.login-city-dd {
    .options-card{
    max-height: 160px;
    }
  }
  .banner .upyog-copyright-footer
  {
    display: none;
  }
  .banner .upyog-copyright-footer-web
  {
    display: block;
  }
}
@media screen and (max-width:900px) {

  .loginFormStyleEmployee .employeeForgotPassword
  {
    margin-top: -50% !important;
    background-color: #ffffffeb !important;
    z-index: 2;
  }
  .psuedo-banner{
    font-size: 20px;
  }
  .banner-slogan{
    font-size: 14px;
  }
  .loginFormStyleEmployee, .employeeForgotPassword{
    margin-top: -30% !important;
   
  }
}
.employeeForgotPassword{
  z-index: 2;
}