/* Inside public/assets/css/style.css */
.btn {
  width: 100%;
  height: 40px;
  background: #18427a;
  border: none;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.btn:hover {
  background: #143763;
}




/* Make the wrapper a flex container */
/* Wrapper Flex Container */
.login-wrapper {
  display: flex;
  min-height: 100vh;
  flex-direction: row;
}
@media (max-width: 768px) {
    .login-wrapper {
        flex-direction: column;
    }

    .login-content {
        width: 100%;
        max-width: 100%;
        height: auto;
        padding: 40px 20px;
    }

    .login-img {
        display: none; /* ✅ Hides the image panel on mobile */
    }

    .login-img img {
        display: none;
    }
}
@media (max-width: 768px) {
    .login-wrapper {
        flex-direction: column;
        padding: 0 15px; /* 👈 Add side padding to center */
    }

    .login-content {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 30px 15px !important; /* 👈 Side padding */
        box-sizing: border-box;
    }

    .login-userset {
        max-width: 100% !important;
        width: 100%;
    }

    .form-login,
    .form-login input,
    .form-addons input,
    .pass-group input {
        width: 100% !important;
        box-sizing: border-box;
    }

    .login-img {
        display: none;
    }
}


/* Left side: Sign In Form (30%) */
/* .login-content {
  flex: 0 0 35%;
  max-width: 35%;
  background-color: #fff;
  padding: 60px 40px;
  display: flex;
  justify-content: center;
  align-items: center;
} */
 .login-content {
  flex: 0 0 35%;
  max-width: 35%;
  background-color: #fff;
  padding: 50px 50px;
  display: flex;
  justify-content: flex-start;  /* Align horizontally */
  align-items: flex-start;      /* Align to the top */
}
.login-userset {
  margin: 0 auto;
  width: 100%;
  max-width: 400px; /* Limit the width to avoid stretching */
}


/* Right side: Image (70%) */
.login-img {
  flex: 0 0 65%;
  max-width: 65%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f4f6f8;
}

.login-img img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}


/* Optional: Make it responsive */
@media (max-width: 768px) {
    .login-wrapper {
        flex-direction: column;
    }

    .login-content,
    .login-img {
        width: 100%;
        height: auto;
    }

    .login-img img {
        height: auto;
    }
}

.login-wrapper .login-img img {
  width: 100%;
  height: 100vh;
}
.logo-normal img {
    width: 150px;   /* or any size you prefer */
    height: auto;
    
    object-fit: contain;
}
.login-wrapper .login-content .form-login .form-addons {
  position: relative;
}
.login-wrapper .login-content .form-login .form-addons img {
  position: absolute;
  top: 16px;
  right: 20px;
}
.login-wrapper .login-content .form-login input {
  width:100%;
  height: 40px;
  border: 1px solid rgba(145, 158, 171, 0.32);
  border-radius: 5px;
  padding: 0 15px;
  -webkit-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.login-wrapper .login-content .form-login {
  margin-bottom: 15px;
}
.login-wrapper .login-content .form-login label {
  width: 100%;
  color: #212B36;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 500;
}
.login-wrapper .login-content .form-login .form-addons {
  position: relative;
}
.login-wrapper .login-content .form-login .form-addons img {
  position: absolute;
  top: 16px;
  right: 20px;
}
.login-wrapper .login-content .form-login .form-addons {
  position: relative;
}
.login-wrapper .login-content .form-login .form-addons img {
  position: absolute;
  top: 16px;
  right: 20px;
}
body[data-theme=dark] .login-wrapper .login-content .form-login label {
  color: #97A2D2;
}
body[data-theme=dark] .login-wrapper .login-content .form-login input {
  background: #1d1d42 !important;
  color: #97A2D2;
}
body[data-theme=dark] .login-wrapper .login-content .form-login input::placeholder {
  color: #97A2D2;
}
body[data-theme=dark] .login-wrapper .login-content .form-login label {
  color: #97A2D2;
}
.login-wrapper .login-content .form-login {
  margin-bottom: 45px;
}
.form-login  {
  width: 100%;
  color: #212B36;
  margin-bottom:20px;
  font-size: 14px;
  font-weight: 500;
}
.form-login {
    width: 100%;
    margin-bottom: 20px;
}

.form-addons,
.pass-group {
    display: flex;
    align-items: center;
    position: relative;
}

.form-addons input,
.pass-group input,
.btn-login {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 15px;
    box-sizing: border-box;
}

.form-addons img,
.pass-group .toggle-password {
    position: absolute;
    right: 10px;
    cursor: pointer;
}