<div class="auth-page-wrapper">
    <div class="modal-container">
        <div class="modal-logo-container"><img loading="lazy" src="{app logo}" alt="{app name}"></div>
        <div class="modal-heading-container">
            <h1 class="modal-h1">Forgot your password?</h1>
            <div>No worries! Just enter the email address associated with your account below. We'll send you a link to reset your password and get you back on track in no time.</div>
        </div>
        <form id="forgot-password" name="forgot-password" data-name="forgot-password" method="post" class="form"  action="">
            <div class="form-field-container">
                <div class="field-label-container"><label for="email" class="field-label">Email</label></div><input class="form-field w-input" maxlength="256" name="email" data-name="email" placeholder="[email protected]" type="email" id="email" required>
            </div>
            <div class="form-button-container"><input type="submit" data-wait="Please wait..." class="button full w-button" value="Send Password Reset Email"></div>
            <div class="text-small">If you don't receive an email within a few minutes, please check your spam/junk folder or <a target="_blank" href="{app support website}">contact support</a>.</div>
        </form>
    </div>
</div>

<div class="auth-page-wrapper">
    <div class="modal-container">
        <div class="modal-logo-container"><img loading="lazy" src="{app logo}" alt="{app name}"></div>
        <div class="modal-heading-container">
            <h1 class="modal-h1">Check your email</h1>
            <div class="modal-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" height="512px" viewbox="0 -960 960 960" width="512px" fill="currentColor">
                <path d="M625.31-94.62 475.46-244.08l32.62-32.61 117.23 116.84L865.08-400l32.61 32.62L625.31-94.62ZM478.38-525.08l324.39-209.53H154.39l323.99 209.53Zm0 47.69-332.99-217v447.77q0 5.39 3.46 8.85t8.84 3.46h235.23l45.39 45.39H157.69q-23.53 0-40.61-17.09Q100-223.09 100-246.62v-475.69q0-23.53 17.08-40.61T157.69-780h642.39q23.52 0 40.61 17.08 17.08 17.08 17.08 40.61v236.7l-45.39 45.38v-254.16l-334 217Zm1 13.24Zm-1-60.93Zm1 47.69Z"></path>
                </svg></div>
            <div>We’ve sent a password reset link to <strong>[email protected]</strong>. Please click the link to reset your password. Not your email? <a href="#">Re-enter your email</a>.</div>
            <div class="form-button-container no-form">
                <a href="#" class="button full w-button">Back to Login</a>
            </div>
        </div>
        <div class="text-small">If you don't receive an email within a few minutes, please check your spam/junk folder or <a target="_blank" href="{app support website}">contact support</a>.</div>
    </div>
</div>

<div class="auth-page-wrapper">
    <div class="modal-container">
        <div class="modal-logo-container"><img loading="lazy" src="{app logo}" alt="{app name}"></div>
        <div class="modal-heading-container">
            <h1 class="modal-h1">Create a new password</h1>
            <div>Enter and confirm your new password.</div>
        </div>
        <form id="change-password" name="change-password" data-name="change-password" method="post" class="form" action="">
            <div class="form-field-container">
                <div class="field-label-container"><label for="password" class="field-label">Password</label>
                    <div class="required-star">*</div>
                    <div data-placement="right" data-tippy-content="Your password must meet the following requirements: at least 8 characters in length, contain at least one uppercase letter (A-Z), contain at least one lowercase letter (a-z), include at least one number (0-9), and include at least one special symbol (e.g., !, @, #, $)." class="help-tooltip w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="12" cy="12" r="10"></circle>
                        <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                        <line x1="12" y1="17" x2="12.01" y2="17"></line>
                        </svg></div>
                </div>
                <input class="form-field w-input" maxlength="256" name="password" data-name="password" placeholder="Choose a Password" type="password" id="password" required>
                <input class="form-field w-input" maxlength="256" name="confirm-password" data-name="confirm-password" placeholder="Confirm Your Password" type="password" id="confirm-password" required>
            </div>
            <div class="w-layout-grid grid-2---10px">
                <div class="password-verification">
                    <div class="password-verification-option">
                        <div class="password-verification-icon verified w-embed"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
                            <path d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2ZM14,21.5908l-5-5L10.5906,15,14,18.4092,21.41,11l1.5957,1.5859Z"></path>
                            <polygon id="inner-path" fill="none" points="14 21.591 9 16.591 10.591 15 14 18.409 21.41 11 23.005 12.585 14 21.591">
                            </polygon></svg></div>
                    </div>
                    <div>One lowercase character</div>
                </div>
                <div class="password-verification">
                    <div class="password-verification-option">
                        <div class="password-verification-icon w-embed"><svg fill="currentColor" width="32" height="32" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32">
                            <path d="M7.7,4.7a14.7,14.7,0,0,0-3,3.1L6.3,9A13.26,13.26,0,0,1,8.9,6.3Z"></path>
                            <path d="M4.6,12.3l-1.9-.6A12.51,12.51,0,0,0,2,16H4A11.48,11.48,0,0,1,4.6,12.3Z"></path>
                            <path d="M2.7,20.4a14.4,14.4,0,0,0,2,3.9l1.6-1.2a12.89,12.89,0,0,1-1.7-3.3Z"></path>
                            <path d="M7.8,27.3a14.4,14.4,0,0,0,3.9,2l.6-1.9A12.89,12.89,0,0,1,9,25.7Z"></path>
                            <path d="M11.7,2.7l.6,1.9A11.48,11.48,0,0,1,16,4V2A12.51,12.51,0,0,0,11.7,2.7Z"></path>
                            <path d="M24.2,27.3a15.18,15.18,0,0,0,3.1-3.1L25.7,23A11.53,11.53,0,0,1,23,25.7Z"></path>
                            <path d="M27.4,19.7l1.9.6A15.47,15.47,0,0,0,30,16H28A11.48,11.48,0,0,1,27.4,19.7Z"></path>
                            <path d="M29.2,11.6a14.4,14.4,0,0,0-2-3.9L25.6,8.9a12.89,12.89,0,0,1,1.7,3.3Z"></path>
                            <path d="M24.1,4.6a14.4,14.4,0,0,0-3.9-2l-.6,1.9a12.89,12.89,0,0,1,3.3,1.7Z"></path>
                            <path d="M20.3,29.3l-.6-1.9A11.48,11.48,0,0,1,16,28v2A21.42,21.42,0,0,0,20.3,29.3Z"></path>
                            </svg></div>
                    </div>
                    <div>One number</div>
                </div>
                <div class="password-verification">
                    <div class="password-verification-option">
                        <div class="password-verification-icon w-embed"><svg fill="currentColor" width="32" height="32" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32">
                            <path d="M7.7,4.7a14.7,14.7,0,0,0-3,3.1L6.3,9A13.26,13.26,0,0,1,8.9,6.3Z"></path>
                            <path d="M4.6,12.3l-1.9-.6A12.51,12.51,0,0,0,2,16H4A11.48,11.48,0,0,1,4.6,12.3Z"></path>
                            <path d="M2.7,20.4a14.4,14.4,0,0,0,2,3.9l1.6-1.2a12.89,12.89,0,0,1-1.7-3.3Z"></path>
                            <path d="M7.8,27.3a14.4,14.4,0,0,0,3.9,2l.6-1.9A12.89,12.89,0,0,1,9,25.7Z"></path>
                            <path d="M11.7,2.7l.6,1.9A11.48,11.48,0,0,1,16,4V2A12.51,12.51,0,0,0,11.7,2.7Z"></path>
                            <path d="M24.2,27.3a15.18,15.18,0,0,0,3.1-3.1L25.7,23A11.53,11.53,0,0,1,23,25.7Z"></path>
                            <path d="M27.4,19.7l1.9.6A15.47,15.47,0,0,0,30,16H28A11.48,11.48,0,0,1,27.4,19.7Z"></path>
                            <path d="M29.2,11.6a14.4,14.4,0,0,0-2-3.9L25.6,8.9a12.89,12.89,0,0,1,1.7,3.3Z"></path>
                            <path d="M24.1,4.6a14.4,14.4,0,0,0-3.9-2l-.6,1.9a12.89,12.89,0,0,1,3.3,1.7Z"></path>
                            <path d="M20.3,29.3l-.6-1.9A11.48,11.48,0,0,1,16,28v2A21.42,21.42,0,0,0,20.3,29.3Z"></path>
                            </svg></div>
                    </div>
                    <div>One uppercase character</div>
                </div>
                <div class="password-verification">
                    <div class="password-verification-option">
                        <div class="password-verification-icon w-embed"><svg fill="currentColor" width="32" height="32" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32">
                            <path d="M7.7,4.7a14.7,14.7,0,0,0-3,3.1L6.3,9A13.26,13.26,0,0,1,8.9,6.3Z"></path>
                            <path d="M4.6,12.3l-1.9-.6A12.51,12.51,0,0,0,2,16H4A11.48,11.48,0,0,1,4.6,12.3Z"></path>
                            <path d="M2.7,20.4a14.4,14.4,0,0,0,2,3.9l1.6-1.2a12.89,12.89,0,0,1-1.7-3.3Z"></path>
                            <path d="M7.8,27.3a14.4,14.4,0,0,0,3.9,2l.6-1.9A12.89,12.89,0,0,1,9,25.7Z"></path>
                            <path d="M11.7,2.7l.6,1.9A11.48,11.48,0,0,1,16,4V2A12.51,12.51,0,0,0,11.7,2.7Z"></path>
                            <path d="M24.2,27.3a15.18,15.18,0,0,0,3.1-3.1L25.7,23A11.53,11.53,0,0,1,23,25.7Z"></path>
                            <path d="M27.4,19.7l1.9.6A15.47,15.47,0,0,0,30,16H28A11.48,11.48,0,0,1,27.4,19.7Z"></path>
                            <path d="M29.2,11.6a14.4,14.4,0,0,0-2-3.9L25.6,8.9a12.89,12.89,0,0,1,1.7,3.3Z"></path>
                            <path d="M24.1,4.6a14.4,14.4,0,0,0-3.9-2l-.6,1.9a12.89,12.89,0,0,1,3.3,1.7Z"></path>
                            <path d="M20.3,29.3l-.6-1.9A11.48,11.48,0,0,1,16,28v2A21.42,21.42,0,0,0,20.3,29.3Z"></path>
                            </svg></div>
                    </div>
                    <div>One symbol</div>
                </div>
                <div class="password-verification">
                    <div class="password-verification-option">
                        <div class="password-verification-icon w-embed"><svg fill="currentColor" width="32" height="32" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32">
                            <path d="M7.7,4.7a14.7,14.7,0,0,0-3,3.1L6.3,9A13.26,13.26,0,0,1,8.9,6.3Z"></path>
                            <path d="M4.6,12.3l-1.9-.6A12.51,12.51,0,0,0,2,16H4A11.48,11.48,0,0,1,4.6,12.3Z"></path>
                            <path d="M2.7,20.4a14.4,14.4,0,0,0,2,3.9l1.6-1.2a12.89,12.89,0,0,1-1.7-3.3Z"></path>
                            <path d="M7.8,27.3a14.4,14.4,0,0,0,3.9,2l.6-1.9A12.89,12.89,0,0,1,9,25.7Z"></path>
                            <path d="M11.7,2.7l.6,1.9A11.48,11.48,0,0,1,16,4V2A12.51,12.51,0,0,0,11.7,2.7Z"></path>
                            <path d="M24.2,27.3a15.18,15.18,0,0,0,3.1-3.1L25.7,23A11.53,11.53,0,0,1,23,25.7Z"></path>
                            <path d="M27.4,19.7l1.9.6A15.47,15.47,0,0,0,30,16H28A11.48,11.48,0,0,1,27.4,19.7Z"></path>
                            <path d="M29.2,11.6a14.4,14.4,0,0,0-2-3.9L25.6,8.9a12.89,12.89,0,0,1,1.7,3.3Z"></path>
                            <path d="M24.1,4.6a14.4,14.4,0,0,0-3.9-2l-.6,1.9a12.89,12.89,0,0,1,3.3,1.7Z"></path>
                            <path d="M20.3,29.3l-.6-1.9A11.48,11.48,0,0,1,16,28v2A21.42,21.42,0,0,0,20.3,29.3Z"></path>
                            </svg></div>
                    </div>
                    <div>8 characters minimum</div>
                </div>
            </div>
            <div class="form-button-container"><input type="submit" data-wait="Please wait..." class="button full w-button" value="Change Password"></div>
        </form>
    </div>
</div>

<input type="submit" data-wait="Please wait..." class="button full w-button disabled" value="Change Password" disabled>

<input type="submit" data-wait="Please wait..." class="button full w-button" value="Change Password">

<div class="auth-page-wrapper">
    <div class="modal-container">
        <div class="modal-logo-container"><img loading="lazy" src="{app logo}" alt="{app name}"></div>
        <div class="modal-heading-container">
            <h1 class="modal-h1">Your password is changed</h1>
            <div class="modal-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" height="512px" viewbox="0 -960 960 960" width="512px" fill="currentColor">
                <path d="m436.38-358.54 213.77-213.38-31.61-31.39-179.92 179.93-97.16-97.16-33.23 33.23 128.15 128.77ZM480-101.39q-130.38-35.77-215.19-155.19Q180-376 180-521.08v-225.69l300-112.31 300 112.31v225.69q0 145.08-84.81 264.5Q610.38-137.16 480-101.39Zm0-47.38Q591.92-185.23 663.27-289q71.34-103.77 71.34-232.08v-194.07L480-810.85l-254.61 95.7v194.07q0 128.31 71.34 232.08Q368.08-185.23 480-148.77Zm0-330.85Z"></path>
                </svg></div>
            <div>Your password has been successfully changed. You can now log in with your new password.</div>
        </div>
        <div class="form-button-container no-form">
            <a href="#" class="button full w-button">Back to Login</a>
        </div>
    </div>
</div>