.DialerSettingsButton_dialerSettingsButton_617 {
  --orange: #fbb963;

  cursor: pointer;
  outline: 0;
  display: inline-flex;
  position: relative;
  height: 28px;
  padding: 0 10px 0 1px;
  align-items: center;
  color: #2e2e2e;
  color: var(--colorTextDefault);
  border: 1px solid #e2e2e2;
  border: 1px solid var(--borderDefault);
  border-radius: 14px;
  background-color: #ffffff;
  background-color: var(--white);
}

.DialerSettingsButton_dialerSettingsButton_617::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 4px solid #2e2e2e;
    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_c52 {
  display: inline-block;
  height: 28px;
  margin: -1px 0 -1px -2px; /* eat through top/bottom border and left border with padding */
  padding-left: 8px;
  padding-right: 15px;
  color: #ffffff;
  color: var(--white);
  border-radius: 14px 0 0 14px;
  background-color: #ddd;
}

.DialerSettingsButton_predictiveIcon_c52.DialerSettingsButton_isOn_824 {
    background-color: var(--orange);
  }

.DialerSettingsButton_predictiveIcon_c52 svg {
    width: 14px;
    height: 14px;
    vertical-align: -6px;
  }

.DialerSettingsButton_avatarOptions_878 {
  position: relative;
  height: 26px;
  margin-left: -12px;
  box-sizing: border-box;
  display: inline-block;
  z-index: 1;
  font-size: 9px;
  text-align: center;
  color: #ffffff;
  color: var(--white);
  border: 3px solid #ffffff;
  border: 3px solid var(--white);
  width: auto;
  padding-left: 6px;
  color: #2e2e2e;
  color: var(--colorTextDefault);
  font-size: 14px;
  font-weight: 600;
  font-weight: var(--fontWeightBold);
  border-radius: 13px;
  background-color: #ffffff;
  background-color: var(--white);
}

.DialerSettingsButton_avatarOptions_878::after {
    display: none;
  }

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

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

.DialerSettingsButton_avatarImgWrapper_366 {
  box-sizing: border-box;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: baseline;
  padding-right: 8px;
  padding-right: var(--spacing-8);
  border-radius: 13px;
  margin-left: -12px;
  border: 1px solid #ffffff;
  border: 1px solid var(--white);
  background-color: #ffffff;
  background-color: var(--white);
}

.DialerSettingsButton_avatarImgWrapper_366.DialerSettingsButton_hasRest_d3c {
    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: 600;
  font-weight: var(--fontWeightBold);
}

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

.DialerSettingsPopover__subHeader {
  margin-bottom: 5px;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  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: #2e2e2e;
  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__linkCopy span.inline-help-icon.glyphicons {
    cursor: default;
    color: #3781b8;
    color: var(--linkColor);
    -webkit-text-decoration: none;
    text-decoration: none;
  }

.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 #e2e2e2;
  border: 1px solid var(--formBorder);
  background-color: #ffffff;
  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: #eee;
  }

.CallerIdSelect__picker {
  position: relative;
  margin-right: 5px; /* offset picker from the right edge a bit */
  flex: 1;
}

.CallerIdSelect__pickerCurrent {
  color: #2e2e2e;
  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 {
  -webkit-appearance: none;
          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 #e2e2e2;
  border-left: 1px solid var(--formBorder);
  background: #f7f7f7;
}

.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: 6px 8px;
  border-radius: 5px;
  background-color: #ffffff;
  background-color: var(--white);
}

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

.UserStatusAvatar {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;

  /* width: ?px; Set this via inline style */
  /* height: ?px; Set this via inline style */
}

.UserStatusAvatar::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1);
  }

.UserStatusAvatar--empty {
  cursor: pointer;
  /* TODO [darkmode] need to confirm if borderDefault is too light */
  border: 1px solid #b8b8b8;
  background-color: #ffffff;
  background-color: var(--surfaceBackgroundDefault);
}

.UserStatusAvatar--more {
  background-color: #000;
}

.UserStatusAvatarImg {
  border-radius: 50%;
}

.UserStatusAvatarImgDot {
  position: absolute;
  z-index: 1;
  right: -5px;
  bottom: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: #ffffff;
  color: var(--colorTextNeutralWhite);
  border-radius: 50%;
  border: 2px solid #f8f8f8;
}

.UserStatusAvatarImgDotIcon {
  top: 0;
  color: #fff;
  display: flex;
  width: 10px;
  height: 10px;
}

.UserStatusAvatarImgDot--ready {
  background-color: #66b884;
}

.UserStatusAvatarImgDot--calling {
  background-color: #4daeda;
}

.UserStatusAvatarImgDot--paused {
  background-color: #909090;
}

.UserStatusAvatarText {
  color: #fff;
  font-size: 0.3125em;
}

.UserStatusAvatarEmpty {
  line-height: 0;
}

.UserStatusAvatarEmptyIcon {
  vertical-align: 80%;
  color: #b8b8b8;
  font-size: 0.3125em;
}

.UserStatusAvatarEmptyDot {
  position: absolute;
  right: -5px;
  bottom: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  font-size: 13px;
  color: #fff;
  border-radius: 50%;
  border: 2px solid #f8f8f8;
  background-color: #b2b2b2;
}

.DialerCallingMultipleLeadsScreenWrapper {
  --specialBlack: #474a54;
  --darkBlue: #275f8e;
  --noticeHeight: 25px;

  display: flex;
  margin: calc(24px * -1);
  margin: calc(var(--spacing-24) * -1); /* Eat through .app-content's padding */
  min-height: calc(100% + 20px);
  align-items: stretch;
}

.DialerCallingMultipleLeadsScreenWrapper__loader {
  flex: 1;
  text-align: center;
  font-size: 18px;
}

.DialerCallingMultipleLeadsScreenWrapper__loaderIcon {
  margin: 50px auto 10px;
  display: block;
}

.DialerCallingMultipleLeadsScreen {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 32px;
  width: 100%;
}

.DialerCallingMultipleLeadsScreen__content {
  z-index: 1;
  padding: 30px 50px;
  flex-grow: 1;
}

.DialerCallingMultipleLeadsScreen__calls {
  margin-bottom: 30px;
}

.DialerCallingMultipleLeadsScreen__calls.is-standalone {
    margin-bottom: 70px;
  }

.DialerCallingMultipleLeadsScreen__callsHeading {
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: 600;
  font-weight: var(--fontWeightBold);
  color: var(--specialBlack);
  text-align: center;
}

.DialerCallingMultipleLeadsScreen__callsNum {
  margin-bottom: 15px;
  text-align: center;
}

.DialerCallingMultipleLeadsScreen__callsNumDigit {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-left: 2px;
  padding: 8px 6px;
  color: #fff;
  font-size: 36px;
  font-weight: 600;
  font-weight: var(--fontWeightBold);
  line-height: 1;
  border-radius: 5px;
  background-color: var(--specialBlack);
}

.DialerCallingMultipleLeadsScreen__callsNumDigit:first-child {
    margin-left: 0;
  }

.DialerCallingMultipleLeadsScreen__callsNumDigit::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 0;
    right: 0;
    border-top: 1px solid #545760;
  }

.DialerCallingMultipleLeadsScreen__callsNumDigit.is-empty {
    background-color: #d4d4d4;
  }

.DialerCallingMultipleLeadsScreen__callsNumDigit.is-empty::after {
      border-top-color: #d4d4d4;
    }

.DialerCallingMultipleLeadsScreen__callsDesc {
  text-align: center;
  color: var(--specialBlack);
  font-size: 14px;
  line-height: 18px;
}

.DialerCallingMultipleLeadsScreen__joinButton {
  display: flex;
  justify-content: center;
  margin-bottom: 80px;
}

.DialerCallingMultipleLeadsScreen__settingsButton {
  display: flex;
  justify-content: center;
}

.DialerCallingMultipleLeadsScreen__avatars {
  display: flex;
  margin-bottom: 50px;
  justify-content: center;
  flex-wrap: wrap;
}

.DialerCallingMultipleLeadsScreen__avatarsText {
  display: flex;
  justify-content: center;
  font-size: 16px;
  color: var(--specialBlack);
  margin-bottom: 0;
}

.DialerCallingMultipleLeadsScreen__avatar {
  margin: 5px;
}

.DialerCallingMultipleLeadsScreen__footer {
  border-top: 1px solid #e5e5e5;
  padding: 0 30px 30px;
}

.DialerCallingMultipleLeadsScreen__leadsHeading {
  display: flex;
  margin-top: auto;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  color: #8b8e94;
}

.DialerCallingMultipleLeadsScreen__leadsHeadingItem {
  margin: 10px 12px;
  flex-grow: 0;
  flex-shrink: 0;
}

.DialerCallingMultipleLeadsScreen__leadsHeadingItem:first-child {
    margin-left: 0;
  }

.DialerCallingMultipleLeadsScreen__leadsHeadingItem:last-child {
    margin-right: 0;
  }

.DialerCallingMultipleLeadsScreen__leadsHeadingItem--numLeads {
  /* Prevents "jumping" of the copy next to this element when the number
     of Leads change e.g. from 9 to 10 (taking more space).
     @see https://github.com/closeio/closeio/issues/11086 */
  min-width: 130px;
}

.DialerCallingMultipleLeadsScreen__leadsHeadingItem--large {
  flex-grow: 1;
}

.DialerCallingMultipleLeadsScreen__leadsHeadingIcon {
  display: flex;
  margin-right: 5px;
  align-self: stretch;
  align-items: center;
}

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

.DialerCallingMultipleLeadsScreen__leadsHeadingIcon svg path {
      fill: #000;
    }

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

.DialerCallingMultipleLeadsScreen__leadBox {
  --leadsPerRow: 4;
  --gap: 30px;
  --widthCorrection: calc(
    var(--gap) * ((var(--leadsPerRow) - 1) / var(--leadsPerRow))
  );
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 70px;
  box-sizing: border-box;
  width: calc(25% - (
    30px * ((4 - 1) / 4)
  ));
  width: calc(25% - calc(
    30px * ((4 - 1) / 4)
  ));
  width: calc(25% - var(--widthCorrection));
  margin-left: 30px;
  margin-left: var(--gap);
  margin-top: 30px;
  margin-top: var(--gap);
  padding: 0 15px;
  border: 1px solid #e2e2e2;
  border: 1px solid var(--borderDefault);
  border-radius: 3px;
  background-color: #ffffff;
  background-color: var(--bgCardBase);
}

.DialerCallingMultipleLeadsScreen__leadBox:hover:not(.is-empty) {
    cursor: pointer;
    box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.1);
    -webkit-text-decoration: none;
    text-decoration: none;
    transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
  }

.DialerCallingMultipleLeadsScreen__leadBox:nth-child(4n + 1) {
    margin-left: 0;
  }

.DialerCallingMultipleLeadsScreen__leadBox:nth-child(-n + 4) {
    margin-top: 0;
  }

.DialerCallingMultipleLeadsScreen__leadBox.is-empty {
    border-style: dashed;
    cursor: default;
    background-color: transparent;
  }

.DialerCallingMultipleLeadsScreen__leadBoxContact,
.DialerCallingMultipleLeadsScreen__leadBoxLead {
  margin-bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.DialerCallingMultipleLeadsScreen__leadBoxContact {
  margin-bottom: 5px;
  color: var(--specialBlack);
  font-size: 16px;
  font-weight: 600;
  font-weight: var(--fontWeightBold);
}

.DialerCallingMultipleLeadsScreen__leadBoxContactIcon {
  margin-right: 5px;
}

.DialerCallingMultipleLeadsScreen__leadBoxLead {
  font-size: 14px;
  line-height: 1;
  color: #8b8e94;
}

.DialerCallingMultipleLeadsScreen__leadBoxLeadIcon {
  margin-right: 5px;
}

.DialerCallingMultipleLeadsScreen__leadsMore {
  margin: 20px 0;
  text-align: center;
  color: #8b8e94;
}

.DialerCallingMultipleLeadsScreen__tip {
  /* 1. Send to the very bottom, flexbox-style */
  margin-top: auto;
  padding: 20px;
  text-align: center;
  color: #8b8e94;
  font-size: 14px;
  border-top: 1px solid #bcbdbe;
  background-color: #f3f3f3;
}

.DialerExhaustedScreen_backButton_ddd {
  margin: 25px 0;
}

/* special size for this empty state */

.DialerExhaustedScreen_graphic_4e6 svg {
    width: 192px;
    height: 192px;
  }

.DialerExhaustedScreen_callAgain_a20 {
  padding-top: 32px;
  border-top: 1px solid #ddd;
  display: flex;
  flex-direction: column;
}

.DialerExhaustedScreen_caution_d38 {
  margin: 16px auto;
  display: inline-flex;
  line-height: 16px;
  align-items: center;
  margin-bottom: 60px;
}

.DialerExhaustedScreenWrapper {
  height: 100%;
}

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

.JoinableCallBar_bar_d9d {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  grid-gap: 8px;
  gap: 8px;
  background-color: #edf6e8;
  padding: 4px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.JoinableCallBar_avatar_449 {
  transform: scale(0.8);
}

.JoinableCallBar_info_008 {
  display: flex;
  align-items: center;
  color: #464a55;
  color: var(--colorMako);
}

.JoinableCallBar_bullet_71d {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: #464a55;
  background-color: var(--colorMako);
  margin: 0 8px;
}

.JoinableCallBar_actions_19d {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  grid-gap: 8px;
  gap: 8px;
}

.DialerCallButton_predictivePromoText_0e3 {
  margin-bottom: 10px;
}

/**
 * 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: #ffffff;
    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 #e2e2e2;
  border-top: 1px solid var(--borderDefault);
  background-color: #ffffff;
  background-color: var(--surfaceBackgroundDefault);
}

.CallBar::before {
    content: ' ';
    position: absolute;
    bottom: 0;
    display: block;
    width: 100%;
    height: 4px;
    background-color: #b2b2b2;
    background-color: var(--closeSilverChalice);
    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: #4cb24d;
    background-color: var(--fillSuccess);
  }

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

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

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

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

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

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

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

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

.components_Contact_contactIcon_5b9 {
  color: #464a55;
  color: var(--colorMako);
  margin-right: 8px;
}

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

.components_Contact_leadIcon_f09 {
  margin-right: 8px;
}

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

.components_Contact_leadName_fd6:not(a) {
    color: #919191;
    color: var(--gray-40);
  }

.components_Contact_leadStatus_ffe {
  margin-left: 8px;
}

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

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

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

.components_Contact_transferredFromIcon_dd0 {
  line-height: 1;
}

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

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

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

.CallBar__info--predictiveDialer .CallBar__infoText {
  color: #2e2e2e;
  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: #fccc0b;
  color: var(--warningPrimaryColor);
  width: 24px;
  height: 24px;
}

.CallBar__infoText {
  line-height: 16px;
  font-size: 12px;
  font-weight: 600;
  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(--fillSuccess);
  color: #4cb24d;
  color: var(--color);
  fill: #4cb24d;
  fill: var(--color);
}

.CallBar--active .CallBar__info--warning {
  cursor: pointer;
  --color: var(--fillDanger);
  width: 50px;
  margin-top: -4px;
  margin-left: 5px;
  padding-top: 2px;
}

.CallBar--active .CallBar__info--warning svg {
  margin-top: 10px;
  width: 30px;
}

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

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

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

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

.components_Menu_menu_520 {
  display: flex;
  align-items: center;
  margin-right: 8px;
}

.components_Menu_menuItem_c36 {
  border: 0;
  outline: none;
  background: #ffffff;
  background: var(--surfaceBackgroundDefault);
  cursor: pointer;
  padding: 10px 0;
  margin: 0 8px;
  width: 20px;
  height: 40px;
  fill: #444;
}

.components_Menu_menuItem_c36 svg {
    max-width: 20px;
    max-height: 20px;
  }

.components_Menu_menuItem_c36:hover {
    fill: #000;
  }

.components_Menu_menuItem_c36.components_Menu_active_01a {
    color: #3781b8;
    color: var(--colorLinkDefault);
  }

.components_Menu_menuItem_c36.components_Menu_active_01a:hover {
      color: #3274a6;
      color: var(--colorLinkHover);
    }

.DialpadPopover {
  width: 216px;
  padding: 6px;
}

.DialpadPopover__button {
  width: 70px;
  height: 50px;
  display: block;
  float: left;
  color: #2e2e2e;
  color: var(--colorTextNeutralBlack);
  background-image: linear-gradient(to bottom, #f6f6f6, #f0f0f0);
  font-size: 22px;
  font-weight: 600;
  font-weight: var(--fontWeightBold);
  text-align: center;
  line-height: 36px;
  margin: 1px;
  border-radius: 4px;
  cursor: pointer;
}

.DialpadPopover__button:hover {
    background-image: linear-gradient(to bottom, #f0f0f0, #e6e6e6);
    -webkit-text-decoration: none;
    text-decoration: none;
  }

.DialpadPopover__button:active,
.DialpadPopover__button--active {
  background-image: linear-gradient(to bottom, #111, #555);
  color: #ffffff;
  color: var(--colorTextNeutralWhite);
  -webkit-text-decoration: none;
  text-decoration: none;
}

.DialpadPopover__buttonAltText {
  color: #999;
  font-size: 10px;
  line-height: 0px;
  display: block;
}

.TransferCallPopover__inputWrap {
  position: relative;
}

.TransferCallPopover__search[type='search'] {
  border: 1px solid #e2e2e2;
  border: 1px solid var(--formBorder);
  padding-right: 26px;
  margin: 0;
  width: calc(100% - 34px);
}

.TransferCallPopover__searchIcon {
  position: absolute;
  top: 8px;
  right: 8px;
}

.TransferCallPopover__targetAvatar {
  width: 24px;
  margin-right: 8px;
  text-align: center;
}

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

.TransferCallPopover__targetUserContainer {
  margin-right: 8px;
}

.TransferCallPopover__target {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 8px;
}

.TransferCallPopover__target--phone,
.TransferCallPopover__target--user {
  cursor: pointer;
}

.TransferCallPopover__target--phone:hover, .TransferCallPopover__target--user:hover {
    background: #f2f2f2;
  }

.TransferCallPopover__targetLabelContainer {
  justify-content: center;
  display: flex;
  flex-direction: column;
  height: 40px;
  overflow: hidden;
}

.TransferCallPopover__targetLabelLine {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

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

.TransferCallPopover__target .glyphicons-earphone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  margin-right: 8px;
  vertical-align: middle;
}

.TransferCallPopover__target .glyphicons-earphone > img {
    border-radius: 3px;
  }

.TransferCallPopover__target--user .TransferCallPopover__targetLabelLine {
    margin-right: 24px;
  }

.TransferCallPopover__target--user::after {
    content: ' ';
    display: block;
    position: absolute;
    top: 14px;
    right: 16px;
    width: 8px;
    height: 8px;
    border: 1px solid #e2e2e2;
    border: 1px solid var(--borderDefault);
    border-radius: 50%;
    background: #eee;
  }

.TransferCallPopover__target--online::after {
  border: 1px solid #4cb24d;
  border: 1px solid var(--borderSuccess);
  background: #dffadc;
  background: var(--bgSuccessMuted);
}

.TransferCallPopover__target--busy::after {
  border: 1px solid #ffbd2e;
  border: 1px solid var(--statusTypeActiveColor);
  background: #fccc0b;
  background: var(--warningPrimaryColor);
}

.TransferCallPopover__separator {
  border-top: 1px solid #e5e5e5;
  margin: 4px 0;
}

.TransferCallPopover .hidden {
  display: none;
}

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

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

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

.ObserverCallBar_IntroducePromo_icon_452 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 8px;
  color: #fff;
  margin-right: 10px;
}

.ObserverCallBar_IntroducePromo_icon_452.ObserverCallBar_IntroducePromo_listen_9cf {
    background-color: #b2b2b2;
    background-color: var(--closeSilverChalice);
  }

.ObserverCallBar_IntroducePromo_icon_452.ObserverCallBar_IntroducePromo_whisper_497 {
    background-color: #3781b8;
    background-color: var(--linkColor);
  }

.ObserverCallBar_IntroducePromo_icon_452.ObserverCallBar_IntroducePromo_barge_e47 {
    background-color: #4ec375;
    background-color: var(--successPrimaryColor);
  }

.ObserverCallBar_IntroducePromo_icon_452 svg {
    width: 10px;
  }

.ObserverCallBar_IntroducePromo_text_24c {
  margin-left: 4px;
  color: #767676;
  color: var(--gray-50);
}

.ObserverCallBar_InviteUser_item_99f {
  display: grid;
  grid-template-columns: 16px 1fr auto 14px;
  grid-gap: 8px;
  gap: 8px;
  align-items: center;
}

.ObserverCallBar_InviteUser_icon_1ea {
  display: flex;
  align-items: center;
  width: 14px;
  color: #4cb24d;
  color: var(--fillSuccess);
}

.ObserverCallBar_InviteUser_icon_1ea svg {
    width: 12px;
  }

.ObserverCallBar_InviteUser_online_1ee {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgb(62, 156, 94);
  background: #4ec375;
  background: var(--successPrimaryColor);
}

@supports (color: color-mix(in lch, red, blue)) {
.ObserverCallBar_InviteUser_online_1ee {
  border: 1px solid color-mix(in srgb, #000 20%, var(--successPrimaryColor));
}
}

.ObserverCallBar_InviteUser_invited_051 {
  font-size: smaller;
  font-style: italic;
  color: #5e5e5e;
  color: var(--colorTextMedium);
  margin: 0 12px;
}

.components_NextCallButton_nextCallButton_d68 {
  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: #2e99de;
  background-color: var(--fillInformational);
}.components_NextCallButton_nextCallButton_d68:hover {
    background-color: rgb(41, 138, 200);
  }@supports (color: color-mix(in lch, red, blue)) {
.components_NextCallButton_nextCallButton_d68:hover {
    background-color: color-mix(in srgb, #000 10%, var(--fillInformational));
  }
}.components_NextCallButton_nextCallButton_d68::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: #3781b8;
    background-color: var(--linkColor);
  }.components_NextCallButton_nextCallButton_d68.components_NextCallButton_isProgressing_633::after {
      width: 100%;
      transition: width 5s linear;
    }.components_NextCallButton_nextCallButton_d68.components_NextCallButton_isDisabled_302 {
    pointer-events: none;
  }.components_NextCallButton_nextCallButton_d68.components_NextCallButton_isDisabled_302,
    .components_NextCallButton_nextCallButton_d68.components_NextCallButton_isDisabled_302:hover {
      cursor: default;
      background-color: #cfeaf6;
    }

.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: 600;
  font-weight: var(--fontWeightBold);
}

.RequestPausePopover__cta {
  margin-bottom: 8px;
}

.RequestPausePopover__copy {
  margin-bottom: 12px;
}

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

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

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

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

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

.CallBar_StatusText_failed_668 {
  color: #dd0f21;
  color: var(--failurePrimaryColor);
}

.CallBar_StatusText_transferredTo_daa {
  display: flex;
  align-items: center;
  margin-left: 5px;
}

.CallBar_StatusText_transferredName_9e9 {
  margin: 0 6px 0 4px;
}

.CallBar_StatusText_subText_775 {
  color: #2e2e2e;
  color: var(--colorTextDefault);
}

.FailedCallsToPredictiveDialerUpsell {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  height: 32px;
  padding-left: 74px;
  align-items: center;
  line-height: 32px;
  background-color: #eef7fb;
  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: #dd0f21;
    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;
}

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

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

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

.CallBar__warningsList {
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 16px 22px;
  max-width: 232px;
  text-align: center;
}

.CallBar__warningsItem svg {
  margin: 0 !important;
}

.CallBar__warningsItem svg {
  width: 30px;
  height: 30px;
}

.CallBar__warningsSeparator {
  width: 80px;
  border-top: 1px solid #b2b2b2;
  border-top: 1px solid var(--closeSilverChalice);
  margin: 20px 0 10px;
}

.CallBar__warningsTitle {
  font-size: 16px;
  font-weight: 600;
  font-weight: var(--fontWeightBold);
  margin: 0;
  line-height: 2;
}

.CallBar__warningsText {
  line-height: 1.25;
}

.CallBar__warningsLabels {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 10px 0;
  padding: 0 2px;

  /* Badges */
}

.CallBar__warningsLabels > span {
    margin: 0 2px 2px 0;
  }

/* TODO: See if this is needed */
.CallBar--closed.is-dialer .CallBar__contact {
  color: #2e2e2e;
  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 #e2e2e2;
  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;
  grid-gap: 12px;
  gap: 12px;
  padding: 0 16px;
}

.CallBar__callCoaching::after {
    content: '';
    display: block;
    height: 32px;
    padding-right: 8px;
    border-right: 1px solid #ddd;
  }

/* status text / actions */
.CallBar__actions {
  color: #2e2e2e;
  color: var(--colorTextDefault);
  line-height: 32px;
  align-self: center;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border-left: 1px solid #ddd;
  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: #303030;
    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: #dd0f21;
  background-color: var(--failurePrimaryColor);
}

.CallBar__actionButton--hangUp:hover {
    background-color: rgb(199, 14, 30);
  }

@supports (color: color-mix(in lch, red, blue)) {
.CallBar__actionButton--hangUp:hover {
    background-color: color-mix(in srgb, #000 10%, var(--failurePrimaryColor));
  }
}

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

.CallBar__actionButton--hangUp:disabled {
    background-color: #b2b2b2;
    background-color: var(--closeSilverChalice);
  }

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

.CallBar__actionButton--hangUp.is-disabled {
    background-color: rgba(221, 15, 33, 0.5);
  }

@supports (color: color-mix(in lch, red, blue)) {
.CallBar__actionButton--hangUp.is-disabled {
    background-color: color-mix(
      in srgb,
      var(--failurePrimaryColor) 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: #4cb24d;
  background-color: var(--fillSuccess);
}

.CallBar__actionButton--answer:hover {
    background-color: rgb(68, 160, 69);
  }

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

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

.CallBar__actionButton--callBack:hover {
    background-color: #f8f8f8;
  }

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

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

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

.CallBar__closeButton svg {
    width: 16px;
  }

.CallBar__closeButton:hover {
    color: #2e2e2e;
    color: var(--colorTextDefault);
  }

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

.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: #2e2e2e;
  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_DialerUpsellText_container_533 {
  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: 600;
  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;
}

.CallBlockedModal_InboundCallBlockedModal_callerViewsSection_f8d {
  display: flex;
  margin-top: 16px;
  gap: 16px;
}

.CallBlockedModal_InboundCallBlockedModal_callerView_830 {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  max-width: 40%;
}

.CallBlockedModal_InboundCallBlockedModal_head_c72 {
  display: flex;
  gap: 8px;
}

.CallBlockedModal_InboundCallBlockedModal_icon_7ba {
  display: inline-block;
  color: #464a55;
  width: 16px;
  height: 16px;
}

.CallBlockedModal_InboundCallBlockedModal_name_318 {
  color: #262e39;
  font-size: 14px;
  line-height: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.CallBlockedModal_InboundCallBlockedModal_phone_67a {
  color: #5e5e5e;
  color: var(--colorTextMedium);
  font-size: 12px;
  line-height: 16px;
}

.CallBlockedModal_InboundCallBlockedModal_arrowCircle_8c1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: #ffffff;
  background-color: var(--surfaceBackgroundDefault);
  border-radius: 50%;
}

.CallBlockedModal_InboundCallBlockedModal_arrowIcon_3e5 {
  color: #d0021b;
  width: 14px;
  height: 14px;
  line-height: 1;
}

.CallBlockedModal_InboundCallBlockedModal_missedCall_57c {
  padding: 16px;
  padding: var(--modalBodyPadding);
}

.DoNotShowAgainTodayCheckbox_DoNotShowAgainTodayCheckbox_3bc {
  margin-bottom: 0;
}

.DoNotShowAgainTodayCheckbox_DoNotShowAgainTodayCheckbox__inputControl_448[type='checkbox'] {
  margin: 0 8px 3px 0;
}

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

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

.ObserverCallBar_ListenWhisperBargeGroupButton_group_e33.ObserverCallBar_ListenWhisperBargeGroupButton_loading_ecf {
    opacity: 0.8;
  }

label.ObserverCallBar_ListenWhisperBargeGroupButton_button_6ba {
  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_6ba:hover,
  label.ObserverCallBar_ListenWhisperBargeGroupButton_button_6ba:active,
  label.ObserverCallBar_ListenWhisperBargeGroupButton_button_6ba.isSelected,
  label.ObserverCallBar_ListenWhisperBargeGroupButton_button_6ba.ObserverCallBar_ListenWhisperBargeGroupButton_tempSelected_02f {
    border-color: currentColor;
    background-color: #ffffff;
    background-color: var(--surfaceBackgroundDefault);
  }

label.ObserverCallBar_ListenWhisperBargeGroupButton_button_6ba.ObserverCallBar_ListenWhisperBargeGroupButton_listen_c67:hover, label.ObserverCallBar_ListenWhisperBargeGroupButton_button_6ba.ObserverCallBar_ListenWhisperBargeGroupButton_listen_c67:active, label.ObserverCallBar_ListenWhisperBargeGroupButton_button_6ba.ObserverCallBar_ListenWhisperBargeGroupButton_listen_c67.isSelected, label.ObserverCallBar_ListenWhisperBargeGroupButton_button_6ba.ObserverCallBar_ListenWhisperBargeGroupButton_tempSelected_02f.ObserverCallBar_ListenWhisperBargeGroupButton_listen_c67 {
      color: #767676;
      color: var(--gray-50);
      border-color: #b2b2b2;
      border-color: var(--closeSilverChalice);
    }

label.ObserverCallBar_ListenWhisperBargeGroupButton_button_6ba.ObserverCallBar_ListenWhisperBargeGroupButton_whisper_b17:hover, label.ObserverCallBar_ListenWhisperBargeGroupButton_button_6ba.ObserverCallBar_ListenWhisperBargeGroupButton_whisper_b17:active, label.ObserverCallBar_ListenWhisperBargeGroupButton_button_6ba.ObserverCallBar_ListenWhisperBargeGroupButton_whisper_b17.isSelected, label.ObserverCallBar_ListenWhisperBargeGroupButton_button_6ba.ObserverCallBar_ListenWhisperBargeGroupButton_tempSelected_02f.ObserverCallBar_ListenWhisperBargeGroupButton_whisper_b17 {
      color: #3781b8;
      color: var(--linkColor);
    }

label.ObserverCallBar_ListenWhisperBargeGroupButton_button_6ba.ObserverCallBar_ListenWhisperBargeGroupButton_barge_23a:hover, label.ObserverCallBar_ListenWhisperBargeGroupButton_button_6ba.ObserverCallBar_ListenWhisperBargeGroupButton_barge_23a:active, label.ObserverCallBar_ListenWhisperBargeGroupButton_button_6ba.ObserverCallBar_ListenWhisperBargeGroupButton_barge_23a.isSelected, label.ObserverCallBar_ListenWhisperBargeGroupButton_button_6ba.ObserverCallBar_ListenWhisperBargeGroupButton_tempSelected_02f.ObserverCallBar_ListenWhisperBargeGroupButton_barge_23a {
      color: #4ec375;
      color: var(--successPrimaryColor);
    }

label.ObserverCallBar_ListenWhisperBargeGroupButton_button_6ba.ObserverCallBar_ListenWhisperBargeGroupButton_tempSelected_02f.ObserverCallBar_ListenWhisperBargeGroupButton_listen_c67 {
      background-color: rgba(118, 118, 118, 0.1);
    }

@supports (color: color-mix(in lch, red, blue)) {
label.ObserverCallBar_ListenWhisperBargeGroupButton_button_6ba.ObserverCallBar_ListenWhisperBargeGroupButton_tempSelected_02f.ObserverCallBar_ListenWhisperBargeGroupButton_listen_c67 {
      background-color: color-mix(in srgb, var(--gray-50) 10%, transparent);
    }
}

label.ObserverCallBar_ListenWhisperBargeGroupButton_button_6ba.ObserverCallBar_ListenWhisperBargeGroupButton_tempSelected_02f.ObserverCallBar_ListenWhisperBargeGroupButton_whisper_b17 {
      background-color: rgba(55, 129, 184, 0.1);
    }

@supports (color: color-mix(in lch, red, blue)) {
label.ObserverCallBar_ListenWhisperBargeGroupButton_button_6ba.ObserverCallBar_ListenWhisperBargeGroupButton_tempSelected_02f.ObserverCallBar_ListenWhisperBargeGroupButton_whisper_b17 {
      background-color: color-mix(in srgb, var(--linkColor) 10%, transparent);
    }
}

label.ObserverCallBar_ListenWhisperBargeGroupButton_button_6ba.ObserverCallBar_ListenWhisperBargeGroupButton_tempSelected_02f.ObserverCallBar_ListenWhisperBargeGroupButton_barge_23a {
      background-color: rgba(78, 195, 117, 0.1);
    }

@supports (color: color-mix(in lch, red, blue)) {
label.ObserverCallBar_ListenWhisperBargeGroupButton_button_6ba.ObserverCallBar_ListenWhisperBargeGroupButton_tempSelected_02f.ObserverCallBar_ListenWhisperBargeGroupButton_barge_23a {
      background-color: color-mix(
        in srgb,
        var(--successPrimaryColor) 10%,
        transparent
      );
    }
}

label.ObserverCallBar_ListenWhisperBargeGroupButton_button_6ba.isSelected .Btn__icon,
  label.ObserverCallBar_ListenWhisperBargeGroupButton_button_6ba .Btn__icon {
    width: 14px !important;
    height: 14px !important;
  }

label.ObserverCallBar_ListenWhisperBargeGroupButton_button_6ba.isSelected .Btn__icon,
  label.ObserverCallBar_ListenWhisperBargeGroupButton_button_6ba .Btn__icon {
    color: inherit;
    margin: 5px 8px;
  }


/*# sourceMappingURL=https://srcmaps.close.com/srcmaps/main~f502f95f.1c90f9d678d21cd863d8.js.map*/