.usls-filestack-preview-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0;
  padding: 8px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background: #fafbfc;
}

.usls-filestack-preview-left {
  display: flex;
  align-items: center;
}

.usls-filestack-preview-icon {
  margin-right: 10px;
  font-size: 1.2em;
}

.usls-filestack-preview-name {
  font-size: 0.85em;
  margin-right: 10px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usls-filestack-remove-file {
  margin-left: auto;
  background: #ff4d4f;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 1.2em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.usls-filestack-remove-file:hover {
  background: #d9363e;
}

.fsp-picker .fsp-header {
  background-color: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
}

.fsp-picker .fsp-source-list {
  background-color: #fafafa !important;
  border-right: 1px solid #e5e7eb !important;
}

.fsp-picker .fsp-source-list__item--active {
  background-color: #000000 !important;
  color: #ffffff !important;
}

.fsp-picker .fsp-drop-area-container {
  background-color: #ffffff !important;
}

.fsp-picker .fsp-drop-area {
  border: 1px solid #d1d5db !important;
  border-radius: 0px !important;
  background-color: #f9fafb !important;
}

.fsp-picker .fsp-button-upload {
  background-color: #1a73e8 !important;
  color: #ffffff !important;
  border-radius: 0px !important;
}

.fsp-picker .fsp-button--cancel {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
  border-radius: 0px !important;
}

.fsp-picker .fsp-content {
  background-color: #ffffff !important;
}

.fsp-picker .fsp-summary__body {
  background-color: #ffffff !important;
}

.fsp-picker .fsp-summary__item {
  background-color: #fafafa !important;
  color: #000000 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 0px !important;
  padding: 12px !important;
}

.fsp-picker .fsp-summary__item-name {
  color: #000000 !important;
}

.fsp-picker .fsp-summary__size {
  color: #6b7280 !important;
}

.fsp-picker .fsp-summary__action--remove {
  color: #000000 !important;
}

.fsp-picker .accordion-content {
  background-color: #f9fafb !important;
  border-top: 1px solid #e5e7eb !important;
}

.fsp-picker .folder-summary {
  background-color: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
}

.fsp-picker .folder-summary__item-name {
  color: #000000 !important;
}

.fsp-picker .fsp-nested-file-name {
  color: #374151 !important;
}

.fsp-picker .folder-summary .fsp-summary__size {
  color: #6b7280 !important;
}

.fsp-picker .folder-summary .fsp-summary__action--remove {
  color: #000000 !important;
}

.fsp-summary__actions-container .fsp-summary__action-separator,
.fsp-summary__actions-container .fsp-summary__action--button {
	display: none !important;
}


/* ============================================================
   US Language Services — Filestack Upload Window  ·  Version A1
   "Twin Cards" — two equal, clearly-labelled upload methods.
   CSS-ONLY reskin. No markup changes required.
   Paste this AFTER Filestack's stylesheet (it relies on overrides).
   ============================================================ */

/* ---- Brand tokens (reference only) ----
   black  #0c0c0c   blue #1a73e8   grey-line #d1d5db
   ink    #1a1a1a   soft #5f6b76   fill #f9fafb
*/

/* ---------- 1. Modal frame ---------- */
.fsp-picker .fsp-modal {
  border-radius: 0 !important;            /* square corners, brand */
}

/* Header: no black band, no computer icon. Keep the close (×) button (an
   independent absolute element), and show a centred title in its place. */
.fsp-picker .fsp-header {
  background-color: #ffffff !important;
  border-bottom: 1px solid #eef1f4 !important;
  justify-content: center !important;
  align-items: center !important;
}
.fsp-picker .fsp-header .fsp-header-icon,
.fsp-picker .fsp-header-icon {
  display: none !important;   /* hide the "My Device" computer icon */
}
.fsp-picker .fsp-header::after {
  content: "Select files to upload";
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #45525f !important;
  letter-spacing: .01em !important;
}

/* ---------- 2. Drop area becomes a clean white canvas ---------- */
/* Vendor sets this to display:flex; width/height:100% with a dashed border and
   a grey #eee fill — it expands to fill the (large) modal. We keep the flex
   centering so the two cards sit centred, but strip the border + fill. */
.fsp-picker .fsp-drop-area {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px dashed #d1d5db !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  padding: 30px !important;
}
.fsp-picker .fsp-drop-area:hover { background: #ffffff !important; }
/* kill Filestack's default centre upload glyph (it's a pseudo/bg) */
.fsp-picker .fsp-drop-area::before,
.fsp-picker .fsp-drop-area::after,
.fsp-picker .fsp-select-labels::before,
.fsp-picker .fsp-select-labels::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* ---------- 3. Lay the labels out as a 2-column grid ---------- */
/* IMPORTANT: vendor paints a grey/blue "add files" SVG here via background-image
   (50% 0) — that's the stray blue "+" between the cards. Kill it.
   Row 1 = the drag/drop hint banner (full width); Row 2 = the two cards. */
.fsp-picker .fsp-select-labels,
.fsp-picker .fsp-select-labels--active {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 18px !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 720px;
  margin: 0 auto !important;
  text-align: center;
  background-image: none !important;   /* removes the stray blue "+" */
}

/* promote the folder <button> up next to the files label.
   target ONLY the unclassed wrapper div (title & subtitle are also <div>s) */
.fsp-picker .fsp-select-labels > div:not([class]) {
  display: contents !important;
}
/* the old "or" separator is no longer needed */
.fsp-picker .fsp-drop-area__separator {
  display: none !important;
}

/* ---------- 4. The two equal cards ---------- */
/* card A = files label · card B = folder button — styled identically.
   Each card stacks: icon (top, via background-image) ▸ heading (the element's
   REAL text) ▸ description (::after, injected) ▸ black button (::before,
   injected, pinned to the bottom). The description and button labels don't
   exist in the DOM, so they're supplied here through `content`. */
.fsp-picker .fsp-drop-area__title,
.fsp-picker .fsp-drop-area__button {
  grid-row: 2;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 250px;
  height: 250px;                    /* fixed so cards never balloon in a tall modal */
  margin: 0 !important;
  padding: 92px 20px 20px !important;   /* top space reserved for the icon */
  box-sizing: border-box !important;
  border: 1px solid #d1d5db !important;
  border-radius: 0 !important;
  background: var(--usls-icon) no-repeat center 28px / 44px 44px, #ffffff !important;
  color: #1a1a1a !important;          /* heading colour */
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -.01em !important;
  text-align: center !important;
  text-transform: none !important;
  white-space: normal !important;     /* allow the heading/label to wrap */
  cursor: pointer !important;
  transition: border-color .15s, box-shadow .15s !important;
  -webkit-appearance: none;
  appearance: none;
}
.fsp-picker .fsp-drop-area__title  { grid-column: 1; }
.fsp-picker .fsp-drop-area__button { grid-column: 2; width: 100% !important; }

/* description line (injected) — sits directly under the heading */
.fsp-picker .fsp-drop-area__title::after,
.fsp-picker .fsp-drop-area__button::after {
  order: 0;
  max-width: 220px;
  margin: 0 !important;
  color: #5f6b76 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
}

/* black action button (injected) — pinned to the bottom of the card */
.fsp-picker .fsp-drop-area__title::before,
.fsp-picker .fsp-drop-area__button::before {
  order: 1;
  margin-top: auto !important;        /* push to bottom */
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px 8px !important;
  background: #0c0c0c !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.1 !important;
}

/* per-card icon (black outline, like A3) + injected description & button text.
   The description/button strings live in `content` literally (not via var()) so
   they paint reliably across every browser. */
.fsp-picker .fsp-drop-area__title {
  --usls-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c0c0c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M12 12v6M9 15h6'/%3E%3C/svg%3E");
}
.fsp-picker .fsp-drop-area__title::after  { content: "Choose one or more individual files from your computer"; }
.fsp-picker .fsp-drop-area__title::before { content: "Select Files"; }

.fsp-picker .fsp-drop-area__button {
  --usls-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c0c0c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h3.6l2 2.2H19a2 2 0 0 1 2 2V18a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
}
.fsp-picker .fsp-drop-area__button::after  { content: "Send an entire folder and everything inside it"; }
.fsp-picker .fsp-drop-area__button::before { content: "Select Folder"; }

/* hover / focus — black border + darker button (matches the form's selected state) */
.fsp-picker .fsp-drop-area__title:hover,
.fsp-picker .fsp-drop-area__button:hover,
.fsp-picker .fsp-drop-area__title:focus,
.fsp-picker .fsp-drop-area__button:focus {
  border-color: #0c0c0c !important;
  box-shadow: inset 0 0 0 1px #0c0c0c !important;
  outline: none !important;
}
.fsp-picker .fsp-drop-area__title:hover::before,
.fsp-picker .fsp-drop-area__button:hover::before,
.fsp-picker .fsp-drop-area__title:focus::before,
.fsp-picker .fsp-drop-area__button:focus::before {
  background: #2c2c2c !important;
}

/* ---------- 5. Subtitle becomes the full-width drag/drop hint banner (top row) ---------- */
/* The vendor text ("or Drag and Drop, Copy and Paste Files") is collapsed to
   font-size:0 and replaced with our copy via ::after, so the banner reads the
   same line we use elsewhere. */
.fsp-picker .fsp-drop-area__subtitle {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0 !important;
  margin: 0 0 2px !important;
  padding: 12px !important;
  border: 1px dashed #c9ced3 !important;
  background: #f6f8fa !important;
  color: #5f6b76 !important;
  font-size: 0 !important;            /* hide the vendor text */
  font-weight: 400 !important;
  line-height: 1.3 !important;
}
.fsp-picker .fsp-drop-area__subtitle::after {
  content: "Drag & drop, copy & paste anywhere — or choose a method below";
  margin-left: 9px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #5f6b76 !important;
  line-height: 1.3 !important;
}
.fsp-picker .fsp-drop-area__subtitle::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6b76' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M8 8l4-4 4 4'/%3E%3Cpath d='M4 14v4a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- 6. Footer / primary action ---------- */
.fsp-picker .fsp-button--primary {
  background-color: #1a73e8 !important;   /* blue CTA */
  color: #ffffff !important;
  border-radius: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}
.fsp-picker .fsp-button--primary:hover { background-color: #1561c9 !important; }
.fsp-picker .fsp-button--primary.fsp-button--disabled {
  background-color: #c9ced3 !important;
  color: #ffffff !important;
  cursor: not-allowed !important;
}



/* ============================================================
   US Language Services — Filestack "Selected Files" summary
   VERSION A · Refined Rows  ·  CSS-ONLY reskin (no markup changes)
   Load AFTER Filestack's main.css.
   ============================================================ */

/* ---- Brand tokens (reference) ----
   black #0c0c0c · blue #1a73e8 · ink #1a1a1a · soft #6b7682
   faint #97a0a9 · line #e6e9ed · line2 #eef1f4 · hover #f6f8fa */

/* ---------- 0. Frame ---------- */
.fsp-picker .fsp-modal { border-radius: 0 !important; }

/* ---------- 1. Title + filter ---------- */
/* Match the upload-window header title exactly (18px / 600 / #45525f). */
.fsp-picker .fsp-summary .filestack-text-gray-600 {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #45525f !important;
  letter-spacing: .01em !important;
  /*padding: 18px 0 4px !important;*/
  /*border-bottom: 1px solid #eef1f4 !important;*/
}
.fsp-picker .fsp-summary__header {
	border-bottom: 1px solid #e6e9ed !important;
	padding: 5px !important;
}

.fsp-picker .fsp-summary__filter {display: none !important; }

.fsp-picker .fsp-summary__filter > input {
  border-radius: 0 !important;
  text-align: left !important;
  height: 38px !important;
  border-color: #d9dee4 !important;
}

/* ---------- 2. Section labels ---------- */
/* Hide the IMAGES / FILES / FOLDERS section headings entirely. */
.fsp-picker .fsp-grid__label {
  display: none !important;
}
/* Hide a section whose only content is its label (no items) */
.fsp-picker .fsp-summary__body > div:has(> .fsp-grid__label):not(:has(.fsp-summary__item)) {
  display: none !important;
}

/* ---------- 3. Image & file rows ---------- */
.fsp-picker .fsp-summary__item {
  height: auto !important;
  min-height: 52px;
  padding: 9px 14px !important;
  border: 1px solid #e6e9ed !important;
  border-radius: 0 !important;
  background: #fff !important;
  margin-bottom: 8px !important;
}
.fsp-picker .fsp-summary__item:hover { background: #f6f8fa !important; }

/* remove the leading type icon (image thumbnail + file glyph) from rows */
.fsp-picker .fsp-summary__item > .fsp-summary__thumbnail,
.fsp-picker .fsp-summary__item > .fsp-summary__thumbnail-container {
  display: none !important;
}

/* name + size grouped together on the LEFT (size right after the name),
   matching the files shown inside folders. The remove X is pushed far right. */
.fsp-picker .fsp-summary__item-name {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding-left: 0 !important;
  line-height: 1.3 !important;
  flex: 0 1 auto !important;     /* shrink to content, don't stretch full width */
  min-width: 0 !important;
}
.fsp-picker .fsp-summary__item-name > span:first-child {
  flex: 0 1 auto !important;     /* name hugs its content, ellipsis when tight */
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  font-size: 15.5px !important;
  color: #1a1a1a !important;
}
.fsp-picker .fsp-summary__item-name > .filestack-flex { flex: 0 0 auto !important; }
.fsp-picker .fsp-summary__size {
  opacity: 1 !important;
  color: #97a0a9 !important;
  font-size: 13.5px !important;
  padding-top: 0 !important;
  font-variant-numeric: tabular-nums;
}

/* drop the ALT TEXT control + Edit action from image rows
   (scoped to top-level rows; nested folder file names are untouched) */
.fsp-picker .fsp-summary__item-name .fsp-summary__alttext,
.fsp-picker .fsp-summary__action--button,
.fsp-picker .fsp-summary__action-separator {
  display: none !important;
}
.fsp-picker .fsp-summary__actions-container { margin-left: auto !important; padding-right: 4px !important; }

/* ---------- 4. Folder header ---------- */
.fsp-picker .accordion-item { border-bottom: 0 !important; margin-bottom: 8px; }
.fsp-picker .fsp-summary__item.accordion-header {
  height: auto !important;
  min-height: 58px;
  padding: 11px 14px !important;
  border: 1px solid #e6e9ed !important;
  background: #fcfcfd !important;
  font-weight: 700 !important;
}
.fsp-picker .accordion-item .accordion-arrow { color: #6b7682; }

/* remove the grey circle behind the folder icon (keep the glyph) */
.fsp-picker .accordion-header .fsp-summary__thumbnail-container {
  background: none !important;
  min-width: 20px !important;
  margin-left: 4px !important;
  margin-right: 8px !important;
}
.fsp-picker .folder-details .name {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
}
.fsp-picker .folder-details .additional-details {
  color: #97a0a9 !important;
  font-size: 12.5px !important;
}

/* ---------- 5. Folder children (consistent, with a left rail) ---------- */
.fsp-picker .accordion-content {
  padding: 2px 0 6px !important;
  background: #fbfcfd !important;
  position: relative;
  border: 1px solid #e6e9ed !important;
  border-top: 0 !important;
}
.fsp-picker .accordion-content::before {
  content: "";
  position: absolute;
  left: 2.5rem;
  top: 0;
  bottom: 10px;
  width: 1px;
  background: #e6e9ed;
}
.fsp-picker .folder-summary {
  margin-left: 3.4rem !important;
  height: auto !important;
  min-height: 42px;
  padding: 7px 14px 7px 10px !important;
  border-bottom: 1px solid #eef1f4 !important;
  align-items: center !important;
  justify-content: flex-start !important;   /* name + size grouped left */
  gap: 14px !important;
}
.fsp-picker .folder-summary__item-name { flex: 0 1 auto !important; }
.fsp-picker .folder-summary .fsp-summary__size { flex: 0 0 auto !important; }
.fsp-picker .folder-summary .fsp-summary__action--remove { margin-left: auto !important; }
.fsp-picker .folder-summary:last-of-type { border-bottom: 0 !important; }
.fsp-picker .folder-summary:hover { background: #f6f8fa !important; }
.fsp-picker .folder-summary__item-name {
  width: auto !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: 10px !important;
}
.fsp-picker .fsp-nested-file-name {
  font-size: 14.5px !important;
  color: #2c353d !important;
  max-width: 100% !important;
}

/* ---------- 6. Footer ---------- */
.fsp-picker .fsp-footer { background: #efefef !important; border-top: 1px solid #e0e0e0 !important; }
.fsp-picker .fsp-footer .fsp-button {
  border-radius: 0 !important;
  height: 44px !important;
  line-height: 42px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 0 22px !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}
.fsp-picker .fsp-footer .fsp-button--cancel {
  background: #fff !important;
  border: 1px solid #0c0c0c !important;
  color: #1a1a1a !important;
}
.fsp-picker .fsp-footer .fsp-button--primary {
  background: #1a73e8 !important;   /* blue CTA, like the call to action */
  border: 1px solid #1a73e8 !important;
  color: #fff !important;
}
.fsp-picker .fsp-footer .fsp-button--primary:hover { background: #1561c9 !important; border-color: #1561c9 !important; }
.fsp-picker .fsp-footer .fsp-badge--bright {
  display: none !important;
  background: #fff !important;
  color: #1a73e8 !important;
}

/* Relabel the Upload CTA → "UPLOAD THESE FILES" (keep the count badge).
   The word "Upload" is real DOM text, so it's collapsed and replaced here.
   The badge keeps its own font-size, so it stays visible. */
.fsp-picker .fsp-button-upload .filestack-text-white { font-size: 0 !important; }
.fsp-picker .fsp-button-upload .filestack-text-white::before {
  content: "Upload these files";
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

/* ============================================================
   US Language Services — Filestack UPLOAD-PROGRESS screen
   Fixes: (a) status tabs need a gap before the first row;
          (b) the progress bar collapses + overlaps the file size.
   Load AFTER main.css (append at the end of this stylesheet).
   ============================================================ */

/* (a) Status tabs (All Uploads / Completed / Failed): vendor is inline-block
   with no spacing, so they touch the first row. Add a bottom margin. */
.fsp-picker .fsp-summary__status-nav {
  display: block !important;
  margin: 4px 0 18px !important;
}

/* (b) Progress bar. Vendor sets width:38% + margin-left:auto + margin-right:4rem,
   which was built for its stacked layout; inside our flex row the wrapper
   shrinks to content, so 38% collapses to almost nothing and overlaps the size.
   Give the bar a fixed, legible width and clear the auto margins. */
.fsp-picker .fsp-summary__progress-bar {
  width: 220px !important;
  min-width: 220px !important;
  margin: 0 0 0 18px !important;     /* space from the file-size text */
  flex: 0 0 auto !important;
}
/* keep the "x MB / yMB" size on one line, next to (not under) the bar */
.fsp-picker .fsp-summary__size--uploading {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}
/* track (grey) */
.fsp-picker .fsp-summary__progress-bar .filestack-bg-gray-300 {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 8px !important;
  background: #d1d5db !important;
  border-radius: 999px !important;
}
/* fill (brand blue) */
.fsp-picker .fsp-summary__progress-bar .filestack-bg-blue-500 {
  height: 8px !important;
  background: #1a73e8 !important;
  border-radius: 999px !important;
}
/* the "49%" label → brand blue */
.fsp-picker .fsp-summary__progress-bar .filestack-text-blue-500 {
  color: #1a73e8 !important;
}