html {
  font-size: 10px; 
  font-family: "Montserrat", sans-serif; 
  background-color: #FFFFFF;
}

body {
    margin: 0;
    padding: 0;
}

header {
    background-color: #091F2F;
    color: white;
    display: flex;
    align-items: center;
    padding: 5px;
}

header h1 {
    margin: 0 2rem;
    font-size: 2rem; /* Adjust size to your preference */
    font-weight: normal;
    text-align: center;
    justify-content: center;
}

header img {
    margin: 0 2rem;
    align-items: center;
}

.navigation {
    background-color: #FFFFFF;
    color: #091F2F;
    text-align: center;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    font-size: 2rem;
}

#navigation-bar {
  background-color: #e7e8eb;
  margin: 2rem 0;
  padding: 0.5px;
  font-weight: bold;
}

.logo {
    height: 50px;
}

nav {
    text-align: center;
    margin: 1rem 0;
    text-align: center;
    display: flex;
    align-items: center; 
    justify-content: center;
}
nav a {
    margin: 0 1rem;
    text-decoration: none;
    color: #091F2F;
    transition: color 0.3s ease;
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    font-size: 20px;
}

nav a:hover {
    color: #D22D23;
}

nav a.active {
    color: #D22D23;
    font-weight: bold; /* Optional: Makes the active link stand out */
}

.diversion-section a {
    text-decoration: none;
    color: #D22D23;
    transition: color 0.3s ease;
    display: inline-block;
    border-radius: 5px;
    font-size: 20px;
    text-decoration: underline;
}

.diversion-section a:hover {
    color: #091F2F;
}

.diversion-section a.active {
    color: #091F2F;
    font-weight: bold; /* Optional: Makes the active link stand out */
}

.graph {
    border: 2px solid #ccc;
    max-width: 80%;
    padding: 10px;
    text-align: center;
    background-color: #f9f9f9;
    border-radius: 5px;
}


/* For the Towards zero waste box*/
.info-box {
    background-color: #091F2F; 
    color: #ffffff; 
    padding: 2rem; /* Space inside the box */
    border-radius: 15px; /* Rounded corners */
    width: 70%;
    margin: 2rem auto; /* Center the box on the page */
}

/* Title styling */
.info-box h2 {
    color: #D22D23; 
    font-size: 3rem;
    font-weight: bold;
    text-align: center; /* Center text inside the box */
}

/* Paragraph styling */
.info-box ul {
    font-size: 2rem;
    margin: 0.5rem 0;
    text-align: left; 
}


/* Highlighted percentage */
.info-box .highlight {
    color: #D22D23; 
    font-weight: bold;
}

.waste-percapita {
    background-color: #ffffff; 
    color: #ffffff; 
    padding: 2rem; /* Space inside the box */
    border-radius: 15px; /* Rounded corners */
    border-color: #D22D23;
    width: 60%;
    margin: 2rem auto; /* Center the box on the page */
}


.district-box h3 {
    color: #091F2F; 
    font-size: 16px;
    text-align: center; /* Center text inside the box */
}

/*For the waste and district box*/

.seasonal-box img{
  width: 100%; /* Make the image fill the width of the box */
  height: auto; /* Maintain the aspect ratio of the image */
}

/* Title styling */
.waste-box h2 {
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 1rem;
    position: relative;
    color: #000000;
}

/* Percentage styling */
#percentage {
    font-weight: bold;
    margin-bottom: 1rem;
    position: relative;
    color: #FB4D42;
}

/* Waste categories container */
.waste-categories {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1rem 0;
}

/* Waste Diversion container */
.waste-diversion {
    display: flex;
    border-radius: 15px; /* Rounded corners */
    justify-content: center;
    align-items: center;
    margin: 1rem 0;
    background-color: #FB4D42;
    font-weight: bold;
    color:white;
}

/* Dropbox */
.dropdown-wrapper {
  display: flex; 
  align-items: center; /* Align dropdowns and labels vertically */
}

.dropdown-container {
  display: flex;
  flex-direction: row; 
  align-items: center; /* Align dropdowns and labels vertically */
  margin: 1rem 1rem;
  padding: 1rem;
  border-radius: 15px; /* Rounded corners */
  border: 2px #FB4D42;
}

.dropdown-container img {
    align-items: center;
    margin-bottom: 0.5rem; /* Align dropdowns and labels vertically */
}

.dropdown {
    margin: 1rem 2rem; /
}


#year1 #year2 {
  display: flex; 
  margin: 1 1rem;
  align-items: center; /* Align dropdowns and labels vertically */
  text-align: center;
  margin-bottom: 1.5rem;
}

#month1 #month2 {
  display: flex; 
  margin: 1 1rem;
  align-items: center; /* Align dropdowns and labels vertically */
  text-align: center;
}

select {
  width: 80px;
  padding: 5px;
  font-size: 10px;
}

#double-arrow {
    max-width:50px;
    align-items: center;
}

/* Each category link */
.category {
    text-decoration: none;
    text-align: center;
    margin: 0 1rem;
    color: #000000;
    transition: color 0.3s ease;
}

.category h4 {
    font-size: 1.5rem;
    margin-bottom: 0.1px;
    margin: 1px;
}

.category img {
    width: 50px; 
    height: 50px;
    margin-bottom: 0.5rem;
}


/* Additional info text */
.info-text {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: #000000;
}

/* Link inside info text */
.info-text .link {
    color: #D22D23;
    text-decoration: underline;
    font-weight: bold;
}
.info-text .link:hover {
    color: #D22D23;
}

/* General layout for the dashboard */
.dashboard {
    display: flex; /* Flexbox to arrange graphs and boxes side by side */
    gap: 10px;

}

/* Left side: Graphs */
#graph-diversion {
    display: grid;
    grid-template-columns: repeat(2, 50%); /* Two columns */
    display: flex;
    justify-content: center;
    align-items: center;
}

.grid {
    display: grid; /* Use CSS Grid for layout */
    grid-template-columns: repeat(2, 1fr); /* Two columns of equal width */
    gap: 2rem; /* Space between boxes */
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto; /* Center the dashboard horizontally */
}

.graph-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.waste-box {
    background-color: #ffffff;
    color: #000000; 
    text-align: center;
    padding: 2rem;
    border-radius: 15px; /* Rounded corners */
    margin: 2rem auto;
    display: flex;
    justify-content: center;
        border: 2px solid #0e1123;

}

.diversion-page .waste-box{
    width: 1200px;
}

#tracker-name {
    font-size: 3rem;
    text-align: center;
    font-weight: bold;
}

.diversion-box {
    display: flex;
    gap: 30px;
    margin: 3rem;
    align-items: center;
    text-align: center;
}

.diversion-container{
    max-width: 1500px;
    border-radius: 15px; /* Rounded corners */
    width: 100%;
    text-align: center;
    margin: 1rem auto; /* Center the box on the page */
    align-items: center;
}

.plus-symbol {
    font-size: 2.5rem; /* Adjust the size as needed */
    font-weight: bold; /* Make it bold if desired */
    margin: 0 2.5px; /* Add spacing around it */
    vertical-align: middle; /* Align it with the images */
    color: #000;

} /* Set the color if needed */
.grey-box {
    color: #0e1123;
    width: 685px;
    background-color:#e7e8eb;
    display: flex;
    text-align: center;
    align-items: center;
    padding: 1rem;
    border-radius: 15px; /* Rounded corners */
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 0.5rem;
}


.formula .grey-box{
    background-color: #e9d4d3;
    padding: 3rem;
}


.formula h3 {
    color: #0e1123;
    font-size: 2rem;
    margin: 0.2rem 0;
    text-align: center;
    font-weight:normal;
    margin-bottom: 20px;
}

.diversion-section h3 {
    color: #0e1123;
    font-size: 2rem;
    margin: 0.2rem 0;
    text-align: center;
    font-weight:normal;
    margin-bottom: 20px;
}

#residential{
    background-color:white;
    color: #D22D23;
    width: 70%;
    height: 20px;
}

#commercial{
    background-color:#e7e8eb;
    color: #0e1123;
    width: 70%;
    height: 20px;
}

.formula .formula-label {
    background-color:#D22D23;
}

.fraction {
    width: 80%; /* Set default width relative to its parent */
    max-width: 150px; /* Limit maximum width */
    display: flex;
    margin: 0.2rem auto;
    flex-direction: column; /* Stacks numerator and denominator vertically */
    align-items: center; /* Centers numerator and denominator */
    justify-content: center;
}

.numerator,
.denominator {
    display: flex;
    align-items: center; /* Aligns items vertically */
    justify-content: center; /* Centers items horizontally */
    gap: 5px; /* Adds spacing between items */
    margin: 1rem;
}

.numerator img{
    width: 29px;
    height: 29px;
}

.denominator img{
    width: 30px;
    height: 30px;
}

.divider-line {
    width: 250px; /* Full width of the fraction */
    height: 2px; /* Thickness of the line */
    background-color: black; /* Line color */
    margin: 5px 0; /* Spacing above and below the line */
}


canvas { /* for the graph */
    max-width: 800px;
    margin: 0 auto;
}

#percentage-final {
    font-weight: bold;
    margin-bottom: 1rem;
   font-size: 1.5rem;
    position: relative;
    color: #FB4D42;
}
/* Styling for goal-html */

.goal-box {
    max-width: 1500px;
    background-color: #091F2F; 
    color: #ffffff; 
    padding: 1rem; /* Space inside the box */
    border-radius: 15px; /* Rounded corners */
    width: 100%;
    text-align: center;
    margin: 1rem auto; /* Center the box on the page */
}

.goal-intro {
    color: #D22D23;
    text-align: center;
    line-height: 1.5;
    margin-bottom: 15px;
}

.goal-intro h2 {
    color: #D22D23; 
    font-size: 5rem;
    margin-bottom: 2rem;
    font-weight: bold;
    text-align: center; /* Center text inside the box */
}

.goal-intro h3 {
    color: white;
    font-size: 2rem;
    margin: 0.2rem 0;
    text-align: center;
    font-weight:normal;
    margin-bottom: 20px;
}

.goal-intro h4 {
    font-size: 2.5rem;
    margin: 0.25rem 0;
    text-align: center;
    font-weight: bold;
}

.goal-intro p{
    color: white;
    font-size: 1.25rem;
    margin: 0.5rem 0;
    text-align: center;
}

.notes {
    text-align: center;
    background-color: #e9d4d3;
    margin: 3rem 10rem;
    padding: 2rem;
}

.notes p {
    color: #091F2F;
    font-size: 2rem;
    margin: 0.5rem 0;
}

.notes #highlight {
    font-weight: bold;}

.ST-goals {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3rem 0;
}

.ST-goals .category h2 {
    font-size: 8rem;
    margin-bottom: 0.1px;
    margin: 1px;
    font-family: 'Alfa Slab One', cursive;
}

.ST-goals .category p {
    font-size: 2rem;
    color: white; /* Keeps the original text color */
    pointer-events: auto; /* Ensures interactivity is not disabled */
}

#highlight-color {
    color: #D22D23;
    font-weight: bold;
}

#highlight-bold {
    font-weight: bold;
}

.ST-goals .divider-line {
    width: 2px; /* Full width of the fraction */
    height: 160px; /* Thickness of the line */
    background-color: white; /* Line color */
    margin: 10px 10px; /* Spacing above and below the line */
}

/*monthly diversion*/
button {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    font-size: 12px;
    color: white;
    background-color: #D22D23;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
}

button:hover {
    background-color: #004494;
}

/* SVG and Chart */
#districts {
  border: 1px solid #ddd;
  background-color: white;
}

#districts {
  fill: none;
  stroke-width: 3px;
}


#districts path,
#districts line {
  fill: none;
  shape-rendering: crispEdges;
}

#districts text {
  font-size: 12px;
}

/* Tooltip */
.tooltip {
  position: absolute;
  background-color: #fff;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  pointer-events: none;
  visibility: hidden;
}

.tooltip::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: #ccc transparent transparent transparent;
}

/*For the waste and district box*/
.district-box {
    background-color: #ffffff; 
    text-align: center;
    padding: 2rem;
    border-radius: 15px; /* Rounded corners */
    width: 70%;
    margin: 2rem auto;
    border: 2px solid #091f2f;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.district-box h2 {
  color: #091f2f;
  justify-content: left;
  text-align: left;
  font-size: 18px;
}

.district-box p {
  color: #091f2f;
  justify-content: left;
  text-align: left;
  font-size: 12px;
}

.info-text {
  text-align: left;
}

.chart-container {
  align-items: center; /* Align items vertically */
  margin-top: 1rem; /* Add spacing above */
}

#districts {
  flex: 2; /* Allow the chart to take up most of the space */
  max-width: 60%; /* Limit its width */
}

.chart-text {
  flex: 1; /* Allow the text to take up remaining space */
  padding-left: 2rem; /* Add spacing between the chart and text */
  font-size: 12px;
  text-align: left;
  border: #091f2f;
  padding: 1rem;
}

.increase {
    color: red; /* Red for increased */
    font-weight: bold;
}

.decrease {
    color: green; /* Green for decreased */
    font-weight: bold;
}

.chart-info {
  flex: 1; /* Allow the titles and text to take up remaining space */
  font-size: 14px;
  text-align: left;
  background-color:  #091F2F;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1rem;
  width: 100%;
}

.chart-info h3 {
  font-size: 16px;
  color: #FB4D42;
  font-weight: bold;
  text-align: center;
}

.chart-info h4 {
  font-size: 14px;
  color: #FFFFFF;
  font-weight: bold;
  margin-top: 1rem;
}

.chart-info p {
  font-size: 12px;
  color: #FFFFFF;
}

.bar-chart-container {
    margin-top: 2rem;
    width: 100 %;
    text-align: center;
}

#barChart {
    margin-top: 1rem;
    background-color: transparent;
    border: transparent;
    align-items: center;
    justify-content: center;
}

.chart-container {
    align-items: center;
    margin-bottom: 2rem; /* Add space below chart-info */
}

/* Bar Styling */
.bar {
  transition: all 0.3s ease;
}

/* Add hover effect to bars for interactivity */
.bar:hover {
  opacity: 0.7;
}

/* Styling for the tabs */
.tabs {
  display: flex;
  justify-content: center;
  margin: 20px 0;
  background-color: #f1f1f1;
  border-radius: 5px;
  overflow: hidden;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 15px 0;
  cursor: pointer;
  background-color: #ddd;
  color: black;
  font-weight: bold;
  border-right: 1px solid #ccc;
  transition: background-color 0.3s;
}

.tab:hover {
  background-color: #ccc;
}

.tab.active {
  background-color: #4CAF50;
  color: white;
}

.tab:last-child {
  border-right: none;
}

/* Hide all graphs by default */
.graph.tracker {
  text-align: center;
  margin-top: 20px;
}

/* Show the active graph */
.graph.active {
  display: block;
}

iframe {
  border: none;
  width: 100px;
  height: 600px;
}

/* Styling for Trash, Recycling, and Compost together layout */
.row {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}

.center {
  text-align: center;
}

img {
  max-width: 600px;
  border-radius: 10px;
  margin-bottom: 20px;
}
/*styling for diversion page - 3rd graph*/

.grey-box-monthly {
    color: #0e1123;
    width: 1000px;
    background-color:#e7e8eb;
    display: flex;
    text-align: center;
    align-items: center;
    padding: 1rem;
    border-radius: 15px; /* Rounded corners */
    margin: 0.5rem auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.formula .grey-box{
    background-color: #e9d4d3;
}

.formula-label {
    width: 80%; /* Limit maximum width */
    background-color:#0e1123;
    display: flex;
    text-align: center;
    border-radius: 15px; /* Rounded corners */
    margin: 0.25rem auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    font-weight: bold;
    text-align: center;
}

#wasteChart {
    width: 1000px;
    margin: 0 auto;
    border-radius: 10px;
}
/* Targeting the #map box specifically */
#map {
    display: flex;
    flex-direction: column;  /* Stack the title at the top */
    align-items: center;     /* Center the title horizontally */
    gap: 20px;  /* Space between the title and the content */
    margin-top: 20px;
}

#map h3 {
    text-align: center;  /* Title is centered */
    margin: 0;  /* Remove any default margin for h3 */
}

/* Create a container to hold the graph and map side by side */
.content-container {
    display: flex;  /* Flex to keep the graph and map side by side */
    gap: 20px;  /* Space between the graph and map */
    justify-content: space-between;  /* Ensure they are aligned side by side */
    width: 100%;  /* Ensure the container takes up full width */
    max-width: 1200px;  /* Optional: Restrict the width for large screens */
}

/* Style for the iframe (Datawrapper chart) */
.content-container iframe {
    width: 100%;  /* Take up full width of the container */
    height: 483px; /* Fixed height for consistency */
    border: none; /* Remove default iframe border */
}

/* Style for the SVG image to be placed to the right */
.map-image {
    width: 50%;  /* Take up 48% of the container's width */
    height: auto; /* Maintain aspect ratio */
}

    /* Page Ribbon (Header) */
    header {
      display: flex;
      align-items: center;
      background-color: #0A1F33;
      color: white;
      padding: 15px 20px;
      font-family: 'Montserrat', sans-serif;
    }

    .logo {
      height: 50px;
      margin-right: 15px;
    }

    h1 {
      font-size: 24px;
      margin: 0;
    }

    /* Graph Selection Cards */
    .graph-cards {
      display: flex;
      justify-content: center;
      gap: 15px;
      margin: 20px 0;
    }

    .card {
      padding: 10px;
      background: #f4f4f4;
      border-radius: 6px;
      text-align: center;
      cursor: pointer;
      transition: 0.3s;
      font-size: 16px;
      font-weight: bold;
      width: 120px;
      box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    }

    .card:hover {
      background: #ddd;
    }

    /* Graph Container */
    .graph-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 5px auto;
      width: 100%;
      padding: 0;
      background: none;
      box-shadow: none;
    }

    /* Hide all graphs by default */
    .graph {
      display: none;
      text-align: center;
      width: 100%;
    }

    /* Show the active graph */
    .graph.active {
      display: block;
    }

    /* Graph Box */
    .graph-box {
      width: 100%;
      max-width: 1200px;
      padding: 0;
      background: none;
      border: none;
      box-shadow: none;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Ensure iframe fits properly */
    .graph-box iframe {
      display: block;
      width: 100%;
      height: 450px; /* Ensuring consistent height */
    }

    /* Fix Extra Space Below the First Graph */
    .graph-box.first-graph iframe {
      height: 380px; /* Reduce the height slightly to fix the extra space */
    }


/*additional styling for Seasonal Data*/
.seasonal-box {
    max-width: 1500px;
    color: #ffffff; 
    padding: 1rem; /* Space inside the box */
    border-radius: 15px; /* Rounded corners */
    width: 100%;
    text-align: center;
    margin: 1rem auto;
}

#bold2 {
  font-color: #D22D23;
  font-weight: bold;
}