.frs-modal button:disabled,
.frs-modal input[type="button"]:disabled,
.frs-modal input[type="submit"]:disabled {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #A0A0A0), color-stop(1, #808080));
  background: -moz-linear-gradient(center top, #A0A0A0 5%, #D0D0D0 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#A0A0A0', endColorstr='#D0D0D0');
  background-color: #D0D0D0;
}
.frs-modal .green {
  background-color: palegreen;
}
#frsReloadOverlay {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 200;
}
#frsReloadOverlay .frsReloadSpinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border: 5px solid rgba(45, 73, 99, 0.2);
  border-top-color: #2D4963;
  border-radius: 50%;
  animation: frsSpin 0.8s linear infinite;
}
@keyframes frsSpin {
  to {
    transform: rotate(360deg);
  }
}
#frsSaveReloadBar {
  position: sticky;
  bottom: 0;
  text-align: center;
  padding: 10px 0;
  background: #fafafa;
  border-top: 1px solid #ddd;
  z-index: 150;
  display: flex;
  justify-content: center;
  gap: 16px;
}
/* page: the form sits in the page, height follows the window */
.frs-modal {
  height: calc(100vh - 190px);
  min-height: 400px;
  margin: 10px auto;
}
/* popup: the layout fills the whole window, the popup's own padding / border / scroll are switched off */
#ajaxPopupWindow:has(.frs-modal) {
  width: min(1238px, 98vw) !important;
  max-width: none !important;
  height: 80vh !important;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 6px;
}
/* the framework centers the window with inline margins computed for the default 900 px width -> center by transform instead */
/* !important: the assignment edit form (adjustmentEntry.php) sets its own "transform: translateY(-50%) !important" on the popup */
#ajaxPopupWindow:has(.frs-modal) {
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
}
#ajaxPopupWindow:has(.frs-modal) .ajaxPopupHeader {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 20;
  width: auto;
  padding: 0;
}
/* the header is a flex box: the empty caption + shrinking would cut the 20x20 close sprite to 10 px */
#ajaxPopupWindow:has(.frs-modal) .ajaxPopupCaption {
  display: none;
}
#ajaxPopupWindow:has(.frs-modal) #activeSortingButt {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
}
/* overflow: !important beats the inline "overflow:auto" of #ajaxPopup; the two <br> after it (login.php) would take 37 px of the flex column and shrink the popup */
#ajaxPopupWindow:has(.frs-modal) #ajaxPopup {
  height: 100% !important;
  padding: 0;
  overflow: hidden !important;
}
#ajaxPopupWindow:has(.frs-modal) > br {
  display: none;
}
#ajaxPopupWindow .frs-modal {
  height: 80vh;
  min-height: 0;
  margin: 0;
}
.frs-modal {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 1238px;
  padding: 25px;
  background: #fff;
  border: 1px solid #878787;
  border-radius: 6px;
  font-family: Inter, sans-serif;
  text-align: left;
}
.frs-modal [hidden] {
  display: none !important;
}
.frs-cols {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 12px;
  align-items: stretch;
}
/* fluid: the side column shrinks down to 260 px, the items take the rest */
.frs-side {
  flex: 0 0 clamp(280px, 28%, 326px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* only .frs-info scrolls, the buttons above stay in place */
.frs-main {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.frs-btn,
.frs-modal .open-popup {
  display: flex;
  padding: 4px 24px;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  color: #fff;
  font-family: 'Inter';
  font-weight: 400;
  font-size: 14px;
  line-height: 140%;
}
.frs-side-buttons {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.frs-side-buttons .rem-notes-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 56%;
  min-width: 0;
}
.frs-side-buttons .rem-notes-container .reminders-container {
  margin-top: 0;
}
/* the side buttons never wrap their caption; "Others Reminders (0)" is the longest one */
.frs-side-buttons .rem-notes-container .open-popup {
  width: 100%;
  padding: 4px 6px;
  gap: 3px;
  font-size: 13px;
  white-space: nowrap;
}
.frs-side-buttons .open-popup .count {
  margin: 0;
}
.frs-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 44%;
  min-width: 0;
}
.frs-nav .frs-btn {
  width: 100%;
  padding: 4px 6px;
  font-size: 13px;
  white-space: nowrap;
}
.frs-modal #tpl {
  width: 100%;
  height: 28px;
  font-size: 12px;
  border: 0.5px solid #000;
  background: #fff;
}
.frs-info,
.frs-entries {
  background: #f2f2f7;
  border: 1px solid #151419;
}
.frs-info {
  flex: 1 1 0;
  min-height: 120px;
  overflow-y: auto;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* fills the column, so it ends where .frs-entries ends */
.frs-info-title {
  text-align: center;
  font-size: 14px;
}
/* table rows as grid: shared caption column + fields that never grow with their content */
.frs-info-fields,
.frs-info-fields tbody {
  display: block;
  width: 100%;
}
.frs-info-fields tr {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: center;
  margin-bottom: 6px;
}
.frs-info-fields td {
  display: block;
  width: auto !important;
  min-width: 0;
  max-width: none;
  padding: 0;
  font-size: 14px;
}
.frs-info-fields td.entryTableCaption {
  padding-right: 8px;
  text-align: right;
  line-height: 1.2;
  white-space: normal !important;
}
.frs-info-fields td > input,
.frs-info-fields td > span:only-child {
  box-sizing: border-box;
  width: 100% !important;
}
.frs-info-fields tr.frs-prefix td:last-child {
  white-space: nowrap;
}
.frs-note {
  text-align: center;
  font-size: 14px;
  margin-bottom: 4px;
}
.frs-note-text {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 22px;
  padding: 2px 4px;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
  cursor: pointer;
  background: #e0e0e0;
  border: 1px solid #abadb3;
  font: 13.3333px Tahoma, sans-serif;
  color: #000;
}
.frs-note-text.open {
  height: 108px;
  overflow: auto;
  white-space: normal;
}
.frs-note small {
  display: block;
  font-size: 10px;
}
/* on a narrow window the two groups wrap under each other, the captions themselves never wrap */
.frs-topbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 6px 12px;
  min-height: 28px;
  padding: 0 8px;
  font-size: 14px;
}
.frs-topbar .frs-btn {
  display: inline-flex;
  flex: none;
  white-space: nowrap;
}
.frs-topbar-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}
.frs-bill-me {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}
.frs-modal #assignmentTitle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.frs-entries {
  flex: 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: auto;
}
#budgetWarningOverlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  z-index: 10000;
}
#budgetWarningBox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  width: 450px;
  height: 172px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: 16px;
  border: 1px solid #A9A8B1;
  background: #FFF;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}
#budgetWarningBox h2 {
  margin: 0 0 20px;
  color: #162332;
  font: 700 24px Tahoma;
  text-align: center;
}
#budgetWarningBox p {
  color: #2D4963;
  text-align: center;
  font: 400 18px/145% Tahoma;
}
/* same look as the SAVE button (.frs-btn in #frsSaveReloadBar) */
#budgetWarningOk {
  display: flex;
  min-width: 80px;
  padding: 4px 24px;
  justify-content: center;
  align-items: center;
  max-height: unset;
  border-radius: 3px;
  color: #fff;
  font-family: 'Varela Round', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 140%;
}
/* log item: header row + 3 body rows + misc row, 8 columns = 838 px */
/* columns shared by the item and its misc rows: date and text are flexible, the numeric ones fixed.
               Row 4 takes the extra height of a long text, so the left cells stay compact. */
.frs-items {
  --frs-cols: minmax(170px, 200px) 50px 45px minmax(160px, 1fr) 74px 70px 16px 70px;
  min-width: 655px;
}
.frs-item {
  display: grid;
  grid-template-columns: var(--frs-cols);
  grid-template-rows: 23px auto auto 1fr auto;
  margin-bottom: 12px;
  font-size: 12px;
}
.frs-item:hover {
  background: lightyellow;
}
.frs-item[hidden] {
  display: none;
}
.frs-item .green {
  background: #98fb98;
}
.frs-th {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 4px;
  background: #d9d9d9;
  border: 0.25px solid #939191;
  white-space: nowrap;
  overflow: hidden;
}
.frs-c {
  min-width: 0;
}
.frs-date {
  grid-area: 2 / 1;
}
.frs-hours {
  grid-area: 2 / 2;
}
.frs-miles {
  grid-area: 2 / 3;
}
.frs-text {
  grid-area: 2 / 4 / 5 / 5;
}
.frs-bill-hours {
  grid-area: 2 / 5;
}
.frs-bill-miles {
  grid-area: 2 / 6;
}
.frs-hash {
  grid-area: 2 / 7;
  padding: 2px 0 0 2px;
}
.frs-bill-number {
  grid-area: 2 / 8;
}
.frs-pay {
  grid-area: 3 / 1 / 4 / 4;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
}
.frs-extra {
  grid-area: 3 / 5 / 4 / 9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 0 0 0 4px;
}
/* no bottom padding + bottom aligned: the name input ends on the same line as the textarea */
.frs-name {
  grid-area: 4 / 1;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 4px 0 0 12px;
  font-size: 14px;
}
.frs-name .smallName {
  line-height: 22px;
}
.frs-add-misc {
  grid-area: 4 / 2 / 5 / 4;
  display: flex;
  align-items: flex-end;
}
.frs-delete {
  grid-area: 4 / 5 / 5 / 9;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 4px;
}
.frs-misc {
  grid-area: 5 / 1 / 6 / 9;
}
/* misc table as grid on the same columns as the item (td colspan -> grid span) */
.frs-misc .miscTable,
.frs-misc .miscTable tbody {
  display: block;
  width: 100%;
}
/* cells stretch to the row height (an empty green "#" cell would otherwise shrink to a thin stripe), content is centered inside */
.frs-misc tr {
  display: grid;
  grid-template-columns: var(--frs-cols);
  align-items: stretch;
}
.frs-misc td {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 2px 0;
  font-size: 12px;
}
/* no horizontal padding: the fields start / end exactly on the column edges of the item header */
.frs-misc td.green {
  padding: 2px 0;
}
.frs-misc-cell {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
}
.frs-misc-cell input.miscInput {
  flex: 1 1 0;
  min-width: 0;
  width: auto !important;
  box-sizing: border-box;
}
/* the quantity column is only 33 px wide next to its "x $" label: 11px fits "12.00" */
.frs-misc-cell input[id^="count_"],
.frs-misc-cell input[id^="price_"],
.frs-misc-cell input[id^="billCount_"],
.frs-misc-cell input[id^="billPrice_"] {
  font-size: 11px;
  padding-left: 1px;
  padding-right: 1px;
}
.frs-misc-cell {
  gap: 1px;
}
/* select, count, price and description share one height */
.frs-misc-cell input.miscInput,
.frs-misc-cell select {
  box-sizing: border-box;
  height: 22px;
  margin: 0;
}
.frs-misc-type select {
  flex: 1 1 60px;
  min-width: 60px;
  max-width: 120px;
}
.frs-misc .smallName {
  font-size: 10px;
}
.frs-misc-type .smallName:first-child {
  padding-left: 4px;
}
.frs-misc-count-label {
  margin-left: auto;
}
.frs-misc td.frs-misc-delete {
  justify-content: flex-end;
  padding-right: 4px;
}
.frs-item input.rowInput,
.frs-item textarea {
  box-sizing: border-box;
  width: 100% !important;
  font-size: 12px;
}
.frs-item textarea {
  min-height: 69px;
  height: auto !important;
}
/* stretched by the flex cell, min-height comes from autoGrow() */
.frs-text {
  display: flex;
}
/* the inputs of the name row and the pay row (Pay Date, Check #) have one height */
.frs-name input,
.frs-pay input.rowInput {
  box-sizing: border-box;
  height: 22px;
}
.frs-pay input.rowInput {
  width: auto !important;
  max-width: 90px;
}
/* Pay Date on the left, "Check #:" + its input pushed to the right edge of the left block (ends under Miles) */
.frs-pay {
  padding-right: 0;
}
.frs-pay .smallName ~ input ~ .smallName {
  margin-left: auto;
}
/* the Check # input spans the Hours + Miles columns (50 + 45 px): left edge under "Hours", right edge under "Miles" */
.frs-pay input[id^="adjusterPayCheck_"] {
  width: 95px !important;
  max-width: none;
}
.frs-name input {
  flex: 1 1 0;
  min-width: 0;
  width: auto !important;
  max-width: 144px;
}
.frs-bill-date {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
/* = width of the INV column above, same right edge; 12px like the other fields, 13px would clip "04/21/2023" */
.frs-bill-date input {
  width: 70px !important;
  font-size: 12px;
  box-sizing: border-box;
}
.frs-changelog {
  cursor: default;
}
.frs-status {
  font-size: 12px;
  color: #555;
}
.frs-status:empty {
  display: none;
}
/* an empty flex item would still add its gap */
.frs-invalid {
  border-color: red !important;
}
.frs-item .gridActionButton {
  font: 400 12px Montserrat, sans-serif;
  line-height: 20px;
  padding: 0 8px;
}
.frs-item .deleteRow,
.frs-item .deleteMisc {
  background: #e79f9f;
  color: #151419;
}
/* approved: white button with red text (Figma "Remove Approval") */
.frs-item .frs-approve[data-approved="1"],
.frs-item.frs-pending .frs-approve {
  background: #fff;
  color: #c44536;
  box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
}
/* checkbox (Approve + Bill?): 18 px square, green with a white check when checked (Figma) */
.frs-item input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  cursor: pointer;
  background: #fff;
  border: 1px solid #939191;
  border-radius: 2px;
  opacity: 1;
}
.frs-item input[type="checkbox"]:checked {
  background: #2f882e;
  border-color: #2f882e;
}
.frs-item input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.frs-approved {
  display: none !important;
}
/* only shown while approved, unchecking it removes the approval */
.frs-approved:checked {
  display: inline-block !important;
}
/* adjuster: same look without the invoice (green) columns -> 4 columns, the misc delete button sits over the end of the description */
.frs-adj .frs-items {
  --frs-cols: minmax(170px, 200px) 50px 45px minmax(160px, 1fr);
  min-width: 420px;
}
.frs-adj .frs-item .green,
.frs-adj .frs-misc td.green {
  background: none;
}
/* text over the rows 2-3, delete under it on the right (row 4) */
.frs-adj .frs-text {
  grid-area: 2 / 4 / 4 / 5;
}
.frs-adj .frs-delete {
  grid-area: 4 / 4;
  justify-content: flex-end;
}
.frs-adj .frs-misc {
  grid-area: 5 / 1 / 6 / 5;
}
/* both explicitly in column 4 (an explicit cell next to auto-placed ones would push the description to a second row) */
.frs-adj .frs-misc td:nth-of-type(4),
.frs-adj .frs-misc td.frs-misc-delete {
  grid-area: 1 / 4;
}
.frs-adj .frs-misc td.frs-misc-delete {
  justify-self: end;
  background: none;
}
.frs-adj .frs-misc td:nth-of-type(4) {
  padding-right: 62px;
}
/* Approve ALL button states (Figma): disabled grey, confirmation green; pink is the default button look */
#frsApproveAll:disabled {
  background: rgba(118, 118, 128, 0.5);
  cursor: default;
}
#frsApproveAll.frs-confirm,
#frsApproveAll.frs-confirm:hover {
  background: #2f882e;
}
.frs-closed-note {
  font-size: 13px;
  color: #c44536;
}
.frs-topbar-actions a {
  text-decoration: none;
}
#frsSaveReloadBar {
  position: static;
  flex: none;
  padding: 0;
  background: #fff;
  border-top: 0;
}
#frsSaveReloadBar .frs-btn {
  font-family: 'Varela Round', sans-serif;
  font-size: 16px;
  min-width: 80px;
  border-radius: 3px;
}
/* not on :hover - the app-wide hover style of buttons (grey) has to win, same as on the pink SAVE */
#frsSaveReloadBar .frs-save-close:not(:hover) {
  background: #000f73;
}