/* Overall styles */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  background-color: #f5f5f5;
}

h1 {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
  color: #000000;
}

/* Form layout adjustments */
form {
  display: flex;
  flex-wrap: wrap; /* Allows form items to wrap onto the next line as needed */
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fdba23;
}

/* Flex container for dropdowns */
.data-select, .option-select {
  flex: 1; /* Allows dropdowns to grow and share the line equally */
  min-width: 120px; /* Minimum width to prevent dropdowns from becoming too small */
  margin-right: 10px; /* Spacing between the dropdowns */
  display: flex; /* Use flex to align items properly */
  align-items: center; /* Center items vertically */
}

/* Ensure the last dropdown doesn't have right margin to align properly */
.data-select:last-child {
  margin-right: 0;
}

/* Adjustments for dropdown elements */
form select {
  height: 40px; /* Set a specific height for the dropdowns */
  padding: 5px 10px; /* Adjust padding to ensure content is vertically centered */
  font-size: 16px; /* Increase font size for better readability */
  border: 1px solid #ccc; /* Consistent border styling */
  border-radius: 5px; /* Rounded corners for aesthetics */
  background-color: #fff; /* Ensure a consistent background */
  cursor: pointer; /* Change cursor to pointer to indicate it's a dropdown */
  width: 100%; /* Makes select elements fill their container */
}

/* Full-width Search Input */
.symbol-search {
  flex-basis: 100%; /* Forces the search section to take full width of the form */
  display: flex;
  flex-direction: column; /* Aligns the label and input in a column */
  margin-top: 0px; /* Adds some space above the search input */
}

.symbol-search label,
.symbol-search input {
  width: auto; /* Ensures label and input do not exceed their content width */
}

/* Adjustments for form elements */
form label, form input[type="text"], form button[type="submit"] {
  padding: 5px;
  margin-bottom:5px; /* Uniform margin for form elements */
  border: 0px solid #fdba23;
  border-radius: 5px;
  font-weight: bold;
}
form input[type="text"]
{
  font-size: 16px;
  font-weight: lighter;
  height: 40px;
}
/* Style adjustments for submit button */
form button[type="submit"] {
  width: auto; /* Adjust as needed */
  background-color: #4CAF50; /* Green */
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 0; /* Aligns with form elements */
}

/* Table styles */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  border: 1px solid #3d8ab9;
}

th, td {
  padding: 8px;
  text-align: left;
  border-right: 1px solid #ddd;
  font-size: 16px;
}

th {
  background-color: #fdba23;
  font-weight: bold;
}

/* Scrollable Table Container */
.scrollable-table {
  border-top: 1px solid #ddd;
  overflow-x: auto;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .data-select, .option-select, .symbol-search {
    flex-basis: 100%; /* Makes dropdowns and search input take full width on smaller screens */
    margin-right: 0; /* Removes right margin on smaller screens */
    margin-bottom: 10px; /* Adds some space below each dropdown/input */
  }

  form {
    flex-direction: column; /* Stacks form items vertically on smaller screens */
  }
}

#option {
  width: 50%;
}
#dataset {
  width: 50%;
}
#search {
  width: auto;
  height: 35px;
}

table td {
  padding: 8px;
}