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

.Calendar_sharedComponents_navNext_2f7,
.Calendar_sharedComponents_navPrev_0ba {
  position: absolute;
  padding: 2px 5px;
}

.Calendar_sharedComponents_navNext_2f7 svg, .Calendar_sharedComponents_navPrev_0ba svg {
    display: block;
    width: 16px;
  }

.Calendar_sharedComponents_navNext_2f7 {
  right: 14px;
}

.Calendar_sharedComponents_navPrev_0ba {
  left: 12px;
}

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

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

.subComponents_SnoozeMenuStartLabel_startLabel_dad {
  box-sizing: border-box;
  padding: var(--spacing-8) var(--spacing-16);
  display: flex;
  justify-content: space-between;
  background-color: var(--surfaceBackgroundMedium);
  margin: calc(var(--spacing-4) * -1) 0;
  -webkit-user-select: none;
          user-select: none;
}

.SnoozeMenu_calendarCard_9ae {
  margin-left: calc(var(--spacing-4) * -1);
  min-height: 275px;
}

.SnoozeMenu_inputsContainer_c1e {
  display: flex;
  padding: 0 var(--spacing-16);
}
.SnoozeMenu_input_245 {
  width: 100%;
  min-height: var(--inputHeightSmall);
  border: 1px solid var(--borderDefault);
  box-shadow: none;
  padding: 0 var(--spacing-8);
  border-radius: var(--borderRadiusMedium);
}
.SnoozeMenu_input_245:focus {
    border-color: var(--borderFocused);
  }
.SnoozeMenu_input_245.SnoozeMenu_leftInput_ae7 {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
.SnoozeMenu_input_245.SnoozeMenu_rightInput_41a {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 1px solid transparent;
  }
.SnoozeMenu_input_245.SnoozeMenu_rightInput_41a:focus {
      border-left: 1px solid var(--borderFocused);
    }

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

.TimeInput_menu_241 {
  min-width: 130px;
  margin: 0;
  /* Select__item is 28px high, show max of 9 */
  max-height: calc(28px * 9);
}

.TimeInput_menu_241:focus {
    outline: none;
  }

.TimeInput_item_af0 {
  padding-right: 12px;
}

.TimeInput_Menu_menu_9f9 {
  overflow-y: auto;
  position: relative;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  z-index: 2;
}

.TimeInput_Item_item_f36 {
  position: relative;
  padding: 4px 24px 4px 40px; /* 24px total height */
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: pointer;
  box-sizing: border-box;
}

.TimeInput_Item_item_f36 {
  font-size: 14px;
  line-height: 20px;
}

.TimeInput_Item_defaultSelected_0ff:not(.TimeInput_Item_disabled_33f) {
  background-color: var(--bgMenuItemHover);
}

.TimeInput_Item_defaultSelected_0ff.TimeInput_Item_disabled_33f {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.1);
}

.TimeInput_Item_disabled_33f {
  cursor: not-allowed;
  opacity: var(--disabledOpacity);
  -webkit-user-select: none;
          user-select: none;
}

.TimeInput_Item_selected_740 svg {
  position: absolute;
  top: 6px;
  left: 12px;
  width: 16px;
  color: var(--colorLinkDefault);
}

.TimeInput_Item_divider_ed1 {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin: 4px 0;

  /* show only one divider if multiple are rendered next to each other */
  /* including the divider inside a group item */
}

.TimeInput_Item_divider_ed1 + .TimeInput_Item_divider_ed1 {
    display: none;
  }

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

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

@media screen and (min-width: 768px) {
  .subComponents_SnoozeMenuButton_caretContainer_a7f {
    display: inline-flex;
    position: relative;
    left: 4px;
    /* To fit vertically in container with height < 16px
       without shrinking the SVG, which needs height 16px */
    height: 12px;
    align-items: center;
  }

  .subComponents_SnoozeMenuButton_caret_e27 {
    display: inline-flex;
    height: 16px;
  }
}

.subComponents_SnoozeMenuIconButton_root_3c1 {
  --buttonSize: var(--inputHeightSmall);

  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: var(--buttonSize);
  height: var(--buttonSize);
  border-radius: 50%;
  color: var(--colorIconDefault);
  vertical-align: middle;
  outline: none;
}.subComponents_SnoozeMenuIconButton_root_3c1:hover:not(.subComponents_SnoozeMenuIconButton_disabled_eab) {
    background: var(--colorFillTransparent05);
  }.subComponents_SnoozeMenuIconButton_root_3c1.subComponents_SnoozeMenuIconButton_light_594:not(:hover) {
    color: var(--colorIconLight);
  }.subComponents_SnoozeMenuIconButton_root_3c1.subComponents_SnoozeMenuIconButton_disabled_eab {
    pointer-events: none;
    opacity: 0.5;
  }.subComponents_SnoozeMenuIconButton_root_3c1.subComponents_SnoozeMenuIconButton_small_226 {
    --buttonSize: var(--spacing-24);
  }.subComponents_SnoozeMenuIconButton_root_3c1:focus:not(:hover) {
    box-shadow: 0 0 0 3px
      color-mix(in srgb, transparent 50%, var(--formBorderFocused));
  }

.ActivityIcon_root_59a {
  box-sizing: border-box;
  position: relative;
  width: var(--spacing-24);
  height: var(--spacing-24);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fillLight);
  border-radius: 50%;
  background: var(--surfaceBackgroundDark);
}.ActivityIcon_root_59a.ActivityIcon_call_87d {
    background: var(--colorBgActivityCall);
    color: var(--colorIconActivityCall);
  }.ActivityIcon_root_59a.ActivityIcon_missedCall_28b {
    background: var(--colorBgActivityDefault);
    color: var(--colorIconActivityMissedCall);
  }.ActivityIcon_root_59a.ActivityIcon_email_72e,
  .ActivityIcon_root_59a.ActivityIcon_emailThread_30e {
    background: var(--colorBgActivityEmail);
    color: var(--colorIconActivityEmail);
  }.ActivityIcon_root_59a.ActivityIcon_meeting_c74 {
    background: var(--colorBgActivityMeeting);
    color: var(--colorIconActivityMeeting);
  }.ActivityIcon_root_59a.ActivityIcon_opportunityStatusChange_c20,
  .ActivityIcon_root_59a.ActivityIcon_opportunity_226 {
    background: var(--colorBgActivityOpportunity);
    color: var(--colorIconActivityOpportunity);
  }.ActivityIcon_root_59a.ActivityIcon_taskCompleted_42d {
    background: var(--colorBgActivityTask);
    color: var(--colorIconActivityTask);
  }.ActivityIcon_root_59a.ActivityIcon_customActivity_ce8 {
    background: var(--colorBgActivityCustomActivity);
    color: var(--colorIconActivityCustomActivity);
  }.ActivityIcon_root_59a.ActivityIcon_note_8d4 {
    background: var(--colorBgActivityNote);
    color: var(--colorIconActivityNote);
  }.ActivityIcon_root_59a.ActivityIcon_leadMerge_d84,
  .ActivityIcon_root_59a.ActivityIcon_leadStatusChange_c17,
  .ActivityIcon_root_59a.ActivityIcon_created_53c,
  .ActivityIcon_root_59a.ActivityIcon_importUpdate_07e {
    background: var(--colorBgActivityDefault);
    color: var(--colorIconActivityDefault);
    border: 1px solid var(--borderDefault);
  }.ActivityIcon_root_59a.ActivityIcon_sms_bf3 {
    background: var(--colorBgActivitySMS);
    color: var(--colorIconActivitySMS);
  }.ActivityIcon_root_59a.ActivityIcon_whatsAppMessage_4b3 {
    background: var(--colorBgActivityWhatsApp);
  }

.Message_MessageExpandable_clickHeader_37b {
  cursor: pointer;
  display: flex;
  align-items: center;

  /* When closed, we eat through the parent padding on all axes to make the
     whole message clickable */
  padding: var(--spacing-8) var(--spacing-12);
  margin: calc(-1 * var(--spacing-8)) calc(-1 * var(--spacing-12));

  /* When open, we "cancel" the header's bottom padding */
}

.Message_MessageExpandable_isExpanded_764 .Message_MessageExpandable_clickHeader_37b {
    padding-bottom: 0;
    margin-bottom: 0;
  }

.Message_MessageExpandable_buttonWrap_52f {
  /* maintain 30x30 button while eating through parent padding */
  margin: calc(-1 * var(--spacing-4));

  transition: transform 100ms var(--standardCurve);
}

.Message_MessageExpandable_isExpanded_764 .Message_MessageExpandable_buttonWrap_52f {
    transform: rotate(180deg);
  }

.FileInput_wrapper_4a1 {
  display: inline-block;
  position: relative;
}.FileInput_wrapper_4a1 input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
  }

.DateAndTimePopover_inputsContainer_681 {
  width: 248px;
  display: flex;
  padding: 0 var(--spacing-16);
  box-sizing: border-box;
}

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

.DateAndTimePopover_inputsContainer_681 > div {
    flex: 1;
  }

.DateAndTimePopover_inputsContainer_681 .DateAndTimePopover_input_b47 {
    width: 100%;
    min-height: var(--inputHeightSmall);
    border: 1px solid var(--borderDefault);
    box-shadow: none;
    padding: 0 var(--spacing-8);
    border-radius: 8px;
  }

.DateAndTimePopover_inputsContainer_681 .DateAndTimePopover_input_b47:focus {
      border-color: var(--borderFocused);
    }

.DateAndTimePopover_inputsContainer_681 .DateAndTimePopover_input_b47.DateAndTimePopover_leftInput_34a {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

.DateAndTimePopover_inputsContainer_681 .DateAndTimePopover_input_b47.DateAndTimePopover_rightInput_157 {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 1px solid transparent;
  }

.DateAndTimePopover_inputsContainer_681 .DateAndTimePopover_input_b47.DateAndTimePopover_rightInput_157:focus {
      border-left: 1px solid var(--borderFocused);
    }

.DateAndTimePopover_buttonsContainer_fd5 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-top: 1px solid var(--borderDefault);
  padding: var(--spacing-16);
  padding-bottom: 0;
  gap: var(--spacing-12);
}

.CommentForm_container_4fa {
  border: 1px solid var(--borderDefault);
  border-radius: var(--baseInputBorderRadius);
}

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

.CommentForm_container_4fa.CommentForm_error_c41 {
    border-color: var(--borderDanger);
  }

.CommentForm_form_bcb {
  margin: 0;
}

.ColorPicker_ColorMenu_menu_ad8 {
  display: flex;
}

.ColorPicker_ColorMenu_colors_021,
.ColorPicker_ColorMenu_extra_3fb {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: auto;
  gap: var(--spacing-4);
  margin: var(--spacing-12) 0;
  padding: 0 var(--spacing-12);
}

.ColorPicker_ColorMenu_colors_021 > *, .ColorPicker_ColorMenu_extra_3fb > * {
    transform: scale(1.25);
  }

.ColorPicker_ColorMenu_colors_021 {
  grid-template-columns: repeat(5, auto);
}

.ColorPicker_ColorMenu_extra_3fb {
  border-left: 1px solid var(--borderDefault);
  grid-template-columns: auto;
}

.ColorPicker_ColorMenu_bgRed_a99 {
  color: var(--colorBgRichTextHighlightRed);
}

.ColorPicker_ColorMenu_bgYellow_bb3 {
  color: var(--colorBgRichTextHighlightYellow);
}

.ColorPicker_ColorMenu_bgGreen_6df {
  color: var(--colorBgRichTextHighlightGreen);
}

.ColorPicker_ColorMenu_bgBlue_58d {
  color: var(--colorBgRichTextHighlightBlue);
}

.ColorPicker_ColorMenu_bgPurple_17b {
  color: var(--colorBgRichTextHighlightPurple);
}

/* visually matches small IconButton */
.ColorPicker_ColorButton_button_061 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
}
.ColorPicker_ColorButton_button_061 span {
    width: 14px;
    height: 14px;
  }
.ColorPicker_ColorButton_button_061.ColorPicker_ColorButton_isActive_305 {
    background-color: var(--colorFillTransparent02);
  }
.ColorPicker_ColorButton_button_061.ColorPicker_ColorButton_isHovered_8c2 {
    background-color: var(--colorFillTransparent05);
  }
.ColorPicker_ColorButton_button_061.ColorPicker_ColorButton_isHovered_8c2.ColorPicker_ColorButton_isActive_305 {
      background-color: var(--colorFillTransparent10);
    }

/**
  * These colors must match the keys in HighlightColorKey!
  * They should also be styled consistently with editor content
  */
.ColorPicker_ColorButton_bgRed_781 {
  color: var(--colorBgRichTextHighlightRed);
}

.ColorPicker_ColorButton_bgYellow_e32 {
  color: var(--colorBgRichTextHighlightYellow);
}

.ColorPicker_ColorButton_bgGreen_89b {
  color: var(--colorBgRichTextHighlightGreen);
}

.ColorPicker_ColorButton_bgBlue_e1a {
  color: var(--colorBgRichTextHighlightBlue);
}

.ColorPicker_ColorButton_bgPurple_ab1 {
  color: var(--colorBgRichTextHighlightPurple);
}

.ColorPicker_CustomColorPicker_wrapper_875 {
  position: relative;
}

.ColorPicker_CustomColorPicker_input_de7 {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: -1;
}

.CommentListItem_connector_399 {
  border: 0 solid var(--borderDefault);
  border-left-width: 1px;
  margin: 0 var(--spacing-12);
}

.CommentListItem_content_fae {
  /** Override this variable so changes to the background color via .focused
   * show through the rich text content.
   */
  --formBackground: transparent;

  transition:
    background-color 1.5s ease,
    box-shadow 1.5s ease;
  border-radius: var(--baseBorderRadius);
  margin-bottom: var(--spacing-4);
}

.CommentListItem_focused_338 {
  /* Do not show a transition to the focused color. */
  transition: none;
  background-color: var(--bgActiveMuted);
  /* Do not fill in focused shadow at the bottom */
  box-shadow: 0 -4px 0 4px var(--bgActiveMuted);
}

.CommentPopover_badge_09f {
  position: absolute;
  top: 10px;
  left: 14px;
  cursor: pointer;
}.CommentPopover_badge_09f.CommentPopover_smallButton_35b {
    top: 9px;
    left: 10px;
  }

.CommentPopover_BasePopover_inputWrapper_49f {
  padding: var(--spacing-4) var(--spacing-16) var(--spacing-8) var(--spacing-16);
  max-height: 350px;
  overflow-y: auto;
  min-height: 32px;

  --richTextEditorMaxHeight: 200px;
}

.hooks_HideableCommentPopover_overrideHoverActions_3cf {
  visibility: visible;
}


  .Checkbox_CheckboxCard_checkboxCard_085 .Checkbox {
    padding: var(--spacing-12) var(--spacing-16);
    border: 1px solid var(--borderDefault);
    border-radius: var(--baseInputBorderRadius);
    box-sizing: border-box;
    background: var(--bgLight);
  }.Checkbox_CheckboxCard_checkboxCard_085.Checkbox_CheckboxCard_small_727 .Checkbox {
      padding: var(--spacing-8);
    }.Checkbox_CheckboxCard_checkboxCard_085.Checkbox_CheckboxCard_small_727 .Checkbox__label {
      padding-left: 22px; /* 8px from the 16px checkbox */
    }.Checkbox_CheckboxCard_checkboxCard_085 .Checkbox:has(input[type='checkbox']:checked:not(:disabled)) {
    background: var(--bgActiveMuted);
    border-color: var(--borderActive);
  }.Checkbox_CheckboxCard_checkboxCard_085 .Checkbox:has(input[type='checkbox']:disabled) {
    cursor: not-allowed;
  }.Checkbox_CheckboxCard_checkboxCard_085 .Checkbox:hover:has(input[type='checkbox']:not(:checked)) {
    border-color: var(--borderHover);
    background: var(--bgLightMuted);
  }.Checkbox_CheckboxCard_checkboxCard_085 .Checkbox:has(input[type='checkbox']:focus-visible) {
    box-shadow: 0px 0px 0px 2px var(--borderFocused);
  }.Checkbox_CheckboxCard_checkboxCard_085 .Checkbox__label {
    display: block;
    line-height: 20px;
    width: 100%;
    padding-left: 30px; /* 16px from the 16px checkbox */
  }.Checkbox_CheckboxCard_checkboxCard_085 .Checkbox__label::before {
    margin-left: 0;
    left: 0;
    position: absolute;
    top: 3px;
  }.Checkbox_CheckboxCard_checkboxCard_085 .Checkbox__label::after {
    position: absolute;
    left: 16px;
    top: 16px;
    transform: rotate3d(0, 0, 1, 45deg) translateX(-16px);
  }

.SearchCombobox_listItem_64f {
  list-style: none;
  margin-bottom: calc(-1 * var(--combobox-fixed-footer-height, 0));
  padding-bottom: var(--combobox-fixed-footer-height, 0);
}

.SearchCombobox_listItem_64f.SearchCombobox_footer_b4d {
    margin-bottom: 0;
    padding-bottom: 0;
  }

.SearchCombobox_listItem_64f h3 {
    margin: 0;
  }

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

.SearchCombobox_menuList_f60 h3 {
    margin: 0;
  }

.SearchCombobox_SearchComboboxItem_container_c19 {
  background-color: var(--surfaceBackgroundLight);
}

.SearchCombobox_SearchComboboxItem_isHighlighted_143 {
  background-color: var(--bgActiveMuted);
}

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

.SearchCombobox_SearchComboboxItem_itemLabel_f23 {
  overflow: hidden;
}

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

.SearchCombobox_SearchComboboxItem_hidden_cee {
  visibility: hidden;
}

.SearchCombobox_SearchComboboxSection_listItem_0d3,
.SearchCombobox_SearchComboboxSection_menuList_f61 {
  list-style: none;
  padding: 0;
  margin: 0;
}

.SearchCombobox_SearchComboboxSection_listItem_0d3 h3, .SearchCombobox_SearchComboboxSection_menuList_f61 h3 {
    margin: 0;
  }

.SearchCombobox_SearchComboboxSection_footer_a0a {
  bottom: 0;
  position: sticky;
}

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

.ContactCard_header_c57 {
  line-height: var(--spacing-16);
}

.EmailTopBar_AddressLine_addressLine_a9e {
  line-height: var(--spacing-24);
}

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

.EmailTopBar_AddressLine_addresses_f6a {
  margin-right: var(--spacing-8);
}

.EmailTopBar_AddressLine_addressName_c62 {
  white-space: nowrap;
}

.EmailTopBar_AddressLine_addressButton_155 {
  cursor: pointer;
  color: var(--colorTextDefault);
}

.EmailTopBar_AddressLine_addressButton_155.EmailTopBar_AddressLine_highlightedButton_451 {
    /* 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(--colorTextDefault);
  }

.EmailTopBar_AddressLine_addressButton_155:hover,
  .EmailTopBar_AddressLine_addressButton_155:focus,
  .EmailTopBar_AddressLine_addressButton_155.EmailTopBar_AddressLine_activeButton_6b7 {
    -webkit-text-decoration: underline;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-color: var(--colorTextDefault);
  }

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

.EmailTopBar_EmailRecipients_showMore_b6e:hover {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.FileButton_wrapper_24b {
  display: inline-block;
  position: relative;
}.FileButton_wrapper_24b input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
  }

.AIAutoDraft_container_1c8 {
  border-radius: var(--borderRadiusMedium);
  border: 1px solid var(--colorPurple30);
  background: var(--colorLinearGradientAiBackground);
}

.AIAutoDraft_body_23d {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--colorPurple10);
  border-bottom: 1px solid var(--colorPurple10);

  /* Make sure the reply controls do not bleed out on small screens */
  overflow: hidden;
}

.AIAutoDraft_viewer_170 {
  background-color: transparent;
}


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

.EmailThreadItems_expander_79e {
  align-items: center;
  color: var(--colorTextDefault);
  display: flex;
  font-size: var(--fontSizeSmall);
  gap: var(--spacing-4);
  height: var(--activitySectionHeight);
  padding: var(--spacing-8) var(--spacing-16);
  width: 100%;
}

.EmailThreadItems_expander_79e:hover {
    background-color: var(--bgCardLight);
  }

.EmailThreadItems_expander_79e svg {
    fill: var(--colorIconDefault);
  }

.EmailThreadItems_expanderActivitySpacing_de7 {
  padding: var(--activityVerticalGutter) var(--activityHorizontalGutter);
}

.EmailThreadItems_skeleton_8e9 {
  align-items: center;
  border-top: 1px solid var(--borderLight);
  box-sizing: border-box;
  display: flex;
  height: var(--activitySectionHeight);
  justify-content: space-between;
  padding: var(--activityVerticalGutter) var(--activityHorizontalGutter);
}

.EmailComposeForm_EmailComposeLabel_label_c86 {
  display: flex;
  align-items: center;
  height: 32px;
  margin: 0;
}

.EmailComposeForm_component_form_bbf {
  background-color: var(--surfaceBackgroundDefault);
}

.EmailComposeForm_component_form_bbf form {
    /* override global styles */
    margin: 0;
  }

.EmailComposeForm_component_subjectInput_91d {
  background-color: transparent;
  border: none;
  font-size: var(--fontSizeSmall);
  padding: 0;
  width: 50%;
}

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

.EmailComposeForm_component_subjectInput_91d {
    width: 60%;
}
  }

/* TODO: focus styles...? */

.EmailComposeForm_component_subjectInput_91d:focus {
    outline: none;
  }

.EmailComposeForm_component_upsell_666 {
  display: flex;
  flex-direction: row;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-8) var(--spacing-16);
  background: var(--colorGray02);
}

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

.EmailComposeForm_component_upsellLearnMore_fa1 {
  -webkit-text-decoration: underline;
  text-decoration: underline;
  color: var(--colorTextLight);
  cursor: pointer;
}

.EmailComposeForm_component_divider_db7 {
  display: block;
  width: 1px;
  height: 24px;
  background-color: var(--surfaceBackgroundDark);
}

.EmailComposeForm_component_templateSelect_810 {
  width: 50%;
}

.EmailComposeForm_component_templateSelect_810 * {
    font-size: var(--fontSizeSmall);
  }

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

.EmailComposeForm_component_templateSelect_810 {
    width: 40%;
}
  }

.EmailTopBar_TopBarFollowupPicker_view_7fa {
  display: flex;
}

.EmailTopBar_TopBarFollowupPicker_snoozeMenu_ff8 {
  height: 24px;
  display: inline-flex;
  align-items: center;
}

.EmailTopBar_TopBarFollowupPicker_snoozeMenuWithDate_d4f {
  height: 22px;
  display: inline-flex;
  /* hack to align snooze update menu with days ago label */
  margin-top: -2px;
}

.StatusIcons_statusIconWrapper_3bc {
  display: inline-flex;
  vertical-align: middle;
}

.StatusIcons_statusIconWrapper_3bc.StatusIcons_withMargin_8d3 {
    margin-right: var(--spacing-8);
  }

.StatusIcons_statusIcon_c5d {
  display: inline-flex;
}

.StatusIcons_topbarButtonBadge_7d1 {
  /* override base badge */
  text-transform: none;

  background-color: var(--bgDefault);
  border-color: var(--borderDefault);
}

.StatusIcons_topbarButtonBadge_7d1:hover {
    border-color: var(--borderHover);
  }

.EmailTopBar_EmailMeta_emailMeta_bc5 {
  align-items: center;
  color: var(--colorTextLight);
  display: flex;
  gap: var(--spacing-8);
  justify-content: flex-end;
}

/* icons go after timestamp on mobile */

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

.EmailTopBar_EmailMeta_emailMeta_bc5.EmailTopBar_EmailMeta_expanded_96f {
      flex-direction: row-reverse;
  }
    }

/* need to override Activity.TimeAgo */
/* see https://github.com/closeio/close-ui/issues/5866 */
.EmailTopBar_EmailMeta_relativeTimeWrapper_9e9 a,
    .EmailTopBar_EmailMeta_relativeTimeWrapper_9e9 a > * {
      font-size: 13px;
      color: inherit;
      border: none;
    }

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

.EmailTopBarExpanded_root_670 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  width: 100%;
}

.EmailTopBarExpanded_barUpperContent_d39 {
  position: relative;
}

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

.EmailTopBarExpanded_desktopRightContent_c2e {
  width: 150px;
}

.EmailTopBarExpanded_mobileLowerContent_820 {
  border-top: 1px solid var(--borderLight);
}

.EmailTopBarCollapsed_row_49e {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--spacing-8);
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}

.EmailTopBarCollapsed_icon_c9d {
  display: inline-flex;
  color: var(--colorIconDefault);
}

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

.EmailTopBarCollapsed_ellipsisContainer_66a {
  align-items: center;
  display: flex;
  flex-grow: 1;
  min-width: 0;
  overflow: hidden;
}

.EmailTopBarCollapsed_preview_1e1 {
  font-size: var(--fontSizeSmall);
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-user-select: none;
          user-select: none;
}

.EmailThreadItems_EmailActivity_emailItemDetails_eed {
  background-color: var(--colorBgEmailEditor);
  /**
   * min-height represents a one-line email
   * meant to help reduce layout shift when sending and loading content
   */
  min-height: 45px;
}

.EmailThreadItems_EmailActivity_header_a06 {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  gap: var(--spacing-8);
  height: var(--activitySectionHeight);
  line-height: var(--spacing-24);
  padding: var(--activityVerticalGutter) var(--activityHorizontalGutter);
  width: 100%;
}

.EmailThreadItems_EmailActivity_header_a06 .EmailThreadItems_EmailActivity_toggleIcon_f04 {
    align-items: center;
    display: flex;
    height: var(--spacing-24);
  }

.EmailThreadItems_EmailActivity_header_a06 .EmailThreadItems_EmailActivity_toggleIcon_f04 svg {
      color: var(--colorIconLight);
    }

.EmailThreadItems_EmailActivity_header_a06.EmailThreadItems_EmailActivity_isOpen_cd7 {
    align-items: flex-start;
    height: auto;
  }

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

.EmailThreadItems_EmailActivity_header_a06.EmailThreadItems_EmailActivity_isOpen_cd7 {
      padding-bottom: var(--spacing-4);
  }
    }

.EmailThreadItems_EmailActivity_header_a06:hover:not(.EmailThreadItems_EmailActivity_disabled_81f) {
    background: var(--bgCardLight);
    color: var(--colorTextDefault);
  }

.EmailThreadItems_EmailActivity_header_a06:hover:not(.EmailThreadItems_EmailActivity_disabled_81f) .EmailThreadItems_EmailActivity_toggleIcon_f04 svg {
        color: var(--colorIconDefault);
      }

.EmailThreadItems_EmailActivity_rootExpanded_036 {
  background-color: var(--bgLightMuted);
}

.CustomFieldValueTruncation_base_90d {
  /* Fixes the misalignment of the text with the icon */
  margin-top: -2px;
}

.CustomFieldValueTruncation_truncated_991 {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
}

.customFields_LegacyCustomFieldValue_users_f96 {
  display: grid;
  grid-template-columns: auto 1fr;
  justify-items: start;
  align-items: center;
  gap: 4px 8px;
}

.customFields_LegacyCustomFieldValue_richText_c8b {
  background-color: transparent;
}

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

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

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

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

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

Those solutions failed because the UI updated too slowly and
the UI controls were jumping around with a delay.
*/
div[data-placement='top-start'] .Calendar:not(.no-calendar-customizations) .CalendarMonth {
        display: flex;
        flex-direction: column-reverse;
      }
div[data-placement='top-start'] .Calendar:not(.no-calendar-customizations) .DayPicker_weekHeader {
        top: 0;
      }
div[data-placement='top-start'] .Calendar:not(.no-calendar-customizations) .DayPickerNavigation_button span {
        bottom: 2px;
      }
div[data-placement='top-start'] .Calendar:not(.no-calendar-customizations) .DayPicker_focusRegion {
        display: flex;
        flex-direction: column-reverse;
      }
div[data-placement='top-start'] .Calendar:not(.no-calendar-customizations) .CalendarMonth_caption {
        padding: 12px 0 0;
      }

.DateTimeInput_wrapper_a90 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 12px;

  /* prevent grid item from expanding to size of content and breaking layout */
}.DateTimeInput_wrapper_a90 > div {
    min-width: 0;
  }

.CopyableInput {
  display: flex;
  border: 1px solid var(--borderDefault);
  border-radius: var(--baseBorderRadius);
  overflow: hidden;
}

.CopyableInput__input[type='text'] {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  display: block;
  font-size: 20px;
  height: 50px;
  padding: 0 15px;
  border: 0;
  color: var(--textDefault);
}

.CopyableInput__copy {
  display: flex;
  border-left: 1px solid var(--borderDefault);
  background: var(--surfaceBackgroundMedium);
}

.CopyableInput__copyButton {
  align-items: center;
  background-color: var(--formBackgroundDisabled);
  border: none;
  box-sizing: border-box;
  color: inherit;
  cursor: pointer;
  display: flex;
  justify-content: center;
  min-width: 40px;
}

.CopyableInput__icon {
  width: 18px;
  height: 18px;
}

.CopyableInput__icon svg {
    width: 100%;
  }

.SuccessConfirmation {
  text-align: center;
  width: 80%;
  margin: 0 auto;
}

.SuccessConfirmation__icon {
  color: var(--fillSuccess);
  width: 100px;
  margin: 0 auto;
}

.SuccessConfirmation__content {
  margin: 20px 0;
}

.SuccessConfirmation__microCopy {
  margin-top: 20px;
  font-size: 13px;
  color: var(--colorTextMedium);
}

.SuccessConfirmation__title {
  line-height: 24px;
}


/*# sourceMappingURL=https://srcmaps.close.com/srcmaps/inbox~89c39a2b.cd769634077691caa5cd.js.map*/