/* Google Button Style */
.google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #4285F4; /* Google Blue */
    color: white;
    border-radius: 4px;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none;
}

.google-btn:hover {
    background-color: #357ae8; /* Darker Google Blue */
}

.google-btn img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.profile-pic {
    width: 150px; /* Fixed width */
    height: 150px; /* Fixed height */
    border-radius: 50%; /* Circular shape */
    object-fit: cover; /* Cover the element box */
    border: 3px solid #fff; /* White border */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
}

.nav-link.dropdown-toggle::after {
    content: none; /* Removes the generated content */
}

.navbar a {
    text-decoration: none;
!important;
}

.observation-card .card-title {
    font-size: 1.25rem; /* Slightly larger font for the title */
    font-weight: bold;
    color: #333; /* Darker color for emphasis */
}

.observed-person .profile-pic {
    width: 30px; /* Small size for the profile picture */
    height: 30px;
    border-radius: 50%; /* Circular profile picture */
    object-fit: cover;
}

.observation-date {
    font-size: 0.7rem; /* Slightly smaller font size */
    color: #555; /* Subtle text color */
}
.observation-period {
    font-size: 0.8rem; /* Slightly smaller font size */
    color: var(--bs-gray-100); /* Subtle text color */
}

.observation-date i {
    color: #333; /* Icon color */
}

.observation-card {
    max-width: 400px;
    max-height: 150px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    padding: 5px;
    font-size: 0.6rem;
}

.tooltip-inner {
            background-color: #333 !important; /* Darker background color */
            color: #fff !important; /* White text color */
            padding: 10px 15px !important; /* More padding for readability */
            font-size: 14px !important; /* Increase font size */
            line-height: 1.5 !important; /* Better line spacing */
            border-radius: 8px !important; /* Rounded corners */
            box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2) !important; /* Subtle shadow for depth */
        }

        /* Custom arrow styling */
        .tooltip-arrow {
            border-top-color: #333 !important; /* Match arrow color to background */
        }

        /* Optional: Add animation */
        .tooltip.show {
            animation: fadeIn 0.3s ease-in-out !important; /* Smooth fade-in effect */
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }