html.roofstack-metal-border-theme {
  --rs-metal-light: #eef3f8;
  --rs-metal-mid: #aeb8c6;
  --rs-metal-dark: #687385;
  --rs-metal-shadow: rgba(15, 23, 42, 0.14);
}

html.roofstack-metal-border-theme :where(
  .box,
  .panel,
  .card,
  .intro-y.box,
  .dashboard-card,
  .metric-card,
  .stat-card,
  .module-card,
  .settings-card,
  .payment-card,
  .website-card,
  .support-card,
  .lead-card,
  .inspection-card,
  .estimate-card,
  .production-card,
  .material-card,
  .accounting-card,
  .marketing-card,
  .setup-shell,
  .welcome-copy,
  .trial-card,
  .tour-card,
  .setup-progress-card,
  .task-card,
  .xena-panel,
  .tool-card,
  .support-team,
  .xena-response,
  .vip-call-card
) {
  border-width: 3px !important;
  border-style: solid !important;
  border-color: var(--rs-metal-light) var(--rs-metal-mid) var(--rs-metal-dark) #dbe3ed !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -1px 0 rgba(82, 94, 112, 0.28),
    0 1px 3px var(--rs-metal-shadow) !important;
}

html.roofstack-metal-border-theme :where(.modal, .dialog, [role="dialog"]) {
  border-width: 3px !important;
  border-style: solid !important;
  border-color: #f8fafc #aeb8c6 #687385 #dbe3ed !important;
}

html.roofstack-metal-border-theme :where(table, thead, tbody, tr, th, td) {
  border-color: #c8d1dd !important;
}

html.roofstack-metal-border-theme :where(
  .roofstack-topbar-action,
  .roofstack-topbar-action *,
  .mobile-bottom-nav__item,
  .mobile-bottom-nav__item *,
  .mobile-menu__top-safe button,
  .mobile-menu__top-safe button *,
  .menu__icon,
  .menu__icon *,
  .image-fit,
  .image-fit *,
  .rounded-full
) {
  border-color: transparent !important;
  box-shadow: none !important;
}

html.roofstack-metal-border-theme :where(
  .roofstack-topbar-action,
  .mobile-bottom-nav__item,
  .mobile-menu__top-safe button,
  .menu__icon,
  .image-fit,
  .rounded-full
) {
  border-width: 0 !important;
}