/* view-registered-volunteers.css */

/* Volunteer information section */
.volunteer-info {
    padding: 20px;
    text-align: center;
}

.volunteer-details p {
    font-size: 1.2em;
    margin: 5px 0;
}

/* Table styling */
#volunteersTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 30px;
}

#volunteersTable th, #volunteersTable td {
    padding: 8px;
    text-align: left;
    border: 1px solid #ddd;
}

#volunteersTable th {
    background-color: #063572 !important; /* Charcoal background */
    color: #e9e9e9 !important; /* Light grey text for headers */
}

#volunteersTable tbody tr:nth-child(odd) {
    background-color: #f1f1f1 !important; /* Slightly darker grey for odd rows */
}

#volunteersTable tbody tr:nth-child(even) {
    background-color: #f9f9f9 !important; /* Light grey background for even rows */
}

#volunteersTable tbody tr:hover {
    background-color: #e0e0e0 !important; /* Highlight row on hover */
}

/* Volunteer details section styling */
.volunteer-info .volunteer-details {
    display: flex;
    gap: 15px; /* 15px padding between each item */
    justify-content: center; /* Center the items horizontally */
    flex-wrap: wrap; /* Ensure wrapping on small screens */
}

.volunteer-info .volunteer-details p strong {
    margin-right: 5px; /* Space between label and value */
}

/* Center the table title */
.table-container h2 {
    text-align: center;
    color: #063572; /* Navy color for the title */
}

/* Center the volunteer section title */
.volunteer-info h3 {
    color: #063572; /* Navy color for titles */
}

/* Volunteer badge preview */
.volunteer-badge-preview {
    max-width: 200px;
    margin-top: 20px;
}

#chartContainer {
    background-color: #e9e9e9; /* Light grey background */
    border: 2px solid #063572; /* Navy border */
    border-radius: 8px; /* Rounded corners */
    padding: 20px; /* Adds padding around the chart */
    margin-top: 30px; /* Space above the chart container */
}