body {
    margin: 0;
    font-family: Arial, sans-serif;
  }

  .header {
    background-color: #4B0082; /* Indigo color to match the logo */
    color: white;
    padding: 10px 20px;
    display: flex;
    align-items: center;
  }

  .logo {
    background-image: url('logo.png'); /* Replace with the path to your logo */
    background-size: contain;
    background-repeat: no-repeat;
    width: 300px; /* You can adjust this depending on the size of your logo */
    height: 100px; /* You can adjust this depending on the size of your logo */
    text-indent: -9999px; /* Hide the text */
  }


  a {
    color: #007bff; /* Adjust to match your theme color */
    text-decoration: none;
    transition: color 0.3s ease;
  }
  
  a:hover {
    color: #0056b3; /* Darker shade for hover effect */
  }  


  .nav {
    list-style-type: none;
    margin: 0;
    display: flex;  
    font-size: 20px; /* Adjust the font size as needed */
    padding: 10px 15px; /* Adjust the top/bottom and left/right padding as needed */ /* Can just change the padding to 0px */
  }

  .nav li {
    padding: 0 20px;
  }

  .nav li a {
    text-decoration: none;
    color: white;
    transition: color 0.3s;
  }

  .nav li a:hover {
    color: #DDA0DD; /* Plum color to complement the logo */
  }

  .chart-container {
    display: flex;
    justify-content: center; /* Center charts horizontally */
    align-items: flex-start; /* Align charts to the top */
    height: auto; /* Ensure container height is dynamic */
  }


  .container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    margin: 10px;
  }

  .column_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 10px;
  }


  canvas {
    flex: 1; /* Allow canvas to grow */
    margin: 10px; /* Spacing between canvases */
    max-width: 50vw; /* Maximum width for canvas */
    max-height: 50vh; /* Maximum height for canvas */
  }

  @media (max-width: 50%) {
    canvas {
      width: 100%; /* Full width on smaller screens */
      max-width: 400px; /* Maximum width */
      height: auto; /* Maintain aspect ratio */
    }
  }

  td, th {
    padding: 10px;
    margin: 5px;
    text-align: center;
}

.button-style {
  background-color: #5c4b8b; /* Matching the deep purple color */
  color: white; /* White text to stand out on the purple background */
  padding: 10px 20px; /* Sizeable padding for a larger button */
  border: none; /* No border for a modern look */
  border-radius: 5px; /* Slightly rounded corners */
  font-weight: bold; /* Bold text */
  text-transform: uppercase; /* Uppercase text for a button */
  cursor: pointer; /* Pointer cursor on hover */
  transition: background-color 0.3s ease; /* Smooth background color transition on hover */
  text-decoration: none; /* No underline for text */
  font-family: 'Arial', sans-serif; /* A sans-serif font similar to what appears in the image */
}

.button-style:hover {
  background-color: #6d5a96; /* Lighter purple on hover for some interaction */
}

.plants_table {
  border-collapse: collapse;
  width: 100%;
  margin: 15px 0;
}

.centre {
  width: auto;
  text-align: center;
  padding: 10px;
}

.input-style {
  padding: 10px;
  margin: 5px;
  border: 1px solid #ccc; /* Example border style, adjust as needed */
  border-radius: 5px;
}

.forms-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.form-wrapper {
  flex-basis: 48%; /* Adjust the percentage as necessary to fit your design */
  margin: 1%;
}

@media (max-width: 768px) { /* Adjust the breakpoint as needed */
  .form-wrapper {
    flex-basis: 100%;
    margin: 0;
  }
}

.tab {
  tab-size: 4;
}

.chart-buttons {
  display: flex;
  justify-content: space-between;
  max-width: 50%;
}

/* Style for the sidebar */
.left-sidebar {
  width: 15%; /* Adjust the width as needed */
  top: 0; /* Position from the top */
  left: 0; /* Position from the left */
}

/* Style for the content area */
.content {
  margin-left: 15%; /* Adjust to accommodate the sidebar width */
  margin-right: 15%; /* Adjust to accommodate the sidebar width */
  margin: 0px;
  width: 70%;
}

/* Style for the sidebar */
.right-sidebar {
  width: 15%; /* Adjust the width as needed */
  top: 0; /* Position from the top */
  left: 85%; /* Position from the right */
}