.OpenInApp_title_dbe {
  margin: 32px 0;
}

.OpenInApp_panel_ca5 {
  text-align: center;
}

.OpenInApp_desc_dca {
  color: var(--colorTextLight);
  margin: 16px 0;
}

.LineSeparator_lineSeparator_324 {
  margin: 0;
  border-top: 1px solid var(--borderDefault);
  border-bottom: 0 none;
}

.LineSeparator_hasSpacing_8f3 {
  margin: 24px 0;
}

.OpenInApp_container_b4f {
  max-width: 850px;
  padding: 8px;
  text-align: center;
  margin: auto;
}

.OpenInApp_logo_5d6 {
  display: block;
  width: 48px;
  margin: 40px auto;
}

.OpenInApp_panel_be8 {
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--borderDefault);
  border-radius: 3px;
  background: var(--surfaceBackgroundDefault);
}

.ErrorPage_image_0ed {
  width: 150px;
}

.BulkWorkflowManageModal_BulkWorkflowManageModal_loader_b9f {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

.BulkWorkflowManageModal_BulkWorkflowManageModal_inlineLoader_384 {
  padding-left: var(--spacing-16);
}

.BulkWorkflowManageModal_BulkWorkflowManageModal_notice_78a {
  padding: 16px;
}

.Collapsible_container_cbc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  position: relative;
  overflow: hidden;
}

.Collapsible_container_cbc.Collapsible_rounded_760 {
    border-radius: 7px;
    border: 1px solid var(--borderLight);
  }

.Collapsible_header_23f {
  display: flex;
  gap: var(--spacing-8);
  align-items: center;
  padding: var(--spacing-12);
  align-self: stretch;
  cursor: pointer;
  z-index: 1;
}

.Collapsible_header_23f.Collapsible_noPadding_0ed {
    padding: 0;
  }

.Collapsible_header_23f.Collapsible_default_495 {
    background: var(--surfaceBackgroundLight);
  }

.Collapsible_header_23f.Collapsible_light_3b3 {
    background: var(--bgCardBase);
  }

.Collapsible_header_23f.Collapsible_transparent_668 {
    background: transparent;
  }

.Collapsible_header_23f.Collapsible_disabled_9bd {
    cursor: default;
  }

.Collapsible_header_23f.Collapsible_disabled_9bd .Collapsible_icon_5b7 {
      /* TODO [darkmode] one-off implementation of disabled icon */
      opacity: 0.3;
    }

.Collapsible_header_23f.Collapsible_default_495:hover:not(.Collapsible_disabled_9bd):not(.Collapsible_noHover_54b),.Collapsible_header_23f.Collapsible_transparent_668:hover:not(.Collapsible_disabled_9bd):not(.Collapsible_noHover_54b) {
      background: var(--bgDefaultMuted);
    }

.Collapsible_header_23f.Collapsible_light_3b3:hover:not(.Collapsible_disabled_9bd):not(.Collapsible_noHover_54b) {
      background: var(--bgCardLight);
    }

.Collapsible_header_23f .Collapsible_icon_5b7 {
    color: var(--colorIconDefault);
    transition: transform 100ms var(--standardCurve);
  }

.Collapsible_rotate90_65e:is(.Collapsible_header_23f .Collapsible_icon_5b7) {
      transform: rotate(90deg);
    }

.Collapsible_rotate180_e9f:is(.Collapsible_header_23f .Collapsible_icon_5b7) {
      transform: rotate(180deg);
    }

.Collapsible_slideable_f73 {
  align-self: stretch;
}

.Collapsible_content_4c3 {
  box-sizing: border-box;
  background: var(--surfaceBackgroundDefault);
}

.Collapsible_content_4c3.Collapsible_default_495  > * + * {
      border-top: 1px solid var(--borderLight);
    }

.Collapsible_content_4c3.Collapsible_transparent_668 {
    background: transparent;
  }

.Collapsible_section_826 {
  padding: var(--spacing-12);
}

.Collapsible_actions_797 {
  position: absolute;
  z-index: 1;
  right: var(--spacing-12);
  top: var(--spacing-12);
  margin-top: -1px;
}

.Collapsible_divider_b99 {
  border-top: 1px solid var(--borderLight);
  width: 100%;
}

.Collapsible_card_e9a {
  border: 1px solid var(--borderLight);
  border-radius: var(--activityBorderRadius);
  margin: 0 var(--spacing-12);
  overflow: hidden;
}

.ExpandableQuery_trigger_464 {
  display: inline;
  -webkit-text-decoration: underline;
  text-decoration: underline;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  color: var(--gray-50);
}
/* TODO - remove code selector, required due to .bulk-edit-modal code rule in search.less */
code.ExpandableQuery_query_c68 {
  margin-top: 16px;
  background: var(--surfaceBackgroundDefault);
  padding: 8px 12px;
  color: var(--gray-50);
  word-break: break-all;
  display: block;
  max-height: 90px;
  overflow-y: auto;
}

.WorkflowSelect_input_65d.WorkflowSelect_inputLarge_533 {
  padding-top: var(--spacing-24);
  padding-bottom: var(--spacing-24);
}

.WorkflowSteps_more_0e6 {
  align-items: center;
  color: var(--colorTextLight);
  display: flex;
  font-size: var(--fontSizeSmall);
  height: 20px;
  -webkit-user-select: none;
          user-select: none;
}

.WorkflowSteps_small_e20 {
  font-size: var(--fontSizeTiny);
  height: 16px;
}

.WorkflowSteps_large_7ba {
  height: 24px;
}

.WorkflowSteps_xLarge_f44 {
  height: 32px;
}

.WorkflowSelect_WorkflowSelectItem_details_533 {
  overflow: hidden;
  white-space: nowrap;
}

.WorkflowSelect_WorkflowSelectItem_name_a99 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.WorkflowSelect_WorkflowSelectItem_workflowItemColumn_345 {
  align-items: center;
  display: flex;
  text-align: right;
}

.BulkWorkflowManageModal_BulkWorkflowManageForm_content_5c8 {
  padding: var(--spacing-16);
}

.UnsupportedPlatform_UnsupportedPlatformCTA_root_d3c {
  background: var(--bgButtonDefaultEnabled);
  border: none;
  border-top: 1px solid var(--borderDefault);
  box-sizing: border-box;
  color: var(--colorTextDefault);
  display: block;
  padding: 0;
  text-align: left;
  width: 100%;
}.UnsupportedPlatform_UnsupportedPlatformCTA_root_d3c:active,.UnsupportedPlatform_UnsupportedPlatformCTA_root_d3c:hover,.UnsupportedPlatform_UnsupportedPlatformCTA_root_d3c:focus {
    -webkit-text-decoration: none;
    text-decoration: none;
  }.UnsupportedPlatform_UnsupportedPlatformCTA_root_d3c:active {
    background-color: var(--colorFillTransparent05);

    /* Compensate for UIText not supporting currentColor. When active, it should move from light to the default */
    --colorTextLight: var(--colorTextDefault);
  }.UnsupportedPlatform_UnsupportedPlatformCTA_root_d3c svg {
    color: var(--colorIconLight);
  }.UnsupportedPlatform_UnsupportedPlatformCTA_root_d3c:hover :is(.UnsupportedPlatform_UnsupportedPlatformCTA_root_d3c svg),.UnsupportedPlatform_UnsupportedPlatformCTA_root_d3c:focus :is(.UnsupportedPlatform_UnsupportedPlatformCTA_root_d3c svg) {
      color: var(--colorIconDefault);
    }.UnsupportedPlatform_UnsupportedPlatformCTA_root_d3c:active :is(.UnsupportedPlatform_UnsupportedPlatformCTA_root_d3c svg) {
      color: var(--colorIconDefault);
    }

.UnsupportedPlatform_content_b59 {
  text-align: center;
  width: 100%;
}

.UnsupportedPlatform_content_b59.UnsupportedPlatform_isPopover_271 {
    border: 1px solid var(--borderLight);
    border-radius: var(--baseBorderRadius);
  }

.UnsupportedPlatform_footer_2b6 {
  display: block;
  position: relative;
  text-align: center;
  background-color: var(--bgCardLight);
  border-top: 1px solid var(--borderLight);
  padding: var(--spacing-16);
}

.UnsupportedPlatform_footer_2b6:hover,.UnsupportedPlatform_footer_2b6:focus {
    -webkit-text-decoration: none;
    text-decoration: none;
  }

:is(.UnsupportedPlatform_footer_2b6:hover,.UnsupportedPlatform_footer_2b6:focus) .UnsupportedPlatform_footerAction_af0 {
      -webkit-text-decoration: underline;
      text-decoration: underline;
    }

.UnsupportedPlatform_footer_2b6::after {
    content: '\2192'; /* Represents → */
    display: flex;
    position: absolute;
    top: 0;
    /* 5px because bottom padding is 5px larger than the top one and we want this aligned between question and action */
    bottom: 5px;
    right: 25px;
    align-items: center;
    font-size: 20px;
    color: #bbb;
  }

.UnsupportedPlatform_footerQuestion_cea {
  margin-bottom: 5px;
  color: #666;
}

.UnsupportedPlatform_footerAction_af0 {
  margin-bottom: 0;
  font-size: 18px;
  color: #222;
}

.UnsupportedPlatform_logo_7ee {
  margin: 0 auto;
  width: var(--spacing-48);

  /* Prevents the svg from taking up additional vertical space, keeping it at 48px instead of 53px */
}

.UnsupportedPlatform_logo_7ee svg {
    display: block;
  }

/**
 * TODO: port to CSS modules.
 * We cannot right now because certain subcomponents (Contact and Info) depend
 * on some styles here (changes to call status)
 */
/* wrapper applied by both active_call_bar_view and active_dialer_view */
.CallBarWrapper {
  --callBarTransition: 250ms cubic-bezier(0.77, 0, 0.175, 1);
  --callBarButtonSize: 28px;

  position: relative;
}
.CallBarWrapper:not(:last-child):not(:only-child) {
    margin-bottom: 2px;
  }
.CallBarWrapper::after {
    pointer-events: none;
    content: '';
    display: block;
    position: absolute;
    top: 4px; /* do not overlap top border */
    left: 0;
    right: 0;
    bottom: 1px; /* do not overlap bottom border */
    background-color: var(--surfaceBackgroundDefault);
    opacity: 0;
    transition: opacity 0.5s;
  }
.CallBarWrapper.is-fadingOut::after {
    opacity: 1;
  }
.CallBarWrapper.is-fadingIn::after {
    opacity: 0;
  }

.CallBar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  min-height: 60px; /* = 8px + 24px + 4px + 16px + 4px */
  padding-bottom: 4px;
  border-top: 1px solid var(--borderDefault);
  background-color: var(--surfaceBackgroundDefault);
}

.CallBar::before {
    content: ' ';
    position: absolute;
    bottom: 0;
    display: block;
    width: 100%;
    height: 4px;
    background-color: var(--borderDefault);
    transition: background-color var(--callBarTransition);
  }

.CallBar--pending::after {
  content: ' ';
  position: absolute;
  bottom: 0;
  left: 0;
  right: -28px;
  width: calc(100% + 28px);
  height: 4px;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.65) 0%,
    rgba(255, 255, 255, 0.15) 100%
  );
  background-size: 28px 100%;
  animation: pendingBar 500ms linear infinite;
}
@keyframes pendingBar {
  0% {
    transform: translate(-28px, 0);
  }
  100% {
    transform: none;
  }
}

.CallBar--active::before {
    background-color: var(--fillSuccess);
  }

.CallBar--active.is-dialer::before {
    background-color: var(--fillInformational);
  }

.CallBar--rejected::before,.CallBar--rejected.is-dialer::before {
    background-color: var(--failurePrimaryColor);
  }

.CallBar--closed.is-dialer::before {
  background-color: var(--borderDefault);
}

/* TODO: only used in ActiveDialerBar.
   that component doesn't have its own styles (yet)
   possibly namespace on CallBar, or see why it's needed */
.CallBar__inner {
  display: flex;
  width: 100%;
  height: 60px;
}

.CallBar__item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px 0;
  margin-bottom: 4px; /* *8px* + 24px + 4px + 16px + *8px* */
  margin: 0 12px;
  flex-grow: 1;
  min-width: 0; /* hack for ellipsis inside flex-child */
}

.CallBar_StatusText_statusText_33c {
  color: var(--colorTextDefault);
  line-height: 32px;
  align-self: center;
  display: flex;
  align-items: center;
  margin-right: 16px;
  white-space: nowrap;
}

.CallBar_StatusText_multiline_71b {
  flex-direction: column;
  line-height: 1.3;
  text-align: right;
}

.CallBar_StatusText_failed_3b3 {
  color: var(--failurePrimaryColor);
}

.CallBar_StatusText_transferredTo_dc0 {
  display: flex;
  align-items: center;
  margin-left: var(--spacing-4);
  gap: var(--spacing-4);
}

.CallBar_StatusText_subText_ac4 {
  color: var(--colorTextDefault);
}

.ObserverCallBar_CoachList_list_0fa {
  display: grid;
  grid-auto-flow: column;
  place-items: center;
  gap: 8px;
  margin: 0 8px;
}

.InfoPopover_content_b16 {
  padding: 22px;
  box-sizing: border-box;
  color: var(--colorTextDefault);
}

.InfoPopover_content_b16.InfoPopover_default_963 {
    max-width: 320px;
    width: 320px;
  }

.InfoPopover_content_b16.InfoPopover_large_6a9 {
    max-width: 380px;
    width: 380px;
  }

.InfoPopover_header_665 {
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 20px;
  font-weight: var(--fontWeightBold);
}

.InfoPopover_p_14d {
  font-size: 14px;
  line-height: 20px;
  color: var(--colorTextMedium);
}

.InfoPopover_action_a43 {
  display: flex;
  align-items: center;
  margin-top: 16px;
}

.InfoPopover_helpLink_742 {
  flex-grow: 1;
  text-align: right;
}

.InfoPopover_xButton_d85 {
  position: absolute;
  top: 16px;
  right: 16px;
}

.ObserverCallBar_IntroducePromo_list_e36 {
  list-style: none;
  margin: 12px 0;
}

.ObserverCallBar_IntroducePromo_item_c59 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 6px 0;
}

.ObserverCallBar_IntroducePromo_icon_851 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 8px;
  color: var(--bgLight);
  margin-right: 10px;
}

.ObserverCallBar_IntroducePromo_icon_851.ObserverCallBar_IntroducePromo_listen_aca {
    /* TODO [darkmode] special case */
    background-color: var(--borderHover);
  }

.ObserverCallBar_IntroducePromo_icon_851.ObserverCallBar_IntroducePromo_whisper_293 {
    background-color: var(--bgInformational);
  }

.ObserverCallBar_IntroducePromo_icon_851.ObserverCallBar_IntroducePromo_barge_f15 {
    background-color: var(--bgSuccess);
  }

.ObserverCallBar_IntroducePromo_icon_851 svg {
    width: 10px;
  }

.ObserverCallBar_IntroducePromo_text_260 {
  margin-left: 4px;
  color: var(--colorTextLight);
}

.ObserverCallBar_InviteUser_item_98d {
  display: flex;
  gap: 8px;
  align-items: center;
}

.ObserverCallBar_InviteUser_invitedBadgeWrapper_cff {
  flex: none;
}

.ObserverCallBar_InviteUser_statusIconWrapper_261 {
  flex: none;
  margin-left: auto;
  display: flex;
  align-items: center;
}

.ObserverCallBar_InviteUser_emptyState_a6e {
  padding: var(--spacing-4);
  box-sizing: border-box;
  color: var(--colorTextLight);
  font-weight: 600;
  text-align: center;
}

.CallBar__infoLoader {
  margin: auto 0;
  align-self: center;

  /* Override loader's more-specific margin property. */
}

.CallBar__infoLoader.loader {
    margin-right: 0;
  }

/* TODO: See if this is needed */
.CallBar--closed.is-dialer .CallBar__contact {
  color: var(--colorTextDefault);
}

.CallBar__actionHint {
  margin: auto 0 auto 20px;
}

.CallBar__actionHintCopy {
  display: block;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.CallBar__activeUsers {
  display: flex;
  padding: 0 6px 0 3px;
  height: 18px;
  align-items: center;
  font-size: 11px;
  border: 1px solid var(--borderDefault);
  background-color: #eee;
}

.CallBar__activeUsersIcon {
  float: none;
  margin-top: -2px;
  margin-left: 0;
  width: 18px;
  font-size: 13px;
}

.CallBar__callCoaching {
  display: grid;
  grid-template-columns: auto auto 1px;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
}

.CallBar__callCoaching::after {
    content: '';
    display: block;
    height: 32px;
    padding-right: 8px;
    border-right: 1px solid var(--borderDefault);
  }

/* status text / actions */
.CallBar__actions {
  color: var(--colorTextDefault);
  line-height: 32px;
  align-self: center;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border-left: 1px solid var(--borderDefault);
  padding-left: 7px;
  margin-right: 8px;

  /* properly align button inside anonymous span (DialerSettingsPopover adds one) */
}
.CallBar__actions  > * {
    margin: 0 8px;
  }
.CallBar__actions  > span {
    display: flex;
  }

.CallBar__actions .CallBar__actions.is-alone {
  border-left-width: 0;
}

.CallBar__help {
  margin-left: 10px;
  vertical-align: 1px;
}

.CallBar__helpIcon {
  cursor: pointer;
  display: inline-block;
}

.CallBar__helpIcon:hover {
    color: var(--gray-80);
  }

.CallBar__duration {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* misc */
.CallBar__actionButton,
.CallBar__closeButton,
.CallBar__pauseDialerButton,
.CallBar__redialButton,
.CallBar__resetButton,
.CallBar__reconnectButton,
.CallBar__resumeButton,
.CallBar__backToSmartViewButton,
.CallBar__backToPreviewButton {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  border: 0;
  border-radius: calc(var(--callBarButtonSize) / 2);
  fill: #fff;
  color: #fff;
  padding: 0;
  outline: 0;
  height: var(--callBarButtonSize);
}
:is(.CallBar__actionButton,.CallBar__closeButton,.CallBar__pauseDialerButton,.CallBar__redialButton,.CallBar__resetButton,.CallBar__reconnectButton,.CallBar__resumeButton,.CallBar__backToSmartViewButton,.CallBar__backToPreviewButton) svg {
    width: 14px;
    transition:
      transform var(--callBarTransition),
      fill var(--callBarTransition);
  }

.CallBar__loader {
  margin-left: 14px;
  margin-right: 14px;
}

.CallBar__loader.is-interactive {
    cursor: pointer;
  }

.CallBar__actionButton {
  transition:
    background-color 200ms,
    width var(--callBarTransition);
}

.CallBar__actionButtonText {
  overflow: hidden;
  white-space: nowrap;
  margin-left: 12px;
}

.CallBar__actionButton--hangUp {
  justify-content: center;
  width: var(--callBarButtonSize);
  background-color: var(--bgDanger);
}

.CallBar__actionButton--hangUp:hover {
    background-color: color-mix(in srgb, #000 10%, var(--bgDanger));
  }

/* Disabled as-in we just clicked it and it cannot be clicked again. */

.CallBar__actionButton--hangUp:disabled {
    opacity: 0.5;
  }

/* Disabled as-in we cannot hang up now. */

.CallBar__actionButton--hangUp.is-disabled {
    background-color: color-mix(in srgb, var(--bgDanger) 50%, transparent);
  }

.CallBar__actionButton--hangUp svg {
    transform: rotate(135deg);
  }

.CallBar__actionButton--answer,
.CallBar__actionButton--callBack {
  padding: 0 14px 0 8px;
}

.CallBar__actionButton--answer {
  background-color: var(--fillSuccess);
  color: var(--colorTextNeutralInvert);
}

.CallBar__actionButton--answer:hover {
    background-color: color-mix(in srgb, #000 10%, var(--fillSuccess));
  }

.CallBar__actionButton--callBack {
  width: 108px;
  color: var(--colorTextDefault);
  fill: var(--colorTextDefault);
  background-color: var(--surfaceBackgroundDefault);
  border: 1px solid var(--borderDefault);
}

.CallBar__actionButton--callBack:hover {
    background-color: var(--bgDefaultMuted);
  }

.CallBar__pauseDialerButton {
  background-color: transparent;
  width: 32px;
  height: 32px;
  margin-left: 6px;
  margin-right: 6px;
  color: var(--colorTextDefault);
}

.CallBar__pauseDialerButton svg {
    width: 24px;
    height: 24px;
  }

.CallBar__closeButton {
  background-color: transparent;
  width: 16px;
  height: 16px;
  color: var(--colorIconLight);
}

.CallBar__closeButton svg {
    width: 16px;
  }

.CallBar__closeButton:hover {
    color: var(--colorIconDefault);
  }

.CallBar__redialButton,
.CallBar__resetButton,
.CallBar__reconnectButton,
.CallBar__resumeButton,
.CallBar__backToSmartViewButton,
.CallBar__backToPreviewButton {
  padding: 0 10px;
  color: var(--colorTextDefault);
  background-color: transparent;
  border: 1px solid var(--borderLight);
}

.CallBar__resetButtonIcon {
  margin-right: 8px;
}

.CallBar__resetButtonIcon svg {
    width: 12px;
    height: 12px;
  }

.CallBar__resumeButton {
  min-width: 126px; /* Match Call Next Lead button. */
}

.CallBar__redialButton,
.CallBar__reconnectButton {
  fill: var(--colorTextDefault);
}

.CallBar__redialButtonIcon,
.CallBar__reconnectButtonIcon {
  margin-right: 6px;
  margin-top: 3px;
}

.CallBar__backToSmartViewButton,
.CallBar__backToPreviewButton {
  align-self: flex-start;
  margin: auto 0;
}

.CallBar__backToPreviewButton {
  margin-left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hidden {
  display: none;
}

.components_NextCallButton_nextCallButton_0cc {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  border: 0;
  border-radius: calc(var(--callBarButtonSize) / 2);
  color: #fff;
  outline: 0;
  height: var(--callBarButtonSize);

  overflow: hidden;
  position: relative;
  z-index: 0;
  padding: 0 10px;
  background-color: var(--fillInformational);
}.components_NextCallButton_nextCallButton_0cc:hover {
    background-color: color-mix(in srgb, #000 10%, var(--fillInformational));
  }.components_NextCallButton_nextCallButton_0cc::after {
    content: '';
    display: block;
    position: absolute;
    z-index: -1; /* Sit below text but above the background. */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 0;
    background-color: var(--colorLinkDefault);
  }.components_NextCallButton_nextCallButton_0cc.components_NextCallButton_isProgressing_265::after {
      width: 100%;
      transition: width 5s linear;
    }.components_NextCallButton_nextCallButton_0cc.components_NextCallButton_isDisabled_6a4 {
    pointer-events: none;
  }.components_NextCallButton_nextCallButton_0cc.components_NextCallButton_isDisabled_6a4,.components_NextCallButton_nextCallButton_0cc.components_NextCallButton_isDisabled_6a4:hover {
      cursor: default;
      background-color: #cfeaf6;
    }

.components_Contact_contactRow_e93 {
  display: flex;
  min-height: 24px; /* 8px + *24px* + 4px + 16px + 8px */
  margin-bottom: 4px; /* 8px + 24px + *4px* + 16px + 8px */
  align-items: center;
}

.components_Contact_contactName_f00 {
  display: flex;
  align-items: center;
  min-width: 0; /* to allow flex child text overflow */
}

.components_Contact_phoneLabel_53b {
  line-height: 1;
  margin-left: 8px;
}

.components_Contact_truncate_ebe {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.components_Contact_contactIcon_fee {
  color: var(--colorTextMedium);
  margin-right: 8px;
}

.components_Contact_leadRow_d10 {
  align-items: center;
  display: flex;
  line-height: 16px;
}

.components_Contact_leadIcon_48b {
  margin-right: 8px;
}

.components_Contact_leadName_68d {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  height: 16px;
}

.components_Contact_leadName_68d:not(a) {
    color: var(--gray-40);
  }

.components_Contact_leadStatus_18e {
  margin-left: 8px;
}

.components_Contact_leadAction_591 {
  padding: 4px 0;
  cursor: pointer; /* no href */
}

.components_Contact_leadSeparator_6b9 {
  font-weight: var(--fontWeightBold);
  padding: 0 8px;
}

.components_Contact_transferredFrom_3a5 {
  display: flex;
  align-items: center;
  margin-left: 8px;
}

.components_Contact_transferredFromIcon_8e4 {
  line-height: 1;
}

.components_Contact_transferredFromIcon_8e4 svg {
    vertical-align: middle;
    width: 12px;
    height: 12px;
  }

.components_Contact_transferredFromAvatar_a18 {
  margin: 0 8px;
  flex-shrink: 0;
}

.components_DialerUpsellText_container_5eb {
  display: flex;
  align-items: center;
  margin-right: 16px;
}

.DialerUpsellPopover {
  text-align: left;
  max-width: 325px;
  width: 325px;
}

.DialerUpsellPopover__header {
  margin-top: 7px;
  margin-bottom: 15px;
  font-size: 16px;
  line-height: 20px;
  font-weight: var(--fontWeightBold);
}

.DialerUpsellPopover__separator {
  margin: 0 0 16px;
  border-top-color: #e5e5e5;
  border-bottom: 0 none;
}

.DialerUpsellPopover__copy {
  margin-bottom: 16px;
}

.DialerUpsellPopover__copy.is-last {
    margin-bottom: 7px;
  }

.DialerUpsellPopover__powerDialerCallingImageWrapper {
  display: block;
  position: relative;
  height: 0;
  padding-bottom: 13.4%;
  box-sizing: border-box;
  border-radius: 3px;
  border: 12px solid #f7f7f7;
  background-color: #f7f7f7;
}

.DialerUpsellPopover__powerDialerCallingImage {
  position: absolute;
  width: 100%;
}

.DialerUpsellPopover__helpLink {
  display: block;
  margin: 5px 0;
  text-align: left;
}

.CallBar__info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  flex: 0 0 60px;
  line-height: 1;
  border-right: 1px solid var(--borderDefault);
  padding: 8px 0;
  transition:
    color var(--callBarTransition),
    fill var(--callBarTransition);

  --color: var(--colorIconLight);
  --fill: --color;

  color: var(--color);
}

.CallBar__info svg {
    color: var(--fill);
  }

.CallBar__info--predictiveDialer .CallBar__infoText {
  color: var(--colorTextDefault);
}

.CallBar__infoImg {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
}

.CallBar__infoImg  > svg {
    width: 20px;
    height: 20px;
  }

.CallBar__infoImg--hungUp {
  margin: auto;
}

.CallBar__infoImg--hungUp svg {
    transform: rotate(135deg);
  }

.CallBar__infoImg--paused {
  margin: auto;
}

.CallBar__infoImg--paused svg {
    width: 24px;
    height: 24px;
  }
.CallBar__infoImg--predictiveDialer svg {
  color: var(--warningPrimaryColor);
  width: 24px;
  height: 24px;
}

.CallBar__infoText {
  line-height: 16px;
  font-size: 12px;
  font-weight: var(--fontWeightBold);
  text-transform: uppercase;
}
/**
 * Icon colors for Call states
 * NOTE: these are dependent on the class name(s) of the parent CallBar.
 * TODO: decouple from parent styles
 */
.CallBar--active .CallBar__info {
  --color: var(--colorTextSuccess);
  --fill: var(--fillSuccess);
}

.CallBar--active.is-dialer .CallBar__info {
  --color: var(--colorTextInformational);
  --fill: var(--fillInformational);
}

.CallBar--paused.is-dialer .CallBar__info {
  --color: var(--colorTextDefault);
  --fill: var(--colorIconDefault);
}

.CallBar--rejected .CallBar__info,
.CallBar--rejected.is-dialer .CallBar__info {
  --color: var(--colorTextDanger);
  --fill: var(--fillDanger);
}

.CallBar--closed.is-dialer .CallBar__info {
  --color: var(--colorIconLight);
  --fill: var(--colorIconLight);
}

.components_CallQualityIndicator_icon_8c2 {
  cursor: pointer;
  --color: var(--fillDanger);
  display: grid;
  place-content: center;
  height: 100%;
}

.components_CallQualityIndicator_container_34c {
  text-align: center;
  max-width: 280px;
}

/**
 * This is a custom button implementation to account for subtle size and content
 * differences in the call bar. It's possible this could be replaced with a normal
 * button atom, but it would need to account for new use cases. Alternatively,
 * the call bar design could be updated to more align with other buttons.
 */
.CallBarButton_button_37d {
  --transition: var(--callBarTransition, 250ms cubic-bezier(0.77, 0, 0.175, 1));
  --size: 28px;
  --svgSize: 14px;
  --bgColor: transparent;
  --bgColorHover: var(--bgButtonDefaultHover);
  --bgPressed: var(--bgButtonDefaultPressed);
  --colorFocus: var(--colorBlue20);
  --color: var(--colorTextDefault);

  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  gap: var(--spacing-12);

  height: var(--size);
  min-width: var(--size);
  margin: 0;
  padding: 0 var(--spacing-8);
  border: none;
  border-radius: calc(var(--size) / 2);
  color: var(--color);
  background: var(--bgColor);
  transition:
    background-color 200ms,
    width var(--transition);
}
.CallBarButton_button_37d svg {
    fill: var(--color);
    display: block;
    transition:
      transform var(--transition),
      fill var(--transition);
    width: var(--svgSize);
    height: var(--svgSize);
  }
.CallBarButton_button_37d:hover {
    background: var(--bgColorHover);
  }
.CallBarButton_button_37d:focus-visible {
    outline-color: var(--colorFocus);
  }
.CallBarButton_button_37d:active,.CallBarButton_button_37d:active:hover {
      background-color: var(--bgPressed);
    }
.CallBarButton_button_37d[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }
.CallBarButton_button_37d.CallBarButton_default_97d {
    --svgSize: 20px;
    --size: 40px;
  }
.CallBarButton_button_37d.CallBarButton_success_2b8,.CallBarButton_button_37d.CallBarButton_danger_aa3 {
    /* TODO: This can be changed to --color if UIText is given a way to force white */
    --colorTextDefault: var(--white);
  }
.CallBarButton_button_37d.CallBarButton_bordered_b0a {
    --bgColor: var(--surfaceBackgroundDefault);
    border: 1px solid var(--borderDefault);
  }
.CallBarButton_button_37d.CallBarButton_success_2b8 {
    --bgColor: var(--fillSuccess);
    --bgColorHover: color-mix(in srgb, #000 10%, var(--fillSuccess));
  }
.CallBarButton_button_37d.CallBarButton_danger_aa3 {
    --bgColor: var(--fillDanger);
    --bgColorHover: color-mix(in srgb, #000 10%, var(--fillDanger));
  }

.CallBarButton_text_fe9 {
  padding-right: 6px;
}

.CallBarButton_hangUp_b19.CallBarButton_disallowed_8f9.CallBarButton_danger_aa3 {
    --bgColor: color-mix(in srgb, var(--fillDanger) 50%, transparent);
    --bgColorHover: var(--bgColor);
  }

.CallBarButton_hangUp_b19 svg {
    transform: rotate(135deg);
  }

.CallRecordingToggle_base_990 {
  --badgeWidthStart: 40px;
  --horizontalPadding: 8px;
  --badgeWidthFull: calc(91px + var(--horizontalPadding) * 2);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  transition: width 200ms;
}

.CallRecordingToggle_base_990.CallRecordingToggle_statusInitial_265,.CallRecordingToggle_base_990.CallRecordingToggle_statusStarting_c7b {
    width: var(--badgeWidthStart);
  }

.CallRecordingToggle_base_990.CallRecordingToggle_statusRecording_5ca,.CallRecordingToggle_base_990.CallRecordingToggle_statusPausing_abe {
    width: var(--badgeWidthFull);
  }

:is(.CallRecordingToggle_base_990.CallRecordingToggle_statusRecording_5ca,.CallRecordingToggle_base_990.CallRecordingToggle_statusPausing_abe) .CallRecordingToggle_indicator_0ba {
      background-color: var(--bgDangerMuted);
      border-color: var(--bgDangerMuted);
    }

:is(.CallRecordingToggle_base_990.CallRecordingToggle_statusRecording_5ca,.CallRecordingToggle_base_990.CallRecordingToggle_statusPausing_abe) .CallRecordingToggle_separator_cad {
      background-color: var(--borderDangerMuted);
    }

:is(.CallRecordingToggle_base_990.CallRecordingToggle_statusRecording_5ca,.CallRecordingToggle_base_990.CallRecordingToggle_statusPausing_abe) .CallRecordingToggle_indicatorStatusText_65e {
      color: var(--colorTextDanger);
    }

.CallRecordingToggle_base_990.CallRecordingToggle_statusPaused_dd2,.CallRecordingToggle_base_990.CallRecordingToggle_statusResuming_095,.CallRecordingToggle_base_990.CallRecordingToggle_statusInitializing_f4b {
    width: var(--badgeWidthFull);
  }

:is(.CallRecordingToggle_base_990.CallRecordingToggle_statusPaused_dd2,.CallRecordingToggle_base_990.CallRecordingToggle_statusResuming_095,.CallRecordingToggle_base_990.CallRecordingToggle_statusInitializing_f4b) .CallRecordingToggle_indicator_0ba {
      background-color: var(--bgLightMuted);
      border-color: var(--borderLight);
    }

:is(.CallRecordingToggle_base_990.CallRecordingToggle_statusPaused_dd2,.CallRecordingToggle_base_990.CallRecordingToggle_statusResuming_095,.CallRecordingToggle_base_990.CallRecordingToggle_statusInitializing_f4b) .CallRecordingToggle_separator_cad {
      background-color: var(--borderDefault);
    }

:is(.CallRecordingToggle_base_990.CallRecordingToggle_statusPaused_dd2,.CallRecordingToggle_base_990.CallRecordingToggle_statusResuming_095,.CallRecordingToggle_base_990.CallRecordingToggle_statusInitializing_f4b) .CallRecordingToggle_indicatorStatusText_65e {
      color: var(--colorTextLight);
    }

.CallRecordingToggle_startRecordingButton_c64 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.CallRecordingToggle_startRecordingButton_c64:hover {
    background-color: var(--bgButtonBorderlessHover);
  }

.CallRecordingToggle_startRecordingButton_c64:active {
    background-color: var(--bgButtonBorderlessPressed);
  }

.CallRecordingToggle_indicator_0ba {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 91px;
  height: 32px;
  padding: 0 var(--spacing-4) 0 var(--spacing-8);
  border-radius: 100px;
  box-sizing: border-box;
  border: 1px solid transparent;
  animation: CallRecordingToggle_fadeIn_583 300ms forwards;
}

.CallRecordingToggle_indicatorStatusText_65e {
  font-size: 11px;
  font-weight: 600;
}

.CallRecordingToggle_separator_cad {
  display: block;
  flex: none;
  width: 1px;
  height: 12px;
  margin-right: var(--spacing-4);
  margin-left: var(--spacing-12);
}

.CallRecordingToggle_pauseIcon_90f {
  color: var(--colorIconLight);
}

.CallRecordingToggle_ackContent_9c6 {
  color: var(--colorTextLight);
}

.CallRecordingToggle_ackContent_9c6 p {
    margin: 0;
    margin-bottom: var(--spacing-8);
  }

/* TODO: Small icon buttons should be 24px in size. Remove this once it's fixed */
.CallRecordingToggle_loaderIconWrapper_fdf {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px;
  height: 26px;
}

.CallRecordingToggle_recordingDot_ffe {
  display: block;
  position: relative;
  width: 12px;
  height: 12px;
}

.CallRecordingToggle_recordingDot_ffe::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 7.5px;
    height: 7.5px;
    border-radius: 50%;
    background-color: var(--colorIconLight);
  }

.CallRecordingToggle_recordingPulse_69e::after {
    background-color: var(--fillDanger);
    animation: CallRecordingToggle_pulseDotOpacity_730 1s infinite alternate;
  }

@keyframes CallRecordingToggle_fadeIn_583 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes CallRecordingToggle_pulseDotOpacity_730 {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.3;
  }
}

.DialpadPopover_dialpad_97a {
  display: grid;
  grid-template-columns: repeat(3, 70px);
  gap: var(--spacing-4);
  padding: var(--spacing-8);
  color: var(--colorTextDefault);
}

.DialpadPopover_dialpad_97a .DialpadPopover_button_a9f {
    cursor: pointer;
    -webkit-user-select: none;
            user-select: none;
    display: flex;
    flex-direction: column;
    align-items: center;

    height: 50px;
    border: 1px solid var(--borderDefault);
    border-radius: 7px;
    padding-top: 10px;
  }

:is(.DialpadPopover_dialpad_97a .DialpadPopover_button_a9f):hover {
      background-color: var(--bgButtonDefaultHover);
    }

:is(.DialpadPopover_dialpad_97a .DialpadPopover_button_a9f) .DialpadPopover_key_2ea {
      font-size: 24px;
      line-height: 24px;
      font-weight: 700;
    }

.DialpadPopover_isPressed_d4a:is(.DialpadPopover_dialpad_97a .DialpadPopover_button_a9f) {
      background-color: var(--bgActive);
      border-color: var(--bgActive);
      color: var(--white);
      --colorTextLight: var(--white); /* Force UI text to white */
    }

.DialpadPopover_message_1ef {
  margin-top: var(--spacing-4);
  grid-column: span 3;
  display: flex;
  padding: var(--spacing-8);
  gap: var(--spacing-8);
  background-color: var(--bgLightMuted);
  color: var(--colorTextMedium);
}

.MicrophoneToggle_toggle_bd7 {
  display: grid;
  place-content: center;
  cursor: pointer;
  /* Only show one SVG (muted/unmuted) and swap on hover */
}

.MicrophoneToggle_toggle_bd7.MicrophoneToggle_isMuted_844:not(:hover) .MicrophoneToggle_iconUnmuted_6df,.MicrophoneToggle_toggle_bd7.MicrophoneToggle_isMuted_844:hover .MicrophoneToggle_iconMuted_494,.MicrophoneToggle_toggle_bd7:not(.MicrophoneToggle_isMuted_844):not(:hover) .MicrophoneToggle_iconMuted_494,.MicrophoneToggle_toggle_bd7:not(.MicrophoneToggle_isMuted_844):hover .MicrophoneToggle_iconUnmuted_6df {
    display: none;
  }

.MicrophoneToggle_iconUnmuted_6df g path {
    fill: var(--fillSuccess);
    clip-path: inset(calc((1 - var(--level, 0)) * 100%) 0% 0% 0%);
  }

.MicrophoneToggle_mutedPopover_dca {
  text-align: center;
  max-width: 280px;
}

.TransferCallPopover_userItem_ba3 {
  display: flex;
  gap: var(--spacing-8);
  width: 100%;
  align-items: center;
  height: 28px;
  padding: 0 var(--spacing-16);
  box-sizing: border-box;
  cursor: pointer;
}

.TransferCallPopover_userItem_ba3:hover {
    background-color: var(--bgMenuItemHover);
  }

.TransferCallPopover_popoverContent_91a {
  padding: var(--spacing-4) 0;
}

.TransferCallPopover_statusIconWrapper_fb3 {
  flex: none;
  margin-left: auto;
  display: flex;
  align-items: center;
}

.TransferCallPopover_numberItem_fb3 {
  display: flex;
  gap: var(--spacing-8);
  height: 44px;
  padding: 0 var(--spacing-16);
  box-sizing: border-box;
  cursor: pointer;
}

.TransferCallPopover_numberItem_fb3:hover {
    background-color: var(--bgMenuItemHover);
  }

.TransferCallPopover_numberIconWrapper_471 {
  flex: none;
  align-self: flex-start;
  width: 16px;
  height: 16px;
  padding-top: 6px;
}

.TransferCallPopover_numberInfo_6b2 {
  flex: 1;
  display: flex;
  max-width: 250px;
  justify-content: center;
  flex-direction: column;
  width: 100%;
}

.TransferCallPopover_numberInfoWrapper_6c0 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 16px;
}

.TransferCallPopover_groupHeading_8ef {
  /* Since this component is a custom made popover wannabe select/dropdown */
  /* I'm not reusing DropdownMenu.Subtitle which has a different spacing. */
  /* This is the same padding as Select minimal group heading. */
  padding: 4px 32px 6px 12px;
  box-sizing: border-box;
}

.TransferCallPopover_emptyState_475 {
  padding: var(--spacing-4);
  box-sizing: border-box;
  color: var(--colorTextLight);
  font-weight: 600;
  text-align: center;
}

.DialerSettingsButton_dialerSettingsButton_d17 {
  --orange: #fbb963;

  cursor: pointer;
  outline: 0;
  display: inline-flex;
  position: relative;
  height: 28px;
  padding: 0 var(--spacing-12) 0 0;
  align-items: center;
  color: var(--colorTextDefault);
  border: 1px solid var(--borderDefault);
  border-radius: 14px;
  background-color: var(--bgButtonDefaultEnabled);
}

.DialerSettingsButton_dialerSettingsButton_d17::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 4px solid var(--colorTextDefault);
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    line-height: 1;
    margin-left: 6px;
    margin-right: 2px;
    vertical-align: middle;
  }

.DialerSettingsButton_predictiveIcon_2ed {
  display: inline-block;
  padding: 1px var(--spacing-20) 1px var(--spacing-8);
  color: var(--white);
  border-radius: 14px 0 0 14px;
  background-color: var(--bgDefault);
}

.DialerSettingsButton_predictiveIcon_2ed.DialerSettingsButton_isOn_23d {
    background-color: var(--orange);
  }

.DialerSettingsButton_predictiveIcon_2ed svg {
    width: 14px;
    height: 14px;
    margin-top: 6px;
  }

.DialerSettingsButton_avatarOptions_5a7 {
  position: relative;
  margin-left: -12px;
  box-sizing: border-box;
  display: inline-block;
  z-index: 1;
  font-size: 9px;
  text-align: center;
  color: var(--white);
  padding: 3px;
  width: auto;
  padding-left: var(--spacing-12);
  color: var(--colorTextDefault);
  font-size: 14px;
  font-weight: var(--fontWeightBold);
  border-radius: 13px;
  background-color: var(--bgButtonDefaultEnabled);
}

.DialerSettingsButton_avatarOptions_5a7::after {
    display: none;
  }

.DialerSettingsButton_avatarOptions_5a7::before {
    right: -2px;
  }

.DialerSettingsButton_avatarText_b84 {
  position: relative;
  z-index: 1;
  border-radius: 50%;
  margin-left: -2px;
}

.DialerSettingsButton_avatarImgWrapper_101 {
  box-sizing: border-box;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: baseline;
  padding-right: var(--spacing-8);
  border-radius: 13px;
  margin-left: -12px;
  padding-top: 1px;
}

.DialerSettingsButton_avatarImgWrapper_101.DialerSettingsButton_hasRest_a7c {
    padding-right: 0;
    margin-right: -4px; /* needed to offset AvatarGroup's Rest spacing */
  }

.DialerSettingsPopover {
  max-width: 310px;
  width: 310px;
  padding: 0;
  text-align: left;
  border-radius: 3px;
}

.DialerSettingsPopover__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1px;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 20px;
  font-weight: var(--fontWeightBold);
}

.DialerSettingsPopover__separator {
  margin: 0 -14px 16px; /* eat through parent horizontal padding 14px */
  border-top-color: var(--borderDefault);
  border-bottom: 0 none;
}

.DialerSettingsPopover__subHeader {
  margin-bottom: 5px;
  font-size: 16px;
  line-height: 20px;
  font-weight: var(--fontWeightBold);
}

.DialerSettingsPopover__toggler {
  display: flex;
  align-items: flex-start;
}

.DialerSettingsPopover__togglerCopy {
  cursor: pointer;
  margin-bottom: 0;
  flex: 1;
  font-size: 13px;
  line-height: 16px;
  color: #555;
}

.DialerSettingsPopover__togglerToggle {
  margin-top: -5px;
  margin-left: 10px;
  padding-top: 0;
}

.DialerSettingsPopover__callerIdSelect {
  margin-top: 15px;
  margin-bottom: 5px;
  border-radius: 3px;
}

.DialerSettingsPopover__helpLink {
  display: inline-block;
  margin-top: 4px;
  margin-bottom: 14px;
}

.DialerSettingsPopover__helpLink.is-last {
  margin-bottom: 5px; /* Popover has bottom padding 9px -> total spacing 14px */
}

.DialerSettingsPopover__promo {
  margin-bottom: 16px;
  padding: 14px;
  color: var(--colorTextDefault);
  background-color: #ebf6fa;
}

.DialerSettingsPopover__promoLabel {
  vertical-align: text-bottom;
  font-size: 10px;
  text-transform: uppercase;
}

.DialerSettingsPopover__promoParagraph {
  font-size: 13px;
  line-height: 16px;
  margin-bottom: 10px;
}

.DialerSettingsPopover__linkCopy {
  font-size: 13px;
  cursor: pointer;
  font-weight: normal;
}

.DialerSettingsPopover__invitesUnavailable {
  font-size: 13px;
  font-weight: normal;
  color: #999;
}

.CallerIdSelect {
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  height: 52px;
  margin-bottom: 15px;
  border-radius: 5px;
  border: 1px solid var(--formBorder);
  background-color: var(--surfaceBackgroundDefault);
  box-shadow: rgba(0, 0, 0, 0.05) 0 1px 3px 0;
}

.CallerIdSelect--disabled {
  cursor: not-allowed;
  background-color: #eee;
}

.CallerIdSelect--disabled .CallerIdSelect__pickerPhone {
    cursor: not-allowed;
    background-color: var(--formBackground);
  }

.CallerIdSelect__picker {
  position: relative;
  margin-right: var(--spacing-12); /* offset picker from the right edge a bit */
  flex: 1;
}

.CallerIdSelect__pickerCurrent {
  color: var(--colorTextDefault);
  font-size: 16px;
}

.CallerIdSelect__label {
  color: #666;
  font-size: 12px;

  /* Makes sure truncation occurs for longer strings */
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}

.CallerIdSelect__pickerSelect {
  appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  background-color: transparent;

  /* No outline, we style the select our own way. */
}

.CallerIdSelect__pickerSelect:focus {
    outline: none;
  }

.CallerIdSelect__copy {
  display: flex;
  align-items: stretch;
  flex: 0 1 auto;
  border-radius: 0 5px 5px 0;
  border-left: 1px solid var(--formBorder);
  background: var(--formBackground);
}

.CallerIdSelect__copyButton {
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  min-width: 38px; /* Prevents layout shift before the icon loads */
  padding: 0 12px 0 10px;
  align-items: center;
  line-height: 0;
}

.CallerIdSelect__pickerPhone {
  pointer-events: none; /* Let clicks pass through to the underlying select */
  position: absolute;
  z-index: 1; /* Put the phone box just above the select */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  min-width: 0; /* Let the label inside it truncate https://css-tricks.com/flexbox-truncated-text/ */
  padding: var(--spacing-8) var(--spacing-12);
  border-radius: 5px;
  background-color: var(--formBackground);
}

.CallerIdSelect__pickerPhone::before,.CallerIdSelect__pickerPhone::after {
    content: '';
    display: inline-block;
    position: absolute;
    right: 2px;
    width: 0;
    height: 0;
    border-right: 3px solid transparent;
    border-left: 3px solid transparent;
  }

.CallerIdSelect__pickerPhone::before {
    top: 19px;
    border-bottom: 5px solid #555;
  }

.CallerIdSelect__pickerPhone::after {
    top: 26px;
    border-top: 5px solid #555;
  }

.PredictiveDialingNotSupportedModal_listItem_0d8 {
  padding: var(--spacing-4) 0;
  box-sizing: border-box;
}

.LegacyBox_box_058 {
  box-sizing: border-box;
}.LegacyBox_box_058 *,.LegacyBox_box_058 *::before,.LegacyBox_box_058 *::after {
    box-sizing: border-box;
  }

.UpgradePlanModal_content_350 {
  display: flex;
  flex-direction: column;
  max-width: 400px;
  gap: var(--spacing-12);
  margin: auto;
  padding: var(--spacing-16);
  align-items: center;
  text-align: center;
}

.RequestPausePopover {
  max-width: 194px;
  padding: 15px;
}

.RequestPausePopover__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1px;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 20px;
  font-weight: var(--fontWeightBold);
}

.RequestPausePopover__cta {
  margin-bottom: 8px;
}

.RequestPausePopover__copy {
  margin-bottom: 12px;
}

.RequestPausePopover__dangerCopy {
  color: var(--colorTextDanger);
  margin-bottom: 0;
}

.components_DialerStats_buttonWrapper_2b6 {
  display: flex;
  margin-top: auto;

  /* offset button padding so arrow is aligned */
  /* see https://github.com/closeio/close-ui/issues/1132 */
}.components_DialerStats_buttonWrapper_2b6  > * {
    margin: -6px 0 -6px -6px;
  }

.FailedCallsToPredictiveDialerUpsell {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  height: 32px;
  padding-left: 74px;
  align-items: center;
  line-height: 32px;
  background-color: var(--closeLightBlue);

  box-shadow:
    inset 0 1px 0 0 rgba(0, 0, 0, 0.1),
    0 1px 1px 0 rgba(0, 0, 0, 0.05);
}

.FailedCallsToPredictiveDialerUpsell__copy {
  flex: 1;
}

.FailedCallsToPredictiveDialerUpsell__cta {
  margin-left: 10px;
}

.FailedCallsToPredictiveDialerUpsell__rejectedIcon {
  margin-right: 8px;
}

.FailedCallsToPredictiveDialerUpsell__rejectedIcon svg {
    fill: var(--colorTextDanger);
    width: 15px;
  }

.FailedCallsToPredictiveDialerUpsell__dismissBtn {
  margin-left: auto;
  margin-right: 8px;
  padding: 0;
  line-height: 1;
  border: 0 none;
  background: transparent;
  opacity: 0.3;
}

.ObserverCallBar_user_dc0 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 60px;
  border-right: 1px solid var(--borderDefault);
}

.ObserverCallBar_ListenWhisperBargeGroupButton_group_441 {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, auto);
  background-color: var(--surfaceBackgroundDark);
  border-radius: 20px;
  padding: 7px;
  margin: 10px 16px 10px 8px;
}

.ObserverCallBar_ListenWhisperBargeGroupButton_group_441.ObserverCallBar_ListenWhisperBargeGroupButton_loading_370 {
    opacity: 0.8;
  }

/* fix specificity issues with RadioGroup#LabelWithBorder */

label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428:is(label) {
    background-color: transparent;
    border: 2px solid transparent;
    font-size: 13px;
    line-height: 16px;
    padding: 3px 8px 3px 12px;
    border-radius: 13px;
    box-shadow: none;
  }

label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428:is(label):hover,label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428:is(label):active,label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428:is(label).isSelected,label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_tempSelected_c25:is(label) {
      background-color: var(--surfaceBackgroundDefault);
    }

.ObserverCallBar_ListenWhisperBargeGroupButton_listen_129:is(label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428:is(label):hover,label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428:is(label):active,label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428:is(label).isSelected,label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_tempSelected_c25:is(label)) {
        color: var(--colorTextLight);
        /* TODO [darkmode] special case */
        border-color: var(--borderHover);
      }

.ObserverCallBar_ListenWhisperBargeGroupButton_whisper_a9d:is(label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428:is(label):hover,label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428:is(label):active,label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428:is(label).isSelected,label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_tempSelected_c25:is(label)) {
        border-color: var(--borderInformational);
        color: var(--fillInformational);
      }

.ObserverCallBar_ListenWhisperBargeGroupButton_barge_5f5:is(label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428:is(label):hover,label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428:is(label):active,label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428:is(label).isSelected,label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_tempSelected_c25:is(label)) {
        border-color: var(--borderSuccess);
        color: var(--colorTextSuccess);
      }

label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_tempSelected_c25.ObserverCallBar_ListenWhisperBargeGroupButton_listen_129:is(label) {
        background-color: color-mix(
          in srgb,
          var(--colorTextLight) 10%,
          transparent
        );
      }

label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_tempSelected_c25.ObserverCallBar_ListenWhisperBargeGroupButton_whisper_a9d:is(label) {
        background-color: var(--bgInformationalMuted);
      }

label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_tempSelected_c25.ObserverCallBar_ListenWhisperBargeGroupButton_barge_5f5:is(label) {
        background-color: var(--bgSuccessMuted);
      }

label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428:is(label).isSelected .Btn__icon,label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428:is(label) .Btn__icon {
      color: inherit;
      width: 14px !important;
      height: 14px !important;
      margin: 5px 8px;
    }

.RestrictionMessageContainer_RestrictionMessage_root_c3f {
  font-size: var(--fontSizeSmall);
  width: auto;
}

.RestrictionMessageContainer_RestrictionMessage_expanded_b1e .RestrictionMessageContainer_RestrictionMessage_expandableBody_04c {
  display: block;
}

.RestrictionMessageContainer_RestrictionMessage_modal_100,
.RestrictionMessageContainer_RestrictionMessage_modalStart_235,
.RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe {
  padding: var(--spacing-8);
  margin: 0;
  border-radius: 0;
  border-width: 0;
}

.RestrictionMessageContainer_RestrictionMessage_usersListContainer_d85 {
  margin: 0;
  background-color: var(--bgLight);
}

.RestrictionMessageContainer_RestrictionMessage_modalStart_235 {
  border-bottom-width: 1px;
}

.RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe {
  border-top-width: 1px;
}

.RestrictionMessageContainer_RestrictionMessage_expandableBody_04c {
  display: none;
  color: var(--colorTextDefault);
}

.RestrictionMessageContainer_RestrictionMessage_usersListContainer_d85 {
  margin: var(--spacing-8) calc(var(--spacing-16) * -1);
}

.RestrictionMessageContainer_RestrictionMessage_usersList_b4d {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.RestrictionMessageContainer_RestrictionMessage_userRow_c6e {
  border-top: 1px solid var(--borderDefault);
}

.RestrictionMessageContainer_RestrictionMessage_userRow_c6e:last-child {
    border-bottom: 1px solid var(--borderDefault);
  }

.RestrictionMessageContainer_RestrictionMessage_avatarCell_cfc,
.RestrictionMessageContainer_RestrictionMessage_nameCell_0b8,
.RestrictionMessageContainer_RestrictionMessage_phoneCell_f88,
.RestrictionMessageContainer_RestrictionMessage_emailCell_c05 {
  padding: var(--spacing-4);
}

.RestrictionMessageContainer_RestrictionMessage_nameCell_0b8 {
  font-weight: var(--fontWeightBold);
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.RestrictionMessageContainer_RestrictionMessage_avatarCell_cfc {
  padding-left: var(--spacing-16);
  width: 25px;
  box-sizing: content-box;
}

.RestrictionMessageContainer_RestrictionMessage_emailCell_c05 {
  width: 33%;
  padding-right: var(--spacing-16);
  max-width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.RestrictionMessageContainer_RestrictionMessage_phoneCell_f88 {
  width: 33%;
}

.RestrictionMessageContainer_RestrictionMessage_footer_a23 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.RestrictionMessageContainer_RestrictionMessage_footerBtn_d6f {
  margin-right: var(--spacing-16);
}

.RestrictionMessageContainer_RestrictionMessage_footerLink_dbf {
  line-height: 30px;
}

.RestrictionMessageContainer_RestrictionMessage_withMargin_458 {
  margin-bottom: var(--spacing-16);
}

.EmailSendAsSelect_identity_96b {
  display: flex;
  white-space: nowrap;
}

.EmailSendAsSelect_avatar_79c {
  margin-right: 8px;
  align-self: center;
  flex: 0 0 auto;
}

.EmailSendAsSelect_name_865 {
  font-size: var(--fontSizeSmall);
  margin-right: 6px;
}

.EmailSendAsSelect_email_24f {
  overflow: hidden;
  text-overflow: ellipsis;
}

.EmailSendAsSelect_loaderContainer_4c6 {
  display: flex;
  padding: 0 8px;
  align-items: center;
  height: 32px; /* match height of small select */
}

.EmailSendAsSelect_inlineButton_211 {
  line-height: 20px;
  vertical-align: middle;
}

.WorkflowSubscriptionModal_FormSection_section_2ce {
  padding: var(--modalBodyPadding);
  border-top: 1px solid var(--borderDefault);
  margin-top: -1px;
}

.WorkflowSubscriptionModal_OptionalAutomatedExceptionLabel_warningIcon_c13 {
  fill: var(--bgWarn);
}

.SingleUserSelect_button_b08 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.SingleUserSelect_button_b08.SingleUserSelect_isDisabled_b9a {
    pointer-events: none;
  }

/* equivalent of Btn__text in regular Button atoms */
.SingleUserSelect_buttonLabel_eff {
  overflow: hidden;
  text-overflow: ellipsis;
}

.SingleUserSelect_userSelectLabel_bbf {
  display: flex;
  align-items: center;
  gap: 8px;
}

.SingleUserSelect_groupMemberCount_e06 {
  display: inline-block;
  font-size: 12px;
  color: var(--colorTextLight);
  margin-left: 8px;
  align-self: end;
}

.BulkWorkflowSubscribeModal_BulkWorkflowSubscribeForm_fromToColumns_260 {
  display: flex;
  flex-wrap: wrap;
}

.BulkWorkflowSubscribeModal_BulkWorkflowSubscribeForm_fromToColumns_260  > * {
    flex: 1 0 calc(50% - var(--modalBodyPadding) * 2);
  }

.BulkWorkflowSubscribeModal_BulkWorkflowSubscribeForm_loaderContainer_899 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 0px;
  border-top: 1px solid var(--borderDefault);
  margin-top: -1px;
}

.BulkWorkflowSubscribeModal_BulkWorkflowSubscribeForm_fullWidth_e13 {
  flex: 1 0 calc(100% - var(--modalBodyPadding) * 2);
}

/* TODO: identical to WorkflowSubscriptionForm */
.BulkWorkflowSubscribeModal_BulkWorkflowSubscribeForm_fieldText_e96 {
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 6px 0; /* To match the height of the select */
}

.BulkEmailPreviewControls_main_484 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  white-space: nowrap;
  border-bottom: 1px solid var(--borderDefault);
}

.BulkEmailPreviewControls_title_4f7 {
  flex: 0 1 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.BulkEmailPreviewControls_totalIcon_7e6 {
  margin-right: 8px;
  color: var(--gray-50);
}

.BulkEmailPreviewControls_nav_7ed {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 8px;
  /* The icons in the nav are baked at 24px height with whitespace included, however we
     want our base nav height to be 16px. Pull them into place with a neg v margin. */
  margin: -3px 0;
}

.BulkEmailPreviewControls_toFrom_6e2 {
  background: var(--surfaceBackgroundMedium);
  padding: 0 16px;
}

.BulkEmailPreviewControls_to_0e6,
.BulkEmailPreviewControls_from_ca7 {
  padding: 8px 0;
  display: grid;
  grid-gap: 8px;
  grid-template-columns: 40px 1fr;
}

:is(.BulkEmailPreviewControls_to_0e6,.BulkEmailPreviewControls_from_ca7):not(:last-child) {
    border-bottom: solid 1px var(--borderLight);
  }

.UnsubscribeWarning_warningIcon_ba1 {
  color: var(--bgWarn);
}

.ToDetails_main_56f {
  background: var(--surfaceBackgroundLight);
  padding: var(--spacing-8) var(--spacing-12);
}

.ToDetails_withBorder_272 {
  border-bottom: 1px solid var(--borderDefault);
}

.ToDetails_to_46f {
  display: grid;
  grid-gap: var(--spacing-8);
  grid-template-columns: var(--spacing-48) 1fr auto;
  white-space: nowrap;
}

.ToDetails_emailNamePair_eb6 {
  display: grid;
  grid-row-gap: var(--spacing-4);
  grid-auto-flow: row;
}

.ToDetails_ToDetailsEmailRecipients_to_cd4 {
  display: grid;
  grid-gap: var(--spacing-8);
  grid-template-columns: var(--spacing-48) 1fr auto;
  white-space: nowrap;
}

.ToDetails_ToDetailsEmailRecipients_emailNamePair_785 {
  display: grid;
  grid-row-gap: var(--spacing-4);
  grid-auto-flow: row;
}

.ToDetails_ToDetailsLabel_label_11e {
  width: var(--spacing-48);
}

.ToDetails_ToDetailsUserInformation_userInfo_78e {
  display: flex;
  gap: var(--spacing-4);
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ToDetails_ToDetailsUserInformation_userInfoIcon_a32 {
  color: var(--gray-50);
}

.ToDetails_ToDetailsUserInformation_warningContainer_557 {
  width: 14px;
  display: flex;
  align-items: center;
}

.ToDetails_ToDetailsLeadName_leadName_97c {
  color: var(--gray-50);
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.ToDetails_ToDetailsLeadName_name_1e1 {
  max-width: 160px;
  text-overflow: ellipsis;
  line-height: 0;
  overflow: hidden;
  white-space: nowrap;
}

.WorkflowStepItem_item_b3f {
  --focusedBorderShadow: 0 0 3px var(--borderFocused);
  --focusedBorderColor: var(--borderFocused);

  border-bottom: 1px solid var(--borderDefault);
}

.WorkflowStepItem_item_b3f:last-child {
    border: none;
  }

.WorkflowStepItem_item_b3f.WorkflowStepItem_sent_e27 {
    color: var(--colorIconLight);
    background: var(--surfaceBackgroundMedium);
  }

.WorkflowStepItem_divider_da5 {
  --dividerBg: var(--borderDefault);

  display: block;
  height: 2px;
  background: var(--dividerBg);
  border-style: solid;
  border-color: var(--borderDefault);
  border-width: 1px 0;
}

.WorkflowStepItem_isExpandable_8b3 .WorkflowStepItem_header_e17 {
    cursor: pointer;
  }

.WorkflowStepItem_header_e17 {
  display: flex;
  align-items: center;
  padding: var(--spacing-12);
  box-sizing: border-box;
  border: 1px solid transparent;

  cursor: default;
}

.WorkflowStepItem_header_e17:focus {
    outline: none;
    border: 1px solid var(--focusedBorderColor);
    box-shadow: var(--focusedBorderShadow);
  }

.WorkflowStepItem_isDeleted_8d9 {
  position: relative;
}

.WorkflowStepItem_isDeleted_8d9::after {
    content: ' ';
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--colorTextMedium);
  }

.WorkflowStepItem_templateName_473 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.WorkflowStepItem_check_60a {
  margin-right: var(--spacing-4);
}

.WorkflowStepItem_toggle_ef6 {
  display: flex;
  transition: transform 200ms var(--standardCurve);
}

.WorkflowStepItem_toggle_ef6.WorkflowStepItem_isExpanded_86e {
    transform: rotate(90deg);
  }

.WorkflowStepItem_handle_3c9 {
  opacity: 0.3;
  line-height: 0;
}

.WorkflowStepItem_handle_3c9.WorkflowStepItem_sent_e27 {
    opacity: 0.9;
  }

.WorkflowStepItem_isExpandable_8b3 .WorkflowStepItem_handle_3c9 {
    opacity: 1;
  }

.WorkflowStepItem_stepNumber_c9e {
  min-width: 16px;
  opacity: 0.5;
  display: flex;
  justify-content: center;
}

.WorkflowStepItem_nameItem_8fa {
  overflow: hidden;
  gap: var(--spacing-8);
  flex: 1;
  display: flex;
  align-items: center;
}

.WorkflowStepItem_date_e67 {
  font-size: 90%;
  white-space: nowrap;
}

.WorkflowStepItem_clockIcon_f90 {
  vertical-align: middle;
  margin: -8px -8px -7px -8px; /* center vertically */
}

.WorkflowStepItem_svgIcon_0be {
  vertical-align: text-bottom;
  display: inline-block;
  color: var(--colorIconLight);
}

.WorkflowStepItem_delayExtendedHeader_c74 {
  display: block;
  font-weight: var(--fontWeightBold);
}

.WorkflowStepItem_bodyContainer_bd6 {
  padding: var(--spacing-4) var(--spacing-16) var(--spacing-24)
    var(--spacing-16);
}

.WorkflowStepItem_fixedWidthLabel_70a {
  width: 50px;
}

.WorkflowStepItem_reply_f6b {
  margin-right: var(--spacing-4);
  vertical-align: baseline;
}

.WorkflowStepItem_bodyTitle_f06 {
  font-weight: var(--fontWeightBold);
  margin-bottom: var(--spacing-16);
}

.WorkflowStepItem_delayDetails_52b {
  color: var(--colorTextLight);
}

.WorkflowStepItem_required_a20 {
  margin-left: var(--spacing-8);
  line-height: 1;
}

.WorkflowStepItem_deletedIcon_aa0 {
  margin: 0 6px;
}

.WorkflowStepItem_call_6b5,
.WorkflowStepItem_task_2f1,
.WorkflowStepItem_setLeadStatus_74c {
  display: flex;
}

.WorkflowStepItem_task_2f1 {
  align-items: center;
}

.WorkflowStepItem_skippedTag_65b {
  min-width: 80px;
  line-height: 0;
}

.WorkflowStepItem_attachmentsWrapper_255 {
  padding-top: var(--spacing-16);
  border-top: 1px solid var(--borderDefault);
}

.WorkflowStepItem_previewWrapper_d5a {
  background-color: var(--colorBgEmailEditor);
  /* Spread out the margins of the preview wrapper so we can provide a nice
   * dark-mode experience.
   */
  margin: calc(-1 * var(--spacing-8)) calc(-1 * var(--spacing-16));
  padding: var(--spacing-8) var(--spacing-16);
}

.TemplateInput_Reference_reference_532 {
  align-items: center;
  background-color: var(--bgInformationalMuted);
  border-radius: 3px;
  color: var(--colorTextInformational);
  display: inline-flex;
  font-size: var(--fontSizeSmall);
  height: 16px;
  justify-content: center;
  padding: 0 2px;
}

.TemplateInput_Reference_reference_532.TemplateInput_Reference_noBackground_c37 {
    background-color: transparent;
  }

.TemplateInput_Reference_token_a32 [role='button'] {
  background-color: var(--bgInformationalMuted);
}

:is(.TemplateInput_Reference_token_a32 [role='button']) .TemplateInput_Reference_reference_532 {
    background-color: transparent;
    padding: 0;
  }


  .Enrich_enrichIcon_ce0,.Enrich_enrichIcon_ce0 svg {
    width: 16px;
    height: 16px;
  }

.HTMLIframe_HTMLRealIframe_frame_c48 {
  margin: 0;
  white-space: pre-wrap;
  border: 0;
  width: 100%;
  height: 20px;
  background: transparent;
  /* https://stackoverflow.com/a/69671458/1493544 */
  color-scheme: normal;
}.HTMLIframe_HTMLRealIframe_frame_c48.HTMLIframe_HTMLRealIframe_isLoading_e60 {
    opacity: 0;
    pointer-events: none;
  }

.HTMLIframe_HTMLTextIframe_frame_8f8 {
  font-size: 13px;
}

.TruncateHeight_wrapper_56c {
  box-sizing: border-box;
  position: relative;
  align-self: stretch;
}

.TruncateHeight_content_7d2 {
  position: relative;
  overflow: hidden;
  transition: height 200ms var(--standardCurve);
}

.TruncateHeight_innerContent_eb2 {
  box-sizing: border-box;
}

.TruncateHeight_gradient_46e {
  pointer-events: none;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: min(50px, 50%);
  background: linear-gradient(
    to top,
    var(--surfaceBackgroundDefault) 0,
    transparent 100%
  );
}

.CallButton_callButton_9b4 {
  vertical-align: baseline; /* Make it nicely aligned when inlined in text. */
}

.richPlainText_Viewer_highlightText_ce2 {
  background-color: var(--bgHighlightMatchSelected);
}

.inputs_FieldInputWrapper_menuWrapper_322 {
  align-items: center;
  display: flex;
  gap: var(--spacing-4);
  height: var(--inputHeightSmall);
}

.forms_forms_wrapper_fb3 {
  /* same as the templates sidebar */
  max-height: 570px;
  overflow-y: auto;
  flex: 1;
}

.forms_forms_mainContainer_f49 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--modalBodyPadding);
  padding: var(--modalBodyPadding);
}

.forms_forms_notOnlyChoices_205 {
  border-top: 1px solid var(--borderLight);
  padding-top: var(--modalBodyPadding);
}

.ChoicesField_noBorder_0a9 .ChoicesField_hr_d02 {
  display: none;
}

.ChoicesField_hr_d02 {
  margin-left: -15px;
  margin-right: -15px;
  background: var(--surfaceBackgroundDark);
  border: 0;
  height: 1px;
}

.ChoicesField_label_12f {
  font-weight: var(--fontWeightBold);
}

.ChoicesField_list_c54 {
  margin-top: var(--spacing-12);
}

.ChoicesField_add_b98 {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-16);
}

.FieldReferenceMenu_FieldReferenceMenuItem_name_ae4 {
  white-space: nowrap;
}

.FieldReferenceMenu_FieldReferenceSectionItem_sectionWrapper_705:not(:first-of-type) {
  margin-top: var(--spacing-8);
}

.FieldReferenceMenu_itemListCard_288 {
  --cardWidth: 328px;
  --cardMaxHeight: 200px;

  background-color: var(--bgPopover);
  border-radius: 3px;
  border: 1px solid var(--borderDefault);
  box-shadow: var(--shadowLevel3);
}

.FieldReferenceMenu_itemListContainer_23a {
  max-height: var(--cardMaxHeight);
  overflow: auto;
  width: var(--cardWidth);
}

.TemplateInput_TemplateInput_root_b30 {
  background-color: var(--formBackground);
  border-radius: var(--baseInputBorderRadius);
  border: 1px solid var(--borderDefault);
  box-shadow: none;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex: 1;
  height: var(--inputHeightSmall);
  justify-content: center;
  overflow: auto;
  width: 100%;
}

.TemplateInput_TemplateInput_root_b30:focus-within {
    border-color: var(--borderFocused);
  }

.TemplateInput_TemplateInput_root_b30.TemplateInput_TemplateInput_error_b18:not(.TemplateInput_TemplateInput_disabled_699) {
    border-color: var(--borderDanger);
  }

.TemplateInput_TemplateInput_root_b30.TemplateInput_TemplateInput_disabled_699 {
    background-color: var(--formBackgroundDisabled);
    cursor: not-allowed;
  }

.TemplateInput_TemplateInput_root_b30.TemplateInput_TemplateInput_textarea_82d {
    height: auto;
    min-height: var(--inputHeightSmall);
    max-height: calc(4 * var(--inputHeightSmall));
    padding: var(--spacing-4) 0;
  }

.TemplateInput_TemplateInput_root_b30 * {
    box-sizing: border-box;
  }

.TemplateInput_TemplateInput_editor_4cd {
  position: relative;
}

.TemplateInput_TemplateInput_editor_4cd .ProseMirror {
    box-sizing: border-box;
    color: var(--colorTextDefault);
    font-size: var(--fontSizeBase);
    outline: none;
    padding: 0 var(--spacing-12);
    margin: 0;
    overflow-y: auto;
  }

.TemplateInput_TemplateInput_editor_4cd.TemplateInput_TemplateInput_text_626 .ProseMirror {
      overflow-x: auto;
      white-space: nowrap;
      scrollbar-width: none;
    }

:is(.TemplateInput_TemplateInput_editor_4cd.TemplateInput_TemplateInput_text_626 .ProseMirror)::-webkit-scrollbar {
        display: none;
      }

.TemplateInput_TemplateInput_editor_4cd.TemplateInput_TemplateInput_textarea_82d .ProseMirror {
      overflow-y: auto;
      word-break: break-word;
    }

.TemplateInput_TemplateInput_editor_4cd p {
    margin-bottom: 0;
  }

.TemplateInput_TemplateInput_editor_4cd.TemplateInput_TemplateInput_withManualMinHeight_dbb .ProseMirror {
      min-height: inherit;
    }

.TemplateInput_TemplateInput_editor_4cd.TemplateInput_TemplateInput_withRightIcon_224 {
    padding-right: var(--spacing-24);
  }

.TemplateInput_TemplateInput_rightIcon_c6e {
  align-items: center;
  display: flex;
  height: 100%;
  position: absolute;
  right: var(--spacing-8);
  color: var(--colorTextLight);
}

.TemplateInput_TemplateInput_empty_be1::before {
  content: attr(data-placeholder);
  color: var(--colorTextLight);
  pointer-events: none;
  float: left;
  height: 0;
}

.inputs_EnrichFieldInput_enrich_082 {
  align-items: center;
  background:
    linear-gradient(
        rgb(from var(--colorTextNeutralInvert) r g b / 80%),
        rgb(from var(--colorTextNeutralInvert) r g b / 80%)
      )
      padding-box,
    linear-gradient(
        167deg,
        rgb(from var(--fillInformational) r g b / 40%) 0%,
        rgb(from var(--fillDanger) r g b / 40%) 100%
      )
      border-box;
  border-radius: 7px;
  border: 1px solid transparent;
  display: grid;
  gap: var(--spacing-4);
  grid-template-columns: auto auto 1fr auto;
  height: 32px;
  padding: 0 var(--spacing-8);
  position: relative;
}

.inputs_EnrichFieldInput_error_9ac {
  background: var(--inputBg);
  border: 1px solid var(--colorTextDanger);
}

.inputs_MultiChoiceFieldInput_inputWrap_1a4 {
  background: var(--formBackground);
  border: 1px solid var(--formBorder);
  border-radius: var(--baseInputBorderRadius);
  cursor: pointer;
  flex: 1;
  padding: 6px var(--spacing-32) 6px var(--spacing-8);
  position: relative;
  min-height: 38px;
  width: 100%;
}

.inputs_MultiChoiceFieldInput_inputWrap_1a4:focus {
    border-color: var(--formBorderFocused);
  }

.inputs_MultiChoiceFieldInput_inputWrap_1a4.inputs_MultiChoiceFieldInput_error_625 {
    border-color: var(--borderDanger);
  }

.inputs_MultiChoiceFieldInput_inputWrap_1a4.inputs_MultiChoiceFieldInput_disabled_483 {
    background-color: var(--formBackgroundDisabled);
  }

.inputs_MultiChoiceFieldInput_clearButton_b18 {
  position: absolute;
  right: var(--spacing-4);
  top: 6px;
}

.inputs_MultiChoiceFieldInput_noItems_e0f {
  color: var(--colorTextLight);
}

.inputs_MultiChoiceFieldInput_manageButton_c16 {
  border: none;
  background: none;
  padding: var(--spacing-8);
  color: var(--colorTextDefault);
}

.inputs_MultiChoiceFieldInput_manageButton_c16:hover,.inputs_MultiChoiceFieldInput_manageButton_c16:focus {
    background: var(--bgMenuItemHover);
  }

.inputs_MultiChoiceFieldInput_menuItem_07a {
  padding: var(--spacing-8);
}

.inputs_NumberFieldInput_referenceInput_9ad {
  align-items: center;
  background-color: var(--formBackground);
  border-radius: var(--baseInputBorderRadius);
  border: 1px solid var(--borderDefault);
  box-shadow: none;
  box-sizing: border-box;
  display: flex;
  height: var(--inputHeightSmall);
  justify-content: space-between;
  overflow: auto;
  padding: 0 var(--spacing-4) 0 var(--spacing-12);
  width: 100%;
}.inputs_NumberFieldInput_referenceInput_9ad:focus-within {
    border-color: var(--borderFocused);
  }.inputs_NumberFieldInput_referenceInput_9ad.inputs_NumberFieldInput_error_5ec:not(.inputs_NumberFieldInput_disabled_e7e) {
    border-color: var(--borderDanger);
  }.inputs_NumberFieldInput_referenceInput_9ad.inputs_NumberFieldInput_disabled_e7e {
    background-color: var(--formBackgroundDisabled);
    cursor: not-allowed;
  }

.OpportunityStatusLabel_dot_622 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}

.OpportunityStatusLabel_dot_622.OpportunityStatusLabel_active_478 {
    background-color: var(--colorGold20);
  }

.OpportunityStatusLabel_dot_622.OpportunityStatusLabel_won_dc2 {
    background-color: var(--colorGreen20);
  }

.OpportunityStatusLabel_dot_622.OpportunityStatusLabel_lost_22b {
    background-color: var(--bgDefault);
  }

.OpportunityStatusLabel_statusLabel_507 {
  max-width: 275px;
}

/* eat into space from checkmark and cover it
   TODO: consider built-in group empty state handling for Selects? */
.OpportunityStatusesSelect_emptyState_f07 {
  position: relative;
  z-index: 1;
  background-color: var(--white);
  margin-left: -40px;
  padding-left: var(--spacing-12);
}

.FieldInput_FieldInput_field_a47 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

@media (hover: hover) {
    .FieldInput_FieldInput_field_a47 .FieldInput_FieldInput_delete_5af {
      /* Using opacity so that the button is still focusable */
      opacity: 0;
    }
      :is(.FieldInput_FieldInput_field_a47:hover,.FieldInput_FieldInput_field_a47:focus-within) .FieldInput_FieldInput_delete_5af {
        opacity: 1;
      }
  }

.FieldInput_FieldInput_label_87e {
  align-items: center;
  display: grid;
  grid-template-columns: auto auto 1fr;
}

.FieldInput_FieldInput_label_87e label {
    margin: 0;
  }

.WorkflowStepItem_RunAsPreviewAvatar_icon_69d {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1px solid var(--borderDefault);
  color: var(--colorIconLight);
}

.WorkflowStepItem_RunAsPreviewAvatar_icon_69d svg {
    width: 10px;
    height: 10px;
  }

.WorkflowStepItem_RunAsPreviewAvatar_helpCircleIcon_38f {
  display: flex;
  color: var(--colorIconLight);
}

.WorkflowStepItem_RunAsPreviewAvatar_helpCircleIcon_38f svg {
    width: 18px;
    height: 18px;
  }

.ContentLoader_contentLoader_810 {
  min-height: 50px;
}

.ContentLoader_content_ffa {
  transition: all 200ms var(--standardCurve);
}

.ContentLoader_active_70a {
  position: relative;
}

.ContentLoader_active_70a .ContentLoader_content_ffa {
    opacity: 0;
    pointer-events: none;
    height: 0;
  }

.ContentLoader_spinnerWrapper_72f {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  z-index: 1;
  align-items: center;
  justify-content: center;
  color: var(--colorIconLight);
}

.ContentLoader_spinner_98d {
  margin-right: 5px;
}

.WorkflowSubscriptionModal_WorkflowsLoadingModalBody_loaderContainer_8cf {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

.Screen {
  padding: 0 !important; /* overwrite .app-content 20px padding */
}.Screen.is-fullHeight  > div:not(.dockedElement) {
      display: flex;
      width: 100%;
    }

.FilterTokensBar_main_da4 {
  border-bottom: 1px solid var(--borderDefault);
  background-color: var(--surfaceBackgroundDefault);
}

.FilterTokensBar_linkToOldPage_432 {
  color: var(--gray-40);
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.FilterTokensBar_controls_a3b {
  background: var(--surfaceBackgroundDefault);
  height: 40px;
  box-sizing: border-box;
}

.FilterTokensBar_filtersContainer_88d {
  width: 100%;
  flex: 0 0 auto;
}

.FilterTokensBar_filtersContainer_88d.FilterTokensBar_hidden_c0b {
    display: none;
  }


  .AISearchNotes_generatedNotesStyles_ae5 p {
    font-weight: 700;
    font-size: 14px;
    color: var(----colorTextDefault);
  }.AISearchNotes_generatedNotesStyles_ae5 ul {
    color: var(--colorTextMedium);
  }


  /* Badge height is higher than line-height when button is small. *//* This is to make sure the badge is vertically centered. */.FilterTokensBar_Buttons_filtersButton_ea4 .Btn__text {
    display: flex;
    gap: var(--spacing-8);
  }.FilterTokensBar_Buttons_filtersButton_ea4 svg {
    transform: rotate(0);
    transition: transform 0.1s ease-in;
  }.FilterTokensBar_Buttons_filtersButton_ea4.FilterTokensBar_Buttons_open_86a svg {
      transform: rotate(90deg);
    }

.FilterTokensBar_MatchBar_matchBarContainer_146 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-8) var(--spacing-16);
  border-top: 1px solid var(--borderDefault);
  border-bottom: 1px solid var(--borderLight);
  background-color: var(--bgLightMuted);
  font-size: var(--fontSizeSmall);
}

.FilterTokensBar_MatchBar_matchBarContainer_146.FilterTokensBar_MatchBar_withMinWidth_297 {
    /* So filters can be horizontally scrollable on smaller screens rather than taking */
    /* a lot of space vertically */
    min-width: 600px;
  }

.FilterTokensBar_MatchBar_matchBar_581 {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
}

.FilterTokensBar_MatchBar_triggerMatchBarRow_866 {
  display: flex;
  gap: var(--spacing-4);
  flex-direction: row;
  align-items: center;

  /* match height of inputs within to ensure consistent height regardless of if there are inputs or not */
  min-height: var(--inputHeightSmall);
}

.FilterTokensBar_MatchSelect_wrapper_1eb {
  max-width: 100px;
}

.FilterTokensBar_MatchSelect_item_e7b {
  display: grid;
  row-gap: 4px;
  max-width: 160px;
  margin: 2px 0;
}

.FilterTokensBar_MatchSelect_label_7f1 {
  font-size: 14px;
  line-height: 16px;
}

.FilterTokensBar_MatchSelect_description_31f {
  color: var(--colorTextLight);
}

.FilterTokensBar_MatchSelect_description_31f,
.FilterTokensBar_MatchSelect_legend_d79 {
  font-size: 13px;
  line-height: 16px;
}

.Operator_operator_2ec {
  font-size: 9px;
  color: var(--colorTextMedium);
  display: inline-block;
  background: var(--bgDefault);
  padding: 0px 8px;
  border-radius: 16px;
  text-transform: uppercase;
  font-weight: var(--fontWeightBold);
  line-height: 16px;
}.Operator_operator_2ec.Operator_token_b69 {
    font-size: 10px;
    color: var(--colorTextDefault);
  }

.FilterTokensBar_MultiRowTokensDisplay_controls_47a {
  height: 40px;
  box-sizing: border-box;
}

.FilterTokensBar_MultiRowTokensDisplay_controls_47a.FilterTokensBar_MultiRowTokensDisplay_withExtraContent_7b0 {
    justify-content: space-between;
  }

@media screen and (max-width: 767px) {

.FilterTokensBar_MultiRowTokensDisplay_controls_47a.FilterTokensBar_MultiRowTokensDisplay_withExtraContent_7b0 {
      height: auto;
      gap: 12px;
      justify-content: start;
      padding-top: var(--spacing-8);
      padding-bottom: var(--spacing-8);
  }
    }

.FilterTokensBar_MultiRowTokensDisplay_scrollContainer_9ac {
  display: flex;
  flex-direction: column;
  overflow: auto;
  scrollbar-width: none;
}

.FilterTokensBar_MultiRowTokensDisplay_scrollContainer_9ac::-webkit-scrollbar {
    display: none;
  }

.Token_name_b18 {
  display: flex;
}

.Token_filterToken_d49 {
  display: grid;
  gap: 4px;
  grid-auto-flow: column;
  align-items: center;
}

.Token_truncate_0d2 {
  display: block;
  max-width: 200px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.Token_badge_030 {
  line-height: 0;
}

.TokenType_graphicalTokens_value_c5f {
  --max-width: 150px;

  font-weight: var(--fontWeightBold);
  max-width: var(--max-width);
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
}

.TokenType_graphicalTokens_dateTimeCustomWidth_8bd > .TokenType_graphicalTokens_value_c5f {
  --max-width: 250px;
}

.FilterTokensBar_FilterGroup_group_348 {
  --height: 28px;
  --itemMargin: 2px 0 2px 8px;
}

.FilterTokensBar_FilterGroup_matchSelect_ab1 {
  margin: var(--itemMargin);
  height: 28px;
  display: flex;
  align-items: center;
}

.FilterTokensBar_FilterGroup_tokens_205 {
  display: flex;
  flex-wrap: wrap;

  /* When the group has other groups, we change the flex direction to column and */
  /* add a pseudo-element besides every inner group for showing a tree-like UI. */
}

.FilterTokensBar_FilterGroup_tokens_205.FilterTokensBar_FilterGroup_nested_49f {
    flex-direction: column;
    width: 100%;
  }

.FilterTokensBar_FilterGroup_tokens_205.FilterTokensBar_FilterGroup_nested_49f .FilterTokensBar_FilterGroup_group_348 {
      position: relative;
      margin-left: 16px;
      padding-left: 29px;
      border-left: 1px solid var(--borderDefault);
      box-sizing: border-box;
    }

:is(.FilterTokensBar_FilterGroup_tokens_205.FilterTokensBar_FilterGroup_nested_49f .FilterTokensBar_FilterGroup_group_348):last-of-type {
        border-left: 1px solid transparent;
      }

:is(.FilterTokensBar_FilterGroup_tokens_205.FilterTokensBar_FilterGroup_nested_49f .FilterTokensBar_FilterGroup_group_348)::before {
        content: '';
        position: absolute;
        top: -4px;
        left: -1px;
        height: 24px;
        width: 20px;
        border-left: 1px solid var(--borderDefault);
        border-bottom: 1px solid var(--borderDefault);
      }

.FilterTokensBar_FilterGroup_break_474 {
  flex-basis: 100%;
  height: 0;
}

.FilterTokensBar_FilterGroup_tokenWrapper_632 {
  margin: var(--itemMargin);
  display: flex;
  align-items: center;
}

.FilterTokensBar_FilterGroup_addBtn_aa8,
.FilterTokensBar_FilterGroup_inlineButtons_0e5,
.FilterTokensBar_FilterGroup_groupOperator_359 {
  height: var(--height);
  display: flex;
  align-items: center;
  margin: var(--itemMargin);
}

.FilterTokensBar_FilterGroup_lastTokenWrapper_c54 {
  display: flex;
  align-items: center;
}

.FilterTokensBar_FilterGroup_queryOperator_42c {
  height: var(--height);
  display: flex;
  align-items: center;
  margin-right: 8px;
}

.FilterTokensBar_FilterGroup_tooltipLine_cb4 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.FilterTokensBar_FilterGroup_tokensContainer_158 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

.FilterTokensBar_FilterGroup_group_348:hover  > .FilterTokensBar_FilterGroup_addGroupBtn_797 {
    opacity: 1;
  }

.FilterTokensBar_FilterGroup_tokensContainer_158:hover  > .FilterTokensBar_FilterGroup_inlineButtons_0e5,.FilterTokensBar_FilterGroup_tokensContainer_158:hover  > .FilterTokensBar_FilterGroup_tokens_205 > .FilterTokensBar_FilterGroup_lastTokenWrapper_c54 > .FilterTokensBar_FilterGroup_inlineButtons_0e5,.FilterTokensBar_FilterGroup_tokensContainer_158:hover  > .FilterTokensBar_FilterGroup_tokens_205 > .FilterTokensBar_FilterGroup_inlineButtons_0e5 {
    opacity: 1;
  }

:is(.FilterTokensBar_FilterGroup_tokensContainer_158:hover > .FilterTokensBar_FilterGroup_inlineButtons_0e5,.FilterTokensBar_FilterGroup_tokensContainer_158:hover > .FilterTokensBar_FilterGroup_tokens_205 > .FilterTokensBar_FilterGroup_lastTokenWrapper_c54 > .FilterTokensBar_FilterGroup_inlineButtons_0e5,.FilterTokensBar_FilterGroup_tokensContainer_158:hover > .FilterTokensBar_FilterGroup_tokens_205 > .FilterTokensBar_FilterGroup_inlineButtons_0e5)  > .FilterTokensBar_FilterGroup_removeGroupBtn_872 {
      opacity: 0.25;
    }

.FilterTokensBar_FilterGroup_addGroupBtn_797,
.FilterTokensBar_FilterGroup_inlineButtons_0e5,
.FilterTokensBar_FilterGroup_removeGroupBtn_872 {
  transition: opacity 200ms var(--standardCurve);
  opacity: 0;
}

:is(.FilterTokensBar_FilterGroup_addGroupBtn_797,.FilterTokensBar_FilterGroup_inlineButtons_0e5,.FilterTokensBar_FilterGroup_removeGroupBtn_872):hover {
    opacity: 1 !important;
  }

.FilterTokensBar_FilterGroupTitle_groupTitle_500 {
  line-height: 28px;
  display: flex;
  align-items: center;
  justify-items: start;
  flex: 0 0 auto;
}.FilterTokensBar_FilterGroupTitle_groupTitle_500  > span {
    color: var(--colorTextMedium);
  }.FilterTokensBar_FilterGroupTitle_groupTitle_500:first-child::first-letter {
    text-transform: uppercase;
  }

.FilterTokensBar_Group_group_39f {
  display: flex;
  font-size: 13px;
  align-items: center;
  flex-wrap: wrap;
  padding-bottom: var(--spacing-4);
}.FilterTokensBar_Group_group_39f .FilterTokensBar_Group_minWidth_71d {
    /* So filters can be horizontally scrollable on smaller screens rather than taking */
    /* a lot of space vertically */
    min-width: 600px;
  }

.SearchResultsLimit_root_c82 {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  flex-shrink: 0;
  padding: 0 var(--spacing-8);
}

.SearchResultsLimit_root_c82.SearchResultsLimit_withIcon_ed9 {
    padding: 0;
  }

.SearchResultsLimit_popoverContent_49a {
  padding: var(--spacing-12);
  position: relative;
}

.SearchResultsLimit_clearButtonContainer_60f {
  position: absolute;
  right: var(--spacing-12);
  top: var(--spacing-12);
}

.CallDispositionIcon_root_d34 {
  display: inline-flex;
  align-items: center;
}

.CallDispositionIcon_root_d34 svg {
    width: 16px;
    height: 16px;
  }

.CallDispositionIcon_rotate270_bed svg {
    transform: rotate(-90deg);
  }

.CallDispositionIcon_rotate180_6b5 svg {
    transform: rotate(180deg);
  }

.CallDispositionIcon_reached_61f {
  fill: var(--successPrimaryColor);
  color: var(--successPrimaryColor);
}

.CallDispositionIcon_unreached_6af {
  fill: var(--failurePrimaryColor);
  color: var(--failurePrimaryColor);
}

.CallDispositionIcon_error_386 {
  color: var(--failurePrimaryColor);
  margin-right: 1px;
}

.CallDispositionIcon_abandoned_966 {
  fill: var(--warningPrimaryColor);
  color: var(--warningPrimaryColor);
}

.CallDispositionIcon_voicemailDropped_f4f {
  /* No styles */
}

.CallDispositionIcon_gray_d6f {
  fill: var(--colorIconLight);
  color: var(--colorIconLight);
}

.CallDispositionIcon_fixedWidth_180 {
  margin-right: 1px;
}

.CallDispositionIcon_fixedWidth_180 svg {
    width: 15px;
  }

.SMSSummary_nobr_cbb {
  align-items: center;
  display: flex;
  gap: var(--spacing-4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.SMSSummary_icon_8a6 {
  color: var(--colorIconLight);
}

.ResultsTitle_title_464 {
  display: flex;
}

.ResultsTitle_nonSavedTitle_df2 {
  color: var(--colorTextMedium);
}

.ActivitiesSearchSelectionScreen_root_933 {
  margin: 80px auto 0 auto;
  width: 100%;
  max-width: 560px;
  background-color: var(--surfaceBackgroundDefault);
  border: 1px solid var(--borderDefault);
  border-radius: var(--borderRadiusMedium);
  padding: var(--spacing-24);
}

.ActivitiesSearchSelectionScreen_root_933,.ActivitiesSearchSelectionScreen_root_933 * {
    box-sizing: border-box;
  }

.ActivitiesSearchSelectionScreen_subtitle_9ad {
  color: var(--colorTextMedium);
  font-size: var(--fontSizeBase);

  line-height: 21px;
}

.ActivitiesSearchSelectionScreen_activityTypes_dd8 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-8);
  margin-top: var(--spacing-16);
}

.ActivityTypeCardButton_root_5ac {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-16);
  border: 1px solid var(--borderLight);
  border-radius: var(--borderRadiusMedium);

  color: var(--colorTextDefault);
  -webkit-text-decoration: none;
  text-decoration: none;
}.ActivityTypeCardButton_root_5ac:hover {
    background-color: var(--bgMenuItemHover);
  }

.CustomActivitySelectorCard_root_555 {
  padding: var(--spacing-16);
  border: 1px solid var(--borderLight);
  border-radius: var(--borderRadiusMedium);

  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.CustomActivitySelectorCard_item_796 {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-12);
  box-sizing: border-box;
  color: var(--colorTextDefault);
  -webkit-text-decoration: none;
  text-decoration: none;
}

.CustomActivitySelectorCard_input_1fd {
  height: 26px;
  font-size: var(--fontSizeBase);
}

.MobileActivityTypePicker_item_07e {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--spacing-24) 0 var(--spacing-12);
  box-sizing: border-box;
  color: var(--colorTextDefault);
  -webkit-text-decoration: none;
  text-decoration: none;
}


  .SmartViewSelect_button_8e5.SmartViewSelect_isDisabled_53e {
    pointer-events: none;
  }.SmartViewSelect_button_8e5 svg {
    width: 16px;
    height: 16px;
  }

.CallDirectionFilter_button_07f {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  border-radius: 7px;
}

.CallDirectionFilter_button_07f .Btn__text {
    flex: 1;
  }

.CallDirectionFilter_button_07f.CallDirectionFilter_isDisabled_c10 {
    pointer-events: none;
  }

.CallDirectionFilter_button_07f svg {
    width: 16px;
    height: 16px;
  }

.CallDirectionFilter_label_be4 label {
    margin: 0;
  }


  .DurationFilter_label_8da label {
    margin: 0;
  }

.DurationFilter_operatorSelect_b56 {
  width: 110px;
}

.DurationFilter_operatorSelect_b56.DurationFilter_compact_b57 {
    flex: 1;
    width: auto;
  }

.DurationFilter_durationInputContainer_f43 {
  position: relative;
}

.DurationFilter_durationInput_603 {
  width: 120px;
}

.DurationFilter_durationInput_603.DurationFilter_compact_b57 {
    flex: 1;
    width: auto;
  }

.DurationFilter_minutesLabel_b94 {
  pointer-events: none;
  position: absolute;
  right: 8px;
  text-align: right;
  top: 6px;
}

.ActivitiesFilters_HasRecordingFilter_recordingToggle_261 {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  gap: var(--spacing-8);
  justify-content: space-between;
}

.ActivitiesFilters_HasRecordingFilter_recordingToggleText_62d {
  align-items: center;
  display: flex;
  gap: var(--spacing-4);
  flex: 1;
}

.ActivitiesFilters_HasRecordingFilter_hintIcon_7d0 {
  margin: 0;
}

.ActivitiesFilters_HasRecordingFilter_withOutline_4a2 {
  border-radius: 7px;
  border: 1px solid var(--borderDefault);
  min-height: 40px;
  padding: var(--spacing-12);
}

.subcomponents_HelpText_addIcon_85d {
  color: var(--colorLinkDefault);
}

.subcomponents_HelpText_hintIcon_420 {
  color: var(--colorIconLight);
}

.subcomponents_PhraseInput_phraseText_9db {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subcomponents_PhraseInput_phraseInput_922 {
  background-color: var(--surfaceBackgroundDefault);
  border: none;
  color: var(--colorTextDefault);
  height: 24px;
  flex: 1;
  font-size: var(--fontSizeSmall);
  line-height: 16px;
  min-width: 250px;
}

.subcomponents_PhraseInput_phraseInput_922:focus {
    outline: none;
  }

.subcomponents_PhraseInput_phraseInput_922::placeholder {
    color: var(--colorTextLight);
  }

.subcomponents_PhraseInput_phraseInput_922:disabled {
    background-color: var(--formBackgroundDisabled);
  }

.PhraseSearchInput_inputWrapper_fb5 {
  background-color: var(--surfaceBackgroundDefault);
  border: 1px solid var(--borderLight);
  border-radius: 7px;
  box-sizing: border-box;
  display: flex;
  min-height: 42px;
  padding: var(--spacing-8) var(--spacing-12);
  gap: 8px;
}

.PhraseSearchInput_inputWrapper_fb5:focus-within {
    border: 1px solid var(--formBorderFocused);
    outline: var(--borderFocused) solid 1px;
  }

.PhraseSearchInput_operatorWrapper_a11 {
  text-align: center;
  width: 100px;
}

.PhraseSearchInput_disabledWrapper_64d {
  background-color: var(--formBackgroundDisabled);
}


  .SmartViewFilter_label_784 label {
    margin: 0;
  }

.SmartViewFilter_fullWidthTrigger_d67 {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
}

.SmartViewFilter_fullWidthTrigger_d67 .Btn__text {
    flex: 1;
  }


  .TalkTimeFilter_label_d56 label {
    margin-bottom: 0;
  }

.TalkTimeFilter_hintIcon_8e3 {
  color: var(--colorIconLight);
}

.TalkTimeFilter_operatorSelect_e64 {
  width: 160px;
}

.TalkTimeFilter_operatorSelect_e64.TalkTimeFilter_compact_42c {
    flex: 1;
    width: auto;
  }

.TalkTimeFilter_talkTimeInputContainer_c80 {
  position: relative;
}

.TalkTimeFilter_talkTimeInput_a1b {
  width: 55px;
}

.TalkTimeFilter_talkTimeInput_a1b.TalkTimeFilter_compact_42c {
    flex: 1;
    width: auto;
  }

.TalkTimeFilter_percentageLabel_729 {
  pointer-events: none;
  position: absolute;
  right: 8px;
  text-align: right;
  top: 50%;
  transform: translateY(-50%);
}


  .UserOrGroupFilter_label_30e label {
    margin: 0;
  }

.UserOrGroupFilter_fullWidthTrigger_764 {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
}

.UserOrGroupFilter_fullWidthTrigger_764  > span {
    flex: 1;
  }

.ConversationsFilters_wrapper_cfe {
  max-width: 840px;
  width: 100%;
  margin: 0 auto;
  padding: var(--spacing-16) var(--spacing-20);
  box-sizing: border-box;
  background-color: var(--surfaceBackgroundMedium);
}

@media screen and (max-width: 767px) {

.ConversationsFilters_wrapper_cfe {
    padding: 0;
}
  }

.ConversationsFilters_filtersCountBadge_604 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--white);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  border-radius: 50%;
  background-color: var(--colorLinkDefault);
  font-size: 11px;
  margin: 0 5px 0 -5px;
}

.ConversationsFilters_popoverContainer_3d3 label {
    margin: 0;
  }

.ConversationsHistory_container_282 {
  max-width: 840px;
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--spacing-20);
  box-sizing: border-box;
}

@media screen and (max-width: 767px) {

.ConversationsHistory_container_282 {
    padding: 0;
}
  }

.ConversationsHistory_list_188 {
  position: relative;
  display: flex;
  flex-direction: column;
  row-gap: var(--spacing-16);
}

.ConversationsHistory_list_188:not(.ConversationsHistory_isEmpty_853)::before {
    content: '';
    display: block;
    position: absolute;
    margin: 0 0 0 17px;
    height: 100%;
    width: 1px;
    background: var(--borderDefault);
  }

@media screen and (max-width: 767px) {
    .ConversationsHistory_list_188::before {
      display: none;
    }
  }

.ConversationsHistory_conversationSkeleton_9bc {
  position: relative;
  overflow: hidden;
  max-width: 800px;
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-16);
}

.ConversationsHistory_conversationSkeletonActivityIcon_acd {
  background-color: var(--surfaceBackgroundMedium);
}

.ConversationsHistory_converationSkeletonContent_459 {
  flex: 1;
  background-color: var(--surfaceBackgroundDefault);
  border-radius: var(--activityBorderRadius);
}

.ConversationsHistory_filterTrayButton_f07 {
  position: relative;
}

.ConversationsHistory_appliedFiltersBadge_e6f {
  pointer-events: none;
  display: flex;
  position: absolute;
  right: 0;
  bottom: -2px;
  border-radius: 50%;
  border: 2px solid var(--white);
}

.LiveCallsFilters_wrapper_184 {
  background-color: var(--surfaceBackgroundDefault);
  border-bottom: 1px solid var(--borderDefault);
}.LiveCallsFilters_wrapper_184.LiveCallsFilters_compact_da4 {
    background-color: unset;
  }

.UpcomingMeetingCard_root_c87 {
  display: block;
}

.UpcomingMeetingCard_root_c87.UpcomingMeetingCard_loading_c2f {
    opacity: 0.5;
  }

/* override link styling */

.UpcomingMeetingCard_root_c87,.UpcomingMeetingCard_root_c87:hover,.UpcomingMeetingCard_root_c87:focus {
    color: inherit;
    -webkit-text-decoration: none;
    text-decoration: none;
  }

.UpcomingMeetingCard_dash_9fb {
  border-radius: 7px;
  background-color: var(--colorBgMeetingBar);
  width: 6px;
}

.UpcomingMeetingCard_dash_9fb.UpcomingMeetingCard_past_175 {
    background-color: var(--borderDefault);
  }

.UpcomingMeetingCard_dash_9fb.UpcomingMeetingCard_loading_c2f {
    background-color: var(--bgSkeleton);
  }

.UpcomingMeetingCard_title_4ae {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.UpcomingMeetingCard_leadName_40d {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
}

.UpcomingMeetingCard_plusMore_d2b {
  white-space: nowrap;
}

.UpcomingMeetingCard_badge_c8e {
  color: var(--colorTextBadgeMeetingMuted);
  background-color: var(--colorBgBadgeMeetingMuted);
}

.ConversationsLive_skeleton_callsSection_7d7 {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
}

.ConversationsLive_skeleton_meetingsSidebar_3ec {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 320px;
}

.FileViewerButton_fileViewerButton_f7b {
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--colorWhite);
  width: var(--inputHeightSmall);
  height: var(--inputHeightSmall);
  outline: none;
  padding: 0;
}

.FileViewerButton_fileViewerButton_f7b.FileViewerButton_disabled_680 {
    pointer-events: none;
    opacity: 0.5;
  }

.FileViewerButton_fileViewerButton_f7b.FileViewerButton_floating_3aa {
    background-color: var(--colorGray88);
  }

.FileViewerButton_fileViewerButton_f7b span {
    display: flex;
    justify-content: center;
    width: var(--spacing-16);
    height: var(--spacing-16);
    margin: 0 auto;
  }

.FileViewerButton_fileViewerButton_f7b svg {
    width: 100%;
  }

.FileViewerButton_fileViewerButton_f7b:hover {
    background-color: color-mix(in srgb, transparent 90%, var(--colorWhite));
  }

.FileViewerButton_fileViewerButton_f7b.FileViewerButton_floating_3aa:hover {
      background-color: var(--colorGray50);
    }

.FileViewerButton_fileViewerButton_f7b:focus:not(:hover) {
    border-radius: 50%;
    box-shadow: 0 0 0 3px
      color-mix(in srgb, transparent 50%, var(--colorBrandBlue));
  }

.FileViewerButton_fileViewerButton_f7b.FileViewerButton_anchor_68d {
    box-sizing: border-box;
    display: inline-grid;
    place-content: center;
  }

.FileViewerButton_fileViewerButton_f7b.FileViewerButton_anchor_68d:hover {
      color: var(--colorWhite);
    }

.FileViewerButton_divider_57f {
  height: calc(var(--inputHeightSmall) / 2);
  border-left: 1px solid var(--colorGray60);
}

.ConnectedAccountsModal_loader_422 {
  display: block;
  margin: auto;
  padding: 80px;
}

.OptionSwitch_description_e5d {
  display: block;
  margin-left: 40px;
}

.OptionSwitch_disabled_852 {
  opacity: 0.5;
}

.ConnectedAccountsModal_StepAddEmailCustom_note_0f5 {
  margin-bottom: 15px;
}

.ConnectedAccountsModal_StepAddEmailCustom_form_581 {
  display: grid;
  grid-gap: 15px;
  grid-template-columns: 1fr;
}

@media screen and (min-width: 768px) {

.ConnectedAccountsModal_StepAddEmailCustom_form_581 {
    grid-template-columns: 1fr 1fr;
}
  }

.ConnectedAccountsModal_StepAddEmailCustom_syncing_825 {
  opacity: 0;
  transition: opacity 200ms var(--standardCurve);
  pointer-events: none;
}

.ConnectedAccountsModal_StepAddEmailCustom_syncing_825.ConnectedAccountsModal_StepAddEmailCustom_isVisible_fe9 {
    opacity: 1;
    pointer-events: auto;
  }

.ConnectedAccountsModal_StepAddEmailCustom_manual_1d2 {
  font-size: 13px;
  padding: 0; /* cancel button's default padding */
  cursor: pointer;
}

.ConnectedAccountsModal_StepGoogleSyncingOptionsContainer_container_127 {
  margin: -15px; /* eat default modal padding */
}

.ConnectedAccountsModal_StepGoogleSyncingOptionsContainer_option_3e0 {
  padding: 15px;
}

.ConnectedAccountsModal_StepGoogleSyncingOptionsContainer_calendar_9ab,
.ConnectedAccountsModal_StepGoogleSyncingOptionsContainer_loader_b15 {
  margin-top: 8px;
}

.ConnectedAccountsModal_StepGoogleSyncingOptionsContainer_loader_b15 {
  padding: 16px 0;
}

.ConnectedAccountsModal_StepGoogleSyncingOptionsContainer_error_483 {
  margin-top: 24px;
}

.ConnectedAccountsModal_StepRevokeOthers_radios_9a0 {
  margin-top: var(--spacing-24);
}

.ConnectedAccountsModal_StepRevokeOthers_radio_380 {
  margin-top: var(--spacing-4);
}

.ConnectedAccountsModal_StepRevokeOthers_separator_491 {
  margin: var(--spacing-16) 0;
}

.AccountListHeader_header_e6b {
  display: flex;
  padding: 12px 16px;
  align-items: center;
  background: var(--surfaceBackgroundMedium);
}

.AccountListHeader_borderBottom_9c9 {
  border-bottom: 1px solid var(--borderDefault);
}

.AccountListHeader_borderTop_5cb {
  border-top: 1px solid var(--borderDefault);
}

.AccountListUpsellBanner_content_82d {
  display: flex;
  flex-direction: column;
  padding-top: 4px;
}

.AccountListUpsellBanner_ctas_80a {
  margin-top: 24px;
}

.AccountListUpsellBanner_learnMore_183 {
  margin-left: 8px;
}

.ConnectedAccountsModal_StepSelectConnectedAccountTypeContainer_radioGroup_27b {
  margin: -15px;
  background: var(--surfaceBackgroundDark);
}

.ConnectedAccountsModal_ConnectedAccountRadioItem_item_9a0 {
  --contentPadding: 12px 21px 12px 16px;
  background: var(--surfaceBackgroundDefault);
}

.ConnectedAccountsModal_ConnectedAccountRadioItem_itemBorder_5f7 {
  border-top: 1px solid var(--borderDefault);
}

.ConnectedAccountsModal_ConnectedAccountRadioItem_header_619 {
  display: grid;
  grid-template-columns: min-content 1fr min-content;
  grid-gap: 15px;
  align-items: center;
  padding: var(--contentPadding);
  margin: 0;
  cursor: pointer;
}

.ConnectedAccountsModal_ConnectedAccountRadioItem_icon_7ac {
  width: 32px;
  height: 32px;
}

.ConnectedAccountsModal_ConnectedAccountRadioItem_title_836 {
  font-weight: var(--fontWeightBold);
  font-size: 16px;
  line-height: 20px;
}

.ConnectedAccountsModal_ConnectedAccountRadioItem_description_7ea {
  font-size: 14px;
  line-height: 20px;
  color: var(--colorTextMedium);
}

input[type='radio'].ConnectedAccountsModal_ConnectedAccountRadioItem_radio_a39 {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.ConnectedAccountsModal_ConnectedAccountRadioItem_content_0ae {
  padding: var(--contentPadding);
  border-top: 1px solid var(--borderLight);
  line-height: 20px;
}

@keyframes FullscreenDropzoneScreen_fullscreen-dropzone-animation_6c4 {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* If file is dragged, show importerDropzone and make it responsive to pointer events */
.filedragging .FullscreenDropzoneScreen_bg_314 {
    opacity: 1;
    pointer-events: auto;
  }
.FullscreenDropzoneScreen_is-uploading_335:is(.filedragging .FullscreenDropzoneScreen_bg_314) {
      opacity: 0;
      pointer-events: none;
    }

.FullscreenDropzoneScreen_bg_314 {
  /* position: relative is applied as an inline style */
  position: fixed !important;

  /* needed to be on top of Left nav and Top nav */
  z-index: 105;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  opacity: 0;
  background: rgba(71, 187, 127, 0.95);
  display: flex;
  transition: opacity 0.2s;
  padding: 30px;
}

@media screen and (max-width: 767px) {

.FullscreenDropzoneScreen_bg_314 {
    z-index: 1015; /* on top of Left nav and Top nav (mobile) */
}
  }

.FullscreenDropzoneScreen_container_74d {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  width: 100%;
  border: 4px dashed rgba(255, 255, 255, 0.3);
}

.FullscreenDropzoneScreen_container_74d  > * {
    display: block;
  }

.FullscreenDropzoneScreen_container_74d h1 {
    font-weight: var(--fontWeightBold);
    font-size: 48px;
    letter-spacing: 0;
    color: #ffffff;
    text-align: center;
    margin-top: 50px;
  }

:is(.FullscreenDropzoneScreen_container_74d h1) small {
      display: block;
      font-size: 24px;
      font-weight: normal;
      color: #ffffff;
      margin-top: 20px;
    }

.FullscreenDropzoneScreen_icon_03e {
  font-size: 200px;
  display: block;
}

.filedragging .FullscreenDropzoneScreen_icon_03e {
    animation: FullscreenDropzoneScreen_fullscreen-dropzone-animation_6c4 2s ease-in-out;
  }

.ImportBreadcrumb_breadcrumbContainer_b2f {
  padding: var(--spacing-24);
  background: var(--surfaceBackgroundDefault);
  display: flex;
  flex-direction: row;
  gap: var(--spacing-8);
  align-items: center;
}

.ImportBreadcrumb_step_968 {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-8);
  align-items: center;
  opacity: 0.3;
}

.ImportBreadcrumb_step_968.ImportBreadcrumb_isActive_bf3,.ImportBreadcrumb_step_968.ImportBreadcrumb_isCompleted_2f4 {
    opacity: 1;
  }

.ImportBreadcrumb_label_d80 {
  white-space: nowrap;
  font-size: var(--fontSizeSmall);
}

.ImportCard_iconContainer_349 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--borderDefault);
  border-radius: var(--borderRadiusMedium);
}

.ImportCard_iconContainer_349:nth-child(odd) {
  transform: rotate(-6deg);
}

.ImportCard_iconContainer_349:nth-child(even) {
  transform: rotate(6deg);
}

.ImportCard_importCard_bc9 {
  flex: 1;
}

.LineProgress_nameContainer_d4e {
  max-width: 40%; /* name can take up to 40% of the whole width */
  min-width: 0;
}

.LineProgress_progressBar_647 {
  height: 6px;
  background-color: var(--colorTransparentBlack05);
  border-radius: var(--borderRadiusMedium);
  overflow: hidden;
  flex: 1;
}

.LineProgress_progressFill_d28 {
  height: 100%;
  background-color: var(--colorBrandBlue);
  transition: width 0.3s ease;
}

.ImportProgress_container_aa3 {
  background: var(--colorWhite);
  padding: var(--spacing-24);
}

.ImportProgress_fileProgressContainer_6a8 {
  max-width: 500px;
}

.ImportTipsModal_tips_088 {
  list-style: none;
  padding: 0;
  margin: 0;
}

.DashboardView_container_c7e {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1;
}

.DashboardView_content_d51 {
  flex: 1;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  padding: var(--spacing-24);
}

.DashboardView_cardContainer_849 {
  width: 100%;
  max-width: 676px;
}

.DashboardView_dropzoneArea_2bf {
  background-color: var(--surfaceBackgroundLight);
  border: 2px dashed var(--colorCyan40);
  border-radius: var(--borderRadiusMedium);
  cursor: pointer;
}

.DashboardView_dropzoneArea_2bf:hover,
.DashboardView_dropzoneActive_471 {
  border-color: var(--colorCyan50);
  background-color: var(--surfaceBackgroundMedium);
}

.DashboardView_dropzoneArea_2bf:focus {
  outline: 2px solid var(--ui-colors-focus);
  outline-offset: 2px;
}

.DashboardView_importLoader_f7f {
  padding: 0;
  text-align: center;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
}

.DashboardView_importLoader_f7f > div:first-child {
  line-height: 24px;
  height: 24px;
  font-size: 20px;
  text-align: center;
  margin: 30px 0;
  border: none;
}

.DashboardView_restriction_447 {
  margin: 30px;
  margin-bottom: 0;
}


  @media screen and (min-width: 1120px) {

.CustomFieldModal_modals_modal_905 {
    min-width: 800px;
}
  }

/* make arbitrary children of Modal fill height as flex items */
.CustomFieldModal_modals_formWrapper_9ec {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.CustomFieldModal_modals_formWrapper_9ec.CustomFieldModal_modals_hidden_e46 {
    display: none;
  }

.AutoTextarea_FormikAutoTextarea_textarea_ef9 {
  width: 100%;
  min-height: calc(
    var(--inputHeightSmall) * 2 - var(--inputVerticalPaddingSmall) * 2
  );
  margin-bottom: 0;
  box-sizing: border-box;
}

.forms_CustomFieldModalAiSidebar_root_b1c {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--borderDefault);
  background: linear-gradient(
      168deg,
      color-mix(in srgb, var(--bgInformational) 5%, transparent) -0.27%,
      color-mix(in srgb, var(--bgDanger) 5%, transparent) 100%
    ),
    var(--surfaceBackgroundLight, #fcfcfc);
  min-width: 250px;
  max-width: 250px;
  min-height: 500px;
  max-height: 570px;
  overflow-y: auto;
}

@media screen and (max-width: 1119px) {

.forms_CustomFieldModalAiSidebar_root_b1c {
    display: none;
}
  }

.forms_CustomFieldModalAiSidebar_templateButton_dc8 {
  width: 100%;
}

.forms_CustomFieldModalAiSidebar_templateButton_dc8:hover {
    background-color: var(--bgMenuItemHover);
  }

.RolesSelect_RolesSelectItem_label_3d8 {
  font-weight: var(--fontWeightBold);
  word-break: break-all; /* FF fix */
  word-break: break-word;
}
.RolesSelect_RolesSelectItem_assignedTo_cfc {
  font-size: 12px;
}

.RolesSelect_RolesSelectWithDeletableList_main_e73 {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr 1fr;
}
.RolesSelect_RolesSelectWithDeletableList_selectedLabel_a71 {
  min-height: 16px;
  line-height: 16px;
  margin-bottom: 8px;
}

.RolesSelect_RolesPermissionsTable_roleHeader_b96 {
  text-align: left;
}

.RolesSelect_RolesPermissionsTable_checkHeader_28a {
  width: 70px;
  cursor: default;
}

.RolesSelect_RolesPermissionsTable_removeHeader_6ed {
  width: 32px;
}

.permissions_FormikRestrictPermissions_roleSelectContainer_38e {
  padding-top: 20px;
}

.permissions_FormikRestrictPermissions_labelSpacing_e92 {
  margin-bottom: var(--spacing-4);
}

.upsellFeature_box_8dd {
    border-radius: 7px;
    font-size: 16px;
}

.upsellFeature_withBorder_46f {
    border: 1px solid var(--fillInformational);
    overflow: hidden;
}

.upsellFeature_disableCursor_0ff {
    cursor: not-allowed;
}

.upsellFeature_upsellBoxPadding_8ae {
    padding: var(--spacing-16)  var(--spacing-16) 0  var(--spacing-16);
}

.upsellFeature_section_796 {
    margin-top: 8px;
}

.fragments_FieldOptions_requiredRestrictedContainer_c4e {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--modalBodyPadding);
  padding: var(--modalBodyPadding);
  border-top: 1px solid var(--borderLight);

  /* specificity to overwrite switch's default padding */
}

.fragments_FieldOptions_requiredRestrictedContainer_c4e .fragments_FieldOptions_restrictSwitch_ad0 {
    padding: 0;
  }

.fragments_FieldOptions_badgeContainer_87e {
  margin-left: var(--spacing-4);
}

.fragments_FieldOptions_labelSpacing_589 {
  margin-bottom: var(--spacing-4);
}

/* TODO: is there a design atom for this? */
.fragments_FieldOptions_header_d6f {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  padding: 16px;
  font-size: 14px;
  line-height: 16px;
}

.fragments_FieldOptions_headerTextContainer_6b8 {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 0 8px;
}

.fragments_FieldOptions_headerArrow_1b1 {
  position: relative;
  width: 20px; /* same width as other left-side icons. */
  color: var(--colorTextMedium);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
}

.fragments_FieldOptions_fieldOptions_378 {
  padding: var(--modalBodyPadding);
}

.fragments_FieldOptions_borderTop_baf {
  border-top: none;
}

.FieldTypeIconLabel_icon_a41 {
  display: inline-block;
  color: var(--colorIconLight);
  margin-right: 0;
  vertical-align: middle;
  flex-shrink: 0;
}

.FieldTypeIconLabel_icon_a41 svg {
    position: static;
    color: inherit;
  }

.FieldTypeIconLabel_typeBadge_3bf {
  opacity: 0;
  display: inline-flex;
  align-items: center;
}

.FieldTypeIconLabel_typeBadgeAlwaysVisible_8e0 {
  opacity: 1;
  display: inline-flex;
  align-items: center;
}

/* Show badge when parent row is hovered */
tr:hover .FieldTypeIconLabel_typeBadge_3bf {
  opacity: 1;
}

.fragments_Main_main_ca9 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--modalBodyPadding) var(--modalBodyPadding);
}

.fragments_Main_row_dd6 {
  grid-column: span 2;
}

.fragments_Main_descriptionTextarea_e2f {
  box-sizing: border-box;
  resize: vertical;
  width: 100%;
  margin: 0;
}

.fragments_Main_descriptionCount_436 {
  margin-left: auto;
  font-weight: normal;
  color: var(--gray-50);
}

.fragments_Main_descriptionCount_436.fragments_Main_error_0bb {
    color: var(--failurePrimaryColor);
  }

.fragments_Main_label-append_6f7 {
  margin-left: 5px;
  font-style: normal;
  font-weight: normal;
  color: var(--colorTextMedium);
}

.forms_SharedCustomFieldPickerForm_body_56d {
  flex: 0 1 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  gap: var(--spacing-16);
}

.FieldMappingTable_iconContainer_63e {
  display: flex;
  align-items: center;
  justify-content: center;
}

.FieldMappingTable_clickableIcon_07f {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.FieldMappingTable_disabledCell_c9c {
  background-color: var(--formBackgroundDisabled);
}

.ReviewModal_modal_7de {
  width: 745px;
}

.ReviewModal_table_874 {
  --tableBorderRadius: 0;
}

.ReviewModal_table_874 table {
    border: none;
  }

.ReviewModal_table_874 thead {
    box-sizing: border-box;
    position: sticky;
    top: 0px;
    z-index: 1;
  }

.ReviewModal_table_874 th,.ReviewModal_table_874 td {
    box-sizing: content-box;
    height: var(--spacing-32);
    vertical-align: middle;
    padding: 0;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 300px;
  }

.ReviewModal_headerCell_e83,
.ReviewModal_sort_fd9 {
  vertical-align: middle;
  display: inline-flex;
  gap: var(--spacing-4);
  align-items: center;
}

.ReviewModal_sort_fd9 {
  justify-content: end;
  cursor: pointer;
}

.ReviewModal_sort_fd9.ReviewModal_isAsc_694 svg {
    transform: rotate(180deg);
  }

.ErrorRow_SelectTrigger_trigger_bc0 {
  box-sizing: border-box;
  height: var(--spacing-32);
  width: 100%;
  padding: var(--spacing-8);
  display: flex;
  align-items: center;
  gap: var(--spacing-4);

  cursor: pointer;
}

.ErrorRow_SelectTrigger_trigger_bc0:focus-visible {
    outline: 1px solid var(--borderFocused);
    outline-offset: -1px;
  }

.ErrorRow_SelectTrigger_clearIcon_4fa {
  cursor: pointer;
}

.ErrorRow_SelectTrigger_clearIcon_4fa:hover {
    color: var(--colorIconLight);
  }

.ErrorRow_SelectTrigger_actions_e77 {
  margin-inline-start: auto;
  display: flex;
  gap: var(--spacing-4);
  align-items: center;
}

.Calendar_sharedComponents_wrapper_968 {
  overflow: hidden;
  /* fix layout glitch when first rendering */
  min-width: 248px;
  min-height: 272px; /* 272px is the height of 6 lines of days */
  /* react-dates doesn't render in the centre hence mismatched horizontal padding */
  padding: 16px 1px 12px 3px;
  box-sizing: border-box;
}

.Calendar_sharedComponents_navNext_5c0,
.Calendar_sharedComponents_navPrev_080 {
  position: absolute;
  padding: 2px 5px;
}

:is(.Calendar_sharedComponents_navNext_5c0,.Calendar_sharedComponents_navPrev_080) svg {
    display: block;
    width: 16px;
  }

.Calendar_sharedComponents_navNext_5c0 {
  right: 14px;
}

.Calendar_sharedComponents_navPrev_080 {
  left: 12px;
}

.Calendar_sharedComponents_monthWrapper_045 {
  display: flex;
  justify-content: center;
  font-size: 14px;
}

.Calendar_sharedComponents_month_08f {
  margin-right: 10px;
  font-weight: var(--fontWeightBold);
}

.DatePickerInput_icon_fc4 {
  width: 16px;
  height: 16px;
}

/*
This solves https://github.com/closeio/close-ui/issues/2021 (jumping
calendar month arrows when switching between 5-week and 6-week month
views) by moving the calendar heading to the bottom of the popover
when the popover is opened upwards.

This relies on Tippy.js adding `data-placement` attribute to the
popover with the actually used placement (which is dynamic).

Other tried but failed solutions (see commits in
https://github.com/closeio/close-ui/pull/2240):
- exposing placement from popover to add a class for
  react-dates components
- use onOpen to update the popover placement

Those solutions failed because the UI updated too slowly and
the UI controls were jumping around with a delay.
*/
:is(:is(div[data-placement='top-start']) .DatePickerInput_Calendar_d43:not(.DatePickerInput_no-calendar-customizations_d9d)) .DatePickerInput_CalendarMonth_290 {
        display: flex;
        flex-direction: column-reverse;
      }
:is(:is(div[data-placement='top-start']) .DatePickerInput_Calendar_d43:not(.DatePickerInput_no-calendar-customizations_d9d)) .DatePickerInput_DayPicker_weekHeader_39a {
        top: 0;
      }
:is(:is(div[data-placement='top-start']) .DatePickerInput_Calendar_d43:not(.DatePickerInput_no-calendar-customizations_d9d)) .DatePickerInput_DayPickerNavigation_button_833 span {
        bottom: 2px;
      }
:is(:is(div[data-placement='top-start']) .DatePickerInput_Calendar_d43:not(.DatePickerInput_no-calendar-customizations_d9d)) .DatePickerInput_DayPicker_focusRegion_10f {
        display: flex;
        flex-direction: column-reverse;
      }
:is(:is(div[data-placement='top-start']) .DatePickerInput_Calendar_d43:not(.DatePickerInput_no-calendar-customizations_d9d)) .DatePickerInput_CalendarMonth_caption_b58 {
        padding: 12px 0 0;
      }

.ErrorRow_DateField_input_e4d {
  max-width: 20ch;
}

.ErrorRow_TextField_actions_f5f {
  display: flex;
  gap: var(--spacing-4);
  -webkit-user-select: none;
          user-select: none;
  cursor: pointer;
}

.ErrorRow_TextField_input_60e {
  box-sizing: border-box;
  height: var(--spacing-32);
  background: transparent;
  border: 0px solid transparent;
  border-bottom-width: 2px;
  outline: none;
  line-height: 1;
}

.ErrorRow_TextField_input_60e:not(.ErrorRow_TextField_hidden_f3a):focus {
      border-bottom-color: var(--borderActive);
    }

tr:not(:hover) .ErrorRow_TextField_editButton_566 {
  display: none;
}

.ReviewModal_Header_arrowIcon_986 {
  color: var(--colorTextLight);
}

/* Flex adds flex-shrink by default without a way to override. This causes the content to collapse */
.ReviewModal_Header_flex_e96 {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.ReviewModal_Header_fieldInfo_11a {
  gap: var(--spacing-8);
}

.ImportDetailsFooter_footer_f5f {
  position: sticky;
  bottom: 0;
  z-index: var(--stickyToolbarZIndex);
  padding: var(--spacing-24);
  background: var(--surfaceBackgroundDefault);
  border-top: 1px solid var(--borderDefault);
  border-bottom: 1px solid var(--borderDefault);
  margin-top: -1px; /* eat last row's border */
}

.ImportOptions_container_aa0 {
  background: var(--surfaceBackgroundDefault);
  flex: 1;
}

.ImportOptions_sectionRow_e12 {
  max-width: 870px;
  padding: var(--spacing-24);
  margin: 0 auto;
}

.ImportOptions_selectWrapper_ed4 {
  max-width: 320px;
}

.ImportOptions_groupByNumberOfLeads_994 {
  margin-left: auto;
  float: right;
}

.ImportOptions_actionLabel_672 {
  margin-top: var(--spacing-4);
  margin-bottom: var(--spacing-8);
  font-weight: var(--fontWeightBold);
  font-size: var(--fontSizeBase);
  line-height: 1;
}

.ImportOptions_actionDescription_673 {
  margin: 0 0 var(--spacing-4);
  font-size: var(--fontSizeSmall);
}

.ImportOptions_previewPlaceholder_924 {
  width: 250px;
  padding: var(--spacing-24);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ImportProcessingView_illustration_d09 {
  width: 56px;
  height: auto;
}

.ImportProcessingView_description_087 {
  text-align: center;
}

.ImportProcessingView_tipCardWrapper_f20 {
  max-width: 420px;
  perspective: 1000px;
}

.ImportProcessingView_tipCard_eaa {
  transform-style: preserve-3d;
  animation: ImportProcessingView_flipCard_e38 0.8s var(--decelerationCurve);
}

@keyframes ImportProcessingView_flipCard_e38 {
  0% {
    transform: rotateY(-90deg);
    opacity: 0;
  }
  50% {
    transform: rotateY(0deg);
    opacity: 1;
  }
  100% {
    transform: rotateY(0deg);
    opacity: 1;
  }
}

.ImportProcessingView_preBlock_dbe {
  display: block;
  font-family: monospace;
  white-space: pre;
  margin-top: var(--spacing-16);
}

.ImportStepLayout_contentContainer_255 {
  background: var(--surfaceBackgroundDefault);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ImportStepLayout_centerContent_247 {
  align-items: center;
}

.ImportSummaryView_illustration_53c {
  width: 56px;
}

.ImportSummaryView_description_fa9 {
  text-align: center;
}


.ImportSummaryView_summaryCard_6e2 {
  max-width: 400px;
}

.ImportSummaryView_cardGrid_bfa {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  gap: var(--spacing-12);
  padding: var(--spacing-16);
  align-items: center;
}

.ImportSummaryView_cardGrid_bfa.ImportSummaryView_noDescription_251 {
  row-gap: 0;
}

.ImportSummaryView_cardIcon_c53 {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
}

.ImportSummaryView_cardTitle_ce1 {
  grid-column: 2;
  grid-row: 1;
}

.ImportSummaryView_cardButton_5d4 {
  grid-column: 3;
  grid-row: 1;
}

.ImportSummaryView_cardDescription_e5c {
  grid-column: 2;
  grid-row: 2;
}

.ImportSummaryView_groupingText_f33 {
  text-align: center;
}

.ImportsList_list_ae4 {
  border: solid var(--borderDefault);
  border-width: 1px 0;
  background-color: var(--surfaceBackgroundDefault);
}

.ImportsList_list_ae4 table {
    margin-bottom: 0;
  }

:is(.ImportsList_list_ae4 table) th {
      line-height: 16px;
      background: var(--surfaceBackgroundDark);
      text-align: center;
      border-left: 1px solid var(--borderDefault);
      vertical-align: middle;
    }

:is(:is(.ImportsList_list_ae4 table) th):first-child {
        border-left: none;
        border-top-left-radius: 7px;
        padding-left: var(--spacing-24);
      }

:is(:is(.ImportsList_list_ae4 table) th):last-child {
        border-top-right-radius: 7px;
      }

:is(.ImportsList_list_ae4 table) td:first-child {
      padding-left: var(--spacing-24);
    }

:is(.ImportsList_list_ae4 table) .ImportsList_columnStatus_1a4 {
      text-align: left;
    }

:is(.ImportsList_list_ae4 table) .ImportsList_columnImportTime_e73 {
      text-align: left;
    }

.ImportsList_columnUser_078 {
  width: 24px;
}

.ImportsList_columnFailed_a33,
.ImportsList_columnImported_eed,
.ImportsList_columnUpdated_057,
.ImportsList_columnSkipped_4a5 {
  width: 80px;
}

.ImportsList_columnStatus_1a4 {
  width: 20px;
}

.ImportsList_columnActions_652 {
  width: 2%;
}

.ImportsList_columnImportMethod_bb0 {
  width: 150px;
}

.ImportsList_emptyState_1ce {
  color: var(--colorTextLight);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  flex-direction: column;
  margin-top: var(--spacing-48);
}


    .ImportsList_ImportRow_container_7c9:last-child td {
      border-bottom: 0 none;
    }

.ImportsList_ImportRow_container_7c9 td {
    text-align: center;
    border: 1px solid var(--borderLight);
    vertical-align: middle;
  }

:is(.ImportsList_ImportRow_container_7c9 td):first-child {
      border-left: none;
    }

.ImportsList_ImportRow_columnImportTime_c93:is(.ImportsList_ImportRow_container_7c9 td) {
      text-align: left;
    }

.ImportsList_ImportRow_container_7c9 .ImportsList_ImportRow_columnStatus_e6f {
    text-align: left;
    text-transform: uppercase;
  }

.ImportsList_ImportRow_container_7c9 .ImportsList_ImportRow_columnUser_a0e {
    max-width: 150px;
  }

.ImportsList_ImportRow_container_7c9.ImportsList_ImportRow_failed_699 td {
      background: var(--bgDangerMuted);
      border-color: var(--borderDangerMuted);
    }

.ImportsList_ImportRow_container_7c9.ImportsList_ImportRow_warning_d17 td {
      background: var(--bgWarnMuted);
      border-color: var(--borderWarnMuted);
    }

.ImportsList_ImportRow_container_7c9.ImportsList_ImportRow_revert_0eb .ImportsList_ImportRow_columnImported_473,.ImportsList_ImportRow_container_7c9.ImportsList_ImportRow_revert_0eb .ImportsList_ImportRow_columnUpdated_a99,.ImportsList_ImportRow_container_7c9.ImportsList_ImportRow_revert_0eb .ImportsList_ImportRow_columnSkipped_2d1,.ImportsList_ImportRow_container_7c9.ImportsList_ImportRow_revert_0eb .ImportsList_ImportRow_columnFailed_f9c {
      -webkit-text-decoration: line-through;
      text-decoration: line-through;
      color: var(--colorTextMedium);
    }

.ImportsList_ImportRow_columnActions_2ac {
  white-space: nowrap;
}

.ImportsList_ImportRow_actionList_467 {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

.ImportsList_ImportRow_actionList_467 a,.ImportsList_ImportRow_actionList_467 button {
    color: var(--colorLinkDefault);
    border: none;
    padding: 0;
    display: inline;
    background: none;
    vertical-align: baseline;
  }

.ImportsList_ImportRow_actionList_467 button:hover {
    color: var(--colorLinkHover);
    -webkit-text-decoration: underline;
    text-decoration: underline;
  }

.ImportsList_ImportRow_actionList_467 li {
    display: inline-block;
    padding: 0 8px;
    margin: 0;
  }

:is(.ImportsList_ImportRow_actionList_467 li)  > button,:is(.ImportsList_ImportRow_actionList_467 li)  > a {
      cursor: pointer;
    }

:is(.ImportsList_ImportRow_actionList_467 li):first-child {
      padding-left: 16px;
    }

:is(.ImportsList_ImportRow_actionList_467 li):last-child {
      padding-right: 16px;
    }

.ImportsList_ImportRow_undoIcon_bd7 {
  color: var(--colorTextMedium);
}

.ImportsList_ImportRow_link_1c9 {
  padding-top: 4px;
  cursor: pointer;
  font-weight: var(--fontWeightBold);
}

.ImportsList_ImportRow_linkIcon_ae1 {
  margin-right: 8px;
  display: inline-block;
}

.ImportsList_ImportRow_total_976 {
  vertical-align: middle;
}

.ImportsList_ImportRow_skipped_c49 {
  color: var(--colorTextDefault);
}

.ImportsList_ImportRow_success_c18 {
  color: var(--successPrimaryColor);
}

.ImportsList_ImportRow_failure_f9f {
  color: var(--failurePrimaryColor);
}

.UndoImportModal_tooltippedText_ab8 {
  display: inline-block;
  padding-bottom: 1px;
  border-bottom: 1px dashed var(--gray-40);
}

.UndoImportModal_alertList_77d {
  margin: 0;
}

.UndoImportModal_alertRow_d17 {
  display: flex;
  margin: 0;
  list-style-type: none;
  align-items: center;
}

.UndoImportModal_alertIcon_2ef {
  color: var(--failurePrimaryColor);
  margin-right: 8px;
}

.UndoImportModal_importedBySection_eea {
  display: flex;
  align-items: center;
}

.UndoImportModal_userAvatar_8cb {
  box-sizing: border-box;
  width: 16px;
  margin-right: 12px;
  border-radius: 50%;
}

.UndoImportModal_userAvatar_8cb  > img,.UndoImportModal_userAvatar_8cb::after {
    border-radius: 50%;
  }

.LegacyLeadImporterFooter_footer_666 {
  display: flex;
  flex-shrink: 0;
  text-align: left;
  padding: 16px 24px;
  background: var(--surfaceBackgroundDefault);
  border-top: 1px solid var(--borderDefault);
  background-clip: padding-box; /* Show a content behind border */
}:is(.LegacyLeadImporterFooter_footer_666 .LegacyLeadImporterFooter_next_a64):disabled {
      pointer-events: none;
    }.LegacyLeadImporterFooter_footer_666.LegacyLeadImporterFooter_isRelaxed_05f .LegacyLeadImporterFooter_body_37a {
      max-width: 100%;
    }.LegacyLeadImporterFooter_footer_666 .LegacyLeadImporterFooter_body_37a {
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    flex: 1;
    display: flex;
  }:is(.LegacyLeadImporterFooter_footer_666 .LegacyLeadImporterFooter_body_37a) .LegacyLeadImporterFooter_text_560 {
      flex: 1;
      display: flex;
      align-items: center;
      padding-right: 24px;
    }:is(:is(.LegacyLeadImporterFooter_footer_666 .LegacyLeadImporterFooter_body_37a) .LegacyLeadImporterFooter_text_560) p {
        line-height: 16px;
        margin-bottom: 0;
      }

.PasteView_pasteImportScreen_f75 {
  max-height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  background: var(--surfaceBgDefault);
}

.PasteView_textareaContainer_96f {
  padding: var(--spacing-24) var(--spacing-12);
  flex: 1;
  overflow-y: auto;
}

.PasteView_textarea_2fb {
  background: none;
  box-sizing: border-box;
  height: 100%;
  line-height: 20px;
  font-family: var(--monoFontFamily);
  font-size: 14px;
  letter-spacing: 0;
  border: none;
  width: 100%;
  box-shadow: none !important;
  outline: none;
  resize: none;
}

.PasteView_textarea_2fb:focus {
    box-shadow: none !important;
  }

/* Shared in Wrapper and HoverActions */
.Activity_root_8f6 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  position: relative;
}

.Activity_inner_dad {
  display: flex;
}

.Activity_card_a8e {
  flex: 1;
  min-width: 0;
}

@media screen and (min-width: 768px) {
    .Activity_iconWrapper_c21 + .Activity_card_a8e {
      margin-left: var(--spacing-12);
    }
  }

@media screen and (max-width: 767px) {
  .Activity_iconWrapper_c21 {
    display: none;
  }
}

.Activity_isCollapsed_527 .Activity_iconWrapper_c21 {
    padding: 0 10px;
  }

.Activity_promoWithIcon_fa3 {
  /* width of icon section plus left margin of card */
  margin-left: calc(31px + var(--spacing-12));
}

@media screen and (max-width: 767px) {

.Activity_promoWithIcon_fa3 {
    margin-left: 0;
}
  }

/**
 * Use this global class when you need a component within an Activity to have this behavior:
 * hidden by default, visible when Activity is hovered, and visible always on mobile.
 */
.showOnActivityHover {
  visibility: hidden;
}
@media screen and (max-width: 767px) {
.showOnActivityHover {
    visibility: visible;
}
  }
.Activity:hover .showOnActivityHover {
    visibility: visible;
  }

.ActivityCard_root_6e4 {
  position: relative;
  border-radius: var(--activityBorderRadius);
  border: 1px solid var(--borderDefault);
  background: var(--bgCardBase);
  overflow: hidden;
}@media screen and (max-width: 767px) {.ActivityCard_root_6e4 {
    border-radius: 0;
    border-left: 0 none;
    border-right: 0 none;
}
  }.ActivityCard_root_6e4.ActivityCard_transparent_4fa {
    background: transparent;
    border: none;
  }.ActivityCard_root_6e4.ActivityCard_sms_f44 {
    /* No styles */
  }.ActivityCard_root_6e4.ActivityCard_email_299 {
    /* No styles */
  }.ActivityCard_root_6e4.ActivityCard_call_2c0 {
    /* No styles */
  }.ActivityCard_root_6e4.ActivityCard_call-missed_973 {
    /* No styles */
  }.ActivityCard_root_6e4.ActivityCard_deemphasized_f22 {
    /* No styles */
  }


  .Activity_TimeAgo_link_0cc:hover,.Activity_TimeAgo_link_0cc:focus,.Activity_TimeAgo_link_0cc:visited {
    -webkit-text-decoration: none;
    text-decoration: none;
  }

.Activity_TimeAgo_link_0cc {

  text-wrap: nowrap;
}

.Activity_TimeAgo_link_0cc time {
    color: var(--colorTextLight);
  }

.Activity_TimeAgo_link_0cc.Activity_TimeAgo_removeDash_c77 time {
      border-bottom: none;
    }

.Activity_TimeAgo_link_0cc.Activity_TimeAgo_noPointer_0c8 {
    cursor: text;
  }

.Activity_TimeAgo_link_0cc.Activity_TimeAgo_noPointer_0c8 time {
      cursor: inherit;
    }

.Activity_TimeAgo_link_0cc.Activity_TimeAgo_dashed_e7b {
    /* Using the verbose syntax here because the shorthand syntax doesn't work in Safari */
    -webkit-text-decoration: underline;
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-color: var(--borderHover);
  }

.Activity_TimeAgo_link_0cc.Activity_TimeAgo_dashed_e7b:hover,.Activity_TimeAgo_link_0cc.Activity_TimeAgo_dashed_e7b:focus {
      -webkit-text-decoration: underline;
      text-decoration: underline;
      text-decoration-style: solid;
      text-decoration-color: var(--borderHover);
    }

.Activity_TimeAgo_noWrap_ec6:scope {
  text-wrap: nowrap;
}

.LeadActivities_LeadActivityList_list_ab9 {
  display: flex;
  position: relative;
  flex-direction: column;
  gap: var(--spacing-8);
  flex-basis: fit-content;
  min-width: 0;
  min-height: 0;
  padding-top: var(--spacing-8);
  background: var(--surfaceBackgroundMedium);
}

.LeadActivities_LeadActivityList_list_ab9.LeadActivities_LeadActivityList_hasLoaded_97b::before {
    content: '';
    margin: var(--spacing-8) 0 0 17px;
    height: calc(100% - var(--spacing-48));
    width: 1px;
    position: absolute;
    background: var(--borderDefault);
  }

@media screen and (min-width: 768px) {

.LeadActivities_LeadActivityList_list_ab9 {
    /* Needed to fully align the icons of activities with the page header */
    margin-left: -3px;

    padding: var(--spacing-12) var(--spacing-24);
}

    .LeadActivities_LeadActivityList_list_ab9 .LeadActivities_LeadActivityList_withQuickViews_acc {
      padding-top: 0;
    }
  }

@media screen and (max-width: 767px) {
    .LeadActivities_LeadActivityList_list_ab9.LeadActivities_LeadActivityList_hasLoaded_97b::before {
      margin: var(--spacing-8) 0 0 25px;
    }
  }

.LeadActivities_LeadActivityList_leadSummaryContainer_978 {
  border-bottom: 1px solid var(--borderDefault);
}

.LeadActivities_LeadActivityList_iconSkeleton_5c6 {
  margin: 7px 0 0 3px;
  background: var(--surfaceBackgroundMedium);
}

.LeadActivities_LeadActivityList_summarySkeleton_197 {
  display: flex;
  justify-content: center;
  height: var(--leadLayoutSidebarHeaderHeight);
  background-color: var(--bgCardBase);
  border-bottom: 1px solid var(--borderDefault);
}

.QuickViewBar_wrapper_a69 {
  position: sticky;
  top: var(--leadLayoutHeaderHeight);
  z-index: var(--leadLayoutZIndex);
}

.QuickViewBar_root_b93 {
  background-color: var(--bgCardBase);
  position: relative;
}

@media screen and (min-width: 768px) {

.QuickViewBar_root_b93 {
    display: flex;
    justify-content: flex-start;
    padding: var(--spacing-8) var(--spacing-24);
}
  }

.QuickViewBar_inner_f0b {
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 768px) {

.QuickViewBar_inner_f0b {
    align-items: center;
    flex-basis: var(--activityMaxWidth);
    flex-direction: row;
    gap: var(--spacing-8);
    justify-content: space-between;
}
  }

@media screen and (min-width: 1440px) {

.QuickViewBar_inner_f0b {
    flex-basis: var(--activityMaxWidthLargeScreens);
}
  }

.QuickViewBar_left_83c {
  border-bottom: 1px solid var(--borderDefault);
  overflow-x: auto;
  padding: var(--spacing-8) var(--spacing-16);
}

@media screen and (min-width: 768px) {

.QuickViewBar_left_83c {
    border: none;
    overflow-x: unset;
    padding: 0;
}
  }

.QuickViewBar_right_eae {
  align-items: center;
  display: flex;
  flex: 1;
  justify-content: flex-end;
  padding: var(--spacing-8) var(--spacing-16);
  gap: var(--spacing-8);
}

@media screen and (min-width: 768px) {

.QuickViewBar_right_eae {
    padding: 0;
}
  }

.QuickViewBar_filterButton_653 {
  border-radius: 50%;
  position: relative;
}

.QuickViewBar_filterButton_653:hover .QuickViewBar_filterIndicator_415 {
      border-color: var(--bgButtonDefaultHover);
    }

.QuickViewBar_filterIndicator_415 {
  background-color: var(--bgActive);
  border-radius: 50%;
  border: 2px solid var(--bgCardBase);
  height: 8px;
  pointer-events: none;
  position: absolute;
  right: 3px;
  top: 3px;
  width: 8px;
}

.QuickViewBar_filtersBar_dbd {
  align-items: center;
  background-color: var(--surfaceBackgroundLight);
  border-bottom: 1px solid var(--borderDefault);
  box-sizing: border-box;
  display: flex;
  height: 0;
  justify-content: center;
  overflow: hidden;
  position: relative;
  transition: height 250ms ease-in-out;
  padding: 0 var(--spacing-24);
}

.QuickViewBar_filtersBar_dbd.QuickViewBar_expandedFiltersBar_617 {
    height: 40px;
    border-top: 1px solid var(--borderLight);
  }

.QuickViewBar_filtersBarInner_83b {
  align-items: center;
  display: grid;
  gap: var(--spacing-8);
  grid-template-columns: 1fr auto;
}

@media screen and (min-width: 768px) {

.QuickViewBar_filtersBarInner_83b {
    align-items: center;
    flex-basis: var(--activityMaxWidth);
    flex-direction: row;
    justify-content: space-between;
}
  }

@media screen and (min-width: 1440px) {

.QuickViewBar_filtersBarInner_83b {
    flex-basis: var(--activityMaxWidthLargeScreens);
}
  }

.QuickViewBar_filtersBarFilters_4de {
  align-items: center;
  display: flex;
  gap: var(--spacing-8);
  overflow: hidden;
}

.QuickViewBar_caret_b33 {
  position: absolute;
  bottom: -16px;
  right: 7px;
  width: 16px;
  height: 16px;
}

.QuickViewBar_caret_b33 {
    animation: fadeIn 250ms;
  }

:is(.QuickViewBar_caret_b33 svg) polygon {
      fill: var(--bgCardMedium);
      stroke: var(--borderDefault);
      stroke-width: 1px;
    }

:is(.QuickViewBar_caret_b33 svg) line {
      stroke: var(--bgCardMedium);
      stroke-width: 2px;
    }

.SidebarCard_sectionContainer_218 {
  background: var(--bgDefaultMuted);
  border-radius: 7px;
  border: 1px solid var(--borderDefault);
}

.SidebarCard_sectionContainer_218 svg {
    opacity: 0.5;
    transition: opacity 0.2s ease;
  }

.SidebarCard_expanded_48e svg {
    opacity: 1;
  }

.SidebarCard_SidebarCardFormErrors_formError_5d6 {
  background-color: var(--bgDangerMuted);
  color: var(--colorTextDanger);
  font-size: var(--fontSizeSmall);
}.SidebarCard_SidebarCardFormErrors_formError_5d6 ul {
    margin-bottom: 0;
  }

.SidebarCard_SidebarCardFormFooter_footer_6b3 {
  background-color: var(--bgCardMedium);
  border-radius: 0 0 7px 7px;
}

.SidebarCard_SidebarCardHeader_header_6e5 {
  background-color: var(--bgDefaultMuted);
  padding: 0 var(--spacing-8) 0 0;
  border-radius: 7px 7px 0 0;
}

.SidebarCard_SidebarCardHeader_header_6e5.SidebarCard_SidebarCardHeader_collapsed_d57 {
    border-radius: 7px;
  }

:is(.SidebarCard_SidebarCardHeader_opportunityIcon_8dc svg path):nth-child(1) {
    fill: var(--colorIconDuotoneFillGold);
  }

:is(.SidebarCard_SidebarCardHeader_opportunityIcon_8dc svg path):nth-child(2) {
    fill: var(--colorIconDuotoneStrokeGold);
  }

:is(.SidebarCard_SidebarCardHeader_aboutIcon_f8f svg path):nth-child(1) {
    fill: var(--colorIconDuotoneFillBlue);
  }

:is(.SidebarCard_SidebarCardHeader_aboutIcon_f8f svg path):nth-child(2) {
    fill: var(--colorIconDuotoneStrokeBlue);
  }

:is(.SidebarCard_SidebarCardHeader_contactIcon_2e7 svg path):nth-child(1) {
    fill: var(--colorIconDuotoneFillCyan);
  }

:is(.SidebarCard_SidebarCardHeader_contactIcon_2e7 svg path):nth-child(2) {
    fill: var(--colorIconDuotoneStrokeCyan);
  }

:is(.SidebarCard_SidebarCardHeader_taskIcon_743 svg path):nth-child(1) {
    fill: var(--colorIconDuotoneFillRed);
  }

:is(.SidebarCard_SidebarCardHeader_taskIcon_743 svg path):nth-child(2) {
    fill: var(--colorIconDuotoneStrokeRed);
  }

:is(.SidebarCard_SidebarCardHeader_customObjectIcon_cc1 svg path):nth-child(1) {
    fill: var(--colorIconDuotoneFillPurple);
  }

:is(.SidebarCard_SidebarCardHeader_customObjectIcon_cc1 svg path):nth-child(2) {
    fill: var(--colorIconDuotoneStrokePurple);
  }

:is(.SidebarCard_SidebarCardHeader_customFieldIcon_361 svg path):nth-child(1) {
    fill: var(--colorIconDuotoneFillGreen);
  }

:is(.SidebarCard_SidebarCardHeader_customFieldIcon_361 svg path):nth-child(2) {
    fill: var(--colorIconDuotoneStrokeGreen);
  }

.SidebarCard_SidebarCardHeader_headerTitleBtn_c89 {
  min-width: 0px;
  flex-grow: 1;

  position: relative;

  /* ensure headers have consistent height regardless of whether there are buttons */

  padding: var(--spacing-8) var(--spacing-8) var(--spacing-8) var(--spacing-12);
  min-height: 24px;
  display: block;
}

.SidebarCard_SidebarCardHeader_headerTitleBtn_c89:hover .SidebarCard_SidebarCardHeader_chevron_7b4 {
      color: var(--colorIconDefault);
    }

.SidebarCard_SidebarCardHeader_chevron_7b4 {
  transition: transform 0.2s ease;
  color: var(--colorIconLight);
}

.SidebarCard_SidebarCardHeader_chevron_7b4 svg {
    width: 14px;
    height: 14px;
  }

.SidebarCard_SidebarCardHeader_chevron_7b4.SidebarCard_SidebarCardHeader_expanded_dbf {
    transform: rotate(90deg);
  }

.SidebarCard_SidebarCardHeader_searchWrap_7c5 {
  position: absolute;
  z-index: -1;
  /* total height of input: 32px, header: 34px */
  left: 0;
  right: -8px;
  opacity: 0;
  transform: scale(1, 1);
  transform-origin: right;
  transition: all 100ms ease-in-out;
}

.SidebarCard_SidebarCardHeader_searchWrap_7c5 .SidebarCard_SidebarCardHeader_headerSearch_2f8:focus {
    background-color: var(--surfaceBackgroundDark);
    border: 0;
  }

.SidebarCard_SidebarCardHeader_searchWrap_7c5.SidebarCard_SidebarCardHeader_isSearching_4d0 {
    z-index: 1;
    opacity: 1;
    transform: scale(1, 1);
  }

.SidebarCard_SidebarCardItemsList_list_d9c {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background-color: var(--borderDefault);
  border-radius: 7px;
}

.SidebarCard_SidebarCardItemsList_showMore_2ff {
  background: var(--bgDefaultMuted);
  border-radius: 0 0 6px 6px;
  color: var(--colorTextLight);
  -webkit-text-decoration: none;
  text-decoration: none;
  font-size: 12px;
  padding: var(--spacing-8) var(--spacing-12);
  text-align: left;
}

.SidebarCard_SidebarCardItemsList_showMore_2ff:hover,.SidebarCard_SidebarCardItemsList_showMore_2ff:active {
    background: var(--bgDefaultMutedHover);
    color: var(--colorTextDefault);
  }

.SidebarCard_SidebarCardItemEmptyState_card_559 {
  background-color: var(--bgCardBase);
  border-top: 1px solid var(--borderDefault);
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
}

.SidebarCard_SidebarCardItemWrapper_root_010 {
  background-color: var(--bgCardBase);
  scroll-margin-bottom: var(--spacing-16);
  scroll-margin-top: var(--spacing-48);
}

/* The last item of the list must have a border-radius, but it has a wrapper
   when it's sortable, so we need to take that into account. */
.SidebarCard_SidebarCardItemWrapper_root_010:is(:last-child > .SidebarCard_SidebarCardItemWrapper_hasWrapper_b38,:not(.SidebarCard_SidebarCardItemWrapper_hasWrapper_b38):last-child) {
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
  }

/* Add a 4px gap between items when the card is expanded */
.SidebarCard_SidebarCardItemWrapper_expanded_3eb:is(:not(:last-child) > .SidebarCard_SidebarCardItemWrapper_hasWrapper_b38,:not(.SidebarCard_SidebarCardItemWrapper_hasWrapper_b38):not(:last-child)) {
    border-bottom: var(--spacing-4) solid var(--borderLight);
  }
.SidebarCard_SidebarCardItemWrapper_expanded_3eb:is(:not(:last-child) > .SidebarCard_SidebarCardItemWrapper_hasWrapper_b38,:not(.SidebarCard_SidebarCardItemWrapper_hasWrapper_b38):not(:last-child))::after {
      content: '';
      display: block;
      border-bottom: 1px solid var(--borderDefault);
    }


/* Temporarily disable focus ring until we address #15770, #15771, and #15888
.focusRing {
  border: 1px solid var(--borderFocused);

  &.hasError {
    border: 1px solid var(--borderDanger);
  }
}

.focusWithin:focus-within {
  outline: none;
  border: 1px solid var(--borderFocused);
}
*/

.SidebarCard_SidebarCardItemWrapper_withPointer_39d {
  cursor: pointer;
}

.SidebarCard_SidebarCardItemWrapper_withPointer_39d:hover {
    background-color: var(--bgCardLight);
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
  }

.SidebarCard_SidebarCardSectionEmptyState_root_d83 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
}

.SidebarCard_SidebarCardSectionHeader_header_94e {
  border-top: 1px solid var(--borderLight);
  background-color: var(--bgLightMuted);
  /* Header gets 34px if you pass buttons as children, but if there are buttonless
   * headers, we still want all of them to have consistent height.
   */
  min-height: 34px;
  display: flex;
  align-items: center;
}.SidebarCard_SidebarCardSectionHeader_header_94e.SidebarCard_SidebarCardSectionHeader_inboxItem_c2d {
    background-color: var(--bgInformationalMuted);
  }

.SidebarCard_SidebarCardSortableItemsList_sortableItem_72b {
  position: relative;
  isolation: isolate;
}.SidebarCard_SidebarCardSortableItemsList_sortableItem_72b .SidebarCard_SidebarCardSortableItemsList_dragHandle_f9f {
    display: flex;
    /* we use opacity to show or hide the handle when hovering over it
     since it's absolute positioned with a -50% left offset */
    opacity: 0;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: calc(var(--cardHeaderHeight) / 2);
    left: 0;
    transform: translate(-50%, -50%);
    cursor: grab;
    padding: var(--spacing-4);
    border-radius: var(--borderRadiusMedium);
    color: var(--colorIconLight);
    background-color: var(--bgLightMuted);
    border: 1px solid var(--borderDefault);
    box-shadow: var(--shadowLevel2);
    z-index: 10;
    /* Prevents the page from scrolling when being dragged */
    /* This is especially useful for touch devices */
    /* To prevent the mobile device from interpreting the drag */
    /* as a scroll event and scrolling as normal */
    touch-action: none;
  }.SidebarCard_SidebarCardSortableItemsList_sortableItem_72b.SidebarCard_SidebarCardSortableItemsList_sortingDisabled_bd8 .SidebarCard_SidebarCardSortableItemsList_dragHandle_f9f {
      display: none;
    }.SidebarCard_SidebarCardSortableItemsList_sortableItem_72b.SidebarCard_SidebarCardSortableItemsList_isDragging_8cf {
    z-index: 1;
  }@media (hover: hover) {
    @media screen and (min-width: 768px) {
        .SidebarCard_SidebarCardSortableItemsList_sortableItem_72b:hover .SidebarCard_SidebarCardSortableItemsList_dragHandle_f9f {
          opacity: 1;
        }
      .SidebarCard_SidebarCardSortableItemsList_sortableItem_72b .SidebarCard_SidebarCardSortableItemsList_dragHandle_f9f:hover {
        opacity: 1;
      }
    }
  }

.LeadOpportunities_LeadOpportunityStatusIndicator_indicator_546 {
  width: 4px;
  height: 60px;
  max-height: 100%;
  border-radius: 4px;
}.LeadOpportunities_LeadOpportunityStatusIndicator_indicator_546.LeadOpportunities_LeadOpportunityStatusIndicator_active_e32 {
    background-color: var(--colorGold20);
  }.LeadOpportunities_LeadOpportunityStatusIndicator_indicator_546.LeadOpportunities_LeadOpportunityStatusIndicator_won_160 {
    background-color: var(--bgSuccess);
  }.LeadOpportunities_LeadOpportunityStatusIndicator_indicator_546.LeadOpportunities_LeadOpportunityStatusIndicator_lost_8c6 {
    background-color: var(--bgDefault);
  }.LeadOpportunities_LeadOpportunityStatusIndicator_indicator_546.LeadOpportunities_LeadOpportunityStatusIndicator_skeleton_330 {
    background-color: var(--bgSkeleton);
  }

.LeadHeader_root_923 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;

  padding: var(--spacing-12) var(--spacing-24);
}

.LeadHeader_mainContent_542 {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-grow: 1;
  margin: auto;
}

.LeadHeader_leadStatusWrapper_e60 {
  display: inline-block;
}

.ActivityActions_ActivityActionButton_largeIconButtons_946 {
  width: 40px;
  height: 40px;
}

.ActivityActions_ActivityActionButton_mediumIconButtons_b1f {
  width: 32px;
  height: 32px;
}

.ActivityActions_ActivityActionButton_customActivitiesLoader_873 {
  margin: 0 auto;
}

.LeadLayout_root_5c1 {
  height: 100%;
  display: flex;
  flex-direction: column;

  --leadLayoutHeaderHeight: 80px;
  --leadLayoutSidebarHeaderHeight: 48px;
  --leadLayoutZIndex: 11;
  --leadLayoutSidebarMaxHeight: 100dvh - var(--topNavHeight) -
    var(--leadLayoutHeaderHeight);
}

.LeadLayout_columns_7c1 {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: min-content 1fr;
  box-sizing: border-box;
}

.LeadLayout_columns_7c1.LeadLayout_hasSidebar_69c {
    /**
     * 1279 down:
     * - Fixed sidebar width
     * - Fluid main column with a min-width
    */
    grid-template-columns: 348px minmax(612px, 1fr);
    transition: grid-template-columns 0.3s ease;

    /**
     * 1280 up:
     * - Sidebar fluid with a max-width
     * - Main column filling the rest of the space
    */
  }

@media (min-width: 1280px) {

.LeadLayout_columns_7c1.LeadLayout_hasSidebar_69c {
      grid-template-columns: clamp(348px, 33%, 400px) minmax(0, 1fr);
  }
    }

/**
     * 1600 up:
     * - Sidebar starts at 412px with a max-width of 480 at 1680px
     * - Main column filling the rest of the space
    */

@media (min-width: 1600px) {

.LeadLayout_columns_7c1.LeadLayout_hasSidebar_69c {
      grid-template-columns: clamp(400px, 35%, 460px) minmax(0, 1fr);
  }
    }

.LeadLayout_mainHeader_bb9 {
  grid-row: 1;
  grid-column: 1 / 3;
  box-sizing: border-box;
  border-bottom: 1px solid var(--borderDefault);
  background-color: var(--surfaceBackgroundDefault);

  display: flex;
  justify-content: center;

  position: sticky;
  top: 0;
  z-index: var(--leadLayoutZIndex);
  height: var(--leadLayoutHeaderHeight);
}

.LeadLayout_mainColumn_ceb {
  display: flex;
  flex-direction: column;
  grid-row: 2;
  grid-column: 2;
  min-height: 0;
}

.LeadLayout_sidebarHeader_1df {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  padding: 0 var(--spacing-24);
  background-color: var(--surfaceBackgroundDefault);
  border-bottom: 1px solid var(--borderDefault);
  flex: 0 0 var(--leadLayoutSidebarHeaderHeight);
}

.LeadLayout_tabs_91f {
  margin-bottom: -1px;
}

.LeadLayout_sidebar_77c {
  grid-row: 2;
  grid-column: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--borderDefault);

  position: sticky;
  top: var(--leadLayoutHeaderHeight);
  max-height: calc(var(--leadLayoutSidebarMaxHeight));
  z-index: var(--leadLayoutZIndex);
}

.LeadLayout_sidebarContent_d13 {
  background: var(--surfaceBackgroundDefault);
  flex: 1;
}

.LeadLayout_sidebarScroller_485 {
  max-height: calc(
    var(--leadLayoutSidebarMaxHeight) - var(--leadLayoutSidebarHeaderHeight) -
      var(--leadLayoutSidebarBetaBannerHeight)
  );
  overscroll-behavior-y: contain;
}

.LeadLayout_skipLink_907 {
  padding: var(--spacing-8) var(--spacing-16);
  background: var(--surfaceBackgroundDefault);
  border: 2px solid var(--closeBrightBlue);
  border-radius: var(--borderRadiusMedium);
  color: var(--closeBrightBlue);
  font-size: var(--fontSizeBase);
  font-weight: var(--fontWeightMedium);
  -webkit-text-decoration: none;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.LeadLayout_skipLink_907:hover {
  background: var(--closeLightBlue);
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.LeadLayout_skipLink_907:focus {
  outline: 2px solid var(--closeBrightBlue);
  outline-offset: 2px;
}

.LeadScreenV2_MobileLeadLayout_root_054 {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: auto;
  position: relative;
  background-color: var(--surfaceBackgroundDefault);
}

.LeadScreenV2_MobileLeadLayout_header_bb4 {
  background-color: var(--surfaceBackgroundDefault);
}

.LeadScreenV2_MobileLeadLayout_tabs_404 {
  position: sticky;
  z-index: var(--stickyHeaderZIndex);
  top: 0;
  background-color: var(--surfaceBackgroundDefault);
  padding-top: var(--spacing-8);
}

.LeadScreenV2_MobileLeadLayout_tabContent_c3c {
  display: flex;
  flex-direction: column;
}

.LeadScreenV2_MobileLeadLayout_tabContent_c3c[hidden] {
    display: none;
  }

.LeadSuggestionSkeleton_container_6c5 {
  border-radius: var(--baseInputBorderRadius);
  border: 1px solid var(--borderDefault);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.LeadSuggestionSkeleton_header_9b8 {
  align-items: center;
  background-color: var(--bgTableCellDefault);
  border-radius: var(--baseInputBorderRadius) var(--baseInputBorderRadius) 0 0;
  display: flex;
  gap: var(--spacing-16);
  justify-content: space-between;
  padding: var(--spacing-8) var(--spacing-16);
}

.LeadSuggestionSkeleton_header_9b8:only-child {
    border-radius: var(--baseInputBorderRadius);
  }

.LeadSuggestionSkeleton_contactContainer_7fc {
  background-color: var(--surfaceBackgroundLight);
  border-top: 1px solid var(--borderDefault);
  border-radius: 0 0 var(--baseInputBorderRadius) var(--baseInputBorderRadius);
  box-sizing: border-box;
  padding: var(--spacing-12) var(--spacing-16);
}

.PotentialLeadsSummary_summaryCardContainer_591 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  position: sticky;
  top: var(--spacing-16);
}

.PotentialLeadsSummary_summaryCard_5ea {
  background-color: var(--bgCardBase);
  border: 1px solid var(--borderDefault);
  border-radius: var(--baseInputBorderRadius);
  height: fit-content;
  min-width: 280px;
  padding: var(--spacing-16);
}

.PotentialLeadsSummary_summaryFooter_22a {
  background-color: var(--bgCardBase);
  border-top: 1px solid var(--borderDefault);
  box-sizing: border-box;
  box-shadow: 0px -8px 12px -12px rgba(0, 0, 0, 0.25);
  bottom: 0;
  display: flex;
  gap: var(--spacing-8);
  justify-content: space-between;
  left: 0;
  padding: var(--spacing-16) var(--spacing-24);
  position: sticky;
  width: 100%;
}

.DraggablePanel_panel_992 {
  background: var(--bgCardBase);
  border: 1px solid var(--borderDefault);
  border-radius: var(--borderRadiusMedium);
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: visible;
  z-index: var(--zindexAIAssistant);
}.DraggablePanel_panel_992.DraggablePanel_draggable_860 {
    cursor: grab;
  }.DraggablePanel_panel_992.DraggablePanel_draggable_860,.DraggablePanel_panel_992.DraggablePanel_draggable_860 * {
      touch-action: none;
      -webkit-touch-callout: none;
    }.DraggablePanel_panel_992 [data-no-draggable] {
    cursor: auto;
  }:is(.DraggablePanel_panel_992 [data-no-draggable]),:is(.DraggablePanel_panel_992 [data-no-draggable]) * {
      touch-action: initial;
      -webkit-touch-callout: initial;
    }.DraggablePanel_panel_992.DraggablePanel_dragging_546 {
    cursor: grabbing;
    /* Enhanced shadow while dragging */
    box-shadow:
      0 20px 30px rgba(0, 0, 0, 0.2),
      0 10px 15px rgba(0, 0, 0, 0.1);

    /* Slight opacity reduction during drag */
    opacity: 0.95;

    /* Disable text selection during drag */
    -webkit-user-select: none;
            user-select: none;
  }.DraggablePanel_panel_992.DraggablePanel_resizing_ed9 {
    /* Enhanced shadow while resizing */
    box-shadow:
      0 20px 30px rgba(0, 0, 0, 0.2),
      0 10px 15px rgba(0, 0, 0, 0.1);

    /* Disable text selection during resize */
    -webkit-user-select: none;
            user-select: none;
  }.DraggablePanel_panel_992.DraggablePanel_hidden_40c {
    display: none;
  }

.DraggablePanel_ResizeHandle_resizeHandle_627 {
  position: absolute;
  z-index: 10;
  -webkit-user-select: none;
          user-select: none;
  pointer-events: auto;
  --resizeHandleWidth: 4px;
}

/* Corner handles */
.DraggablePanel_ResizeHandle_nw_29a {
  top: -4px;
  left: -4px;
  width: 8px;
  height: 8px;
  cursor: nw-resize;
}

.DraggablePanel_ResizeHandle_ne_079 {
  top: -4px;
  right: -4px;
  width: 8px;
  height: 8px;
  cursor: ne-resize;
}

.DraggablePanel_ResizeHandle_se_b18 {
  bottom: -4px;
  right: -4px;
  width: 8px;
  height: 8px;
  cursor: se-resize;
}

.DraggablePanel_ResizeHandle_sw_d35 {
  bottom: -4px;
  left: -4px;
  width: 8px;
  height: 8px;
  cursor: sw-resize;
}

/* Edge handles */
.DraggablePanel_ResizeHandle_n_3c8 {
  top: -4px;
  left: 8px;
  right: 8px;
  height: 8px;
  cursor: n-resize;
}

.DraggablePanel_ResizeHandle_e_cbc {
  top: 8px;
  right: -4px;
  bottom: 8px;
  width: 8px;
  cursor: e-resize;
}

.DraggablePanel_ResizeHandle_s_056 {
  bottom: -4px;
  left: 8px;
  right: 8px;
  height: 8px;
  cursor: s-resize;
}

.DraggablePanel_ResizeHandle_w_3a2 {
  top: 8px;
  left: -4px;
  bottom: 8px;
  width: 8px;
  cursor: w-resize;
}

/* Visual indicator (optional - can be hidden) */
.DraggablePanel_ResizeHandle_resizeHandle_627::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 1px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.DraggablePanel_ResizeHandle_resizeHandle_627:hover::after {
  opacity: 1;
}

.NoMemberships_page_273 {
  margin: auto;
  max-width: 560px;
  text-align: center;
  padding: 160px 8px 0 8px;
}

.NoMemberships_title_c56 {
  font-size: 24px;
  font-weight: 300;
}

.NoMemberships_section_bc4 {
  color: var(--colorTextMedium);
  margin: 8px 0 32px;
  font-size: 16px;
}

.NoMemberships_logo_c6b {
  display: inline-block;
  width: 136px;
  margin-bottom: 24px;
}

.NoMemberships_phone_ce1 {
  white-space: nowrap;
}

.DockedConversations_list_df7 {
  /* Float the container at the bottom of the screen, independent of scroll
   * height. */
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;

  /* Since this div floats over everything else it will swallow an click events
   * when conversations are expanded. But we want users to be able to interact
   * with contents that are behind the list, if they are not also behind a
   * conversation.
   *
   * NOTE: This means we can't make this div horizontally scrollable. I'm not
   *       sure if there's a good way to work around that. Perhaps making the
   *       height some value like 40, turning on pointer events, and requiring
   *       scrolling to take place down there?
   */
  pointer-events: none;

  z-index: var(--zindexFloatingUI);

  display: flex;
  flex-direction: row;

  align-items: flex-end;

  /* If we find a way to make the list container scrollable we'll have to
   * exchange this justify-content for another approach --
   * justify-content: flex-end doesn't work with scrolling. */
  justify-content: flex-end;

  padding-right: var(--spacing-32);
}

.DockedConversations_container_8e1 {
  /* Pointer-events cascades. Turn it back on for conversation containers. */
  pointer-events: auto;

  border: 1px solid var(--borderDefault);
  border-top-left-radius: var(--borderRadiusMedium);
  border-top-right-radius: var(--borderRadiusMedium);
  background-color: var(--bgLight);
  box-shadow: var(--shadowLevel3);

  width: 400px;

  margin-left: var(--spacing-12);

  /* Clip border radius */
  overflow: hidden;

  transition: all 200ms var(--easeInOutQuad);
  transition-property: width, border-color, background-color;
}

.DockedConversations_container_8e1.DockedConversations_minimized_6e8 {
    width: 240px;
  }

.DockedConversations_container_8e1.DockedConversations_minimized_6e8.DockedConversations_hasUnread_8de {
      border-color: var(--borderActive);
      background-color: var(--bgActiveMuted);
    }

.DockedConversations_header_0f8 {
  cursor: pointer;
}

.DockedConversations_header_0f8:hover {
    background-color: var(--bgLightHover);
  }

.DockedConversations_header_0f8.DockedConversations_hasUnread_8de:hover {
      background-color: initial;
    }

.DockedConversations_header_0f8 a {
    text-decoration-color: var(--borderHover);
  }

.DockedConversations_header_0f8 .DockedConversations_lineHeightContainer_48b {
    line-height: 16px;
  }

.DockedConversations_unreadIndicator_c5c {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  background-color: var(--fillActive);
  border-radius: 50%;
}

.DockedConversations_body_14c {
  height: calc(min(480px, 80vh));

  display: flex;
  flex-direction: column;

  transition: height 200ms var(--easeInOutQuad);
}

.DockedConversations_body_14c.DockedConversations_minimized_6e8 {
    height: 0;
  }

.DockedConversations_scroll_42e {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  padding: var(--spacing-12);
  scrollbar-width: thin;

  flex: 1;

  overflow-y: auto;

  /* experimental: match scrollbar color to CustomScroller styling. */
}

.DockedConversations_scroll_42e::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.4);
  }

.DockedConversations_scroll_42e {
  scrollbar-color: rgba(0, 0, 0, 0.4) transparent;

  /* scroll + justify-content: flex-end does not work correctly. So instead I
   * set a margin of `auto` on the first child so that the content is forced
   * to the bottom of the container when the messages do not fill up the height
   */
}

.DockedConversations_scroll_42e > :first-child {
    margin-top: auto;
  }

.DockedConversations_input_943 {
  flex: 1;
  margin: 0;
  resize: none;
}

.MessageActions_actionsContainer_f57 {
  display: flex;
  gap: var(--spacing-8);
  visibility: hidden;
}.MessageActions_actionsContainer_f57.MessageActions_forceVisibility_6df {
    visibility: visible;
  }

/**
 * TODO: currently some duplication here between this and Content.module.css
 *
 * Content is rich text content rendered by Prosemirror, View is rich text rendered
 * without Prosemirror, but we need to support much of the same formatting/CSS.
 */
.RawRichTextViewer_viewer_392 {
  width: 100%;
  outline: none;
}
.RawRichTextViewer_viewer_392.RawRichTextViewer_preserveWhiteSpaces_c6c {
    white-space: pre-wrap;
  }
.RawRichTextViewer_viewer_392  > p:last-child,.RawRichTextViewer_viewer_392 ul:last-child,.RawRichTextViewer_viewer_392 ol:last-child {
    margin-bottom: 0;
  }
.RawRichTextViewer_viewer_392 ol > li {
    list-style-type: decimal;
  }
:is(.RawRichTextViewer_viewer_392 ol > li) ol > li {
      list-style-type: lower-alpha;
    }
:is(:is(.RawRichTextViewer_viewer_392 ol > li) ol > li) ol > li {
        list-style-type: lower-roman;
      }
.RawRichTextViewer_viewer_392 ul > li {
    list-style-type: disc;
  }
:is(.RawRichTextViewer_viewer_392 ul > li) ul > li {
      list-style-type: circle;
    }
:is(:is(.RawRichTextViewer_viewer_392 ul > li) ul > li) ul > li {
        list-style-type: square;
      }
.RawRichTextViewer_viewer_392 p,.RawRichTextViewer_viewer_392  > ul {
    margin-bottom: var(--spacing-8);
  }
:is(.RawRichTextViewer_viewer_392 blockquote,.RawRichTextViewer_viewer_392 li),:is(.RawRichTextViewer_viewer_392 blockquote,.RawRichTextViewer_viewer_392 li) p {
      font-size: inherit;
      font-style: inherit;
      font-weight: inherit;
      line-height: inherit;
      margin-bottom: 0;
    }
.RawRichTextViewer_viewer_392 blockquote {
    color: var(--gray-50);
  }
.RawRichTextViewer_viewer_392 mark {
    background-color: var(--bgHighlightMatchSelected);
  }
.RawRichTextViewer_viewer_392 a {
    overflow-wrap: anywhere;
  }
/* #region Mention plugin */
.RawRichTextViewer_viewer_392 [data-type='mention'] {
    color: var(--colorLinkDefault);
  }
/* #endregion */
/* #region BackgroundColor */
/**
     * These colors must match the keys in HighlightColorKey!
     * They should also be styled consistently with the named color class names
     * in the color picker menu
     */
.RawRichTextViewer_viewer_392 [data-highlight-color='bgRed'] {
    background-color: var(--colorBgRichTextHighlightRed);
  }
.RawRichTextViewer_viewer_392 [data-highlight-color='bgYellow'] {
    background-color: var(--colorBgRichTextHighlightYellow);
  }
.RawRichTextViewer_viewer_392 [data-highlight-color='bgGreen'] {
    background-color: var(--colorBgRichTextHighlightGreen);
  }
.RawRichTextViewer_viewer_392 [data-highlight-color='bgBlue'] {
    background-color: var(--colorBgRichTextHighlightBlue);
  }
.RawRichTextViewer_viewer_392 [data-highlight-color='bgPurple'] {
    background-color: var(--colorBgRichTextHighlightPurple);
  }

.Message_messageContainer_184 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.Message_messageContainer_184.Message_gapless_e0f {
    gap: 0;
  }

.Message_messageContainer_184:hover .showOnMessageHover {
      visibility: visible;
    }

.Message_messageContainer_184.Message_clickable_de1 .Message_avatar_a79 {
      cursor: pointer;
    }

.Message_messageContainer_184.Message_clickable_de1 .Message_message_a1e {
      cursor: pointer;
    }

.Message_incoming_53f:is(.Message_messageContainer_184.Message_clickable_de1 .Message_message_a1e):hover {
          border-color: var(--borderDefault);
        }

.Message_sms_e64 .Message_outgoing_8f3:is(.Message_messageContainer_184.Message_clickable_de1 .Message_message_a1e):hover {
            border-color: var(--borderSmsMutedHover);
          }

.Message_whatsapp_bf0 .Message_outgoing_8f3:is(.Message_messageContainer_184.Message_clickable_de1 .Message_message_a1e):hover {
            border-color: var(--borderWhatsAppMutedHover);
          }

.Message_messageContainer_184.Message_outgoing_8f3 .Message_metaRow_066 {
      justify-content: flex-end;
      padding-right: var(--spacing-24);
    }

.Message_messageContainer_184.Message_incoming_53f .Message_metaRow_066 {
      justify-content: flex-start;
      padding-left: var(--spacing-24);
    }

.Message_message_a1e {
  max-width: 80%;
  border-radius: var(--activityBorderRadius);
  padding: var(--spacing-8) var(--spacing-12);
  border: 1px solid transparent;
  transition:
    background-color 1.5s ease,
    box-shadow 1.5s ease;
}

.Message_message_a1e.Message_incoming_53f {
    background-color: var(--bgCardBase);
    border-color: var(--borderLight);
  }

.Message_message_a1e.Message_incoming_53f.Message_highlighted_8ed {
      /* Do not show a transition to the focused color. */
      transition: none;
      background-color: var(--bgActiveMuted);
      box-shadow: 0 0 0 4px var(--bgActiveMuted);
    }

.Message_sms_e64 .Message_message_a1e.Message_outgoing_8f3 {
      background-color: var(--colorBgActivitySMSMuted);
      border-color: var(--borderSmsMuted);
    }

.Message_whatsapp_bf0 .Message_message_a1e.Message_outgoing_8f3 {
      background-color: var(--colorBgActivityWhatsAppMuted);
      border-color: var(--borderWhatsAppMuted);
    }

.Message_message_a1e.Message_outgoing_8f3.Message_highlighted_8ed {
      /* Do not show a transition to the focused color. */
      transition: none;
      background-color: var(--bgActiveMuted);
      border-color: transparent;
      box-shadow: 0 0 0 4px var(--bgActiveMuted);
    }

.Message_message_a1e p {
    margin-bottom: 0;
  }

.Message_avatar_a79 {
  align-self: flex-end;
}

.Message_divider_217 {
  background-color: var(--borderLight);
  display: flex;
  flex: 1;
  height: 1px;
}

.Message_attachmentContainer_5dc {
  width: 80%;
}

.Message_metaRow_066 {
  align-items: center;
  display: flex;
  height: 16px;
  gap: var(--spacing-8);
  opacity: 1;
  transition:
    opacity 200ms var(--standardCurve),
    height 200ms var(--standardCurve);
}

.Message_metaRow_066.Message_hidden_860 {
    height: 0;
    opacity: 0;
  }

.CallBlockedModal_InboundCallBlockedModal_arrowCircle_553 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: var(--surfaceBackgroundDefault);
  border-radius: 50%;
}

.DoNotShowAgainTodayCheckbox_DoNotShowAgainTodayCheckbox_138 {
  margin-bottom: 0;
}

.DoNotShowAgainTodayCheckbox_DoNotShowAgainTodayCheckbox__inputControl_529[type='checkbox'] {
  margin: 0 8px 3px 0;
}

.JoinableCallBar_bar_f05 {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 8px;
  background-color: #edf6e8;
  padding: 4px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.JoinableCallBar_avatar_59d {
  transform: scale(0.8);
}

.JoinableCallBar_info_f47 {
  display: flex;
  align-items: center;
  color: var(--colorTextMedium);
}

.JoinableCallBar_bullet_439 {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: var(--colorTextMedium);
  margin: 0 8px;
}

.JoinableCallBar_actions_e1b {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 8px;
}

.TopBar_contentCentered_5db {
  display: flex;
  align-items: center;
  justify-content: center;
}

.TopBar_container_d12 {
  --topBarHeight: 40px;

  flex: 0 0 auto;
  line-height: 16px;
  font-size: 14px;
  text-align: center;
  z-index: 5; /* above expanded search input */
  overflow: hidden;
  white-space: nowrap;
  height: 0;
  transition: height 200ms var(--accelerationCurve);
}

.TopBar_container_d12.TopBar_warning_526 {
    background-color: var(--bgWarn);
    color: var(--colorTextNeutralBlack);
  }

.TopBar_container_d12.TopBar_info_35f {
    background-color: var(--bgInformational);
    color: var(--colorTextNeutralWhite);
  }

.TopBar_container_d12.TopBar_danger_211 {
    background-color: var(--bgDanger);
    color: var(--colorTextNeutralWhite);
  }

.TopBar_container_d12.TopBar_dangerMuted_171 {
    background-color: var(--bgDangerMuted);
    color: var(--colorTextDanger);
  }

.TopBar_container_d12.TopBar_visible_589 {
    min-height: var(--topBarHeight);
  }

.TopBar_container_d12.TopBar_visible_589 .TopBar_content_a12 {
      margin-top: 0;
    }

.TopBar_container_d12 .TopBar_content_a12 {
    margin-top: calc(var(--topBarHeight) * -1);
    transition: margin-top 200ms var(--accelerationCurve);
    flex: 1;
    min-height: var(--topBarHeight);
    padding: 0px 16px;
    line-height: var(--topBarHeight);
  }

.TopBar_container_d12 .TopBar_symbol_620 {
    line-height: 16px;
    display: inline-block;
    font-size: 8px;
    padding: 0 7px;
    opacity: 0.2;
    vertical-align: middle;
    font-style: normal;
  }

.TopBar_container_d12 a {
    color: inherit;
    font-weight: var(--fontWeightBold);
    -webkit-text-decoration: none;
    text-decoration: none;
    vertical-align: middle;
  }

:is(.TopBar_container_d12 a):hover,:is(.TopBar_container_d12 a):active,:is(.TopBar_container_d12 a):focus {
      -webkit-text-decoration: underline;
      text-decoration: underline;
    }

.TopBar_container_d12 .TopBar_close_db4 {
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    float: right;
    font-size: 20px;
    font-weight: var(--fontWeightBold);
    line-height: var(--topBarHeight);
    color: #000;
    opacity: 0.2;
    -webkit-appearance: none;
  }

.TopBar_danger_211:is(.TopBar_container_d12 .TopBar_close_db4) {
      color: var(--colorIconNeutralWhite);
      opacity: 1;
      font-weight: 100;
      margin-top: -2px; /* used to align the close button with the text without bold font */
    }

.TopBar_container_d12 .TopBar_text_8e6 {
    text-overflow: ellipsis;
    display: inline-block;
    /* leave 180px space for CTA "See details" button + exit button in the topbar */
    max-width: calc(100% - 180px);
    overflow: hidden;
  }

.TopBar_noCTA_c2d:is(.TopBar_container_d12 .TopBar_text_8e6) {
      max-width: none;
    }


  @media screen and (max-width: 767px) {

.AccountDisconnectedBarContainer_topBarMobile_1a3 {
    height: auto;
}
  }

.AccountDisconnectedBarContainer_container_fe6 {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}

@media screen and (max-width: 767px) {

.AccountDisconnectedBarContainer_container_fe6 {
    align-items: flex-start;
    padding-top: var(--spacing-12);
    gap: var(--spacing-12);
}
  }

.AccountDisconnectedBarContainer_textWrapper_1f9 {
  display: flex;
  white-space: normal;
  text-align: left;
}

.AccountDisconnectedBarContainer_btnWrapper_338 {
  min-height: var(--topBarHeight);
  padding: 0 var(--spacing-8);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
}

@media screen and (max-width: 767px) {

.AccountDisconnectedBarContainer_btnWrapper_338 {
    min-height: 0;
    align-self: flex-end;
    padding: 0 0 var(--spacing-12) 0;
    flex-grow: 1;
    justify-content: flex-end;
}
  }

.AccountDisconnectedBarContainer_contactSupportBtn_aa6.AccountDisconnectedBarContainer_contactSupportBtn_aa6 {
    background-color: transparent;
    color: var(--colorTextNeutralWhite);
    border-color: var(--colorTextNeutralWhite);
    -webkit-text-decoration: none;
    text-decoration: none;
  }

.AccountDisconnectedBarContainer_link_bc7.AccountDisconnectedBarContainer_link_bc7 {
    display: flex;
    align-items: center;
  }

.AccountDisconnectedBarContainer_link_bc7.AccountDisconnectedBarContainer_link_bc7:hover {
      -webkit-text-decoration: none;
      text-decoration: none;
    }

/*
   For now these stylings are only used on `AccountDisconnectedBar`
   If you need to copy these to any other component,
   it's better to create a new <Button> theme */

.AccountDisconnectedBarContainer_contactSupportBtn_aa6.AccountDisconnectedBarContainer_contactSupportBtn_aa6:hover {
      background-color: var(--colorTextNeutralWhite);
      color: var(--colorBrandRed);
      border-color: var(--colorTextNeutralWhite);
    }

.AccountDisconnectedBarContainer_contactSupportBtn_aa6.AccountDisconnectedBarContainer_contactSupportBtn_aa6:focus:not(:hover),.AccountDisconnectedBarContainer_contactSupportBtn_aa6.AccountDisconnectedBarContainer_contactSupportBtn_aa6:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px
        color-mix(in srgb, var(--colorTextNeutralWhite) 50%, transparent);
      border-color: color-mix(in srgb, #000 8%, var(--colorTextNeutralWhite));
      color: var(--colorTextDanger);
      background-color: var(--colorTextNeutralWhite);
    }

.AccountDisconnectedBarContainer_contactSupportBtn_aa6.AccountDisconnectedBarContainer_contactSupportBtn_aa6:disabled {
      opacity: 0.7;
    }

.PlanCancellationAlertBanner_banner_308 {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.PlanCancellationAlertBanner_undoButton_4d4 {
  margin-left: var(--spacing-8);
}

.AppErrorBar_container_259 {
  --colorLinkDefault: currentColor;
  --colorLinkHover: currentColor;
}



  /* make modal a little bigger */@media (min-width: 820px) {.KeyboardShortcutsModal_KeyboardShortcutsModal_keyboardShortcutsModal_2d3 {
    width: 810px;
}
  }.KeyboardShortcutsModal_KeyboardShortcutsModal_keyboardShortcutsModal_2d3 h4 {
    margin-bottom: 6px;
    font-size: 16px;
  }.KeyboardShortcutsModal_KeyboardShortcutsModal_keyboardShortcutsModal_2d3 dl {
    margin-top: 0;
  }:is(.KeyboardShortcutsModal_KeyboardShortcutsModal_keyboardShortcutsModal_2d3 dl):last-child {
      margin-bottom: 0;
    }.KeyboardShortcutsModal_KeyboardShortcutsModal_keyboardShortcutsModal_2d3 dt,.KeyboardShortcutsModal_KeyboardShortcutsModal_keyboardShortcutsModal_2d3 dd {
    font-size: 13px;
    line-height: 23px;
  }.KeyboardShortcutsModal_KeyboardShortcutsModal_keyboardShortcutsModal_2d3 dt {
    float: left;
    clear: left;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 110px;
  }.KeyboardShortcutsModal_KeyboardShortcutsModal_keyboardShortcutsModal_2d3 dd {
    margin-left: 118px;
  }.KeyboardShortcutsModal_KeyboardShortcutsModal_keyboardShortcutsModal_2d3 .text-muted {
    font-weight: normal;
    font-size: 11px;
  }.KeyboardShortcutsModal_KeyboardShortcutsModal_keyboardShortcutsModal_2d3 .KeyboardShortcutsModal_KeyboardShortcutsModal_key_c01 {
    display: inline-block;
    min-width: 8px;
    margin-right: 3px;
    padding: 0 3px;
    border-radius: 2px;
    border: solid 1px var(--bgDefault);
    box-shadow: 1px 1px 0 var(--bgDefault);
    background-color: var(--bgDefault);
    color: var(--colorTextDefault);
    font-size: 12px;
    font-weight: normal;
    line-height: 15px;
    text-align: center;
  }:is(.KeyboardShortcutsModal_KeyboardShortcutsModal_keyboardShortcutsModal_2d3 .KeyboardShortcutsModal_KeyboardShortcutsModal_key_c01):last-child {
      margin-right: 0;
    }.KeyboardShortcutsModal_KeyboardShortcutsModal_keyboardShortcutsModal_2d3 .KeyboardShortcutsModal_KeyboardShortcutsModal_halfWidth_357 {
    float: left;
  }:is(.KeyboardShortcutsModal_KeyboardShortcutsModal_keyboardShortcutsModal_2d3 .KeyboardShortcutsModal_KeyboardShortcutsModal_halfWidth_357):first-child {
      margin: 0 0 20px 0;
    }/* stack columns when on narrow screens *//* keyboard shortcuts don't apply on mobile but whatever */@media (min-width: 820px) {.KeyboardShortcutsModal_KeyboardShortcutsModal_keyboardShortcutsModal_2d3 .KeyboardShortcutsModal_KeyboardShortcutsModal_halfWidth_357 {
      width: calc(50% - 20px);
  }

      :is(.KeyboardShortcutsModal_KeyboardShortcutsModal_keyboardShortcutsModal_2d3 .KeyboardShortcutsModal_KeyboardShortcutsModal_halfWidth_357):first-child {
        margin: 0 20px 0 0;
      }
    }

.LeftNav {
  --leftNavSpacing: var(--spacing-12);

  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  /* color used for all items as default, except on TopNav (username and org selector) */
  color: var(--colorGray20);
  flex: 0 0 100%;
  min-width: 224px;
  width: 17.5vw;
  max-width: var(--leftNavWidth);
  font-size: var(--fontSizeBase);
  -webkit-font-smoothing: antialiased;
  background-color: var(--bgNavSidebar);
  border-right: 1px solid var(--borderNavSidebar);
  z-index: 101; /* behind popover backdrop and filter sidebar */
}

@media screen and (max-width: 767px) {

.LeftNav {
    z-index: 1005; /* behind .TopBar */
}
  }

.LeftNav ::-webkit-scrollbar {
    width: 3px;
  }

.LeftNav ::-webkit-scrollbar-track {
    background-color: var(--bgNavSidebar);
  }

.LeftNav ::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.25);
  }

/* This rule must only contain the `font-size` property. */

@media screen and (min-width: 768px) {

@media (max-color:2147477350) and (max-width: calc(var(--desktopWidth) + 40px)) {

.LeftNav {
    font-size: var(--fontSizeSmall);
}
  }
  }

@media not screen,not all and (min-width: 768px) {

@media (color:2147477350) and (max-width: calc(var(--desktopWidth) + 40px)) {

.LeftNav {
    font-size: var(--fontSizeSmall);
}
  }
  }

@media screen and (min-width: 768px) {
    .LeftNav.is-collapsed {
      min-width: 64px;
      width: 64px;
      max-width: 4.375vw;
    }

      .LeftNav.is-collapsed .LeftNav__addButton {
        display: none;
      }
  }

.LeftNav__wrapper {
  display: flex;
  flex: 0 0 auto;
}

@media print {

.LeftNav__wrapper {
    display: none;
}
  }

:fullscreen .LeftNav__wrapper {
    display: none;
  }

@media screen and (max-width: 767px) {

.LeftNav__wrapper {
    min-width: var(--leftNavWidth);
    width: 100vw;
    margin-top: 56px;
    transform: translateX(-100%);
    transition: transform 200ms;
}

    .LeftNav__wrapper.visible {
      transform: none;
    }
  }

.LeftNav__backdrop {
  display: none;
}

@media screen and (max-width: 767px) {

.LeftNav__backdrop {
    display: block;
    flex: 1;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1005;
}
  }

.LeftNav__addButton {
  height: 14px;
  width: 14px;
  color: var(--colorIconLight);
  transition: color 50ms ease-in-out;
}

.LeftNav__addButton  > button {
    height: 14px;
  }

:is(.LeftNav__addButton > button):focus,:is(.LeftNav__addButton > button):focus-visible {
      outline: 1px solid var(--borderFocused);
    }

.LeftNav__addButton:hover {
    color: var(--colorWhite);
  }

.Menu_menu_c10 {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  margin: 0;
  background-color: inherit;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.Menu_menuList_6f5,
.Menu_menuSublist_3a1 {
  list-style: none;
  margin: 0;
}

.Menu_menuList_6f5 {
  padding: var(--spacing-16) 0;
}

.Menu_menuListBottom_ecc {
  position: sticky;
  bottom: 0;
  background-color: inherit;
}

.Menu_menuListBottom_ecc::before {
    content: '';
    display: block;
    border-top: 1px solid var(--colorGray70);
    left: var(--spacing-12);
    position: absolute;
    right: var(--spacing-12);
    top: 0;
  }

.Menu_menuListSticky_8a6 {
  box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.15);
}

.Menu_menuItem_ca1 {
  --extraContentSize: var(--spacing-20);
  font-weight: var(--fontWeightBold);
}

.Menu_menuItem_ca1:not(:last-of-type) {
    margin-bottom: 1px;
  }

.Menu_menuItem_ca1  > .Menu_menuList_6f5 {
    margin-top: 1px;
    padding-bottom: 0;
    padding-top: 0;
  }

:is(.Menu_menuItem_ca1 > .Menu_menuList_6f5) .Menu_menuItem_ca1 {
      font-size: var(--fontSizeSmall);
      font-weight: 400;
      margin-bottom: 0;
      color: var(--colorGray30);
    }

.Menu_isActive_a3e:is(:is(.Menu_menuItem_ca1 > .Menu_menuList_6f5) .Menu_itemLink_91f) .Menu_itemLinkContent_7f5 {
        font-weight: var(--fontWeightBold);
        background-color: transparent;
      }

:is(.Menu_isActive_a3e:is(:is(.Menu_menuItem_ca1 > .Menu_menuList_6f5) .Menu_itemLink_91f) .Menu_itemLinkContent_7f5):hover {
          background-color: var(--bgNavSidebarMenuitemHover);
        }

:is(.Menu_menuItem_ca1 > .Menu_menuList_6f5) .Menu_itemLinkContent_7f5 {
      border-radius: 24px;
      color: var(--colorGray40);
      padding: 2px var(--leftNavSpacing);
    }

:is(.Menu_menuItem_ca1 > .Menu_menuList_6f5) .Menu_itemIcon_549 {
      color: var(--colorIconLight);
    }

:is(.Menu_menuItemContent_bc9:hover,.Menu_menuItemContent_bc9 .Menu_itemLink_91f.Menu_isActive_a3e) .Menu_itemLinkContent_7f5 {
      background-color: var(--bgNavSidebarMenuitemActive);
    }

.Menu_hasExtraContent_d10 {
  position: relative;

  /**
    * It's necessary to add extra padding when `hasExtraContent` to
    * make sure menu item labels can't go "under" the `extra` content.
    */
}

.Menu_hasExtraContent_d10 .Menu_itemLinkContent_7f5 {
    padding-right: calc(var(--leftNavSpacing) + var(--extraContentSize));
  }

.Menu_menuItemExtraContent_00c {
  align-items: center;
  display: flex;
  height: var(--extraContentSize);
  justify-content: center;
  position: absolute;
  right: calc(var(--leftNavSpacing) * 2);
  top: 50%;
  transform: translateY(-50%);
  width: var(--extraContentSize);
}

.Menu_itemButton_46c {
  width: 100%;
  outline-offset: -2px;
}

.Menu_itemButton_46c,
.Menu_itemLink_91f {
  display: flex;
  align-items: center;
  cursor: pointer;
  white-space: nowrap;
  padding-left: var(--leftNavSpacing);
  padding-right: var(--leftNavSpacing);
}

:is(.Menu_itemButton_46c,.Menu_itemLink_91f):focus,:is(.Menu_itemButton_46c,.Menu_itemLink_91f):focus-visible {
    outline: none;
  }

:is(.Menu_itemButton_46c,.Menu_itemLink_91f):focus-visible .Menu_itemLinkContent_7f5 {
      outline: 1px solid var(--borderFocused);
    }

:is(.Menu_itemButton_46c,.Menu_itemLink_91f),:is(.Menu_itemButton_46c,.Menu_itemLink_91f):hover,:is(.Menu_itemButton_46c,.Menu_itemLink_91f):active,:is(.Menu_itemButton_46c,.Menu_itemLink_91f):focus {
    color: currentColor;
    -webkit-text-decoration: none;
    text-decoration: none;
  }

.Menu_isActive_a3e:is(.Menu_itemButton_46c,.Menu_itemLink_91f) .Menu_itemLinkContent_7f5 {
    color: var(--colorWhite);
  }

.Menu_itemLinkContent_7f5 {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 6px var(--leftNavSpacing);
  border-radius: 32px;
}

.Menu_itemIcon_549 {
  width: var(--spacing-16);
  height: var(--spacing-16);
  margin-right: 11px;
  flex-shrink: 0;
  position: relative;
}

.Menu_itemIcon_549.Menu_itemIconWithCount_333.Menu_single_d15 svg {
        clip-path: path('M0 16H16V9C11.0294 9 7 4.97056 7 0H0V16Z');
      }

.Menu_itemIcon_549.Menu_itemIconWithCount_333.Menu_single_d15 .Menu_count_168 {
        text-indent: 1px;
      }

.Menu_itemIcon_549.Menu_itemIconWithCount_333.Menu_double_fef svg {
        clip-path: path('M0 16H16V9H9C4.02944 9 0 4.97056 0 0V16Z');
      }

.Menu_itemIcon_549.Menu_itemIconWithCount_333.Menu_double_fef .Menu_count_168 {
        width: 23px;
      }

.Menu_itemIcon_549.Menu_itemIconWithCount_333.Menu_triple_7d9 svg {
        clip-path: path('M15.9999 9H-1.09673e-05L-6.10352e-05 16H15.9999V9Z');
      }

.Menu_itemIcon_549.Menu_itemIconNotification_5e0 svg {
      clip-path: path('M0 16H16V9C11.0294 9 7 4.97056 7 0H0V16Z');
    }

.Menu_itemBadge_b17 {
  margin-left: auto;

  /* override menuItem line-height so badge is centered */
  line-height: 0;
}

.Menu_collapseText_fcc {
  color: var(--colorGray40);
}

.Menu_collapseIcon_ce5,
.Menu_itemExternalIcon_299 {
  display: flex;
  color: var(--colorGray60);
  margin-left: auto;
}

:is(.Menu_collapseIcon_ce5,.Menu_itemExternalIcon_299) svg {
    width: 14px;
    height: 14px;
  }

.Menu_itemPopover_1a6 {
  width: 220px;
  padding: var(--spacing-4) 0;
}

.Menu_itemPopover_1a6 .Menu_menuList_6f5 {
    padding: 0;
    line-height: 0;
  }

.Menu_itemPopover_1a6 .Menu_menuItem_ca1 {
    font-weight: 400;
  }

.Menu_itemPopover_1a6 .Menu_itemIcon_549 {
    display: none;
  }

.Menu_itemPopover_1a6 .Menu_itemSubtitle_e52,.Menu_itemPopover_1a6 .Menu_itemLink_91f {
    padding: 6px var(--spacing-24) 6px var(--spacing-16);
  }

.Menu_itemPopover_1a6 .Menu_itemLink_91f {
    line-height: 16px;
  }

:is(.Menu_itemPopover_1a6 .Menu_itemLink_91f):hover {
      background-color: var(--bgMenuItemHover);
    }

:is(.Menu_itemPopover_1a6 .Menu_itemLink_91f):hover:not(.Menu_isActive_a3e) .Menu_itemLinkContent_7f5,.Menu_isActive_a3e:is(.Menu_itemPopover_1a6 .Menu_itemLink_91f) .Menu_itemLinkContent_7f5 {
      color: currentColor;
      background-color: transparent;
    }

.Menu_itemPopover_1a6 .Menu_itemLinkContent_7f5 {
    padding: 0;
  }

.Menu_itemPopover_1a6 .Menu_itemSubtitle_e52 {
    margin: 0;
    font-size: var(--fontSizeBase);
    font-weight: var(--fontWeightBold);
    line-height: 16px;
  }

@media screen and (max-width: 767px) {
  .Menu_menuCollapse_771 {
    display: none;
  }
}

@media screen and (min-width: 768px) {
    .is-collapsed .Menu_itemIcon_549 {
      margin: 0;
      flex-shrink: initial;
    }

    .is-collapsed .Menu_collapseIcon_ce5 {
      margin: 1px 0;
    }

    .is-collapsed .Menu_menuItem_ca1 {
      margin-bottom: 0;
    }

    .is-collapsed .Menu_itemLinkContent_7f5 {
      justify-content: center;
      padding: var(--spacing-8) var(--leftNavSpacing);
    }

    .is-collapsed .Menu_itemText_79f,.is-collapsed .Menu_itemExternalIcon_299,.is-collapsed .Menu_collapseText_fcc {
      display: none;
    }

    .is-collapsed .Menu_collapseIcon_ce5 {
      transform: scaleX(-1);
    }

    .is-collapsed .Menu_menuItemExtraContent_00c {
      display: none;
    }
}

.Menu_count_168 {
  color: var(--colorWhite);
  background-color: var(--colorBrandGreen);
  padding: 2px var(--spacing-4) 0 var(--spacing-4);
  min-width: var(--spacing-16);
  height: var(--spacing-16);
  display: block;
  text-align: center;
  font-size: 9px;
  line-height: 12px;
  font-weight: var(--fontWeightBold);
  border-radius: 8px;
  position: absolute;
  top: calc(-1 * var(--spacing-8));
  right: calc(-1 * var(--spacing-8));
  box-sizing: border-box;
}

.Menu_notificationIcon_9d9 {
  background-color: var(--colorBrandGreen);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  position: absolute;
  top: -7px;
  right: -7px;
  box-sizing: border-box;
}

.Menu_aiAssistantButton_a78 {
  margin: 0 var(--spacing-12);
  width: calc(100% - var(--spacing-24));
  padding: var(--spacing-12);
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  border-radius: 32px;
  color: var(--colorWhite);
  height: 32px;
  margin-bottom: var(--spacing-12);
}

.Menu_aiAssistantButton_a78:hover {
    background-color: var(--bgNavSidebarMenuitemHover);
  }

.Menu_aiAssistantButton_a78:active {
    background-color: var(--bgNavSidebarMenuitemActive);
  }

.Menu_aiAssistantButton_a78:focus-visible {
    outline: 1px solid var(--borderFocused);
  }

.Menu_aiAssistantButtonText_5a4 {
  font-weight: var(--fontWeightMedium);
  font-size: var(--fontSizeBase);
}

.Menu_aiAssistantShortcutKeys_5b1 {
  color: var(--colorTextLight);
  font-weight: var(--fontWeightBold);
  margin-left: auto;
}

.is-collapsed .Menu_hideWhenCollapsed_d42 {
    display: none;
  }

.Menu_tooltipContent_201 {
  display: flex;
  flex-direction: column;
  background: var(--colorBgTooltip);
}

@keyframes Streamer_fadeIn_a27 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.Streamer_fadeInAnimation_088 {
  animation-name: Streamer_fadeIn_a27;
}

.AgentSummary_container_c3c {
  padding: var(--spacing-16) var(--spacing-12) var(--spacing-32) var(--spacing-12);
  border-radius: 7px;
  background: var(--bgCardMedium);
  height: 360px;
  overflow-y: scroll;
}

.AgentSummary_container_c3c * {
  line-height: 1.4 !important;
}

.AgentSummary_message_880 {
  display: flex;
  flex-direction: row;
}

.AgentSummary_message_880:not(:first-child) {
  margin-top: var(--spacing-12);
}

.AgentSummary_messageIcon_b34 {
  margin-top: 2px;
  margin-right: var(--spacing-8);
}

.AgentSummary_inactiveMessage_e8c {
  color: var(--colorTextLight);
}

@keyframes AgentSummary_rotate_cd4 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.AIWorkflow_modal_f68 {
  width: 600px
}

@media screen and (max-width: 767px) {
  .AIWorkflow_modal_f68 {
    width: 95vw;
  }
}

.AIWorkflow_promptContainer_438 {
  position: relative;
  margin-top: var(--spacing-16);
  margin-bottom: var(--spacing-16);
}

.AIWorkflow_generateFooter_cb0 {
  position: absolute;
  bottom: 0;
  width: 100%;
  pointer-events: none;
}

.AIWorkflow_generateFooterContent_4a3 {
  padding: var(--spacing-12);
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.AIWorkflow_generateFooterTitle_77f {
  margin-left: var(--spacing-8);
}

.AIWorkflow_generateFooterActions_aee {
  pointer-events: auto;
}

.AIWorkflow_generateFooterContentOpaque_01c {
  background: var(--surfaceBackgroundDefault);
  margin: 0 1px 1px 1px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  border-top: 1px solid var(--borderDefault);
}

.AIWorkflow_templatesIcon_2d7 {
  margin-right: var(--spacing-4);
  height: 16px;
}

.AIWorkflow_templatesIcon_2d7 svg {
    width: 16px;
    height: 16px;
  }

.AIWorkflow_textArea_a71 {
  height: auto;
  max-height: 400px;
  overflow-y: auto;
  resize: none;
}

.AIWorkflow_iconSparkleAI_53e {
  color: var(--colorLinearGradientAi);
  height: 16px;
}

.AIWorkflow_iconSparkleAI_53e svg {
    width: 16px;
    height: 16px;
  }

.AIWorkflow_startFromScratch_88a {
  color: var(--colorTextDanger);
  -webkit-text-decoration: underline;
  text-decoration: underline;
  font-weight: normal;
}

.SuggestionCards_grid_2d5 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-16);
  padding-top: var(--spacing-16);
}

@media screen and (max-width: 1119px) {
  .SuggestionCards_grid_2d5 {
    grid-template-columns: 1fr;
  }
}

.SuggestionCards_card_b03 {
  border-radius: 12px;
  padding: var(--spacing-12);
  display: flex;
  height: 60px;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

.SuggestionCards_header_7d9 {
  display: flex;
  align-items: center;
  flex-direction: row;
  margin-bottom: 2px;
}

.SuggestionCards_title_076 {
  margin-left: var(--spacing-8);
}

.SuggestionCards_icon_84f {
  display: inline-block;
}

.SuggestionCards_icon_84f svg {
    width: 10px;
    height: 10px;
  }

.SuggestionCards_iconFill_35d {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.SmartViewList_root_e13 {
  padding: 0 0 24px 0;
  flex-grow: 1;
  box-shadow: inset 0 1px 0 0 var(--colorGray70);
}

.SmartViewList_header_d16 {
  display: flex;
  column-gap: 16px;
  margin: 18px var(--spacing-24);
}

.SmartViewList_collapsedTrigger_ba3 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 39px;
  height: 32px;
  border-radius: 32px;
  margin: var(--spacing-16) auto;
}

.SmartViewList_collapsedTrigger_ba3:focus,.SmartViewList_collapsedTrigger_ba3:focus-visible {
    outline: 1px solid var(--borderFocused);
  }

.SmartViewList_title_46a {
  color: var(--colorGray30);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.25px;
  font-weight: var(--fontWeightBold);
  text-transform: uppercase;
}

.SmartViewList_smartViewIcon_626,
.SmartViewList_searchIcon_22f {
  color: var(--colorGray40);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 50ms ease-in-out;
  width: 14px;
  height: 14px;
  outline-offset: 0px;
}

:is(.SmartViewList_smartViewIcon_626,.SmartViewList_searchIcon_22f):hover {
    color: var(--colorWhite);
  }

:is(.SmartViewList_smartViewIcon_626,.SmartViewList_searchIcon_22f):focus,:is(.SmartViewList_smartViewIcon_626,.SmartViewList_searchIcon_22f):focus-visible {
    outline: 1px solid var(--borderFocused);
  }

.SmartViewList_smartViewIconWrapper_f17 {
  width: 14px;
  height: 14px;
}

/* In Firefox, a dotted outline is visible in active state for some reason.
   * This is a workaround to remove it.
   */

.SmartViewList_smartViewIcon_626:not(:focus-visible),.SmartViewList_smartViewIcon_626:not(:focus) {
    outline: none;
  }

.SmartViewList_smartViewIcon_626:hover {
    color: var(--colorWhite);
  }

.SmartViewList_smartViewIconActive_d62 > span {
  color: var(--colorWhite);
}

.SmartViewList_searchBox_ec8 {
  position: relative;
  margin: var(--spacing-12) var(--spacing-16);
}

.SmartViewList_searchBoxInput_24a[type='search'] {
  color: var(--colorWhite);
  background: rgba(255, 255, 255, 0.1);
  outline: 0;
  border: 0;
  border-radius: 7px;
  margin: 0;
  padding: 0 30px;
  font-size: var(--fontSizeBase);
  height: 28px;
  box-shadow: none;
  box-sizing: border-box;
  width: 100%;
}

.SmartViewList_searchBoxInput_24a[type='search']:focus {
    box-shadow: none !important; /* !important needed to override input[type='search']'s box-shadow from styles.less */
  }

.SmartViewList_searchBoxSearchIcon_29e,
.SmartViewList_searchBoxClearIcon_709 {
  display: flex;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--colorGray40);
}

:is(.SmartViewList_searchBoxSearchIcon_29e,.SmartViewList_searchBoxClearIcon_709) svg {
    width: 14px;
    height: 14px;
  }

.SmartViewList_searchBoxSearchIcon_29e {
  left: var(--spacing-8);
}

.SmartViewList_searchBoxClearIcon_709 {
  cursor: pointer;
  right: var(--spacing-8);
  transition: color 50ms ease-in-out;
}

.SmartViewList_searchBoxClearIcon_709:hover {
    color: var(--colorWhite);
  }

.SmartViewList_list_39a {
  margin: calc(-1 * var(--spacing-4)) 0 0 0;
  list-style: none;
}

.SmartViewList_list_39a .SmartViewList_itemIsSorting_a07 {
    cursor: grabbing;
  }

:is(.SmartViewList_list_39a .SmartViewList_itemIsSorting_a07) .SmartViewList_link_f90 {
      pointer-events: none;
    }

:is(.SmartViewList_list_39a .SmartViewList_itemIsSorting_a07) .SmartViewList_link_f90:hover {
      background-color: transparent;
    }

:is(:is(.SmartViewList_list_39a .SmartViewList_itemIsSorting_a07) .SmartViewList_link_f90:hover) .SmartViewList_editButton_f0c,:is(:is(.SmartViewList_list_39a .SmartViewList_itemIsSorting_a07) .SmartViewList_link_f90:hover) .SmartViewList_unpinButton_386,:is(:is(.SmartViewList_list_39a .SmartViewList_itemIsSorting_a07) .SmartViewList_link_f90:hover) .SmartViewList_dragger_79c {
        display: none;
      }

:is(:is(.SmartViewList_list_39a .SmartViewList_itemIsSorting_a07) .SmartViewList_link_f90:hover) .SmartViewList_bullet_98e {
        display: flex;
      }

.SmartViewList_list_39a.SmartViewList_listIsDragging_fb9 a {
      pointer-events: none;
    }

.SmartViewList_item_bb8 {
  font-size: var(--fontSizeTiny);
  line-height: 16px;
}

.SmartViewList_bullet_98e,
.SmartViewList_dragger_79c {
  display: flex;
  align-items: center;
  margin-right: var(--spacing-12);
  opacity: 0.5;
}

:is(.SmartViewList_bullet_98e,.SmartViewList_dragger_79c) svg {
    width: var(--spacing-16);
    height: var(--spacing-16);
  }

.SmartViewList_emoji_3f7 {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  width: var(--spacing-16);
  height: var(--spacing-16);
  line-height: 16px;
  letter-spacing: 0;
  margin-right: var(--spacing-8);
  font-size: var(--fontSizeSmall);

  /* On retina, emoji's resolution is much better */
  /* so we display it with a bigger font-size */
}

@media (min-resolution: 2dppx) {

.SmartViewList_emoji_3f7 {
    font-size: 16px;
    margin-left: 0;
    margin-right: var(--spacing-12);
}
  }

.SmartViewList_dragger_79c {
  display: none;
  cursor: grab;
}

.SmartViewList_link_f90 {
  display: flex;
  align-items: center;
  padding-left: var(--leftNavSpacing);
  padding-right: var(--leftNavSpacing);
}

.SmartViewList_link_f90,.SmartViewList_link_f90:hover,.SmartViewList_link_f90:focus,.SmartViewList_link_f90:active {
    color: var(--colorGray30);
    -webkit-text-decoration: none;
    text-decoration: none;
  }

.SmartViewList_link_f90:focus,.SmartViewList_link_f90:focus-visible {
    outline: none;
  }

.SmartViewList_link_f90:focus-visible  > span {
      outline: 1px solid var(--borderFocused);
    }

.SmartViewList_link_f90:hover .SmartViewList_linkContent_cb4 {
    background-color: var(--colorGray80);
  }

:is(.SmartViewList_link_f90:hover .SmartViewList_linkContent_cb4) .SmartViewList_editButton_f0c,:is(.SmartViewList_link_f90:hover .SmartViewList_linkContent_cb4) .SmartViewList_unpinButton_386,:is(.SmartViewList_link_f90:hover .SmartViewList_linkContent_cb4) .SmartViewList_dragger_79c {
      display: flex;
    }

:is(.SmartViewList_link_f90:hover .SmartViewList_linkContent_cb4) .SmartViewList_bullet_98e {
      display: none;
    }

/* Prevent sorting the list while searching */

:is(.SmartViewList_root_e13.SmartViewList_isSearching_ad8 :is(.SmartViewList_link_f90:hover .SmartViewList_linkContent_cb4)) .SmartViewList_editButton_f0c,:is(.SmartViewList_root_e13.SmartViewList_isSearching_ad8 :is(.SmartViewList_link_f90:hover .SmartViewList_linkContent_cb4)) .SmartViewList_unpinButton_386,:is(.SmartViewList_root_e13.SmartViewList_isSearching_ad8 :is(.SmartViewList_link_f90:hover .SmartViewList_linkContent_cb4)) .SmartViewList_bullet_98e {
        display: flex;
      }

:is(.SmartViewList_root_e13.SmartViewList_isSearching_ad8 :is(.SmartViewList_link_f90:hover .SmartViewList_linkContent_cb4)) .SmartViewList_dragger_79c {
        display: none;
      }

.SmartViewList_link_f90.SmartViewList_linkActive_200 .SmartViewList_linkContent_cb4 {
    font-weight: var(--fontWeightBold);
    color: var(--colorWhite);
  }

:is(.SmartViewList_link_f90.SmartViewList_linkActive_200 .SmartViewList_linkContent_cb4) .SmartViewList_bullet_98e {
      opacity: 1;
    }

.SmartViewList_linkContent_cb4 {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--spacing-4) var(--leftNavSpacing);
  border-radius: 24px;
}

.SmartViewList_text_64e {
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.SmartViewList_unpinButton_386,
.SmartViewList_editButton_f0c {
  display: none;
  margin-left: var(--spacing-8);
  width: var(--spacing-16);
  height: var(--spacing-16);
  color: var(--colorIconNeutralWhite);
  opacity: 0.5;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: opacity 200ms;
}

:is(.SmartViewList_unpinButton_386,.SmartViewList_editButton_f0c) svg {
    width: var(--spacing-16);
    height: var(--spacing-16);
  }

:is(.SmartViewList_unpinButton_386,.SmartViewList_editButton_f0c):hover {
    opacity: 1;
  }

@media screen and (max-width: 767px) {

.SmartViewList_unpinButton_386,
.SmartViewList_editButton_f0c {
    display: flex;
}
  }

.SmartViewList_noResults_ee3 {
  color: var(--colorGray40);
  font-size: 13px;
  padding: 0 calc(var(--leftNavSpacing) * 2);
}

.SmartViewList_emptyState_014 {
  font-size: var(--fontSizeSmall);
  line-height: 16px;
  padding: 0 calc(var(--leftNavSpacing) * 2);
  color: var(--colorGray40);
  margin-bottom: var(--spacing-16);
}

.SmartViewList_emptyStateLink_462 {
  color: currentColor;
  -webkit-text-decoration: underline;
  text-decoration: underline;
  transition: color 50ms ease-in-out;
}

.SmartViewList_emptyStateLink_462:hover {
    color: var(--colorWhite);
  }

.SmartViewList_showAll_21e {
  cursor: pointer;
  margin-left: calc((var(--leftNavSpacing) * 2) + 28px);
  font-size: var(--fontSizeTiny);
  font-weight: var(--fontWeightBold);
  -webkit-text-decoration: underline;
  text-decoration: underline;
  padding: var(--spacing-4) var(--spacing-8);
  border-radius: 24px;
}

.SmartViewList_showAll_21e:focus,.SmartViewList_showAll_21e:focus-visible {
    outline: 1px solid var(--borderFocused);
  }

.SmartViewList_mark_5c6 {
  background: var(--colorGray70);
  color: var(--colorWhite);
}

.SmartViewList_skeletonTree_81c {
  list-style: none;
  margin: var(--spacing-16) var(--spacing-24);
}

.SmartViewList_skeleton_ab5 {
  display: grid;
  grid-template-columns: var(--spacing-12) 1fr;
  gap: var(--spacing-12);
  margin-bottom: var(--spacing-12);
}

@media screen and (min-width: 768px) {
    .SmartViewList_is-collapsed_9dc .SmartViewList_title_46a,.SmartViewList_is-collapsed_9dc .SmartViewList_text_64e,.SmartViewList_is-collapsed_9dc .SmartViewList_showAll_21e,.SmartViewList_is-collapsed_9dc .SmartViewList_emptyState_014 {
      display: none;
    }

    .SmartViewList_is-collapsed_9dc .SmartViewList_header_d16 {
      margin: 0;
      cursor: pointer;
    }

      :is(.SmartViewList_is-collapsed_9dc .SmartViewList_header_d16):hover .SmartViewList_searchIcon_22f {
        opacity: 1;
      }

    .SmartViewList_is-collapsed_9dc .SmartViewList_searchIcon_22f {
      padding: 18px var(--spacing-24) 18px;
      margin: 1px auto;
    }

    .SmartViewList_is-collapsed_9dc .SmartViewList_link_f90 {
      justify-content: center;
    }
        :is(.SmartViewList_is-collapsed_9dc .SmartViewList_link_f90):hover .SmartViewList_unpinButton_386,:is(.SmartViewList_is-collapsed_9dc .SmartViewList_link_f90):hover .SmartViewList_editButton_f0c {
          display: none;
        }

    .SmartViewList_is-collapsed_9dc .SmartViewList_dragger_79c,.SmartViewList_is-collapsed_9dc .SmartViewList_bullet_98e {
      margin: 0;
    }
}

.SavedSearchSharedWithKeystrokePicker_SavedSearchSharedWithKeystrokePickerTabs_tabsContainer_dbc {
  box-sizing: border-box;
  width: 100%;
  border-bottom: 1px solid var(--borderLight);
}

.ProfileDropdown {
  position: sticky;
  top: 0;
  z-index: 3;
}

.TopNav .ProfileDropdown {
    display: none;
  }

@media screen and (max-width: 767px) {
    .LeftNav .ProfileDropdown {
      display: none;
    }

    .TopNav .ProfileDropdown {
      display: block;
    }
        :is(:is(.TopNav .ProfileDropdown) .ProfileDropdown__opener),:is(:is(.TopNav .ProfileDropdown) .ProfileDropdown__opener):hover {
          background-color: transparent;
          padding: var(--spacing-8);
          border: 0;
        }

      :is(.TopNav .ProfileDropdown) .ProfileDropdown__info,:is(.TopNav .ProfileDropdown) .ProfileDropdown__infoSkeleton {
        display: none;
      }

      :is(.TopNav .ProfileDropdown) .ProfileDropdown__avatar {
        border-radius: var(--baseBorderRadius);
        width: var(--spacing-40);
        height: var(--spacing-40);
      }
  }

.ProfileDropdown__opener {
  align-items: center;
  display: flex;
  margin: 0;
  padding: var(--spacing-12) var(--spacing-16);
  border: 0;
  outline: 0;
  width: 100%;
  background: var(--bgNavSidebarProfilemenuDefault);
  color: var(--colorGray10);
}

@media screen and (min-width: 768px) {

.ProfileDropdown__opener {
    gap: var(--spacing-8);
}
  }

.ProfileDropdown__opener:not([disabled]):hover,.ProfileDropdown__opener:not([disabled]):focus {
    background-color: var(--bgNavSidebarMenuitemHover);
  }

:is(.ProfileDropdown__opener:not([disabled]):hover,.ProfileDropdown__opener:not([disabled]):focus),:is(.ProfileDropdown__opener:not([disabled]):hover,.ProfileDropdown__opener:not([disabled]):focus) .ProfileDropdown__organization {
      color: var(--colorWhite);
    }

/* This is the "down arrow" for the ProfileDropdown */

.ProfileDropdown__opener::after {
    content: '';
    position: relative;
    right: 0;
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-top-color: currentColor;
    margin: auto var(--spacing-12) auto auto;
  }

.ProfileDropdown__opener--loading:is(.ProfileDropdown__opener::after) {
      /*
      * Modify the border-color to make the "down arrow" invisible on
      * mobile. We do this instead of removing it from the flow in
      * order to preserve the positioning of everything, regardless
      * of visibility.
      */
      border-top-color: transparent;

      /*
      * We don't want to preserve the positioning of the "down arrow"
      * on desktop, so we remove it from the flow altogether.
      */
    }

@media screen and (min-width: 768px) {

.ProfileDropdown__opener--loading:is(.ProfileDropdown__opener::after) {
        display: none;
    }
      }

.ProfileDropdown__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.ProfileDropdown__avatar {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ProfileDropdown__organization {
  position: relative;
  display: flex;
  align-items: center;
  font-size: var(--fontSizeSmall);
  line-height: 16px;
  color: var(--colorGray40);

  max-width: 100%;
  transition: opacity 50ms ease-in-out;
}

.ProfileDropdown__infoSkeleton {
  display: none;
}

@media screen and (min-width: 768px) {

.ProfileDropdown__infoSkeleton {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    justify-content: center;
    padding-right: var(--spacing-20);
    width: 100%;
}
  }

.ProfileDropdown__name {
  font-size: var(--fontSizeSmall);
  line-height: 16px;
  font-weight: var(--fontWeightBold);
}

.ProfileDropdown__organizationName,
.ProfileDropdown__name {
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
}

.is-collapsed .ProfileDropdown__opener {
    justify-content: center;
    padding: var(--spacing-12) 0;
  }

:is(.is-collapsed .ProfileDropdown__opener)::after {
      display: none;
    }

.is-collapsed .ProfileDropdown__info,.is-collapsed .ProfileDropdown__infoSkeleton {
    display: none;
  }

.is-collapsed .ProfileDropdown__avatar {
    margin: 0;
  }

.ProfilePopover_ProfilePopover_ProfilePopover_36b {
  min-width: 240px;
  max-width: 240px;
  box-sizing: border-box;
  padding: var(--spacing-12) 0;
}

.ProfilePopover_ProfilePopover_ProfilePopover_36b.ProfilePopover_ProfilePopover_fullWidth_bd5 {
    max-width: none;
  }

.ProfilePopover_ProfilePopover_ProfilePopover_36b.ProfilePopover_ProfilePopover_hasFooter_018 {
    padding-bottom: 0;
  }

.ProfilePopover_ProfilePopover_selectContainer_223 {
  box-sizing: border-box;
  padding: 0 var(--spacing-12) var(--spacing-8) var(--spacing-12);
}

/* fix specificity for profile links using UnstyledButton */
.ProfilePopover_ProfilePopover_link_4f8 {
  align-items: center;
  box-sizing: border-box;
  color: currentColor;
  cursor: pointer;
  display: flex;
  font-size: var(--fontSizeBase);
  gap: var(--spacing-8);
  line-height: 16px;
  margin: 0;
  padding: var(--spacing-8) var(--spacing-16);
  width: 100%;
}
.ProfilePopover_ProfilePopover_link_4f8:hover,.ProfilePopover_ProfilePopover_link_4f8:active {
    background-color: var(--bgMenuItemHover);
    color: inherit;
    -webkit-text-decoration: none;
    text-decoration: none;
  }
.ProfilePopover_ProfilePopover_link_4f8 svg {
    display: block;
    height: var(--spacing-16);
    width: var(--spacing-16);
  }

.ProfilePopover_ProfilePopover_separator_572 {
  border-bottom: none;
  border-top-color: var(--borderDefault);
  margin: var(--spacing-8) 0;
}

.ProfilePopover_ProfilePopover_openApp_939 {
  align-items: center;
  background-color: var(--bgTableCellHover);
  border-top: 1px solid var(--borderDefault);
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  display: flex;
  margin-top: var(--spacing-8);
}

.ProfilePopover_ProfilePopover_openAppLink_523 {
  display: flex;
  align-items: center;
  padding: var(--spacing-12) 15px;
  flex-grow: 1;
}

.ProfilePopover_ProfilePopover_openAppLink_523,.ProfilePopover_ProfilePopover_openAppLink_523:hover {
    color: inherit;
  }

.ProfilePopover_ProfilePopover_openAppLink_523 svg {
    display: block;
    width: var(--spacing-16);
    height: var(--spacing-16);
    margin-right: var(--spacing-8);
  }

@keyframes SupportSessionRecording_blinkAnimation_185 {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.SupportSessionRecording_container_ec4 {
  display: flex;
  color: var(--gray-05);
  line-height: var(--spacing-16);
}

.SupportSessionRecording_widget_407 {
  cursor: pointer;
  border-radius: 50px 0 0 50px;
  background-color: var(--gray-90);
  padding: var(--spacing-8);
  display: flex;
  align-items: center;
}

.SupportSessionRecording_recordIcon_402 {
  animation: SupportSessionRecording_blinkAnimation_185 1s infinite;
  margin: 0 var(--spacing-8);
}

.SupportSessionRecording_stopBtn_434 {
  border-radius: 0 50px 50px 0;
  padding-left: var(--spacing-16);
  background-color: var(--gray-90);
  padding: var(--spacing-8);
}

.statuspagebar-icon {
  display: inline-block;
  width: 10px;
  height: 10px;
  line-height: 30px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: -1px;
  box-shadow: inset 0 0 3px 0 rgba(100, 69, 69, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: var(--successPrimaryColor);
}

.statuspagebar-icon-minor {
  background: var(--warningPrimaryColor);
}

.statuspagebar-icon-maintenance {
  background: var(--closeBrightBlue);
}

.statuspagebar-icon-major,
.statuspagebar-icon-critical {
  background: var(--failurePrimaryColor);
}

.SupportForm_header_b16 {
  align-items: center;
  display: flex;
  gap: var(--spacing-8);
}

.SupportForm_headerDesc_bf9 {
  line-height: 20px;
}

.SupportForm_hint_304 {
  color: var(--colorIconLight);
}

.SupportForm_upper_8eb {
  border-bottom: 1px solid var(--borderDefault);
  display: grid;
  gap: var(--spacing-4);
  padding: 0 var(--spacing-12) var(--spacing-12) var(--spacing-12);
}

.SupportForm_root_f1f {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

.SupportForm_inputSubject_878 {
  border: 0;
  background: transparent;
  box-shadow: none;
  box-sizing: border-box;
  font-weight: var(--fontWeightBold);
  height: auto;
  padding: 0;
  width: 100%;
}

.SupportForm_inputSubject_878:focus {
    outline: none;
    box-shadow: none !important;
  }

.SupportForm_inputBody_c83 {
  border: 0;
  background: transparent;
  box-shadow: none;
  box-sizing: border-box;
  min-height: 100px;
  padding: 0;
  resize: none;
  width: 100%;
}

.SupportForm_inputBody_c83:focus {
    box-shadow: none !important;
  }

.SupportForm_sessionRecordingAttachment_30a {
  color: var(--colorBrandGreen);
}

.SupportForm_Attachment_container_9ab {
  align-items: center;
  background-color: var(--bgCardBase);
  border: 1px solid var(--borderDefault);
  border-radius: var(--baseInputBorderRadius);
  display: flex;
  gap: var(--spacing-8);
  padding: var(--spacing-4) var(--spacing-8);
  position: relative;
}

.SupportForm_Attachment_container_9ab:hover {
    box-shadow: var(--shadowLevel2);
  }

.SupportForm_Attachment_containerError_faa {
  border-color: var(--failurePrimaryColor);
}

.SupportForm_Attachment_icon_c55 {
  display: inline-block;
}

.SupportForm_Attachment_name_477 {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.SupportForm_Attachment_error_f1e {
  align-items: center;
  color: var(--failurePrimaryColor);
  display: flex;
  margin-right: 5px;
}

.SupportForm_Attachment_delete_9e8 {
  align-items: center;
  cursor: pointer;
  display: flex;
}

.SupportForm_Attachment_delete_9e8:hover {
    color: var(--gray-80);
  }

.SupportForm_Attachment_progress_6b4 {
  border-radius: 0;
  height: 100%;
  left: 0;
  mix-blend-mode: saturation;
  opacity: 0.5;
  position: absolute;
  width: 100%;
}

.SupportForm_Attachment_progress_6b4::-webkit-progress-bar {
    background-color: var(--bgDefault);
  }

.SupportForm_Attachment_progress_6b4::-webkit-progress-value {
    background-color: var(--bgLight);
  }

.SearchBox_searchBox_be8 {
  position: relative;
}

.SearchBox_textarea_28e {
  height: 40px;
  resize: none;
  padding: 9px;
  outline: none;
  box-shadow: none;
  box-sizing: border-box;
  width: 100%;
}

.SearchBox_backdrop_5e2 {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.4);
}

.SearchBox_showTopNav_290 {
  top: 56px;
}

@layer reset,base,atom;

@layer atom {
  .SearchBox_SearchInput_searchBox_9d2 {
    --inputHeightSmall: 38px;
    --inputLineHeight: 16px;
    --itemSidePadding: 12px;
    --iconHeight: 16px;
    --iconSmallHeight: 14px;
    --gap: 8px;
    --verticalPadding: var(--spacing-8);
    --fadeInOutTransition: opacity 100ms var(--standardCurve);
    --extraSpaceForScroll: 4px;

    position: relative;
    z-index: 1; /* ensure search box sits in front of backdrop */
    width: 100%;
    max-width: 500px;
    border: 1px solid transparent;
    background: var(--bgSearchEnabled);
    border-radius: var(--baseInputBorderRadius);
    box-sizing: border-box;
  }

    @media screen and (max-width: 767px) {
  .SearchBox_SearchInput_searchBox_9d2 {
      width: 100%;
  }
    }

    .SearchBox_SearchInput_searchBox_9d2:hover {
      background: var(--bgSearchHover);
    }
      .SearchBox_SearchInput_searchBox_9d2.SearchBox_SearchInput_hasKeyboardShortcut_af5:hover .SearchBox_SearchInput_keyboardShortcut_2d3 {
        opacity: 1;
      }

    .SearchBox_SearchInput_searchBox_9d2.SearchBox_SearchInput_isFullWidth_8fe {
      width: 100%;
      max-width: 700px;
    }

      .SearchBox_SearchInput_searchBox_9d2.SearchBox_SearchInput_isFullWidth_8fe .SearchBox_SearchInput_clearButton_54c {
        /* Add extra room for possible scroll */
        right: calc(var(--itemSidePadding) + var(--extraSpaceForScroll));
      }
      .SearchBox_SearchInput_searchBox_9d2.SearchBox_SearchInput_hasClearButton_d01 .SearchBox_SearchInput_clearButton_54c {
        opacity: 1;
        pointer-events: initial;
      }

    .SearchBox_SearchInput_searchBox_9d2.SearchBox_SearchInput_isFocused_d70 {
      border-color: var(--borderDefault);
      background: var(--bgSearchActive);
      position: absolute;
    }

      .SearchBox_SearchInput_searchBox_9d2.SearchBox_SearchInput_isFocused_d70 .SearchBox_SearchInput_textarea_a5e {
        white-space: unset;
        max-height: 90vh;
        overflow: auto;
        border-right: 0 solid !important;
        padding-right: calc(
          var(--itemSidePadding) + var(--iconHeight) +
            var(--extraSpaceForScroll) + var(--gap)
        );
      }

      @media screen and (max-width: 767px) {
        .SearchBox_SearchInput_searchBox_9d2.SearchBox_SearchInput_isFocused_d70.SearchBox_SearchInput_searchBox_9d2.SearchBox_SearchInput_isFocused_d70 {
          width: 100vw;
          max-width: unset;
          left: -48px;
          position: absolute;
        }

        .SearchBox_SearchInput_searchBox_9d2.SearchBox_SearchInput_isFocused_d70 .SearchBox_SearchInput_searchBoxInputWrapper_d07 {
          display: flex;
          gap: 4px;
          padding: var(--verticalPadding) var(--spacing-16);
        }

          :is(.SearchBox_SearchInput_searchBox_9d2.SearchBox_SearchInput_isFocused_d70 .SearchBox_SearchInput_searchBoxInputWrapper_d07) button {
            margin-top: var(--verticalPadding);
            align-self: flex-start;
          }

        .SearchBox_SearchInput_searchBox_9d2.SearchBox_SearchInput_isFocused_d70 .SearchBox_SearchInput_textareaWrapper_43d {
          border: 1px solid var(--borderLight) !important;
        }

        .SearchBox_SearchInput_searchBox_9d2.SearchBox_SearchInput_isFocused_d70 .SearchBox_SearchInput_textarea_a5e {
          padding-right: calc(
            var(--itemSidePadding) + var(--itemSidePadding) + 16px
          );
          border-right: 0 solid !important;
        }

        .SearchBox_SearchInput_searchBox_9d2.SearchBox_SearchInput_isFocused_d70 .SearchBox_SearchInput_clearButton_54c {
          top: calc((var(--inputHeightSmall) + 2px - var(--iconHeight)) / 2);
        }
      }
    .SearchBox_SearchInput_searchBox_9d2:has(textarea:read-only) {
      background-color: var(--formBackgroundDisabled);
    }

  .SearchBox_SearchInput_searchBoxInputWrapper_d07 {
    position: relative;
    color: var(--colorTextDefault);
  }

  .SearchBox_SearchInput_searchIcon_50c {
    position: absolute;
    margin-top: calc((var(--inputHeightSmall) - var(--iconHeight)) / 2);
    margin-left: 12px;
    color: var(--colorTextMedium);
    pointer-events: none;
  }

  .SearchBox_SearchInput_clearButton_54c {
    top: calc((var(--inputHeightSmall) - var(--iconSmallHeight)) / 2);
    right: var(--itemSidePadding);
    position: absolute;
    cursor: pointer;
    color: var(--colorTextMedium);
    opacity: 0;
    pointer-events: none;
    transition: var(--fadeInOutTransition);
  }

  .SearchBox_SearchInput_keyboardShortcut_2d3 {
    position: absolute;
    top: calc((var(--inputHeightSmall) - var(--iconSmallHeight)) / 2);
    right: 8px;
    display: grid;
    align-self: center;
    grid-auto-flow: column;
    gap: 4px;
    margin-right: 8px;
    pointer-events: none;
    opacity: 0;
    transition: var(--fadeInOutTransition);
  }

  .SearchBox_SearchInput_textareaWrapper_43d {
    width: 100%;
    position: relative;
    border: 1px solid transparent;
    border-radius: var(--baseInputBorderRadius);
    overflow: hidden;
  }

  .SearchBox_SearchInput_textarea_a5e {
    min-height: var(--inputHeightSmall);
    max-height: var(--inputHeightSmall);
    resize: none;
    padding: calc((var(--inputHeightSmall) - var(--inputLineHeight)) / 2) 0;
    /* make space for search icon and align with items */
    padding-left: calc(var(--iconHeight) + var(--itemSidePadding) + var(--gap));
    border: none;
    outline: none;
    /* we want to shrink the textarea (to make space for the clear button)
     but still fucus when user clicks the textarea */
    border-right: calc(var(--itemSidePadding) + var(--iconHeight) + var(--gap))
      solid;
    border-color: transparent !important;
    line-height: var(--inputLineHeight);
    letter-spacing: 0.25px;
    outline: none;
    box-shadow: none;
    box-sizing: border-box;
    word-break: normal;
    white-space: nowrap;
    width: 100%;
    margin: 0;
    background: transparent;
    overflow: hidden;
  }

    .SearchBox_SearchInput_textarea_a5e:focus {
      background: transparent;
      box-shadow: none !important; /* default textarea styles */
    }
}

.SearchBox_SearchDropdown_dropdown_9ca {
  display: none;
  margin: 0;
  padding: 12px 0;
  list-style: none;
  box-shadow: var(--shadowLevel3);
  background: var(--surfaceBackgroundDefault);
  border-top: 1px solid var(--borderDefault);
  box-sizing: border-box;
  border-radius: 0 0 var(--baseInputBorderRadius) var(--baseInputBorderRadius);
  max-height: calc(100vh - 58px); /* 58px = 48px top offset + 10px slack */
  overflow-y: auto;
}

.SearchBox_SearchDropdown_dropdown_9ca.SearchBox_SearchDropdown_isOpen_4c2 {
    display: block;
  }

.SearchBox_SearchDropdown_group_2d9 {
  border-top: 1px solid var(--borderDefault);
  border-bottom: 1px solid var(--borderDefault);
  margin: 12px 0;
  padding: 12px 0;
}

.SearchBox_SearchDropdown_group_2d9:first-child,.SearchBox_SearchDropdown_group_2d9 + .SearchBox_SearchDropdown_group_2d9 {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
  }

.SearchBox_SearchDropdown_group_2d9:last-child {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
  }

.SearchBox_SearchDropdown_groupTitle_1b9 {
  color: var(--gray-50);
  font-size: 11px;
  font-weight: var(--fontWeightBold);
  text-transform: uppercase;
  padding: 5px 15px;
  -webkit-user-select: none;
          user-select: none;
}

.SearchBox_Result_item_27e {
  display: flex;
  align-items: center;
  color: var(--colorTextMedium);
  padding: 7px 15px;
  cursor: pointer;
}

.SearchBox_Result_item_27e:hover {
    -webkit-text-decoration: none;
    text-decoration: none;
    color: var(--colorTextMedium);
  }

.SearchBox_Result_item_27e:active,.SearchBox_Result_item_27e.SearchBox_Result_isHighlighted_843:active {
    background: var(--bgActiveMuted);
  }

.SearchBox_Result_item_27e.SearchBox_Result_isHighlighted_843 {
    background: var(--bgMenuItemHover);
    color: var(--colorTextDefault);
  }

.SearchBox_Result_item_27e.SearchBox_Result_isHighlighted_843 .SearchBox_Result_itemEnterIcon_25e {
      opacity: 1;
    }

.SearchBox_Result_item_27e.SearchBox_Result_isHighlighted_843 .SearchBox_Result_itemSearchIcon_8bc {
      color: var(--colorIconDefault);
    }

.SearchBox_Result_item_27e.SearchBox_Result_isHighlighted_843 .SearchBox_Result_itemAdditionalInfo_750 {
      display: inline;
    }

.SearchBox_Result_item_27e.SearchBox_Result_isHighlighted_843 .SearchBox_Result_aiSuggestionIcon_d6e {
      color: var(--fillActive);
    }

.SearchBox_Result_itemSearchIcon_8bc {
  color: var(--colorIconLight);
  margin-right: 12px;
}

.SearchBox_Result_aiSuggestionIcon_d6e {
  color: var(--fillActive);
}

.SearchBox_Result_itemEnterIcon_25e {
  opacity: 0;
  color: var(--colorTextMedium);
  margin-left: 12px;
}

.SearchBox_Result_itemTitle_ab2 {
  font-size: 14px;
  flex: 1;
  display: flex;
  align-items: baseline;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-right: 12px;
}

.SearchBox_Result_itemTitle_ab2 mark {
    font-style: normal;
    font-weight: var(--fontWeightBold);
    background: none;
    color: var(--colorTextDefault);
  }

.SearchBox_Result_leadInfo_e2d {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 40%;
  font-size: 12px;
}

.SearchBox_Result_leadInfoIcon_167 {
  line-height: 1;
}

.SearchBox_Result_itemAdditionalInfo_750 {
  font-size: 12px;
  margin-left: 8px;
  color: #767676;
  display: none;
  line-height: 1;
}

.SearchBox_Result_itemAdditionalInfo_750 mark {
    color: inherit;
  }

.SearchBox_Result_itemIcon_b5d {
  line-height: normal;
  margin: 0 4px;
  vertical-align: bottom;
}

.SearchBox_Result_badge_f00 {
  margin-left: 8px;
  line-height: 1;
  align-self: center;
}

.TopNav {
  display: flex;
  background-color: var(--surfaceBackgroundDefault);
  height: var(--topNavHeight);
  width: 100%;
  border-bottom: 1px solid var(--borderLight);
  color: var(--colorTextMedium);
  padding-left: 8px;
  box-sizing: border-box;
  z-index: 103; /* in front of LeftNav */
}

@media screen and (max-width: 767px) {

.TopNav {
    z-index: 1010; /* in front of .LeftNav & mobile ActivityActions */
}
  }

:fullscreen .TopNav {
    display: none;
  }

@media screen and (max-width: 767px) {

.TopNav {
    background-color: color-mix(in srgb, #000 20%, var(--bgNavSidebar));
    padding: 0;
}

    .TopNav .TopNav--light {
      background-color: var(--surfaceBackgroundDefault);
      box-shadow: none;
    }

    .TopNav .TopNav__mobileMenuOpener {
      color: var(--colorIconNeutralWhite);
      display: block;
      cursor: pointer;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 8px 4px;
      box-sizing: border-box;
    }

    .TopNav .TopNav__navigation,.TopNav .TopNav__buttons {
      display: none;
    }
  }

.TopNav__mobileMenuOpener {
  display: none;
}

.TopNav__navigation {
  display: flex;
  padding: 8px 8px 8px 0;
}

.TopNav__navigationButton {
  cursor: pointer;
  width: 40px;
  height: 40px;
  padding: 12px;
  box-sizing: border-box;
}

.TopNav__navigationButton:hover {
    color: var(--colorTextDefault);
    background: rgba(0, 0, 0, 0.05);
    border-radius: 20px;
  }

.TopNav__navigationButton--forward {
  transform: scaleX(-1);
}

.TopNav__buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 8px;
  margin: 8px;
  align-items: center;
  justify-items: center;
}

.TopNav_searchBoxContainer_9a8 {
  flex: 1 0;
  margin: 8px 0;
  position: relative;
  z-index: 4; /* above lead page stuff, but below modals */
}.TopNav_searchBoxContainer_9a8:first-child {
    margin-left: 16px;
  }

/* Pulse opacity between 100% and 50%, with a short pause at each extreme. */
@keyframes Popover_pulseOpacity_ffc {
  0% {
    opacity: 100%;
  }

  10% {
    opacity: 100%;
  }

  90% {
    opacity: 50%;
  }

  100% {
    opacity: 50%;
  }
}

.Popover_connected_634 {
}

.Popover_notReadyToConnect_c97 {
  opacity: 50%;
}

.Popover_connecting_ce2 {
  animation-name: Popover_pulseOpacity_ffc;
  animation-duration: 0.75s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

.Popover_failed_5d4 {
  color: var(--colorTextDanger);
}

.SupportedPlan_popoverContent_148 {
  width: 320px;
  max-width: 320px;
}

.SupportedPlan_header_43b {
  margin: -8px -14px; /* remove popover standard margin */
}

.CallingPermission_PermissionCard_recordingDescription_26b {
  /* Set min height so layout shift is smooth when Slideable is rendered */
  min-height: 32px;
}

.CallingPermission_PermissionCard_recordingAckText_5b3 {
  font-size: 13px;
  line-height: 20px;
  text-align: justify;
  color: var(--colorTextLight);
}

.CallingCard_container_e9e {
  background-color: var(--bgCardLight);
  border: 1px solid var(--borderLight);
  border-radius: var(--baseBorderRadius);
  text-align: center;
}

.CallingCard_iconContainer_ff9 {
  border: 1px solid transparent;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.CallingCard_iconContainer_ff9.CallingCard_light_301 {
    background-color: var(--bgCardBase);
    border-color: var(--borderLight);
  }

.CallingCard_iconContainer_ff9.CallingCard_dark_74f {
    background-color: var(--surfaceBackgroundDark);
  }

.CallServiceStatus_container_130 {
  background-color: var(--bgWarn);
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;

  text-align: center;
}

.CallServiceStatus_container_130.CallServiceStatus_loading_172 {
    background-color: var(--surfaceBackgroundDark);
  }

.CallServiceStatus_text_8d3 {
  color: var(--colorTextNeutralBlack);
  font-weight: var(--fontWeightBold);
}

.AudioSettings_controlsGrid_6b8 {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  grid-gap: var(--spacing-8);
}

.AudioSettings_controlsGrid_6b8 label {
    /* Every label will start a new row, so we don't have to fill rows with spacer elements. */
    grid-column-start: 1;
    margin: 0;
    color: var(--colorTextMedium);
  }

.AudioSettings_microphoneIndicator_300 {
  grid-column-start: 2;
}

.AudioSettings_warnIcon_613 {
  color: var(--failurePrimaryColor);
}

.MicrophoneLevelIndicator_microphoneLevelIndicator_d7a {
  display: flex;
  width: 100%;
  gap: 1px;
}

.MicrophoneLevelIndicator_microphoneLevelIndicatorStep_ee5 {
  flex: 1;
  height: 4px;
  background-color: var(--colorGray20);
  transition: background-color 300ms cubic-bezier(0.19, 1, 0.22, 1);
}

.MicrophoneLevelIndicator_microphoneLevelIndicatorStep_ee5.MicrophoneLevelIndicator_active_8bd {
    background-color: var(--fillSuccess);
  }

.AutoRecordCallsToggle_acknowledge_4c5 {
  /* eat through the padding of the popover body and the margin to the divider */
  margin: 0 calc(var(--spacing-16) * -1) calc(var(--spacing-16) * -1);
  background-color: var(--surfaceBackgroundMedium);
}

.CallingPermission_NotificationCard_card_900 {
  border: 1px solid var(--borderLight);
  background-color: var(--bgCardLight);
  border-radius: var(--baseBorderRadius);
}

.CallingPermission_NotificationCard_request_6db {
  border-color: var(--borderInformationalMuted);
  background-color: var(--bgInformationalMuted);
}

.CallingPermission_NotificationCard_denied_be5 {
  border-color: var(--borderDangerMuted);
  background-color: var(--bgDangerMuted);
  color: var(--colorTextDanger);
}

.v2_container_ab5 {
  display: flex;
  flex-direction: row;
}

.v2_inputWrapper_16a {
  flex: 1;
}

.v2_input_f40 {
  border-top-left-radius: var(--baseInputBorderRadius);
  border-bottom-left-radius: var(--baseInputBorderRadius);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border: 1px solid var(--borderDefault);
}

.v2_input_f40:focus {
    border-color: var(--borderFocused);
  }

.v2_copy_1a4 {
  align-items: center;
  border-top-right-radius: var(--baseInputBorderRadius);
  border-bottom-right-radius: var(--baseInputBorderRadius);
  border-color: var(--borderDefault);
  border-style: solid;
  border-width: 1px 1px 1px 0;
  display: flex;
  justify-content: center;
  width: 40px;

  /* copied from button */
}

.v2_copy_1a4:hover {
    background: var(--surfaceBackgroundDark);
    color: var(--colorTextDefault);
    cursor: pointer;
  }

.SupportedPlan_NoNumbersAlert_illustration_b79 {
  width: 42px;
}

.SupportedPlan_NoNumbersAlert_container_a8e {
  border-radius: var(--baseBorderRadius);
  background-color: var(--bgActiveMuted);
  text-align: center;
}

.SupportedPlan_DialNumberFooter_container_d22 {
  background-color: var(--bgCardLight);
  border-top: 1px solid var(--borderLight);
}

.SupportForm_SupportFormFooter_bottom_9f9 {
  background-color: var(--bgLightMuted);
  border-top: 1px solid var(--borderLight);
  display: flex;
  gap: var(--spacing-8);
  justify-content: flex-end;
  padding: var(--spacing-12);
}

.SupportMenu_SupportFormMenu_root_823 {
  border-radius: var(--popoverBorderRadius);
  display: flex;
  flex-direction: column;
  max-height: 75vh;
  max-width: 376px;
  overflow: hidden;
}

.SupportMenu_SupportFormMenu_header_55d {
  align-items: center;
  display: flex;
  gap: var(--spacing-8);
  padding: var(--spacing-12) var(--spacing-12) var(--spacing-4)
    var(--spacing-12);
}

.SupportMenu_SupportFormMenu_form_663 {
  overflow-y: scroll;
}

.SupportMenu_SupportMenu_list_3fa {
  margin: var(--spacing-8) 0;
}

.SupportMenu_SupportMenu_separator_9a5 {
  background-color: var(--borderLight);
  border: none;
  height: 1px;
  margin: var(--spacing-8) 0;
  width: 100%;
}

.SupportMenu_SupportMenuItem_root_b55 {
  align-items: center;
  background-color: transparent;
  box-sizing: border-box;
  border: none;
  color: currentColor;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto;
  font-size: 14px;
  gap: var(--spacing-8);
  line-height: 16px;
  margin: 0;
  padding: 8px 16px;
  text-align: left;
  width: 100%;
  -webkit-user-select: none;
          user-select: none;
}

.SupportMenu_SupportMenuItem_root_b55:hover,.SupportMenu_SupportMenuItem_root_b55:focus,.SupportMenu_SupportMenuItem_root_b55:active {
    outline: none;
    background-color: var(--bgMenuItemHover);
    color: inherit;
    -webkit-text-decoration: none;
    text-decoration: none;
  }

:is(.SupportMenu_SupportMenuItem_root_b55:hover,.SupportMenu_SupportMenuItem_root_b55:focus,.SupportMenu_SupportMenuItem_root_b55:active) .SupportMenu_SupportMenuItem_alert_0e9:after {
      border-color: var(--bgMenuItemHover);
    }

:is(.SupportMenu_SupportMenuItem_root_b55:hover,.SupportMenu_SupportMenuItem_root_b55:focus,.SupportMenu_SupportMenuItem_root_b55:active) .SupportMenu_SupportMenuItem_external_eaa {
      opacity: 1;
    }

.SupportMenu_SupportMenuItem_root_b55 svg {
    display: block;
    height: 16px;
    width: 16px;
  }

.SupportMenu_SupportMenuItem_alert_0e9 {
  position: relative;
}

.SupportMenu_SupportMenuItem_alert_0e9:after {
    background-color: var(--colorLinkDefault);
    border: 2px solid var(--surfaceBackgroundDefault);
    border-radius: 50%;
    content: ' ';
    display: block;
    height: 8px;
    position: absolute;
    right: -4px;
    top: -4px;
    width: 8px;
  }

.SupportMenu_SupportMenuItem_external_eaa {
  color: var(--colorIconLight);
  opacity: 0;
}

.NotetakerRecordingToggle_base_37a {
  --badgeWidth: 91px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: var(--badgeWidth);
}

.NotetakerRecordingToggle_base_37a.NotetakerRecordingToggle_statusRecording_218 .NotetakerRecordingToggle_indicator_e21 {
      background-color: var(--colorBgMessageMeeting);
      border-color: var(--colorBgMessageMeeting);
    }

.NotetakerRecordingToggle_base_37a.NotetakerRecordingToggle_statusRecording_218 .NotetakerRecordingToggle_separator_fa5 {
      background-color: var(--colorBorderMessageMeeting);
    }

.NotetakerRecordingToggle_base_37a.NotetakerRecordingToggle_statusRecording_218 .NotetakerRecordingToggle_indicatorStatusText_5e7 {
      color: var(--colorBgBadgeMeeting);
    }

.NotetakerRecordingToggle_base_37a.NotetakerRecordingToggle_statusPaused_094 .NotetakerRecordingToggle_indicator_e21 {
      background-color: var(--bgLightMuted);
      border-color: var(--borderLight);
    }

.NotetakerRecordingToggle_base_37a.NotetakerRecordingToggle_statusPaused_094 .NotetakerRecordingToggle_separator_fa5 {
      background-color: var(--borderDefault);
    }

.NotetakerRecordingToggle_base_37a.NotetakerRecordingToggle_statusPaused_094 .NotetakerRecordingToggle_indicatorStatusText_5e7 {
      color: var(--colorTextLight);
    }

.NotetakerRecordingToggle_indicator_e21 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--badgeWidth);
  height: 32px;
  padding: 0 var(--spacing-4) 0 var(--spacing-8);
  border-radius: 100px;
  box-sizing: border-box;
  border: 1px solid transparent;
}

.NotetakerRecordingToggle_indicatorStatusText_5e7 {
  font-size: 11px;
  font-weight: 600;
}

.NotetakerRecordingToggle_separator_fa5 {
  display: block;
  flex: none;
  width: 1px;
  height: 12px;
  margin-right: var(--spacing-4);
  margin-left: var(--spacing-12);
}

.elements_MeetingBarNotetakerStatus_container_771 {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
}

/* Custom divider styles. In this context the Divider component collapses and isn't visible */
.elements_MeetingBarNotetakerStatus_divider_2db {
  width: 1px;
  height: 32px;
  background-color: var(--dividerColor);
}

.elements_MeetingReminderBar_root_1a3 {
  --dividerColor: var(--colorBorderMessageMeeting);

  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr min-content;
  align-items: center;
  font-size: var(--fontSizeBase);
  position: relative;
  width: 100%;
  height: 100%;
  container: bar / inline-size;

  border-top: 1px solid var(--colorBorderMessageMeeting);
  border-bottom: 1px solid var(--colorBorderMessageMeeting);
  color: var(--colorTextDefault);
  background-color: var(--colorBgMessageMeeting);
}

.elements_MeetingReminderBar_root_1a3.elements_MeetingReminderBar_inProgress_883 {
    --dividerColor: var(--borderDefault);
    background-color: var(--surfaceBackgroundDefault);
    border-top: none;
    border-bottom: 2px solid var(--colorBgMeetingBar);
  }

.elements_MeetingReminderBar_closeButton_1c7 {
  box-sizing: border-box;
  align-self: start;
  padding-top: var(--spacing-12);
  padding-right: var(--spacing-12);
}

@container bar (min-width: 500px) {

.elements_MeetingReminderBar_closeButton_1c7 {
    align-self: center;
    padding-top: 0;
    padding-right: var(--spacing-24);
}
  }

.elements_MeetingReminderBar_inner_1c3 {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  height: 100%;
}

@container bar (min-width: 500px) {

.elements_MeetingReminderBar_inner_1c3 {
    align-items: center;
    flex-direction: row;
    padding: 0;
}
  }

.elements_MeetingReminderBar_meetingTime_dbf {
  box-sizing: border-box;
  display: flex;
  gap: var(--spacing-8);
  padding: var(--spacing-12) var(--spacing-16) 0 var(--spacing-16);
}

@container bar (min-width: 500px) {

.elements_MeetingReminderBar_meetingTime_dbf {
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    border-right: 1px solid var(--dividerColor);
    padding-top: 0;
    padding-right: var(--spacing-24);
}
  }

.elements_MeetingReminderBar_content_235 {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;

  padding: var(--spacing-12) var(--spacing-16);
  gap: var(--spacing-16);
}

@container bar (min-width: 500px) {

.elements_MeetingReminderBar_content_235 {
    align-items: center;
    flex-direction: row;
}
  }

.elements_MeetingReminderBar_details_cf9 {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

@container bar (min-width: 500px) {

.elements_MeetingReminderBar_details_cf9 {
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-8);
}
  }

.elements_MeetingReminderBar_innerDetails_c5c {
  box-sizing: border-box;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
}

.elements_MeetingReminderBar_desc_230 {
  color: var(--colorTextDefault);
  flex-shrink: 0;
}

.elements_MeetingReminderBar_desc_230:hover {
    color: var(--colorTextDefault);
  }

.elements_MeetingReminderBar_notResponded_2b3 {
  flex-shrink: 0;
}

.elements_MeetingReminderBar_leadName_4ce {
  color: var(--colorTextLight);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


  .UpcomingMeetingReminderBars_UpcomingMeetingReminderBars_root_d9c div + div > div {
    border-top: none;
  }

.UpcomingTaskReminderBars_UpcomingTaskReminderBars_showMore_e7c {
  background: var(--bgLight);
  color: var(--colorTextMedium);
  cursor: pointer;
  display: block;
  padding: var(--spacing-4);
  text-align: center;
  width: 100%;
}

.UpcomingTaskReminderBars_TaskReminder_root_636 {
  container: taskReminder / inline-size;
}

:is(.UpcomingTaskReminderBars_TaskReminder_root_636 + .UpcomingTaskReminderBars_TaskReminder_root_636)  > div {
    border-top: none;
  }

.UpcomingTaskReminderBars_TaskReminder_inner_514 {
  display: grid;
  gap: var(--spacing-24);
  grid-template-columns: auto 1fr;
}

@container message (max-width: 500px) {

.UpcomingTaskReminderBars_TaskReminder_inner_514 {
    align-items: flex-start;
    gap: var(--spacing-16);
    grid-template-columns: 1fr;
}
  }

.UpcomingTaskReminderBars_TaskReminder_left_4a6 {
  align-items: center;
  border-right: 1px solid var(--colorBorderMessageTask);
  display: flex;
  padding-right: var(--spacing-24);
}

@container message (max-width: 500px) {

.UpcomingTaskReminderBars_TaskReminder_left_4a6 {
    border-right: none;
    padding-right: 0;
}
  }

.UpcomingTaskReminderBars_TaskReminder_icon_cc4 {
  color: var(--colorIconDefault);
  flex-shrink: 0;
  height: 16px;
  width: 16px;
}

.UpcomingTaskReminderBars_TaskReminder_actions_772 {
  display: flex;
  gap: var(--spacing-16);
}

@container message (max-width: 500px) {

.UpcomingTaskReminderBars_TaskReminder_actions_772 {
    flex-direction: row-reverse;
    gap: var(--spacing-8);
}
  }

.UpcomingTaskReminderBars_TaskReminder_desc_d0f {
  color: var(--colorTextLight);
}

.UpcomingTaskReminderBars_TaskReminder_desc_d0f:hover {
    color: var(--colorTextLight);
  }

.UpcomingTaskReminderBars_SnoozeButton_root_f57 {
  min-width: 200px;
}

.UpcomingTaskReminderBars_SnoozeButton_header_78f {
  padding: 0 16px;
}

.UpcomingTaskReminderBars_SnoozeButton_list_f5d {
  list-style: none;
  margin: 0;
  padding: 0;
}

@container message (max-width: 500px) {

.UpcomingTaskReminderBars_SnoozeButton_hideOnSmall_498 {
    display: none;
}
  }

.UpcomingTaskReminderBars_SnoozeButton_showOnSmall_c05 {
  display: none;
}

@container message (max-width: 500px) {

.UpcomingTaskReminderBars_SnoozeButton_showOnSmall_c05 {
    display: flex;
}
  }

.UsageNotice_main_b55 {
  display: flex;
  align-items: center;
  height: 72px;
  background: var(--bgInformationalMuted);
  padding: 16px 24px;
  box-sizing: border-box;
}

.UsageNotice_left_2c0 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.UsageNotice_right_a5e {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

.UsageNotice_title_e55 {
  font-size: 16px;
  font-weight: var(--fontWeightBold);
  line-height: 1;
  margin: 0 0 4px 0;
}

.UsageNotice_text_bfe {
  font-size: 14px;
  line-height: 20px;
}

.UsageNotice_or_b32 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  font-size: 12px;
  font-weight: var(--fontWeightBold);
  text-transform: uppercase;
  line-height: 16px;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  margin: 0 var(--spacing-16);
}

.UsageNotice_close_430 {
  cursor: pointer;
  margin-left: 16px;
}

.UsageNotice_close_430:hover {
    color: var(--colorLinkDefault);
  }

.LeadScreen_promoStyles_promo_918 {
  margin-bottom: 24px;
  border-radius: var(--baseBorderRadius);
  border: 1px solid var(--borderDefault);
}

.LeadScreen_promoStyles_promo_918:empty {
    display: none;
  }

.LeadScreen_promoStyles_microsoftPromo_a4d {
  border-radius: var(--baseBorderRadius);
  border: 1px solid var(--borderDefault);
}

.NewLeadModalContainer_form_75b {
  margin-bottom: var(--spacing-16);
}

.NewLeadModalContainer_inputs_7e0 {
  display: grid;
  grid-template-columns: 1fr;
}

@media screen and (min-width: 768px) {

.NewLeadModalContainer_inputs_7e0 {
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}
  }

.NewLeadModalContainer_companyName_4a7 {
  overflow: hidden;
  white-space: nowrap;
  display: block;
  max-width: 260px;
  text-overflow: ellipsis;
  font-weight: var(--fontWeightBold);
}

.NewLeadModalContainer_details_c55 {
  height: 40px;
  max-width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.NewLeadModalContainer_dividerText_ec6 {
  background-color: var(--surfaceBackgroundDefault);
  padding: 0 var(--spacing-16);
}

.ScrollDisclosure_box_724 {
  position: relative;
}

.ScrollDisclosure_box_724::before,.ScrollDisclosure_box_724::after {
    position: absolute;
    z-index: 1;
    content: '';
    transition: box-shadow 0.1s ease;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

.ScrollDisclosure_box_724.ScrollDisclosure_wrapsTable_68f {
    box-shadow: var(--tableShadow);
    border-radius: calc(var(--tableBorderRadius) - 1px);
  }

.ScrollDisclosure_box_724.ScrollDisclosure_hasOverflow_26f {
    overflow: hidden;
  }

.ScrollDisclosure_overflowsLeft_a33::before {
  box-shadow: 14px 0 12px -12px rgba(0, 0, 0, 0.1) inset;
}

.ScrollDisclosure_overflowsRight_fcf::after {
  box-shadow: -14px 0 12px -12px rgba(0, 0, 0, 0.1) inset;
}

.ScrollDisclosure_inner_c8a {
  transform: translate3d(0, 0, 0);
}

.ScrollDisclosure_hasOverflow_26f .ScrollDisclosure_inner_c8a {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

.CoreNextLeadButton_key_250 {
  min-width: 8px;
  padding: 0 var(--spacing-4);
  color: var(--gray-10);
  border-radius: 3px;
  background-color: var(--gray-60);
  line-height: 16px;
  font-size: 13px;
  font-weight: normal;
}

.CoreNextLeadButton_tipText_ccb {
  color: var(--colorTextNeutralWhite);
}

.CoreNextLeadButton_wrapper_af5 {
  z-index: var(--zindexNextLeadButton);

  --nextLeadBorderRadius: 50px;
  /* without hover support we want to display an expanded version all the time */
  width: 300px;
  display: flex;
}

@media (max-width: 480px) {

.CoreNextLeadButton_wrapper_af5 {
    display: none;
}
  }

@media (hover: hover) {
    @media (max-width: 480px) {

.CoreNextLeadButton_wrapper_af5 {
      display: none;
}
    }

.CoreNextLeadButton_wrapper_af5 {

    width: 52px;
    transition: width 0.2s ease-in-out;
    flex-direction: column-reverse;
    pointer-events: none;
}

    .CoreNextLeadButton_wrapper_af5:hover {
      width: 250px;
    }

      .CoreNextLeadButton_wrapper_af5:hover .CoreNextLeadButton_container_6df {
        gap: var(--spacing-16);
      }

      .CoreNextLeadButton_wrapper_af5:hover .CoreNextLeadButton_content_4c4,.CoreNextLeadButton_wrapper_af5:hover .CoreNextLeadButton_previousBtn_3c2,.CoreNextLeadButton_wrapper_af5:hover .CoreNextLeadButton_contactName_e02,.CoreNextLeadButton_wrapper_af5:hover .CoreNextLeadButton_positionLabel_1e5,.CoreNextLeadButton_wrapper_af5:hover .CoreNextLeadButton_listLink_830 {
        opacity: 1;
      }

      .CoreNextLeadButton_wrapper_af5:hover .CoreNextLeadButton_dismissWrapper_fd8 {
        display: flex;
      }
  }

.CoreNextLeadButton_content_4c4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
  min-width: 0;
  gap: var(--spacing-4);
}

@media (hover: hover) {

.CoreNextLeadButton_content_4c4 {
    opacity: 0;
}
  }

.CoreNextLeadButton_container_6df {
  flex-grow: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-16);
  padding: var(--spacing-8);

  background-color: var(--colorBgNextLead);
  border-top-left-radius: var(--nextLeadBorderRadius);
  border-bottom-left-radius: var(--nextLeadBorderRadius);

  color: var(--gray-05);
}

@media (hover: hover) {

.CoreNextLeadButton_container_6df {
    gap: 0;
    padding: 0;
    justify-content: flex-end;
    border-radius: var(--nextLeadBorderRadius);
    pointer-events: auto;
}
  }

.CoreNextLeadButton_dismissWrapper_fd8 {
  display: flex;
}

@media (hover: hover) {

.CoreNextLeadButton_dismissWrapper_fd8 {
    display: none;
    justify-content: flex-end;
    padding-bottom: var(--spacing-16);
    pointer-events: auto;

    /* Small hack to make a click on the empty space above NextLead to collapse the button */
}
    .CoreNextLeadButton_dismissWrapper_fd8:focus {
      pointer-events: none;
    }
  }

@media (hover: none) {

.CoreNextLeadButton_dismissBtn_764::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 0;
    height: 60%;
    border-left: 1px solid var(--gray-40);
}
  }

.CoreNextLeadButton_dismissBtn_764 {
  position: relative;
  padding: var(--spacing-8) var(--spacing-16);

  background-color: var(--colorBgNextLead);
  color: var(--gray-05);
  border-top-right-radius: var(--nextLeadBorderRadius);
  border-bottom-right-radius: var(--nextLeadBorderRadius);
}

@media (hover: hover) {

.CoreNextLeadButton_dismissBtn_764 {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    border-radius: var(--nextLeadBorderRadius);
    padding: var(--spacing-8);
    margin-right: var(--spacing-8);
}
  }

.CoreNextLeadButton_contactWrapper_756,
.CoreNextLeadButton_positionLabelWrapper_90e {
  max-width: 100%;
  line-height: 16px;
}

.CoreNextLeadButton_contactName_e02,
.CoreNextLeadButton_positionLabel_1e5,
.CoreNextLeadButton_listLink_830 {
  color: var(--gray-10);
  font-size: 13px;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (hover: hover) {

.CoreNextLeadButton_contactName_e02,
.CoreNextLeadButton_positionLabel_1e5,
.CoreNextLeadButton_listLink_830 {
    opacity: 0;
}
  }

.CoreNextLeadButton_contactName_e02 {
  font-weight: var(--fontWeightBold);
}

.CoreNextLeadButton_listLink_830 {
  max-width: 100%;
  line-height: 16px;
  font-weight: 400;
}

@media (hover: hover) {
    .CoreNextLeadButton_listLink_830:hover {
      color: var(--gray-10);
    }
  }

.CoreNextLeadButton_arrowBtn_06d {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
  outline: none;
}

.CoreNextLeadButton_arrowBtn_06d:disabled {
    color: var(--gray-40);
    cursor: not-allowed;
  }

@media (hover: hover) {

.CoreNextLeadButton_arrowBtn_06d {
    width: 52px;
    height: 52px;
}

    .CoreNextLeadButton_arrowBtn_06d:hover:enabled {
      color: var(--white);
    }
  }

@media (hover: hover) {

.CoreNextLeadButton_previousBtn_3c2 {
    opacity: 0;
}
  }

.CommandPaletteModal_CommandPaletteInput_input_1de {
  border: none;
  width: auto;
  font-size: var(--headingSizeLarge);
  background-color: var(--surfaceBackgroundDefault);
  padding: var(--spacing-24) var(--spacing-16);
  outline: none !important;
}

.CommandPaletteModal_CommandPaletteInput_input_1de::placeholder {
  color: var(--colorTextLight);
}

.CommandPaletteModal_CommandPaletteItem_item_f61 {
  align-items: center;
  color: var(--colorTextMedium);
  content-visibility: auto;
  cursor: pointer;
  display: flex;
  font-size: var(--fontSizeBase);
  gap: var(--spacing-16);
  line-height: var(--spacing-16);
  padding: var(--spacing-16);
}

.CommandPaletteModal_CommandPaletteItem_highlighted_92d {
  background: var(--surfaceBackgroundDark);
  color: var(--colorTextDefault);
}

.CommandPaletteModal_CommandPaletteItem_labels_93b {
  flex: 1;
  flex-wrap: wrap;
  display: flex;
  gap: 0 var(--spacing-8);
}

.CommandPaletteModal_CommandPaletteItem_sublabel_7cf {
  color: var(--colorTextLight);
  font-size: var(--fontSizeSmall);
}

.CommandPaletteModal_CommandPaletteItem_icon_28f {
  height: var(--spacing-16);
  width: var(--spacing-16);
}

.CommandPaletteModal_CommandPalette_overlay_f14 {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 20vh;
  z-index: var(--zindexAboveEverything);
}

.CommandPaletteModal_CommandPalette_overlayClickHandler_d1e {
  position: absolute;
  inset: 0;
}

.CommandPaletteModal_CommandPalette_commandPalette_f92 {
  --commandPaletteMaxHeight: min(75vh, 600px);
  background: var(--surfaceBackgroundDefault);
  border-radius: var(--modalBorderRadius);
  border: 1px solid var(--borderLight);
  box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.1);
  filter: drop-shadow(var(--shadowLevel4));
  max-height: var(--commandPaletteMaxHeight);
  max-width: 640px;
  min-height: 100px;
  min-width: 100px;
  overflow: hidden;
  position: relative;
  width: 100%;
  will-change: filter;
}

.CommandPaletteModal_CommandPalette_input_b82 {
  border: none;
  width: auto;
  font-size: var(--headingSizeLarge);
  background-color: var(--surfaceBackgroundDefault);
  padding: var(--spacing-8);
  outline: none !important;
}

.CommandPaletteModal_CommandPalette_list_d71 {
  --commandPaletteInputHeight: 68px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: calc(
    var(--commandPaletteMaxHeight) - var(--commandPaletteInputHeight)
  );
  overflow: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding-bottom: var(--spacing-8);
  border-top: 1px solid var(--borderLight);
}

.CommandPaletteModal_CommandPalette_empty_684 {
  font-size: var(--fontSizeBase);
  padding: var(--spacing-16);
  color: var(--colorTextMedium);
  line-height: var(--spacing-16);
}

.PlanPriceComparison_container_408 {
  margin-bottom: -15px;
}

.PlanPriceComparison_item_39d {
  display: grid;
  grid-template-columns: 104px 1fr 120px;
  grid-gap: 24px;
  align-items: center;
  padding: var(--spacing-16) 0;
  font-size: 14px;
}

.PlanPriceComparison_item_39d:first-child {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

@media screen and (max-width: 767px) {

.PlanPriceComparison_item_39d {
    display: block;

    /* Plan label. Those are UITexts, not accepting className
       this is easiest way to style them. */
}
    .PlanPriceComparison_item_39d span:nth-child(1) {
      display: block;
    }

    /* Plan name */
    .PlanPriceComparison_item_39d span:nth-child(2) {
      display: block;
      margin: var(--spacing-8) 0;
    }

    .PlanPriceComparison_item_39d .PlanPriceComparison_price_557 {
      text-align: left;
    }
  }

.PlanPriceComparison_price_557 {
  text-align: right;
}

.ChangePlanModal_insetSection_69a {
  margin: -16px -16px 0;
  padding: 16px;
  background-color: var(--surfaceBackgroundDark);
}

.ChangePlanModal_insetSection_69a.ChangePlanModal_downgrade_3dc {
    background-color: var(--bgDangerMuted);
  }

.ChangePlanModal_insetSection_69a.ChangePlanModal_bare_ba3 {
    margin-bottom: -15px;
  }

.ChangePlanModal_heading_1f6 {
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: var(--fontWeightBold);
  line-height: 20px;
}

.ChangePlanModal_copy_bb8 {
  margin-bottom: var(--spacing-16);
  font-size: 14px;
  line-height: 20px;
}

.ChangePlanModal_copy_bb8.ChangePlanModal_bare_ba3 {
    margin-bottom: 0;
  }

.ChangePlanModal_features_6be {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 8px 16px;
}

.ChangePlanModal_featuresItem_ea7 {
  display: flex;
  align-items: center;
  font-size: 13px;
  line-height: 16px;
}

.ChangePlanModal_limitsItem_7b0 {
  display: grid;
  grid-template-columns: 24px 220px auto;
  align-items: center;
  font-size: 13px;
  line-height: 16px;
  margin-bottom: 8px;
}

.ChangePlanModal_limitsItem_7b0.ChangePlanModal_isFullWidth_fe5 {
    grid-template-columns: 24px auto;
  }

.ChangePlanModal_limitsItemTooltip_3f2 {
  padding-bottom: 3px;
  border-bottom: 1px dashed var(--gray-40);
}

.ChangePlanModal_limitsCurrent_08a:after {
    content: ' ';
  }

.ChangePlanModal_limitsExtra_6c8 {
  color: var(--colorTextMedium);
}

.ChangePlanModal_icon_bf0 {
  display: flex;
  margin-right: 8px;
}

.ChangePlanModal_icon_bf0 svg {
    width: 16px;
    height: 16px;
    fill: var(--fillSuccess);
  }

.ChangePlanModal_icon_bf0.ChangePlanModal_danger_a6d svg {
    color: var(--fillDanger);
  }

.ChangePlanModal_icon_bf0.ChangePlanModal_warning_fcc svg {
    fill: var(--fillWarn);
  }

.ChangePlanModal_UpperLimitModal_body_7ee {
  border-bottom-left-radius: var(--modalBorderRadius);
  border-bottom-right-radius: var(--modalBorderRadius);
  overflow: hidden;
}

.CallBarWrapper_root_677 {
  --barMinHeight: 60px;
  --barStatusStripHeight: 4px;
  --barStatusStripTranslationWidth: 28px;

  /* NOTE: These variables can change behavior of children in the tree */
  --callBarButtonSize: 28px;
  --callBarTransition: 250ms cubic-bezier(0.77, 0, 0.175, 1);

  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  min-height: var(--barMinHeight);
  padding-bottom: var(--barStatusStripHeight);
  border-top: 1px solid var(--borderDefault);
  background-color: var(--surfaceBackgroundDefault);
}

.CallBarWrapper_root_677::before {
    content: ' ';
    position: absolute;
    bottom: 0;
    display: block;
    width: 100%;
    height: var(--barStatusStripHeight);
    /* NOTE: This var is defined in `useCallBarColorVars` */
    background-color: var(--callBarStripColor);
    transition: background-color var(--callBarTransition);
  }

.CallBarWrapper_root_677.CallBarWrapper_isInitializing_b51::after {
      content: ' ';
      position: absolute;
      bottom: 0;
      right: calc(-1 * var(--barStatusStripTranslationWidth));
      width: calc(100% + var(--barStatusStripTranslationWidth));
      height: var(--barStatusStripHeight);
      background-image: radial-gradient(
        rgba(255, 255, 255, 0.65) 0%,
        rgba(255, 255, 255, 0.15) 100%
      );
      background-size: var(--barStatusStripTranslationWidth) 100%;
      animation: CallBarWrapper_pendingStatusStripAnimation_9c4 500ms linear infinite;
    }

@keyframes CallBarWrapper_pendingStatusStripAnimation_9c4 {
  0% {
    transform: translateX(calc(-1 * var(--barStatusStripTranslationWidth)));
  }
  100% {
    transform: translateX(0);
  }
}

.StatusIcon_root_441 {
  /* NOTE: Also defined in CallBarWrapper.module.css */
  /* TODO: Unify */
  --transition: 250ms cubic-bezier(0.77, 0, 0.175, 1);

  flex: 0 0 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-8) 0;
  border-right: 1px solid var(--borderDefault);
  transition:
    color var(--transition),
    fill var(--transition);

  /* NOTE: This vars are defined in `useCallBarColorVars` */
  --color: var(--callBarStatusIconTextColor);
  --fill: var(--callBarStatusIconFill);

  color: var(--color);
}

.StatusIcon_root_441 svg {
    color: var(--fill);
  }

.StatusIcon_root_441.StatusIcon_isPredictiveDialer_5f4 {
    --fill: var(--warningPrimaryColor);
    --color: var(--colorTextDefault);
  }

.StatusIcon_icon_d99 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: 0 auto;
}

.StatusIcon_icon_d99 svg {
    width: 20px;
    height: 20px;
  }

.StatusIcon_icon_d99.StatusIcon_hungUpIcon_f81 {
    transform: rotate(135deg);
  }

.StatusIcon_icon_d99.StatusIcon_pausedIcon_79f svg {
      width: 24px;
      height: 24px;
    }

.StatusIcon_label_7e5 {
  color: inherit;
  text-transform: uppercase;
  line-height: 16px;
  font-weight: var(--fontWeightBold);
  font-size: 12px;
}

.StatusIcon_CallQualityIndicator_icon_d74 {
  cursor: pointer;
  --color: var(--fillDanger);
  display: grid;
  place-content: center;
  height: 100%;
}

.StatusIcon_CallQualityIndicator_container_790 {
  text-align: center;
  max-width: 280px;
}

button.buttons_AnswerButton_answerButton_ac9 {
  gap: var(--spacing-8);
  padding: 0 var(--spacing-12);
  height: var(--callBarButtonSize, 28px);
  border-radius: calc(var(--callBarButtonSize, 28px) / 2);

  color: var(--colorTextNeutralWhite);
  background-color: var(--fillSuccess);
}button.buttons_AnswerButton_answerButton_ac9:hover {
    background-color: color-mix(in srgb, #000 10%, var(--fillSuccess));
  }button.buttons_AnswerButton_answerButton_ac9:active,button.buttons_AnswerButton_answerButton_ac9:active:hover {
      background-color: color-mix(in srgb, #000 20%, var(--fillSuccess));
    }button.buttons_AnswerButton_answerButton_ac9 svg {
    width: 14px;
    height: 14px;
  }

/* Base styles shared by ALL call bar buttons */
.buttons_base_base_525 {
  --animationDuration: 250ms;
  --animationTimingFunction: cubic-bezier(0.77, 0, 0.175, 1);
  --transition: var(
    --callBarTransition,
    var(--animationDuration) var(--animationTimingFunction)
  );

  --colorFocus: var(--colorBlue20);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;

  margin: 0;
  padding: 0;
  border: none;

  cursor: pointer;
  transition: background-color 200ms;
}
.buttons_base_base_525:focus-visible {
    outline-color: var(--colorFocus);
  }
.buttons_base_base_525[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }
.buttons_base_base_525 svg {
    display: block;
    fill: var(--color);
    transition: fill var(--transition);
  }

button.buttons_CallBackButton_callBackButton_b27 {
  gap: var(--spacing-8);
  padding: 0 var(--spacing-12);
  height: var(--callBarButtonSize, 28px);
  border-radius: calc(var(--callBarButtonSize, 28px) / 2);

  color: var(--colorTextDefault);
  background-color: var(--surfaceBackgroundDefault);
  border: 1px solid var(--borderDefault);

  animation: buttons_CallBackButton_animateIn_295
    var(--callBarTransition, 250ms cubic-bezier(0.77, 0, 0.175, 1)) forwards;
}

button.buttons_CallBackButton_callBackButton_b27:hover {
    background-color: var(--bgDefaultMuted);
  }

button.buttons_CallBackButton_callBackButton_b27:active,button.buttons_CallBackButton_callBackButton_b27:active:hover {
      background-color: var(--bgButtonDefaultPressed);
    }

button.buttons_CallBackButton_callBackButton_b27 svg {
    width: 14px;
    height: 14px;
  }

@keyframes buttons_CallBackButton_animateIn_295 {
  from {
    opacity: 0.1;
    width: 28px;
  }
  to {
    opacity: 1;
    /* Full width of the button */
    width: 108px;
  }
}

button.buttons_DeclineButton_declineButton_16a {
  width: var(--callBarButtonSize, 28px);
  height: var(--callBarButtonSize, 28px);
  border-radius: 50%;

  color: var(--white);
  background-color: var(--fillDanger);
}button.buttons_DeclineButton_declineButton_16a:hover {
    background-color: color-mix(in srgb, #000 10%, var(--fillDanger));
  }button.buttons_DeclineButton_declineButton_16a:active,button.buttons_DeclineButton_declineButton_16a:active:hover {
      background-color: color-mix(in srgb, #000 20%, var(--fillDanger));
    }/* Special disabled state for "disallowed" */button.buttons_DeclineButton_declineButton_16a.buttons_DeclineButton_declineButton_16a[disabled] {
      background-color: color-mix(in srgb, var(--fillDanger) 50%, transparent);
    }button.buttons_DeclineButton_declineButton_16a.buttons_DeclineButton_declineButton_16a[disabled]:hover {
        background-color: color-mix(
          in srgb,
          var(--fillDanger) 50%,
          transparent
        );
      }button.buttons_DeclineButton_declineButton_16a svg {
    width: 14px;
    height: 14px;
    transform: rotate(135deg);
  }

button.buttons_IgnoreButton_ignoreButton_587 {
  width: var(--callBarButtonSize, 28px);
  height: var(--callBarButtonSize, 28px);
  border-radius: 50%;

  color: var(--colorIconLight);
  background-color: transparent;
}button.buttons_IgnoreButton_ignoreButton_587 svg {
    width: 14px;
    height: 14px;
  }

.CallRecordingToggle_base_97c {
  --badgeWidthStart: 40px;
  --horizontalPadding: 8px;
  --badgeWidthFull: calc(91px + var(--horizontalPadding) * 2);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  transition: width 200ms;
}

.CallRecordingToggle_base_97c.CallRecordingToggle_statusInitial_daa,.CallRecordingToggle_base_97c.CallRecordingToggle_statusStarting_fb8 {
    width: var(--badgeWidthStart);
  }

.CallRecordingToggle_base_97c.CallRecordingToggle_statusRecording_e85,.CallRecordingToggle_base_97c.CallRecordingToggle_statusPausing_ed0 {
    width: var(--badgeWidthFull);
  }

:is(.CallRecordingToggle_base_97c.CallRecordingToggle_statusRecording_e85,.CallRecordingToggle_base_97c.CallRecordingToggle_statusPausing_ed0) .CallRecordingToggle_indicator_c67 {
      background-color: var(--bgDangerMuted);
      border-color: var(--bgDangerMuted);
    }

:is(.CallRecordingToggle_base_97c.CallRecordingToggle_statusRecording_e85,.CallRecordingToggle_base_97c.CallRecordingToggle_statusPausing_ed0) .CallRecordingToggle_separator_b65 {
      background-color: var(--borderDangerMuted);
    }

:is(.CallRecordingToggle_base_97c.CallRecordingToggle_statusRecording_e85,.CallRecordingToggle_base_97c.CallRecordingToggle_statusPausing_ed0) .CallRecordingToggle_indicatorStatusText_5f4 {
      color: var(--colorTextDanger);
    }

.CallRecordingToggle_base_97c.CallRecordingToggle_statusPaused_246,.CallRecordingToggle_base_97c.CallRecordingToggle_statusResuming_d03,.CallRecordingToggle_base_97c.CallRecordingToggle_statusInitializing_314 {
    width: var(--badgeWidthFull);
  }

:is(.CallRecordingToggle_base_97c.CallRecordingToggle_statusPaused_246,.CallRecordingToggle_base_97c.CallRecordingToggle_statusResuming_d03,.CallRecordingToggle_base_97c.CallRecordingToggle_statusInitializing_314) .CallRecordingToggle_indicator_c67 {
      background-color: var(--bgLightMuted);
      border-color: var(--borderLight);
    }

:is(.CallRecordingToggle_base_97c.CallRecordingToggle_statusPaused_246,.CallRecordingToggle_base_97c.CallRecordingToggle_statusResuming_d03,.CallRecordingToggle_base_97c.CallRecordingToggle_statusInitializing_314) .CallRecordingToggle_separator_b65 {
      background-color: var(--borderDefault);
    }

:is(.CallRecordingToggle_base_97c.CallRecordingToggle_statusPaused_246,.CallRecordingToggle_base_97c.CallRecordingToggle_statusResuming_d03,.CallRecordingToggle_base_97c.CallRecordingToggle_statusInitializing_314) .CallRecordingToggle_indicatorStatusText_5f4 {
      color: var(--colorTextLight);
    }

.CallRecordingToggle_startRecordingButton_a69 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.CallRecordingToggle_startRecordingButton_a69:hover {
    background-color: var(--bgButtonBorderlessHover);
  }

.CallRecordingToggle_startRecordingButton_a69:active {
    background-color: var(--bgButtonBorderlessPressed);
  }

.CallRecordingToggle_indicator_c67 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 91px;
  height: 32px;
  padding: 0 var(--spacing-4) 0 var(--spacing-8);
  border-radius: 100px;
  box-sizing: border-box;
  border: 1px solid transparent;
  animation: CallRecordingToggle_fadeIn_d01 300ms forwards;
}

.CallRecordingToggle_indicatorStatusText_5f4 {
  font-size: 11px;
  font-weight: 600;
}

.CallRecordingToggle_separator_b65 {
  display: block;
  flex: none;
  width: 1px;
  height: 12px;
  margin-right: var(--spacing-4);
  margin-left: var(--spacing-12);
}

.CallRecordingToggle_ackContent_dc2 {
  color: var(--colorTextLight);
}

.CallRecordingToggle_ackContent_dc2 p {
    margin: 0;
    margin-bottom: var(--spacing-8);
  }

/* TODO: Small icon buttons should be 24px in size. Remove this once it's fixed */
.CallRecordingToggle_loaderIconWrapper_311 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px;
  height: 26px;
}

.CallRecordingToggle_recordingDot_3ca {
  display: block;
  position: relative;
  width: 12px;
  height: 12px;
}

.CallRecordingToggle_recordingDot_3ca::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 7.5px;
    height: 7.5px;
    border-radius: 50%;
    background-color: var(--colorIconLight);
  }

.CallRecordingToggle_recordingPulse_6c5::after {
    background-color: var(--fillDanger);
    animation: CallRecordingToggle_pulseDotOpacity_dac 1s infinite alternate;
  }

@keyframes CallRecordingToggle_fadeIn_d01 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes CallRecordingToggle_pulseDotOpacity_dac {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.3;
  }
}

.DialpadPopover_dialpad_1d9 {
  display: grid;
  grid-template-columns: repeat(3, 70px);
  gap: var(--spacing-4);
  padding: var(--spacing-8);
  color: var(--colorTextDefault);
}

.DialpadPopover_dialpad_1d9 .DialpadPopover_button_628 {
    cursor: pointer;
    -webkit-user-select: none;
            user-select: none;
    display: flex;
    flex-direction: column;
    align-items: center;

    height: 50px;
    border: 1px solid var(--borderDefault);
    border-radius: 7px;
    padding-top: 10px;
  }

:is(.DialpadPopover_dialpad_1d9 .DialpadPopover_button_628):hover {
      background-color: var(--bgButtonDefaultHover);
    }

:is(.DialpadPopover_dialpad_1d9 .DialpadPopover_button_628) .DialpadPopover_key_336 {
      font-size: 24px;
      line-height: 24px;
      font-weight: 700;
    }

.DialpadPopover_isPressed_08d:is(.DialpadPopover_dialpad_1d9 .DialpadPopover_button_628) {
      background-color: var(--bgActive);
      border-color: var(--bgActive);
      color: var(--white);
      --colorTextLight: var(--white); /* Force UI text to white */
    }

.DialpadPopover_message_8c8 {
  margin-top: var(--spacing-4);
  grid-column: span 3;
  display: flex;
  padding: var(--spacing-8);
  gap: var(--spacing-8);
  background-color: var(--bgLightMuted);
  color: var(--colorTextMedium);
}

.Duration_duration_989 {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.MicrophoneToggle_toggle_dc6 {
  display: grid;
  place-content: center;
  cursor: pointer;
  /* Only show one SVG (muted/unmuted) and swap on hover */
}

.MicrophoneToggle_toggle_dc6.MicrophoneToggle_isMuted_9c6:not(:hover) .MicrophoneToggle_iconUnmuted_b38,.MicrophoneToggle_toggle_dc6.MicrophoneToggle_isMuted_9c6:hover .MicrophoneToggle_iconMuted_9e2,.MicrophoneToggle_toggle_dc6:not(.MicrophoneToggle_isMuted_9c6):not(:hover) .MicrophoneToggle_iconMuted_9e2,.MicrophoneToggle_toggle_dc6:not(.MicrophoneToggle_isMuted_9c6):hover .MicrophoneToggle_iconUnmuted_b38 {
    display: none;
  }

.MicrophoneToggle_iconUnmuted_b38 g path {
    fill: var(--fillSuccess);
    clip-path: inset(calc((1 - var(--level, 0)) * 100%) 0% 0% 0%);
  }

.MicrophoneToggle_mutedPopover_d36 {
  text-align: center;
  max-width: 280px;
}

button.buttons_HangUpButton_hangUpButton_8aa {
  width: var(--callBarButtonSize, 28px);
  height: var(--callBarButtonSize, 28px);
  border-radius: 50%;

  color: var(--white);
  background-color: var(--fillDanger);
}button.buttons_HangUpButton_hangUpButton_8aa:hover {
    background-color: color-mix(in srgb, #000 10%, var(--fillDanger));
  }button.buttons_HangUpButton_hangUpButton_8aa:active,button.buttons_HangUpButton_hangUpButton_8aa:active:hover {
      background-color: color-mix(in srgb, #000 20%, var(--fillDanger));
    }/* Special disabled state for "disallowed" */button.buttons_HangUpButton_hangUpButton_8aa.buttons_HangUpButton_hangUpButton_8aa[disabled] {
      background-color: color-mix(in srgb, var(--fillDanger) 50%, transparent);
    }button.buttons_HangUpButton_hangUpButton_8aa.buttons_HangUpButton_hangUpButton_8aa[disabled]:hover {
        background-color: color-mix(
          in srgb,
          var(--fillDanger) 50%,
          transparent
        );
      }button.buttons_HangUpButton_hangUpButton_8aa svg {
    width: 14px;
    height: 14px;
    transform: rotate(135deg);
  }

.InviteUserSelect_item_00e {
  display: flex;
  gap: 8px;
  align-items: center;
}

.InviteUserSelect_invitedBadgeWrapper_b9e {
  flex: none;
}

.InviteUserSelect_statusIconWrapper_af5 {
  flex: none;
  margin-left: auto;
  display: flex;
  align-items: center;
}

.InviteUserSelect_emptyState_6f4 {
  padding: var(--spacing-4);
  box-sizing: border-box;
  color: var(--colorTextLight);
  font-weight: 600;
  text-align: center;
}

/* TODO: This can be replaced with the OverlayContainer component */
._user_route_lowerRightScreenWrapper_52d {
  /* By not using fixed, each child can be in a different stacking context */
  position: absolute;
  right: 32px;
  bottom: 32px;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: var(--spacing-12);
}
._user_route_lowerRightScreenWrapper_52d._user_route_withDockedConversations_249 {
    bottom: 64px;
  }

/* Gives each child a default z-index that can easily be overridden */
:where(._user_route_lowerRightScreenWrapper_52d > *) {
  z-index: var(--zindexOverlays);
}


/*# sourceMappingURL=https://srcmaps.close.com/srcmaps/entry-8b39a80f.ff46440b33b7e7fc8cc6-c279e0a7fc082f114fb0bcf3f2b45aff.js.map*/