#bill,
#bill > .grid,
#bill .card,
#bill .body,
#bill .monthlyFilterGrid,
#bill .monthlyFilterGrid > .field {
  min-width: 0;
  max-width: 100%;
}

#bill > .grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

#bill .monthlyFilterGrid {
  width: 100%;
}

#bill .monthlyFilterGrid > .field input,
#bill .monthlyFilterGrid > .field select,
#bill .monthlyFilterGrid .filePicker,
#bill .monthlyFilterGrid > button {
  min-width: 0;
  max-width: 100%;
}

#bill .monthlyFilterGrid .filePicker {
  width: 100%;
}

#bill .monthlyFilterGrid .fileBtn {
  flex: 0 0 auto;
  max-width: 100%;
}

#bill .monthlyFilterGrid .fileName {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 1281px) and (max-width: 1650px) {
  #bill .monthlyFilterGrid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  #bill .monthlyFilterGrid > button.btn {
    grid-row: 3;
    width: 100%;
  }

  #bill .monthlyFilterGrid > button.btn:not([id]) {
    grid-column: 1 / 2 !important;
  }

  #bill .monthlyFilterGrid > #monthlyPdfBtn {
    grid-column: 2 / 3 !important;
  }

  #bill .monthlyFilterGrid > #monthlyFactoryBtn {
    grid-column: 3 / 4 !important;
  }

  #bill .monthlyFilterGrid > #monthlyExportBtn {
    grid-column: 4 / 5 !important;
  }

  #bill .monthlyFilterGrid > #monthlyTrackingBtn {
    grid-column: 5 / 6 !important;
  }
}

@media (min-width: 1651px) {
  #bill .monthlyFilterGrid {
    grid-template-columns:
      minmax(0, 1.4fr)
      minmax(0, .7fr)
      minmax(0, .9fr)
      minmax(0, .9fr)
      minmax(0, .7fr)
      minmax(0, 1.2fr)
      minmax(0, 1.2fr) !important;
  }
}