/* Common styles for both main page and map page */
body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    color: #333;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

h1 {
    color: #4285f4;
    margin: 0;
    padding: 25px 0;
}

h2 {
    color: #64a0f7;
    margin: 0;
    padding: 15px 0;
}

img {
    display: block;
    margin: 0 auto;
}

p {
    text-align: left;
    line-height: 1.6;
}

ul {
    list-style-type: ethiopic-halehame-sid-et;
    padding: 50px;
}

li {
    margin-bottom: 10px;
}

a {
    color: #4285f4;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.center {
    text-align: center;
}

/* Responsive design */
@media (max-width: 600px) {
    .container {
        padding: 10px;
    }
}

/* Navigation Bar */
.navbar {
    background-color: #333;
    overflow: hidden;
}

.navbar a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.navbar a:hover {
    background-color: #ddd;
    color: black;
}

/* Styles specific to the map page */

#color-legend {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
}

#safetyColorLegendContainer {
    position: absolute;
    bottom: 50px;
    left: 20px;
}

/* Tooltip styles */
#tooltip,
#tooltip2,
#tooltip3,
#safety-tooltip,
#safety-tooltip2 {
    position: absolute;
    background-color: white;
    border: 1px solid #ddd;
    padding: 10px;
    font-size: 14px;
    pointer-events: none;
    /* z-index and other styles can be added here if needed */
}

.hidden {
    display: none;
}

/* Tiles section */
.tiles {
    display: flex;
    justify-content: space-around;
    margin-top: 30px;
}

.tile {
    text-align: center;
    text-decoration: none;
    color: #333;
    flex: 1;
    max-width: 30%;
    margin: 10px;
    box-sizing: border-box;
}

.tile img {
    display: block;
    margin: 0 auto;
    width: 100%;
}

.tile h2 {
    margin: 10px 0;
}

.tile p {
    font-size: 14px;
}

/* Team member section */
.team-container {
    max-width: 1000px;
    margin: 20px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.team-member {
    width: 45%;
    margin: 20px;
    background-color: #fff;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.team-member img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
}

/* Styles specific to html */
.trailinfo {
    max-width: 500px; /* Adjust the maximum width of the container */
    margin: 10px; /* Adjust margins (top right bottom left) */
    /*position: absolute; /* Position the container fixed */
    top: 220px; /* Adjust the top position */
    right: 20px; /* Adjust the right position */
}

.main-container {
    display: flex;
}

#map {
    flex: 1;
}

.row-flex-container {
    display: flex;
    padding: 20px; 
}

.flex-item-left {
    flex: 65%;
}

.flex-item-right {
    flex: 35%;
}

.trail-image,
.community-image,
.commuter-image {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.main-info {
    display: flex;
    /*height: 50px; Set the desired height for the container */
}

.centered-section {
    text-align: center;
}

.left-info,
.right-info {
    flex: 1; /* Make the left/right div take up 50% of the container */
    background-color: #f0f0f0; /* Set background color */
    padding: 20px; /* Add some padding for spacing */
    color: red;
}

/* Styles for the second map's color legend */
#safetyColorLegendContainer2 {
    position: absolute;
    bottom: 20px; /* Adjust the bottom position */
    left: 50%; /* Center the legend horizontally */
    transform: translateX(-50%);
}

.data-source {
    text-align: center; /* Center the text for consistency */
    margin-top: 10px; /* Adjust the top margin as needed */
    color: #777; /* Set the color for the text */
}

/* Styles for charts */
#safety-chart1,
#safety-chart2 {
    box-sizing: border-box;
    width: 45%; /* Set the width of each chart */
    float: left; /* Float the charts to make them side by side */
}

.chart-container-left,
.chart-container-right {
    background-color: #fff; /* Set a background color for the chart containers */
    border-radius: 10px; /* Add rounded corners for a cleaner look */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add a subtle box shadow for depth */
    margin: 20px; /* Adjust the margin for spacing */
    padding: 20px; /* Add padding for content spacing */
    flex: 35%; /* Adjust flex value for left/right container */
}

#safety-chart1 h2,
#safety-chart2 h2 {
    color: #4285f4;
    margin: 0;
    padding: 15px 0;
    text-align: left; 
    font-size: 20px;
}

#safety-chart1 svg,
#safety-chart2 svg {
    width: 100%; /* Set the width of the chart within its container */
    border: 1px solid #ddd; /* Add a border for separation */
    border-radius: 8px; /* Add rounded corners for a cleaner look */
    overflow: hidden; /* Hide any overflow content */
}

.bar-group text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#safety-chart1 img,
#safety-chart2 img {
    width: 80%; /* Adjust the width of the image */
}