/* =====================================================================
   PANEL - CUSTOMER PANEL THEME  (logged-in pages only)          v1
   Loaded after the colour file. Every rule starts with body.afu - a class
   header.twig puts on <body> only when a customer is logged in - so the
   public home, login and signup pages are not touched.
   Look taken from the reference panel customer screens: a colour that changes
   from top to bottom, white rounded cards, big bold form fields, pill tabs
   and a green order button - in Panel blue: #036CB6 at the top, turning
   slightly lighter towards the bottom (v4; v1-v3 used #1877F2 -> #2DAAC0).
   Written for this panel; nothing copied from another panel's files.
   ===================================================================== */
body.afu{
  /* v4 palette: #036CB6 at the top, 20% lighter (#3589C5) at the bottom -
     white text stays readable on both (contrast 5.5 at the top, 3.8 at the
     bottom); the same #036CB6 is the accent inside the white cards
     (5.5 on white, better than the old var(--afu-brand) at 4.2). */
  --afu-brand:#036CB6; --afu-brand-2:#2A83C2; --afu-tint:#E6F0F8;
  --afu-top:#036CB6; --afu-bottom:#3589C5;
  --afu-ink:#10284a; --afu-text:#1d2939; --afu-label:#5b6b82; --afu-muted:#6b7a90;
  --afu-field:#e8eef7; --afu-field-ro:#d5dfec; --afu-focus:rgba(3,108,182,.28);
  --afu-go:#8cc63f; --afu-go-2:#79b12f;
  --afu-card-shadow:0 12px 32px rgba(6,40,92,.18);
  background:linear-gradient(180deg, var(--afu-top) 0%, var(--afu-bottom) 100%) !important;
  background-color:var(--afu-bottom) !important;
  min-height:100vh;
}
html:has(body.afu){ background:#3589C5; }

/* ---------- see-through page wrappers (the gradient shows behind) ---------- */
body.afu .wrapper,
body.afu .wrapper-sidebar-navbar,
body.afu .no-wrap,
body.afu .component_private_sidebar,
body.afu .component-navbar__navbar-private,
body.afu .component-navbar-private__wrapper,
body.afu nav.navbar,
body.afu .af-topbar{
  background:transparent !important; background-image:none !important;
  border-color:transparent !important; box-shadow:none !important;
}
body.afu .navbar-burger-line{ background:#ffffff !important; }

/* logo on a white chip, so the dark letters stay readable on blue */
body.afu .component-navbar-logo img,
body.afu .component-sidebar__menu-logo img{
  background:#ffffff; border-radius:14px; padding:6px 12px; box-sizing:content-box;
  box-shadow:0 4px 14px rgba(6,40,92,.18);
}

/* ---------- desktop sidebar: see-through card, white menu, active = white pill ---------- */
body.afu .component-sidebar,
body.afu .sidebar-block__left{
  background:rgba(255,255,255,.14) !important; background-image:none !important;
  border:0 !important; box-shadow:none !important;
}
body.afu .component-sidebar__menu{ background:transparent !important; background-image:none !important; box-shadow:none !important; border:0 !important; }
body.afu .component-sidebar__menu-item{ border:0 !important; background:transparent !important; }
body.afu .component-sidebar__menu-item-link{
  color:#ffffff !important; font-weight:600; border-radius:14px; margin:3px 12px;
  background:transparent !important; border:0 !important;
}
body.afu .component-sidebar__menu-item-link:hover{ background:rgba(255,255,255,.18) !important; }
body.afu .component-sidebar__menu-item-link.afu-on{ background:#ffffff !important; color:var(--afu-ink) !important; }
/* phone menu (opens as a white card): the open page gets a light blue pill */
body.afu .component-navbar-nav-link.afu-on{ background:var(--afu-tint) !important; color:var(--afu-brand) !important; border-radius:12px; }

/* ---------- cards ---------- */
body.afu .no-panel,
body.afu .no-stat,
body.afu .no-banner,
body.afu .fw-card,
body.afu .well,
body.afu .panel,
body.afu .card{
  background:#ffffff !important; background-image:none !important;
  border:0 !important; border-radius:22px !important;
  box-shadow:var(--afu-card-shadow) !important;
}
body.afu .no-panel h3,
body.afu .no-panel .headsir{ color:var(--afu-ink) !important; }

/* ---------- form fields: big, bold, soft blue-grey ---------- */
body.afu .form-control,
body.afu #search_services_field,
body.afu .select2-selection.form-control,
body.afu .select2-container .select2-selection--single{
  background:var(--afu-field) !important; background-image:none !important;
  border:0 !important; border-radius:14px !important; box-shadow:none !important;
  min-height:54px; height:auto; padding:14px 18px !important;
  font-size:16.5px !important; font-weight:500; color:var(--afu-text) !important; line-height:1.35 !important;
}
body.afu textarea.form-control{ min-height:130px; }
body.afu .select2-container .select2-selection--single .select2-selection__rendered{
  color:var(--afu-text) !important; line-height:1.35 !important; padding:0 22px 0 0 !important; white-space:normal;
}
body.afu .select2-container .select2-selection--single .select2-selection__arrow{ top:50% !important; transform:translateY(-50%); right:12px !important; }
body.afu .form-control:focus,
body.afu #search_services_field:focus{ box-shadow:0 0 0 3px var(--afu-focus) !important; outline:0; }
body.afu .form-control::placeholder,
body.afu #search_services_field::placeholder{ color:#98a6ba !important; font-weight:400; }
body.afu .form-control[readonly],
body.afu .form-control[disabled],
body.afu #charge{ background:var(--afu-field-ro) !important; font-weight:700; color:var(--afu-ink) !important; }
body.afu label.control-label,
body.afu .no-step-label{ font-size:15px !important; font-weight:700 !important; color:var(--afu-label) !important; margin-bottom:8px !important; }
body.afu .no-search-wrap{ background:transparent !important; border:0 !important; }
body.afu #search_services_field{ padding-left:44px !important; }

/* ---------- buttons ---------- */
body.afu .no-place-btn,
body.afu .btn-primary{
  background:var(--afu-go) !important; background-image:none !important;
  border:0 !important; border-radius:16px !important; color:#ffffff !important;
  font-weight:800 !important; letter-spacing:.2px;
  box-shadow:0 10px 22px rgba(121,177,47,.35) !important;
}
body.afu .no-place-btn{ min-height:58px; font-size:19px !important; }
body.afu .btn-primary{ min-height:50px; font-size:17px !important; }
body.afu .no-place-btn:hover,
body.afu .btn-primary:hover{ background:var(--afu-go-2) !important; }

/* ---------- New Order: tabs as pills on the colour (like reference panel) ---------- */
body.afu .no-tabs{ display:flex; gap:12px; margin:0 0 16px; background:transparent !important; border:0 !important; padding:0 !important; }
body.afu .no-tab{
  flex:0 0 auto; padding:13px 22px !important; border-radius:16px !important; border:0 !important;
  background:rgba(255,255,255,.18) !important; color:#ffffff !important;   /* v4: .24 -> .18, white text contrast ~3.8 */
  font-size:17px !important; font-weight:700 !important; cursor:pointer; box-shadow:none !important;
}
body.afu .no-tab.active{ background:#ffffff !important; color:var(--afu-ink) !important; }

/* ---------- New Order: stat cards (icon left, figure right) ---------- */
body.afu .no-stat{ align-items:center; }
body.afu .no-stat-ic{ background:rgba(3,108,182,.12) !important; border-radius:14px !important; }
body.afu .no-stat-ic svg{ stroke:var(--afu-brand) !important; }
body.afu .no-stat-l{ color:var(--afu-brand) !important; font-weight:700 !important; }
body.afu .no-stat-v{ color:var(--afu-text) !important; font-weight:800 !important; }
body.afu .no-stat-add{ background:var(--afu-go) !important; color:#ffffff !important; border-radius:12px !important; }

/* ---------- New Order: 2% bonus banner as a white card ---------- */
body.afu .no-banner .txt{ color:var(--afu-text) !important; }
body.afu .no-banner .txt b,
body.afu .no-banner .txt .hl{ color:#16a34a !important; }
body.afu .no-btn-primary{ background:var(--afu-go) !important; color:#ffffff !important; border:0 !important; }
body.afu .no-btn-ghost{ background:#ffffff !important; color:var(--afu-brand) !important; border:2px solid var(--afu-brand) !important; }

/* ---------- side boxes ---------- */
body.afu .no-help li::before{ background:var(--afu-brand) !important; }
body.afu .no-news-item{ background:#f2f6fc !important; border-color:#dde7f4 !important; }

/* ---------- phones: stacked, full-width, larger touch targets ---------- */
@media (max-width:767px){
  body.afu .no-stats{ display:grid !important; grid-template-columns:1fr !important; gap:14px !important; overflow:visible !important; }
  body.afu .no-stat{ width:auto !important; min-width:0 !important; padding:20px 20px !important; }
  body.afu .no-stat-ic{ width:54px !important; height:54px !important; }
  body.afu .no-stat-ic svg{ width:28px; height:28px; }
  body.afu .no-stat-l{ font-size:17px !important; }
  body.afu .no-stat-v{ font-size:26px !important; }
  body.afu .no-tabs{ flex-direction:column; }
  body.afu .no-tab{ width:100%; text-align:left; }
  body.afu .form-control,
  body.afu #search_services_field,
  body.afu .select2-container .select2-selection--single{ min-height:58px; font-size:17px !important; }
}

/* ---------- desktop sidebar, refined: the column stays clear, the menu is the card ---------- */
body.afu .component-sidebar,
body.afu .sidebar-block__left{ background:transparent !important; }
body.afu .component-sidebar__menu{
  background:rgba(255,255,255,.12) !important; border-radius:22px !important;
  margin:0 16px !important; padding:10px 0 !important;
}
body.afu .component-sidebar__menu-item-link,
body.afu .component-sidebar__menu-item-link *{ color:#ffffff !important; }
body.afu .component-sidebar__menu-item-link.afu-on,
body.afu .component-sidebar__menu-item-link.afu-on *{ color:var(--afu-ink) !important; }

/* ---------- Add Funds: amount with a rupee block in front ---------- */
body.afu .afu-amt{ display:flex; align-items:stretch; }
body.afu .afu-amt__cur{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center; min-width:54px;
  background:var(--afu-brand); color:#ffffff; font-size:20px; font-weight:700; border-radius:14px 0 0 14px;
}
body.afu .afu-amt .form-control{ border-radius:0 14px 14px 0 !important; flex:1 1 auto; min-width:0; }

/* phones: figures on the right of each card, like reference panel */
@media (max-width:767px){
  body.afu .no-stat > div:nth-child(2){ margin-left:auto; text-align:right; }
}

/* ---------- pages built earlier with their own palette -> the new colours ---------- */
body.afu .oh{ --o-bg:transparent; --o-head:var(--afu-brand); --o-head-2:var(--afu-brand-2); --o-green:#8cc63f; }
body.afu .oh,
body.afu .fw{ background:transparent !important; background-image:none !important; }
body.afu .oh-card,
body.afu .fw-panel{
  background:#ffffff !important; background-image:none !important;
  border:0 !important; border-radius:22px !important; box-shadow:var(--afu-card-shadow) !important;
}
body.afu .btn-primary-account{
  background:var(--afu-go) !important; background-image:none !important; border:0 !important;
  border-radius:16px !important; color:#ffffff !important; font-weight:800 !important; min-height:50px;
}
body.afu .btn-secondary,
body.afu .filter-primary{
  background:var(--afu-brand) !important; background-image:none !important; border:0 !important;
  border-radius:14px !important; color:#ffffff !important; font-weight:700 !important;
}
body.afu .af-field-help{ background:#f2f6fc !important; border-color:#dde7f4 !important; }

/* ---------- Add Funds: the offer card on top (2% bonus) ---------- */
body.afu .afu-offer{
  background:#ffffff; border-radius:22px; box-shadow:var(--afu-card-shadow);
  text-align:center; padding:26px 20px 24px; margin:0 0 18px;
}
body.afu .afu-offer__t{ font-size:40px; font-weight:900; letter-spacing:.5px; color:var(--afu-ink); line-height:1.05; }
body.afu .afu-offer__cur{ font-size:30px; font-weight:800; color:#9fd3a6; letter-spacing:10px; margin:10px 0 8px; }
body.afu .afu-offer__line{ font-size:17px; font-weight:700; color:var(--afu-text); line-height:1.45; }
body.afu .afu-offer__line b{ color:#16a34a; }
@media (max-width:767px){ body.afu .afu-offer__t{ font-size:44px; } }

/* ---------- titles that sit on the colour, and table heads in the new palette ---------- */
body.afu .oh-head h2{ color:#ffffff !important; text-shadow:0 1px 2px rgba(6,40,92,.25); }
body.afu .fw-table thead th{ background:#eef3fa !important; background-image:none !important; color:var(--afu-label) !important; }

/* =====================================================================
   v2 - readability, the way the reference panel customer pages read
   ===================================================================== */
/* sidebar: bigger, bold, white; the open page is a white pill */
body.afu .component-sidebar__menu-item-link{
  font-size:17px !important; font-weight:600 !important; padding:12px 18px !important;
  display:flex; align-items:center; gap:12px; letter-spacing:.1px;
}
body.afu .component-sidebar__menu-item-link .sidebar-block__menu-item-icon{ color:#ffffff !important; opacity:.95; }
body.afu .component-sidebar__menu-item-link.afu-on .sidebar-block__menu-item-icon{ color:var(--afu-brand) !important; }

/* select lists (Category / Service): dark text on white, clear blue highlight */
body.afu .select2-dropdown{
  border:0 !important; border-radius:14px !important; overflow:hidden;
  box-shadow:0 14px 34px rgba(6,40,92,.25) !important;
}
body.afu .select2-container .select2-results__option{
  background:#ffffff !important; color:var(--afu-text) !important;
  font-size:16px !important; font-weight:500; padding:11px 16px !important; line-height:1.4 !important;
}
body.afu .select2-container .select2-results__option *:not(.badge):not(.service_id_badge){ color:inherit !important; }
body.afu .select2-container .select2-results__option[aria-selected="true"]{ background:var(--afu-tint) !important; color:var(--afu-ink) !important; }
body.afu .select2-container .select2-results__option.select2-results__option--highlighted,
body.afu .select2-container .select2-results__option.select2-results__option--highlighted[aria-selected]{
  background:var(--afu-brand) !important; color:#ffffff !important;
}
body.afu .select2-container .select2-search__field{
  border:0 !important; border-radius:10px !important; background:var(--afu-field) !important;
  padding:10px 12px !important; font-size:16px !important; color:var(--afu-text) !important;
}
/* the service number badge: blue, readable */
body.afu .badge.badge-secondary,
body.afu .service_id_badge,
body.afu .select2-container .badge{
  background:var(--afu-brand) !important; color:#ffffff !important; border:0 !important;
  font-weight:700 !important; border-radius:999px !important; padding:4px 10px !important;
}
body.afu .select2-results__option--highlighted .badge,
body.afu .select2-results__option--highlighted .service_id_badge{ background:#ffffff !important; color:var(--afu-brand) !important; }

/* Description / Average time boxes on New Order: the field colour, dark text */
body.afu #neworder_fields .panel-body,
body.afu #service_description{
  background:var(--afu-field) !important; background-image:none !important;
  border:0 !important; border-radius:14px !important; color:var(--afu-text) !important;
  font-size:16.5px !important; line-height:1.6 !important; padding:16px 18px !important;
}
body.afu #service_description *{ color:inherit !important; }

/* a touch larger figures and labels on the cards */
body.afu .no-stat-l{ font-size:16px !important; }
body.afu .no-stat-v{ font-size:26px !important; }

/* phone menu: larger, bolder items */
@media (max-width:991px){
  body.afu .component-navbar-nav-link{ font-size:17px !important; font-weight:600 !important; padding:11px 16px !important; }
}

/* v3 - phone menu: the open page was white on white. The theme styles its
   own "active" link white on a transparent background (made for a coloured
   bar, !important); in the white menu card that hid the text completely.
   Both markers - the theme's and ours - now get the light blue pill. */
body.afu .component-navbar-nav-link.component-navbar-nav-link-active__navbar-private,
body.afu .component-navbar-nav-link.afu-on{
  background:var(--afu-tint) !important; background-image:none !important;
  color:var(--afu-brand) !important; border-radius:12px !important;
}
body.afu .component-navbar-nav-link.component-navbar-nav-link-active__navbar-private *,
body.afu .component-navbar-nav-link.afu-on *{ color:inherit !important; }

/* [v96] copyright line at the bottom of the customer panel - a darker blue strip
   so the white text stays readable; from 993px the 290px sidebar sits on the left,
   so the text is centred over the content instead of the whole window */
body.afu .afu-copy{ margin-top:28px; padding:16px 16px 18px; text-align:center; font-size:13.5px; font-weight:500; line-height:1.5; color:#fff; background:rgba(2,74,125,.55); letter-spacing:.2px; }
@media (min-width: 993px){ body.afu .afu-copy{ padding-left:calc(var(--af-side-w, 290px) + var(--af-side-gap, 4px) + 16px); } }   /* [v98] follows the sidebar */

/* ---------- [v98] desktop: sidebar card no longer runs under the page, top bar = page colour ----------
   1. .component-sidebar__menu had width:100% (bootstrap.css) plus 16px side margins,
      so the card was 290px wide starting at 16px and its last 12px sat under the
      page (which starts at 290 + 4px). width:auto keeps it inside its 290px column:
      16px each side -> a 258px card and a 20px gap to the page.
   2. the top bar was see-through with backdrop-filter:saturate(180%) left over from
      _panel_global.twig, which turned the page blue #036CB6 into a bright #0073F8.
      Now: no filter, the page's own top colour, and the page background stays put
      while scrolling, so the bar always matches the colour right under it.
   Phones (<993px) are not touched. */
@media (min-width: 993px){
  body.afu .component-sidebar__menu{ width:auto !important; max-width:none !important; box-sizing:border-box !important; }
  body.afu #afTopbar{
    background:var(--afu-brand) !important; background-image:none !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
    border-bottom:0 !important; box-shadow:none !important;
  }
  body.afu{ background-attachment:fixed !important; }
}

/* [v99] the desktop top bar (Balance + name) is no longer sticky: _panel_global.twig
   fixes it to the window; here it sits at the top of the page and scrolls away with it.
   Same place at the top, and the page keeps its top padding, so nothing moves. */
@media (min-width: 993px){
  body.afu #afTopbar{ position:absolute !important; }
}

/* ---------- [v100] New Order: the Description box - 2px smaller text (16.5 -> 14.5px), and
   when the text is longer than the box it scrolls inside it. Only the Description box
   (ajax_data.php gives it .af-desc-box; the Average Time box shares its id). ---------- */
body.afu #service_description.af-desc-box{
  font-size:14.5px !important; line-height:1.6 !important;
  max-height:220px; overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:#9fb4cc transparent;
}
body.afu #service_description.af-desc-box::-webkit-scrollbar{ width:8px; }
body.afu #service_description.af-desc-box::-webkit-scrollbar-thumb{ background:#9fb4cc; border-radius:8px; }
body.afu #service_description.af-desc-box::-webkit-scrollbar-track{ background:transparent; }
@media (max-width: 767px){ body.afu #service_description.af-desc-box{ max-height:200px; } }

/* ---------- [v100] Add Funds: Add Fund History / Track Your Fund (addfunds.twig) ---------- */
body.afu .afh{ margin:22px 0 10px; }
body.afu .afh-tabs{ display:flex; gap:10px; margin:0 0 14px; flex-wrap:wrap; }
body.afu .afh-tab{ height:46px; padding:0 20px; border-radius:14px; border:2px solid transparent; background:rgba(255,255,255,.18); color:#fff; font-weight:700; font-size:15.5px; cursor:pointer; transition:background .15s; }
body.afu .afh-tab:hover{ background:rgba(255,255,255,.28); }
body.afu .afh-tab.is-on{ background:#fff; color:var(--afu-brand); border-color:#fff; box-shadow:0 8px 20px rgba(6,40,92,.18); }
body.afu .afh-tab:focus, body.afu .afh-chip:focus{ outline:none; }
body.afu .afh-tab:focus-visible, body.afu .afh-chip:focus-visible{ outline:3px solid rgba(3,108,182,.45); outline-offset:2px; }
body.afu .afh-card{ background:#fff; border-radius:20px; box-shadow:0 10px 26px rgba(6,40,92,.14); padding:20px 20px 16px; }
body.afu .afh-card[hidden]{ display:none; }
body.afu .afh-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; margin:0 0 14px; }
body.afu .afh-head h3{ margin:0 0 4px; font-size:19px; font-weight:800; color:#0B1F3A !important; }
body.afu .afh-head p{ margin:0; color:#5B6B82; font-size:14px; }
body.afu .afh-sum{ display:flex; flex-direction:column; align-items:flex-end; background:#EEF5FB; border-radius:14px; padding:8px 14px; min-width:150px; }
body.afu .afh-sum span{ font-size:12.5px; color:#5B6B82; }
body.afu .afh-sum b{ font-size:19px; color:var(--afu-brand); }
body.afu .afh-filters{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 12px; }
body.afu .afh-chip{ height:34px; padding:0 14px; border-radius:20px; border:1px solid #D6E2EF; background:#fff; color:#2B3A4F; font-weight:600; font-size:14px; cursor:pointer; }
body.afu .afh-chip.is-on{ background:var(--afu-brand); border-color:var(--afu-brand); color:#fff; }
body.afu .afh-scroll{ overflow-x:auto; }
body.afu .afh-table{ width:100%; border-collapse:collapse; font-size:14.5px; margin:0; }
/* the global table rule (pale, UPPERCASE, 12px, !important) is overridden here */
body.afu .afh-table th{ background:#F3F7FB !important; color:#5B6B82 !important; font-weight:700; font-size:13.5px !important; text-transform:none !important; letter-spacing:0 !important; text-align:left; padding:12px 14px; border:0; white-space:nowrap; }
body.afu .afh-table td{ padding:13px 14px; border-top:1px solid #E6EDF5; color:#1F2D3D; vertical-align:middle; }
body.afu .afh-table tbody tr:nth-child(even) td{ background:#FAFCFE; }
body.afu .afh-table tr[hidden]{ display:none; }
body.afu .afh-muted{ color:#5B6B82 !important; }
body.afu .afh-wrap{ word-break:break-all; }
body.afu .afh-id{ font-weight:700; white-space:nowrap; }
body.afu .afh-new{ display:inline-block; margin-left:8px; padding:2px 8px; border-radius:10px; background:#FFF1DC; color:#B26B00; font-size:11.5px; font-weight:700; vertical-align:1px; }
body.afu .afh-in{ color:#18925A !important; font-weight:800; white-space:nowrap; }
body.afu .afh-out{ color:#D23F3F !important; font-weight:800; white-space:nowrap; }
body.afu .afh-what{ font-weight:600; }
body.afu .afh-what > span:last-child{ vertical-align:middle; }
body.afu .afh-ico{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; margin-right:10px; border-radius:50%; font-size:15px; font-weight:800; line-height:1; vertical-align:middle; background:#FDECEC; color:#D23F3F; }
body.afu .afh-ico::before{ content:"\2193"; }
body.afu .afh-ico--fund, body.afu .afh-ico--credit, body.afu .afh-ico--refund{ background:#E5F6ED; color:#18925A; }
body.afu .afh-ico--fund::before, body.afu .afh-ico--credit::before{ content:"\2191"; }
body.afu .afh-ico--refund::before{ content:"\21BA"; }
body.afu .afh-ico--mixed{ background:#E6F0F8; color:var(--afu-brand); }
body.afu .afh-ico--mixed::before{ content:"\21C4"; }
body.afu .afh-balcell{ white-space:nowrap; }
body.afu .afh-before{ color:#5B6B82; }
body.afu .afh-arrow{ margin:0 8px; color:#9AA8BA; }
body.afu .afh-balcell b{ color:#0B1F3A; }
body.afu .afh-empty{ padding:22px; text-align:center; color:#5B6B82; background:#F6F9FC; border-radius:14px; font-size:14.5px; }
body.afu .afh-empty[hidden]{ display:none; }
body.afu .afh-pager{ display:flex; justify-content:center; gap:10px; margin:14px 0 4px; }
body.afu .afh-more{ display:inline-flex; align-items:center; height:38px; padding:0 18px; border-radius:12px; background:#E6F0F8; color:var(--afu-brand) !important; font-weight:700; text-decoration:none !important; }
body.afu .afh-note{ margin:12px 0 0; color:#5B6B82; font-size:13px; }
body.afu .afh-note a{ color:var(--afu-brand) !important; font-weight:600; }
@media (max-width: 767px){
  body.afu .afh-tab{ flex:1 1 0; padding:0 10px; font-size:14.5px; }
  body.afu .afh-card{ padding:16px 14px 12px; border-radius:18px; }
  body.afu .afh-sum{ align-items:flex-start; width:100%; }
  body.afu .afh-table thead{ display:none; }
  body.afu .afh-table, body.afu .afh-table tbody, body.afu .afh-table tr, body.afu .afh-table td{ display:block; width:100%; }
  body.afu .afh-table tr{ padding:12px 2px; border-top:1px solid #E6EDF5; }
  body.afu .afh-table td, body.afu .afh-table tbody tr:nth-child(even) td{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:3px 0; border:0; background:none; text-align:right; }
  body.afu .afh-table td::before{ content:attr(data-label); flex:0 0 auto; color:#5B6B82; font-weight:600; font-size:13px; text-align:left; }
  body.afu .afh-table tbody tr td.afh-what, body.afu .afh-table tbody tr:nth-child(even) td.afh-what{ display:block; text-align:left; font-size:15px; padding:0 0 6px; }
  body.afu .afh-table tbody tr td.afh-what::before{ display:none; }
  /* keep  before -> after  together on the right instead of spread across the row */
  body.afu .afh-table td.afh-balcell .afh-before{ margin-left:auto; }
  body.afu .afh-table td.afh-balcell .afh-arrow{ margin:0 2px; }
}