/* General styling */
body {
    font-family: 'Roboto', sans-serif; /* Change font for better readability */
    margin: 40px; /* Add spacing around elements */
  }
  
  h2 {
    text-align: center; /* Center the heading */
    margin-bottom: 20px; /* Add spacing below the heading */
  }

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    padding: 10px;
}
.logo {
    height: 40px; /* Adjust based on your logo's size */
}
.nav-links {
    display: flex;
    list-style-type: none;
}
.nav-links li {
    margin-right: 20px;
}
.nav-links a {
    text-decoration: none;
    color: #000;
}
  
  .aspect-container {
    display: flex;
    margin-top: 40px;
    align-items: center;
    width: 80%;
    margin-left:10%;
    margin-right:10%;
  }
  
  .aspect-label {
    flex-basis: 20%; /* Set the base width to 20% of the container */
  }
  
  .aspect-button-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-grow:1;
  }
  
  .aspect1-button, .aspect2-button {
    background-color: grey;
    color: black;
    border: none;
    border-radius: 5px; /* Round only the right corners */
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s;
    width: 10%;
    height: 70px;
  }
  
  .aspect1-button.selected, .aspect2-button.selected {
    background-color: lightblue;
  }
  

  .search-container {
      display: flex; /* Use flexbox to align the search bar and button */
      align-items: center;
      margin-left: 15%; /* Start 15% from the left margin */
      width: 50%; /* Set the width to end at 50% from the right margin */
      position: relative; /* Set position to relative for absolute positioning of children */
  }
  
  #search-p, #search-b {
      width: 40%; /* Set the search bar to take 75% of the container's width */
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px; /* Round only the left corners */
      font-size: 16px;
      box-sizing: border-box;
  }
  
  #matches-p, #matches-b {
      width: calc(50% * 0.40 - 25px); /* Match the width of the search bar */
      box-sizing: border-box;
      display: none;
      border: 1px solid #ccc;
      border-top: none;
      background-color: white; /* Ensure the dropdown has a background */
      position: absolute; /* Position the dropdown menu below the search bar */
      left: calc(15% + 32px); /* Align with the start of the search bar content, accounting for border */
      z-index: 1000; /* Ensure the dropdown is above other elements */
  }
  
  #selected-pID, #selected-bID {
      padding-left: 10px;
  }
  
#year-dropdown-p, #year-dropdown-b {
      margin-left: 10px; /* Add some space between the dropdown and the preceding element */
      padding: 10px; /* Match the padding of the search bar */
      border: 1px solid #ccc; /* Match the border of the search bar */
      border-radius: 5px; /* Round the corners */
      font-size: 16px; /* Match the font size of the search bar */
      box-sizing: border-box; /* Include padding and border in the element's total height */
      height: calc(100% - 2px); /* Adjust the height to match the search bar, accounting for the border */
  }
  
#select-button-p, #select-button-b {
      width: 20%;
      margin-left: 10px; /* Small buffer between the search bar and the button */
      padding: 10px 15px;
      border: 1px solid #ccc;
      border-radius: 5px; /* Round only the right corners */
      font-size: 16px;
      cursor: pointer;
      background-color: #f8f8f8; /* Optional: Match the background color with the search bar */
  }
  
 #select-button-p:disabled, #select-button-b:disabled {
      background-color: #ccc; /* Gray background when disabled */
      cursor: not-allowed; /* Indicate disabled state */
  }
  
 #select-button-p:not(:disabled), #select-button-b:not(:disabled) {
      background-color: #add8e6; /* Light blue background when enabled */
  }

  .submit-button-container {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 40px;
}

#submit-button {
    padding: 15px 30px; /* Larger size */
    border-radius: 10px; /* Rounded corners */
    font-size: 20px; /* Larger font */
    border: none; /* Remove default border */
    cursor: pointer; /* Change cursor to pointer */
    background-color: #28a745; /* Green background when enabled */
    color: black; /* White text color */
    transition: background-color 0.3s; /* Smooth transition for background color */
}

#submit-button:disabled {
    background-color: #ccc; /* Grey background when disabled */
    cursor: not-allowed; /* Change cursor to not-allowed */
}


#plot-image {
    max-width: 80%; /* Set the maximum width to 80% of the page width */
    min-width: 20%; /* Set the minimum width to 20% of the page width */
    height: auto; /* Maintain the aspect ratio */
    display: block; /* Display the image as a block element */
    margin: 0 auto; /* Center the image */
}


#plot-container {
    display: none;
    text-align: center;
    width: 80%; /* Set the maximum width to 80% of the page width */
    min-width: 20%; /* Set the minimum width to 20% of the page width */
    margin: 0 auto; /* Center the container */
}



  
  #matches-p a, #matches-b a {
      display: block; /* Each link on its own line */
      padding: 5px;
      text-decoration: none;
      color: black;
      border-bottom: 1px solid #ddd; /* Optional: adds a divider between names */
  }
  
  #matches-p a:hover, #matches-b a:hover {
      background-color: #f0f0f0;
  }
  
  /* Style to show the dropdown */
  #matches-p.show, #matches-b.show {
      display: block;
      max-height: 130px; /* Adjust based on the number of items and their size */
      overflow-y: auto; /* Allows scrolling if more than 5 items */
  }