﻿    <style >
    .progress-bar-link {
        display: block;
        cursor: pointer;
        text-decoration: none;
    }

    .progress-bar-link:hover .progress-bar {
        opacity: 0.85;
    }

    .clickable-card {
        cursor: pointer;
        background-color: #e6f4ea; /* Light green */
        transition: background-color 0.2s ease;
    }

        .clickable-card:hover {
            background-color: #d0e8d5; /* Slightly darker green */
        }
    /* Document row styling */
    .list-group-item {
        border-bottom: 2px solid #bbb;
        margin-bottom: 6px;
        padding: 12px;
        cursor: pointer;
    }

        .list-group-item:hover {
            background-color: #f0f0f0;
            transition: background-color 0.2s ease-in-out;
        }

        .list-group-item strong {
            font-size: 1.1rem;
        }

        .list-group-item small {
            font-size: 1rem;
        }
    /* Family card styling */
    .family-card {
        background-color: #e6f4ea; /* soft green */
        border: 1px solid #b2d8b2;
        transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
    }

        .family-card:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            transform: scale(1.01);
        }

        .family-card h4 {
            color: #2f5d3f;
            font-size: 1.4rem;
        }

        .family-card .badge {
            font-size: 1rem;
        }

        .family-card p {
            font-size: 1rem;
        }
    /* Button group spacing */
    .btn-group .btn {
        white-space: nowrap;
    }
    /* Fade animation for messages */
    .fade-message {
        transition: opacity 1s ease-in-out;
    }

        .fade-message.fade {
            opacity: 0;
        }

    .family-name-block {
        margin-bottom: 2rem; /* Same as Bootstrap's mb-4 */
    }

    </style>
