/* Narrow-screen layer for arpaget.com.
 *
 * The 2026-08-11 export made the two marketing pages fully fluid (clamp() type,
 * minmax(min(100%,Npx),1fr) grids, a wrapping header), and they need no help —
 * verified zero clipping at 320px and 375px. Nothing here targets them.
 *
 * The Veridiance workspace is the exception: it is a two-pane desktop console
 * (document list + a fixed 384px "Ask this file" panel) in a nowrap flex row.
 * Below roughly 430px the panel wins the row outright and the document list is
 * computed to ZERO width, so the embedded workspace on the landing page shows
 * the chat pane and no documents at all. These rules stack the two panes rather
 * than letting one squeeze the other out. Nothing is hidden: the assistant panel
 * stays toggleable from the header, which a display:none fix would have broken.
 *
 * Keep this file minimal. Responsiveness belongs to the design; if a later
 * export makes the workspace fluid too, delete this file and the build will
 * stop injecting it automatically.
 */

/* Network-optimization page: the savings tables end each row with fixed-width
 * numeric columns. At 320px (iPhone SE and older) the 74px one overruns by ~7px
 * and gives the whole page a slight sideways scroll. Letting it size to its
 * content costs nothing — the values are around 34px wide. Clean at 375px and
 * up already, so this is scoped to the narrowest phones only. */
/* Focus rings on pointer interaction. NOT width-scoped — this applies at every
 * size, which is why it sits outside every media query in this file.
 *
 * The design styles :focus rather than :focus-visible, so a 2px purple ring at
 * a 2px offset appears after any click or tap — most visibly as a box around
 * the active segment of the benchmark control. A keyboard user genuinely needs
 * that ring; a pointer user did not ask for it and reads it as a rendering bug.
 *
 * :focus:not(:focus-visible) is exactly the pointer case — the browser has
 * decided the focus does not warrant a visible indicator. Tab still shows the
 * ring, so this removes the artifact without costing keyboard accessibility.
 * Do not "fix" this by removing the outline unconditionally. */
:focus:not(:focus-visible) { outline: none !important; }

/* Form controls: 16px on touch devices, or the browser zooms in on focus.
 *
 * Mobile Safari zooms the page whenever a focused form control renders its text
 * below 16px, and every control the design ships is below it: the demo dialog's
 * fields and selects at 13.5px, the workspace composer ("Ask a question about
 * this file...") at 13px. Tapping any of them zooms the page in on the field and
 * leaves the reader there, scrolled sideways, with the header off-screen. It is
 * a threshold, not a preference — 15.9px still zooms, 16px does not.
 *
 * Scoped to (pointer: coarse) rather than a width, because the zoom follows the
 * input device and not the viewport: a phone held sideways is 900px wide and
 * still zooms. Mouse rendering is untouched at every size. The other half of the
 * usual advice — maximum-scale=1 on the viewport meta — is not used here: it
 * stops the zoom by taking pinch-zoom away from everybody, which is worse than
 * the bug.
 *
 * The controls have room for it. The dialog's inputs and selects are a fixed
 * 34px tall and 16px text sits inside that; the composer's row is 32px of send
 * button plus padding, taller than either text size renders.
 *
 * The one control that does not have room is the dialog's "What would you like
 * us to show you?" box, which is rows="3" — 94px. Its placeholder is four lines
 * at 16px, so the fourth was being sliced in half by the bottom edge. 6em is
 * those four lines at the authored 1.5 line-height, and the 22px is the box's
 * own 9px padding top and bottom plus its 2px borders. */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px !important; }
  textarea { min-height: calc(6em + 22px); }
}

/* The "Request a demo" dialog, on a phone.
 *
 * Two fixes, both of them about the bottom bar. Its inline style is a nowrap
 * flex row: `flex:1;min-width:0` on the "7 required fields left" counter, then
 * Cancel (90px) and Send request (136px). The counter's min-width:0 lets it
 * shrink below its own text, so instead of the row wrapping, the counter is
 * squeezed to 45px and its four words stack one per line — an 80px-tall column
 * of single words beside the buttons, in a bar that should be 32px of buttons.
 *
 * So let the row wrap and give the counter the whole first line, which puts the
 * two buttons together on the second. Wrapping alone is not enough: with the
 * counter still free to grow, Cancel fits beside it and only Send request drops,
 * which reads worse than the squeeze did.
 *
 * The 441px ceiling is where the single row stops fitting. The counter needs
 * 112px to hold its longest string on one line ("7 required fields left"
 * measures 108), and 112 + 10 gap + 90 Cancel + 10 gap + 136 Send request = 358,
 * plus the bar's own 44px of padding and the overlay's 40, is 442. At 442px and
 * up the bar is left exactly as authored. The `gap:10px` already in the inline
 * style becomes the row gap.
 *
 * And 88vh is measured against the viewport with the browser toolbars retracted,
 * so on iOS the dialog is centred taller than the screen actually is and the
 * bottom of that bar — the Send request button — sits under the toolbar. dvh is
 * the same measurement against the viewport you can currently see. A browser
 * without dvh support drops the declaration and keeps the authored 88vh.
 *
 * Every selector is written twice. The page runtime is React, and React
 * re-serializes inline styles into its own spelling, so the DOM carries
 * `padding: 14px 22px` and `flex: 1 1 0%` where the built HTML says
 * `padding:14px 22px` and `flex:1`. Matching only the authored form matches
 * nothing at all, which is what the first cut of these rules did. */
@media (max-width: 441px) {
  [style*="padding:14px 22px"][style*="border-top:1px solid #E0E3E7"],
  [style*="padding: 14px 22px"][style*="border-top: 1px solid rgb(224, 227, 231)"] {
    flex-wrap: wrap !important;
  }
  [style*="flex:1;min-width:0;font-size:11.5px"],
  [style*="flex: 1 1 0%"][style*="font-size: 11.5px"][style*="color: rgb(92, 102, 116)"] {
    flex-basis: 100% !important;
  }
}

@media (pointer: coarse) {
  [style*="max-height:88vh"], [style*="max-height: 88vh"] {
    max-height: 88dvh !important;
  }
}

/* Header: vertical breathing room once it wraps.
 *
 * The header is authored with `padding: 0 clamp(...)` — no vertical padding,
 * which is right while it is a single 64px row. Below about 680px it wraps to
 * two or three rows, and the last row (the Request a trial button) then sits
 * 1px off the bottom border with nothing under it. Measured: 1px of clearance
 * at 375, 480, 560 and 600px; 17px at 700px and up, where it no longer wraps.
 * Scoped to the wrapping range so the desktop row keeps its exact height. */
@media (max-width: 679px) {
  header { padding-top: 10px !important; padding-bottom: 10px !important; }

  /* Once the header wraps, the spacer that pushes the CTA right on desktop
   * (a flex:1 div) forces it onto a row of its own — three stacked rows and
   * 111-133px of sticky chrome eating the top of every screen. Put the CTA
   * back beside the logo and let only the nav take the second row. */
  header > div[style*="flex: 1"], header > div[style*="flex:1"] { display: none !important; }
  /* The CTA is wrapped in a zero-width element, so margin-left:auto on it does
   * not push anything. Pushing from the logo side works regardless. */
  header > *:first-child { margin-right: auto !important; }
  header > *:last-child { order: 2 !important; }
  header > nav { order: 3 !important; flex-basis: 100% !important; margin-left: 0 !important; }
  header { row-gap: 6px !important; }

  /* The parent-brand lockup, stacked.
   *
   * The header's first row is the lockup and the CTA, and it has 341px at 375px
   * to hold both. The design's single-line nav variant measures 250px against a
   * 146px button, so on one line the header goes back to three rows and the
   * sticky chrome back to 133px — the thing the August pass spent its time
   * getting down to 83.
   *
   * So the descriptor drops under the wordmark, which is the arrangement of the
   * primary lockup in the same design file rather than something invented here,
   * and the sizes come from that file's own small variant: 11.5px at .09em for
   * the name, 8.5px at .22em for the descriptor, 16px mark. That is 113px, and
   * the row holds at two. */
  .brandwm {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    font-size: 11.5px !important;
    letter-spacing: .09em !important;
    line-height: 1.15 !important;
  }
  .brandwm > span { font-size: 8.5px !important; letter-spacing: .22em !important; }
  header svg[viewBox="0 0 92 92"] { width: 16px !important; height: 16px !important; }
  /* The design draws the 16px mark with heavier strokes than the 20px one — 6
   * and 10 against 5 and 9, and a 10-unit dot — so that scaling down does not
   * thin the arc away. Those are its numbers, not a rescale of the nav mark. */
  header svg[viewBox="0 0 92 92"] circle:nth-of-type(1) { stroke-width: 6; }
  header svg[viewBox="0 0 92 92"] circle:nth-of-type(2) { stroke-width: 10; }
  header svg[viewBox="0 0 92 92"] circle:nth-of-type(3) { r: 10; }
}

/* The header "Sign in" link.
 *
 * build.py adds it beside the primary CTA as a Cloudscape secondary button,
 * which is right on desktop. On a phone it is a third control in a header that
 * has already been tuned down to two rows and a flat 83px, and it does not fit:
 * row one is the stacked lockup (119px) and the CTA (146px), and the bordered
 * button adds 90px plus a gap into 341px of space at 375px. Measured, it takes
 * the header to three rows and 117-121px — which both eats the top of every
 * screen and breaks the flat-83px assumption that the single 94px
 * scroll-margin band below depends on.
 *
 * Dropping the button chrome and rendering it as a text link costs 40px and
 * holds two rows: row one then needs 331px against the 341px available at
 * 375px. A text link beside a primary button is the ordinary mobile-header
 * arrangement anyway, so this reads as intended rather than as a squeeze.
 *
 * Below 375px it is hidden instead. There is no arrangement that keeps two rows
 * there: at 320px the lockup and the CTA alone take 277px of a 288px row, and
 * the nav row is already 285px of the same 288px, so nothing can join either
 * one. Rather than push every narrow-phone visitor to a three-row header for a
 * convenience link, it is dropped — the portal is still reachable by typing
 * portal.arpaget.com, and it is a link for people who already hold credentials,
 * not a discovery route. */
@media (max-width: 679px) {
  header a[href="https://portal.arpaget.com"] {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 4px 2px !important;
  }
  /* Buys the row back another 8px so the fit is not down to its last pixel. */
  header { column-gap: 8px !important; }
}
@media (max-width: 374px) {
  header a[href="https://portal.arpaget.com"] { display: none !important; }
}

/* Account-overview metric values are a fixed 30px. The longest of them,
 * $16,675,602, all but fills its card — it measures 136px inside a 174px card
 * with 18px of padding each side, so 19px of clearance, and any wider font
 * (a fallback rendering before Open Sans loads, a larger default text size)
 * puts it against the border. Scale it with the viewport below the desktop
 * breakpoint so it cannot reach the edge regardless of font metrics. */
@media (max-width: 1000px) {
  [style*="font-variant-numeric: tabular-nums"][style*="font-size: 30px"],
  [style*="font-variant-numeric:tabular-nums"][style*="font-size:30px"] {
    font-size: clamp(19px, 4.2vw, 30px) !important;
  }
}

/* The Veridiance workspace header.
 *
 * A fixed 54px nowrap row holding: logo + "Veridiance" and the file crumb, a
 * spacer, the "Shipment files" button, the assistant toggle, a divider, and the
 * tenant name. That wants about 415px and gets 339px inside the embedded frame,
 * so every item shrinks — the title block down to 55px, the tenant name to 24px
 * — and the button, which renders inside a zero-width wrapper, spills back over
 * "Veridiance". The design has no mobile treatment for this row.
 *
 * The tenant name and its divider are the only things here that are not a
 * control or an identity, so they go first; that returns roughly 150px, which
 * is enough. Everything else is pinned against shrinking so the button keeps
 * its size, and only the title truncates — which it is already set up to do.
 *
 * Scoped on height:54px so it cannot touch the marketing pages' header, which
 * is min-height:64px.
 */
@media (max-width: 700px) {
  header[style*="height: 54px"] > span, header[style*="height:54px"] > span {
    display: none !important;
  }
  header[style*="height: 54px"] > *, header[style*="height:54px"] > * {
    flex-shrink: 0 !important;
  }
  header[style*="height: 54px"] > div:first-child,
  header[style*="height:54px"] > div:first-child {
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
}

/* Anchor targets vs the sticky header.
 *
 * The header is sticky. On desktop it is 64px and every section's own top
 * padding clears it, so an in-page link lands correctly. On a phone the header
 * WRAPS to a second row while the section padding shrinks with clamp(). The
 * result is that tapping "See the workspace" or "See what it reads" scrolls the
 * section to the top of the document and its heading sits *behind* the header,
 * so the reader arrives at a section whose title they cannot see.
 *
 * scroll-margin-top offsets where an anchor jump comes to rest. It changes no
 * layout — only the landing position — so nothing about the design moves.
 *
 * 94px is the measured wrapped header, 83px, plus air. It was two bands, 142px
 * below 480px and 94px above it, from when the CTA took a third row and the
 * header stood at 111-131px; the header has been two rows and a flat 83px at
 * every width in this range since then, and the 142px band was leaving 59px of
 * blank screen above the heading it had just jumped to.
 */
@media (max-width: 767px) {
  section[id], [id]:target { scroll-margin-top: 94px; }
}

@media (max-width: 360px) {
  [style*="width: 74px"][style*="flex: 0 0 auto"],
  [style*="width:74px"][style*="flex:0 0 auto"] {
    width: auto !important;
  }
}

/* The three-column value tables — currently the rate matrix on the network
 * page, "Equipment | Mode | $ / mile".
 *
 * It is a `1fr auto auto` grid whose last column sizes to its widest string,
 * "$2,850 / container", which with 10px of cell padding each side comes to
 * 137px. Add 60px of Mode, 101px of Equipment and two 12px gaps and the tracks
 * want 322px inside a 291px card at 375px. Grid does not clip: the row bands
 * and their bottom borders paint straight out over the card's rounded edge,
 * which is what it looks like — a table sliding out of its own box.
 *
 * Three changes, in the order they do the work. Trimming the cell padding to
 * 6px and the gap to 8px returns 32px, which is the whole overrun, so at 375px
 * nothing has to wrap and the table keeps the shape it was drawn with. The
 * minmax(0, auto) and the `white-space: normal` are the safety valve for
 * narrower screens and for a font that renders wider than Open Sans: the value
 * column may then shrink and "$2,850 / container" wraps after the slash, which
 * is ugly but stays inside the card.
 *
 * The scope is where the arithmetic says the single row stops fitting. The card
 * content box is the viewport less two section paddings of 4.5vw and two card
 * paddings of 24px, so 0.91vw - 48, and that clears the 322px the untrimmed
 * tracks want at about 407px. 440 leaves margin.
 *
 * `overflow-wrap: break-word`, NOT `anywhere`. This block previously carried
 * `anywhere`, scoped to 360px, and `anywhere` is one of the few properties that
 * changes intrinsic sizing: it lets a track's min-content collapse to a single
 * character. Under the pressure from the 137px value column the Equipment
 * column did exactly that at 320px — "53' dry van" came down the screen one
 * letter per line, a row nearly 400px tall. `break-word` breaks a long word
 * that cannot fit without offering the layout that as a minimum width.
 *
 * The design has expressed the last track as `128px` and as `auto` across
 * exports; both are matched so a future flip between them cannot silently
 * reopen the overflow. */
@media (max-width: 440px) {
  [style*="grid-template-columns: 1fr auto auto"],
  [style*="grid-template-columns:1fr auto auto"],
  [style*="grid-template-columns: 1fr auto 128px"],
  [style*="grid-template-columns:1fr auto 128px"] {
    grid-template-columns: 1fr auto minmax(0, auto) !important;
    column-gap: 8px !important;
  }
  [style*="grid-template-columns: 1fr auto auto"] > *,
  [style*="grid-template-columns:1fr auto auto"] > *,
  [style*="grid-template-columns: 1fr auto 128px"] > *,
  [style*="grid-template-columns:1fr auto 128px"] > * {
    padding-left: 6px !important;
    padding-right: 6px !important;
    white-space: normal !important;
    overflow-wrap: break-word;
  }
}

/* The benchmark tables scroll sideways, and on a phone nothing says so.
 *
 * Each of the three tabs under "Cost benchmark" is a five-column grid with a
 * min-width of 780-860px inside a 339px box, so at 375px the reader sees the
 * network name and one figure column. The other three, including Savings —
 * which is the number the whole section exists to report — are off to the right
 * behind a horizontal scroll.
 *
 * Which is a reasonable way to put a five-column comparison on a phone, except
 * that iOS draws scrollbars as an overlay that fades out when nothing is
 * moving. At rest the box looks like a table that simply ends after two
 * columns. Styling ::-webkit-scrollbar at all opts that element out of overlay
 * mode and gives it a bar that is always drawn, so the affordance is visible
 * without touching the table itself.
 *
 * Scoped to coarse pointers because that is where the overlay behaviour is;
 * a mouse already gets a persistent scrollbar. */
@media (pointer: coarse) {
  [style*="overflow-x: auto"]::-webkit-scrollbar,
  [style*="overflow-x:auto"]::-webkit-scrollbar {
    -webkit-appearance: none;
    height: 5px;
  }
  [style*="overflow-x: auto"]::-webkit-scrollbar-thumb,
  [style*="overflow-x:auto"]::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgba(0, 7, 22, 0.28);
  }
}

@media (max-width: 700px) {

  /* The flex row that holds the document pane and the assistant pane. */
  div:has(> main):has(> aside) {
    flex-wrap: wrap !important;
    overflow-y: auto !important;
  }

  /* Document pane takes the full width and keeps a usable height. */
  main[style*="flex: 1 1 0%"] {
    flex: 1 1 100% !important;
    min-width: 100% !important;
    min-height: 62vh;
  }

  /* Assistant panel drops below it at full width instead of at a fixed 384px. */
  aside[style*="width: 384px"], aside[style*="width:384px"] {
    width: 100% !important;
    flex: 1 1 100% !important;
    border-left: none !important;
    border-top: 1px solid #E0E3E7 !important;
  }

  /* Opening a document. The review pane is absolutely positioned over that same
   * row and reserves the assistant its 384px by inset: `right:384px` while the
   * assistant is open, `right:0` while it is closed. The row is 340px wide
   * inside the embed, so the right inset is wider than the whole pane and the
   * review computes to a width of ZERO.
   *
   * Nothing then has a box to lay out in. The header crumb and the page image
   * overflow their zero-width parents and still look roughly right, which is
   * what makes this hard to spot, but the decision bar at the foot of the pane
   * does not: its note is `flex:1;min-width:0`, so it takes 32px, sets "Your
   * final call on this document" one word per line down 369px of screen, and
   * the Reject and Accept buttons overflow straight across the column of words.
   *
   * Since the assistant is stacked below rather than beside at this width,
   * there is nothing to the right to reserve. The review takes the full width,
   * which is exactly what the design already does when the assistant is shut.
   * It covers the assistant while open; the header's "Shipment files" button is
   * the way back, as it is on a desktop. */
  .mm-rise[role="dialog"] { right: 0 !important; }
}

/* The review pane's decision bar, once it has a width to lay out in.
 *
 * Same nowrap flex row as the demo dialog's footer: the note, then Reject
 * document at 162px and Accept document at 190px. Those two plus their 14px gap
 * want 366px, and the bar's content box inside the embed is 308px, so the
 * buttons alone do not fit. The note is `flex:1;min-width:0`, so it is the one
 * that gives — squeezed to zero, setting "Your final call on this document"
 * one word per line down 342px of screen while the buttons overflow across it.
 *
 * The note takes the first line and the buttons stack full width under it,
 * rather than sharing a line: at 308px two buttons side by side would have to
 * come down to 147px each and neither label fits that. Full width also gives
 * each one a proper tap target, which a 162px button in a 340px console does
 * not really have.
 *
 * 520px is where the authored single row starts to work — 366px of buttons,
 * their two gaps, the bar's 32px of padding and about 100px for the note to be
 * worth reading. Above that the bar is exactly as designed. Note this measures
 * the WORKSPACE FRAME, not the phone: mobile.css is loaded inside the embedded
 * console as well as by the page around it, and inside the iframe a width query
 * resolves against the iframe. The frame runs about 50px narrower than the
 * phone. .mm-rise exists only in the console, so nothing else can match. */
@media (max-width: 520px) {
  [style*="padding:13px 16px"][style*="border-top:1px solid #E0E3E7"],
  [style*="padding: 13px 16px"][style*="border-top: 1px solid rgb(224, 227, 231)"] {
    flex-wrap: wrap !important;
  }
  [style*="flex:1;min-width:0;font-size:12px"],
  [style*="flex: 1 1 0%"][style*="font-size: 12px"][style*="color: rgb(65, 77, 92)"] {
    flex-basis: 100% !important;
  }
  [style*="padding:13px 16px"][style*="border-top:1px solid #E0E3E7"] button,
  [style*="padding: 13px 16px"][style*="border-top: 1px solid rgb(224, 227, 231)"] button {
    flex: 1 1 100% !important;
    justify-content: center !important;
  }
}

/* The review pane's toolbar, for the same reason and with worse consequences.
 *
 * One 50px nowrap row, `overflow:hidden`, holding six things: the File back
 * button (65px), the document-kind chip (59), the title (which truncates, but
 * not below its own min-width:120px), the status chip (58), then Escalate and
 * Approve all (259 together). With the gaps and the row's padding that is 633px
 * of toolbar in 340px of console, and because the row hides its overflow rather
 * than scrolling it, the last 293px is not merely off-screen — Escalate and
 * Approve all cannot be reached at all, and the status chip is sliced in half at
 * the frame edge.
 *
 * Nothing here can be trimmed into one row: the back button, both chips and the
 * two actions come to 441px before the title gets a pixel. So the row wraps and
 * the two actions take the second line, which leaves the first line at 212px of
 * controls and about 96px of title — still truncating, as it already was at 120.
 * The title needs `flex-basis: 0` as well as the min-width, or it wraps to a
 * line of its own: its authored basis is `auto`, meaning the width of the whole
 * untruncated title, and a flex item whose base size does not fit the line it is
 * on moves to the next one instead of shrinking. At a basis of 0 it takes what
 * is left of the first line, which is the behaviour the ellipsis was written
 * for.
 * The authored 50px height has to become auto for a second line to have
 * anywhere to go, and the 9px of vertical padding replaces what align-items was
 * doing for a single row.
 *
 * 660px, against the frame rather than the phone: the toolbar's own 633px plus
 * air. This is a wider bound than the decision bar's 520 because the toolbar
 * carries more, so between the two a tablet-width frame wraps the toolbar and
 * leaves the decision bar alone. */
@media (max-width: 660px) {
  [style*="height:50px"][style*="border-bottom:1px solid #E0E3E7"],
  [style*="height: 50px"][style*="border-bottom: 1px solid rgb(224, 227, 231)"] {
    flex-wrap: wrap !important;
    height: auto !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }
  [style*="height:50px"][style*="border-bottom:1px solid #E0E3E7"] > h2,
  [style*="height: 50px"][style*="border-bottom: 1px solid rgb(224, 227, 231)"] > h2 {
    flex-basis: 0 !important;
    min-width: 0 !important;
  }
  [style*="height:50px"][style*="border-bottom:1px solid #E0E3E7"] > div:last-child,
  [style*="height: 50px"][style*="border-bottom: 1px solid rgb(224, 227, 231)"] > div:last-child {
    flex-basis: 100% !important;
  }

  /* And the kind chip goes, which is what makes the title worth keeping. With
   * it there the title gets 96px and comes out as "Signe..." or "Packi...",
   * which identifies nothing; without it, 165px and "Signed delivery re...".
   * The chip says Transport or Packing or Customs, which the card you just
   * tapped said too, and the title is the only thing in this pane that names
   * the document. First span in the row is the kind; the status chip beside it
   * is the second and stays. */
  [style*="height:50px"][style*="border-bottom:1px solid #E0E3E7"] > span:first-of-type,
  [style*="height: 50px"][style*="border-bottom: 1px solid rgb(224, 227, 231)"] > span:first-of-type {
    display: none !important;
  }
}

/* Escalate and Approve all come to 259px side by side, and the second row they
 * now sit on is 254px wide at 320px, so Approve all was losing 5px off its
 * right edge. Their 14 and 16px of side padding is the cheapest 12px to find,
 * and stacking them for the sake of five pixels would cost 42px of a console
 * that has none to spare. Narrowest phones only. */
@media (max-width: 380px) {
  [style*="height:50px"][style*="border-bottom:1px solid #E0E3E7"] > div:last-child button,
  [style*="height: 50px"][style*="border-bottom: 1px solid rgb(224, 227, 231)"] > div:last-child button {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}