#moduleMetrics.instrument-due-host {
  display: flex !important;
  align-items: center;
  gap: 9px;
  min-height: 58px;
  padding: 8px 16px;
  overflow-x: auto;
  overflow-y: hidden;
  border-top: 1px solid #c7ddea;
  border-bottom: 1px solid #b8d3e3;
  background: linear-gradient(90deg, #f4f9fc 0%, #eaf5f9 52%, #f4f9fc 100%);
  scrollbar-width: thin;
}

.instrument-due-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  min-width: 100%;
  white-space: nowrap;
}

.instrument-due-label {
  color: #527089;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.instrument-due-filter button,
.instrument-due-filter select,
.instrument-due-filter input {
  height: 38px;
  border: 1px solid #c6dbe8;
  border-radius: 9px;
  color: #0d3551;
  background: #f8fbfd;
  font-family: inherit;
  font-size: 0.78rem;
  line-height: 1;
}

.instrument-due-filter button {
  padding: 0 14px;
  cursor: pointer;
  font-weight: 700;
}

.instrument-due-filter button:hover,
.instrument-due-filter button:focus-visible,
.instrument-due-filter button.active {
  border-color: #078da4;
  color: #006d80;
  background: #dff4f7;
  outline: none;
}

.instrument-due-filter select {
  min-width: 88px;
  padding: 0 30px 0 11px;
}

.instrument-due-filter .month-select {
  min-width: 112px;
}

.instrument-due-filter input {
  width: 132px;
  padding: 0 9px;
}

.instrument-due-separator {
  color: #66869c;
  font-weight: 800;
}

@media (max-width: 760px) {
  #moduleMetrics.instrument-due-host {
    padding-inline: 10px;
  }
}