#cpspp-avatar .cpspp-image::before {
    content: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="white" class="w-5 h-5"><path fill-rule="evenodd" d="M1 5.25A2.25 2.25 0 0 1 3.25 3h13.5A2.25 2.25 0 0 1 19 5.25v9.5A2.25 2.25 0 0 1 16.75 17H3.25A2.25 2.25 0 0 1 1 14.75v-9.5Zm1.5 5.81v3.69c0 .414.336.75.75.75h13.5a.75.75 0 0 0 .75-.75v-2.69l-2.22-2.219a.75.75 0 0 0-1.06 0l-1.91 1.909.47.47a.75.75 0 1 1-1.06 1.06L6.53 8.091a.75.75 0 0 0-1.06 0l-2.97 2.97ZM12 7a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z" clip-rule="evenodd" /></svg> ');
    display: block;
    position: absolute;
    top: 50%;
    left: 45%;
    transform: translate(-35%, -50%);
    z-index: 2;
    pointer-events: none;
    width: 20px;
    height: 20px;
    opacity: 0;
    visibility: hidden; /* Start as not visible */
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; /* Transition for both opacity and visibility */
}

#cpspp-avatar .cpspp-image:hover::before {
    opacity: 1;
    visibility: visible; /* Make visible on hover */
}

/* Removes other themes added avatars from my-account page */
.woocommerce-account.woocommerce-page .my-account .account-user,
.woocommerce-account.woocommerce-page .my-account .base-account-avatar {
    display: none;
    height: 0;
    opacity: 0;
}