/* Ensure the table adjusts properly */
.table-responsive {
    overflow-y: auto;
    overflow-x: hidden;
}

/* Style the main catch image */
.main-catch-image {
    width: 150px;
    height: auto;
}

@media (max-width: 600px) {
    .main-catch-image {
        width: 100%; /* Ensure full width on mobile */
        height: auto;
    }
}

/* Adjust the sizes of avatars and flags */
.small-avatar, .small-flag {
    width: 65px; /* Set width */
    height: auto; /* Maintain aspect ratio */
    margin-bottom: 5px; /* Space below images */
}

.small-flag {
    display: inline-block; /* Align flags */
    margin-right: 5px; /* Space between flags */
}

/* Ensure extra details are not the main focus */
.extra-details .small-avatar, .extra-details .small-flag {
    opacity: 0.8; /* Slightly dim the avatars and flags */
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .table-responsive {
        overflow-x: auto; /* Enable horizontal scrolling for smaller screens */
    }

    .extra-details {
        text-align: left; /* Ensure text is aligned to the left on smaller screens */
    }

    .main-catch-image {
        width: 100%; /* Ensure the main image is full width */
        height: auto; /* Maintain aspect ratio */
    }
}
/* CSS for Angler's Name Cell */
.angler-name-cell {
    text-align: center;
    font-weight: bold;
    background-color: #f8f9fa;
    padding: 10px;
}

.angler-link {
    text-decoration: none;
    color: #007bff;
}

.angler-link:hover {
    text-decoration: underline;
    color: #0056b3;
}

/* CSS for SweetAlert Avatar and Flags */
.sweetalert-avatar {
    width: 65px;
    height: auto;
    display: block;
    margin: 0 auto 10px;
}

.sweetalert-flag {
    width: 65px;
    height: auto;
    display: block;
    margin: 5px auto;
}