.FullScreenView_FullScreenViewLayout_root_044 {
  --containerMaxWidth: 800px;
  display: flex;
  flex-direction: column;
  height: 100%;
}.FullScreenView_FullScreenViewLayout_root_044 * {
    box-sizing: border-box;
  }.FullScreenView_FullScreenViewLayout_root_044 .FullScreenView_FullScreenViewLayout_columns_c52 {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: min-content 1fr;
    box-sizing: border-box;
    overflow-y: hidden;
  }@media screen and (max-width: 767px) {.FullScreenView_FullScreenViewLayout_root_044 .FullScreenView_FullScreenViewLayout_columns_c52 {
      grid-template-columns: 100%;
      overflow: hidden;
  }
    }.FullScreenView_FullScreenViewLayout_hasSidebar_a87:is(.FullScreenView_FullScreenViewLayout_root_044 .FullScreenView_FullScreenViewLayout_columns_c52) {
      /**
       * 1279 down:
       * - Fixed sidebar width
       * - Fluid main column with a min-width
      */
      grid-template-columns: minmax(612px, 1fr) 348px;
      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) {.FullScreenView_FullScreenViewLayout_hasSidebar_a87:is(.FullScreenView_FullScreenViewLayout_root_044 .FullScreenView_FullScreenViewLayout_columns_c52) {
        grid-template-columns: minmax(0, 1fr) clamp(348px, 33%, 400px);
    }
      }/**
       * 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) {.FullScreenView_FullScreenViewLayout_hasSidebar_a87:is(.FullScreenView_FullScreenViewLayout_root_044 .FullScreenView_FullScreenViewLayout_columns_c52) {
        grid-template-columns: minmax(0, 1fr) clamp(400px, 35%, 460px);
    }
      }.FullScreenView_FullScreenViewLayout_root_044 .FullScreenView_FullScreenViewLayout_mainHeader_520 {
    grid-row: 1;
    grid-column: 1;
    border-bottom: 1px solid var(--borderDefault);
    background-color: var(--surfaceBackgroundDefault);

    display: flex;
    justify-content: center;
  }.FullScreenView_FullScreenViewLayout_root_044 .FullScreenView_FullScreenViewLayout_mainColumn_b9d {
    display: flex;
    flex-direction: column;
    grid-row: 2;
    grid-column: 1;
    min-height: 0;
  }.FullScreenView_FullScreenViewLayout_root_044 .FullScreenView_FullScreenViewLayout_sidebarHeader_26c {
    grid-row: 1;
    grid-column: 2;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding: 0 var(--spacing-24);
    background-color: var(--surfaceBackgroundDefault);
    border-bottom: 1px solid var(--borderDefault);
    border-left: 1px solid var(--borderDefault);
  }.FullScreenView_FullScreenViewLayout_root_044 .FullScreenView_FullScreenViewLayout_tabs_c6e {
    margin-bottom: -1px;
  }.FullScreenView_FullScreenViewLayout_root_044 .FullScreenView_FullScreenViewLayout_sidebarColumn_c44 {
    grid-row: 1 / 3;
    grid-column: 2;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-left: 1px solid var(--borderDefault);
    background-color: var(--surfaceBackgroundDefault);
  }.FullScreenView_FullScreenViewLayout_hasTabs_55a:is(.FullScreenView_FullScreenViewLayout_root_044 .FullScreenView_FullScreenViewLayout_sidebarColumn_c44) {
      grid-row-start: 2;
    }.FullScreenView_FullScreenViewLayout_root_044 .FullScreenView_FullScreenViewLayout_sidebarContent_408 {
    flex: 1;
    overflow: auto;
  }.FullScreenView_FullScreenViewLayout_root_044 .FullScreenView_FullScreenViewLayout_headerWrapper_cea {
    display: flex;
    align-items: center;
    min-height: 58px;
    width: 100%;
    background: var(--surfaceBackgroundDefault);
    padding: var(--spacing-16) var(--spacing-24);
  }@media screen and (max-width: 767px) {.FullScreenView_FullScreenViewLayout_root_044 .FullScreenView_FullScreenViewLayout_headerWrapper_cea {
      padding: var(--spacing-16);
  }
    }.FullScreenView_FullScreenViewLayout_root_044 .FullScreenView_FullScreenViewLayout_contentWrapper_137 {
    flex: 1;
    position: relative;
    width: 100%;
    overflow-y: auto;
    padding: var(--spacing-24);
  }@media screen and (max-width: 767px) {.FullScreenView_FullScreenViewLayout_root_044 .FullScreenView_FullScreenViewLayout_contentWrapper_137 {
      padding: var(--spacing-24) var(--spacing-16);
  }
    }.FullScreenView_FullScreenViewLayout_default_7b2:is(.FullScreenView_FullScreenViewLayout_root_044 .FullScreenView_FullScreenViewLayout_contentWrapper_137) {
      background: var(--surfaceBackgroundMedium);
    }.FullScreenView_FullScreenViewLayout_light_623:is(.FullScreenView_FullScreenViewLayout_root_044 .FullScreenView_FullScreenViewLayout_contentWrapper_137) {
      background: var(--bgCardBase);
    }.FullScreenView_FullScreenViewLayout_root_044 .FullScreenView_FullScreenViewLayout_container_487 {
    width: 100%;
    max-width: var(--containerMaxWidth);
    margin: 0 auto;
  }

/* Increases CSS specificity to avoid
   issues when CSS styles are loaded in different orders */
.FullScreenView_FullScreenViewModal_modal_dd6.FullScreenView_FullScreenViewModal_modal_dd6 {
  box-sizing: border-box;
  width: 90vw;
  height: 90vh;
  max-height: 90vh;
  margin-top: 5vh;
  overflow: hidden;
}
.FullScreenView_FullScreenViewModal_modal_dd6.FullScreenView_FullScreenViewModal_modal_dd6.FullScreenView_FullScreenViewModal_isNarrow_d16 {
    max-width: 768px;
  }
@media screen and (max-width: 767px) {
.FullScreenView_FullScreenViewModal_modal_dd6.FullScreenView_FullScreenViewModal_modal_dd6 {
    /**
     * 8px of padding on each side of the modal body
     */
    width: calc(100% - var(--spacing-16));
}
  }
.FullScreenView_FullScreenViewModal_modal_dd6.FullScreenView_FullScreenViewModal_modal_dd6 .FullScreenView_FullScreenViewModal_body_198 {
    height: 100%;
    overflow: hidden;
  }

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

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

.PresetDateRangePicker_panel {
  padding: 0 22px 11px;
}
.PresetDateRangePicker_button {
  position: relative;
  height: 100%;
  text-align: center;
  background: 0 0;
  border: 2px solid #00a699;
  color: #00a699;
  padding: 4px 12px;
  margin-right: 8px;
  font: inherit;
  font-weight: 700;
  line-height: normal;
  overflow: visible;
  box-sizing: border-box;
  cursor: pointer;
}
.PresetDateRangePicker_button:active {
  outline: 0;
}
.PresetDateRangePicker_button__selected {
  color: #fff;
  background: #00a699;
}
.SingleDatePickerInput {
  display: inline-block;
  background-color: #fff;
}
.SingleDatePickerInput__withBorder {
  border-radius: 2px;
  border: 1px solid #dbdbdb;
}
.SingleDatePickerInput__rtl {
  direction: rtl;
}
.SingleDatePickerInput__disabled {
  background-color: #f2f2f2;
}
.SingleDatePickerInput__block {
  display: block;
}
.SingleDatePickerInput__showClearDate {
  padding-right: 30px;
}
.SingleDatePickerInput_clearDate {
  background: 0 0;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  cursor: pointer;
  padding: 10px;
  margin: 0 10px 0 5px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.SingleDatePickerInput_clearDate__default:focus,
.SingleDatePickerInput_clearDate__default:hover {
  background: #dbdbdb;
  border-radius: 50%;
}
.SingleDatePickerInput_clearDate__small {
  padding: 6px;
}
.SingleDatePickerInput_clearDate__hide {
  visibility: hidden;
}
.SingleDatePickerInput_clearDate_svg {
  fill: #82888a;
  height: 12px;
  width: 15px;
  vertical-align: middle;
}
.SingleDatePickerInput_clearDate_svg__small {
  height: 9px;
}
.SingleDatePickerInput_calendarIcon {
  background: 0 0;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  padding: 10px;
  margin: 0 5px 0 10px;
}
.SingleDatePickerInput_calendarIcon_svg {
  fill: #82888a;
  height: 15px;
  width: 14px;
  vertical-align: middle;
}
.SingleDatePicker {
  position: relative;
  display: inline-block;
}
.SingleDatePicker__block {
  display: block;
}
.SingleDatePicker_picker {
  z-index: 1;
  background-color: #fff;
  position: absolute;
}
.SingleDatePicker_picker__rtl {
  direction: rtl;
}
.SingleDatePicker_picker__directionLeft {
  left: 0;
}
.SingleDatePicker_picker__directionRight {
  right: 0;
}
.SingleDatePicker_picker__portal {
  background-color: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.SingleDatePicker_picker__fullScreenPortal {
  background-color: #fff;
}
.SingleDatePicker_closeButton {
  background: 0 0;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  padding: 15px;
  z-index: 2;
}
.SingleDatePicker_closeButton:focus,
.SingleDatePicker_closeButton:hover {
  color: darken(#cacccd, 10%);
  -webkit-text-decoration: none;
  text-decoration: none;
}
.SingleDatePicker_closeButton_svg {
  height: 15px;
  width: 15px;
  fill: #cacccd;
}
.DayPickerKeyboardShortcuts_buttonReset {
  background: 0 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  padding: 0;
  cursor: pointer;
  font-size: 14px;
}
.DayPickerKeyboardShortcuts_buttonReset:active {
  outline: 0;
}
.DayPickerKeyboardShortcuts_show {
  width: 33px;
  height: 26px;
  position: absolute;
  z-index: 2;
}
.DayPickerKeyboardShortcuts_show::before {
  content: '';
  display: block;
  position: absolute;
}
.DayPickerKeyboardShortcuts_show__bottomRight {
  bottom: 0;
  right: 0;
}
.DayPickerKeyboardShortcuts_show__bottomRight::before {
  border-top: 26px solid transparent;
  border-right: 33px solid #00a699;
  bottom: 0;
  right: 0;
}
.DayPickerKeyboardShortcuts_show__bottomRight:hover::before {
  border-right: 33px solid #008489;
}
.DayPickerKeyboardShortcuts_show__topRight {
  top: 0;
  right: 0;
}
.DayPickerKeyboardShortcuts_show__topRight::before {
  border-bottom: 26px solid transparent;
  border-right: 33px solid #00a699;
  top: 0;
  right: 0;
}
.DayPickerKeyboardShortcuts_show__topRight:hover::before {
  border-right: 33px solid #008489;
}
.DayPickerKeyboardShortcuts_show__topLeft {
  top: 0;
  left: 0;
}
.DayPickerKeyboardShortcuts_show__topLeft::before {
  border-bottom: 26px solid transparent;
  border-left: 33px solid #00a699;
  top: 0;
  left: 0;
}
.DayPickerKeyboardShortcuts_show__topLeft:hover::before {
  border-left: 33px solid #008489;
}
.DayPickerKeyboardShortcuts_showSpan {
  color: #fff;
  position: absolute;
}
.DayPickerKeyboardShortcuts_showSpan__bottomRight {
  bottom: 0;
  right: 5px;
}
.DayPickerKeyboardShortcuts_showSpan__topRight {
  top: 1px;
  right: 5px;
}
.DayPickerKeyboardShortcuts_showSpan__topLeft {
  top: 1px;
  left: 5px;
}
.DayPickerKeyboardShortcuts_panel {
  overflow: auto;
  background: #fff;
  border: 1px solid #dbdbdb;
  border-radius: 2px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 2;
  padding: 22px;
  margin: 33px;
  text-align: left;
}
.DayPickerKeyboardShortcuts_title {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}
.DayPickerKeyboardShortcuts_list {
  list-style: none;
  padding: 0;
  font-size: 14px;
}
.DayPickerKeyboardShortcuts_close {
  position: absolute;
  right: 22px;
  top: 22px;
  z-index: 2;
}
.DayPickerKeyboardShortcuts_close:active {
  outline: 0;
}
.DayPickerKeyboardShortcuts_closeSvg {
  height: 15px;
  width: 15px;
  fill: #cacccd;
}
.DayPickerKeyboardShortcuts_closeSvg:focus,
.DayPickerKeyboardShortcuts_closeSvg:hover {
  fill: #82888a;
}
.CalendarDay {
  box-sizing: border-box;
  cursor: pointer;
  font-size: 14px;
  text-align: center;
}
.CalendarDay:active {
  outline: 0;
}
.CalendarDay__defaultCursor {
  cursor: default;
}
.CalendarDay__default {
  border: 1px solid #e4e7e7;
  color: #484848;
  background: #fff;
}
.CalendarDay__default:hover {
  background: #e4e7e7;
  border: 1px solid #e4e7e7;
  color: inherit;
}
.CalendarDay__hovered_offset {
  background: #f4f5f5;
  border: 1px double #e4e7e7;
  color: inherit;
}
.CalendarDay__outside {
  border: 0;
  background: #fff;
  color: #484848;
}
.CalendarDay__outside:hover {
  border: 0;
}
.CalendarDay__blocked_minimum_nights {
  background: #fff;
  border: 1px solid #eceeee;
  color: #cacccd;
}
.CalendarDay__blocked_minimum_nights:active,
.CalendarDay__blocked_minimum_nights:hover {
  background: #fff;
  color: #cacccd;
}
.CalendarDay__highlighted_calendar {
  background: #ffe8bc;
  color: #484848;
}
.CalendarDay__highlighted_calendar:active,
.CalendarDay__highlighted_calendar:hover {
  background: #ffce71;
  color: #484848;
}
.CalendarDay__selected_span {
  background: #66e2da;
  border: 1px double #33dacd;
  color: #fff;
}
.CalendarDay__selected_span:active,
.CalendarDay__selected_span:hover {
  background: #33dacd;
  border: 1px double #33dacd;
  color: #fff;
}
.CalendarDay__selected,
.CalendarDay__selected:active,
.CalendarDay__selected:hover {
  background: #00a699;
  border: 1px double #00a699;
  color: #fff;
}
.CalendarDay__hovered_span,
.CalendarDay__hovered_span:hover {
  background: #b2f1ec;
  border: 1px double #80e8e0;
  color: #007a87;
}
.CalendarDay__hovered_span:active {
  background: #80e8e0;
  border: 1px double #80e8e0;
  color: #007a87;
}
.CalendarDay__blocked_calendar,
.CalendarDay__blocked_calendar:active,
.CalendarDay__blocked_calendar:hover {
  background: #cacccd;
  border: 1px solid #cacccd;
  color: #82888a;
}
.CalendarDay__blocked_out_of_range,
.CalendarDay__blocked_out_of_range:active,
.CalendarDay__blocked_out_of_range:hover {
  background: #fff;
  border: 1px solid #e4e7e7;
  color: #cacccd;
}
.CalendarDay__hovered_start_first_possible_end {
  background: #eceeee;
  border: 1px double #eceeee;
}
.CalendarDay__hovered_start_blocked_min_nights {
  background: #eceeee;
  border: 1px double #e4e7e7;
}
.CalendarMonth {
  background: #fff;
  text-align: center;
  vertical-align: top;
  -webkit-user-select: none;
  user-select: none;
}
.CalendarMonth_table {
  border-collapse: collapse;
  border-spacing: 0;
}
.CalendarMonth_verticalSpacing {
  border-collapse: separate;
}
.CalendarMonth_caption {
  color: #484848;
  font-size: 18px;
  text-align: center;
  padding-top: 22px;
  padding-bottom: 37px;
  caption-side: initial;
}
.CalendarMonth_caption__verticalScrollable {
  padding-top: 12px;
  padding-bottom: 7px;
}
.CalendarMonthGrid {
  background: #fff;
  text-align: left;
  z-index: 0;
}
.CalendarMonthGrid__animating {
  z-index: 1;
}
.CalendarMonthGrid__horizontal {
  position: absolute;
  left: 9px;
}
.CalendarMonthGrid__vertical {
  margin: 0 auto;
}
.CalendarMonthGrid__vertical_scrollable {
  margin: 0 auto;
  overflow-y: scroll;
}
.CalendarMonthGrid_month__horizontal {
  display: inline-block;
  vertical-align: top;
  min-height: 100%;
}
.CalendarMonthGrid_month__hideForAnimation {
  position: absolute;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
}
.CalendarMonthGrid_month__hidden {
  visibility: hidden;
}
.DayPickerNavigation {
  position: relative;
  z-index: 2;
}
.DayPickerNavigation__horizontal {
  height: 0;
}
.DayPickerNavigation__verticalDefault {
  position: absolute;
  width: 100%;
  height: 52px;
  bottom: 0;
  left: 0;
}
.DayPickerNavigation__verticalScrollableDefault {
  position: relative;
}
.DayPickerNavigation_button {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  border: 0;
  padding: 0;
  margin: 0;
}
.DayPickerNavigation_button__default {
  border: 1px solid #e4e7e7;
  background-color: #fff;
  color: #757575;
}
.DayPickerNavigation_button__default:focus,
.DayPickerNavigation_button__default:hover {
  border: 1px solid #c4c4c4;
}
.DayPickerNavigation_button__default:active {
  background: #f2f2f2;
}
.DayPickerNavigation_button__disabled {
  cursor: default;
  border: 1px solid #f2f2f2;
}
.DayPickerNavigation_button__disabled:focus,
.DayPickerNavigation_button__disabled:hover {
  border: 1px solid #f2f2f2;
}
.DayPickerNavigation_button__disabled:active {
  background: 0 0;
}
.DayPickerNavigation_button__horizontalDefault {
  position: absolute;
  top: 18px;
  line-height: 0.78;
  border-radius: 3px;
  padding: 6px 9px;
}
.DayPickerNavigation_leftButton__horizontalDefault {
  left: 22px;
}
.DayPickerNavigation_rightButton__horizontalDefault {
  right: 22px;
}
.DayPickerNavigation_button__verticalDefault {
  padding: 5px;
  background: #fff;
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
  position: relative;
  display: inline-block;
  text-align: center;
  height: 100%;
  width: 50%;
}
.DayPickerNavigation_nextButton__verticalDefault {
  border-left: 0;
}
.DayPickerNavigation_nextButton__verticalScrollableDefault {
  width: 100%;
}
.DayPickerNavigation_svg__horizontal {
  height: 19px;
  width: 19px;
  fill: #82888a;
  display: block;
}
.DayPickerNavigation_svg__vertical {
  height: 42px;
  width: 42px;
  fill: #484848;
}
.DayPickerNavigation_svg__disabled {
  fill: #f2f2f2;
}
.DayPicker {
  background: #fff;
  position: relative;
  text-align: left;
}
.DayPicker__horizontal {
  background: #fff;
}
.DayPicker__verticalScrollable {
  height: 100%;
}
.DayPicker__hidden {
  visibility: hidden;
}
.DayPicker__withBorder {
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.05),
    0 0 0 1px rgba(0, 0, 0, 0.07);
  border-radius: 3px;
}
.DayPicker_portal__horizontal {
  box-shadow: none;
  position: absolute;
  left: 50%;
  top: 50%;
}
.DayPicker_portal__vertical {
  position: initial;
}
.DayPicker_focusRegion {
  outline: 0;
}
.DayPicker_calendarInfo__horizontal,
.DayPicker_wrapper__horizontal {
  display: inline-block;
  vertical-align: top;
}
.DayPicker_weekHeaders {
  position: relative;
}
.DayPicker_weekHeaders__horizontal {
  margin-left: 9px;
}
.DayPicker_weekHeader {
  color: #757575;
  position: absolute;
  top: 62px;
  z-index: 2;
  text-align: left;
}
.DayPicker_weekHeader__vertical {
  left: 50%;
}
.DayPicker_weekHeader__verticalScrollable {
  top: 0;
  display: table-row;
  border-bottom: 1px solid #dbdbdb;
  background: #fff;
  margin-left: 0;
  left: 0;
  width: 100%;
  text-align: center;
}
.DayPicker_weekHeader_ul {
  list-style: none;
  margin: 1px 0;
  padding-left: 0;
  padding-right: 0;
  font-size: 14px;
}
.DayPicker_weekHeader_li {
  display: inline-block;
  text-align: center;
}
.DayPicker_transitionContainer {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
}
.DayPicker_transitionContainer__horizontal {
  transition: height 0.2s ease-in-out;
}
.DayPicker_transitionContainer__vertical {
  width: 100%;
}
.DayPicker_transitionContainer__verticalScrollable {
  padding-top: 20px;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  overflow-y: scroll;
}
.DateInput {
  margin: 0;
  padding: 0;
  background: #fff;
  position: relative;
  display: inline-block;
  width: 130px;
  vertical-align: middle;
}
.DateInput__small {
  width: 97px;
}
.DateInput__block {
  width: 100%;
}
.DateInput__disabled {
  background: #f2f2f2;
  color: #dbdbdb;
}
.DateInput_input {
  font-weight: 200;
  font-size: 19px;
  line-height: 24px;
  color: #484848;
  background-color: #fff;
  width: 100%;
  padding: 11px 11px 9px;
  border: 0;
  border-top: 0;
  border-right: 0;
  border-bottom: 2px solid transparent;
  border-left: 0;
  border-radius: 0;
}
.DateInput_input__small {
  font-size: 15px;
  line-height: 18px;
  letter-spacing: 0.2px;
  padding: 7px 7px 5px;
}
.DateInput_input__regular {
  font-weight: auto;
}
.DateInput_input__readOnly {
  -webkit-user-select: none;
  user-select: none;
}
.DateInput_input__focused {
  outline: 0;
  background: #fff;
  border: 0;
  border-top: 0;
  border-right: 0;
  border-bottom: 2px solid #008489;
  border-left: 0;
}
.DateInput_input__disabled {
  background: #f2f2f2;
  font-style: italic;
}
.DateInput_screenReaderMessage {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.DateInput_fang {
  position: absolute;
  width: 20px;
  height: 10px;
  left: 22px;
  z-index: 2;
}
.DateInput_fangShape {
  fill: #fff;
}
.DateInput_fangStroke {
  stroke: #dbdbdb;
  fill: transparent;
}
.DateRangePickerInput {
  background-color: #fff;
  display: inline-block;
}
.DateRangePickerInput__disabled {
  background: #f2f2f2;
}
.DateRangePickerInput__withBorder {
  border-radius: 2px;
  border: 1px solid #dbdbdb;
}
.DateRangePickerInput__rtl {
  direction: rtl;
}
.DateRangePickerInput__block {
  display: block;
}
.DateRangePickerInput__showClearDates {
  padding-right: 30px;
}
.DateRangePickerInput_arrow {
  display: inline-block;
  vertical-align: middle;
  color: #484848;
}
.DateRangePickerInput_arrow_svg {
  vertical-align: middle;
  fill: #484848;
  height: 24px;
  width: 24px;
}
.DateRangePickerInput_clearDates {
  background: 0 0;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  cursor: pointer;
  padding: 10px;
  margin: 0 10px 0 5px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.DateRangePickerInput_clearDates__small {
  padding: 6px;
}
.DateRangePickerInput_clearDates_default:focus,
.DateRangePickerInput_clearDates_default:hover {
  background: #dbdbdb;
  border-radius: 50%;
}
.DateRangePickerInput_clearDates__hide {
  visibility: hidden;
}
.DateRangePickerInput_clearDates_svg {
  fill: #82888a;
  height: 12px;
  width: 15px;
  vertical-align: middle;
}
.DateRangePickerInput_clearDates_svg__small {
  height: 9px;
}
.DateRangePickerInput_calendarIcon {
  background: 0 0;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  padding: 10px;
  margin: 0 5px 0 10px;
}
.DateRangePickerInput_calendarIcon_svg {
  fill: #82888a;
  height: 15px;
  width: 14px;
  vertical-align: middle;
}
.DateRangePicker {
  position: relative;
  display: inline-block;
}
.DateRangePicker__block {
  display: block;
}
.DateRangePicker_picker {
  z-index: 1;
  background-color: #fff;
  position: absolute;
}
.DateRangePicker_picker__rtl {
  direction: rtl;
}
.DateRangePicker_picker__directionLeft {
  left: 0;
}
.DateRangePicker_picker__directionRight {
  right: 0;
}
.DateRangePicker_picker__portal {
  background-color: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.DateRangePicker_picker__fullScreenPortal {
  background-color: #fff;
}
.DateRangePicker_closeButton {
  background: 0 0;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  padding: 15px;
  z-index: 2;
}
.DateRangePicker_closeButton:focus,
.DateRangePicker_closeButton:hover {
  color: darken(#cacccd, 10%);
  -webkit-text-decoration: none;
  text-decoration: none;
}
.DateRangePicker_closeButton_svg {
  height: 15px;
  width: 15px;
  fill: #cacccd;
}

/**
 * Overwrites
 */

.Calendar {
  --colorBgCalendarDefault: var(--bgPopover);
  --calendarSpacing: 2px;
}

.Calendar .CalendarMonthGrid,.Calendar .DayPicker,.Calendar .CalendarMonth {
    background: var(--colorBgCalendarDefault);
  }

.Calendar .CalendarMonth_caption {
    color: var(--colorTextDefault);
  }

.Calendar .CalendarDay {
    /* react-dates subtracts 1 from the height */
    padding: var(--calendarSpacing) 0 calc(var(--calendarSpacing) - 1px);
  }

.Calendar .CalendarDay__selected,.Calendar .CalendarDay__hovered_span,.Calendar .CalendarDay__selected_span {
    color: var(--colorTextDefault);
    border: none;
    background: var(--colorBgCalendarDefault);
  }

:is(.Calendar .CalendarDay__selected,.Calendar .CalendarDay__hovered_span,.Calendar .CalendarDay__selected_span):hover {
      color: var(--colorTextDefault);
      border: none;
      background: var(--colorBgCalendarDefault);
    }

:is(.Calendar .CalendarDay__selected,.Calendar .CalendarDay__hovered_span,.Calendar .CalendarDay__selected_span) .CalendarDay__dayWrapper {
      background: var(--bgActiveMuted);
    }

:is(.Calendar .CalendarDay__selected,.Calendar .CalendarDay__hovered_span,.Calendar .CalendarDay__selected_span) .CalendarDay__dayWrapper--singleDate {
      background: none;
    }

.Calendar .CalendarDay__dayWrapper {
    display: flex;
    height: 100%;
    padding: 0 var(--calendarSpacing);
  }

.Calendar .CalendarDay__day {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    border-radius: 50%;
  }

.Calendar .CalendarDay__today .CalendarDay__day {
    border: 2px solid var(--borderDefault);
  }

.Calendar .CalendarDay__default {
    color: var(--colorTextDefault);
    border: none;
    background: var(--colorBgCalendarDefault);
  }

.CalendarDay__outside:is(.Calendar .CalendarDay__default) {
      color: var(--colorTextLight);
    }

.CalendarDay__blocked_out_of_range:is(.Calendar .CalendarDay__default) {
      color: color-mix(in srgb, var(--colorTextDefault) 20%, transparent);
    }

:is(.Calendar .CalendarDay__default):hover {
      border: none;
      background: var(--colorBgCalendarDefault);
    }

:is(.Calendar .CalendarDay__default):hover .CalendarDay__day {
      border-radius: 50%;
      background: var(--bgMenuItemHover);
    }

:is(.Calendar .CalendarDay__selected,.Calendar .CalendarDay__selected_end) .CalendarDay__day,.CalendarDay__blocked_out_of_range:is(.Calendar .CalendarDay__selected,.Calendar .CalendarDay__selected_end):hover .CalendarDay__day {
      color: var(--colorTextNeutralWhite);
      background: var(--bgActive);
    }

:is(.Calendar .CalendarDay__selected,.Calendar .CalendarDay__selected_end):hover .CalendarDay__day {
        background: color-mix(in srgb, #000 5%, var(--bgActive));
      }

:is(.Calendar .CalendarDay__hovered_span:hover,.Calendar .CalendarDay__selected_span:hover) .CalendarDay__day {
      background: color-mix(in srgb, #000 5%, var(--bgActiveMuted));
    }

:is(.Calendar .CalendarDay__selected_start) .CalendarDay__dayWrapper {
      border-top-left-radius: 50%;
      border-bottom-left-radius: 50%;
      padding-left: 0;
      margin-left: var(--calendarSpacing);
    }

:is(.Calendar .CalendarDay__selected_start) .CalendarDay__dayWrapper--startDateOnly,:is(.Calendar .CalendarDay__selected_start) .CalendarDay__dayWrapper--singleDate {
      background: none;
    }

:is(.Calendar .CalendarDay__selected_start) .CalendarDay__dayWrapper--startDateHoveredSpan {
      background: var(--bgActiveMuted);
    }

:is(.Calendar .CalendarDay__selected_end,.Calendar .CalendarDay__hovered_span:hover) .CalendarDay__dayWrapper {
      border-top-right-radius: 50%;
      border-bottom-right-radius: 50%;
      padding-right: 0;
      margin-right: var(--calendarSpacing);
    }

.Calendar .CalendarDay__blocked_out_of_range {
    color: color-mix(in srgb, var(--colorTextDefault) 20%, transparent);
  }

:is(.Calendar .CalendarDay__blocked_out_of_range):hover .CalendarDay__day {
        color: inherit;
        background: var(--colorBgCalendarDefault);
      }

.CalendarDay__selected_span:is(.Calendar .CalendarDay__blocked_out_of_range) .CalendarDay__day {
        color: inherit;
        background: var(--bgActiveMuted);
      }

.CalendarDay__selected_span:is(.Calendar .CalendarDay__blocked_out_of_range):hover .CalendarDay__day {
          color: inherit;
          background: var(--bgActiveMuted);
        }

:is(.CalendarDay__selected:is(.Calendar .CalendarDay__blocked_out_of_range),.CalendarDay__selected_end:is(.Calendar .CalendarDay__blocked_out_of_range)) .CalendarDay__day {
        color: var(--colorTextNeutralWhite);
        background: var(--bgActive);
      }

:is(.CalendarDay__selected:is(.Calendar .CalendarDay__blocked_out_of_range),.CalendarDay__selected_end:is(.Calendar .CalendarDay__blocked_out_of_range)):hover .CalendarDay__day {
          color: var(--colorTextNeutralWhite);
          background: var(--bgActive);
        }

.Calendar .CalendarMonth_caption {
    padding: 0 0 14px;
  }

.Calendar .CalendarMonth_table {
    margin-top: 25px;
  }

.Calendar .DayPicker_weekHeader {
    top: 34px;
    text-transform: uppercase;
  }

:is(.Calendar .DayPicker_weekHeader) small {
      display: block;
      color: var(--colorTextLight);
      font-size: 11px;
      font-weight: var(--fontWeightBold);
    }

.Calendar .DayPicker_transitionContainer {
    transition: none;
  }

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

:is(.Calendar_sharedComponents_navNext_2f7,.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));
  }

.ActivityReminderActions_reminderActions_a1e {
  /* Apply vertical gutter by centering within an increased height, as the */
  /* actions are larger than the min row height */
  display: flex;
  align-self: stretch;
  align-items: center;
}

.ActivityTaskReminderHeader_header_479 {
  align-items: center;
  background-color: var(--bgInformationalMuted);
  display: flex;
  flex: 1;
  height: var(--activitySectionHeight);
  justify-content: space-between;
}.ActivityTaskReminderHeader_header_479.ActivityTaskReminderHeader_base_afa {
    padding: 0 var(--activityHorizontalGutter);
  }.ActivityTaskReminderHeader_header_479.ActivityTaskReminderHeader_narrow_df2 {
    padding: 0 var(--spacing-16);
  }.ActivityTaskReminderHeader_header_479.ActivityTaskReminderHeader_wide_6e5 {
    padding: 0 var(--spacing-24);
  }@media screen and (min-width: 768px) {.ActivityTaskReminderHeader_header_479.ActivityTaskReminderHeader_rounded_8a9 {
      border-radius: var(--activityBorderRadius) var(--activityBorderRadius) 0 0;
  }
    }

.ActivityUsers_activityUsers_598 {
  display: grid;
  grid-gap: 6px;
  grid-auto-flow: column;
  align-items: center;
  font-size: 13px;
  line-height: 16px;
  color: var(--colorTextLight);
  white-space: nowrap;
  height: 24px;
}

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

.ActivityUsers_includePadding_b69 {
    padding: 2px 0 2px 2px;
}
  }

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

.ActivityUsers_isShifted_1cb {
  margin-left: -8px;
}

.ActivityUsers_avatarMore_f85 {
  -webkit-user-select: none;
          user-select: none;
  box-sizing: border-box;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  text-align: center;
  border-radius: 50%;
  /* TODO [darkmode] determine aliases */
  color: var(--colorTextNeutralWhite);
  background-color: var(--colorTextNeutralBlack);
  width: 24px;
  height: 24px;
}

.ActivityUsers_avatarMore_f85.ActivityUsers_mini_e45 {
    height: 16px;
    width: 16px;
  }

.ActivityUsers_avatarText_161 {
  z-index: 1;
  border-radius: 50%;
  margin-left: -2px;
  margin-top: -1px;
}

.SMSGroup_SMSGroupFullScreenViewHeader_mobileActionsContainer_0bc {
  align-items: center;
  background-color: var(--bgCardMedium);
  border: 1px solid var(--borderLight);
  border-radius: var(--baseInputBorderRadius);
  display: flex;
  gap: var(--spacing-8);
  justify-content: space-between;
  padding: var(--spacing-8) var(--spacing-12);
}

.ConversationFullScreenView_container_484 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
}

.ConversationFullScreenView_participantsContainer_f80 {
  border-bottom: 1px solid var(--borderLight);

  /* required to align the participants expander with the header area, which has 24px top padding */
  margin-top: -24px;
  margin-left: -24px;
  margin-right: -24px;
}

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

.ConversationFullScreenView_participantsContainer_f80 {
    margin-left: -16px;
    margin-right: -16px;
}
  }

.ConversationFullScreenView_unselectable_a04 {
  -webkit-user-select: none;
          user-select: none;
}

.SMSGroup_SMSGroupFullScreenView_container_dab {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
}

.SMSGroup_SMSGroupFullScreenView_participantsContainer_596 {
  border-bottom: 1px solid var(--borderLight);

  /* required to align the participants expander with the header area, which has 24px top padding */
  margin-top: -24px;
  margin-left: -24px;
  margin-right: -24px;
}

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

.SMSGroup_SMSGroupFullScreenView_participantsContainer_596 {
    margin-left: -16px;
    margin-right: -16px;
}
  }

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

.SMSActivityDate_SMSActivityDate_divider_719 {
  background-color: var(--borderDefault);
  height: 1px;
  width: 100%;
}

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

.PausedSubscriptionsNotices_root_6dd:last-of-type {
  padding-bottom: var(--spacing-12);
}

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

.SMSMessage_container_38d {
  border: 1px solid var(--borderLight);
  border-radius: var(--activityBorderRadius);
  padding: var(--spacing-12);
  transition:
    background-color 1.5s ease,
    box-shadow 1.5s ease;
}

.SMSMessage_container_38d.SMSMessage_outbound_55d {
    background-color: var(--bgCardLight);
  }

.SMSMessage_container_38d.SMSMessage_inbound_b48 {
    background-color: var(--bgCardBase);
  }

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

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

.SMSMessage_inboundIcon_aa0 {
  color: var(--fillSuccess);
  height: 16px;
  transform: rotate(270deg);
  width: 16px;
}

/* To have our styles match Figma we have to compensate for the extra padding
that small buttons have */
.SMSMessage_smallButtonFix_549 {
  margin: -2px 0;
}

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

.SMSMessage_hoverActions_e4a.SMSMessage_showOnHover_ccf {
    visibility: hidden;
  }

.SMSMessage_container_38d:hover .SMSMessage_hoverActions_e4a {
    visibility: visible;
  }

.SMSMessage_hoverActions_e4a.SMSMessage_forceVisibility_1f4 {
    visibility: visible;
  }

.SMSMessage_messageContainer_b12 {
  box-sizing: border-box;
  width: 100%;
}

.SMSMessage_messageContainer_b12.SMSMessage_indentation-narrow_0e1 {
    --spacing-indentation: var(--spacing-24);
  }

.SMSMessage_messageContainer_b12.SMSMessage_indentation-wide_55b {
    --spacing-indentation: 112px;
  }

@media screen and (min-width: 768px) {
    .SMSMessage_messageContainer_b12.SMSMessage_indentation-narrow-medium-up_bfd {
      --spacing-indentation: var(--spacing-24);
    }

    .SMSMessage_messageContainer_b12.SMSMessage_indentation-wide-medium-up_be7 {
      --spacing-indentation: 112px;
    }
  }

.SMSMessage_messageContainer_b12.SMSMessage_left_3b0 {
    padding-right: var(--spacing-indentation);
  }

.SMSMessage_messageContainer_b12.SMSMessage_right_20e {
    padding-left: var(--spacing-indentation);
  }

/* overrides forms.less */
.WorkflowSubscriptionModal_WorkflowSubscriptionForm_form_bb7 {
  margin: 0;
}

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

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

.WorkflowSubscriptionModal_WorkflowSubscriptionForm_loaderContainer_831 {
  border-top: 1px solid var(--borderDefault);
  text-align: center;
  padding: 20px;
}

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

.WorkflowSubscriptionModal_WorkflowSubscriptionForm_fieldFullWidth_a34 {
  width: 100%;
}

.WorkflowSubscriptionModalContainer_ContactHeader_content_6fe {
  background: var(--bgCardMedium);
  padding: var(--spacing-12);
}

.WorkflowSubscriptionModalContainer_WorkflowSubscriptionTile_root_2d5 {
  align-items: center;
  background: var(--surfaceBackgroundDefault);
  border-bottom: 1px solid var(--borderDefault);
  display: flex;
  gap: var(--spacing-16);
  padding: var(--spacing-12) var(--spacing-16);
}

.WorkflowSubscriptionModalContainer_WorkflowSubscriptionTile_new_0b1 {
  pointer-events: none;
  cursor: wait;
}

.WorkflowSubscriptionModalContainer_WorkflowSubscriptionTile_first_500 {
  border-top-right-radius: var(--baseBorderRadius);
  border-top-left-radius: var(--baseBorderRadius);
}

.WorkflowSubscriptionModalContainer_WorkflowSubscriptionTile_last_b7e {
  border-bottom: none;
  border-bottom-right-radius: var(--baseBorderRadius);
  border-bottom-left-radius: var(--baseBorderRadius);
}

.WorkflowSubscriptionModalContainer_WorkflowSubscriptionTile_action_321 {
  flex: 1;
}

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

.WorkflowSubscriptionModalContainer_SubscriptionDetails_title_3ae {
  flex: 0 1 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 16px;
}

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

.SubscriptionErrorBanner_heading_9af {
  margin-bottom: 4px;
}

.SubscriptionErrorBanner_subheading_4bc {
  margin: 16px 0 4px;

  /* override global h2 */
  line-height: inherit;
}

.SubscriptionErrorBanner_errorIconWrapper_ace {
  width: 40px;
  min-width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bgLight);
}

.ActivityIconCircle_root_114 {
  box-sizing: border-box;
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  margin: 7px 0 0 3px;
}

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

.ActivityIconCircle_root_114.ActivityIconCircle_collapsed_ce2 {
    cursor: pointer;
    margin-top: 11px;
    margin-left: 0px;
  }

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

.ActivityIconCircle_root_114.ActivityIconCircle_collapsed_ce2 {
      margin-top: 0px;
  }
    }

@media screen and (max-width: 767px) {
    .ActivityIconCircle_root_114:not(.ActivityIconCircle_collapsed_ce2) {
      align-self: flex-start;
      margin-top: 0;
      margin-left: 0;
    }
  }

.ActivityIconCircle_customRoot_66e {
  width: 28px;
  height: 28px;
  color: var(--white);
  border-radius: 50%;
  background: var(--surfaceBackgroundDark);
}

.ActivityIconCircle_customRoot_66e.ActivityIconCircle_collapsed_ce2 {
    width: var(--activityCollapsedIconWidth);
    height: var(--activityCollapsedIconWidth);
  }

@media screen and (max-width: 767px) {
    .ActivityIconCircle_customRoot_66e:not(.ActivityIconCircle_collapsed_ce2) {
      width: var(--activityIconWidthMobile);
      height: var(--activityIconWidthMobile);
    }
  }

.ActivityIconCircle_customRoot_66e.ActivityIconCircle_deemphasized_893 {
    background: var(--surfaceBackgroundMedium);
    color: var(--colorIconLight);
    margin-top: var(--spacing-4);
  }

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

.ActivityIconCircle_customRoot_66e.ActivityIconCircle_deemphasized_893 {
      margin-left: var(--spacing-4);
      width: 27px;
  }
    }

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

.ActivityIconCircle_customRoot_66e.ActivityIconCircle_deemphasized_893 {
      margin-top: 2px;
  }
    }

.ActivityIconCircle_customRoot_66e.ActivityIconCircle_deemphasized_893.ActivityIconCircle_collapsed_ce2 {
      background: var(--surfaceBackgroundLight);
    }

.ActivityMobileHeaderSegment_layout_114 {
  display: flex;
  align-items: center;

  height: calc(
    var(--activityMinRowHeight) + (var(--activityVerticalGutter) * 2)
  );
}.ActivityMobileHeaderSegment_layout_114 .ActivityMobileHeaderSegment_icon_8b8 {
    margin-left: var(--activityHorizontalGutter);
    margin-right: var(--activityHeaderHorizontalGap);
  }.ActivityMobileHeaderSegment_layout_114 .ActivityMobileHeaderSegment_summary_86d {
    display: flex;
    align-items: center;
  }

.Liquid_liquidTemplate_350 {
  display: inline-block;
  background: #cbebff;
}

.QuickInsert_QuickInsertMenu_itemListCard_716 {
  --cardWidth: 328px;
  --cardMaxHeight: 200px;
  border: 1px solid var(--borderDefault);
  box-shadow: var(--shadowLevel3);
  border-radius: 3px;
  background-color: var(--bgPopover);
}

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

.QuickInsert_QuickInsertMenuItem_name_6da {
  white-space: nowrap;
}

/* not using UIText here due to the combination of text & overflow rules */
.QuickInsert_QuickInsertMenuItem_subText_101 {
  min-width: 0;
  font-size: var(--fontSizeSmall);
  color: var(--colorTextLight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.FilesBrowserModal_modal_de8 {
  width: 800px;
}

.FilesBrowserFooter_footer_98b {
  display: flex;
  height: 30px;
  gap: var(--spacing-8);
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-16);
  background: var(--bgCardMedium);
  border-radius: 0 0 var(--tableBorderRadius) var(--tableBorderRadius);
}

.filteringComponents_sortItemRenderer_88c,
.filteringComponents_typeItemRenderer_49f {
  height: 20px;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.FilesBrowserHeader_filters_ddb {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-8);
  background: var(--bgCardBase);
}

.FilesBrowserHeader_filters_ddb .FilesBrowserHeader_search_d3c {
    width: 240px;
  }

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

.FilesBrowserHeader_filters_ddb .FilesBrowserHeader_search_d3c {
      display: none;
  }
    }

.FilesBrowserHeader_mobileSearch_334 {
  display: none;
  border-bottom: 1px solid var(--borderDefault);
}

.FilesBrowserHeader_mobileSearch_334 .FilesBrowserHeader_search_d3c {
    width: 100%;
  }

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

.FilesBrowserHeader_mobileSearch_334 {
    display: flex;
    align-items: center;
    gap: var(--spacing-8);
    padding: var(--spacing-8);
    background: var(--bgCardBase);
}
  }

.FilesBrowserTable_container_5f0 {
  --visibleRows: 7;
  --cellPaddingX: var(--spacing-12);
  --cellPaddingY: var(--spacing-8);
  --cellHeight: 56px;
  --idealBodyHeight: calc(
    var(--cellHeight) * var(--visibleRows) + var(--visibleRows) * 1px
  );
  --modalMaxHeight: 80vh;
  --modalMargin: var(--spacing-32);
  --modalHeaderHeight: 52px;
  --filesBrowserHeaderHeight: 48px;
  --filesBrowserMobileHeaderHeight: 95px;
  --filesBrowserFooterHeight: 62px;
  --maxBodyHeight: calc(
    var(--modalMaxHeight) - (var(--modalMargin) * 2) - var(--modalHeaderHeight) -
      var(--filesBrowserHeaderHeight) - var(--filesBrowserFooterHeight)
  );
}@media screen and (max-width: 767px) {.FilesBrowserTable_container_5f0 {
    /* There isn't enough space for 7 rows on smaller phones (i.e. iphone SE) */
    --visibleRows: 4;

    --bottomSheetMaxHeight: 100vh;
    --bottomSheetVerticalSpace: 120px;
    --bottomSheetHeaderHeight: 65px;
    --maxBodyHeight: calc(
      var(--bottomSheetMaxHeight) - var(--bottomSheetVerticalSpace) -
        var(--bottomSheetHeaderHeight) - var(--filesBrowserMobileHeaderHeight) -
        var(--filesBrowserFooterHeight)
    );
}
  }.FilesBrowserTable_container_5f0 {
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: var(--tableShadow);
  border-top: 1px solid var(--borderDefault);
  overflow: hidden;
  box-sizing: border-box;
}.FilesBrowserTable_container_5f0 * {
    box-sizing: border-box;
  }.FilesBrowserTable_container_5f0 .FilesBrowserTable_header_b3f {
    position: sticky;
    top: 0;
    display: grid;
    grid-template-columns: 1fr 200px 90px;
    background: var(--bgTableHeaderDefault);
    border-bottom: 1px solid var(--borderDefault);
  }.FilesBrowserTable_selectable_d08:is(.FilesBrowserTable_container_5f0 .FilesBrowserTable_header_b3f) {
      grid-template-columns: auto 1fr 200px 90px;
    }.FilesBrowserTable_container_5f0 .FilesBrowserTable_header_b3f {

    overflow-y: scroll;
  }@supports (scrollbar-gutter: stable) {.FilesBrowserTable_container_5f0 .FilesBrowserTable_header_b3f {
      scrollbar-gutter: stable;
      overflow-y: auto;
  }
    }:is(.FilesBrowserTable_container_5f0 .FilesBrowserTable_header_b3f)  > * + * {
      border-left: 1px solid var(--borderDefault);
    }:is(.FilesBrowserTable_container_5f0 .FilesBrowserTable_header_b3f) .FilesBrowserTable_headerCell_7e0 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--spacing-8);
      padding: 6px var(--cellPaddingX);
      white-space: nowrap;
      font-weight: var(--fontWeightBold);
      cursor: pointer;
    }.FilesBrowserTable_alignRight_c17:is(:is(.FilesBrowserTable_container_5f0 .FilesBrowserTable_header_b3f) .FilesBrowserTable_headerCell_7e0) {
        justify-content: flex-end;
      }:is(.FilesBrowserTable_container_5f0 .FilesBrowserTable_header_b3f) .FilesBrowserTable_selectAllCell_944 {
      width: 30px;
      padding: 6px var(--spacing-8);
    }@media screen and (max-width: 767px) {.FilesBrowserTable_container_5f0 .FilesBrowserTable_header_b3f {
      display: none;
  }
    }.FilesBrowserTable_container_5f0 .FilesBrowserTable_bodyWrapper_d90 {
    position: relative;
    height: min(var(--idealBodyHeight), var(--maxBodyHeight));
    overflow-y: scroll;
    background: var(--bgTableCellDefault);
  }:is(.FilesBrowserTable_container_5f0 .FilesBrowserTable_bodyWrapper_d90) .FilesBrowserTable_body_29b {
      display: grid;
      grid-template-columns: 1fr 200px 90px;
    }.FilesBrowserTable_selectable_d08:is(:is(.FilesBrowserTable_container_5f0 .FilesBrowserTable_bodyWrapper_d90) .FilesBrowserTable_body_29b) {
        grid-template-columns: auto 1fr 200px 90px;
      }:is(:is(.FilesBrowserTable_container_5f0 .FilesBrowserTable_bodyWrapper_d90) .FilesBrowserTable_body_29b) .FilesBrowserTable_divider_9e1 {
        border-bottom: 1px solid var(--borderDefault);
        grid-column: 1/-1;
        height: 1px;
      }:is(:is(.FilesBrowserTable_container_5f0 .FilesBrowserTable_bodyWrapper_d90) .FilesBrowserTable_body_29b)  > *:not(.FilesBrowserTable_divider_9e1) {
        padding: var(--cellPaddingY) var(--cellPaddingX);
      }:is(:is(.FilesBrowserTable_container_5f0 .FilesBrowserTable_bodyWrapper_d90) .FilesBrowserTable_body_29b) .FilesBrowserTable_thumbnailContainer_6cb {
        position: relative;
        width: var(--spacing-40);
        height: var(--spacing-40);
        border-radius: var(--baseBorderRadius);
        border: 1px solid var(--borderLight);
        background: lightgray 50% / cover no-repeat;
        overflow: hidden;
      }:is(:is(.FilesBrowserTable_container_5f0 .FilesBrowserTable_bodyWrapper_d90) .FilesBrowserTable_body_29b) .FilesBrowserTable_checkboxCell_ddc {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
      }:is(:is(:is(.FilesBrowserTable_container_5f0 .FilesBrowserTable_bodyWrapper_d90) .FilesBrowserTable_body_29b) .FilesBrowserTable_checkboxCell_ddc) .FilesBrowserTable_checkbox_6d6 {
          padding: var(--spacing-20) var(--spacing-8);
        }:is(:is(.FilesBrowserTable_container_5f0 .FilesBrowserTable_bodyWrapper_d90) .FilesBrowserTable_body_29b) .FilesBrowserTable_filenameCell_7f0,:is(:is(.FilesBrowserTable_container_5f0 .FilesBrowserTable_bodyWrapper_d90) .FilesBrowserTable_body_29b) .FilesBrowserTable_filenameWrapper_ed7 {
        display: flex;
        gap: var(--spacing-8);
        flex-grow: 1;
        align-items: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }:is(:is(:is(.FilesBrowserTable_container_5f0 .FilesBrowserTable_bodyWrapper_d90) .FilesBrowserTable_body_29b) .FilesBrowserTable_filenameCell_7f0,:is(:is(.FilesBrowserTable_container_5f0 .FilesBrowserTable_bodyWrapper_d90) .FilesBrowserTable_body_29b) .FilesBrowserTable_filenameWrapper_ed7) .FilesBrowserTable_filename_65c {
          display: flex;
          flex-direction: column;
          min-width: 0;
        }:is(:is(:is(.FilesBrowserTable_container_5f0 .FilesBrowserTable_bodyWrapper_d90) .FilesBrowserTable_body_29b) .FilesBrowserTable_filenameCell_7f0,:is(:is(.FilesBrowserTable_container_5f0 .FilesBrowserTable_bodyWrapper_d90) .FilesBrowserTable_body_29b) .FilesBrowserTable_filenameWrapper_ed7) .FilesBrowserTable_size_b89 {
          display: none;
        }@media screen and (max-width: 767px) {:is(:is(:is(.FilesBrowserTable_container_5f0 .FilesBrowserTable_bodyWrapper_d90) .FilesBrowserTable_body_29b) .FilesBrowserTable_filenameCell_7f0,:is(:is(.FilesBrowserTable_container_5f0 .FilesBrowserTable_bodyWrapper_d90) .FilesBrowserTable_body_29b) .FilesBrowserTable_filenameWrapper_ed7) .FilesBrowserTable_size_b89 {
            display: block;
        }
          }:is(:is(.FilesBrowserTable_container_5f0 .FilesBrowserTable_bodyWrapper_d90) .FilesBrowserTable_body_29b) .FilesBrowserTable_activityCell_ba1 {
        display: flex;
        gap: var(--spacing-8);
        align-items: center;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
      }@media screen and (max-width: 767px) {:is(:is(.FilesBrowserTable_container_5f0 .FilesBrowserTable_bodyWrapper_d90) .FilesBrowserTable_body_29b) .FilesBrowserTable_activityCell_ba1 {
          gap: var(--spacing-4);
          place-content: end;
          /* TODO: Fix `AvatarGroup` component to get rid of this */
          padding-right: var(--spacing-16);
      }
        }:is(:is(.FilesBrowserTable_container_5f0 .FilesBrowserTable_bodyWrapper_d90) .FilesBrowserTable_body_29b) .FilesBrowserTable_sizeCell_e46 {
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }@media screen and (max-width: 767px) {:is(:is(.FilesBrowserTable_container_5f0 .FilesBrowserTable_bodyWrapper_d90) .FilesBrowserTable_body_29b) .FilesBrowserTable_sizeCell_e46 {
          display: none;
      }
        }:is(:is(.FilesBrowserTable_container_5f0 .FilesBrowserTable_bodyWrapper_d90) .FilesBrowserTable_body_29b) .FilesBrowserTable_selectedCell_f5f {
        background-color: var(--bgActiveMuted);
      }:is(:is(.FilesBrowserTable_container_5f0 .FilesBrowserTable_bodyWrapper_d90) .FilesBrowserTable_body_29b) .FilesBrowserTable_fetchMoreCell_adf {
        display: flex;
        justify-content: center;
        align-items: center;
        height: var(--cellHeight);
      }.FilesBrowserTable_fetchMoreCheckboxCell_d77:is(:is(:is(.FilesBrowserTable_container_5f0 .FilesBrowserTable_bodyWrapper_d90) .FilesBrowserTable_body_29b) .FilesBrowserTable_fetchMoreCell_adf) {
          padding: var(--spacing-8);
        }@media screen and (max-width: 767px) {
          :is(:is(:is(.FilesBrowserTable_container_5f0 .FilesBrowserTable_bodyWrapper_d90) .FilesBrowserTable_body_29b) .FilesBrowserTable_fetchMoreCell_adf):last-child {
            display: none;
          }
        }@media screen and (min-width: 768px) {
        :is(:is(.FilesBrowserTable_container_5f0 .FilesBrowserTable_bodyWrapper_d90) .FilesBrowserTable_body_29b)  > *:not(.FilesBrowserTable_divider_9e1) + * {
          border-left: 1px solid var(--borderDefault);
        }
      }@media screen and (max-width: 767px) {:is(.FilesBrowserTable_container_5f0 .FilesBrowserTable_bodyWrapper_d90) .FilesBrowserTable_body_29b {
        grid-template-columns: 1fr min-content;
    }

        .FilesBrowserTable_selectable_d08:is(:is(.FilesBrowserTable_container_5f0 .FilesBrowserTable_bodyWrapper_d90) .FilesBrowserTable_body_29b) {
          grid-template-columns: auto 1fr min-content;
        }

        :is(:is(.FilesBrowserTable_container_5f0 .FilesBrowserTable_bodyWrapper_d90) .FilesBrowserTable_body_29b) .FilesBrowserTable_contextMenu_75f {
          display: none;
        }
      }:is(.FilesBrowserTable_container_5f0 .FilesBrowserTable_bodyWrapper_d90) .FilesBrowserTable_cover_24d {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
    }:is(:is(.FilesBrowserTable_container_5f0 .FilesBrowserTable_bodyWrapper_d90) .FilesBrowserTable_cover_24d) .FilesBrowserTable_coverIcon_c73 {
        width: 64px;
        height: 64px;
        color: var(--colorIconLight);
      }

.SMSEditor_Toolbar_characterCounter_6c4 {
  align-items: center;
  display: flex;
  /* Allows for proper spacing with or without toolbar items */
  min-height: 32px;
  justify-content: center;
}

.SMSEditor_root_8f6 {
  --smsEditorMaxHeight: 370px;
  --smsEditorMinHeight: 150px;

  background-color: var(--formBackground);
  display: flex;
  flex-direction: column;
  /* Overflow applied to fix scrollbar issue on rounded corners */
  overflow: hidden;
}

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

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

.SMSEditor_editor_96e .ProseMirror {
    box-sizing: border-box;
    color: var(--colorTextDefault);
    font-size: var(--fontSizeBase);
    max-height: var(--smsEditorMaxHeight);
    min-height: var(--smsEditorMinHeight);
    outline: none;
    overflow-y: auto;
    padding: var(--spacing-16);
    word-break: break-word;
  }

.SMSEditor_editor_96e p {
    margin-bottom: 0;
  }

.SMSEditor_editor_96e.SMSEditor_withManualMinHeight_4ed .ProseMirror {
      min-height: inherit;
    }

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

.SMSForm_SMSForm_resetMargins_465 {
  margin: 0 !important;
}

.SMSForm_SMSForm_attachments_3a2 {
  max-height: 140px;
  overflow: hidden auto;
  display: flex;
  flex-grow: 1;
}

.ActivityFormFooterLayout_primaryActions_f47,
.ActivityFormFooterLayout_secondaryActions_1d0,
.ActivityFormFooterLayout_fields_1ca {
  display: flex;
  align-items: center;
  gap: var(--activityHorizontalGutter);
}

.ActivityFormFooterLayout_primaryActions_f47 {
  flex-grow: 1;
}

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

.ActivityFormFooterLayout_fields_1ca {
    order: -1;
    width: 100%;
    flex-grow: 1;
}
  }

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

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

:is(.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;
  }

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

.SMSForm_SMSFormLabel_root_3cb {
  display: flex;
  align-items: center;

  /* TODO: remove me after global form styles are deleted. */
  margin-bottom: 0;

  box-sizing: border-box;
}@media screen and (min-width: 768px) {.SMSForm_SMSFormLabel_root_3cb {
    width: 48px;
}
  }

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

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

.LinkEditModal_form_bc6 {
  margin: 0;
}

@layer atom {
  .RichTextEditor_Content_root_58e {
    all: revert;
    display: flex;
    max-height: var(--richTextEditorMaxHeight, none);
    overflow-y: auto;
  }

    .RichTextEditor_Content_root_58e:not(.RichTextEditor_Content_transparent_20f) {
      background-color: var(--formBackground);
    }

    .RichTextEditor_Content_root_58e.RichTextEditor_Content_small_5a4 {
      font-size: var(--fontSizeSmall);
    }

    .RichTextEditor_Content_root_58e  > [contenteditable='true'] {
      min-height: 110px;
    }

    .RichTextEditor_Content_root_58e .ProseMirror {
      width: 100%;
      outline: none;
    }

      :is(.RichTextEditor_Content_root_58e .ProseMirror) p:last-child {
        margin: 0;
      }

      /**
     * Invert margins inside list items to prevent the last p in a list from
     * creating space between it and the next list
     *
     * @see https://github.com/closeio/close-ui/pull/9873
     *
     * :has is a nicer solution but not supported by the Desktop App (Chrome 102)
    */
      :is(.RichTextEditor_Content_root_58e .ProseMirror) li p {
        margin: 0;
      }

      :is(.RichTextEditor_Content_root_58e .ProseMirror) li p + p {
        margin-top: var(--spacing-8);
      }

      :is(.RichTextEditor_Content_root_58e .ProseMirror) ol > li {
        list-style-type: decimal;
      }
        :is(:is(.RichTextEditor_Content_root_58e .ProseMirror) ol > li) ol > li {
          list-style-type: lower-alpha;
        }
          :is(:is(:is(.RichTextEditor_Content_root_58e .ProseMirror) ol > li) ol > li) ol > li {
            list-style-type: lower-roman;
          }

      :is(.RichTextEditor_Content_root_58e .ProseMirror) ul > li {
        list-style-type: disc;
      }
        :is(:is(.RichTextEditor_Content_root_58e .ProseMirror) ul > li) ul > li {
          list-style-type: circle;
        }
          :is(:is(:is(.RichTextEditor_Content_root_58e .ProseMirror) ul > li) ul > li) ul > li {
            list-style-type: square;
          }

      :is(.RichTextEditor_Content_root_58e .ProseMirror) p,:is(.RichTextEditor_Content_root_58e .ProseMirror)  > ul,:is(.RichTextEditor_Content_root_58e .ProseMirror)  > blockquote {
        margin-bottom: var(--spacing-8);
      }

      /* reset global type.css CSS for blockquotes and contents */
        :is(:is(.RichTextEditor_Content_root_58e .ProseMirror) blockquote),:is(:is(.RichTextEditor_Content_root_58e .ProseMirror) blockquote) p {
          font-size: inherit;
          font-style: inherit;
          font-weight: inherit;
          line-height: inherit;
        }

      :is(.RichTextEditor_Content_root_58e .ProseMirror) blockquote {
        color: var(--colorTextLight);
      }

      /* #region Placeholder plugin */
      :is(.RichTextEditor_Content_root_58e .ProseMirror) .emptyEditor::before {
        content: attr(data-placeholder);
        color: var(--colorTextLight);
        pointer-events: none;
        float: left;
        height: 0;
      }
      /* #endregion */

      /* #region Collaboration cursor plugin */
      :is(.RichTextEditor_Content_root_58e .ProseMirror) .RichTextEditor_Content_collaborationCursorCaret_304 {
        position: relative;
        border-left: 1px solid var(--borderDefault);
        border-right: 1px solid var(--borderDefault);
        margin-left: -1px;
        margin-right: -1px;
        pointer-events: none;
        word-break: normal;
      }

      :is(.RichTextEditor_Content_root_58e .ProseMirror) .RichTextEditor_Content_collaborationCursorLabel_f6d {
        position: absolute;
        left: -1px;
        top: -14px;
        border-radius: 3px 3px 3px 0;
        font-size: 12px;
        line-height: 1.5;
        font-weight: var(--fontWeightBold);
        padding: 0 var(--spacing-4);
        -webkit-user-select: none;
                user-select: none;
        white-space: nowrap;
      }
      /* #endregion */

      /* #region Mention plugin */
      :is(.RichTextEditor_Content_root_58e .ProseMirror) [data-type='mention'] {
        color: var(--colorLinkDefault);
      }
      /* #endregion */

      /* #region BackgroundColor */

      /**
     * These colors must match the keys in HighlightColorKey!
     * They should also be styled consistently with the named color class names
     * in the color picker menu
     */

      :is(.RichTextEditor_Content_root_58e .ProseMirror) [data-highlight-color='bgRed'] {
        background-color: var(--colorBgRichTextHighlightRed);
      }

      :is(.RichTextEditor_Content_root_58e .ProseMirror) [data-highlight-color='bgYellow'] {
        background-color: var(--colorBgRichTextHighlightYellow);
      }

      :is(.RichTextEditor_Content_root_58e .ProseMirror) [data-highlight-color='bgGreen'] {
        background-color: var(--colorBgRichTextHighlightGreen);
      }

      :is(.RichTextEditor_Content_root_58e .ProseMirror) [data-highlight-color='bgBlue'] {
        background-color: var(--colorBgRichTextHighlightBlue);
      }

      :is(.RichTextEditor_Content_root_58e .ProseMirror) [data-highlight-color='bgPurple'] {
        background-color: var(--colorBgRichTextHighlightPurple);
      }
      /* #endregion */

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

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

:is(.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;
}

.richtext_buttons_separator_c58 {
  all: initial;
  border-right: 1px solid var(--borderDefault);
  margin: var(--spacing-8);
}

.richtext_buttons_headingItem_717 {
  display: flex;
  align-items: center;
  column-gap: var(--spacing-8);
}

@layer atom {
  .RichTextEditor_Toolbar_toolbar_e44 {
    display: flex;
    box-sizing: border-box;
    align-items: stretch;
  }
}

.Mentions_MentionList_popover_afb {
  background-color: var(--bgPopover);
  border-radius: 7px;
  min-width: 310px;
}

.Mentions_MentionList_menu_714 {
  font-size: 14px;
  line-height: 20px;
  padding: var(--spacing-8);
}

.Mentions_MentionList_menuItem_b90 {
  cursor: pointer;
  padding: var(--spacing-8) var(--spacing-8);
  border-radius: 7px;
}

.Mentions_MentionList_menuItem_b90:hover,.Mentions_MentionList_menuItem_b90.Mentions_MentionList_highlighted_cf5 {
    background-color: var(--bgActiveMuted);
  }

.Mentions_MentionList_footer_116 {
  position: sticky;
  bottom: 0;
  padding: var(--spacing-12) var(--spacing-16);
  background-color: var(--surfaceBackgroundLight);
}

.MentionSectionItem_sectionWrapper_97e:not(:first-of-type) {
  margin-top: 8px;
}

.MentionGroupItem_textWrapper_cf5 {
  max-width: 250px;
}

.MentionUserItem_textWrapper_5b7 {
  max-width: 250px;
}

.RichTextEditor_Viewer_viewer_b1b {
  overflow-y: visible;
}

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

/* To have our styles match Figma we have to compensate for the extra padding
that small buttons have */
.ActivityHeader_ActivityHeader_smallButtonFix_92d {
  margin: -2px 0;
}

/** Compensating for extra padding in the comment component */
.ActivityHeader_ActivityHeader_comment_394 {
  margin: -3px 0;
}

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

.ActivityHeader_ActivityHeader_hoverActions_506  > * {
    visibility: hidden;
  }

.Activity:hover .ActivityHeader_ActivityHeader_hoverActions_506 > * {
    visibility: visible;
  }

.ActivityHeader_ActivityHeader_hoverActions_506.ActivityHeader_ActivityHeader_forceVisibility_3fc > * {
    visibility: visible;
  }

.ActivityHeader_ActivityHeader_title_597 {
  font-size: var(--fontSizeSmall);
  font-weight: var(--fontWeightBold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.ActivityHeader_ActivityHeader_title_597 {
    font-size: 16px;
}
  }

.ActivityHeader_ActivityHeader_titleLink_022 {
  align-items: center;
  color: var(--colorTextDefault);
  display: flex;
  gap: var(--spacing-8);
}

.ActivityHeader_ActivityHeader_titleLink_022:hover {
    color: var(--colorLinkDefault);
  }

.ActivityHeader_ActivityHeader_titleLink_022:focus {
    -webkit-text-decoration: none;
    text-decoration: none;
  }

.ActivityHeader_ActivityHeader_titleLink_022:focus .ActivityHeader_ActivityHeader_previewIconContainer_8ed {
      visibility: visible;
    }

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

.ActivityHeader_ActivityHeader_previewIconContainer_8ed {
  align-items: center;
  display: flex;
  visibility: hidden;
}

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

.ActivityHeader_ActivityHeader_previewIconContainer_8ed {
    display: none;
}
  }

.Activity:hover .ActivityHeader_ActivityHeader_previewIconContainer_8ed {
    visibility: visible;
  }

.ActivitySection_ActivitySection_root_806 {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: var(--spacing-8);
  justify-content: center;
  min-height: var(--activitySectionHeight);
  min-width: 0;
}.ActivitySection_ActivitySection_root_806.ActivitySection_ActivitySection_withPadding_441 {
    padding: var(--activityVerticalGutter) var(--activityHorizontalGutter);
  }

/* To have our styles match Figma we have to compensate for the extra padding
that small buttons have */
.SMSActivity_SMSActivity_smallButtonFix_d9e {
  margin: -2px 0;
}

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

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

.ActivityDotSeparator_root_2d5 {
  -webkit-user-select: none;
          user-select: none;
  color: var(--gray-40);
  text-align: center;
  margin: 0 var(--spacing-4);

  display: flex;
  align-items: center;
}

.InboxScreen_InboxScreen_inboxContainer_aa5 {
  flex: 1 0 100%;
}@media screen and (min-width: 768px) {.InboxScreen_InboxScreen_inboxContainer_aa5 {
    max-height: 100%;
    min-width: 800px;
}
  }@media screen and (max-width: 767px) {.InboxScreen_InboxScreen_inboxContainer_aa5 {
    position: relative;
    overflow-y: scroll;
}
  }.InboxScreen_InboxScreen_inboxContainer_aa5  > div {
    height: 100%;
  }


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

.CustomizePrimaryTabModal_CustomizePrimaryTabModal_customizePrimaryTabForm_7d7 {
  margin: 0;
}

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

.CustomizePrimaryTabModal_CustomizePrimaryTabModal_customizePrimaryTabForm_7d7 {
    max-height: 65vh;
}
  }

.CustomizePrimaryTabModal_CustomizePrimaryTabModal_loadingContainer_22c {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.InboxFilters_InboxFiltersBottomSheet_selectionCountBadge_df1 {
  display: inline-flex;
  height: 16px;
  min-width: 16px;

  align-items: center;
  justify-content: center;

  border-radius: 8px;

  background-color: var(--bgActiveMuted);
  color: var(--colorLinkDefault);

  font-size: 10px;

  margin-right: var(--spacing-8);
}

.InboxFilters_InboxFiltersForm_labelRow_efd {
  /* Needs a static height because the button shows up dynamically and shifts
   * the layout. */
  height: 26px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

/*
  Dot with a background, border, and pseudoelement

  1. background serves to mimic the background behind the button
  2. border is what we apply the button hover background to (which has an alpha channel)
  3. the pseudoelement remains blue throughout
*/
.ReviewPotentialLeadsButton_potentialLeadsDot_418 {
  --dotSize: 6px;
  background-color: var(--surfaceBackgroundDefault);
  border: 2px solid var(--surfaceBackgroundDefault);
  border-radius: 100%;
  height: var(--dotSize);
  position: absolute;
  right: 5px;
  top: 5px;
  width: var(--dotSize);
}
.ReviewPotentialLeadsButton_potentialLeadsDot_418::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: var(--dotSize);
    height: var(--dotSize);
    border-radius: 50%;
    background-color: var(--fillActive);
  }
.Btn:hover .ReviewPotentialLeadsButton_potentialLeadsDot_418 {
    border: 2px solid var(--buttonHoverBackgroundColor);
  }

.Drawer_measureWrapper_c36 {
  height: 0px;
}

.Drawer_overflowHidden_e2d {
  overflow: hidden;
}

.RNPushNotificationsBanner_banner_e00 {
  --offsetFix: calc(var(--spacing-16) * -1);
  margin-top: var(--offsetFix);
  margin-right: var(--offsetFix);
  margin-left: var(--offsetFix);
  margin-bottom: var(--spacing-16);

  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  padding: var(--spacing-12) var(--spacing-16);
  background-color: var(--bgInformationalMuted);
  border-bottom: 1px solid var(--borderDefault);
}

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

.InboxHeader_filters_aa6 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-12);
}

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

.InboxHeader_filters_aa6 {
    justify-content: flex-start;
    padding: var(--spacing-8) var(--spacing-16);
    overflow-x: auto;
}
  }

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

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

.InboxHeader_filter_1cc {
    justify-content: center;
    width: calc(50% - (var(--spacing-8) * 2) - 1px);
}
  }

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

.InboxHeader_filterWrapper_48c {
  margin-left: -20px;
  margin-right: -20px;
}

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

.InboxHeader_filterWrapper_48c {
    margin-left: -16px;
    margin-right: -16px;
}
  }

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

.InboxHeader_mobileTabsCorrection_d00 {
    margin-left: -16px;
    margin-right: -12px;
}
  }

.InboxHeader_priorityInboxSwitch_646 {
  white-space: nowrap;
}

.InboxHeaderTabs_root_7d8 {
  padding-bottom: var(--spacing-8);
  padding-top: var(--spacing-8);
  overflow-x: auto;
}@media screen and (max-width: 767px) {.InboxHeaderTabs_root_7d8 {
    padding-left: var(--spacing-16);
    padding-right: var(--spacing-16);
}
  }

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

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

  /* Any element or a tree of elements inside the ellipsis container
     need to be displayed inline to work properly. <LeadInfo> is an
     example of such a component. */
}

.CollapsedItemLayout_compact_ellipsis_b00 * {
    display: inline;
  }

.CollapsedItemLayout_compact_wrapper_92b {
  display: flex;
  align-items: flex-start;
  width: 100%;
  padding: var(--spacing-12) var(--spacing-16);
  box-sizing: border-box;
  background-color: var(--surfaceBackgroundDefault);
  cursor: pointer;

  /* Replicates ".item.checked > div" styles from css/mobile/inbox-page.css. */
}

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

/* We render both the unselected Icon and the selected Icon, but change which is
     visible via CSS.
     When the wrapper has a checked checkbox, we show the selected icon. When it does
     not (the default) we show the item icon. */

.CollapsedItemLayout_compact_wrapper_92b .CollapsedItemLayout_compact_unselectedIcon_54e {
    display: block;
  }

.CollapsedItemLayout_compact_wrapper_92b .CollapsedItemLayout_compact_selectedIcon_254 {
    display: none;
  }

.CollapsedItemLayout_compact_wrapper_92b.CollapsedItemLayout_compact_checkboxHidden_e83:has(input:checked) .CollapsedItemLayout_compact_unselectedIcon_54e {
      display: none;
    }

.CollapsedItemLayout_compact_wrapper_92b.CollapsedItemLayout_compact_checkboxHidden_e83:has(input:checked) .CollapsedItemLayout_compact_selectedIcon_254 {
      display: block;
    }

/* These .afterCheckboxWrapper and .afterIconWrapper mumbo jumbo
   are used to show ellipsis in flex containers, which is not possible
   without having a fixed width for the container. */
.CollapsedItemLayout_compact_afterCheckboxWrapper_0f4 {
  --checkboxWidth: 26px;

  display: flex;
  align-items: flex-start;
  width: calc(100% - var(--checkboxWidth));
}
.CollapsedItemLayout_compact_checkboxHidden_e83 .CollapsedItemLayout_compact_afterCheckboxWrapper_0f4 {
    width: 100%;
  }

.CollapsedItemLayout_compact_afterIconWrapper_cb1 {
  --iconSize: 32px;
  --gapToIcon: var(--spacing-8);

  width: calc(100% - var(--iconSize) - var(--gapToIcon));
  margin-left: var(--gapToIcon);
}

.CollapsedItemLayout_compact_checkboxWrapper_8a2 {
  flex-shrink: 0;
}

.CollapsedItemLayout_compact_checkbox_f00 {
  /* increase checkbox clickable area without affecting the layout */
  padding: var(--spacing-16);
  padding-right: var(--spacing-12);
  margin: calc(var(--spacing-8) * -1) 0 0 calc(var(--spacing-16) * -1);
}

.CollapsedItemLayout_compact_iconWrapper_d12 {
  flex-shrink: 0;
}

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

.CollapsedItemLayout_compact_leadInfoWrapper_36c .CollapsedItemLayout_compact_ellipsis_b00 {
    /* So ellipsis has the same color as the text */
    color: var(--gray-50);
  }

.CollapsedItemLayout_compact_detailsWrapper_0ba {
  flex-shrink: 0;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-16);
  margin-left: var(--spacing-8);
}

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

.CollapsedItemLayout_compact_secondaryTitleWrapper_1af {
  margin-top: var(--spacing-4);
  line-height: 16px;
  display: flex;
  align-items: center;
  gap: var(--spacing-8);

  /* So ellipsis has the same color as the text */
  color: var(--colorTextLight);
}

.CollapsedItemLayout_compact_assigneeWrapper_033 {
  margin-top: var(--spacing-8);
}

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

  /* Any element or a tree of elements inside the ellipsis container
     need to be displayed inline to work properly. <LeadInfo> is an
     example of such a component. */
}

.CollapsedItemLayout_fluid_ellipsis_dc1 * {
    display: inline;
  }

.CollapsedItemLayout_fluid_wrapper_52a {
  display: flex;
  align-items: center;
  width: 100%;
  height: 42px;
  padding: 0 var(--spacing-24) 0 0;
  box-sizing: border-box;
  background-color: var(--surfaceBackgroundDefault);
  cursor: pointer;
}

.CollapsedItemLayout_fluid_wrapper_52a:hover {
    background-color: var(--bgTableCellHover);
  }

.CollapsedItemLayout_fluid_activeIndicatorWrapper_18b {
  width: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.CollapsedItemLayout_fluid_checkboxWrapper_66a {
  flex-shrink: 0;
}

label.CollapsedItemLayout_fluid_checkbox_2fe {
  /* increase checkbox clickable area without affecting the layout */
  padding: var(--spacing-16) var(--spacing-12) var(--spacing-16) 0;

  /* NOTE: leaving left area alone because active indicator has a tooltip and
   *       we want to not cover it. The active indicator also handles toggle
   *       since most of it is within 16px of the checkbox.
   */
}

.CollapsedItemLayout_fluid_iconWrapper_ae4 {
  flex-shrink: 0;
}

.CollapsedItemLayout_fluid_leadInfoWrapper_8b4 {
  flex: 0 0 243px;
  margin-left: var(--spacing-8);
}

.CollapsedItemLayout_fluid_leadButtonsWrapper_258 {
  flex: 0 0 243px;
  margin-left: var(--spacing-8);
}

.CollapsedItemLayout_fluid_titleWrapper_fbe {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
  gap: var(--spacing-4);
  margin-left: var(--spacing-40);
  font-size: 13px;
  overflow: hidden;
}

.CollapsedItemLayout_fluid_titleWrapper_fbe .CollapsedItemLayout_fluid_secondaryTitleWrapper_958 {
    flex: 1;
    margin-left: var(--spacing-8);

    /* So ellipsis has the same color as the text */
    color: var(--colorTextLight);
  }

.CollapsedItemLayout_fluid_titleWrapper_fbe .CollapsedItemLayout_fluid_inboxIconsWrapper_003 {
    flex-shrink: 0;
    color: var(--gray-50);

    /* This fixes icon misalignment. */
  }

:is(.CollapsedItemLayout_fluid_titleWrapper_fbe .CollapsedItemLayout_fluid_inboxIconsWrapper_003) span {
      display: flex;
    }

.CollapsedItemLayout_fluid_contactButtonsWrapper_2d3 {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  margin-left: var(--spacing-8);
}

.CollapsedItemLayout_fluid_visiblyHidden_b2a:is(.CollapsedItemLayout_fluid_contactButtonsWrapper_2d3 .CollapsedItemLayout_fluid_contactButtons_725) {
      visibility: hidden;
    }

.CollapsedItemLayout_fluid_wrapper_52a:hover .CollapsedItemLayout_fluid_visiblyHidden_b2a:is(.CollapsedItemLayout_fluid_contactButtonsWrapper_2d3 .CollapsedItemLayout_fluid_contactButtons_725) {
        visibility: visible;
      }

.CollapsedItemLayout_fluid_removeFromDom_b69:is(.CollapsedItemLayout_fluid_contactButtonsWrapper_2d3 .CollapsedItemLayout_fluid_contactButtons_725) {
      display: none;
    }

.CollapsedItemLayout_fluid_wrapper_52a:hover .CollapsedItemLayout_fluid_removeFromDom_b69:is(.CollapsedItemLayout_fluid_contactButtonsWrapper_2d3 .CollapsedItemLayout_fluid_contactButtons_725) {
        display: block;
      }

.CollapsedItemLayout_fluid_commentThreadWrapper_ad1,
.CollapsedItemLayout_fluid_leadBadgesWrapper_e05 {
  margin-left: var(--spacing-8);
}

.CollapsedItemLayout_fluid_dateWrapper_31b {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  justify-content: flex-end;
  width: 128px;
}

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

.DateAndAssignee_wrapper_703 {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  white-space: nowrap;
}

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

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

.DateAndAssignee_assignee_c20 {
    margin-left: 0;
}
  }

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

.DateAndAssignee_dateWrapper_8e6.DateAndAssignee_overdue_49f {
    color: var(--colorIconDanger);
  }

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

/* required to overwrite the specificity of .leadInfoWrapper */
.EmailThreadCount_badgeWrapper_46d > * {
  display: inline-flex;
}

.ExpandedItemLayout_wrapper_477 {
  border: 1px solid var(--borderDefault);
  border-radius: 7px;
  background-color: var(--bgCardBase);

  /* ListKeyboardNavigable shows a focus on the left border.
     We need to hide it. */
}

.ExpandedItemLayout_wrapper_477::before {
    display: none;
  }

.ExpandedItemLayout_wrapper_477.ExpandedItemLayout_compact_de9 {
    border-radius: 0;
  }

.ExpandedItemLayout_header_22b {
  display: flex;
  align-items: flex-start;
  width: 100%;
  padding: var(--spacing-16);
  box-sizing: border-box;
  cursor: pointer;
}

.ExpandedItemLayout_compact_de9 .ExpandedItemLayout_header_22b {
    border: none;
  }

.ExpandedItemLayout_XButtonWrapper_89e {
  display: inline-flex;
  flex-shrink: 0;
}

.ExpandedItemLayout_titleWrapper_090 {
  flex: 1;
  display: flex;
  align-items: center;
  /* 2px is set to compensate alignment with the Icon. */
  padding-top: 2px;
  padding-right: var(--spacing-32);
  padding-left: var(--spacing-8);
  gap: var(--spacing-8);
  line-height: 20px;
  overflow-wrap: anywhere;
}

.ExpandedItemLayout_compact_de9 .ExpandedItemLayout_titleWrapper_090 {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-4);
    padding: 0 var(--spacing-12);
  }

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

.ExpandedItemLayout_compact_de9 .ExpandedItemLayout_inboxActionsWrapper_7ac {
    margin: var(--spacing-8) var(--spacing-16) 0;
    padding-bottom: var(--spacing-4);
  }

.ExpandedItemLayout_leadInfoBox_54f {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  column-gap: var(--spacing-8);
  margin: 0 var(--spacing-16);
  padding: var(--spacing-24) 0;
  box-sizing: border-box;
  border-top: 1px solid var(--borderLight);
}

.ExpandedItemLayout_compact_de9 .ExpandedItemLayout_leadInfoBox_54f {
    flex-direction: column;
    margin: var(--spacing-8) var(--spacing-16) var(--spacing-16);
    padding: var(--spacing-16);
    background-color: var(--surfaceBackgroundLight);
    border: 0.5px solid var(--borderDefault);
    border-radius: 7px;
  }

.ExpandedItemLayout_leadButtonsWrapper_802 {
  margin: var(--spacing-12) 0 0;
}

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

.InboxActions_inboxActions_c4d {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);

  /* "Clearfix" of BackboneView wrapper div so all buttons are on the same line.
     TODO: Remove once SnoozeMenu is rolled out to all users */
}.InboxActions_inboxActions_c4d  > div {
    display: flex;
  }

.InboxItemBadges_container_6b8,
.InboxItemBadges_item_ffd {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.InboxItemBadges_containerCollapsed_238 {
  gap: var(--spacing-4);
}

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

.InboxItemIcon_icon_aa2 {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--colorIconNeutralWhite);
  box-sizing: border-box;
}.InboxItemIcon_icon_aa2.InboxItemIcon_mini_f74 {
    width: 24px;
    min-width: 24px;
    height: 24px;
  }.InboxItemIcon_icon_aa2.InboxItemIcon_regular_478 {
    width: 32px;
    min-width: 32px;
    height: 32px;
  }.InboxItemIcon_icon_aa2.InboxItemIcon_voicemail_37c {
    background-color: var(--colorBgActivityDefault);
    color: var(--colorIconActivityMissedCall);
    border: 1px solid var(--borderDefault);
  }.InboxItemIcon_icon_aa2.InboxItemIcon_missed_call_447 {
    background: var(--colorBgActivityDefault);
    color: var(--colorIconActivityMissedCall);
    border: 1px solid var(--borderDefault);
  }.InboxItemIcon_icon_aa2.InboxItemIcon_answered_detached_call_940 {
    background-color: var(--colorBgActivityCall);
    color: var(--colorIconActivityCall);
  }.InboxItemIcon_icon_aa2.InboxItemIcon_incoming_sms_017 {
    background-color: var(--colorBgActivitySMS);
    color: var(--colorIconActivitySMS);
  }.InboxItemIcon_icon_aa2.InboxItemIcon_incoming_whatsapp_message_12a {
    background-color: var(--colorBgActivityWhatsApp);
  }.InboxItemIcon_icon_aa2.InboxItemIcon_incoming_email_5e5,.InboxItemIcon_icon_aa2.InboxItemIcon_email_followup_a2f,.InboxItemIcon_icon_aa2.InboxItemIcon_lead_suggestion_incoming_email_ab7 {
    background: var(--colorBgActivityEmail);
    color: var(--colorIconActivityEmail);
  }.InboxItemIcon_icon_aa2.InboxItemIcon_lead_055 {
    background-color: var(--colorBgActivityTask);
    color: var(--colorIconActivityTask);
  }.InboxItemIcon_icon_aa2.InboxItemIcon_opportunity_due_39a,.InboxItemIcon_icon_aa2.InboxItemIcon_opportunities_awaiting_action_notification_936 {
    background-color: var(--colorBgActivityOpportunity);
    color: var(--colorIconActivityOpportunity);
  }.InboxItemIcon_icon_aa2.InboxItemIcon_selected_791 {
    background-color: var(--colorBrandBlue);
  }

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

:is(.SearchCombobox_SearchComboboxSection_listItem_0d3,.SearchCombobox_SearchComboboxSection_menuList_f61) h3 {
    margin: 0;
  }

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

.LeadSearchCombobox_LeadSearchComboboxItem_item_8ed {
  background-color: var(--bgMenuItemDefault);
  cursor: pointer;
}

.LeadSearchCombobox_LeadSearchComboboxItem_item_8ed.LeadSearchCombobox_LeadSearchComboboxItem_isLastItem_c18 {
    border-bottom-left-radius: var(--popoverBorderRadius);
    border-bottom-right-radius: var(--popoverBorderRadius);
  }

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

.LeadSearchCombobox_LeadSearchComboboxItem_badgeContainer_880 {
  max-width: 160px;
}

.AssignLeadModal_comboboxContainer_5c9 {
  flex: 1;
}

.LeadButtons_wrapper_47e {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}@media screen and (max-width: 767px) {.LeadButtons_wrapper_47e {
    flex-wrap: wrap;
}
  }

.LeadInfo_childrenWrapper_715 {
  padding: 0 0 var(--spacing-24) 0;
  line-height: 16px;
}

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

.LeadInfo_childrenWrapper_715 {
    line-height: 20px;
}
  }

.LeadInfo_infoWrapper_914 {
  line-height: 16px;
}

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

.leadSuggestionIncomingEmail_expanded_contentContainer_cee {
  background-color: var(--surfaceBackgroundLight);
  border-radius: var(--baseInputBorderRadius);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  padding: var(--spacing-16);
}

.opportunities_OpportunitySuggestedAction_actionWrapper_c71 {
  display: flex;
  gap: var(--spacing-8);
  flex-direction: row;
  justify-content: flex-end;
}.opportunities_OpportunitySuggestedAction_actionWrapper_c71.opportunities_OpportunitySuggestedAction_reverse_7ec {
    flex-direction: row-reverse;
  }

.opportunitiesAwaitingAction_InboxNotificationOpportunitySuggestedAction_wrapper_1af {
  display: flex;
  flex-direction: column;
  max-width: 640px;
  padding: var(--spacing-16);
  gap: var(--spacing-16);
  border: 1px solid var(--borderDefault);
  border-radius: var(--borderRadiusMedium);
}

.opportunitiesAwaitingAction_InboxNotificationOpportunitySuggestedAction_leadNameWrapper_eee {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

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

.opportunitiesAwaitingAction_InboxNotificationOpportunitySuggestedAction_actionWrapper_390 {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-16);
  gap: var(--spacing-16);
  border-radius: var(--borderRadiusMedium);
  background-color: var(--surfaceBackgroundLight);
}

.LeadOpportunityBadge_value_5e3 {
  /* We need to keep these font-sizes in sync with Badge, for both expanded
   * and collapsed */
  font-size: 11px;
  line-height: 1;
  color: var(--colorTextDefault);
}

.LeadOpportunityBadge_value_5e3.LeadOpportunityBadge_collapsed_d1d {
    font-size: 10px;
  }

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

.LeadOpportunityBadge_tooltipTitle_38a {
  font-weight: bold;
}

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

.badges_LeadStatusSelectBadge_leadStatusSelectTrigger_f7d {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-4);
  cursor: pointer;
  width: 100%;

  /* We need to keep these font-sizes in sync with Badge, for both expanded
   * and collapsed */
  font-size: 11px;
  line-height: 1;
  color: var(--colorTextDefault);
}

.badges_LeadStatusSelectBadge_leadStatusSelectTrigger_f7d.badges_LeadStatusSelectBadge_collapsed_158 {
    font-size: 10px;
  }

.badges_LeadStatusSelectBadge_label_a11 {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.MediaPlayer_MediaPlayerContainer_container_31d {
  box-sizing: border-box;
  border-radius: inherit;
  border-color: var(--borderDefault);
  background-color: var(--surfaceBackgroundDefault);
  overflow: hidden;
}.MediaPlayer_MediaPlayerContainer_container_31d.MediaPlayer_MediaPlayerContainer_withBorder_39b {
    --mediaPlayerBorderRadius: 7px;
    border-radius: var(--mediaPlayerBorderRadius);
    border: 1px solid var(--borderDefault);
  }

.MediaPlayer_MediaPlayerButton_button_222 {
  /**
   * The transparent button is 26px tall because the border is still present
   * Removing `border-width` prevents the control area from exceeding its 24px height
   */
  border-width: 0 !important;

  position: relative;

  /**
   * The media button should not get a background when active. Instead, it
   * changes to the link color and displays a small dot at the bottom.
   */
}.MediaPlayer_MediaPlayerButton_button_222.MediaPlayer_MediaPlayerButton_isActive_d08:not(:hover) {
      background-color: transparent;
      color: var(--colorLinkDefault);
    }.MediaPlayer_MediaPlayerButton_button_222.MediaPlayer_MediaPlayerButton_isActive_d08 svg {
      color: var(--colorLinkDefault);
    }.MediaPlayer_MediaPlayerButton_button_222.MediaPlayer_MediaPlayerButton_isActive_d08:after {
      content: '';
      display: block;
      width: 3px;
      height: 3px;
      position: absolute;
      border-radius: 100%;
      bottom: 2px;
      left: 50%;
      transform: translate(-50%, 0);
      background-color: var(--colorLinkDefault);
    }

/**
 * This is needed to make the tooltip appear at the correct position.
 * Without it, the tooltip originates from the bottom of the button text, not the entire button.
 */
.ControlsSection_PlaybackRateSelect_tooltipTarget_af2 {
  display: block;
}

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

.ControlsSection_controls_035 {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding: 10px var(--spacing-12);
  background-color: var(--surfaceBackgroundDefault);
}

.ControlsSection_playPauseButton_a82 {
  --size: 24px;
  --iconSize: 14px;
  --colorFocus: var(--colorBlue20);

  -webkit-appearance: none;
  border: none;
  padding: 0;

  width: var(--size);
  height: var(--size);
  border-radius: 100%;
  background-color: var(--colorIconDefault);
  color: var(--fillLight);
  display: grid;
  place-content: center;
  transition: opacity 0.3s;
}

.ControlsSection_playPauseButton_a82:hover,.ControlsSection_playPauseButton_a82:active {
    opacity: 0.8;
  }

.ControlsSection_playPauseButton_a82:focus-visible {
    outline: 1px solid var(--colorFocus);
  }

.ControlsSection_playPauseButton_a82:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

.ControlsSection_playPauseButton_a82 svg {
    display: block;
    width: var(--iconSize);
    height: var(--iconSize);
  }

.ControlsSection_timestamps_e5e {
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  white-space: nowrap;
}

.ControlsSection_ScrubBar_scrubBar_c64 {
  /* Height of the full element  */
  --scrubBarContainerHeight: var(--spacing-16);

  /* Height of individual bars */
  --scrubBarHeight: var(--spacing-4);

  --scrubBarRadius: 2px;
  --scrubBarBg: var(--surfaceBackgroundDark);
  --playheadSize: var(--spacing-12);
  --playheadColor: var(--colorIconDefault);

  --hitboxAdjustment: 2px;

  /**
   * Borrow additional space above/below the scrub bar.
   * This allows the hitbox to be slightly larger than the
   * layout would allow. When the user is hovering over the bar,
   * it will be easier to keep the tooltip from going away.
   * Negative margin is used because the bar needs to show in multiple
   * places (compact, normal) and should respect the gaps/spacing of the
   * surrounding context.
   */
  height: calc(var(--scrubBarContainerHeight) + var(--hitboxAdjustment) * 2);
  margin: calc(var(--hitboxAdjustment) * -1) 0;

  position: relative;
  touch-action: none;
}

.ControlsSection_ScrubBar_scrubBar_c64:has(.ControlsSection_ScrubBar_playhead_06a) {
    cursor: pointer;
  }

.ControlsSection_ScrubBar_scrubBar_c64:not(.ControlsSection_ScrubBar_scrubBarContent_bdf) .ControlsSection_ScrubBar_bars_c78 {
      background-color: var(--scrubBarBg);
    }

.ControlsSection_ScrubBar_scrubBar_c64:not(.ControlsSection_ScrubBar_scrubBarContent_bdf) .ControlsSection_ScrubBar_elapsed_746 {
      background-color: var(--playheadColor);
    }

.ControlsSection_ScrubBar_scrubBar_c64:not(.ControlsSection_ScrubBar_scrubBarContent_bdf) .ControlsSection_ScrubBar_buffered_4f8 {
      background-color: var(--colorFillScrubBarLoaded);
    }

.ControlsSection_ScrubBar_scrubBar_c64,
.ControlsSection_ScrubBar_bars_c78 {
  width: 100%;
  display: grid;
  align-items: center;
}

:is(.ControlsSection_ScrubBar_scrubBar_c64,.ControlsSection_ScrubBar_bars_c78)  > * {
    grid-area: 1 / 1;
    z-index: 1;
  }

.ControlsSection_ScrubBar_playhead_06a {
  box-sizing: border-box;
  position: absolute;
  left: calc(var(--mediaPlayerElapsed) * 100%);
  height: var(--playheadSize);
  width: var(--playheadSize);
  background-color: var(--playheadColor);
  border: 2px solid var(--fillLight);
  border-radius: 100%;
  transform: translateX(-50%);
}

.ControlsSection_ScrubBar_bars_c78 {
  height: var(--scrubBarHeight);
  border-radius: var(--scrubBarRadius);
  overflow: hidden;
}

.ControlsSection_ScrubBar_bars_c78  > * {
    height: 100%;
    width: 100%;
  }

.ControlsSection_ScrubBar_elapsed_746 {
  --progress: var(--mediaPlayerElapsed);
}

.ControlsSection_ScrubBar_progress_6cc {
  transform-origin: left;
  transform: scale(var(--progress, 0), 1);
}

.ControlsSection_ScrubBar_skeleton_254 {
  --size: 6px;
  background-size: var(--size) var(--size);
  animation: ControlsSection_ScrubBar_moveHorizontal_bc4 0.25s linear infinite reverse;
  background-image: linear-gradient(
    -45deg,
    var(--colorIconLight) 25%,
    var(--scrubBarBg) 25%,
    var(--scrubBarBg) 50%,
    var(--colorIconLight) 50%,
    var(--colorIconLight) 75%,
    var(--scrubBarBg) 75%,
    var(--scrubBarBg)
  );
}

@keyframes ControlsSection_ScrubBar_moveHorizontal_bc4 {
  0% {
    background-position: var(--size) 0;
  }
  100% {
    background-position: 0 0;
  }
}

.ControlsSection_ScrubBar_hoverInfoPosition_e1e {
  pointer-events: none;
  position: absolute;
  left: calc(var(--mediaPlayerPointer) * 100%);
  height: var(--playheadSize);
  width: var(--playheadSize);
  transform: translateX(-50%);
}

/**
 * TODO: These styles are copied from Tooltip. The scrub bar info cant directly use the Tooltip atom
 * because of some nuances with how the positioning works. We should either update Tooltip to support
 * custom use cases, or otherwise find a way to share the styles.
 */
.ControlsSection_ScrubBar_hoverInfoContainer_317 {
  pointer-events: none;
  width: max-content;
  word-wrap: break-word;
  opacity: 0.95;
  z-index: var(--zIndexTooltips);
}

.ControlsSection_ScrubBar_hoverInfoContent_175 {
  font-size: 11px;
  line-height: 1.5;
  padding: 7px;
  border-radius: 3px;
  color: var(--colorTextNeutralWhite);
  background: var(--colorBgTooltip);
  text-align: center;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  text-wrap: balance;
}

.ControlsSection_ScrubBar_arrow_3c9 {
  fill: var(--colorBgTooltip);
}

/**
 * Ensure there is a border between each player section
 */
.MediaPlayer_MediaPlayerSection_playerSection_582 {
  border-color: inherit;
  border-style: solid;
  border-width: 1px 0 0 0;

  /* Hide the border for the first visible child supports up to */
}
.MediaPlayer_MediaPlayerSection_playerSection_582:first-child,.MediaPlayer_MediaPlayerSection_playerSection_582.MediaPlayer_MediaPlayerSection_isHidden_347:first-child + .MediaPlayer_MediaPlayerSection_playerSection_582,.MediaPlayer_MediaPlayerSection_playerSection_582.MediaPlayer_MediaPlayerSection_isHidden_347:first-child + .MediaPlayer_MediaPlayerSection_playerSection_582.MediaPlayer_MediaPlayerSection_isHidden_347 + .MediaPlayer_MediaPlayerSection_playerSection_582 {
    border-top-width: 0;
  }
.MediaPlayer_MediaPlayerSection_playerSection_582.MediaPlayer_MediaPlayerSection_isHidden_347 {
    display: none;
  }

.MediaPlayerMessage_message_eba {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-16) var(--spacing-12);
  background-color: var(--surfaceBackgroundLight);
}

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

.MediaPlayerMessage_children_fe3 {
  flex: 1;
}

.VideoPlayerSection_ControlActionButton_button_b58 {
  color: var(--white);
  padding: 5px;
  transition: opacity 200ms var(--easeInOutQuad);
  cursor: pointer;
}.VideoPlayerSection_ControlActionButton_button_b58:not(:hover):not(:focus-visible) {
    opacity: 0.85;
  }

.VideoPlayerSection_video_047 {
  --playIconSize: 80px;

  box-sizing: border-box;
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
  background-color: var(--videoBgColor, black);

  /**
   * Videos that do not adhere to the aspect ratio will be shown with "black bars".
   * This ensures all videos take up the same height in the UI regardless of how they are recorded.
   */
  aspect-ratio: var(--aspectRatio, 16/9);
}.VideoPlayerSection_video_047 video,.VideoPlayerSection_video_047 img {
    position: absolute;
    inset: 0;
    object-fit: contain;
    height: 100%;
    width: 100%;
  }.VideoPlayerSection_video_047.VideoPlayerSection_posterImageCover_4ac img {
    object-fit: cover;
    object-position: center;
  }.VideoPlayerSection_video_047 .VideoPlayerSection_posterContent_c09 {
    position: relative; /* Allows child content to prefer position: absolute instead of centered content */
    overflow: hidden;
    display: grid;
    place-content: center;
    height: 100%;
    width: 100%;
  }.VideoPlayerSection_video_047 .VideoPlayerSection_controls_3f4 {
    --overlayOpacity: 0;
    --playPauseButtonOpacity: 0;

    z-index: 1;
    cursor: pointer;
    position: absolute;
    inset: 0;
    display: grid;
  }:is(.VideoPlayerSection_video_047 .VideoPlayerSection_controls_3f4)  > * {
      grid-area: 1/1;
    }/* Overlay */:is(.VideoPlayerSection_video_047 .VideoPlayerSection_controls_3f4):before {
      content: '';
      z-index: -1;
      position: absolute;
      inset: 0;
      background-color: var(--black);
      opacity: var(--overlayOpacity);
      transition: opacity 200ms var(--easeInOutQuad);
    }.VideoPlayerSection_video_047:hover :is(.VideoPlayerSection_video_047 .VideoPlayerSection_controls_3f4),.VideoPlayerSection_video_047:not(.VideoPlayerSection_isPlaying_522) :is(.VideoPlayerSection_video_047 .VideoPlayerSection_controls_3f4) {
      --overlayOpacity: 0.35;
    }:is(.VideoPlayerSection_video_047 .VideoPlayerSection_controls_3f4) .VideoPlayerSection_playPauseButton_98c {
      display: grid;
      place-content: center;
    }/*
     * The play and pause buttons are always rendered, but with different opacities.
     * The main reason is so that the play button can fade away without flickering to a pause button
     * during the exit transition.
     */:is(.VideoPlayerSection_video_047 .VideoPlayerSection_controls_3f4) .VideoPlayerSection_playButton_6bb,:is(.VideoPlayerSection_video_047 .VideoPlayerSection_controls_3f4) .VideoPlayerSection_pauseButton_e4b {
      grid-area: 1/1;
      width: var(--playIconSize);
      height: var(--playIconSize);
      opacity: var(--playPauseButtonOpacity);
      transition: opacity 200ms var(--easeInOutQuad);
      color: var(--white);
    }:is(:is(.VideoPlayerSection_video_047 .VideoPlayerSection_controls_3f4) .VideoPlayerSection_playButton_6bb,:is(.VideoPlayerSection_video_047 .VideoPlayerSection_controls_3f4) .VideoPlayerSection_pauseButton_e4b) svg {
        width: var(--playIconSize);
        height: var(--playIconSize);
      }.VideoPlayerSection_video_047:not(.VideoPlayerSection_isPlaying_522) :is(.VideoPlayerSection_video_047 .VideoPlayerSection_controls_3f4) {
      --playPauseButtonOpacity: 0.75; /** Partial button opacity when not playing */
    }.VideoPlayerSection_video_047:hover :is(.VideoPlayerSection_video_047 .VideoPlayerSection_controls_3f4) {
      --playPauseButtonOpacity: 1; /** Full button opacity on hover */
    }.VideoPlayerSection_video_047.VideoPlayerSection_isPlaying_522 :is(:is(.VideoPlayerSection_video_047 .VideoPlayerSection_controls_3f4) .VideoPlayerSection_playButton_6bb) {
        opacity: 0 !important;
      }/**
     * Ensure a pause button never appears unless you are hovering
     * over a video that is currently playing.
     */.VideoPlayerSection_video_047:not(.VideoPlayerSection_isPlaying_522) :is(:is(.VideoPlayerSection_video_047 .VideoPlayerSection_controls_3f4) .VideoPlayerSection_pauseButton_e4b),.VideoPlayerSection_video_047.VideoPlayerSection_isPlaying_522:not(:hover) :is(:is(.VideoPlayerSection_video_047 .VideoPlayerSection_controls_3f4) .VideoPlayerSection_pauseButton_e4b) {
        opacity: 0 !important;
      }.VideoPlayerSection_video_047 .VideoPlayerSection_actions_b0e {
    place-self: end;
    display: flex;
    gap: var(--spacing-4);
    padding: var(--spacing-8);
    transition: opacity 200ms var(--easeInOutQuad);
  }.VideoPlayerSection_video_047.VideoPlayerSection_isPlaying_522:not(:hover) :is(.VideoPlayerSection_video_047 .VideoPlayerSection_actions_b0e) {
      opacity: 0;
    }

.HTMLEditor_root_962 {
  --editorDefaultHeight: 160px;
  --proseMirrorMaxHeight: 425px;

  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--colorBgEmailEditor);
}

.HTMLEditor_root_962.HTMLEditor_fullHeight_fa2 {
    height: 100%;
    --proseMirrorMaxHeight: reset;
  }

.HTMLEditor_withBorder_ef9 {
  border: 1px solid var(--borderDefault);
  border-radius: var(--baseInputBorderRadius);
  /* Overflow applied to fix scrollbar issue on rounded corners */
  overflow: hidden;
}

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

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

.HTMLEditor_htmlView_d04 {
  margin: 0; /* override global */
  min-height: var(--editorDefaultHeight);
  box-shadow: none;
  box-sizing: border-box;
  padding: var(--spacing-8);
  border: 0;
  width: 100%;
  resize: vertical;
  font-family: 'Courier New', Courier, monospace;
  background-color: transparent;
  color: var(--colorTextNeutralBlack);

  /* override global */
}

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

.HTMLEditor_editor_420 {
  all: revert;
  contain: layout paint;

  overflow-y: auto;
  flex: 1;
}

.HTMLEditor_editor_420.HTMLEditor_px12_956 .ProseMirror {
      padding-left: var(--spacing-12);
      padding-right: var(--spacing-12);
    }

.HTMLEditor_editor_420.HTMLEditor_px16_ac6 .ProseMirror {
      padding-left: var(--spacing-16);
      padding-right: var(--spacing-16);
    }

.HTMLEditor_editor_420 .ProseMirror {
    min-height: 100%;
    padding-top: var(--spacing-16);
    padding-bottom: var(--spacing-16);
    outline: none;
    line-height: 1.5;
    overflow-y: auto;
    min-height: 160px;
    height: 100%;
    max-height: var(--proseMirrorMaxHeight, 425px);
    background-color: var(--colorBgEmailEditor);
    color: var(--colorTextNeutralBlack);
    font-size: var(--fontSizeSmall);

    /* ensure that getBoundingClientRect() includes padding */
    box-sizing: border-box;
  }

:is(.HTMLEditor_editor_420 .ProseMirror) h1,:is(.HTMLEditor_editor_420 .ProseMirror) h2,:is(.HTMLEditor_editor_420 .ProseMirror) h3,:is(.HTMLEditor_editor_420 .ProseMirror) h4,:is(.HTMLEditor_editor_420 .ProseMirror) h5,:is(.HTMLEditor_editor_420 .ProseMirror) h6 {
      all: revert;
    }

/* reset list styling to top level in case we're rendering inside a <li> */

:is(.HTMLEditor_editor_420 .ProseMirror) ul {
      all: revert;
      margin: 16px 0;
    }

:is(:is(.HTMLEditor_editor_420 .ProseMirror) ul) li {
        list-style-type: disc;
      }

:is(:is(.HTMLEditor_editor_420 .ProseMirror) ul) ul {
        margin: 0;
      }

:is(:is(:is(.HTMLEditor_editor_420 .ProseMirror) ul) ul) li {
          list-style-type: circle;
        }

:is(:is(:is(.HTMLEditor_editor_420 .ProseMirror) ul) ul) ul li {
          list-style-type: square;
        }

:is(.HTMLEditor_editor_420 .ProseMirror) ol {
      all: revert;
      margin: 16px 0;
    }

:is(:is(.HTMLEditor_editor_420 .ProseMirror) ol) li {
        list-style-type: decimal;
      }

:is(:is(.HTMLEditor_editor_420 .ProseMirror) ol) ol {
        margin: 0;
      }

:is(:is(:is(.HTMLEditor_editor_420 .ProseMirror) ol) ol) li {
          list-style-type: lower-latin;
        }

:is(:is(:is(.HTMLEditor_editor_420 .ProseMirror) ol) ol) ol li {
          list-style-type: lower-roman;
        }

:is(.HTMLEditor_editor_420 .ProseMirror) a,:is(.HTMLEditor_editor_420 .ProseMirror) li,:is(.HTMLEditor_editor_420 .ProseMirror) p,:is(.HTMLEditor_editor_420 .ProseMirror) hr,:is(.HTMLEditor_editor_420 .ProseMirror) blockquote,:is(.HTMLEditor_editor_420 .ProseMirror) blockquote p {
      all: revert;
    }

:is(.HTMLEditor_editor_420 .ProseMirror) p:first-child {
      margin-top: 0;
    }

.HTMLEditor_toolbar_8a3 {
  display: flex;
  box-sizing: border-box;
  align-items: stretch;
  padding: 0 var(--spacing-4);
  border-top: 1px solid var(--borderDefault);
  background-color: var(--surfaceBackgroundDefault);
}

.HTMLEditor_toolbar_8a3.HTMLEditor_toolbarTop_110 {
    border-top: none;
    border-bottom: 1px solid var(--borderDefault);
  }

.HTMLEditor_buttonContainer_dcf {
  display: flex;
  flex: 1 1 auto;
  overflow: hidden;
  padding: 3px;
}

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

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

.HTMLEditor_right_ccb {
  display: flex;
  flex-wrap: nowrap;
  gap: 2px;
  margin-left: auto;
  padding: 3px;
}

.HTMLEditor_dropCursor_f53 {
  border-radius: 2px;
  background-color: var(
    --colorBrandBlue
  ) !important; /* override hardcoded option */
  opacity: 0.5;
}

.HTMLEditor_invisible_834 {
  display: none;
}

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

:root {
  /* hardcoded to token because editor content is theme-agnostic */
  --imgOverlayBlue: var(--colorCyan40);
}

.Image_ImageNode_wrapper_604 {
  display: inline-block;
  position: relative;
}

.Image_ImageNode_highlighted_5fa::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  border: 1px solid var(--imgOverlayBlue);
}

/* highlight state for non-editable images, so they can at least be highlighted and deleted */
.Image_ImageNode_directHighlighted_d59 img {
  outline: 1px solid var(--imgOverlayBlue);
}

/*
 The additional wrapper spans that ReactNodeRenderer adds (and NodeViewWrapper
 for non-editable images) should not produce their own boxes, so they don't
 impact layout.
*/
.Image_ImageNode_rendererWrapper_00a {
  display: contents;
}

.Image_ImageNode_overlayCard_265 {
  box-shadow: var(--shadowLevel3);
  background-color: var(--surfaceBackgroundDefault);
  border: 1px solid var(--borderLight);
  border-radius: 7px;
}

/* override global bootstrap */
input.subcomponents_ImageEditMenu_linkEditInput_3db {
  border: 0;
  box-shadow: none;
  margin: 0;
}
input.subcomponents_ImageEditMenu_linkEditInput_3db:focus {
    box-shadow: none !important;
    border: 0 !important;
  }

.subcomponents_ResizeHandle_resizeHandle_16a {
  --handleOffset: calc(-1 * var(--spacing-4));
  position: absolute;
  z-index: 1;
  width: var(--spacing-8);
  height: var(--spacing-8);
  background-color: #2e94fe; /* TODO: variable */
  border: 1px solid var(--white);
}

.subcomponents_ResizeHandle_topLeft_df3 {
  top: var(--handleOffset);
  left: var(--handleOffset);
  cursor: nw-resize;
}

.subcomponents_ResizeHandle_topRight_f39 {
  top: var(--handleOffset);
  right: var(--handleOffset);
  cursor: ne-resize;
}

.subcomponents_ResizeHandle_bottomLeft_2a0 {
  bottom: var(--handleOffset);
  left: var(--handleOffset);
  cursor: sw-resize;
}

.subcomponents_ResizeHandle_bottomRight_236 {
  bottom: var(--handleOffset);
  right: var(--handleOffset);
  cursor: se-resize;
}

.subcomponents_ImageLoader_loaderContainer_62c {
  background-color: var(--white);
}

.AIButton_buttonContainer_beb {
  position: relative;
}

.AIButton_button_50f {
  position: relative;
  box-sizing: border-box;
  display: inline-block;
  padding: 6px 12px;
  line-height: 16px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  transition: all 0.2s ease-in-out;
  background-color: var(--bgActiveMuted);
  color: var(--fillInformational);
}

.AIButton_button_50f[disabled] {
    opacity: var(--disabledOpacity);
    color: var(--colorTextDefault);
    background-color: transparent;
  }

.AIButton_button_50f.AIButton_isLoading_a1c[disabled] {
      background-color: var(--surfaceBackgroundDark);
    }

.AIButton_button_50f:not([disabled]):hover {
    background-color: color-mix(
      in srgb,
      var(--bgActiveMuted) 90%,
      var(--fillInformational)
    );
  }

.AIButton_icon_d73 {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  align-items: center;
  justify-content: center;
}

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

.AIButton_star_ab6 {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  width: 9px;
  height: 9px;
  color: var(--fillInformational);
  transition: all 0.2s var(--easeInOutQuad) 0.1s;
  opacity: 1;
}

[disabled]:not(.AIButton_isLoading_a1c) + .AIButton_star_ab6 {
    transition-delay: 0s;
    opacity: 0;
    transform: scale(0.5) rotate(-20deg);
  }

.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(--colorBorderAIDraft);
  border-bottom: 1px solid var(--colorBorderAIDraft);

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

.AIAutoDraft_viewer_170 {
  background-color: transparent;

  /* Style similar to HTMLEditor */
  font-size: var(--fontSizeSmall);
  line-height: 1.5;
}

.EmailFollowUpChooser_emailFollowUpChooser_9c2 {
  --maxWidth: 412px;
}

.EmailFollowUpChooser_withBorder_b72 {
  margin-bottom: 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.EmailFollowUpChooser_content_721 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  max-width: var(--maxWidth);
}

.EmailFollowUpChooser_label_b6c {
  margin: 0 5px 0 0;
}

.EmailFollowUpChooser_checkbox_686[type='checkbox'] {
  margin: 0 8px 2px 0;
}

.EmailFollowUpChooser_thenSeparator_880 {
  margin: 0 8px;
}

.EmailFollowUpChooser_followupTypeSelect_38a {
  flex: 1;
}

.EmailFollowUpChooser_sequences_eb0 {
  width: 100%;
  max-width: var(--maxWidth);
}

.EmailFollowUpChooser_sequenceNote_035 {
  margin: 0;
  line-height: 16px;
}

.EmailFollowUpChooser_noReplyContainer_81a {
  background-color: var(--bgLightMuted);
  padding: var(--activityVerticalGutter) var(--activityHorizontalGutter);
}

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

.EmailFollowUpChooser_snoozeMenuBtn_ca6 {
  border-bottom: 1px solid var(--borderDefault);
  border-radius: 0;
}

.EmailFollowUpChooser_snoozeMenuBtn_ca6:hover,.EmailFollowUpChooser_snoozeMenuBtn_ca6:focus {
    border-radius: var(--baseInputBorderRadius);
  }


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

.AIAutoDraft_Header_headerText_e80 {
  color: var(--colorTextAiGradientForeground);
}

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

.HTMLEditor_skeleton_skeleton_089 {
  display: flex;
  flex-direction: column;
  background-color: var(--surfaceBackgroundDefault);

  /* should match min-height in froala config */
  min-height: 160px;
}

.HTMLEditor_skeleton_skeleton_089:not(.HTMLEditor_skeleton_fullWidth_974) {
    border: 1px solid var(--borderDefault);
    border-radius: 7px;
  }

.HTMLEditor_skeleton_toolbar_9d9 {
  height: 34px;
  border-top: 1px solid var(--borderDefault);
  margin-top: auto;
}

.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 */
:is(.EmailTopBar_EmailMeta_relativeTimeWrapper_9e9 a),:is(.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);
  }

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

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

.emailFollowup_expanded_emailThreadWrapper_306 {
  /* This is a hack to fix the issue where the email thread object
     has the double border on the top. */
  margin-top: -1px;
}

.incomingEmail_expanded_emailThreadWrapper_4bd {
  /* This is a hack to fix the issue where the email thread object
     has the double border on the top. */
  margin-top: -1px;
}

.incomingSMS_expanded_inputContainer_454 {
  max-width: 520px;
  margin-top: var(--spacing-12);
}

.ConversationFullScreenViewHeader_mobileActionsContainer_00d {
  align-items: center;
  background-color: var(--bgCardMedium);
  border: 1px solid var(--borderLight);
  border-radius: var(--baseInputBorderRadius);
  display: flex;
  gap: var(--spacing-8);
  justify-content: space-between;
  padding: var(--spacing-8) var(--spacing-12);
}

.lead_workflowIcon_215 {
  color: var(--gray-70);
  line-height: 15px;
}

.opportunityDue_expanded_opportunityNote_b38 {
  padding: var(--spacing-24) var(--spacing-16);
  line-height: 20px;
}@media screen and (max-width: 767px) {.opportunityDue_expanded_opportunityNote_b38 {
    padding: var(--spacing-16);
}
  }

.VoicemailTranscription_voicemailTranscriptionWrapper_b86 {
  max-width: 1024px;
}

.VoicemailTranscription_voicemailTranscriptionText_ad4 {
  color: var(--gray-50);
  font-size: 13px;
  margin-bottom: 0px;
}

.InboxList_InboxListItem_container_6f7 {
  overflow: hidden;
  border-bottom: 1px solid var(--borderDefault);
  cursor: pointer;
}.InboxList_InboxListItem_container_6f7:has( > .expanded) {
    display: block;
    padding: var(--spacing-16);
    background: var(--surfaceBackgroundMedium);
    overflow: initial;
    cursor: initial;
  }.InboxList_InboxListItem_container_6f7:has(input:checked) {
    border-bottom-color: var(--borderActiveMuted);
  }.InboxList_InboxListItem_container_6f7:has(input:checked) > .inboxRow {
      background-color: var(--bgActiveMuted);
    }.InboxList_InboxListItem_container_6f7 > :first-child {
    position: relative;
  }.InboxList_InboxListItem_container_6f7.InboxList_InboxListItem_active_268 {
    outline: none;
  }/* Only for compact view */@media screen and (max-width: 767px) {.InboxList_InboxListItem_container_6f7.InboxList_InboxListItem_selected_860 {
      border-bottom-color: var(--borderActiveMuted);
  }
    }

.InboxTopBar_CollapsedInboxTopBar_container_bd1 {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 20;

  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  flex: 1;
  box-sizing: border-box;

  padding: var(--spacing-12) var(--spacing-16);
  border-top: solid 1px var(--borderDefault);
  background-color: var(--surfaceBackgroundMedium);
}

.InboxTopBar_CollapsedInboxTopBar_icon_c6b {
  color: var(--gray-70);
}

.InboxTopBar_CollapsedInboxTopBar_spacer_df0 {
  flex: 1;
}

.InboxFilters_InboxFiltersPopover_buttonWrapper_a93 {
  max-width: 200px;
}

.InboxTopBar_ExpandedInboxTopBar_inboxTopBarContainer_8a1 {
  display: flex;
  align-items: center;
  height: var(--spacing-40);
  padding: 0 var(--spacing-24);
  box-sizing: border-box;
  border-bottom: 1px solid var(--borderDefault);
  background-color: var(--surfaceBackgroundDefault);
  margin: 0 calc(var(--spacing-16) * -1);
}

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

.InboxTopBar_ExpandedInboxTopBar_inboxTopBarContainer_8a1 {
    margin: calc(var(--spacing-24) * -1) calc(var(--spacing-24) * -1) 0;
}
  }

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

.InboxTopBar_ExpandedInboxTopBar_checkAllCheckbox_701 label {
    font-size: var(--fontSizeSmall);
  }

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

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

.TaskCalendarFeedModal_intro_109 {
  font-size: 16px;
  line-height: 20px;
  border-bottom: 1px solid var(--borderDefault);
  margin: 0 auto 20px;
  padding-bottom: 20px;
}

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

.TaskCalendarFeedModal_keysInfo_321 {
  margin: 0 auto 20px;
  font-size: 13px;
  line-height: 18px;
}

.TaskCalendarFeedModal_form_360 {
  text-align: left;
  margin: 0 auto 10px;
}

.TaskCalendarFeedModal_instructions_e1f {
  margin-top: 10px;
  margin-bottom: 30px;
}

@media screen and (max-width: 767px) {
  .InboxScreen_InboxPage_inboxHeaderContainer_6ae {
    position: absolute;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    transition: transform 250ms ease-in-out;
    z-index: var(--stickyHeaderZIndex);
    padding: var(--spacing-16);
  }


    .InboxScreen_InboxPage_inboxHeaderContainer_6ae.InboxScreen_InboxPage_hide_549 {
      transform: translateY(-100%);
    }
}

.UpcomingMeetings_MeetingsList_dividerBullet_46d {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--colorIconDefault);
}

.UpcomingMeetings_MeetingsList_dividerLine_96b {
  height: 2px;
  width: 100%;
  background-color: var(--colorIconDefault);
}

.UpcomingMeetings_UpcomingMeetingsSidebar_root_b6e {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--bgPopover);
  padding-top: 1px;
  box-shadow: var(--shadowLevel3);
  box-sizing: border-box;
  overflow-y: auto;
}

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

.UpcomingMeetings_UpcomingMeetingsSidebar_root_b6e {
    width: 300px;
    left: unset;
}
  }

/* The custom breakpoint is required in order to function on any screen sizes */

@media (min-width: 1366px) {

.UpcomingMeetings_UpcomingMeetingsSidebar_root_b6e {
    position: relative;
}
  }

.UpcomingMeetings_UpcomingMeetingsSidebar_header_5c8 {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bgPopover);
}

.UpcomingMeetings_UpcomingMeetingsSidebar_date_0b8 {
  display: block;
  font-feature-settings: "tnum";
  font-variant: tabular-nums;
  white-space: nowrap;
  width: 90px;
}

.UpcomingMeetings_UpcomingMeetingsSidebar_emptyState_91a {
  border-radius: 7px;
  border: 1px solid var(--borderLight);
  background-color: var(--bgCardBase);
  box-shadow: var(--shadowLevel1);
  text-align: center;
}

.UpcomingMeetings_UpcomingMeetingsSidebar_emptyState_91a.UpcomingMeetings_UpcomingMeetingsSidebar_upsell_1c2 {
    background-color: var(--bgInformationalMuted);
  }

.UpcomingMeetings_UpcomingMeetingsSidebar_emptyStateDisclaimer_a8a {
  line-height: 20px;
}

.UpcomingMeetings_UpcomingMeetingsSidebar_emptyStateDate_8b4 {
  text-transform: capitalize;
}

.UpcomingMeetings_UpcomingMeetingsSidebar_connectedAccountsLink_2b3 {
  color: inherit;
  -webkit-text-decoration: underline;
  text-decoration: underline;
}


/*# sourceMappingURL=https://srcmaps.close.com/srcmaps/inbox.7d24f645f3f10e673f8e-e275b3fcfecd628fa2785b5862645ee3.js.map*/