/* Dropdowns */
.dropdown {
    border: 1px solid rgba(0, 122, 255, 0.6);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    min-width: 300px;
  }
  
  .dropdown .dropdown-toggle {
    background-color: transparent !important;
    color: #007bff !important;
    border: none !important;
    padding: 5px 15px;
  }
  
  .dropdown .dropdown-menu {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  }
  
  /* Dropdown containers */
.multiple-dropdowns-container {
    display: flex;
    gap: 50px;
}

/* Radio Items */
.radio-items {
  display: block;
}

/* Sliders */
.chart-styler-slider {
  padding: 0 !important;
  padding-right: 25px !important;
}

/* Date pickers */
.DateInput {
  height: 36px !important; /* Adjust height as needed */
}

/* Set the height of the input field */
.DateInput_input {
  height: 100% !important;
  padding: 10px !important; /* Adjust padding for better alignment */
  font-size: 16px !important; /* Adjust font size */
  box-sizing: border-box;
}

/* TODO: Clean all of this up. */
.themed-dropdown-light .Select-menu-outer {
  min-width: 600px !important;
  max-width: 1000px !important;
  white-space: nowrap;
}

.themed-dropdown-dark .Select-menu-outer {
  min-width: 600px !important;
  max-width: 1000px !important;
  white-space: nowrap;
}

.themed-dropdown-light .Select-control {
  background-color: #fff;
  color: #212529;
}

.themed-dropdown-light .Select-menu-outer {
  background-color: #fff;
  color: #212529;
}

.themed-dropdown-light .Select-value {
  color: #212529;
}

/* Dark mode */
.themed-dropdown-dark .Select-control {
  background-color: #212529;
  color: #f8f9fa;
  border-color: #6b6b6b; 
}

.themed-dropdown-dark .Select-menu-outer {
  background-color: #212529;
  color: #f8f9fa;
}

.themed-dropdown-dark .Select-value {
  color: #f8f9fa;
}

.themed-dropdown-dark .Select-value-label {
  color: #f8f9fa !important;  /* Light text for dark mode */
}

/* Dark mode */
.themed-datepicker-light input {
  background-color: #ffffff;
  color: #343a40;             /* softer dark text, not pure black */
  border: 1px solid rgba(216, 216, 216, 0.1); /* subtle, light gray border */
  border-radius: 4px;
  padding: 6px 10px;
}

/* Dark mode - less harsh white and subdued border */
.themed-datepicker-dark input {
  background-color: #212529;       /* dark but not pitch black */
  padding: 6px 10px;
}

/* Also apply to the internal wrapper */
.themed-datepicker-light .DateInput_input {
  background-color: #ffffff;
  color: #343a40;
}

.themed-datepicker-dark .DateInput_input {
  background-color: #212529;
  color: rgb(230, 230, 230);
}

.themed-datepicker-dark .SingleDatePickerInput__withBorder {
  border: 1px solid rgba(216, 216, 216, 0.1);       /* dark gray border */
}

.themed-datepicker-dark .SingleDatePickerInput__withBorder {
    border: 1px solid #4b4b4b !important;
    border-radius: 0;
    background-color: #343a40;
}


[data-bs-theme="dark"] .themed-dropdown .SingleDatePickerInput__withBorder {
    border: 1px solid #4b4b4b !important;
    border-radius: 0;
    background-color: #343a40;
}


[data-bs-theme="dark"] .themed-dropdown .DateInput_input {
  background-color: #212529;
  color: rgb(230, 230, 230);
}

[data-bs-theme="dark"] .themed-dropdown .input {
  background-color: #212529;       /* dark but not pitch black */
  padding: 6px 10px;
}


[data-bs-theme="dark"] .themed-dropdown .Select-control {
  background-color: #212529;
  color: #f8f9fa;
  border-color: #6b6b6b; 
}

[data-bs-theme="dark"] .themed-dropdown .Select-menu-outer {
  background-color: #212529;
  color: #f8f9fa;
}

[data-bs-theme="dark"] .themed-dropdown .Select-value {
  color: #f8f9fa;
}

[data-bs-theme="dark"] .themed-dropdown .Select-value-label {
  color: #f8f9fa !important;  /* Light text for dark mode */
}

[data-bs-theme="light"] .themed-dropdown .SingleDatePickerInput__withBorder {
    border: 1px solid #4b4b4b !important;
    background-color: #343a40;
}

[data-bs-theme="light"] .themed-dropdown .DateInput_input {
  background-color: #ffffff;
  color: #343a40;
}

[data-bs-theme="light"] .themed-dropdown .input {
  background-color: #ffffff;
  color: #343a40;             /* softer dark text, not pure black */
  border: 1px solid rgba(216, 216, 216, 0.1); /* subtle, light gray border */
  border-radius: 4px;
  padding: 6px 10px;
}