<div class="aleart aleart-primary-light">
                                    <div class="flex-center gap-2.5">
                                    A solid default Primary color aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart aleart-secondary-light">
                                    <div class="flex-center gap-2.5">
                                    A solid default Secondary color aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart aleart-danger-light">
                                    <div class="flex-center gap-2.5">
                                    A solid default Danger color aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart aleart-warning-light">
                                    <div class="flex-center gap-2.5">
                                    A solid default Warning color aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart aleart-success-light">
                                    <div class="flex-center gap-2.5">
                                    A solid default Success color aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart aleart-info-light">
                                    <div class="flex-center gap-2.5">
                                    A solid default Info color aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                            
                        

                            
                                <div class="aleart aleart-primary-light rounded-full">
                                    <div class="flex-center gap-2.5">
                                        A solid rounded default Primary color aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart aleart-secondary-light rounded-full">
                                    <div class="flex-center gap-2.5">
                                        A solid rounded default Secondary color aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart aleart-danger-light rounded-full">
                                    <div class="flex-center gap-2.5">
                                        A solid rounded default Danger color aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart aleart-warning-light rounded-full">
                                    <div class="flex-center gap-2.5">
                                        A solid rounded default Warning color aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart aleart-success-light rounded-full">
                                    <div class="flex-center gap-2.5">
                                        A solid rounded default Success color aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart aleart-info-light rounded-full">
                                    <div class="flex-center gap-2.5">
                                        A solid rounded default Info color aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                            
                        

                            
                                <div class="aleart a-outline aleart-primary-outline">
                                    <div class="flex-center gap-2.5">
                                        A outline Primary color aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart a-outline aleart-secondary-outline">
                                    <div class="flex-center gap-2.5">
                                        A outline Secondary color aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart a-outline aleart-danger-outline">
                                    <div class="flex-center gap-2.5">
                                        A outline Danger color aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart a-outline aleart-warning-outline">
                                    <div class="flex-center gap-2.5">
                                        A outline Warning color aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart a-outline aleart-success-outline">
                                    <div class="flex-center gap-2.5">
                                        A outline Sucess color aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart a-outline aleart-info-outline">
                                    <div class="flex-center gap-2.5">
                                        A outline Info color aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                            
                        

                            
                                <div class="aleart a-outline aleart-primary-outline rounded-full">
                                    <div class="flex-center gap-2.5">
                                        A outline rounded Primary color aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart a-outline aleart-secondary-outline rounded-full">
                                    <div class="flex-center gap-2.5">
                                        A outline rounded Secondary color aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart a-outline aleart-danger-outline rounded-full">
                                    <div class="flex-center gap-2.5">
                                        A outline rounded Danger color aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart a-outline aleart-warning-outline rounded-full">
                                    <div class="flex-center gap-2.5">
                                        A outline rounded Warning color aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart a-outline aleart-success-outline rounded-full">
                                    <div class="flex-center gap-2.5">
                                        A outline rounded Success color aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart a-outline aleart-info-outline rounded-full">
                                    <div class="flex-center gap-2.5">
                                        A outline rounded Inofo color aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                            
                        

                            
                                <div class="aleart aleart-danger-light">
                                    <div class="flex-center gap-2.5">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
                                        </svg>                                  
                                        A default Danger color with SVG icon aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart aleart-warning-light">
                                    <div class="flex-center gap-2.5">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" />
                                        </svg>                                  
                                        A default Warning color with SVG icon aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart aleart-success-light">
                                    <div class="flex-center gap-2.5">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                                        </svg>                                  
                                        A default Success color with SVG icon aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart aleart-info-light">
                                    <div class="flex-center gap-2.5">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
                                        </svg>                                  
                                        A default Info color with SVG icon aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                            
                        

                            
                                <div class="aleart aleart-danger-light rounded-full">
                                    <div class="flex-center gap-2.5">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
                                        </svg>                                  
                                        A default Rounded Danger color with SVG icon aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart aleart-warning-light rounded-full">
                                    <div class="flex-center gap-2.5">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" />
                                        </svg>                                  
                                        A default Rounded Warning color with SVG icon aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart aleart-success-light rounded-full">
                                    <div class="flex-center gap-2.5">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                                        </svg>                                  
                                        A default Rounded Success color with SVG icon aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart aleart-info-light rounded-full">
                                    <div class="flex-center gap-2.5">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
                                        </svg>                                  
                                        A default Rounded Info color with SVG icon aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                            
                        

                            
                                <div class="aleart a-outline aleart-danger-outline">
                                    <div class="flex-center gap-2.5">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
                                        </svg>                                  
                                        A outline Danger color with SVG icon aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart a-outline aleart-warning-outline">
                                    <div class="flex-center gap-2.5">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" />
                                        </svg>                                  
                                        A outline Warning color with SVG icon aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart a-outline aleart-success-outline">
                                    <div class="flex-center gap-2.5">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                                        </svg>                                  
                                        A outline Success color with SVG icon aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart a-outline aleart-info-outline">
                                    <div class="flex-center gap-2.5">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
                                        </svg>                                  
                                        A outline Info color with SVG icon aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                            
                        

                            
                                <div class="aleart a-outline aleart-danger-outline rounded-full">
                                    <div class="flex-center gap-2.5">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
                                        </svg>                                  
                                        A outline rounded Danger color with SVG icon aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart a-outline aleart-warning-outline rounded-full">
                                    <div class="flex-center gap-2.5">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" />
                                        </svg>                                  
                                        A outline rounded Warning color with SVG icon aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart a-outline aleart-success-outline rounded-full">
                                    <div class="flex-center gap-2.5">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                                        </svg>                                  
                                        A outline rounded Success color with SVG icon aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart a-outline aleart-info-outline rounded-full">
                                    <div class="flex-center gap-2.5">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
                                        </svg>                                  
                                        A outline rounded Info color with SVG icon aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                            
                        

                            
                                <div class="aleart aleart-danger-light aleart-image">
                                    <div class="flex-center gap-2.5">
                                        <img src="assets/images/profile/profile.png" alt="user" class="size-8 rounded-50">                               
                                        A default Danger color with Image aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart aleart-warning-light aleart-image">
                                    <div class="flex-center gap-2.5">
                                        <img src="assets/images/profile/profile.png" alt="user" class="size-8 rounded-50">                                  
                                        A default Warning color with Image aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart aleart-success-light aleart-image">
                                    <div class="flex-center gap-2.5">
                                        <img src="assets/images/profile/profile.png" alt="user" class="size-8 rounded-50">                                 
                                        A default Success color with Image aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart aleart-info-light aleart-image">
                                    <div class="flex-center gap-2.5">
                                        <img src="assets/images/profile/profile.png" alt="user" class="size-8 rounded-50">                                  
                                        A default Info color with Image aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                            
                        

                            
                                <div class="aleart aleart-danger-light aleart-image rounded-full">
                                    <div class="flex-center gap-2.5">
                                        <img src="assets/images/profile/profile.png" alt="user" class="size-8 rounded-50">                               
                                        A default rounded Danger color with Image aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart aleart-warning-light aleart-image rounded-full">
                                    <div class="flex-center gap-2.5">
                                        <img src="assets/images/profile/profile.png" alt="user" class="size-8 rounded-50">                                  
                                        A default rounded Warning color with Image aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart aleart-success-light aleart-image rounded-full">
                                    <div class="flex-center gap-2.5">
                                        <img src="assets/images/profile/profile.png" alt="user" class="size-8 rounded-50">                                 
                                        A default rounded Success color with Image aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart aleart-info-light aleart-image rounded-full">
                                    <div class="flex-center gap-2.5">
                                        <img src="assets/images/profile/profile.png" alt="user" class="size-8 rounded-50">                                  
                                        A default rounded Info color with Image aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                            
                        

                            
                                <div class="aleart a-outline aleart-danger-outline aleart-image">
                                    <div class="flex-center gap-2.5">
                                        <img src="assets/images/profile/profile.png" alt="user" class="size-8 rounded-50">                               
                                        A outline Danger color with Image aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart a-outline aleart-warning-outline aleart-image">
                                    <div class="flex-center gap-2.5">
                                        <img src="assets/images/profile/profile.png" alt="user" class="size-8 rounded-50">                                  
                                        A outline Warning color with Image aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart a-outline aleart-success-outline aleart-image">
                                    <div class="flex-center gap-2.5">
                                        <img src="assets/images/profile/profile.png" alt="user" class="size-8 rounded-50">                                 
                                        A outline Success color with Image aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart a-outline aleart-info-outline aleart-image">
                                    <div class="flex-center gap-2.5">
                                        <img src="assets/images/profile/profile.png" alt="user" class="size-8 rounded-50">                                  
                                        A outline Info color with Image aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                            
                        

                            
                                <div class="aleart a-outline aleart-danger-outline aleart-image rounded-full">
                                    <div class="flex-center gap-2.5">
                                        <img src="assets/images/profile/profile.png" alt="user" class="size-8 rounded-50">                               
                                        A outline rounded Danger color with Image aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart a-outline aleart-warning-outline aleart-image rounded-full">
                                    <div class="flex-center gap-2.5">
                                        <img src="assets/images/profile/profile.png" alt="user" class="size-8 rounded-50">                                  
                                        A outline rounded Warning color with Image aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart a-outline aleart-success-outline aleart-image rounded-full">
                                    <div class="flex-center gap-2.5">
                                        <img src="assets/images/profile/profile.png" alt="user" class="size-8 rounded-50">                                 
                                        A outline rounded Success color with Image aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart a-outline aleart-info-outline aleart-image rounded-full">
                                    <div class="flex-center gap-2.5">
                                        <img src="assets/images/profile/profile.png" alt="user" class="size-8 rounded-50">                                  
                                        A outline rounded Info color with Image aleart !
                                    </div>
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                            
                        

                            
                                <div class="aleart aleart-primary-solid">
                                    A solid Primary color with Image aleart !
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart aleart-secondary-solid">
                                    A solid Secondary color with Image aleart !
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart aleart-danger-solid">
                                    A solid Danger color with Image aleart !
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart aleart-warning-solid">
                                    A solid Warning color with Image aleart !
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart aleart-success-solid">
                                    A solid Success color with Image aleart !
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart aleart-info-solid">
                                    A solid Info color with Image aleart !
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                            
                        

                            
                                <div class="aleart aleart-primary-solid rounded-full">
                                    A solid rounded Primary color with Image aleart !
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart aleart-secondary-solid rounded-full">
                                    A solid rounded Secondary with Image aleart !
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart aleart-danger-solid rounded-full">
                                    A solid rounded Danger color with Image aleart !
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart aleart-warning-solid rounded-full">
                                    A solid rounded Warning color with Image aleart !
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart aleart-success-solid rounded-full">
                                    A solid rounded Success color with Image aleart !
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>
                                <div class="aleart aleart-info-solid rounded-full">
                                    A solid rounded Info color with Image aleart !
                                    <button class="close-button">
                                        <i class="ri-close-line text-inherit"></i>
                                    </button>
                                </div>