.date-range {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-left: 2px;
}

.date-range label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #718078;
  font-size: 11px;
  white-space: nowrap;
}

.filter-context .date-range span {
  margin-left: 0;
  color: #8a9790;
}

.date-range input {
  width: 132px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fbfcf9;
  color: #516159;
  padding: 0 8px;
  font: inherit;
  font-size: 11px;
}

.date-range button {
  height: 34px;
  border: 0;
  border-radius: 6px;
  background: var(--deep);
  color: #fff;
  padding: 0 11px;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.date-range button:hover {
  background: var(--green);
}

.date-range .date-reset {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}

.date-range-error {
  width: 100%;
  margin: -5px 0 7px;
  color: #a5603d;
  font-size: 11px;
}

.date-range-error:empty {
  display: none;
}

@media (max-width: 860px) {
  .date-range {
    width: 100%;
    flex-wrap: wrap;
    padding-left: 0;
  }

  .date-range input {
    width: min(132px, 38vw);
  }
}

@media (max-width: 480px) {
  .date-range label {
    width: 100%;
    justify-content: space-between;
  }

  .date-range input {
    width: calc(100% - 42px);
  }
}