.login-content{width: 100%;display: flex;align-items: center;font-family: "Roboto", sans-serif;}
.login-content .side-image-div{width: 50%;height: 100vh;position: relative;}
.login-content .side-image-div::before{position: absolute;content: '';width: 100%;height: 100%;background: transparent;}
.login-content .login-bg{width: 100%;height: 100%;object-fit: cover;}
.login-content .form-div{display: flex;align-items: center;justify-content: center;width: 50%;height: 100vh; flex-direction: column;row-gap: 94px;padding-inline: 100px;}
.login-content .form-div .logo-div{max-height: 100px;max-width: 255px;}
.login-content .form-div .logo-img{object-fit: contain;width: 100%;height: 100%;}
.login-content .form-div .body-form-info{padding: 62px 30px 30px 30px;border-radius: 16px;box-shadow: 0 0 20px 0 #00000029;position: relative;width: 100%;background: #FFF;max-width: 400px;}
.login-content .form-div .form-title{position: absolute;width: fit-content;top: -24px;padding: 11px 20px;border-radius: 6px;background: #32B24A;font-size: 18px;font-weight: 600;line-height: 26px;color: #FFF;margin: 0;}
.login-content .form-div .detail-group>.form-control{width: 100%;}
.login-content .form-div .input-lable{display: block;font-size: 14px;font-weight: 400;line-height: 21px;margin-bottom: 7px;color: #212529;}
.login-content .form-input{padding: 10px 45px 10px 16px;border-radius: 4px;font-size: 14px;line-height: 21px;color: black;border: 1px solid #D9D9D9;}
.login-content .form-input:focus{border-color: #F1592D;}
.login-content .form-div .form-input::placeholder{color: #21252950;}
.login-content .form-div .login-buttons{padding-top: 20px;}
.login-content .form-div .login-btn{margin-left: auto;display: block;padding: 12px 34px;border-radius: 6px;font-size: 16px;font-weight: 500;line-height: 24px;color: #FFF;text-transform: uppercase;transition: ease 0.8s;background: #F1592D !important;}
.login-content .form-div .login-btn:hover{background-color: #32B24A !important;}
.login-content .form-div .red-star{color: #FF0000;}
.login-content .form-div .input-div{position: relative;}
.login-content .form-div .password-icon{position: absolute;top: 50%;font-size: 16px;transform: translate(0 ,-50%); right: 14px;cursor: pointer;height: 14px;width: 18px;display: flex;justify-content: center;}
.login-content .form-div .showPass{color: #212529;}
.login-content .form-div .showPass:hover{color: #212529;}

@media (max-width: 1399px) {
  .login-content .form-div{padding-inline: 75px;}
}
@media (max-width: 1299px) {
  .login-content .form-div{padding-inline: 50px;}
}
@media (max-width: 991px) {
  .login-content{flex-direction: column;}
  .login-content .side-image-div{position: absolute;width: 100%;z-index: -1;}
  .login-content .form-div{width: 100%;padding-inline: 100px;height: 90vh;}
  .login-content .side-image-div::before{background:  #ffffffe0;}
}
@media (max-width: 575px) {
  .login-content .form-div{padding-inline: 30px;row-gap: 55px;}
  .login-content .form-div .form-title{padding: 8px 14px;font-size: 16px;line-height: 24px;top: -20px;}
  .login-content .form-div .logo-img{height: 80px;}
  .login-content .form-div .body-form-info{padding: 42px 20px 20px 20px;}
  .login-content .form-div .login-btn{padding: 8px 26px;font-size: 14px;line-height: 22px;}
  .login-content .form-div .login-buttons{padding-top: 10px;}
}