.v2_page_451 {
  /* TODO [darkmode] need a theme-specific gradient */
  --gradientStartColor: #f2f3f9;
  --gradientEndColor: rgba(242, 243, 249, 0);

  position: relative;
  background: #ffffff;
  background: var(--surfaceBackgroundDefault);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  justify-content: center;
  align-items: center;

  /* eat through .app-content */
}

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

.v2_page_451 {
    margin: calc(-1 * 24px);
    margin: calc(-1 * var(--spacing-24));
}
  }

/* very similar to EmptyState! */

.v2_page_451::before {
    content: ' ';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 58%;
    -webkit-clip-path: polygon(0% 45px, 100% 0, 100% 100%, 0% 100%);
            clip-path: polygon(0% 45px, 100% 0, 100% 100%, 0% 100%);
    background: linear-gradient(
      180deg,
      var(--gradientStartColor) -8%,
      var(--gradientEndColor) 20%
    );
  }

.v2_content_d4c {
  position: relative;
  z-index: 1;
  max-width: 486px;
  padding: 32px;
  padding: var(--spacing-32);
  text-align: center;
}

.v2_image_fd7 {
  width: 150px;
}

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

.AvatarGroup_avatarWrapper_11f {
  display: block;
  position: relative;
  box-sizing: border-box;
  width: 12px;
  border-radius: 8px;
}

.AvatarGroup_avatarWrapper_11f.AvatarGroup_mini_609 {
    height: 20px;
  }

.AvatarGroup_avatarWrapper_11f.AvatarGroup_x-small_2ef {
    height: 24px;
  }

.AvatarGroup_avatarWrapper_11f.AvatarGroup_small_807 {
    height: 28px;
  }

.AvatarGroup_imgWrap_c03 {
  position: absolute;
  width: 16px;
  border: 2px solid #ffffff;
  border: 2px solid var(--white);
  background-color: #ffffff;
  background-color: var(--white);
  opacity: 1;
  z-index: 1;
  border-radius: 50%;
}

.AvatarGroup_rest_182 {
  display: block;
}

.AvatarGroup_rest_182.AvatarGroup_mini_609 {
    margin-left: 8px;
    margin-left: var(--spacing-8);
  }

.AvatarGroup_rest_182.AvatarGroup_x-small_2ef,
  .AvatarGroup_rest_182.AvatarGroup_small_807 {
    box-sizing: border-box;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    border: 2px solid var(--white);
    border-radius: 50%;
    background-color: #1b1b1b;
    background-color: var(--gray-90);
    color: #ffffff;
    color: var(--white);
  }

.AvatarGroup_rest_182.AvatarGroup_x-small_2ef {
    width: 24px;
    height: 24px;
    font-size: 8px;
  }

.AvatarGroup_rest_182.AvatarGroup_small_807 {
    width: 28px;
    height: 28px;
    font-size: 10px;
  }

.application_backboneViewPageWrapper_58e {
  flex: 1 0 100%;
}@media screen and (min-width: 768px) {.application_backboneViewPageWrapper_58e {
    max-height: 100%;
    min-width: 800px;
}
  }.application_backboneViewPageWrapper_58e > div {
    height: 100%;
  }

.EmptyState_main_6bd {
  /* TODO [darkmode] need gradient here */
  --gradientStartColor: #f2f3f9;
  --gradientEndColor: rgba(242, 243, 249, 0);

  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  background-color: var(--surfaceBackgroundDefault);
  box-sizing: border-box;
}

.EmptyState_hasPadding_443 {
  padding: calc(3vw + 3vh);
}

.EmptyState_hasBorder_ff9 {
  border: 1px solid #e2e2e2;
  border: 1px solid var(--borderDefault);
  border-radius: 3px;
  border-radius: var(--baseBorderRadius);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  box-shadow: var(--panelShadow);
}

.EmptyState_fillHeight_7d9 {
  height: 100%;
}

.EmptyState_centerGradient_9d7::before, .EmptyState_bottomGradient_59e::before {
    content: ' ';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    -webkit-clip-path: polygon(0% 45px, 100% 0, 100% 100%, 0% 100%);
            clip-path: polygon(0% 45px, 100% 0, 100% 100%, 0% 100%);
  }

.EmptyState_centerGradient_9d7::before {
  height: 65%;
  background: linear-gradient(
    180deg,
    var(--gradientStartColor) -8%,
    var(--gradientEndColor) 20%
  );
}

.EmptyState_bottomGradient_59e::before {
  height: 18%;
  background: linear-gradient(
    180deg,
    var(--gradientStartColor) -30%,
    var(--gradientEndColor) 100%
  );
}

.EmptyState_graphic_6ff {
  position: relative;
  margin-bottom: 24px;
}

.EmptyState_graphic_6ff svg {
    height: 150px;
    width: auto;
    vertical-align: bottom;
  }

.EmptyState_graphic_6ff.EmptyState_svgAutoHeight_f1c svg {
      height: auto;
    }

.EmptyState_isIcon_e8f {
  background-color: #e2e2e2;
  background-color: var(--bgDefault);
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.EmptyState_isIcon_e8f svg {
    width: 48px;
    height: 48px;
    vertical-align: bottom;
  }

.EmptyState_textContainer_7a9 {
  position: relative;
  text-align: center;
  max-width: 520px;
}

.EmptyState_heading_734 {
  font-size: 24px;
  margin: 0;
  line-height: 2;
}

.EmptyState_heading_734.EmptyState_small_a89 {
    font-size: 18px;
  }

.EmptyState_text_88b {
  font-size: 14px;
  margin-bottom: 24px;
}

.EmptyState_text_88b.EmptyState_faded_468 {
    color: #767676;
    color: var(--colorTextLight);
  }

.EmptyState_link_181 {
  -webkit-text-decoration: underline;
  text-decoration: underline;
  white-space: nowrap;
  color: inherit;
}

.DropdownMenu_menuContainer_680 {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 800px;
  max-height: var(--menuMaxHeight);

  /* ensures does not go taller than its container */
  min-height: 0;

  /* don't show focus ring on iOS */
}

.DropdownMenu_menuContainer_680:focus {
    outline: none;
  }

.DropdownMenu_menu_01e {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
}

.DropdownMenu_list_507 {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 4px 0;
  background-color: #ffffff;
  background-color: var(--bgPopover);
  overflow-y: auto;
  overflow-x: hidden;
}

.DropdownMenu_list_507:focus {
    outline: none;
  }

.DropdownMenu_item_3b1 {
  position: relative;
  display: flex;
  padding: 6px 16px;
  line-height: 16px;
  cursor: pointer;
}

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

.DropdownMenu_item_3b1 {
    padding: 8px 16px;
}
  }

.DropdownMenu_item_3b1.DropdownMenu_withIcon_caa {
    display: grid;
    grid-column-gap: 8px;
    grid-column-gap: var(--spacing-8);
    column-gap: 8px;
    column-gap: var(--spacing-8);
    grid-template-columns: 16px 1fr;
    grid-template-columns: var(--spacing-16) 1fr;
  }

.DropdownMenu_item_3b1.DropdownMenu_withIcon_caa.DropdownMenu_withFullSizeIcon_3ea {
      column-gap: 16px;
      column-gap: var(--spacing-16);
      grid-template-columns: 32px 1fr;
      grid-template-columns: var(--spacing-32) 1fr;
      align-items: center;
    }

.DropdownMenu_item_3b1.DropdownMenu_isDisabled_327 {
    cursor: not-allowed;
    color: #767676;
    color: var(--colorTextLight);
  }

.DropdownMenu_item_3b1 a {
    display: block;
    color: inherit;
    -webkit-text-decoration: none;
    text-decoration: none;
  }

.DropdownMenu_submenuArrow_a31 {
  position: absolute;
  right: 16px;
  right: var(--spacing-16);
  color: #919191;
  color: var(--colorIconLight);
  top: calc(50% - 8px);
  top: calc(50% - var(--spacing-8));

  /* 16x tall & centered */
}

.DropdownMenu_isHighlighted_903 .DropdownMenu_submenuArrow_a31 {
    color: #474747;
    color: var(--colorIconDefault);
  }

.DropdownMenu_itemInner_0e5 {
  width: 100%;
}

.DropdownMenu_itemTitle_7f0 {
  margin-bottom: 4px;
}

.DropdownMenu_itemTitle_7f0.DropdownMenu_smallMargin_3df {
    margin-bottom: 2px;
  }

.DropdownMenu_subtext_d45 {
  margin-left: auto;
  margin-right: 8px;
  margin-right: var(--spacing-8);
  white-space: nowrap;
}

.DropdownMenu_typeDefault_b39.DropdownMenu_isHighlighted_903:not(.DropdownMenu_isDisabled_327), .DropdownMenu_typeLink_e9f.DropdownMenu_isHighlighted_903:not(.DropdownMenu_isDisabled_327) {
    background: #f1f1f1;
    background: var(--bgMenuItemHover);
  }

.DropdownMenu_linkAnchor_ce9:hover,
.DropdownMenu_linkAnchor_ce9:focus,
.DropdownMenu_linkAnchor_ce9:active {
  -webkit-text-decoration: none;
  text-decoration: none;
  outline: none;
}

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

.DropdownMenu_typeLink_e9f.DropdownMenu_isHighlighted_903 {
    -webkit-text-decoration: none;
    text-decoration: none;
  }

.DropdownMenu_typeDanger_c89 {
  color: #dd0f21;
  color: var(--colorTextDanger);
}

.DropdownMenu_typeDanger_c89.DropdownMenu_isHighlighted_903:not(.DropdownMenu_isDisabled_327) {
    color: #ffffff;
    color: var(--colorTextNeutralWhite);
    background: #dd0f21;
    background: var(--bgDanger);
  }

/* While setting these on the item itself and allowing the color to cascade to
   the icon is convenient it stops the icon from being composable, so some
   explicit duplication here decouples the icon from the list item */
.DropdownMenu_icon_25d.DropdownMenu_typeDefault_b39,
  .DropdownMenu_icon_25d.DropdownMenu_typeLink_e9f {
    color: #474747;
    color: var(--colorIconDefault);
  }
.DropdownMenu_icon_25d.DropdownMenu_typeDefault_b39.DropdownMenu_isHighlighted_903:not(.DropdownMenu_isDisabled_327), .DropdownMenu_icon_25d.DropdownMenu_typeLink_e9f.DropdownMenu_isHighlighted_903:not(.DropdownMenu_isDisabled_327) {
      color: #2e2e2e;
      color: var(--colorTextDefault);
    }
.DropdownMenu_icon_25d.DropdownMenu_typeDanger_c89 {
    color: #dd0f21;
    color: var(--fillDanger);
  }
.DropdownMenu_icon_25d.DropdownMenu_typeDanger_c89.DropdownMenu_isHighlighted_903:not(.DropdownMenu_isDisabled_327) {
      color: #ffffff;
      color: var(--colorIconNeutralWhite);
    }

.DropdownMenu_divider_60e {
  display: block;
  margin: 4px 0;
  border-bottom: 1px solid #e2e2e2;
  border-bottom: 1px solid var(--borderDefault);

  /* don't show two dividers next to each other */
}

.DropdownMenu_divider_60e:first-child,
  .DropdownMenu_divider_60e:last-child,
  .DropdownMenu_divider_60e + .DropdownMenu_divider_60e {
    display: none;
  }

.DropdownMenu_card_435 {
  padding: 4px 8px;
  /* prevents extraneous padding in Safari Desktop */
  list-style-type: none;
}

.DropdownMenu_submenuBar_65e {
  border-bottom: 1px solid #e2e2e2;
  border-bottom: 1px solid var(--borderDefault);
}

.DropdownMenu_submenuHeading_b14 {
  display: grid;
  grid-template-columns: 16px auto 16px;
  justify-items: center;
  padding: 8px 16px;
  padding: var(--spacing-8) var(--spacing-16);
}

.DropdownMenu_submenuSearch_0ff {
  padding: 0 8px 8px;
  padding: 0 var(--spacing-8) var(--spacing-8);
}

.DropdownMenu_backIcon_ea4 {
  cursor: pointer;
  color: #919191;
  color: var(--colorIconLight);
}

.DropdownMenu_backIcon_ea4:hover {
    color: #474747;
    color: var(--colorIconDefault);
  }

/* NOTE: any changes to the header height on narrow screens needs an
   equivalent change to the opportunity pipeline mobile menu, since it has
   a hardcoded offset */

.AppHeader_header_08e {
  position: relative;
  z-index: 1;
  margin-bottom: -1px;
  padding-left: 24px;
  padding-left: var(--spacing-24);
  padding-right: 24px;
  padding-right: var(--spacing-24);
  border-bottom: 1px solid #e2e2e2;
  border-bottom: 1px solid var(--borderDefault);
  background-color: #ffffff;
  background-color: var(--surfaceBackgroundDefault);
}

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

.AppHeader_header_08e {
    padding-left: 16px;
    padding-left: var(--spacing-16);
    padding-right: 12px;
    padding-right: var(--spacing-12); /* To line up with avatar */
}
  }

.AppHeader_inner_037 {
  position: relative;
  display: flex;
  align-items: center;
  padding-top: 24px;
  padding-top: var(--spacing-24);
  padding-bottom: 24px;
  padding-bottom: var(--spacing-24);
}

.AppHeader_hasSub_c55:not(.AppHeader_hasTabs_fad) .AppHeader_inner_037 {
    padding-bottom: 12px;
    padding-bottom: var(--spacing-12);
  }

.AppHeader_hasTabs_fad:not(.AppHeader_hasSub_c55) .AppHeader_inner_037 {
    padding-bottom: 40px;
  }

/* leave even more room for tabs if there is a titleSub passed as well */

.AppHeader_hasTabs_fad.AppHeader_hasSub_c55 .AppHeader_inner_037 {
    padding-bottom: 50px;
  }

.AppHeader_hasSub_c55:not(.AppHeader_hasBreadcrumbs_f8d) .AppHeader_inner_037,
  .AppHeader_hasTabs_fad:not(.AppHeader_hasBreadcrumbs_f8d) .AppHeader_inner_037 {
    padding-top: 12px;
    padding-top: var(--spacing-12);
  }

.AppHeader_hasBreadcrumbs_f8d .AppHeader_inner_037 {
    padding-bottom: 18px;
    padding-top: 18px;
  }

.AppHeader_marginBottom_e2c {
  margin-bottom: 24px;
  margin-bottom: var(--spacing-24);
}

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

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

/* account for padding on general app screen and settings pages to spread full-width */
.AppHeader_spreadForApp_f1c,
.AppHeader_spreadForSettings_a4e {
  margin-top: calc(-1 * 24px);
  margin-top: calc(-1 * var(--spacing-24));
  margin-left: calc(-1 * 24px);
  margin-left: calc(-1 * var(--spacing-24));
  margin-right: calc(-1 * 24px);
  margin-right: calc(-1 * var(--spacing-24));
}
@media screen and (max-width: 767px) {
.AppHeader_spreadForApp_f1c,
.AppHeader_spreadForSettings_a4e {
    margin-top: calc(-1 * 16px);
    margin-top: calc(-1 * var(--spacing-16));
    margin-right: calc(-1 * 16px);
    margin-right: calc(-1 * var(--spacing-16));
    margin-left: calc(-1 * 16px);
    margin-left: calc(-1 * var(--spacing-16));
    padding-right: 12px;
    padding-right: var(--spacing-12); /* To line up with avatar */
}

    .AppHeader_spreadForApp_f1c.AppHeader_hasBreadcrumbs_f8d, .AppHeader_spreadForSettings_a4e.AppHeader_hasBreadcrumbs_f8d {
      margin-top: calc(-1 * 20px);
      margin-top: calc(-1 * var(--spacing-20));
    }
  }

/* only used in the pipelines view */
/* TODO: smaller sizing for all headings on narrow screens? */
.AppHeader_fullScreen_519 {
  padding-left: 16px;
  padding-left: var(--spacing-16);
  padding-right: 16px;
  padding-right: var(--spacing-16);
  flex-shrink: 0;
}
.AppHeader_fullScreen_519 .AppHeader_inner_037 {
    padding-top: 8px;
    padding-bottom: 8px;
  }
@media screen and (min-width: 1120px) {
.AppHeader_fullScreen_519 {
    padding-left: 24px;
    padding-right: 24px;
}

    .AppHeader_fullScreen_519 .AppHeader_inner_037 {
      padding-top: 24px;
      padding-bottom: 24px;
    }
  }
@media screen and (max-width: 767px) {
.AppHeader_fullScreen_519 {
    padding-right: 12px; /* To line up with avatar */
}
  }

.AppHeader_title_717 {
  flex: 1;
  margin: 0;
  min-width: 0;
  white-space: nowrap;

  /* HACK: If TitleButton is wrapped in a select, we need to target a div that
     wraps the button in order to keep it from filling the width. Otherwise the
     popover is not positioned relative to the correct element. */
}

.AppHeader_title_717[aria-expanded] {
    display: flex;
    max-width: 100%;
  }

.AppHeader_hasBreadcrumbs_f8d .AppHeader_title_717 {
    margin-top: 12px;
  }

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

.AppHeader_breadcrumbsWrap_aac {
  position: absolute;
  z-index: 1;
  top: 13px;
  left: 0;
}

.AppHeader_tabsWrap_fcf {
  position: absolute;
  z-index: 1;
  bottom: -1px;
  left: 0;
  right: 0;
}

.AppHeader_titleSub_1d2 {
  display: block;
  color: #767676;
  color: var(--colorTextLight);
  font-size: 14px;
  line-height: 20px;
  margin-top: 4px;
}

@media screen and (min-height: 480px) {

.AppHeader_sticky_615 {
    position: sticky;
    top: 0;
    z-index: 10;
    z-index: var(
      --stickyHeaderZIndex
    ); /* on top of ActivityCharts__chartBoxInfo */
}
  }

.AppHeader_subComponents_titleButton_b4c {
  display: flex;
  align-items: center;
  padding: 0 12px;
  padding: 0 var(--spacing-12);
  border-radius: 16px;
  max-width: 100%;

  /* eat into left padding so text is aligned with edge of page */
  margin-left: calc(-1 * 12px);
  margin-left: calc(-1 * var(--spacing-12));
}

.AppHeader_subComponents_titleButton_b4c:hover {
    background-color: #f1f1f1;
    background-color: var(--surfaceBackgroundDark);
  }

.AppHeader_subComponents_titleButtonContents_9aa {
  /* Leave space for the caret */
  max-width: calc(100% - 20px);
}

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

.AppHeader_subComponents_caret_80b {
  width: 14px;
  height: 14px;
  margin-left: 6px;
}

.AppHeader_subComponents_primaryActions_e59 {
  display: flex;
  align-items: center;
  gap: 8px;
  gap: var(--spacing-8);
  padding-right: 16px;
  padding-right: var(--spacing-16);
}

.AppHeader_subComponents_secondaryActions_96a {
  display: flex;
  align-items: center;
  gap: 4px;
  gap: var(--spacing-4);
  padding-left: 8px;
  padding-left: var(--spacing-8);
}

.Form_hiddenSubmit_e04 {
  /*
    We can't use "display: none" as implicit form submit would NOT work in Safari if there is a readonly element.
    See https://stackoverflow.com/questions/47559991/html-form-onsubmit-fails-to-fire-on-certain-browsers-with-hidden-submit-button-a
  */
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: -3000px;
}

.Card_card_3f6 {
  background: #ffffff;
  background: var(--bgCardBase);
  border: 1px solid #e2e2e2;
  border: 1px solid var(--borderDefault);
  border-radius: 7px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: var(--shadowLevel1);
  transition: box-shadow linear 0.3s;
}.Card_card_3f6:hover:not(.Card_fixed_443) {
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
    box-shadow: var(--shadowLevel2);
  }.Card_card_3f6.Card_shadowLevel3_2bd {
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1);
    box-shadow: var(--shadowLevel3);
  }.Card_card_3f6.Card_shadowLevel4_368 {
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);
    box-shadow: var(--shadowLevel4);
  }.Card_card_3f6:focus-within:not(.Card_fixed_443) {
    border-color: transparent;
  }.Card_card_3f6.Card_border-solid_a42 {
    border-style: solid;
  }.Card_card_3f6.Card_border-dashed_a2b {
    border-style: dashed;
  }.Card_card_3f6.Card_defaultBorderColor_0ac:focus-within {
    border-color: #e2e2e2;
    border-color: var(--borderDefault);
  }

.ColorPicker_ColorMenu_menu_189 {
  display: flex;
}

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

.ColorPicker_ColorMenu_colors_75b > *, .ColorPicker_ColorMenu_extra_3e5 > * {
    transform: scale(1.25);
  }

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

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

.ColorPicker_CustomColorPicker_wrapper_977 {
  position: relative;
}

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

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

.Calendar_sharedComponents_navNext_bb7,
.Calendar_sharedComponents_navPrev_2c2 {
  position: absolute;
  padding: 2px 5px;
}

.Calendar_sharedComponents_navNext_bb7 svg, .Calendar_sharedComponents_navPrev_2c2 svg {
    display: block;
    width: 16px;
  }

.Calendar_sharedComponents_navNext_bb7 {
  right: 14px;
}

.Calendar_sharedComponents_navPrev_2c2 {
  left: 12px;
}

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

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

.DotSeparator_dotSeparator_57a {
  -webkit-user-select: none;
          user-select: none;
  display: inline-block;
  color: #919191;
  color: var(--colorIconLight);
}

.AudioPlayer_AudioControls_audioControls_97a {
  --audioPlayerHeight: 48px;
  width: 100%;
  height: 48px;
  height: var(--audioPlayerHeight);
  background: #f1f1f1;
  background: var(--surfaceBackgroundDark);
  border-radius: calc(48px / 2);
  border-radius: calc(var(--audioPlayerHeight) / 2);
  padding: 8px;
  padding: var(--spacing-8); /* keep in sync with MediaControls */
  box-sizing: border-box;
}

.AudioPlayer_AudioControls_audioControls_97a * {
    box-sizing: inherit;
  }

.AudioPlayer_AudioControls_audioLoader_d61 {
  display: flex;
  margin: 0;
}

.v2_container_307 {
  box-sizing: border-box;
  --maxAudioPlayerWidth: 1024px;
  max-width: 1024px;
  max-width: var(--maxAudioPlayerWidth);
  display: flex;
  flex-direction: column;
  width: 100%;
}.v2_container_307.v2_withBorder_04c {
    border: 1px solid #f1f1f1;
    border: 1px solid var(--borderLight);
    border-radius: 7px;
    overflow: hidden;
  }

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

.ExternalLink_externalLinkIcon_65a {
  margin-left: 8px;
}

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

.Collapsible_header_fd9 {
  display: flex;
  gap: 8px;
  gap: var(--spacing-8);
  align-items: center;
  padding: 12px;
  padding: var(--spacing-12);
  align-self: stretch;
  background: #fcfcfc;
  background: var(--surfaceBackgroundLight);
  cursor: pointer;
  border: 1px solid #f1f1f1;
  border: 1px solid var(--borderLight);
  border-radius: 7px;
  z-index: 1;
  transition: border-radius 100ms cubic-bezier(0.4, 0, 0.2, 1) 120ms;
  transition: border-radius 100ms var(--standardCurve) 120ms;
}

.Collapsible_header_fd9.Collapsible_open_48a {
    border-radius: 7px 7px 0 0;
    transition: border-radius 100ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: border-radius 100ms var(--standardCurve);
  }

.Collapsible_header_fd9.Collapsible_disabled_ef0 {
    cursor: default;
  }

.Collapsible_header_fd9.Collapsible_disabled_ef0 .Collapsible_icon_d2b {
      /* TODO [darkmode] one-off implementation of disabled icon */
      opacity: 0.3;
    }

.Collapsible_header_fd9:hover:not(.Collapsible_disabled_ef0) {
    background: #f1f1f1;
    background: var(--surfaceBackgroundDark);
  }

.Collapsible_header_fd9 .Collapsible_icon_d2b {
    color: #474747;
    color: var(--colorIconDefault);
    transition: transform 100ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: transform 100ms var(--standardCurve);
  }

.Collapsible_header_fd9 .Collapsible_icon_d2b.Collapsible_rotate_8e2 {
      transform: rotate(90deg);
    }

.Collapsible_slideable_27f {
  align-self: stretch;
}

.Collapsible_content_cce {
  box-sizing: border-box;
  background: #ffffff;
  background: var(--surfaceBackgroundDefault);
  border: 1px solid #f1f1f1;
  border: 1px solid var(--borderLight);
  border-top: 0;
  border-radius: 0 0 7px 7px;
}

.Collapsible_content_cce > * + * {
    border-top: 1px solid #f1f1f1;
    border-top: 1px solid var(--borderLight);
  }

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

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

.AspectRatio_wrapper_268 {
  position: relative;
  overflow: hidden;
}

.AspectRatio_inner_efd {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.Button_OAuthButton_noPadding_968 {
  padding: 0 !important;
}

.Button_OAuthButton_text_255 {
  font-size: 14px;
  line-height: 16px;
  line-height: var(--spacing-16);
  color: #303030;
  color: var(--gray-80);
  border-radius: 0 16px 16px 0;
  border-radius: 0 var(--spacing-16) var(--spacing-16) 0;
  margin: 0;
  padding: 6px 16px 6px 4px;
  padding: 6px var(--spacing-16) 6px var(--spacing-4);
}

.Button_OAuthButton_text_255.Button_OAuthButton_bold_8bd {
    font-weight: 600;
    font-weight: var(--fontWeightBold);
  }

.Button_OAuthButton_button_8da {
  display: grid;
  grid-template-columns: 36px min-content;
  align-items: center;
}

.Button_OAuthButton_button_8da.Button_OAuthButton_fullWidth_d9c {
    grid-template-columns: 36px 1fr;
    width: 100%;
  }

.Button_OAuthButton_button_8da .Button_OAuthButton_icon_033 {
    position: static;
    position: initial;
  }

.Button_OAuthButton_button_8da.Button_OAuthButton_dark_cdd .Button_OAuthButton_text_255 {
      color: #ffffff;
      color: var(--white);
      padding: 6px 16px 6px 8px;
      padding: 6px var(--spacing-16) 6px var(--spacing-8);
    }

.Button_OAuthButton_button_8da.Button_OAuthButton_dark_cdd.Button_OAuthButton_google_7f9 .Button_OAuthButton_text_255 {
        background: #4285f4;
      }

.Button_OAuthButton_button_8da.Button_OAuthButton_dark_cdd.Button_OAuthButton_microsoft_b07 .Button_OAuthButton_text_255 {
        background: #2f2f2f;
      }

.Button_OAuthButton_centered_d7e.Button_OAuthButton_button_8da {
    display: flex;
    justify-content: center;
  }

.Button_OAuthButton_large_6f8 {
  border-radius: 100px !important;
}

.Button_OAuthButton_large_6f8 .Button_OAuthButton_button_8da {
    height: 44px;
  }

.Button_OAuthButton_large_6f8 .Button_OAuthButton_button_8da .Button_OAuthButton_text_255 {
      border-radius: 0 100px 100px 0;
      font-weight: 600;
      font-weight: var(--fontWeightBold);
      font-size: 16px;
      line-height: 130%;
    }

.Button_OAuthButton_large_6f8 .Button_OAuthButton_button_8da .Button_OAuthButton_icon_033 svg {
      width: 24px;
      height: 24px;
    }

.ContentLoader_contentLoader_ec4 {
  min-height: 50px;
}

.ContentLoader_content_6fd {
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 200ms var(--standardCurve);
}

.ContentLoader_active_067 {
  position: relative;
}

.ContentLoader_active_067 .ContentLoader_content_6fd {
    opacity: 0;
    pointer-events: none;
    height: 0;
  }

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

.ContentLoader_spinner_948 {
  margin-right: 5px;
}

.AppFilterBar_container_a0e {
  flex: 0 0 auto;
  position: relative;
  height: 48px;
  max-height: 48px;
  overflow-y: hidden;
  transition: max-height 0.2s;
}

.AppFilterBar_containerClosed_f28 {
  max-height: 0;
}

.AppFilterBar_main_8a9 {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
  height: 48px;

  overflow-x: scroll;
  scrollbar-width: none;
  --ms-overflow-style: none;
}

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

@media screen and (max-width: 1119px) {
    .AppFilterBar_main_8a9 > * {
      margin: 2px;
    }
  }

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

.AppFilterBar_main_8a9 {
    justify-content: space-between;
    padding: 0 16px;
    padding: 0 var(--spacing-16);
}
  }

.AppFilterBar_column_476 {
  display: flex;
  justify-content: flex-start;
  align-items: center;

  /* By default, flex items won't shrink
     beyond their minimum content size, possibly overflowing the parent.
     We can change that by explicitly setting no minimum width. */
}

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

.AppFilterBar_column_476 {
    min-width: 0;
}
  }

.AppFilterBar_column_476 > * {
    margin: 0 4px;
  }

.AppFilterBar_column_476 > *:first-child {
      margin-left: 0;
    }

.AppFilterBar_column_476 > *:last-child {
      margin-right: 0;
    }

.AppFilterBar_divider_08b {
  height: 20px;
  width: 1px;
  background: rgba(0, 0, 0, 0.1);
}

.AppFilterBar_menu-item_48b {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  /* By default, flex items won't shrink
     beyond their minimum content size, possibly overflowing the parent.
     We can change that by explicitly setting no minimum width. */
}

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

.AppFilterBar_menu-item_48b {
    min-width: 0;
}
  }

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

.AppFilterBar_menu-item_48b > * {
      min-width: 0;
  }
    }

.Breadcrumbs_breadcrumbs_f2e {
  margin: 0;
  display: flex;
}

.Breadcrumbs_crumb_450 {
  display: flex;
}

.Breadcrumbs_crumb_450:not(:last-child)::after {
    content: '/';
    display: flex;
    margin: 0 10px;
    color: #e2e2e2;
    color: var(--borderDefault);
  }

.Breadcrumbs_link_2d6 {
  display: flex;
  align-items: center;
  padding: 0;
  position: relative;
  -webkit-appearance: none;
          appearance: none;
  background: none;
  border: none;
  font-size: 13px;
  color: #767676;
  color: var(--colorTextLight);
}

.Breadcrumbs_link_2d6:hover {
    color: #2e2e2e;
    color: var(--colorTextDefault);
    -webkit-text-decoration: none;
    text-decoration: none;
  }

.Breadcrumbs_link_2d6:focus {
    color: inherit;
    -webkit-text-decoration: none;
    text-decoration: none;
  }

.Breadcrumbs_icon_e6d {
  margin-right: 6px;
}

.Breadcrumbs_icon_e6d svg {
    width: 14px;
  }

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

.AutoTextarea_FormikAutoTextarea_textarea_013 {
  width: 100%;
  min-height: calc(32px * 2 - 7px * 2);
  min-height: calc(var(--inputHeight) * 2 - var(--inputPadding) * 2);
  margin-bottom: 0;
  box-sizing: border-box;
}

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

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

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

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

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

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

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

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

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

.DateAndTimePopover_inputsContainer_19a > div {
    flex: 1;
  }

.DateAndTimePopover_inputsContainer_19a .DateAndTimePopover_input_305 {
    width: 100%;
    min-height: 32px;
    min-height: var(--inputHeight);
    border: 1px solid #e2e2e2;
    border: 1px solid var(--borderDefault);
    box-shadow: none;
    padding: 0 8px;
    padding: 0 var(--spacing-8);
    border-radius: 8px;
  }

.DateAndTimePopover_inputsContainer_19a .DateAndTimePopover_input_305.DateAndTimePopover_leftInput_c6f {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

.DateAndTimePopover_inputsContainer_19a .DateAndTimePopover_input_305.DateAndTimePopover_rightInput_21d {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 1px solid transparent;
  }

.DateAndTimePopover_inputsContainer_19a .DateAndTimePopover_input_305.DateAndTimePopover_rightInput_21d:focus {
      border-left: 1px solid #598df2;
      border-left: 1px solid var(--borderFocused);
    }

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

.DateRangePickerPopover_CustomDate_actions_141 {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid #e2e2e2;
  border-top: 1px solid var(--borderDefault);
  padding: 14px;
}

.DateRangePickerPopover_CustomDate_dates_f55 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0;
  padding: 0 14px 14px;
}

input[type='text'].DateRangePickerPopover_CustomDate_input_fd5 {
  font-size: 14px;
  line-height: 16px;
  width: 104px;
  height: auto;
  margin: 0;
  padding: 7px;
  box-sizing: border-box;
}

.DateRangePickerPopover_CustomDate_clearButton_481 {
  margin-right: auto;
}


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