.user-filters {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  z-index: 1;
  color: var(--sl-input-placeholder-color);
  --gap: 2rem;
  --width: 33.3%;
  margin: 0 calc(-0.5 * var(--gap));
}
.user-filters sl-select, .user-filters sl-button {
  --sl-input-border-radius-large: 0px;
  --sl-input-spacing-large: 2em;
  --sl-input-height-medium: var(--sl-input-height-large);
  --sl-input-color: var(--dropdown-text-color);
  --sl-input-placeholder-color: var(--dropdown-text-color);
  color: var(--dropdown-text-color);
  flex: 1 1 0;
  margin: calc(var(--gap) / 2);
  min-width: 300px;
}
.user-filters sl-select::part(form-control) {
  padding: 0;
}
@media screen and (max-width: 1160px) {
  .user-filters {
    --width: 50%;
  }
}
@media screen and (max-width: 768px) {
  .user-filters {
    --gap: 1rem;
    --width: 100%;
  }
}
@media screen and (max-width: 490px) {
  .user-filters {
    --gap: 0.5em;
  }
  .user-filters sl-select, .user-filters sl-button {
    min-width: 0px;
    max-width: 100%;
    flex: 1 0 100%;
  }
}