.chaticonimage {
    padding: 15px;
    width: 36px; /* Set desired width */
    height: 36px;
    background-image: url('/images/icons/chaticonupdated.png?v=xxxxx2'); /*Initial image */
    background-size: cover; /*Adjust as needed */
    transition: background-image 0.3s ease-in-out; /*Smooth transition */
    border: none;
    background-position: center;
}

    .chaticonimage:hover {
        /*background-image: url('/images/icons/chaticonhover.png?v=xxxxx');*/ /* Image on hover */
        background-image: url('/images/icons/chaticonupdated.png?333hdsjdhsjd'); /* Image on hover */
        border: none;
    }

.chaticonimagenewchat {
    padding: 15px;
    width: 36px; /* Set desired width */
    height: 36px;
    /*background-image: url('/images/icons/chaticon-ADDNEW.png?v=xxxxx');*/ /*Initial image */
    background-image: url('/images/icons/chaticon-ADDNEWupdated.png?333333'); /*Initial image */
    background-size: cover; /*Adjust as needed */
    transition: background-image 0.3s ease-in-out; /*Smooth transition */
    border: none;
    background-position: center;
}

    .chaticonimagenewchat:hover {
        /*background-image: url('/images/icons/chaticonhover-ADDNEW.png?v=xxxxx');*/ /* Image on hover */
        background-image: url('/images/icons/chaticon-ADDNEWupdated.png?333333'); /* Image on hover */
        border: none;
    }


/* Define the blinking animation */
@keyframes blink-animation {
    0% {
        border-color: #33489c; /* Start color */
    }

    50% {
        border-color: #03f0fc; /* Middle color, can be transparent or another color */
    }

    100% {
        border-color: #48a870; /* End color (same as start for smooth loop) */
    }
}

/* Apply the animation to the textarea class */
.blinking-border {
    border: 3px solid red; /* Initial border style */
    animation: blink-animation 1s steps(1, end) infinite; /* 1s duration, infinite loop, step-end for instant color change */
    padding: 10px; /* Optional: adds space inside the textarea */
}