.user-card {
    margin-bottom: 40px;
    border-radius: 20px;
    min-height: 420px;
}

.user-info {
    text-align: center;
    border-bottom: 1px solid #999;
    padding-bottom: 20px;
}




.user-card:hover, .display-list .row:hover {
    cursor: pointer;
    background-color: #f2f6fe;
    opacity: 0.9;
    /* Display the back side of the card on hover */
}

.userStatus {
    width: 40%;
    text-align: center;
    color: #999;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px 50px 50px 5px;
    left: 60%;
    position: absolute;
    z-index: 99;
    top: -30px
}

/* Triangle on top */
.userStatus::before {
    content: '';
    position: absolute;
    top: 0px;
    left: calc(50% - 10px);
    border-width: 10px 10px 0;
    border-style: solid;
    border-color: #999 transparent transparent;

}

.remove-button {
    position: absolute;
    z-index: 99;
    left: 10px;
}

/* Pulse animation class */
.pulse-animation {
    animation: pulseAnimation 1s ease-out 4;
}

/* Pulse animation on hover */
.remove-button:hover, .pulse-image:hover {
    animation: pulseAnimation 1s infinite;
}




/* Define the pulse animation */
@keyframes pulseAnimation {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}