@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../general, reusable UI assets for pragtical/DMSans-Variable.ttf") format("truetype");
}

@font-face {
  font-family: "DM Sans";
  font-style: italic;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../general, reusable UI assets for pragtical/DMSans-Italic-Variable.ttf") format("truetype");
}

:root {
  color-scheme: light;
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  font-synthesis: none;
  --chrome: #5b5b5a;
  --ink: #111;
  --muted: #666a68;
  --line: #a8aaa8;
  --line-soft: #c8cac8;
  --blue: #d9eefb;
  --blue-strong: #d1e9ff;
  --lime: #e8ff92;
  --pale-lime: #fbffe8;
  --row-selected: #eff2d2;
  --focus: #1676a6;
  --filter-pill-font-size: 10px;
  --filter-pill-value-font-size: 9px;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  background: var(--chrome);
}

html.pragtical-page,
html.pragtical-page body {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

html.pragtical-page body > #app {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body {
  min-height: 100dvh;
  color: var(--ink);
}

button,
input,
select,
summary {
  font: inherit;
}

button,
summary,
select {
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.platform-search input:focus-visible,
.list-search input:focus-visible {
  outline: none;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.icon {
  display: block;
  flex: 0 0 auto;
  max-width: 100%;
}

.scrollbar-ui {
  --scrollbar-handle-offset: 0px;
  display: block;
  position: relative;
  width: 24px;
  max-width: none;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.scrollbar-ui[hidden] {
  display: none;
}

.scrollbar-ui.is-dragging {
  cursor: grabbing;
}

.scrollbar-ui:focus-visible {
  outline: none;
}

.scrollbar-ui:focus-visible .scrollbar-ui__handle {
  border-radius: 3px;
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.scrollbar-ui__handle {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 6px;
  height: 56px;
  max-width: none;
  transform: translateY(var(--scrollbar-handle-offset));
  will-change: transform;
  pointer-events: none;
  user-select: none;
}

.pragtical-app {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  grid-template-rows: 35px minmax(0, 1fr);
  height: 100dvh;
  min-width: 0;
  min-height: 0;
  max-height: 100dvh;
  overflow: hidden;
  background: var(--chrome);
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 4px;
  left: 228px;
  padding: 6px 10px;
  color: #111;
  background: #fff;
  border: 2px solid var(--focus);
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* Sidebar */
.app-sidebar {
  --sidebar-inline-padding: 13px;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 40;
  grid-column: 1;
  grid-row: 1 / -1;
  min-width: 0;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: visible;
  color: #fff;
  background: var(--chrome);
}

.app-sidebar::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--chrome);
  pointer-events: none;
}

/* Only directory links scroll; the logo strip stays above their viewport. */
.sidebar-scroll {
  flex: 1 1 0;
  width: calc(100% + 12px);
  height: auto;
  min-height: 0;
  padding: 0 calc(var(--sidebar-inline-padding) + 12px) 24px var(--sidebar-inline-padding);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}

.sidebar-brand {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 0 0 35px;
  align-items: center;
  gap: 5px;
  min-height: 35px;
  padding: 11px var(--sidebar-inline-padding) 3px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  background: var(--chrome);
}

.sidebar-brand__mark {
  width: 17px;
  height: 21px;
}

.suite-navigation {
  margin-top: 17px;
}

.suite-navigation a {
  color: inherit;
  text-decoration: none;
}

.suite-navigation__home {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding-left: 8px;
  font-size: 12px;
  font-weight: 400;
}

.suite-navigation__divider {
  width: 185px;
  height: 2px;
  margin: 10px 0 29px;
  background: rgba(255, 255, 255, .74);
}

.suite-navigation__list,
.suite-navigation__children {
  padding: 0;
  margin: 0;
  list-style: none;
}

.suite-navigation__list {
  display: grid;
  gap: 3px;
}

.suite-navigation__list--my-business {
  margin-top: 4px;
}

.suite-navigation__item {
  --suite-accent: #ecc5d7;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 18px;
  padding: 2px 7px 2px 9px;
  font-size: 11px;
  line-height: 1.15;
  border: 1px solid transparent;
  border-radius: 5px;
}

.suite-navigation__item::after {
  content: "";
  position: absolute;
  z-index: -2;
  top: 5px;
  right: -22px;
  width: 9px;
  height: 9px;
  background: var(--suite-accent);
  border-radius: 0 5px 5px 0;
}

.suite-navigation__item--communications {
  --suite-accent: var(--blue-strong);
}

.suite-navigation__item--business {
  --suite-accent: #b9edba;
}

.suite-navigation__item--disclosure {
  justify-content: space-between;
  width: 100%;
  color: inherit;
  font-family: inherit;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.15;
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.suite-navigation__item--disclosure.is-active {
  width: calc(100% - 21px);
}

.suite-navigation__item--automation {
  --suite-accent: #cbb2f2;
}

.suite-navigation__item--marketing {
  --suite-accent: #f1ca36;
}

.suite-navigation__item.is-active {
  z-index: auto;
  min-height: 22px;
  margin-right: 21px;
  background: rgba(91, 91, 90, .95);
  border-color: rgba(255, 255, 255, .9);
}

.suite-navigation__item.is-active::after {
  top: 2px;
  right: -36px;
  width: 49px;
  height: 16px;
  border-radius: 8px 0 0 8px;
}

.suite-navigation__item.is-active::before {
  content: "";
  position: absolute;
  z-index: -2;
  top: -3px;
  right: -44px;
  width: 9px;
  height: 25px;
  background: var(--suite-accent);
  border-radius: 0 5px 5px 0;
}

.suite-navigation__item.is-active > * {
  position: relative;
  z-index: 2;
}

.suite-navigation__caret {
  margin-left: 6px;
  font-size: 8px;
  line-height: 1;
}

.suite-navigation__caret--icon {
  width: 6px;
  height: 4px;
  filter: brightness(0) invert(1);
  transition: transform .12s ease;
}

.suite-navigation__item--disclosure.is-expanded > .suite-navigation__caret--icon {
  transform: rotate(180deg);
}

.suite-navigation__children {
  position: relative;
  display: grid;
  gap: 1px;
  margin: 9px 0 7px 12px;
  padding-left: 12px;
}

.suite-navigation__children[hidden] {
  display: none;
}

.suite-navigation__children::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 7px;
  height: 17px;
  border-bottom: 1px solid rgba(255, 255, 255, .82);
  border-left: 1px solid rgba(255, 255, 255, .82);
}

.suite-navigation__children:has(> li:nth-child(2) > .suite-navigation__child.is-active)::before {
  height: 38px;
}

.suite-navigation__children:has(> li:nth-child(3) > .suite-navigation__child.is-active)::before {
  height: 59px;
}

.suite-navigation__child {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-height: 20px;
  padding: 2px 3px;
  font-size: 11px;
  border-radius: 10px;
}

.suite-navigation__child.is-active {
  padding-inline: 8px;
  background: #898a89;
}

.settings-directory {
  color: #fff;
}

.settings-directory__divider {
  width: min(185px, 100%);
  height: 1px;
  margin: 13px auto 10px;
  background: rgba(255, 255, 255, .84);
}

.settings-directory__toggle {
  position: relative;
  display: flex;
  align-items: center;
  color: inherit;
  font-weight: 400;
  line-height: 1.15;
  cursor: pointer;
}

.settings-directory__toggle--settings {
  justify-content: center;
  width: calc(100% + (2 * var(--sidebar-inline-padding)));
  min-height: 26px;
  padding: 0 22px 0 0;
  margin-inline: calc(-1 * var(--sidebar-inline-padding));
  font-size: 12px;
  background: #8fb4df;
  border: 1px solid rgba(255, 255, 255, .94);
  border-radius: 0;
}

.settings-directory__settings-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.settings-directory__settings-icon {
  width: 15px;
  height: 15px;
  filter: brightness(0) invert(1);
}

.settings-directory__caret {
  width: 6px;
  height: 4px;
  filter: brightness(0) invert(1);
  transition: transform .12s ease;
}

.settings-directory__toggle.is-expanded > .settings-directory__caret {
  transform: rotate(180deg);
}

.settings-directory__toggle--settings > .settings-directory__caret {
  position: absolute;
  right: 19px;
}

.settings-directory__branches,
.settings-directory__links {
  padding: 0;
  margin: 0;
  list-style: none;
}

.settings-directory__branches {
  position: relative;
  margin-top: 13px;
}

.settings-directory__toggle--settings.is-expanded + .settings-directory__branches::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 5px;
  right: calc(-1 * var(--sidebar-inline-padding) - 9px);
  width: 9px;
  height: 9px;
  background: #ff9e58;
  border-radius: 0 5px 5px 0;
  pointer-events: none;
}

.settings-directory__toggle--data {
  justify-content: space-between;
  width: 100%;
  min-height: 20px;
  padding: 0 31px 0 17px;
  font-size: 12px;
  background: transparent;
  border: 0;
}

.settings-directory__links {
  display: grid;
  gap: 0;
  margin-top: 2px;
  padding-left: 36px;
}

.settings-directory__links a {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-height: 22px;
  color: inherit;
  font-size: 11px;
  line-height: 1.15;
  text-decoration: none;
}

.settings-directory__toggle--settings:hover,
.settings-directory__toggle--settings:focus-visible {
  background: #9bc0e5;
}

.settings-directory__toggle--data:hover,
.settings-directory__toggle--data:focus-visible,
.settings-directory__links a:hover,
.settings-directory__links a:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, .08);
}

.settings-directory__links a.is-active {
  padding-inline: 5px;
  font-weight: 600;
  background: rgba(255, 255, 255, .12);
  border-radius: 4px;
}

.settings-directory__branches[hidden],
.settings-directory__links[hidden] {
  display: none;
}

.sidebar-scrim {
  display: none;
}

/* Top utility rail */
.utility-bar {
  z-index: 30;
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 35px;
  padding: 3px 8px 4px 2px;
  color: #fff;
  background: var(--chrome);
}

.mobile-navigation-button {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 3px;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 5px;
}

.mobile-navigation-button span {
  width: 13px;
  height: 1px;
  background: #fff;
}

.platform-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 420px;
  min-width: 150px;
  height: 21px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 8px;
  transform: translateY(2px);
}

.platform-search__icon {
  display: grid;
  place-items: center;
  width: 13px;
  height: 13px;
  margin-left: 6px;
  background: transparent;
}

.platform-search__icon .icon {
  width: 10px;
  height: 10px;
  filter: brightness(0) invert(1);
}

.platform-search input {
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 0 7px 0 5px;
  color: #fff;
  font-size: 10px;
  font-weight: 400;
  background: transparent;
  border: 0;
}

.platform-search input::placeholder {
  color: rgba(255, 255, 255, .94);
  opacity: 1;
}

.utility-icon-button,
.utility-overflow > summary {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 6px;
}

.utility-icon-button,
.utility-overflow > summary {
  position: relative;
  width: 39px;
  height: 30px;
}

.utility-icon-button::after,
.utility-pill--client::after,
.utility-ai::after,
.account-selector > summary::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -6px;
  bottom: -7px;
  width: 7px;
  height: 13px;
  background: var(--chrome);
  border-radius: 0 0 4px 4px;
}

.utility-icon-button .icon {
  width: 15px;
  max-height: 15px;
}

.utility-icon-button--settings .icon {
  width: 14px;
  height: 14px;
  filter: brightness(0) invert(1);
}

.utility-icon-group {
  display: flex;
  gap: 6px;
  margin-left: 4px;
}

.utility-pill,
.utility-ai {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  color: #111;
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 6px;
}

.utility-pill--peak {
  flex-basis: 76px;
  width: 76px;
  min-width: 76px;
  max-width: 76px;
  margin-left: 3px;
  padding-inline: 5px;
  background: var(--lime);
}

.utility-pill--peak .icon {
  width: 11px;
  height: 10px;
}

.utility-pill--client {
  min-width: 98px;
  background: var(--blue);
}

.utility-pill--client .icon {
  width: 13px;
  height: 13px;
}

.utility-notifications {
  margin-left: 0;
}

.utility-notifications::after,
.utility-ai::after {
  right: -8.5px;
}

.utility-ai {
  gap: 7px;
  min-width: 117px;
  height: 30px;
  margin-left: 4px;
  padding-inline: 12px;
  color: #fff;
  font-size: 11px;
  font-weight: 400;
  background: transparent;
  border-color: rgba(255, 255, 255, .82);
}

.utility-ai .icon {
  width: 11px;
  height: 15px;
}

.account-selector,
.utility-overflow,
.dropdown-control {
  position: relative;
}

.account-selector > summary,
.utility-overflow > summary,
.dropdown-control > summary {
  list-style: none;
}

.account-selector > summary::-webkit-details-marker,
.utility-overflow > summary::-webkit-details-marker,
.dropdown-control > summary::-webkit-details-marker {
  display: none;
}

.account-selector {
  flex: 0 1 224px;
  min-width: 170px;
  max-width: 224px;
  margin-left: 4px;
}

.account-selector > summary {
  display: flex;
  position: relative;
  align-items: center;
  gap: 10px;
  height: 30px;
  padding: 0 10px 0 16px;
  font-size: 11px;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 6px;
}

.account-selector > summary .icon {
  width: 13px;
  height: 15px;
}

.account-selector > summary > span:not(.account-selector__caret) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-selector__caret {
  margin-left: auto;
}

.utility-overflow {
  display: none;
}

.utility-overflow > summary {
  color: #fff;
  line-height: 1;
}

.utility-menu,
.compact-menu {
  position: absolute;
  z-index: 100;
  top: calc(100% + 4px);
  left: 0;
  display: grid;
  min-width: 170px;
  padding: 5px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 2px 3px 0 rgba(0, 0, 0, .16);
}

.utility-menu--account,
.compact-menu--right {
  right: 0;
  left: auto;
}

.utility-menu--account {
  min-width: 220px;
  padding: 11px;
}

.utility-menu button,
.compact-menu button {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 4px 7px;
  text-align: left;
  background: #fff;
  border: 0;
}

.utility-menu button:hover,
.compact-menu button:hover {
  background: var(--blue);
}

.utility-menu button .icon {
  width: 5px;
  height: 10px;
}

.utility-menu__eyebrow {
  margin: 0 0 2px;
  color: var(--muted);
  font-size: 9px;
  text-transform: uppercase;
}

.utility-menu__eyebrow--business-profile {
  margin-top: 6px;
}

.utility-menu strong {
  padding-bottom: 7px;
  font-size: 11px;
  border-bottom: 1px solid var(--line-soft);
}

/* Contacts workspace */
.contacts-workspace {
  position: relative;
  z-index: 10;
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: none;
  scrollbar-width: none;
  background: #fff;
  border-radius: 18px 0 0 0;
}

.contacts-workspace::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* The content surface has no decorative Homebase marker; suite navigation keeps its own colors. */

.contacts-screen {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  min-height: calc(100dvh - 35px);
  padding: 35px 60px 10px 32px;
}

.contacts-heading-row {
  display: flex;
  align-items: center;
  height: 24px;
}

.contacts-title-menu {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 2px 5px;
}

.contacts-title-menu h1 {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -.2px;
  line-height: 1;
  text-transform: uppercase;
  transform: translateY(-1px);
}

.contacts-title-menu__toggle {
  display: grid;
  place-items: center;
  width: 10px;
  height: 12px;
  padding: 0;
  background: transparent;
  border: 0;
  transform: translateY(-2px);
}

.contacts-title-menu__toggle .icon {
  width: 10px;
  height: auto;
  transform: rotate(180deg);
  transition: transform 120ms ease;
}

.contacts-title-menu__toggle[aria-expanded="false"] .icon {
  transform: rotate(0deg);
}

.contact-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  min-height: 22px;
  margin-left: 15px;
  padding: 0 9px;
  font-size: 10px;
  font-weight: 400;
  background: var(--blue);
  border: 1px solid #c5dce9;
  border-radius: 5px;
  box-shadow: -8px 0 0 #050505;
}

.module-navigation {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  height: 50px;
  margin-top: 10px;
}

.module-tabs {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 8px;
  min-width: 0;
}

.data-types-module-navigation {
  min-width: 0;
}

.data-types-scope-tabs {
  flex: 1 1 auto;
  max-width: 100%;
  padding-right: 8px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

.data-types-scope-tabs::-webkit-scrollbar {
  display: none;
}

.data-types-scope-tab {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact-module-slot {
  display: contents;
}

.contact-module-switcher[hidden],
.module-tab[hidden] {
  display: none;
}

.contact-module-switcher {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: grid;
  grid-template-rows: 18px 18px;
  align-content: center;
  align-self: stretch;
  width: 95px;
  margin-right: -5px;
  padding: 4px 7px;
  background: #d6e8fd;
  border: 1px solid #a7a7a7;
  border-radius: 0 5px 5px 5px;
  transform: translateY(-1px);
}

.contact-module-switcher::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -10px;
  left: -1px;
  width: 10px;
  height: 10px;
  background: #d6e8fd;
  border: 1px solid #a7a7a7;
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
}

.contact-module-switcher::after {
  content: "";
  position: absolute;
  z-index: -2;
  top: 34px;
  left: -7px;
  width: 6px;
  height: 6px;
  background: #000;
  border-radius: 0 0 0 5px;
}

.contact-module-switcher__item {
  display: flex;
  align-items: center;
  padding: 0 5px;
  font-size: 12px;
  letter-spacing: -.22px;
  text-align: left;
  background: transparent;
  border: 0;
}

.contact-module-switcher__item > span:first-child {
  position: relative;
  top: -.5px;
  display: inline-block;
  transform: scaleY(.94);
  transform-origin: center bottom;
}

.contact-module-switcher__item.is-active {
  padding-left: 6px;
  letter-spacing: -.07px;
}

.contact-module-switcher__item.is-active > span:first-child {
  top: -.75px;
  transform: scaleY(.88);
}

.contact-module-switcher__check {
  display: none;
  margin-left: 2px;
  width: 7px;
  height: 8.5px;
  color: #1d1b20;
  flex: 0 0 auto;
  transform: none;
}

.contact-module-switcher__check .icon {
  display: block;
  width: 100%;
  height: 100%;
}

.contact-module-switcher__item.is-active .contact-module-switcher__check {
  display: inline-flex;
}

.module-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  height: 31px;
  padding: 0 12px;
  color: var(--ink);
  font-size: 11px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  background: var(--pale-lime);
  border: 1px solid #d1d7b5;
  border-radius: 6px;
}

.module-tab--data-types {
  min-width: 126px;
}

.module-tab--contact-lists {
  margin-left: -6px;
}

.module-tab.is-active {
  box-shadow: inset 0 -6px 0 #050505;
}

.contact-create-actions {
  position: relative;
  z-index: 30;
  display: grid;
  align-content: start;
  justify-items: end;
  gap: 5px;
  padding-top: 1px;
  overflow: visible;
  transform: translate(2px, -50px);
}

.contact-create-actions__row {
  display: flex;
  gap: 0;
}

.contact-create-actions__secondary-row {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  transform: translateY(3px);
}

.contact-create-actions__secondary-row .filter-chip-strip {
  transform: none;
}

.contact-create-actions__secondary-row .toolbar-icon-button {
  width: 23px;
  height: 23px;
  min-height: 23px;
  margin-top: 0;
  padding: 0;
  background: var(--blue);
  border: 1px solid #9ab5c4;
  border-radius: 2px;
}

.contact-create-menu {
  position: relative;
  z-index: 8;
}

.contact-create-actions .contact-create-menu > summary {
  display: flex;
  gap: 0;
  height: 22px;
  list-style: none;
  cursor: pointer;
}

.contact-create-menu > summary::-webkit-details-marker {
  display: none;
}

.contact-create-menu__label,
.contact-create-menu__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--ink);
  font-size: 10px;
  background: var(--pale-lime);
  border: 1px solid #aeb49d;
}

.contact-create-menu__label {
  min-width: 80px;
  padding: 2px 8px;
  border-radius: 3px 0 0 3px;
}

.contact-create-menu__icon {
  width: 24px;
  border-left: 0;
  border-radius: 0 3px 3px 0;
}

.contact-create-menu__icon .icon {
  width: 8px;
  height: 8px;
}

.contact-create-menu__panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 5px);
  left: 0;
  width: 106px;
  overflow: hidden;
  color: #111;
  background: #fafafa;
  border: 0.75px solid #474747;
  border-radius: 6px;
  box-shadow: none;
}

.contact-create-menu__panel p {
  display: flex;
  align-items: center;
  height: 23px;
  margin: 0;
  padding: 0 8px;
  font-size: 10px;
  border-bottom: 0.75px solid #474747;
}

.contact-create-actions .contact-create-menu__panel button {
  display: block;
  width: 100%;
  min-height: 0;
  padding: 10px 8px 5px;
  color: #111;
  font-size: 10px;
  line-height: 1.25;
  text-align: left;
  white-space: normal;
  background: #fafafa;
  border: 0;
  border-radius: 0;
}

.contact-create-actions .contact-create-menu__panel button + button {
  padding-top: 8px;
  padding-bottom: 9px;
}

.contact-create-menu__panel button > span {
  display: block;
}

.contact-create-menu__panel button:hover,
.contact-create-menu__panel button:focus-visible {
  background: var(--blue);
}

.contact-create-actions__more,
.manage-categories-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 2px 8px;
  font-size: 10px;
  background: var(--pale-lime);
  border: 1px solid #aeb49d;
  border-radius: 3px 0 0 3px;
}

.contact-create-actions__more {
  width: 26px;
  padding: 0 !important;
  background: #fff !important;
  border-radius: 4px !important;
  letter-spacing: 1px;
  list-style: none;
}

.contact-actions-menu {
  margin-left: 7px;
}

.contact-actions-menu__panel {
  right: 0;
  left: auto;
  width: 132px;
}

.manage-categories-button {
  gap: 5px;
  background: #e4e4e4 !important;
  border-color: #b7b8b7 !important;
  border-radius: 2px !important;
}

.manage-categories-button .icon {
  width: 13px;
  height: 13px;
}

.manage-contact-lists {
  position: relative;
  z-index: 31;
  flex: 0 0 auto;
}

.manage-contact-lists .manage-categories-button {
  width: 100%;
  min-width: 139px;
}

.manage-contact-lists__caret {
  width: 6px !important;
  height: 5px !important;
  margin-left: 2px;
  transition: transform 120ms ease;
}

.manage-categories-button[aria-expanded="true"] .manage-contact-lists__caret {
  transform: rotate(180deg);
}

.manage-contact-lists .manage-categories-button:hover,
.manage-contact-lists .manage-categories-button:focus-visible,
.manage-contact-lists .manage-categories-button[aria-expanded="true"] {
  background: var(--blue) !important;
  outline: none;
  box-shadow: inset 0 0 0 .5px #474747;
}

.manage-contact-lists__menu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 4px);
  right: 0;
  display: grid;
  width: 190px;
  padding: 4px;
  overflow: hidden;
  color: var(--ink);
  background: #fff;
  border: .75px solid #777;
  border-radius: 5px;
  box-shadow: 2px 3px 0 rgba(0, 0, 0, .12);
}

.manage-contact-lists__menu[hidden] {
  display: none;
}

.manage-contact-lists__heading {
  min-height: 24px;
  margin: -4px -4px 3px;
  padding: 6px 9px 5px;
  font-size: 10px;
  line-height: 1.2;
  border-bottom: .75px solid #aaa;
}

.manage-contact-lists__saved-options {
  display: grid;
  min-width: 0;
  max-height: min(210px, 40dvh);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #444 transparent;
}

.manage-contact-lists__option,
.manage-contact-lists__create {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-width: 0;
  min-height: 27px;
  padding: 4px 7px;
  color: var(--ink);
  font: inherit;
  font-size: 10px;
  line-height: 1.2;
  text-align: left;
  background: #fff;
  border: 0;
  border-radius: 3px;
}

.manage-contact-lists__option.is-draggable {
  grid-template-columns: 8px 15px minmax(0, 1fr) auto;
}

.manage-contact-lists__drag-handle {
  display: block;
  width: 7px;
  height: 16px;
  object-fit: contain;
  cursor: grab;
}

.manage-contact-lists__option.is-dragging {
  opacity: .55;
  cursor: grabbing;
}

.manage-contact-lists__option.is-drop-target-before {
  box-shadow: inset 0 2px 0 var(--focus);
}

.manage-contact-lists__option.is-drop-target-after {
  box-shadow: inset 0 -2px 0 var(--focus);
}

.manage-contact-lists__option > .icon,
.manage-contact-lists__create > .icon {
  width: 13px;
  max-height: 15px;
}

.manage-contact-lists__option > span:not(.manage-contact-lists__option-chevron),
.manage-contact-lists__create > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manage-contact-lists__option-chevron {
  width: 6px !important;
  height: 5px !important;
  transform: rotate(-90deg);
}

.manage-contact-lists__option[aria-current="true"] {
  background: var(--pale-lime);
}

.manage-contact-lists__option:hover,
.manage-contact-lists__option:focus-visible,
.manage-contact-lists__create:hover,
.manage-contact-lists__create:focus-visible {
  background: var(--blue-strong);
  outline: none;
}

.manage-contact-lists__separator {
  height: .75px;
  margin: 4px 3px;
  background: #aaa;
}

.manage-contact-lists__create {
  grid-template-columns: 15px minmax(0, 1fr);
}

.contacts-panel {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin-top: 8px;
}

.view-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 40px;
  min-width: 0;
}

.view-toolbar__primary,
.view-toolbar__search-tools,
.filter-chip-strip {
  display: flex;
  align-items: center;
  min-width: 0;
}

.view-toolbar__primary {
  flex: 1 1 auto;
  gap: 16px;
}

.view-config-card {
  position: relative;
  z-index: 2;
  top: 1px;
  display: flex;
  align-items: center;
  flex: 0 0 319px;
  width: 319px;
  gap: 6px;
  height: 39px;
  padding: 6px 8px 6px 13px;
  background: #ededed;
  border: 1px solid #a7a7a7;
  border-radius: 11px 11px 0 0;
  box-shadow: none;
}

.view-config-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 4px 4px 0;
  background: linear-gradient(90deg, #ededed, #dedede);
  border: 1px solid #a7a7a7;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  pointer-events: none;
}

.view-config-card > * {
  position: relative;
  z-index: 1;
}

.view-config-card h2 {
  display: inline-flex;
  align-items: center;
  flex: 0 0 88px;
  min-width: 0;
  height: 21px;
  margin: 0;
  padding: 0 6px;
  font-size: 14.5px;
  font-weight: 400;
  letter-spacing: -.25px;
  white-space: nowrap;
  background: #fff;
  border: 0;
  border-radius: 3px;
  transform: translateY(2px);
}

.dropdown-control > summary,
.view-button,
.add-view-button,
.toolbar-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--ink);
  white-space: nowrap;
}

.view-options > summary {
  justify-content: space-between;
  min-width: 86px;
  height: 14px;
  padding: 0 5px;
  font-size: 9px;
  background: #fff;
  border: 0;
  border-radius: 0;
  transform: translateY(2px);
}

.view-options > summary .icon:last-child {
  width: 6px;
  height: 5px;
}

.view-options-menu {
  min-width: 170px;
}

.view-button {
  align-self: flex-end;
  flex: 0 0 auto;
  min-width: 100px;
  height: 31px;
  gap: 8px;
  padding: 0 12px 0 6px;
  font-size: 10px;
  line-height: 1;
  background: linear-gradient(90deg, #ededed, #dedede);
  border: 1px solid #a7a7a7;
  border-bottom: 0;
  border-radius: 11px 11px 0 0;
  transform: translateY(6px);
}

.view-button.is-active {
  box-shadow: 4px 0 0 #050505;
}

.view-button .icon {
  width: 11px;
  height: 10px;
}

.view-button[data-contact-list-id] {
  max-width: 180px;
}

.view-button[data-contact-list-id] > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.add-view-button {
  align-self: flex-end;
  flex: 0 0 auto;
  width: 26px;
  height: 29px;
  padding: 0;
  background: var(--blue);
  border: 1px solid #a7a7a7;
  border-bottom: 0;
  border-radius: 13px 13px 0 0;
  transform: translateY(6px);
}

.add-view-button .icon {
  width: 12px;
  height: 12px;
}

.view-button > .icon,
.view-button > span,
.add-view-button > .icon {
  transform: translateY(0);
}

.filter-chip-strip {
  display: grid;
  grid-template-columns: max-content;
  align-items: center;
  justify-items: start;
  flex: 0 0 auto;
  width: max-content;
  max-width: none;
  row-gap: 7px;
  margin-left: -6px;
  transform: translateY(3px);
  overflow-x: visible;
}

.filter-chip-strip[hidden] {
  display: none;
}

.filter-chip-row {
  display: flex;
  align-items: center;
  gap: 7px;
  width: max-content;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 0;
  width: max-content;
  height: 18px;
  padding: 0;
  overflow: hidden;
  font-size: var(--filter-pill-font-size);
  background: #e6e6e0;
  border: 0;
  border-radius: 10px;
}

.filter-chip__toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: auto;
  height: 18px;
  padding: 0 2px 0 8px;
  color: inherit;
  font: inherit;
  white-space: nowrap;
  background: transparent;
  border: 0;
}

.filter-chip__toggle:focus-visible,
.filter-chip--more:focus-visible {
  outline: 1px solid #111;
  outline-offset: -1px;
}

.filter-chip strong,
.more-filters-popover__body > button strong {
  flex: 0 0 auto;
  min-width: 17px;
  padding: 1px 4px;
  font-size: var(--filter-pill-value-font-size);
  line-height: 1;
  text-align: center;
  background: var(--lime);
  border-radius: 8px;
}

.filter-chip--more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 5px;
  width: max-content;
  min-width: 0;
  height: 18px;
  padding: 0 8px;
  color: inherit;
  font: inherit;
  font-size: var(--filter-pill-font-size);
  background: #e6e6e0;
  border: 0;
  border-radius: 10px;
}

.filter-chip--more__caret {
  width: 6px;
  height: 5px;
}

.filter-chip__remove,
.channel-tag button,
.contact-tag button {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  line-height: 1;
}

.filter-chip__remove {
  flex: 0 0 17px;
  font-size: 9px;
}

.view-toolbar__search-tools {
  flex: 0 0 auto;
  align-self: stretch;
  align-items: flex-start;
  gap: 5px;
  margin-right: 18px;
}

.contact-view-picker {
  position: relative;
  flex: 0 0 94px;
  width: 94px;
  min-width: 0;
  margin-top: 2px;
}

.contact-view-picker .contact-view-picker__toggle {
  gap: 5px;
  width: 94px;
  height: 21px;
  padding: 0 6px;
  font-size: 9px;
  line-height: 1;
  border-color: #aaa;
  border-radius: 4.8px;
  box-shadow: none;
}

.contact-view-picker__toggle:focus,
.contact-view-picker__toggle:focus-visible {
  border-color: #474747;
  outline: none;
  outline-offset: 0;
  box-shadow: inset 0 0 0 .5px #474747;
}

.contact-view-picker__leading-icon {
  flex: 0 0 11px;
  width: 11px;
  height: 10px;
}

.contact-view-picker .contact-view-picker__toggle > [data-contact-view-label] {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-view-picker .contact-view-picker__caret {
  flex: 0 0 5px;
  width: 5px;
  height: 4px;
}

.contact-view-picker .contact-view-picker__menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 3px);
  left: 0;
  display: grid;
  gap: 0;
  width: 100%;
  max-height: none;
  padding: 3px;
  overflow: hidden;
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 4.8px;
  box-shadow: none;
}

.contact-view-picker__menu [role="option"] {
  width: 100%;
  min-height: 23px;
  padding: 3px 6px;
  color: var(--ink);
  font: inherit;
  font-size: 9px;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
  background: #fff;
  border: 0;
  border-radius: 3.6px;
}

.contact-view-picker__menu [role="option"][aria-selected="true"] {
  background: var(--pale-lime);
}

.contact-view-picker__menu [role="option"]:hover,
.contact-view-picker__menu [role="option"]:focus-visible {
  background: var(--blue);
  outline: none;
  box-shadow: inset 0 0 0 .5px #474747;
}

.view-config-card:has(.contact-view-picker.is-open) {
  z-index: 5;
}

.toolbar-icon-button {
  width: 23px;
  height: 23px;
  padding: 0;
  background: var(--blue);
  border: 1px solid #9ab5c4;
  border-radius: 2px;
  margin-top: 12px;
}

.toolbar-icon-button .icon {
  width: 13px;
  max-height: 13px;
}

.list-search {
  display: flex;
  align-items: center;
  width: 208px;
  height: 37px;
  margin-top: 3px;
  padding: 8px 10px 5px 6px;
  background: #fff;
  border: 1px solid #a7a7a7;
  border-radius: 11px 11px 0 0;
}

.list-search__icon {
  display: grid;
  place-items: center;
  flex: 0 0 20px;
  height: 22px;
  background: #fff;
  border: 0.5px solid #111;
  border-right: 0;
  border-radius: 7px 0 0 7px;
}

.list-search__icon .icon {
  width: 8px;
  height: 8px;
}

.list-search input {
  min-width: 0;
  width: 100%;
  height: 22px;
  padding: 0 5px 0 1px;
  color: #111;
  font-size: 10px;
  background: #fff;
  border: 0.5px solid #111;
  border-left: 0;
  border-radius: 0 7px 7px 0;
}

.list-search input::placeholder {
  color: #111;
  opacity: 1;
}

.bulk-action-toolbar {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 29px;
  margin: 0 -5px -5px -8px;
  padding: 4px 15px;
  background: #fff;
  border: 1px solid #adaead;
}

.bulk-action-toolbar[hidden] {
  display: none;
}

.bulk-action-toolbar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 20px;
  padding: 0 8px;
  font-size: 9px;
  white-space: nowrap;
  background: #fff;
  border: 1px solid #b5b6b5;
  border-radius: 4px;
}

.bulk-action-toolbar button:disabled {
  color: #777;
  opacity: .55;
  cursor: not-allowed;
}

.bulk-action-toolbar > button:nth-child(1) { flex: 0 0 82px; width: 82px; }
.bulk-action-toolbar > button:nth-child(2) { flex: 0 0 66px; width: 66px; }
.bulk-action-toolbar > button:nth-child(3) { flex: 0 0 46px; width: 46px; }
.bulk-action-toolbar > button:nth-child(4) { flex: 0 0 108px; width: 108px; }
.bulk-action-toolbar > button:nth-child(5) { flex: 0 0 66px; width: 66px; }
.bulk-action-toolbar > button:nth-child(6) { flex: 0 0 95px; width: 95px; }
.bulk-action-toolbar > button:nth-child(7) { flex: 0 0 106px; width: 106px; }

.bulk-action-toolbar__more {
  padding-inline: 3px !important;
  border-color: transparent !important;
}

/* Contact table */
.contacts-table-shell {
  position: relative;
  isolation: isolate;
  flex: 1 1 445px;
  width: 100%;
  max-width: 1240px;
  height: 445px;
  min-height: 0;
  margin-inline: -10px;
  margin-bottom: 20px;
  min-width: 0;
}

.contacts-table-shell::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  right: 48px;
  left: 0;
  height: 44px;
  background: #fafafa;
  border: 1px solid #c0c1c0;
  pointer-events: none;
}

.contacts-table-shell::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 4px;
  right: 48px;
  left: 0;
  height: 42px;
  background: #fdfdfd;
  border: 1px solid #a7a7a7;
  border-bottom-color: #c0c1c0;
  border-radius: 0;
  pointer-events: none;
}

.contacts-list-container {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 58px;
  left: 10px;
  height: 100%;
  background: #fff;
  border: 1px solid #bfc0bf;
  pointer-events: none;
}

.contacts-table-scroll {
  position: relative;
  z-index: 2;
  width: calc(100% - 48px);
  max-width: 1192px;
  height: 100%;
  padding: 0 0 0 10px;
  overflow-x: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: transparent;
  border: 0;
  scrollbar-width: none;
}

.contacts-table-scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.contacts-table-scroll::-webkit-scrollbar:vertical {
  width: 0;
}

.contacts-table-scroll-spacer {
  width: 1px;
  height: 0;
  pointer-events: none;
}

.contacts-table {
  width: var(--contacts-table-min-width, 1188px);
  table-layout: fixed;
  margin-top: -1px;
  margin-right: 0;
  margin-left: -6px;
  font-size: 9px;
  border-spacing: 0 5px;
  border-collapse: separate;
}

.contacts-column--name { width: 130px; }
.contacts-column--phone { width: 115px; }
.contacts-column--email { width: 151px; }
.contacts-column--status { width: 74px; }
.contacts-column--dateCreated { width: 181px; }
.contacts-column--coreInterest { width: 142px; }
.contacts-column--channels { width: 247px; }
.contacts-column--tags { width: 148px; }
.contacts-column--firstName { width: 110px; }
.contacts-column--lastName { width: 110px; }
.contacts-column--assignee { width: 165px; }
.contacts-column--contactType { width: 110px; }
.contacts-column--occupation { width: 150px; }
.contacts-column--pipelineStage { width: 125px; }
.contacts-table th,
.contacts-table td {
  min-width: 0;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contacts-table thead {
  position: sticky;
  z-index: 4;
  top: 4px;
  background: #fdfdfd;
}

.contacts-table thead th {
  position: relative;
  z-index: auto;
  top: auto;
  height: 40px;
  padding: 0 10px;
  overflow: visible;
  font-weight: 400;
  background: transparent;
  isolation: isolate;
}

.contacts-table thead th::before {
  content: "";
  position: absolute;
  inset: 6px 5px 2px;
  z-index: 1;
  background: linear-gradient(#ededed, #dadbda);
  border: 1px solid #bcbcbc;
  border-radius: 5px;
  box-shadow: none;
}

.contacts-table thead th::after {
  content: "";
  position: absolute;
  inset: 0 2px -4px;
  z-index: 0;
  pointer-events: none;
  background: #fdfdfd;
  border: 1px solid #a7a7a7;
  border-bottom-color: #c0c1c0;
  border-radius: 0;
}

.contacts-table thead th[data-column="name"]::after {
  left: -4px;
}

.contacts-table thead th[data-selection-column]::after {
  left: -4px;
}

.contacts-table thead th[data-column="name"]::before {
  right: 5px;
  left: -1px;
}

.contacts-table thead th[data-selection-column]::before {
  right: 5px;
  left: -1px;
}

.contacts-table thead th[data-column="tags"]::before {
  right: 7px;
  left: 7px;
}

.contacts-table__column-actions {
  position: absolute;
  z-index: 5;
  top: 4px;
  right: 7.2px;
  width: 40.8px;
  height: 44px;
}

.contacts-table__add-column-button {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 20px;
  height: 44px;
  padding: 0;
  background: #fdfdfd;
  border: 1px solid #a7a7a7;
  border-radius: 0;
  cursor: pointer;
}

.contacts-table__add-column-button:hover {
  background: var(--blue);
  border-color: #a7a7a7;
}

.contacts-table__add-column-button:focus-visible {
  outline: 1px solid #111;
  outline-offset: -2px;
}

.contacts-table__add-column-button .icon {
  width: 14.4px;
  height: 14.4px;
  filter: invert(41.5686%);
}

.contacts-table__edit-columns-button {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 20.8px;
  height: 23.2px;
  padding: 0;
  background: #fdfdfd;
  border: 1px solid #a7a7a7;
  border-left: 0;
  border-radius: 0 6.4px 6.4px 0;
  cursor: pointer;
}

.contacts-table__edit-columns-button:hover {
  background: var(--blue);
}

.contacts-table__edit-columns-button:focus-visible {
  outline: 1px solid #111;
  outline-offset: -2px;
}

.contacts-table__edit-columns-button .icon {
  width: 14.4px;
  height: 14.4px;
}

.column-field-token {
  position: relative;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.column-field-token__label,
.column-field-token__trailing {
  position: relative;
  z-index: 1;
}

.column-field-token__label {
  flex: 0 0 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.column-field-token__folder {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 32px;
  max-width: none;
}

.column-field-token--table-visual {
  justify-content: space-between;
  gap: 5px;
  width: max-content;
  max-width: 100%;
  height: 29px;
  padding: 2px 6px 2px 10px;
  overflow: visible;
  color: #111;
  font-size: 10px;
  font-weight: 400;
  text-align: left;
  text-overflow: ellipsis;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.column-field-token--table-visual .column-field-token__trailing {
  width: 5px;
  height: 10px;
  flex: 0 0 5px;
}

.table-heading-button {
  position: absolute;
  top: 9px;
  left: 10px;
  z-index: 2;
}

.contacts-table th[data-column="name"] .table-heading-button {
  left: 22px;
  max-width: calc(100% - 24px);
}

.contacts-table th[data-selection-column] .table-heading-button {
  left: 22px;
  max-width: calc(100% - 24px);
}

.contacts-table th[data-column="phone"] .table-heading-button {
  left: 15px;
}

.contacts-table th[data-column="email"] .table-heading-button {
  left: 10px;
}

.contacts-table th[data-column="tags"] .table-heading-button {
  width: 72px;
}

.contacts-table tbody th,
.contacts-table tbody td {
  position: relative;
  top: 0;
  height: 34px;
  padding: 3px 14px;
  font-size: 10px;
  font-weight: 400;
  background: #fafafa;
  border-top: 0.75px solid #474747;
  border-right: 0;
  border-bottom: 0.75px solid #474747;
}

.contacts-table tbody tr:nth-child(odd) th,
.contacts-table tbody tr:nth-child(odd) td {
  background: linear-gradient(#e8e8e8, #ebebeb);
}

.contacts-table tbody th:first-child,
.contacts-table tbody td:first-child {
  border-left: 0.75px solid #474747;
  border-radius: 5px 0 0 5px;
}

.contacts-table tbody td:last-child {
  border-right: 0.75px solid #474747;
  border-radius: 0 5px 5px 0;
}

.contacts-table tbody th:last-child {
  border-right: 0.75px solid #474747;
  border-radius: 0 5px 5px 0;
}

.contacts-table tbody th:not(:last-child)::after,
.contacts-table tbody td:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 14px;
  background: #5b5b5b;
  pointer-events: none;
}

.contacts-table tbody tr.is-selected th,
.contacts-table tbody tr.is-selected td {
  height: 34px;
  background:
    linear-gradient(#e5e9ce, #f1f3d8) center / 100% 24px no-repeat,
    #fafafa;
  border-top: 0.75px solid #474747;
  border-bottom: 0.75px solid #474747;
}

.contacts-table tbody tr:nth-child(odd).is-selected th,
.contacts-table tbody tr:nth-child(odd).is-selected td {
  background:
    linear-gradient(#e5e9ce, #f1f3d8) center / 100% 24px no-repeat,
    linear-gradient(#e8e8e8, #ebebeb);
}

.contacts-table tbody tr.is-selected th:first-child {
  overflow: visible;
  border-left: 0;
  border-radius: 0;
}

.contacts-table tbody tr.is-selected td:last-child {
  border-right: 0.75px solid #474747;
  border-radius: 0 4px 4px 0;
}

.contacts-table tbody tr.is-selected th:last-child {
  border-right: 0.75px solid #474747;
  border-radius: 0 4px 4px 0;
}

.contacts-table tbody tr:not(.is-selected) th:first-child {
  border-left-width: 0.75px;
  border-left-color: #474747;
}

.contacts-table tbody tr:nth-child(odd):not(.is-selected) th,
.contacts-table tbody tr:nth-child(odd):not(.is-selected) td {
  border-top-color: #474747;
  border-bottom-color: #474747;
}

.contacts-table tbody tr:nth-child(odd):not(.is-selected) th:first-child {
  border-left-color: #474747;
}

.contacts-table tbody tr:nth-child(odd):not(.is-selected) td:last-child {
  border-right-color: #474747;
}

.contacts-table tbody tr:nth-child(even):not(.is-selected) th,
.contacts-table tbody tr:nth-child(even):not(.is-selected) td {
  border-top-color: #696969;
  border-bottom-color: #696969;
}

.contacts-table tbody tr:nth-child(even):not(.is-selected) th:first-child {
  border-left-color: #696969;
}

.contacts-table tbody tr:nth-child(even):not(.is-selected) td:last-child {
  border-right-color: #696969;
}

.contacts-table thead th[data-column="name"],
.contacts-table tbody [data-column="name"] {
  position: sticky;
  left: -6px;
}

.contacts-table thead th[data-column="name"] {
  z-index: 2;
  background: #fdfdfd;
}

.contacts-table tbody [data-column="name"] {
  z-index: 3;
  overflow: visible;
  isolation: isolate;
}

.contacts-table tbody [data-column="name"]::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -1px;
  right: 100%;
  bottom: -1px;
  width: 6px;
  visibility: hidden;
  background: inherit;
  pointer-events: none;
}

.contacts-table__name-scrim {
  position: absolute;
  z-index: 1;
  top: 0;
  left: calc(100% - 1px);
  width: 24px;
  height: 100%;
  visibility: hidden;
  background: linear-gradient(90deg,
    #fff 0 7px,
    rgba(255, 255, 255, .94) 58%,
    rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

.contacts-table tbody .contacts-table__name-scrim {
  background: inherit;
  -webkit-mask-image: linear-gradient(90deg,
    #000 0 7px,
    rgba(0, 0, 0, .94) 58%,
    rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(90deg,
    #000 0 7px,
    rgba(0, 0, 0, .94) 58%,
    rgba(0, 0, 0, 0) 100%);
}

.contacts-table thead .contacts-table__name-scrim {
  z-index: 3;
  bottom: -4px;
  height: auto;
}

.contacts-table-scroll[data-horizontally-scrolled] .contacts-table__name-scrim {
  visibility: visible;
}

.contacts-table-scroll[data-horizontally-scrolled] .contacts-table thead th[data-column="name"] {
  box-shadow: -6px 0 0 #fff;
}

.contacts-table-scroll[data-horizontally-scrolled] .contacts-table tbody [data-column="name"]::before {
  visibility: visible;
}

.contacts-table__viewport-row-caps {
  --contacts-table-scroll-left: 0px;
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  width: 8px;
  height: 0;
  overflow: visible;
  transform: translateX(var(--contacts-table-scroll-left));
  pointer-events: none;
}

.contacts-table__viewport-row-cap {
  position: absolute;
  right: 0;
  display: block;
  width: 8px;
  background: #fff;
  isolation: isolate;
  pointer-events: none;
}

.contacts-table__viewport-row-cap::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset-block: 0;
  right: 0;
  width: 8px;
  background: #fafafa;
  border: .75px solid #696969;
  border-left: 0;
  border-radius: 0 5px 5px 0;
  pointer-events: none;
}

.contacts-table__viewport-row-cap--odd::before {
  background: linear-gradient(#e8e8e8, #ebebeb);
  border-color: #474747;
}

.contacts-table__viewport-row-cap.is-selected::before {
  background:
    linear-gradient(#e5e9ce, #f1f3d8) center / 100% 24px no-repeat,
    #fafafa;
  border-color: #474747;
  border-radius: 0 4px 4px 0;
}

.contacts-table__viewport-row-cap--odd.is-selected::before {
  background:
    linear-gradient(#e5e9ce, #f1f3d8) center / 100% 24px no-repeat,
    linear-gradient(#e8e8e8, #ebebeb);
}

.contacts-table tbody th:first-child {
  padding-left: 20px;
}

.contact-selection-control {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 2px;
  display: grid;
  place-items: center;
  width: 17px;
  height: 100%;
  cursor: pointer;
}

.contact-selection-checkbox {
  -webkit-appearance: none;
  appearance: none;
  width: 11px;
  height: 11px;
  margin: 0;
  background: #fff;
  border: .75px solid #474747;
  border-radius: 2px;
  cursor: pointer;
}

.contact-selection-checkbox:checked {
  background: #d1e9ff url("../general, reusable UI assets for pragtical/check.svg") center / 7px 6px no-repeat;
}

.contact-selection-checkbox:indeterminate {
  background: linear-gradient(#1d1b20, #1d1b20) center / 6px 1.5px no-repeat, #d1e9ff;
}

.contact-selection-checkbox:focus-visible {
  outline: 1px solid #111;
  outline-offset: 1px;
}

.contact-selection-checkbox:disabled {
  cursor: default;
  opacity: .5;
}

.contacts-table tbody td[data-column="tags"] {
  padding-right: 8px;
  padding-left: 11px;
}

.contact-name,
.contact-field-with-icon,
.channel-tags,
.contact-tags {
  display: flex;
  align-items: center;
  min-width: 0;
}

.contact-name {
  gap: 9px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.contact-name .icon {
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
}

.contact-name__text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-field-with-icon {
  gap: 5px;
}

.contact-field-with-icon > .icon {
  width: 11px;
  max-height: 12px;
}

.contacts-table a {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  text-overflow: ellipsis;
}

.channel-tags,
.contact-tags {
  gap: 4px;
}

.contact-tags {
  transform: translateY(2px);
}

.channel-tag,
.contact-tag {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: 19px;
  padding-left: 7px;
  font-size: 10px;
  background: #fff;
  border: 1px solid #7e807d;
  border-radius: 4px;
}

.channel-tag--do-not-contact {
  padding: 0 7px;
  color: #6a2522;
  background: #fff1ef;
  border-color: #ae6a65;
}

.channel-tag button,
.contact-tag button {
  width: 17px;
  height: 17px;
}

.contact-tag button {
  width: 12px;
}

.contact-tag__remove {
  display: inline-grid;
  place-items: center;
  width: 12px;
  height: 17px;
}

.contact-tag--lead {
  background: #ffbd68;
  border-color: #b87829;
}

.contact-tag--chapter-seven {
  background: var(--lime);
  border-color: #a8b65b;
}

.contact-tag--count {
  padding: 0 4px;
  background: var(--lime);
  border-color: #a8b65b;
}

.contact-tag--count-lead {
  background: #ffbd68;
  border-color: #b87829;
}

.contact-tag--count-neutral,
.contact-tag--count-mixed {
  background: #fff;
  border-color: #7e807d;
}

button.contact-tag--count {
  color: inherit;
  font: inherit;
  cursor: pointer;
}

button.contact-tag--count:focus-visible {
  outline: 1px solid #111;
  outline-offset: 1px;
}

.contact-tag-list-popover {
  position: fixed;
  z-index: 50;
  width: 99px;
  max-width: calc(100vw - 16px);
  padding: 0;
  overflow: hidden;
  color: #111;
  background: #fafafa;
  border: 0.75px solid #a8aaa8;
  border-radius: 6px;
  box-shadow: none;
}

.contact-tag-list-popover[hidden] {
  display: none;
}

.contact-tag-list-popover__header {
  display: flex;
  align-items: center;
  height: 23px;
  padding: 0 8px;
  background: #fafafa;
  border-bottom: 0.75px solid #474747;
}

.contact-tag-list-popover__header h2 {
  margin: 0;
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
}

.contact-tag-list-popover__body {
  background: #fafafa;
}

.contact-tag-list-popover__scroll-frame {
  position: relative;
}

.contact-tag-list-popover__scroll {
  height: 73px;
  padding: 6px 7px 4px 4px;
  overflow-y: auto;
  scrollbar-width: none;
}

.contact-tag-list-popover__scroll::-webkit-scrollbar {
  display: none;
}

.contact-tag-list-popover__scrollbar {
  position: absolute;
  z-index: 1;
  top: 14.1px;
  right: 0;
  bottom: 4px;
  width: 24px;
}

.contact-tag-list-popover__scrollbar .scrollbar-ui__handle {
  right: 5px;
  width: 4.8px;
  height: 44.8px;
}

.contact-tag-list-popover ul {
  display: grid;
  justify-items: start;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-tag-list-popover li {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  min-height: 19.8px;
  padding-left: 3.3px;
  overflow: hidden;
  font-size: 8.25px;
  white-space: nowrap;
  background: #fff;
  border: 0.75px solid #474747;
  border-radius: 4.4px;
}

.contact-tag-list-popover li > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact-tag-list-popover li > button {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  flex: 0 0 12.1px;
  align-self: stretch;
  width: 12.1px;
  padding: 0 1.1px 1.1px;
  color: #111;
  font-size: 12.1px;
  line-height: 1;
  background: transparent;
  border: 0;
}

.contact-tag-list-popover li.contact-tag-list-popover__tag--lead {
  background: #ffb77a;
  border-color: #b87829;
}

.contact-tag-list-popover li.contact-tag-list-popover__tag--chapter-seven {
  background: var(--lime);
  border-color: #a8b65b;
}

.contact-tag-list-popover li.contact-tag-list-popover__empty {
  min-height: 18px;
  padding: 0;
  color: var(--muted);
  font-size: 8px;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.contact-tag-list-popover__add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  height: 18px;
  margin: 0 14px 5px 5px;
  overflow: hidden;
  background: var(--pale-lime);
  border: 0.75px solid #a8aaa8;
  border-radius: 4px;
}

.contact-tag-list-popover__add input {
  min-width: 0;
  width: 100%;
  padding: 0 4px;
  color: #111;
  font-size: 9px;
  background: transparent;
  border: 0;
}

.contact-tag-list-popover__add input::placeholder {
  color: #111;
  opacity: 1;
}

.contact-tag-list-popover__add button {
  display: grid;
  place-items: center;
  width: 18px;
  padding: 0 0 1px;
  color: #111;
  font-size: 15px;
  line-height: 1;
  background: var(--pale-lime);
  border: 0;
  border-left: 0.75px solid #a8aaa8;
}

.more-filters-popover,
.quick-filter-popover {
  position: fixed;
  z-index: 80;
  max-width: calc(100vw - 16px);
  padding: 0;
  overflow: hidden;
  color: #111;
  background: #fafafa;
  border: .75px solid #a8aaa8;
  border-radius: 7px;
  box-shadow: none;
}

.more-filters-popover {
  width: 200px;
}

.quick-filter-popover {
  width: 105px;
  background: #fff;
  border: .5px solid #000;
  border-radius: 6px;
}

.more-filters-popover[hidden],
.quick-filter-popover[hidden] {
  display: none;
}

.more-filters-popover__header,
.quick-filter-popover__header {
  display: flex;
  align-items: center;
  min-height: 29px;
  padding: 0 10px;
  background: #fafafa;
  border-bottom: .75px solid #474747;
}

.more-filters-popover__header h2,
.quick-filter-popover__header h2 {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.15;
}

.more-filters-popover__header {
  justify-content: space-between;
  gap: 8px;
  padding-right: 6px;
}

.more-filters-popover__advanced-trigger {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 24px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 4px;
}

.more-filters-popover__advanced-trigger:hover,
.more-filters-popover__advanced-trigger:focus-visible {
  background: var(--pale-lime);
}

.more-filters-popover__advanced-trigger:focus-visible {
  outline: 1px solid #111;
  outline-offset: -1px;
}

.more-filters-popover__advanced-icon {
  width: 22px;
  height: 17px;
}

.quick-filter-popover__header {
  min-height: 23px;
  padding: 0 7px;
  background: #dedede;
  border-bottom: .5px solid #000;
}

.quick-filter-popover__header h2 {
  min-width: 0;
  overflow: hidden;
  font-size: 10px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.more-filters-popover__body {
  display: grid;
  justify-items: start;
  gap: 7px;
  padding: 6px;
}

.more-filters-popover__body > button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  height: 18px;
  min-height: 0;
  padding: 0 8px;
  overflow: hidden;
  color: #111;
  font: inherit;
  font-size: 8px;
  text-align: left;
  white-space: nowrap;
  background: #e6e6e0;
  border: 0;
  border-radius: 10px;
}

.more-filters-popover__body > button:hover,
.more-filters-popover__body > button:focus-visible,
.quick-filter-popover__option:hover,
.quick-filter-popover__option:focus-within,
.quick-filter-popover__option.is-selected {
  background: var(--pale-lime);
}

.more-filters-popover__empty {
  margin: 2px 4px;
  color: var(--muted);
  font-size: 9px;
}

.quick-filter-popover__body {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 4px;
  min-height: 72px;
  padding: 5px;
}

.quick-filter-popover__operator-trigger,
.quick-filter-popover__value-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  color: #111;
  font: inherit;
  text-align: left;
}

.quick-filter-popover__operator-trigger {
  width: max-content;
  max-width: 100%;
  height: 18px;
  gap: 4px;
  padding: 0 2px;
  font-size: 10px;
  background: transparent;
  border: 0;
}

.quick-filter-popover__operator-trigger > span,
.quick-filter-popover__value-trigger > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-filter-popover__operator-caret {
  flex: 0 0 auto;
  width: 6px;
  height: 4px;
}

.quick-filter-popover__value-trigger {
  width: 100%;
  height: 21px;
  padding: 0 6px;
  font-size: 10px;
  background: #fff;
  border: .5px solid #000;
  border-radius: 6px;
}

.quick-filter-popover__value-caret {
  flex: 0 0 auto;
  width: 7px;
  height: 5px;
}

.quick-filter-popover__operator-trigger:focus-visible,
.quick-filter-popover__value-trigger:focus-visible,
.quick-filter-menu input:focus-visible,
.quick-filter-menu [role="option"]:focus-visible,
.advanced-filters-form input:not([type="checkbox"]):focus-visible,
.advanced-filters-form select:focus-visible {
  outline: none;
}

.quick-filter-popover__operator-trigger:focus-visible {
  background: var(--pale-lime);
  border-radius: 3px;
}

.quick-filter-popover__value-trigger:focus-visible,
.quick-filter-menu input:focus-visible {
  border-color: #000;
}

.quick-filter-popover__footer[hidden] {
  display: none;
}

.quick-filter-menu {
  position: fixed;
  z-index: 90;
  width: 134px;
  max-width: calc(100vw - 16px);
  padding: 0;
  /* Clip the shell without making it a second scroll container. Only the
     options viewport below owns scrolling. */
  overflow: clip;
  color: #111;
  background: #fff;
  border: .5px solid #000;
  border-radius: 6px;
  box-shadow: none;
}

.quick-filter-menu[hidden] {
  display: none;
}

.quick-filter-menu__search {
  position: relative;
  height: 21px;
  margin: 7px 10px 7px 7px;
  overflow: hidden;
  border: .5px solid #000;
  border-radius: 7px;
}

.quick-filter-menu__search input {
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 0 6px 0 21px;
  color: #111;
  font: inherit;
  font-size: 9px;
  background: #fff;
  border: 0;
  border-radius: 0;
}

.quick-filter-menu__search input::placeholder {
  color: #111;
  opacity: 1;
}

.quick-filter-menu__search input::-webkit-search-cancel-button {
  display: none;
}

.quick-filter-menu__search-icon {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 7px;
  width: 8px;
  height: 8px;
  pointer-events: none;
  transform: translateY(-50%);
}

.quick-filter-menu__options {
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  margin-top: 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  scrollbar-width: none;
}

.quick-filter-operator-menu .quick-filter-menu__options {
  height: 160px;
}

.quick-filter-value-menu .quick-filter-menu__options {
  height: auto;
  max-height: 147px;
}

.quick-filter-menu__options::-webkit-scrollbar {
  display: none;
}

.quick-filter-menu__scroll-frame {
  position: relative;
}

.quick-filter-menu__scrollbar {
  position: absolute;
  z-index: 2;
  top: 3px;
  right: 1px;
  bottom: 4px;
  width: 9px;
}

.quick-filter-menu__scrollbar .scrollbar-ui__handle {
  right: 2px;
  width: 3px;
  height: 28px;
}

.quick-filter-menu__options [data-scroll-spacer] {
  display: block;
  width: 1px;
  min-height: 0;
  pointer-events: none;
}

.quick-filter-menu__options:empty {
  display: none;
}

.quick-filter-menu__options > [role="option"] {
  min-height: 20px;
  padding: 2px 15px;
  color: #111;
  font: inherit;
  font-size: 10px;
  text-align: left;
  background: #fff;
  border: 0;
}

.quick-filter-menu__options > [role="option"]:last-child {
  border-bottom: 0;
}

.quick-filter-menu__options > [role="option"]:hover,
.quick-filter-menu__options > [role="option"]:focus-visible,
.quick-filter-menu__options > [role="option"][aria-selected="true"] {
  background: var(--pale-lime);
}

.quick-filter-popover__option {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 22px;
  padding: 3px 7px;
  font-size: 8.5px;
  border-bottom: .5px solid #dedede;
}

.quick-filter-popover__option:last-of-type {
  border-bottom: 0;
}

.quick-filter-popover__option input {
  width: 11px;
  height: 11px;
  margin: 0;
  accent-color: #a7c848;
}

.quick-filter-popover__empty {
  margin: 0;
  padding: 6px 7px;
  color: var(--muted);
  font-size: 8px;
}

.quick-filter-specific-date {
  display: grid;
  gap: 5px;
  padding: 7px;
}

.quick-filter-specific-date[hidden],
.quick-filter-specific-date__end[hidden] {
  display: none;
}

.quick-filter-specific-date label {
  color: #111;
  font-size: 9px;
  line-height: 1.15;
}

.quick-filter-specific-date input {
  width: 100%;
  min-width: 0;
  height: 24px;
  padding: 0 4px;
  color: #111;
  font: inherit;
  font-size: 9px;
  background: #fff;
  border: .5px solid #000;
  border-radius: 6px;
  outline: none;
}

.quick-filter-specific-date input:focus-visible {
  background: var(--pale-lime);
  box-shadow: inset 0 0 0 .5px #000;
}

.quick-filter-specific-date__end {
  display: grid;
  gap: 5px;
}

.quick-filter-specific-date__status {
  min-height: 0;
  margin: 0;
  color: #8a1c1c;
  font-size: 7.5px;
  line-height: 1.2;
}

.quick-filter-specific-date__status:empty {
  display: none;
}

.quick-filter-specific-date__actions {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
}

.quick-filter-specific-date__actions button {
  height: 21px;
  padding: 0 6px;
  color: #111;
  font: inherit;
  font-size: 8.5px;
  background: #fff;
  border: .5px solid #000;
  border-radius: 5px;
}

.quick-filter-specific-date__actions button:last-child {
  background: var(--pale-lime);
}

.advanced-filter-row__values {
  position: relative;
}

.advanced-filter-row__caret {
  position: absolute;
  top: 50%;
  right: 11px;
  width: 9px;
  height: 7px;
  pointer-events: none;
  transform: translateY(-50%);
}

.quick-filter-popover__footer {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 6px 8px 8px;
  border-top: .5px solid #ccc;
}

.quick-filter-popover__footer button {
  min-width: 51px;
  height: 25px;
  padding: 0 8px;
  color: #111;
  font: inherit;
  font-size: 9px;
  background: #fff;
  border: .75px solid #a8aaa8;
  border-radius: 5px;
}

.quick-filter-popover__footer button:last-child {
  background: var(--pale-lime);
}

.advanced-filters-dialog {
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  background: transparent;
  border: 0;
}

.advanced-filters-dialog::backdrop {
  background: transparent;
}

.advanced-filter-directory {
  position: absolute;
  top: 61px;
  right: 366px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: 278px;
  height: 262px;
  overflow: hidden;
  color: var(--ink);
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 5px;
  animation: advanced-filter-directory-enter 140ms cubic-bezier(.22, 1, .36, 1) both;
}

.advanced-filter-directory[hidden] {
  display: none;
}

@keyframes advanced-filter-directory-enter {
  from {
    opacity: 0;
    transform: translateX(6px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.advanced-filter-directory__header {
  display: flex;
  align-items: center;
  flex: 0 0 27px;
  min-height: 27px;
  padding: 0 13px;
  background: #fff;
  border-bottom: .5px solid #aaa;
}

.advanced-filter-directory__header h2 {
  margin: 0;
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.2;
}

.advanced-filter-directory__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding: 9px 7px 7px;
}

.advanced-filter-directory__search {
  display: grid;
  position: relative;
  grid-template-columns: 14px minmax(0, 1fr);
  align-items: center;
  flex: 0 0 22px;
  gap: 5px;
  height: 22px;
  margin: 0 0 9px;
  padding: 0 7px;
  overflow: hidden;
  background: #fff;
  border: .5px solid #111;
  border-radius: 7px;
}

.advanced-filter-directory__search-icon {
  width: 10px;
  height: 10px;
}

.advanced-filter-directory__search input {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  color: #111;
  font: inherit;
  font-size: 10px;
  background: transparent;
  border: 0;
  outline: 0;
}

.advanced-filter-directory__search:focus-within {
  border-color: #000;
  box-shadow: inset 0 0 0 .75px #000;
  outline: none;
}

.advanced-filter-directory__search input::placeholder {
  color: #222;
  opacity: 1;
}

.advanced-filter-directory__search input::-webkit-search-cancel-button {
  width: 10px;
  height: 10px;
}

.advanced-filter-directory__controls {
  display: flex;
  position: relative;
  z-index: 3;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 20px;
  gap: 12px;
  min-width: 0;
  margin: 0 5px 7px;
}

.advanced-filter-directory__control {
  display: grid;
  position: relative;
  grid-template-columns: 12px minmax(0, 1fr);
  align-items: center;
  gap: 3px;
  min-width: 0;
}

.advanced-filter-directory__control--sort {
  grid-template-columns: 16px minmax(0, 1fr);
  margin-left: auto;
}

.advanced-filter-directory__control-icon {
  width: 11px;
  max-height: 11px;
}

.advanced-filter-directory__control--sort .advanced-filter-directory__control-icon {
  width: 16px;
  height: 10px;
}

.advanced-filter-directory__control > select[hidden] {
  display: none;
}

.advanced-filter-directory__menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  width: 88px;
  height: 20px;
  min-width: 0;
  padding: 0 2px;
  overflow: hidden;
  color: #111;
  font: inherit;
  font-size: 10px;
  line-height: 1;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: transparent;
  border: 0;
  border-radius: 3px;
}

.advanced-filter-directory__control--sort .advanced-filter-directory__menu-trigger {
  width: 73px;
}

.advanced-filter-directory__menu-trigger > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.advanced-filter-directory__menu-caret {
  flex: 0 0 auto;
  width: 6px;
  height: 4px;
  transition: transform 120ms ease;
}

.advanced-filter-directory__menu-trigger:hover,
.advanced-filter-directory__menu-trigger[aria-expanded="true"] {
  background: var(--pale-lime);
  outline: none;
}

.advanced-filter-directory__menu-trigger:focus-visible {
  background: var(--pale-lime);
  outline: none;
}

.advanced-filter-directory__menu-trigger[aria-expanded="true"]
  .advanced-filter-directory__menu-caret {
  transform: rotate(180deg);
}

.advanced-filter-directory__menu {
  position: absolute;
  z-index: 5;
  top: calc(100% + 2px);
  left: 0;
  display: grid;
  grid-auto-rows: max-content;
  width: 225px;
  max-height: 190px;
  padding: 3px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: #111;
  background: #fff;
  border: .5px solid #000;
  border-radius: 6px;
  box-shadow: none;
  scrollbar-width: none;
}

.advanced-filter-directory__control--sort .advanced-filter-directory__menu {
  right: 0;
  left: auto;
  width: 80px;
}

.advanced-filter-directory__menu[hidden] {
  display: none;
}

.advanced-filter-directory__menu::-webkit-scrollbar {
  display: none;
}

.advanced-filter-directory__menu [role="option"] {
  width: 100%;
  min-height: 20px;
  padding: 2px 8px;
  overflow: hidden;
  color: #111;
  font: inherit;
  font-size: 10px;
  line-height: 1.2;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #fff;
  border: 0;
}

.advanced-filter-directory__menu [role="option"]:hover,
.advanced-filter-directory__menu [role="option"][aria-selected="true"] {
  background: var(--pale-lime);
  outline: none;
}

.advanced-filter-directory__menu [role="option"]:focus-visible {
  background: var(--pale-lime);
  outline: none;
}

.advanced-filter-directory__scroll-frame {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

.advanced-filter-directory__options {
  height: 100%;
  padding: 0 14px 6px 7px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.advanced-filter-directory__options::-webkit-scrollbar {
  display: none;
}

.advanced-filter-directory__group h3 {
  display: grid;
  grid-template-columns: 17.28px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.25;
}

.advanced-filter-directory__group + .advanced-filter-directory__group {
  margin-top: 8px;
}

.advanced-filter-directory__group-icon {
  width: 17.28px;
  height: 17.28px;
  object-fit: contain;
}

.advanced-filter-directory__group ul {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0 0 0 23.28px;
  list-style: none;
}

.advanced-filter-directory__group[hidden],
.advanced-filter-directory__group li[hidden],
.advanced-filter-directory__empty[hidden] {
  display: none;
}

.advanced-filter-directory__option-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  align-items: stretch;
  width: 100%;
  min-height: 20px;
  padding: 3px 2px;
  background: #fff;
  border-radius: 4px;
}

.advanced-filter-directory__option-row:hover,
.advanced-filter-directory__option-row:focus-within,
.advanced-filter-directory__option-row.is-info-open {
  background: var(--blue);
}

.advanced-filter-directory__option-button {
  display: grid;
  grid-template-columns: 17.28px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
  width: 100%;
  min-height: 0;
  padding: 0;
  color: #111;
  font: inherit;
  font-size: 10.5px;
  line-height: 1.25;
  text-align: left;
  background: inherit;
  border: 0;
}

.advanced-filter-directory__option-button > span {
  min-width: 0;
}

.advanced-filter-directory__info-trigger {
  display: grid;
  align-items: center;
  justify-items: end;
  align-self: stretch;
  width: 20px;
  min-height: 0;
  padding: 0;
  background: inherit;
  border: 0;
  visibility: hidden;
  opacity: 0;
}

.advanced-filter-directory__info-trigger:focus-visible {
  background: var(--pale-lime);
  border-radius: 3px;
}

.advanced-filter-directory__option-row:hover .advanced-filter-directory__info-trigger,
.advanced-filter-directory__option-row:focus-within .advanced-filter-directory__info-trigger,
.advanced-filter-directory__option-row.is-info-open .advanced-filter-directory__info-trigger {
  visibility: visible;
  opacity: 1;
}

.advanced-filter-directory :focus-visible {
  outline: none;
}

.advanced-filter-directory .scrollbar-ui:focus-visible .scrollbar-ui__handle {
  border-radius: 2px;
  outline: 1px solid #111;
  outline-offset: 1px;
}

.advanced-filter-directory__option-icon {
  justify-self: center;
  object-fit: contain;
}

.advanced-filter-directory__option-icon--bubble {
  width: 9px;
  height: 9px;
}

.advanced-filter-directory__option-icon--dropdown {
  width: 16px;
  height: 11px;
}

.advanced-filter-directory__option-icon--date {
  width: 14.4px;
  height: 14.4px;
}

.advanced-filter-directory__option-icon--text,
.advanced-filter-directory__option-icon--long-text,
.advanced-filter-directory__option-icon--address,
.advanced-filter-directory__option-icon--number,
.advanced-filter-directory__option-icon--currency,
.advanced-filter-directory__option-icon--multi-select {
  width: 16px;
  height: 11px;
}

.advanced-filter-directory__option-icon--checkbox {
  width: 10px;
  height: 9px;
}

.advanced-filter-directory__info-icon {
  width: 10.8px;
  height: 10.8px;
  object-fit: contain;
  pointer-events: none;
  transform: translateX(-5px);
}

.advanced-filter-directory__empty {
  margin: 18px 4px 0;
  color: var(--muted);
  font-size: 10px;
  text-align: center;
}

.advanced-filter-directory__options [data-scroll-spacer] {
  display: block;
  width: 1px;
  min-height: 0;
  pointer-events: none;
}

.advanced-filter-info-popover {
  position: fixed;
  z-index: 6;
  width: 235px;
  max-width: calc(100vw - 16px);
  max-height: calc(100dvh - 16px);
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: #111;
  font-size: 10px;
  background: #fafafa;
  border: .75px solid #a8aaa8;
  border-radius: 6px;
  box-shadow: none;
}

.advanced-filter-info-popover[hidden] {
  display: none;
}

.advanced-filter-info-popover:focus-visible {
  outline: none;
}

.advanced-filter-info-popover__header {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 23px;
  padding: 3px 8px;
  background: #fafafa;
  border-bottom: .5px solid #474747;
}

.advanced-filter-info-popover__heading-icon {
  flex: 0 0 auto;
  width: 17.28px;
  height: 17.28px;
  object-fit: contain;
}

.advanced-filter-info-popover__heading-icon--calendar {
  width: 14.4px;
  height: 14.4px;
}

.advanced-filter-info-popover__header h2 {
  min-width: 0;
  margin: 0;
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.2;
}

.advanced-filter-info-popover__definition {
  display: block;
  min-height: 47px;
  margin: 0;
  padding: 9px 8px 10px;
  font-size: 10px;
  line-height: 1.3;
  background: #fafafa;
  border-bottom: .5px solid #a8aaa8;
}

.advanced-filter-info-popover__definition strong {
  font-weight: 500;
}

.advanced-filter-info-popover__metadata,
.advanced-filter-info-popover__data-type,
.advanced-filter-info-popover__metrics {
  margin: 0;
}

.advanced-filter-info-popover__data-type {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 0 8px;
  border-bottom: .5px solid #a8aaa8;
}

.advanced-filter-info-popover__data-type dt,
.advanced-filter-info-popover__data-type dd,
.advanced-filter-info-popover__metrics dt,
.advanced-filter-info-popover__metrics dd {
  margin: 0;
}

.advanced-filter-info-popover__data-type dd,
.advanced-filter-info-popover__metrics > div {
  display: flex;
  align-items: center;
  gap: 5px;
}

.advanced-filter-info-popover__link {
  min-width: 0;
  padding: 0;
  color: #257da3;
  font: inherit;
  line-height: 1.2;
  text-decoration: underline;
  text-underline-offset: 1px;
  background: transparent;
  border: 0;
}

.advanced-filter-info-popover__link:hover {
  color: #155f82;
}

.advanced-filter-info-popover__link:focus-visible {
  outline: 1px solid #111;
  outline-offset: 1px;
}

.advanced-filter-info-popover__data-type-icon {
  flex: 0 0 auto;
  object-fit: contain;
}

.advanced-filter-info-popover[data-data-type-kind="bubble"]
  .advanced-filter-info-popover__data-type-icon {
  width: 9px;
  height: 9px;
}

.advanced-filter-info-popover[data-data-type-kind="dropdown"]
  .advanced-filter-info-popover__data-type-icon {
  width: 16px;
  height: 11px;
}

.advanced-filter-info-popover[data-data-type-kind="date"]
  .advanced-filter-info-popover__data-type-icon {
  width: 14.4px;
  height: 14.4px;
}

.advanced-filter-info-popover[data-data-type-kind="text"]
  .advanced-filter-info-popover__data-type-icon,
.advanced-filter-info-popover[data-data-type-kind="long-text"]
  .advanced-filter-info-popover__data-type-icon,
.advanced-filter-info-popover[data-data-type-kind="address"]
  .advanced-filter-info-popover__data-type-icon,
.advanced-filter-info-popover[data-data-type-kind="number"]
  .advanced-filter-info-popover__data-type-icon,
.advanced-filter-info-popover[data-data-type-kind="currency"]
  .advanced-filter-info-popover__data-type-icon,
.advanced-filter-info-popover[data-data-type-kind="multi-select"]
  .advanced-filter-info-popover__data-type-icon {
  width: 16px;
  height: 11px;
}

.advanced-filter-info-popover[data-data-type-kind="checkbox"]
  .advanced-filter-info-popover__data-type-icon {
  width: 10px;
  height: 9px;
}

.advanced-filter-info-popover__details {
  min-height: 103px;
  padding: 13px 8px 10px;
}

.advanced-filter-info-popover__metrics {
  display: grid;
  gap: 13px;
}

.advanced-filter-info-popover__manage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 24px;
  margin: 16px auto 0;
  padding: 0 8px;
  color: #111;
  font: inherit;
  font-size: 10px;
  background: #e4e4e4;
  border: 1px solid #b7b8b7;
  border-radius: 3px;
}

.advanced-filter-info-popover__manage:hover,
.advanced-filter-info-popover__manage:focus-visible {
  background: var(--blue);
}

.advanced-filter-info-popover__manage:focus-visible {
  outline: 1px solid #111;
  outline-offset: -1px;
}

.advanced-filter-info-popover__manage-icon {
  width: 15px;
  height: 15px;
}

.advanced-filter-info-explanation {
  position: fixed;
  z-index: 7;
  width: max-content;
  max-width: min(180px, calc(100vw - 16px));
  margin: 0;
  padding: 5px 7px;
  overflow-wrap: break-word;
  color: #111;
  font-size: 9.5px;
  line-height: 1.3;
  background: #fff;
  border: .75px solid #a8aaa8;
  border-radius: 6px;
  box-shadow: none;
  user-select: text;
}

.advanced-filter-info-explanation[hidden] {
  display: none;
}

.advanced-filter-info-explanation strong {
  font-weight: 600;
}

.advanced-filter-directory__options [data-scroll-spacer][hidden] {
  display: none;
}

.advanced-filter-directory__scrollbar {
  position: absolute;
  z-index: 2;
  top: 1px;
  right: 0;
  bottom: 4px;
  width: 9px;
}

.advanced-filter-directory__scrollbar .scrollbar-ui__handle {
  right: 2px;
  width: 3px;
  height: 35px;
}

.advanced-filters-drawer {
  position: absolute;
  top: 35px;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(358px, 100vw);
  overflow: hidden;
  background: #fff;
  border: .5px solid #ccc;
  animation: contact-create-drawer-enter 180ms cubic-bezier(.22, 1, .36, 1) both;
}

.advanced-filters-drawer__header {
  display: flex;
  align-items: center;
  flex: 0 0 37px;
  min-height: 37px;
  padding: 0 12px;
  background: #fff;
  border-bottom: .5px solid #ccc;
}

.advanced-filters-drawer__header h2 {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
}

.advanced-filters-form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  background: #fff;
}

.advanced-filters-empty {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 20px;
  min-height: 0;
  padding: 22px 14px;
  text-align: center;
  background: #fff;
}

.advanced-filters-empty > p {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.25;
}

.advanced-filters-empty__add {
  display: flex;
  gap: 0;
  height: 22px;
  padding: 0;
  color: var(--ink);
  font: inherit;
  font-size: 10px;
  background: transparent;
  border: 0;
}

.advanced-filters-empty__add-label,
.advanced-filters-empty__add-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: var(--pale-lime);
  border: 1px solid #aeb49d;
}

.advanced-filters-empty__add-label {
  min-width: 80px;
  padding: 2px 8px;
  border-radius: 3px 0 0 3px;
}

.advanced-filters-empty__add-icon {
  width: 24px;
  border-left: 0;
  border-radius: 0 3px 3px 0;
}

.advanced-filters-empty__add-icon .icon {
  width: 8px;
  height: 8px;
}

.advanced-filters-empty__add:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.advanced-filters-empty[hidden],
.advanced-filters-form__fields[hidden],
.advanced-filters-form__footer[hidden] {
  display: none;
}

.advanced-filters-form__fields {
  flex: 1 1 auto;
  min-height: 0;
  padding: 12px 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
}

.advanced-filters-form__hint {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 10px;
}

.advanced-filter-rows {
  display: grid;
  gap: 8px;
}

.advanced-filter-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 7px;
  margin: 0;
  padding: 10px;
  background: #fff;
  border: .75px solid #ccc;
  border-radius: 7px;
}

.advanced-filter-row.is-enabled {
  border-color: #879849;
  background: #fdfff5;
}

.advanced-filter-row__enabled {
  display: flex;
  align-items: center;
  grid-column: 1 / -1;
  gap: 7px;
  min-height: 20px;
  font-size: 11px;
  font-weight: 500;
}

.advanced-filter-row__enabled input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: #a7c848;
}

.advanced-filter-row__operator select,
.advanced-filter-row__values input {
  width: 100%;
  height: 32px;
  padding: 0 8px;
  color: #111;
  font: inherit;
  font-size: 10px;
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 5px;
}

.advanced-filter-row__operator select {
  padding-right: 25px;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("../general, reusable UI assets for pragtical/drop-down arrow.svg");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 7px 5px;
}

.advanced-filter-row__values input {
  padding-right: 26px;
}

.advanced-filter-row select:disabled,
.advanced-filter-row input:disabled {
  color: #777;
  background: #efefef;
}

/* Dynamic Advanced Filters builder. The legacy checkbox rows above remain as a
   harmless fallback while the live builder renders condition instances with
   independent ids, menus, and group logic. */
.advanced-filter-groups,
[data-advanced-filter-groups] {
  display: grid;
  align-content: start;
  gap: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.advanced-filter-group,
[data-advanced-filter-group] {
  --advanced-filter-connector: #8c908d;
  position: relative;
  min-width: 0;
  background: #fff;
  border: .75px solid #a8aaa8;
  border-radius: 7px;
}

.advanced-filter-group[hidden],
[data-advanced-filter-group][hidden] {
  display: none;
}

.advanced-filter-group.is-invalid,
[data-advanced-filter-group][aria-invalid="true"] {
  border-color: #a83232;
}

.advanced-filter-group__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 35px;
  padding: 5px 7px 5px 9px;
  background: var(--blue);
  border-bottom: .5px solid #a8aaa8;
  border-radius: 6px 6px 0 0;
}

.advanced-filter-group[data-collapsed="true"] .advanced-filter-group__header,
.advanced-filter-group:has(.advanced-filter-group__toggle[aria-expanded="false"])
  .advanced-filter-group__header,
[data-advanced-filter-group]:has([data-advanced-filter-group-toggle][aria-expanded="false"])
  .advanced-filter-group__header {
  border-bottom-color: transparent;
  border-radius: 6px;
}

.advanced-filter-group__heading,
.advanced-filter-group__title-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.advanced-filter-group__title,
.advanced-filter-group__header h3,
[data-advanced-filter-group-title] {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.advanced-filter-group__toggle,
[data-advanced-filter-group-toggle] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 23px;
  padding: 2px 3px;
  color: #111;
  font: inherit;
  font-size: 10.5px;
  font-weight: 600;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 4px;
}

.advanced-filter-group__toggle > span,
[data-advanced-filter-group-toggle] > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.advanced-filter-group__caret,
[data-advanced-filter-group-toggle] .advanced-filter-group__caret {
  flex: 0 0 auto;
  width: 6px;
  height: 4px;
  transition: transform 120ms ease;
}

.advanced-filter-group__toggle[aria-expanded="true"] .advanced-filter-group__caret,
[data-advanced-filter-group-toggle][aria-expanded="true"] .advanced-filter-group__caret {
  transform: rotate(180deg);
}

.advanced-filter-group__header-tools,
.advanced-filter-group__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  min-width: 0;
}

.advanced-filter-group__logic,
.advanced-filter-groups__logic,
[data-advanced-filter-group-logic] {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  height: 29px;
  padding: 0;
  color: #414642;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.advanced-filter-group__logic::before,
.advanced-filter-groups__logic::before,
[data-advanced-filter-group-logic]::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 17px;
  width: 1px;
  background: var(--advanced-filter-connector, #8c908d);
  pointer-events: none;
}

.advanced-filter-group__logic > span,
.advanced-filter-groups__logic > span,
[data-advanced-filter-group-logic] > span {
  position: absolute;
  z-index: 1;
  left: 4px;
  display: grid;
  place-items: center;
  min-width: 27px;
  height: 17px;
  padding: 0 4px;
  font-size: 7.5px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  background: #fff;
  border: .5px solid var(--advanced-filter-connector, #8c908d);
  border-radius: 9px;
}

.advanced-filter-group__action,
[data-advanced-filter-group-duplicate],
[data-advanced-filter-group-delete] {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 23px;
  height: 23px;
  padding: 0;
  color: #111;
  background: transparent;
  border: 0;
  border-radius: 4px;
}

.advanced-filter-group__action:hover,
.advanced-filter-group__action:focus-visible,
[data-advanced-filter-group-duplicate]:hover,
[data-advanced-filter-group-duplicate]:focus-visible,
[data-advanced-filter-group-delete]:hover,
[data-advanced-filter-group-delete]:focus-visible {
  background: var(--pale-lime);
}

.advanced-filter-group__action:focus-visible,
[data-advanced-filter-group-duplicate]:focus-visible,
[data-advanced-filter-group-delete]:focus-visible {
  outline: 1px solid #111;
  outline-offset: -1px;
}

.advanced-filter-group__action .icon,
[data-advanced-filter-group-duplicate] .icon,
[data-advanced-filter-group-delete] .icon {
  width: 12px;
  max-height: 14px;
  object-fit: contain;
}

.advanced-filter-group__action-icon {
  width: 12px;
  max-height: 14px;
  object-fit: contain;
}

.advanced-filter-group__action--delete .icon,
[data-advanced-filter-group-delete] .icon {
  width: 13px;
  height: 13px;
}

.advanced-filter-group__body {
  min-width: 0;
  padding: 10px 9px 11px;
  background: #fff;
  border-radius: 0 0 6px 6px;
}

.advanced-filter-group__body[hidden],
.advanced-filter-group[data-collapsed="true"] .advanced-filter-group__body {
  display: none;
}

.advanced-filter-group__conditions {
  position: relative;
  display: grid;
  gap: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.advanced-filter-group__conditions::before {
  display: none;
}

.advanced-filter-group__conditions:has(> .advanced-filter-condition:only-child)::before,
.advanced-filter-group__conditions:has(> [data-advanced-filter-condition]:only-child)::before {
  display: none;
}

.advanced-filter-condition,
[data-advanced-filter-condition] {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  min-width: 0;
  min-inline-size: 0;
  margin: 0;
  padding: 8px;
  background: #fafafa;
  border: .75px solid #b8bbb8;
  border-radius: 6px;
}

.advanced-filter-condition::before,
[data-advanced-filter-condition]::before {
  display: none;
}

.advanced-filter-group__conditions:has(> .advanced-filter-condition:only-child)
  > .advanced-filter-condition::before,
.advanced-filter-group__conditions:has(> [data-advanced-filter-condition]:only-child)
  > [data-advanced-filter-condition]::before {
  display: none;
}

.advanced-filter-condition[hidden],
[data-advanced-filter-condition][hidden] {
  display: none;
}

.advanced-filter-condition.is-invalid,
[data-advanced-filter-condition][aria-invalid="true"],
.advanced-filter-condition:has([aria-invalid="true"]),
[data-advanced-filter-condition]:has([aria-invalid="true"]) {
  background: #fffafa;
  border-color: #a83232;
}

.advanced-filter-condition[data-availability="planned"],
[data-advanced-filter-condition][data-planned="true"] {
  background: #f5f5f2;
  border-style: dashed;
}

.advanced-filter-condition__heading,
.advanced-filter-condition__summary {
  display: flex;
  align-items: center;
  grid-column: 1;
  gap: 5px;
  min-width: 0;
  min-height: 18px;
  font-size: 10px;
  font-weight: 600;
}

.advanced-filter-condition__heading .icon,
.advanced-filter-condition__summary .icon {
  width: 14px;
  max-height: 14px;
  object-fit: contain;
}

.advanced-filter-condition__delete,
[data-advanced-filter-delete],
[data-advanced-filter-condition-delete] {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 23px;
  height: 23px;
  margin: 0;
  padding: 0;
  color: #111;
  background: transparent;
  border: 0;
  border-radius: 4px;
}

.advanced-filter-condition__delete:hover,
.advanced-filter-condition__delete:focus-visible,
[data-advanced-filter-delete]:hover,
[data-advanced-filter-delete]:focus-visible,
[data-advanced-filter-condition-delete]:hover,
[data-advanced-filter-condition-delete]:focus-visible {
  background: #f6dfdf;
}

.advanced-filter-condition__delete:focus-visible,
[data-advanced-filter-delete]:focus-visible,
[data-advanced-filter-condition-delete]:focus-visible {
  outline: 1px solid #111;
  outline-offset: -1px;
}

.advanced-filter-condition__delete .icon,
[data-advanced-filter-delete] .icon,
[data-advanced-filter-condition-delete] .icon,
.advanced-filter-condition__delete-icon {
  width: 12px;
  height: 12px;
}

.advanced-filter-condition__controls {
  display: grid;
  grid-column: 1 / -1;
  gap: 6px;
  min-width: 0;
}

.advanced-filter-condition__criteria {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 23px;
  align-items: start;
  gap: 6px;
  min-width: 0;
}

.advanced-filter-condition__criteria > .advanced-filter-condition__operator-trigger {
  grid-column: 1;
  grid-row: 1;
  width: min(112px, 100%);
}

.advanced-filter-condition__criteria > .advanced-filter-condition__delete {
  grid-column: 2;
  grid-row: 1;
}

.advanced-filter-condition__criteria > .advanced-filter-condition__value-picker,
.advanced-filter-condition__criteria > .advanced-filter-condition__value-input-wrap,
.advanced-filter-condition__criteria > .advanced-filter-condition__value-not-required {
  grid-column: 1 / -1;
  grid-row: 2;
}

.advanced-filter-condition__field,
.advanced-filter-condition__operator,
.advanced-filter-condition__value {
  position: relative;
  min-width: 0;
}

.advanced-filter-condition__field-toggle,
.advanced-filter-condition__operator-toggle,
.advanced-filter-condition__value-toggle,
.advanced-filter-condition__field-trigger,
.advanced-filter-condition__operator-trigger,
.advanced-filter-condition__value-trigger,
[data-advanced-filter-field-toggle],
[data-advanced-filter-operator-toggle],
[data-advanced-filter-value-toggle],
[data-advanced-filter-condition-field],
[data-advanced-filter-condition-operator-toggle],
[data-advanced-filter-condition-value-toggle] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 10px;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-width: 0;
  min-height: 29px;
  padding: 4px 8px;
  overflow: hidden;
  color: #111;
  font: inherit;
  font-size: 10px;
  line-height: 1.2;
  text-align: left;
  background: #fff;
  border: .5px solid #8f928f;
  border-radius: 5px;
}

.advanced-filter-condition__field-toggle,
.advanced-filter-condition__field-trigger,
[data-advanced-filter-field-toggle],
[data-advanced-filter-condition-field] {
  grid-template-columns: 17px minmax(0, 1fr) auto 10px;
  background: #f8fcff;
}

.advanced-filter-condition__field-trigger > .advanced-filter-condition__control-caret {
  grid-column: 4;
  grid-row: 1;
}

[data-advanced-filter-condition-field] > .advanced-filter-condition__control-caret {
  grid-column: 4;
  grid-row: 1;
}

.advanced-filter-condition__operator-trigger > .advanced-filter-condition__control-caret {
  grid-column: 2;
  grid-row: 1;
}

[data-advanced-filter-condition-operator-toggle] > .advanced-filter-condition__control-caret {
  grid-column: 2;
  grid-row: 1;
}

.advanced-filter-condition__field-toggle > span,
.advanced-filter-condition__operator-toggle > span,
.advanced-filter-condition__value-toggle > span,
.advanced-filter-condition__field-trigger > span,
.advanced-filter-condition__operator-trigger > span,
.advanced-filter-condition__value-trigger > span,
[data-advanced-filter-field-toggle] > span,
[data-advanced-filter-operator-toggle] > span,
[data-advanced-filter-value-toggle] > span,
[data-advanced-filter-condition-field] > span,
[data-advanced-filter-condition-operator-toggle] > span,
[data-advanced-filter-condition-value-toggle] > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.advanced-filter-condition__field-toggle > .icon:first-child,
[data-advanced-filter-field-toggle] > .icon:first-child,
.advanced-filter-condition__field-icon,
[data-advanced-filter-condition-field] > .icon:first-child {
  justify-self: center;
  width: 14px;
  max-height: 14px;
  object-fit: contain;
}

.advanced-filter-condition__caret,
.advanced-filter-control__caret,
.advanced-filter-condition__control-caret,
[data-advanced-filter-field-toggle] > .icon:last-child,
[data-advanced-filter-operator-toggle] > .icon:last-child,
[data-advanced-filter-value-toggle] > .icon:last-child,
[data-advanced-filter-condition-field] > .icon:last-child,
[data-advanced-filter-condition-operator-toggle] > .icon:last-child,
[data-advanced-filter-condition-value-toggle] > .icon:last-child {
  justify-self: end;
  width: 6px;
  height: 4px;
  transition: transform 120ms ease;
}

[data-advanced-filter-field-toggle][aria-expanded="true"]
  .advanced-filter-condition__caret,
[data-advanced-filter-operator-toggle][aria-expanded="true"]
  .advanced-filter-condition__caret,
[data-advanced-filter-value-toggle][aria-expanded="true"]
  .advanced-filter-condition__caret,
[data-advanced-filter-condition-field][aria-expanded="true"]
  .advanced-filter-condition__control-caret,
[data-advanced-filter-condition-operator-toggle][aria-expanded="true"]
  .advanced-filter-condition__control-caret,
[data-advanced-filter-condition-value-toggle][aria-expanded="true"]
  .advanced-filter-condition__control-caret,
[data-advanced-filter-field-toggle][aria-expanded="true"] > .icon:last-child,
[data-advanced-filter-operator-toggle][aria-expanded="true"] > .icon:last-child,
[data-advanced-filter-value-toggle][aria-expanded="true"] > .icon:last-child,
[data-advanced-filter-condition-field][aria-expanded="true"] > .icon:last-child,
[data-advanced-filter-condition-operator-toggle][aria-expanded="true"] > .icon:last-child,
[data-advanced-filter-condition-value-toggle][aria-expanded="true"] > .icon:last-child {
  transform: rotate(180deg);
}

.advanced-filter-condition__field-toggle:hover,
.advanced-filter-condition__operator-toggle:hover,
.advanced-filter-condition__value-toggle:hover,
.advanced-filter-condition__field-trigger:hover,
.advanced-filter-condition__operator-trigger:hover,
.advanced-filter-condition__value-trigger:hover,
[data-advanced-filter-field-toggle]:hover,
[data-advanced-filter-operator-toggle]:hover,
[data-advanced-filter-value-toggle]:hover,
[data-advanced-filter-condition-field]:hover,
[data-advanced-filter-condition-operator-toggle]:hover,
[data-advanced-filter-condition-value-toggle]:hover,
[data-advanced-filter-field-toggle][aria-expanded="true"],
[data-advanced-filter-operator-toggle][aria-expanded="true"],
[data-advanced-filter-value-toggle][aria-expanded="true"],
[data-advanced-filter-condition-field][aria-expanded="true"],
[data-advanced-filter-condition-operator-toggle][aria-expanded="true"],
[data-advanced-filter-condition-value-toggle][aria-expanded="true"] {
  background: var(--pale-lime);
  border-color: #757875;
}

.advanced-filter-condition__field-toggle:focus-visible,
.advanced-filter-condition__operator-toggle:focus-visible,
.advanced-filter-condition__value-toggle:focus-visible,
.advanced-filter-condition__field-trigger:focus-visible,
.advanced-filter-condition__operator-trigger:focus-visible,
.advanced-filter-condition__value-trigger:focus-visible,
[data-advanced-filter-field-toggle]:focus-visible,
[data-advanced-filter-operator-toggle]:focus-visible,
[data-advanced-filter-value-toggle]:focus-visible,
[data-advanced-filter-condition-field]:focus-visible,
[data-advanced-filter-condition-operator-toggle]:focus-visible,
[data-advanced-filter-condition-value-toggle]:focus-visible {
  outline: 1px solid #111;
  outline-offset: 1px;
}

.advanced-filter-condition__field-toggle:disabled,
.advanced-filter-condition__operator-toggle:disabled,
.advanced-filter-condition__value-toggle:disabled,
.advanced-filter-condition__field-trigger:disabled,
.advanced-filter-condition__operator-trigger:disabled,
.advanced-filter-condition__value-trigger:disabled,
[data-advanced-filter-field-toggle]:disabled,
[data-advanced-filter-operator-toggle]:disabled,
[data-advanced-filter-value-toggle]:disabled,
[data-advanced-filter-condition-field]:disabled,
[data-advanced-filter-condition-operator-toggle]:disabled,
[data-advanced-filter-condition-value-toggle]:disabled {
  color: #777;
  cursor: not-allowed;
  background: #efefec;
  border-color: #c5c7c5;
}

.advanced-filter-condition [aria-invalid="true"] {
  border-color: #a83232;
}

.advanced-filter-condition[data-criteria-disabled="true"]
  .advanced-filter-condition__criteria > :not(.advanced-filter-condition__delete) {
  opacity: .72;
}

.advanced-filter-condition__value-input-wrap {
  display: block;
  min-width: 0;
}

.advanced-filter-condition__value-input-wrap input,
.advanced-filter-condition__value-input-wrap textarea,
[data-advanced-filter-condition-value-input] {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 29px;
  margin: 0;
  padding: 5px 8px;
  color: #111;
  font: inherit;
  font-size: 10px;
  line-height: 1.25;
  background: #fff;
  border: .5px solid #8f928f;
  border-radius: 5px;
}

.advanced-filter-condition__value-input-wrap textarea {
  min-height: 52px;
  resize: vertical;
}

.advanced-filter-condition__value-input-wrap input::placeholder,
.advanced-filter-condition__value-input-wrap textarea::placeholder {
  color: #686d69;
  opacity: 1;
}

.advanced-filter-condition__value-input-wrap input:focus-visible,
.advanced-filter-condition__value-input-wrap textarea:focus-visible,
[data-advanced-filter-condition-value-input]:focus-visible {
  outline: 1px solid #111;
  outline-offset: 1px;
}

.advanced-filter-condition__value-not-required {
  display: flex;
  align-items: center;
  min-height: 29px;
  padding: 4px 8px;
  color: #626763;
  font-size: 9px;
  font-style: italic;
  background: #f1f2ef;
  border: .5px dashed #b9bcb9;
  border-radius: 5px;
}

.advanced-filter-condition__value-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 25px;
  align-items: stretch;
  min-width: 0;
  min-height: 29px;
  overflow: hidden;
  background: #fff;
  border: .5px solid #8f928f;
  border-radius: 5px;
}

.advanced-filter-condition__value-picker[aria-invalid="true"] {
  border-color: #a83232;
}

.advanced-filter-condition__value-placeholder {
  align-self: center;
  min-width: 0;
  padding: 4px 7px;
  overflow: hidden;
  color: #686d69;
  font-size: 9.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.advanced-filter-condition__value-picker > .advanced-filter-condition__value-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: 2;
  gap: 0;
  width: 25px;
  min-width: 25px;
  min-height: 28px;
  padding: 0;
  background: #fff;
  border: 0;
  border-left: .5px solid #b7bab7;
  border-radius: 0;
}

.advanced-filter-condition__value-picker > .advanced-filter-condition__value-trigger:hover,
.advanced-filter-condition__value-picker > .advanced-filter-condition__value-trigger:focus-visible,
.advanced-filter-condition__value-picker > .advanced-filter-condition__value-trigger[aria-expanded="true"] {
  background: var(--pale-lime);
}

.advanced-filter-condition__value-picker > .advanced-filter-condition__value-trigger:focus-visible {
  outline: 1px solid #111;
  outline-offset: -1px;
}

.advanced-filter-condition__value-picker > .advanced-filter-condition__value-trigger .icon {
  justify-self: center;
}

.advanced-filter-condition__chips,
.advanced-filter-condition__value-chips,
.advanced-filter-value-chips,
[data-advanced-filter-value-chips],
[data-advanced-filter-condition-value-chips] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.advanced-filter-condition__value-picker > .advanced-filter-condition__value-chips {
  grid-column: 1;
  align-self: center;
  padding: 3px 5px;
  overflow: hidden;
}

.advanced-filter-value-chip,
.advanced-filter-condition__value-chip,
[data-advanced-filter-value-chip],
[data-advanced-filter-condition-value-chip] {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: 100%;
  min-height: 20px;
  padding: 2px 3px 2px 7px;
  color: #111;
  font-size: 9px;
  line-height: 1.15;
  background: var(--pale-lime);
  border: .5px solid #b1b696;
  border-radius: 10px;
}

.advanced-filter-value-chip > span,
.advanced-filter-condition__value-chip > span,
[data-advanced-filter-value-chip] > span,
[data-advanced-filter-condition-value-chip] > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.advanced-filter-value-chip__remove,
.advanced-filter-condition__value-remove,
[data-advanced-filter-value-remove],
[data-advanced-filter-condition-value-remove] {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  padding: 0;
  color: #111;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  background: transparent;
  border: 0;
  border-radius: 50%;
}

.advanced-filter-value-chip__remove:hover,
.advanced-filter-value-chip__remove:focus-visible,
.advanced-filter-condition__value-remove:hover,
.advanced-filter-condition__value-remove:focus-visible,
[data-advanced-filter-value-remove]:hover,
[data-advanced-filter-value-remove]:focus-visible,
[data-advanced-filter-condition-value-remove]:hover,
[data-advanced-filter-condition-value-remove]:focus-visible {
  background: rgba(17, 17, 17, .12);
  outline: none;
}

.advanced-filter-condition__message,
.advanced-filter-condition__validation,
.advanced-filter-validation,
[data-advanced-filter-condition-validation],
[data-advanced-filter-validation],
[data-advanced-filter-message] {
  grid-column: 1 / -1;
  min-height: 0;
  margin: 0;
  color: #8a1c1c;
  font-size: 8.5px;
  line-height: 1.3;
}

.advanced-filter-condition__message:empty,
.advanced-filter-condition__validation:empty,
.advanced-filter-validation:empty,
[data-advanced-filter-condition-validation]:empty,
[data-advanced-filter-validation]:empty,
[data-advanced-filter-message]:empty {
  display: none;
}

.advanced-filter-condition__planned,
.advanced-filter-planned-message,
[data-advanced-filter-planned] {
  grid-column: 1 / -1;
  margin: 0;
  padding: 5px 7px;
  color: #4f5552;
  font-size: 8.5px;
  line-height: 1.3;
  background: #f0f3ed;
  border-left: 2px solid #8ca0ad;
  border-radius: 0 4px 4px 0;
}

/* In the live renderer this marker is a compact badge inside the field picker. */
.advanced-filter-condition__field-trigger .advanced-filter-condition__planned,
[data-advanced-filter-condition-field] .advanced-filter-condition__planned {
  display: inline-flex;
  align-items: center;
  grid-column: auto;
  min-height: 15px;
  margin: 0;
  padding: 1px 5px;
  color: #59605b;
  font-size: 7.5px;
  font-weight: 600;
  font-style: normal;
  line-height: 1;
  white-space: nowrap;
  background: #edf0ea;
  border: .5px solid #c4c8c1;
  border-radius: 8px;
}

.advanced-filter-condition__join,
.advanced-filter-connector__label,
[data-advanced-filter-condition-logic],
[data-advanced-filter-connector-label] {
  position: absolute;
  z-index: 1;
  top: -17px;
  left: -26px;
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 16px;
  padding: 0 4px;
  color: #444946;
  font-size: 7.5px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  background: #fff;
  border: .5px solid var(--advanced-filter-connector);
  border-radius: 8px;
}

.advanced-filter-group__join,
.advanced-filter-groups__join,
[data-advanced-filter-group-join] {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: -22px;
  display: grid;
  place-items: center;
  min-width: 31px;
  height: 18px;
  padding: 0 5px;
  color: #414642;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  background: var(--blue);
  border: .5px solid var(--advanced-filter-connector);
  border-radius: 9px;
}

.advanced-filter-group:not(:last-child)::after,
[data-advanced-filter-group]:not(:last-child)::after {
  display: none;
}

.advanced-filter-group__add-connector,
.advanced-filter-groups__add-connector {
  position: relative;
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  min-height: 39px;
}

.advanced-filter-group__add-connector::before,
.advanced-filter-groups__add-connector::before {
  content: "";
  position: absolute;
  top: 0;
  left: 17px;
  width: 1px;
  height: 50%;
  background: var(--advanced-filter-connector, #8c908d);
  pointer-events: none;
}

.advanced-filter-group__logic-label,
.advanced-filter-groups__logic-label {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  grid-column: 1;
  justify-self: start;
  min-width: 27px;
  height: 17px;
  margin-left: 4px;
  padding: 0 4px;
  color: #414642;
  font-size: 7.5px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  background: #fff;
  border: .5px solid var(--advanced-filter-connector, #8c908d);
  border-radius: 9px;
}

.advanced-filter-group__add-connector > button,
.advanced-filter-groups__add-connector > button {
  grid-column: 2;
  justify-self: start;
}

.advanced-filter-group__add,
.advanced-filter-builder__actions,
.advanced-filter-builder-actions,
[data-advanced-filter-builder-actions] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
  margin-top: 10px;
}

.advanced-filter-add-button,
.advanced-filter-group__add-filter,
.advanced-filter-builder__add-group,
[data-advanced-filter-add-condition],
[data-advanced-filter-add-group] {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 25px;
  align-items: stretch;
  min-width: 0;
  min-height: 24px;
  padding: 0;
  overflow: hidden;
  color: #111;
  font: inherit;
  font-size: 9px;
  line-height: 1.15;
  background: var(--pale-lime);
  border: .75px solid #aeb49d;
  border-radius: 5px;
}

.advanced-filter-group__add-filter,
[data-advanced-filter-add-condition] {
  width: min(151px, 100%);
}

.advanced-filter-builder__add-group,
[data-advanced-filter-add-group] {
  width: min(137px, 100%);
  background: #f5fbff;
  border-color: #aabdc9;
}

.advanced-filter-add-button::after,
.advanced-filter-group__add-filter::after,
.advanced-filter-builder__add-group::after,
[data-advanced-filter-add-condition]::after,
[data-advanced-filter-add-group]::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 24px;
  width: .75px;
  background: currentcolor;
  opacity: .23;
  pointer-events: none;
}

.advanced-filter-add-button > span,
.advanced-filter-group__add-filter > span,
.advanced-filter-builder__add-group > span,
[data-advanced-filter-add-condition] > span,
[data-advanced-filter-add-group] > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 3px 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.advanced-filter-add-button > .icon,
.advanced-filter-group__add-filter > .icon,
.advanced-filter-builder__add-group > .icon,
[data-advanced-filter-add-condition] > .icon,
[data-advanced-filter-add-group] > .icon,
.advanced-filter-add-button__icon,
.advanced-filter-group__add-icon,
.advanced-filter-groups__add-icon {
  align-self: center;
  justify-self: center;
  width: 9px;
  height: 9px;
}

.advanced-filter-add-button:hover,
.advanced-filter-add-button:focus-visible,
.advanced-filter-group__add-filter:hover,
.advanced-filter-group__add-filter:focus-visible,
.advanced-filter-builder__add-group:hover,
.advanced-filter-builder__add-group:focus-visible,
[data-advanced-filter-add-condition]:hover,
[data-advanced-filter-add-condition]:focus-visible,
[data-advanced-filter-add-group]:hover,
[data-advanced-filter-add-group]:focus-visible {
  background: var(--lime);
  border-color: #83886f;
}

.advanced-filter-builder-menu,
.advanced-filter-custom-menu,
[data-advanced-filter-builder-menu] {
  position: fixed;
  z-index: 96;
  width: min(var(--advanced-filter-menu-width, 224px), calc(100vw - 16px));
  max-width: calc(100vw - 16px);
  max-height: min(var(--advanced-filter-menu-max-height, 260px), calc(100dvh - 16px));
  padding: 0;
  overflow: clip;
  color: #111;
  background: #fff;
  border: .75px solid #8f928f;
  border-radius: 6px;
  box-shadow: 0 5px 16px rgba(27, 31, 29, .14);
}

.advanced-filter-builder-menu[hidden],
.advanced-filter-custom-menu[hidden],
[data-advanced-filter-builder-menu][hidden] {
  display: none;
}

.advanced-filter-builder-menu__search,
.advanced-filter-custom-menu__search,
[data-advanced-filter-builder-menu] [role="search"] {
  position: relative;
  display: block;
  height: 28px;
  margin: 7px;
  padding: 0;
  border: .5px solid #111;
  border-radius: 6px;
}

.advanced-filter-builder-menu__search-icon,
.advanced-filter-custom-menu__search .icon,
[data-advanced-filter-builder-menu] [role="search"] .icon {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 7px;
  width: 10px;
  height: 10px;
  pointer-events: none;
  transform: translateY(-50%);
}

.advanced-filter-builder-menu__search input,
.advanced-filter-custom-menu__search input,
[data-advanced-filter-builder-menu] [role="search"] input {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0 7px 0 24px;
  appearance: none;
  -webkit-appearance: none;
  color: #111;
  font: inherit;
  font-size: 9.5px;
  background: transparent;
  border: 0;
  outline: 0;
}

.advanced-filter-builder-menu__search input::-webkit-search-decoration,
.advanced-filter-builder-menu__search input::-webkit-search-cancel-button,
.advanced-filter-custom-menu__search input::-webkit-search-decoration,
.advanced-filter-custom-menu__search input::-webkit-search-cancel-button,
[data-advanced-filter-builder-menu] [role="search"] input::-webkit-search-decoration,
[data-advanced-filter-builder-menu] [role="search"] input::-webkit-search-cancel-button {
  display: none;
}

.advanced-filter-builder-menu__options,
.advanced-filter-custom-menu__options,
[data-advanced-filter-builder-menu-options] {
  display: grid;
  grid-auto-rows: max-content;
  max-height: min(214px, calc(100dvh - 58px));
  margin: 0;
  padding: 3px 0 5px;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  scrollbar-width: none;
}

.advanced-filter-builder-menu__scroll-frame,
.advanced-filter-custom-menu__scroll-frame {
  position: relative;
  min-height: 0;
  max-height: min(214px, calc(100dvh - 58px));
  overflow: hidden;
}

.advanced-filter-builder-menu__scrollbar,
.advanced-filter-custom-menu__scrollbar {
  top: 3px;
  right: 1px;
  bottom: 4px;
}

.advanced-filter-builder-menu__options::-webkit-scrollbar,
.advanced-filter-custom-menu__options::-webkit-scrollbar,
[data-advanced-filter-builder-menu-options]::-webkit-scrollbar {
  display: none;
}

.advanced-filter-builder-menu [role="option"],
.advanced-filter-custom-menu [role="option"],
[data-advanced-filter-builder-menu] [role="option"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: 25px;
  padding: 4px 9px;
  overflow: hidden;
  color: #111;
  font: inherit;
  font-size: 9.5px;
  line-height: 1.2;
  text-align: left;
  background: #fff;
  border: 0;
}

.advanced-filter-builder-menu [role="option"] > span,
.advanced-filter-custom-menu [role="option"] > span,
[data-advanced-filter-builder-menu] [role="option"] > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.advanced-filter-builder-menu [role="option"] .icon,
.advanced-filter-custom-menu [role="option"] .icon,
[data-advanced-filter-builder-menu] [role="option"] .icon {
  flex: 0 0 auto;
  width: 11px;
  max-height: 12px;
  object-fit: contain;
}

.advanced-filter-builder-menu [role="option"] small,
.advanced-filter-custom-menu [role="option"] small,
[data-advanced-filter-builder-menu] [role="option"] small {
  color: #666b67;
  font-size: 8px;
  white-space: nowrap;
}

.advanced-filter-builder-menu__selection {
  display: grid;
  place-items: center;
  width: 14px;
  min-height: 14px;
  color: #536900;
  font-size: 10px;
  font-weight: 700;
}

.advanced-filter-builder-menu [role="option"]:hover,
.advanced-filter-builder-menu [role="option"]:focus-visible,
.advanced-filter-builder-menu [role="option"][aria-selected="true"],
.advanced-filter-custom-menu [role="option"]:hover,
.advanced-filter-custom-menu [role="option"]:focus-visible,
.advanced-filter-custom-menu [role="option"][aria-selected="true"],
[data-advanced-filter-builder-menu] [role="option"]:hover,
[data-advanced-filter-builder-menu] [role="option"]:focus-visible,
[data-advanced-filter-builder-menu] [role="option"][aria-selected="true"] {
  background: var(--pale-lime);
  outline: none;
}

.advanced-filter-builder-menu [role="option"][aria-disabled="true"],
.advanced-filter-custom-menu [role="option"][aria-disabled="true"],
[data-advanced-filter-builder-menu] [role="option"][aria-disabled="true"] {
  color: #757975;
  cursor: not-allowed;
  background: #f2f2ef;
}

.advanced-filter-builder-menu__empty,
.advanced-filter-custom-menu__empty,
[data-advanced-filter-builder-menu-empty] {
  margin: 0;
  padding: 11px 9px;
  color: var(--muted);
  font-size: 9.5px;
  text-align: center;
}

.advanced-filters-form__footer {
  display: flex;
  justify-content: flex-end;
  flex: 0 0 auto;
  gap: 7px;
  padding: 10px 14px;
  background: #fafafa;
  border-top: .5px solid #ccc;
}

.advanced-filters-form__footer button {
  min-height: 29px;
  padding: 0 10px;
  color: #111;
  font: inherit;
  font-size: 10px;
  background: #fff;
  border: .75px solid #aaa;
  border-radius: 5px;
}

.advanced-filters-form__footer button:last-child {
  background: var(--pale-lime);
}

.empty-value {
  color: transparent;
}

.contacts-table__empty td {
  height: 58px;
  color: var(--muted);
  text-align: center;
  border: 0;
}

.contacts-panel.is-comfortable .contacts-table tbody th,
.contacts-panel.is-comfortable .contacts-table tbody td {
  height: 45px;
}

.contacts-panel.is-comfortable .contacts-table-shell,
.contacts-panel.is-comfortable .contacts-list-container {
  height: 555px;
}

.contacts-panel.is-comfortable .contacts-table-shell {
  flex-basis: 555px;
  min-height: 0;
}

.contacts-panel.is-comfortable .contacts-list-container {
  height: 100%;
}

.table-scroll-indicator {
  position: absolute;
  z-index: 3;
  top: 64px;
  right: 48px;
  bottom: 10px;
  width: 24px;
}

.table-scroll-indicator .scrollbar-ui__handle {
  right: 18px;
}

.contacts-table-horizontal-scrollbar {
  position: absolute;
  z-index: 4;
  right: 70px;
  bottom: -20px;
  left: 20px;
  width: auto;
  height: 20px;
}

.contacts-table-horizontal-scrollbar .scrollbar-ui__handle--horizontal {
  top: 7px;
  right: auto;
  left: 0;
  width: 56px;
  height: 6px;
  transform: translateX(var(--scrollbar-handle-offset));
}

.contacts-table-horizontal-scrollbar .scrollbar-ui__handle-image {
  display: block;
  width: 6px;
  height: 56px;
  max-width: none;
  transform: translateY(6px) rotate(-90deg);
  transform-origin: top left;
  pointer-events: none;
  user-select: none;
}

/* Bulk Actions keeps the Contact List table grammar without its column-action rail. */
.bulk-actions-screen .contact-count {
  min-width: 104px;
}

.bulk-actions-view-toolbar {
  height: auto;
  min-height: 40px;
}

.bulk-actions-view-toolbar .view-toolbar__primary {
  flex-wrap: wrap;
  row-gap: 7px;
}

.bulk-actions-view-config-card h2 {
  flex-basis: 100px;
}

.bulk-actions-filter-pills {
  max-width: 100%;
  margin-left: 0;
  overflow-x: auto;
  transform: none;
  scrollbar-width: none;
}

.bulk-actions-filter-tools {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 5px;
}

.bulk-actions-filter-tools .toolbar-icon-button {
  flex: 0 0 23px;
  width: 23px;
  height: 23px;
  min-height: 23px;
  margin-top: 0;
  padding: 0;
  background: var(--blue);
  border: 1px solid #9ab5c4;
  border-radius: 2px;
}

.bulk-actions-filter-pills::-webkit-scrollbar {
  display: none;
}

.bulk-actions-workspace .quick-filter-popover {
  width: 168px;
}

.bulk-actions-workspace .quick-filter-menu {
  width: 220px;
}

.bulk-actions-workspace .quick-filter-operator-menu .quick-filter-menu__options {
  height: auto;
  max-height: 160px;
}

.bulk-actions-workspace .quick-filter-value-menu .quick-filter-menu__options {
  max-height: 180px;
}

.bulk-actions-selection-toolbar > button:nth-child(1) {
  flex-basis: 82px;
  width: 82px;
}

.bulk-actions-selection-toolbar > button:nth-child(2) {
  flex-basis: 98px;
  width: 98px;
}

.bulk-actions-table thead .edit-columns-field-token {
  --edit-columns-token-counter-scale: 1;
  position: absolute;
  z-index: 2;
  top: 9px;
  left: 10px;
  max-width: calc(100% - 15px);
}

.bulk-actions-table thead th[data-selection-column] .edit-columns-field-token {
  left: 22px;
  max-width: calc(100% - 27px);
}

/* Manage Data keeps the Contacts table language while owning its creation controls. */
.data-types-title-menu h1 {
  text-transform: none;
}

.data-types-screen .contact-count {
  min-width: 98px;
}

.data-types-view-toolbar {
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  height: auto;
  min-height: 40px;
}

.data-types-view-toolbar .view-toolbar__primary {
  flex: 1 1 630px;
  flex-wrap: nowrap;
  min-width: 0;
}

.data-types-view-toolbar .view-toolbar__search-tools {
  display: flex;
  flex: 0 0 auto;
  align-self: center;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 10px;
  width: auto;
  margin: 0;
  padding-right: 18px;
}

.data-types-view-toolbar .view-toolbar__search-tools .list-search {
  flex: 0 1 208px;
  margin-top: 0;
}

.data-types-create-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.data-types-create-actions button {
  display: inline-flex;
  align-items: stretch;
  height: 22px;
  padding: 0;
  font: inherit;
  white-space: nowrap;
  background: transparent;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}

.data-types-create-actions [data-data-field-folder-open] .contact-create-menu__label,
.data-types-create-actions [data-data-field-folder-open] .contact-create-menu__icon {
  background: #fff;
  border-color: #bfc0bf;
}

.data-types-create-actions button:focus-visible {
  outline: none;
}

.data-types-create-actions button:hover > span,
.data-types-create-actions button:focus-visible > span {
  background: var(--blue);
}

.contact-create-drawer.data-field-create-drawer {
  width: min(940px, calc(100vw - 72px));
}

.data-field-create-form__body {
  padding-bottom: 14px;
}

.data-field-create-layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(230px, 3fr);
  align-items: start;
  gap: 14px;
  min-width: 0;
}

.data-field-create-config,
.data-field-create-preview {
  min-width: 0;
  background: #fafafa;
  border: .5px solid #ccc;
  border-radius: 6px;
}

.data-field-create-section + .data-field-create-section {
  border-top: .5px solid #ccc;
}

.data-field-create-section__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  padding: 8px 14px;
  color: var(--ink);
  font: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.data-field-create-section__toggle:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -3px;
}

.data-field-create-section__icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.data-field-create-section__heading {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.data-field-create-section__title {
  font-size: 11px;
  line-height: 1.2;
}

.data-field-create-section__description {
  color: var(--muted);
  font-size: 9.6px;
  line-height: 1.25;
}

.data-field-create-section__chevron {
  flex: 0 0 auto;
  width: 7.2px;
  height: 4.8px;
  margin-left: auto;
  transform: rotate(180deg);
  transition: transform 120ms ease;
}

.data-field-create-section__toggle[aria-expanded="false"] .data-field-create-section__chevron {
  transform: rotate(0deg);
}

.data-field-create-section__content {
  padding: 4px 14px 16px;
}

.data-field-create-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 15px 14px;
  min-width: 0;
}

.data-field-create-grid > *,
.data-field-create-form .data-field-create-select {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin-top: 0;
}

.data-field-create-required {
  margin-left: 3px;
  color: #b3261e;
}

.data-field-create-form .data-field-create-select__menu {
  position: absolute;
  z-index: 5;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  box-shadow: 0 5px 12px rgb(0 0 0 / 14%);
}

.data-field-create-form .data-field-create-select__menu
  [data-data-field-select-option="type"] .data-field-create-type-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  object-fit: contain;
}

.data-field-create-form .data-field-create-select__menu
  [data-data-field-select-option="type"] > span {
  flex: 1 1 auto;
}

.data-field-create-form .contact-create-single-select__menu .data-field-create-folder-action {
  min-height: 31px;
  margin-bottom: 4px;
  border-bottom: .5px solid #ccc;
  border-radius: 3.6px 3.6px 0 0;
}

.data-field-create-folder-panel {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding: 10px;
  background: #fff;
  border: .5px solid #ccc;
  border-radius: 4.8px;
}

.data-field-create-folder-panel[hidden] {
  display: none;
}

.data-field-create-folder-panel__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.data-field-create-folder-panel__actions button {
  min-height: 28.8px;
  padding: 2.4px 9.6px;
  color: var(--ink);
  font: inherit;
  font-size: 9.6px;
  background: #fff;
  border: .5px solid #ccc;
  border-radius: 4.8px;
}

.data-field-create-folder-panel__actions [data-data-field-folder-create-submit] {
  background: var(--pale-lime);
  border-color: #c7cca8;
}

.data-field-create-folder-panel__actions button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.data-field-create-folder-warning {
  margin: 0;
  color: var(--muted);
  font-size: 9.6px;
  line-height: 1.3;
}

.data-field-create-form .data-field-create-select.is-invalid .contact-create-single-select__toggle {
  border-color: #b3261e;
  box-shadow: 0 0 0 .5px #b3261e;
}

.data-field-create-form .contact-create-field input:not([disabled]):focus-visible,
.data-field-create-form .contact-create-single-select__toggle:focus-visible {
  border-color: #474747;
  box-shadow: inset 0 0 0 .5px #474747;
}

.data-field-create-error {
  margin: 1px 0 0;
  color: #b3261e;
  font-size: 9.6px;
  line-height: 1.3;
}

.data-field-create-key {
  display: grid;
  gap: 4.8px;
  margin-top: 15px;
  font-size: 10.8px;
}

.data-field-create-key__label,
.data-field-create-placeholder-field__label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.data-field-create-key output {
  min-height: 20px;
  overflow-wrap: anywhere;
  color: #555;
  font-size: 10.8px;
}

.data-field-create-info {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 3px;
}

.data-field-create-info .icon {
  width: 11px;
  height: 11px;
}

.data-field-create-info:focus-visible {
  outline: 2px solid var(--focus);
}

.data-field-create-description-field {
  margin-top: 15px;
}

.data-field-create-description-field textarea {
  width: 100%;
  min-height: 88px;
  resize: vertical;
  padding: 7px 8.4px;
  color: var(--ink);
  font: inherit;
  font-size: 10.8px;
  line-height: 1.4;
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 4.8px;
}

.data-field-create-description-field textarea:focus-visible {
  outline: none;
  border-color: #474747;
  box-shadow: inset 0 0 0 .5px #474747;
}

.data-field-create-description-field__count {
  justify-self: end;
  color: var(--muted);
  font-size: 9.6px;
}

.data-field-create-placeholder-field__label label {
  min-height: 14.4px;
}

.data-field-create-section[hidden],
.data-field-dropdown-options__selection-toolbar[hidden],
.data-field-dropdown-option-error[hidden],
.data-field-dropdown-options__error[hidden] {
  display: none;
}

.data-field-dropdown-options {
  min-width: 0;
  overflow: hidden;
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 4.8px;
}

.data-field-dropdown-options__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 44px;
  padding: 7px 9px;
}

.data-field-dropdown-options__heading h3 {
  margin: 0;
  font-size: 10.8px;
  font-weight: 400;
  line-height: 1.3;
}

.data-field-dropdown-options__add {
  display: inline-flex;
  align-items: stretch;
  flex: 0 0 auto;
  height: 28.8px;
  padding: 0;
  color: var(--ink);
  font: inherit;
  background: transparent;
  border: 0;
  border-radius: 4.8px;
  cursor: pointer;
}

.data-field-dropdown-options__add .contact-create-menu__label,
.data-field-dropdown-options__add .contact-create-menu__icon {
  font-size: 10.8px;
  border-color: #aeb49d;
}

.data-field-dropdown-options__add .contact-create-menu__label {
  min-width: 0;
  padding-inline: 9px;
  border-radius: 4.8px 0 0 4.8px;
}

.data-field-dropdown-options__add .contact-create-menu__icon {
  width: 27px;
  border-radius: 0 4.8px 4.8px 0;
}

.data-field-dropdown-options__add:hover > span {
  background: #eff6ce;
}

.data-field-dropdown-options__add:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.bulk-action-toolbar.data-field-dropdown-options__selection-toolbar {
  position: static;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 8px;
  width: 100%;
  height: auto;
  min-height: 32px;
  margin: 0;
  padding: 5px 9px;
  border: 0;
  border-top: .5px solid #aaa;
  border-bottom: .5px solid #aaa;
  background: #eef7ff;
}

.bulk-action-toolbar.data-field-dropdown-options__selection-toolbar[hidden] {
  display: none;
}

.data-field-dropdown-options__selection-toolbar [data-data-field-dropdown-selection-count] {
  margin-right: auto;
  font-size: 9.6px;
  white-space: nowrap;
}

.bulk-action-toolbar.data-field-dropdown-options__selection-toolbar > button {
  flex: 0 0 auto;
  width: auto;
  height: 23px;
  padding-inline: 7px;
}

.data-field-dropdown-options__selection-toolbar [data-data-field-dropdown-delete-selected] {
  border-color: #b3261e;
  color: #a21f18;
}

.data-field-dropdown-options__selection-toolbar button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.data-field-dropdown-options__trash {
  width: 10px;
  height: 10px;
}

.data-field-dropdown-options__table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  color: var(--ink);
  font-size: 10.8px;
}

.data-field-dropdown-options__drag-column,
.data-field-dropdown-options__select-column {
  width: 27px;
}

.data-field-dropdown-options__table th,
.data-field-dropdown-options__table td {
  min-width: 0;
  padding: 4px 7px;
  border-top: .5px solid #aaa;
  border-right: .5px solid #aaa;
  text-align: left;
  vertical-align: middle;
}

.data-field-dropdown-options__table tr > :last-child {
  border-right: 0;
}

.data-field-dropdown-options__table thead th {
  height: 27px;
  color: var(--ink);
  font-weight: 400;
  background: #f4f4f4;
}

.data-field-dropdown-options__table th:is(:first-child, :nth-child(2)),
.data-field-dropdown-options__table td:is(:first-child, :nth-child(2)) {
  padding-inline: 4px;
  text-align: center;
}

.data-field-dropdown-options__table tbody td {
  height: 35px;
  background: #fff;
}

.data-field-dropdown-options__table tbody tr.is-selected td,
.data-field-dropdown-options__table tbody tr[aria-selected="true"] td {
  background: #eef7ff;
}

.data-field-dropdown-options__table tbody tr.is-drop-target td {
  box-shadow: inset 0 2px 0 var(--focus);
}

.data-field-dropdown-options__table .contact-selection-checkbox {
  vertical-align: middle;
}

.data-field-dropdown-option-handle {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 3px;
  cursor: grab;
  touch-action: none;
}

.data-field-dropdown-option-handle:active {
  cursor: grabbing;
}

.data-field-dropdown-option-handle .icon {
  width: 11px;
  height: 15px;
  object-fit: contain;
}

.data-field-dropdown-option-handle:focus-visible {
  outline: 2px solid var(--focus);
}

.data-field-dropdown-option-input {
  display: block;
  width: 100%;
  min-width: 0;
  height: 26px;
  padding: 2px 7px;
  color: var(--ink);
  font: inherit;
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 4.8px;
}

.data-field-dropdown-option-input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.data-field-dropdown-option-input:focus-visible {
  outline: none;
  border-color: #474747;
  box-shadow: inset 0 0 0 .5px #474747;
}

.data-field-dropdown-option-input[aria-invalid="true"] {
  border-color: #b3261e;
  box-shadow: 0 0 0 .5px #b3261e;
}

.data-field-dropdown-option-error,
.data-field-dropdown-options__error {
  margin: 3px 0 0;
  color: #b3261e;
  font-size: 9.6px;
  line-height: 1.3;
}

.data-field-dropdown-options__error {
  padding: 6px 9px 8px;
}

.data-field-dropdown-default {
  margin-top: 15px;
}

.data-field-dropdown-default__label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.data-field-dropdown-default select:disabled {
  color: #777;
  background-color: #f4f4f4;
  cursor: not-allowed;
}

@media (max-width: 650px) {
  .data-field-dropdown-options__table,
  .data-field-dropdown-options__table tbody {
    display: block;
  }

  .data-field-dropdown-options__table thead {
    display: block;
  }

  .data-field-dropdown-options__table thead tr {
    display: block;
  }

  .data-field-dropdown-options__table thead th {
    display: none;
  }

  .data-field-dropdown-options__table thead th:nth-child(2) {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 5px 10px;
    border-right: 0;
    text-align: left;
  }

  .data-field-dropdown-options__table thead th:nth-child(2)::after {
    content: "Select all options";
  }

  .data-field-dropdown-options__table tbody tr {
    display: grid;
    grid-template-columns: 27px 27px minmax(0, 1fr);
    align-items: center;
    padding: 6px;
    border-top: .5px solid #aaa;
  }

  .data-field-dropdown-options__table tbody tr.is-selected,
  .data-field-dropdown-options__table tbody tr[aria-selected="true"] {
    background: #eef7ff;
  }

  .data-field-dropdown-options__table tbody td {
    display: block;
    height: auto;
    padding: 3px 4px;
    border: 0;
  }

  .data-field-dropdown-options__table tbody td:nth-child(3),
  .data-field-dropdown-options__table tbody td:nth-child(4) {
    grid-column: 1 / -1;
  }

  .data-field-dropdown-options__table tbody td[data-label]::before {
    display: block;
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 9.6px;
    content: attr(data-label);
  }

  .data-field-dropdown-options__table tbody td:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  .data-field-dropdown-options__table tbody td:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }
}

.data-field-create-preview {
  position: sticky;
  top: 0;
  min-height: calc(100dvh - 170px);
  padding: 14px;
}

.data-field-create-preview h3 {
  margin: 0 0 20px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
}

.data-field-create-preview__field :is(input, textarea, select) {
  width: 100%;
  font-family: inherit;
  opacity: 1;
}

.data-field-create-preview__field textarea {
  min-height: 88px;
  padding: 7px 8.4px;
  color: var(--ink);
  font-size: 10.8px;
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 4.8px;
  resize: none;
}

.data-field-create-preview__field :is(input, textarea, select):disabled {
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
  background: #fff;
  opacity: 1;
}

.data-field-create-preview__field :is(input, textarea)::placeholder {
  color: var(--muted);
  -webkit-text-fill-color: var(--muted);
  opacity: 1;
}

.data-field-create-preview__field input[type="checkbox"] {
  width: 14.4px;
  height: 14.4px;
  margin: 3px 5px 0 0;
  accent-color: #257da3;
  vertical-align: middle;
}

.data-field-create-preview__dropdown {
  position: relative;
  width: 100%;
}

.data-field-create-preview__choices {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.data-field-create-preview__choices legend {
  margin-bottom: 6px;
  padding: 0;
  color: var(--muted);
  font-size: 10.8px;
}

.data-field-create-preview__choices label {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: 25px;
  font-size: 10.8px;
}

.data-field-create-preview__choices input:is([type="radio"], [type="checkbox"]) {
  width: 14.4px;
  height: 14.4px;
  flex: 0 0 14.4px;
  margin: 0;
  padding: 0;
  accent-color: #257da3;
}

.data-field-create-preview__address {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  min-width: 0;
}

.data-field-create-preview__address [data-data-field-preview-address-part="street"] {
  grid-column: 1 / -1;
}

.data-field-create-preview__currency {
  position: relative;
}

.data-field-create-preview__currency > span {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 9px;
  color: #444;
  font-size: 10.8px;
  transform: translateY(-50%);
}

.data-field-create-preview__currency input {
  padding-left: 22px;
}

.data-field-create-preview__hint {
  color: var(--muted);
  font-size: 10.8px;
  line-height: 1.4;
}

.data-field-create-form__footer {
  justify-content: flex-end;
}

.data-field-create-form__footer button:disabled {
  color: #777;
  background: #f1f1ed;
  border-color: #c8cac8;
  cursor: not-allowed;
}

@media (max-width: 1180px) {
  .contact-create-drawer.data-field-create-drawer {
    width: min(940px, calc(100vw - 24px));
  }
}

@media (max-width: 900px) {
  .data-field-create-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .data-field-create-preview {
    position: static;
    min-height: 170px;
  }
}

@media (max-width: 767px) {
  .contact-create-drawer.data-field-create-drawer {
    top: 48px;
    width: 100vw;
  }

  .data-field-create-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .data-field-create-section__chevron {
    transition: none;
  }
}

.data-types-workspace .data-field-folder-popover {
  width: 280px;
  overflow: visible;
}

.data-field-folder-popover__form {
  display: grid;
  gap: 12px;
  padding: 11px;
}

.data-field-folder-object-picker,
.data-field-folder-popover__name-field {
  position: relative;
  display: grid;
  gap: 5px;
}

.data-field-folder-popover__label {
  font-size: 10.8px;
  line-height: 1.2;
}

.data-field-folder-object-picker__menu {
  position: absolute;
  z-index: 3;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  box-shadow: 0 5px 12px rgba(0, 0, 0, .14);
}

.data-field-folder-popover__name-entry {
  width: 100%;
  height: 35px;
  margin: 0;
  padding: 6px;
  border-radius: 8px;
}

.data-field-folder-popover__name-entry input {
  height: 100%;
  padding: 0 7px;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.data-field-folder-popover__name-entry:focus-within {
  border-color: #111;
}

.data-field-folder-popover__name-entry:has(input[aria-invalid="true"]) {
  border-color: #b3261e;
}

.data-field-folder-popover__error {
  margin: -4px 0 0;
  color: #b3261e;
  font-size: 10px;
}

.data-field-folder-popover__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.data-field-folder-popover__footer button {
  min-height: 26px;
  padding: 3px 10px;
  color: var(--ink);
  font: inherit;
  font-size: 10px;
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 4px;
}

.data-field-folder-popover__footer button[type="submit"] {
  background: var(--pale-lime);
  border-color: #aeb49d;
}

.data-field-folder-popover__footer button:hover,
.data-field-folder-popover__footer button:focus-visible {
  background: var(--blue);
}

@media (max-width: 1179px) {
  .data-types-view-toolbar .view-toolbar__primary {
    flex: 0 0 auto;
    width: 100%;
  }

  .data-types-view-toolbar .view-toolbar__search-tools {
    align-self: stretch;
    width: 100%;
  }
}

@media (max-width: 767px) {
  .data-types-view-toolbar .view-toolbar__search-tools {
    flex-wrap: wrap;
  }

  .data-types-view-toolbar .view-toolbar__search-tools .list-search {
    flex-basis: 100%;
    width: 100%;
  }
}

.data-types-view-config-card h2 {
  flex-basis: 104px;
}

.data-types-filter-pills {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: 100%;
  margin-left: 0;
  overflow-x: auto;
  transform: none;
  scrollbar-width: none;
}

.data-types-filter-pills::-webkit-scrollbar {
  display: none;
}

.data-types-folder-context {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 12px;
  min-width: 0;
  min-height: 25px;
  padding: 0 10px 4px;
  color: var(--ink);
  font-size: 10.8px;
}

.data-types-folder-context[hidden] {
  display: none;
}

.data-types-folder-context button,
.data-types-folder-open {
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.data-types-folder-context button {
  flex: 0 0 auto;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.data-types-folder-context [data-data-types-folder-name] {
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-types-table tbody tr[data-data-field-folder-id] {
  cursor: pointer;
}

.data-types-table tbody tr[data-data-field-id] {
  cursor: pointer;
}

.data-types-table tbody tr[data-data-field-id]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.data-types-folder-open {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-types-folder-open:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.data-types-folder-open:focus-visible,
.data-types-folder-context button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.data-types-selection-toolbar {
  flex-wrap: wrap;
  gap: 5px 8px;
  height: auto;
  min-height: 29px;
}

.data-types-selection-toolbar [data-data-field-selection-count] {
  margin-right: 4px;
  color: var(--muted);
  font-size: 9.6px;
  white-space: nowrap;
}

.bulk-action-toolbar.data-types-selection-toolbar > button {
  flex: 0 0 auto;
  width: auto;
}

.data-types-selection-toolbar > button[hidden] {
  display: none;
}

.data-types-selection-toolbar > button:not(:disabled):hover,
.data-types-selection-toolbar > button:focus-visible {
  background: var(--blue);
}

.data-types-selection-toolbar .bulk-action-toolbar__icon {
  width: 10px;
  height: 10px;
}

.data-types-action-dialog {
  width: min(380px, calc(100vw - 24px));
  max-width: none;
  max-height: min(560px, calc(100dvh - 32px));
  margin: auto;
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  background: #fafafa;
  border: .75px solid #777;
  border-radius: 6px;
  box-shadow: none;
}

.data-types-action-dialog::backdrop {
  background: rgb(0 0 0 / 20%);
}

.data-types-action-dialog__body {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.data-types-action-dialog h2,
.data-types-action-dialog__actions {
  padding: 11px 14px;
}

.data-types-action-dialog h2 {
  border-bottom: .5px solid #ccc;
}

.data-types-action-dialog h2 {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
}

.data-types-action-dialog p {
  margin: 0;
  padding: 12px 14px 7px;
  font-size: 10.8px;
  line-height: 1.4;
}

.data-types-action-dialog [data-data-field-move-options] {
  display: grid;
  gap: 3px;
  min-height: 0;
  max-height: 280px;
  padding: 5px 10px 12px;
  overflow-y: auto;
}

.data-types-action-dialog [data-data-field-move-options] label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 29px;
  padding: 4px 7px;
  font-size: 10.8px;
  border-radius: 4px;
  cursor: pointer;
}

.data-types-action-dialog [data-data-field-move-options] label:hover,
.data-types-action-dialog [data-data-field-move-options] label:focus-within {
  background: var(--pale-lime);
}

.data-types-action-dialog [data-data-field-move-options] input {
  accent-color: #536900;
}

.data-types-action-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: .5px solid #ccc;
}

.data-types-action-dialog__actions button {
  min-height: 28.8px;
  padding: 3px 10px;
  color: var(--ink);
  font: inherit;
  font-size: 9.6px;
  background: #fff;
  border: .5px solid #ccc;
  border-radius: 4.8px;
}

.data-types-action-dialog__actions button:last-child {
  background: var(--pale-lime);
  border-color: #c7cca8;
}

.data-types-action-dialog__actions button:disabled {
  color: #777;
  background: #f1f1ed;
  cursor: not-allowed;
}

.data-types-action-dialog__actions button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.contact-delete-dialog__error {
  margin: 0 14px 12px;
  padding: 7px 8px;
  background: #fff;
  border: .5px solid #b3261e;
  border-radius: 4.8px;
}

.contact-delete-dialog__error[hidden] {
  display: none;
}

.contact-delete-dialog .data-types-action-dialog__actions button:not(:disabled):hover {
  background: var(--blue);
}

.data-types-workspace .quick-filter-popover {
  width: 168px;
}

.data-types-workspace .quick-filter-menu {
  width: 220px;
}

.data-types-workspace .quick-filter-operator-menu .quick-filter-menu__options {
  height: auto;
  max-height: 160px;
}

.data-types-workspace .quick-filter-value-menu .quick-filter-menu__options {
  max-height: 180px;
}

.data-types-table thead .edit-columns-field-token {
  --edit-columns-token-counter-scale: 1;
  position: absolute;
  z-index: 2;
  top: 9px;
  left: 10px;
  max-width: calc(100% - 15px);
}

/* Match the first header cell's slight overhang at the Last Updated edge. */
.data-types-table[data-data-types-table-view="data-types"] thead th[data-column="lastUpdated"]::before {
  right: -1px;
}

.data-types-table[data-data-types-table-view="data-types"] thead th[data-column="lastUpdated"]::after {
  right: -4px;
}

.data-types-table-shell:has(.data-types-table[data-data-types-table-view="data-types"])::before,
.data-types-table-shell:has(.data-types-table[data-data-types-table-view="data-types"])::after {
  right: 42px;
}

.data-types-table-shell:has(.data-types-table[data-data-types-table-view="data-types"])
  .data-types-table-scroll {
  width: calc(100% - 42px);
  max-width: 1198px;
  padding-right: 6px;
}

.data-types-table tbody .contacts-table__empty td:only-child {
  border-right: .75px solid #474747;
  border-left: .75px solid #474747;
  border-radius: 5px;
}

.data-types-table tbody th[data-column="name"] {
  padding-left: 14px;
}

.data-types-table[data-data-types-table-view="data-types"] thead th[data-selection-column]
  .edit-columns-field-token {
  left: 25px;
  max-width: calc(100% - 30px);
}

.data-types-table[data-data-types-table-view="data-types"] tbody th[data-column="name"] {
  padding-left: 25px;
}

.data-types-table .data-field-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  vertical-align: middle;
}

.data-types-table .data-field-name > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-types-table .data-field-name__lock {
  flex: 0 0 9.6px;
  width: 9.6px;
  height: 9.6px;
}

.fast-tooltip {
  position: fixed;
  inset: auto;
  margin: 0;
  z-index: 2000;
  width: max-content;
  max-width: min(320px, calc(100vw - 16px));
  padding: 5px 8px;
  color: #1e1e1e;
  font-size: 11px;
  line-height: 1.25;
  overflow-wrap: anywhere;
  background: #fff;
  border: 1px solid #a8aaa8;
  border-radius: 4px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .15);
  pointer-events: none;
}

/* The tooltip controller mounts into an open dialog's top layer and supplies
   coordinates relative to that dialog rather than the viewport. */
dialog[open] > .fast-tooltip:not(:popover-open) {
  position: absolute;
}

.fast-tooltip[hidden] {
  display: none;
}

.data-types-table .empty-value {
  color: var(--muted);
}

.data-types-table tbody td[data-column="dataCategory"] > .data-field-category {
  display: grid;
  grid-template-columns: 17.28px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
}

.data-types-table tbody td[data-column="dataCategory"] .data-field-category > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-field-category__icon {
  justify-self: center;
  object-fit: contain;
}

.data-field-category__icon--bubble {
  width: 9px;
  height: 9px;
}

.data-field-category__icon--dropdown {
  width: 16px;
  height: 11px;
}

.data-field-category__icon--date {
  width: 14.4px;
  height: 14.4px;
}

.data-field-category__icon--text,
.data-field-category__icon--long-text,
.data-field-category__icon--address,
.data-field-category__icon--number,
.data-field-category__icon--currency,
.data-field-category__icon--multi-select {
  width: 16px;
  height: 11px;
}

.data-field-category__icon--checkbox {
  width: 10px;
  height: 9px;
}

.contacts-pagination {
  display: flex;
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  width: calc(100% + 20px);
  min-height: 34.8px;
  margin: 0 -10px;
  padding: 4.8px 18px;
  color: #111;
  font-size: 10.8px;
  background: #fff;
  border: .5px solid #ccc;
}

.contacts-pagination output {
  white-space: nowrap;
}

.contacts-pagination__controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.contacts-pagination__controls > button,
.contacts-pagination .page-size-picker__toggle {
  height: 24px;
  color: #111;
  font: inherit;
  background-color: #fff;
  border: .5px solid #aaa;
  border-radius: 3.6px;
}

.contacts-pagination .page-size-picker {
  width: 93.6px;
  flex: 0 0 93.6px;
}

.contacts-pagination .page-size-picker__toggle {
  padding: 0 7.2px;
}

.contacts-pagination .page-size-picker__toggle:focus-visible {
  border-color: #474747;
  outline: none;
  box-shadow: inset 0 0 0 .5px #474747;
}

.contacts-pagination .page-size-picker__menu {
  position: absolute;
  z-index: 20;
  bottom: calc(100% + 4px);
  left: 0;
  width: 120px;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .12);
}

.contacts-pagination__controls > button {
  min-width: 50.4px;
  padding: 0 8.4px;
}

.contacts-pagination button:disabled {
  color: #777;
  background: #f3f3f3;
  cursor: default;
}

.selection-bracket {
  display: none;
  position: absolute;
  z-index: 5;
  top: 50%;
  left: -4px;
  width: 13px;
  height: 42px;
  max-width: none;
  transform: translateY(-50%);
  pointer-events: none;
}

.contacts-table tbody tr.is-selected th:first-child > .selection-bracket {
  display: block;
}

.pragtical-app [data-column-hidden="true"] {
  display: none;
}

.app-status {
  position: fixed;
  z-index: 200;
  right: 18px;
  bottom: 16px;
  max-width: min(360px, calc(100vw - 36px));
  padding: 7px 10px;
  color: #fff;
  font-size: 10px;
  background: #333;
  border: 1px solid #fff;
  opacity: 0;
  transform: translateY(7px);
  transition: opacity .12s ease, transform .12s ease;
  pointer-events: none;
}

.app-status.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 1440px) {
  .contacts-table-shell {
    width: calc(100% + 40px);
    margin-right: -30px;
    margin-left: -10px;
  }

  .contacts-pagination {
    width: calc(100% + 20px);
    margin-right: -30px;
    margin-left: -10px;
  }
}

@media (max-width: 1439px) {
  .pragtical-app {
    grid-template-columns: 204px minmax(0, 1fr);
  }

  .app-sidebar {
    --sidebar-inline-padding: 12px;
  }

  .platform-search {
    flex-basis: 240px;
  }

  .account-selector {
    flex-basis: 170px;
    max-width: 190px;
  }

  .utility-icon-button,
  .utility-overflow > summary {
    width: 34px;
  }

  .contacts-screen {
    padding-right: 24px;
    padding-left: 24px;
  }

  .module-navigation {
    align-items: stretch;
    flex-direction: column;
    height: auto;
    gap: 5px;
  }

  .contact-create-actions {
    width: 100%;
    transform: none;
  }

  .filter-chip-strip {
    max-width: none;
  }

  .view-toolbar__search-tools {
    margin-right: 38px;
  }
}

@media (max-width: 1179px) {
  .pragtical-app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 42px minmax(0, 1fr);
  }

  .utility-bar,
  .contacts-workspace {
    grid-column: 1;
  }

  .utility-bar {
    height: 42px;
    padding-left: 7px;
  }

  .mobile-navigation-button {
    display: flex;
  }

  .app-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(260px, calc(100vw - 48px));
    transform: translateX(calc(-100% - 24px));
    transition: transform .18s ease;
    box-shadow: 5px 0 0 rgba(0, 0, 0, .12);
  }

  .pragtical-app.is-navigation-open .app-sidebar {
    transform: translateX(0);
  }

  .sidebar-scrim {
    position: fixed;
    z-index: 35;
    inset: 0;
    display: block;
    background: rgba(22, 22, 22, .48);
  }

  .sidebar-scrim[hidden] {
    display: none;
  }

  .contacts-workspace {
    grid-row: 2;
  }

  .contacts-screen {
    min-height: calc(100dvh - 42px);
    padding-top: 26px;
  }

  .utility-priority-low {
    display: none;
  }

  .utility-overflow {
    display: block;
  }

  .module-navigation {
    height: auto;
    min-height: 50px;
  }

  .module-tabs {
    max-width: 100%;
    overflow-x: auto;
  }

  .view-toolbar {
    align-items: stretch;
    flex-direction: column;
    height: auto;
    padding-bottom: 6px;
  }

  .view-toolbar__search-tools {
    justify-content: flex-end;
  }
}

@media (max-width: 767px) {
  .pragtical-app {
    grid-template-rows: 48px minmax(0, 1fr);
  }

  .utility-bar {
    height: 48px;
    gap: 5px;
    padding: 7px;
  }

  .platform-search {
    flex: 1 1 auto;
    width: 0;
    min-width: 105px;
    height: 31px;
  }

  .utility-icon-button,
  .utility-overflow > summary,
  .mobile-navigation-button {
    width: 31px;
    height: 31px;
  }

  .utility-priority-medium {
    display: none;
  }

  .account-selector {
    flex: 0 0 34px;
    min-width: 34px;
    margin-left: 0;
  }

  .account-selector > summary {
    justify-content: center;
    width: 34px;
    height: 31px;
    padding: 0;
  }

  .account-selector > summary > span {
    display: none;
  }

  .contacts-workspace {
    border-radius: 14px 0 0 0;
  }

  .contacts-screen {
    min-height: calc(100dvh - 48px);
    padding: 18px 12px 10px;
  }

  .contacts-heading-row {
    height: 28px;
  }

  .module-navigation {
    position: relative;
    margin-top: 8px;
    padding-bottom: 0;
  }

  .module-tabs {
    max-width: 100%;
  }

  .contact-create-actions {
    position: static;
    right: auto;
    bottom: auto;
    width: 100%;
    transform: none;
  }

  .contacts-panel {
    margin-top: 7px;
  }

  .view-toolbar__primary {
    flex-wrap: wrap;
  }

  .view-config-card {
    flex-basis: 100%;
    width: 100%;
  }

  .contact-create-actions__secondary-row {
    flex-wrap: wrap;
    justify-content: flex-end;
    width: 100%;
  }

  .contact-create-actions__secondary-row .filter-chip-strip {
    order: 0;
    flex: 1 0 100%;
    grid-template-columns: max-content;
    justify-content: flex-end;
    width: 100%;
    max-width: none;
    margin-left: 0;
  }

  .view-toolbar__search-tools {
    display: block;
    width: calc(100% - 38px);
  }

  .list-search {
    width: 100%;
  }

  .bulk-action-toolbar {
    overflow-x: auto;
  }

  .contacts-table {
    width: var(--contacts-table-min-width, 1188px);
  }
}

@media (max-width: 430px) {
  .platform-search {
    min-width: 74px;
  }

  .platform-search__icon {
    display: none;
  }

  .contact-count {
    margin-left: 14px;
  }
}

/* Pragtical uses fill changes for interaction feedback; never draw focus strokes. */
*:focus,
*:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

.scrollbar-ui:focus-visible .scrollbar-ui__handle {
  outline: none !important;
  box-shadow: none !important;
}

/* Contact field edit history and reversible restore. */
.contact-edit-history-dialog {
  z-index: 82;
}

.contact-create-drawer.contact-edit-history-drawer {
  width: min(760px, 100vw);
}

.contact-create-drawer__header.contact-edit-history-header {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-basis: auto;
  min-height: 54px;
  padding-top: 7px;
  padding-bottom: 7px;
}

.contact-edit-history-header > div {
  min-width: 0;
}

.contact-edit-history-header h2,
.contact-edit-history-header p {
  margin: 0;
}

.contact-edit-history-header p {
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted);
  font-size: 9.6px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-edit-history-header > button {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  padding: 0;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  line-height: 1;
  background: transparent;
  border: 0;
  border-radius: 4px;
}

.contact-edit-history-header > button:hover,
.contact-edit-history-header > button:focus-visible {
  background: var(--blue);
  outline: none;
}

.contact-edit-history-header > button:focus-visible {
  box-shadow: inset 0 0 0 1px #474747;
}

.contact-create-form.contact-edit-history-content {
  gap: 0;
  padding: 12px 14px 0;
}

.contact-create-form__fields.contact-edit-history-list {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.contact-edit-history-success {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-bottom: 10px;
  padding: 8px 9px;
  color: var(--ink);
  font-size: 10.8px;
  line-height: 1.35;
  background: var(--pale-lime);
  border: .5px solid #c7cca8;
  border-radius: 4.8px;
}

.contact-edit-history-success[hidden] {
  display: none;
}

.contact-edit-history-success > span {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  background: #fff;
  border: .5px solid #aeb49d;
  border-radius: 50%;
}

.contact-edit-history-success .icon {
  width: 8px;
  height: 7px;
}

.contact-edit-history-success strong {
  min-width: 0;
  font-weight: 500;
}

.contact-edit-history-list > .contacts-table-scroll.contact-edit-history-table-scroll {
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  height: auto;
  min-width: 0;
  min-height: 128px;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border-bottom: .5px solid #ccc;
  scrollbar-color: #aaa transparent;
  scrollbar-width: thin;
}

.contact-edit-history-table-scroll:focus-visible {
  outline: 1px solid var(--focus);
  outline-offset: -1px;
}

.contact-edit-history-table {
  width: 100%;
  min-width: 700px;
  margin: 0;
  table-layout: fixed;
}

.contact-edit-history-table thead {
  top: 0;
}

.contact-edit-history-table thead .edit-columns-field-token {
  --edit-columns-token-counter-scale: 1;
  position: absolute;
  z-index: 2;
  top: 9px;
  left: 10px;
  max-width: calc(100% - 15px);
}

.contact-edit-history-table tbody th,
.contact-edit-history-table tbody td {
  height: 52px;
  padding: 6px 8px;
  vertical-align: middle;
  font-size: 9.6px;
}

.contact-edit-history-table tbody [data-column="changed"] time,
.contact-edit-history-table tbody [data-column="changed"] small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-edit-history-table tbody [data-column="changed"] small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 8.8px;
}

.contact-edit-history-table tbody [data-column="field"] {
  font-weight: 500;
  text-align: left;
}

.contact-edit-history-table tbody [data-column="before"] > span,
.contact-edit-history-table tbody [data-column="after"] > span {
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.3;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.contact-edit-history-value--empty {
  color: var(--muted);
  font-style: italic;
}

.contact-edit-history-table [data-column="action"] {
  text-align: center;
}

.contact-edit-history-table [data-contact-history-revert-entry] {
  min-height: 25px;
  padding: 3px 8px;
  color: var(--ink);
  font: inherit;
  font-size: 9.6px;
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 4.8px;
}

.contact-edit-history-table [data-contact-history-revert-entry]:not(:disabled):hover,
.contact-edit-history-table [data-contact-history-revert-entry]:focus-visible {
  background: var(--blue);
  outline: none;
  box-shadow: inset 0 0 0 .5px #474747;
}

.contact-edit-history-table [data-contact-history-revert-entry]:disabled {
  color: #777;
  background: #f1f1ed;
  border-color: #c8cac8;
  cursor: default;
}

.contact-edit-history-empty td {
  height: 128px !important;
  color: var(--muted);
  text-align: center;
  white-space: normal;
}

.contact-edit-history-unavailable td {
  color: #b3261e;
}

.contact-create-form__footer.contact-edit-history-footer {
  justify-content: flex-end;
  min-height: 49px;
  padding: 9px 0;
}

.data-types-action-dialog.contact-edit-history-revert-dialog {
  z-index: 84;
}

.contact-edit-history-revert-form {
  min-height: 0;
}

.contact-edit-history-revert-values {
  display: grid;
  gap: 6px;
  max-height: min(300px, 45dvh);
  margin: 0;
  padding: 5px 14px 12px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: #aaa transparent;
  scrollbar-width: thin;
}

.contact-edit-history-revert-values > div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  min-height: 31px;
  overflow: hidden;
  background: #fff;
  border: .5px solid #ccc;
  border-radius: 4.8px;
}

.contact-edit-history-revert-values dt,
.contact-edit-history-revert-values dd {
  display: flex;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 5px 8px;
  font-size: 9.6px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.contact-edit-history-revert-values output {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.contact-edit-history-revert-values dt {
  color: var(--muted);
  background: #f2f2ef;
  border-right: .5px solid #ddd;
}

.contact-edit-history-revert-form > .data-field-create-error {
  margin: 0 14px 10px;
  padding: 7px 8px;
  color: #b3261e;
  font-size: 9.6px;
  line-height: 1.35;
  background: #fff;
  border: .5px solid #b3261e;
  border-radius: 4.8px;
}

.contact-edit-history-revert-form > .data-field-create-error[hidden] {
  display: none;
}

@media (max-width: 767px) {
  .contact-create-drawer.contact-edit-history-drawer {
    top: 48px;
    width: 100vw;
  }

  .contact-create-form.contact-edit-history-content {
    padding-right: 12px;
    padding-left: 12px;
  }
}

@media (max-width: 430px) {
  .contact-create-drawer__header.contact-edit-history-header {
    min-height: 58px;
  }

  .contact-edit-history-header p {
    white-space: normal;
  }

  .data-types-action-dialog.contact-edit-history-revert-dialog {
    width: calc(100vw - 16px);
  }

  .contact-edit-history-revert-dialog .data-types-action-dialog__actions button {
    flex: 1 1 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* Add contact-list drawer and its reusable nested settings surfaces */
.contact-list-create-dialog::backdrop {
  background: rgba(255, 255, 255, .08);
}

.contact-list-create-drawer {
  overflow: visible;
  background: #fafafa;
}

.contact-list-create-drawer__handle {
  position: absolute;
  top: 0;
  left: -5px;
  z-index: 3;
  width: 6px;
  height: 39px;
  padding: 0;
  background: #666;
  border: 0;
  border-radius: 0 0 4px 4px;
}

.contact-list-create-drawer__handle:hover,
.contact-list-create-drawer__handle:focus-visible {
  background: #333;
}

.contact-list-create-drawer__header h2 {
  font-size: 13px;
}

.contact-list-create-drawer__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 21px 13px 18px;
  overflow: visible;
  background: #fafafa;
}

.contact-list-create-drawer__name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 2px;
  font-size: 12px;
  line-height: 1.2;
}

.contact-list-create-drawer__name .icon {
  width: 14px;
  height: 12px;
}

.contact-list-create-drawer__name-input {
  display: block;
  width: min(304px, 100%);
  height: 24px;
  margin-top: 7px;
  padding: 2px 8px;
  color: var(--ink);
  font-size: 10px;
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 5px;
}

.contact-list-create-drawer__name-input:focus,
.contact-list-create-drawer__name-input:focus-visible {
  border-color: #474747;
  outline: none;
  outline-offset: 0;
  box-shadow: inset 0 0 0 .5px #474747;
}

.contact-list-create-drawer__name-input[aria-invalid="true"] {
  border-color: #b3261e;
  box-shadow: 0 0 0 .5px #b3261e;
}

.contact-list-create-drawer__name-input[readonly] {
  color: #555;
  background: #f2f2f2;
  cursor: default;
}

.contact-list-create-drawer__view-type {
  min-width: 0;
  margin: 20px 0 0;
  padding: 0 4px;
  border: 0;
}

.contact-list-create-drawer__view-type legend {
  margin: 0 0 10px;
  padding: 0;
  font-size: 12px;
}

.contact-list-create-drawer__view-type > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.contact-list-create-drawer__view-type button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 23px;
  padding: 0;
  background: transparent;
  border: .5px solid transparent;
  border-radius: 4px;
}

.contact-list-create-drawer__view-type button[aria-pressed="true"] {
  background: #dedede;
  border-color: #d4d4d4;
}

.contact-list-create-drawer__view-type button:hover,
.contact-list-create-drawer__view-type button:focus-visible {
  background: var(--blue);
  border-color: #9ab5c4;
}

.contact-list-create-drawer__view-type button:disabled,
.contact-list-create-drawer__directory-row:disabled {
  color: #777;
  background: #ededed;
  cursor: not-allowed;
  opacity: .65;
}

.contact-list-create-drawer__view-type button .icon {
  width: 14px;
  max-height: 18px;
}

.contact-list-create-drawer__directory {
  display: grid;
  gap: 1px;
  margin-top: 17px;
}

.contact-list-create-drawer__directory h3 {
  margin: 9px 4px 4px;
  font-size: 12px;
  font-weight: 400;
}

.contact-list-create-drawer__directory-row,
.contact-list-drawer__menu-row,
.contact-list-drawer__link-row {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 23px;
  padding: 3px 6px;
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  line-height: 1.2;
  text-align: left;
  background: transparent;
  border: .5px solid transparent;
  border-radius: 3px;
}

.contact-list-create-drawer__directory-row > span:not(.contact-list-drawer__chevron),
.contact-list-drawer__menu-row > span:not(.contact-list-drawer__chevron) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-list-create-drawer__directory-row > .icon {
  width: 14px;
  max-height: 14px;
  margin-right: 8px;
}

.contact-list-create-drawer__directory-row.is-emphasized,
.contact-list-drawer__flyout-owner.is-open > .contact-list-create-drawer__directory-row,
.contact-list-create-drawer__directory-row:hover,
.contact-list-create-drawer__directory-row:focus-visible,
.contact-list-drawer__menu-row:hover,
.contact-list-drawer__menu-row:focus-visible {
  background: var(--blue-strong);
  border-color: transparent;
}

.contact-list-drawer__chevron {
  flex: 0 0 auto;
  margin-left: 5px;
  font-size: 15px;
  line-height: .8;
}

.contact-list-create-drawer__directory-row .contact-list-drawer__chevron,
.contact-list-drawer__menu-row .contact-list-drawer__chevron {
  margin-left: auto;
}

.contact-list-create-drawer__divider {
  height: .5px;
  margin: 8px 0 1px;
  background: #aaa;
}

.contact-list-create-form > .contact-create-form__footer {
  padding: 14px 20px 18px;
}

.contact-list-drawer__flyout-owner {
  position: relative;
  min-width: 0;
}

.contact-list-drawer__flyout {
  position: absolute;
  right: calc(100% + 6px);
  z-index: 12;
  width: 180px;
  overflow: visible;
  color: var(--ink);
  background: #fff;
  border: .5px solid #8f928f;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(27, 31, 29, .1);
  animation: contact-list-flyout-enter 120ms cubic-bezier(.22, 1, .36, 1) both;
}

.contact-list-drawer__flyout[hidden] {
  display: none;
}

.contact-list-drawer__flyout::after {
  content: "";
  position: absolute;
  top: 0;
  right: -7px;
  width: 7px;
  height: 100%;
}

.contact-list-drawer__flyout--display {
  top: -31px;
}

.business-calendar-settings-flyout {
  width: 210px;
}

.business-calendar-settings-flyout > header h3 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-list-drawer__flyout--filters {
  top: -21px;
}

.contact-list-drawer__flyout--sort {
  top: -70px;
  width: 329px;
}

.contact-list-drawer__flyout > header {
  display: flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-bottom: .5px solid #aaa;
}

.contact-list-drawer__flyout > header h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
}

.contact-list-drawer__flyout-body {
  padding: 8px;
}

.contact-list-drawer__flyout-body .contact-list-drawer__menu-row {
  min-height: 22px;
}

.contact-list-drawer__flyout-owner--nested {
  position: relative;
}

.contact-list-drawer__flyout--nested {
  top: -5px;
  right: calc(100% + 7px);
  width: 155px;
}

.contact-list-drawer__switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 24px;
  padding: 3px 6px;
  font-size: 11px;
}

.contact-list-switch {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  flex: 0 0 27px;
  width: 27px;
  height: 10.5px;
  padding: 0;
  overflow: hidden;
  color: #111;
  background: #000;
  border: 0;
  border-radius: 3px;
}

.contact-list-switch > span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 8px;
  line-height: 1;
}

.contact-list-switch__off {
  position: relative;
  color: transparent;
  background: #000;
  font-size: 0;
}

.contact-list-switch__on {
  background: var(--lime);
  border-radius: 0 2.5px 2.5px 0;
}

.contact-list-switch__on .icon {
  width: 6.5px;
  height: 5.5px;
}

.contact-list-switch[aria-checked="false"] .contact-list-switch__off {
  color: #000;
  background: #ddd;
  border-radius: 2.5px 0 0 2.5px;
}

.contact-list-switch[aria-checked="false"] .contact-list-switch__off::before,
.contact-list-switch[aria-checked="false"] .contact-list-switch__off::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 1.2px;
  background: #000;
  border-radius: 1px;
}

.contact-list-switch[aria-checked="false"] .contact-list-switch__off::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.contact-list-switch[aria-checked="false"] .contact-list-switch__off::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.contact-list-switch[aria-checked="false"] .contact-list-switch__on {
  background: #000;
  border-radius: 0;
}

.contact-list-switch[aria-checked="false"] .contact-list-switch__on .icon {
  visibility: hidden;
}

.contact-list-switch:hover,
.contact-list-switch:focus-visible {
  box-shadow: 0 0 0 1px #777;
}

.business-calendar-cell-size {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
  margin: 5px 6px 2px;
  padding-top: 7px;
  font-size: 11px;
  border-top: .5px solid #bbb;
}

.business-calendar-time-zone {
  display: grid;
  grid-template-columns: minmax(64px, 1fr) 118px;
  gap: 8px;
  align-items: center;
  margin: 5px 6px 2px;
  padding: 7px 0;
  font-size: 11px;
  border-top: .5px solid #bbb;
  border-bottom: .5px solid #bbb;
}

.business-calendar-time-zone__select.contact-create-field {
  min-width: 0;
  margin: 0;
}

.business-calendar-time-zone__select .contact-create-multiselect__toggle {
  width: 100%;
  height: 22px;
  min-width: 0;
  padding: 1px 6px;
  font-size: 9px;
  border-radius: 3px;
}

.business-calendar-time-zone__select .import-data-select__menu {
  right: 0;
  left: auto;
  width: 145px;
}

.business-calendar-cell-size output {
  font-variant-numeric: tabular-nums;
}

.business-calendar-cell-size input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  height: 14px;
  margin: 2px 0 0;
  padding: 0;
  appearance: none;
  background: transparent;
  cursor: ew-resize;
}

.business-calendar-cell-size input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  background: linear-gradient(to right, var(--blue-dark, #3986b9)
    var(--calendar-cell-size-progress), #d7d7d7 var(--calendar-cell-size-progress));
  border-radius: 999px;
}

.business-calendar-cell-size input[type="range"]::-webkit-slider-thumb {
  width: 11px;
  height: 11px;
  margin-top: -4px;
  appearance: none;
  background: #fff;
  border: 1.5px solid #111;
  border-radius: 50%;
}

.business-calendar-cell-size input[type="range"]::-moz-range-track {
  height: 3px;
  background: #d7d7d7;
  border-radius: 999px;
}

.business-calendar-cell-size input[type="range"]::-moz-range-progress {
  height: 3px;
  background: var(--blue-dark, #3986b9);
  border-radius: 999px;
}

.business-calendar-cell-size input[type="range"]::-moz-range-thumb {
  width: 11px;
  height: 11px;
  background: #fff;
  border: 1.5px solid #111;
  border-radius: 50%;
}

.business-calendar-cell-size input[type="range"]:focus-visible {
  outline: none;
}

.business-calendar-cell-size input[type="range"]:focus-visible::-webkit-slider-thumb {
  background: var(--blue);
}

.business-calendar-cell-size small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 8.5px;
}

.business-calendar-settings-actions {
  margin: 6px 6px 0;
  padding-top: 6px;
  border-top: .5px solid #bbb;
}

.business-calendar-settings-actions .contact-list-drawer__link-row {
  margin: 0;
}

.contact-list-drawer__link-row {
  display: inline-flex;
  width: auto;
  min-height: 21px;
  margin: 1px 6px 2px;
  padding: 1px 0;
  color: #527dac;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.contact-list-drawer__link-row:hover,
.contact-list-drawer__link-row:focus-visible {
  color: #265c94;
}

.contact-list-drawer__choice-list {
  display: grid;
  gap: 1px;
}

.contact-list-drawer__choice-list > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 23px;
  padding: 3px 6px;
  color: var(--ink);
  font: inherit;
  font-size: 10px;
  text-align: left;
  background: #fff;
  border: 0;
  border-radius: 3px;
}

.contact-list-drawer__choice-list > button > span:last-child {
  color: #536900;
  opacity: 0;
}

.contact-list-drawer__choice-list > button[aria-checked="true"] {
  background: var(--pale-lime);
}

.contact-list-drawer__choice-list > button[aria-checked="true"] > span:last-child {
  opacity: 1;
}

.contact-list-drawer__choice-list > button:hover,
.contact-list-drawer__choice-list > button:focus-visible {
  background: var(--blue);
}

.contact-list-drawer__sort-layout {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 13px 8px 9px;
}

.contact-list-sort-select {
  z-index: 2;
  min-width: 0;
}

.contact-list-sort-select__toggle {
  height: 25px;
  font-size: 10px;
}

.contact-list-sort-select__toggle:focus,
.contact-list-sort-select__toggle:focus-visible {
  border-color: #474747;
  outline: none;
  outline-offset: 0;
  box-shadow: inset 0 0 0 .5px #474747;
}

.contact-list-sort-select__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  display: block;
  width: 170px;
  max-height: 186px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(27, 31, 29, .1);
}

.contact-list-sort-select__search {
  position: relative;
  display: block;
  height: 28px;
  margin: 7px;
  border: .5px solid #111;
  border-radius: 6px;
}

.contact-list-sort-select__search .icon {
  position: absolute;
  top: 50%;
  left: 7px;
  width: 10px;
  height: 10px;
  transform: translateY(-50%);
  pointer-events: none;
}

.contact-list-sort-select__search input {
  width: 100%;
  height: 100%;
  padding: 0 7px 0 24px;
  font-size: 9.5px;
  background: transparent;
  border: 0;
  outline: 0;
}

.contact-list-sort-select__options {
  display: grid;
  max-height: 139px;
  padding: 2px 0 5px;
  overflow-y: auto;
  scrollbar-width: none;
}

.contact-list-sort-select__options::-webkit-scrollbar {
  display: none;
}

.contact-list-sort-select__options [role="option"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 24px;
  padding: 3px 8px;
  color: var(--ink);
  font: inherit;
  font-size: 9.5px;
  text-align: left;
  background: #fff;
  border: 0;
}

.contact-list-sort-select__options [role="option"] > .contact-list-sort-select__check {
  width: 6.5px;
  height: 5.5px;
  opacity: 0;
}

.contact-list-sort-select__options [role="option"][aria-selected="true"],
.contact-list-sort-select__options [role="option"]:hover,
.contact-list-sort-select__options [role="option"]:focus-visible {
  background: var(--pale-lime);
  outline: none;
}

.contact-list-sort-select__options [role="option"][aria-selected="true"] >
  .contact-list-sort-select__check {
  opacity: 1;
}

.contact-list-sort-select__empty {
  margin: 0;
  padding: 9px;
  color: var(--muted);
  font-size: 9.5px;
  text-align: center;
}

.contact-list-drawer__sort-directions {
  display: grid;
  gap: 8px;
}

.contact-list-drawer__sort-directions .contact-list-drawer__switch-row {
  padding: 0;
}

.contacts-panel.is-single-tone .contacts-table tbody tr:nth-child(odd):not(.is-selected) th,
.contacts-panel.is-single-tone .contacts-table tbody tr:nth-child(odd):not(.is-selected) td {
  background: #fafafa;
  border-color: #696969;
}

.contacts-panel.is-single-tone .contacts-table tbody tr:nth-child(odd).is-selected th,
.contacts-panel.is-single-tone .contacts-table tbody tr:nth-child(odd).is-selected td {
  background:
    linear-gradient(#e5e9ce, #f1f3d8) center / 100% 24px no-repeat,
    #fafafa;
}

.contacts-panel.is-single-tone .contacts-table__viewport-row-cap--odd::before {
  background: #fafafa;
  border-color: #696969;
}

.contacts-panel.is-single-tone .contacts-table__viewport-row-cap--odd.is-selected::before {
  background:
    linear-gradient(#e5e9ce, #f1f3d8) center / 100% 24px no-repeat,
    #fafafa;
  border-color: #474747;
}

@keyframes contact-list-flyout-enter {
  from {
    opacity: 0;
    transform: translateX(4px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 767px) {
  .contact-list-create-drawer {
    overflow: hidden;
  }

  .contact-list-create-drawer__body {
    overflow-y: auto;
  }

  .contact-list-drawer__flyout,
  .contact-list-drawer__flyout--nested {
    position: fixed;
    top: 96px;
    right: 8px;
    left: 8px;
    width: auto;
    max-height: calc(100dvh - 112px);
    overflow-y: auto;
  }

  .contact-list-drawer__flyout--nested {
    top: 0;
    right: 0;
    left: 0;
    z-index: 22;
    width: 100%;
  }

  .contact-list-drawer__flyout::after {
    display: none;
  }

  .contact-list-drawer__sort-layout {
    grid-template-columns: minmax(0, 1fr) 126px;
  }
}

@media (max-width: 389px) {
  .contact-list-drawer__sort-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-list-sort-select__panel,
  .contact-list-sort-select__toggle {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-list-drawer__flyout {
    animation: none;
  }
}

/* Edit columns prototype */
.edit-columns-dialog {
  --edit-columns-workspace-center-shift: 110px;
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  background: transparent;
  border: 0;
}

.edit-columns-dialog::backdrop {
  background: rgba(245, 245, 245, .72);
}

.edit-columns-modal {
  --edit-columns-modal-scale: .8;
  position: absolute;
  top: 50%;
  left: calc(50% + var(--edit-columns-workspace-center-shift));
  display: flex;
  flex-direction: column;
  width: min(calc(100vw - 100px), 1494px);
  height: min(calc(100dvh - 88px), 804px);
  min-height: 440px;
  overflow: hidden;
  background: #fdfdfd;
  border: 1px solid #a7a7a7;
  border-radius: 9px;
  transform: translate(-50%, -50%) scale(var(--edit-columns-modal-scale));
  transform-origin: center;
  animation: edit-columns-modal-enter 160ms cubic-bezier(.22, 1, .36, 1) both;
}

@media (max-width: 1439px) {
  .edit-columns-dialog {
    --edit-columns-workspace-center-shift: 102px;
  }
}

@media (max-width: 1179px) {
  .edit-columns-dialog {
    --edit-columns-workspace-center-shift: 0px;
  }
}

@keyframes edit-columns-modal-enter {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 6px)) scale(var(--edit-columns-modal-scale));
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(var(--edit-columns-modal-scale));
  }
}

.edit-columns-modal__header {
  display: flex;
  align-items: center;
  flex: 0 0 65px;
  min-height: 65px;
  padding: 0 20px;
  border-bottom: 1px solid #aaa;
}

.edit-columns-modal__header h2 {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edit-columns-modal__content {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(360px, .75fr) minmax(480px, 1fr);
  gap: 22px;
  min-height: 0;
  padding: 22px 21px 28px;
}

.edit-columns-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #aaa;
  border-radius: 9px;
}

.edit-columns-panel__header {
  display: flex;
  align-items: center;
  flex: 0 0 43px;
  min-height: 43px;
  padding: 0 25px;
  border-bottom: 1px solid #aaa;
}

.edit-columns-panel__header h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.2;
}

.edit-columns-panel__body {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.edit-columns-search {
  position: relative;
  flex: 0 0 42px;
  height: 42px;
  margin: 15px 58px 22px 17px;
}

.edit-columns-search input {
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 0 13px 0 40px;
  color: #111;
  font: inherit;
  font-size: 16px;
  background: #fff;
  border: 1px solid #111;
  border-radius: 13px;
}

.edit-columns-search input:focus,
.edit-columns-search input:focus-visible {
  outline: none;
  outline-offset: 0;
  box-shadow: inset 0 0 0 .5px #474747;
}

.edit-columns-search input::placeholder {
  color: #111;
  opacity: 1;
}

.edit-columns-search input::-webkit-search-cancel-button {
  display: none;
}

.edit-columns-search__icon {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 15px;
  width: 16px;
  height: 16px;
  pointer-events: none;
  transform: translateY(-50%);
}

.edit-columns-directory-scroll,
.edit-columns-active-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.edit-columns-directory-scroll::-webkit-scrollbar,
.edit-columns-active-scroll::-webkit-scrollbar {
  display: none;
}

.edit-columns-directory-scroll {
  padding: 0 37px 18px 0;
}

.edit-columns-directory-group[hidden],
.edit-columns-directory-group [hidden],
.edit-columns-directory-option[hidden],
.edit-columns-directory-empty[hidden] {
  display: none;
}

.edit-columns-directory-group__heading {
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr);
  align-items: center;
  min-height: 31px;
  padding-left: 10px;
  background: #d6d6d6;
  border-top: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
}

.edit-columns-directory-group:first-child .edit-columns-directory-group__heading {
  border-top: 0;
}

.edit-columns-directory-group__heading input,
.edit-columns-directory-group li input {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 18px;
  margin: 0;
  background: #fff;
  border: 1px solid #111;
  border-radius: 3px;
  cursor: pointer;
}

.edit-columns-directory-group__heading input:checked,
.edit-columns-directory-group li input:checked {
  background: #d1e9ff url("../general, reusable UI assets for pragtical/check.svg")
    center / 10px 8px no-repeat;
}

.edit-columns-directory-group__heading input:disabled,
.edit-columns-directory-group li input:disabled {
  cursor: not-allowed;
  opacity: .48;
}

.edit-columns-directory-group__heading input:indeterminate {
  background: linear-gradient(#1d1b20, #1d1b20) center / 9px 2px no-repeat, #d1e9ff;
}

.edit-columns-directory-group__heading button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 29px;
  padding: 0 10px 0 0;
  color: #111;
  font: inherit;
  font-size: 16px;
  text-align: left;
  background: transparent;
  border: 0;
}

.edit-columns-directory-group__caret {
  width: 8px;
  height: 6px;
  transition: transform 120ms ease;
}

.edit-columns-directory-group__heading button[aria-expanded="true"]
  .edit-columns-directory-group__caret {
  transform: rotate(180deg);
}

.edit-columns-directory-group ul,
.edit-columns-active-scroll ol {
  padding: 0;
  margin: 0;
  list-style: none;
}

.edit-columns-directory-group ul {
  padding: 14px 0 9px 36px;
}

.edit-columns-directory-group li {
  min-height: 40px;
}

.edit-columns-directory-group li label {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 4px 8px 4px 0;
  cursor: pointer;
}

.edit-columns-directory-group li.is-planned label {
  align-items: start;
  cursor: not-allowed;
}

.edit-columns-directory-group li.is-planned input {
  margin-top: 7px;
}

.edit-columns-directory-option__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 7px;
  width: 100%;
  min-width: 0;
}

.edit-columns-directory-option__availability {
  justify-self: start;
  padding: 2px 6px;
  color: #555;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  background: #f1f1ed;
  border: 1px solid #b9b9b4;
  border-radius: 8px;
}

.edit-columns-directory-option__explanation {
  grid-column: 1 / -1;
  color: #696969;
  font-size: 10px;
  line-height: 1.25;
}

.edit-columns-directory-option:focus-within {
  background: #f5faff;
  outline: 1px solid #6a6a6a;
  outline-offset: -1px;
}

.edit-columns-field-token {
  --edit-columns-token-counter-scale: 1.25;
  min-width: 0;
  overflow: visible;
  zoom: var(--edit-columns-token-counter-scale);
}

.edit-columns-directory-empty {
  margin: 20px 36px;
  color: var(--muted);
  font-size: 14px;
}

.edit-columns-scroll-spacer {
  width: 1px;
  min-height: 0;
  pointer-events: none;
}

.edit-columns-panel__scrollbar {
  position: absolute;
  z-index: 2;
  right: 13px;
  width: 13px;
}

.edit-columns-panel--directory .edit-columns-panel__scrollbar {
  top: 19px;
  bottom: 19px;
}

.edit-columns-panel--active .edit-columns-panel__scrollbar {
  top: 21px;
  bottom: 21px;
}

.edit-columns-panel__scrollbar .scrollbar-ui__handle {
  right: 3px;
  width: 6px;
  height: 72px;
}

.edit-columns-active-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 84px;
  gap: 17px;
  min-height: 84px;
  padding: 0 47px 0 20px;
  font-size: 16px;
}

.edit-columns-anchor-select {
  position: relative;
  display: block;
  width: 64px;
  height: 38px;
}

.edit-columns-anchor-select select {
  width: 100%;
  height: 100%;
  padding: 0 27px 0 12px;
  color: #111;
  font: inherit;
  font-size: 16px;
  appearance: none;
  background: #fff;
  border: 2px solid #aaa;
  border-radius: 6px;
}

.edit-columns-anchor-select .icon {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 8px;
  height: 6px;
  pointer-events: none;
  transform: translateY(-50%);
}

.edit-columns-active-scroll {
  padding: 0 46px 20px 35px;
}

.edit-columns-active-row {
  display: grid;
  grid-template-columns: 39px minmax(0, 1fr) 40px;
  align-items: center;
  min-width: 0;
  height: 68px;
  margin-bottom: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #aaa;
  border-radius: 11px;
  cursor: grab;
  transition: opacity 120ms ease, box-shadow 120ms ease;
}

.edit-columns-active-row:active {
  cursor: grabbing;
}

.edit-columns-active-row.is-dragging {
  opacity: .55;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .14);
}

.edit-columns-active-row__drag {
  display: grid;
  align-self: stretch;
  place-items: center;
  cursor: grab;
}

.edit-columns-active-row__drag .icon {
  width: 6px;
  height: 24px;
}

.edit-columns-active-row__field {
  display: flex;
  align-items: center;
  align-self: center;
  justify-self: start;
  width: min(300px, 100%);
  height: 52px;
  min-width: 0;
  padding-left: 7px;
  overflow: hidden;
  background: linear-gradient(90deg, #ededed, #dedede);
  border: 2px solid #c1c1c1;
  border-radius: 11px;
}

.edit-columns-active-row__field .edit-columns-field-token {
  max-width: calc(100% - 7px);
}

.edit-columns-active-row__remove {
  align-self: stretch;
  width: 40px;
  padding: 0;
  color: #111;
  font: inherit;
  font-size: 25px;
  line-height: 1;
  background: var(--pale-lime);
  border: 0;
  border-left: 1px solid #f1f3df;
}

.edit-columns-active-row__remove:hover {
  background: var(--lime);
}

@media (max-width: 1023px) {
  .edit-columns-modal {
    --edit-columns-modal-scale: 1;
    width: calc(100vw - 24px);
    height: calc(100dvh - 24px);
    min-height: 0;
  }

  .edit-columns-field-token {
    --edit-columns-token-counter-scale: 1;
  }

  .edit-columns-modal__header {
    flex-basis: 48px;
    min-height: 48px;
    padding-inline: 14px;
  }

  .edit-columns-modal__header h2 {
    font-size: 17px;
  }

  .edit-columns-modal__content {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
  }

  .edit-columns-panel__header {
    flex-basis: 37px;
    min-height: 37px;
    padding-inline: 14px;
  }

  .edit-columns-panel__header h3,
  .edit-columns-directory-group__heading button,
  .edit-columns-search input,
  .edit-columns-active-toolbar,
  .edit-columns-anchor-select select {
    font-size: 13px;
  }

  .edit-columns-search {
    flex-basis: 36px;
    height: 36px;
    margin: 10px 40px 10px 10px;
  }

  .edit-columns-active-toolbar {
    flex-basis: 48px;
    min-height: 48px;
    padding: 0 36px 0 10px;
  }

  .edit-columns-anchor-select {
    width: 55px;
    height: 32px;
  }

  .edit-columns-active-scroll {
    padding: 0 34px 10px 10px;
  }

  .edit-columns-active-row {
    grid-template-columns: 28px minmax(0, 1fr) 35px;
    height: 56px;
    margin-bottom: 8px;
  }

  .edit-columns-active-row__field {
    width: min(300px, 100%);
    height: 42px;
  }

  .edit-columns-active-row__remove {
    width: 35px;
    font-size: 21px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .edit-columns-modal {
    animation: none;
  }

  .edit-columns-directory-group__caret,
  .edit-columns-active-row {
    transition: none;
  }
}

/* Create contact drawer */
.record-return-link { display: inline-flex; flex: 0 0 auto; align-items: center; margin: 8px 12px; color: var(--ink); font-size: 11px; }
.contact-create-dialog {
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  background: transparent;
  border: 0;
}

.contact-create-dialog::backdrop {
  background: transparent;
}

.contact-create-drawer {
  position: absolute;
  top: 35px;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(358px, 100vw);
  overflow: hidden;
  background: #fafafa;
  border: .5px solid #ccc;
  animation: contact-create-drawer-enter 180ms cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes contact-create-drawer-enter {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.contact-create-drawer__header {
  display: flex;
  align-items: center;
  flex: 0 0 37px;
  min-height: 37px;
  padding: 0 12px;
  background: #fafafa;
  border-bottom: .5px solid #ccc;
}

.contact-create-drawer__header h2 {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
}

.contact-edit-entry-picker {
  position: relative;
  z-index: 12;
  display: grid;
  flex: 0 0 auto;
  gap: 4.8px;
  width: calc(100% - 40px);
  margin: 12px 20px 0;
}

.contact-edit-entry-picker[hidden] {
  display: none;
}

.contact-edit-entry-picker__context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  font-size: 10.8px;
  line-height: 1.2;
}

.contact-edit-entry-picker__context [data-contact-edit-entry-count] {
  flex: 0 0 auto;
  color: #5c5c5c;
  font-size: 9.6px;
}

.contact-edit-entry-picker .contact-edit-entry-picker__toggle {
  height: 31.2px;
}

.contact-edit-entry-picker .contact-edit-entry-picker__menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  z-index: 2;
  max-height: min(220px, calc(100dvh - 150px));
  box-shadow: 0 5px 12px rgb(0 0 0 / 14%);
}

.contact-edit-entry-picker .contact-edit-entry-picker__menu [role="option"] {
  min-height: 40px;
  padding: 5px 7px;
}

.contact-edit-entry-picker__option-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.contact-edit-entry-picker__option-name,
.contact-edit-entry-picker__option-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-edit-entry-picker__option-copy small {
  color: #656565;
  font-size: 9.2px;
}

.contact-create-dialog[data-contact-drawer-mode="edit"]
  .contact-edit-entry-picker:not([hidden]) + .contact-create-form {
  padding-top: 12px;
}

.contact-create-form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding: 20px 20px 18px;
  overflow: hidden;
  overscroll-behavior: contain;
}

.contact-create-form__fields {
  flex: 1 1 auto;
  min-height: 0;
  padding-bottom: 16.8px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.contact-create-form__fields::-webkit-scrollbar {
  display: none;
}

.contact-create-form__dynamic-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7.2px;
  width: 100%;
  min-width: 0;
}

.contact-create-field {
  display: grid;
  gap: 4.8px;
  min-width: 0;
}

.contact-create-field--wide {
  width: 100%;
  max-width: 364.8px;
}

.contact-create-field label {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 3.6px;
  min-height: 14.4px;
  font-size: 10.8px;
  line-height: 1.15;
}

.contact-create-field label .icon {
  width: 10.8px;
  max-height: 12px;
}

.contact-create-field__label {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 14.4px;
  font-size: 10.8px;
  line-height: 1.15;
}

.contact-create-field input,
.contact-create-field select {
  width: 100%;
  height: 28.8px;
  min-width: 0;
  padding: 2.4px 8.4px;
  color: var(--ink);
  font-size: 10.8px;
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 4.8px;
}

.contact-create-form input:not([type="checkbox"]):focus-visible,
.contact-create-form select:focus-visible,
.contact-create-single-select__toggle:focus-visible {
  outline: none;
}

.contact-create-field input[aria-invalid="true"],
.contact-create-field select[aria-invalid="true"] {
  border-color: #b3261e;
  box-shadow: 0 0 0 .5px #b3261e;
}

.contact-create-phone-control:has(input[aria-invalid="true"]) {
  border-color: #b3261e;
  box-shadow: 0 0 0 .5px #b3261e;
}

.contact-create-phone-control input[aria-invalid="true"] {
  border: 0;
  box-shadow: none;
}

.contact-create-field select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 26.4px;
  background-image: url("../general, reusable UI assets for pragtical/drop-down arrow.svg");
  background-repeat: no-repeat;
  background-position: right 8.4px center;
  background-size: 7.2px 4.8px;
}

.contact-create-add-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 27.648px;
  height: 26.496px;
  margin-top: 5.76px;
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 9.216px;
  line-height: 1;
  text-align: left;
  background: var(--pale-lime);
  border: .5px solid #aeb49d;
  border-radius: 2.304px;
}

.contact-create-add-field--email {
  width: 182.016px;
}

.contact-create-add-field--phone {
  width: 200.448px;
}

.contact-create-add-field > span {
  display: flex;
  align-items: center;
  padding: 0 9.216px;
}

.contact-create-add-field > span:last-child {
  justify-content: center;
  padding: 0;
  font-size: 12.9024px;
  border-left: .5px solid #aeb49d;
}

.contact-create-add-field:disabled {
  color: #777;
  background: #f1f1ed;
  border-color: #c8cac8;
  cursor: not-allowed;
  opacity: 1;
}

.contact-create-add-field:disabled > span:last-child {
  color: #777;
  border-left-color: #c8cac8;
}

.contact-create-form__dynamic-fields--phone {
  margin-top: 13.2px;
}

.contact-create-phone-control {
  display: grid;
  grid-template-columns: 56.4px 37.2px minmax(0, 1fr);
  height: 28.8px;
  overflow: hidden;
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 4.8px;
}

.contact-create-phone-control__country {
  display: flex;
  align-items: center;
  justify-content: space-around;
  min-width: 0;
  padding: 0 6px;
  font-size: 9.6px;
  background: #fff;
  border: 0;
  border-right: .5px solid #aaa;
}

.contact-create-phone-control__flag {
  flex: 0 0 auto;
  width: 19px;
  height: 12px;
}

.contact-create-phone-control__caret {
  flex: 0 0 auto;
  width: 6px;
  height: auto;
}

.contact-create-phone-control__prefix {
  display: grid;
  place-items: center;
  font-size: 9.6px;
  background: var(--blue-strong);
  border-right: .5px solid #aaa;
}

.contact-create-phone-control input {
  height: 100%;
  padding: 2.4px 8.4px;
  border: 0;
  border-radius: 0;
}

.contact-create-name-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10.8px;
  width: 368.4px;
  max-width: 100%;
  margin-top: 19.2px;
}

.contact-create-business-field {
  margin-top: 20.4px;
}

.contact-create-field--select {
  width: 218.4px;
  max-width: 100%;
  margin-top: 20.4px;
}

.contact-create-field--short-select {
  width: 148.8px;
}

.contact-create-metadata-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20.4px;
  width: 100%;
  min-width: 0;
  margin-top: 20.4px;
}

.contact-create-multiselect {
  position: relative;
}

.contact-create-multiselect__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 28.8px;
  min-width: 0;
  padding: 2.4px 8.4px;
  color: var(--ink);
  font-size: 10.8px;
  text-align: left;
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 4.8px;
}

.contact-create-multiselect__toggle > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-create-form .contact-create-multiselect__toggle:focus-visible {
  border-color: #474747;
  outline: none;
  box-shadow: inset 0 0 0 .5px #474747;
}

.contact-create-multiselect__caret {
  width: 7.2px;
  height: 4.8px;
  flex: 0 0 auto;
  transition: transform 120ms ease;
}

.contact-create-multiselect.is-open .contact-create-multiselect__caret {
  transform: rotate(180deg);
}

.contact-create-multiselect.is-invalid .contact-create-multiselect__toggle {
  border-color: #b3261e;
  box-shadow: 0 0 0 .5px #b3261e;
}

.contact-create-multiselect__panel {
  display: grid;
  gap: 6px;
  max-height: 176px;
  padding: 6px;
  overflow-y: auto;
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 4.8px;
}

.contact-create-multiselect__panel[hidden] {
  display: none;
}

.contact-create-single-select__menu {
  display: grid;
  gap: 2px;
  max-height: 154px;
  padding: 3px;
  overflow-y: auto;
  scrollbar-width: none;
}

.contact-create-single-select__toggle {
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 4.8px;
}

.contact-create-single-select > [data-contact-single-select-value][hidden] {
  display: none;
}

.contact-create-single-select__menu[hidden] {
  display: none;
}

.contact-create-single-select__menu::-webkit-scrollbar {
  display: none;
}

.contact-create-single-select__menu [role="option"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 27px;
  padding: 3px 6px;
  color: var(--ink);
  font: inherit;
  font-size: 10.8px;
  line-height: 1.2;
  text-align: left;
  background: #fff;
  border: 0;
  border-radius: 3.6px;
}

.contact-create-single-select__menu [role="option"] > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-create-single-select__check {
  width: 7.2px;
  height: 6px;
  flex: 0 0 7.2px;
  opacity: 0;
}

.contact-create-single-select__menu [role="option"][aria-selected="true"] {
  background: var(--pale-lime);
}

.contact-create-single-select__menu [role="option"][aria-selected="true"]
  .contact-create-single-select__check {
  opacity: 1;
}

.contact-create-single-select__menu [role="option"]:hover,
.contact-create-single-select__menu [role="option"]:focus-visible {
  background: var(--blue);
  outline: none;
  box-shadow: none;
}

.contact-occupation-picker__menu {
  gap: 6px;
  max-height: 224px;
  padding: 6px;
  overflow: hidden;
}

.contact-occupation-picker__search {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 2px 6px;
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 4.8px;
}

.contact-occupation-picker__search:focus-within {
  border-color: #474747;
  box-shadow: inset 0 0 0 .5px #474747;
}

.contact-occupation-picker__search-icon {
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
}

.contact-create-field .contact-occupation-picker__search input {
  width: 100%;
  height: 24px;
  min-width: 0;
  padding: 0;
  color: var(--ink);
  font: inherit;
  font-size: 10.8px;
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: 0;
}

.contact-occupation-picker__search input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.contact-occupation-picker__search input::-webkit-search-decoration,
.contact-occupation-picker__search input::-webkit-search-cancel-button {
  display: none;
}

.contact-occupation-picker__options {
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 2px;
  max-height: 154px;
  padding: 0;
  overflow-y: auto;
  scrollbar-width: none;
}

.contact-occupation-picker__options::-webkit-scrollbar {
  display: none;
}

.contact-occupation-picker__options [role="option"][hidden] {
  display: none;
}

.contact-create-single-select__menu .contact-occupation-picker__create-action {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  min-height: 31px;
  margin-bottom: 4px;
  padding: 3px 6px;
  color: var(--ink);
  font: inherit;
  font-size: 10.8px;
  line-height: 1.2;
  text-align: left;
  background: var(--pale-lime);
  border: 0;
  border-bottom: .5px solid #ccc;
  border-radius: 3.6px 3.6px 0 0;
}

.contact-create-single-select__menu .contact-occupation-picker__create-action:hover,
.contact-create-single-select__menu .contact-occupation-picker__create-action:focus-visible {
  background: var(--blue);
  outline: none;
  box-shadow: inset 0 0 0 .5px #474747;
}

.contact-occupation-picker__create-action > span {
  flex: 1 1 auto;
}

.contact-occupation-picker__create-icon {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
}

.contact-occupation-picker__empty {
  margin: 0;
  padding: 4px 6px;
  color: var(--muted);
  font-size: 9.6px;
  line-height: 1.3;
}

.contact-occupation-picker__empty[hidden],
.contact-occupation-create-panel[hidden],
.contact-occupation-create-error[hidden],
.contact-occupation-create-warning[hidden] {
  display: none;
}

.contact-occupation-create-panel {
  display: grid;
  gap: 6px;
  padding: 8px;
  background: #fff;
  border: .5px solid #ccc;
  border-radius: 4.8px;
}

.contact-occupation-create-panel__actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.contact-occupation-create-panel__actions button {
  min-height: 28.8px;
  padding: 2.4px 9.6px;
  color: var(--ink);
  font: inherit;
  font-size: 9.6px;
  background: #fff;
  border: .5px solid #ccc;
  border-radius: 4.8px;
}

.contact-occupation-create-panel__actions [data-contact-occupation-create-submit] {
  background: var(--pale-lime);
  border-color: #c7cca8;
}

.contact-occupation-create-panel__actions button:hover,
.contact-occupation-create-panel__actions button:focus-visible {
  background: var(--blue);
}

.contact-occupation-create-error,
.contact-occupation-create-warning {
  margin: 0;
  font-size: 9.6px;
  line-height: 1.3;
}

.contact-occupation-create-error {
  color: #b3261e;
}

.contact-occupation-create-warning {
  color: var(--muted);
}

.contact-create-multiselect__panel ul {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-create-multiselect__panel li {
  border-radius: 3.6px;
}

.contact-create-multiselect__panel li.is-selected {
  background: var(--pale-lime);
}

.contact-create-multiselect__panel li label {
  display: flex;
  align-items: center;
  gap: 7.2px;
  width: 100%;
  min-height: 27px;
  padding: 3px 6px;
  cursor: pointer;
}

.contact-create-multiselect__panel input[type="checkbox"] {
  width: 14.4px;
  height: 14.4px;
  flex: 0 0 14.4px;
  padding: 0;
  accent-color: #257da3;
  border-radius: 3px;
}

.contact-create-multiselect__custom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  border-top: .5px solid #ccc;
  padding-top: 6px;
}

.contact-create-multiselect__custom input {
  height: 27px;
  border-radius: 4.8px 0 0 4.8px;
}

.contact-create-multiselect__custom button {
  height: 27px;
  padding: 0 6px;
  font-size: 9.6px;
  background: var(--pale-lime);
  border: .5px solid #aeb49d;
  border-left: 0;
  border-radius: 0 4.8px 4.8px 0;
}

.contact-create-form__footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8.4px;
  flex: 0 0 auto;
  width: 100%;
  margin-top: 0;
  padding: 16.8px 7.2px 0;
  background: #fafafa;
  border-top: .5px solid #ccc;
}

.contact-create-form__footer button {
  height: 28.8px;
  min-height: 28.8px;
  padding: 2.4px 9.6px;
  color: var(--ink);
  font-size: 9.6px;
  white-space: nowrap;
  background: var(--pale-lime);
  border: .5px solid #c7cca8;
  border-radius: 4.8px;
}

.contact-create-form__footer button:first-child {
  min-width: 64.8px;
}

.contact-create-form__footer button[value="create-another"] {
  min-width: 157.2px;
}

.contact-create-form__footer .contact-create-form__cancel {
  min-width: 63.6px;
  background: #fff;
  border-color: #ccc;
}

@media (max-width: 767px) {
  .contact-create-drawer,
  .advanced-filters-drawer {
    top: 48px;
    width: 100vw;
  }

  .advanced-filter-directory {
    top: 91px;
    right: 8px;
    left: 8px;
    width: auto;
    max-width: none;
    height: min(262px, calc(100dvh - 107px));
  }

  .advanced-filters-form__fields {
    padding: 10px;
  }

  .advanced-filter-groups,
  [data-advanced-filter-groups] {
    gap: 0;
  }

  .advanced-filter-builder-menu,
  .advanced-filter-custom-menu,
  [data-advanced-filter-builder-menu] {
    width: min(var(--advanced-filter-menu-width, 250px), calc(100vw - 16px));
    max-height: calc(100dvh - 16px);
  }
}

@media (max-width: 359px) {
  .contact-create-form__footer {
    gap: 6px;
  }

  .contact-create-form__footer button[value="create-another"] {
    flex: 1 1 auto;
    min-width: 0;
    padding-inline: 6px;
  }

  .advanced-filter-group__header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px;
    padding-inline: 6px;
  }

  .advanced-filter-group__header-tools,
  .advanced-filter-group__actions {
    gap: 0;
  }

  .advanced-filter-group__logic,
  .advanced-filter-groups__logic,
  [data-advanced-filter-group-logic] {
    min-width: 0;
    padding: 0;
  }

  .advanced-filter-group__body {
    padding-inline: 7px;
  }

  .advanced-filter-group__conditions {
    padding-left: 0;
  }

  .advanced-filter-condition,
  [data-advanced-filter-condition] {
    padding: 7px;
  }

  .advanced-filter-group__add,
  .advanced-filter-builder__actions,
  .advanced-filter-builder-actions,
  [data-advanced-filter-builder-actions] {
    align-items: stretch;
    flex-direction: column;
  }

  .advanced-filter-group__add-filter,
  .advanced-filter-builder__add-group,
  [data-advanced-filter-add-condition],
  [data-advanced-filter-add-group] {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-create-drawer,
  .advanced-filters-drawer,
  .advanced-filter-directory {
    animation: none;
  }

  .advanced-filter-group__caret,
  .advanced-filter-condition__caret,
  .advanced-filter-condition__control-caret,
  .advanced-filter-control__caret,
  [data-advanced-filter-field-toggle] > .icon:last-child,
  [data-advanced-filter-operator-toggle] > .icon:last-child,
  [data-advanced-filter-value-toggle] > .icon:last-child,
  [data-advanced-filter-condition-field] > .icon:last-child,
  [data-advanced-filter-condition-operator-toggle] > .icon:last-child,
  [data-advanced-filter-condition-value-toggle] > .icon:last-child {
    transition: none;
  }
}

/* Keep list-setting flyouts outside the reused drawer's clipping boundary. */
.contact-create-drawer.contact-list-create-drawer {
  overflow: visible;
}

.contact-list-create-drawer__header h2 {
  font-size: 13px;
}

.contact-list-sort-select .contact-list-sort-select__toggle {
  height: 25px;
  font-size: 10px;
}

.contact-list-sort-select .contact-list-sort-select__panel {
  max-height: 186px;
  padding: 0;
  overflow: hidden;
}

.contact-list-sort-select .contact-list-sort-select__panel[hidden] {
  display: none;
}

@media (max-width: 767px) {
  .contact-create-drawer.contact-list-create-drawer {
    overflow: hidden;
  }
}

.icon.board-view-icon {
  scale: 1;
  transform-origin: center;
}

/* Contact-list sharing reuses the drawer flyout and contact single-select systems. */
.contact-list-drawer__flyout--sharing {
  top: -172px;
  width: 313px;
  min-height: 0;
}

.contact-list-sharing {
  padding: 12px 12px 12px;
  overflow: visible;
}

.contact-list-sharing__modes {
  display: grid;
  gap: 4px;
}

.contact-list-sharing__mode-row {
  display: grid;
  grid-template-columns: minmax(0, 206px) 67px;
  gap: 8px;
  align-items: center;
  min-height: 24px;
}

.contact-list-sharing__mode {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  min-height: 20px;
  padding: 3px 6px;
  color: #aaa;
  font: inherit;
  font-size: 11px;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 3px;
}

.contact-list-sharing__mode[aria-checked="true"] {
  color: var(--ink);
  background: var(--pale-lime);
}

.contact-list-sharing__mode[aria-checked="false"] {
  color: #aaa;
}

.contact-list-sharing__mode:hover,
.contact-list-sharing__mode:focus-visible {
  color: var(--ink);
  background: var(--blue);
  outline: none;
}

.contact-list-sharing__mode-check {
  display: grid;
  place-items: center;
  flex: 0 0 11px;
  width: 11px;
  height: 11px;
  background: #fff;
  border: .75px solid #111;
  border-radius: 2px;
}

.contact-list-sharing__mode-check .icon {
  width: 7px;
  height: 6px;
  opacity: 0;
}

.contact-list-sharing__mode[aria-checked="true"] .contact-list-sharing__mode-check .icon {
  opacity: 1;
}

.contact-list-sharing__permission,
.contact-list-sharing__permission-control {
  min-width: 0;
  width: 100%;
}

.contact-list-sharing__permission-control.contact-create-field--select {
  max-width: none;
  margin-top: 0;
}

.contact-list-sharing__permission-control .contact-create-single-select__toggle {
  height: 22px;
  padding: 2px 3px;
  color: #527dac;
  font-size: 10.5px;
  background: transparent;
  border: 0;
  border-radius: 3px;
}

.contact-list-sharing__permission-control .contact-create-multiselect__caret {
  width: 6px;
  height: 4px;
}

.contact-list-sharing__permission-control .contact-create-single-select__toggle:hover,
.contact-list-sharing__permission-control .contact-create-single-select__toggle:focus-visible {
  background: var(--blue);
  border: 0;
  outline: none;
  box-shadow: none;
}

.contact-list-sharing__permission-control .contact-create-single-select__toggle:disabled {
  color: #aaa;
  cursor: default;
}

.contact-list-sharing__permission-control .contact-create-single-select__toggle:disabled
  .contact-create-multiselect__caret {
  opacity: .35;
}

.contact-list-sharing__permission-control .contact-create-single-select__menu {
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  left: 0;
  z-index: 24;
  max-height: none;
  padding: 3px;
  background: #fff;
  border: .5px solid #aaa;
  box-shadow: 0 4px 14px rgba(27, 31, 29, .1);
}

.contact-list-sharing__permission-control .contact-create-single-select__menu [role="option"] {
  min-height: 23px;
  padding: 3px 5px;
  font-size: 10px;
}

.contact-list-sharing__selected-directory {
  margin-top: 9px;
}

.contact-list-sharing__selected-directory[hidden] {
  display: none;
}

.contact-list-sharing__selected-directory h4 {
  margin: 0 0 8px 4px;
  font-size: 12px;
  font-weight: 400;
}

.contact-list-sharing__user-picker {
  position: relative;
  z-index: 2;
  width: 213px;
}

.contact-list-sharing__user-toggle.contact-create-multiselect__toggle {
  height: 22px;
  padding: 2px 8px;
  font-size: 10.5px;
  background: #fff;
  border-color: #111;
  border-radius: 6px;
}

.contact-list-sharing__user-toggle:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 .5px #111;
}

.contact-list-sharing__directory {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 32;
  width: 229px;
  height: 185px;
  overflow: hidden;
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 6px;
  box-shadow: 0 7px 18px rgba(27, 31, 29, .14);
}

.contact-list-sharing__directory[hidden] {
  display: none;
}

.contact-list-sharing__search {
  position: relative;
  display: block;
  height: 29px;
  margin: 8px 7px 4px;
  border: .5px solid #111;
  border-radius: 6px;
}

.contact-list-sharing__search .icon {
  position: absolute;
  top: 50%;
  left: 8px;
  width: 10px;
  height: 10px;
  transform: translateY(-50%);
  pointer-events: none;
}

.contact-list-sharing__search input {
  width: 100%;
  height: 100%;
  padding: 0 8px 0 27px;
  color: var(--ink);
  font: inherit;
  font-size: 10px;
  background: transparent;
  border: 0;
  outline: 0;
}

.contact-list-sharing__members {
  display: grid;
  align-content: start;
  max-height: 139px;
  padding: 0 7px 7px;
  overflow-y: auto;
  scrollbar-width: none;
}

.contact-list-sharing__members::-webkit-scrollbar {
  display: none;
}

.contact-list-sharing__member-option {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr) 7px;
  gap: 6px;
  align-items: center;
  width: 100%;
  min-height: 23px;
  padding: 3px 5px;
  color: var(--ink);
  font: inherit;
  font-size: 10.5px;
  text-align: left;
  background: #fff;
  border: 0;
  border-radius: 3px;
}

.contact-list-sharing__member-option[hidden] {
  display: none;
}

.contact-list-sharing__member-option > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-list-sharing__avatar {
  width: 14px;
  height: 14px;
}

.contact-list-sharing__member-check {
  width: 7px;
  height: 6px;
  opacity: 0;
}

.contact-list-sharing__member-option[aria-selected="true"] {
  background: var(--pale-lime);
}

.contact-list-sharing__member-option[aria-selected="true"] .contact-list-sharing__member-check {
  opacity: 1;
}

.contact-list-sharing__member-option:hover,
.contact-list-sharing__member-option:focus-visible {
  background: var(--blue);
  outline: none;
}

.contact-list-sharing__empty {
  margin: 9px;
  color: var(--muted);
  font-size: 10px;
  text-align: center;
}

.contact-list-sharing__selected-users {
  display: grid;
  gap: 7px;
  width: 100%;
  margin-top: 10px;
}

.contact-list-sharing__selected-users[hidden],
.contact-list-sharing__selected-user[hidden] {
  display: none;
}

.contact-list-sharing__selected-user {
  position: relative;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) 61px 18px;
  gap: 6px;
  align-items: center;
  width: 100%;
  min-height: 31px;
  padding: 5px 6px;
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 6px;
}

.contact-list-sharing__selected-user-avatar {
  width: 14px;
  height: 14px;
}

.contact-list-sharing__selected-user-name {
  min-width: 0;
  overflow: hidden;
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-list-sharing__member-permission,
.contact-list-sharing__member-permission-control {
  min-width: 0;
  width: 100%;
}

.contact-list-sharing__member-permission-control.contact-create-field--select {
  max-width: none;
  margin-top: 0;
}

.contact-list-sharing__member-permission-control .contact-create-single-select__toggle {
  height: 21px;
  gap: 4px;
  padding: 2px 3px;
  color: #527dac;
  font-size: 10.5px;
  background: transparent;
  border: 0;
  border-radius: 3px;
}

.contact-list-sharing__member-permission-control .contact-create-multiselect__caret {
  width: 6px;
  height: 4px;
}

.contact-list-sharing__member-permission-control .contact-create-single-select__toggle:hover,
.contact-list-sharing__member-permission-control .contact-create-single-select__toggle:focus-visible {
  background: var(--blue);
  outline: none;
  box-shadow: none;
}

.contact-list-sharing__member-permission-control .contact-create-single-select__menu {
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  left: 0;
  z-index: 24;
  max-height: none;
  padding: 3px;
  overflow: visible;
  background: #fff;
  border: .5px solid #aaa;
  box-shadow: 0 4px 14px rgba(27, 31, 29, .1);
}

.contact-list-sharing__member-permission-control .contact-create-single-select__menu [role="option"] {
  min-height: 23px;
  padding: 3px 5px;
  font-size: 10px;
}

.contact-list-sharing__remove-user {
  display: grid;
  place-items: center;
  width: 18px;
  height: 20px;
  padding: 0;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  background: transparent;
  border: 0;
  border-radius: 3px;
}

.contact-list-sharing__remove-user:hover,
.contact-list-sharing__remove-user:focus-visible {
  background: var(--blue);
  outline: none;
}

@media (max-width: 767px) {
  .contact-list-drawer__flyout--sharing {
    top: 72px;
    right: 8px;
    left: 8px;
    width: auto;
    height: auto;
    min-height: 0;
    max-height: calc(100dvh - 88px);
    overflow: visible;
  }

  .contact-list-sharing__mode-row {
    grid-template-columns: minmax(0, 1fr) 74px;
  }

  .contact-list-sharing__directory {
    width: 100%;
    height: min(185px, calc(100dvh - 260px));
  }

  .contact-list-sharing__user-picker,
  .contact-list-sharing__selected-users {
    width: 100%;
  }

  .contact-list-sharing__members {
    max-height: calc(100% - 41px);
  }

  .contact-list-sharing__selected-user {
    grid-template-columns: 14px minmax(0, 1fr) 66px 22px;
  }
}

/* Contact-list export view */
.contact-export-dialog {
  --contact-export-workspace-center-x: 110px;
  --contact-export-workspace-center-y: 17.5px;
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  background: transparent;
  border: 0;
}

.contact-export-dialog::backdrop {
  background: rgb(245 245 245 / 52%);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.contact-export-modal {
  position: absolute;
  top: calc(50% + var(--contact-export-workspace-center-y));
  right: auto;
  left: calc(50% + var(--contact-export-workspace-center-x));
  z-index: 1;
  width: min(409px, calc(100vw - 24px));
  min-height: 427px;
  overflow: visible;
  color: #111;
  font-size: 10.8px;
  background: #fafafa;
  border: .75px solid #777;
  border-radius: 4px;
  outline: none;
  transform: translate(-50%, -50%);
  animation: contact-export-modal-enter 160ms cubic-bezier(.22, 1, .36, 1) both;
}

.contact-export-modal:focus-visible {
  outline: none;
}

@keyframes contact-export-modal-enter {
  from {
    opacity: 0;
    translate: 0 6px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

.contact-export-modal__header {
  display: flex;
  align-items: center;
  min-height: 23px;
  padding: 3px 8px;
  border-bottom: .75px solid #777;
}

.contact-export-modal__header h2,
.contact-export-customize__header h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
}

.contact-export-form {
  display: flex;
  flex-direction: column;
  min-height: 403px;
  padding: 10px 8px 9px;
}

.contact-export__notify,
.contact-export-customize__setting {
  display: grid;
  grid-template-columns: 11px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  cursor: pointer;
}

.contact-export__notify {
  width: 206px;
  min-height: 22px;
  padding: 3px 7px;
  font-size: 10.8px;
  background: var(--pale-lime);
  border-radius: 2px;
}

.contact-export__checkbox:checked {
  background-color: var(--pale-lime);
}

.contact-export__preparation {
  margin-top: 16px;
}

.contact-export__preparation h3,
.contact-export__preparation p,
.contact-export__list-line {
  margin: 0;
  font-size: 10.8px;
  font-weight: 400;
  line-height: 1.35;
}

.contact-export__list-line {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 7px;
}

.contact-export__count-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px !important;
}

.contact-export__count-copy {
  display: inline-flex;
  gap: 3px;
  white-space: nowrap;
}

.contact-export__packaging {
  flex: 0 1 190px;
  width: min(190px, 100%);
  min-width: 0;
}

.contact-export__packaging[hidden] {
  display: none;
}

.contact-export__select--packaging.contact-create-field--select {
  width: 100%;
}

.contact-export__select--packaging .contact-create-single-select__toggle {
  height: 28.8px;
  min-height: 28.8px;
  padding-block: 2.4px;
  font-size: 10.8px;
}

.contact-export__select--packaging .contact-create-single-select__menu {
  min-width: 190px;
}

.contact-export-list-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  max-width: 220px;
}

.contact-export-list-picker strong {
  min-width: 0;
  max-width: 194px;
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-export-list-picker__toggle.contact-create-multiselect__toggle {
  display: grid;
  place-items: center;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.contact-export-list-picker__toggle:hover,
.contact-export-list-picker__toggle:focus-visible,
.contact-export-list-picker.is-open .contact-export-list-picker__toggle {
  background: transparent;
  outline: none;
  box-shadow: none;
}

.contact-export-list-picker__toggle .contact-create-multiselect__caret {
  width: 6px;
  height: 4px;
}

.contact-export-list-picker__options.contact-create-multiselect__panel {
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  z-index: 45;
  display: grid;
  gap: 2px;
  width: min(220px, calc(100vw - 42px));
  max-height: 160px;
  padding: 3px;
  overflow-y: auto;
  background: #fff;
  border: .75px solid #aaa;
  border-radius: 5px;
  box-shadow: 0 5px 15px rgba(27, 31, 29, .1);
  scrollbar-width: thin;
}

.contact-export-list-picker__options[hidden] {
  display: none;
}

.contact-export-list-picker__options [role="option"] {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  width: 100%;
  min-height: 27px;
  padding: 3px 6px;
  color: inherit;
  font: inherit;
  font-size: 10.8px;
  text-align: left;
  background: #fff;
  border: 0;
  border-radius: 3px;
}

.contact-export-list-picker__options [role="option"] > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-export-list-picker__options [role="option"][aria-selected="true"] {
  background: var(--pale-lime);
}

.contact-export-list-picker__options [role="option"]:hover,
.contact-export-list-picker__options [role="option"]:focus-visible {
  background: var(--blue);
  outline: none;
  box-shadow: inset 0 0 0 .5px #474747;
}

.contact-export-list-picker__check {
  display: grid;
  place-items: center;
  width: 11px;
  height: 11px;
  background: #fff;
  border: .75px solid #474747;
  border-radius: 2px;
}

.contact-export-list-picker__check .icon {
  width: 7px;
  height: 6px;
  opacity: 0;
}

.contact-export-list-picker__options [role="option"][aria-selected="true"]
  .contact-export-list-picker__check {
  background: var(--pale-lime);
}

.contact-export-list-picker__options [role="option"][aria-selected="true"]
  .contact-export-list-picker__check .icon {
  opacity: 1;
}

.contact-export__field {
  display: grid;
  gap: 5px;
  width: 212px;
  margin-top: 12px;
  font-size: 10.8px;
}

.contact-export__file-names {
  width: min(254.4px, calc(100vw - 42px));
  margin-top: 12px;
}

.contact-export__file-names .contact-export__field {
  width: 100%;
  margin-top: 0;
}

.contact-export__file-name-set {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.contact-export__file-name-set legend {
  margin: 0 0 5px;
  padding: 0;
  font-size: 10.8px;
  line-height: 1.2;
}

.contact-export__file-name-list {
  display: grid;
  gap: 7px;
  max-height: 112px;
  padding-right: 3px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.contact-export__file-name-row > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-export__field input {
  width: 100%;
  height: 28.8px;
  min-width: 0;
  padding: 2.4px 8.4px;
  color: inherit;
  font: inherit;
  background: #fff;
  border: .75px solid #777;
  border-radius: 5px;
}

.contact-export__field input:focus-visible,
.contact-export__select .contact-create-single-select__toggle:focus-visible {
  border-color: #474747;
  outline: none;
  box-shadow: inset 0 0 0 .5px #474747;
}

.contact-export__select-grid {
  display: grid;
  grid-template-columns: 129px 129px;
  gap: 15px;
  margin-top: 12px;
}

.contact-export__select.contact-create-field--select {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  gap: 4px;
}

.contact-export__select.contact-create-field--select > label {
  min-height: 14.4px;
  font-size: 10.8px;
}

.contact-export__select .contact-create-single-select__toggle {
  height: 28.8px;
  min-height: 28.8px;
  padding: 2.4px 8.4px;
  font-size: 10.8px;
  background: #fff;
  border: .75px solid #777;
  border-radius: 5px;
  box-shadow: none;
}

.contact-export__select .contact-create-multiselect__caret {
  width: 6px;
  height: 4px;
}

.contact-export__select .contact-create-single-select__menu {
  position: absolute;
  top: calc(100% + 3px);
  right: 0;
  left: 0;
  z-index: 35;
  max-height: 125px;
  padding: 3px;
  overflow-y: auto;
  background: #fff;
  border: .75px solid #aaa;
  border-radius: 5px;
  box-shadow: 0 5px 15px rgba(27, 31, 29, .1);
}

.contact-export__select .contact-create-single-select__menu [role="option"] {
  min-height: 27px;
  padding: 3px 5px;
  font-size: 10.8px;
}

.contact-export__data {
  position: relative;
  z-index: 2;
  width: 212px;
  margin-top: 17px;
}

.contact-export__chips {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 8.4px;
}

.contact-export__chip.channel-tag {
  max-width: min(120%, calc(100vw - 42px));
  height: 21.6px;
  padding-left: 6px;
  font-size: 10.8px;
  border-width: .9px;
  border-radius: 4.8px;
}

.contact-export__chip > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-export__chip button {
  flex: 0 0 18px;
  width: 18px;
  height: 19.2px;
  font-size: 12px;
}

.contact-export__chip button:hover,
.contact-export__chip button:focus-visible {
  background: var(--blue);
  outline: none;
}

.contact-export__customize-owner {
  position: relative;
  margin-top: auto;
  padding-top: 11px;
}

.contact-export__customize {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: 24px;
  padding: 3px 6px;
  color: inherit;
  font: inherit;
  font-size: 10.8px;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 2px;
}

.contact-export__customize:hover,
.contact-export__customize:focus-visible {
  background: transparent;
}

.contact-export__customize[aria-expanded="true"] {
  background: #d1e9ff;
}

.contact-export__customize-caret {
  width: 6px;
  height: 4px;
  transform: rotate(-90deg);
}

.contact-export-customize-flyout {
  position: absolute;
  top: 11px;
  right: calc(100% + 19px);
  bottom: auto;
  z-index: 40;
  width: 313px;
  min-height: 342px;
  overflow: hidden;
  color: #111;
  background: #fafafa;
  border: .75px solid #aaa;
  border-radius: 4px;
  box-shadow: 0 5px 18px rgba(27, 31, 29, .08);
}

.contact-export-customize-flyout[hidden] {
  display: none;
}

.contact-export-customize__header {
  display: flex;
  align-items: center;
  min-height: 23px;
  padding: 3px 8px;
  border-bottom: .75px solid #777;
}

.contact-export-customize__body {
  display: grid;
  gap: 7px;
  padding: 8px;
}

.contact-export-customize__group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.contact-export-customize__group legend {
  margin: 0 0 5px;
  padding: 0 6px;
  color: #666;
  font-size: 9.6px;
  line-height: 1.2;
}

.contact-export-customize__group .contact-export-customize__setting +
  .contact-export-customize__setting {
  margin-top: 7px;
}

.contact-export-customize__setting {
  min-height: 27px;
  padding: 4px 6px;
  font-size: 10.8px;
  line-height: 1.25;
  background: transparent;
  border-radius: 2px;
}

.contact-export-customize__setting:has(input:checked) {
  background: var(--pale-lime);
}

.contact-export-customize__setting.is-disabled {
  color: #aaa;
  background: transparent;
  cursor: default;
}

@media (max-width: 1439px) {
  .contact-export-dialog {
    --contact-export-workspace-center-x: 102px;
  }
}

@media (max-width: 1179px) {
  .contact-export-dialog {
    --contact-export-workspace-center-x: 0px;
    --contact-export-workspace-center-y: 21px;
  }
}

@media (max-width: 1055px) {
  .contact-export__customize-owner {
    position: static;
  }

  .contact-export-customize-flyout {
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
    width: min(313px, 100%);
    max-height: 100%;
    overflow-y: auto;
  }
}

@media (max-width: 767px) {
  .contact-export-dialog {
    --contact-export-workspace-center-y: 24px;
  }

  .contact-export-modal {
    width: calc(100vw - 24px);
    min-height: min(427px, calc(100dvh - 24px));
    max-height: calc(100dvh - 24px);
  }

  .contact-export-form {
    min-height: min(403px, calc(100dvh - 48px));
  }

  .contact-export-customize-flyout {
    top: 0;
    right: 0;
    left: 0;
    width: auto;
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
  }
}

@media (min-width: 1056px) and (max-height: 839px) {
  .contact-export-customize-flyout {
    top: auto;
    bottom: 0;
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
  }
}

@media (max-height: 480px) {
  .contact-export-dialog {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .contact-export-modal {
    top: 12px;
    transform: translateX(-50%);
    min-height: 427px;
    max-height: none;
  }

  .contact-export-form {
    min-height: 403px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-export-modal {
    animation: none;
  }
}

/* Manage: Data Objects */
.data-objects-screen {
  padding: 34px 36px 50px 35px;
}

.data-objects-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  min-height: 25px;
}

.data-objects-heading h1 {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
}

.data-objects-count {
  margin-left: 0;
  white-space: nowrap;
}

.data-objects-add {
  display: inline-flex;
  align-items: stretch;
  height: 23px;
  padding: 0;
  color: var(--ink);
  font: inherit;
  font-size: 10.8px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.data-objects-add:hover > span {
  background: #eff6ce;
}

.data-objects-add-control .contact-create-menu__panel {
  right: 0;
  left: auto;
  width: 190px;
}

.data-objects-add-menu[hidden] {
  display: none;
}

.data-objects-add-menu button {
  display: block;
  width: 100%;
  min-height: 29px;
  padding: 6px 8px;
  color: var(--ink);
  font: inherit;
  font-size: 10px;
  text-align: left;
  background: #fafafa;
  border: 0;
  cursor: pointer;
}

.data-objects-add-menu button + button {
  border-top: .5px solid #bbb;
}

.data-objects-add-menu button:hover {
  background: var(--pale-lime);
}

.data-objects-add:focus-visible,
.data-objects-add-menu button:focus-visible,
.data-objects-group__toggle:focus-visible,
.data-objects-card__menu-toggle:focus-visible,
.data-objects-card__menu button:focus-visible,
.data-objects-dialog button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.data-objects-intro {
  margin: 7px 0 0;
  font-size: 11px;
  line-height: 1.4;
}

.data-objects-group {
  margin-top: 28px;
}

.data-objects-group + .data-objects-group {
  margin-top: 33px;
}

.data-objects-group + .data-objects-group .data-objects-grid {
  margin-top: 12px;
}

.data-objects-group h2 {
  margin: 0;
}

.data-objects-group__toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 21px;
  padding: 0;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.data-objects-group__caret {
  width: 8px;
  height: 6px;
  transform: rotate(180deg);
}

.data-objects-group__toggle[aria-expanded="false"] .data-objects-group__caret {
  transform: rotate(0deg);
}

.data-objects-grid {
  display: grid;
  grid-template-columns: repeat(2, 322px);
  gap: 40px 60px;
  width: max-content;
  max-width: 100%;
  margin-top: 16px;
}

.data-objects-grid[hidden],
.data-objects-card__menu[hidden] {
  display: none;
}

.data-objects-empty {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.data-objects-empty[hidden] {
  display: none;
}

.data-objects-card {
  display: flex;
  width: 322px;
  min-height: 87px;
  color: var(--ink);
  background: #e2e3e5;
  border-radius: 6px;
}

.data-objects-card__icon-panel {
  display: grid;
  place-items: center;
  flex: 0 0 73px;
  background: #d9ecff;
  border-radius: 6px 0 0 6px;
}

.data-objects-card__icon {
  object-fit: contain;
}

.data-objects-card[data-data-object-card="opportunity"] .data-objects-card__icon {
  width: 24px;
  height: 26px;
}

.data-objects-card[data-data-object-card="contact"] .data-objects-card__icon {
  width: 20px;
  height: 22px;
}

.data-objects-card[data-data-object-card="business"] .data-objects-card__icon {
  width: 23px;
  height: 19px;
}

.data-objects-card[data-data-object-card="project"] .data-objects-card__icon {
  width: 20px;
  height: 20px;
}

.data-objects-card__body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 10px;
}

.data-objects-card h3 {
  margin: 0 58px 0 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
}

.data-objects-card p {
  margin: 7px 0 0;
  font-size: 9.6px;
  line-height: 1.2;
}

.data-objects-card__menu-toggle {
  position: absolute;
  top: 5px;
  right: 7px;
  width: 18px;
  height: 15px;
  padding: 0;
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 5px;
  background: transparent;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}

.data-objects-card__menu {
  position: absolute;
  z-index: 5;
  top: 22px;
  right: 7px;
  min-width: 142px;
  padding: 3px;
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 4px;
  box-shadow: 0 5px 12px rgb(0 0 0 / 14%);
}

.data-objects-card__menu button {
  width: 100%;
  min-height: 24px;
  padding: 3px 7px;
  color: var(--ink);
  font: inherit;
  font-size: 10px;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}

.data-objects-card__menu button:hover {
  background: var(--pale-lime);
}

.data-objects-card__menu [data-data-object-delete-open] {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.data-objects-card__menu-icon {
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
}

.data-objects-dialog {
  width: min(420px, calc(100vw - 32px));
  max-width: none;
  padding: 0;
  border: .5px solid #aaa;
  border-radius: 6px;
  box-shadow: 0 12px 34px rgb(0 0 0 / 18%);
}

.data-objects-dialog::backdrop {
  background: rgb(255 255 255 / 45%);
}

.data-objects-dialog__body {
  display: grid;
  gap: 14px;
  padding: 18px;
  font-size: 11px;
}

.data-objects-dialog h2,
.data-objects-dialog p {
  margin: 0;
}

.data-objects-dialog h2 {
  font-size: 15px;
  font-weight: 400;
}

.data-objects-dialog button {
  justify-self: end;
  min-height: 27px;
  padding: 3px 12px;
  color: var(--ink);
  font: inherit;
  background: var(--pale-lime);
  border: .5px solid #aeb49d;
  border-radius: 4px;
  cursor: pointer;
}

/* Pre-filled Data Objects Catalog */
.template-catalog-dialog,
.template-catalog-preview-dialog {
  width: min(1040px, calc(100vw - 24px));
  max-width: none;
  height: min(620px, calc(100dvh - 24px));
  max-height: none;
  margin: auto;
  padding: 0;
  color: var(--ink);
  background: #fff;
  border: .75px solid #8f928f;
  border-radius: 5px;
  box-shadow: 0 14px 38px rgb(0 0 0 / 15%);
  overflow: hidden;
}

.template-catalog-dialog::backdrop,
.template-catalog-preview-dialog::backdrop {
  background: rgb(255 255 255 / 58%);
}

.template-catalog-modal {
  display: grid;
  grid-template-rows: 25px minmax(0, 1fr);
  height: 100%;
}

.template-catalog-header,
.template-catalog-preview-modal > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 0 9px;
  border-bottom: .5px solid #8f928f;
}

.template-catalog-header h2,
.template-catalog-preview-modal > header h2 {
  margin: 0;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
}

.template-catalog-header > button,
.template-catalog-preview-modal > header > button {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  background: transparent;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}

.template-catalog-layout {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
}

.template-catalog-directory-frame {
  position: relative;
  min-width: 0;
  min-height: 0;
  border-right: .5px solid #aaa;
}

.template-catalog-directory {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 11px 9px;
  overflow-y: auto;
}

.template-catalog-directory__close {
  display: none;
}

.template-catalog-directory-frame[hidden] {
  display: none;
}

.template-catalog-layout:has(.template-catalog-directory-frame[hidden]) {
  grid-template-columns: minmax(0, 1fr);
}

.template-catalog-directory h3 {
  margin: 0 0 8px;
  font-size: 9.5px;
  font-weight: 500;
}

.template-catalog-directory nav {
  display: grid;
  gap: 5px;
  margin-bottom: 13px;
}

.template-catalog-directory nav button {
  min-height: 22px;
  padding: 3px 7px;
  color: var(--ink);
  font: inherit;
  font-size: 9px;
  text-align: center;
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 2px;
  cursor: pointer;
}

.template-catalog-directory nav button.is-active {
  background: var(--pale-lime);
  border-color: #c5d887;
}

.template-catalog-directory fieldset {
  min-width: 0;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
}

.template-catalog-directory legend {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  margin-bottom: 6px;
  padding: 0;
  font-size: 9px;
  font-weight: 500;
}

.template-catalog-directory legend span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 15px;
  padding: 0 5px;
  font-size: 8px;
  font-weight: 400;
  background: var(--blue);
  border-radius: 8px;
}

.template-catalog-directory__options-frame {
  position: relative;
}

.template-catalog-directory__options {
  display: grid;
  gap: 5px;
  max-height: 140px;
  padding-right: 12px;
  overflow-y: auto;
}

.template-catalog-directory__options--tags {
  max-height: 124px;
}

.template-catalog-directory__options label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 8.7px;
  line-height: 1.2;
  cursor: pointer;
}

.template-catalog-directory__options .contact-selection-checkbox {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
}

.template-catalog-results {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  padding: 10px 12px 0;
}

.template-catalog-results__scroll-frame,
.template-catalog-preview__scroll-frame {
  position: relative;
  min-width: 0;
  min-height: 0;
}

.template-catalog-toolbar {
  display: grid;
  grid-template-columns: auto 24px minmax(10px, 1fr) auto minmax(190px, 240px) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-bottom: 12px;
}

.template-catalog-toolbar > .template-catalog-choice:first-of-type {
  grid-column: 4;
}

.template-catalog-search {
  grid-column: 5;
}

.template-catalog-toolbar > .template-catalog-choice:last-of-type {
  grid-column: 6;
}

.template-catalog-count {
  min-width: 94px;
}

.template-catalog-filter-toggle.toolbar-icon-button {
  width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 4px;
  background: var(--blue);
  border-color: #98afbc;
}

.template-catalog-filter-toggle .icon {
  width: 13px;
  height: 13px;
}

.template-catalog-choice {
  position: relative;
  min-width: 0;
}

.template-catalog-choice__toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8px;
  align-items: center;
  gap: 7px;
  min-width: 105px;
  height: 24px;
  padding: 2px 8px;
  color: var(--ink);
  font: inherit;
  font-size: 8.8px;
  text-align: left;
  background: #fff;
  border: .5px solid #777;
  border-radius: 4px;
  cursor: pointer;
}

.template-catalog-choice__toggle .icon {
  width: 7px;
}

.template-catalog-choice__menu {
  position: absolute;
  z-index: 12;
  top: calc(100% + 3px);
  right: 0;
  min-width: 145px;
  padding: 3px;
  background: #fff;
  border: .5px solid #777;
  border-radius: 4px;
  box-shadow: 0 7px 16px rgb(0 0 0 / 12%);
}

.template-catalog-choice__menu[hidden] {
  display: none;
}

.template-catalog-choice__menu button {
  display: block;
  width: 100%;
  min-height: 24px;
  padding: 4px 7px;
  color: var(--ink);
  font: inherit;
  font-size: 8.8px;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}

.template-catalog-choice__menu button[aria-selected="true"],
.template-catalog-choice__menu button:hover {
  background: var(--pale-lime);
}

.template-catalog-search {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 24px;
  padding: 0 8px;
  background: #fff;
  border: .5px solid #777;
  border-radius: 7px;
}

.template-catalog-search .icon {
  width: 11px;
  height: 11px;
}

.template-catalog-search input {
  width: 100%;
  min-width: 0;
  padding: 0;
  color: var(--ink);
  font: inherit;
  font-size: 8.8px;
  background: transparent;
  border: 0;
  outline: 0;
}

.template-catalog-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(145px, 1fr));
  align-content: start;
  gap: 16px 18px;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0 15px 18px 4px;
  overflow-y: auto;
}

.template-catalog-card {
  position: relative;
  display: grid;
  align-self: start;
  grid-template-rows: 138px minmax(70px, auto);
  min-width: 0;
  min-height: 208px;
  background: #fff;
  border: .5px solid #777;
  border-radius: 3px;
  overflow: hidden;
}

.template-catalog-card.is-selected {
  grid-template-rows: 138px minmax(70px, auto) 29px;
  min-height: 237px;
}

.template-catalog-card__select {
  position: absolute;
  z-index: 2;
  inset: 0;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.template-catalog-dialog .template-catalog-card__select:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -3px;
}

.template-catalog-card__media {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 16px;
  border-bottom: .5px solid #aaa;
}

.template-catalog-card__art {
  display: block;
  width: 92px;
  height: 92px;
  object-fit: contain;
}

.template-catalog-card__favorite {
  position: absolute;
  z-index: 3;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 3px;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.template-catalog-card__favorite .icon {
  width: 16px;
  height: 16px;
}

.template-catalog-card__favorite.is-favorite {
  background: var(--pale-lime);
}

.template-catalog-card__favorite.is-favorite .icon {
  filter: brightness(.25) sepia(1) saturate(4) hue-rotate(35deg);
}

.template-catalog-card__copy {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 8px 9px 9px;
}

.template-catalog-card__copy h3,
.template-catalog-card__copy p {
  margin: 0;
}

.template-catalog-card__copy h3 {
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
}

.template-catalog-card__copy p {
  display: -webkit-box;
  color: var(--muted);
  font-size: 8.5px;
  line-height: 1.3;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.template-catalog-card__copy > span {
  color: #666;
  font-size: 8px;
}

.template-catalog-card__actions {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  border-top: .5px solid #aaa;
}

.template-catalog-card__actions[hidden] {
  display: none;
}

.template-catalog-card__actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  padding: 3px 7px;
  color: var(--ink);
  font: inherit;
  font-size: 8.5px;
  background: var(--pale-lime);
  border: 0;
  cursor: pointer;
}

.template-catalog-card__actions button + button {
  background: var(--blue);
  border-left: .5px solid #aaa;
}

.template-catalog-card__preview .icon {
  width: 14px;
  height: 14px;
}

.template-catalog-grid[data-view="list"] {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.template-catalog-grid[data-view="list"] .template-catalog-card {
  grid-template-columns: 92px minmax(0, 1fr);
  grid-template-rows: minmax(86px, auto);
  min-height: 86px;
}

.template-catalog-grid[data-view="list"] .template-catalog-card.is-selected {
  grid-template-columns: 92px minmax(0, 1fr) 160px;
}

.template-catalog-grid[data-view="list"] .template-catalog-card__media {
  padding: 10px;
  border-right: .5px solid #aaa;
  border-bottom: 0;
}

.template-catalog-grid[data-view="list"] .template-catalog-card__art {
  width: 66px;
  height: 66px;
}

.template-catalog-grid[data-view="list"] .template-catalog-card__actions {
  align-self: stretch;
  border-top: 0;
  border-left: .5px solid #aaa;
}

.template-catalog-empty {
  display: grid;
  place-items: center;
  align-content: center;
  grid-column: 1 / -1;
  gap: 4px;
  min-height: 180px;
  color: var(--muted);
  font-size: 9px;
  text-align: center;
  border: .5px dashed #aaa;
  border-radius: 4px;
}

.template-catalog-empty strong {
  color: var(--ink);
  font-size: 11px;
  font-weight: 500;
}

.template-catalog-preview-dialog {
  width: min(650px, calc(100vw - 24px));
  height: min(470px, calc(100dvh - 24px));
}

.template-catalog-preview-modal {
  display: grid;
  grid-template-rows: 29px minmax(0, 1fr) 42px;
  height: 100%;
}

.template-catalog-preview__content {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 18px 28px 18px 18px;
  overflow-y: auto;
}

.template-catalog-directory,
.template-catalog-directory__options,
.template-catalog-grid,
.template-catalog-preview__content {
  scrollbar-width: none;
}

.template-catalog-directory::-webkit-scrollbar,
.template-catalog-directory__options::-webkit-scrollbar,
.template-catalog-grid::-webkit-scrollbar,
.template-catalog-preview__content::-webkit-scrollbar {
  display: none;
}

.template-catalog-scrollbar {
  position: absolute;
  z-index: 4;
  top: 7px;
  right: 0;
  bottom: 7px;
  width: 18px;
}

.template-catalog-scrollbar .scrollbar-ui__handle {
  right: 5px;
  width: 5px;
  height: 48px;
}

.template-catalog-scrollbar--directory {
  top: 12px;
  bottom: 12px;
}

.template-catalog-scrollbar--compact {
  top: 1px;
  right: -2px;
  bottom: 1px;
  width: 14px;
}

.template-catalog-scrollbar--compact .scrollbar-ui__handle {
  right: 4px;
  width: 4px;
  height: 34px;
}

.template-catalog-scrollbar--results {
  right: -3px;
  bottom: 18px;
}

.template-catalog-scrollbar--preview {
  right: 2px;
}

.template-catalog-preview__layout {
  display: grid;
  grid-template-columns: minmax(180px, 2fr) minmax(0, 3fr);
  gap: 18px;
  min-width: 0;
}

.template-catalog-preview__hero {
  display: grid;
  place-items: center;
  min-height: 230px;
  border: .5px solid #aaa;
  border-radius: 4px;
}

.template-catalog-preview__hero img {
  width: min(180px, 80%);
  aspect-ratio: 1;
  object-fit: contain;
}

.template-catalog-preview__details {
  display: grid;
  align-content: start;
  gap: 9px;
  min-width: 0;
}

.template-catalog-preview__details h3,
.template-catalog-preview__details p,
.template-catalog-preview__details dl {
  margin: 0;
}

.template-catalog-preview__details h3 {
  font-size: 16px;
  font-weight: 500;
}

.template-catalog-preview__details > p:not(.template-catalog-preview__category) {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.template-catalog-preview__category {
  justify-self: start;
  padding: 3px 7px;
  font-size: 8px;
  background: var(--blue);
  border-radius: 9px;
}

.template-catalog-preview__details dl {
  display: grid;
  gap: 6px;
  padding-top: 4px;
}

.template-catalog-preview__details dl div {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(0, 1fr);
  gap: 8px;
  padding-bottom: 5px;
  font-size: 9px;
  border-bottom: .5px solid #ddd;
}

.template-catalog-preview__details dt {
  color: var(--muted);
}

.template-catalog-preview__details dd {
  margin: 0;
  text-align: right;
}

.template-catalog-preview__field-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.template-catalog-preview__field-list span {
  padding: 3px 7px;
  font-size: 8px;
  background: #f1f1ef;
  border: .5px solid #ccc;
  border-radius: 9px;
}

.template-catalog-preview-modal > footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 7px 12px;
  border-top: .5px solid #ccc;
}

.template-catalog-preview-modal > footer button {
  min-height: 28px;
  padding: 4px 12px;
  color: var(--ink);
  font: inherit;
  font-size: 9.5px;
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 4px;
  cursor: pointer;
}

.template-catalog-preview-modal > footer button:last-child {
  background: var(--pale-lime);
  border-color: #aeb49d;
}

.template-catalog-dialog button:focus-visible,
.template-catalog-dialog input:focus-visible,
.template-catalog-preview-dialog button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

@media (max-width: 900px) {
  .template-catalog-layout {
    grid-template-columns: 145px minmax(0, 1fr);
  }

  .template-catalog-toolbar {
    grid-template-columns: auto 24px minmax(0, 1fr) auto;
  }

  .template-catalog-toolbar > .template-catalog-choice:first-of-type,
  .template-catalog-search,
  .template-catalog-toolbar > .template-catalog-choice:last-of-type {
    grid-column: auto;
  }

  .template-catalog-search {
    grid-column: 1 / 4;
    grid-row: 2;
  }

  .template-catalog-toolbar > .template-catalog-choice:last-child {
    grid-column: 4;
    grid-row: 2;
  }

  .template-catalog-grid {
    grid-template-columns: repeat(2, minmax(145px, 1fr));
  }
}

@media (max-width: 680px) {
  .template-catalog-dialog {
    width: 100vw;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .template-catalog-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .template-catalog-directory-frame {
    position: absolute;
    z-index: 10;
    top: 35px;
    bottom: 0;
    left: 0;
    width: min(230px, calc(100vw - 28px));
    background: #fff;
    border: .5px solid #777;
    box-shadow: 8px 0 18px rgb(0 0 0 / 12%);
  }

  .template-catalog-directory {
    padding-right: 15px;
  }

  .template-catalog-directory__close {
    position: absolute;
    top: 5px;
    right: 5px;
    display: grid;
    place-items: center;
    width: 21px;
    height: 21px;
    padding: 0;
    color: var(--ink);
    font: inherit;
    font-size: 15px;
    background: #fff;
    border: .5px solid #aaa;
    border-radius: 3px;
    cursor: pointer;
  }

  .template-catalog-results {
    padding-right: 8px;
    padding-left: 8px;
  }

  .template-catalog-preview__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .template-catalog-preview__hero {
    min-height: 180px;
  }
}

@media (max-width: 430px) {
  .template-catalog-toolbar {
    grid-template-columns: auto 24px minmax(0, 1fr);
  }

  .template-catalog-toolbar > .template-catalog-choice:nth-of-type(1) {
    grid-column: 3;
  }

  .template-catalog-search {
    grid-column: 1 / -1;
  }

  .template-catalog-toolbar > .template-catalog-choice:last-child {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .template-catalog-toolbar > .template-catalog-choice:last-child
    .template-catalog-choice__toggle {
    width: 100%;
  }

  .template-catalog-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .template-catalog-grid[data-view="list"] .template-catalog-card {
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-rows: auto;
  }

  .template-catalog-grid[data-view="list"] .template-catalog-card.is-selected {
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-rows: auto 29px;
    min-height: 115px;
  }

  .template-catalog-grid[data-view="list"] .template-catalog-card__actions {
    grid-column: 1 / -1;
    border-top: .5px solid #aaa;
    border-left: 0;
  }

  .template-catalog-preview-dialog {
    width: 100vw;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }
}

/* Template-package review extends the catalog's centered modal and the
   Link Associations table grammar without introducing a second UI system. */
.template-import-review-dialog {
  width: min(520px, calc(100vw - 24px));
  max-width: none;
  height: min(700px, calc(100dvh - 24px));
  max-height: none;
  margin: auto;
  padding: 0;
  color: var(--ink);
  background: #fff;
  border: .75px solid #8f928f;
  border-radius: 5px;
  box-shadow: 0 14px 38px rgb(0 0 0 / 15%);
  overflow: hidden;
}

.template-import-review-dialog::backdrop {
  background: rgb(255 255 255 / 58%);
}

.template-import-review-modal,
.template-import-review-form {
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.template-import-review-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.template-import-review-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 16px 11px;
  background: #fff;
  border-bottom: .5px solid #8f928f;
}

.template-import-review-header > div {
  min-width: 0;
}

.template-import-review-header h2,
.template-import-review-header p,
.template-import-review-section h3,
.template-import-object h4,
.template-import-folder h5 {
  margin: 0;
}

.template-import-review-header h2 {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
}

.template-import-review-header p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 9.6px;
  line-height: 1.35;
}

.template-import-review-header .template-import-review-summary {
  margin-top: 4px;
  font-size: 8.8px;
}

.template-import-review-header > button {
  display: grid;
  place-items: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  padding: 0;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  background: transparent;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}

.template-import-review-form {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

.template-import-review-body-frame {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.template-import-review-body {
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 15px 16px 20px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.template-import-review-body::-webkit-scrollbar,
.template-import-associations-table-scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.template-import-review-body-scrollbar {
  position: absolute;
  z-index: 4;
  top: 10px;
  right: 3px;
  bottom: 10px;
  width: 11px;
}

.template-import-review-body-scrollbar .scrollbar-ui__handle {
  right: 3px;
  width: 5px;
  height: 52px;
}

.template-import-review-error,
.template-import-preflight {
  display: block;
  margin: 0 0 12px;
  padding: 8px 10px;
  font-size: 9.6px;
  line-height: 1.4;
  background: #f1f1ed;
  border: .5px solid #aaa;
  border-radius: 4px;
}

.template-import-review-error[hidden],
.template-import-object__panel[hidden] {
  display: none;
}

.template-import-review-error,
.template-import-preflight--conflict {
  color: #8d1a14;
  background: #fff6f4;
  border-color: #b3261e;
}

.template-import-preflight h3 {
  margin: 0 0 3px;
  font-size: 10.8px;
  font-weight: 500;
}

.template-import-preflight p,
.template-import-preflight ul {
  margin: 0;
}

.template-import-preflight ul {
  padding: 5px 0 0 17px;
}

.template-import-review-section + .template-import-review-section {
  margin-top: 19px;
}

.template-import-review-section > h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
  font-size: 12px;
  font-weight: 400;
}

.template-import-review-section__icon {
  width: 16px;
  height: 16px;
}

.template-import-object-list {
  display: grid;
  gap: 9px;
}

.template-import-object {
  min-width: 0;
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 6px;
  overflow: hidden;
}

.template-import-object h4 {
  font-size: inherit;
  font-weight: 400;
}

.template-import-object__toggle {
  display: grid;
  grid-template-columns: 18px minmax(110px, auto) minmax(130px, 1fr) 8px;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 7px 11px;
  color: var(--ink);
  font: inherit;
  font-size: 10.8px;
  text-align: left;
  background: #fafafa;
  border: 0;
  cursor: pointer;
}

.template-import-object__icon {
  width: 17px;
  height: 17px;
}

.template-import-object__name {
  font-weight: 500;
}

.template-import-object__counts {
  color: var(--muted);
  font-size: 9.6px;
}

.template-import-object__chevron {
  width: 8px;
  height: 6px;
  transition: transform 120ms ease;
}

.template-import-object__toggle[aria-expanded="true"] .template-import-object__chevron {
  transform: rotate(180deg);
}

.template-import-object__panel {
  display: grid;
  gap: 11px;
  padding: 11px;
  border-top: .5px solid #ccc;
}

.template-import-folder {
  min-width: 0;
}

.template-import-folder__header {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 25px;
  padding: 3px 7px;
  font-size: 10px;
  font-weight: 400;
  background: #f1f1ef;
  border-radius: 3px;
}

.template-import-folder__header h5 {
  font-size: 10px;
  font-weight: 500;
}

.template-import-folder__header > span {
  color: var(--muted);
  font-size: 8.8px;
}

.template-import-folder__icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  filter: brightness(0);
}

.template-import-field-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0 6px;
  list-style: none;
}

.template-import-field {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 7px;
  min-height: 30px;
  padding: 5px 3px;
  font-size: 9.6px;
  line-height: 1.25;
  border-bottom: .5px solid #ddd;
}

.template-import-field:last-child {
  border-bottom: 0;
}

.template-import-field__label {
  font-weight: 500;
}

.template-import-field__type,
.template-catalog-card__status {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 2px 6px;
  font-size: 8px;
  line-height: 1;
  white-space: nowrap;
  background: #f1f1ef;
  border: .5px solid #ccc;
  border-radius: 9px;
}

.template-catalog-card__status {
  background: var(--blue);
  border-color: #b5cbd8;
}

.template-import-field__configuration {
  color: var(--muted);
  font-size: 8.8px;
}

.template-catalog-card__status {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
}

.template-import-review-empty {
  margin: 0;
  padding: 12px;
  color: var(--muted);
  font-size: 9.6px;
  text-align: center;
  border: .5px dashed #aaa;
  border-radius: 4px;
}

.template-import-associations-table-shell {
  width: 100%;
  max-width: none;
  height: 260px;
  min-height: 90px;
  margin: 0;
}

.template-import-associations-table-shell::before,
.template-import-associations-table-shell::after {
  right: 0;
}

.template-import-associations-table-shell .contacts-list-container {
  right: 10px;
}

.template-import-associations-table-scroll {
  width: 100%;
  max-width: none;
  height: calc(100% - 16px);
  padding-right: 12px;
  scrollbar-width: none;
}

.template-import-associations-horizontal-scrollbar {
  right: 13px;
  bottom: 0;
  left: 10px;
  height: 16px;
}

.template-import-associations-horizontal-scrollbar
  .scrollbar-ui__handle--horizontal {
  top: 4px;
}

.template-import-associations-vertical-scrollbar {
  top: 51px;
  right: 0;
  bottom: 18px;
  width: 11px;
}

.template-import-associations-vertical-scrollbar .scrollbar-ui__handle {
  right: 3px;
  width: 5px;
  height: 48px;
}

.template-import-associations-table {
  width: max(100%, 680px);
  --contacts-table-min-width: 680px;
}

.template-import-associations-table thead th:first-child::before {
  left: -1px;
}

.template-import-associations-table thead th:first-child::after {
  left: -4px;
}

.template-import-associations-table thead .edit-columns-field-token {
  --edit-columns-token-counter-scale: 1;
  position: absolute;
  z-index: 2;
  top: 9px;
  left: 10px;
  max-width: calc(100% - 15px);
}

.template-import-associations-table tbody th,
.template-import-associations-table tbody td {
  height: 40px;
  white-space: normal;
}

.template-import-associations-table tbody th > span:first-child {
  display: block;
}

@media (min-width: 681px) {
  .template-import-associations-table .contacts-table__name-scrim {
    width: 12px;
    background: linear-gradient(90deg,
      #fff 0 3px,
      rgba(255, 255, 255, .94) 55%,
      rgba(255, 255, 255, 0) 100%);
  }

  .template-import-associations-table tbody .contacts-table__name-scrim {
    background: inherit;
    -webkit-mask-image: linear-gradient(90deg,
      #000 0 3px,
      rgba(0, 0, 0, .94) 55%,
      rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(90deg,
      #000 0 3px,
      rgba(0, 0, 0, .94) 55%,
      rgba(0, 0, 0, 0) 100%);
  }

  .template-import-associations-table thead th:not([data-column="object"]),
  .template-import-associations-table tbody td {
    z-index: 1;
  }

  .template-import-associations-table thead th[data-column="object"],
  .template-import-associations-table tbody [data-column="object"] {
    position: sticky;
    left: -6px;
  }

  .template-import-associations-table thead th[data-column="object"] {
    z-index: 2;
    background: #fdfdfd;
  }

  .template-import-associations-table tbody [data-column="object"] {
    z-index: 3;
    overflow: visible;
    isolation: isolate;
  }

  .template-import-associations-table tbody [data-column="object"]::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    width: 8px;
    box-sizing: border-box;
    background: inherit;
    border: .75px solid #696969;
    border-right: 0;
    border-radius: 5px 0 0 5px;
    visibility: hidden;
    pointer-events: none;
  }

  .template-import-associations-table tbody tr:nth-child(odd)
    [data-column="object"]::before {
    border-color: #474747;
    border-right: 0;
  }

  .template-import-associations-table-scroll[data-horizontally-scrolled]
    .template-import-associations-table thead th[data-column="object"] {
    box-shadow: -6px 0 0 #fff;
  }

  .template-import-associations-table-scroll[data-horizontally-scrolled]
    .template-import-associations-table tbody [data-column="object"] {
    border-left-color: transparent;
    border-radius: 0;
    box-shadow: -6px 0 0 #fff;
  }

  .template-import-associations-table-scroll[data-horizontally-scrolled]
    .template-import-associations-table tbody [data-column="object"]::before {
    visibility: visible;
  }
}

.template-import-association-labels > span {
  display: block;
}

.template-import-associations__empty td {
  height: 58px !important;
  color: var(--muted);
  text-align: center;
  background: transparent !important;
  border: 0 !important;
}

.template-import-review-footer {
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
}

.template-import-review-footer__summary {
  color: var(--muted);
  font-size: 8.8px;
}

.template-import-review-footer__actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.template-import-review-footer button:disabled,
.template-import-review-header button:disabled {
  color: #777;
  background: #f1f1ed;
  cursor: not-allowed;
}

.template-import-review-dialog button:focus-visible,
.template-import-review-dialog [tabindex="0"]:focus-visible,
.template-import-review-error:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

@media (max-width: 680px) {
  .template-import-review-dialog {
    width: 100vw;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .template-import-review-header {
    padding-right: 12px;
    padding-left: 12px;
  }

  .template-import-review-body {
    padding-right: 12px;
    padding-left: 12px;
  }

  .template-import-object__toggle {
    grid-template-columns: 18px minmax(0, 1fr) 8px;
  }

  .template-import-object__counts {
    grid-column: 2;
    grid-row: 2;
  }

  .template-import-object__chevron {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .template-import-associations-table-shell {
    height: auto;
    min-height: 0;
  }

  .template-import-associations-table-shell::before,
  .template-import-associations-table-shell::after,
  .template-import-associations-table-shell .contacts-list-container,
  .template-import-associations-table thead {
    display: none;
  }

  .template-import-associations-table-scroll {
    height: auto;
    padding: 0;
    overflow: visible;
  }

  .template-import-associations-horizontal-scrollbar,
  .template-import-associations-vertical-scrollbar {
    display: none !important;
  }

  .template-import-associations-table .contacts-table__name-scrim {
    display: none;
  }

  .template-import-associations-table {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    --contacts-table-min-width: 0;
    margin: 0;
    border-spacing: 0;
    table-layout: fixed;
  }

  .template-import-associations-table colgroup {
    display: none;
  }

  .template-import-associations-table tbody {
    display: grid;
    gap: 8px;
    width: 100%;
    max-width: 100%;
  }

  .template-import-associations-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border: .5px solid #777;
    border-radius: 5px;
    overflow: hidden;
  }

  .template-import-associations-table tbody th,
  .template-import-associations-table tbody td {
    display: grid;
    align-content: start;
    gap: 3px;
    height: auto;
    min-width: 0;
    min-height: 48px;
    padding: 7px 9px;
    overflow: visible;
    background: #fafafa !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow-wrap: anywhere;
  }

  .template-import-associations-table tbody th::before,
  .template-import-associations-table tbody td::before {
    color: var(--muted);
    font-size: 8px;
  }

  .template-import-associations-table [data-column="object"]::before {
    content: "Object";
  }

  .template-import-associations-table [data-column="associatedDataObject"]::before {
    content: "Associated Data Object";
  }

  .template-import-associations-table [data-column="label"]::before {
    content: "Label";
  }

  .template-import-associations-table [data-column="limit"]::before {
    content: "Limit";
  }

  .template-import-associations-table tbody th:nth-child(odd),
  .template-import-associations-table tbody td:nth-child(odd) {
    border-right: .5px solid #ccc !important;
  }

  .template-import-associations-table tbody th:nth-child(-n + 2),
  .template-import-associations-table tbody td:nth-child(-n + 2) {
    border-bottom: .5px solid #ccc !important;
  }

  .template-import-associations__empty {
    display: block !important;
  }

  .template-import-associations__empty td {
    display: block !important;
    min-height: 52px;
  }

  .template-import-review-footer {
    padding-right: 12px;
    padding-left: 12px;
  }
}

@media (max-width: 430px) {
  .template-import-review-header p.template-import-review-summary,
  .template-import-review-footer__summary {
    display: none;
  }

  .template-import-review-footer__actions {
    width: 100%;
  }

  .template-import-review-footer__actions button {
    flex: 1 1 0;
  }

  .template-import-field {
    align-items: flex-start;
  }

  .template-import-field__label,
  .template-import-field__configuration {
    flex-basis: 100%;
  }
}

@media (max-width: 850px) {
  .data-objects-grid {
    grid-template-columns: minmax(0, 322px);
    width: 100%;
  }
}

@media (max-width: 520px) {
  .data-objects-screen {
    padding: 27px 18px 40px;
  }

  .data-objects-heading {
    gap: 10px 14px;
  }

  .data-objects-intro {
    max-width: 38ch;
  }

  .data-objects-card {
    width: 100%;
  }

  .data-objects-card__icon-panel {
    flex-basis: 68px;
  }
}

/* The Create Data Object form uses the same wide contact drawer and field controls
   as Create Data Field; only its own layout and icon picker need scoped rules. */
.contact-create-drawer.data-object-create-drawer {
  width: min(940px, calc(100vw - 72px));
}

.data-object-create-form__body {
  padding-bottom: 14px;
}

.data-object-create-view-selector {
  position: relative;
  width: min(196px, 100%);
  margin-bottom: 10px;
}

.data-object-create-view-selector .contact-create-multiselect__toggle {
  cursor: pointer;
}

.data-object-create-view-menu {
  position: absolute;
  z-index: 8;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  box-shadow: 0 5px 12px rgb(0 0 0 / 14%);
}

.data-object-create-view-menu[hidden],
.data-object-create-form [data-data-object-view-panel][hidden] {
  display: none;
}

.data-object-create-config {
  min-width: 0;
  padding: 16px 14px;
  background: #fafafa;
  border: .5px solid #ccc;
  border-radius: 6px;
}

.data-object-associations-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 0;
}

.data-object-associations-view-config-card {
  flex-basis: 319px;
}

.data-object-associations-tools {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  padding-right: 16px;
}

.data-object-associations-search {
  flex: 0 1 208px;
  margin-top: 0;
}

.data-object-associations-view-config-card h3 {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
  height: 21px;
  margin: 0;
  padding: 0 6px;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 400;
  letter-spacing: -.25px;
  white-space: nowrap;
  background: #fff;
  border-radius: 3px;
  transform: translateY(2px);
}

.data-object-associations-add {
  flex: 0 0 auto;
  max-width: min(100%, 320px);
  margin-right: 0;
}

.data-object-associations-add .contact-create-menu__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Reuse the Bulk Actions/Contacts table layers, wells, selection, and row strips. */
.data-object-create-associations {
  padding: 4px 0 16px;
  background: transparent;
  border: 0;
}

.bulk-action-toolbar.data-object-associations-selection-toolbar {
  flex-wrap: wrap;
  gap: 4px 8px;
  width: calc(100% - 16px);
  height: auto;
  min-height: 29px;
  margin: 0 16px 0 0;
  padding: 4px 8px;
}

.data-object-associations-selection-toolbar [data-association-selection-count] {
  margin-right: 4px;
  font-size: 9.6px;
  white-space: nowrap;
}

.bulk-action-toolbar.data-object-associations-selection-toolbar > button {
  flex: 0 0 auto;
  width: auto;
}

.data-object-associations-selection-toolbar .bulk-action-toolbar__icon {
  width: 11px;
  height: 11px;
}

.data-object-associations-table-shell {
  flex: none;
  width: 100%;
  max-width: none;
  height: 360px;
  margin: 0;
}

.data-object-associations-table-shell::before,
.data-object-associations-table-shell::after {
  right: 16px;
}

.data-object-associations-table-shell .contacts-list-container {
  right: 26px;
}

.data-object-associations-table-scroll {
  width: 100%;
  max-width: none;
  padding-right: 10px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #555 transparent;
}

.data-object-associations-table-scroll::-webkit-scrollbar {
  display: initial;
  width: 8px;
  height: 8px;
}

.data-object-associations-table-scroll::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 8px;
}

.data-object-associations-table {
  width: max(100%, 680px);
  color: var(--ink);
}

.data-object-associations-table thead th:first-child::before {
  left: -1px;
}

.data-object-associations-table thead th:first-child::after {
  left: -4px;
}

.data-object-associations-table thead .edit-columns-field-token {
  --edit-columns-token-counter-scale: 1;
  position: absolute;
  z-index: 2;
  top: 9px;
  left: 10px;
  max-width: calc(100% - 15px);
}

.data-object-associations-table thead th[data-selection-column] .edit-columns-field-token {
  left: 22px;
  max-width: calc(100% - 27px);
}

.data-object-associations-table tbody tr[tabindex="0"] {
  cursor: pointer;
}

.data-object-associations-table tbody tr[tabindex="0"]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.data-object-associations-table__empty td:only-child {
  height: 58px;
  color: var(--muted);
  font-size: 10px;
  text-align: center;
  background: transparent;
  border: 0;
}

@media (max-width: 767px) {
  .data-object-associations-tools {
    width: 100%;
    order: -1;
  }

  .data-object-associations-view-config-card {
    flex-basis: 100%;
    width: 100%;
  }

  .data-object-associations-search {
    max-width: 208px;
  }

  .data-object-associations-table-shell {
    height: 300px;
  }

  .data-object-associations-table__empty td:only-child {
    text-align: left;
    padding-left: 14px;
  }
}

.data-object-create-grid,
.data-object-create-generated-keys {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px 14px;
  min-width: 0;
}

.data-object-create-grid > * {
  min-width: 0;
}

.data-object-create-help {
  margin: 0;
  color: var(--muted);
  font-size: 9.6px;
  line-height: 1.3;
}

.data-object-create-label-with-info {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.data-object-create-form .contact-create-field input[readonly] {
  color: #555;
  background: #f1f2f3;
  cursor: default;
}

.data-object-create-form .contact-create-field input:not([readonly]):focus-visible,
.data-object-create-icon-open:focus-visible,
.data-object-create-icon-option:focus-visible {
  border-color: #474747;
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.data-object-create-generated-keys {
  margin-top: 16px;
}

.data-object-create-generated-keys .data-field-create-key {
  margin-top: 0;
}

.data-object-create-unique {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 18px;
  cursor: pointer;
}

.data-object-create-unique .contact-selection-checkbox {
  flex: 0 0 12px;
  margin-top: 1px;
}

.data-object-create-unique > span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.data-object-create-unique__title,
.data-object-create-field-label {
  color: var(--ink);
  font-size: 10.8px;
  line-height: 1.15;
}

.data-object-create-icon-field {
  display: grid;
  justify-items: start;
  gap: 5px;
  margin-top: 18px;
}

.data-object-create-icon-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.data-object-create-icon-preview {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  background: #d9ecff;
  border: .5px solid #aaa;
  border-radius: 4.8px;
}

.data-object-create-icon-preview .icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.data-object-create-icon-picker {
  position: relative;
}

.data-object-create-icon-open {
  min-height: 28.8px;
  padding: 2.4px 9.6px;
  color: var(--ink);
  font: inherit;
  font-size: 10.8px;
  background: #fff;
  border: .5px solid #ccc;
  border-radius: 4.8px;
  cursor: pointer;
}

.data-object-create-icon-open:hover {
  background: var(--pale-lime);
}

.data-object-create-icon-menu {
  position: absolute;
  z-index: 7;
  top: calc(100% + 4px);
  left: 0;
  width: 202px;
  max-height: 218px;
  box-shadow: 0 5px 12px rgb(0 0 0 / 14%);
}

.data-object-create-icon-option .icon:first-child {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  object-fit: contain;
}

.data-object-create-icon-option > span {
  flex: 1 1 auto;
}

.data-object-create-description-field {
  margin-top: 18px;
}

.data-object-create-description-field textarea[aria-invalid="true"] {
  border-color: #b3261e;
  box-shadow: 0 0 0 .5px #b3261e;
}

.data-object-create-description-field .data-field-create-description-field__count {
  justify-self: end;
}

.data-object-create-form__error {
  margin-top: 12px;
}

.data-object-create-form__footer button:disabled {
  color: #777;
  background: #f1f1ed;
  border-color: #c8cac8;
  cursor: not-allowed;
}

@media (max-width: 1180px) {
  .contact-create-drawer.data-object-create-drawer {
    width: min(940px, calc(100vw - 24px));
  }
}

@media (max-width: 767px) {
  .contact-create-drawer.data-object-create-drawer {
    top: 48px;
    width: 100vw;
  }
}

@media (max-width: 900px) {
  .data-object-create-grid,
  .data-object-create-generated-keys {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Association editor reuses the Pragtical form drawer, field, menu, and footer controls. */
.add-association-drawer .contact-create-drawer__header h2 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.add-association-help-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 0 0 auto;
  height: 23px;
  margin-left: auto;
  padding: 2px 8px;
  color: var(--ink);
  font: inherit;
  font-size: 10px;
  white-space: nowrap;
  background: var(--pale-lime);
  border: .5px solid #c7cca8;
  border-radius: 4.8px;
  cursor: pointer;
}

.add-association-help-trigger .icon {
  width: 12px;
  height: 12px;
  filter: brightness(0);
}

.add-association-help-trigger:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.data-object-association-feedback:not([hidden]) {
  align-self: center;
  color: #303030;
  font-size: 10.8px;
}

.add-association-dialog::backdrop {
  background: rgb(0 0 0 / 12%);
}

.contact-create-drawer.add-association-drawer {
  width: min(880px, calc(100vw - 120px));
}

.add-association-form__body {
  container: association-body / inline-size;
  padding-bottom: 14px;
}

.add-association-layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr);
  align-items: start;
  gap: 14px;
  min-width: 0;
}

.add-association-config,
.add-association-preview {
  min-width: 0;
  background: #fafafa;
  border: .5px solid #ccc;
  border-radius: 6px;
}

.add-association-section {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 16px 14px;
}

.add-association-section + .add-association-section {
  border-top: .5px solid #ccc;
}

.add-association-section h3,
.add-association-preview h3 {
  margin: 0;
  color: var(--ink);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
}

.add-association-select {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
}

.add-association-select__menu {
  position: absolute;
  z-index: 9;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  box-shadow: 0 5px 12px rgb(0 0 0 / 14%);
}

.add-association-select__menu[hidden],
.add-association-paired-labels[hidden],
.add-association-label-fields[hidden] {
  display: none;
}

.add-association-suggestions[hidden],
.add-association-suggestions__curated[hidden],
.add-association-suggestions__ai[hidden] {
  display: none;
}

.add-association-suggestions__options {
  max-height: 184px;
  overflow-y: auto;
}

.add-association-suggestions__options [role="option"].add-association-suggestion-option {
  align-items: flex-start;
  min-height: 36px;
}

.add-association-suggestion-option__copy {
  display: grid;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.add-association-suggestion-option__title,
.add-association-suggestion-option__description {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.add-association-suggestion-option__description {
  color: var(--muted);
  font-size: 9.6px;
}

.add-association-suggestion-option .contact-create-single-select__check {
  align-self: center;
}

.add-association-suggestions__ai {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.add-association-suggestions__ai .add-association-help-trigger {
  margin-left: 0;
  cursor: not-allowed;
  opacity: .6;
}

.add-association-suggestions__ai .data-object-create-help {
  margin: 0;
}

.add-association-target__menu {
  max-height: 218px;
}

.add-association-target__search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px;
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 4.8px;
}

.add-association-target__search .icon {
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
}

.add-association-target__search input {
  width: 100%;
  height: 24px;
  min-width: 0;
  padding: 0;
  color: var(--ink);
  font: inherit;
  font-size: 10.8px;
  background: transparent;
  border: 0;
  outline: 0;
}

.add-association-target__options {
  max-height: 154px;
  overflow-y: auto;
}

.add-association-target__options [role="option"].add-association-target-option {
  justify-content: flex-start;
}

.add-association-target-option > span {
  flex: 1 1 auto;
}

.add-association-target-option__icon {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  object-fit: contain;
}

.add-association-select__empty {
  margin: 0;
  padding: 8px 6px;
  color: var(--muted);
  font-size: 10px;
}

.add-association-label-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.add-association-radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 18px;
  font-size: 10.8px;
  cursor: pointer;
}

.add-association-radio .contact-selection-checkbox:focus-visible {
  outline: 1px solid #111;
  outline-offset: 1px;
}

.add-association-explanation {
  display: grid;
  gap: 7px;
  min-width: 0;
  margin-top: 4px;
}

.add-association-explanation .add-association-explanation__toggle {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 6px;
  min-height: 18px;
  font-size: 10.8px;
  font-weight: 400;
  cursor: pointer;
}

.add-association-explanation__toggle .contact-selection-checkbox {
  flex: 0 0 11px;
  width: 11px;
  height: 11px;
  padding: 0;
  border-radius: 2px;
}

.add-association-explanation__fields {
  display: grid;
  gap: 4.8px;
  min-width: 0;
}

.add-association-explanation__fields[hidden] {
  display: none;
}

.add-association-explanation__fields textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 28.8px;
  padding: 5px 8.4px;
  overflow-y: hidden;
  color: var(--ink);
  font: inherit;
  font-size: 10.8px;
  line-height: 1.4;
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 4.8px;
  resize: none;
}

.add-association-explanation__fields textarea:focus-visible {
  outline: none;
  border-color: #474747;
  box-shadow: inset 0 0 0 .5px #474747;
}

.add-association-explanation__fields textarea[aria-invalid="true"] {
  border-color: #b3261e;
  box-shadow: 0 0 0 .5px #b3261e;
}

.add-association-paired-labels,
.add-association-limits {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.add-association-paired-labels {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.add-association-preview {
  position: sticky;
  top: 0;
  align-self: start;
  padding: 14px;
}

.add-association-preview h3 {
  margin-bottom: 14px;
}

.add-association-preview__direction + .add-association-preview__direction {
  margin-top: 12px;
  padding-top: 12px;
  border-top: .5px solid #ccc;
}

.add-association-preview__line {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.add-association-preview__object {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  min-width: 0;
  max-width: 80px;
  font-size: 9.6px;
}

.add-association-preview__object > .icon,
.add-association-preview__icon-stack .icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  object-fit: contain;
}

/* The cube artwork has more inset than the other object icons. */
.add-association-preview__object > .add-association-preview__icon--cube,
.add-association-preview__icon-stack .add-association-preview__icon--cube {
  width: 17px;
  height: 17px;
  flex-basis: 17px;
}

.add-association-preview__object > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.add-association-preview__object--target {
  max-width: 88px;
}

.add-association-preview__icon-stack {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.add-association-preview__icon-stack .icon {
  margin-left: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.add-association-preview__icon-stack .icon + .icon {
  margin-left: -4px;
}

.add-association-preview__label {
  min-width: 0;
  flex: 1 1 auto;
  padding: 4px 5px;
  overflow: hidden;
  color: var(--ink);
  font-size: 9.6px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 4.8px;
}

.add-association-preview__quantity {
  flex: 0 0 auto;
  padding: 3px 5px;
  font-size: 9.6px;
  white-space: nowrap;
  background: var(--pale-lime);
  border: .5px solid #c7cca8;
  border-radius: 4.8px;
}

.add-association-preview__direction p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 10.8px;
  line-height: 1.4;
}

.add-association-form__error {
  margin: 0 14px 14px;
}

.add-association-form__footer button:disabled {
  color: #777;
  background: #f1f1ed;
  border-color: #c8cac8;
  cursor: not-allowed;
}

@container association-body (max-width: 780px) {
  .add-association-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .add-association-preview {
    position: static;
  }
}

@container association-body (max-width: 470px) {
  .add-association-paired-labels {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .contact-create-drawer.add-association-drawer {
    top: 48px;
    width: 100vw;
  }

  .add-association-preview__line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "source target" "label limit";
    gap: 6px;
  }

  .add-association-preview__object {
    grid-area: source;
    max-width: none;
  }

  .add-association-preview__object--target {
    grid-area: target;
    justify-self: end;
  }

  .add-association-preview__label {
    grid-area: label;
    width: 100%;
  }

  .add-association-preview__quantity {
    grid-area: limit;
    justify-self: end;
  }
}

/* Contextual guidance sits above the Add Association form without unmounting it. */
.association-help-dialog::backdrop {
  background: rgb(0 0 0 / 12%);
}

.contact-create-drawer.association-help-drawer {
  width: min(390px, calc(100vw - 120px));
}

.association-help-content {
  padding: 16px 14px 12px;
}

.association-help-content__scroll {
  display: grid;
  align-content: start;
  gap: 14px;
}

.association-help-intro,
.association-help-section p,
.association-help-note {
  margin: 0;
  color: var(--ink);
  font-size: 10.8px;
  line-height: 1.45;
}

.association-help-section {
  display: grid;
  gap: 7px;
  border-top: .5px solid #ccc;
  padding-top: 13px;
}

.association-help-section h3 {
  margin: 0;
  color: var(--ink);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
}

.association-help-section .association-help-example {
  padding: 8px;
  background: #fff;
  border: .5px solid #ccc;
  border-radius: 4.8px;
}

.association-help-limits {
  display: grid;
  gap: 7px;
  margin: 0;
}

.association-help-limits div {
  display: grid;
  gap: 2px;
}

.association-help-limits dt,
.association-help-limits dd {
  margin: 0;
  color: var(--ink);
  font-size: 10.8px;
  line-height: 1.35;
}

.association-help-limits dt {
  font-weight: 500;
}

.association-help-note {
  border-top: .5px solid #ccc;
  padding-top: 12px;
}

.association-help-footer {
  justify-content: flex-end;
}

@media (max-width: 767px) {
  .contact-create-drawer.association-help-drawer {
    top: 48px;
    width: 100vw;
  }
}

/* Suggested associations are inspected in a child dialog before the form changes. */
.add-association-suggestion-preview-dialog::backdrop {
  background: rgb(0 0 0 / 12%);
}

.contact-create-drawer.add-association-suggestion-preview-drawer {
  width: min(880px, calc(100vw - 120px));
}

.add-association-suggestion-preview__content {
  display: grid;
  align-content: start;
  gap: 12px;
  container: suggestion-snapshot / inline-size;
}

.add-association-suggestion-preview__notice,
.add-association-suggestion-preview__summary p,
.add-association-suggestion-preview__choice-help {
  margin: 0;
  color: var(--muted);
  font-size: 10.8px;
  line-height: 1.45;
}

.add-association-suggestion-preview__intro,
.add-association-suggestion-preview__summary {
  display: grid;
  gap: 8px;
}

.add-association-suggestion-preview__summary h3 {
  margin: 0;
  color: var(--ink);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
}

.add-association-suggestion-preview__columns {
  grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr);
}

.add-association-suggestion-preview__field {
  gap: 4.8px;
}

.add-association-suggestion-preview__label-column {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
}

.add-association-suggestion-preview__control {
  justify-content: flex-start;
  cursor: default;
}

.add-association-suggestion-preview__control .contact-create-multiselect__caret {
  margin-left: auto;
}

.add-association-suggestion-preview__modes .add-association-radio {
  cursor: default;
}

.add-association-suggestion-preview__modes .contact-selection-checkbox {
  display: inline-block;
  flex: 0 0 11px;
  cursor: default;
}

.add-association-suggestion-preview__modes .contact-selection-checkbox.is-checked {
  background: #d1e9ff url("../general, reusable UI assets for pragtical/check.svg") center / 7px 6px no-repeat;
}

.add-association-suggestion-preview__visual {
  top: 0;
}

.add-association-suggestion-preview__error {
  margin: 0 0 8px;
}

.add-association-suggestion-preview__footer {
  justify-content: flex-end;
}

.add-association-suggestion-preview__footer button:disabled {
  color: #777;
  background: #f1f1ed;
  border-color: #c8cac8;
  cursor: not-allowed;
}

@container suggestion-snapshot (max-width: 780px) {
  .add-association-suggestion-preview__columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .add-association-suggestion-preview__visual {
    position: static;
  }
}

@container suggestion-snapshot (max-width: 470px) {
  .add-association-suggestion-preview__columns .add-association-paired-labels {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .contact-create-drawer.add-association-suggestion-preview-drawer {
    top: 48px;
    width: 100vw;
  }
}

@media (max-width: 480px) {
  .add-association-suggestion-preview__footer button {
    flex: 1 1 100%;
  }
}

/* Manage Data: Import Data. This page composes the existing Pragtical directory,
   table, pagination, and drawer primitives without leaking styles to other views. */
.import-data-screen-host {
  display: contents;
}

.import-data-screen {
  min-height: calc(100dvh - 35px);
  padding: 26px 36px 8px 32px;
}

.import-data-heading {
  display: grid;
  gap: 4px;
  flex: 0 0 auto;
}

.import-data-heading h1,
.import-data-heading p {
  margin: 0;
}

.import-data-heading h1 {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -.2px;
  line-height: 1.2;
}

.import-data-heading p {
  color: var(--ink);
  font-size: 10.8px;
  line-height: 1.35;
}

.import-data-launch-card {
  display: grid;
  place-items: center;
  align-content: center;
  flex: 0 0 auto;
  gap: 10px;
  width: min(374px, 100%);
  min-height: 153px;
  margin-top: 17px;
  padding: 22px 20px 18px;
  color: var(--ink);
  font: inherit;
  text-align: center;
  background: #fff;
  border: .5px solid #ccc;
  border-radius: 4.8px;
}

.import-data-launch-card:hover,
.import-data-launch-card:focus-visible {
  background: #fafafa;
  border-color: #aaa;
}

.import-data-launch-card:focus-visible {
  outline-offset: 2px;
}

.import-data-launch-card__icon {
  width: 33px;
  height: 33px;
}

.import-data-launch-card > span {
  font-size: 12px;
  line-height: 1.2;
}

.import-data-launch-card > strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 3px 10px;
  font-size: 9.6px;
  font-weight: 400;
  line-height: 1;
  background: var(--pale-lime);
  border: .5px solid #aeb49d;
  border-radius: 3.6px;
}

.import-data-launch-card:hover > strong,
.import-data-launch-card:focus-visible > strong {
  background: #eff6ce;
}

.import-history-panel {
  flex: 0 0 auto;
  min-height: 0;
  margin-top: auto;
}

.import-history-toolbar {
  flex: 0 0 auto;
  min-height: 40px;
}

.import-history-toolbar .view-toolbar__primary {
  gap: 14px;
  min-width: 0;
}

.import-history-toolbar .view-config-card {
  flex-basis: 319px;
  width: 319px;
}

.import-history-toolbar .view-config-card h2 {
  flex-basis: 112px;
}

.import-history-filters {
  position: relative;
  z-index: 6;
  min-width: 0;
}

.import-history-filter {
  position: relative;
  overflow: visible;
}

.import-history-filter .filter-chip__toggle,
.import-history-filter .filter-chip__remove {
  border-radius: inherit;
}

.import-history-filter .filter-chip__toggle:hover,
.import-history-filter .filter-chip__toggle:focus-visible,
.import-history-filter .filter-chip__remove:hover,
.import-history-filter .filter-chip__remove:focus-visible {
  background: var(--blue);
}

.import-history-filter__menu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 4px);
  left: 0;
  display: grid;
  width: max-content;
  min-width: 118px;
  padding: 4px;
  overflow: hidden;
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 4.8px;
  box-shadow: none;
}

.import-history-filter__menu[hidden] {
  display: none;
}

.import-history-filter__menu [role="option"] {
  width: 100%;
  min-height: 23px;
  padding: 3px 6px;
  color: var(--ink);
  font: inherit;
  font-size: 9px;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
  background: #fff;
  border: 0;
  border-radius: 3.6px;
}

.import-history-filter__menu [role="option"][aria-selected="true"] {
  background: var(--pale-lime);
}

.import-history-filter__menu [role="option"]:hover,
.import-history-filter__menu [role="option"]:focus-visible {
  background: var(--blue);
  outline: none;
  box-shadow: inset 0 0 0 .5px #474747;
}

.import-history-toolbar .view-toolbar__search-tools {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  margin-right: 90px;
}

.import-history-toolbar .list-search {
  flex: 0 0 208px;
  width: 208px;
}

.import-history-table-shell {
  flex: 0 0 134px;
  height: 134px;
  min-height: 134px;
}

.import-history-table-scroll {
  min-width: 0;
  overflow-x: auto;
  overflow-y: auto;
}

.import-history-table {
  width: var(--contacts-table-min-width, 1188px);
}

.import-history-table thead .column-field-token {
  max-width: calc(100% - 15px);
}

.import-history-table tbody tr[data-import-history-id] {
  cursor: default;
}

.import-history-table tbody tr[data-import-history-id]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.import-history-table tbody td > span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-history-table tbody .import-history-source {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  gap: 4px;
}

.import-history-source__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.import-history-source__icon {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
}

.import-history-status {
  width: max-content;
  max-width: 100%;
  padding: 2px 6px;
  background: #e6e6e0;
  border-radius: 8px;
}

.import-history-status--completed {
  background: var(--pale-lime);
}

.import-history-status--completed-with-errors {
  background: #fff4cf;
}

.import-history-status--failed {
  background: #f8dddd;
}

.import-history-status--running {
  background: var(--blue);
}

.import-history-table tbody .import-history-state td {
  height: 84px;
  padding: 14px;
  color: var(--muted);
  white-space: normal;
  background: #fafafa;
  border: .75px solid #474747;
  border-radius: 5px;
}

.import-history-state td > div {
  display: grid;
  place-items: center;
  gap: 6px;
  max-width: 440px;
  margin: 0 auto;
  text-align: center;
}

.import-history-state h3,
.import-history-state p {
  margin: 0;
}

.import-history-state h3 {
  color: var(--ink);
  font-size: 11px;
  font-weight: 500;
}

.import-history-state p,
.import-history-state [role="status"] {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.import-history-state button {
  min-height: 24px;
  padding: 3px 9px;
  color: var(--ink);
  font: inherit;
  font-size: 9.6px;
  background: #fff;
  border: .5px solid #ccc;
  border-radius: 4.8px;
}

.import-history-state [data-import-start],
.import-history-state [data-import-history-retry] {
  background: var(--pale-lime);
  border-color: #c7cca8;
}

.import-history-state button:hover,
.import-history-state button:focus-visible {
  background: var(--blue);
}

.import-history-vertical-scrollbar {
  top: 64px;
  right: 48px;
  bottom: 10px;
}

.import-history-horizontal-scrollbar {
  right: 70px;
  bottom: -20px;
  left: 20px;
}

.import-data-workspace .contacts-pagination {
  min-width: 0;
}

.import-data-dialog {
  z-index: 80;
}

.import-data-drawer {
  width: min(430px, 100vw);
}

.import-data-drawer .contact-create-drawer__header {
  justify-content: space-between;
}

.import-data-drawer .contact-create-drawer__header p {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.import-data-steps {
  flex: 0 0 auto;
  padding: 8px 12px;
  background: #fafafa;
  border-bottom: .5px solid #ccc;
}

.import-data-steps ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.import-data-steps li {
  display: grid;
  place-items: center;
  min-height: 25px;
  padding: 3px 6px;
  color: var(--muted);
  font-size: 9.6px;
  text-align: center;
  background: #ededed;
  border: .5px solid #ccc;
  border-radius: 4.8px;
}

.import-data-steps li.is-active {
  color: var(--ink);
  background: var(--pale-lime);
  border-color: #c7cca8;
}

.import-data-form {
  padding: 14px 14px 12px;
}

.import-data-form__fields {
  display: grid;
  align-content: start;
  gap: 12px;
  padding-bottom: 14px;
}

.import-data-form__fields h3,
.import-data-form__fields p {
  margin: 0;
}

.import-data-form__fields h3 {
  font-size: 12px;
  font-weight: 500;
}

.import-data-form__fields p {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.import-data-upload-step,
.import-data-map-step,
.import-data-preferences-step,
.import-data-review-step {
  display: grid;
  align-content: start;
  gap: 9px;
  min-width: 0;
}

.import-data-upload {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  width: 100%;
  min-height: 180px;
  padding: 20px;
  color: var(--ink);
  font-size: 10.8px;
  text-align: center;
  background: #fff;
  border: .75px dashed #aaa;
  border-radius: 4.8px;
  cursor: pointer;
}

.import-data-upload:hover,
.import-data-upload:focus-within {
  background: var(--pale-lime);
  border-color: #777;
}

.import-data-upload:focus-within {
  border-color: #474747;
  outline: none;
  box-shadow: inset 0 0 0 .5px #474747;
}

.import-data-upload__icon {
  width: 32px;
  height: 32px;
}

.import-data-upload input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.import-data-file-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  min-height: 30px;
  padding: 6px 8px;
  font-size: 9.6px;
  background: #fff;
  border: .5px solid #ccc;
  border-radius: 4.8px;
}

.import-data-file-summary strong {
  min-width: 0;
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-data-file-summary span {
  flex: 0 0 auto;
  color: var(--muted);
}

.import-data-contact-options {
  display: grid;
  gap: 9px;
  min-width: 0;
  margin-top: 3px;
}

.import-data-mode-select {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
}

.import-data-mode-select__menu {
  position: absolute;
  z-index: 9;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  box-shadow: 0 5px 12px rgb(0 0 0 / 14%);
}

.import-data-select,
.import-data-tag-select {
  position: relative;
  min-width: 0;
  margin: 0;
}

.import-data-select__menu,
.import-data-tag-select__menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  box-shadow: 0 5px 12px rgb(0 0 0 / 14%);
}

.import-data-select.is-open,
.import-data-tag-select.is-open {
  z-index: 31;
}

.import-data-select__toggle:disabled,
.import-data-tag-select__toggle:disabled {
  color: var(--muted);
  background: #f1f1ed;
  cursor: default;
  opacity: .72;
}

.import-data-match-priority {
  display: flex;
  align-items: center;
  width: 100%;
  height: 28.8px;
  min-width: 0;
  padding: 2.4px 8.4px;
  color: var(--ink);
  font-size: 10.8px;
  background: #f8f8fa;
  border: .5px solid #aaa;
  border-radius: 4.8px;
}

.import-data-form [data-import-map],
.import-data-form [data-import-preferences],
.import-data-form [data-import-review] {
  display: grid;
  align-content: start;
  gap: 9px;
}

.import-data-form .contact-create-field {
  gap: 4.8px;
}

.import-data-object-field {
  width: 100%;
  max-width: none;
  margin-top: 3px;
}

.import-data-preferences-step > header {
  display: grid;
  gap: 3px;
  padding-bottom: 9px;
  border-bottom: .5px solid #ddd;
}

.import-data-preference-list {
  display: grid;
  gap: 0;
  min-width: 0;
  background: #fff;
  border: .5px solid #ccc;
  border-radius: 4.8px;
}

.import-data-preference-row {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(145px, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 66px;
  padding: 10px;
  border-bottom: .5px solid #ddd;
}

.import-data-preference-row:last-child {
  border-bottom: 0;
}

.import-data-preference-row.is-unavailable {
  color: var(--muted);
}

.import-data-preference-toggle {
  display: grid;
  grid-template-columns: 11px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 10.8px;
  line-height: 1.3;
  cursor: pointer;
}

.import-data-preference-toggle .contact-selection-checkbox {
  align-self: center;
}

.import-data-preference-toggle .contact-selection-checkbox:disabled {
  cursor: not-allowed;
}

.import-data-preference-control {
  min-width: 0;
}

.import-data-preference-help {
  margin: 0;
  color: var(--muted);
  font-size: 9.6px;
  line-height: 1.35;
}

.import-data-preference-control > input {
  width: 100%;
  height: 28.8px;
  min-width: 0;
  padding: 2.4px 8.4px;
  color: var(--ink);
  font: inherit;
  font-size: 10.8px;
  background: #f8f8fa;
  border: .5px solid #aaa;
  border-radius: 4.8px;
}

.import-data-preference-control > input:disabled {
  color: var(--muted);
  background: #f1f1ed;
  opacity: .72;
}

.import-data-preference-control > input:focus-visible {
  border-color: #474747;
  outline: none;
  box-shadow: inset 0 0 0 .5px #474747;
}

.import-data-tag-select__menu {
  max-height: 176px;
}

.import-data-preferences-empty {
  padding: 12px;
  background: #fafafa;
  border: .5px solid #ccc;
  border-radius: 4.8px;
}

.import-data-mapping-requirements {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding-top: 3px;
}

.import-data-mapping-requirements__card {
  display: grid;
  gap: 0;
  min-width: 0;
  margin-top: 4px;
  padding: 9px 10px;
  background: #fff;
  border: .5px solid #ccc;
  border-radius: 4.8px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
}

.import-data-mapping-requirements__card h4 {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
}

.import-data-mapping-requirements details {
  padding: 7px 0;
  border-top: .5px solid #ddd;
}

.import-data-mapping-requirements details:first-of-type {
  border-top: 0;
}

.import-data-mapping-requirements summary {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--ink);
  font-size: 10.8px;
  line-height: 1.25;
  cursor: pointer;
  list-style: none;
}

.import-data-mapping-requirements summary::-webkit-details-marker {
  display: none;
}

.import-data-mapping-requirements summary::before {
  content: "";
  width: 7.2px;
  height: 4.8px;
  flex: 0 0 7.2px;
  background: url("../general, reusable UI assets for pragtical/drop-down arrow.svg") center / contain no-repeat;
  transition: transform 120ms ease;
}

.import-data-mapping-requirements details:not([open]) summary::before {
  transform: rotate(-90deg);
}

.import-data-mapping-requirement__rule {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 22px;
  padding: 7px 0 0 14px;
  color: var(--ink);
  font-size: 10.8px;
  line-height: 1.25;
}

.import-data-mapping-requirement__check {
  display: grid;
  place-items: center;
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  background: #fff;
  border: .75px solid #aaa;
  border-radius: 50%;
}

.import-data-mapping-requirement__check.is-met {
  border-color: #474747;
  background: var(--pale-lime);
}

.import-data-mapping-requirement__check .icon {
  width: 7.2px;
  height: 6px;
}

.import-data-mapping-result {
  display: grid;
  place-items: center;
  gap: 6px;
  min-width: 0;
  margin-top: 2px;
  padding: 13px 10px;
  text-align: center;
  background: #fafafa;
  border: .5px solid #ccc;
  border-radius: 4.8px;
}

.import-data-mapping-result h3,
.import-data-mapping-result p {
  margin: 0;
}

.import-data-mapping-result h3 {
  color: var(--ink);
  font-size: 11px;
  font-weight: 500;
}

.import-data-mapping-result p {
  color: var(--muted);
  font-size: 9.6px;
}

.import-data-mapping-result button {
  min-height: 26px;
  margin-top: 2px;
  padding: 3px 10px;
  color: var(--ink);
  font: inherit;
  font-size: 9.6px;
  background: var(--pale-lime);
  border: .5px solid #c7cca8;
  border-radius: 4.8px;
}

.import-data-mapping-result button:hover,
.import-data-mapping-result button:focus-visible {
  background: var(--blue);
  border-color: #474747;
  outline: none;
  box-shadow: inset 0 0 0 .5px #474747;
}

.import-data-mapped-columns-dialog {
  width: min(1040px, calc(100vw - 24px));
  max-width: none;
  height: min(620px, calc(100dvh - 24px));
  max-height: none;
  margin: auto;
  padding: 0;
  color: var(--ink);
  background: #fff;
  border: .75px solid #8f928f;
  border-radius: 5px;
  box-shadow: 0 14px 38px rgb(0 0 0 / 15%);
  overflow: hidden;
}

.import-data-mapped-columns-dialog::backdrop {
  background: rgb(255 255 255 / 58%);
}

.import-data-mapped-columns-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  outline: none;
}

.import-data-mapped-columns-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px 10px;
  background: #fff;
  border-bottom: .5px solid #8f928f;
}

.import-data-mapped-columns-header > div {
  min-width: 0;
}

.import-data-mapped-columns-header h2,
.import-data-mapped-columns-header p,
.import-data-mapped-columns-body > p {
  margin: 0;
}

.import-data-mapped-columns-header h2 {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
}

.import-data-mapped-columns-header p,
.import-data-mapped-columns-body > p,
.import-data-mapped-columns-footer {
  color: var(--muted);
  font-size: 9.6px;
  line-height: 1.35;
}

.import-data-mapped-columns-header p {
  margin-top: 4px;
}

.import-data-mapped-columns-header > button {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  padding: 0;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  background: transparent;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}

.import-data-mapped-columns-body {
  min-width: 0;
  min-height: 0;
  padding: 13px 16px 18px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.import-data-mapped-columns-error:not([hidden]) {
  margin-top: 8px;
}

.import-data-mapped-columns-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  padding: 8px 16px;
  background: #fff;
  border-top: .5px solid #ccc;
}

.import-data-mapped-columns-footer output {
  min-width: 0;
}

.import-data-mapped-columns-footer button {
  min-height: 28.8px;
  padding: 3px 12px;
  color: var(--ink);
  font: inherit;
  font-size: 9.6px;
  background: var(--pale-lime);
  border: .5px solid #c7cca8;
  border-radius: 4.8px;
  cursor: pointer;
}

.import-data-mapped-columns-header > button:focus-visible,
.import-data-mapped-columns-footer button:focus-visible,
.import-data-mapped-columns-dialog .import-data-select__toggle:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.import-data-mapping-table-frame {
  width: 100%;
  min-width: 0;
  margin-top: 10px;
  overflow: visible;
}

.import-data-mapping-table {
  width: 100%;
  min-width: 0;
  margin: -1px 0 0;
  table-layout: fixed;
}

.import-data-mapping-table thead {
  top: 0;
}

.import-data-mapping-table thead .edit-columns-field-token {
  --edit-columns-token-counter-scale: 1;
  position: absolute;
  z-index: 2;
  top: 9px;
  left: 10px;
  max-width: calc(100% - 15px);
}

.import-data-mapping-table tbody th,
.import-data-mapping-table tbody td {
  height: 58px;
  padding: 5px 8px;
  vertical-align: middle;
}

.import-data-mapping-table tbody th > span,
.import-data-mapping-table tbody td[data-column="object"] > span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-data-mapping-file-entries {
  display: grid;
  grid-auto-rows: 1.2em;
  gap: 2px;
  min-width: 0;
  max-height: calc(3.6em + 4px);
  margin: 0;
  padding: 0 4px 0 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  line-height: 1.2;
  list-style: none;
  scrollbar-color: #aaa transparent;
  scrollbar-width: thin;
}

.import-data-mapping-file-entries li {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-data-mapping-file-entries::-webkit-scrollbar {
  width: 4px;
}

.import-data-mapping-file-entries::-webkit-scrollbar-thumb {
  background: #aaa;
  border-radius: 999px;
}

.import-data-mapping-file-entries:focus-visible {
  outline: 1px solid var(--focus);
  outline-offset: 1px;
}

.import-data-mapping-status {
  display: inline;
  padding: 0;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: 0;
}

.import-data-mapping-select .import-data-select__toggle,
.import-data-mapping-select .import-data-select__menu [role="option"] {
  font-size: 10px;
}

.import-data-mapping-table tbody td[data-column="field"]:has(.import-data-mapping-select.is-open) {
  overflow: visible;
}

.import-data-mapping-table tbody tr:nth-last-child(-n + 3)
  .import-data-mapping-select .import-data-select__menu {
  top: auto;
  bottom: calc(100% + 4px);
}

.import-data-mapping-empty {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-size: 9.6px;
  white-space: nowrap;
}

.import-data-mapping-empty .contact-selection-checkbox {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  margin: 0;
}

.import-data-review-summary {
  display: grid;
  gap: 0;
  margin: 3px 0 0;
  overflow: hidden;
  background: #fff;
  border: .5px solid #ccc;
  border-radius: 4.8px;
}

.import-data-review-summary > div {
  display: grid;
  grid-template-columns: minmax(90px, .7fr) minmax(0, 1.3fr);
  min-height: 31px;
  border-bottom: .5px solid #ddd;
}

.import-data-review-summary > div:last-child {
  border-bottom: 0;
}

.import-data-review-summary dt,
.import-data-review-summary dd {
  display: flex;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 5px 8px;
  font-size: 9.6px;
}

.import-data-review-summary dt {
  color: var(--muted);
  background: #f2f2ef;
  border-right: .5px solid #ddd;
}

.import-data-review-summary dd {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-data-review-summary__preferences dd {
  align-items: flex-start;
  white-space: normal;
}

.import-data-review-preferences {
  display: grid;
  gap: 4px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.import-data-review-preferences li {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 6px;
}

.import-data-review-preferences strong {
  font-weight: 500;
}

.import-data-review-warnings {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 8px 8px 8px 24px;
  color: #6a5616;
  font-size: 9.6px;
  line-height: 1.35;
  background: #fff9e8;
  border: .5px solid #d7c37a;
  border-radius: 4.8px;
}

.import-data-form [data-import-error]:not(:empty),
.import-data-form .data-field-create-error:not(:empty) {
  padding: 7px 8px;
  color: #b3261e;
  font-size: 9.6px;
  line-height: 1.35;
  background: #fff;
  border: .5px solid #b3261e;
  border-radius: 4.8px;
}

.import-data-form__error[hidden] {
  display: none;
}

.import-data-form .contact-create-form__footer {
  justify-content: flex-end;
  padding-right: 0;
  padding-left: 0;
}

.import-data-form .contact-create-form__footer button {
  background: #fff;
  border-color: #ccc;
}

.import-data-form .contact-create-form__footer button[type="submit"] {
  background: var(--pale-lime);
  border-color: #c7cca8;
}

.import-data-form .contact-create-form__footer button:not(:disabled):hover,
.import-data-form .contact-create-form__footer button:focus-visible {
  background: var(--blue);
}

.import-data-form .contact-create-form__footer button:disabled {
  color: #777;
  background: #f1f1ed;
  border-color: #c8cac8;
  cursor: not-allowed;
}

/* Import History selection and job details. */
.import-history-selection-toolbar,
.import-history-panel [data-import-history-selection-toolbar] {
  flex-wrap: wrap;
  gap: 5px 8px;
  width: 100%;
  height: auto;
  min-height: 29px;
  margin: 0;
  padding: 4px 9px;
}

.import-history-selection-toolbar[hidden],
.import-history-panel [data-import-history-selection-toolbar][hidden] {
  display: none;
}

.import-history-selection-toolbar__count,
.import-history-selection-toolbar .data-values-selection-toolbar__count,
.import-history-panel [data-import-history-selection-count] {
  margin-right: 4px;
  color: var(--muted);
  font-size: 9.6px;
  white-space: nowrap;
}

.bulk-action-toolbar.import-history-selection-toolbar > button,
.import-history-panel [data-import-history-selection-toolbar] > button {
  flex: 0 0 auto;
  width: auto;
}

.import-history-selection-toolbar > button:not(:disabled):hover,
.import-history-selection-toolbar > button:focus-visible,
.import-history-panel [data-import-history-selection-toolbar] > button:not(:disabled):hover,
.import-history-panel [data-import-history-selection-toolbar] > button:focus-visible {
  background: var(--blue);
}

.import-history-table tbody tr[data-import-history-id] {
  cursor: pointer;
}

.import-history-table tbody tr[data-import-history-id]:not(.is-selected):not([aria-selected="true"]):hover td {
  background: #f1f2ed;
}

.import-history-table tbody tr[aria-selected="true"] td {
  height: 34px;
  background:
    linear-gradient(#e5e9ce, #f1f3d8) center / 100% 24px no-repeat,
    #fafafa;
  border-top: .75px solid #474747;
  border-bottom: .75px solid #474747;
}

.import-history-table tbody tr:nth-child(odd)[aria-selected="true"] td {
  background:
    linear-gradient(#e5e9ce, #f1f3d8) center / 100% 24px no-repeat,
    linear-gradient(#e8e8e8, #ebebeb);
}

.import-history-table tbody tr:is(.is-selected, [aria-selected="true"]) td:first-child {
  box-shadow: inset 3px 0 0 #7d8c36;
}

.import-details-dialog {
  z-index: 82;
}

.import-details-drawer {
  width: min(760px, 100vw);
}

.import-details-drawer.is-refreshing {
  animation: none;
}

.import-details-header {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-basis: auto;
  min-height: 54px;
  padding-top: 7px;
  padding-bottom: 7px;
}

.import-details-header > div {
  min-width: 0;
}

.import-details-header h2,
.import-details-header p {
  margin: 0;
}

.import-details-header p {
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted);
  font-size: 9.6px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-details-header > button {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  padding: 0;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  line-height: 1;
  background: transparent;
  border: 0;
  border-radius: 4px;
}

.import-details-header > button:hover,
.import-details-header > button:focus-visible {
  background: var(--blue);
  outline: none;
}

.import-details-header > button:focus-visible {
  box-shadow: inset 0 0 0 1px #474747;
}

.import-details-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  padding: 12px 14px;
  overflow: hidden;
}

.import-details-summary {
  display: grid;
  grid-template-columns: 1.1fr repeat(5, minmax(0, 1fr));
  gap: 7px;
  flex: 0 0 auto;
  min-width: 0;
}

.import-details-summary-card {
  display: grid;
  align-content: space-between;
  gap: 6px;
  min-width: 0;
  min-height: 55px;
  padding: 8px 9px;
  background: #fff;
  border: .5px solid #ccc;
  border-radius: 4.8px;
}

.import-details-summary-card.is-error {
  background: #fff8f6;
  border-color: #d9aaa4;
}

.import-details-summary-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  min-width: 0;
}

.import-details-summary-card span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 9.6px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-details-summary-card small {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 9.6px;
  font-weight: 400;
}

.import-details-summary-card strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

.import-details-summary-card.is-error strong,
.import-details-summary-card.is-error small {
  color: #b3261e;
}

.import-details-retry-link {
  flex: 0 0 auto;
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 9.6px;
  line-height: 1.3;
}

.import-details-fix-outcome {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 8px 9px;
  color: var(--ink);
  font-size: 9.6px;
  line-height: 1.35;
  border: .5px solid #c7cca8;
  border-radius: 4.8px;
}

.import-details-fix-outcome--success {
  background: var(--pale-lime);
}

.import-details-fix-outcome--partial {
  background: #fff9e8;
  border-color: #d7c37a;
}

.import-details-fix-outcome__icon {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  background: #fff;
  border: .5px solid #aeb49d;
  border-radius: 50%;
}

.import-details-fix-outcome__icon .icon {
  width: 8px;
  height: 7px;
}

.import-details-fix-outcome > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.import-details-fix-outcome strong {
  font-size: 10.8px;
  font-weight: 500;
}

.import-details-fix-outcome div > span {
  color: var(--muted);
}

.import-details-job-failure {
  display: grid;
  gap: 3px;
  flex: 0 0 auto;
  padding: 7px 8px;
  color: #b3261e;
  font-size: 9.6px;
  line-height: 1.35;
  background: #fff8f6;
  border: .5px solid #d9aaa4;
  border-radius: 4.8px;
}

.import-details-job-failure strong {
  font-weight: 500;
}

.import-details-table-tools {
  position: relative;
  z-index: 8;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  flex: 0 0 auto;
  min-width: 0;
}

.import-details-filter {
  width: 184px;
  max-width: 100%;
}

.import-details-filter > label {
  font-size: 9.6px;
}

.import-details-filter .import-data-select__toggle,
.import-details-filter .import-data-select__menu [role="option"] {
  font-size: 9.6px;
}

.import-details-filter .import-data-select__menu {
  z-index: 40;
}

.import-details-table-scroll {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 116px;
  overflow: auto;
  overscroll-behavior: contain;
  border-bottom: .5px solid #ccc;
  scrollbar-color: #aaa transparent;
  scrollbar-width: thin;
}

.import-details-table-scroll:focus-visible {
  outline: 1px solid var(--focus);
  outline-offset: 1px;
}

.import-details-pagination {
  width: 100%;
  min-height: 32px;
  margin: -10px 0 0;
  padding: 4px 8px;
  border-top: 0;
}

.import-details-table {
  width: 100%;
  min-width: 680px;
  margin: 0;
  table-layout: fixed;
}

.import-details-table thead {
  top: 0;
}

.import-details-table thead .column-field-token {
  position: absolute;
  z-index: 2;
  top: 9px;
  left: 10px;
  max-width: calc(100% - 15px);
}

.import-details-table thead .edit-columns-field-token {
  --edit-columns-token-counter-scale: 1;
}

.import-details-table tbody th,
.import-details-table tbody td {
  height: 44px;
  padding: 5px 8px;
  vertical-align: middle;
  font-size: 9.6px;
}

.import-details-table tbody [data-column="object"] > span,
.import-details-table tbody [data-column="record"] > span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-details-table tbody [data-column="record"] small {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted);
  font-size: 9.6px;
  font-weight: 400;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-details-table tbody [data-column="message"] > span {
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.25;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.import-details-record-status {
  display: inline-block;
  max-width: 100%;
  padding: 2px 6px;
  overflow: hidden;
  color: var(--ink);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #e6e6e0;
  border-radius: 8px;
}

.import-details-record-status--created,
.import-details-record-status--success,
.import-details-record-status--updated,
.import-details-record-status--resolved,
.import-details-record-status--ready {
  background: var(--pale-lime);
}

.import-details-record-status--failed {
  color: #b3261e;
  background: #fbe9e6;
}

.import-details-record-status--skipped,
.import-details-record-status--unknown {
  color: var(--muted);
}

.import-details-table [data-column="action"] {
  text-align: center;
}

.import-details-table [data-import-details-fix] {
  min-height: 25px;
  padding: 3px 8px;
  color: var(--ink);
  font: inherit;
  font-size: 9.6px;
  white-space: nowrap;
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 4.8px;
}

.import-details-table [data-import-details-fix]:hover,
.import-details-table [data-import-details-fix]:focus-visible {
  background: var(--blue);
  outline: none;
  box-shadow: inset 0 0 0 .5px #474747;
}

.import-details-table-state td {
  height: 116px !important;
  padding: 16px !important;
  white-space: normal;
}

.import-details-table-state td > div {
  display: grid;
  place-items: center;
  gap: 5px;
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}

.import-details-table-state h3,
.import-details-table-state p {
  margin: 0;
}

.import-details-table-state h3 {
  font-size: 10.8px;
  font-weight: 500;
}

.import-details-table-state p {
  color: var(--muted);
  font-size: 9.6px;
  line-height: 1.4;
}

.import-details-guardrail {
  flex: 0 0 auto;
  margin: 0;
  padding: 7px 8px;
  color: #6a5616;
  font-size: 9.6px;
  line-height: 1.35;
  background: #fff9e8;
  border: .5px solid #d7c37a;
  border-radius: 4.8px;
}

.import-details-guardrail p {
  margin: 0;
}

.import-details-guardrail button {
  min-height: 25px;
  margin-top: 6px;
  padding: 3px 8px;
  color: var(--ink);
  font: inherit;
  font-size: 9.6px;
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 4.8px;
}

.import-details-guardrail button:hover,
.import-details-guardrail button:focus-visible {
  background: var(--blue);
  outline: none;
  box-shadow: inset 0 0 0 .5px #474747;
}

.import-details-error {
  flex: 0 0 auto;
  margin: 0;
  padding: 7px 8px;
  color: #b3261e;
  font-size: 9.6px;
  line-height: 1.35;
  background: #fff;
  border: .5px solid #b3261e;
  border-radius: 4.8px;
}

.import-details-error[hidden] {
  display: none;
}

.import-details-footer {
  justify-content: flex-end;
  gap: 8px;
  min-height: 49px;
  padding: 9px 14px;
}

.import-details-footer > span {
  min-width: 0;
  margin-right: auto;
  overflow: hidden;
  color: var(--muted);
  font-size: 9.6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-details-footer button {
  flex: 0 0 auto;
}

.import-details-footer [data-import-details-retry] {
  background: var(--pale-lime);
  border-color: #c7cca8;
}

.import-details-footer button:not(:disabled):hover,
.import-details-footer button:focus-visible {
  background: var(--blue);
  outline: none;
  box-shadow: inset 0 0 0 .5px #474747;
}

.import-details-footer button:disabled {
  color: #777;
  background: #f1f1ed;
  border-color: #c8cac8;
  cursor: not-allowed;
}

.import-fix-dialog {
  z-index: 84;
  width: min(420px, calc(100vw - 24px));
  max-height: min(620px, calc(100dvh - 32px));
}

.import-fix-form {
  max-height: inherit;
  overflow: hidden;
}

.import-fix-issue {
  display: grid;
  gap: 3px;
  margin: 0 14px 10px;
  padding: 7px 8px;
  color: var(--ink);
  font-size: 9.6px;
  line-height: 1.35;
  background: #fff9e8;
  border: .5px solid #d7c37a;
  border-radius: 4.8px;
}

.import-fix-issue strong {
  font-weight: 500;
}

.import-fix-issue small {
  color: var(--muted);
  font-size: inherit;
}

.import-fix-fields {
  display: grid;
  gap: 9px;
  min-height: 0;
  padding: 5px 14px 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: #aaa transparent;
  scrollbar-width: thin;
}

.import-fix-fields label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--ink);
  font-size: 9.6px;
  line-height: 1.2;
}

.import-fix-fields input,
.import-fix-fields textarea {
  width: 100%;
  min-width: 0;
  padding: 2.4px 8.4px;
  color: var(--ink);
  font: inherit;
  font-size: 10.8px;
  background: #f8f8fa;
  border: .5px solid #aaa;
  border-radius: 4.8px;
}

.import-fix-fields input {
  height: 28.8px;
}

.import-fix-fields input[type="date"] {
  color-scheme: light;
}

.import-fix-date-hint {
  color: var(--muted);
  font-size: 8.5px;
  font-weight: 400;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.import-fix-fields textarea {
  min-height: 58px;
  padding-top: 6px;
  padding-bottom: 6px;
  line-height: 1.35;
  resize: vertical;
}

.import-fix-fields input:focus-visible,
.import-fix-fields textarea:focus-visible {
  border-color: #474747;
  outline: none;
  box-shadow: inset 0 0 0 .5px #474747;
}

.import-fix-fields input:disabled,
.import-fix-fields textarea:disabled {
  color: #777;
  background: #f1f1ed;
  cursor: not-allowed;
}

.import-fix-form > .data-field-create-error {
  margin: 0 14px 10px;
  padding: 7px 8px;
  color: #b3261e;
  font-size: 9.6px;
  line-height: 1.35;
  background: #fff;
  border: .5px solid #b3261e;
  border-radius: 4.8px;
}

.import-fix-form > .data-field-create-error[hidden] {
  display: none;
}

.import-fix-dialog .data-types-action-dialog__actions button:not(:disabled):hover,
.import-fix-dialog .data-types-action-dialog__actions button:focus-visible {
  background: var(--blue);
}

@media (max-width: 767px) {
  .import-details-drawer {
    top: 48px;
    width: 100vw;
  }

  .import-details-content {
    padding-right: 12px;
    padding-left: 12px;
  }

  .import-details-table {
    min-width: 640px;
  }

  .import-fix-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }
}

@media (max-width: 639px) {
  .import-details-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .import-details-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  .import-details-summary-card {
    min-height: 48px;
    padding: 7px 8px;
  }

  .import-details-filter {
    width: 100%;
  }
}

@media (max-width: 430px) {
  .import-details-header {
    min-height: 58px;
  }

  .import-details-header p {
    white-space: normal;
  }

  .import-details-footer > span {
    flex: 1 1 100%;
    margin-right: 0;
  }

  .import-details-footer button {
    flex: 1 1 0;
  }

  .import-details-pagination {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .import-details-pagination .contacts-pagination__controls {
    justify-content: space-between;
    width: 100%;
  }

  .import-fix-dialog .data-types-action-dialog__actions button {
    flex: 1 1 0;
  }
}

@media (min-width: 1180px) and (min-height: 700px) {
  .import-history-panel {
    position: relative;
    /* The taller bottom-anchored table consumes 100px of auto margin. This
       offset preserves the panel header's earlier 200px visual lift while
       allowing pagination to move down with the table. */
    top: -100px;
  }

  .import-history-table-shell {
    flex-basis: 234px;
    height: 234px;
    min-height: 234px;
  }
}

@media (max-height: 650px) and (min-width: 768px) {
  .import-history-panel {
    margin-top: 26px;
  }
}

@media (max-width: 1179px) {
  .import-history-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    height: auto;
  }

  .import-history-toolbar .view-toolbar__primary {
    flex: 0 0 auto;
    flex-wrap: wrap;
    width: 100%;
    min-height: 40px;
  }

  .import-history-toolbar .view-toolbar__search-tools {
    align-self: stretch;
    width: 100%;
    margin-right: 0;
  }

  .import-history-toolbar .list-search {
    margin-left: auto;
  }

  .import-history-table-shell {
    flex-basis: 156px;
    height: 156px;
    min-height: 156px;
  }
}

@media (max-width: 767px) {
  .import-data-screen {
    min-height: calc(100dvh - 48px);
    padding: 22px 16px 8px;
  }

  .import-data-launch-card {
    min-height: 140px;
    margin-top: 14px;
  }

  .import-history-panel {
    margin-top: 30px;
  }

  .import-history-toolbar .view-toolbar__primary {
    align-items: stretch;
    flex-direction: column;
    gap: 7px;
  }

  .import-history-toolbar .view-config-card {
    flex-basis: 39px;
    width: 100%;
  }

  .import-history-filters {
    width: 100%;
    margin: 0;
    overflow: visible;
    transform: none;
  }

  .import-history-filters .filter-chip-row {
    flex-wrap: wrap;
    width: 100%;
  }

  .import-history-toolbar .view-toolbar__search-tools,
  .import-history-toolbar .list-search {
    width: 100%;
  }

  .import-history-toolbar .list-search {
    flex-basis: auto;
    margin-left: 0;
  }

  .import-history-table-shell {
    width: calc(100% + 12px);
    margin-right: -6px;
    margin-left: -6px;
  }

  .import-data-workspace .contacts-pagination {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
    width: calc(100% + 12px);
    margin-right: -6px;
    margin-left: -6px;
    padding-right: 10px;
    padding-left: 10px;
  }

  .import-data-workspace .contacts-pagination__controls {
    justify-content: space-between;
    width: 100%;
  }

  .import-data-drawer {
    top: 48px;
    width: 100vw;
  }

  .import-data-mapped-columns-dialog {
    width: 100vw;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .import-data-mapped-columns-header,
  .import-data-mapped-columns-footer {
    padding-right: 12px;
    padding-left: 12px;
  }

  .import-data-mapped-columns-body {
    padding-right: 12px;
    padding-left: 12px;
  }

  .import-data-mapping-table tbody th,
  .import-data-mapping-table tbody td {
    padding-right: 4px;
    padding-left: 4px;
  }
}

@media (max-width: 430px) {
  .import-data-screen {
    padding-right: 12px;
    padding-left: 12px;
  }

  .import-data-preference-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .import-data-workspace .contacts-pagination__controls {
    flex-wrap: wrap;
  }

  .import-data-workspace .contacts-pagination .page-size-picker {
    flex: 1 1 100%;
    width: 100%;
  }

  .import-data-workspace .page-size-picker__toggle {
    width: 100%;
  }

  .import-data-workspace [data-import-previous-page],
  .import-data-workspace [data-import-next-page] {
    flex: 1 1 0;
  }

  .import-data-form .contact-create-form__footer button {
    flex: 1 1 0;
  }
}

/* Manage Data: Tags. This view composes the existing Data Values directory shell. */
.tags-screen-host {
  display: contents;
}

.tags-table tbody tr[data-tag-id],
.tags-table tbody tr[data-tag-category-id] {
  cursor: default;
}

.tags-table tbody tr[data-tag-id]:focus-visible,
.tags-table tbody tr[data-tag-category-id]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.tags-table tbody tr.is-selected th[data-column="name"] > .selection-bracket {
  display: block;
}

.tags-table tbody th[data-column="name"] {
  padding-left: 25px;
}

.tags-table tbody th[data-column="name"] > span,
.tags-table tbody td[data-column="description"] > span,
.tags-table tbody td[data-column="category"] > span,
.tags-table tbody time {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tags-table .empty-value {
  color: var(--muted);
}

.tags-category-open {
  display: block;
  max-width: 100%;
  padding: 0;
  overflow: hidden;
  color: inherit;
  font: inherit;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: transparent;
  border: 0;
}

.tags-category-open:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tags-table tbody .tags-state-row td:only-child {
  height: 164px;
  padding: 18px;
  white-space: normal;
  background: #fafafa;
  border: .75px solid #474747;
  border-radius: 5px;
}

.tags-workspace [data-tags-search-empty],
.tags-workspace [data-tags-loading],
.tags-error {
  display: grid;
  place-items: center;
  gap: 7px;
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
}

.tags-workspace [data-tags-search-empty] p,
.tags-error p {
  margin: 0;
}

.tags-workspace [data-tags-search-empty] p,
.tags-error p,
.tags-workspace [data-tags-loading] {
  color: var(--muted);
  font-size: 10.8px;
  line-height: 1.4;
}

.tags-workspace [data-tags-clear-search],
.tags-workspace [data-tags-retry] {
  min-height: 27px;
  padding: 3px 10px;
  color: var(--ink);
  font: inherit;
  font-size: 9.6px;
  background: #fff;
  border: .5px solid #ccc;
  border-radius: 4.8px;
}

.tags-workspace [data-tags-retry] {
  background: var(--pale-lime);
  border-color: #c7cca8;
}

.tags-workspace [data-tags-clear-search]:hover,
.tags-workspace [data-tags-clear-search]:focus-visible,
.tags-workspace [data-tags-retry]:hover,
.tags-workspace [data-tags-retry]:focus-visible,
.tags-category-open:focus-visible {
  background: var(--blue);
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.tags-empty__actions [data-tag-add-open],
.tags-table[data-tags-view="categories"] .tags-empty__actions [data-tag-category-add-open] {
  background: var(--pale-lime);
  border-color: #c7cca8;
}

/* My Business: Business Staff. The directory composes the same table, search,
   dropdown, pagination, and drawer primitives used throughout Pragtical. */
.business-staff-screen-host {
  display: contents;
}

.business-staff-workspace {
  background: #fff;
}

.data-values-screen.business-staff-screen {
  padding: 34px 36px 10px 35px;
}

.data-values-heading.business-staff-heading {
  position: relative;
  align-items: flex-start;
}

.data-values-heading.business-staff-heading .business-staff-heading__copy {
  flex: 1 1 420px;
  min-width: 240px;
}

.data-values-heading.business-staff-heading .business-staff-heading__title-row {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
}

.data-values-heading.business-staff-heading h1 {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
}

.business-staff-heading .data-objects-intro {
  max-width: 68ch;
}

.business-staff-heading .business-staff-count {
  flex: 0 0 auto;
  min-width: 104px;
  margin: 0;
  white-space: nowrap;
}

.data-values-page-actions.business-staff-page-actions {
  position: absolute;
  top: 0;
  right: max(38px, calc(100% - 1182px));
  align-self: center;
  flex: 0 0 auto;
  margin: 0;
}

.business-staff-panel {
  min-height: 0;
  margin-top: 34px;
}

.data-values-toolbar.business-staff-toolbar {
  position: relative;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  height: auto;
  min-height: 40px;
}

.data-values-toolbar.business-staff-toolbar .view-toolbar__primary {
  flex: 1 1 300px;
  min-width: 0;
}

.business-staff-list-tabs {
  display: flex;
  align-items: flex-end;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}

.business-staff-list-tabs::-webkit-scrollbar {
  display: none;
}

.business-staff-list-tabs .view-button {
  flex: 0 0 auto;
  width: auto;
  min-width: max-content;
  padding-right: 10px;
  padding-left: 10px;
  box-shadow: none;
  filter: none;
  transform: translateY(4px);
}

.business-staff-list-tabs .view-button[aria-selected="true"] {
  filter: drop-shadow(4px 0 0 #050505);
}

.business-staff-more-lists {
  position: relative;
  z-index: 33;
  align-self: flex-end;
  flex: 0 0 auto;
}

.business-staff-more-lists > summary {
  max-width: 180px;
  list-style: none;
  cursor: pointer;
}

.business-staff-more-lists > summary::-webkit-details-marker {
  display: none;
}

.business-staff-more-lists > summary > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.business-staff-more-lists__caret.icon {
  width: 6px;
  height: 5px;
  margin-left: 1px;
  transition: transform 120ms ease;
}

.business-staff-more-lists[open] .business-staff-more-lists__caret {
  transform: rotate(180deg);
}

.business-staff-more-lists:not([open]) .business-staff-more-lists__menu {
  display: none;
}

.business-staff-more-lists__menu {
  top: calc(100% + 8px);
  right: 0;
}

.business-staff-view-config-card {
  flex-basis: 250px;
  width: 250px;
}

.business-staff-view-config-card h2 {
  flex-basis: 106px;
}

.business-staff-manage-lists {
  position: relative;
  z-index: 32;
  flex: 0 0 auto;
}

.business-staff-manage-lists > summary {
  min-width: 139px;
  height: 23px;
  list-style: none;
}

.business-staff-manage-lists > summary::-webkit-details-marker {
  display: none;
}

.business-staff-manage-lists[open] > summary {
  background: var(--blue) !important;
  box-shadow: inset 0 0 0 .5px #474747;
}

.business-staff-manage-lists[open] .manage-contact-lists__caret {
  transform: rotate(180deg);
}

.business-staff-manage-lists:not([open]) .manage-contact-lists__menu {
  display: none;
}

.data-values-toolbar.business-staff-toolbar .business-staff-toolbar__tools {
  position: absolute;
  z-index: 9;
  /* Follow the right edge of the capped table's column container, with the
     requested 10px visual nudge to the right. */
  right: max(38px, calc(100% - 1182px));
  bottom: -1px;
  display: flex;
  align-self: center;
  align-items: flex-end;
  justify-content: flex-end;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 10px;
  width: auto;
  margin: 0;
  padding: 0;
  overflow: visible;
}

.business-staff-toolbar__search-stack {
  position: static;
  display: flex;
  flex: 0 0 208px;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  width: 208px;
  min-width: 0;
}

.business-staff-toolbar__search-stack .business-staff-manage-lists {
  align-self: flex-end;
}

.business-staff-toolbar__manager-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  width: 100%;
}

.business-staff-toolbar__manager-row .business-staff-filter-toggle {
  flex: 0 0 23px;
  margin-top: 0;
}

.business-staff-role-filter-pill-slot {
  display: contents;
}

.business-staff-filter-control {
  position: relative;
  flex: 0 0 23px;
  width: 23px;
  height: 23px;
}

.business-staff-role-filter {
  position: absolute;
  z-index: 10;
  top: 100%;
  right: 0;
  width: 0;
  height: 0;
  margin: 0;
}

.business-staff-role-filter .business-staff-role-filter__toggle {
  display: none;
}

.business-staff-role-filter__toggle:focus-visible {
  border-color: #474747;
  outline: none;
  box-shadow: inset 0 0 0 .5px #474747;
}

.business-staff-role-filter .business-staff-role-filter__menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  right: 0;
  left: auto;
  width: 148px;
  max-height: 188px;
  box-shadow: 0 5px 12px rgb(0 0 0 / 14%);
}

.business-staff-role-filter__menu [role="option"] {
  min-height: 25px;
  padding: 3px 6px;
  font-size: 9.6px;
}

.data-values-toolbar.business-staff-toolbar .list-search {
  flex: 0 0 auto;
  width: 208px;
  margin-top: 0;
}

.business-staff-add-button .contact-create-menu__label {
  min-width: 92px;
}

.business-staff-add-button .contact-create-menu__icon {
  flex: 0 0 24px;
}

.business-staff-table-shell {
  flex: 0 0 234px;
  height: 234px;
  min-height: 234px;
  margin-bottom: 0;
}

.data-values-table.business-staff-table {
  width: var(--contacts-table-min-width, 1188px);
}

.business-staff-table tbody tr[data-business-staff-id] {
  cursor: default;
}

.business-staff-table tbody tr[data-business-staff-id]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.business-staff-table tbody th[data-column="name"] {
  padding-left: 14px;
}

.data-values-table.business-staff-table
  tbody th[data-column="name"] > .business-staff-identity {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.business-staff-avatar {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  object-fit: cover;
  border-radius: 50%;
}

.business-staff-identity > span,
.business-staff-table tbody td[data-column="email"] > span,
.business-staff-table tbody td[data-column="phone"] > span,
.business-staff-table tbody td[data-column="jobPosition"] > span,
.business-staff-table tbody td[data-column="staffRole"] > span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-staff-identity > span {
  flex: 1 1 auto;
}

.business-staff-table .empty-value {
  color: var(--muted);
}

/* Keep Staff quick actions fitted to their controls, with wrapping on narrow screens. */
.business-staff-quick-actions-drawer.bulk-action-toolbar {
  width: fit-content;
  max-width: 100%;
}

.business-staff-quick-actions-drawer.bulk-action-toolbar > button {
  flex: 0 0 auto;
  width: auto;
}

.business-staff-quick-actions-drawer .bulk-action-toolbar__icon {
  width: 10px;
  height: 10px;
}

.business-staff-table tbody .business-staff-state-row td:only-child {
  height: 164px;
  padding: 18px;
  white-space: normal;
  background: #fafafa;
  border: .75px solid #474747;
  border-radius: 5px;
}

.business-staff-state-row td > div {
  display: grid;
  place-items: center;
  gap: 7px;
  max-width: 500px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 10.8px;
  line-height: 1.4;
  text-align: center;
}

.business-staff-state-row h3,
.business-staff-state-row p {
  margin: 0;
}

.business-staff-state-row h3 {
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
}

.business-staff-state-row button {
  min-height: 27px;
  padding: 3px 10px;
  color: var(--ink);
  font: inherit;
  font-size: 9.6px;
  background: #fff;
  border: .5px solid #ccc;
  border-radius: 4.8px;
}

.business-staff-empty [data-business-staff-add-open],
.business-staff-error [data-business-staff-retry] {
  background: var(--pale-lime);
  border-color: #c7cca8;
}

.business-staff-state-row button:hover,
.business-staff-state-row button:focus-visible {
  background: var(--blue);
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.business-staff-workspace .contacts-pagination {
  width: calc(100% - 48px);
  min-width: 0;
  margin-right: 48px;
  margin-left: 0;
}

.business-staff-dialog .business-staff-drawer {
  width: min(430px, 100vw);
}

.business-staff-profile-dialog .business-staff-profile-drawer {
  width: min(560px, 100vw);
}

.business-staff-drawer .contact-create-drawer__header,
.business-staff-profile-drawer .contact-create-drawer__header {
  justify-content: space-between;
  padding-right: 8px;
}

.business-staff-drawer .contact-create-drawer__header > button,
.business-staff-profile-drawer .contact-create-drawer__header > button {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  line-height: 1;
  background: transparent;
  border: 0;
  border-radius: 4px;
}

.business-staff-drawer .contact-create-drawer__header > button:hover,
.business-staff-drawer .contact-create-drawer__header > button:focus-visible,
.business-staff-profile-drawer .contact-create-drawer__header > button:hover,
.business-staff-profile-drawer .contact-create-drawer__header > button:focus-visible {
  background: var(--blue);
  outline: none;
}

.business-staff-profile-form {
  padding: 0;
}

.business-staff-profile-form__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 18px 20px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.business-staff-profile-card {
  overflow: visible;
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 5px;
}

.business-staff-profile-card__header {
  min-height: 49px;
  padding: 11px 14px;
  background: #fafafa;
  border-bottom: .5px solid #aaa;
  border-radius: 4.5px 4.5px 0 0;
}

.business-staff-profile-card__header h3,
.business-staff-profile-card__header p,
.business-staff-profile-photo-copy h4,
.business-staff-profile-photo-copy p {
  margin: 0;
}

.business-staff-profile-card__header h3 {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
}

.business-staff-profile-card__header p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9.8px;
  line-height: 1.3;
}

.business-staff-profile-card__content {
  padding: 16px 16px 20px;
}

.business-staff-profile-photo-row {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.business-staff-profile-photo-preview {
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  overflow: hidden;
  background: #f5f5f2;
  border: .5px solid #aaa;
  border-radius: 50%;
}

.business-staff-profile-photo-preview > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.business-staff-profile-photo-preview > img[data-business-staff-profile-image-default] {
  width: 37px;
  height: 37px;
  object-fit: contain;
}

.business-staff-profile-photo-copy {
  min-width: 0;
}

.business-staff-profile-photo-copy h4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
}

.business-staff-profile-photo-copy p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 9.6px;
  line-height: 1.32;
}

.business-staff-profile-photo-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
}

.business-staff-profile-photo-actions > button {
  min-width: 54px;
  min-height: 27px;
  padding: 3px 9px;
  color: var(--ink);
  font: inherit;
  font-size: 9.6px;
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 4.8px;
}

.business-staff-profile-photo-actions > button:first-child {
  background: var(--pale-lime);
  border-color: #c7cca8;
}

.business-staff-profile-photo-actions > button:not(:disabled):hover,
.business-staff-profile-photo-actions > button:focus-visible {
  background: var(--blue);
  outline: none;
}

.business-staff-profile-photo-actions > button:disabled {
  color: #777;
  background: #f1f1ed;
  cursor: not-allowed;
}

.business-staff-profile-image-status {
  display: block;
  min-height: 13px;
  margin-top: 5px;
  overflow: hidden;
  color: var(--muted);
  font-size: 9.2px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-staff-profile-image-status.is-error {
  color: #b3261e;
  white-space: normal;
}

.business-staff-profile-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 14px 11px;
  margin-top: 18px;
  padding: 0;
  overflow: visible;
}

.business-staff-profile-fields .contact-create-field {
  align-content: start;
  margin: 0;
}

.business-staff-profile-field--wide,
.business-staff-profile-role-field,
.business-staff-profile-fields > [data-business-staff-profile-form-error] {
  grid-column: 1 / -1;
}

.business-staff-profile-role-field,
.business-staff-profile-job-position {
  position: relative;
  z-index: 5;
  min-width: 0;
}

.business-staff-profile-job-position .contact-create-single-select__menu {
  position: absolute;
  z-index: 20;
  top: 52px;
  right: 0;
  left: 0;
  max-height: 188px;
  box-shadow: 0 5px 12px rgb(0 0 0 / 14%);
}

.business-staff-profile-form .contact-create-field input,
.business-staff-profile-form .contact-create-multiselect__toggle {
  font-size: 10.8px;
}

.business-staff-profile-form .contact-create-field input:focus-visible,
.business-staff-profile-form .contact-create-multiselect__toggle:focus-visible {
  border-color: #474747;
  outline: none;
  box-shadow: inset 0 0 0 .5px #474747;
}

.business-staff-profile-form__footer {
  justify-content: flex-end;
  padding: 11px 20px 14px;
}

.business-staff-profile-form__footer button:disabled {
  color: #777;
  background: #f1f1ed;
  border-color: #c8cac8;
  cursor: not-allowed;
}

.business-staff-form {
  padding: 18px 20px;
}

.business-staff-form .business-staff-form__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 14px 11px;
  padding-bottom: 16px;
}

.business-staff-form__fields > .contact-create-field:nth-child(3),
.business-staff-form__fields > .contact-create-field:nth-child(4),
.business-staff-form__fields > .business-staff-job-position,
.business-staff-form__fields > [data-business-staff-form-error] {
  grid-column: 1 / -1;
}

.business-staff-form .contact-create-field {
  align-content: start;
  margin: 0;
}

.business-staff-form .contact-create-field input,
.business-staff-form .contact-create-multiselect__toggle {
  font-size: 10.8px;
}

.business-staff-form .contact-create-field input:focus-visible,
.business-staff-form .contact-create-multiselect__toggle:focus-visible {
  border-color: #474747;
  outline: none;
  box-shadow: inset 0 0 0 .5px #474747;
}

.business-staff-form .contact-create-field input:disabled,
.business-staff-form .contact-create-multiselect__toggle:disabled {
  color: #777;
  background: #f1f1ed;
  cursor: not-allowed;
}

.business-staff-form .business-staff-job-position {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: none;
}

.business-staff-job-position .contact-create-single-select__menu {
  position: absolute;
  z-index: 20;
  top: 52px;
  right: 0;
  left: 0;
  max-height: 188px;
  box-shadow: 0 5px 12px rgb(0 0 0 / 14%);
}

.business-staff-form__footer {
  justify-content: flex-end;
  padding-right: 0;
  padding-left: 0;
}

.business-staff-form__footer button:disabled {
  color: #777;
  background: #f1f1ed;
  border-color: #c8cac8;
  cursor: not-allowed;
}

.business-staff-delete-dialog #business-staff-delete-description {
  padding-top: 0;
  color: var(--muted);
}

.business-staff-delete-dialog [data-business-staff-delete-error] {
  margin: 0 14px 12px;
  padding: 7px 8px;
  color: #b3261e;
  background: #fff;
  border: .5px solid #b3261e;
  border-radius: 4.8px;
}

.business-staff-delete-dialog [data-business-staff-delete-error][hidden] {
  display: none;
}

.business-staff-delete-dialog .data-types-action-dialog__actions button:not(:disabled):hover,
.business-staff-delete-dialog .data-types-action-dialog__actions button:focus-visible {
  background: var(--blue);
}

@media (max-width: 1439px) and (min-width: 1180px) {
  .data-values-page-actions.business-staff-page-actions {
    margin-right: 0;
  }

  .data-values-toolbar.business-staff-toolbar .business-staff-toolbar__tools {
    right: max(38px, calc(100% - 1182px));
  }
}

@media (max-width: 1179px) {
  .data-values-toolbar.business-staff-toolbar {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .data-values-toolbar.business-staff-toolbar .view-toolbar__primary {
    flex: 0 0 auto;
    width: 100%;
  }

  .data-values-toolbar.business-staff-toolbar .business-staff-toolbar__tools {
    position: static;
    align-self: stretch;
    flex-wrap: wrap;
    width: 100%;
    margin-right: 0;
    padding-right: 38px;
  }

  .data-values-page-actions.business-staff-page-actions {
    margin-right: 0;
  }
}

@media (max-width: 767px) {
  .data-values-screen.business-staff-screen {
    padding: 22px 16px 10px;
  }

  .data-values-heading.business-staff-heading {
    gap: 10px 12px;
  }

  .data-values-page-actions.business-staff-page-actions {
    position: static;
  }

  .data-values-heading.business-staff-heading .business-staff-heading__copy {
    flex-basis: 100%;
    min-width: 0;
  }

  .business-staff-heading .data-objects-intro {
    max-width: 48ch;
  }

  .business-staff-panel {
    margin-top: 24px;
  }

  .data-values-toolbar.business-staff-toolbar .business-staff-toolbar__tools {
    align-items: stretch;
    flex-direction: column;
    gap: 6px;
    max-width: 100%;
    padding-right: 0;
  }

  .business-staff-toolbar__search-stack,
  .data-values-toolbar.business-staff-toolbar .list-search {
    flex: 0 0 auto;
    width: 100%;
  }

  .business-staff-toolbar__search-stack {
    align-items: stretch;
  }

  .business-staff-toolbar__search-stack .business-staff-manage-lists {
    align-self: flex-end;
  }

  .business-staff-role-filter .business-staff-role-filter__toggle {
    height: 28.8px;
    font-size: 10.8px;
  }

  .business-staff-view-config-card {
    flex-basis: 100%;
    width: 100%;
    max-width: 100%;
  }

  .business-staff-table-shell {
    width: calc(100% + 12px);
    margin-right: -6px;
    margin-left: -6px;
  }

  .business-staff-workspace .contacts-pagination {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
    width: calc(100% + 12px);
    margin-right: -6px;
    margin-left: -6px;
    padding-right: 10px;
    padding-left: 10px;
  }

  .business-staff-workspace .contacts-pagination__controls {
    justify-content: space-between;
    width: 100%;
  }

  .business-staff-dialog .business-staff-drawer {
    top: 48px;
    width: 100vw;
  }

  .business-staff-profile-dialog .business-staff-profile-drawer {
    top: 48px;
    width: 100vw;
  }

  .business-staff-delete-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }
}

@media (max-width: 430px) {
  .data-values-screen.business-staff-screen {
    padding-right: 12px;
    padding-left: 12px;
  }

  .business-staff-heading .business-staff-count {
    margin-left: 0;
  }

  .business-staff-form .business-staff-form__fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .business-staff-form__fields > .contact-create-field,
  .business-staff-form__fields > .business-staff-job-position,
  .business-staff-form__fields > [data-business-staff-form-error] {
    grid-column: 1;
  }

  .business-staff-profile-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .business-staff-profile-field--wide,
  .business-staff-profile-role-field,
  .business-staff-profile-fields > [data-business-staff-profile-form-error] {
    grid-column: 1;
  }

  .business-staff-profile-photo-row {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 11px;
  }

  .business-staff-profile-photo-preview {
    width: 68px;
    height: 68px;
  }

  .business-staff-workspace .contacts-pagination__controls {
    flex-wrap: wrap;
  }

  .business-staff-workspace .contacts-pagination .page-size-picker {
    flex: 1 1 100%;
    width: 100%;
  }

  .business-staff-workspace .page-size-picker__toggle {
    width: 100%;
  }

  .business-staff-workspace [data-business-staff-previous-page],
  .business-staff-workspace [data-business-staff-next-page],
  .business-staff-form__footer button,
  .business-staff-profile-form__footer button,
  .business-staff-delete-dialog .data-types-action-dialog__actions button {
    flex: 1 1 0;
  }
}

/* Business Profile */
.business-client-portal-workspace {
  background: #fff;
}

.business-client-portal-screen {
  min-height: calc(100dvh - 35px);
  padding: 30px 42px 48px 32px;
}

.business-client-portal-heading h1 {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -.15px;
  line-height: 1.1;
}

.business-client-portal-heading > p {
  margin: 9px 0 0;
  font-size: 11.5px;
  line-height: 1.3;
}

.business-client-portal-overview {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  max-width: 760px;
  margin-top: 20px;
  padding: 20px;
  border: .5px solid #aaa;
  border-radius: 7px;
  background: #fff;
}

.business-client-portal-overview__eyebrow {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 9.5px;
  letter-spacing: .05em;
}

.business-client-portal-overview h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
}

.business-client-portal-overview h2 + p {
  max-width: 58ch;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.business-client-portal-status {
  flex: 0 0 auto;
  padding: 4px 9px;
  border: .5px solid #aaa;
  border-radius: 999px;
  background: var(--blue-strong);
  font-size: 10px;
  line-height: 1.2;
}

/* Project Management: Opportunities styles are grouped at the end of this file. */

.business-profile-workspace {
  background: #fff;
}

.business-profile-screen {
  min-height: calc(100dvh - 35px);
  padding: 30px 42px 48px 32px;
}

.business-profile-heading h1 {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -.15px;
  line-height: 1.1;
}

.business-profile-heading p {
  margin: 9px 0 0;
  font-size: 11.5px;
  line-height: 1.3;
}

.business-profile-tabs {
  max-width: 1160px;
  margin-top: 20px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.business-profile-tabs [role="tablist"] {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: max-content;
  min-width: 100%;
  padding: 0 0 3px;
}

.business-profile-tab {
  min-width: 140px;
  min-height: 31px;
  padding: 6px 13px;
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.15;
  white-space: nowrap;
  background: var(--pale-lime);
  border: .5px solid #aaa;
  border-radius: 7px;
}

.business-profile-tab:nth-child(2) {
  min-width: 148px;
}

.business-profile-tab:nth-child(3) {
  min-width: 90px;
}

.business-profile-tab:nth-child(4) {
  min-width: 176px;
}

.business-profile-tab:hover,
.business-profile-tab:focus-visible {
  background: #f5ffd2;
}

.business-profile-tab.is-active {
  border-bottom-color: #111;
  box-shadow: 0 6px 0 -1px #050505;
}

.business-staff-profile-tabs.business-profile-tabs {
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
  margin-top: 0;
  padding: 10px 20px 7px;
  overflow-x: auto;
  background: #fff;
  border-bottom: .5px solid #d4d4d4;
}

.business-staff-profile-tabs [role="tablist"] {
  gap: 8px;
  width: 100%;
  min-width: max-content;
  padding-bottom: 3px;
}

.business-staff-profile-tabs .business-staff-profile-tab,
.business-staff-profile-tabs .business-staff-profile-tab:nth-child(n) {
  flex: 1 0 auto;
  min-width: 96px !important;
  min-height: 27px;
  padding: 4px 8px;
  font-size: 9.6px;
  border-radius: 5px;
}

.business-staff-profile-tabs .business-staff-profile-tab:first-child {
  min-width: 118px !important;
}

.business-staff-profile-tabs .business-staff-profile-tab.is-active {
  box-shadow: 0 4px 0 -1px #050505;
}

.business-staff-profile-panels > [hidden] {
  display: none;
}

.business-staff-bulk-section {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.business-staff-bulk-section__apply {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: 10px 11px;
  background: var(--pale-lime);
  border: .5px solid #c7cca8;
  border-radius: 5px;
  cursor: pointer;
}

.business-staff-bulk-section__apply > .contact-selection-checkbox {
  margin-top: 1px;
}

.business-staff-bulk-section__apply > span,
.business-staff-bulk-section__apply strong,
.business-staff-bulk-section__apply small {
  display: block;
  min-width: 0;
}

.business-staff-bulk-section__apply strong {
  font-size: 10.8px;
  font-weight: 400;
  line-height: 1.3;
}

.business-staff-bulk-section__apply small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9.4px;
  line-height: 1.35;
}

.business-staff-bulk-section__apply:hover,
.business-staff-bulk-section__apply:focus-within {
  background: var(--blue);
}

.business-staff-bulk-section__fields {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.business-staff-bulk-section__fields[disabled] {
  opacity: .55;
}

.business-staff-bulk-section__fields[disabled] label,
.business-staff-bulk-section__fields[disabled] button {
  cursor: not-allowed;
}

[data-business-staff-bulk-mixed="true"]
  [data-business-staff-access-role-summary],
[data-business-staff-bulk-mixed="true"]
  [data-business-staff-preference-summary] {
  color: var(--muted);
  font-style: italic;
}

.business-staff-bulk-form-error {
  margin: 12px 0 0;
  padding: 8px 10px;
  background: #fff;
  border: .5px solid #b3261e;
  border-radius: 5px;
}

.business-staff-bulk-form-error[hidden] {
  display: none;
}

.business-staff-profile-panel-copy {
  min-height: 140px;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.4;
}

.business-staff-profile-panel-copy p {
  margin: 0;
}

.business-staff-scheduling-card__content {
  display: grid;
  gap: 16px;
  padding: 14px;
}

.business-staff-availability-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
  min-width: 0;
}

.business-staff-availability-time-zone,
.business-staff-availability-schedule-calendar {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 5px;
  width: 100%;
  min-width: 0;
  color: var(--ink);
  font-size: 10px;
  line-height: 1.2;
}

.business-staff-availability-time-zone > label,
.business-staff-availability-schedule-calendar > label,
.business-staff-availability-time-label,
.business-staff-availability-date-field > span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 9.2px;
  line-height: 1.2;
}

.business-staff-availability-select-toggle,
.business-staff-availability-time-trigger,
.business-staff-availability-date-trigger {
  width: 100%;
  min-width: 0;
  min-height: 31px;
  padding: 5px 8px;
  color: var(--ink);
  font: inherit;
  font-size: 10.5px;
  background-color: #fff;
  border: .5px solid #aaa;
  border-radius: 5px;
}

.business-staff-availability-time-field,
.business-staff-availability-time-control {
  min-width: 0;
}

.business-staff-availability-time-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
}

.business-staff-availability-date-field {
  min-width: 0;
}

.business-staff-availability-date-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
}

.business-staff-availability-date-trigger > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-staff-availability-date-trigger__icon {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
}

.business-staff-availability-time-trigger > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-staff-availability-time-trigger .contact-create-multiselect__caret {
  flex: 0 0 auto;
}

.business-staff-availability-time-trigger[aria-expanded="true"]
  .contact-create-multiselect__caret {
  transform: rotate(180deg);
}

.business-staff-availability-select-toggle {
  height: 31px;
  text-align: left;
}

.business-staff-availability-select-toggle:focus-visible,
.business-staff-availability-time-trigger:focus-visible,
.business-staff-availability-date-trigger:focus-visible {
  border-color: #474747;
  outline: none;
  box-shadow: inset 0 0 0 .5px #474747;
}

.business-staff-availability-select-toggle[aria-invalid="true"],
.business-staff-availability-day[aria-invalid="true"],
.business-staff-availability-specific[aria-invalid="true"] {
  border-color: #b3261e;
}

.business-staff-availability-time-zone.is-open,
.business-staff-availability-schedule-calendar.is-open {
  z-index: 30;
}

.business-staff-availability-select-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  max-height: 188px;
  overflow-y: auto;
  background: #fff;
  box-shadow: 0 5px 12px rgb(0 0 0 / 14%);
}

.business-staff-availability-schedule-tabs {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  overflow: visible;
  white-space: nowrap;
}

.business-staff-availability-schedule-tablist {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding-bottom: 3px;
  overflow: hidden;
  white-space: nowrap;
}

.business-staff-availability-schedule-tab,
.business-staff-availability-add-schedule,
.business-staff-availability-more__toggle {
  flex: 0 0 auto;
  min-height: 25px;
  padding: 4px 8px;
  color: var(--ink);
  font: inherit;
  font-size: 9.4px;
  line-height: 1.15;
  white-space: nowrap;
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 4.5px;
}

.business-staff-availability-schedule-tab {
  max-width: 168px;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--pale-lime);
}

.business-staff-availability-schedule-tab.is-active {
  border-bottom-color: #111;
  box-shadow: 0 4px 0 -1px #050505;
}

.business-staff-availability-add-schedule {
  color: #34392a;
  background: #f8fbe9;
  border-color: #c7cca8;
}

.business-staff-availability-more {
  position: relative;
  flex: 0 0 auto;
}

.business-staff-availability-more[hidden],
.business-staff-availability-more__menu[hidden],
.business-staff-availability-schedule-tab[hidden],
.business-staff-availability-more__menu > [hidden] {
  display: none;
}

.business-staff-availability-more__toggle {
  padding-right: 25px;
  background-image: url("../general, reusable UI assets for pragtical/drop-down arrow.svg");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 7.2px 4.8px;
}

.business-staff-availability-schedule-tab:not(:disabled):hover,
.business-staff-availability-schedule-tab:focus-visible,
.business-staff-availability-add-schedule:not(:disabled):hover,
.business-staff-availability-add-schedule:focus-visible,
.business-staff-availability-more__toggle:not(:disabled):hover,
.business-staff-availability-more__toggle:focus-visible {
  background-color: var(--blue);
  outline: none;
}

.business-staff-availability-schedule-tab:disabled,
.business-staff-availability-add-schedule:disabled,
.business-staff-availability-more__toggle:disabled {
  color: #777;
  background-color: #f1f1ed;
  cursor: not-allowed;
}

.business-staff-availability-more__menu {
  position: absolute;
  z-index: 12;
  top: calc(100% + 4px);
  right: 0;
  display: grid;
  min-width: 148px;
  max-width: min(240px, 75vw);
  max-height: min(260px, calc(100dvh - 160px));
  padding: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 5px;
  box-shadow: 0 5px 12px rgb(0 0 0 / 14%);
  scrollbar-width: thin;
}

.business-staff-availability-more__menu > button {
  min-width: 0;
  padding: 6px 8px;
  overflow: hidden;
  color: var(--ink);
  font: inherit;
  font-size: 9.4px;
  line-height: 1.2;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #fff;
  border: 0;
  border-radius: 3px;
}

.business-staff-availability-more__menu > button[aria-checked="true"],
.business-staff-availability-more__menu > button:hover,
.business-staff-availability-more__menu > button:focus-visible {
  background: var(--blue);
  outline: none;
}

.business-staff-availability-schedule-panel {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.business-staff-availability-section {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.business-staff-availability-section__heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.business-staff-availability-section__heading h4,
.business-staff-availability-section__heading p {
  margin: 0;
}

.business-staff-availability-section__heading h4 {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.25;
}

.business-staff-availability-section__heading p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9.2px;
  line-height: 1.35;
}

.business-staff-availability-weekly,
.business-staff-availability-specific-list {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.business-staff-availability-day,
.business-staff-availability-specific {
  min-width: 0;
  margin: 0;
  padding: 9px;
  background: #fafafa;
  border: .5px solid #ccc;
  border-radius: 5px;
}

.business-staff-availability-day.is-enabled,
.business-staff-availability-specific.is-enabled {
  background: #fff;
}

.business-staff-availability-day__heading,
.business-staff-availability-specific__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  min-width: 0;
}

.business-staff-availability-day__heading > label,
.business-staff-availability-specific__enabled {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: 10px;
  line-height: 1.25;
  cursor: pointer;
}

.business-staff-availability-day__heading strong {
  font-size: 10.5px;
  font-weight: 400;
}

.business-staff-availability-day__heading > span {
  color: var(--muted);
  font-size: 9.2px;
  line-height: 1.2;
}

.business-staff-availability-intervals {
  display: grid;
  gap: 7px;
  min-width: 0;
  margin-top: 8px;
}

.business-staff-availability-interval {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 7px;
  min-width: 0;
}

.business-staff-availability-interval > label,
.business-staff-availability-time-field,
.business-staff-availability-date-field {
  min-width: 0;
}

.business-staff-availability-time-trigger:disabled,
.business-staff-availability-date-trigger:disabled,
.business-staff-availability-select-toggle:disabled {
  color: #777;
  background-color: #f1f1ed;
  cursor: not-allowed;
}

.business-staff-availability-date-picker {
  position: absolute;
  z-index: 42;
  display: grid;
  gap: 7px;
  width: min(286px, calc(100% - 16px));
  max-height: calc(100% - 16px);
  padding: 9px;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--ink);
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 5px;
  box-shadow: 0 5px 12px rgb(0 0 0 / 18%);
  scrollbar-width: thin;
}

.business-staff-availability-date-picker[hidden] {
  display: none;
}

.business-staff-availability-date-picker__header {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 3px 4px;
  background: #fafafa;
  border: .5px solid #ccc;
  border-radius: 4px;
}

.business-staff-availability-date-picker__header > h3 {
  margin: 0;
  overflow: hidden;
  font-size: 10.8px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-staff-availability-date-picker__header > button {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  line-height: 1;
  background: var(--pale-lime);
  border: .5px solid #c7cca8;
  border-radius: 50%;
}

.business-staff-availability-date-nav__icon {
  width: 7.2px;
  height: 4.8px;
  transition: transform 120ms ease;
}

[data-business-staff-availability-date-nav="previous"]
  .business-staff-availability-date-nav__icon {
  transform: rotate(90deg);
}

[data-business-staff-availability-date-nav="next"]
  .business-staff-availability-date-nav__icon {
  transform: rotate(-90deg);
}

.business-staff-availability-date-entry-field {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.business-staff-availability-date-entry-field > span,
.business-staff-availability-date-entry-field > small {
  color: var(--muted);
  font-size: 8.4px;
  line-height: 1.2;
}

.business-staff-availability-date-entry-field > span {
  padding-left: 3px;
}

.business-staff-availability-date-entry-field > input {
  width: 100%;
  min-width: 0;
  min-height: 31px;
  padding: 5px 8px;
  color: var(--ink);
  font: inherit;
  font-size: 10.5px;
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 5px;
}

.business-staff-availability-date-entry-field > input:focus-visible {
  border-color: #474747;
  outline: none;
  box-shadow: inset 0 0 0 .5px #474747;
}

.business-staff-availability-date-entry-field > input[aria-invalid="true"] {
  border-color: #b3261e;
  box-shadow: inset 0 0 0 .5px #b3261e;
}

.business-staff-availability-date-weekdays,
.business-staff-availability-date-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  min-width: 0;
}

.business-staff-availability-date-weekdays > span {
  display: grid;
  place-items: center;
  min-height: 22px;
  color: var(--muted);
  font-size: 8.7px;
  line-height: 1;
  background: #f5f5f2;
  border-radius: 3px;
}

.business-staff-availability-date-day,
[data-business-staff-availability-date-day] {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 31px;
  padding: 3px;
  color: var(--ink);
  font: inherit;
  font-size: 9.6px;
  line-height: 1;
  background: #fff;
  border: .5px solid #ddd;
  border-radius: 3px;
}

.business-staff-availability-date-day.is-outside,
[data-business-staff-availability-date-day].is-outside {
  color: #8a8a8a;
  background: #fafafa;
}

.business-staff-availability-date-day[aria-selected="true"],
[data-business-staff-availability-date-day][aria-selected="true"] {
  color: var(--ink);
  background: var(--pale-lime);
  border-color: #aeb58c;
  box-shadow: inset 3px 0 0 #111;
}

.business-staff-availability-date-day.is-today::after,
[data-business-staff-availability-date-day].is-today::after {
  position: absolute;
  right: 4px;
  bottom: 3px;
  width: 3px;
  height: 3px;
  background: #111;
  border-radius: 50%;
  content: "";
}

.business-staff-availability-date-picker button:not(:disabled):hover,
.business-staff-availability-date-picker button:focus-visible {
  background: var(--blue);
  outline: none;
  box-shadow: inset 0 0 0 .5px #474747;
}

.business-staff-availability-date-day[aria-selected="true"]:hover,
.business-staff-availability-date-day[aria-selected="true"]:focus-visible,
[data-business-staff-availability-date-day][aria-selected="true"]:hover,
[data-business-staff-availability-date-day][aria-selected="true"]:focus-visible {
  box-shadow: inset 3px 0 0 #111, inset 0 0 0 .5px #474747;
}

.business-staff-availability-date-picker button:disabled {
  color: #aaa;
  background: #f5f5f2;
  cursor: not-allowed;
}

.business-staff-availability-date-picker__footer {
  display: grid;
  gap: 5px;
}

.business-staff-availability-date-picker__footer > p {
  min-height: 12px;
  margin: 0;
  color: var(--muted);
  font-size: 8.8px;
  line-height: 1.3;
}

.business-staff-availability-date-picker__footer > p.is-error {
  color: #b3261e;
}

.business-staff-availability-date-picker__actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.business-staff-availability-date-picker__actions > button {
  min-height: 27px;
  padding: 4px 9px;
  color: var(--ink);
  font: inherit;
  font-size: 9.4px;
  background: #fff;
  border: .5px solid #ccc;
  border-radius: 4.5px;
}

.business-staff-availability-date-picker__actions
  [data-business-staff-availability-date-apply] {
  background: var(--pale-lime);
  border-color: #c7cca8;
}

.business-staff-availability-time-picker {
  position: absolute;
  z-index: 40;
  display: grid;
  gap: 8px;
  width: min(258px, calc(100% - 16px));
  max-height: calc(100% - 16px);
  padding: 9px;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--ink);
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 4.8px;
  box-shadow: 0 5px 12px rgb(0 0 0 / 18%);
  scrollbar-width: thin;
}

.business-staff-availability-time-picker[hidden] {
  display: none;
}

.business-staff-availability-time-picker__heading h3,
.business-staff-availability-time-picker__heading p,
.business-staff-availability-time-status {
  margin: 0;
}

.business-staff-availability-time-picker__heading h3 {
  font-size: 10.8px;
  font-weight: 400;
  line-height: 1.25;
}

.business-staff-availability-time-picker__heading p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 8.8px;
  line-height: 1.3;
}

.business-staff-availability-time-entry-field {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.business-staff-availability-time-entry-field > span,
.business-staff-availability-time-entry-field > small {
  color: var(--muted);
  font-size: 8.4px;
  line-height: 1.2;
}

.business-staff-availability-time-entry-field > span {
  padding-left: 3px;
}

.business-staff-availability-time-entry-field > input {
  width: 100%;
  min-width: 0;
  min-height: 31px;
  padding: 5px 8px;
  color: var(--ink);
  font: inherit;
  font-size: 10.5px;
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 5px;
}

.business-staff-availability-time-entry-field > input:focus-visible {
  border-color: #474747;
  outline: none;
  box-shadow: inset 0 0 0 .5px #474747;
}

.business-staff-availability-time-entry-field > input[aria-invalid="true"] {
  border-color: #b3261e;
  box-shadow: inset 0 0 0 .5px #b3261e;
}

.business-staff-availability-time-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  min-width: 0;
}

.business-staff-availability-time-column {
  display: grid;
  grid-template-rows: auto 148px;
  align-content: start;
  gap: 3px;
  min-width: 0;
}

.business-staff-availability-time-column > span {
  padding-left: 3px;
  color: var(--muted);
  font-size: 8.4px;
  line-height: 1.2;
}

.business-staff-availability-time-listbox {
  height: 148px;
  max-height: 148px;
  padding: 3px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fafafa;
  border: .5px solid #ccc;
  border-radius: 4px;
  scrollbar-width: thin;
}

.business-staff-availability-time-listbox:focus-visible {
  border-color: #474747;
  outline: none;
  box-shadow: inset 0 0 0 .5px #474747;
}

.business-staff-availability-time-option {
  width: 100%;
  min-height: 24px;
  padding: 3px 4px;
  color: var(--ink);
  font: inherit;
  font-size: 9.6px;
  line-height: 1;
  text-align: center;
  background: transparent;
  border: 0;
  border-radius: 3px;
}

.business-staff-availability-time-option[aria-selected="true"] {
  background: var(--pale-lime);
  box-shadow: inset 2px 0 0 #111;
}

.business-staff-availability-time-option:hover,
.business-staff-availability-time-option:focus-visible {
  background: var(--blue);
  outline: none;
  box-shadow: inset 0 0 0 .5px #474747;
}

.business-staff-availability-time-option[aria-selected="true"]:hover,
.business-staff-availability-time-option[aria-selected="true"]:focus-visible {
  box-shadow: inset 2px 0 0 #111, inset 0 0 0 .5px #474747;
}

.business-staff-availability-time-status {
  min-height: 12px;
  color: var(--muted);
  font-size: 8.8px;
  line-height: 1.3;
}

.business-staff-availability-time-status.is-error {
  color: #b3261e;
}

.business-staff-availability-time-picker__actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.business-staff-availability-time-picker__actions button {
  min-height: 27px;
  padding: 4px 9px;
  color: var(--ink);
  font: inherit;
  font-size: 9.4px;
  background: #fff;
  border: .5px solid #ccc;
  border-radius: 4.5px;
}

.business-staff-availability-time-picker__actions
  [data-business-staff-availability-time-apply] {
  background: var(--pale-lime);
  border-color: #c7cca8;
}

.business-staff-availability-time-picker__actions button:hover,
.business-staff-availability-time-picker__actions button:focus-visible {
  background: var(--blue);
  outline: none;
}

@media (max-height: 420px) {
  .business-staff-availability-date-picker {
    gap: 5px;
    padding: 7px;
  }

  .business-staff-availability-date-picker__header {
    min-height: 30px;
  }

  .business-staff-availability-date-entry-field {
    gap: 2px;
  }

  .business-staff-availability-date-entry-field > input {
    min-height: 27px;
    padding-top: 3px;
    padding-bottom: 3px;
  }

  .business-staff-availability-date-entry-field > small {
    font-size: 7.8px;
  }

  .business-staff-availability-date-weekdays > span {
    min-height: 18px;
  }

  .business-staff-availability-date-day,
  [data-business-staff-availability-date-day] {
    min-height: 25px;
  }

  .business-staff-availability-date-picker__footer > p:empty {
    display: none;
  }

  .business-staff-availability-time-picker {
    gap: 6px;
    padding: 7px;
  }

  .business-staff-availability-time-picker__heading p {
    display: none;
  }

  .business-staff-availability-time-listbox {
    height: 72px;
    max-height: 72px;
  }

  .business-staff-availability-time-column {
    grid-template-rows: auto 72px;
  }

  .business-staff-availability-time-status {
    min-height: 10px;
  }
}

.business-staff-availability-add,
.business-staff-availability-action {
  min-height: 27px;
  padding: 4px 8px;
  color: var(--ink);
  font: inherit;
  font-size: 9.4px;
  line-height: 1.15;
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 4.5px;
}

.business-staff-availability-add {
  justify-self: start;
  margin-top: 8px;
  background: var(--pale-lime);
  border-color: #c7cca8;
}

.business-staff-availability-section__heading > .business-staff-availability-add {
  flex: 0 0 auto;
  margin-top: 0;
}

.business-staff-availability-add:not(:disabled):hover,
.business-staff-availability-add:focus-visible,
.business-staff-availability-action:not(:disabled):hover,
.business-staff-availability-action:focus-visible {
  background: var(--blue);
  outline: none;
}

.business-staff-availability-add:disabled,
.business-staff-availability-action:disabled {
  color: #777;
  background: #f1f1ed;
  cursor: not-allowed;
}

.business-staff-availability-specific__heading {
  display: grid;
  grid-template-columns: minmax(145px, 1fr) auto auto auto;
}

.business-staff-availability-specific__enabled {
  align-self: end;
  min-height: 31px;
  white-space: nowrap;
}

.business-staff-availability-specific__recurring.contact-list-drawer__switch-row {
  align-self: end;
  gap: 6px;
  min-height: 31px;
  padding: 3px 0;
  font-size: 10px;
  white-space: nowrap;
}

.business-staff-availability-specific__recurring .contact-list-switch:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.business-staff-availability-specific__heading > .business-staff-availability-action {
  align-self: end;
}

.business-staff-availability-empty {
  margin: 0;
  padding: 8px 9px;
  color: var(--muted);
  font-size: 9.4px;
  line-height: 1.35;
  background: #fafafa;
  border: .5px dashed #bbb;
  border-radius: 5px;
}

.business-staff-availability-error {
  margin: 0;
}

.business-staff-availability-error[hidden] {
  display: none;
}

@media (max-width: 430px) {
  .business-staff-scheduling-card__content {
    padding: 11px;
  }

  .business-staff-availability-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .business-staff-availability-section__heading {
    align-items: flex-start;
  }

  .business-staff-availability-interval {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .business-staff-availability-interval > .business-staff-availability-action {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .business-staff-availability-specific__heading {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .business-staff-availability-date-field {
    grid-column: 1 / -1;
  }

  .business-staff-availability-specific__heading > .business-staff-availability-action {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

.business-staff-permissions-card__content {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.business-staff-access-role {
  position: relative;
  z-index: 4;
  width: min(270px, 100%);
  margin: 0;
}

.business-staff-access-role__help {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 9.4px;
  line-height: 1.35;
}

.business-staff-permission-scope {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: 9px 10px;
  background: #fafafa;
  border: .5px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
}

.business-staff-permission-scope > .contact-selection-checkbox {
  margin-top: 1px;
}

.business-staff-permission-scope__copy,
.business-staff-permission-scope__copy > strong,
.business-staff-permission-scope__copy > small {
  display: block;
  min-width: 0;
}

.business-staff-permission-scope__copy > strong {
  font-size: 10.8px;
  font-weight: 400;
  line-height: 1.25;
}

.business-staff-permission-scope__copy > small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9.4px;
  line-height: 1.35;
}

.business-staff-permissions-tools {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 9px;
  min-width: 0;
}

.business-staff-permission-search.list-search {
  flex: 1 1 250px;
  width: min(270px, 100%);
  height: 31px;
  margin: 0;
  padding: 4px 6px;
  border-width: .5px;
  border-radius: 5px;
}

.business-staff-permission-summary {
  flex: 0 0 auto;
  min-width: 88px;
  padding-bottom: 3px;
  color: var(--muted);
  font-size: 9.4px;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}

.business-staff-permission-list-shell {
  position: relative;
  min-height: 180px;
}

.business-staff-permission-list {
  max-height: min(390px, calc(100dvh - 300px));
  min-height: 180px;
  overflow-x: hidden;
  overflow-y: auto;
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 5px;
  scrollbar-width: none;
}

.business-staff-permission-list::-webkit-scrollbar {
  display: none;
}

.business-staff-permission-scrollbar {
  position: absolute;
  z-index: 4;
  top: 5px;
  right: 1px;
  bottom: 5px;
  width: 12px;
  overflow: visible;
  background: transparent;
  border: 0;
}

.business-staff-permission-scrollbar .scrollbar-ui__handle {
  right: 3px;
}

.business-staff-permission-list:focus-visible {
  outline: 1px solid #111;
  outline-offset: 2px;
}

.business-staff-permission-group + .business-staff-permission-group {
  border-top: .5px solid #d6d6d6;
}

.business-staff-permission-group[hidden],
.business-staff-permission-option[hidden],
.business-staff-permission-status[hidden],
.business-staff-permissions-card .data-field-create-error[hidden] {
  display: none;
}

.business-staff-permission-group__header {
  display: flex;
  align-items: stretch;
  min-height: 34px;
  background: linear-gradient(90deg, #f1f1f1, #e7e7e7);
}

.business-staff-permission-group__choice {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  gap: 7px;
  min-width: 0;
  padding: 6px 8px;
  cursor: pointer;
}

.business-staff-permission-group__choice > span {
  min-width: 0;
  overflow: hidden;
  font-size: 10.5px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-staff-permission-group__choice > small {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--muted);
  font-size: 8.8px;
  line-height: 1.2;
  white-space: nowrap;
}

.business-staff-permission-group__toggle {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  padding: 0;
  background: transparent;
  border: 0;
  border-left: .5px solid #ccc;
}

.business-staff-permission-group__toggle:hover,
.business-staff-permission-group__toggle:focus-visible {
  background: var(--blue);
  outline: none;
}

.business-staff-permission-group__caret {
  width: 8px;
  height: 5px;
  transition: transform 120ms ease;
}

.business-staff-permission-group.is-expanded
  .business-staff-permission-group__caret {
  transform: rotate(180deg);
}

.business-staff-permission-group__children {
  display: grid;
  gap: 1px;
  padding: 5px 7px 7px 28px;
  background: #fff;
}

.business-staff-permission-group__children[hidden] {
  display: none;
}

.business-staff-permission-option {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  min-height: 28px;
  padding: 6px 7px;
  font-size: 9.8px;
  line-height: 1.3;
  border-radius: 4px;
  cursor: pointer;
}

.business-staff-permission-option:hover,
.business-staff-permission-option:focus-within {
  background: var(--blue);
}

.business-staff-permission-option > .contact-selection-checkbox {
  margin-top: 1px;
}

.business-staff-permission-status,
.business-staff-permissions-card .data-field-create-error {
  margin: 0;
  font-size: 9.6px;
  line-height: 1.35;
}

.business-staff-permission-status {
  color: var(--muted);
}

.business-staff-preferences-stack {
  display: grid;
  gap: 14px;
}

.business-staff-call-preferences {
  display: grid;
  gap: 15px;
  padding: 14px;
}

.business-staff-preference-select {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0;
}

.business-staff-preference-select.is-open {
  z-index: 30;
}

.business-staff-preference-select .contact-create-single-select__menu {
  position: absolute;
  z-index: 30;
  right: 0;
  left: 0;
  box-shadow: 0 5px 12px rgb(0 0 0 / 14%);
}

.business-staff-preference-help {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 9.2px;
  line-height: 1.35;
}

.business-staff-call-options {
  min-width: 0;
  margin: 0;
  padding: 10px;
  border: .5px solid #ccc;
  border-radius: 5px;
}

.business-staff-call-options > legend {
  padding: 0 3px;
  font-size: 10.8px;
  line-height: 1.2;
}

.business-staff-call-options > p,
.business-staff-voicemail__heading > p {
  margin: 1px 0 0;
  color: var(--muted);
  font-size: 9.2px;
  line-height: 1.35;
}

.business-staff-call-options__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 8px;
}

.business-staff-preference-checkbox {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 7px;
  font-size: 9.8px;
  line-height: 1.2;
  background: #fafafa;
  border: .5px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

.business-staff-preference-checkbox:hover,
.business-staff-preference-checkbox:focus-within {
  background: var(--blue);
}

.business-staff-call-channel-grid,
.business-staff-voicemail__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
}

.business-staff-voicemail {
  display: grid;
  gap: 10px;
  padding-top: 13px;
  border-top: .5px solid #d6d6d6;
}

.business-staff-voicemail__heading h4 {
  margin: 0;
  font-size: 10.8px;
  font-weight: 400;
  line-height: 1.2;
}

.business-staff-voicemail-upload {
  min-width: 0;
}

.business-staff-voicemail-upload__label {
  display: block;
  min-height: 14px;
  font-size: 10.8px;
  line-height: 1.15;
}

.business-staff-voicemail-upload > p,
.business-staff-voicemail-upload > output {
  display: block;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 9.2px;
  line-height: 1.3;
}

.business-staff-voicemail-upload > output {
  min-height: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-staff-voicemail-upload > output.is-error {
  color: #b3261e;
  white-space: normal;
}

.business-staff-voicemail-upload__actions {
  display: flex;
  gap: 6px;
  margin-top: 7px;
}

.business-staff-voicemail-upload__actions > button {
  min-height: 27px;
  padding: 3px 9px;
  color: var(--ink);
  font: inherit;
  font-size: 9.6px;
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 4.8px;
}

.business-staff-voicemail-upload__actions > button:first-child {
  background: var(--pale-lime);
  border-color: #c7cca8;
}

.business-staff-voicemail-upload__actions > button:not(:disabled):hover,
.business-staff-voicemail-upload__actions > button:focus-visible {
  background: var(--blue);
  outline: none;
}

.business-staff-voicemail-upload__actions > button:disabled {
  color: #777;
  background: #f1f1ed;
  cursor: not-allowed;
}

.business-staff-notifications {
  padding: 0;
}

.business-staff-task-reminder {
  padding: 13px 14px;
  border-bottom: .5px solid #d6d6d6;
}

.business-staff-task-reminder .business-staff-preference-select {
  width: min(250px, 100%);
}

.business-staff-notification-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.business-staff-notification-table {
  width: 100%;
  min-width: 470px;
  table-layout: fixed;
  border-spacing: 0;
  border-collapse: separate;
  font-size: 9.5px;
  line-height: 1.3;
}

.business-staff-notification-table thead th {
  height: 34px;
  padding: 6px;
  font-size: 9.2px;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  background: linear-gradient(90deg, #f1f1f1, #e7e7e7);
  border-bottom: .5px solid #aaa;
}

.business-staff-notification-table thead th:first-child {
  width: calc(100% - 213px);
  padding-left: 12px;
  text-align: left;
}

.business-staff-notification-table thead th:not(:first-child) {
  width: 71px;
  border-left: .5px solid #ccc;
}

.business-staff-notification-group-row > th {
  padding: 8px 12px 6px;
  font-size: 10px;
  font-weight: 500;
  text-align: left;
  background: #fafafa;
  border-bottom: .5px solid #ddd;
}

.business-staff-notification-table tbody + tbody
  .business-staff-notification-group-row > th {
  border-top: .5px solid #aaa;
}

.business-staff-notification-table tbody tr:not(.business-staff-notification-group-row) > th,
.business-staff-notification-table tbody td {
  min-height: 34px;
  padding: 7px 9px;
  font-weight: 400;
  text-align: left;
  vertical-align: middle;
  border-bottom: .5px solid #e0e0e0;
}

.business-staff-notification-table tbody td {
  padding: 7px 4px;
  text-align: center;
  border-left: .5px solid #e0e0e0;
}

.business-staff-notification-table tbody:last-child tr:last-child > * {
  border-bottom: 0;
}

.business-staff-notification-choice {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  cursor: pointer;
}

.business-staff-notification-choice:hover,
.business-staff-notification-choice:focus-within {
  background: var(--blue);
}

@media (max-width: 430px) {
  .business-staff-permissions-tools {
    align-items: stretch;
    flex-direction: column;
    gap: 5px;
  }

  .business-staff-permission-search.list-search {
    flex-basis: auto;
    width: 100%;
  }

  .business-staff-permission-summary {
    min-width: 0;
    padding: 0;
    text-align: left;
  }

  .business-staff-permission-list {
    max-height: min(360px, calc(100dvh - 320px));
  }

  .business-staff-permission-group__children {
    padding-left: 14px;
  }

  .business-staff-call-options__grid,
  .business-staff-call-channel-grid,
  .business-staff-voicemail__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.business-profile-panels {
  width: min(1160px, 100%);
  margin-top: 18px;
}

.business-profile-panels > [hidden] {
  display: none;
}

.business-profile-card,
.business-profile-placeholder-panel {
  overflow: visible;
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 0 0 6px 6px;
}

.business-profile-card__header {
  display: flex;
  align-items: center;
  min-height: 49px;
  padding: 12px 20px;
  border-bottom: .5px solid #aaa;
}

.business-profile-card__header h2,
.business-profile-placeholder-panel h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
}

.business-profile-card__body {
  padding: 18px 25px 28px;
}

.business-profile-logo-row {
  display: grid;
  grid-template-columns: minmax(220px, 326px) minmax(230px, 1fr);
  align-items: start;
  gap: 22px;
}

.business-profile-logo-preview {
  display: grid;
  place-items: center;
  width: min(326px, 100%);
  aspect-ratio: 350 / 180;
  overflow: hidden;
  background: #fff;
  border: 1px dotted #606060;
}

.business-profile-logo-preview > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.business-profile-logo-preview > span {
  display: grid;
  place-items: center;
}

.business-profile-logo-preview > span .icon {
  width: 17px;
  height: 17px;
}

.business-profile-logo-copy {
  padding-top: 2px;
}

.business-profile-logo-copy h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
}

.business-profile-logo-copy p {
  max-width: 250px;
  margin: 6px 0 12px;
  font-size: 10.5px;
  line-height: 1.32;
}

.business-profile-logo-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.business-profile-logo-actions > button {
  min-width: 54px;
  min-height: 27px;
  padding: 4px 9px;
  color: var(--ink);
  font-size: 10px;
  line-height: 1;
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 5px;
}

.business-profile-logo-actions > button:first-child {
  background: var(--lime);
}

.business-profile-logo-actions > button:disabled {
  color: #777;
  background: #f3f3f3;
  cursor: default;
}

.business-profile-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 18px 26px;
  margin-top: 18px;
}

.business-profile-field--wide {
  grid-column: 1 / -1;
}

.business-profile-address-line-two {
  width: calc(50% - 13px);
}

.business-profile-field,
.business-profile-contact-stack,
.business-profile-contact-entry {
  min-width: 0;
}

.business-profile-field,
.business-profile-contact-entry {
  display: grid;
  gap: 6px;
}

.business-profile-field label,
.business-profile-field__label,
.business-profile-contact-entry label {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 5px;
  min-height: 14px;
  font-size: 11px;
  line-height: 1.15;
}

.business-profile-contact-entry label .icon {
  width: 11px;
  max-height: 12px;
}

.business-profile-field > input {
  width: 100%;
  height: 29px;
  min-width: 0;
  padding: 3px 8px;
  color: var(--ink);
  font-size: 10.8px;
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 5px;
}

.business-profile-field > input:focus-visible,
.business-profile-contact-entry input:focus-visible,
.business-profile-select__toggle:focus-visible {
  border-color: #474747;
  outline: none;
  box-shadow: inset 0 0 0 .5px #474747;
}

.business-profile-contact-stack {
  display: grid;
  align-content: start;
}

.business-profile-contact-stack > [data-business-email-entries],
.business-profile-contact-stack > [data-business-phone-entries] {
  display: grid;
  gap: 9px;
}

.business-profile-contact-entry__control {
  display: flex;
  align-items: stretch;
  gap: 5px;
  min-width: 0;
}

.business-profile-contact-entry__control > input {
  flex: 1 1 auto;
  width: 100%;
  height: 29px;
  min-width: 0;
  padding: 3px 8px;
  color: var(--ink);
  font-size: 10.8px;
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 5px;
}

.business-profile-contact-entry__control > button {
  display: grid;
  place-items: center;
  flex: 0 0 29px;
  width: 29px;
  min-width: 29px;
  padding: 0;
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 5px;
}

.business-profile-contact-entry__control > button .icon {
  width: 10px;
  height: 12px;
}

.business-profile-phone-control {
  flex: 1 1 auto;
  min-width: 0;
}

.business-profile-phone-control input {
  color: var(--ink);
  font-size: 10.8px;
}

.business-profile-phone-control .contact-create-phone-control__country[aria-disabled="true"] {
  cursor: default;
  opacity: 1;
}

.business-profile-add-contact {
  width: min(205px, 100%);
  margin-top: 6px;
}

.business-profile-select {
  position: relative;
}

.business-profile-select__toggle {
  height: 29px;
}

.business-profile-select__menu {
  position: absolute;
  z-index: 80;
  top: calc(100% + 4px);
  left: 0;
  display: grid;
  gap: 1px;
  width: 100%;
  max-height: 190px;
  padding: 4px;
  overflow-y: auto;
  scrollbar-width: thin;
  box-shadow: 2px 3px 0 rgba(0, 0, 0, .1);
}

.business-profile-select__menu > button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 12px;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 27px;
  padding: 4px 8px;
  color: var(--ink);
  font-size: 10.8px;
  line-height: 1.15;
  text-align: left;
  background: #fff;
  border: 0;
  border-radius: 3px;
}

.business-profile-select__menu > button:hover,
.business-profile-select__menu > button:focus-visible {
  background: var(--blue);
  outline: none;
}

.business-profile-select__menu > button[aria-selected="true"] {
  background: var(--pale-lime);
}

.business-profile-select__check {
  display: none;
  width: 10px;
  height: 8px;
}

.business-profile-select__menu > button[aria-selected="true"] .business-profile-select__check {
  display: block;
}

.business-profile-identification-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 18px 26px;
}

.business-profile-checkbox-row {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 8px;
  min-height: 22px;
  color: var(--ink);
  font-size: 10.8px;
  line-height: 1.25;
  cursor: pointer;
}

.business-profile-registration-toggle,
.business-profile-regions {
  grid-column: 1 / -1;
}

.business-profile-regions {
  min-width: 0;
  padding: 0;
  margin: 2px 0 0;
  border: 0;
}

.business-profile-regions legend {
  padding: 0;
  font-size: 11px;
  line-height: 1.2;
}

.business-profile-region-options {
  display: grid;
  gap: 6px;
  margin-top: 9px;
}

.business-profile-select.is-disabled .business-profile-field__label,
.business-profile-registration-number.is-disabled label {
  color: var(--muted);
}

.business-profile-select__toggle:disabled,
.business-profile-registration-number > input:disabled {
  color: #777;
  background: #f3f3f3;
  cursor: default;
  opacity: 1;
}

.business-profile-select.is-open .contact-create-multiselect__caret {
  transform: rotate(180deg);
}

.business-profile-preferences-card__body {
  display: grid;
  gap: 0;
}

.business-profile-preference-section {
  min-width: 0;
  padding: 0 0 22px;
  margin: 0;
  border: 0;
}

.business-profile-preference-section + .business-profile-preference-section {
  padding-top: 0;
  margin-top: 21px;
}

.business-profile-preference-section:last-child {
  padding-bottom: 0;
}

.business-profile-preference-section > legend {
  padding: 0;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.2;
}

.business-profile-preference-section > p,
.business-profile-preference-help,
.business-profile-preference-field-with-help > p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 9.8px;
  line-height: 1.35;
}

.business-profile-preference-grid,
.business-profile-preference-match-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 18px 26px;
  margin-top: 15px;
}

.business-profile-preference-field-with-help {
  display: grid;
  min-width: 0;
}

.business-profile-preference-list {
  display: grid;
  gap: 11px;
  margin-top: 14px;
}

.business-profile-preference-option {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  align-items: start;
  justify-self: start;
  gap: 8px;
  max-width: 820px;
  color: var(--ink);
  font-size: 10.8px;
  line-height: 1.3;
  cursor: pointer;
}

.business-profile-preference-option > .contact-selection-checkbox {
  margin-top: 1px;
}

.business-profile-preference-option__copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.business-profile-preference-option__copy > small {
  color: var(--muted);
  font-size: 9.8px;
  line-height: 1.35;
}

.business-profile-preference-text {
  width: min(720px, calc(100% - 22px));
  margin-left: 22px;
}

.business-profile-preference-text.is-disabled > label,
.business-profile-preference-text > input:disabled {
  color: var(--muted);
}

.business-profile-preference-text > input:disabled {
  background: #f3f3f3;
  cursor: default;
  opacity: 1;
}

.business-profile-unsubscribe-preview {
  margin: 0;
  color: var(--ink);
  font-size: 9.8px;
  line-height: 1.35;
}

.business-profile-unsubscribe-preview__label {
  color: var(--muted);
}

.business-profile-unsubscribe-preview__link {
  color: #315f93;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.business-profile-preference-text.is-disabled .business-profile-unsubscribe-preview {
  opacity: .6;
}

.business-profile-preference-match-grid {
  width: min(820px, 100%);
  margin-top: 2px;
}

.business-profile-preference-help {
  margin-top: -3px;
}

.business-profile-representatives-card {
  overflow: visible;
}

.business-profile-representatives-card__body {
  display: grid;
  gap: 20px;
}

.business-profile-representatives-intro {
  max-width: 68ch;
  margin: 0;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.4;
}

.business-profile-representatives-picker {
  position: relative;
  z-index: 4;
  display: grid;
  gap: 7px;
  width: min(360px, 100%);
  min-width: 0;
}

.business-profile-representatives-picker__heading h3,
.business-profile-representative-editor__heading h3,
.business-profile-representatives-list h3 {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
}

.business-profile-representatives-picker__heading p,
.business-profile-representative-editor__heading p {
  max-width: 68ch;
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 9.8px;
  line-height: 1.35;
}

.business-profile-representatives-picker .contact-list-sharing__user-picker,
.business-profile-representatives-picker.contact-list-sharing__user-picker {
  z-index: 90;
  width: 100%;
}

.business-profile-representatives-picker .contact-list-sharing__user-toggle,
.business-profile-representatives-picker.contact-list-sharing__user-picker > .contact-list-sharing__user-toggle,
.business-profile-representatives-picker .contact-list-sharing__directory,
.business-profile-representatives-picker.contact-list-sharing__user-picker > .contact-list-sharing__directory {
  width: 100%;
}

.business-profile-representatives-picker .contact-list-sharing__directory,
.business-profile-representatives-picker.contact-list-sharing__user-picker > .contact-list-sharing__directory {
  z-index: 96;
  height: auto;
  max-height: 185px;
}

.business-profile-representatives-list {
  display: grid;
  gap: 8px;
  width: 100%;
  margin: 0;
}

.business-profile-representatives-list[hidden],
.business-profile-representative-row[hidden] {
  display: none;
}

.business-profile-representative-row.contact-list-sharing__selected-user,
.business-profile-representative-row {
  grid-template-columns: 18px minmax(180px, 1.25fr) minmax(190px, 1fr) auto;
  gap: 9px 14px;
  min-height: 43px;
  padding: 7px 9px;
}

.business-profile-representative-row__identity {
  display: block;
  min-width: 0;
}

.business-profile-representative-row__details {
  min-width: 0;
}

.business-profile-representative-row__identity strong,
.business-profile-representative-row__identity small,
.business-profile-representative-row__details strong,
.business-profile-representative-row__details small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-profile-representative-row__identity strong {
  font-size: 10.5px;
  font-weight: 400;
}

.business-profile-representative-row__identity small,
.business-profile-representative-row__details small {
  color: var(--muted);
  font-size: 9.8px;
  line-height: 1.35;
}

.business-profile-representative-row__details strong {
  font-size: 10.5px;
  font-weight: 400;
}

.business-profile-representative-row__details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 12px;
  align-items: center;
}

.business-profile-representative-row__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.business-profile-representative-row__actions .icon {
  width: 11px;
  height: 11px;
}

.business-profile-empty-state {
  margin: 0;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.4;
}

.business-profile-representative-editor {
  display: grid;
  gap: 0;
  min-width: 0;
}

.business-profile-representative-editor__copy {
  max-width: 68ch;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 9.8px;
  line-height: 1.35;
}

.business-profile-representative-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 18px 26px;
  margin-top: 15px;
}

.business-profile-representative-phone {
  grid-column: 1 / -1;
  width: min(100%, calc(50% - 13px));
}

.business-profile-representative-actions.contact-create-form__footer,
.business-profile-representative-actions {
  justify-content: flex-end;
  margin-top: 18px;
  padding: 0;
  background: transparent;
  border-top: 0;
}

.business-profile-status {
  display: block;
  min-height: 15px;
  margin-top: 8px;
  color: #476000;
  font-size: 10px;
}

.business-profile-status.is-error {
  color: #b3261e;
}

.business-profile-placeholder-panel {
  min-height: 190px;
  padding: 20px;
}

.business-profile-placeholder-panel p {
  max-width: 60ch;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

@media (max-width: 1179px) {
  .business-client-portal-screen,
  .opportunities-screen,
  .business-profile-screen {
    min-height: calc(100dvh - 42px);
  }
}

@media (max-width: 900px) {
  .business-client-portal-screen,
  .opportunities-screen,
  .business-profile-screen {
    padding-right: 24px;
  }

  .business-profile-logo-row {
    grid-template-columns: minmax(200px, 280px) minmax(190px, 1fr);
  }
}

@media (max-width: 767px) {
  .business-client-portal-screen,
  .opportunities-screen,
  .business-profile-screen {
    min-height: calc(100dvh - 48px);
    padding: 24px 16px 36px;
  }

  .business-client-portal-overview {
    flex-direction: column;
    gap: 14px;
  }

  .opportunities-overview { flex-direction: column; gap: 14px; }

  .business-profile-tabs {
    margin-top: 16px;
  }

  .business-profile-tabs [role="tablist"] {
    gap: 9px;
  }

  .business-profile-tab {
    min-width: auto !important;
  }

  .business-profile-card__body {
    padding: 16px 14px 24px;
  }

  .business-profile-logo-row,
  .business-profile-fields,
  .business-profile-identification-fields,
  .business-profile-preference-grid,
  .business-profile-preference-match-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .business-profile-representative-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .business-profile-field--wide {
    grid-column: 1;
  }

  .business-profile-address-line-two {
    width: 100%;
  }

  .business-profile-representatives-card__body {
    gap: 18px;
  }

  .business-profile-representatives-picker,
  .business-profile-representative-phone {
    width: 100%;
  }

  .business-profile-representative-phone {
    grid-column: 1;
  }

  .business-profile-representative-row.contact-list-sharing__selected-user,
  .business-profile-representative-row {
    grid-template-columns: 18px minmax(0, 1fr) auto;
    gap: 8px 10px;
  }

  .business-profile-representative-row__details {
    grid-column: 2 / -1;
    grid-row: 2;
  }

  .business-profile-representative-row__actions {
    grid-column: 3;
    grid-row: 1;
  }

  .business-profile-representative-actions.contact-create-form__footer,
  .business-profile-representative-actions {
    justify-content: flex-start;
  }

  .business-profile-registration-toggle,
  .business-profile-regions {
    grid-column: 1;
  }

  .business-profile-logo-preview {
    width: min(326px, 100%);
  }
}


/* Shared close control for every native Pragtical drawer and modal. */
.pragtical-dialog-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.pragtical-dialog-titlebar > h2,
.pragtical-dialog-titlebar > h3,
.pragtical-dialog-titlebar > div {
  flex: 1 1 auto;
  min-width: 0;
}

.pragtical-dialog-close {
  display: grid;
  place-items: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  margin-left: auto;
  padding: 0;
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  background: transparent;
  border: 0;
  border-radius: 4px;
  box-shadow: none;
  cursor: pointer;
}

.pragtical-dialog-close:hover,
.pragtical-dialog-close:active {
  background: var(--blue);
  border-color: transparent;
  outline: none;
  outline-offset: 0;
  box-shadow: none;
}

.pragtical-dialog-close:focus,
.pragtical-dialog-close:focus-visible {
  background: transparent;
  border-color: transparent;
  outline: none;
  outline-offset: 0;
  box-shadow: none;
}

.pragtical-dialog-close:disabled {
  color: #777;
  background: #f1f1ed;
  cursor: not-allowed;
}

button.pragtical-dialog-close {
  flex-basis: 24px;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 4px;
}

button.pragtical-dialog-close:hover,
button.pragtical-dialog-close:active {
  background: var(--blue);
  border-color: transparent;
  outline: none;
  outline-offset: 0;
  box-shadow: none;
}

button.pragtical-dialog-close:focus,
button.pragtical-dialog-close:focus-visible {
  background: transparent;
  border-color: transparent;
  outline: none;
  outline-offset: 0;
  box-shadow: none;
}

button.pragtical-dialog-close:disabled {
  color: #777;
  background: #f1f1ed;
}

.data-types-action-dialog .pragtical-dialog-titlebar {
  flex: 0 0 auto;
  padding-right: 8px;
  border-bottom: .5px solid #ccc;
}

.data-types-action-dialog .pragtical-dialog-titlebar > h2 {
  padding: 11px 6px 11px 14px;
  border-bottom: 0;
}

.data-types-action-dialog__header,
.data-objects-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.data-types-action-dialog__header {
  padding-right: 8px;
  border-bottom: .5px solid #ccc;
}

.data-types-action-dialog__header > h2 {
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 6px 11px 14px;
  border-bottom: 0;
}

.data-objects-dialog__header > h2 {
  flex: 1 1 auto;
  min-width: 0;
}

.contact-tag-list-popover__header.pragtical-dialog-titlebar,
.contact-export-customize__header.pragtical-dialog-titlebar {
  height: auto;
  min-height: 32px;
}

/* My Business: Business Calendars. This view composes the shared Pragtical
   shell, page actions, custom selects, search, switches, and filter chips. */
.business-calendars-screen-host {
  display: contents;
}

.business-calendars-filter-surfaces {
  display: contents;
}

.business-calendars-filter-surfaces .quick-filter-popover {
  z-index: 140;
  width: 220px;
}

.business-calendars-filter-surfaces .quick-filter-menu {
  z-index: 150;
  width: 250px;
}

.business-calendars-filter-surfaces .quick-filter-menu__options {
  height: auto;
  max-height: none;
}

.business-calendars-filter-surfaces .quick-filter-menu__scrollbar {
  display: none;
}

.business-calendars-filter-surfaces [role="option"][hidden] {
  display: none;
}

.business-calendars-filter-surfaces .quick-filter-specific-date__help {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.business-calendars-screen {
  padding: 39px 36px 18px 35px;
}

.business-calendars-heading {
  display: block;
  min-height: 0;
}

.business-calendars-heading .data-values-heading__copy {
  min-width: 0;
}

.business-calendars-heading__title-row {
  flex-wrap: wrap;
  gap: 10px 15px;
}

.business-calendars-count {
  min-width: 110px;
}

.business-calendars-add .contact-create-menu__label {
  min-width: 98px;
}

.business-calendars-layout {
  display: grid;
  grid-template-columns: 241px minmax(0, 1fr);
  gap: 8px;
  width: min(1187px, calc(100% + 64px));
  height: calc(100dvh - 154px);
  min-height: 542px;
  max-height: 760px;
  margin: 17px 0 0 -14px;
}

.business-calendars-directory,
.business-calendars-calendar {
  min-width: 0;
  overflow: hidden;
  background: #fff;
  border: .5px solid #aaa;
}

.business-calendars-directory {
  display: flex;
  flex-direction: column;
  border: .5px solid #aaa;
}

.business-calendars-directory__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 40px;
  gap: 8px;
  min-width: 0;
  padding: 7px 13px 6px 10px;
  border-bottom: .5px solid #aaa;
}

.business-calendars-directory__header h2,
.business-calendars-calendar__header h2 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-calendars-directory__header h2 {
  flex: 1 1 auto;
}

.business-calendars-directory__settings {
  display: grid;
  place-items: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  padding: 0;
  background: #f3f3f3;
  border: .5px solid #aaa;
  border-radius: 2px;
}

.business-calendars-directory__settings:hover,
.business-calendars-directory__settings:focus-visible {
  background: var(--blue);
}

.business-calendars-directory__settings .icon {
  width: 13px;
  height: 13px;
}

.business-calendars-directory__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 8px 0 16px;
  overflow-y: auto;
}

.business-calendars-directory__filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0 10px 7px;
}

.business-calendars-directory__filters .business-calendars-select {
  width: 100%;
}

.business-calendars-directory__filters .contact-create-multiselect__toggle {
  width: 100%;
  min-width: 0;
}

.business-calendars-directory__builder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  min-height: 27px;
  margin: 13px 0 -16px;
  padding: 4px 10px;
  color: #111;
  font-size: 10px;
  background: var(--lime);
  border: 0;
  border-top: .5px solid #aaa;
  border-bottom: .5px solid #aaa;
  border-radius: 0;
}

.business-calendars-directory__builder:hover,
.business-calendars-directory__builder:focus-visible {
  background: #dcfa77;
}

.business-calendars-directory__builder .icon {
  width: 11px;
  height: 11px;
}

/* Calendar Builder reuses the large Data Objects catalog dialog shell. */
.business-calendar-builder-dialog {
  width: min(1140px, calc(100vw - 24px));
  height: min(520px, calc(100dvh - 124px));
  transform: translate(80px, -50px);
}

.business-calendar-builder-dialog::backdrop {
  background: rgb(255 255 255 / 42%);
}

.calendar-event-details-dialog {
  width: min(420px, calc(100vw - 24px));
  height: min(418px, calc(100dvh - 48px));
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 16px;
  box-shadow: none;
  transform: translate(80px, 50px);
}

.calendar-event-details-dialog::backdrop {
  background: rgb(255 255 255 / 42%);
}

.calendar-event-details-modal {
  grid-template-rows: 25px minmax(0, 1fr);
  background: rgb(255 255 255 / 40%);
  border-top: 2px solid #111;
  border-bottom: 2px solid #111;
  border-radius: 16px;
  box-shadow: 0 2px 4px rgb(0 0 0 / 18%);
  overflow: hidden;
}

.calendar-event-details-modal > .template-catalog-header {
  padding: 0 8px;
  background: transparent;
}

.calendar-event-details-modal > .template-catalog-header h2 {
  overflow: hidden;
  font-size: 11px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-event-details-modal > .template-catalog-header
  > .pragtical-dialog-close:focus,
.calendar-event-details-modal > .template-catalog-header
  > .pragtical-dialog-close:focus-visible {
  background: transparent;
}

.calendar-event-details {
  display: flex;
  min-height: 0;
  padding: 6px 8px 8px;
  overflow: hidden;
  flex-direction: column;
  background: transparent;
}

.calendar-event-details__scroll-frame {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin-left: -8px;
  overflow: hidden;
}

.calendar-event-details__scroll {
  height: 100%;
  padding: 0 12px 0 8px;
  overflow-y: auto;
  scrollbar-width: none;
}

.calendar-event-details__scroll::-webkit-scrollbar {
  display: none;
}

.calendar-event-details__scroll:focus-visible {
  outline: none;
}

.calendar-event-details__scrollbar {
  position: absolute;
  z-index: 2;
  top: 2px;
  right: -7px;
  bottom: 2px;
  width: 12px;
}

.calendar-event-details__scrollbar .scrollbar-ui__handle {
  right: 2px;
  width: 5px;
  height: 44px;
}

.calendar-event-details__summary {
  display: grid;
  justify-items: start;
  gap: 5px;
  margin-left: -8px;
}

.calendar-event-details__pill {
  padding: 7px 8px;
  font-size: 10px;
  border: 1px solid #aeb3b0;
  border-radius: 0 5px 5px 0;
}

.calendar-event-details__pill b {
  font-weight: 500;
}

.calendar-event-details__pill--type {
  width: max-content;
  max-width: 100%;
  background: #d1e9ff;
  white-space: nowrap;
}

.calendar-event-details__pill--time {
  width: max-content;
  max-width: 100%;
  background: #ecff9e;
  white-space: nowrap;
}

.calendar-event-details__pill--date {
  width: max-content;
  max-width: 100%;
  background: #fff;
  white-space: nowrap;
}

.calendar-event-details__soon-row {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
  padding-left: 0;
}

.calendar-event-details__soon {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 8px;
  color: #285c32;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  background: #d8f1da;
  border-radius: 0 999px 999px 0;
}

.calendar-event-details__reminder-control {
  position: relative;
}

.calendar-event-details__reminder {
  display: inline-flex;
  align-items: center;
  gap: 4.4px;
  padding: 3.3px 7.7px;
  color: #285c32;
  font: inherit;
  font-size: 8.8px;
  text-decoration: underline;
  background: rgb(216 241 218 / 80%);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.calendar-event-details__reminder-chevron {
  width: 7.7px;
  height: 7.7px;
  transition: transform 120ms ease;
}

.calendar-event-details__reminder[aria-expanded="true"]
  .calendar-event-details__reminder-chevron {
  transform: rotate(180deg);
}

.calendar-event-details__reminder:hover,
.calendar-event-details__reminder:focus-visible {
  background: #c7e9ca;
}

.calendar-event-details__reminder-menu {
  position: absolute;
  z-index: 5;
  top: calc(100% + 3px);
  left: 0;
  display: grid;
  width: max-content;
  min-width: 145px;
  padding: 3px;
  background: #fff;
  border: 1px solid #aeb3b0;
  border-radius: 5px;
  box-shadow: 0 3px 8px rgb(0 0 0 / 18%);
}

.calendar-event-details__reminder-menu[hidden] {
  display: none;
}

.calendar-event-details__reminder-menu button {
  padding: 5px 7px;
  color: #111;
  font: inherit;
  font-size: 8px;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}

.calendar-event-details__reminder-menu button:hover,
.calendar-event-details__reminder-menu button:focus-visible,
.calendar-event-details__reminder-menu button[aria-checked="true"] {
  background: #e8f5e9;
}

.calendar-event-details__section {
  margin-top: 12px;
}

.calendar-event-details__section h3 {
  margin: 0 0 7px;
  font-size: 12px;
  font-weight: 500;
}

.calendar-event-details__participants {
  display: grid;
  gap: 7px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.calendar-event-details__participants li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}

.calendar-event-details__participants small {
  font: inherit;
}

.calendar-event-details__person-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 18px;
  width: 15px;
  height: 15px;
  color: #111;
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: .15px;
  line-height: 1;
  background: #d3d3d1;
  border-radius: 50%;
}

.calendar-event-details__notes {
  min-height: 0;
  padding: 0;
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-wrap;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.calendar-event-details__tag-editor {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.calendar-event-details__tag-editor > .data-values-page-action {
  height: 19.8px;
}

.calendar-event-details__tag-editor > .data-values-page-action .contact-create-menu__label,
.calendar-event-details__tag-editor > .data-values-page-action .contact-create-menu__icon {
  font-size: 9px;
}

.calendar-event-details__tag-editor > .data-values-page-action .contact-create-menu__label {
  min-width: 86.4px;
  padding: 1.8px 7.2px;
  border-radius: 2.7px 0 0 2.7px;
}

.calendar-event-details__tag-editor > .data-values-page-action .contact-create-menu__icon {
  width: 21.6px;
  border-radius: 0 2.7px 2.7px 0;
}

.calendar-event-details__tag-editor > .data-values-page-action .contact-create-menu__icon .icon {
  width: 8.1px;
  height: 8.1px;
}

.calendar-event-details__tags-empty {
  color: #666;
  font-size: 10px;
}

.calendar-event-details__tag-options {
  position: absolute;
  z-index: 6;
  top: calc(100% + 4px);
  left: 0;
  width: 190px;
  max-height: 150px;
  overflow-y: auto;
}

.calendar-event-details__tag-options[hidden] {
  display: none;
}

.calendar-event-details__actions {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  gap: 5px;
  padding-top: 8px;
  margin-top: 0;
  background: transparent;
}

.calendar-event-details__actions button {
  min-height: 27px;
  padding: 4px 8px;
  color: #111;
  font-size: 9px;
  background: #fff;
  border: 1px solid #aaa;
  border-radius: 4px;
}

.calendar-event-details__actions button:last-child {
  background: var(--pale-lime);
}

.calendar-event-details__edit-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.calendar-event-details__action-icon {
  width: 12px;
  height: 12px;
}

@media (max-width: 680px) {
  .calendar-event-details-dialog {
    width: min(420px, calc(100vw - 16px));
    height: min(418px, calc(100dvh - 16px));
    border-radius: 10px;
    transform: none;
  }
}

.business-calendar-builder-modal > .template-catalog-header {
  padding-right: 0;
}

.business-calendar-builder-modal > .template-catalog-header h2 {
  font-size: 13px;
}

.business-calendar-builder-modal > .template-catalog-header
  > .pragtical-dialog-close:focus,
.business-calendar-builder-modal > .template-catalog-header
  > .pragtical-dialog-close:focus-visible {
  background: transparent;
}

.business-calendar-builder-modal > .template-catalog-header
  > .pragtical-dialog-close:hover,
.business-calendar-builder-modal > .template-catalog-header
  > .pragtical-dialog-close:active {
  background: var(--blue);
}

.business-calendar-builder {
  min-width: 0;
  min-height: 0;
  padding: 24px 25px 28px;
  overflow: auto;
}

.business-calendar-builder__heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.business-calendar-builder__heading-title {
  display: flex;
  align-items: center;
  min-width: 0;
}

.business-calendar-builder__heading-row h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
}

.business-calendar-builder__count {
  flex: 0 0 auto;
}

.business-calendar-builder__actions {
  display: flex;
  align-items: center;
}

.business-calendar-builder__actions {
  gap: 8px;
}

.business-calendar-builder__pills {
  width: max-content;
}

.business-calendar-builder__pills[hidden] {
  display: none;
}

.business-calendar-builder__filter.toolbar-icon-button {
  flex: 0 0 23px;
  margin: 0;
}

.business-calendar-builder__add {
  flex: 0 0 auto;
}

.business-calendar-builder__mode {
  display: inline-flex;
  width: 149px;
  height: 33px;
  margin: 27px 0 24px 15px;
  overflow: hidden;
  border: .5px solid #aeb49d;
  border-radius: 6px;
}

.business-calendar-builder__mode button {
  flex: 1 1 50%;
  min-width: 0;
  height: 32px;
  padding: 4px 11px;
  font-size: 12px;
  background: var(--pale-lime);
  border: 0;
}

.business-calendar-builder__mode button + button {
  border-left: .5px solid #aeb49d;
}

.business-calendar-builder__mode button[aria-selected="true"] {
  background: var(--lime);
}

.business-calendar-builder__workspace {
  position: relative;
  width: 100%;
  min-width: 0;
  margin: 0 auto -30px;
  transform: translateY(-30px);
}

.business-calendar-builder__mode-panel[hidden] {
  display: none;
}

.business-calendar-builder__workspace-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 34px;
  padding-right: 0;
}

.business-calendar-builder__manage-control {
  width: max-content;
}

.business-calendar-builder__manage {
  height: 23px;
  white-space: nowrap;
}

.business-calendar-builder__list-panel {
  flex: 0 0 auto;
  margin-top: 0;
}

.business-calendar-builder__list-bar {
  align-items: flex-end;
  gap: 10px;
  width: 100%;
  max-width: none;
  height: 40px;
}

.business-calendar-builder__list-tabs {
  align-items: flex-end;
  gap: 13px;
  overflow: hidden;
  border-bottom: .5px solid #aaa;
}

.business-calendar-builder__groups-primary {
  align-items: flex-end;
  overflow: hidden;
  border-bottom: .5px solid #aaa;
}

.business-calendar-builder__view-config-card {
  flex: 0 0 166px;
  width: 166px;
}

.business-calendar-builder__view-config-card h2 {
  flex: 0 0 108px;
  width: 108px;
}

.business-calendar-builder__groups-primary .business-calendar-builder__view-config-card h2 {
  flex-basis: 136px;
  width: 136px;
}

.business-calendar-builder__list-tabs .view-button {
  width: fit-content;
  min-width: 0;
  padding-inline: 10px;
  transform: translateY(4px);
}

.business-calendar-builder__list-tabs .view-button.is-active {
  background: linear-gradient(90deg, #ededed, #dedede);
  box-shadow: none;
  filter: drop-shadow(4px 0 0 #050505);
}

.business-calendar-builder__list-tabs .view-button:not(.is-active):hover {
  background: var(--blue);
}

.business-calendar-builder__list-tabs .view-button:focus-visible,
.business-calendar-builder__list-tabs .add-view-button:focus-visible {
  outline: none;
}

.business-calendar-builder__list-search {
  align-self: flex-end;
  flex: 0 0 208px;
  margin: 0 0 -1px;
}

.business-calendar-builder__list-search .list-search {
  width: 208px;
  max-width: 100%;
  margin-top: 0;
}

.business-calendar-builder__list-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.business-calendar-builder__table-shell {
  flex: 0 0 190px;
  width: 100%;
  max-width: none;
  height: 190px;
  margin: 0 0 20px;
}

.business-calendar-builder__table-shell::before,
.business-calendar-builder__table-shell::after {
  right: 0;
}

.business-calendar-builder__table-shell .contacts-list-container {
  right: 0;
  left: 0;
}

.business-calendar-builder__table-scroll {
  width: 100%;
  max-width: none;
  padding: 0 4px 12px;
}

.business-calendar-builder__calendar-table {
  width: 100%;
  min-width: var(--contacts-table-min-width);
  margin-left: 0;
}

.business-calendar-builder__calendar-table tbody th:first-child {
  padding-left: 14px;
}

.business-calendar-builder__calendar-table tbody tr[data-calendar-builder-id] th:first-child {
  padding-left: 30px;
}

.business-calendar-builder__calendar-table tbody [data-column="name"]
  > span:not(.contacts-table__name-scrim):not([hidden]) {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.business-calendar-builder__calendar-table tbody tr:hover > th,
.business-calendar-builder__calendar-table tbody tr:hover > td,
.business-calendar-builder__calendar-table tbody tr:focus-within > th,
.business-calendar-builder__calendar-table tbody tr:focus-within > td {
  background: #edf4f8;
}

.business-calendar-builder__groups-table tbody tr[data-calendar-builder-group-id] {
  cursor: pointer;
}

.business-calendar-builder__group-open {
  font-weight: 400;
}

.business-calendar-builder__group-context {
  padding-right: 4px;
  padding-left: 4px;
}

.business-calendar-builder__selection-toolbar {
  width: 100%;
  margin: 0 0 5px;
}

.business-calendar-builder__action-popup {
  z-index: 90;
  width: 230px;
}

.business-calendar-builder__staff-filter-popup {
  width: 190px;
}

.business-calendar-builder__staff-filter-options {
  display: grid;
  min-height: 0;
  max-height: 190px;
  overflow-y: auto;
}

.business-calendar-builder__staff-filter-options .quick-filter-popover__option {
  width: 100%;
  cursor: pointer;
}

.business-calendar-builder__group-options {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 8px;
  border: 0;
}

.business-calendar-builder__group-options label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 24px;
  padding: 3px 6px;
  font-size: 10px;
  border-radius: 4px;
}

.business-calendar-builder__group-options label:hover {
  background: var(--pale-lime);
}

.business-calendar-builder__share-placeholder {
  padding: 10px;
  font-size: 10px;
}

.business-calendar-builder__share-placeholder strong {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
}

.business-calendar-builder__share-placeholder p {
  margin: 0;
  color: var(--muted);
  line-height: 1.35;
}

.business-calendar-builder__calendar-table .business-calendar-builder__empty td {
  height: 52px;
  color: var(--muted);
  text-align: center;
  background: #f4f4f4;
  border: 0;
}

.business-calendar-builder__status {
  display: block;
  width: min(100%, 80px);
  margin: auto;
  padding: 2px 8px;
  text-align: center;
  background: #a8ffb4;
  border-radius: 999px;
}

.business-calendar-builder__pagination {
  width: 100%;
  margin: 0;
}

.business-calendar-builder__horizontal-scrollbar {
  right: 7px;
  bottom: 2px;
  left: 7px;
}

.business-calendar-builder__vertical-scrollbar {
  right: 3px;
}

@media (max-width: 760px) {
  .business-calendar-builder__heading-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .business-calendar-builder__actions {
    flex-wrap: wrap;
  }
}

.business-calendars-directory__group {
  margin: 0;
  padding: 0;
}

.business-calendars-directory__group + .business-calendars-directory__group {
  margin-top: 13px;
}

.business-calendars-directory__group h3,
.business-calendars-directory__group ul {
  margin: 0;
  padding: 0;
}

.business-calendars-directory__group ul {
  list-style: none;
}

.business-calendars-directory__group h3 > button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  min-height: 25px;
  margin: 0 10px;
  padding: 2px 7px;
  color: var(--ink);
  font: inherit;
  font-size: 10.5px;
  font-weight: 400;
  text-transform: uppercase;
  background: transparent;
  border: 0;
  border-radius: 3px;
}

.business-calendars-directory__caret {
  width: 6px;
  height: 5px;
  transition: transform 120ms ease;
  transform: rotate(180deg);
}

.business-calendars-directory__group h3 > button[aria-expanded="false"]
  .business-calendars-directory__caret {
  transform: rotate(0deg);
}

.business-calendars-directory__item {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  min-height: 22px;
  padding: 3px 15px 3px 17px;
  color: var(--ink);
  font: inherit;
  font-size: 9px;
  line-height: 1.2;
  text-align: left;
  background: transparent;
  border: 0;
}

.business-calendars-directory__item > span:not(.business-calendars-directory__count) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-calendars-directory__item.is-active {
  background: var(--blue);
}

.business-calendars-directory__item:hover,
.business-calendars-directory__item:focus-visible,
.business-calendars-directory__group h3 > button:hover,
.business-calendars-directory__group h3 > button:focus-visible {
  background: #e6f1f8;
  outline: none;
  box-shadow: none;
}

.business-calendars-directory__avatar {
  flex: 0 0 13px;
  width: 13px;
  height: 13px;
  object-fit: cover;
  border-radius: 50%;
}

.business-calendars-directory__count {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 17px;
  min-height: 13px;
  margin-left: 1px;
  padding: 0 3px;
  font-size: 8px;
  line-height: 1;
  background: #d5d5d5;
  border-radius: 7px;
}

.business-calendars-directory__add {
  min-height: 19px;
  margin: 1px 0 0 17px;
  padding: 1px 0;
  color: #4f81a3;
  font: inherit;
  font-size: 9px;
  text-decoration: underline;
  background: transparent;
  border: 0;
}

.business-calendars-calendar {
  position: relative;
  display: flex;
  flex-direction: column;
  border: .5px solid #aaa;
}

.business-calendars-calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 41px;
  gap: 12px;
  padding: 7px 12px 6px 18px;
}

.business-calendars-calendar__identity {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  gap: 15px;
  min-width: 0;
}

.business-calendars-calendar__identity h2 {
  flex: 0 1 auto;
}

.business-calendars-calendar__counts {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 12px;
}

.business-calendars-count-menu {
  position: relative;
  z-index: 34;
  display: inline-flex;
  align-items: center;
  height: 20px;
}

.business-calendars-count-menu::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -8px;
  z-index: 0;
  width: 13px;
  content: "";
  background: #050505;
  border-radius: 6px 0 0 6px;
}

.business-calendars-count-menu > summary {
  position: relative;
  z-index: 1;
  height: 20px;
  gap: 7px;
  list-style: none;
  cursor: pointer;
  box-shadow: none;
}

.business-calendars-count-menu > summary::-webkit-details-marker {
  display: none;
}

.business-calendars-count-menu__chevron {
  width: 8px;
  height: auto;
  flex: 0 0 auto;
  transition: transform 120ms ease;
}

.business-calendars-count-menu[open] .business-calendars-count-menu__chevron {
  transform: rotate(180deg);
}

.business-calendars-event-count,
.business-calendars-task-count {
  flex: 0 0 auto;
  min-width: 74px;
  min-height: 20px;
  margin-left: 0;
  padding-inline: 8px;
}

.business-calendars-task-count {
  background: #fdecec;
  border-color: #edcccc;
}

.business-calendars-count-menu__list {
  position: absolute;
  top: calc(100% + 7px);
  left: -8px;
  z-index: 40;
  display: grid;
  width: 220px;
  max-height: 230px;
  padding: 5px;
  overflow-y: auto;
  background: #fff;
  border: .5px solid #8f928f;
  border-radius: 5px;
  box-shadow: 0 4px 14px rgb(27 31 29 / 12%);
}

.business-calendars-count-menu__list button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 30px;
  padding: 5px 7px;
  color: var(--ink);
  font: inherit;
  font-size: 10px;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 3px;
}

.business-calendars-count-menu__list button:hover,
.business-calendars-count-menu__list button:focus-visible {
  background: var(--blue);
}

.business-calendars-count-menu__list button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-calendars-count-menu__list button small,
.business-calendars-count-menu__list p {
  color: var(--muted);
  font-size: 8.5px;
}

.business-calendars-count-menu__list p {
  margin: 4px 6px;
}

.business-calendars-calendar__actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
}

.business-calendars-shared-viewers {
  display: inline-flex;
  align-items: center;
  padding-left: 8px;
}

.business-calendars-shared-viewer {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  overflow: visible;
  color: #111;
  font-size: 7px;
  font-weight: 700;
  line-height: 1;
  background: #c9c9c7;
  border: 0;
  border-radius: 50%;
}

.business-calendars-shared-viewer + .business-calendars-shared-viewer {
  margin-left: -4px;
}

.business-calendars-shared-viewer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.business-calendars-shared-viewer.is-active {
  z-index: 2;
  background: #b9eac4;
}

.business-calendars-shared-viewer.is-active::after {
  position: absolute;
  inset: -3px;
  z-index: -1;
  content: "";
  background: rgb(112 211 133 / 36%);
  border-radius: 50%;
  animation: business-calendar-viewer-pulse 1.8s ease-out infinite;
}

@keyframes business-calendar-viewer-pulse {
  0% { opacity: .9; transform: scale(.78); }
  70%, 100% { opacity: 0; transform: scale(1.38); }
}

.business-calendars-filter-toggle.toolbar-icon-button {
  flex: 0 0 23px;
  margin-top: 0;
  border: 1px solid #9ab5c4;
  outline: none;
  box-shadow: none;
}

.business-calendars-filter-toggle.toolbar-icon-button:hover,
.business-calendars-filter-toggle.toolbar-icon-button:focus,
.business-calendars-filter-toggle.toolbar-icon-button:focus-visible,
.business-calendars-filter-toggle.toolbar-icon-button[aria-expanded="true"] {
  border: 1px solid #9ab5c4;
  outline: none;
  outline-offset: 0;
  box-shadow: none;
}

.business-calendars-calendar-actions-secondary {
  position: absolute;
  /* Above grid headers/popouts (up to 120), below filter surfaces (140/150). */
  z-index: 130;
  top: 39px;
  right: 11px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 5px;
  width: max-content;
}

.business-calendars-calendar-actions-secondary .business-calendars-filter-chips.filter-chip-strip {
  display: flex;
  flex: 0 0 auto;
  width: max-content;
  margin: 0;
  transform: none;
}

.business-calendars-calendar-actions-secondary .filter-chip-row {
  flex-wrap: nowrap;
}

.business-calendars-manage {
  position: relative;
  z-index: 32;
  flex: 0 0 auto;
}

.business-calendars-manage > summary {
  min-width: 139px;
  height: 23px;
  list-style: none;
  cursor: pointer;
}

.business-calendars-manage > summary::-webkit-details-marker {
  display: none;
}

.business-calendars-manage[open] > summary {
  background: var(--blue) !important;
  box-shadow: inset 0 0 0 .5px #474747;
}

.business-calendars-manage[open] .manage-contact-lists__caret {
  transform: rotate(180deg);
}

.business-calendars-manage:not([open]) .manage-contact-lists__menu {
  display: none;
}

/* Calendar views intentionally reuse the Contact List Table/Board button geometry. */
.contact-list-create-drawer__view-type.business-calendar-editor__view-type
  button .business-calendar-view-icon--daily {
  width: 11.2px;
  height: auto;
}

.business-calendar-editor__view-type .business-calendar-view-icon--weekly {
  width: 22px;
  height: auto;
}

.business-calendar-editor__view-type .business-calendar-view-icon--monthly {
  width: 17px;
  height: 17px;
}

.business-calendar-sharing {
  top: -166px;
}

.business-calendar-sharing__members {
  display: grid;
  gap: 5px;
}

.business-calendar-sharing__member {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px;
  gap: 6px;
  align-items: center;
}

.business-calendar-sharing__member > button {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 10px;
  gap: 6px;
  align-items: center;
  min-height: 29px;
  padding: 4px 6px;
  color: var(--ink);
  font: inherit;
  font-size: 10px;
  text-align: left;
  background: #fff;
  border: 0;
  border-radius: 4px;
}

.business-calendar-sharing__member > button > span:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-calendar-sharing__member > button .contact-list-sharing__member-check {
  opacity: 0;
}

.business-calendar-sharing__member > button[aria-pressed="true"] {
  background: var(--pale-lime);
}

.business-calendar-sharing__member > button[aria-pressed="true"] .contact-list-sharing__member-check {
  opacity: 1;
}

.business-calendar-sharing__member > button:hover,
.business-calendar-sharing__member > button:focus-visible {
  background: var(--blue);
  outline: none;
}

.business-calendar-sharing__avatar {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  font-size: 6px;
  font-weight: 700;
  background: #d2d2d0;
  border-radius: 50%;
}

.business-calendar-sharing__member .contact-list-sharing__member-permission-control {
  width: 70px;
}

@media (prefers-reduced-motion: reduce) {
  .business-calendars-shared-viewer.is-active::after { animation: none; }
}

.business-calendars-manage__group-divider {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 7px 3px;
  color: #666;
  font-size: 8.4px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.business-calendars-manage__group-divider::after {
  flex: 1 1 auto;
  height: .75px;
  content: "";
  background: #aaa;
}

.business-calendars-schedule .contact-create-menu__label {
  min-width: 125px;
}

.business-calendars-toolbar {
  display: grid;
  grid-template-areas:
    "controls search"
    "switches chips"
    "switches navigation";
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: minmax(29px, auto) 22px 26px;
  align-items: start;
  gap: 0 12px;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 98px;
  padding: 1px 11px 5px 18px;
}

.business-calendars-toolbar__controls {
  grid-area: controls;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.business-calendars-appointments-context {
  display: grid;
  gap: 7px;
  padding: 4px 12px 8px;
}

.business-calendars-appointments-context h3 {
  margin: 0;
  color: var(--ink);
  font-size: 11px;
  font-weight: 500;
}

.business-calendars-appointments-context .business-calendars-toolbar__controls {
  grid-area: auto;
}

.business-calendars-compact-button,
.business-calendars-week-navigation button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 0 10px;
  color: var(--ink);
  font: inherit;
  font-size: 10px;
  white-space: nowrap;
  background: #fff;
  border: .5px solid #999;
  border-radius: 3px;
}

.business-calendars-toolbar__search {
  grid-area: search;
  justify-self: end;
}

.business-calendars-toolbar__search .list-search {
  width: 190px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}

.business-calendars-toolbar__search .list-search__icon {
  flex-basis: 22px;
  height: 21px;
  border-color: #777;
  border-radius: 7px 0 0 7px;
}

.business-calendars-toolbar__search .list-search input {
  height: 21px;
  font-size: 10px;
  border-color: #777;
  border-radius: 0 7px 7px 0;
}

.business-calendars-toolbar__switches {
  grid-area: switches;
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 14px;
  padding-top: 2px;
  transform: translateY(-15px);
}

.business-calendars-switch.contact-list-drawer__switch-row {
  justify-content: flex-start;
  flex: 0 0 auto;
  gap: 8px;
  min-height: 20px;
  padding: 1px 0;
  font-size: 10px;
  white-space: nowrap;
}

.business-calendars-switch .contact-list-switch {
  order: 2;
}

.business-calendars-filter-chips.filter-chip-strip {
  grid-area: chips;
  justify-self: end;
  width: auto;
  margin: 0;
  transform: translateY(-10px);
}

.business-calendars-filter-chips .filter-chip-row {
  gap: 7px;
  max-width: 100%;
}

.business-calendars-filter-chips .filter-chip {
  min-width: 0;
  max-width: 190px;
}

.business-calendars-filter-chips .filter-chip__toggle {
  min-width: 0;
}

.business-calendars-filter-chips .filter-chip strong {
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

.business-calendars-week-navigation {
  grid-area: navigation;
  display: flex;
  justify-self: end;
  align-self: end;
}

.business-calendars-week-navigation button {
  width: 35px;
  padding: 0;
  border-radius: 3px 0 0 3px;
}

.business-calendars-week-navigation button + button {
  margin-left: -.5px;
  border-radius: 0 3px 3px 0;
}

.business-calendars-week-navigation .icon {
  width: 6px;
  height: 5px;
}

.business-calendars-week-navigation__previous {
  transform: rotate(90deg);
}

.business-calendars-week-navigation__next {
  transform: rotate(-90deg);
}

.business-calendars-select.contact-create-field {
  min-width: 0;
  margin: 0;
}

.business-calendars-select .contact-create-multiselect__toggle {
  height: 20px;
  padding: 1px 6px;
  font-size: 10px;
  border-color: #999;
  border-radius: 3px;
}

.business-calendars-select .contact-create-multiselect__toggle:focus-visible,
.business-calendars-compact-button:focus-visible,
.business-calendars-week-navigation button:focus-visible {
  background: var(--blue);
  outline: none;
  box-shadow: none;
}

.business-calendars-select .contact-create-multiselect__caret {
  width: 6px;
  height: 4px;
}

.business-calendars-select .import-data-select__menu {
  min-width: max(100%, 125px);
  max-height: 180px;
}

.business-calendars-select .contact-create-single-select__menu [role="option"] {
  min-height: 25px;
  font-size: 10px;
}

.business-calendars-select--events {
  flex: 0 0 93px;
  width: 93px;
}

.business-calendars-select--view {
  flex: 0 0 63px;
  width: 63px;
}

.business-calendars-select--tasks {
  flex: 0 0 64px;
  width: 64px;
}

.business-calendars-select--associations {
  flex: 0 0 88px;
  width: 88px;
}

.business-calendars-time-zone-label {
  margin-left: 2px;
  font-size: 10px;
  white-space: nowrap;
}

.business-calendars-select--timeZone {
  flex: 1 1 110px;
  width: 110px;
  min-width: 0;
  max-width: 230px;
}

.business-calendars-select--timeZone .contact-create-multiselect__toggle {
  justify-content: flex-start;
  gap: 5px;
  width: 100%;
  max-width: 100%;
  padding-right: 2px;
  padding-left: 2px;
  border-color: transparent;
  background: transparent;
}

.business-calendars-select--timeZone .contact-create-multiselect__toggle > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-calendars-select--timeZone .import-data-select__menu {
  width: 230px;
}

.business-calendars-week-shell {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding: 0 8px 13px 0;
}

.business-calendars-events-below {
  position: absolute;
  z-index: 30;
  bottom: 20px;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 25px;
  padding: 4px 9px;
  color: #111;
  font: inherit;
  font-size: 9.6px;
  line-height: 1;
  background: rgb(255 255 255 / 88%);
  border: .5px solid #888;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 16%);
  transform: translateX(-50%);
  cursor: pointer;
}

.business-calendars-events-above {
  position: absolute;
  z-index: 30;
  top: 64px;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 25px;
  padding: 4px 9px;
  color: #111;
  font: inherit;
  font-size: 9.6px;
  line-height: 1;
  background: rgb(255 255 255 / 88%);
  border: .5px solid #888;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 16%);
  transform: translateX(-50%);
  cursor: pointer;
}

.business-calendars-events-below[hidden],
.business-calendars-events-above[hidden] { display: none; }

.business-calendars-events-below__chevron {
  width: 8px;
  height: 5px;
  flex: 0 0 auto;
}

.business-calendars-events-above__chevron {
  width: 8px;
  height: 5px;
  flex: 0 0 auto;
  transform: rotate(180deg);
}

.business-calendars-events-below:hover,
.business-calendars-events-below:focus-visible,
.business-calendars-events-above:hover,
.business-calendars-events-above:focus-visible {
  background: var(--blue);
  outline: none;
  box-shadow: none;
}

.business-calendars-week-scroll {
  width: 100%;
  height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.business-calendars-week-scroll::-webkit-scrollbar,
.business-calendars-day-scroll::-webkit-scrollbar,
.business-calendars-month-scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.business-calendars-week-scroll:focus-visible {
  outline: none;
}

.business-calendars-month-scroll,
.business-calendars-day-scroll {
  width: 100%;
  height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.business-calendars-calendar-horizontal-scrollbar {
  position: absolute;
  z-index: 31;
  right: 8px;
  bottom: 0;
  left: 0;
  width: auto;
  height: 13px;
}

.business-calendars-calendar-horizontal-scrollbar .scrollbar-ui__handle--horizontal {
  top: 3px;
  right: auto;
  left: 0;
  width: 56px;
  height: 6px;
  transform: translateX(var(--scrollbar-handle-offset));
}

.business-calendars-calendar-horizontal-scrollbar .scrollbar-ui__handle-image {
  display: block;
  width: 6px;
  height: 56px;
  max-width: none;
  transform: translateY(6px) rotate(-90deg);
  transform-origin: top left;
  pointer-events: none;
  user-select: none;
}

.business-calendars-calendar-vertical-scrollbar {
  position: absolute;
  z-index: 31;
  top: 0;
  right: 0;
  bottom: 13px;
  width: 8px;
}

.business-calendars-calendar-vertical-scrollbar .scrollbar-ui__handle {
  right: 1px;
}

.business-calendars-month-scroll:focus-visible,
.business-calendars-day-scroll:focus-visible {
  outline: none;
}

.business-calendars-month-table {
  width: 100%;
  min-width: calc(744px * var(--business-calendar-cell-width-scale, 1));
  height: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--ink);
}

.business-calendars-month-table th {
  height: 40.8px;
  padding: 0 9.6px;
  font-size: 10.8px;
  font-weight: 600;
  text-align: center;
  background: #fff;
  border-bottom: .5px solid #aaa;
}

.business-calendars-month-table td {
  position: relative;
  height: calc(105.6px * var(--business-calendar-cell-scale, 1));
  padding: 8.4px 7.2px 6px;
  vertical-align: top;
  background: #fff;
  border-right: .5px solid #bbb;
  border-bottom: .5px solid #bbb;
}

.business-calendars-month-table tr td:first-child {
  border-left: .5px solid #bbb;
}

.business-calendars-month-table td > time {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: 0 auto 3.6px;
  font-size: 12px;
  border-radius: 50%;
}

.business-calendars-month-table td.is-today {
  background: #f3f4f4;
}

.business-calendars-month-table td.is-today > time,
.business-calendars-day-table time.is-today {
  color: #fff;
  background: var(--blue-dark, #3986b9);
}

.business-calendars-month-table td.is-outside-month > time {
  color: #999;
}

.business-calendars-month-table__items {
  display: grid;
  gap: 2.4px;
}

.business-calendars-month-event,
.business-calendars-month-more {
  display: block;
  min-width: 0;
  padding: 2.4px 4.8px;
  overflow: hidden;
  font-size: 9.6px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 2px;
}

.business-calendars-month-event {
  background: var(--blue);
  border-left: 2px solid var(--ink);
}

.business-calendars-month-table td.has-availability {
  background: #d8f1da;
}

.business-calendars-month-more {
  color: var(--muted);
  font-family: inherit;
  font-size: 9.6px;
  line-height: 1.2;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.business-calendars-month-more:hover,
.business-calendars-month-more:focus-visible {
  color: #111;
  background: rgb(255 255 255 / 65%);
  outline: none;
}

.business-calendars-month-more-popover {
  z-index: 120;
  width: 240px;
}

.business-calendars-month-more-popover__body {
  display: grid;
  gap: 5px;
  max-height: 180px;
  padding: 6px;
  overflow-y: auto;
  background: #fafafa;
  scrollbar-width: none;
}

.business-calendars-month-more-popover__body::-webkit-scrollbar {
  display: none;
}

.business-calendars-month-more-popover__body > button {
  display: grid;
  gap: 2px;
  width: 100%;
  min-width: 0;
  padding: 5px 7px;
  color: #111;
  font: inherit;
  font-size: 9.6px;
  line-height: 1.2;
  text-align: left;
  background: var(--blue);
  border: 0;
  border-left: 2px solid #111;
  border-radius: 3px;
  cursor: pointer;
}

.business-calendars-month-more-popover__body > button:hover,
.business-calendars-month-more-popover__body > button:focus-visible {
  background: var(--blue-strong);
  outline: none;
}

.business-calendars-month-more-popover__body strong,
.business-calendars-month-more-popover__body time {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-calendars-month-more-popover__body time {
  color: #555;
  font-size: 8.4px;
}

.business-calendars-day-table {
  width: 100%;
  min-width: calc(648px * var(--business-calendar-cell-width-scale, 1));
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--ink);
  font-size: 10.8px;
}

.business-calendars-day-table thead {
  position: sticky;
  z-index: 110;
  top: 0;
}

.business-calendars-day-table thead th:not(.business-calendars-day-table__time) {
  height: 58.8px;
  background: #fff;
  border-bottom: .5px solid #aaa;
}

.business-calendars-day-table thead th > span {
  margin-right: 4.8px;
  font-weight: 600;
}

.business-calendars-day-table thead time {
  display: inline-grid;
  place-items: center;
  width: 26.4px;
  height: 26.4px;
  border-radius: 50%;
}

.business-calendars-day-table th,
.business-calendars-day-table td {
  padding: 0;
  font-weight: 400;
}

.business-calendars-day-table tbody td {
  position: relative;
  height: calc(120px * var(--business-calendar-cell-scale, 1));
  overflow: hidden;
  vertical-align: top;
  background: #fff;
  border-bottom: .5px solid #bbb;
  border-left: .5px solid #bbb;
}

.business-calendars-week-shell.has-detailed-appointments
  :is(.business-calendars-week-table, .business-calendars-day-table) tbody td {
  height: max(calc(120px * var(--business-calendar-cell-scale, 1)), 104.4px);
}

.business-calendars-week-table tbody td.has-current-time-start,
.business-calendars-day-table tbody td.has-current-time-start {
  overflow: visible;
}

.business-calendars-day-table__time {
  position: sticky;
  z-index: 3;
  left: 0;
  width: 81.6px;
  min-width: 81.6px;
  padding-right: 16.8px !important;
  text-align: right;
  white-space: nowrap;
  background: #fff;
}

.business-calendars-day-table thead .business-calendars-day-table__time {
  z-index: 111;
  height: 58.8px;
}

.business-calendars-now-line {
  position: absolute;
  z-index: 108;
  top: var(--now-position);
  right: 0;
  left: 0;
  height: 1px;
  opacity: .8;
  background: #5f98bc;
  pointer-events: none;
}

.business-calendars-now-line--start::before {
  position: absolute;
  top: -4.3px;
  left: -4.8px;
  width: 9.6px;
  height: 9.6px;
  content: "";
  background: #5f98bc;
  border-radius: 50%;
}

.business-calendars-week-table {
  width: 100%;
  min-width: calc(970px * var(--business-calendar-cell-width-scale, 1));
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--ink);
  font-size: 10.8px;
}

.business-calendars-week-table thead {
  position: sticky;
  z-index: 110;
  top: 0;
}

.business-calendars-week-table th,
.business-calendars-week-table td {
  padding: 0;
  font-weight: 400;
}

.business-calendars-week-table thead th:not(.business-calendars-week-table__time) {
  height: 58.8px;
  background: #fff;
  border-top: .5px solid #aaa;
  border-right: .5px solid #aaa;
  border-bottom: .5px solid #aaa;
}

.business-calendars-week-table thead th:nth-child(2),
.business-calendars-week-table tbody td:first-of-type {
  border-left: .5px solid #aaa;
}

.business-calendars-week-table abbr {
  display: block;
  text-decoration: none;
}

.business-calendars-week-table__date {
  display: block;
  margin-bottom: 4.8px;
  color: var(--muted);
  font-size: 9.6px;
  line-height: 1;
}

.business-calendars-week-table tbody td {
  position: relative;
  height: calc(120px * var(--business-calendar-cell-scale, 1));
  overflow: hidden;
  vertical-align: top;
  background: #fff;
  border-right: .5px solid #bbb;
  border-bottom: .5px solid #bbb;
}

.business-calendars-week-table td.has-availability,
.business-calendars-day-table td.has-availability {
  background: linear-gradient(
    to bottom,
    #fff 0,
    #fff var(--working-hours-start),
    #d8f1da var(--working-hours-start),
    #d8f1da var(--working-hours-end),
    #fff var(--working-hours-end),
    #fff 100%
  );
}

.business-calendars-week-table td.has-working-hours-boundary::before,
.business-calendars-day-table td.has-working-hours-boundary::before {
  position: absolute;
  z-index: 1;
  top: var(--working-hours-start);
  right: 0;
  left: 0;
  height: 1px;
  content: "";
  background: #9fdfa6;
  pointer-events: none;
}

.business-calendars-week-table td.has-working-hours-boundary.is-boundary-end::after,
.business-calendars-day-table td.has-working-hours-boundary.is-boundary-end::after {
  position: absolute;
  z-index: 2;
  top: calc(var(--working-hours-start) - 4px);
  right: -4px;
  width: 8px;
  height: 8px;
  content: "";
  background: #9fdfa6;
  border-radius: 50%;
  pointer-events: none;
}

.business-calendars-week-table td.has-working-hours-boundary.is-boundary-end,
.business-calendars-day-table td.has-working-hours-boundary.is-boundary-end {
  overflow: visible;
}

.business-calendars-week-table .is-filtered-date {
  background: #f5f5f3 !important;
  color: #888;
}

.business-calendars-event-block {
  position: absolute;
  z-index: var(--event-stack-z, 2);
  top: calc(var(--event-start) + 1px);
  right: 6px;
  bottom: calc(100% - var(--event-end) + 1px);
  left: 6px;
  transform: translateY(var(--event-stack-top, 0px));
  min-height: 2.4px;
  padding: 2.4px 4.8px;
  overflow: hidden;
  font-size: 10.8px;
  line-height: 1.3;
  background: var(--blue);
  border-left: 3px solid var(--ink);
}

.business-calendars-event-block.is-start {
  border-radius: 3px 3px 0 0;
}

.business-calendars-event-block__title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-calendars-event-block__details {
  display: none;
  margin-top: 2px;
  font-size: 9.6px;
  white-space: nowrap;
}

.business-calendars-week-table td.has-task-card,
.business-calendars-day-table td.has-task-card {
  overflow: visible;
}

.business-calendars-week-table td.has-calendar-draft-preview,
.business-calendars-day-table td.has-calendar-draft-preview {
  overflow: visible;
}

.business-calendars-draft-preview {
  position: absolute;
  z-index: 105;
  top: var(--draft-start);
  right: calc(20% + 6px);
  left: 6px;
  height: max(24px, var(--draft-duration));
  padding: 6px 7px;
  overflow: hidden;
  color: #17384c;
  font-size: 8.5px;
  line-height: 1.15;
  background: rgb(217 238 251 / 88%);
  border: 1px dashed #5f98bc;
  border-radius: 7px;
  box-shadow: 0 2px 6px rgb(0 0 0 / 14%);
  pointer-events: none;
}

.business-calendars-draft-preview strong,
.business-calendars-draft-preview span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-calendars-draft-preview strong {
  margin-bottom: 3px;
  font-size: 9px;
}

.business-calendars-slot-scroll {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.business-calendars-slot-scroll::-webkit-scrollbar {
  display: none;
  width: 0;
}

.business-calendars-slot-scroll:focus-visible {
  outline: none;
}

.business-calendars-slot-scroll.has-grid-popout ~
:is(.business-calendars-slot-scrollbar, .business-calendars-slot-more) {
  visibility: hidden;
}

.business-calendars-slot-scrollbar {
  position: absolute;
  z-index: 104;
  top: 3px;
  right: 1px;
  bottom: 3px;
  width: 6px;
}

.business-calendars-slot-scrollbar .scrollbar-ui__handle {
  right: 0;
  width: 4px;
  height: 28px;
}

.business-calendars-slot-more {
  position: absolute;
  z-index: 105;
  right: 9px;
  bottom: 2px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 14px;
  padding: 2px 5px;
  color: #111;
  font: inherit;
  font-size: 7.5px;
  line-height: 1;
  background: rgb(255 255 255 / 88%);
  border: .5px solid #888;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 14%);
  cursor: pointer;
}

.business-calendars-slot-more[hidden] {
  display: none;
}

.business-calendars-slot-more__chevron {
  flex: 0 0 auto;
  width: 6px;
  height: 4px;
}

.business-calendars-slot-more:hover,
.business-calendars-slot-more:focus-visible {
  background: var(--blue);
  outline: none;
  box-shadow: none;
}

.business-calendars-hour-expand {
  position: relative;
  z-index: 107;
  top: 3px;
  right: 8px;
  float: right;
  display: grid;
  place-items: center;
  width: 17.6px;
  height: 17.6px;
  padding: 3px;
  color: #111;
  background: #dceeff;
  border: 1px solid #a9a9a9;
  border-radius: 4.8px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 12%);
  cursor: pointer;
}

.business-calendars-hour-expand .icon {
  width: 9.6px;
  height: 9.6px;
}

.business-calendars-hour-expand:hover,
.business-calendars-hour-expand:focus-visible {
  background: #cce6fb;
  outline: none;
  border-color: #739bb6;
}

.business-calendar-hour-dialog {
  width: min(1000px, calc(100vw - 40px));
  max-width: none;
  max-height: calc(100dvh - 40px);
  padding: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
}

.business-calendar-hour-dialog::backdrop {
  background: rgb(0 0 0 / 18%);
  backdrop-filter: blur(2px);
}

.business-calendar-hour-dialog__surface {
  overflow: hidden;
  background: #fff;
  border: 1px solid #aaa;
  border-radius: 14px;
  box-shadow: 0 8px 26px rgb(0 0 0 / 22%);
}

.business-calendar-hour-dialog .pragtical-dialog-titlebar {
  min-height: 42px;
  padding: 8px 14px 8px 18px;
  background: rgb(255 255 255 / 94%);
}

.business-calendar-hour-dialog .pragtical-dialog-titlebar h2 {
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-calendar-hour-dialog__day {
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  background: #fff;
  border-bottom: 1px solid #aaa;
}

.business-calendar-hour-dialog__timeline {
  max-height: calc(100dvh - 150px);
  overflow: auto;
  background: #d8f1da;
}

.business-calendar-hour-dialog__quarter {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  min-height: 126px;
  border-bottom: 1px solid rgb(0 0 0 / 12%);
}

.business-calendar-hour-dialog__quarter:last-child {
  border-bottom: 0;
}

.business-calendar-hour-dialog__quarter > time {
  padding: 14px 18px;
  font-size: 13px;
  background: rgb(255 255 255 / 88%);
  border-right: 1px solid #aaa;
}

.business-calendar-hour-dialog__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  align-content: start;
  padding: 10px;
}

.business-calendar-hour-dialog__card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 104px;
  overflow: hidden;
  background: rgb(255 255 255 / 88%);
  border-top: 1.5px solid #111;
  border-bottom: 1.5px solid #111;
  border-radius: 9px;
  box-shadow: 0 2px 5px rgb(0 0 0 / 14%);
}

.business-calendar-hour-dialog__card-main {
  display: flex;
  align-items: flex-start;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 10px 10px 34px;
  color: #111;
  font: inherit;
  font-size: 10px;
  line-height: 1.2;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.business-calendar-hour-dialog__card-main:hover,
.business-calendar-hour-dialog__card-main:focus-visible {
  background: rgb(220 238 255 / 45%);
  outline: none;
}

.business-calendar-hour-dialog__card-main strong {
  font-size: 11px;
  line-height: 1.2;
}

.business-calendar-hour-dialog__meeting-location {
  overflow: hidden;
  font-size: 9.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-calendar-hour-dialog__status {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: 2px 6px;
  color: #285c32;
  font-size: 1em;
  line-height: 1.2;
  background: #d8f1da;
  border: 0;
  border-radius: 999px;
  isolation: isolate;
}

.business-calendar-hour-dialog__status::after {
  position: absolute;
  inset: -3px;
  z-index: -1;
  content: "";
  background: rgb(112 211 133 / 36%);
  border-radius: inherit;
  animation: business-calendar-viewer-pulse 1.8s ease-out infinite;
}

.business-calendar-hour-dialog__people {
  display: inline-flex;
  align-items: center;
  margin-top: 3px;
}

.business-calendar-hour-dialog__people > span {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: 7.5px;
  font-weight: 700;
  background: #d7d7d5;
  border-radius: 50%;
}

.business-calendar-hour-dialog__people > span + span {
  margin-left: -5px;
  background: #ededeb;
}

.business-calendar-hour-dialog__details {
  position: absolute;
  right: 10px;
  bottom: 9px;
  padding: 0;
  color: #111;
  font: inherit;
  font-size: 9px;
  text-decoration: underline;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.business-calendar-hour-dialog__empty {
  align-self: center;
  color: #727272;
  font-size: 10px;
}

@media (max-width: 720px) {
  .business-calendar-hour-dialog__quarter {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .business-calendar-hour-dialog__cards {
    grid-template-columns: 1fr;
  }
}

.business-calendars-task-card {
  position: absolute;
  z-index: var(--event-stack-z, 5);
  top: calc(var(--task-start) + 1px);
  right: 6px;
  left: 6px;
  transform: translateY(var(--event-stack-top, 0px));
  height: 26px;
  min-height: 26px;
  padding: 5px 8.4px;
  overflow: hidden;
  color: #111;
  line-height: 1.15;
  background: rgb(255 255 255 / 50%);
  border-top: 1.5px solid #111;
  border-bottom: 1.5px solid #111;
  border-radius: 5px;
  box-shadow: none;
}

.business-calendars-event-block[data-business-calendars-stacked],
.business-calendars-task-card[data-business-calendars-stacked] {
  cursor: pointer;
  transition: transform 160ms ease-out;
}

.business-calendars-task-card[data-business-calendars-stacked] {
  background-color: var(--stack-surface, rgb(255 255 255 / var(--event-stack-opacity, 68%)));
}

.business-calendars-task-card[data-business-calendars-stacked][data-business-calendars-stack^="1-of-"],
.business-calendars-task-card[data-business-calendars-stacked][data-business-calendars-stack^="3-of-"] {
  --stack-surface: #ededed;
  background-color: #ededed;
}

.business-calendars-task-card[data-business-calendars-stacked][data-business-calendars-stack-top] {
  --stack-shadow: 0 3px 7px rgb(0 0 0 / 16%);
  --stack-surface: #fff;
  background-color: #fff;
  box-shadow: var(--stack-shadow);
}

.business-calendars-grid-popout-placeholder {
  position: absolute;
  top: calc(var(--task-start) + 1px);
  right: 6px;
  left: 6px;
  height: 26px;
  transform: translateY(var(--event-stack-top, 0px));
  visibility: hidden;
  pointer-events: none;
}

.business-calendars-task-card:hover,
.business-calendars-task-card:focus,
.business-calendars-task-card:focus-within,
.business-calendars-task-card.is-grid-popout,
.business-calendars-task-card.is-detail-open,
.business-calendars-task-card.is-stack-front {
  z-index: 101;
  height: var(--task-height);
  min-height: 98.4px;
  padding: 8.4px 8.4px 32.4px;
  overflow: hidden;
  transform: translateY(var(--event-stack-top, 0px));
  background-color: #fff;
  border-radius: 10.8px;
  box-shadow: none;
}

.business-calendars-event-block[data-business-calendars-stacked]:hover,
.business-calendars-event-block[data-business-calendars-stacked]:focus,
.business-calendars-event-block[data-business-calendars-stacked].is-stack-front,
.business-calendars-task-card[data-business-calendars-stacked]:hover,
.business-calendars-task-card[data-business-calendars-stacked]:focus,
.business-calendars-task-card[data-business-calendars-stacked]:focus-within,
.business-calendars-task-card[data-business-calendars-stacked].is-stack-front {
  z-index: 100;
  right: 6px;
  left: 6px;
  transform: translateY(var(--event-stack-top, 0px));
  background-color: #fff;
  box-shadow: 0 4px 12px rgb(0 0 0 / 22%);
}

.business-calendars-task-card[data-business-calendars-stacked]:hover,
.business-calendars-task-card[data-business-calendars-stacked]:focus,
.business-calendars-task-card[data-business-calendars-stacked]:focus-within,
.business-calendars-task-card[data-business-calendars-stacked].is-stack-front {
  box-shadow: 0 3px 7px rgb(0 0 0 / 16%);
}

.business-calendars-event-block[data-business-calendars-stacked]:is(:hover, :focus),
.business-calendars-task-card[data-business-calendars-stacked]:is(:hover, :focus, :focus-within) {
  transform: translateY(calc(var(--event-stack-top, 0px) - 8px));
}

.business-calendars-event-block[data-business-calendars-stacked]:hover,
.business-calendars-event-block[data-business-calendars-stacked]:focus,
.business-calendars-event-block[data-business-calendars-stacked].is-stack-front {
  min-height: 34px;
  overflow: visible;
}

.business-calendars-event-block[data-business-calendars-stacked]:hover .business-calendars-event-block__details,
.business-calendars-event-block[data-business-calendars-stacked]:focus .business-calendars-event-block__details,
.business-calendars-event-block[data-business-calendars-stacked].is-stack-front .business-calendars-event-block__details {
  display: block;
}

.business-calendars-task-card strong,
.business-calendars-task-card time,
.business-calendars-task-card__contact,
.business-calendars-task-card__assigned {
  display: block;
}

.business-calendars-task-card time,
.business-calendars-task-card__contact,
.business-calendars-task-card__assigned,
.business-calendars-task-card__footer {
  display: none;
}

.business-calendars-task-card:hover :is(
  time,
  .business-calendars-task-card__contact,
  .business-calendars-task-card__assigned
),
.business-calendars-task-card:focus :is(
  time,
  .business-calendars-task-card__contact,
  .business-calendars-task-card__assigned
),
.business-calendars-task-card:focus-within :is(
  time,
  .business-calendars-task-card__contact,
  .business-calendars-task-card__assigned
),
.business-calendars-task-card.is-detail-open :is(
  time,
  .business-calendars-task-card__contact,
  .business-calendars-task-card__assigned
),
.business-calendars-task-card.is-grid-popout :is(
  time,
  .business-calendars-task-card__contact,
  .business-calendars-task-card__assigned
),
.business-calendars-task-card.is-stack-front :is(
  time,
  .business-calendars-task-card__contact,
  .business-calendars-task-card__assigned
) {
  display: block;
}

.business-calendars-appointment-card__meeting-location {
  display: none;
}

.business-calendars-appointment-card:is(
  :hover,
  :focus,
  :focus-within,
  .is-detail-open,
  .is-grid-popout,
  .is-stack-front
) .business-calendars-appointment-card__meeting-location {
  display: block;
}

.business-calendars-task-card strong {
  max-height: 1.15em;
  margin-bottom: 0;
  overflow: hidden;
  font-size: 10.8px;
  font-weight: 600;
}

.business-calendars-task-card:hover strong,
.business-calendars-task-card:focus strong,
.business-calendars-task-card:focus-within strong,
.business-calendars-task-card.is-grid-popout strong,
.business-calendars-task-card.is-detail-open strong,
.business-calendars-task-card.is-stack-front strong {
  max-height: 2.3em;
  margin-bottom: 4.8px;
}

.business-calendars-appointment-card strong {
  max-height: 1.15em;
}

.business-calendars-appointment-card:hover,
.business-calendars-appointment-card:focus,
.business-calendars-appointment-card:focus-within,
.business-calendars-appointment-card.is-grid-popout,
.business-calendars-appointment-card.is-detail-open,
.business-calendars-appointment-card.is-stack-front {
  height: auto;
  min-height: var(--task-height);
  padding-bottom: 8.4px;
}

.business-calendars-appointment-card__associations {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin-top: 6px;
}

.business-calendars-appointment-card__association-list {
  display: inline-flex;
  align-items: center;
}

.business-calendars-appointment-card__association {
  display: inline-grid;
  place-items: center;
  width: 20.4px;
  height: 20.4px;
  color: #111;
  font-size: 7.2px;
  font-weight: 700;
  letter-spacing: .25px;
  line-height: 1;
  background: #d7d7d5;
  border-radius: 50%;
}

.business-calendars-appointment-card__association +
.business-calendars-appointment-card__association {
  margin-left: -4.8px;
  background: #ededeb;
}

.business-calendars-appointment-card [data-business-calendars-appointment-details] {
  flex: 0 0 auto;
  font-size: 9px;
}

.business-calendars-appointment-card__compact-title {
  display: grid;
  overflow: hidden;
  line-height: 1.12;
}

.business-calendars-appointment-card__compact-title > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-calendars-appointment-card__full-title {
  display: none;
}

.business-calendars-appointment-card:hover strong,
.business-calendars-appointment-card:focus strong,
.business-calendars-appointment-card:focus-within strong,
.business-calendars-appointment-card.is-grid-popout strong,
.business-calendars-appointment-card.is-detail-open strong,
.business-calendars-appointment-card.is-stack-front strong {
  max-height: 4.6em;
}

.business-calendars-appointment-card:hover .business-calendars-appointment-card__compact-title,
.business-calendars-appointment-card:focus .business-calendars-appointment-card__compact-title,
.business-calendars-appointment-card:focus-within .business-calendars-appointment-card__compact-title,
.business-calendars-appointment-card.is-grid-popout .business-calendars-appointment-card__compact-title,
.business-calendars-appointment-card.is-detail-open .business-calendars-appointment-card__compact-title,
.business-calendars-appointment-card.is-stack-front .business-calendars-appointment-card__compact-title {
  display: none;
}

.business-calendars-appointment-card:hover .business-calendars-appointment-card__full-title,
.business-calendars-appointment-card:focus .business-calendars-appointment-card__full-title,
.business-calendars-appointment-card:focus-within .business-calendars-appointment-card__full-title,
.business-calendars-appointment-card.is-grid-popout .business-calendars-appointment-card__full-title,
.business-calendars-appointment-card.is-detail-open .business-calendars-appointment-card__full-title,
.business-calendars-appointment-card.is-stack-front .business-calendars-appointment-card__full-title {
  display: block;
}

.business-calendars-appointment-card:hover .business-calendars-appointment-card__associations,
.business-calendars-appointment-card:focus .business-calendars-appointment-card__associations,
.business-calendars-appointment-card:focus-within .business-calendars-appointment-card__associations,
.business-calendars-appointment-card.is-grid-popout .business-calendars-appointment-card__associations,
.business-calendars-appointment-card.is-detail-open .business-calendars-appointment-card__associations,
.business-calendars-appointment-card.is-stack-front .business-calendars-appointment-card__associations {
  display: flex;
}

.business-calendars-task-card time,
.business-calendars-task-card__contact,
.business-calendars-task-card__assigned {
  overflow: hidden;
  font-size: 10.08px;
  text-overflow: ellipsis;
}

.business-calendars-task-card__contact {
  margin-top: 2.4px;
  color: #444;
  white-space: nowrap;
}

.business-calendars-appointment-card__meeting-location {
  margin-bottom: 2.4px;
  overflow: hidden;
  color: #444;
  font-size: 10.08px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-calendars-task-card__assigned {
  max-height: 2.3em;
  margin-top: 2.4px;
  color: #444;
}

.business-calendars-task-card__contact b,
.business-calendars-task-card__assigned b {
  color: #111;
  font-weight: 600;
}

.business-calendars-task-card__footer {
  position: absolute;
  right: 7.2px;
  bottom: 6px;
  left: 7.2px;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 4.8px;
}

.business-calendars-task-card:hover .business-calendars-task-card__footer,
.business-calendars-task-card:focus .business-calendars-task-card__footer,
.business-calendars-task-card:focus-within .business-calendars-task-card__footer,
.business-calendars-task-card.is-grid-popout .business-calendars-task-card__footer,
.business-calendars-task-card.is-detail-open .business-calendars-task-card__footer,
.business-calendars-task-card.is-stack-front .business-calendars-task-card__footer {
  display: flex;
}

.business-calendars-task-card__assignee {
  display: inline-grid;
  place-items: center;
  flex: 0 0 20.4px;
  width: 20.4px;
  height: 20.4px;
  color: #111;
  font-size: 7.2px;
  font-weight: 700;
  letter-spacing: .25px;
  line-height: 1;
  text-align: center;
  background: #c9c9c7;
  border: 0;
  border-radius: 50%;
}

.business-calendars-task-card__assignees {
  display: inline-flex;
  align-items: center;
}

.business-calendars-task-card__assignee + .business-calendars-task-card__assignee {
  margin-left: -4.8px;
  background: #e7e7e4;
}

.business-calendars-task-card button {
  min-width: 0;
  padding: 0;
  overflow: hidden;
  color: #111;
  font: inherit;
  font-size: 9px;
  line-height: 1.2;
  text-decoration: underline;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.business-calendars-day-card-row {
  position: absolute;
  z-index: 10;
  top: calc(var(--day-card-row-start) + 1px);
  right: 48px;
  left: 6px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  pointer-events: none;
}

.business-calendars-task-card[data-business-calendars-day-card] {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  flex: 0 1 auto;
  min-width: 0;
  width: max-content;
  max-width: 360px;
  transform: none;
  pointer-events: auto;
}

.business-calendars-appointment-card[data-business-calendars-day-card]:is(
  :hover,
  :focus,
  :focus-within,
  .is-grid-popout,
  .is-detail-open,
  .is-stack-front
) {
  height: auto;
  min-height: 0;
  padding-bottom: 10px;
}

.business-calendars-day-card-row > .business-calendars-grid-popout-placeholder {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  flex: 0 0 var(--grid-popout-width);
  width: var(--grid-popout-width);
  transform: none;
}

/* Weekly columns are intentionally denser than the day and expanded-hour
   surfaces, leaving a clear control lane for the hour-expand action. */
.business-calendars-task-card[data-business-calendars-week-card] {
  right: auto;
  width: calc((100% - 12px) * .8);
  height: 20.8px;
  min-height: 20.8px;
  padding: 4px 6.72px;
}

.business-calendars-task-card[data-business-calendars-week-card][data-business-calendars-duration-card] {
  height: var(--task-duration);
  min-height: 20.8px;
}

.business-calendars-appointment-card[data-business-calendars-week-card][data-business-calendars-duration-card] {
  height: var(--task-duration);
  min-height: 20.8px;
}

.business-calendars-task-card[data-business-calendars-week-card][data-business-calendars-duration-card][data-business-calendars-stacked] {
  right: auto;
  left: calc(6px + var(--duration-card-offset));
  width: calc((100% - 12px) * .8 - var(--duration-stack-inset));
  transform: none;
}

.business-calendars-appointment-card[data-business-calendars-week-card][data-business-calendars-duration-card][data-business-calendars-stacked] {
  right: auto;
  left: calc(6px + var(--duration-card-offset));
  width: calc((100% - 12px) * .8 - var(--duration-stack-inset));
  transform: none;
}

.business-calendars-task-card[data-business-calendars-week-card][data-business-calendars-duration-card][data-business-calendars-stacked]:is(
  :hover,
  :focus,
  :focus-within
) {
  transform: translateY(-8px);
}

.business-calendars-task-card[data-business-calendars-week-card]:hover,
.business-calendars-task-card[data-business-calendars-week-card]:focus,
.business-calendars-task-card[data-business-calendars-week-card]:focus-within,
.business-calendars-task-card[data-business-calendars-week-card].is-grid-popout,
.business-calendars-task-card[data-business-calendars-week-card].is-detail-open,
.business-calendars-task-card[data-business-calendars-week-card].is-stack-front {
  height: calc(var(--task-height) * .8);
  min-height: 78.72px;
  padding: 6.72px 6.72px 25.92px;
  border-radius: 8.64px;
}

.business-calendars-appointment-card[data-business-calendars-week-card]:hover,
.business-calendars-appointment-card[data-business-calendars-week-card]:focus,
.business-calendars-appointment-card[data-business-calendars-week-card]:focus-within,
.business-calendars-appointment-card[data-business-calendars-week-card].is-grid-popout,
.business-calendars-appointment-card[data-business-calendars-week-card].is-detail-open,
.business-calendars-appointment-card[data-business-calendars-week-card].is-stack-front {
  height: auto;
  min-height: calc(var(--task-height) * .8);
  padding-bottom: 6.72px;
}

.business-calendars-task-card:not(.business-calendars-appointment-card)[data-business-calendars-week-card][data-business-calendars-duration-card]:not(.is-grid-popout):is(
  :hover,
  :focus,
  :focus-within,
  .is-detail-open,
  .is-stack-front
) {
  height: max(var(--task-duration), calc(var(--task-height) * .8));
}

.business-calendars-task-card[data-business-calendars-week-card] strong {
  font-size: 8.64px;
}

.business-calendars-task-card[data-business-calendars-week-card] :is(
  time,
  .business-calendars-task-card__contact,
  .business-calendars-task-card__assigned
) {
  font-size: 8.064px;
}

.business-calendars-task-card[data-business-calendars-week-card] .business-calendars-appointment-card__association,
.business-calendars-task-card[data-business-calendars-week-card] .business-calendars-task-card__assignee {
  width: 16.32px;
  height: 16.32px;
  font-size: 6px;
}

.business-calendars-task-card[data-business-calendars-week-card] .business-calendars-task-card__assignee {
  flex: 0 0 16.32px;
}

.business-calendars-task-card[data-business-calendars-week-card] button {
  font-size: 7.2px;
}

.business-calendars-task-card:not(.business-calendars-appointment-card)[data-business-calendars-week-card][data-business-calendars-duration-card] {
  padding: 6.72px 6.72px 25.92px;
  background-color: var(--stack-surface, #fff);
  border-radius: 8.64px;
  box-shadow: var(--stack-shadow, none);
}

.business-calendars-task-card:not(.business-calendars-appointment-card)[data-business-calendars-week-card][data-business-calendars-duration-card] strong {
  max-height: 2.3em;
  margin-bottom: 3.84px;
}

.business-calendars-task-card:not(.business-calendars-appointment-card)[data-business-calendars-week-card][data-business-calendars-duration-card]
  :is(time, .business-calendars-task-card__contact, .business-calendars-task-card__assigned) {
  display: block;
}

.business-calendars-task-card:not(.business-calendars-appointment-card)[data-business-calendars-week-card][data-business-calendars-duration-card]
  .business-calendars-task-card__footer {
  display: flex;
}

.business-calendars-appointment-card[data-business-calendars-week-card][data-business-calendars-duration-card] {
  padding: 6.72px 6.72px 25.92px;
  background-color: var(--stack-surface, #fff);
  border-radius: 8.64px;
  box-shadow: var(--stack-shadow, none);
}

.business-calendars-appointment-card[data-business-calendars-week-card][data-business-calendars-duration-card] strong {
  max-height: 2.3em;
  margin-bottom: 3px;
}

.business-calendars-appointment-card[data-business-calendars-week-card][data-business-calendars-duration-card]
  .business-calendars-appointment-card__compact-title {
  display: none;
}

.business-calendars-appointment-card[data-business-calendars-week-card][data-business-calendars-duration-card]
  :is(
    .business-calendars-appointment-card__full-title,
    .business-calendars-appointment-card__meeting-location,
    time
  ) {
  display: block;
}

.business-calendars-appointment-card[data-business-calendars-week-card][data-business-calendars-duration-card]
  .business-calendars-appointment-card__meeting-location {
  font-size: 8.064px;
}

.business-calendars-appointment-card[data-business-calendars-week-card][data-business-calendars-duration-card]
  .business-calendars-appointment-card__associations {
  position: absolute;
  right: 10px;
  bottom: 5px;
  left: 6.72px;
  display: flex;
  flex-direction: row-reverse;
  width: auto;
  margin-top: 0;
}

.business-calendars-appointment-card[data-business-calendars-week-card][data-business-calendars-duration-card]
  [data-business-calendars-appointment-details] {
  display: none;
}

.business-calendars-appointment-card[data-business-calendars-week-card][data-business-calendars-duration-card]
  :is(:hover, :focus, :focus-within) [data-business-calendars-appointment-details] {
  display: inline-block;
}

.business-calendars-task-card.is-grid-popout,
.business-calendars-task-card.is-grid-popout[data-business-calendars-stacked] {
  position: fixed;
  z-index: 106;
  top: var(--grid-popout-top);
  right: auto;
  bottom: auto;
  left: var(--grid-popout-left);
  width: var(--grid-popout-width);
  margin: 0;
  border-right: 0;
  border-left: 0;
  transform: none;
}

.business-calendars-task-card button:hover,
.business-calendars-task-card button:focus-visible {
  text-decoration-thickness: 2px;
  outline: none;
}

.business-calendars-stack-more {
  position: absolute;
  z-index: 120;
  right: 7px;
  bottom: 3px;
  min-height: 19px;
  padding: 2px 7px;
  color: #111;
  font: inherit;
  font-size: 9px;
  background: var(--blue);
  border: .75px solid #888;
  border-radius: 9px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 12%);
}

.business-calendar-stack-dialog {
  width: min(1120px, calc(100vw - 36px));
  max-width: none;
  max-height: calc(100dvh - 36px);
}

.business-calendar-stack-dialog .data-types-action-dialog__body {
  width: 100%;
  max-width: none;
}

.business-calendar-stack-dialog__grid {
  display: grid;
  grid-auto-columns: minmax(210px, 1fr);
  grid-auto-flow: column;
  grid-template-rows: repeat(4, minmax(112px, auto));
  gap: 10px;
  max-height: calc(100dvh - 110px);
  padding: 12px;
  overflow: auto;
}

.business-calendar-stack-dialog__card {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px;
  color: #111;
  font: inherit;
  font-size: 10px;
  line-height: 1.2;
  text-align: left;
  background: #fff;
  border: 1.5px solid #111;
  border-radius: 11px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
}

.business-calendar-stack-dialog__card:hover,
.business-calendar-stack-dialog__card:focus-visible {
  background: #edf4f8;
}

.business-calendar-stack-dialog__card strong {
  font-size: 10.8px;
}

.business-calendar-stack-dialog__card span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.business-calendars-week-table .is-weekend {
  background: #e2e2e2 !important;
}

.business-calendars-week-table .is-holiday,
.business-calendars-day-table .is-holiday,
.business-calendars-month-table .is-holiday {
  background: #e2e2e2 !important;
}

.business-calendars-holiday-label {
  display: block;
  width: max-content;
  max-width: calc(100% - 8px);
  margin: 3px auto 0;
  padding: 1px 5px;
  overflow: hidden;
  color: #555;
  font-size: 8.4px;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  background: #f0f0ee;
  border: .5px solid #aaa;
  border-radius: 8px;
}

.business-calendars-month-table .business-calendars-holiday-label {
  margin-top: 0;
  margin-bottom: 2.4px;
}

.business-calendars-week-table__time {
  position: sticky;
  z-index: 2;
  left: 0;
  width: 81.6px;
  min-width: 81.6px;
  padding-right: 16.8px !important;
  text-align: right;
  white-space: nowrap;
  background: #fff;
}

.business-calendars-week-table thead .business-calendars-week-table__time {
  z-index: 111;
  height: 58.8px;
}

@media (max-width: 1179px) {
  .business-calendars-screen {
    padding-right: 24px;
    padding-left: 24px;
  }

  .business-calendars-layout {
    grid-template-columns: 225px minmax(0, 1fr);
    width: 100%;
    margin-left: 0;
  }

  .business-calendars-toolbar__controls {
    flex-wrap: wrap;
    row-gap: 4px;
    padding-bottom: 4px;
  }
}

@media (max-width: 767px) {
  .business-calendars-screen {
    padding: 24px 16px 18px;
  }

  .business-calendars-layout {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: 0;
    max-height: none;
  }

  .business-calendars-directory {
    max-height: 330px;
  }

  .business-calendars-calendar {
    min-height: 620px;
  }

  .business-calendars-toolbar {
    grid-template-areas:
      "controls controls"
      "switches search"
      "chips navigation";
    grid-template-rows: auto auto 30px;
    gap: 6px 10px;
    padding-bottom: 8px;
  }

  .business-calendars-toolbar__search {
    align-self: center;
  }

  .business-calendars-toolbar__switches {
    padding-top: 0;
    transform: none;
  }

  .business-calendars-filter-chips.filter-chip-strip {
    justify-self: start;
    transform: none;
  }

  .business-calendars-week-shell {
    min-height: 430px;
  }
}

@media (max-width: 430px) {
  .business-calendars-heading__title-row {
    align-items: flex-start;
  }

  .business-calendars-add {
    flex: 1 1 100%;
    width: 100%;
  }

  .business-calendars-add .contact-create-menu__label {
    flex: 1 1 auto;
  }

  .business-calendars-calendar__header {
    align-items: flex-start;
    flex-direction: column;
    height: auto;
    min-height: 69px;
  }

  .business-calendars-calendar__actions {
    justify-content: space-between;
    width: 100%;
  }

  .business-calendars-schedule {
    flex: 1 1 auto;
  }

  .business-calendars-schedule .contact-create-menu__label {
    flex: 1 1 auto;
  }

  .business-calendars-toolbar {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 7px;
    padding-right: 10px;
    padding-left: 10px;
  }

  .business-calendars-toolbar__controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .business-calendars-select--events,
  .business-calendars-select--view,
  .business-calendars-select--tasks,
  .business-calendars-select--associations,
  .business-calendars-select--timeZone {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
  }

  .business-calendars-time-zone-label {
    align-self: center;
    margin-left: 0;
  }

  .business-calendars-toolbar__search .list-search {
    width: 100%;
  }

  .business-calendars-week-navigation {
    align-self: flex-end;
  }
}

/* Project Management: Opportunities board */
.opportunities-workspace {
  overflow: hidden;
  background: #fff;
}

.opportunities-screen {
  height: calc(100dvh - 35px);
  min-height: 0;
  padding: 20px 26px 12px 32px;
  overflow: hidden;
}

.opportunities-page-header {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
}

.opportunities-title-row,
.opportunities-title-group,
.opportunities-page-actions,
.opportunities-toolbar,
.opportunities-filters,
.opportunities-primary-tabs,
.opportunities-view-row,
.opportunities-view-controls,
.opportunities-search,
.opportunities-stage__heading,
.opportunities-stage__summary,
.opportunity-card__collapsed-main,
.opportunity-card__actions {
  display: flex;
  align-items: center;
}

.opportunities-title-row {
  min-height: 27px;
  justify-content: space-between;
  gap: 16px;
}

.opportunities-title-group {
  gap: 13px;
}

.opportunities-title-group h1 {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.2px;
  line-height: 1;
}

.opportunities-count {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px 0 0;
  overflow: hidden;
  font-size: 9.5px;
  line-height: 1;
  white-space: nowrap;
  background: var(--blue-strong);
  border-radius: 6px;
}

.opportunities-count i {
  align-self: stretch;
  width: 10px;
  margin-right: 7px;
  background: #111;
}

.opportunities-page-actions.contact-create-actions {
  position: relative;
  z-index: 30;
  display: flex;
  align-self: flex-start;
  justify-items: initial;
  gap: 0;
  padding: 0;
  overflow: visible;
  transform: none;
}

.opportunities-primary-tabs button,
.opportunities-view-controls button {
  color: #111;
  background: #fff;
  border: .75px solid #aeb0ad;
}

.opportunities-add-menu .contact-create-menu__label {
  min-width: 101px;
}

.opportunities-toolbar {
  position: absolute;
  top: 31px;
  right: 0;
  z-index: 2;
  justify-content: flex-end;
}

.opportunities-filters.contact-create-actions__secondary-row {
  gap: 5px;
  transform: none;
}

.opportunities-filter-strip.filter-chip-strip {
  width: auto;
  margin-left: 0;
  transform: none;
}

.opportunities-manage .manage-categories-button {
  min-width: 150px;
}

.opportunities-primary-tabs {
  align-items: flex-end;
  gap: 12px;
  width: max-content;
  margin-top: 17px;
  padding-bottom: 4px;
}

.opportunities-primary-tabs button {
  position: relative;
  min-width: 96px;
  height: 32px;
  padding: 4px 14px;
  font-size: 10.5px;
  background: var(--pale-lime);
  border-color: #c4c8b5;
  border-radius: 6px;
}

.opportunities-primary-tabs button:nth-child(3) {
  min-width: 132px;
}

.opportunities-primary-tabs button:hover,
.opportunities-primary-tabs button:focus-visible {
  background: #f4ffd0;
}

.opportunities-primary-tabs button.is-active::after {
  position: absolute;
  right: -1px;
  bottom: -4px;
  left: -1px;
  height: 5px;
  content: "";
  background: #111;
  border-radius: 0 0 4px 4px;
}

.opportunities-board-frame {
  --opportunities-frame-stroke: #a7a7a7;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 300px;
  margin-top: 10px;
}

.opportunities-view-row {
  flex: 0 0 40px;
  height: 40px;
  min-width: 0;
  margin: 0;
}

.opportunities-view-row .view-toolbar__primary {
  gap: 16px;
}

.opportunities-view-row .view-toolbar__search-tools {
  margin-right: 0;
}

.opportunities-view-controls.view-config-card {
  flex: 0 0 338px;
  width: 338px;
  gap: 6px;
}

.opportunities-view-controls.view-config-card h2 {
  flex-basis: 98px;
  width: 98px;
}

.opportunities-control-dropdown {
  position: relative;
  z-index: 1;
  min-width: 0;
  transform: translateY(2px);
}

.opportunities-control-dropdown > summary {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-width: 0;
  gap: 6px;
  height: 21px;
  padding: 0 6px;
  font-size: 9px;
  white-space: nowrap;
  background: #fff;
  border: .75px solid #aaa;
  border-radius: 4.8px;
  cursor: pointer;
}

.opportunities-control-dropdown--view {
  flex: 0 0 94px;
  width: 94px;
}

.opportunities-control-dropdown--pipeline {
  flex: 1 1 116px;
}

.opportunities-control-dropdown > summary:hover,
.opportunities-control-dropdown > summary:focus-visible,
.opportunities-control-dropdown[open] > summary {
  background: var(--blue);
  outline: none;
}

.opportunities-control-dropdown > summary .icon:first-child {
  width: 11px;
  height: 10px;
}

.opportunities-view-controls .opportunities-control-caret {
  flex: 0 0 9px;
  width: 9px;
  height: 6px;
  margin-left: auto;
}

.opportunities-control-dropdown[open] .opportunities-control-caret {
  transform: rotate(180deg);
}

.opportunities-control-menu {
  position: absolute;
  z-index: 50;
  top: calc(100% + 3px);
  left: 0;
  display: grid;
  width: max-content;
  min-width: 100%;
  padding: 3px;
  background: #fff;
  border: .75px solid #777;
  border-radius: 5px;
}

.opportunities-control-menu button {
  min-width: 100%;
  min-height: 23px;
  padding: 3px 7px;
  color: #111;
  font: inherit;
  font-size: 9px;
  text-align: left;
  white-space: nowrap;
  background: var(--pale-lime);
  border: 0;
  border-radius: 3px;
}

.opportunities-control-menu button:hover,
.opportunities-control-menu button:focus-visible {
  background: var(--blue);
  outline: none;
}

.opportunities-saved-view-button.view-button {
  width: max-content;
  min-width: 0;
  height: 31px;
  padding-inline: 9px;
}

.opportunities-saved-view-button .icon {
  width: 12px;
  height: 11px;
}

.opportunities-add-view-button.add-view-button {
  width: 29px;
  height: 29px;
}

.opportunities-search.list-search {
  flex: 0 0 208px;
  width: 208px;
  min-width: 0;
  height: 37px;
  margin-left: auto;
  border-color: var(--opportunities-frame-stroke);
  transform: translateY(1px);
}

.opportunities-search .list-search__icon .icon {
  width: 8px;
  height: 8px;
}

.opportunities-search input {
  height: 22px;
  padding: 0 5px 0 1px;
  font-size: 10px;
  border: .5px solid #111;
  border-left: 0;
  border-radius: 0 7px 7px 0;
}

.opportunities-board {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 300px;
  overflow: hidden;
  border: 1px solid var(--opportunities-frame-stroke);
  background: #fff;
  isolation: isolate;
}

.opportunities-board__tab-cover {
  position: relative;
  z-index: 4;
  flex: 0 0 10px;
  min-width: 0;
  background: #fff;
  border-bottom: .75px solid #b4b5b3;
  pointer-events: none;
}

.opportunities-board__scrollbar-strip {
  position: relative;
  flex: 0 0 15px;
  min-width: 0;
  background: #f6f6f6;
  border-top: .75px solid #b4b5b3;
}

.opportunities-board-scrollbar {
  position: absolute;
  z-index: 3;
  inset: 0 4px;
  width: auto;
  height: 14px;
}

.opportunities-board-scrollbar .scrollbar-ui__handle--horizontal {
  top: 3px;
  right: auto;
  left: 0;
  width: 56px;
  height: 6px;
  transform: translateX(var(--scrollbar-handle-offset));
}

.opportunities-board-scrollbar .scrollbar-ui__handle-image {
  display: block;
  width: 6px;
  height: 56px;
  max-width: none;
  transform: translateY(6px) rotate(-90deg);
  transform-origin: top left;
  pointer-events: none;
  user-select: none;
}

.opportunities-board__scroll {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.opportunities-board__scroll::-webkit-scrollbar {
  display: none;
}

.opportunities-board__scroll:focus-visible,
.opportunity-stage__cards:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.opportunities-board__stages {
  display: flex;
  align-items: stretch;
  gap: 14px;
  width: max-content;
  min-width: 100%;
  height: 100%;
  padding: 16px 14px 10px;
}

.opportunity-stage {
  --stage-accent: #bfc1bd;
  display: flex;
  flex: 0 0 270px;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.opportunity-stage--black { --stage-accent: #111; }
.opportunity-stage--blue { --stage-accent: #7db9e2; }
.opportunity-stage--lavender { --stage-accent: #e7b7ef; }
.opportunity-stage--green { --stage-accent: #b8ecc6; }
.opportunity-stage--yellow { --stage-accent: #e8df8b; }
.opportunity-stage--sky { --stage-accent: #abdce9; }
.opportunity-stage--violet { --stage-accent: #c8c0eb; }
.opportunity-stage--mint { --stage-accent: #bfe5d9; }
.opportunity-stage--gray { --stage-accent: #c7c9c6; }

.opportunity-stage__header {
  flex: 0 0 auto;
  overflow: hidden;
  border: .75px solid #aaa;
  border-top: 5px solid var(--stage-accent);
  border-bottom: 4px solid var(--stage-accent);
  border-radius: 8px;
  background: #e6e6e6;
}

.opportunity-stage__heading {
  display: flex;
  align-items: center;
  height: 27px;
  padding: 2px 7px 2px 12px;
  background: #f7f7f7;
  border-bottom: .75px solid #b9b9b9;
}

.opportunity-selection-checkbox.contact-selection-checkbox {
  position: static;
  flex: 0 0 11px;
  width: 11px;
  height: 11px;
  margin: 0 3px 0 0;
}

.opportunity-stage__checkbox.contact-selection-checkbox {
  margin-right: 2px;
}

.opportunity-stage__heading h3 {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0 0 0 5px;
  overflow: hidden;
  font-size: 9.2px;
  font-weight: 500;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opportunity-stage__heading .opportunity-stage__info {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-left: 6px;
}

.opportunity-stage__heading button {
  display: grid;
  place-items: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-left: auto;
  padding: 0;
  background: transparent;
  border: 0;
}

.opportunity-stage__heading button .opportunity-stage__chevron {
  width: 9px;
  height: 7px;
  transform: rotate(180deg);
  transition: transform 120ms ease;
}

.opportunity-stage__heading button[aria-expanded="false"] .opportunity-stage__chevron {
  transform: none;
}

.opportunity-stage__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 24px;
  padding: 2px 8px 2px 12px;
  font-size: 9px;
}

.opportunity-stage__summary strong {
  padding: 2px 7px;
  font-size: 8.5px;
  font-weight: 500;
  background: var(--lime);
  border: .5px solid #c4ce8c;
  border-radius: 4px;
}

.opportunity-stage__cards-region {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 560px;
  margin-top: 13px;
}

.opportunity-stage__cards-region[hidden] {
  display: none;
}

.opportunity-stage__cards {
  height: 100%;
  padding: 0 13px 8px 10px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.opportunity-stage__cards::-webkit-scrollbar {
  display: none;
}

.opportunity-stage__scrollbar {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 8px;
  width: 13px;
}

.opportunity-stage__scrollbar .scrollbar-ui__handle {
  right: 3px;
}

.opportunity-card {
  overflow: hidden;
  color: #111;
  border: .75px solid #aaa;
  border-radius: 8px;
  background: #fff;
}

.opportunity-card + .opportunity-card {
  margin-top: 12px;
}

.opportunity-card button {
  color: #111;
}

.opportunity-card__titlebar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 3px 8px;
  background: #f0f0f0;
  border-bottom: .75px solid #b9b9b9;
}

.opportunity-card__titlebar h4 {
  flex: 1 1 auto;
  text-align: left;
}

.opportunity-card h4 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 9px;
  font-weight: 500;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opportunity-card__titlebar button {
  display: grid;
  place-items: center;
  flex: 0 0 13px;
  width: 13px;
  height: 20px;
  margin-left: 6px;
  padding: 0;
  background: transparent;
  border: 0;
}

.opportunity-card__titlebar button .icon {
  width: 7px;
  height: 5px;
}

.opportunity-card__collapsed-value {
  display: none;
  flex: 0 0 auto;
  padding: 2px 5px;
  font-size: 7.5px;
  background: var(--lime);
  border: .5px solid #c4ce8c;
  border-radius: 4px;
}

.opportunity-card__body {
  padding: 8px 8px 6px 12px;
}

.opportunity-card__details {
  display: grid;
  gap: 5px;
  margin: 0;
}

.opportunity-card__details > div {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  font-size: 8.2px;
  line-height: 1.25;
}

.opportunity-card__details dt,
.opportunity-card__details dd {
  min-width: 0;
  margin: 0;
}

.opportunity-card__details dd {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opportunity-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 6px;
  font-weight: 600;
  background: #dedede;
  border-radius: 50%;
}

.opportunity-source-mark {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border: 2px solid #666;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px #fff;
}

.opportunity-source-icon {
  flex: 0 0 auto;
  width: 9px;
  height: 11px;
  object-fit: contain;
}

.opportunity-source-icon--whatsapp {
  width: 11px;
  height: 11px;
  filter: brightness(0);
}

.opportunity-source-icon--email {
  width: 11px;
  height: 8px;
  filter: brightness(0);
}

.opportunity-card__tags {
  display: flex;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
}

.opportunity-tag {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  height: 16px;
  overflow: hidden;
  background: #d5ebf8;
  border: .5px solid #537c92;
  border-radius: 4px;
}

.opportunity-tag--1 {
  background: #ffc895;
  border-color: #9f6940;
}

.opportunity-tag--2 {
  background: #e7ddf3;
  border-color: #ae9fc0;
}

.opportunity-tag span {
  min-width: 0;
  padding: 0 2px 0 5px;
  overflow: hidden;
  font-size: 6.7px;
  text-overflow: ellipsis;
}

.opportunity-tag button {
  flex: 0 0 auto;
  width: 11px;
  height: 14px;
  padding: 0 3px 0 0;
  line-height: 1;
  font-size: 8px;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.opportunity-card__actions {
  display: grid;
  grid-template-columns: 28px 27px 26px 32px 56px minmax(45px, 1fr);
  gap: 3px;
  margin: 8px -3px 0;
}

.opportunity-card__actions button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1px;
  min-width: 0;
  height: 17px;
  padding: 1px 2px;
  font-size: 6.4px;
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 4px;
}

.opportunity-card__actions button:hover,
.opportunity-card__actions button:focus-visible {
  background: var(--blue);
}

.opportunity-card__actions .icon {
  width: 8px;
  height: 8px;
  object-fit: contain;
}

.opportunity-card__actions span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opportunity-card__collapse,
.opportunity-card__expand {
  display: grid;
  place-items: center;
  width: 100%;
  height: 20px;
  padding: 0;
  background: #efefef;
  border: 0;
  border-top: .75px solid #b8b8b8;
}

.opportunity-card__collapse .icon,
.opportunity-card__expand .icon {
  width: 7px;
  height: 5px;
}

.opportunity-card__collapse .icon {
  transform: rotate(180deg);
}

.opportunity-card--collapsed {
  height: 54px;
}

.opportunity-card--collapsed .opportunity-card__titlebar {
  justify-content: flex-start;
  height: 33px;
  padding: 3px 7px 3px 11px;
  border-bottom: 0;
  background: #f0f0f0;
}

.opportunity-card--collapsed .opportunity-card__titlebar h4 {
  flex: 1 1 auto;
}

.opportunity-card--collapsed .opportunity-card__collapsed-value {
  display: inline-flex;
}

.opportunity-card--collapsed .opportunity-card__collapse .icon {
  transform: none;
}

.opportunity-stage__empty {
  margin: 0;
  padding: 28px 14px;
  color: #747774;
  font-size: 9px;
  text-align: center;
  border: .75px dashed #c1c3c0;
  border-radius: 7px;
  background: #fafafa;
}

/* Browser zoom reduces the CSS viewport. At 125% on a 1920px display the
   viewport is about 1536px, so move filters into normal flow before they can
   collide with the opportunity tabs. Their source order places them directly
   above the board search row. */
@media (max-width: 1600px) {
  .opportunities-toolbar {
    position: static;
    justify-content: flex-end;
    margin-top: 8px;
  }
}

@media (max-width: 1179px) {
  .opportunities-screen {
    height: calc(100dvh - 42px);
    padding: 18px 18px 10px;
  }

  .opportunities-primary-tabs {
    max-width: 100%;
    margin-top: 10px;
    overflow-x: auto;
  }

  .opportunities-board-frame {
    margin-top: 8px;
  }
}

@media (max-width: 760px) {
  .opportunities-screen {
    height: calc(100dvh - 42px);
    padding: 12px 10px 8px;
  }

  .opportunities-title-row {
    align-items: flex-start;
  }

  .opportunities-title-group {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .opportunities-filters {
    width: 100%;
    padding-bottom: 3px;
    overflow-x: auto;
  }

  .opportunities-primary-tabs {
    gap: 7px;
  }

  .opportunities-primary-tabs button {
    min-width: 92px;
  }

  .opportunities-view-row {
    height: auto;
    flex-wrap: wrap;
    gap: 7px;
    padding: 3px 0 7px;
  }

  .opportunities-view-row .view-toolbar__primary {
    flex-wrap: wrap;
    gap: 7px;
  }

  .opportunities-view-controls {
    max-width: 100%;
    overflow-x: auto;
  }

  .opportunities-view-row .view-toolbar__search-tools {
    flex: 1 0 100%;
  }

  .opportunities-search.list-search {
    width: 100%;
    flex-basis: 100%;
  }

  .opportunity-stage {
    flex-basis: 254px;
  }
}

/* Manage Data: Data Values. Keep this surface isolated from the reference app and
   from the shared Contacts/Data Fields layouts it composes. */
.data-values-screen-host {
  display: contents;
}

.data-values-screen {
  padding: 34px 36px 10px 35px;
}

.data-values-heading {
  align-items: flex-start;
}

.data-values-heading__copy {
  flex: 1 1 420px;
  min-width: 240px;
}

.data-values-heading__title-row {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
}

.data-values-heading h1 {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
}

.data-values-heading .data-objects-intro {
  max-width: 68ch;
}

.data-values-count {
  flex: 0 0 auto;
  min-width: 98px;
  margin-top: 0;
  margin-left: 0;
  white-space: nowrap;
}

.data-values-page-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: 0;
}

.data-values-page-action {
  display: inline-flex;
  align-items: stretch;
  height: 22px;
  padding: 0;
  color: var(--ink);
  font: inherit;
  white-space: nowrap;
  background: transparent;
  border: 0;
  border-radius: 3px;
}

.data-values-page-action .contact-create-menu__label {
  min-width: 80px;
}

.data-values-page-action--primary .contact-create-menu__label {
  min-width: 96px;
}

.data-values-page-action--primary .contact-create-menu__label,
.data-values-page-action--primary .contact-create-menu__icon {
  background: var(--pale-lime);
  border-color: #aeb49d;
}

.data-values-page-action--secondary .contact-create-menu__label,
.data-values-page-action--secondary .contact-create-menu__icon {
  background: #fff;
  border-color: #bfc0bf;
}

.data-values-page-action:hover > span,
.data-values-page-action:focus-visible > span {
  background: #eff6ce;
}

.data-values-page-action--secondary:hover > span,
.data-values-page-action--secondary:focus-visible > span {
  background: var(--blue);
}

.data-values-page-action:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.data-values-page-action .contact-create-menu__icon .icon {
  width: 9px;
  height: 9px;
}

.data-values-module-navigation {
  align-items: center;
  min-width: 0;
  margin-top: 9px;
}

.data-values-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  flex: 0 0 auto;
  gap: 0;
  width: 228px;
  max-width: 100%;
  padding: 0;
  overflow: hidden;
  background: #ededed;
  border: 1px solid #bfc0bf;
  border-radius: 8px;
}

.data-values-tab {
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 0 12px;
  background: #ededed;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.data-values-tab + .data-values-tab {
  border-left: 1px solid #bfc0bf;
}

.data-values-tab.is-active {
  background: var(--pale-lime);
  box-shadow: none;
}

.data-values-tab:not(.is-active):hover {
  background: #e5e5e5;
}

.data-values-tab.is-active:hover {
  background: #f6fbdc;
}

.data-values-tab:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -3px;
}

.data-values-panel {
  min-height: 0;
}

.data-values-toolbar {
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  height: auto;
  min-height: 40px;
}

.data-values-toolbar .view-toolbar__primary {
  flex: 1 1 420px;
  min-width: 0;
}

.data-values-view-config-card {
  flex-basis: 250px;
  width: 250px;
}

.data-values-view-config-card h2 {
  flex-basis: 106px;
}

.data-values-toolbar .view-toolbar__search-tools {
  display: flex;
  align-self: center;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 10px;
  width: auto;
  margin: 0 58px 0 0;
  padding-right: 0;
}

.data-values-toolbar .list-search {
  flex: 0 1 208px;
  width: 208px;
  margin-top: 0;
}

.data-values-folder-filter {
  flex: 0 0 auto;
}

.data-values-folder-filter[hidden] {
  display: none;
}

.data-values-folder-filter [data-data-values-folder-filter-name] {
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-values-folder-filter button:focus-visible,
.data-values-folder-open:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.data-values-selection-toolbar {
  flex-wrap: wrap;
  gap: 5px 8px;
  height: auto;
  min-height: 29px;
}

.data-values-selection-toolbar[hidden] {
  display: none;
}

.data-values-selection-toolbar__count {
  margin-right: 4px;
  color: var(--muted);
  font-size: 9.6px;
  white-space: nowrap;
}

.data-values-selection-toolbar.bulk-action-toolbar > button {
  flex: 0 0 auto;
  width: auto;
}

.data-values-selection-toolbar > button[hidden] {
  display: none;
}

.data-values-selection-toolbar > button:not(:disabled):hover,
.data-values-selection-toolbar > button:focus-visible {
  background: var(--blue);
}

.data-values-selection-toolbar .bulk-action-toolbar__icon {
  width: 10px;
  height: 10px;
}

.data-values-table-shell {
  min-width: 0;
}

.data-values-table-scroll {
  min-width: 0;
  overflow-x: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.data-values-table {
  width: var(--contacts-table-min-width, 1188px);
}

.data-values-table thead .column-field-token {
  position: absolute;
  z-index: 2;
  top: 9px;
  left: 10px;
  max-width: calc(100% - 15px);
}

.data-values-table thead .column-field-token__folder {
  transform: translateX(1px);
}

.data-values-table thead .edit-columns-field-token {
  --edit-columns-token-counter-scale: 1;
}

.data-values-table thead th[data-selection-column] {
  overflow: visible;
}

.data-values-table thead th[data-column="name"] .column-field-token {
  left: 25px;
  max-width: calc(100% - 30px);
}

.data-values-table tbody tr[data-data-value-id],
.data-values-table tbody tr[data-data-value-folder-id] {
  cursor: default;
}

.data-values-table tbody tr[data-data-value-id]:focus-visible,
.data-values-table tbody tr[data-data-value-folder-id]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.data-values-table tbody tr.is-selected th[data-column="name"] > .selection-bracket {
  display: block;
}

.data-values-table tbody th[data-column="name"] {
  padding-left: 25px;
}

.data-values-table tbody th[data-column="name"] > span,
.data-values-table tbody td[data-column="folder"] > span,
.data-values-key,
.data-values-value {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-values-key {
  font-variant-ligatures: none;
}

.data-values-table thead th[data-column="name"],
.data-values-table tbody [data-column="name"] {
  position: sticky;
  left: -6px;
}

.data-values-folder-open {
  display: block;
  max-width: 100%;
  padding: 0;
  overflow: hidden;
  color: inherit;
  font: inherit;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: transparent;
  border: 0;
}

.data-values-folder-open:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.data-values-table tbody .data-values-state-row td:only-child {
  height: 164px;
  padding: 18px;
  white-space: normal;
  background: #fafafa;
  border: .75px solid #474747;
  border-radius: 5px;
}

.data-values-empty,
.data-values-workspace [data-data-values-search-empty],
.data-values-workspace [data-data-values-loading],
.data-values-error {
  display: grid;
  place-items: center;
  gap: 7px;
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
}

.data-values-empty h3,
.data-values-empty p,
.data-values-workspace [data-data-values-search-empty] p,
.data-values-error p {
  margin: 0;
}

.data-values-empty h3 {
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
}

.data-values-empty p,
.data-values-workspace [data-data-values-search-empty] p,
.data-values-error p,
.data-values-workspace [data-data-values-loading] {
  color: var(--muted);
  font-size: 10.8px;
  line-height: 1.4;
}

.data-values-empty__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 3px;
}

.data-values-empty__actions button,
.data-values-workspace [data-data-values-clear-search],
.data-values-workspace [data-data-values-retry] {
  min-height: 27px;
  padding: 3px 10px;
  color: var(--ink);
  font: inherit;
  font-size: 9.6px;
  background: #fff;
  border: .5px solid #ccc;
  border-radius: 4.8px;
}

.data-values-empty__actions [data-data-value-add-open],
.data-values-table[data-data-values-view="folders"]
  .data-values-empty__actions [data-data-value-folder-add-open],
.data-values-workspace [data-data-values-retry] {
  background: var(--pale-lime);
  border-color: #c7cca8;
}

.data-values-empty__actions button:hover,
.data-values-empty__actions button:focus-visible,
.data-values-workspace [data-data-values-clear-search]:hover,
.data-values-workspace [data-data-values-clear-search]:focus-visible,
.data-values-workspace [data-data-values-retry]:hover,
.data-values-workspace [data-data-values-retry]:focus-visible {
  background: var(--blue);
}

.data-values-workspace .contacts-pagination {
  min-width: 0;
}

.data-values-workspace .data-types-action-dialog {
  box-shadow: none;
}

.data-values-form-dialog {
  width: min(430px, calc(100vw - 24px));
  max-height: min(620px, calc(100dvh - 32px));
}

.data-values-dialog__header {
  justify-content: space-between;
  padding-right: 8px;
}

.data-values-dialog__header h2 {
  flex: 1 1 auto;
  padding: 0;
  border: 0;
}

.data-values-dialog__header [data-data-value-dialog-close] {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--ink);
  font-size: 17px;
  line-height: 1;
  background: transparent;
  border: 0;
  border-radius: 4px;
}

.data-values-dialog__header [data-data-value-dialog-close]:hover,
.data-values-dialog__header [data-data-value-dialog-close]:focus-visible {
  background: var(--blue);
}

.data-values-form {
  padding: 14px 14px 12px;
}

.data-values-form__fields {
  display: grid;
  align-content: start;
  gap: 14px;
  padding-bottom: 14px;
}

.data-values-form__key,
.data-values-form__value,
.data-values-folder-select {
  width: 100%;
  max-width: none;
  margin-top: 0;
}

.data-values-form__key {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.data-values-form__key-preview {
  width: 100%;
  padding: 7px 8px;
  background: #fff;
  border: .5px solid #ccc;
  border-radius: 4.8px;
}

.data-values-form__key-preview output {
  display: block;
  min-height: 15px;
}

.data-values-form__value-label > .data-field-create-required {
  font-size: 10.8px;
  line-height: 1.15;
}

.data-values-form__value textarea[aria-invalid="true"] {
  border-color: #b3261e;
  box-shadow: 0 0 0 .5px #b3261e;
}

.data-values-folder-select {
  position: relative;
}

.data-values-folder-select__menu {
  position: absolute;
  z-index: 12;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  box-shadow: 0 5px 12px rgb(0 0 0 / 14%);
}

.data-values-form__footer {
  justify-content: flex-end;
  padding-right: 0;
  padding-left: 0;
}

.data-values-form__footer button:disabled {
  color: #777;
  background: #f1f1ed;
  border-color: #c8cac8;
  cursor: not-allowed;
}

.data-values-folder-form {
  display: grid;
  min-height: 0;
}

.data-values-folder-form__field {
  margin: 0;
  padding: 14px;
}

.data-values-folder-form input:focus-visible {
  outline: none;
  border-color: #474747;
  box-shadow: inset 0 0 0 .5px #474747;
}

.data-values-folder-form .data-types-action-dialog__actions {
  margin-top: 0;
}

.data-values-move-dialog [data-data-value-move-options] {
  display: grid;
  gap: 3px;
  min-height: 0;
  max-height: 280px;
  padding: 5px 10px 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.data-values-move-dialog [data-data-value-move-options] label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 29px;
  padding: 4px 7px;
  font-size: 10.8px;
  border-radius: 4px;
  cursor: pointer;
}

.data-values-move-dialog [data-data-value-move-options] label:hover,
.data-values-move-dialog [data-data-value-move-options] label:focus-within {
  background: var(--pale-lime);
}

.data-values-move-dialog [data-data-value-move-options] input {
  accent-color: #536900;
}

.data-values-delete-dialog [data-data-value-delete-impact] {
  padding-top: 0;
  color: var(--muted);
}

.data-values-delete-dialog [data-data-value-delete-error] {
  padding-top: 0;
  color: #b3261e;
}

.data-values-workspace .data-types-action-dialog__actions button:last-child {
  background: var(--pale-lime);
  border-color: #c7cca8;
}

.data-values-workspace .data-types-action-dialog__actions button:not(:disabled):hover,
.data-values-workspace .data-types-action-dialog__actions button:focus-visible {
  background: var(--blue);
}

@media (max-width: 1439px) and (min-width: 1180px) {
  .data-values-toolbar .view-toolbar__search-tools {
    margin-right: 78px;
  }
}

@media (max-width: 1179px) {
  .data-values-toolbar {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .data-values-toolbar .view-toolbar__primary {
    flex: 0 0 auto;
    width: 100%;
  }

  .data-values-toolbar .view-toolbar__search-tools {
    align-self: stretch;
    width: 100%;
    margin-right: 0;
  }
}

@media (max-width: 767px) {
  .data-values-screen {
    padding: 22px 16px 10px;
  }

  .data-values-heading {
    gap: 10px 12px;
  }

  .data-values-heading__copy {
    flex-basis: 100%;
    min-width: 0;
  }

  .data-values-heading .data-objects-intro {
    max-width: 48ch;
  }

  .data-values-page-actions {
    flex: 1 1 auto;
  }

  .data-values-module-navigation {
    margin-top: 8px;
  }

  .data-values-tabs {
    width: min(228px, 100%);
    padding: 0;
  }

  .data-values-toolbar .view-toolbar__search-tools {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 6px;
    max-width: 100%;
    padding-right: 0;
  }

  .data-values-page-actions {
    width: 100%;
  }

  .data-values-toolbar .list-search {
    flex: 0 0 auto;
    width: 100%;
  }

  .data-values-view-config-card {
    flex-basis: 100%;
    width: 100%;
    max-width: 100%;
  }

  .data-values-folder-filter {
    gap: 8px;
    padding-right: 4px;
    padding-left: 4px;
  }

  .data-values-selection-toolbar {
    margin-right: 0;
    margin-left: 0;
    padding-right: 9px;
    padding-left: 9px;
    overflow-x: auto;
  }

  .data-values-table-shell {
    width: calc(100% + 12px);
    margin-right: -6px;
    margin-left: -6px;
  }

  .data-values-workspace .contacts-pagination {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
    width: calc(100% + 12px);
    margin-right: -6px;
    margin-left: -6px;
    padding-right: 10px;
    padding-left: 10px;
  }

  .data-values-workspace .contacts-pagination__controls {
    justify-content: space-between;
    width: 100%;
  }

  .data-values-form-dialog,
  .data-values-folder-dialog,
  .data-values-move-dialog,
  .data-values-delete-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }
}

@media (max-width: 430px) {
  .data-values-screen {
    padding-right: 12px;
    padding-left: 12px;
  }

  .data-values-count {
    margin-left: 0;
  }

  .data-values-page-actions {
    justify-content: flex-start;
    flex-basis: 100%;
  }

  .data-values-page-action {
    flex: 1 1 calc(50% - 3px);
  }

  .data-values-page-action .contact-create-menu__label {
    flex: 1 1 auto;
    min-width: 0;
  }

  .data-values-column--name {
    width: 140px !important;
  }

  .data-values-workspace .contacts-pagination__controls {
    flex-wrap: wrap;
  }

  .data-values-workspace .contacts-pagination .page-size-picker {
    flex: 1 1 100%;
    width: 100%;
  }

  .data-values-workspace .page-size-picker__toggle {
    width: 100%;
  }

  .data-values-workspace [data-data-values-previous-page],
  .data-values-workspace [data-data-values-next-page] {
    flex: 1 1 0;
  }

  .data-values-form {
    padding-right: 10px;
    padding-left: 10px;
  }

  .data-values-form__footer button,
  .data-values-workspace .data-types-action-dialog__actions button {
    flex: 1 1 0;
  }
}