j-input:not([style*="display: none"]) {
  align-items: baseline;
  display: flex !important;
  justify-content: space-between;
  padding-bottom: .2rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: .5rem;
}

j-input, j-input::before {
  background-color: var(--j-color-background);
  color: var(--j-color-foreground);
}

j-input[name="purchasePrice"], j-input[name="purchasePrice"]::before {
  background-color: var(--jr-list-item-headline-container-color, var(--jdPrimaryGreen));
  color: var(--jr-list-item-headline-label-text-color, var(--j-color-foreground));
}

j-input {
  border-bottom-color: var(--jr-divider-color);
  border-bottom-style: var(--jr-divider-style);
  border-bottom-width: var(--jr-divider-thickness);
}

j-input[name="monthlyGrossSalary"]::before,
j-input[name="taxClass"]::before,
j-input[name="purchasePrice"]::before {
  font-weight: 700;
}

.generic-input {
  width: 100%;
}

@media screen and (min-width: 650px) {
  j-input > .generic-input {
    min-width: 20rem;
    width: 20rem;
  }
  
  j-input::before {
    content: attr(description);
  }
}