/*-- Variables --*/
:root {
  --color-primary: #805AF5;
  --color-primary-alt: #35316f;
  --color-secondary: #CD99FF;
  --color-primary-gradient-start: #805AF5;
  --color-primary-gradient-end: #CD99FF;
  --color-heading: #ffffff;
  --color-body: #BCC3D7;
  --color-link: #BCC3D7;
  --color-text-off: #565e78;
  --color-dark: #21242D;
  --color-darker: rgba(6, 6, 6, 0.7);
  --color-darkest: rgba(0, 0, 0, 0.3);
  --color-lessdark: #2E313D;
  --color-black: #000000;
  --color-blackest: #16181E;
  --color-border: rgba(255, 255, 255, 0.05);
  --color-border-light: #e5e7eb;
  --color-border-dark: #1E1E1E;
  --dark-bg-1: #F8F8FF;
  --dark-bg-2: #212330;
  --dark-bg-3: #DDE7FF;
  --dark-bg-4: #EBEFFF;
  --dark-color-link: #55595C;
  --color-border-2: #C2D4FF;
  --color-strock: #EFEFFF;
  --dark-gradient-1: linear-gradient(180deg, rgba(122, 151, 255, 0.19) 0%, rgba(248, 248, 255, 0.19) 100%);
  --dark-gradient-2: linear-gradient(90deg, #6A48F2 0%, #CD99FF 68.75%);
  --dark-gradient-3: linear-gradient(93deg, #D3E0FF 0.78%, rgba(221, 231, 255, 0.00) 97.43%);
  --dark-shadow-1: 0px 14px 36.7px 0px rgba(14, 12, 21, 0.06);
  --dark-shadow-2: 0px 26px 45.4px 0px rgba(186, 193, 225, 0.72);
  --color-bg-1: #0E0C15;
  --color-gray: #3E414B;
  --color-midgray: #878787;
  --color-light: #E4E6EA;
  --color-lighter: #CED0D4;
  --color-lightest: #F0F2F5;
  --color-white: #ffffff;
  --color-white-off: rgba(255, 255, 255, 0.05);
  --color-success: #3EB75E;
  --color-danger: #FF0003;
  --color-warning: #FFC876;
  --color-info: #1BA2DB;
  --color-facebook: #3B5997;
  --color-twitter: #1BA1F2;
  --color-youtube: #ED4141;
  --color-linkedin: #0077B5;
  --color-pinterest: #E60022;
  --color-instagram: #C231A1;
  --color-vimeo: #00ADEF;
  --color-twitch: #6441A3;
  --color-discord: #7289da;
  --color-extra01: #666666;
  --color-extra02: #606770;
  --color-extra03: #FBFBFD;
  --color-extra04: #1A1A1A;
  --color-extra05: #242424;
  --color-extra06: #111424;
  --border-width: 2px;
  --radius-small: 4px;
  --radius: 12px;
  --radius-big: 16px;
  --radius-bigger: 50px;
  --p-light: 300;
  --p-regular: 400;
  --p-medium: 500;
  --p-semi-bold: 600;
  --p-bold: 700;
  --p-extra-bold: 800;
  --p-black: 900;
  --shadow-primary: 0 0 20px 5px rgba(20, 126, 243, 0.1);
  --shadow-light: 1px 1px 6px rgba(0, 0, 0, 0.25);
  --shadow-lighter: 4px 4px 20px 20px rgba(0, 0, 0, 0.01);
  --transition: 0.3s;
  --transition-transform: transform .65s cubic-bezier(.23, 1, .32, 1);
  --font-primary: "Sora", sans-serif;
  --secondary-font: "Sora", sans-serif;
  --font-awesome: "Font Awesome 6 Pro";
  --font-size-b1: 16px;
  --font-size-b2: 14px;
  --font-size-b3: 12px;
  --line-height-b1: 1.67;
  --line-height-b2: 1.7;
  --line-height-b3: 1.6;
  --line-height-b3: 1.3;
  --h1: 60px;
  --h2: 48px;
  --h3: 32px;
  --h4: 24px;
  --h5: 20px;
  --h6: 18px;
}

/*=====================
All Extend Here
=======================*/
/* Radius */
.radius-small {
  border-radius: var(--radius-small) !important;
}

.radius-bigger {
  border-radius: var(--radius-bigger) !important;
}

/* Font Weight */
/* Shadows */
/*=============== Style Css =============*/
.portal-breadcrumb .breadcrumb-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.bgImagePosition {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

/*-- Dealer Portal & Vinfo Admin shell: layout offset, badges, and accessibility overrides that
     have no equivalent in the AIwave template (see docs/UI_STYLE_GUIDE.md). Everything else
     (rbt-left-panel, rbt-dashboard-header, rbt-main-content, rbt-pagination, rbt-modal-box,
     rainbow-badge-card, rbt-modern-select, single-settings-box, btn-default, ...) comes from the
     template's own compiled stylesheet (css/style.min.css), already loaded before this file. --*/
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--color-blackest);
  color: var(--color-heading);
  padding: 12px 20px;
  border-radius: var(--radius-small);
}
.skip-link:focus {
  left: 12px;
  top: 12px;
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* Font Awesome Pro duotone layers — tokens only.
   Default = dark surfaces. Light theme remaps for readable layers on light chrome.
   Portal content sheet stays dark and restores dark-surface tokens. */
.fa-duotone,
.fad {
  --fa-primary-color: var(--color-heading);
  --fa-secondary-color: var(--color-primary);
  --fa-secondary-opacity: 0.55;
}
.fa-light {
  color: inherit;
}
body.active-light-mode .fa-duotone,
body.active-light-mode .fad,
body.active-dark-mode .fa-duotone,
body.active-dark-mode .fad {
  --fa-primary-color: var(--color-black);
  --fa-secondary-color: var(--color-primary);
  --fa-secondary-opacity: 0.5;
}
.dealer-portal-theme .portal-content-sheet .fa-duotone,
.dealer-portal-theme .portal-content-sheet .fad,
.admin-portal-theme .portal-content-sheet .fa-duotone,
.admin-portal-theme .portal-content-sheet .fad {
  --fa-primary-color: var(--color-heading);
  --fa-secondary-color: var(--color-primary);
  --fa-secondary-opacity: 0.55;
}

/* Bootstrap's .modal-dialog sets pointer-events: none, relying on a .modal-content child to reset
   it to auto (see .modal-content in bootstrap.min.css) - that's how a real Bootstrap modal stays
   click-through everywhere except its own box. Every modal in this app (PortalConfirmDialog,
   EmailReportModal, ShareReportModal, MileageConfirmModal, and the inline modals on several Admin
   *.razor pages) swaps the standard .modal-content for a custom .wrapper div and none of them ever
   reset pointer-events, so every button/input/link inside every modal in the app is unclickable -
   clicks fall through to the .modal backdrop underneath instead. Not scoped to a portal theme:
   this file loads on every route in the single-page app, and the affected modals include ones on
   public report pages outside the dealer/admin portals. */
.modal-dialog .wrapper {
  pointer-events: auto;
}

/* Portal shell: outer canvas + TL-rounded content sheet (Saroling structure, Vinfo tokens).
   Desktop collapse = minified icon rail; compact viewports keep off-canvas hide/show. */
.dealer-portal-theme,
.admin-portal-theme {
  --sidebar-width: 268px;
  --sidebar-rail-width: 76px;
}
@media only screen and (max-width: 479px) {
  .dealer-portal-theme,
  .admin-portal-theme {
    --sidebar-width: 240px;
  }
}
.dealer-portal-theme.page-wrapper,
.admin-portal-theme.page-wrapper,
.dealer-portal-theme .rbt-panel-wrapper,
.admin-portal-theme .rbt-panel-wrapper {
  background: var(--color-bg-1);
  min-height: 100vh;
}
/* Gap above the content sheet: padding on the wrapper (not margin on the sheet).
   .rbt-panel-wrapper has no border/padding/overflow/flex, so a child's margin-top
   collapses through it and never shows as a canvas→sheet gap.
   Use px (not rem): template html { font-size: 10px }, so 1rem ≈ 10px and reads as no gap. */
.dealer-portal-theme .rbt-panel-wrapper,
.admin-portal-theme .rbt-panel-wrapper {
  padding-top: 16px;
}
.dealer-portal-theme .rbt-left-panel,
.admin-portal-theme .rbt-left-panel {
  top: 16px;
  height: calc(100vh - 16px);
  width: var(--sidebar-width);
  padding: 12px 8px 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  transition: width 0.25s ease, transform 0.25s ease;
}
.dealer-portal-theme .rbt-left-panel .rbt-default-sidebar,
.dealer-portal-theme .rbt-left-panel .rbt-default-sidebar .inner,
.dealer-portal-theme .rbt-left-panel .rbt-default-sidebar-wrapper,
.admin-portal-theme .rbt-left-panel .rbt-default-sidebar,
.admin-portal-theme .rbt-left-panel .rbt-default-sidebar .inner,
.admin-portal-theme .rbt-left-panel .rbt-default-sidebar-wrapper {
  background: transparent;
}
.dealer-portal-theme .rbt-left-panel .portal-sidebar,
.admin-portal-theme .rbt-left-panel .portal-sidebar {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.dealer-portal-theme .rbt-left-panel .inner,
.admin-portal-theme .rbt-left-panel .inner {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.dealer-portal-theme .rbt-left-panel .rbt-default-sidebar-wrapper,
.admin-portal-theme .rbt-left-panel .rbt-default-sidebar-wrapper {
  flex: 1 1 auto;
  height: auto;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
}
.dealer-portal-theme .rbt-left-panel.collapsed,
.admin-portal-theme .rbt-left-panel.collapsed {
  width: var(--sidebar-rail-width);
  transform: none;
  padding-left: 6px;
  padding-right: 6px;
}
/* Compact = off-canvas drawer: solid canvas fill so content does not show through.
   Desktop expanded sidebar stays transparent on the outer canvas. */
@media only screen and (max-width: 1199px) {
  .dealer-portal-theme .rbt-left-panel,
  .admin-portal-theme .rbt-left-panel {
    z-index: 98;
    background: var(--color-bg-1);
    border-right: 1px solid var(--color-border);
  }
  .dealer-portal-theme .rbt-left-panel.collapsed,
  .admin-portal-theme .rbt-left-panel.collapsed {
    width: var(--sidebar-width);
    transform: translateX(-100%);
    padding-left: 8px;
    padding-right: 8px;
  }
}
.dealer-portal-theme .portal-content-sheet,
.admin-portal-theme .portal-content-sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 16px);
  margin-left: var(--sidebar-width);
  background: var(--color-dark);
  border-top-left-radius: var(--radius-big);
  border-left: 1px solid var(--color-border);
  border-top: 1px solid var(--color-border);
  overflow: hidden;
  transition: margin-left 0.25s ease;
}
@media only screen and (max-width: 1199px) {
  .dealer-portal-theme .portal-content-sheet,
  .admin-portal-theme .portal-content-sheet {
    margin-left: 0;
    border-top-left-radius: 0;
    border-left: 0;
  }
}
.dealer-portal-theme.sidebar-collapsed .portal-content-sheet,
.admin-portal-theme.sidebar-collapsed .portal-content-sheet {
  margin-left: var(--sidebar-rail-width);
}
@media only screen and (max-width: 1199px) {
  .dealer-portal-theme.sidebar-collapsed .portal-content-sheet,
  .admin-portal-theme.sidebar-collapsed .portal-content-sheet {
    margin-left: 0;
    border-top-left-radius: 0;
    border-left: 0;
  }
}
.dealer-portal-theme .rbt-main-content,
.admin-portal-theme .rbt-main-content {
  width: auto;
  margin: 0;
  flex: 1 1 auto;
  min-height: 0;
  /* Single portal content gutter — title, cards, and grid bars share this inset. */
  padding: 16px 40px 24px;
}
@media only screen and (max-width: 1199px) {
  .dealer-portal-theme .rbt-main-content,
  .admin-portal-theme .rbt-main-content {
    padding: 14px 24px 20px;
  }
}
@media only screen and (max-width: 767px) {
  .dealer-portal-theme .rbt-main-content,
  .admin-portal-theme .rbt-main-content {
    padding: 12px 15px 16px;
  }
}

/* Cards match the sheet surface; drop horizontal padding so copy aligns with the H1. */
.dealer-portal-theme .single-settings-box,
.admin-portal-theme .single-settings-box {
  padding-left: 0;
  padding-right: 0;
}

/* Quiet chrome footer: copyright+legal left, version right (no center column). */
.dealer-portal-theme .portal-content-footer,
.admin-portal-theme .portal-content-footer {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin: 0;
  padding: 10px 40px 14px;
  border-top: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-off);
  font-family: var(--font-primary);
  font-size: 10px;
  line-height: 1.4;
}
@media only screen and (max-width: 1199px) {
  .dealer-portal-theme .portal-content-footer,
  .admin-portal-theme .portal-content-footer {
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media only screen and (max-width: 767px) {
  .dealer-portal-theme .portal-content-footer,
  .admin-portal-theme .portal-content-footer {
    padding: 10px 15px 12px;
  }
}
.dealer-portal-theme .portal-content-footer__left,
.admin-portal-theme .portal-content-footer__left {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  min-width: 0;
  margin: 0;
  color: var(--color-text-off);
}
.dealer-portal-theme .portal-content-footer__left a,
.admin-portal-theme .portal-content-footer__left a {
  color: var(--color-text-off);
  text-decoration: none;
  transition: color 0.2s ease;
}
.dealer-portal-theme .portal-content-footer__left a:hover,
.dealer-portal-theme .portal-content-footer__left a:focus-visible,
.admin-portal-theme .portal-content-footer__left a:hover,
.admin-portal-theme .portal-content-footer__left a:focus-visible {
  color: var(--color-body);
}
.dealer-portal-theme .portal-content-footer__copy,
.dealer-portal-theme .portal-content-footer__version,
.admin-portal-theme .portal-content-footer__copy,
.admin-portal-theme .portal-content-footer__version {
  margin: 0;
  color: var(--color-text-off);
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
}
.dealer-portal-theme .portal-content-footer__version,
.admin-portal-theme .portal-content-footer__version {
  flex: 0 0 auto;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  text-align: right;
}
/* Legacy 3-child markup: keep Privacy/Terms with copyright on the left. */
.dealer-portal-theme .portal-content-footer__links,
.admin-portal-theme .portal-content-footer__links {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
  margin-left: 6px;
}
.dealer-portal-theme .portal-content-footer__links a,
.admin-portal-theme .portal-content-footer__links a {
  color: var(--color-text-off);
  text-decoration: none;
  transition: color 0.2s ease;
}
.dealer-portal-theme .portal-content-footer__links a:hover,
.dealer-portal-theme .portal-content-footer__links a:focus-visible,
.admin-portal-theme .portal-content-footer__links a:hover,
.admin-portal-theme .portal-content-footer__links a:focus-visible {
  color: var(--color-body);
}
.dealer-portal-theme .portal-content-footer__sep,
.admin-portal-theme .portal-content-footer__sep {
  color: var(--color-text-off);
  opacity: 0.7;
}

/* Quiet ghost logout in topbar/hero (no outline border). */
.dealer-portal-theme .portal-topbar a.btn-default.btn-border,
.dealer-portal-theme .portal-topbar button.btn-default.btn-border,
.dealer-portal-theme .portal-topbar .portal-logout,
.dealer-portal-theme .portal-dash-hero a.btn-default.btn-border,
.dealer-portal-theme .portal-dash-hero button.btn-default.btn-border,
.dealer-portal-theme .portal-dash-hero .portal-logout,
.admin-portal-theme .portal-topbar a.btn-default.btn-border,
.admin-portal-theme .portal-topbar button.btn-default.btn-border,
.admin-portal-theme .portal-topbar .portal-logout,
.admin-portal-theme .portal-dash-hero a.btn-default.btn-border,
.admin-portal-theme .portal-dash-hero button.btn-default.btn-border,
.admin-portal-theme .portal-dash-hero .portal-logout {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--color-body);
  padding-left: 10px;
  padding-right: 10px;
}
.dealer-portal-theme .portal-topbar a.btn-default.btn-border:hover,
.dealer-portal-theme .portal-topbar a.btn-default.btn-border:focus-visible,
.dealer-portal-theme .portal-topbar button.btn-default.btn-border:hover,
.dealer-portal-theme .portal-topbar button.btn-default.btn-border:focus-visible,
.dealer-portal-theme .portal-topbar .portal-logout:hover,
.dealer-portal-theme .portal-topbar .portal-logout:focus-visible,
.dealer-portal-theme .portal-dash-hero a.btn-default.btn-border:hover,
.dealer-portal-theme .portal-dash-hero a.btn-default.btn-border:focus-visible,
.dealer-portal-theme .portal-dash-hero button.btn-default.btn-border:hover,
.dealer-portal-theme .portal-dash-hero button.btn-default.btn-border:focus-visible,
.dealer-portal-theme .portal-dash-hero .portal-logout:hover,
.dealer-portal-theme .portal-dash-hero .portal-logout:focus-visible,
.admin-portal-theme .portal-topbar a.btn-default.btn-border:hover,
.admin-portal-theme .portal-topbar a.btn-default.btn-border:focus-visible,
.admin-portal-theme .portal-topbar button.btn-default.btn-border:hover,
.admin-portal-theme .portal-topbar button.btn-default.btn-border:focus-visible,
.admin-portal-theme .portal-topbar .portal-logout:hover,
.admin-portal-theme .portal-topbar .portal-logout:focus-visible,
.admin-portal-theme .portal-dash-hero a.btn-default.btn-border:hover,
.admin-portal-theme .portal-dash-hero a.btn-default.btn-border:focus-visible,
.admin-portal-theme .portal-dash-hero button.btn-default.btn-border:hover,
.admin-portal-theme .portal-dash-hero button.btn-default.btn-border:focus-visible,
.admin-portal-theme .portal-dash-hero .portal-logout:hover,
.admin-portal-theme .portal-dash-hero .portal-logout:focus-visible {
  color: var(--color-heading);
  background: transparent !important;
}
.dealer-portal-theme.sidebar-collapsed .rbt-main-content,
.admin-portal-theme.sidebar-collapsed .rbt-main-content {
  margin-left: 0;
}
.dealer-portal-theme .rbt-dashboard-header,
.admin-portal-theme .rbt-dashboard-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--color-dark);
  border-bottom: 1px solid var(--color-border);
  padding-left: 24px;
  padding-right: 24px;
}
.dealer-portal-theme .portal-topbar,
.admin-portal-theme .portal-topbar {
  min-height: 80px;
  border-bottom: none;
  padding-top: 14px;
  padding-bottom: 14px;
}
.dealer-portal-theme .portal-topbar .container-fluid,
.dealer-portal-theme .portal-topbar .row,
.admin-portal-theme .portal-topbar .container-fluid,
.admin-portal-theme .portal-topbar .row {
  min-height: 52px;
}
.dealer-portal-theme .portal-topbar .header-left,
.admin-portal-theme .portal-topbar .header-left {
  gap: 12px;
  min-width: 0;
}
.dealer-portal-theme .portal-topbar-greeting,
.admin-portal-theme .portal-topbar-greeting {
  min-width: 0;
  text-align: left;
}
.dealer-portal-theme .portal-topbar-greeting__title,
.admin-portal-theme .portal-topbar-greeting__title {
  margin: 0;
  color: var(--color-heading);
  font-family: var(--font-primary);
  font-size: var(--h4);
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dealer-portal-theme .portal-topbar-greeting__date,
.admin-portal-theme .portal-topbar-greeting__date {
  margin: 4px 0 0;
  color: var(--color-body);
  font-family: var(--font-primary);
  font-size: var(--font-size-b1);
  font-weight: 400;
  line-height: var(--line-height-b1);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dealer-portal-theme .portal-topbar-meta,
.admin-portal-theme .portal-topbar-meta {
  margin: 0;
  max-width: min(360px, 42vw);
  color: var(--color-body);
  font-family: var(--font-primary);
  font-size: var(--font-size-b2);
  font-weight: 500;
  line-height: var(--line-height-b2);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dealer-portal-theme .portal-context-label,
.admin-portal-theme .portal-context-label {
  font-weight: 600;
  font-size: var(--font-size-b3);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-body);
  white-space: nowrap;
}
.dealer-portal-theme .portal-brand-meta,
.admin-portal-theme .portal-brand-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 0 6px;
  min-width: 0;
}
.dealer-portal-theme .portal-sidebar-brand,
.admin-portal-theme .portal-sidebar-brand {
  flex: 0 0 auto;
  padding: 4px 6px 14px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 8px;
}
.dealer-portal-theme .portal-brand-logo-hit,
.admin-portal-theme .portal-brand-logo-hit {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 40px;
}
.dealer-portal-theme .portal-brand-logo-hit .portal-brand-home,
.admin-portal-theme .portal-brand-logo-hit .portal-brand-home {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.dealer-portal-theme .portal-brand-logo-hit .portal-brand-logo-img,
.admin-portal-theme .portal-brand-logo-hit .portal-brand-logo-img {
  display: block;
  width: auto;
  height: 28px;
  max-width: 118px;
  object-fit: contain;
  object-position: left center;
}
.dealer-portal-theme .portal-brand-logo-hit .portal-brand-collapse,
.admin-portal-theme .portal-brand-logo-hit .portal-brand-collapse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-small);
  background: transparent;
  color: var(--color-body);
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}
.dealer-portal-theme .portal-brand-logo-hit .portal-brand-collapse i,
.admin-portal-theme .portal-brand-logo-hit .portal-brand-collapse i {
  font-size: 14px;
  margin: 0;
  width: auto;
}
.dealer-portal-theme .portal-brand-logo-hit .portal-brand-collapse:hover,
.admin-portal-theme .portal-brand-logo-hit .portal-brand-collapse:hover {
  color: var(--color-heading);
  background: var(--color-lessdark);
}
.dealer-portal-theme .portal-brand-logo-hit .portal-brand-collapse:focus-visible,
.admin-portal-theme .portal-brand-logo-hit .portal-brand-collapse:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}
.dealer-portal-theme .portal-brand-logo-hit.is-minified,
.admin-portal-theme .portal-brand-logo-hit.is-minified {
  justify-content: center;
  width: 100%;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.dealer-portal-theme .portal-brand-logo-hit.is-minified .portal-brand-mark,
.admin-portal-theme .portal-brand-logo-hit.is-minified .portal-brand-mark {
  display: block;
  width: 36px;
  height: 32px;
  overflow: hidden;
  line-height: 0;
  transition: opacity 0.2s ease;
}
.dealer-portal-theme .portal-brand-logo-hit.is-minified .portal-brand-logo-img,
.admin-portal-theme .portal-brand-logo-hit.is-minified .portal-brand-logo-img {
  width: 96px;
  max-width: none;
  height: 32px;
  object-fit: cover;
  object-position: left center;
}
.dealer-portal-theme .portal-brand-logo-hit.is-minified .portal-brand-expand-icon,
.admin-portal-theme .portal-brand-logo-hit.is-minified .portal-brand-expand-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  width: auto;
  font-size: 15px;
  color: var(--color-heading);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.dealer-portal-theme .portal-brand-logo-hit.is-minified:hover .portal-brand-mark,
.dealer-portal-theme .portal-brand-logo-hit.is-minified:focus-visible .portal-brand-mark,
.admin-portal-theme .portal-brand-logo-hit.is-minified:hover .portal-brand-mark,
.admin-portal-theme .portal-brand-logo-hit.is-minified:focus-visible .portal-brand-mark {
  opacity: 0.5;
}
.dealer-portal-theme .portal-brand-logo-hit.is-minified:hover .portal-brand-expand-icon,
.dealer-portal-theme .portal-brand-logo-hit.is-minified:focus-visible .portal-brand-expand-icon,
.admin-portal-theme .portal-brand-logo-hit.is-minified:hover .portal-brand-expand-icon,
.admin-portal-theme .portal-brand-logo-hit.is-minified:focus-visible .portal-brand-expand-icon {
  opacity: 1;
}
.dealer-portal-theme .portal-brand-logo-hit.is-minified:focus-visible,
.admin-portal-theme .portal-brand-logo-hit.is-minified:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-small);
}
.dealer-portal-theme .portal-sidebar-footer,
.admin-portal-theme .portal-sidebar-footer {
  flex: 0 0 auto;
  margin: auto -8px 0;
  padding: 0;
  width: calc(100% + 16px);
  border-top: 0;
}
.dealer-portal-theme .portal-user-menu--sidebar,
.admin-portal-theme .portal-user-menu--sidebar {
  display: block;
  height: auto !important;
  margin: 0 !important;
  margin-left: 0 !important;
  width: 100%;
  z-index: 2;
}
.dealer-portal-theme .portal-user-menu--sidebar .portal-user-menu__trigger,
.admin-portal-theme .portal-user-menu--sidebar .portal-user-menu__trigger {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  gap: 12px;
  padding: 14px 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}
/* Kill template .inner column stacking — avatar LEFT, name+email RIGHT. */
.dealer-portal-theme .portal-user-menu--sidebar .portal-user-menu__trigger .inner,
.admin-portal-theme .portal-user-menu--sidebar .portal-user-menu__trigger .inner {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
  width: auto;
  margin: 0;
  padding: 0;
}
.dealer-portal-theme .portal-user-menu--sidebar .portal-user-avatar,
.admin-portal-theme .portal-user-menu--sidebar .portal-user-avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-primary) 22%, var(--color-blackest));
  color: var(--color-heading);
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0;
}
.dealer-portal-theme .portal-user-menu--sidebar .portal-user-menu__meta,
.admin-portal-theme .portal-user-menu--sidebar .portal-user-menu__meta,
.dealer-portal-theme .portal-user-menu--sidebar .content,
.admin-portal-theme .portal-user-menu--sidebar .content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
  flex: 1 1 auto;
  gap: 2px;
  text-align: left;
}
.dealer-portal-theme .portal-user-menu--sidebar .portal-user-menu__name,
.admin-portal-theme .portal-user-menu--sidebar .portal-user-menu__name,
.dealer-portal-theme .portal-user-menu--sidebar .content .title,
.admin-portal-theme .portal-user-menu--sidebar .content .title {
  display: block;
  width: 100%;
  color: var(--color-heading);
  font-family: var(--font-primary);
  font-size: var(--font-size-b3);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dealer-portal-theme .portal-user-menu--sidebar .portal-user-menu__email,
.admin-portal-theme .portal-user-menu--sidebar .portal-user-menu__email,
.dealer-portal-theme .portal-user-menu--sidebar .content p,
.admin-portal-theme .portal-user-menu--sidebar .content p {
  display: block;
  width: 100%;
  margin: 0;
  color: var(--color-body);
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dealer-portal-theme .portal-user-menu--sidebar .portal-user-menu__logout,
.admin-portal-theme .portal-user-menu--sidebar .portal-user-menu__logout {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--color-body);
  text-decoration: none;
  border: 0;
  background: transparent;
  padding: 0;
  border-radius: var(--radius-small);
  transition: color 0.2s ease, background 0.2s ease;
}
.dealer-portal-theme .portal-user-menu--sidebar .portal-user-menu__logout i,
.admin-portal-theme .portal-user-menu--sidebar .portal-user-menu__logout i {
  font-size: 15px;
  margin: 0;
}
.dealer-portal-theme .portal-user-menu--sidebar .portal-user-menu__logout:hover,
.dealer-portal-theme .portal-user-menu--sidebar .portal-user-menu__logout:focus-visible,
.admin-portal-theme .portal-user-menu--sidebar .portal-user-menu__logout:hover,
.admin-portal-theme .portal-user-menu--sidebar .portal-user-menu__logout:focus-visible {
  color: var(--color-heading);
  background: var(--color-lessdark);
}
.dealer-portal-theme.sidebar-collapsed .portal-user-menu--sidebar .portal-user-menu__trigger,
.admin-portal-theme.sidebar-collapsed .portal-user-menu--sidebar .portal-user-menu__trigger {
  justify-content: center;
  padding: 14px 8px;
  gap: 8px;
}
.dealer-portal-theme.sidebar-collapsed .portal-user-menu--sidebar .portal-user-menu__meta,
.dealer-portal-theme.sidebar-collapsed .portal-user-menu--sidebar .content,
.admin-portal-theme.sidebar-collapsed .portal-user-menu--sidebar .portal-user-menu__meta,
.admin-portal-theme.sidebar-collapsed .portal-user-menu--sidebar .content {
  display: none;
}
.dealer-portal-theme .rbt-left-panel.collapsed .portal-sidebar-footer,
.admin-portal-theme .rbt-left-panel.collapsed .portal-sidebar-footer {
  margin-left: -6px;
  margin-right: -6px;
  width: calc(100% + 12px);
}
@media only screen and (max-width: 1199px) {
  .dealer-portal-theme .rbt-left-panel.collapsed .portal-sidebar-footer,
  .admin-portal-theme .rbt-left-panel.collapsed .portal-sidebar-footer {
    margin-left: -8px;
    margin-right: -8px;
    width: calc(100% + 16px);
  }
}
/* Mobile/off-canvas bars toggle (desktop brand toggle lives in the sidebar). */
.dealer-portal-theme .expand-btn-grp,
.admin-portal-theme .expand-btn-grp {
  margin-left: 0;
}
.dealer-portal-theme .expand-btn-grp button.popup-dashboardleft-btn,
.admin-portal-theme .expand-btn-grp button.popup-dashboardleft-btn {
  position: static;
  left: auto;
  top: auto;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-small);
  border: 1px solid var(--color-border);
  background: var(--color-blackest);
  color: var(--color-body);
  font-size: 14px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.dealer-portal-theme .expand-btn-grp button.popup-dashboardleft-btn i,
.admin-portal-theme .expand-btn-grp button.popup-dashboardleft-btn i {
  margin: 0;
  width: auto;
  font-size: 14px;
}
.dealer-portal-theme .expand-btn-grp button.popup-dashboardleft-btn:hover,
.admin-portal-theme .expand-btn-grp button.popup-dashboardleft-btn:hover {
  background: var(--color-lessdark);
  color: var(--color-heading);
  border-color: var(--color-border);
}
.dealer-portal-theme .expand-btn-grp button.popup-dashboardleft-btn:not(.collapsed),
.admin-portal-theme .expand-btn-grp button.popup-dashboardleft-btn:not(.collapsed) {
  color: var(--color-heading);
  border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
}

/* Header placement avatar (My Account still uses PortalUserMenu in the top bar). */
.portal-user-menu .portal-user-avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-primary) 22%, var(--color-blackest));
  color: var(--color-heading);
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-right: 10px;
}

/* Dashboard metric tiles (MudPaper) — icon wells tinted from status/primary tokens only. */
.portal-dash-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.portal-dash-hero__title {
  margin: 0;
  color: var(--color-heading);
  font-family: var(--font-primary);
  font-size: var(--h4);
  font-weight: 600;
}
.portal-dash-hero__sub {
  margin: 6px 0 0;
  color: var(--color-body);
  font-size: var(--font-size-b2);
}
.portal-dash-card {
  height: 100%;
  padding: 20px !important;
  background: var(--color-blackest) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius) !important;
  color: var(--color-body) !important;
  box-shadow: none !important;
}
.portal-dash-card--clickable {
  cursor: pointer;
}
.portal-dash-card--clickable:focus-visible,
.portal-dash-card--clickable .portal-dash-card__hit:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.portal-dash-card__hit {
  display: block;
  height: 100%;
  outline: none;
}
.portal-dash-card__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.portal-dash-card__label {
  margin: 0;
  font-size: var(--font-size-b3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-body);
}
.portal-dash-card__value {
  margin: 8px 0 0;
  color: var(--color-heading);
  font-size: var(--h4);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.portal-dash-card__value--compact {
  font-size: var(--h5);
}
.portal-dash-card__hint {
  margin: 8px 0 0;
  font-size: var(--font-size-b3);
  color: var(--color-text-off);
}
.portal-dash-card__well {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-small);
  font-size: 18px;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.portal-dash-card__well--success {
  color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 18%, transparent);
}
.portal-dash-card__well--info {
  color: var(--color-info);
  background: color-mix(in srgb, var(--color-info) 18%, transparent);
}
.portal-dash-card__well--warning {
  color: var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 18%, transparent);
}
.portal-dash-card__well--danger {
  color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 18%, transparent);
}
.portal-dash-card a {
  color: var(--color-heading);
  text-decoration: none;
}
.portal-dash-card a:hover {
  color: var(--color-secondary);
}

.portal-page-header {
  margin-bottom: 20px;
}
.portal-page-header__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
}
.portal-page-header__heading {
  min-width: 0;
}
.portal-page-header__title {
  margin: 0;
  color: var(--color-heading);
  font-family: var(--font-primary);
  font-size: var(--h4);
  font-weight: 600;
  line-height: 1.3;
}
.portal-page-header__subtitle {
  margin: 6px 0 0;
  color: var(--color-body);
  font-family: var(--font-primary);
  font-size: var(--font-size-b2);
  font-weight: 400;
  line-height: var(--line-height-b2);
}
.portal-page-header__actions {
  flex: 0 0 auto;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.portal-breadcrumb {
  margin: 0 0 10px;
}
.portal-breadcrumb .breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  color: var(--color-text-off);
  font-family: var(--font-primary);
  font-size: var(--font-size-b3);
  font-weight: 400;
  line-height: var(--line-height-b3);
}
.portal-breadcrumb .breadcrumb-list li {
  display: inline-flex;
  align-items: center;
  gap: 0;
  color: var(--color-text-off);
}
.portal-breadcrumb .breadcrumb-list li:not(:last-child)::after {
  content: "›";
  margin-inline: 8px;
  color: var(--color-text-off);
  font-weight: 400;
  opacity: 0.8;
}
.portal-breadcrumb .breadcrumb-list li a {
  color: var(--color-text-off);
  text-decoration: none;
}
.portal-breadcrumb .breadcrumb-list li a:hover,
.portal-breadcrumb .breadcrumb-list li a:focus-visible {
  color: var(--color-body);
}
.portal-breadcrumb .breadcrumb-list li span[aria-current=page] {
  color: var(--color-body);
  font-weight: 500;
}

.portal-tenant-selector {
  margin-right: 16px;
}
.portal-tenant-selector label {
  color: var(--color-body);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.portal-tenant-selector .rbt-modern-select select {
  width: auto;
  height: 40px;
  padding: 0 12px;
  font-size: var(--font-size-b3);
}

/* Text-color/background rules for .table itself apply to both portal themes directly (not just
   nested under .portal-data-grid below) so every bare Bootstrap <table class="table"> is themed,
   not just ones wrapped in PortalDataGrid - several admin/dealer pages hand-roll plain tables. */
.dealer-portal-theme .table,
.admin-portal-theme .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--color-body);
  --bs-table-border-color: var(--color-border);
  --bs-table-striped-bg: transparent;
  --bs-table-striped-color: var(--color-body);
  --bs-table-hover-bg: transparent;
  --bs-table-hover-color: var(--color-body);
  --bs-table-active-bg: transparent;
  --bs-table-accent-bg: transparent;
  margin: 0;
  color: var(--color-body);
  border-color: var(--color-border);
  font-size: var(--font-size-b2);
}
.dealer-portal-theme .table > :not(caption) > * > *,
.admin-portal-theme .table > :not(caption) > * > * {
  box-shadow: none;
  background-color: transparent;
}
.dealer-portal-theme .table > :not(:last-child) > :last-child > *,
.admin-portal-theme .table > :not(:last-child) > :last-child > * {
  border-bottom-color: var(--color-border);
}
.dealer-portal-theme .table thead th,
.admin-portal-theme .table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 11px 16px;
  background: var(--color-blackest);
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-bottom-color: var(--color-border);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-body);
}
.dealer-portal-theme .table tbody td,
.admin-portal-theme .table tbody td {
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-bottom-color: var(--color-border);
  vertical-align: middle;
}
.dealer-portal-theme .table tbody td:first-child,
.admin-portal-theme .table tbody td:first-child {
  color: var(--color-heading);
  font-weight: 500;
}
.dealer-portal-theme .table tbody tr,
.admin-portal-theme .table tbody tr {
  transition: background 0.12s;
}
.dealer-portal-theme .table tbody tr:hover,
.admin-portal-theme .table tbody tr:hover {
  background: var(--color-lessdark);
}
.dealer-portal-theme .table tbody tr:last-child td,
.admin-portal-theme .table tbody tr:last-child td {
  border-bottom: 0;
}
.dealer-portal-theme .table a,
.admin-portal-theme .table a {
  color: var(--color-heading);
  text-decoration: none;
}
.dealer-portal-theme .table a:hover,
.admin-portal-theme .table a:hover {
  color: var(--color-secondary);
}
@media only screen and (max-width: 767px) {
  .dealer-portal-theme .table th,
  .dealer-portal-theme .table td,
  .admin-portal-theme .table th,
  .admin-portal-theme .table td {
    white-space: nowrap;
  }
}

.portal-data-grid {
  padding: 0;
}
.portal-data-grid .portal-grid-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
}
@media only screen and (max-width: 767px) {
  .portal-data-grid .portal-grid-bar {
    flex-wrap: wrap;
    padding: 12px 0;
  }
}
.portal-data-grid .portal-grid-title {
  margin: 0 auto 0 0;
  font-size: var(--h6);
  font-weight: 600;
  color: var(--color-heading);
}
.portal-data-grid .portal-grid-title .count {
  margin-left: 8px;
  color: var(--color-body);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.portal-data-grid .portal-grid-search {
  --portal-grid-search-height: 44px;
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 260px;
  margin-left: auto;
  min-width: 0;
}
.portal-data-grid .portal-grid-search .portal-grid-search__icon {
  position: absolute;
  left: 14px;
  z-index: 1;
  font-size: 14px;
  line-height: 1;
  color: var(--color-body);
  opacity: 0.7;
  pointer-events: none;
}
.portal-data-grid .portal-grid-search .portal-grid-search__input,
.portal-data-grid .portal-grid-search input[type=search] {
  box-sizing: border-box;
  width: 100%;
  max-width: 280px;
  height: var(--portal-grid-search-height);
  min-height: var(--portal-grid-search-height);
  margin: 0;
  padding: 0 14px 0 40px;
  background: var(--color-blackest);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-heading);
  font-family: var(--font-primary);
  font-size: var(--font-size-b2);
  font-weight: var(--p-regular);
  line-height: 1.25;
  outline: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
}
.portal-data-grid .portal-grid-search .portal-grid-search__input::placeholder,
.portal-data-grid .portal-grid-search input[type=search]::placeholder {
  color: var(--color-body);
  opacity: 0.65;
}
.portal-data-grid .portal-grid-search .portal-grid-search__input:focus,
.portal-data-grid .portal-grid-search .portal-grid-search__input:focus-visible,
.portal-data-grid .portal-grid-search input[type=search]:focus,
.portal-data-grid .portal-grid-search input[type=search]:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: none;
  background: var(--color-blackest);
  color: var(--color-heading);
}
.portal-data-grid .portal-grid-search .portal-grid-search__input::-webkit-search-decoration,
.portal-data-grid .portal-grid-search .portal-grid-search__input::-webkit-search-cancel-button,
.portal-data-grid .portal-grid-search input[type=search]::-webkit-search-decoration,
.portal-data-grid .portal-grid-search input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
@media only screen and (max-width: 575px) {
  .portal-data-grid .portal-grid-search {
    flex: 1 1 100%;
    width: 100%;
    margin-left: 0;
  }
  .portal-data-grid .portal-grid-search .portal-grid-search__input,
  .portal-data-grid .portal-grid-search input[type=search] {
    max-width: none;
  }
}
.portal-data-grid .portal-grid-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 44px;
  padding: 0 14px;
  background: var(--color-blackest);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-body);
  font-family: var(--font-primary);
  font-size: var(--font-size-b3);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.portal-data-grid .portal-grid-filter-toggle:hover {
  color: var(--color-heading);
  border-color: var(--color-border);
  background: var(--color-lessdark);
}
.portal-data-grid .portal-grid-filter-toggle.is-active {
  border-color: var(--color-primary);
  background: var(--color-blackest);
  color: var(--color-secondary);
}
.portal-data-grid .portal-grid-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  align-content: flex-start;
  gap: 16px 18px;
  box-sizing: border-box;
  min-height: calc(56px + 36px);
  padding: 18px 24px 20px;
  background: var(--color-lessdark);
  border-bottom: 1px solid var(--color-border);
}
@media only screen and (max-width: 767px) {
  .portal-data-grid .portal-grid-filters {
    min-height: calc(56px + 28px);
    padding: 14px 16px 16px;
    gap: 14px;
  }
}
.portal-data-grid .portal-grid-filters .form-group {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 160px;
}
.portal-data-grid .portal-grid-filters > .form-group > label {
  display: block;
  margin-bottom: 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-body);
}
.portal-data-grid .portal-grid-filters select:not(.vinfo-field__control),
.portal-data-grid .portal-grid-filters input:not(.vinfo-field__control):not([type=file]) {
  width: 100%;
  min-width: 160px;
  height: 44px;
  min-height: 44px;
  padding: 0 12px;
  background: var(--color-blackest);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-heading);
  font-size: var(--font-size-b3);
  margin-bottom: 0;
}
.portal-data-grid .portal-grid-filters .vinfo-field {
  flex: 0 1 220px;
  width: 220px;
  max-width: 100%;
  min-width: 180px;
  height: var(--vinfo-field-height, 56px);
  min-height: var(--vinfo-field-height, 56px);
  max-height: var(--vinfo-field-height, 56px);
}
.portal-data-grid .portal-grid-scroll {
  overflow-x: auto;
}
.portal-data-grid .table,
.portal-data-grid .portal-data-grid-table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--color-body);
  --bs-table-border-color: var(--color-border);
  --bs-table-striped-bg: transparent;
  --bs-table-striped-color: var(--color-body);
  --bs-table-hover-bg: transparent;
  --bs-table-hover-color: var(--color-body);
  --bs-table-active-bg: transparent;
  --bs-table-accent-bg: transparent;
  width: 100%;
  margin: 0;
  color: var(--color-body);
  border-color: var(--color-border);
  font-family: var(--font-primary);
  font-size: var(--font-size-b2);
  border-collapse: collapse;
}
.portal-data-grid .table > :not(caption) > * > *,
.portal-data-grid .portal-data-grid-table > :not(caption) > * > * {
  box-shadow: none;
  background-color: transparent;
  border-color: var(--color-border);
}
.portal-data-grid .table > :not(:last-child) > :last-child > *,
.portal-data-grid .portal-data-grid-table > :not(:last-child) > :last-child > * {
  border-bottom-color: var(--color-border);
}
.portal-data-grid .table thead th,
.portal-data-grid .portal-data-grid-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 12px 16px;
  background: var(--color-blackest);
  border: 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-body);
}
.portal-data-grid .table tbody td,
.portal-data-grid .portal-data-grid-table tbody td {
  padding: 15px 16px;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  color: var(--color-body);
  background-color: transparent;
}
.portal-data-grid .table tbody td:first-child,
.portal-data-grid .portal-data-grid-table tbody td:first-child {
  color: var(--color-heading);
  font-weight: 500;
}
.portal-data-grid .table tbody tr,
.portal-data-grid .portal-data-grid-table tbody tr {
  transition: background-color var(--transition);
}
.portal-data-grid .table tbody tr:hover,
.portal-data-grid .portal-data-grid-table tbody tr:hover {
  background-color: var(--color-lessdark);
}
.portal-data-grid .table tbody tr:hover > *,
.portal-data-grid .portal-data-grid-table tbody tr:hover > * {
  background-color: transparent;
}
.portal-data-grid .table tbody tr:last-child td,
.portal-data-grid .portal-data-grid-table tbody tr:last-child td {
  border-bottom: 0;
}
.portal-data-grid .table a,
.portal-data-grid .portal-data-grid-table a {
  color: var(--color-heading);
  text-decoration: none;
}
.portal-data-grid .table a:hover,
.portal-data-grid .portal-data-grid-table a:hover {
  color: var(--color-secondary);
}
@media only screen and (max-width: 767px) {
  .portal-data-grid .table th,
  .portal-data-grid .table td,
  .portal-data-grid .portal-data-grid-table th,
  .portal-data-grid .portal-data-grid-table td {
    white-space: nowrap;
    padding: 12px 12px;
  }
}
.portal-data-grid .portal-grid-actions {
  display: inline-flex;
  gap: 4px;
  justify-content: flex-end;
  opacity: 0.55;
  transition: opacity 0.12s;
}
.portal-data-grid tr:hover .portal-grid-actions,
.portal-data-grid tr:focus-within .portal-grid-actions {
  opacity: 1;
}
@media (hover: none) {
  .portal-data-grid .portal-grid-actions {
    opacity: 1;
  }
}
.portal-data-grid .portal-grid-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  color: var(--color-body);
  cursor: pointer;
  transition: 0.2s;
}
.portal-data-grid .portal-grid-icon-btn:hover {
  background: var(--color-blackest);
  border-color: var(--color-border);
  color: var(--color-secondary);
}
.portal-data-grid .portal-grid-icon-btn.portal-grid-icon-btn-danger:hover {
  color: var(--color-danger);
}
.portal-data-grid .portal-grid-skeleton {
  padding: 4px 0;
}
.portal-data-grid .portal-grid-skeleton__row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--color-border);
}
.portal-data-grid .portal-grid-skeleton__row:last-child {
  border-bottom: 0;
}
.portal-data-grid .portal-grid-skeleton__bar {
  height: 11px;
  border-radius: 100px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.04) 100%);
  background-size: 200% 100%;
  animation: portal-grid-shimmer 1.3s ease-in-out infinite;
}
.portal-data-grid .portal-grid-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 56px 16px;
}
.portal-data-grid .portal-grid-empty .portal-grid-empty__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: var(--color-blackest);
  border: 1px solid var(--color-border);
  color: var(--color-body);
  font-size: 20px;
  opacity: 0.9;
}
.portal-data-grid .portal-grid-empty h4 {
  margin: 0;
  font-size: var(--font-size-b1);
  font-weight: 600;
  color: var(--color-heading);
}
.portal-data-grid .portal-grid-empty p {
  margin: 0;
  max-width: 40ch;
  font-size: var(--font-size-b3);
  color: var(--color-body);
}
.portal-data-grid .portal-grid-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 0;
  background: var(--color-lessdark);
  border-top: 1px solid var(--color-border);
}
.portal-data-grid .portal-grid-footer:empty {
  display: none;
}
.portal-data-grid .portal-grid-footer .portal-grid-summary {
  font-size: var(--font-size-b3);
  color: var(--color-body);
  font-variant-numeric: tabular-nums;
}
.portal-data-grid .portal-grid-footer .rbt-pagination {
  margin: 0;
  padding: 0;
  gap: 6px;
  list-style: none;
}
.portal-data-grid .portal-grid-footer .rbt-pagination li {
  margin: 0;
}
.portal-data-grid .portal-grid-footer .rbt-pagination li a {
  width: 34px;
  height: 34px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-dark);
  box-shadow: none;
  font-size: var(--font-size-b3);
}
.portal-data-grid .portal-grid-footer .rbt-pagination li a i {
  font-size: 13px;
}
.portal-data-grid .portal-grid-footer .rbt-pagination li a:hover {
  background: var(--color-blackest);
  border-color: var(--color-border);
  color: var(--color-heading);
}
.portal-data-grid .portal-grid-footer .rbt-pagination li.active a {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}
.portal-data-grid .portal-grid-footer .rbt-pagination li.disabled a {
  opacity: 0.35;
  pointer-events: none;
}
.portal-data-grid .portal-grid-footer .rbt-pagination li.portal-grid-gap span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 34px;
  color: var(--color-body);
  opacity: 0.6;
}

@keyframes portal-grid-shimmer {
  to {
    background-position: -200% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .portal-data-grid .portal-grid-skeleton__bar {
    animation: none;
  }
}

.portal-file-field {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: 120px;
  margin: 0;
  padding: 24px 20px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  background: var(--color-blackest);
  color: var(--color-body);
  text-align: center;
  text-transform: none;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: inherit;
  line-height: 1.35;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.portal-file-field:hover,
.portal-file-field:focus-within {
  border-color: var(--color-primary);
  background: var(--color-lessdark);
}
.portal-file-field__input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  border: 0;
  font-size: 100px;
}
.portal-file-field__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--color-secondary);
  pointer-events: none;
}
.portal-file-field__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  pointer-events: none;
}
.portal-file-field__title {
  font-size: var(--font-size-b2);
  font-weight: 600;
  color: var(--color-heading);
  pointer-events: none;
  max-width: 36ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.portal-file-field__hint {
  font-size: var(--font-size-b3);
  font-weight: 400;
  color: var(--color-body);
  opacity: 0.85;
  pointer-events: none;
}
.portal-file-field--compact {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-height: var(--vinfo-field-height, 56px);
  height: var(--vinfo-field-height, 56px);
  padding: 0 16px;
  text-align: left;
}
.portal-file-field--compact .portal-file-field__icon {
  font-size: 18px;
}
.portal-file-field--compact .portal-file-field__copy {
  align-items: flex-start;
  gap: 1px;
}
.portal-file-field--compact .portal-file-field__title {
  font-size: var(--font-size-b3);
  max-width: none;
}
.portal-file-field--compact .portal-file-field__hint {
  font-size: 11px;
  line-height: 1.2;
}
.active-dark-mode .my-account-theme .portal-file-field {
  background: var(--color-white);
  border-color: var(--color-border-light);
  color: var(--color-gray);
}
.active-dark-mode .my-account-theme .portal-file-field:hover,
.active-dark-mode .my-account-theme .portal-file-field:focus-within {
  border-color: var(--color-primary);
  background: var(--color-strock);
}
.active-dark-mode .my-account-theme .portal-file-field .portal-file-field__title {
  color: var(--color-black);
}
.active-dark-mode .my-account-theme .portal-file-field .portal-file-field__hint {
  color: var(--color-gray);
}

.showroom-batch-form .section-title {
  margin-bottom: 0;
}
.showroom-batch-form__template {
  max-width: 480px;
}
.showroom-batch-form__folder-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 16px;
}
.showroom-batch-form__name {
  flex: 1 1 200px;
  min-width: 180px;
  max-width: 260px;
}
.showroom-batch-form__photos {
  flex: 1 1 260px;
  min-width: 220px;
}
.showroom-batch-form__add {
  flex: 0 0 auto;
}
.showroom-batch-form__add-btn.btn-default {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  width: auto;
  min-width: 148px;
  height: var(--vinfo-field-height, 56px);
  line-height: 1;
  padding: 0 18px;
  white-space: nowrap;
  font-size: var(--font-size-b3);
  text-transform: none;
}
.showroom-batch-form__add-btn.btn-default i {
  font-size: 16px;
  line-height: 1;
}
.showroom-batch-form__pending {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.showroom-batch-form__pending-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--color-blackest);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-heading);
  font-size: var(--font-size-b3);
}
.showroom-batch-form__pending-item .text-muted {
  color: var(--color-body);
}
.showroom-batch-form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
@media only screen and (max-width: 767px) {
  .showroom-batch-form__name,
  .showroom-batch-form__photos {
    flex: 1 1 100%;
    max-width: none;
  }
  .showroom-batch-form__add {
    width: 100%;
  }
  .showroom-batch-form__add-btn {
    width: 100%;
  }
}

/* First/last table cells keep shared th/td horizontal padding (16px / 12px on small). */

.grid-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-b3);
  color: var(--color-body);
  white-space: nowrap;
}
.grid-status::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-body);
}
.grid-status.is-ok::before {
  background: var(--color-success);
  box-shadow: 0 0 0 3px rgba(62, 183, 94, 0.16);
}
.grid-status.is-warn::before {
  background: var(--color-warning);
  box-shadow: 0 0 0 3px rgba(255, 200, 118, 0.16);
}
.grid-status.is-bad::before {
  background: var(--color-danger);
  box-shadow: 0 0 0 3px rgba(255, 0, 3, 0.16);
}

.rainbow-badge-card.badge-success {
  background: var(--color-success);
  color: var(--color-blackest);
}
.rainbow-badge-card.badge-danger {
  background: var(--color-danger);
  color: var(--color-white);
}
.rainbow-badge-card.badge-warning {
  background: var(--color-warning);
  color: var(--color-blackest);
}

.portal-rich-text-editor.ql-container.ql-snow,
.portal-rich-text-editor .ql-toolbar.ql-snow {
  border-color: var(--color-border);
}
.portal-rich-text-editor .ql-toolbar.ql-snow {
  background: var(--color-blackest);
  border-radius: var(--radius-small) var(--radius-small) 0 0;
}
.portal-rich-text-editor .ql-toolbar.ql-snow .ql-stroke {
  stroke: var(--color-body);
}
.portal-rich-text-editor .ql-toolbar.ql-snow .ql-fill {
  fill: var(--color-body);
}
.portal-rich-text-editor .ql-toolbar.ql-snow .ql-picker-label {
  color: var(--color-body);
}
.portal-rich-text-editor .ql-toolbar.ql-snow button:hover,
.portal-rich-text-editor .ql-toolbar.ql-snow button.ql-active,
.portal-rich-text-editor .ql-toolbar.ql-snow .ql-picker-label:hover,
.portal-rich-text-editor .ql-toolbar.ql-snow .ql-picker-item:hover {
  color: var(--color-primary);
}
.portal-rich-text-editor .ql-toolbar.ql-snow button:hover .ql-stroke,
.portal-rich-text-editor .ql-toolbar.ql-snow button.ql-active .ql-stroke,
.portal-rich-text-editor .ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke,
.portal-rich-text-editor .ql-toolbar.ql-snow .ql-picker-item:hover .ql-stroke {
  stroke: var(--color-primary);
}
.portal-rich-text-editor .ql-toolbar.ql-snow button:hover .ql-fill,
.portal-rich-text-editor .ql-toolbar.ql-snow button.ql-active .ql-fill,
.portal-rich-text-editor .ql-toolbar.ql-snow .ql-picker-label:hover .ql-fill,
.portal-rich-text-editor .ql-toolbar.ql-snow .ql-picker-item:hover .ql-fill {
  fill: var(--color-primary);
}
.portal-rich-text-editor .ql-toolbar.ql-snow .ql-picker-options {
  background: var(--color-dark);
  border-color: var(--color-border);
}
.portal-rich-text-editor .ql-container.ql-snow {
  border-radius: 0 0 var(--radius-small) var(--radius-small);
  font-family: var(--font-primary);
  font-size: var(--font-size-b2);
}
.portal-rich-text-editor .ql-editor {
  min-height: 220px;
  color: var(--color-body);
}
.portal-rich-text-editor .ql-editor.ql-blank::before {
  color: var(--color-body);
  opacity: 0.6;
  font-style: normal;
}

.portal-rich-text-display.ql-editor {
  padding: 0;
  color: var(--color-body);
}

.dealer-portal-theme .skip-link:focus,
.admin-portal-theme .skip-link:focus,
.my-account-theme .skip-link:focus {
  outline-color: var(--color-primary);
}
.dealer-portal-theme .rbt-default-sidebar-list a:focus-visible,
.dealer-portal-theme .rbt-default-sidebar-list .collapse-btn:focus-visible,
.dealer-portal-theme .breadcrumb-list a:focus-visible,
.dealer-portal-theme .popup-dashboardleft-btn:focus-visible,
.dealer-portal-theme .portal-brand-collapse:focus-visible,
.dealer-portal-theme .portal-brand-logo-hit.is-minified:focus-visible,
.dealer-portal-theme .rbt-admin-card button:focus-visible,
.dealer-portal-theme .rbt-user-menu-list-wrapper a:focus-visible,
.dealer-portal-theme .portal-grid-icon-btn:focus-visible,
.dealer-portal-theme .portal-grid-filter-toggle:focus-visible,
.dealer-portal-theme .rbt-pagination a:focus-visible,
.dealer-portal-theme .portal-tenant-selector select:focus-visible,
.dealer-portal-theme .portal-rich-text-editor .ql-toolbar button:focus-visible,
.dealer-portal-theme .my-account-tabs .user-nav a:focus-visible,
.dealer-portal-theme .close-button:focus-visible,
.admin-portal-theme .rbt-default-sidebar-list a:focus-visible,
.admin-portal-theme .rbt-default-sidebar-list .collapse-btn:focus-visible,
.admin-portal-theme .breadcrumb-list a:focus-visible,
.admin-portal-theme .popup-dashboardleft-btn:focus-visible,
.admin-portal-theme .portal-brand-collapse:focus-visible,
.admin-portal-theme .portal-brand-logo-hit.is-minified:focus-visible,
.admin-portal-theme .rbt-admin-card button:focus-visible,
.admin-portal-theme .rbt-user-menu-list-wrapper a:focus-visible,
.admin-portal-theme .portal-grid-icon-btn:focus-visible,
.admin-portal-theme .portal-grid-filter-toggle:focus-visible,
.admin-portal-theme .rbt-pagination a:focus-visible,
.admin-portal-theme .portal-tenant-selector select:focus-visible,
.admin-portal-theme .portal-rich-text-editor .ql-toolbar button:focus-visible,
.admin-portal-theme .my-account-tabs .user-nav a:focus-visible,
.admin-portal-theme .close-button:focus-visible,
.my-account-theme .rbt-default-sidebar-list a:focus-visible,
.my-account-theme .rbt-default-sidebar-list .collapse-btn:focus-visible,
.my-account-theme .breadcrumb-list a:focus-visible,
.my-account-theme .popup-dashboardleft-btn:focus-visible,
.my-account-theme .rbt-admin-card button:focus-visible,
.my-account-theme .rbt-user-menu-list-wrapper a:focus-visible,
.my-account-theme .portal-grid-icon-btn:focus-visible,
.my-account-theme .portal-grid-filter-toggle:focus-visible,
.my-account-theme .rbt-pagination a:focus-visible,
.my-account-theme .portal-tenant-selector select:focus-visible,
.my-account-theme .portal-rich-text-editor .ql-toolbar button:focus-visible,
.my-account-theme .my-account-tabs .user-nav a:focus-visible,
.my-account-theme .close-button:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.my-account-theme .settings-area {
  margin-bottom: 32px;
}
.my-account-theme .settings-area .title {
  margin-bottom: 12px;
}
@media only screen and (max-width: 767px) {
  .my-account-theme .rbt-utilize-area.rainbow-section-gap-big {
    padding-top: 96px !important;
  }
}

/* Shared portal grids zero horizontal chrome for dealer title-alignment. My Account restores
   comfortable insets on bars / filters / footer / table edges. */
.my-account-theme .portal-data-grid .portal-grid-bar {
  padding: 16px 24px;
}
.my-account-theme .portal-data-grid .portal-grid-filters {
  padding: 16px 24px;
}
.my-account-theme .portal-data-grid .portal-grid-footer {
  padding: 14px 24px;
}
.my-account-theme .portal-data-grid .portal-grid-skeleton__row {
  padding-left: 24px;
  padding-right: 24px;
}
.my-account-theme .portal-data-grid .portal-grid-empty {
  padding-left: 24px;
  padding-right: 24px;
}
.my-account-theme .portal-data-grid .table thead th:first-child,
.my-account-theme .portal-data-grid .table tbody td:first-child {
  padding-left: 24px;
}
.my-account-theme .portal-data-grid .table thead th:last-child,
.my-account-theme .portal-data-grid .table tbody td:last-child {
  padding-right: 24px;
}
@media only screen and (max-width: 767px) {
  .my-account-theme .portal-data-grid .portal-grid-bar {
    padding: 14px 16px;
  }
  .my-account-theme .portal-data-grid .portal-grid-filters {
    padding: 14px 16px;
  }
  .my-account-theme .portal-data-grid .portal-grid-footer {
    padding: 12px 16px;
  }
  .my-account-theme .portal-data-grid .portal-grid-skeleton__row {
    padding-left: 16px;
    padding-right: 16px;
  }
  .my-account-theme .portal-data-grid .table thead th:first-child,
  .my-account-theme .portal-data-grid .table tbody td:first-child {
    padding-left: 16px;
  }
  .my-account-theme .portal-data-grid .table thead th:last-child,
  .my-account-theme .portal-data-grid .table tbody td:last-child {
    padding-right: 16px;
  }
}

.dealer-portal-theme .my-account-tabs .user-nav,
.admin-portal-theme .my-account-tabs .user-nav,
.my-account-theme .my-account-tabs .user-nav {
  display: flex;
  flex-wrap: nowrap;
  gap: 28px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-bottom: 1px solid var(--color-border);
}
.dealer-portal-theme .my-account-tabs .user-nav::-webkit-scrollbar,
.admin-portal-theme .my-account-tabs .user-nav::-webkit-scrollbar,
.my-account-theme .my-account-tabs .user-nav::-webkit-scrollbar {
  display: none;
}
.dealer-portal-theme .my-account-tabs .user-nav li,
.admin-portal-theme .my-account-tabs .user-nav li,
.my-account-theme .my-account-tabs .user-nav li {
  flex: 0 0 auto;
  margin: 0;
  border: 0;
}
.dealer-portal-theme .my-account-tabs .user-nav li + li,
.admin-portal-theme .my-account-tabs .user-nav li + li,
.my-account-theme .my-account-tabs .user-nav li + li {
  margin-left: 0;
}
.dealer-portal-theme .my-account-tabs .user-nav li a,
.admin-portal-theme .my-account-tabs .user-nav li a,
.my-account-theme .my-account-tabs .user-nav li a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 1px 13px;
  font-size: var(--font-size-b2);
  font-weight: 500;
  white-space: nowrap;
  color: var(--color-body);
}
.dealer-portal-theme .my-account-tabs .user-nav li a i,
.admin-portal-theme .my-account-tabs .user-nav li a i,
.my-account-theme .my-account-tabs .user-nav li a i {
  font-size: 16px;
  opacity: 0.75;
  transition: opacity 0.2s;
}
.dealer-portal-theme .my-account-tabs .user-nav li a:hover,
.admin-portal-theme .my-account-tabs .user-nav li a:hover,
.my-account-theme .my-account-tabs .user-nav li a:hover {
  color: var(--color-heading);
}
.dealer-portal-theme .my-account-tabs .user-nav li a.active,
.admin-portal-theme .my-account-tabs .user-nav li a.active,
.my-account-theme .my-account-tabs .user-nav li a.active {
  color: var(--color-primary);
}
.dealer-portal-theme .my-account-tabs .user-nav li a.active i,
.admin-portal-theme .my-account-tabs .user-nav li a.active i,
.my-account-theme .my-account-tabs .user-nav li a.active i {
  opacity: 1;
}
@media only screen and (max-width: 767px) {
  .dealer-portal-theme .my-account-tabs .user-nav,
  .admin-portal-theme .my-account-tabs .user-nav,
  .my-account-theme .my-account-tabs .user-nav {
    gap: 20px;
  }
  .dealer-portal-theme .my-account-tabs .user-nav li a,
  .admin-portal-theme .my-account-tabs .user-nav li a,
  .my-account-theme .my-account-tabs .user-nav li a {
    font-size: var(--font-size-b3);
    padding: 12px 1px 11px;
  }
}

.dealer-portal-theme .single-settings-box .section-title,
.admin-portal-theme .single-settings-box .section-title,
.my-account-theme .single-settings-box .section-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.dealer-portal-theme .single-settings-box .section-title .title,
.admin-portal-theme .single-settings-box .section-title .title,
.my-account-theme .single-settings-box .section-title .title {
  margin-bottom: 0;
}
.dealer-portal-theme .single-settings-box .section-title .description,
.admin-portal-theme .single-settings-box .section-title .description,
.my-account-theme .single-settings-box .section-title .description {
  margin-bottom: 0;
  color: var(--color-body);
  font-size: var(--font-size-b3);
  line-height: 1.55;
}

.active-dark-mode .my-account-theme .settings-area .title {
  color: var(--color-black);
}
.active-dark-mode .my-account-theme .my-account-tabs .user-nav {
  border-bottom-color: var(--color-border-light);
}
.active-dark-mode .my-account-theme .my-account-tabs .user-nav li a {
  color: var(--dark-color-link);
}
.active-dark-mode .my-account-theme .my-account-tabs .user-nav li a i {
  color: inherit;
  opacity: 0.85;
}
.active-dark-mode .my-account-theme .my-account-tabs .user-nav li a:hover {
  color: var(--color-black);
}
.active-dark-mode .my-account-theme .my-account-tabs .user-nav li a.active {
  color: var(--color-primary);
}
.active-dark-mode .my-account-theme .my-account-tabs .user-nav li a.active i {
  opacity: 1;
}
.active-dark-mode .my-account-theme .single-settings-box .section-title .description {
  color: var(--dark-color-link);
}
.active-dark-mode .my-account-theme .switcher-btn-grp button {
  background: var(--color-white);
  border-color: var(--color-border-light);
}
.active-dark-mode .my-account-theme .switcher-btn-grp button .text {
  color: var(--color-black);
}
.active-dark-mode .my-account-theme .switcher-btn-grp button.active {
  border-color: var(--color-primary);
}

.my_switcher ul {
  background: var(--color-blackest);
  border: 1px solid var(--color-border);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
}
.my_switcher ul li button.dark,
.my_switcher ul li a.dark,
.my_switcher ul li button.light,
.my_switcher ul li a.light {
  color: var(--color-heading);
}
.active-dark-mode .my_switcher ul {
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
}
.active-dark-mode .my_switcher ul li button.dark,
.active-dark-mode .my_switcher ul li a.dark,
.active-dark-mode .my_switcher ul li button.light,
.active-dark-mode .my_switcher ul li a.light {
  color: var(--color-blackest);
}

.my_switcher ul li button i,
.my_switcher ul li a i {
  font-size: 16px;
  line-height: 1;
  transform: rotate(-90deg);
}

.portal-data-grid .grid-when {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.4;
}
.portal-data-grid .grid-when__time {
  font-size: var(--font-size-b3);
  color: var(--color-body);
  font-weight: 400;
}
.portal-data-grid .grid-amount {
  font-variant-numeric: tabular-nums;
  color: var(--color-heading);
  font-weight: 500;
}
.portal-data-grid .reg-plate {
  display: inline-block;
  padding: 2px 8px;
  background: #f4d032;
  color: #111;
  border-radius: var(--radius-small);
  font-weight: 700;
  font-size: var(--font-size-b3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.active-dark-mode .my-account-theme .portal-data-grid .portal-grid-bar,
.active-dark-mode .my-account-theme .portal-data-grid .table thead th,
.active-dark-mode .my-account-theme .portal-data-grid .table tbody td,
.active-dark-mode .my-account-theme .portal-data-grid .portal-grid-footer,
.active-dark-mode .my-account-theme .portal-data-grid .portal-grid-filters,
.active-dark-mode .my-account-theme .portal-data-grid .portal-grid-skeleton__row {
  border-color: var(--color-border-light);
}
.active-dark-mode .my-account-theme .portal-data-grid .table > :not(:last-child) > :last-child > * {
  border-bottom-color: var(--color-border-light);
}
.active-dark-mode .my-account-theme .portal-data-grid .table thead th,
.active-dark-mode .my-account-theme .portal-data-grid .portal-grid-footer,
.active-dark-mode .my-account-theme .portal-data-grid .portal-grid-filters {
  background: var(--color-strock);
}
.active-dark-mode .my-account-theme .portal-data-grid .portal-grid-title {
  color: var(--color-black);
}
.active-dark-mode .my-account-theme .portal-data-grid .portal-grid-title .count {
  color: var(--color-gray);
}
.active-dark-mode .my-account-theme .portal-data-grid .portal-grid-search .portal-grid-search__input,
.active-dark-mode .my-account-theme .portal-data-grid .portal-grid-search input[type=search],
.active-dark-mode .my-account-theme .portal-data-grid .portal-grid-filters select:not(.vinfo-field__control),
.active-dark-mode .my-account-theme .portal-data-grid .portal-grid-filters input:not(.vinfo-field__control):not([type=file]) {
  background: var(--color-white);
  border-color: var(--color-border-light);
  color: var(--color-black);
}
.active-dark-mode .my-account-theme .portal-data-grid .portal-grid-search .portal-grid-search__input::placeholder,
.active-dark-mode .my-account-theme .portal-data-grid .portal-grid-search input[type=search]::placeholder {
  color: var(--color-gray);
}
.active-dark-mode .my-account-theme .portal-data-grid .portal-grid-search__icon {
  color: var(--color-gray);
}
.active-dark-mode .my-account-theme .portal-data-grid .portal-grid-filters > .form-group > label {
  color: var(--color-gray);
}
.active-dark-mode .my-account-theme .portal-data-grid .portal-grid-filter-toggle {
  background: var(--color-white);
  border-color: var(--color-border-light);
  color: var(--color-gray);
}
.active-dark-mode .my-account-theme .portal-data-grid .portal-grid-filter-toggle:hover {
  color: var(--color-black);
  border-color: var(--color-midgray);
  background: var(--color-white);
}
.active-dark-mode .my-account-theme .portal-data-grid .portal-grid-filter-toggle.is-active {
  background: var(--color-strock);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.active-dark-mode .my-account-theme .portal-data-grid .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--color-gray);
  --bs-table-border-color: var(--color-border-light);
  --bs-table-hover-bg: transparent;
  --bs-table-striped-bg: transparent;
  --bs-table-accent-bg: transparent;
  color: var(--color-gray);
  border-color: var(--color-border-light);
}
.active-dark-mode .my-account-theme .portal-data-grid .table thead th {
  color: var(--color-gray);
  background: var(--color-strock);
}
.active-dark-mode .my-account-theme .portal-data-grid .table tbody td:first-child {
  color: var(--color-black);
}
.active-dark-mode .my-account-theme .portal-data-grid .table tbody tr:hover {
  background: var(--color-strock);
}
.active-dark-mode .my-account-theme .portal-data-grid .table a {
  color: var(--color-black);
}
.active-dark-mode .my-account-theme .portal-data-grid .table a:hover {
  color: var(--color-primary);
}
.active-dark-mode .my-account-theme .portal-data-grid .grid-when__time {
  color: var(--color-gray);
}
.active-dark-mode .my-account-theme .portal-data-grid .grid-amount {
  color: var(--color-black);
}
.active-dark-mode .my-account-theme .portal-data-grid .grid-status {
  color: var(--color-gray);
}
.active-dark-mode .my-account-theme .portal-data-grid .grid-status::before {
  background: var(--color-midgray);
}
.active-dark-mode .my-account-theme .portal-data-grid .portal-grid-icon-btn {
  border-color: var(--color-border-light);
  color: var(--color-gray);
}
.active-dark-mode .my-account-theme .portal-data-grid .portal-grid-icon-btn:hover {
  background: var(--color-strock);
  border-color: var(--color-midgray);
  color: var(--color-primary);
}
.active-dark-mode .my-account-theme .portal-data-grid .portal-grid-empty .portal-grid-empty__icon {
  background: var(--color-strock);
  color: var(--color-gray);
}
.active-dark-mode .my-account-theme .portal-data-grid .portal-grid-empty h4 {
  color: var(--color-black);
}
.active-dark-mode .my-account-theme .portal-data-grid .portal-grid-empty p {
  color: var(--color-gray);
}
.active-dark-mode .my-account-theme .portal-data-grid .portal-grid-skeleton__bar {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.05) 100%);
  background-size: 200% 100%;
}
.active-dark-mode .my-account-theme .portal-data-grid .portal-grid-footer .portal-grid-summary {
  color: var(--color-gray);
}
.active-dark-mode .my-account-theme .portal-data-grid .portal-grid-footer .rbt-pagination li a {
  background: var(--color-white);
  border-color: var(--color-border-light);
  color: var(--color-gray);
}
.active-dark-mode .my-account-theme .portal-data-grid .portal-grid-footer .rbt-pagination li a:hover {
  background: var(--color-white);
  border-color: var(--color-midgray);
  color: var(--color-black);
}
.active-dark-mode .my-account-theme .portal-data-grid .portal-grid-footer .rbt-pagination li.active a,
.active-dark-mode .my-account-theme .portal-data-grid .portal-grid-footer .rbt-pagination li.active a:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}
.active-dark-mode .my-account-theme .portal-data-grid .portal-grid-footer .rbt-pagination li.portal-grid-gap span {
  color: var(--color-gray);
}
/*-- Sidebar navigation refinements (Admin + Dealer Portal). Pill nav on canvas; duotone icons. --*/
@media only screen and (max-width: 1199px) {
  .dealer-portal-theme .rbt-left-panel,
  .admin-portal-theme .rbt-left-panel {
    z-index: 98;
  }
}
.dealer-portal-theme .rbt-default-sidebar-list,
.admin-portal-theme .rbt-default-sidebar-list {
  padding: 8px 4px;
}
.dealer-portal-theme .rbt-default-sidebar-list li,
.admin-portal-theme .rbt-default-sidebar-list li {
  margin: 4px 0;
}
.dealer-portal-theme .rbt-default-sidebar-list li i,
.admin-portal-theme .rbt-default-sidebar-list li i {
  width: 18px;
  margin-right: 12px;
  font-size: 15px;
  text-align: center;
}
.dealer-portal-theme .rbt-default-sidebar-list li span,
.admin-portal-theme .rbt-default-sidebar-list li span {
  font-size: var(--font-size-b2);
  line-height: 20px;
  font-weight: 500;
}
.dealer-portal-theme .rbt-default-sidebar-list li a,
.dealer-portal-theme .rbt-default-sidebar-list li .collapse-btn,
.admin-portal-theme .rbt-default-sidebar-list li a,
.admin-portal-theme .rbt-default-sidebar-list li .collapse-btn {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  background: none;
  color: var(--color-body);
  font-family: var(--font-primary);
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-bigger);
  transition: 0.2s;
}
.dealer-portal-theme .rbt-default-sidebar-list li a:hover,
.dealer-portal-theme .rbt-default-sidebar-list li .collapse-btn:hover,
.admin-portal-theme .rbt-default-sidebar-list li a:hover,
.admin-portal-theme .rbt-default-sidebar-list li .collapse-btn:hover {
  color: var(--color-heading);
  background: var(--color-lessdark);
}
.dealer-portal-theme .rbt-default-sidebar-list li a:hover i,
.dealer-portal-theme .rbt-default-sidebar-list li .collapse-btn:hover i,
.admin-portal-theme .rbt-default-sidebar-list li a:hover i,
.admin-portal-theme .rbt-default-sidebar-list li .collapse-btn:hover i {
  color: var(--color-heading);
}
.dealer-portal-theme .rbt-default-sidebar-list li a.active,
.dealer-portal-theme .rbt-default-sidebar-list li a[aria-expanded=true],
.dealer-portal-theme .rbt-default-sidebar-list li .collapse-btn.active,
.dealer-portal-theme .rbt-default-sidebar-list li .collapse-btn[aria-expanded=true],
.admin-portal-theme .rbt-default-sidebar-list li a.active,
.admin-portal-theme .rbt-default-sidebar-list li a[aria-expanded=true],
.admin-portal-theme .rbt-default-sidebar-list li .collapse-btn.active,
.admin-portal-theme .rbt-default-sidebar-list li .collapse-btn[aria-expanded=true] {
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 16%, var(--color-blackest));
}
.dealer-portal-theme .rbt-default-sidebar-list li a.active i,
.dealer-portal-theme .rbt-default-sidebar-list li a[aria-expanded=true] i,
.dealer-portal-theme .rbt-default-sidebar-list li .collapse-btn.active i,
.dealer-portal-theme .rbt-default-sidebar-list li .collapse-btn[aria-expanded=true] i,
.admin-portal-theme .rbt-default-sidebar-list li a.active i,
.admin-portal-theme .rbt-default-sidebar-list li a[aria-expanded=true] i,
.admin-portal-theme .rbt-default-sidebar-list li .collapse-btn.active i,
.admin-portal-theme .rbt-default-sidebar-list li .collapse-btn[aria-expanded=true] i {
  color: var(--color-primary);
}
.dealer-portal-theme .rbt-default-sidebar-list li .collapse-btn,
.admin-portal-theme .rbt-default-sidebar-list li .collapse-btn {
  position: relative;
}
/* Template draws a feather +/- via ::after; portal keeps only the FA chevron. */
.dealer-portal-theme .rbt-default-sidebar-list li .collapse-btn::after,
.admin-portal-theme .rbt-default-sidebar-list li .collapse-btn::after,
.dealer-portal-theme .rbt-default-sidebar-list li.has-submenu .collapse-btn::after,
.admin-portal-theme .rbt-default-sidebar-list li.has-submenu .collapse-btn::after {
  content: none !important;
  display: none !important;
}
.dealer-portal-theme .rbt-default-sidebar-list li .collapse-btn .rbt-collapse-caret,
.admin-portal-theme .rbt-default-sidebar-list li .collapse-btn .rbt-collapse-caret {
  width: auto;
  margin: 0 0 0 auto;
  font-size: 11px;
  opacity: 0.55;
  transition: transform 0.2s ease;
}
.dealer-portal-theme .rbt-default-sidebar-list li .collapse-btn[aria-expanded=true] .rbt-collapse-caret,
.admin-portal-theme .rbt-default-sidebar-list li .collapse-btn[aria-expanded=true] .rbt-collapse-caret {
  transform: rotate(180deg);
}
.dealer-portal-theme .rbt-default-sidebar-list li.has-submenu .submenu,
.admin-portal-theme .rbt-default-sidebar-list li.has-submenu .submenu {
  margin: 2px 0 2px 10px;
  padding-left: 8px;
  border-left: 0;
}
.dealer-portal-theme .rbt-default-sidebar-list li.has-submenu .submenu li,
.admin-portal-theme .rbt-default-sidebar-list li.has-submenu .submenu li {
  margin: 2px 0;
}
.dealer-portal-theme .rbt-default-sidebar-list li.has-submenu .submenu a,
.admin-portal-theme .rbt-default-sidebar-list li.has-submenu .submenu a {
  padding: 8px 14px 8px 18px;
}
/* Minified rail (desktop): icon-only items + title tooltips; hide group children. */
.dealer-portal-theme .rbt-left-panel.collapsed .rbt-default-sidebar-list,
.admin-portal-theme .rbt-left-panel.collapsed .rbt-default-sidebar-list {
  padding: 8px 0;
}
.dealer-portal-theme .rbt-left-panel.collapsed .rbt-default-sidebar-list li a,
.dealer-portal-theme .rbt-left-panel.collapsed .rbt-default-sidebar-list li .collapse-btn,
.admin-portal-theme .rbt-left-panel.collapsed .rbt-default-sidebar-list li a,
.admin-portal-theme .rbt-left-panel.collapsed .rbt-default-sidebar-list li .collapse-btn {
  justify-content: center;
  padding: 10px 0;
}
.dealer-portal-theme .rbt-left-panel.collapsed .rbt-default-sidebar-list li a i,
.dealer-portal-theme .rbt-left-panel.collapsed .rbt-default-sidebar-list li .collapse-btn i,
.admin-portal-theme .rbt-left-panel.collapsed .rbt-default-sidebar-list li a i,
.admin-portal-theme .rbt-left-panel.collapsed .rbt-default-sidebar-list li .collapse-btn i {
  margin-right: 0;
}
.dealer-portal-theme .rbt-left-panel.collapsed .rbt-default-sidebar-list li a span,
.dealer-portal-theme .rbt-left-panel.collapsed .rbt-default-sidebar-list li a .rbt-collapse-caret,
.dealer-portal-theme .rbt-left-panel.collapsed .rbt-default-sidebar-list li .collapse-btn span,
.dealer-portal-theme .rbt-left-panel.collapsed .rbt-default-sidebar-list li .collapse-btn .rbt-collapse-caret,
.admin-portal-theme .rbt-left-panel.collapsed .rbt-default-sidebar-list li a span,
.admin-portal-theme .rbt-left-panel.collapsed .rbt-default-sidebar-list li a .rbt-collapse-caret,
.admin-portal-theme .rbt-left-panel.collapsed .rbt-default-sidebar-list li .collapse-btn span,
.admin-portal-theme .rbt-left-panel.collapsed .rbt-default-sidebar-list li .collapse-btn .rbt-collapse-caret {
  display: none;
}
.dealer-portal-theme .rbt-left-panel.collapsed .rbt-default-sidebar-list li.has-submenu .submenu,
.admin-portal-theme .rbt-left-panel.collapsed .rbt-default-sidebar-list li.has-submenu .submenu {
  display: none !important;
}

.dealer-portal-theme input[type=checkbox]:not(.mud-checkbox-input),
.admin-portal-theme input[type=checkbox]:not(.mud-checkbox-input) {
  opacity: 1 !important;
  position: static !important;
  width: 16px !important;
  height: 16px !important;
  max-width: 16px;
  padding: 0 !important;
  border-radius: 3px;
  margin: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.dealer-portal-theme input[type=checkbox] ~ label,
.admin-portal-theme input[type=checkbox] ~ label {
  padding-left: 8px;
}
.dealer-portal-theme input[type=checkbox] ~ label::before, .dealer-portal-theme input[type=checkbox] ~ label::after,
.admin-portal-theme input[type=checkbox] ~ label::before,
.admin-portal-theme input[type=checkbox] ~ label::after {
  display: none;
}

.dealer-portal-theme .form-group,
.dealer-portal-theme .rbt-default-form .form-group,
.admin-portal-theme .form-group,
.admin-portal-theme .rbt-default-form .form-group {
  margin-bottom: 16px;
}
.dealer-portal-theme .form-group label,
.dealer-portal-theme .rbt-default-form .form-group label,
.admin-portal-theme .form-group label,
.admin-portal-theme .rbt-default-form .form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-body);
}
.dealer-portal-theme .form-group input:not([type=checkbox]):not([type=radio]):not([type=file]):not(.vinfo-field__control),
.dealer-portal-theme .form-group select:not(.vinfo-field__control),
.dealer-portal-theme .rbt-default-form .form-group input:not([type=checkbox]):not([type=radio]):not([type=file]):not(.vinfo-field__control),
.dealer-portal-theme .rbt-default-form .form-group select:not(.vinfo-field__control),
.admin-portal-theme .form-group input:not([type=checkbox]):not([type=radio]):not([type=file]):not(.vinfo-field__control),
.admin-portal-theme .form-group select:not(.vinfo-field__control),
.admin-portal-theme .rbt-default-form .form-group input:not([type=checkbox]):not([type=radio]):not([type=file]):not(.vinfo-field__control),
.admin-portal-theme .rbt-default-form .form-group select:not(.vinfo-field__control) {
  height: 42px;
  font-size: var(--font-size-b2);
  padding: 0 14px;
}
.dealer-portal-theme .form-group textarea,
.dealer-portal-theme .rbt-default-form .form-group textarea,
.admin-portal-theme .form-group textarea,
.admin-portal-theme .rbt-default-form .form-group textarea {
  min-height: 120px;
  padding: 12px 14px;
  font-size: var(--font-size-b2);
}
.dealer-portal-theme select:not(.vinfo-field__control),
.admin-portal-theme select:not(.vinfo-field__control) {
  height: 42px;
  font-size: var(--font-size-b2);
  padding: 0 14px;
  padding-right: 30px;
  background-color: var(--color-blackest);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23BCC3D7' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px 7px;
  color: var(--color-heading);
}
.dealer-portal-theme .rbt-modern-select select,
.admin-portal-theme .rbt-modern-select select {
  height: 42px;
}
.dealer-portal-theme .form-control,
.admin-portal-theme .form-control {
  height: 38px;
  padding: 0 12px;
  background: var(--color-blackest);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  color: var(--color-heading);
  font-size: var(--font-size-b2);
}
.dealer-portal-theme .form-control:focus,
.admin-portal-theme .form-control:focus {
  background: var(--color-blackest);
  border-color: var(--color-primary);
  color: var(--color-heading);
  box-shadow: 0 0 0 3px rgba(128, 90, 245, 0.22);
}

/* Vinfo floating fields — Revolut / Material label inside; fixed 56px height.
   Qualify as .vinfo-field input/select/textarea.vinfo-field__control so we beat
   default/_forms.scss input[type=text] padding/border/placeholder rules. */
.vinfo-field {
  --vinfo-field-height: 56px;
  --vinfo-field-pad-x: 16px;
  --vinfo-field-pad-top: 32px;
  --vinfo-field-pad-bottom: 6px;
  --vinfo-field-label-floated-top: 7px;
  position: relative;
  display: inline-flex;
  align-items: stretch;
  box-sizing: border-box;
  height: var(--vinfo-field-height);
  min-height: var(--vinfo-field-height);
  max-height: var(--vinfo-field-height);
  font-family: var(--font-primary);
  vertical-align: top;
  overflow: hidden;
}
.vinfo-field--full {
  display: flex;
  width: 100%;
}
.vinfo-field--textarea {
  height: auto;
  max-height: none;
  min-height: var(--vinfo-field-height);
  overflow: visible;
}
.vinfo-field input.vinfo-field__control,
.vinfo-field textarea.vinfo-field__control,
.vinfo-field select.vinfo-field__control {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: var(--vinfo-field-pad-top) var(--vinfo-field-pad-x) var(--vinfo-field-pad-bottom);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-blackest);
  color: var(--color-heading);
  font-family: inherit;
  font-size: var(--font-size-b2);
  font-weight: var(--p-regular);
  line-height: 1.25;
  outline: none;
  box-shadow: none;
  transition: border-color var(--transition), color var(--transition);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.vinfo-field input.vinfo-field__control:focus,
.vinfo-field input.vinfo-field__control:focus-visible,
.vinfo-field textarea.vinfo-field__control:focus,
.vinfo-field textarea.vinfo-field__control:focus-visible,
.vinfo-field select.vinfo-field__control:focus,
.vinfo-field select.vinfo-field__control:focus-visible {
  outline: none;
  box-shadow: none;
}
.vinfo-field input.vinfo-field__control::placeholder,
.vinfo-field textarea.vinfo-field__control::placeholder,
.vinfo-field input.vinfo-field__control::-webkit-input-placeholder,
.vinfo-field textarea.vinfo-field__control::-webkit-input-placeholder {
  color: transparent;
  opacity: 1;
}
.vinfo-field input.vinfo-field__control::-moz-placeholder,
.vinfo-field textarea.vinfo-field__control::-moz-placeholder {
  color: transparent;
  opacity: 1;
}
.vinfo-field input.vinfo-field__control:-ms-input-placeholder,
.vinfo-field textarea.vinfo-field__control:-ms-input-placeholder,
.vinfo-field input.vinfo-field__control::-ms-input-placeholder,
.vinfo-field textarea.vinfo-field__control::-ms-input-placeholder {
  color: transparent;
  opacity: 1;
}
.vinfo-field--select select.vinfo-field__control {
  padding-right: 40px;
  cursor: pointer;
  background-image: none;
}
.vinfo-field--select:not(.is-floated):not(:focus-within) select.vinfo-field__control {
  color: transparent;
}
.vinfo-field--select select.vinfo-field__control option {
  color: var(--color-heading);
  background: var(--color-blackest);
}
.vinfo-field--textarea textarea.vinfo-field__control {
  height: auto;
  min-height: calc(var(--vinfo-field-height) + 48px);
  padding-top: calc(var(--vinfo-field-pad-top) + 4px);
  resize: vertical;
}
.vinfo-field__label {
  position: absolute;
  left: 14px;
  top: 50%;
  right: 40px;
  transform: translateY(-50%);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-body);
  font-size: var(--font-size-b2);
  font-weight: var(--p-regular);
  line-height: 1.2;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform-origin: left center;
  transition: top var(--transition), transform var(--transition), font-size var(--transition), color var(--transition);
}
.vinfo-field--select .vinfo-field__label {
  right: 40px;
}
.vinfo-field:not(.vinfo-field--select) .vinfo-field__label {
  right: 14px;
}
.vinfo-field:focus-within .vinfo-field__label,
.vinfo-field.is-floated .vinfo-field__label {
  top: var(--vinfo-field-label-floated-top);
  transform: none;
  font-size: 11px;
  font-weight: var(--p-medium);
  letter-spacing: 0.02em;
  color: var(--color-body);
}
.vinfo-field:focus-within .vinfo-field__label {
  color: var(--color-primary);
}
.vinfo-field:focus-within input.vinfo-field__control,
.vinfo-field:focus-within textarea.vinfo-field__control,
.vinfo-field:focus-within select.vinfo-field__control {
  outline: none;
  box-shadow: none;
  border-color: var(--color-primary);
  background: var(--color-blackest);
  color: var(--color-heading);
}
.vinfo-field:focus-within input.vinfo-field__control::placeholder,
.vinfo-field:focus-within textarea.vinfo-field__control::placeholder,
.vinfo-field:focus-within input.vinfo-field__control::-webkit-input-placeholder,
.vinfo-field:focus-within textarea.vinfo-field__control::-webkit-input-placeholder {
  color: var(--color-text-off);
  opacity: 1;
}
.vinfo-field:focus-within input.vinfo-field__control::-moz-placeholder,
.vinfo-field:focus-within textarea.vinfo-field__control::-moz-placeholder {
  color: var(--color-text-off);
  opacity: 1;
}
.vinfo-field__chevron {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-body);
  font-size: 12px;
  line-height: 1;
}
.vinfo-field.is-disabled {
  opacity: 0.55;
  pointer-events: none;
}
.vinfo-field__error {
  margin-top: 6px;
  font-size: var(--font-size-b3);
  color: var(--color-danger);
}
.vinfo-field__error .validation-message {
  display: block;
}
.dealer-portal-theme .vinfo-field input.vinfo-field__control,
.dealer-portal-theme .vinfo-field textarea.vinfo-field__control,
.dealer-portal-theme .vinfo-field select.vinfo-field__control,
.admin-portal-theme .vinfo-field input.vinfo-field__control,
.admin-portal-theme .vinfo-field textarea.vinfo-field__control,
.admin-portal-theme .vinfo-field select.vinfo-field__control,
.my-account-theme .vinfo-field input.vinfo-field__control,
.my-account-theme .vinfo-field textarea.vinfo-field__control,
.my-account-theme .vinfo-field select.vinfo-field__control {
  height: 100%;
  min-height: 0;
  padding: var(--vinfo-field-pad-top) var(--vinfo-field-pad-x) var(--vinfo-field-pad-bottom);
  background: var(--color-blackest);
  background-image: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-heading);
  font-size: var(--font-size-b2);
  box-shadow: none;
  outline: none;
}
.dealer-portal-theme .vinfo-field--select select.vinfo-field__control,
.admin-portal-theme .vinfo-field--select select.vinfo-field__control,
.my-account-theme .vinfo-field--select select.vinfo-field__control {
  padding-right: 40px;
}
.dealer-portal-theme .vinfo-field:focus-within input.vinfo-field__control,
.dealer-portal-theme .vinfo-field:focus-within textarea.vinfo-field__control,
.dealer-portal-theme .vinfo-field:focus-within select.vinfo-field__control,
.admin-portal-theme .vinfo-field:focus-within input.vinfo-field__control,
.admin-portal-theme .vinfo-field:focus-within textarea.vinfo-field__control,
.admin-portal-theme .vinfo-field:focus-within select.vinfo-field__control,
.my-account-theme .vinfo-field:focus-within input.vinfo-field__control,
.my-account-theme .vinfo-field:focus-within textarea.vinfo-field__control,
.my-account-theme .vinfo-field:focus-within select.vinfo-field__control {
  background: var(--color-blackest);
  border-color: var(--color-primary);
  color: var(--color-heading);
  outline: none;
  box-shadow: none;
}
.active-dark-mode .my-account-theme .vinfo-field input.vinfo-field__control,
.active-dark-mode .my-account-theme .vinfo-field textarea.vinfo-field__control,
.active-dark-mode .my-account-theme .vinfo-field select.vinfo-field__control {
  background: var(--color-white);
  border-color: var(--color-border-light);
  color: var(--color-black);
}
.active-dark-mode .my-account-theme .vinfo-field--select:not(.is-floated):not(:focus-within) select.vinfo-field__control {
  color: transparent;
}
.active-dark-mode .my-account-theme .vinfo-field--select select.vinfo-field__control option {
  color: var(--color-black);
  background: var(--color-white);
}
.active-dark-mode .my-account-theme .vinfo-field .vinfo-field__label {
  color: var(--color-gray);
}
.active-dark-mode .my-account-theme .vinfo-field:focus-within .vinfo-field__label {
  color: var(--color-primary);
}
.active-dark-mode .my-account-theme .vinfo-field__chevron {
  color: var(--color-gray);
}
.active-dark-mode .my-account-theme .portal-data-grid .portal-grid-filters .vinfo-field input.vinfo-field__control,
.active-dark-mode .my-account-theme .portal-data-grid .portal-grid-filters .vinfo-field textarea.vinfo-field__control,
.active-dark-mode .my-account-theme .portal-data-grid .portal-grid-filters .vinfo-field select.vinfo-field__control {
  background: var(--color-white);
  border-color: var(--color-border-light);
  color: var(--color-black);
}
.active-dark-mode .my-account-theme .portal-data-grid .portal-grid-filters .vinfo-field--select:not(.is-floated):not(:focus-within) select.vinfo-field__control {
  color: transparent;
}