.card-hover:hover {
    background-color: #bad8f5;  /* This is a light grey color */
 }
 .icon-inline {
    display: inline-block;
    vertical-align: middle;
   margin-right: 10px;
 }

 .card-text.my-0 {
    margin-bottom: 0;
}

.card-text.mt-1 {
    margin-top: 1.25rem; /* This is equivalent to Bootstrap's mt-1 */
}

@keyframes fadeInOut-success {
    0%, 100% {
        box-shadow: 0 0 3px 0 rgba(0, 255, 0, 0);
    }
    50% {
        box-shadow: 0 0 3px 2px rgba(0, 128, 0, 0.5);
    }
}
@keyframes fadeInOut-fail {
    0%, 100% {
        box-shadow: 0 0 3px 0 rgba(255, 0, 0, 0);
    }
    50% {
        box-shadow: 0 0 3px 2px rgba(255, 0, 0, 0.5);
    }
}

.status-circle-success {
    height: 10px;
    width: 10px;
    border-radius: 50%; 
    display: inline-block;
    margin-left: 5px;
    background-color: green;
    animation: fadeInOut-success 2s infinite;
}

.status-circle-fail {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-left: 5px;
    background-color: red;
    animation: fadeInOut-fail 2s infinite;
}

.home-card-hover {
    transition: box-shadow 0.3s, transform 0.3s;
}
.home-card-hover:hover {
    box-shadow: 0 8px 32px rgba(102,126,234,0.18), 0 1.5px 8px rgba(0,0,0,0.08);
    transform: translateY(-4px) scale(1.03);
    border: 1px solid #e9ecef;
    z-index: 2;
}