/* General Styling - updated 2*/


.custom-form-width, .custom-alert-width {
    max-width: 100%; /* Full width on smaller screens */
    margin: auto;
}

@media (max-width: 768px) {
    .custom-form-width, .custom-alert-width {
        padding: 10px; /* Less padding on smaller screens */
    }
}



/* Containers for Maps, Plots, and Tables */
.plot-container, .points-details-table {
    width: 100%; /* Full width */
    height: 30%;
    margin: 10px 0;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* General Map Container Adjustments for Larger Screens */
.map-container {
    padding: 5px 0px 5px 0px !important;
    margin-bottom: 5px;
    width: 100%;
    height: 450px; /* Adjustable height for larger screens */
    overflow: hidden;
    border: none; /* Remove border */
}

/* Mobile-specific Map Container Adjustments */
@media (max-width: 768px) {
    .map-container {
        height: 210px; /* Adjust height for mobile screens */
    }
}



.no-bullets {
    list-style-type: none; /* No bullets for lists */
}

/* Results Table Alignment */
.results-table th, .results-table td {
    text-align: left;
    vertical-align: middle;
}

/* Navbar Dropdown Styling */
.navbar-nav .dropdown-menu {
    background-color: #ffffff; /* White background */
    color: #000000; /* Black text */
}

.navbar-nav .dropdown-menu a.dropdown-item {
    color: #000000; /* Black text */
}

.navbar-nav .dropdown-menu a.dropdown-item:hover {
    background-color: #f0f0f0; /* Light gray on hover */
    color: #000000; /* Keep text black */
}

/* List Group Items */
.list-group-item {
    text-align: left;
    vertical-align: middle;
}

/* Card Styling - Commenting this out to let Bootstrap control layout */
/*
.card {
    border-radius: 0 !important; 
    width: 100% !important; 
}
*/

/* Keeping these styles for visual enhancements */
.card {
    border-radius: 0px; /* Clean border radius */
    /*  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); Subtle shadow */
}

/* Container Adjustments - Commenting out to let Bootstrap control container width */
/*
.container {
    max-width: 100%;
    padding: 0 5px;
}

@media (min-width: 768px) {
    .container {
        max-width: 750px; 
    }
}

@media (min-width: 1200px) {

    .container {
        max-width: 750px; 
    }
}
*/

/* Card Body & Header Padding */
.card-body, .card-header {
    padding: 0 5px !important; /* Remove excess padding */
}

/* Checkbox Styling */
.custom-checkbox .form-check-input[disabled] {
    opacity: 1 !important;
}

.custom-checkbox .form-check-label {
    color: #212529 !important; /* Default text color */
    font-weight: normal !important;
    opacity: 1 !important;
}



/* Route List Adjustments - Commenting out to let Bootstrap handle spacing */
/*
.route-list .col-md-8 {
    margin-bottom: 20px; 
}
*/

.btn {
    margin-bottom: 10px;
    margin-top: 10px; /* If you want spacing above as well */
}



.profile-photo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
    object-fit: cover; /* Maintain aspect ratio */
    object-position: center; /* Center the image within the container */
}
.leader-jersey {
    width: 40px;
    height: 40px;
    margin-right: 5px;
    vertical-align: middle;
    object-fit: cover; /* Maintain aspect ratio */
    object-position: center; /* Center the image within the container */
}
.jersey-column {
    width: 80px;
    text-align: right;
}
.time-column {
    text-align: right;
}
.results-table th, .results-table td {
    vertical-align: middle;
}