#timecard { font: 14px/1.45 Arial, sans-serif; color: #172337; }
#timecard .timecard-field { width: 100%; table-layout: fixed; border-collapse: collapse; margin-bottom: 12px; }
#timecard .timecard-field tr { display: grid; grid-template-columns: var(--timecard-label-width, 270px) minmax(0, 1fr); gap: 8px; align-items: center; font-size: 14px; }
#timecard .timecard-field td:first-child { width: auto; padding: 0; vertical-align: middle; }
#timecard .timecard-field td:last-child { width: auto; min-width: 0; padding: 0; }
#timecard .timecard-field input[type=text] { width: 100% !important; max-width: none; height: 30px; margin: 0; }
#timecard .timecard-field label { display: block; white-space: nowrap; font: 500 14px/1.45 Arial, sans-serif; }
#timecard .timecard-field u { text-decoration: none; }
#timecard input[type=text], #timecard select { box-sizing: border-box; min-height: 30px; padding: 5px 8px; border: 1px solid #b7c0d0; border-radius: 6px; background: #fff; color: #172337; font: 14px Arial, sans-serif; }
#timecard input:focus, #timecard select:focus { outline: 2px solid #7095ee; outline-offset: 1px; }
#timecard input[type=checkbox], #timecard input[type=radio] { vertical-align: middle; margin: 0 5px 0 0; }
#timecard .timecard-certification { display: block; margin: 14px 0 8px; }
#timecard .timecard-signature-label { display: block; margin-top: 8px; font-weight: 600; }
#timecard .td_header, #timecard .td_left_header { background: #edf1f7; color: #253650; font-weight: 600; padding: 10px 6px; }
#timecard .td_row, #timecard .td_row_header, #timecard .td_row_header_nobg { border-color: #d4dce7; padding: 8px 6px; }
#timecard .td_row_header u { text-decoration: none; font-weight: 600; }
#timecard .td_row_header span { display: inline-block; margin-top: 4px; color: #596779; }
#timecard .td_row select { width: 100%; }
#timecard .timecard-signature input[type=text] { max-width: none !important; }
@media (max-width: 600px) {
  #timecard .timecard-field tr { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  #timecard .timecard-field td { display: block; width: 100% !important; }
  #timecard .timecard-field td:first-child { padding: 0 0 6px; }
}
#timecard .timecard-required { color: #b42332; }
#timecard .timecard-required-note { margin: 0 0 14px; color: #596779; font-size: 12px; font-weight: 600; }
#timecard .timecard-signature-help { padding-top: 4px; padding-bottom: 0; }
#timecard .timecard-signature-cell { padding-top: 0; }
#timecard .timecard-signature-cell .timecard-certification { margin-top: 4px; margin-bottom: 6px; }
#timecard .timecard-company-notice { padding-bottom: 16px; }
#timecard .timecard-signature-help-wrap { padding-top: 6px; padding-bottom: 0; }
#timecard .timecard-signature-help-table { border-collapse: collapse; border-spacing: 0; margin: 0; }
#timecard .timecard-signature-help { padding: 0; line-height: 1.4; }
#timecard .timecard-week-row { width: 100%; border-collapse: collapse; }
#timecard .timecard-week-row td { width: auto; padding: 4px 8px 4px 0; white-space: nowrap; vertical-align: middle; }
#timecard .timecard-week-row td:last-child { text-align: left; padding-right: 0; }
#timecard .timecard-week-row label { white-space: nowrap; }
#timecard .timecard-week-row small { font-size: 11px; }
@media (max-width: 600px) { #timecard .timecard-week-row tr { display: flex; flex-wrap: wrap; gap: 6px; } }
@media (min-width: 901px) {
  #timecard { display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); gap: 24px; align-items: start; }
  #timecard .left_part, #timecard .right_part { float: none !important; width: auto !important; min-width: 0; margin: 0 !important; }
  #timecard > :not(.left_part):not(.right_part) { grid-column: 1 / -1; }
}
#timecard .left_part > table, #timecard .right_part > table { width: 100%; table-layout: fixed; }
#timecard .timecard-week-row tr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#timecard .timecard-week-row td { display: block; flex: 0 0 auto; padding: 0; font-size: 12px; }
#timecard .timecard-field, #timecard .timecard-field tbody, #timecard .timecard-field tr { display: block; width: 100%; }
#timecard .timecard-field tr { display: grid; }
@media (min-width: 901px) {
  #timecard .timecard-week-row tr { display: grid; grid-template-columns: auto 145px auto auto; gap: 6px; }
  #timecard .timecard-week-row td { font-size: 11px; white-space: nowrap; }
  #timecard .timecard-week-row small { font-size: 10px; }
  #timecard .timecard-week-row input[type=radio] { margin-right: 2px; }
}
#timecard .right_part > table:first-child { table-layout: auto; }
#timecard .td_row select { min-width: 110px; padding: 5px 4px; font-size: 12px; }
#timecard .td_row_header { min-width: 70px; }
.timecard-calendar .flatpickr-weekday:nth-child(6),
.timecard-calendar .flatpickr-weekday:nth-child(7),
.timecard-calendar .flatpickr-day.timecard-weekend { color: #c62828; }
.timecard-calendar .flatpickr-day.timecard-weekend.flatpickr-disabled,
.timecard-calendar .flatpickr-day.timecard-weekend.prevMonthDay,
.timecard-calendar .flatpickr-day.timecard-weekend.nextMonthDay { color: #c62828; opacity: .35; }
.timecard-calendar .flatpickr-day.timecard-weekend.selected { color: #fff; opacity: 1; }
#timecard .right_part > .timecard-hours-table { table-layout: fixed; }
#timecard .timecard-hours-table .td_row select { min-width: 0; width: 100%; }
#timecard .timecard-hours-table .td_row_header { min-width: 0; }
#timecard .timecard-overnight { display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 11px; cursor: pointer; white-space: nowrap; }
#timecard .timecard-overnight input[type=checkbox] { margin: 0; }