/* ==========================================================================
   Kimbo Portal — phone layer (Oct 2026 check-up)
   Loads after every other stylesheet. Fixes found by opening every page as a
   Super admin and as a client on a 390px phone; most rules apply to phones only.
   ========================================================================== */

/* --- Nothing pushes the page sideways -------------------------------------
   Screen-reader labels and sticky headers inside a sideways-scrolling table
   escaped their scroll box and made the whole page wider than the phone, so
   the phone zoomed the page out (Cargo release, Kimbo AI settings and
   automations, customs declaration). Keep them inside the box. */
.k-ui .table-responsive,.k-ui .k-cd-items,.k-ui .overflow-auto,.k-ui .k-scroll-x{position:relative}
.k-ui .k-sr,.k-ui .sr-only,.k-ui .visually-hidden{left:0;top:0}

.k-ui .k-content canvas{max-width:100%}

/* --- Customs settings: exchange-rate rows line up ------------------------- */
.k-ui .k-cd-grid>.d-flex.align-items-end{align-items:flex-start!important}

/* --- Kimbo AI conversation: the question bubble was grey on navy ---------- */
.k-ui .card-body>div[style*="background:#00263E"],.k-ui .card-body>div[style*="background:#00263E"] *{color:#fff!important}

/* --- Profile picture never spills out of its circle ----------------------- */
.k-ui .profile-avatar{overflow:hidden}
.k-ui .profile-avatar img{width:100%;height:100%;object-fit:cover;font-size:12px;color:transparent}

/* --- Hotel switcher (client logins with several hotels): one slim row ----- */
.k-ui .portal-hotel-bar{padding:8px 32px;display:block}
.k-ui .portal-hotel-bar form{display:flex;flex-wrap:nowrap!important;align-items:center;gap:10px;max-width:640px;margin:0}
.k-ui .portal-hotel-bar label{margin:0;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--k-muted);white-space:nowrap}
.k-ui .portal-hotel-bar select{flex:1 1 0%;width:auto!important;min-width:0;height:40px;font-weight:600}
.k-ui .portal-hotel-bar button{flex:none;height:40px;padding:0 14px}
.k-ui .portal-hotel-bar small{display:none}

/* --- Old "people" cards (Admins, Drivers, Staff, Suppliers on phones) ----- */
.k-ui .card-view .shipment-card{gap:12px;align-items:flex-start!important;padding:14px!important;border:1px solid var(--k-line)!important;border-radius:12px!important;background:#fff!important;box-shadow:none!important;margin-bottom:10px}
.k-ui .card-view .shipment-card .card-content{min-width:0}
.k-ui .card-view .shipment-card h4{font-size:16px!important;line-height:1.3!important;font-weight:700!important;color:var(--k-navy)!important;margin:0 0 4px!important;overflow-wrap:anywhere}
.k-ui .card-view .shipment-card p,.k-ui .card-view .shipment-card .small,.k-ui .card-view .shipment-card span:not(.badge-status):not(.k-chip){font-size:13px!important;line-height:1.4!important;color:var(--k-ink-2)!important;overflow-wrap:anywhere}
.k-ui .card-view .shipment-card p{margin:0 0 2px!important}
.k-ui .card-view .shipment-card .avatar{width:40px!important;height:40px!important;font-size:14px!important;flex:none}
.k-ui .card-view .shipment-card .badge-status{font-size:11px!important}

/* --- Phones ---------------------------------------------------------------- */
@media (max-width:767px){
  /* Form fields at 16px: iPhone no longer zooms the page in when one is tapped */
  .k-ui input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),.k-ui select,.k-ui textarea,
  .k-auth input:not([type=checkbox]):not([type=radio]),.k-auth select{font-size:16px!important}

  /* The navy header slides away while you scroll down and comes back as soon as you scroll up */
  .k-ui .k-topbar{transition:transform .22s ease;will-change:transform}
  body.k-ui.k-head-away .k-topbar{transform:translateY(-100%)}
  .k-ui .chatbot-trigger{transition:transform .22s ease,opacity .22s ease}
  body.k-ui.k-head-away .chatbot-trigger{transform:translateY(24px);opacity:0;pointer-events:none}
  /* The Kimbo AI button: a little smaller so it covers less of the page */
  .k-ui .chatbot-trigger{width:52px;height:52px;padding:0!important;justify-content:center}

  /* Hotel switcher on a phone */
  .k-ui .portal-hotel-bar{padding:8px 12px}
  .k-ui .portal-hotel-bar label{display:none}

  /* Buttons and links are easy to tap (at least 40px high) */
  .k-ui .k-content .btn-sm,.k-ui .k-content .btn.btn-sm{min-height:40px;display:inline-flex;align-items:center;justify-content:center}
  .k-ui .k-content .table-action-group .btn,.k-ui .k-content .card-view .btn{min-width:40px;min-height:40px}
  .k-ui .k-content .btn-link{min-height:36px;display:inline-flex;align-items:center}
  .k-ui .k-crumbs a{display:inline-flex;align-items:center;min-height:32px}
  .k-ui :not(.form-switch)>.form-check-input[type=checkbox],.k-ui :not(.form-switch)>.form-check-input[type=radio]{width:22px;height:22px}

  /* Old people cards: actions on their own row, full width */
  .k-ui .card-view .shipment-card{flex-wrap:wrap}
  .k-ui .card-view .shipment-card>.icon{flex:none}
  .k-ui .card-view .shipment-card .card-content{flex:1 1 0%;min-width:0}
  .k-ui .card-view .shipment-card .card-right{flex:1 1 100%;display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left!important}
  .k-ui .card-view .shipment-card .card-right>.mt-3{margin-top:0!important}

  /* Long words and e-mail addresses wrap instead of running off a card */
  .k-ui .k-card-sub,.k-ui .card-body p,.k-ui .k-kv dd,.k-ui .k-fin-kv dd{overflow-wrap:anywhere}

  /* Page bottom clears the tab bar and the Kimbo AI button */
  .k-ui .app-body.k-content{padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))!important}

  /* Delivery note cards: the person chip stays inside its box */
  .k-ui .k-chip{max-width:100%;white-space:normal;height:auto;min-height:22px}
}

@media (prefers-reduced-motion:reduce){.k-ui .k-topbar,.k-ui .chatbot-trigger{transition:none!important}}
@media print{.k-ui .portal-hotel-bar{display:none!important}}

/* --- KIMBO-MOBILE-2 start (20 Oct 2026): second phone check-up --- */
/* Every admin and client page opened again on 390px and 360px phones. */
/* Settings: the 10 section tabs were one strip cut off at the screen edge
   ("API Credentials … Audit Logs"); on phones and tablets they are now an even
   grid, every section visible. */
@media (max-width:991px){
  .k-ui .k-settings .k-subnav{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:4px;overflow:visible;padding:4px}
  .k-ui .k-settings .k-subnav a{display:flex;align-items:center;justify-content:center;text-align:center;white-space:normal;min-height:40px;padding:6px 8px;font-size:13px;line-height:1.2}
}

@media (max-width:767px){
  /* Deliveries, Dispatch board, Live map, Issues, Vehicles, Vehicle checks,
     Expenses: the strip was cut off after "Issu" and the open tab could be
     off-screen. Same even grid as the finance tabs. */
  .k-ui .k-seg.k-drivers-nav{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:4px;width:100%;max-width:100%;overflow:visible}
  .k-ui .k-seg.k-drivers-nav a{flex:none;justify-content:center;text-align:center;white-space:normal;height:auto;min-height:40px;padding:6px 8px;line-height:1.2}

  /* Customer page "New" and "More" menus ran off the right and left edge.
     On a phone they open just under their button, as wide as the buttons row. */
  .k-ui .k-page-actions{position:relative}
  .k-ui .k-page-actions>.k-act{position:static}
  .k-ui .k-page-actions>.k-act>.k-act-list{top:auto;left:0;right:0;min-width:0;margin-top:6px;max-height:70vh;overflow-y:auto}
  .k-ui .k-page-actions>.k-act .k-act-form{min-width:0}

  /* Service performance (clients see it too): the lane, port, client and driver
     tables fit the phone instead of hiding columns off to the right. */
  .k-ui section[aria-labelledby^="perf-"] .k-table th,
  .k-ui section[aria-labelledby^="perf-"] .k-table td{padding:10px 4px!important}
  .k-ui section[aria-labelledby^="perf-"] .k-table th:first-child,
  .k-ui section[aria-labelledby^="perf-"] .k-table td:first-child{padding-left:14px!important}
  .k-ui section[aria-labelledby^="perf-"] .k-table th:last-child,
  .k-ui section[aria-labelledby^="perf-"] .k-table td:last-child{padding-right:14px!important}
  .k-ui section[aria-labelledby^="perf-"] .k-table th{white-space:normal;font-size:11px!important;letter-spacing:0!important;line-height:1.25;vertical-align:bottom}
  .k-ui section[aria-labelledby^="perf-"] .k-table td{font-size:13px}
  .k-ui section[aria-labelledby^="perf-"] .k-table td{white-space:nowrap}
  .k-ui section[aria-labelledby^="perf-"] .k-table td:first-child,
  .k-ui section[aria-labelledby^="perf-"] .k-table td:first-child a,
  .k-ui section[aria-labelledby^="perf-"] .k-lane{white-space:normal;overflow-wrap:break-word}
  .k-ui section[aria-labelledby^="perf-"] .k-table td:first-child{min-width:84px}

  /* Tick boxes: the bigger phone tick box (22px) touched its words, on 19 forms
     (invites, staff rights, finance settings, add shipment...). A small gap. */
  .k-ui .form-check:not(.form-switch):not(.form-check-reverse){padding-left:32px}
  .k-ui .form-check:not(.form-switch):not(.form-check-reverse)>.form-check-input{margin-left:-32px;margin-top:1px}

  /* On/off switches: the switch sat above its words when they wrapped
     (Enable Captcha, Use road times, the workshop rule on Vehicles). */
  .k-ui .form-check.form-switch{display:flex;align-items:flex-start;gap:10px;padding-left:0}
  .k-ui .form-check.form-switch>.form-check-input{float:none;flex:none;margin:2px 0 0}
  .k-ui .form-check.form-switch>.form-check-label{margin-left:0!important;min-width:0}
}

/* The smallest phones (360px): a little tighter still, so the five columns fit. */
@media (max-width:380px){
  .k-ui section[aria-labelledby^="perf-"] .k-table th,
  .k-ui section[aria-labelledby^="perf-"] .k-table td{padding:10px 3px!important}
  .k-ui section[aria-labelledby^="perf-"] .k-table th{font-size:10.5px!important}
  .k-ui section[aria-labelledby^="perf-"] .k-table td{font-size:12.5px}
  .k-ui section[aria-labelledby^="perf-"] .k-table th:first-child,
  .k-ui section[aria-labelledby^="perf-"] .k-table td:first-child{padding-left:10px!important;min-width:68px}
  .k-ui section[aria-labelledby^="perf-"] .k-table th:last-child,
  .k-ui section[aria-labelledby^="perf-"] .k-table td:last-child{padding-right:10px!important}
}
/* --- KIMBO-MOBILE-2 end --- */

/* --- KIMBO-TABS start (20 Oct 2026) --- */
/* Tabs, on computers and phones (20 Oct 2026, asked for by Hakeem). Two kinds, so they no longer look alike:
   - Section tabs (Finance: Overview … Settings; Deliveries; Kimbo AI; Settings; a customer's tabs): a white bar,
     each tab with its icon, a gold line under the open tab. On a computer, tabs that do not fit go under "More";
     on a phone the bar slides sideways, starting at the open tab, and fades at the edge that has more.
   - Filter tabs (All · Draft · Unpaid …, periods, lists): pills with their count; the chosen one dark blue.
     On a phone they are one line that slides. */

/* ---------- Section tabs ---------- */
body.k-ui .k-content .k-seg.k-seg-scroll:not(.bc-seg),
body.k-ui .k-content .k-seg.k-drivers-nav{display:flex;flex-wrap:nowrap;align-items:stretch;gap:2px;width:100%;max-width:100%;min-height:52px;margin-left:0;margin-right:0;padding:0 6px;background:#fff;border:1px solid var(--k-line);border-radius:12px;box-shadow:0 1px 2px rgba(0,38,62,.05);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;position:relative;grid-template-columns:none}
body.k-ui .k-content .k-seg.k-seg-scroll:not(.bc-seg)::-webkit-scrollbar,
body.k-ui .k-content .k-seg.k-drivers-nav::-webkit-scrollbar{display:none}
body.k-ui .k-content .k-seg.k-seg-scroll:not(.bc-seg)>a,
body.k-ui .k-content .k-seg.k-drivers-nav>a{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;min-height:0;padding:0 12px;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;position:relative;white-space:nowrap;font-size:14px;font-weight:600;line-height:1;text-align:center;color:var(--k-ink-2)!important;transition:color .15s}
body.k-ui .k-content .k-seg.k-seg-scroll:not(.bc-seg)>a i.bi,
body.k-ui .k-content .k-seg.k-drivers-nav>a i.bi{font-size:15px;line-height:1;color:var(--k-faint);transition:color .15s}
body.k-ui .k-content .k-seg.k-seg-scroll:not(.bc-seg)>a:hover,
body.k-ui .k-content .k-seg.k-drivers-nav>a:hover{color:var(--k-navy)!important;background:transparent}
body.k-ui .k-content .k-seg.k-seg-scroll:not(.bc-seg)>a:hover i.bi,
body.k-ui .k-content .k-seg.k-drivers-nav>a:hover i.bi{color:var(--k-blue)}
body.k-ui .k-content .k-seg.k-seg-scroll:not(.bc-seg)>a.active,body.k-ui .k-content .k-seg.k-seg-scroll:not(.bc-seg)>a[aria-current="page"],
body.k-ui .k-content .k-seg.k-drivers-nav>a.active,body.k-ui .k-content .k-seg.k-drivers-nav>a[aria-current="page"]{background:transparent;box-shadow:none;color:var(--k-navy)!important}
body.k-ui .k-content .k-seg.k-seg-scroll:not(.bc-seg)>a.active i.bi,body.k-ui .k-content .k-seg.k-seg-scroll:not(.bc-seg)>a[aria-current="page"] i.bi,
body.k-ui .k-content .k-seg.k-drivers-nav>a.active i.bi,body.k-ui .k-content .k-seg.k-drivers-nav>a[aria-current="page"] i.bi{color:var(--k-blue)}
body.k-ui .k-content .k-seg.k-seg-scroll:not(.bc-seg)>a.active::after,body.k-ui .k-content .k-seg.k-seg-scroll:not(.bc-seg)>a[aria-current="page"]::after,
body.k-ui .k-content .k-seg.k-drivers-nav>a.active::after,body.k-ui .k-content .k-seg.k-drivers-nav>a[aria-current="page"]::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--k-gold)}
body.k-ui .k-content .k-seg.k-seg-scroll:not(.bc-seg)>a:focus-visible,
body.k-ui .k-content .k-seg.k-drivers-nav>a:focus-visible{outline:2px solid var(--k-blue);outline-offset:-6px;border-radius:10px}
/* The Finance tab bar has the "Synced … / Sync now" line under it */
body.k-ui .k-content .k-fin-bar{row-gap:12px}
body.k-ui .k-content .k-fin-bar>.k-seg.k-seg-scroll:not(.bc-seg){flex:1 1 100%}

/* "More" (computers): the tabs that do not fit, in a list (kimbo-mobile.js) */
body.k-ui .k-content .k-snav-hidden{display:none!important}
body.k-ui .k-content .k-snav-more{position:relative;flex:0 0 auto;display:flex;align-items:stretch;margin-left:auto}
body.k-ui .k-content .k-snav-more>button{display:inline-flex;align-items:center;gap:6px;height:50px;padding:0 12px;border:0;background:transparent;font-size:14px;font-weight:600;color:var(--k-ink-2);cursor:pointer;white-space:nowrap}
body.k-ui .k-content .k-snav-more>button:hover,body.k-ui .k-content .k-snav-more>button[aria-expanded="true"]{color:var(--k-navy)}
body.k-ui .k-content .k-snav-more>button i.bi{font-size:12px;transition:transform .15s}
body.k-ui .k-content .k-snav-more>button[aria-expanded="true"] i.bi{transform:rotate(180deg)}
body.k-ui .k-content .k-snav-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:230px;background:#fff;border:1px solid var(--k-line);border-radius:12px;box-shadow:0 12px 32px rgba(0,38,62,.16);padding:6px;display:flex;flex-direction:column}
body.k-ui .k-content .k-snav-menu[hidden]{display:none}
body.k-ui .k-content .k-snav-menu a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;font-size:14px;font-weight:500;color:var(--k-navy)!important;text-decoration:none;white-space:nowrap}
body.k-ui .k-content .k-snav-menu a:hover,body.k-ui .k-content .k-snav-menu a:focus-visible{background:var(--k-blue-soft);outline:0}
body.k-ui .k-content .k-snav-menu a i.bi{font-size:15px;color:var(--k-faint)}
@media (min-width:768px){
  body.k-ui .k-content .k-seg.k-seg-scroll.k-snav-js:not(.bc-seg),body.k-ui .k-content .k-seg.k-drivers-nav.k-snav-js{overflow:visible}
}

/* A customer's tabs (inside the customer card): the same tabs, on a line instead of in a bar */
body.k-ui .k-content .k-seg.k-cust-tabs{display:flex;flex-wrap:nowrap;gap:2px;padding:0;margin-left:0;margin-right:0;width:100%;max-width:100%;background:transparent;border-radius:0;border-bottom:1px solid var(--k-line);box-shadow:none;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;grid-template-columns:none}
body.k-ui .k-content .k-seg.k-cust-tabs::-webkit-scrollbar{display:none}
body.k-ui .k-content .k-seg.k-cust-tabs>button{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;height:46px;min-height:0;padding:0 14px;margin:0 0 -1px;border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;box-shadow:none;white-space:nowrap;font-size:14px;font-weight:600;line-height:1;color:var(--k-ink-2)!important}
body.k-ui .k-content .k-seg.k-cust-tabs>button i.bi{font-size:15px;color:var(--k-faint)}
body.k-ui .k-content .k-seg.k-cust-tabs>button:hover{color:var(--k-navy)!important}
body.k-ui .k-content .k-seg.k-cust-tabs>button.active,body.k-ui .k-content .k-seg.k-cust-tabs>button[aria-selected="true"]{background:transparent;box-shadow:none;color:var(--k-navy)!important;border-bottom-color:var(--k-gold)}
body.k-ui .k-content .k-seg.k-cust-tabs>button.active i.bi,body.k-ui .k-content .k-seg.k-cust-tabs>button[aria-selected="true"] i.bi{color:var(--k-blue)}

/* Settings sections: a list down the side on computers (with icons); a sliding bar on tablets and phones */
body.k-ui .k-content .k-settings .k-subnav>a{display:flex;align-items:center;gap:10px}
body.k-ui .k-content .k-settings .k-subnav>a i.bi{font-size:15px;color:var(--k-faint);flex:none}
body.k-ui .k-content .k-settings .k-subnav>a[aria-current="page"] i.bi{color:var(--k-blue)}
@media (max-width:991px){
  body.k-ui .k-content .k-settings .k-subnav{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch;gap:2px;padding:0 6px;background:#fff;border:1px solid var(--k-line);border-radius:12px;box-shadow:0 1px 2px rgba(0,38,62,.05);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;position:static;grid-template-columns:none}
  body.k-ui .k-content .k-settings .k-subnav::-webkit-scrollbar{display:none}
  body.k-ui .k-content .k-settings .k-subnav>a{flex:0 0 auto;display:inline-flex;gap:8px;height:50px;min-height:0;padding:0 12px;border-radius:0;background:transparent;box-shadow:none;position:relative;white-space:nowrap;font-size:14px;line-height:1;text-align:center}
  body.k-ui .k-content .k-settings .k-subnav>a[aria-current="page"]{background:transparent;box-shadow:none;color:var(--k-navy)!important}
  body.k-ui .k-content .k-settings .k-subnav>a[aria-current="page"]::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--k-gold)}
}

/* ---------- Filter tabs: pills ---------- */
body.k-ui .k-content .k-seg:not(.k-seg-scroll):not(.k-drivers-nav):not(.k-cust-tabs),
body.k-ui .k-content .k-seg.k-seg-scroll.bc-seg{display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:auto;max-width:100%;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;grid-template-columns:none;overflow:visible}
body.k-ui .k-content .k-seg:not(.k-seg-scroll):not(.k-drivers-nav):not(.k-cust-tabs)>a,
body.k-ui .k-content .k-seg:not(.k-seg-scroll):not(.k-drivers-nav):not(.k-cust-tabs)>button,
body.k-ui .k-content .k-seg.k-seg-scroll.bc-seg>a{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;min-height:0;padding:0 14px;margin:0;border:1px solid var(--k-line);border-radius:999px;background:#fff;box-shadow:none;white-space:nowrap;font-size:14px;font-weight:600;line-height:1;text-align:center;color:var(--k-ink-2)!important;transition:border-color .15s,background .15s,color .15s}
body.k-ui .k-content .k-seg:not(.k-seg-scroll):not(.k-drivers-nav):not(.k-cust-tabs)>a:hover,
body.k-ui .k-content .k-seg:not(.k-seg-scroll):not(.k-drivers-nav):not(.k-cust-tabs)>button:hover,
body.k-ui .k-content .k-seg.k-seg-scroll.bc-seg>a:hover{border-color:#AFC0D4;color:var(--k-navy)!important}
body.k-ui .k-content .k-seg:not(.k-seg-scroll):not(.k-drivers-nav):not(.k-cust-tabs)>.active,
body.k-ui .k-content .k-seg:not(.k-seg-scroll):not(.k-drivers-nav):not(.k-cust-tabs)>[aria-current="page"],
body.k-ui .k-content .k-seg:not(.k-seg-scroll):not(.k-drivers-nav):not(.k-cust-tabs)>[aria-selected="true"],
body.k-ui .k-content .k-seg.k-seg-scroll.bc-seg>.active,
body.k-ui .k-content .k-seg.k-seg-scroll.bc-seg>[aria-current="page"]{background:var(--k-navy);border-color:var(--k-navy);color:#fff!important;box-shadow:0 1px 3px rgba(0,38,62,.25)}
body.k-ui .k-content .k-seg:not(.k-seg-scroll):not(.k-drivers-nav):not(.k-cust-tabs) .k-count,
body.k-ui .k-content .k-seg.k-seg-scroll.bc-seg .k-count{height:20px;min-width:22px;padding:0 7px;font-size:11.5px;background:#EEF2F6;color:var(--k-ink-2)}
body.k-ui .k-content .k-seg:not(.k-seg-scroll):not(.k-drivers-nav):not(.k-cust-tabs)>.active .k-count,
body.k-ui .k-content .k-seg:not(.k-seg-scroll):not(.k-drivers-nav):not(.k-cust-tabs)>[aria-current="page"] .k-count,
body.k-ui .k-content .k-seg:not(.k-seg-scroll):not(.k-drivers-nav):not(.k-cust-tabs)>[aria-selected="true"] .k-count,
body.k-ui .k-content .k-seg.k-seg-scroll.bc-seg>[aria-current="page"] .k-count{background:rgba(255,255,255,.18);color:#fff}

/* Fade at the edge that has more (kimbo-mobile.js) */
body.k-ui .k-tabs-more-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}
body.k-ui .k-tabs-more-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 44px);mask-image:linear-gradient(90deg,transparent,#000 44px)}
body.k-ui .k-tabs-more-l.k-tabs-more-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent)}

/* ---------- Phones ---------- */
@media (max-width:767px){
  body.k-ui .k-content .k-seg.k-seg-scroll:not(.bc-seg),body.k-ui .k-content .k-seg.k-drivers-nav,body.k-ui .k-content .k-settings .k-subnav{min-height:48px;padding:0 4px}
  body.k-ui .k-content .k-seg.k-seg-scroll:not(.bc-seg)>a,body.k-ui .k-content .k-seg.k-drivers-nav>a,body.k-ui .k-content .k-settings .k-subnav>a{height:46px;padding:0 10px;gap:7px;font-size:14px}
  body.k-ui .k-content .k-seg.k-cust-tabs>button{height:44px;padding:0 12px}
  /* Filter pills: one line that slides */
  body.k-ui .k-content .k-seg:not(.k-seg-scroll):not(.k-drivers-nav):not(.k-cust-tabs),
  body.k-ui .k-content .k-seg.k-seg-scroll.bc-seg{flex-wrap:nowrap;width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px 0}
  body.k-ui .k-content .k-seg:not(.k-seg-scroll):not(.k-drivers-nav):not(.k-cust-tabs)::-webkit-scrollbar,
  body.k-ui .k-content .k-seg.k-seg-scroll.bc-seg::-webkit-scrollbar{display:none}
}
/* --- KIMBO-TABS end --- */