.ReactRoot_DevWidget_widget_351 {
  position: fixed;
  font-family: monospace;
  z-index: 1000;
  cursor: pointer;

  align-items: center;
  display: flex;
  gap: var(--spacing-8);
}

.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;
}

.PromptAutoRecordCallsModal_promptIcon_432 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--bgDangerMuted);
}

.PromptAutoRecordCallsModal_promptHeading_404 {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.PromptAutoRecordCallsModal_promptText_838 {
  margin: 0;
  font-size: 13px;
  color: var(--colorTextLight);
  text-align: center;
}

.PromptAutoRecordCallsModal_tosText_9b5 {
  font-size: 13px;
}

.UnsupportedPlatform_UnsupportedPlatformCTA_root_d3c {
  background: var(--bgButtonDefaultEnabled);
  border: none;
  border-top: 1px solid var(--borderDefault);
  box-sizing: border-box;
  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:hover,
  .UnsupportedPlatform_UnsupportedPlatformCTA_root_d3c:focus {
    color: currentColor;
  }.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: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;
  }

.UnsupportedPlatform_footer_2b6:hover .UnsupportedPlatform_footerAction_af0, .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;
}

.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);
}
.CallBar__actionButton svg, .CallBar__closeButton svg, .CallBar__pauseDialerButton svg, .CallBar__redialButton svg, .CallBar__resetButton svg, .CallBar__reconnectButton svg, .CallBar__resumeButton svg, .CallBar__backToSmartViewButton svg, .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);
  }

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

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

.CallRecordingToggle_base_990.CallRecordingToggle_statusRecording_5ca .CallRecordingToggle_indicatorStatusText_65e, .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);
  }

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

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

.CallRecordingToggle_base_990.CallRecordingToggle_statusPaused_dd2 .CallRecordingToggle_indicatorStatusText_65e, .CallRecordingToggle_base_990.CallRecordingToggle_statusResuming_095 .CallRecordingToggle_indicatorStatusText_65e, .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;
  }

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

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

.DialpadPopover_dialpad_97a .DialpadPopover_button_a9f.DialpadPopover_isPressed_d4a {
      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 throught 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;
}

.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);
    }

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

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

label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_barge_5f5:is(label):hover, label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_barge_5f5:is(label):active, label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_barge_5f5:is(label).isSelected, label.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_button_428.ObserverCallBar_ListenWhisperBargeGroupButton_tempSelected_c25.ObserverCallBar_ListenWhisperBargeGroupButton_barge_5f5: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;
}

/* TODO: Remove these js-restriction-message styles after V1 Modal is no longer needed */
.modal-body.js-restriction-message .RestrictionMessageContainer_RestrictionMessage_modal_100,
.modal-body .js-restriction-message .RestrictionMessageContainer_RestrictionMessage_modal_100 {
  margin: calc(-1 * var(--modalBodyPadding)); /* Remove V1 Modal padding */
}

.modal-body .js-restriction-message:not(:last-child) .RestrictionMessageContainer_RestrictionMessage_modal_100 {
  margin-bottom: var(--modalBodyPadding);
  border-bottom-width: 1px;
}

.RestrictionMessageContainer_RestrictionMessage_modal_100,
.RestrictionMessageContainer_RestrictionMessage_modalStart_235,
.RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe {
  padding: 0;
  margin: 0;
  border-radius: 0;
  border-width: 0;
}

.RestrictionMessageContainer_RestrictionMessage_modal_100.RestrictionMessageContainer_RestrictionMessage_modal_100 .RestrictionMessageContainer_RestrictionMessage_usersListContainer_d85, .RestrictionMessageContainer_RestrictionMessage_modal_100.RestrictionMessageContainer_RestrictionMessage_modalStart_235 .RestrictionMessageContainer_RestrictionMessage_usersListContainer_d85, .RestrictionMessageContainer_RestrictionMessage_modal_100.RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe .RestrictionMessageContainer_RestrictionMessage_usersListContainer_d85, .RestrictionMessageContainer_RestrictionMessage_modalStart_235.RestrictionMessageContainer_RestrictionMessage_modal_100 .RestrictionMessageContainer_RestrictionMessage_usersListContainer_d85, .RestrictionMessageContainer_RestrictionMessage_modalStart_235.RestrictionMessageContainer_RestrictionMessage_modalStart_235 .RestrictionMessageContainer_RestrictionMessage_usersListContainer_d85, .RestrictionMessageContainer_RestrictionMessage_modalStart_235.RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe .RestrictionMessageContainer_RestrictionMessage_usersListContainer_d85, .RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe.RestrictionMessageContainer_RestrictionMessage_modal_100 .RestrictionMessageContainer_RestrictionMessage_usersListContainer_d85, .RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe.RestrictionMessageContainer_RestrictionMessage_modalStart_235 .RestrictionMessageContainer_RestrictionMessage_usersListContainer_d85, .RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe.RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe .RestrictionMessageContainer_RestrictionMessage_usersListContainer_d85 {
    margin: 0;
    background-color: var(--white);
  }

.RestrictionMessageContainer_RestrictionMessage_modal_100.RestrictionMessageContainer_RestrictionMessage_modal_100 .RestrictionMessageContainer_RestrictionMessage_footer_a23,
  .RestrictionMessageContainer_RestrictionMessage_modal_100.RestrictionMessageContainer_RestrictionMessage_modalStart_235 .RestrictionMessageContainer_RestrictionMessage_footer_a23,
  .RestrictionMessageContainer_RestrictionMessage_modal_100.RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe .RestrictionMessageContainer_RestrictionMessage_footer_a23,
  .RestrictionMessageContainer_RestrictionMessage_modalStart_235.RestrictionMessageContainer_RestrictionMessage_modal_100 .RestrictionMessageContainer_RestrictionMessage_footer_a23,
  .RestrictionMessageContainer_RestrictionMessage_modalStart_235.RestrictionMessageContainer_RestrictionMessage_modalStart_235 .RestrictionMessageContainer_RestrictionMessage_footer_a23,
  .RestrictionMessageContainer_RestrictionMessage_modalStart_235.RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe .RestrictionMessageContainer_RestrictionMessage_footer_a23,
  .RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe.RestrictionMessageContainer_RestrictionMessage_modal_100 .RestrictionMessageContainer_RestrictionMessage_footer_a23,
  .RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe.RestrictionMessageContainer_RestrictionMessage_modalStart_235 .RestrictionMessageContainer_RestrictionMessage_footer_a23,
  .RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe.RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe .RestrictionMessageContainer_RestrictionMessage_footer_a23,
  .RestrictionMessageContainer_RestrictionMessage_modal_100.RestrictionMessageContainer_RestrictionMessage_modal_100 .RestrictionMessageContainer_RestrictionMessage_title_d5f,
  .RestrictionMessageContainer_RestrictionMessage_modal_100.RestrictionMessageContainer_RestrictionMessage_modalStart_235 .RestrictionMessageContainer_RestrictionMessage_title_d5f,
  .RestrictionMessageContainer_RestrictionMessage_modal_100.RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe .RestrictionMessageContainer_RestrictionMessage_title_d5f,
  .RestrictionMessageContainer_RestrictionMessage_modalStart_235.RestrictionMessageContainer_RestrictionMessage_modal_100 .RestrictionMessageContainer_RestrictionMessage_title_d5f,
  .RestrictionMessageContainer_RestrictionMessage_modalStart_235.RestrictionMessageContainer_RestrictionMessage_modalStart_235 .RestrictionMessageContainer_RestrictionMessage_title_d5f,
  .RestrictionMessageContainer_RestrictionMessage_modalStart_235.RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe .RestrictionMessageContainer_RestrictionMessage_title_d5f,
  .RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe.RestrictionMessageContainer_RestrictionMessage_modal_100 .RestrictionMessageContainer_RestrictionMessage_title_d5f,
  .RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe.RestrictionMessageContainer_RestrictionMessage_modalStart_235 .RestrictionMessageContainer_RestrictionMessage_title_d5f,
  .RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe.RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe .RestrictionMessageContainer_RestrictionMessage_title_d5f {
    padding: 14px;
  }

.RestrictionMessageContainer_RestrictionMessage_modal_100.RestrictionMessageContainer_RestrictionMessage_modal_100 .RestrictionMessageContainer_RestrictionMessage_footer_a23, .RestrictionMessageContainer_RestrictionMessage_modal_100.RestrictionMessageContainer_RestrictionMessage_modalStart_235 .RestrictionMessageContainer_RestrictionMessage_footer_a23, .RestrictionMessageContainer_RestrictionMessage_modal_100.RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe .RestrictionMessageContainer_RestrictionMessage_footer_a23, .RestrictionMessageContainer_RestrictionMessage_modalStart_235.RestrictionMessageContainer_RestrictionMessage_modal_100 .RestrictionMessageContainer_RestrictionMessage_footer_a23, .RestrictionMessageContainer_RestrictionMessage_modalStart_235.RestrictionMessageContainer_RestrictionMessage_modalStart_235 .RestrictionMessageContainer_RestrictionMessage_footer_a23, .RestrictionMessageContainer_RestrictionMessage_modalStart_235.RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe .RestrictionMessageContainer_RestrictionMessage_footer_a23, .RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe.RestrictionMessageContainer_RestrictionMessage_modal_100 .RestrictionMessageContainer_RestrictionMessage_footer_a23, .RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe.RestrictionMessageContainer_RestrictionMessage_modalStart_235 .RestrictionMessageContainer_RestrictionMessage_footer_a23, .RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe.RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe .RestrictionMessageContainer_RestrictionMessage_footer_a23 {
    padding-top: 0;
  }

.RestrictionMessageContainer_RestrictionMessage_modal_100.RestrictionMessageContainer_RestrictionMessage_modal_100 .RestrictionMessageContainer_RestrictionMessage_title_d5f, .RestrictionMessageContainer_RestrictionMessage_modal_100.RestrictionMessageContainer_RestrictionMessage_modalStart_235 .RestrictionMessageContainer_RestrictionMessage_title_d5f, .RestrictionMessageContainer_RestrictionMessage_modal_100.RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe .RestrictionMessageContainer_RestrictionMessage_title_d5f, .RestrictionMessageContainer_RestrictionMessage_modalStart_235.RestrictionMessageContainer_RestrictionMessage_modal_100 .RestrictionMessageContainer_RestrictionMessage_title_d5f, .RestrictionMessageContainer_RestrictionMessage_modalStart_235.RestrictionMessageContainer_RestrictionMessage_modalStart_235 .RestrictionMessageContainer_RestrictionMessage_title_d5f, .RestrictionMessageContainer_RestrictionMessage_modalStart_235.RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe .RestrictionMessageContainer_RestrictionMessage_title_d5f, .RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe.RestrictionMessageContainer_RestrictionMessage_modal_100 .RestrictionMessageContainer_RestrictionMessage_title_d5f, .RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe.RestrictionMessageContainer_RestrictionMessage_modalStart_235 .RestrictionMessageContainer_RestrictionMessage_title_d5f, .RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe.RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe .RestrictionMessageContainer_RestrictionMessage_title_d5f {
    padding-bottom: 0;
  }

.RestrictionMessageContainer_RestrictionMessage_modal_100.RestrictionMessageContainer_RestrictionMessage_modal_100 .RestrictionMessageContainer_RestrictionMessage_usersListCaption_1fa, .RestrictionMessageContainer_RestrictionMessage_modal_100.RestrictionMessageContainer_RestrictionMessage_modalStart_235 .RestrictionMessageContainer_RestrictionMessage_usersListCaption_1fa, .RestrictionMessageContainer_RestrictionMessage_modal_100.RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe .RestrictionMessageContainer_RestrictionMessage_usersListCaption_1fa, .RestrictionMessageContainer_RestrictionMessage_modalStart_235.RestrictionMessageContainer_RestrictionMessage_modal_100 .RestrictionMessageContainer_RestrictionMessage_usersListCaption_1fa, .RestrictionMessageContainer_RestrictionMessage_modalStart_235.RestrictionMessageContainer_RestrictionMessage_modalStart_235 .RestrictionMessageContainer_RestrictionMessage_usersListCaption_1fa, .RestrictionMessageContainer_RestrictionMessage_modalStart_235.RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe .RestrictionMessageContainer_RestrictionMessage_usersListCaption_1fa, .RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe.RestrictionMessageContainer_RestrictionMessage_modal_100 .RestrictionMessageContainer_RestrictionMessage_usersListCaption_1fa, .RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe.RestrictionMessageContainer_RestrictionMessage_modalStart_235 .RestrictionMessageContainer_RestrictionMessage_usersListCaption_1fa, .RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe.RestrictionMessageContainer_RestrictionMessage_modalEnd_cfe .RestrictionMessageContainer_RestrictionMessage_usersListCaption_1fa {
    padding: 4px 14px 14px 14px;
  }

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

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

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

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

.RestrictionMessageContainer_RestrictionMessage_usersListContainer_d85.RestrictionMessageContainer_RestrictionMessage_usersListContainer_d85 {
    margin: 10px -15px;
  }

.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: 5px 5px;
}

.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: 15px;
  width: 25px;
  box-sizing: content-box;
}

.RestrictionMessageContainer_RestrictionMessage_emailCell_c05 {
  width: 33%;
  padding-right: 15px;
  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_footer_a23.RestrictionMessageContainer_RestrictionMessage_footer_a23 {
    margin-top: 15px;
  }

.RestrictionMessageContainer_RestrictionMessage_footerBtn_d6f {
  margin-right: 15px;
}

.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 */
}

.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;
}

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

.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;
}

.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;
}

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

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


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


  .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;
  }

.UpcomingMeetings_UpcomingMeetingCard_root_10d {
  display: block;
}

.UpcomingMeetings_UpcomingMeetingCard_root_10d.UpcomingMeetings_UpcomingMeetingCard_loading_82a {
    opacity: 0.5;
  }

/* override link styling */

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

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

.UpcomingMeetings_UpcomingMeetingCard_dash_e3b.UpcomingMeetings_UpcomingMeetingCard_past_f4b {
    background-color: var(--borderDefault);
  }

.UpcomingMeetings_UpcomingMeetingCard_dash_e3b.UpcomingMeetings_UpcomingMeetingCard_loading_82a {
    background-color: var(--bgSkeleton);
  }

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

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

.UpcomingMeetings_UpcomingMeetingCard_plusMore_6f6 {
  white-space: nowrap;
}

.UpcomingMeetings_UpcomingMeetingCard_badge_29d {
  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;
}

/* 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;
  }

.Activity_TimeAgo_link_0cc {

  text-wrap: nowrap;
}

.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 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);
  }

.login_as .LeadActivities_LeadActivityList_list_ab9 {
    background-color: var(--colorLoginAsSurface);
  }

@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);
}
  }

.login_as .QuickViewBar_root_b93 {
    background-color: var(--colorLoginAsSurface);;
  }

.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;
  }

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

.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;
  }

.SidebarCard_SidebarCardHeader_opportunityIcon_8dc svg path:nth-child(1) {
    fill: var(--colorIconDuotoneFillGold);
  }

.SidebarCard_SidebarCardHeader_opportunityIcon_8dc svg path:nth-child(2) {
    fill: var(--colorIconDuotoneStrokeGold);
  }

.SidebarCard_SidebarCardHeader_aboutIcon_f8f svg path:nth-child(1) {
    fill: var(--colorIconDuotoneFillBlue);
  }

.SidebarCard_SidebarCardHeader_aboutIcon_f8f svg path:nth-child(2) {
    fill: var(--colorIconDuotoneStrokeBlue);
  }

.SidebarCard_SidebarCardHeader_contactIcon_2e7 svg path:nth-child(1) {
    fill: var(--colorIconDuotoneFillCyan);
  }

.SidebarCard_SidebarCardHeader_contactIcon_2e7 svg path:nth-child(2) {
    fill: var(--colorIconDuotoneStrokeCyan);
  }

.SidebarCard_SidebarCardHeader_taskIcon_743 svg path:nth-child(1) {
    fill: var(--colorIconDuotoneFillRed);
  }

.SidebarCard_SidebarCardHeader_taskIcon_743 svg path:nth-child(2) {
    fill: var(--colorIconDuotoneStrokeRed);
  }

.SidebarCard_SidebarCardHeader_customObjectIcon_cc1 svg path:nth-child(1) {
    fill: var(--colorIconDuotoneFillPurple);
  }

.SidebarCard_SidebarCardHeader_customObjectIcon_cc1 svg path:nth-child(2) {
    fill: var(--colorIconDuotoneStrokePurple);
  }

.SidebarCard_SidebarCardHeader_customFieldIcon_361 svg path:nth-child(1) {
    fill: var(--colorIconDuotoneFillGreen);
  }

.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. */
:last-child > .SidebarCard_SidebarCardItemWrapper_hasWrapper_b38.SidebarCard_SidebarCardItemWrapper_root_010, .SidebarCard_SidebarCardItemWrapper_root_010: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 */
:not(:last-child) > .SidebarCard_SidebarCardItemWrapper_hasWrapper_b38.SidebarCard_SidebarCardItemWrapper_expanded_3eb, .SidebarCard_SidebarCardItemWrapper_expanded_3eb:not(.SidebarCard_SidebarCardItemWrapper_hasWrapper_b38):not(:last-child) {
    border-bottom: var(--spacing-4) solid var(--borderLight);
  }
:not(:last-child) > .SidebarCard_SidebarCardItemWrapper_hasWrapper_b38.SidebarCard_SidebarCardItemWrapper_expanded_3eb::after, .SidebarCard_SidebarCardItemWrapper_expanded_3eb: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_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 screen and (min-width: 768px) {@media (hover: hover) and (max-color:2147477350) {
        .SidebarCard_SidebarCardSortableItemsList_sortableItem_72b:hover .SidebarCard_SidebarCardSortableItemsList_dragHandle_f9f {
          opacity: 1;
        }
      .SidebarCard_SidebarCardSortableItemsList_sortableItem_72b .SidebarCard_SidebarCardSortableItemsList_dragHandle_f9f:hover {
        opacity: 1;
      }
    }
    }@media not  screen and (min-width: 768px) {@media (hover: hover) and (color:2147477350) {
        .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;
  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);
}

.login_as .LeadLayout_mainHeader_bb9 {
    background-color: var(--colorLoginAsSurface);
  }

/* Adds danger styles to action buttons (login as) */

.login_as .LeadLayout_mainHeader_bb9 .Btn {
    background-color: var(--colorLoginAsButton);
    border-color: var(--colorLoginAsButtonBorder);
  }

.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);
}

.login_as .LeadLayout_sidebarHeader_1df {
    background-color: var(--colorLoginAsSurface);
  }

.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;
}

.login_as .LeadLayout_sidebarContent_d13 {
    background-color: var(--colorLoginAsSurface);
  }

.LeadLayout_sidebarScroller_485 {
  max-height: calc(
    var(--leadLayoutSidebarMaxHeight) - var(--leadLayoutSidebarHeaderHeight) -
      var(--leadLayoutSidebarBetaBannerHeight)
  );
  overscroll-behavior-y: contain;
}

.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;
  }

.MessageActions_actionsContainer_f57 {
  display: flex;
  gap: var(--spacing-8);
  visibility: hidden;
}.MessageActions_actionsContainer_f57.MessageActions_forceVisibility_6df {
    visibility: visible;
  }

.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_messageContainer_184.Message_clickable_de1 .Message_message_a1e.Message_incoming_53f:hover {
          border-color: var(--borderDefault);
        }

.Message_sms_e64 :is(.Message_messageContainer_184.Message_clickable_de1 .Message_message_a1e.Message_outgoing_8f3:hover) {
            border-color: var(--borderSmsMutedHover);
          }

.Message_whatsapp_bf0 :is(.Message_messageContainer_184.Message_clickable_de1 .Message_message_a1e.Message_outgoing_8f3: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;
}

.ToastManager_toast_dd7 {
  flex: 1 0 auto;
}

.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;
  }

.TopBar_container_d12 a:hover,
    .TopBar_container_d12 a:active,
    .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_container_d12 .TopBar_close_db4.TopBar_danger_211 {
      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_container_d12 .TopBar_text_8e6.TopBar_noCTA_c2d {
      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;
  }.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 {
    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;
  }.KeyboardShortcutsModal_KeyboardShortcutsModal_keyboardShortcutsModal_2d3 .KeyboardShortcutsModal_KeyboardShortcutsModal_key_c01:last-child {
      margin-right: 0;
    }.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);
  }

      .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);
  }

.login_as .LeftNav {
    background-color: var(--colorBgLoginAsLeftNav);
    color: var(--loginAsColor);
  }

/* 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 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;
}
  }

:-webkit-full-screen .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;
}

.login_as .LeftNav__addButton {
    color: color-mix(in srgb, #000 40%, var(--loginAsColor));
  }

.LeftNav__addButton > button {
    height: 14px;
  }

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

.login_as .LeftNav__addButton:hover {
      color: var(--loginAsColor);
    }

.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;
  }

.Menu_menuItem_ca1 > .Menu_menuList_6f5 .Menu_menuItem_ca1 {
      font-size: var(--fontSizeSmall);
      font-weight: 400;
      margin-bottom: 0;
      color: var(--colorGray30);
    }

.login_as :is(.Menu_menuItem_ca1 > .Menu_menuList_6f5 .Menu_menuItem_ca1) {
        color: color-mix(in srgb, #000 20%, var(--loginAsColor));
      }

.Menu_menuItem_ca1 > .Menu_menuList_6f5 .Menu_itemLink_91f.Menu_isActive_a3e .Menu_itemLinkContent_7f5 {
        font-weight: var(--fontWeightBold);
        background-color: transparent;
      }

.Menu_menuItem_ca1 > .Menu_menuList_6f5 .Menu_itemLink_91f.Menu_isActive_a3e .Menu_itemLinkContent_7f5:hover {
          background-color: var(--bgNavSidebarMenuitemHover);
        }

.login_as :is(.Menu_menuItem_ca1 > .Menu_menuList_6f5 .Menu_itemLink_91f.Menu_isActive_a3e .Menu_itemLinkContent_7f5:hover) {
            background-color: var(--loginAsHover);
          }

.Menu_menuItem_ca1 > .Menu_menuList_6f5 .Menu_itemLinkContent_7f5 {
      border-radius: 24px;
      color: var(--colorGray40);
      padding: 2px var(--leftNavSpacing);
    }

.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);
}

.Menu_itemButton_46c,
  .Menu_itemLink_91f,
  .Menu_itemButton_46c:hover,
  .Menu_itemLink_91f:hover,
  .Menu_itemButton_46c:active,
  .Menu_itemLink_91f:active,
  .Menu_itemButton_46c:focus,
  .Menu_itemLink_91f:focus {
    color: currentColor;
    -webkit-text-decoration: none;
    text-decoration: none;
  }

.Menu_itemButton_46c.Menu_isActive_a3e .Menu_itemLinkContent_7f5, .Menu_itemLink_91f.Menu_isActive_a3e .Menu_itemLinkContent_7f5 {
    color: var(--colorWhite);
  }

.login_as .Menu_itemButton_46c.Menu_isActive_a3e .Menu_itemLinkContent_7f5,
    .login_as .Menu_itemLink_91f.Menu_isActive_a3e .Menu_itemLinkContent_7f5,
    .login_as .Menu_itemButton_46c:hover:not(.Menu_isActive_a3e) .Menu_itemLinkContent_7f5,
    .login_as .Menu_itemLink_91f:hover:not(.Menu_isActive_a3e) .Menu_itemLinkContent_7f5 {
      color: var(--loginAsColor);
      background-color: var(--loginAsHover);
    }

.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;
}

.Menu_collapseIcon_ce5 svg, .Menu_itemExternalIcon_299 svg {
    width: 14px;
    height: 14px;
  }

.login_as .Menu_collapseIcon_ce5, .login_as .Menu_itemExternalIcon_299 {
    color: var(--loginAsColor);
    opacity: 0.5;
  }

.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;
  }

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

.Menu_itemPopover_1a6 .Menu_itemLink_91f:hover:not(.Menu_isActive_a3e) .Menu_itemLinkContent_7f5,
    .Menu_itemPopover_1a6 .Menu_itemLink_91f.Menu_isActive_a3e .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;
}

.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_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;
}

.SmartViewList_smartViewIcon_626:hover, .SmartViewList_searchIcon_22f:hover {
    color: var(--colorWhite);
  }

.SmartViewList_login_as_97d .SmartViewList_smartViewIcon_626, .SmartViewList_login_as_97d .SmartViewList_searchIcon_22f {
    color: var(--loginAsColor);
    opacity: 0.5;
  }

.SmartViewList_login_as_97d .SmartViewList_smartViewIcon_626:hover, .SmartViewList_login_as_97d .SmartViewList_searchIcon_22f:hover {
      opacity: 1;
    }

.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);
}

.SmartViewList_searchBoxSearchIcon_29e svg, .SmartViewList_searchBoxClearIcon_709 svg {
    width: 14px;
    height: 14px;
  }

.SmartViewList_login_as_97d .SmartViewList_searchBoxSearchIcon_29e, .SmartViewList_login_as_97d .SmartViewList_searchBoxClearIcon_709 {
    color: var(--loginAsColor);
    opacity: 0.5;
  }

.SmartViewList_login_as_97d .SmartViewList_searchBoxSearchIcon_29e:hover, .SmartViewList_login_as_97d .SmartViewList_searchBoxClearIcon_709:hover {
      opacity: 1;
    }

.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;
  }

.SmartViewList_list_39a .SmartViewList_itemIsSorting_a07 .SmartViewList_link_f90 {
      pointer-events: none;
    }

.SmartViewList_list_39a .SmartViewList_itemIsSorting_a07 .SmartViewList_link_f90:hover {
      background-color: transparent;
    }

.SmartViewList_list_39a .SmartViewList_itemIsSorting_a07 .SmartViewList_link_f90:hover .SmartViewList_editButton_f0c,
      .SmartViewList_list_39a .SmartViewList_itemIsSorting_a07 .SmartViewList_link_f90:hover .SmartViewList_unpinButton_386,
      .SmartViewList_list_39a .SmartViewList_itemIsSorting_a07 .SmartViewList_link_f90:hover .SmartViewList_dragger_79c {
        display: none;
      }

.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;
}

.SmartViewList_bullet_98e svg, .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 (-webkit-min-device-pixel-ratio: 2), (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_login_as_97d :is(.SmartViewList_link_f90,.SmartViewList_link_f90:hover,.SmartViewList_link_f90:focus,.SmartViewList_link_f90:active) {
      color: var(--loginAsColor);
    }

.SmartViewList_link_f90:hover .SmartViewList_linkContent_cb4 {
    background-color: var(--colorGray80);
  }

.SmartViewList_link_f90:hover .SmartViewList_linkContent_cb4 .SmartViewList_editButton_f0c,
    .SmartViewList_link_f90:hover .SmartViewList_linkContent_cb4 .SmartViewList_unpinButton_386,
    .SmartViewList_link_f90:hover .SmartViewList_linkContent_cb4 .SmartViewList_dragger_79c {
      display: flex;
    }

.SmartViewList_link_f90:hover .SmartViewList_linkContent_cb4 .SmartViewList_bullet_98e {
      display: none;
    }

/* Prevent sorting the list while searching */

.SmartViewList_root_e13.SmartViewList_isSearching_ad8 :is(.SmartViewList_link_f90:hover .SmartViewList_linkContent_cb4) .SmartViewList_editButton_f0c,
      .SmartViewList_root_e13.SmartViewList_isSearching_ad8 :is(.SmartViewList_link_f90:hover .SmartViewList_linkContent_cb4) .SmartViewList_unpinButton_386,
      .SmartViewList_root_e13.SmartViewList_isSearching_ad8 :is(.SmartViewList_link_f90:hover .SmartViewList_linkContent_cb4) .SmartViewList_bullet_98e {
        display: flex;
      }

.SmartViewList_root_e13.SmartViewList_isSearching_ad8 :is(.SmartViewList_link_f90:hover .SmartViewList_linkContent_cb4) .SmartViewList_dragger_79c {
        display: none;
      }

.login_as :is(.SmartViewList_link_f90:hover .SmartViewList_linkContent_cb4) {
      background-color: var(--loginAsHover);
    }

.SmartViewList_link_f90.SmartViewList_linkActive_200 .SmartViewList_linkContent_cb4 {
    font-weight: var(--fontWeightBold);
    color: var(--colorWhite);
  }

.SmartViewList_link_f90.SmartViewList_linkActive_200 .SmartViewList_linkContent_cb4 .SmartViewList_bullet_98e {
      opacity: 1;
    }

.SmartViewList_login_as_97d :is(.SmartViewList_link_f90.SmartViewList_linkActive_200 .SmartViewList_linkContent_cb4) {
      color: var(--loginAsColor);
    }

.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;
}

.SmartViewList_unpinButton_386 svg, .SmartViewList_editButton_f0c svg {
    width: var(--spacing-16);
    height: var(--spacing-16);
  }

.SmartViewList_unpinButton_386:hover, .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;
}

.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;
    }

      .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;
    }
        .SmartViewList_is-collapsed_9dc .SmartViewList_link_f90:hover .SmartViewList_unpinButton_386,
        .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;
    }
}

.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;
    }
        .TopNav .ProfileDropdown .ProfileDropdown__opener,
        .TopNav .ProfileDropdown .ProfileDropdown__opener:hover {
          background-color: transparent;
          padding: var(--spacing-8);
          border: 0;
        }

      .TopNav .ProfileDropdown .ProfileDropdown__info,
      .TopNav .ProfileDropdown .ProfileDropdown__infoSkeleton {
        display: none;
      }

      .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);
  }

.ProfileDropdown__opener:not([disabled]):hover,
    .ProfileDropdown__opener:not([disabled]):focus,
    .ProfileDropdown__opener:not([disabled]):hover .ProfileDropdown__organization,
    .ProfileDropdown__opener:not([disabled]):focus .ProfileDropdown__organization {
      color: var(--colorWhite);
    }

.login_as .ProfileDropdown__opener {
    background-color: var(--colorMagenta70);
    color: var(--colorMagenta10);
  }

.login_as .ProfileDropdown__opener .ProfileDropdown__organization {
      color: var(--colorMagenta30);
    }

.login_as .ProfileDropdown__opener:hover,
    .login_as .ProfileDropdown__opener:focus {
      background-color: var(--colorMagenta60);
      color: var(--colorWhite);
    }

.login_as .ProfileDropdown__opener:hover .ProfileDropdown__organization, .login_as .ProfileDropdown__opener:focus .ProfileDropdown__organization {
        color: var(--colorGray30);
      }

/* 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.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.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-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);
  }

.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 */
}
  }

:-webkit-full-screen .TopNav {
    display: none;
  }

:fullscreen .TopNav {
    display: none;
  }

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

.TopNav {
    background-color: color-mix(in srgb, #000 20%, var(--bgNavSidebar));
    padding: 0;
}

    .login_as .TopNav {
      background-color: var(--colorLoginAsSurface);
    }

    .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);
}

.DialNumber_form_6fa {
  margin: 0;
}

.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;
  }

.SupportMenu_SupportMenuItem_root_b55:hover .SupportMenu_SupportMenuItem_alert_0e9:after, .SupportMenu_SupportMenuItem_root_b55:focus .SupportMenu_SupportMenuItem_alert_0e9:after, .SupportMenu_SupportMenuItem_root_b55:active .SupportMenu_SupportMenuItem_alert_0e9:after {
      border-color: var(--bgMenuItemHover);
    }

.SupportMenu_SupportMenuItem_root_b55:hover .SupportMenu_SupportMenuItem_external_eaa, .SupportMenu_SupportMenuItem_root_b55:focus .SupportMenu_SupportMenuItem_external_eaa, .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;
}

.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%;
}

.UsageNotice_main_b55 {
  display: flex;
  align-items: center;
  height: 72px;
  background: var(--closeLightBlue);
  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);
  }

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

.ConnectedAccountsModal_StepAddEmailCustom_note_e46 {
  margin-bottom: 15px;
}

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

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

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

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

.ConnectedAccountsModal_StepAddEmailCustom_syncing_d15.ConnectedAccountsModal_StepAddEmailCustom_isVisible_3ce {
    opacity: 1;
    pointer-events: auto;
  }

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

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

.ConnectedAccountsModal_StepGoogleSyncingOptionsContainer_option_f51 {
  padding: 15px;
}

.ConnectedAccountsModal_StepGoogleSyncingOptionsContainer_calendar_bce,
.ConnectedAccountsModal_StepGoogleSyncingOptionsContainer_loader_751 {
  margin-top: 8px;
}

.ConnectedAccountsModal_StepGoogleSyncingOptionsContainer_loader_751 {
  padding: 16px 0;
}

.ConnectedAccountsModal_StepGoogleSyncingOptionsContainer_error_7a7 {
  margin-top: 24px;
}

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

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

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

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

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

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

.ConnectedAccountsModal_ConnectedAccountRadioItem_header_485 {
  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_5fc {
  width: 32px;
  height: 32px;
}

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

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

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

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

.ConnectedAccountsModal_CustomEmailForm_form_676 {
  margin-bottom: 0;
}

.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: 0;
  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);
}

.NextLead_key_b5a {
  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;
}

.NextLead_tipText_2d4 {
  color: var(--colorTextNeutralWhite);
}

.NextLead_wrapper_1c1 {
  z-index: var(--zindexFloatingUI);

  --nextLeadBorderRadius: 50px;
  /* without hover support we want to display an expanded version all the time */
  width: 300px;
  display: flex;
}

@media (max-width: 480px) {

.NextLead_wrapper_1c1 {
    display: none;
}
  }

@media (hover: hover) {

.NextLead_wrapper_1c1 {

    width: 52px;
    transition: width 0.2s ease-in-out;
    flex-direction: column-reverse;
    pointer-events: none;
}
  }

@media (hover: hover) and (max-width: 480px) {

.NextLead_wrapper_1c1 {
      display: none;
}
    }

@media (hover: hover) {

    .NextLead_wrapper_1c1:hover {
      width: 250px;
    }

      .NextLead_wrapper_1c1:hover .NextLead_container_e86 {
        gap: var(--spacing-16);
      }

      .NextLead_wrapper_1c1:hover .NextLead_content_eb2,
      .NextLead_wrapper_1c1:hover .NextLead_previousBtn_7c9,
      .NextLead_wrapper_1c1:hover .NextLead_contactName_d93,
      .NextLead_wrapper_1c1:hover .NextLead_listLink_939 {
        opacity: 1;
      }

      .NextLead_wrapper_1c1:hover .NextLead_dismissWrapper_c0a {
        display: flex;
      }
  }

.NextLead_content_eb2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
  min-width: 0;
  gap: var(--spacing-4);
}

@media (hover: hover) {

.NextLead_content_eb2 {
    opacity: 0;
}
  }

.NextLead_container_e86 {
  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) {

.NextLead_container_e86 {
    gap: 0;
    padding: 0;
    justify-content: flex-end;
    border-radius: var(--nextLeadBorderRadius);
    pointer-events: auto;
}
  }

.NextLead_dismissWrapper_c0a {
  display: flex;
}

@media (hover: hover) {

.NextLead_dismissWrapper_c0a {
    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 */
}
    .NextLead_dismissWrapper_c0a:focus {
      pointer-events: none;
    }
  }

@media (hover: none) {

.NextLead_dismissBtn_455::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 0;
    height: 60%;
    border-left: 1px solid var(--gray-40);
}
  }

.NextLead_dismissBtn_455 {
  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) {

.NextLead_dismissBtn_455 {
    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);
}
  }

.NextLead_contactWrapper_99c {
  max-width: 100%;
  line-height: 16px;
}

.NextLead_contactName_d93,
.NextLead_listLink_939 {
  color: var(--gray-10);
  font-size: 13px;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (hover: hover) {

.NextLead_contactName_d93,
.NextLead_listLink_939 {
    opacity: 0;
}
  }

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

.NextLead_listLink_939 {
  max-width: 100%;
  line-height: 16px;
  font-weight: 400;
}

@media (hover: hover) {
    .NextLead_listLink_939:hover {
      color: var(--gray-10);
    }
  }

.NextLead_arrowBtn_d91 {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
  outline: none;
}

.NextLead_arrowBtn_d91:disabled {
    color: var(--gray-40);
    cursor: not-allowed;
  }

@media (hover: hover) {

.NextLead_arrowBtn_d91 {
    width: 52px;
    height: 52px;
}

    .NextLead_arrowBtn_d91:hover:enabled {
      color: var(--white);
    }
  }

@media (hover: hover) {

.NextLead_previousBtn_7c9 {
    opacity: 0;
}
  }


/*# sourceMappingURL=https://srcmaps.close.com/srcmaps/entry~69ba28df.885e92def7f6167922cb.js.map*/