.loginFormStyleEmployee {
  .employeeCard {
     background-color: transparent !important;
    .submit-bar {
      @apply w-full;
    }
  }
}
.banner .bannerCard{
  min-width: 420px !important;
}
.employeeForgotPassword .employeeCard .field .field-container .component-in-front {
  margin-top: 0;
  border: 1px solid;
  border-right: none;
  padding: 7px;
}
@screen dt {
  .employeeForgotPassword .employeeCard .field .field-container .component-in-front {
    padding: 7px;
  }
 .loginFormStyleEmployee .employeeCard, .banner .bannerCard{
    min-width: 420px !important;
  }
  .employeeForgotPassword .employeeCard, .employeeChangePassword .employeeCard{
    max-width: 420px !important;
    min-width: 420px !important;
  }
}

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

.employeeForgotPassword .field-container {
  margin: 10px 0;
}
.employeeForgotPassword {
  .submit-bar {
    @apply w-full;
  }
}
.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: normal;
  font-size: 16px;
  line-height: 19px;
  color: theme(colors.text.primary);
  margin-top: 20px;
}
.banner .bannerHeader {
  margin-bottom: 20px;
}
.employeeCard .card-label{
  font-weight: normal;
  font-size: 16px;
  line-height: 19px;
  color: theme(colors.text.primary);
}
.profile-label-margin{
   margin-top: 10px;
}

.employeeForgotPassword .employeeCard .card-label-desc {
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
  color: theme(colors.text.secondary);
  margin-top: 15px;
}
.employeeChangePassword .employeeCard .card-text {
  margin-bottom: 15px;
  font-size: 16px;
  color: theme(colors.text.secondary);
}
@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;
}

.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;
  }
  .loginFormStyleEmployee .employeeCard, .banner .bannerCard{
    min-width: 340px !important;
    margin: 10px !important;
  }
  .employeeForgotPassword .employeeCard, .employeeChangePassword .employeeCard{
    max-width: 360px !important;
    min-width: 340px !important;
    margin: 10px !important;
  }
}
.employeeChangePassword .employeeCard .card-text{
  margin-top: 18px !important;
  margin-bottom: 20px !important;
}
.employeeBackbuttonAlign{
  display: none;
}
.resend-otp{
  cursor: pointer;
}

.employee-select-wrap.login-city-dd {
  .options-card{
  max-height: 200px;
  }
}
@media screen and (max-width: 768px){
  .employeeBackbuttonAlign{
    display: block;
    position: absolute;
    top: 20px;
    left: 20px;
  }
  .banner{
    align-items: flex-end;
    padding-bottom: 40px;
    height: 100vh !important;
  }
  .topbar{
    background: rgba(34, 57, 77, var(--bg-opacity)) !important;
    color: white;
  }
  .employee .loginContainer{
    padding-top: 0px !important;
  }
  .removeBottomMargin{
    margin-bottom: 0px !important;
  }
  .employee-select-wrap.login-city-dd {
    .options-card{
    max-height: 160px;
    }
  }
}



@media (max-width: 768px) {
  .modernFinanceUIWelcomeContainer,
  .modernFinanceUIWelcomeContent,
  .financeUI-background-decor1,
  .financeUI-background-decor3,
  .financeUI-background-decor4,
  .financeUI-background-decor2 {
    display: none !important;
  }

  .modernFinanceUILoginFormRightContainer {
    width: 100% !important;
  }

  .loginContainer {
    padding: 0 !important;
    background: #fff !important; /* optional */
  }
}

.loginFormStyleEmployee {

  .loginCardSubHeaderClassName {
    text-align: center !important;
  }
  .loginCardClassName {
     background-color: transparent !important;
    margin: auto !important; 
    min-width: 408px !important;
    header.employee-card-sub-header{
      text-align: center;
      margin-top: 10px;
    }
  }
  .buttonClassName {
    max-width: 100% !important;
    width: 100% !important
  }
  .field .field-container .text-input input {
    margin-bottom: 5px !important;
  }
  .bannerHeader {
    margin-bottom: 0px !important;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 24px;
  }
  .bannerLogo {
    width: 150px;
    height: auto;
    -o-object-fit: contain;
    object-fit: contain;
    padding-right: 10px;
    margin-right: 10px;
    border-right: 1px solid #0b0c0c;
  }
  
  .primary-label-btn {
    margin: 20px auto 0 auto !important;
  }

  .employee-select-wrap .options-card {
    max-height: 150px !important;
  }
}
@media screen and (max-width: 768px) {
  
  /* remove ALL fixed/min widths */
  .loginCardClassName,
  .employeeCard,
  .loginFormStyleEmployee .employeeCard,
  .bannerCard,
  .banner .bannerCard,
  .employeeForgotPassword .employeeCard,
  .employeeChangePassword .employeeCard {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* make main container full width */
  .modernFinanceUIMainContainer,
  .modernFinanceUILoginFormRightContainer,
  .loginContainer {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 12px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* center logo + header & shrink them */
  .bannerHeader,
  .bannerLogo {
    margin: 0 auto !important;
    text-align: center !important;
    width: auto !important;
  }

  .bannerLogo {
    width: 100px !important;
    height: auto !important;
    border-right: none !important;
    padding: 0 !important;
    margin-bottom: 8px !important;
  }
}