/* Customer Portal CSS for tablet devices (768px - 1023px) */

/* --- Sidebar: slide off-screen to the left by default --- */
.aside {
    transform: translateX(calc(-100% - 26px));
    transition: transform 0.3s ease;
    z-index: 200;
}

/* Dark mode: --sidebar-bg is a ~5% white glass tint, meant to sit beside solid desktop
   content. Here the sidebar slides in as an overlay ON TOP of the page, so that near-
   transparent background lets the page content behind it show through. Force a solid,
   opaque surface (matching the sidebar's own logout-button dark shade) instead. */
html.dark .aside {
    background: #1E1E1E;
}

/* Sidebar visible when hamburger opens it */
.aside.sidebar-open {
    transform: translateX(0);
}

/* Sidebar shrunk state on tablet = fully hidden (no compact mode) */
.aside.sidebar-shrunk {
    width: 250px;
    transform: translateX(calc(-100% - 26px));
}

/* --- Overlay: shown when sidebar is open --- */
.sidebar-overlay.active {
    display: block;
}

/* --- Hide desktop shrink toggle buttons --- */
.shrink-out,
.shrink-in,
.collapseButton {
    display: none !important;
}

/* --- Show hamburger button --- */
.hamburger-menu-btn {
    display: flex;
}

/* --- Content: full width (no sidebar offset) --- */
.content {
    margin-left: 24px;
    margin-right: 24px;
}

/* Reset shrunk-sidebar content offset */
.aside.sidebar-shrunk + .wrapper .content {
    margin-left: 24px;
}

/* --- Page header: background spans full width, but the bottom border is inset by the
   same amount as the header's own left/right padding, so it lines up with the content
   instead of running edge-to-edge. Base .page-header's border-bottom is removed and
   replaced with a ::after line positioned inward by that padding amount. --- */
.page-header {
    left: 0;
    right: 0;
    padding-left: 24px;
    padding-right: 24px;
    transition: none;
    border-bottom: none;
}
.page-header::after {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 0;
    height: 0.8px;
    background: var(--header-border);
}

/* Reset shrunk-sidebar page header offset */
.aside.sidebar-shrunk + .wrapper .page-header {
    left: 0;
}

/* --- Header layout: controls row on top, title + subheader below --- */
.page-header {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 16px;
}

.page-header-controls {
    order: -1;
    width: 100%;
    justify-content: space-between;
}

.page-header .h1,
.page-header .body-medium,
.page-header .welcome-text > span {
    text-align: left !important;
}

/* --- EasyClearJobCreate header: hamburger+toggle become row 1 (space-between),
   title + New Draft stay on the same row 2 (New Draft only wraps below if it doesn't fit) --- */
.page-header-easyclear-flex {
    /* row-gap would stack on top of the break line's own height below, doubling the
       gap -- the break's height alone provides the row1-to-row2 spacing instead. */
    row-gap: 0;
}
.page-header-easyclear-title {
    order: 4;
    margin-right: 0;
    flex: 1 1 auto;
}
.page-header-easyclear-hamburger {
    order: 1;
    margin-right: auto;
}
.page-header-easyclear-toggle {
    order: 2;
}
.page-header-easyclear-break {
    display: block;
    order: 3;
    flex-basis: 100%;
    height: 24px;
}
.page-header-easyclear-newdraft {
    order: 5;
    margin-left: auto;
}

/* --- Show shrink arrow when sidebar is open (tap to close) --- */
.aside.sidebar-open .shrink-out {
    display: flex !important;
}

/* --- Dashboard: stats cards 2 per row on tablet --- */
.tw-grid-cols-3 {
    grid-template-columns: repeat(2, 1fr) !important;
}

/* --- Jobs: filter textbox full width on tablet --- */
.jobs-filter-tb {
    width: 423px !important;
    box-sizing: border-box !important;
}

/* --- AccountDetailsGeneric: Filter By / Account Type / Active filters -- 2 per row on
   tablet instead of the desktop flex row (which just squeezes all three into one line
   regardless of width). !important needed -- tw-flex sets its own display. --- */
.acc-filters-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px !important;
}
/* The two custom dropdowns (.dropdown-button-selected has a hardcoded 212px inline width,
   .dropdown-button is display:inline-block so it shrinks to that same 212px) stay pinned
   at their desktop width regardless of the grid column being equal-width now, so they end
   up narrower than the Filter By text input beside/above them. Scoped to .acc-filters-row
   since .dropdown-button is a shared component used elsewhere too. !important needed to
   beat the inline width style. */
.acc-filters-row .dropdown-button {
    display: block;
    width: 100%;
}
.acc-filters-row .dropdown-button-selected {
    width: 100% !important;
    box-sizing: border-box;
}

/* --- Jobs: date range stack label + input as column pairs on tablet --- */
.jobs-date-range {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px;
}
.jobs-date-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.jobs-date-sep {
    margin-top: 40px !important;
    margin-bottom: 0 !important;

}

/* CustomerEasyClearPeriods No Contract message: real inline text flow so the email link
   wraps mid-sentence. !important needed -- tw-flex and .text-primary-button both set
   their own display:flex. */
.easyClearNoContract {
    display: block !important;
}
.easyClearNoContract > * {
    display: inline !important;
}

/* --- CustomerEasyClearPeriods: remove the top gap above this section, same as mobile. --- */
.easyClearPeriodsMain {
    margin-top: 0 !important;
}

/* --- Downloads: date range inputs 150px each on tablet --- */
.date-range-row .input {
    width: 150px !important;
}

/* --- Legacy datagrid tables (Products, Regular Job, Job Create, Invoices, KPIs):
   scroll horizontally instead of squeezing/wrapping columns --- */
.clsRoundedTable.datagrid {
    overflow-x: auto;
    overflow-y: hidden;
}
.clsRoundedTable.datagrid::-webkit-scrollbar {
    height: 8px;
}
.clsRoundedTable.datagrid::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
}
.clsRoundedTable.datagrid::-webkit-scrollbar-thumb {
    background: #00A192;
    border-radius: 4px;
}
.clsRoundedTable.datagrid::-webkit-scrollbar-thumb:hover {
    background: #005540;
}
.clsRoundedTable.datagrid {
    scrollbar-width: thin;
    scrollbar-color: #00A192 transparent;
}
.clsRoundedTable.datagrid table {
    width: auto;
    min-width: 100%;
}
.clsRoundedTable.datagrid table th,
.clsRoundedTable.datagrid table td {
    white-space: nowrap;
}
/* The outer wrapper table has exactly one column (one <td> per row);
   fixed layout stops that cell auto-expanding to the inner table's full
   content width, which would otherwise make the whole page scroll instead
   of just the table. Base .clsOuterTable rule uses table-layout:auto
   !important, so this needs !important too to take effect. */
table.clsOuterTable.plainTable:has(.clsRoundedTable.datagrid) {
    table-layout: fixed !important;
}

/* --- Generic list tables (Live Jobs, KPIs, Recent Invoices, Address Selector, Customs
   Documents, etc.): scroll horizontally instead of squeezing/wrapping columns.
   Scoped via :has(thead.table-head) so only .container divs that actually wrap one of
   these tables are affected -- .container is reused for many non-table layouts across
   the portal, and :has() keeps this rule from touching those.
   NOTE: doesn't cover CustomerStatement.ascx (div-based .table-head, not <thead>) --
   see the .table-scroll rules further down instead. */
.container:has(thead.table-head):not(:has(.table-scroll-outer)) {
    overflow-x: auto;
    overflow-y: hidden;
}
.container:has(thead.table-head):not(:has(.table-scroll-outer))::-webkit-scrollbar {
    height: 8px;
}
.container:has(thead.table-head):not(:has(.table-scroll-outer))::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
}
.container:has(thead.table-head):not(:has(.table-scroll-outer))::-webkit-scrollbar-thumb {
    background: #00A192;
    border-radius: 4px;
}
.container:has(thead.table-head):not(:has(.table-scroll-outer))::-webkit-scrollbar-thumb:hover {
    background: #005540;
}
.container:has(thead.table-head):not(:has(.table-scroll-outer)) {
    scrollbar-width: thin;
    scrollbar-color: #00A192 transparent;
}
.container:has(thead.table-head):not(:has(.table-scroll-outer)) table {
    width: auto;
    min-width: 100%;
}
.container:has(thead.table-head):not(:has(.table-scroll-outer)) th,
.container:has(thead.table-head):not(:has(.table-scroll-outer)) td {
    white-space: nowrap;
}

/* Belt-and-suspenders for the rule above: :has() nested inside :not() isn't reliably
   supported everywhere, so a .container that has a .table-scroll-outer descendant can
   still incorrectly match .container:has(thead.table-head) and get overflow-y: hidden.
   This re-asserts the correct scroll behavior directly, using only a plain :has(). */
.container:has(.table-scroll-outer) {
    overflow-y: scroll !important;
}

/* Force vertical scroll on a .container regardless of the :has(thead.table-head) rules
   above -- use directly rather than relying on sibling detection, which breaks across
   multi-step flows where visibility toggles at each step. */
.res-force-scroll-y {
    overflow-y: scroll !important;
}

/* Shared table scroll wrapper (Live Jobs, KPIs, Recent Invoices, Address Selector, Customs
   Documents, etc.): scoping overflow-x to .container itself (the generic rule above) drags
   the container's own border/padding box into the scrolling element, and its side borders
   disappear mid-scroll. .table-scroll-outer is a static (non-scrolling) shell: it owns the
   card's visible border/background/radius so that chrome never moves. .container inside it
   is stripped of its own border/background so there's no double border, and stays 100% wide
   (it does NOT grow with the table). .table-scroll is the actual scrolling element -- it
   wraps just the table (and any pager row) so only that inner content scrolls, while the
   outer card stays put. */
/* .table-scroll-outer {
    border-radius: 16px;
    background-color: var(--container-fill);
    border: 1px solid var(--container-border);
    margin-top: var(--margin-top, 32px);
} */
.table-scroll-outer .container {
    background-color: transparent;
    border: none;
    border-radius: 0;
    margin-top: 0;
    /* !important: must beat .container:has(thead.table-head):not(:has(.table-scroll-outer))'s overflow-y: hidden,
       whose :has() argument gives it higher specificity than this selector */
    overflow-y: scroll !important;
}
.table-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    /* !important: some .table-scroll usages (e.g. FolderDetail's Files table) carry their
       own inline padding-bottom, which otherwise beats this class regardless of source
       order -- every table's scrollbar should sit at this same distance from its content. */
    padding-bottom: 16px !important;
}
.table-scroll::-webkit-scrollbar {
    height: 8px;
}
.table-scroll::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
}
.table-scroll::-webkit-scrollbar-thumb {
    background: #00A192;
    border-radius: 4px;
}
.table-scroll::-webkit-scrollbar-thumb:hover {
    background: #005540;
}
.table-scroll {
    scrollbar-width: thin;
    scrollbar-color: #00A192 transparent;
}
.table-scroll table {
    width: auto;
    min-width: 100%;
}
.table-scroll th,
.table-scroll td {
    white-space: nowrap;
}
/* CustomerStatement: div-based grid, not a <table> -- min-width goes on .table-head/
   .table-body (not the grid) so their existing border-bottom spans the full row width. */
.table-scroll .table-head,
.table-scroll .table-body {
    min-width: 960px;
}
/* CustomerStatement: column widths sized per section's content, not equal. */
.table-scroll .tw-grid-cols-12 {
    grid-template-columns: repeat(3, minmax(0, 0.85fr)) repeat(3, minmax(0, 1fr)) repeat(3, minmax(0, 1.2fr)) repeat(3, minmax(0, 0.95fr));
}
/* Pager rows (e.g. .ccd-pagination-row) that live inside .table-scroll alongside the
   table: pin them to the left edge of .table-scroll's scrollport so they stay visually
   fixed -- matching the top pagination row, which sits outside .table-scroll entirely and
   never scrolls -- while only the table shifts underneath as it scrolls. */
.table-scroll .ccd-pagination-row {
    position: sticky;
    left: 0;
}

/* EasyClearInvoice: dedicated, :has()-free scroll wrapper for the invoice-lines table.
   The generic .container:has(thead.table-head):not(:has(.table-scroll-outer)) rule above isn't reliably applying (likely
   :has() support), and this .container is also shared with the edit-line form below it, so
   an uncontained table forced the whole page wrapper to scroll horizontally instead of just
   the table. */
.ci-lines-scroll {
    overflow-x: auto;
    overflow-y: hidden;
}
.ci-lines-scroll::-webkit-scrollbar {
    height: 8px;
}
.ci-lines-scroll::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
}
.ci-lines-scroll::-webkit-scrollbar-thumb {
    background: #00A192;
    border-radius: 4px;
}
.ci-lines-scroll::-webkit-scrollbar-thumb:hover {
    background: #005540;
}
.ci-lines-scroll {
    scrollbar-width: thin;
    scrollbar-color: #00A192 transparent;
}
.ci-lines-scroll table {
    width: auto;
    min-width: 100%;
}
.ci-lines-scroll th,
.ci-lines-scroll td {
    white-space: nowrap;
}
/* Upload-list tables (CustomerCICustomerPhysical/EasyClearPhysicalInvoice): keep the doc-name
   input and doc-type dropdown at a usable minimum width instead of shrinking with the
   squeezed column. */
.ci-lines-scroll td .input,
.ci-lines-scroll td .c4-dropdown-wrapper {
    min-width: 220px !important;
}

/* --- Vehicle type cards (Quote & Book): 3 per row on tablet ---
   .radio-button-list-card is the <table> itself (RadioButtonList's default render);
   display:flex on a table doesn't blockify its <tbody>/<tr> descendants, so they stay
   table-row-group/table-row and ignore flex sizing. display:contents removes their own
   boxes so the actual flex items become the <td>s, which we then size directly. */
.radio-button-list-card {
    flex-wrap: wrap;
    width: 100%;
}
.radio-button-list-card tbody,
.radio-button-list-card tr {
    display: contents;
}
.radio-button-list-card td {
    display: block;
    flex: 1 1 calc((100% - 32px) / 3);
    box-sizing: border-box;
}
.radio-button-list-card label {
    width: 100%;
}

/* --- Contact cards (CustomerC4Contact): 2 per row on tablet -- .card2 has a fixed
   280px width for desktop's single row, so it needs an explicit override here. --- */
.card2-row {
    flex-wrap: wrap;
}
.card2-row .card2 {
    width: calc((100% - 32px) / 2);
}

/* Quote & Book: Customs checkboxes stack one per row, full width (Extras row stays same-row/auto-width on tablet) */
.customsChk .checkbox-card-item label {
    width: 100% !important;
}

/* Quote & Book: Extras row items share the row width equally, however many fit per line */
.extrasRow > span {
    flex: 1 1 0;
}
.extrasRow > span .checkbox-card-item label {
    width: 100% !important;
}

/* Quick Load Def: Delete/Add-Change header buttons space apart instead of a fixed gap */
.loadHeaderRow {
    justify-content: space-between !important;
    gap: 0 !important;
}

/* OnlineCustomsJobCreate: Forms section -- label + field stay inline as on desktop; only
   the error message (if present) wraps to its own line, indented to line up with the
   field's left edge (200px label column + 8px row gap = 208px). */
.onlineCustomsForm div:has(> .input-label-body-medium) {
    flex-wrap: wrap;
}
.onlineCustomsForm div:has(> .input-label-body-medium) > div:not(.c4-dropdown-wrapper):not(:has(> .input)):not(:has(> .c4-dropdown-wrapper)):not(:has(.addressFullClassExtra)) {
    display: contents;
}
/* Vehicle Registration's mandatory wrapper nests an extra div around its two conditional
   error spans (the field doubles as Vehicle Reg / Container Number), one level deeper than
   every other field's flatter wrapper. Even with both spans absent, ASP.NET still renders
   the whitespace between them as text nodes, so it's never :empty -- it still reserves its
   own flex gap, narrowing the input beside it. Collapse it unconditionally instead; its
   error-message children already get their own flex:1 1 100% rule below, same as every
   other field's un-nested error span. */
.onlineCustomsForm div:has(> .input-label-body-medium) > div > div.tw-flex.tw-flex-col {
    display: contents;
}
/* Fields here keep their fixed declared width (350px for most, unlike Mobile where fields
   grow/shrink), so the error message needs a matching fixed max-width, not a percentage. */
.onlineCustomsForm .error-message {
    flex: 1 1 100%;
    margin-left: 208px;
    max-width: 350px;
}
/* Location Search's input cascades width:100% through its wrapper chain, which inflates
   divSearch's shrink-to-fit hypothetical size and pushes the row to wrap instead of staying
   inline like every other field. Give divSearch itself a direct, unambiguous flex-basis
   instead of leaving it to resolve the wrapper chain's shrink-to-fit sizing. */
.onlineCustomsForm div:has(> .input-label-body-medium) > div:has(.addressFullClassExtra) {
    flex: 0 0 350px;
}
.onlineCustomsForm .addressFullClassExtra {
    width: 350px !important;
}

/* EasyClearJobCreate: Next/Save/Home/Book Job buttons wrap instead of overflowing on narrow screens. */
.RequestButtons {
    flex-wrap: wrap;
}

/* OnlineCustomsJobCreate: tighter gap above the buttons row on tablet. */
.OCCButtons {
    margin-top: 32px !important;
}

/* EasyClearInvoiceLine (edit line panel): label + field stay inline as on desktop; only the
   error message (if present) wraps to its own line, indented to line up with the field's left
   edge (190px label column + 8px row gap = 198px). */
.easyClearInvoiceLineForm .input-group-row {
    flex-wrap: wrap;
}
.easyClearInvoiceLineForm .input-group-row > .tw-flex.tw-items-center.tw-gap-\[8px\] {
    display: contents;
}
.easyClearInvoiceLineForm .input-group-row > .input,
.easyClearInvoiceLineForm .input-group-row > .textarea,
.easyClearInvoiceLineForm .input-group-row > .c4-dropdown-wrapper,
.easyClearInvoiceLineForm .input-group-row > div[id$="divCntry"] {
    width: 300px !important;
    max-width: 300px !important;
    flex: 0 0 auto;
    min-width: 0;
}
/* <input> is a replaced element -- width:auto falls back to its intrinsic size instead of
   stretching to fill divCntry, so the nested lookup textbox needs its own explicit width. */
.easyClearInvoiceLineForm .input-group-row > div[id$="divCntry"] > .input {
    width: 100% !important;
}
/* Licence Pieces: textbox and unit dropdown match the other fields' 300px width. */
.easyClearInvoiceLineForm .ci-licence-pieces-group > .input,
.easyClearInvoiceLineForm .ci-licence-pieces-group > .c4-dropdown-wrapper {
    width: 300px !important;
    max-width: 300px !important;
}
.easyClearInvoiceLineForm .error-message:not([id$="spnError"]) {
    flex: 1 1 100%;
    margin-left: 198px;
    width: 300px !important;
    max-width: 300px;
    min-width: 0 !important;
}
/* Other Conditions / Advanced Options panels carry a fixed 1400px width that would otherwise
   force horizontal scrolling. */
.ci-other-conditions,
.ci-advanced-options {
    width: 100% !important;
    max-width: 100% !important;
}

/* Save/Delete/Cancel (EasyClearInvoiceLine) and CI Buttons (EasyClearInvoice) rows wrap
   instead of overflowing on narrow screens. */
.ci-line-buttons,
.ci-buttons-wrap {
    flex-wrap: wrap;
}

/* CustomerCustomsDocuments: Filters grid -- 2 columns on tablet. */
.ccd-filters-grid {
    grid-template-columns: repeat(2, 1fr) !important;
}

/* CustomerCustomsDocuments: tighter gap between pagination buttons on tablet. */
.ccd-pagination-row .pager-div,
.ccd-pagination-row .pager-div > span {
    gap: 4px !important;
}

/* CustomerCustomsDocuments: cap the numeric page-jump buttons at 1, 2, 3 on tablet -- the
   full unrestricted page list doesn't fit tablet's width alongside First/Previous/Next, but
   unlike mobile (which hides all of them) tablet has room to keep the first three. The
   current page renders as a plain (non-.pager-btn) span, so it already counts as one of the
   3 visible numbers -- only 2 more .pager-btn links should stay, so this hides from the 3rd
   .pager-btn onward. Chained general-sibling selectors (rather than :nth-child(of S), which
   isn't reliably supported) match a .pager-btn once 2 earlier .pager-btn siblings exist,
   regardless of other elements (First/Previous, text nodes) interspersed between them. Also
   hides the ellipsis (unclassed <a>/input[type=submit]) NumericPagerField renders once the
   page count exceeds what's shown, since with the list capped it has nothing to lead into.
   .pager-btn-secondary (First/Previous/Next) is a different class and stays visible. */
.ccd-pagination-row .pager-btn ~ .pager-btn ~ .pager-btn,
.ccd-pagination-row .pager-div input[type="submit"]:not([class]),
.ccd-pagination-row .pager-div a:not([class]) {
    display: none !important;
}
/* DataPager renders a literal &nbsp; text node between each field for spacing -- with
   numbers 4+ now hidden by display:none (which drops their box but not their neighboring
   text nodes), those stray &nbsp;s become visible gaps. Collapsing font-size to 0 on the
   pager's root shrinks them to near-zero width; restore it on everything meant to stay
   visible (First/Previous/Next, the kept 1/2/3 buttons, and the current-page indicator). */
.ccd-pagination-row span[id*="dpJobs"] {
    font-size: 0;
}

/* DocumentLibrary: Sub Folders / Files tables scroll horizontally instead of overflowing
   the card -- their fixed % column widths (plus extra Access/Show Log columns for
   full-access users) can compute wider than the detail panel. File names still wrap
   normally (no forced nowrap needed). */
.docs-table-scroll {
    overflow-x: auto;
    overflow-y: hidden;
}
.docs-table-scroll::-webkit-scrollbar {
    height: 8px;
}
.docs-table-scroll::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
}
.docs-table-scroll::-webkit-scrollbar-thumb {
    background: #00A192;
    border-radius: 4px;
}
.docs-table-scroll::-webkit-scrollbar-thumb:hover {
    background: #005540;
}
.docs-table-scroll {
    scrollbar-width: thin;
    scrollbar-color: #00A192 transparent;
}
.ccd-pagination-row .pager-btn-secondary,
.ccd-pagination-row .pager-btn,
.ccd-pagination-row span[id*="dpJobs"] > span > span:not([class]):not(:empty) {
    font-size: 14px;
}

/* DocumentLibrary: tree + detail panel stack vertically instead of side-by-side, same as
   mobile -- a fixed 300px tree column leaves no usable room for the detail panel at
   tablet widths either. !important is needed here -- DocumentLibrary.ascx's own <style>
   block sets the fixed 300px width with the same selector specificity and no media query,
   and it renders later in the document than this stylesheet, so it wins the cascade tie
   without !important. */
.dl-container {
    flex-direction: column;
    /* DocumentLibrary.ascx's own <style> block sets align-items: flex-start, meant for the
       desktop row layout (top-aligning the two side-by-side panels). In column direction
       align-items instead controls the horizontal axis, and flex-start makes each panel
       shrink-to-fit its content's width instead of stretching full width -- override back
       to stretch so the tree reliably fills the container. */
    align-items: stretch !important;
}
/* The desktop shrink-to-300px transition (flex/max-width, set in DocumentLibrary.ascx's
   own <style> block) is still inherited here even though tablet keeps both panels full
   width -- transitioning flex-basis between "100%" and "auto" isn't smoothly interpolable,
   so the browser does a discrete jump mid-animation, visible as a brief width flicker on
   selection even though the settled width never actually changes. Not needed on tablet
   since there's no side-by-side resize happening, so just turn it off. */
.dl-left-panel,
.dl-right-panel {
    transition: none !important;
}
.dl-folder-selected .dl-left-panel {
    flex: 1 1 auto !important;
    max-width: 100% !important;
}

/* FolderTree: each node row is 71px tall (set in FolderTree.ascx's own <style> block for
   desktop touch targets), which makes the tree take up excessive vertical space now that
   it stacks above the detail panel instead of sitting beside it. !important is needed --
   FolderTree.ascx's rule has the same selector specificity and renders later in the
   document than this stylesheet, so it wins the cascade tie without it (same issue as
   .dl-container above). */
.treeMain table > tbody > tr:first-child {
    min-height: 64px !important;
    padding: 0 18px !important;
}

.treeMain td a {
    font-size: 14px;
    line-height: 20px;
}

.folder-icon svg {
    width: 24px;
    height: 24px;
}

/* For reduce dashboard top padding on each pages*/
.res-no-top-padding {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.res-no-top-margin {
    margin-top: 0 !important;
}

.res-no-padding {
    padding: 0 !important;
}

/* --- CustomerDownloads: Days-count / "Since" date rows (radio + label + field) --
   wrap onto multiple lines on tablet instead of overflowing the card. The field
   (dropdown or date input) needs an explicit width here too -- without one, a wrapped
   flex item with no width shrinks to fit the remaining line space and its text
   reflows like a paragraph instead of moving to its own line as a whole block. */
.cus-email-days-row,
.cus-email-from-row {
    flex-wrap: wrap !important;
    row-gap: 8px !important;
}
/* ddlDays becomes a .c4-dropdown-wrapper/-trigger widget at runtime (C4BehaviourNew9.js),
   which has its own separate width rule, so both need the override to keep the same
   100px width it has on desktop. */
.cus-email-days-row .c4-dropdown-wrapper,
.cus-email-days-row .c4-dropdown-trigger {
    width: 100px !important;
}
.cus-email-from-row .input {
    width: 150px !important;
}
/* "Every ... send day" rows (weekly/monthly) -- same wrap treatment, no radio button.
   mediumInput's ListBox becomes a .c4-dropdown-wrapper/-trigger widget too, same as
   ddlDays/ddlWeeks/ddlMonths above, so needs the same override on both. */
.cus-email-weekly-every-row,
.cus-email-monthly-every-row {
    flex-wrap: wrap !important;
    row-gap: 8px !important;
}
.cus-email-weekly-every-row .c4-dropdown-wrapper,
.cus-email-weekly-every-row .c4-dropdown-trigger {
    width: 110px !important;
}
.cus-email-monthly-every-row .c4-dropdown-wrapper,
.cus-email-monthly-every-row .c4-dropdown-trigger {
    width: 100px !important;
}

.res-no-top-margin {
    margin-top: 0 !important;
}