Untitled

/* Container for the entire filter section */
.logs-filters-container {
  padding: 1.5em 2em;
  background-color: white;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px;
  display: flex;
  align-items: center;
  gap: 1.5em;
  flex-wrap: wrap;
}

/* Filter labels and headers */
.logs-filters-header {
  font-weight: bold;
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 1em;
}

.filters {
  display: flex;
  gap: 1em;
  align-items: center;
  flex-wrap: wrap;
}

/* Dropdown and input fields */
.filter-box,
.react-select-container,
.search-bar-filters,
.styled-date-picker {
  background-color: #f5f5f5;
  border-radius: 6px;
  border: 1px solid #ddd;
  padding: 0.6em 1em;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px;
  font-size: 1rem;
  width: 220px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Ensure the select dropdowns are consistent */
.react-select-container {
  width: auto; /* Let width adjust based on content */
}

.react-select__control {
  border: none;
  background-color: transparent;
}

.react-select__single-value {
  display: flex;
  align-items: center;
}

.react-select__menu {
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px;
  border: 1px solid #ddd;
}

/* Style the tagging system (for User selection) */
.selected-users {
  display: flex;
  gap: 0.5em;
}

.user-tag {
  display: inline-flex;
  align-items: center;
  background-color: #e0e0e0;
  border-radius: 4px;
  padding: 0.5em 0.8em;
  font-size: 0.9rem;
}

.remove-user {
  margin-left: 5px;
  cursor: pointer;
  color: #888;
}

.remove-user:hover {
  color: #555;
}

/* Styling for timestamp fields and labels */
.datetime-pickers {
  display: flex;
  gap: 1em;
}

.date-picker-container label {
  font-weight: bold;
  color: #333;
  margin-bottom: 0.5em;
}

.styled-date-picker {
  width: 220px;
  padding: 0.6em 1em;
  background-color: #f5f5f5;
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px;
  border: 1px solid #ddd;
  font-size: 1rem;
}

.filter-box svg, .styled-date-picker svg {
  width: 1em;
  height: 1em;
  fill: #888;
  margin-left: 0.5em;
}

/* Buttons inside timestamp filter */
.quick-access-buttons button {
  padding: 0.5em 1em;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px;
}

.quick-access-buttons button:hover {
  background-color: #0056b3;
}

.quick-access-buttons button:active {
  background-color: #004094;
}

/* Focus state for input fields */
.search-bar-filters:focus, 
.filter-box input:focus, 
.styled-date-picker:focus {
  outline: 0.2em solid #f5b62e;
}








<div className="logs-filters-container">
  <div className="logs-filters-header">
    <h2>Filters</h2>
    <span>Select filters to search for specific data</span>
  </div>

  <div className="filters">
    <div className="filter-box">
      <Select 
        options={actionOptions} 
        className="react-select-container" 
        placeholder="Action" 
      />
    </div>

    <div className="filter-box">
      <Select 
        options={timestampOptions} 
        className="react-select-container" 
        placeholder="Timestamp" 
      />
    </div>

    <div className="filter-box">
      <Select 
        options={ipAddressOptions} 
        className="react-select-container" 
        placeholder="IP Address" 
      />
    </div>

    <div className="datetime-pickers">
      <div className="date-picker-container">
        <label>Start Timestamp:</label>
        <DatePicker 
          selected={startDate}
          onChange={handleStartDateChange}
          placeholderText="Select Start Date"
          className="styled-date-picker"
        />
      </div>

      <div className="date-picker-container">
        <label>End Timestamp:</label>
        <DatePicker 
          selected={endDate}
          onChange={handleEndDateChange}
          placeholderText="Select End Date"
          className="styled-date-picker"
        />
      </div>
    </div>
  </div>

  <div className="filter-box">
    <input type="text" placeholder="Enter Document ID" className="search-bar-filters" />
  </div>

  <div className="selected-users">
    <div className="user-tag">@ivan74</div>
    <div className="user-tag">@mariaOCR</div>
  </div>
</div>


.logs-filters-container {
  padding: 1.5em 2em;
  background-color: white;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px;
  display: flex;
  align-items: flex-start; /* Adjusted to start alignment */
  gap: 1.5em;
  flex-wrap: wrap;
  flex-direction: column; /* Ensure elements are stacked vertically */
}

/* Filter labels and headers */
.logs-filters-header {
  font-weight: bold;
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 1em;
}

.filters {
  display: flex;
  gap: 1em;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: row; /* This keeps the filters on the same line */
}

/* Timestamp fields and labels */
.datetime-pickers {
  display: flex;
  gap: 1em;
  flex-wrap: nowrap; /* Prevents the timestamp pickers from wrapping */
  margin-top: 1em; /* Adds some spacing above the timestamp section */
}

/* Other styles remain unchanged */