/*
 * RealQ public UI icon system
 * Google Material Symbols Rounded / black / weight 400.
 * Brand logos, vehicle images, lender logos and color swatches are excluded.
 */
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded&icon_names=apartment,arrow_forward,badge,balance,bolt,calendar_month,call,chat_bubble,check,chevron_right,close,deployed_code,directions_car,edit,expand_less,inventory_2,language,list_alt,local_shipping,location_on,person,receipt_long,schedule,sell,speed,tune,verified_user&display=block");

.rq-material-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #111 !important;
  font-family: "Material Symbols Rounded" !important;
  font-size: 24px;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  letter-spacing: normal;
  line-height: 1;
  text-rendering: optimizeLegibility;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "liga";
}

.rq-material-icon.is-18 { font-size: 18px; }
.rq-material-icon.is-20 { font-size: 20px; }
.rq-material-icon.is-28 { font-size: 28px; }
.rq-material-icon.is-32 { font-size: 32px; }

/* Existing icon wrappers keep their layout dimensions and inherit one black glyph. */
.header-phone-icon .rq-material-icon,
.sticky-bottom-nav-icon .rq-material-icon,
.site-footer-business-item > .rq-material-icon,
.quick-field-icon .rq-material-icon,
.compare-field-icon .rq-material-icon,
.preorder-consult-icon .rq-material-icon {
  width: 1em;
  height: 1em;
}

html body .rq-material-icon.rq-material-icon.rq-material-icon.rq-material-icon {
  color: #111 !important;
  fill: none !important;
  stroke: none !important;
  filter: none !important;
  text-shadow: none !important;
}

html body.special-page #preorderOverview .preorder-group-metric > span.rq-material-icon {
  display: inline-flex !important;
  flex: 0 0 20px !important;
  flex-direction: row !important;
  gap: 0 !important;
  width: 20px !important;
  height: 20px !important;
  font-size: 20px !important;
  line-height: 1 !important;
}

html body #quickConsultDrawer #quickDrawerForm > button.quick-drawer-submit > span.rq-material-icon {
  color: #111 !important;
}

html body.special-page .hero-reference-vehicle .hero-reference-vehicle-copy .hero-reference-inline-kicker > span.rq-material-icon {
  color: #fff !important;
}

html body.special-page .special-hero .hero-reference-metrics article > span.rq-material-icon {
  color: #8a94a3 !important;
}