بخصوص التعديل علي العين لكلمة السر

.password-container {
    position: relative;
}
.show_hide_pwd {
    cursor: pointer;
    width: 24px;
    height: auto;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.show_hide_pwd.on {
    filter: invert(24%) sepia(181%) saturate(7480%) hue-rotate(310deg);
}

[type="password"] {
    background: url(https://i.servimg.com/u/f70/17/17/86/62/the_el10.jpg) !important;
  background-repeat: no-repeat !important;
  background-position: 1px !important;
}
 div.password-container > input {
    background: url(https://i.servimg.com/u/f70/17/17/86/62/the_el11.jpg);
background-repeat: no-repeat;
 background-position: 1px !important;
}
.show_hide_pwd {
    padding: 7px 7px 5px 7px;
    opacity: 0;
    left: 0;
    top: 10px;
    position: absolute;
}

.password-container {
    position: relative;
}
.toggle-password {
    position: absolute;
    right: 10px; /* تعديل المسافة حسب الحاجة */
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 1; /* تأكد من أن الأيقونة فوق الحقل */
}

$(function() {
    // تغليف حقل كلمة المرور في حاوية جديدة إذا لم يكن قد تم تغليفه بالفعل
  $('input#gzupassword,.fld_connexion input#password.inputbox.autowidth').each(function() {
        if (!$(this).parent().hasClass('password-wrapper')) {
            $(this).wrap('<div class="password-wrapper"></div>');
        }
     
        // إضافة أيقونة التبديل بعد حقل كلمة المرور
        if ($(this).siblings('.toggle-password').length === 0) {
            $(this).after('<i class="toggle-password fas fa-eye"></i>');
        }
    });

    // التعامل مع النقر على الأيقونة لتبديل إظهار كلمة المرور
    $(document).on("click", ".toggle-password", function() {
        // تحديد حقل كلمة المرور الأقرب لهذه الأيقونة
        var passwordField = $(this).closest('.password-wrapper').find('input[name="password"]');
        var isPasswordVisible = passwordField.attr('type') === 'text';

        if (isPasswordVisible) {
            passwordField.prop("type", "password");
            $(this).removeClass('fa-eye-slash').addClass('fa-eye');
        } else {
            passwordField.prop("type", "text");
            $(this).removeClass('fa-eye').addClass('fa-eye-slash');
        }
    });
});

/* تغيير لون الأيقونة عند المرور فوقها */
.password-wrapper #toggle-password:hover {
    color: #000; /* لون الأيقونة عند المرور فوقها */
}

i.toggle-password.fas.fa-eye-slash {
    color: #f91606;
}
img.show_hide_pwd {
    display: none;
}

.password-wrapper {
    position: relative;
}

.toggle-password {
  color: #666; /* اللون الافتراضي للأيقونة */
    font-size: 16px; /* حجم الأيقونة */
    position: absolute;
    right: 70%;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

$(function() {
        // تغليف حقل كلمة المرور في حاوية جديدة إذا لم يكن قد تم تغليفه بالفعل
      $('[type="password"]').each(function() {
            if (!$(this).parent().hasClass('password-wrapper')) {
                $(this).wrap('<div class="password-wrapper"></div>');
            }
       
            // إضافة أيقونة التبديل بعد حقل كلمة المرور
            if ($(this).siblings('.toggle-password').length === 0) {
                $(this).after('<i class="toggle-password fas fa-eye"></i>');
            }
        });

        // التعامل مع النقر على الأيقونة لتبديل إظهار كلمة المرور
        $(document).on("click", ".toggle-password", function() {
            // تحديد حقل كلمة المرور الأقرب لهذه الأيقونة
            var passwordField = $(this).closest('.password-wrapper').find('input[name="password"]');
            var isPasswordVisible = passwordField.attr('type') === 'text';

            if (isPasswordVisible) {
                passwordField.prop("type", "password");
                $(this).removeClass('fa-eye-slash').addClass('fa-eye');
            } else {
                passwordField.prop("type", "text");
                $(this).removeClass('fa-eye').addClass('fa-eye-slash');
            }
        });
    });