:root {
  /**
  * COLORS -- Grays
  * ---------------
  *
  * TODO: transition to numbered scale & replace in-app uses of deprecated colors
  * https://www.figma.com/file/TWrpsC0Vz7VBj0YCNXtFYo3m/1.-Colors?node-id=35%3A0
  */

  --black: #000000;
  --gray-90: #1b1b1b;
  --gray-80: #303030;
  --gray-70: #474747;
  --gray-60: #5e5e5e;
  --gray-50: #767676;
  --gray-40: #919191;
  --gray-30: #ababab;
  --gray-20: #c6c6c6;
  --gray-10: #e2e2e2;
  --gray-05: #f1f1f1;
  --white: #ffffff;

  /**
   * COLORS -- Cyan
   * --------------
   */
  --cyan-05: #f5faff;

  /**
   * COLORS -- type
   * --------------
   */ /* Type */
  --linkColor: #3781b8; /* Old @closeBlue */
  --linkColorHover: #3274a6;
  --surfaceBackgroundDefault: var(--white);
  --discountColor: var(--colorBrandRed);

  /* TODO: update all calls to these variable and only use --gray-XX */
  --colorMako: #464a55;
  --closeSilverChalice: #b2b2b2;

  /**
  * COLORS -- States
  * ----------------
  */

  /* Success */
  --successPrimaryColor: var(--colorBrandGreen);
  --successBackgroundColor: #edf9f1;
  --successBorderColor: #dce6df;

  /* Failure */
  --failurePrimaryColor: var(--colorTextDanger);
  --failureBackgroundColor: #fae6e8;
  --failureBorderColor: #e8d4d7;

  /* Warning */
  --warningPrimaryColor: var(--bgWarn);
  --warningBackgroundColor: #fffae7;
  --warningBorderColor: #ece7d5;

  /* Blues */
  /* --closeVeryDarkBlue: @colorMako; */
  --closeLightBlue: #eef7fb;
  --closeBrightBlue: #57b7df;
  --blueMuted: #eef7fb;

  /**
  * COLORS -- Component-specific
  * -------------------------
  */

  /* Dropdowns/Selects */
  --selectHover: var(--gray-05);

  /* Tables */
  --tableShadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
  --tableBorderRadius: 5px;

  /* Base */
  --baseFontFamily: -apple-system, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, 'Segoe UI', Roboto, Oxygen-Sans,
    Ubuntu, Cantarell, 'Helvetica Neue', sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
  --monoFontFamily: Monaco, Menlo, Consolas, 'Courier New', monospace;
  --baseBorderRadius: 3px;
  --baseInputBorderRadius: 7px;

  /* Fonts */
  --headingSizeSuper: 30px;
  --headingSizeDisplay: 24px;
  --headingSizeLarge: 18px;
  --headingSizeMedium: 16px;
  --fontSizeBase: 14px;
  --fontSizeSmall: 13px;
  --fontSizeTiny: 12px;

  --fontWeightBold: 600;

  /* Shadows */
  --tileShadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.05),
    0 1px 1px 0 rgba(0, 0, 0, 0.05);
  --tileShadowActive: inset 0 -1px 0 0 rgba(0, 0, 0, 0.05),
    0 1px 10px 0 rgba(0, 0, 0, 0.55);
  --panelShadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  --footerShadow: 0 1px 15px 0 rgba(0, 0, 0, 0.1);

  /**
  * https://www.figma.com/file/eflpAcOSTsb5Gbm0eizgJzSf/Atoms?node-id=9870%3A57119
  * Shadow level 1 is default
  * Shadow level 2 is hover state
  * Shadow level 3 is menus and callouts
  * Shadow level 4 is modals and dragging
  */
  --shadowLevel1: 0 1px 1px rgba(0, 0, 0, 0.05);
  --shadowLevel2: 0 3px 5px rgba(0, 0, 0, 0.05);
  --shadowLevel3: 0 8px 12px rgba(0, 0, 0, 0.1);
  --shadowLevel4: 0 15px 25px rgba(0, 0, 0, 0.15);

  /* General */
  --disabledOpacity: 0.5;

  /* Spacing */
  /* Must match js/consts/spacing.js and js/components/structure/types.ts */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;

  /* Gradients */
  --defaultThreeColors: linear-gradient(#fcfcfc, #f9f9f9 50%, #eee);

  /* Layout */
  --leftNavWidth: 256px;
  --leftNavBg: var(--gray-90);
  --leftNavLoginAsBg: #562133;
  --loginAsColor: #e7c2ce;
  --loginAsHover: #451a29;

  /* Modals */
  --modalBodyPadding: var(--spacing-16);
  --modalBorderRadius: 10px;
  --zindexModalBackdrop: 1040;
  --zindexModal: 1050;

  /* Forms */
  --inputHeight: 32px;
  --inputPadding: 7px;

  /* Menus – Should match JS - js/consts/menus.ts */
  --menuMaxHeight: 800px;

  /* Layout z-indexes */
  --stickyHeaderZIndex: 10;
  --stickyToolbarZIndex: 9; /* behind sticky header so it's border or shadow can be seen */

  /* Table z-indexes */
  --tableStickyEdgeCellZIndex: 1;
  --tableStickyCornerCellZIndex: 2;
  --tableStickyIndicatorZIndex: 3;
  --userAvatarZIndex: 10;
  --tableColumnDndMarkerZIndex: 11; /* behind sticky cell/header */
  --tableStickyBodyCellZIndex: 12; /* in front of UserAvatar */
  --tableStickyHeaderCellZIndex: 13;

  /* Breakpoints */
  /* Must match JS - js/utils/responsive.js */
  --mobileWidth: 768px;
  --desktopWidth: 1120px;

  /* Motion */
  --standardCurve: cubic-bezier(0.4, 0, 0.2, 1);
  --accelerationCurve: cubic-bezier(0.4, 0, 1, 1);
  --decelerationCurve: cubic-bezier(0, 0, 0.2, 1);
  --sharpCurve: cubic-bezier(0.4, 0, 0.6, 1);

  /* robert penner's easing equations as CSS: https://matthewlein.com/tools/ceaser */
  --easeInOutQuad: cubic-bezier(0.455, 0.03, 0.515, 0.955);

  /**
  * COLORS -- Domain-specific
  * -------------------------
  */

  /* Opportunity Statuses */
  --statusTypeActiveColor: #ffbd2e;
  --statusTypeWonColor: #8d8;
  --statusTypeLostColor: #ccc;

  /* Activities */
  --colorActivityOpportunityDefault: #a6e2d3;
  --colorActivityOpportunityMuted: #c4f5cb;
  --colorActivityOpportunityDark: #1c5328;

  --colorActivityCreateDefault: #be9797;
  --colorActivityCreateMuted: #e2e2e2;
  --colorActivityCreateDark: #474747;

  --colorActivityTaskDefault: #be9797;
  --colorActivityTaskMuted: #ffdbc1;
  --colorActivityTaskDark: #663914;

  --colorActivityTaskCompleteDefault: #be9797;
  --colorActivityTaskCompleteMuted: #ffdbc1;
  --colorActivityTaskCompleteDark: #791414;

  --colorActivityNoteDefault: #eacf9f;
  --colorActivityNoteMuted: #f9e9a1;
  --colorActivityNoteDark: #564400;

  --colorActivityCustomDefault: #eacf9f;
  --colorActivityCustomMuted: #f9e9a1;
  --colorActivityCustomDark: #564400;

  --colorActivitySmsDefault: #69c0d0;
  --colorActivitySmsMuted: #b3f4f1;
  --colorActivitySmsDark: #005150;

  --colorActivityEmailDefault: #8badc5;
  --colorActivityEmailMuted: #c9e7ff;
  --colorActivityEmailDark: #144a6d;

  --colorActivityMeetingDefault: #b79dd1;
  --colorActivityMeetingMuted: #e4ddff;
  --colorActivityMeetingDark: #6a3a99;

  --colorActivityImportUpdateDefault: #c4b78c;
  --colorActivityImportUpdateMuted: #e2e2e2;
  --colorActivityImportUpdateDark: #474747;

  --colorActivityCallDefault: #b7dba1;
  --colorActivityCallMuted: #c4f5cb;
  --colorActivityCallDark: #2c5e0e;

  --colorActivityStatusChangeDefault: #c9d061;
  --colorActivityStatusChangeMuted: #e2e2e2;
  --colorActivityStatusChangeDark: #474747;

  --colorAssignUserActivityDark: #663914;
  --colorAssignUserActivityMuted: #ffdbc1;

  --colorActivityMissedCallDark: var(--failurePrimaryColor);
  --colorActivityMissedCallMuted: #fbe6e8;

  /* TODO: These adjustment needs to be made until all activities have been */
  /* migrated to the new components, at which point they can be removed in */
  /* favor of shared components. */
  /* For current progress of migration, see: https://github.com/closeio/close-ui/issues/5351 */
  --activityBorderRadius: 7px;
  --activityHeaderHorizontalGap: 12px;
  --activitySmallMarginAdjustment: -4px;
  --activityUserMarginAdjustment: -2px;

  /* Minimum height of a row of text */
  --activityMinRowHeight: 24px;
  --activityIconWidthMobile: 24px;
  --activityCollapsedIconWidth: 14px;

  /* These should match the values in js/components/leadActivities/layout/consts.ts */
  --activityHorizontalGutter: 12px;
  --activityVerticalGutter: 8px;

  /* Sequence Steps */
  --sequenceStepEmailColor: var(--colorActivityEmailDark);
  --sequenceStepEmailBg: var(--colorActivityEmailMuted);

  --sequenceStepCallColor: var(--colorActivityCallDark);
  --sequenceStepCallBg: var(--colorActivityCallMuted);

  --sequenceStepSMSColor: var(--colorActivitySmsDark);
  --sequenceStepSMSBg: var(--colorActivitySmsMuted);

  --sequenceStepTaskColor: var(--colorActivityTaskDark);
  --sequenceStepTaskBg: var(--colorActivityTaskMuted);

  --sequenceStepLeadAssignmentColor: var(--colorAssignUserActivityDark);
  --sequenceStepLeadAssignmentBg: var(--colorAssignUserActivityMuted);

  --workflowErrorBorderColor: #ff9ea5;
  --workflowErrorBackgroundColor: #fff8f8;

  /* HighlightText */
  --highlightTextYellow: rgba(252, 204, 11, 0.3);
  --highlightTextYellowActive: rgba(252, 204, 11, 0.6);
}

/* Animations */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes shake {
  from,
  to {
    transform: translate3d(0, 0, 0);
  }

  20%,
  50%,
  80% {
    transform: translate3d(-10px, 0, 0);
  }

  35%,
  65% {
    transform: translate3d(10px, 0, 0);
  }
}

.Btn {
  --btnBaseRadius: 16px;
  --btnMiniSize: 22px;
  --btnSmallSize: 26px;
  --btnRegularSize: 30px;
  --btnLargeSize: 44px;

  /* TODO [darkmode] needs an alias, or --borderFocus needs updating */
  --colorButtonFocusRingDefault: var(--colorBlue20);
  /* TODO [darkmode] might need a dedicated error focus alias */
  --colorButtonFocusRingDanger: color-mix(
    in srgb,
    var(--colorTextDanger) 50%,
    transparent
  );

  display: inline-block;
  position: relative;
  max-width: 100%;
  padding: 6px 12px;
  margin-bottom: 0; /* For input.Btn */
  vertical-align: middle;
  border: 1px solid #e2e2e2;
  border: 1px solid var(--borderButtonDefaultEnabled);
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
  text-align: center;
  text-shadow: none;
  border-radius: 16px;
  border-radius: var(--btnBaseRadius);
  background: #ffffff;
  background: var(--surfaceBackgroundDefault);
  font-size: 14px;
  font-weight: 400;
  color: #2e2e2e;
  color: var(--colorTextDefault);
  cursor: pointer;
  box-sizing: border-box;
  white-space: nowrap;
  line-height: 16px;
  transition:
    all 0.2s ease-in-out, visibility none;
}

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

.Btn:hover {
    background: #f1f1f1;
    background: var(--bgButtonDefaultHover);
    color: #2e2e2e;
    color: var(--colorTextDefault);
    border-color: #e2e2e2;
    border-color: var(--borderButtonDefaultHover);
  }

.Btn.Btn:focus-visible {
    box-shadow: 0 0 0 3px var(--colorButtonFocusRingDefault);
  }

.Btn:active,
    .Btn:active:hover {
      background-color: #f1f1f1;
      background-color: var(--bgButtonDefaultPressed);
    }

.Btn:focus:hover {
    outline: none;
  }

.Btn[disabled],
    .Btn.disabled,
    .Btn[disabled]:focus,
    .Btn.disabled:focus,
    .Btn[disabled]:focus:active,
    .Btn.disabled:focus:active,
    .Btn[disabled]:active:hover,
    .Btn.disabled:active:hover,
    .Btn[disabled]:focus:hover,
    .Btn.disabled:focus:hover,
    .Btn[disabled]:active,
    .Btn.disabled:active,
    .Btn[disabled]:hover,
    .Btn.disabled:hover {
      opacity: 0.5 !important;
      opacity: var(--disabledOpacity) !important;
      cursor: not-allowed !important;
      background-image: none !important;
      text-shadow: none !important;
    }

.Btn .glyphicons {
    width: var(--btnRegularSize);
    text-align: center;
    margin-left: -12px;
    float: left;
    line-height: 1;
  }

.Btn .glyphicons:before {
      text-align: center;
      display: block;
      color: inherit;
    }

.Btn .glyphicons.prepends-text {
      margin-right: 0;
    }

/* Color variants */
/* -------------------------------------------------- */

.Btn.Btn--primary,
.Btn.Btn--danger {
  font-weight: 600;
  font-weight: var(--fontWeightBold);
}

/* Button Primary / Danger */

.Btn--primary,
  .Btn--primary:focus,
  .Btn--primary[disabled]:hover {
    background-color: #2b6cf0;
    background-color: var(--bgButtonPrimaryEnabled);
    border-color: rgb(34, 86, 192);
    border-color: var(--borderButtonPrimary);
    color: #ffffff;
    color: var(--colorIconNeutralWhite);
  }

.Btn--primary .glyphicons:before {
    color: #ffffff;
    color: var(--colorIconNeutralWhite);
  }

.Btn--primary:hover {
    color: #ffffff;
    color: var(--colorIconNeutralWhite);
    background-color: rgb(39, 97, 216);
    background-color: var(--bgButtonPrimaryHover);
    border-color: rgb(34, 86, 192);
    border-color: var(--borderButtonPrimary);
  }

.Btn--primary:active,
    .Btn--primary.Btn--active,
    .Btn--primary:active:hover,
    .Btn--primary.Btn--active:hover,
    .Btn--primary:active:focus,
    .Btn--primary.Btn--active:focus {
      background-color: rgb(37, 92, 204);
      background-color: var(--bgButtonPrimaryPressed);
    }

.Btn--danger,
  .Btn--danger:focus,
  .Btn--danger[disabled]:hover {
    background-color: #ffffff;
    background-color: var(--bgButtonDangerEnabled);
    border-color: rgb(177, 12, 26);
    border-color: var(--borderButtonDanger);
    color: #dd0f21;
    color: var(--colorTextDanger);
  }

.Btn--danger:focus-visible {
    box-shadow: 0 0 0 3px var(--colorButtonFocusRingDefault);
  }

.Btn--danger .glyphicons:before {
    color: #dd0f21;
    color: var(--colorTextDanger);
  }

.Btn--danger:hover {
    background-color: #dd0f21;
    background-color: var(--bgButtonDangerHover);
    color: #ffffff;
    color: var(--surfaceBackgroundDefault);
    border-color: rgb(177, 12, 26);
    border-color: var(--borderButtonDanger);
  }

.Btn--danger:active,
    .Btn--danger.Btn--active,
    .Btn--danger:active:hover,
    .Btn--danger.Btn--active:hover {
      background-color: rgb(188, 13, 28);
      background-color: var(--bgButtonDangerPressed);
      color: #ffffff;
      color: var(--surfaceBackgroundDefault);
    }

.Btn--transparent,
  .Btn--transparent:focus,
  .Btn--transparent[disabled],
  .Btn--transparent[disabled]:hover {
    background: transparent;
    background: var(--bgButtonBorderlessEnabled);
    border: 1px solid transparent;
    box-shadow: none;
  }

.Btn--transparent:hover {
    border-color: transparent;
    background-color: rgba(0, 0, 0, 0.1);
    background-color: var(--bgButtonBorderlessHover);
  }

.Btn--transparent:active,
    .Btn--transparent.Btn--active,
    .Btn--transparent:active:hover,
    .Btn--transparent.Btn--active:hover {
      border-color: transparent;
      background-color: rgba(0, 0, 0, 0.15);
      background-color: var(--bgButtonBorderlessPressed);
    }

.Btn--gray,
  .Btn--gray:focus,
  .Btn--gray[disabled],
  .Btn--gray[disabled]:hover {
    border: 1px solid #e2e2e2;
    border: 1px solid var(--borderDefault);
    background-color: #f1f1f1;
    background-color: var(--surfaceBackgroundDark);
    box-shadow: none;
  }

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

.Btn--gray:active,
    .Btn--gray:active:hover {
      border-color: #e2e2e2;
      border-color: var(--borderDefault);
      background-color: #f1f1f1;
      background-color: var(--surfaceBackgroundDark);
    }

.Btn--withDropdownArrow::after {
    content: '';
    display: inline-block;
    margin-left: 8px;
    width: 0;
    height: 0;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    border-top: 4px solid currentColor;
    vertical-align: middle;
  }

.Btn--withDropdownArrow.Btn--small::after {
    /* vertical alignment of the arrow on small buttons */
    margin-top: -1px;
  }

/* Subcomponents */
/* (React atom only) */
/* --------------------- */

.Btn__text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.Btn__icon {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 38px;
  height: 28px;
  align-items: center;
  justify-content: center;
}

.Btn__icon + .Btn__text {
    margin-left: 24px;
  }

.Btn__icon.iconEnd {
    left: auto;
    right: 0;
  }

.Btn__icon.iconEnd + .Btn__text {
      margin: 0 24px 0 0;
    }

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

/* Sizes */
/* -------------------------------------------------- */

.Btn--mini {
  line-height: 12px;
  font-size: 11px;
  padding: 4px 6px;
}

.Btn--mini .glyphicons {
    width: var(--btnMiniSize);
    margin-left: -6px;
  }

.Btn--mini .Btn__icon {
    width: 22px;
    height: 20px;
  }

.Btn--mini .Btn__icon + .Btn__text {
      margin-left: 16px;
    }

.Btn--mini .Btn__icon.iconEnd + .Btn__text {
      margin: 0 16px 0 0;
    }

.Btn--mini .Btn__icon svg {
      width: 12px;
      height: 12px;
    }

.Btn--small {
  line-height: 16px;
  font-size: 13px;
  padding: 4px 12px;
}

.Btn--small .glyphicons {
    width: var(--btnSmallSize);
  }

.Btn--small .Btn__icon {
    width: 30px;
    height: 24px;
  }

.Btn--small .Btn__icon + .Btn__text {
      margin-left: 18px;
    }

.Btn--small .Btn__icon.iconEnd + .Btn__text {
      margin: 0 18px 0 0;
    }

.Btn--small .Btn__icon svg {
      width: 14px;
      height: 14px;
    }

.Btn--large {
  line-height: 20px;
  font-size: 16px;
  padding: 11px 16px;
  border-radius: calc(var(--btnLargeSize) / 2);
}

.Btn--large .glyphicons {
    width: var(--btnLargeSize);
    margin-left: -16px;
    top: 2px;
  }

.Btn--wide {
  padding: 6px 24px;
}

.Btn--fullWidth {
  display: block;
  width: 100%;
}

.Btn--withFlexLayout {
  display: flex;
  align-items: center;
}

/* Icon buttons (without text) */
/* -------------------------------------------------- */

/* Btn--icon are older handlebars-era buttons originally used with glyphicons */
.Btn.Btn--icon {
  padding-left: 0;
  padding-right: 0;
  width: var(--btnRegularSize);
  height: var(--btnRegularSize);
  overflow: hidden;
}
.Btn.Btn--icon.Btn--mini {
    width: var(--btnMiniSize);
    height: var(--btnMiniSize);
  }
.Btn.Btn--icon.Btn--small {
    width: var(--btnSmallSize);
    height: var(--btnSmallSize);
    padding: 5px;
  }
.Btn.Btn--icon.Btn--small svg {
      width: 12px;
      height: 12px;
    }
.Btn.Btn--icon.Btn--large {
    width: var(--btnLargeSize);
    height: var(--btnLargeSize);
  }
.Btn.Btn--icon.Btn--small .glyphicons, .Btn.Btn--icon.Btn--mini .glyphicons, .Btn.Btn--icon.Btn--large .glyphicons {
      width: auto;
    }
.Btn.Btn--icon .glyphicons {
    top: 0; /* override bootstrap */
    margin-left: 0;
    float: none;
    width: auto;
  }

/* React icon-only buttons */
.Btn--iconOnly {
  width: 30px;
  height: 30px;
}
.Btn--iconOnly.Btn--withDropdownArrow {
    width: 62px;
  }
.Btn--iconOnly.Btn--withDropdownArrow::after {
      margin-left: 24px;
    }
.Btn--iconOnly.Btn--withDropdownArrow .Btn__icon {
      padding-right: 16px;
      box-sizing: border-box;
    }
.Btn--iconOnly.Btn--withDropdownArrow.Btn--small {
      width: 50px;
    }
.Btn--iconOnly.Btn--withDropdownArrow.Btn--small::after {
        margin-left: 18px;
      }
.Btn--iconOnly.Btn--small {
    width: 26px;
    height: 26px;
  }
.Btn--iconOnly.Btn--mini {
    width: 20px;
    height: 20px;
  }
.Btn--iconOnly .Btn__icon {
    width: 100% !important;
    height: 100% !important;
  }

/* Lead Sidebar buttons */
/* -------------------------------------------------- */

.SidebarActionBtn {
  background: transparent;
  border: 0;
  width: 26px;
  height: 26px;
  box-sizing: border-box;
  border-radius: 50%;
  color: #464a55;
  display: flex;
  justify-content: center;
  align-items: center;
}

.SidebarActionBtn span.SidebarActionBtn__icon {
    width: 14px;
    height: 14px;
    display: flex;
    justify-content: center;
  }

.SidebarActionBtn span.SidebarActionBtn__icon svg {
      width: 14px;
      height: 14px;
    }

.SidebarActionBtn:not(.disabled):hover,
    .SidebarActionBtn:not(.disabled):active {
      color: #262e39;
      background: rgba(0, 0, 0, 0.05);
    }

.SidebarActionBtn.disabled {
    color: #464a55;
    opacity: 0.5;
  }

.SidebarActionBtn.disabled:hover {
      cursor: not-allowed;
    }

/* Link buttons */
/*
/* Make a button look and behave like a link, while still taking up the same */
/* space as a button. */
/* -------------------------------------------------- */

.Btn--link {
  border-color: transparent;
  cursor: pointer;
  color: #3781b8;
  color: var(--linkColor);
  border-radius: 0;
}

.Btn--link:hover,
  .Btn--link:focus,
  .Btn--link:focus:not(:hover),
  .Btn--link:active,
  .Btn--link:active:hover,
  .Btn--link:active:focus {
    color: #3274a6;
    color: var(--linkColorHover);
    -webkit-text-decoration: underline;
    text-decoration: underline;
    background-color: transparent;
    background: transparent;
    box-shadow: none;
    text-shadow: none;
    border-color: transparent;
  }

.Btn--link[disabled],
    .Btn--link[disabled]:focus:active,
    .Btn--link[disabled]:focus:hover,
    .Btn--link[disabled]:active:hover {
      color: #3781b8;
      color: var(--linkColor);
      -webkit-text-decoration: none;
      text-decoration: none;
      border: 0 none;
    }

.Btn--link,
.Btn--link:active,
.Btn--link[disabled] {
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  border-color: transparent;
}

/* Button groups */
/* -------------------------------------------------- */

.BtnGroup {
  position: relative;
  display: inline-block;
  white-space: nowrap; /* prevent buttons from wrapping when in tight spaces (e.g., the table on the tests page) */

  /* Remove border radius, then re-add to first and last elements */
}

.BtnGroup > .Btn {
    position: relative;
    border-radius: 0;
  }

.BtnGroup > .Btn.Btn--icon:not(:only-child):first-child {
      width: auto;
      padding-left: 9px;
      padding-right: 6px;
    }

.BtnGroup > .Btn.Btn--icon:not(:only-child):last-child {
      width: auto;
      padding-left: 6px;
      padding-right: 9px;
    }

/* If button is in a group and has no label, give the first and last one */

/* a bit more breathing room */

/* no use case yet for large or mini buttons here. */

.BtnGroup > .Btn--iconOnly:not(:only-child):first-child,
    .BtnGroup > .Btn--iconOnly:not(:only-child):last-child {
      width: 36px;
    }

.BtnGroup > .Btn--iconOnly.Btn--small:not(:only-child):first-child,
      .BtnGroup > .Btn--iconOnly.Btn--small:not(:only-child):last-child {
        width: 30px;
      }

/* On hover/focus/active, bring the proper btn to front */

.BtnGroup > .Btn:hover,
  .BtnGroup > .Btn:focus,
  .BtnGroup > .Btn:active {
    z-index: 2;
  }

.BtnGroup > .Btn:first-child {
    border-top-left-radius: var(--btnBaseRadius);
    border-bottom-left-radius: var(--btnBaseRadius);
  }

.BtnGroup > .Btn:last-child {
    border-top-right-radius: var(--btnBaseRadius);
    border-bottom-right-radius: var(--btnBaseRadius);
  }

.BtnGroup > .Btn + .Btn {
    margin-left: -1px;
  }

/* Miscellaneous */
/* -------------------------------------------------- */

/* Form Buttons */
.cancel-edit + .Btn {
  margin-left: 5px;
}

.modules_utils_visuallyHidden_1b8 {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}

/* Glyphicons */
/* Since icons are fonts, they can be placed anywhere text is placed and are */
/* thus automatically sized to match the surrounding child. To use, create an */
/* inline element with the appropriate classes, like so: */
/* <a href="#"><i class="halflings halflings-leaf"></i> Leaf</a> */
/* Import the fonts */
@font-face {
  font-family: 'Glyphicons Halflings';
  src: url(https://app.closeiocdn.com/dist/fonts/glyphicons-halflings-regular-1.9.2b.611e279815eb6b755c0375b4b2e46cee.woff2) format('woff2'), url(https://app.closeiocdn.com/dist/fonts/glyphicons-halflings-regular-1.9.2b.6cba59f7c522574a6591416ea8bc159f.woff) format('woff');
}
/* Catchall baseclass */
.halflings {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  vertical-align: top;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* TODO: this is the last halflings being used, remove it */
.halflings-menu-hamburger:before {
  content: '\E236';
}

.animated {
  animation-duration: 200ms;
  animation-fill-mode: both;
}
@keyframes bounceInDown {
  0% {
    opacity: 0;
    transform: translateY(-80px);
  }
  70% {
    opacity: 1;
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0);
  }
}
.bounceInDown {
  animation-name: bounceInDown;
}
.LeadActivities {
  /* ModelLoaderView */
  /* Place the loader higher on the page when there are no results to
     compensate for the existing top-of-page spacing. */
}
.LeadActivities .loader {
  display: block;
  margin: 24px auto 24px;
  margin: var(--spacing-24) auto var(--spacing-24);
}
.LeadActivities.hasNoResults .loader {
  margin: 12px auto 12px;
  margin: var(--spacing-12) auto var(--spacing-12);
}
.activities-list-heading {
  margin-bottom: 16px;
}
.activities-list-heading:empty {
  display: none;
}
.activities-list:not(.is-hidden) + .activities-list-heading {
  margin-top: 8px;
}
.activities-list {
  font-size: 14px;
  position: relative;
  /* the "line" of the timeline */
  /* cover up vertical line for last activity */
}
.activities-list .timeline-style {
  background: #ddd;
  box-shadow: 0 0 1px #fff;
}
.activities-list li.activity:last-child::before {
  content: '';
  margin: 3px 0 0 17px;
  height: 100%;
  width: 1px;
  display: block;
  position: absolute;
  background: #f9f9f9;
  background: var(--surfaceBackgroundMedium);
}
.activities-list ul.activities-list-content {
  list-style-type: none;
  padding: 0;
  margin: 0;
  /* vertical line for the timeline */
}
.activities-list ul.activities-list-content::before {
  content: '';
  margin: 3px 0 0 17px;
  height: 100%;
  width: 1px;
  display: block;
  position: absolute;
  background: #e2e2e2;
  background: var(--borderDefault);
}
.activities-list li.activity {
  position: relative;
  margin: 0 0 12px 0;
  min-height: 12px;
  /* important for .tiny */
}
.activities-list li.activity:hover .hover-action {
  display: inline;
}
.activities-list li.activity.editing {
  /* don't show edit icon of currently-being-edited row */
}
.activities-list li.activity.editing:hover .edit {
  display: none;
}
.activities-list li.activity .activity-task {
  /* fixes mis-alignment between "Done" btn and "Snooze" BtnGroup */
  /* e.g. "task was snoozed" icon */
}
.activities-list li.activity .activity-task .BtnGroup {
  font-size: inherit;
}
.activities-list li.activity .activity-task > .glyphicons {
  top: 3px;
  color: #666;
}
.activities-list li.activity .activity-task.type-incoming_sms {
  margin-top: -3px;
}
.activities-list li.activity .activity-task.view-future {
  display: inline;
}
.activities-list li.activity .activity-snooze-menu-container {
  display: inline-flex;
  height: 20px;
  align-items: center;
}
.activities-list li.activity .email-sequence-followup {
  display: inline-flex;
  align-items: center;
  height: 20px;
}
.activities-list li.activity .future-snooze-view {
  background: none;
  box-shadow: none;
  border: none;
  color: #666;
  font-size: 14px;
}
.activities-list li.activity .contact {
  cursor: default;
  color: #999;
}
.activities-list li.activity .view-side {
  padding-left: 2px;
  padding-right: 2px;
}
.activities-list small {
  font-size: 13px;
  color: #666;
}
.activities-list time {
  color: #aaa;
  border-bottom: dotted 1px #999;
  font-size: 1em;
  cursor: pointer;
}
.activities-list .has-notification span.title {
  font-weight: 600;
  font-weight: var(--fontWeightBold);
}
.activities-list .hover-action {
  display: none;
  padding-right: 4px;
  margin-left: 10px;
}
.activities-list > .loader {
  margin-left: 48px;
}
.activities-list .editing {
  /* for now we don't want any activities to show labels (bbf generates them automatically) */
  /* could override on a per-activity basis */
}
.activities-list .editing .bbf-field label {
  display: none;
}
.activities-list .editing textarea {
  margin: 0;
  padding: 5px;
  height: 70px;
  width: 100%;
  box-sizing: border-box;
  max-height: 370px;
  /* don't let autosize grow too large or scrolling is annoying */
  resize: vertical;
  border-radius: 0;
}
.activities-list .editing .bbf-form {
  margin: 0;
}
.activities-list .editing .bbf-form .bbf-field {
  margin: 0;
}
.activities-list .editing .bbf-form .actions {
  /* clearfix, copied from bootstrap */
  *zoom: 1;
  margin: 5px 0 0 0;
}
.activities-list .editing .bbf-form .actions:before,
.activities-list .editing .bbf-form .actions:after {
  display: table;
  content: '';
  line-height: 0;
}
.activities-list .editing .bbf-form .actions:after {
  clear: both;
}
.activities-list .editing .bbf-form .actions > a {
  margin: 0 5px 0 5px;
  line-height: 30px;
}
.activities-list-upcoming {
  transition: max-height 200ms ease-out;
  overflow: hidden;
}
.activities-list-upcoming ul.activities-list-content {
  transition: opacity 200ms ease-out;
  opacity: 1;
}
.activities-list-upcoming.is-hidden {
  transition: max-height 200ms ease-in;
}
.activities-list-upcoming.is-hidden ul.activities-list-content {
  transition: opacity 200ms ease-in;
  opacity: 0;
}
.activities-list-upcoming li.activity:last-child {
  margin-bottom: 0;
  padding-bottom: 9px;
}
.activities-list-upcoming.no-transition {
  transition: none;
}
.activities-list-upcoming.no-transition ul.activities-list-content {
  transition: none;
}
.no-activities {
  font-size: 14px;
  color: #919191;
  color: var(--gray-40);
  line-height: 20px;
}
.no-activities__title {
  font-weight: 600;
  font-weight: var(--fontWeightBold);
  margin-bottom: 4px;
}
/* TODO: should be LinkButton */
.Btn--link--no-activities {
  border: 0;
  padding: 0;
  line-height: inherit;
  vertical-align: baseline;
}
.is-sticky {
  position: sticky;
  top: 0;
  z-index: 10;
}

.Card {
  border: 1px solid #e2e2e2;
  border: 1px solid var(--borderDefault);
  border-radius: 3px;
  margin-bottom: 10px;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
  background-color: #ffffff;
  background-color: var(--bgCardBase);
}
.Card .Btn--link {
  color: inherit;
}
.Card__header {
  display: flex;
  height: 35px;
  line-height: 1;
  background: #f9f9f9;
  background: var(--bgCardMedium);
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  text-transform: uppercase;
}
.Card__title {
  margin: 0;
  font-size: 12px;
  flex-grow: 1;
  padding: 0 10px;
  line-height: 35px;
  letter-spacing: 1px;
  /* title can be clicked to toggle -- prevent selection happening in this case */
  -webkit-user-select: none;
          user-select: none;
}
.Card__count {
  margin-left: 8px;
  font-size: 12px;
  color: #a2a4aa;
  font-weight: 600;
  font-weight: var(--fontWeightBold);
}
.Card__addButton,
.Card__searchButton,
.Card__editButton,
.Card__cancelSearch {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  background-color: transparent;
  background-color: initial;
  padding: 0;
  width: 35px;
  opacity: 0.75;
  border-left: 1px solid #e2e2e2;
  border-left: 1px solid var(--borderDefault);
}
.Card__addButton svg,
.Card__searchButton svg,
.Card__editButton svg,
.Card__cancelSearch svg {
  width: 14px;
  height: 14px;
}
.Card__addButton:hover,
.Card__searchButton:hover,
.Card__editButton:hover,
.Card__cancelSearch:hover {
  opacity: 1;
  outline: none;
}
.Card__searchButton {
  margin-left: 3px;
}
.Card__cancelSearch {
  margin-right: 3px;
  border: none;
  color: #464a55;
  color: var(--colorMako);
}
.Card__searchForm {
  display: none;
  margin: 0;
  width: 100%;
}
.Card__searchInput {
  margin: 0;
  border: none;
  outline: none;
  box-shadow: none;
  width: auto;
  flex-grow: 1;
}
.Card__content {
  border-top: 2px solid #e2e2e2;
  border-top: 2px solid var(--borderDefault);
}
.Card--empty .Card__header {
  border-radius: 3px;
}
.Card--empty .Card__content {
  border-top: none;
}
.Card--searching .Card__title,
.Card--searching .Card__editButton,
.Card--searching .Card__addButton {
  display: none;
}
.Card--searching .Card__searchButton {
  cursor: default;
  opacity: 1;
  pointer-events: none;
  border: none;
}
.Card--searching .Card__searchFormContainer {
  display: flex;
  flex: 1 0 0;
}
.Card--searching .Card__searchForm {
  display: flex;
}
.Card__showMoreButton {
  padding-left: 10px;
  background-color: #f9f9f9;
  background-color: var(--bgCardMedium);
  line-height: 32px;
  border-top: 1px solid #e2e2e2;
  border-top: 1px solid var(--borderDefault);
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  font-size: 90%;
}
.Card__noResults {
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #ffffff;
  background-color: var(--bgCardBase);
  padding: 20px;
  margin-top: -1px;
}
.Card__noResults .Btn {
  margin-top: 10px;
}
.Card__noResults--visible {
  display: flex;
}

.Tasks__list {
  margin: 0;
}
.Tasks__item {
  cursor: default;
  list-style-type: none;
  background-color: #ffffff;
  background-color: var(--bgCardBase);
  border-bottom: 2px solid #e2e2e2;
  border-bottom: 2px solid var(--borderDefault);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  margin-top: -1px;
  transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: box-shadow 200ms var(--standardCurve), transform 200ms var(--standardCurve);
}
.Tasks__item:hover:not(.editing) .Task__editButton {
  display: flex;
}
.Tasks__item:hover:not(.editing) .Task__actions {
  position: relative;
  background-color: #ffffff;
  background-color: var(--bgCardBase);
}
.Tasks__item:hover:not(.editing) .Task__actions::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: -34px;
  background-color: #ffffff;
  background-color: var(--bgCardBase);
  box-shadow: -10px 0px 10px 1px #ffffff;
  box-shadow: -10px 0px 10px 1px var(--bgCardBase);
}
.Tasks__item:last-of-type {
  border-bottom: none;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}
.Tasks__item:last-of-type:not(:hover) {
  box-shadow: none;
}
.Tasks__item:last-of-type .Task {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}
.Task {
  display: flex;
  padding: 10px;
}
.Task.edit-side {
  background-color: #edf7fc;
}
.Task.edit-side form {
  margin: 0;
}
.Task.edit-side .field-is_complete {
  display: none;
}
.Task.edit-side .field-text input {
  box-sizing: border-box;
  width: 100%;
  height: 30px;
}
.Task.edit-side .field-date label {
  position: relative;
}
.Task.edit-side .field-date label::after {
  content: 'Time';
  position: absolute;
  left: 51%;
}
.Task.edit-side .field-date input {
  width: 49%;
}
.Task.edit-side .field-assigned_to select {
  width: 100%;
  height: 30px;
}
.Task.edit-side .actions button {
  width: 80px;
}
.Task__avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  margin-right: 8px;
}
.Task__avatar > img {
  border-radius: 3px;
}
.Task__avatar::after {
  border-radius: 3px;
}
.Task__content {
  flex-grow: 1;
  margin-right: 8px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* for Firefox */
}
.Task__description {
  line-height: 16px;
  font-weight: 600;
  font-weight: var(--fontWeightBold);
  word-wrap: break-word;
  word-break: break-word;
}
.Task__row {
  display: flex;
  align-items: center;
  gap: 4px;
  gap: var(--spacing-4);
}
.Task__row span.SidebarActionBtn__icon {
  width: 14px;
  height: 14px;
  margin-top: -1px;
}
.Task__row span.SidebarActionBtn__icon svg {
  width: 14px;
  height: 14px;
}
.Task__date {
  display: flex;
  align-items: center;
  gap: 4px;
  gap: var(--spacing-4);
  line-height: 16px;
  font-size: 80%;
  color: #464a55;
  color: var(--colorMako);
}
.Task__actions {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
}
.Task__buttons {
  display: flex;
  align-items: center;
  height: 32px;
  position: relative;
}
.Task__doneButton,
.Task__incompleteButton {
  padding: 0;
}
.Task__editButton.SidebarActionBtn {
  display: none;
  position: absolute;
  right: 24px;
  background-color: transparent;
  background-color: initial;
  padding: 0;
  outline: none;
}
.Task--completed .Task__description {
  -webkit-text-decoration: line-through;
  text-decoration: line-through;
}
.Task--withSnooze .Task__date {
  color: #d0021b;
}
.Task--withSnooze .Task__editButton.SidebarActionBtn {
  right: 52px;
}
.Task__fixedButtons {
  display: flex;
}

.Opportunities__list {
  --sectionBorder: 1px dashed var(--borderDefault);
  --opportunitySpacing: 10px;
  --columnPadding: 12px;
  margin: 0;
}
.Opportunities__item {
  cursor: default;
  list-style-type: none;
  background-color: #ffffff;
  background-color: var(--bgCardBase);
  border-bottom: 2px solid #e2e2e2;
  border-bottom: 2px solid var(--borderDefault);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  margin-top: -1px;
}
.Opportunities__item:last-of-type {
  border-bottom: none;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}
.Opportunities__item:last-of-type:not(:hover) {
  box-shadow: none;
}
.Opportunities__item:last-of-type .Opportunity {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}
.Opportunity__wrapper {
  padding: var(--opportunitySpacing);
}
.Opportunity__wrapper > :last-child {
  margin-bottom: 0;
}
.Opportunity__header {
  display: flex;
  margin-bottom: var(--opportunitySpacing);
}
.Opportunity__avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  margin-right: 8px;
}
.Opportunity__avatar > img {
  border-radius: 3px;
}
.Opportunity__avatar:after {
  border-radius: 3px;
}
.Opportunity__title {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 0;
  margin-right: 8px;
}
.Opportunity__name {
  font-weight: 600;
  font-weight: var(--fontWeightBold);
  line-height: 16px;
}
.Opportunity__confidenceAndDate {
  font-size: 85%;
  color: #464a55;
  color: var(--colorMako);
  line-height: 16px;
}
.Opportunity__status {
  margin-bottom: 18px;
}
.Opportunity__statusText {
  box-sizing: border-box;
  display: inline-block;
  padding: 2px 4px;
  color: rgba(0, 0, 0, 0.75);
  font-size: 70%;
  font-weight: 600;
  font-weight: var(--fontWeightBold);
  line-height: 14px;
  text-transform: uppercase;
  border-radius: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  vertical-align: top;
}
.Opportunity__statusText:hover {
  overflow: visible;
  overflow: initial;
  text-overflow: initial;
  white-space: inherit;
  word-wrap: break-word;
  word-break: break-word;
}
.Opportunity--active {
  border-left: 2px solid #ffbd2e;
  border-left: 2px solid var(--statusTypeActiveColor);
}
.Opportunity--active .Opportunity__statusText {
  background-color: #ffbd2e;
  background-color: var(--statusTypeActiveColor);
}
.Opportunity--won {
  border-left: 2px solid #8d8;
  border-left: 2px solid var(--statusTypeWonColor);
}
.Opportunity--won .Opportunity__statusText {
  background-color: #8d8;
  background-color: var(--statusTypeWonColor);
}
.Opportunity--lost {
  border-left: 2px solid #ccc;
  border-left: 2px solid var(--statusTypeLostColor);
}
.Opportunity--lost .Opportunity__statusText {
  background-color: #ccc;
  background-color: var(--statusTypeLostColor);
}
.Opportunity__actions {
  display: flex;
  align-items: center;
  /* ensure bootstrap dropdown positions correctly */
  position: relative;
}
.Opportunity__moreMenu {
  padding: 6px 0;
}
.Opportunity__moreLinks {
  margin: 0;
  padding: 0;
  white-space: nowrap;
}
.Opportunity__moreLinks p {
  margin: 0;
  line-height: 2;
}
.Opportunity__moreLinks a {
  display: block;
  -webkit-text-decoration: none;
  text-decoration: none;
  padding: 0 14px;
}
.Opportunity__moreLinks a:hover,
.Opportunity__moreLinks a:focus {
  color: #fff;
  background-color: #3781b8;
  background-color: var(--linkColor);
}
.Opportunity__moreLinks .link-text {
  padding-left: 2px;
}
.Opportunity__moreItem {
  display: flex;
  padding: 0 6px;
  line-height: 2;
}
.Opportunity__moreItem.delete {
  color: #d0021c;
}
.Opportunity__moreItem:hover {
  color: #fff;
  background-color: #3781b8;
  background-color: var(--linkColor);
}
.Opportunity__moreText {
  padding: 0;
}
.Opportunity__trashIcon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
}
.Opportunity__trashIcon svg {
  width: 16px;
}
.Opportunity__detail {
  margin-top: var(--opportunitySpacing);
  margin-bottom: var(--opportunitySpacing);
  font-size: 90%;
  word-break: break-all;
  word-break: break-word;
  line-height: 16px;
}
.Opportunity__contact {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  border-top: var(--sectionBorder);
  border-bottom: var(--sectionBorder);
  padding-top: var(--opportunitySpacing);
  padding-bottom: var(--opportunitySpacing);
}
.Opportunity__contactTitle {
  display: flex;
  align-items: center;
  padding-right: var(--opportunitySpacing);
  min-width: 0;
  flex-grow: 1;
}
.Opportunity__contactIcon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0 8px 0 0;
  color: #6a6f72;
}
.Opportunity__contactName {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-size: 13px;
}
.Opportunity__contactButtons {
  flex-shrink: 0;
  display: flex;
}
.Opportunity__contactButtons .SidebarActionBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-text-decoration: none;
  text-decoration: none;
}
.OpportunityCustomFieldValues {
  display: none;
}
.OpportunityCustomFieldValues.OpportunityCustomFieldValues--visible {
  display: block;
}
.OpportunityCustomFieldValues .CustomFields__showMoreButton {
  padding-left: 10px;
  background-color: #f9f9f9;
  background-color: var(--surfaceBackgroundMedium);
  line-height: 32px;
  border-top: 1px solid #e2e2e2;
  border-top: 1px solid var(--borderDefault);
  display: block;
  font-size: 10px;
  color: #5e5e5e;
  color: var(--colorTextMedium);
  text-transform: uppercase;
}

/* Styles shared between Contact and CustomFieldValue */
.Contact__extraInfo,
.CustomFieldValue {
  display: flex;
  position: relative;
  line-height: 16px;
  font-size: 90%;
  padding: 8px 10px;
  align-items: flex-start;
}
.Contact__extraInfo:hover,
.CustomFieldValue:hover {
  background-color: #f5f5f5;
}
.Contact__type,
.CustomFieldValue__name {
  flex: 0 0 25%;
  min-width: 80px;
  text-transform: capitalize;
  font-weight: 600;
  font-weight: var(--fontWeightBold);
  -webkit-user-select: none;
          user-select: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.Contact__data,
.CustomFieldValue__value {
  margin-left: 4px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.Contacts__list {
  margin: -1px 0 0;
}
.Contacts__item {
  cursor: default;
  list-style-type: none;
  background-color: #ffffff;
  background-color: var(--bgCardBase);
  border-bottom: 1px solid #e5e5e5;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: box-shadow 200ms var(--standardCurve), transform 200ms var(--standardCurve);
}
.Contacts__item:hover:not(.editing) {
  position: relative;
  box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.1);
}
.Contacts__item.is-animating {
  animation-name: shake;
  animation-duration: 0.6s;
}
.Contacts__item.sortable-ghost {
  opacity: 1;
  background-color: #f9f9f9;
  background-color: var(--surfaceBackgroundMedium);
}
.Contacts__item.sortable-chosen {
  border: 1px solid #e5e5e5;
  box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.1);
}
.Contacts__item:last-of-type {
  border-bottom: none;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}
.Contacts__item:last-of-type .Contact {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}
.Contacts__item:last-of-type:not(:hover):not(.Contact--expanded) {
  box-shadow: none;
}
.Contact {
  position: relative;
}
.Contact__dragger {
  cursor: move;
  box-sizing: border-box;
  display: none;
  position: absolute;
  top: calc(50% - 18px);
  left: -16px;
  width: 20px;
  height: 36px;
  border: 1px solid #d8d8d8;
  border-radius: 3px;
  background-color: #ffffff;
  background-color: var(--bgLight);
  z-index: 1;
}
.Contact__dragger::after {
  content: '';
  display: block;
  position: absolute;
  top: 6px;
  left: 5px;
  right: 5px;
  bottom: 6px;
  background-color: #d1d2d8;
  background-image: linear-gradient(#fff 20%, transparent 80%), linear-gradient(90deg, #d1d2d8 80%, #fff 20%);
  background-size: 3px 3px;
  width: 8px;
  height: 22px;
}
.Contact__headerContainer.highlighted {
  background-color: #ebf6fa;
}
.Contact__header {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.Contact__desc {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
  padding: 10px;
  min-width: 0;
  max-width: calc(100% - 30px);
}
.Contact__name {
  font-weight: 600;
  font-weight: var(--fontWeightBold);
  line-height: 16px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.Contact__title {
  font-size: 85%;
  color: #464a55;
  color: var(--colorMako);
  line-height: 16px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.Contact__actions {
  opacity: 0;
  display: flex;
  align-items: center;
  position: relative;
  /* always show on mobile */
}
.Contacts__item:hover .Contact__actions,
.Contact__actions.open {
  opacity: 1;
}
@media screen and (max-width: 767px) {
  .Contact__actions {
    opacity: 1;
  }
}
.Contact__moreMenu {
  padding: 6px 0;
  white-space: nowrap;
}
.Contact__moreLinks {
  margin: 0;
  padding: 0;
  white-space: nowrap;
}
.Contact__moreLinks p {
  margin: 0;
  line-height: 2;
}
.Contact__moreLinks a {
  display: block;
  -webkit-text-decoration: none;
  text-decoration: none;
  padding: 0 14px;
}
.Contact__moreLinks a:hover,
.Contact__moreLinks a:focus {
  color: #fff;
  background-color: #3781b8;
  background-color: var(--linkColor);
}
.Contact__moreLinks .link-text {
  padding-left: 2px;
}
.Contact__moreItem {
  display: flex;
  padding: 0 10px 0 6px;
  line-height: 2;
}
.Contact__moreItem.delete {
  color: #d0021c;
}
.Contact__moreItem:hover:not(.is-disabled) {
  color: #fff;
  background-color: #3781b8;
  background-color: var(--linkColor);
}
.Contact__moreItem:hover:not(.is-disabled) .Contact__label {
  background: #3274a6;
  background: var(--linkColorHover);
}
.Contact__moreItem.is-disabled {
  opacity: 0.3;
  cursor: default;
}
.Contact__moreText {
  padding: 0;
}
.Contact__expandIcon,
.Contact__trashIcon,
.Contact__primaryIcon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
}
.Contact__expandIcon svg,
.Contact__trashIcon svg,
.Contact__primaryIcon svg {
  width: 100%;
}
.Contact__trashIcon svg {
  width: 16px;
}
.Contact__primaryIcon svg {
  width: 16px;
}
.Contact__buttons {
  display: flex;
  margin: 10px 14px 10px 0;
}
.Contact__buttons .SidebarActionBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-text-decoration: none;
  text-decoration: none;
}
.Contact__emailWrapper {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 24px;
  grid-gap: 10px;
  gap: 10px;
  align-items: center;
}
.Contact__dataContainer {
  flex: 1;
  text-overflow: ellipsis;
  overflow: hidden;
}
.Contact__label {
  display: inline-block;
  padding: 0 6px;
  border-radius: 5px;
  background: #3781b8;
  background: var(--linkColor);
  color: #fff;
  height: 20px;
  line-height: 20px;
  margin-left: 10px;
  align-self: center;
  font-size: 12px;
}
.Contact__label--disabled {
  background: #919191;
  background: var(--gray-40);
}
.Contact--expanded {
  border-bottom: 2px solid #e5e5e5;
}
.Contact--expanded .Contact__expandIcon {
  transform: scale(1, -1);
}
.Contact__detail {
  border-top: 1px solid #e5e5e5;
  background-color: #ffffff;
  background-color: var(--bgCardBase);
}
.Contact__extraInfo {
  border-bottom: 1px solid #e5e5e5;
}
.Contact__extraInfo:last-child {
  border-bottom: none;
}
.Contact__extraInfo .Btn {
  position: absolute;
  top: 3px;
  right: 3px;
}
.Contact__type--url {
  text-transform: uppercase;
}
.Contact.edit-side {
  background-color: #edf7fc;
}
.Contact.edit-side form.bbf-form {
  position: relative;
  margin: 0;
  padding: 10px 10px 0;
}
.Contact.edit-side .field-name,
.Contact.edit-side .field-title {
  clear: left;
  float: left;
  width: 100%;
}
.Contact.edit-side .field-name input,
.Contact.edit-side .field-title input {
  box-sizing: border-box;
  width: 100%;
  height: 30px;
}
.Contact.edit-side .field-items .contact-editor {
  display: flex;
}
.Contact.edit-side .field-items .contact-editor [name='items'] {
  flex-grow: 1;
}
.Contact.edit-side .field-items .contact-editor .bbf-remove {
  color: #a3a5a9;
  background-color: #ffffff;
  background-color: var(--surfaceBackgroundDefault);
  border: 1px solid #e2e2e2;
  border: 1px solid var(--borderDefault);
  border-left-color: transparent;
  border-top-right-radius: 7px;
  border-top-right-radius: var(--baseInputBorderRadius);
  border-bottom-right-radius: 7px;
  border-bottom-right-radius: var(--baseInputBorderRadius);
  outline: 0;
}
.Contact.edit-side .field-items .contact-editor .bbf-remove:hover {
  color: #464a55;
  color: var(--colorMako);
}
.Contact.edit-side .field-items .contact-editor .bbf-remove:focus {
  border-left: 1px solid #598df2;
  border-left: 1px solid var(--borderFocused);
  border-color: #598df2;
  border-color: var(--borderFocused);
}
.Contact.edit-side .field-items .bbf-list > ul > li:last-of-type .field-data {
  width: 100%;
  max-width: 100%;
}
.Contact.edit-side .field-items .bbf-list > ul > li:last-of-type .field-data input {
  border-right-color: #e2e2e2;
  border-right-color: var(--borderDefault);
  border-top-right-radius: 7px;
  border-top-right-radius: var(--baseInputBorderRadius);
  border-bottom-right-radius: 7px;
  border-bottom-right-radius: var(--baseInputBorderRadius);
}
.Contact.edit-side .field-items .bbf-list > ul > li:last-of-type .field-data input:focus {
  border-right-color: #598df2;
  border-right-color: var(--borderFocused);
}
.Contact.edit-side .field-items .bbf-list > ul > li:last-of-type .field-type,
.Contact.edit-side .field-items .bbf-list > ul > li:last-of-type .bbf-remove {
  display: none;
}
.Contact.edit-side .field-data {
  clear: left;
  float: left;
  width: 70%;
  max-width: calc(100% - 50px);
}
.Contact.edit-side .field-data label {
  display: none;
}
.Contact.edit-side .field-data input {
  box-sizing: border-box;
  border-right-color: transparent;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  width: 100%;
  height: 30px;
}
.Contact.edit-side .field-data input:focus {
  border-right-color: #598df2;
  border-right-color: var(--borderFocused);
}
.Contact.edit-side .field-type {
  float: left;
  width: 30%;
  min-width: 50px;
}
.Contact.edit-side .field-type label {
  display: none;
}
.Contact.edit-side .field-type select {
  -webkit-appearance: none;
          appearance: none;
  box-shadow: none;
  width: 100%;
  /* override 32px default inputHeight so BB contact form renders correctly */
  height: 30px;
  font-size: 11px;
  line-height: 20px;
  padding-right: 8px;
  border-radius: 0;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAvElEQVR42mOIjY1dHxIS8hAfTkxMnMGQkZERDeT8AOL/OPCP3NxcbwagiWJAvBOXwpiYmJ0JCQkcDGlpaaxAo33CwsI+oCsKDQ39mJSU5FdfX8/EAAJAhaJAnavRFQJtWgOykQEGgDpY4uPj/YCmPoMpArKfg8RAcgzIAGiFFNDUuUimzc/JyZFiQAdA9zDHxcUFRkREPAFhoMIgkBgDNgAMBpno6Oj5QLwAxGbAAxhLS0uti4uLbUBsZAkAAPCACcxaUeQAAAAASUVORK5CYII=);
  background-repeat: no-repeat;
  background-position: 90% 50%;
  background-size: 5px 5px;
}
.contactCustomFields {
  border-top: 1px solid #e5e5e5;
}
.contactCustomFields.hide {
  display: none;
}
.contactCustomFields__title {
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
  font-weight: var(--fontWeightBold);
  padding: 10px 10px 0;
}
.contactActions__newField {
  display: block;
  width: 100%;
  text-align: center;
  padding: 10px 0;
}
.contactActions__formActions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #e2e2e2;
  border-top: 1px solid var(--borderDefault);
  padding: 10px;
}
.contactActions__delete {
  display: block;
}
.contactActions__right {
  display: flex;
}
.contactActions button {
  width: 80px;
}
.Card:not(.Card--searching) .Contacts__item:not(.editing):not(:only-child):hover .Contact__dragger {
  display: block;
}
.SidebarActionBtn__tooltip-sms {
  max-width: 200px;
}
.Contact__warningIcon {
  width: 14px;
  height: 14px;
  display: flex;
  justify-content: start;
  flex: 0 0 24px;
}
.Contact__warningIcon svg {
  width: 14px;
  height: 14px;
  color: #fccc0b;
  color: var(--fillWarn);
}
.Contact__warningIcon__tooltip {
  max-width: 280px;
}

.CustomFields:not(.adding) .CustomFields__item:last-of-type {
  border-bottom: none;
}
.CustomFields .CustomFields__form form {
  margin-top: -1px;
}
.CustomFields.adding .CustomFields__addNew {
  display: block;
}
.CustomFields.bulk-mode.editing {
  /* when editing in bulk mode we don't use CollectionView any more so hide the list */
}
.CustomFields.bulk-mode.editing.bulk-mode .CustomFields__list {
  display: none;
}
.CustomFields.bulk-mode .Card__searchButton {
  opacity: 0.25;
  pointer-events: none;
}
.CustomFields.bulk-mode .CustomFields__bulkActions {
  display: flex;
  flex-direction: column;
}
.CustomFields.editing .Card__addButton,
.CustomFields.adding .Card__addButton,
.CustomFields.editing .Card__editButton,
.CustomFields.adding .Card__editButton,
.CustomFields.editing .Card__searchButton,
.CustomFields.adding .Card__searchButton {
  opacity: 0.25;
  pointer-events: none;
}
.CustomFields .Card--empty .Card__editButton,
.CustomFields .Card--empty .Card__searchButton {
  opacity: 0.25;
  pointer-events: none;
}
.CustomFields__list {
  margin: 0;
}
.CustomFields__list--lead {
  background-color: #ffffff;
  background-color: var(--bgCardBase);
  margin-top: -1px;
}
.CustomFields__list--opportunities {
  background-color: #f9f9f9;
  background-color: var(--bgCardMedium);
  border-top: 1px solid #e2e2e2;
  border-top: 1px solid var(--borderDefault);
}
.CustomFields__item {
  list-style-type: none;
  border-bottom: 1px solid #e2e2e2;
  border-bottom: 1px solid var(--borderDefault);
}
.CustomFields__item:last-of-type {
  border-bottom: 0;
}
.CustomFields__item:last-of-type .CustomField {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}
.CustomFields__addNewLabel {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  margin-bottom: var(--spacing-8);
}
.CustomFields__addNewLabel label {
  margin: 0;
  /* override global */
}
.CustomFields__bulkActions {
  display: none;
  background-color: #eef7fb;
  background-color: var(--closeLightBlue);
}
.CustomFields__newField {
  align-self: center;
  padding: 10px 0;
}
.CustomFields__save {
  display: block;
  text-align: right;
  padding: 10px;
  border-top: 1px solid #e2e2e2;
  border-top: 1px solid var(--borderDefault);
}
.CustomFields__save .Btn {
  width: 80px;
}
.CustomField.edit-side form {
  margin: 0;
}
.CustomField.edit-side .CustomField__key {
  margin-bottom: 4px;
}
.CustomField.edit-side .CustomField__form input {
  box-sizing: border-box;
  width: 100%;
  height: 30px;
}
.CustomField.edit-side .CustomField__form .actions button {
  width: 80px;
}
.CustomField.edit-side .CustomField__form .date-time-picker {
  display: flex;
  justify-content: space-between;
}
.CustomField.edit-side .CustomField__form .date-time-picker input {
  width: 48%;
}

.CustomFieldValue:hover .CustomFieldValue__actions {
  display: flex;
}
.CustomFieldValue--lead {
  font-size: inherit;
  border-top: none;
}
.CustomFieldValue--lead:hover {
  background-color: #f1f1f2;
}
.CustomFieldValue__name--lead,
.CustomFieldValue__name--co {
  flex: 0 0 40%;
  min-width: 90px;
  font-weight: 600;
  font-weight: var(--fontWeightBold);
}
.CustomFieldValue__name--text {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  margin-top: -4px;
  padding-top: 4px;
  /* add spacing between tooltip and text */
}
.CustomFieldValue__value > a {
  white-space: nowrap;
}
.CustomFieldValue__value--lead,
.CustomFieldValue__value--co {
  flex: 1 0;
  margin-left: 8px;
}
.CustomFieldValue__userType {
  display: flex;
  align-items: center;
}
.CustomFieldValue__userType .user-img {
  border-radius: 3px;
}
.CustomFieldValue__userType .user-name {
  margin-left: 4px;
}
.CustomFieldValue__actions {
  display: none;
  position: absolute;
  top: 1px;
  right: 3px;
  background-color: #f1f1f2;
  box-shadow: -10px 0 10px 1px #f1f1f2;
  align-items: center;
  height: 30px;
}
.CustomFieldValue__actions--copyButton .copySuccessIcon {
  display: none;
}
.CustomFieldValue__actions--copyButton.success .copyIcon {
  display: none;
}
.CustomFieldValue__actions--copyButton.success .copySuccessIcon {
  display: block;
}

/* used to say "no contact info", "no description", etc. */
.none {
  color: #777;
}



.opportunities-page .filters {
  display: flex;
  margin-bottom: 10px;
}
.opportunities-page .filters .filter {
  margin-right: 4px;
}
.opportunities-page .filters .filter.groupByFilter,
.opportunities-page .filters .filter.sortByFilter {
  display: inline-block;
}
.opportunities-page .filters .divider-left {
  margin-left: 5px !important;
}
.opportunities-page .filters .divider-left {
  display: inline-block;
  padding-left: 8px;
}
.opportunities-page .filters .pull-right {
  margin-left: auto;
}
.opportunities-page .opportunities {
  --tableBorderRadius: 4px;
}
.opportunities-page .opportunities h4 {
  margin-top: 20px;
}
.opportunities-page .opportunities .table-wrapper {
  position: relative;
  /* use this to position the "..." button inside the last column header */
  /* but do it this way instead of sticking the element inside the <th> */
  /* so that the dropdown isn't cut off inside the <th> overflow: hidden; */
}
.opportunities-page .opportunities .table-wrapper .customize-columns {
  position: absolute;
  top: 6px;
  right: 5px;
}
.opportunities-page .opportunities .table {
  border-radius: 5px;
  border-radius: var(--tableBorderRadius);
  margin-bottom: 25px;
  table-layout: fixed;
}
.opportunities-page .opportunities .table th:nth-child(1) {
  width: 30%;
}
.opportunities-page .opportunities .table small {
  color: #999;
  display: inline-block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.opportunities-page .opportunities .table td,
.opportunities-page .opportunities .table th {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.opportunities-page .opportunities .table-bordered thead:first-child tr:first-child > th:first-child,
.opportunities-page .opportunities .table-bordered tbody:first-child tr:first-child > td:first-child,
.opportunities-page .opportunities .table-bordered tbody:first-child tr:first-child > th:first-child {
  border-top-left-radius: 5px;
  border-top-left-radius: var(--tableBorderRadius);
}
.opportunities-page .opportunities .table-bordered thead:first-child tr:first-child > th:last-child,
.opportunities-page .opportunities .table-bordered tbody:first-child tr:first-child > td:last-child,
.opportunities-page .opportunities .table-bordered tbody:first-child tr:first-child > th:last-child {
  border-top-right-radius: 5px;
  border-top-right-radius: var(--tableBorderRadius);
}
.opportunities-page .opportunities .progress {
  position: relative;
  border: solid 1px #ddd;
  margin: 0;
}
.opportunities-page .opportunities .progress .bar {
  background: #7a9dbe;
  box-shadow: none;
}
.opportunities-page .opportunities .progress span {
  font-size: 12px;
  line-height: 15px;
  font-weight: 600;
  font-weight: var(--fontWeightBold);
  display: block;
  position: absolute;
  text-align: center;
  background: rgba(247, 247, 247, 0.8);
  color: #4d779e;
  border-radius: 4px;
  left: 50%;
  width: 36px;
  margin: 2px 0 0 -18px;
}
.opportunities-page .opportunities .value-boxes {
  /* clearfix copied from bootstrap */
  *zoom: 1;
  background: #7a9dbe;
  border-bottom: solid 3px #9cb6cf;
  color: #fff;
  line-height: 1.4;
  border-radius: 8px;
  margin: 0 0 5px 0;
}
.opportunities-page .opportunities .value-boxes:before,
.opportunities-page .opportunities .value-boxes:after {
  display: table;
  content: '';
  line-height: 0;
}
.opportunities-page .opportunities .value-boxes:after {
  clear: both;
}
.opportunities-page .opportunities .value-boxes .value-box {
  float: left;
  min-width: 210px;
  padding: 10px;
  font-size: 1.2em;
  white-space: nowrap;
}
.opportunities-page .opportunities .value-boxes .value-box.first {
  width: 170px;
}
.opportunities-page .opportunities .value-boxes .value-box strong {
  font-weight: normal;
  font-size: 1.2em;
}
.opportunities-page .opportunities .value-boxes .value-box.first strong {
  font-size: 3.3em;
  line-height: 1;
  padding-left: 3px;
}
.opportunities-page .opportunities .value-boxes .value-box .annualized {
  border-top: 1px dotted rgba(255, 255, 255, 0.7);
  margin-top: 5px;
}
.opportunities-page .opportunities .value-boxes.top {
  background: #7b848d;
  border-radius: 8px;
  border-bottom: solid 3px #aaa;
}

.faux-select-wrapper {
  position: relative;
}
.faux-select-wrapper select {
  opacity: 0;
}
.faux-select-wrapper .faux-select {
  display: block;
  position: absolute;
  top: 0;
  color: #555;
  padding-left: 8px;
  box-sizing: border-box;
  border: 1px solid #e2e2e2;
  border: 1px solid var(--borderDefault);
  border-radius: 5px;
  background: white;
  pointer-events: none;
  overflow: hidden;
}
.faux-select-wrapper .faux-select:active {
  border-color: #598df2;
  border-color: var(--borderActive);
}
.faux-select-wrapper .faux-select::before {
  content: '▾';
  float: right;
  margin-right: 5px;
  color: #999;
}
.reporting h2 {
  margin: 10px 0 5px;
}
.reporting h3 {
  line-height: 25px;
  margin: 5px 0;
  border-bottom: dotted 1px #bbb;
}
.reporting caption {
  text-align: left;
  /* overriding browser default center for table captions */
}
.reporting .filters select {
  margin: 0;
}
.reporting .filters .filter {
  display: inline-block;
}
.reporting .box {
  margin: 10px 0 15px 0;
  vertical-align: top;
}
.reporting .box a {
  -webkit-text-decoration: none;
  text-decoration: none;
  color: #06a;
}
.reporting .box table {
  border-collapse: separate;
  border-spacing: 1px;
}
.reporting .box table td {
  font-size: 2.8em;
  color: #555;
  text-align: center;
  line-height: 100%;
}
.reporting .box table td,
.reporting .box table th {
  border-right: dotted 1px #bbb;
  vertical-align: top;
}
.reporting .box table td:last-child,
.reporting .box table th:last-child {
  border: none;
}
.reporting .box h3 > a {
  color: inherit;
}
.reporting .glyphicons-question-sign {
  color: #bbb;
}
.activity-reporting .box table td,
.pipeline-reporting .box table td,
.activity-reporting .box table th,
.pipeline-reporting .box table th {
  padding: 0 30px;
  min-width: 140px;
}
.activity-reporting .box table th,
.pipeline-reporting .box table th {
  padding-bottom: 5px;
}
:-webkit-full-screen .activity-reporting {
  font-size: 1.3em;
}
:fullscreen .activity-reporting {
  font-size: 1.3em;
}
:-webkit-full-screen .activity-reporting table {
  width: 100%;
}
:fullscreen .activity-reporting table {
  width: 100%;
}
:-webkit-full-screen .activity-reporting td, :-webkit-full-screen .activity-reporting th {
  padding-top: 5px !important;
}
:fullscreen .activity-reporting td,
:fullscreen .activity-reporting th {
  padding-top: 5px !important;
}
:-webkit-full-screen .activity-reporting td, :-webkit-full-screen .activity-reporting th {
  min-width: inherit;
}
:fullscreen .activity-reporting td,
:fullscreen .activity-reporting th {
  min-width: inherit;
}
.activity-reporting .box table tr.opp-counts td {
  padding-bottom: 10px;
}
.activity-reporting .box table .revenue td {
  padding: 4px 5px;
  font-size: 1.4em;
  line-height: 100%;
}
.pipeline-reporting h1 .description,
.pipeline-reporting h3 .description {
  font-style: italic;
  padding-left: 10px;
  font-size: 15px;
  font-weight: normal;
}
.pipeline-reporting .table {
  table-layout: fixed;
  width: auto;
  margin: 8px 0 0 0;
  border: 0;
  border-collapse: collapse;
  /*
    .no-border {
    background: none;
    border: 0 !important;
    min-width: 120px;
    cursor: default;
  }
    */
}
.pipeline-reporting .table td {
  background: #f7f7f7;
  line-height: 1;
  width: 100px;
}
.pipeline-reporting .table td,
.pipeline-reporting .table thead th {
  text-align: right;
}
.pipeline-reporting .table td,
.pipeline-reporting .table th {
  border: 1px solid #ddd !important;
}
.pipeline-reporting .table td,
.pipeline-reporting .table th {
  width: auto;
  min-width: 60px;
}
.pipeline-reporting .table thead th {
  cursor: pointer;
}
.pipeline-reporting .table th {
  white-space: nowrap;
}
.pipeline-reporting .table td.none {
  color: #ccc !important;
}
.pipeline-reporting .table td.none::before {
  content: '-';
}
.pipeline-reporting .table td a {
  color: #2e2e2e;
  color: var(--colorTextDefault);
}
.pipeline-reporting .table td.arr {
  border-width: 1px 0 !important;
}
.pipeline-reporting .table td.arr {
  padding-left: 0;
  padding-right: 0;
  text-align: center;
  max-width: 15px;
}
.pipeline-reporting .table td.arr::before {
  content: '→';
}
.pipeline-reporting .table td.left-of-arrow {
  border-right: 0 !important;
}
.pipeline-reporting .table td.left-of-arrow {
  padding-right: 4px;
}
.pipeline-reporting .table .right-of-arrow {
  text-align: left;
}
.pipeline-reporting .table td.right-of-arrow {
  border-left: 0 !important;
}
.pipeline-reporting .table td.right-of-arrow {
  padding-left: 4px;
}
.pipeline-reporting .table .truncateTable-expand td {
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  font-style: italic;
}
.pipeline-reporting .table .truncateTable-expand td:hover {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}
.pipeline-reporting .by-status td.net,
.pipeline-reporting .by-status td.net-pct {
  color: green;
}
.pipeline-reporting .by-status td.net.neg,
.pipeline-reporting .by-status td.net-pct.neg {
  color: darkred;
}
.pipeline-reporting .by-status td span.pct {
  padding-left: 5px;
  font-size: 0.8em;
  color: #999;
}
.pipeline-reporting .by-status td span.pct span {
  color: green;
}
.pipeline-reporting .by-status td span.pct span.neg {
  color: darkred;
}
.pipeline-reporting .by-status td {
  font-size: 16px;
}
.pipeline-reporting .by-status .status-label {
  text-align: left;
  min-width: 130px;
  font-size: 14px;
}
.pipeline-reporting .by-status tr.expandable {
  cursor: pointer;
}
.pipeline-reporting .by-status tr.expandable td.status-label::before {
  content: '▶ ';
  font-size: 9px;
  line-height: 11px;
  padding-right: 2px;
}
.pipeline-reporting .by-status tr.expandable.open td.status-label::before {
  content: '▼ ';
}
.pipeline-reporting .by-status td.status-label {
  vertical-align: bottom;
}
.pipeline-reporting .by-status.all-time {
  table-layout: fixed;
  width: auto;
}
.pipeline-reporting .by-status tr.status-details > td {
  background: #ffffff;
  background: var(--surfaceBackgroundDefault);
  text-align: left;
  font-size: 14px;
  padding: 0;
}
.pipeline-reporting .by-status tr.status-details.height-corrected > td {
  padding: 15px;
}
.pipeline-reporting .by-status tr.status-details p.none {
  color: #aaa;
  margin: 15px;
}
.pipeline-reporting .by-status tr.status-details table {
  margin: 0;
}
.pipeline-reporting .by-status tr.status-details svg {
  overflow: hidden;
  opacity: 0;
  position: absolute;
  width: 800px;
}
.pipeline-reporting .by-status tr.status-details.height-corrected svg {
  opacity: 1;
  position: static;
  width: 100%;
}
.pipeline-reporting .by-status tr.status-details .node rect {
  stroke: #333;
  stroke-width: 1.5px;
  fill: #fff;
}
.pipeline-reporting .by-status tr.status-details .node-div {
  padding: 2px;
  padding-right: calc(15% + 2px);
}
.pipeline-reporting .by-status tr.status-details .node.highlight rect {
  fill: #f4f7fd;
}
.pipeline-reporting .by-status tr.status-details .edgeLabel rect {
  fill: #fff;
}
.pipeline-reporting .by-status tr.status-details .edgePath {
  stroke: #333;
  stroke-width: 1.5px;
  fill: none;
}
.pipeline-reporting .by-status tr.status-details .edgePath marker {
  fill: #333;
}
.pipeline-reporting .by-status tr.status-details .edge-div {
  background: #ffffff;
  background: var(--surfaceBackgroundDefault);
  border-radius: 4px;
}
.email-reporting .box table {
  width: 100%;
  table-layout: fixed;
}
.custom-reporting {
  /* charts */
  /*
  .chart-border {
    border: solid 1px #ddd;
    margin: 5px auto;
    padding: 0;
    background: white;
    border-radius: 6px;
    overflow: hidden;
    .secondary-params {
      margin: 0;
      padding: 6px 0;
      width: 100%;
      border-bottom: solid 1px #ddd;
      background: #f0f1f5;
      background-image: @defaultThreeColors;
    }
    .chart {
      clear: both;
      padding: 15px 10px 5px 10px;
    }
  }
  //*/
}
.custom-reporting .highcharts-scrollbar-button,
.custom-reporting .highcharts-scrollbar-arrow {
  display: none;
}
.custom-reporting h1 {
  display: inline-block;
}
.custom-reporting .highcharts-container .highcharts-background {
  fill: transparent;
}
.custom-reporting .highcharts-container .highcharts-grid path {
  /*stroke: #dedede;*/
  stroke: #dadada;
  stroke-dasharray: 1, 2;
}
.custom-reporting .highcharts-container .highcharts-series path {
  opacity: 0.6;
}
.custom-reporting .highcharts-container .highcharts-series rect {
  stroke-width: 0;
}
.custom-reporting .highcharts-container .highcharts-axis text {
  /*font-weight: bold;*/
  font-size: 13px;
}
.custom-reporting .highcharts-container .highcharts-markers path {
  stroke: #f9f9f9;
  stroke: var(--colorGray02);
  stroke-width: 1px;
}
.custom-reporting .highcharts-container .highcharts-tooltip > span > p.links {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 5px;
}
.custom-reporting .chart {
  min-width: 310px;
  margin: 0 auto;
}
.custom-reporting select:focus {
  outline: 0;
  border: solid 1px #aabbd3;
}
.custom-reporting .form {
  margin: 15px 0 15px 0;
}
.custom-reporting .form form {
  margin: 0;
}
.custom-reporting .form form ul {
  margin: 0;
  list-style-type: none;
}
.custom-reporting .form .big-field {
  width: 33.3%;
  margin: 0;
  float: left;
  box-sizing: border-box;
  padding-left: 19px;
}
.custom-reporting .form .big-field label {
  font-size: 18px;
  color: #555;
  font-weight: normal;
  margin: 0 6px 0 0;
  float: left;
  line-height: 49px;
  cursor: default;
}
.custom-reporting .form .big-field .bbf-editor {
  overflow: hidden;
  position: relative;
  /*input[name=interval] {*/
  /*max-width: 74px;*/
  /*}*/
}
.custom-reporting .form .big-field .bbf-editor select {
  height: 50px;
  width: 100%;
  margin-bottom: 3px;
}
.custom-reporting .form .big-field .bbf-editor .faux-select-wrapper .faux-select {
  width: 100% !important;
}
.custom-reporting .form .big-field .bbf-editor > .faux-select-wrapper .faux-select {
  font-size: 18px !important;
}
.custom-reporting .form .big-field .bbf-editor select {
  opacity: 0;
}
.custom-reporting .form .big-field .bbf-editor select[name='filter'],
.custom-reporting .form .big-field .bbf-editor input[name='interval'] {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  font-size: 12px;
  line-height: 14px;
  height: 28px;
  min-height: 28px;
  color: #777;
}
.custom-reporting .form .big-field .bbf-editor .small-field {
  position: relative;
  padding-left: 20px;
}
.custom-reporting .form .big-field .bbf-editor .small-field::before {
  content: '';
  display: block;
  border: solid 1px #ddd;
  width: 9px;
  height: 17px;
  position: absolute;
  left: 10px;
  top: -3px;
  z-index: 0;
  border-width: 0 0 1px 1px;
}
.custom-reporting .form .big-field.field-y {
  padding-left: 0;
}
.custom-reporting .secondary-params {
  float: right;
  clear: left;
}
.custom-reporting .secondary-params select,
.custom-reporting .secondary-params input[type='text'] {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  height: 27px;
  min-height: 27px;
  font-size: 13px;
}
.custom-reporting .secondary-params .field {
  float: right;
  margin-right: 5px;
}
.custom-reporting .secondary-params .field.field-transform_y {
  width: 90px;
  margin-right: 4px;
}
.custom-reporting .chart-border {
  padding: 5px 0 20px 0;
  background: #ffffff;
  background: var(--surfaceBackgroundDefault);
  border: solid 1px #ddd;
  border-radius: 6px;
}
.custom-reporting .chart-border .secondary-params {
  margin: 1px;
}
.custom-reporting .chart-border .chart,
.custom-reporting .chart-border .chart-big-msg {
  clear: both;
  padding: 10px 10px 0 10px;
  height: 400px;
}
.custom-reporting .chart-border .chart-big-msg {
  clear: both;
  font-size: 90px;
  /* TODO: find a proper way to darken the color or define a color in the DS */
  color: #ededed;
  text-align: center;
  height: 400px;
  line-height: 370px;
}
.custom-reporting .chart-border .chart-big-msg div {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}
.custom-reporting .chart-border .chart-big-msg p {
  line-height: 1;
  font-size: 13px;
  color: #999;
  margin-top: 25px;
}
.custom-reporting .form {
  border: solid 1px #ddd;
  border-radius: 6px 6px 0 0;
  border-bottom: none;
  margin: 0;
  padding: 10px 10px 5px 10px;
  background: #f3f3f3;
  background-image: linear-gradient(#fcfcfc, #f9f9f9 50%, #eee);
  background-image: var(--defaultThreeColors);
}
.custom-reporting .chart-border {
  border-radius: 0 0 6px 6px;
}
.custom-reporting .secondary-params .field {
  margin-right: 10px;
}
.custom-reporting .chart-tools a {
  margin: 2px 5px 0 8px;
  float: right;
  color: #a8a8a8;
  font-size: 13px;
}
.custom-reporting .summary {
  margin-top: 28px;
  color: #888;
  font-size: 28px;
}
.custom-reporting .summary .summary-metric {
  font-size: 40px;
  color: #555;
}
.custom-reporting .table {
  margin-top: 15px;
  width: auto;
  min-width: 300px;
}
.custom-reporting .table th,
.custom-reporting .table td {
  font-weight: normal;
  color: #555;
  font-size: 18px;
  line-height: 15px;
  padding-right: 30px;
}
.custom-reporting .table th.metric,
.custom-reporting .table td.metric {
  text-align: right;
  padding-right: 8px;
  padding-left: 30px;
}
.custom-reporting .table th.metric .transform,
.custom-reporting .table td.metric .transform {
  display: block;
  color: #aaa;
  font-size: 12px;
  line-height: 14px;
}
.custom-reporting .table th.textcenter,
.custom-reporting .table td.textcenter {
  text-align: center;
  padding-right: 8px;
}
.custom-reporting .table tr.aggregate td,
.custom-reporting .table tr.aggregate th {
  font-size: 22px;
  line-height: 24px;
}
.custom-reporting .table tr.aggregate td.metric,
.custom-reporting .table tr.aggregate th.metric {
  font-size: 24px;
}
.custom-reporting .table td {
  background: #ffffff;
  background: var(--surfaceBackgroundDefault);
}
.custom-reporting .table th {
  line-height: 30px;
}

.inbox-page {
  --inboxHeaderPlusPaddings: 116px;
  display: flex;
  min-height: 100%;
  /* Action buttons like Archive, etc. (for both overall list and single item in expanded mode) */
  /* are hidden by default and then shown below based on which "view" is active. */
  /* Reuse the same div/elements for the big initial loader (&.big-msg) */
  /* and the infinity scroll loader, and style them differently. */
  /* Char counter used in the inbox (replying to SMS) */
}
@media screen and (min-width: 768px) {
  .inbox-page {
    max-height: 100%;
  }
}
.inbox-page .inbox-content {
  flex: 1;
  min-width: 0;
}
.inbox-page .upcoming-meetings {
  flex: 0 0 0%;
  margin: -24px -24px -24px 24px;
  z-index: 102;
  /* same as popover */
}
.inbox-page .action {
  display: none;
  margin-right: 5px;
}
.inbox-page .inbox-only,
.inbox-page .future-only,
.inbox-page .archive-only {
  display: none;
}
.inbox-page.view-inbox .action-archive,
.inbox-page.view-inbox .action-archive-selected {
  display: inline-block;
}
.inbox-page.view-inbox .inbox-only {
  display: inherit;
}
.inbox-page.view-archive .action-inbox,
.inbox-page.view-archive .action-inbox-selected {
  display: inline-block;
}
.inbox-page.view-archive .archive-only {
  display: inherit;
}
.inbox-page.view-future .action-inbox,
.inbox-page.view-future .action-inbox-selected,
.inbox-page.view-future .action-archive,
.inbox-page.view-future .action-archive-selected,
.inbox-page.view-future .follow-up-view {
  display: inline-block;
}
.inbox-page.view-future .future-only {
  display: inherit;
}
.inbox-page .follow-up-view {
  margin-left: 0;
}
.inbox-page .prefix {
  vertical-align: 9px;
  padding-right: 2px;
}
.inbox-page .inbox-scroller {
  overflow-y: auto;
  margin: 0 calc(-1 * 16px);
  margin: 0 calc(-1 * var(--spacing-16));
  max-height: calc(100% - var(--inboxHeaderPlusPaddings));
}
@media screen and (min-width: 768px) {
  .inbox-page .inbox-scroller {
    margin: 0 calc(-1 * 24px);
    margin: 0 calc(-1 * var(--spacing-24));
  }
}
.inbox-page .inbox-list .item {
  overflow: hidden;
  border-bottom: 1px solid #e2e2e2;
  border-bottom: 1px solid var(--borderDefault);
  cursor: pointer;
}
.inbox-page .inbox-list .item.expanded {
  display: block;
  padding: 16px;
  padding: var(--spacing-16);
  background: #f9f9f9;
  background: var(--surfaceBackgroundMedium);
  overflow: visible;
  overflow: initial;
  cursor: auto;
  cursor: initial;
}
.inbox-page .inbox-list .item.expanded .loader {
  padding: 8px;
  padding: var(--spacing-8);
}
.inbox-page .big-msg {
  border-bottom: 1px solid #e2e2e2;
  border-bottom: 1px solid var(--borderDefault);
  margin: 0 calc(24px * -1);
  margin: 0 calc(var(--spacing-24) * -1);
  background: #ffffff;
  background: var(--surfaceBackgroundDefault);
  text-align: center;
  padding: 40px 0;
  min-height: 110px;
  /*margin-top: -1px; // fixes issue with table having a border-radius even though we wipe it from the thead>th*/
}
.inbox-page .big-msg .glyphicons {
  font-size: 44px;
  color: #919191;
  color: var(--colorIconLight);
}
.inbox-page .big-msg h3 {
  margin: 0;
}
.inbox-page .big-msg p {
  color: #767676;
  color: var(--colorTextLight);
  margin: 0;
}
.inbox-page .results-loader {
  margin: 12px 16px;
  margin: var(--spacing-12) var(--spacing-16);
}
.inbox-page .results-loader.big-msg {
  margin: 0;
}
.inbox-page .results-loader.big-msg .loader-text {
  display: block;
  font-weight: normal;
  color: #5e5e5e;
  color: var(--colorTextMedium);
  font-size: 18px;
  line-height: 40px;
}
.inbox-page .big-msg .loader {
  vertical-align: baseline;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(to right, #ffffff 10%, #e2e2e2 42%);
  background: linear-gradient(to right, var(--surfaceBackgroundDefault) 10%, var(--borderDefault) 42%);
  position: relative;
  animation: loader 0.8s infinite linear;
}
.inbox-page .big-msg .loader:before {
  width: 50%;
  height: 50%;
  background: #ffffff;
  background: var(--surfaceBackgroundDefault);
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}
.inbox-page .big-msg .loader:after {
  background: #ffffff;
  background: var(--surfaceBackgroundDefault);
  width: 80%;
  height: 80%;
  border-radius: 50%;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
@keyframes loader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.inbox-page .emailthread-item .preview {
  border-top: 1px dotted #f1f1f1;
  border-top: 1px dotted var(--borderLight);
  padding-left: 22px;
  padding-right: 22px;
}
.inbox-page .emailthread-item .full-message {
  padding-left: 35px;
  padding-right: 22px;
}
.inbox-page .item-type-incoming_sms .char-counter {
  color: #767676;
  color: var(--colorTextLight);
  margin-left: 10px;
  line-height: 20px;
  vertical-align: -1px;
  display: inline-block;
}
.inbox-page .item-type-incoming_sms .char-counter.exceeded {
  color: #dd0f21;
  color: var(--colorTextDanger);
}
.inbox-page.hide-edit-controls .check-all,
.inbox-page.hide-edit-controls .action:not(.followup-date) {
  display: none !important;
}
.inbox-page.hide-edit-controls .results-loader {
  border-radius: 7px;
}

.bulk-upload .lead-importer-stepper-standalone {
  margin: -20px -20px 20px -20px;
  /* remove top, left, right margins so it's "conntected" to the UI */
}
.bulk-upload p.error {
  font-weight: 600;
  font-weight: var(--fontWeightBold);
}
.bulk-upload .pull-left {
  max-width: 25%;
}
.bulk-upload .pull-left.first {
  max-width: 65%;
  margin-right: 7%;
}
.bulk-upload .form-and-info .form label[for='attachment'] {
  display: none;
}
.bulk-upload .form-and-info .form li.field-attachment {
  margin-bottom: 16px;
}
.bulk-upload .form-and-info .form form {
  margin-bottom: 0;
}
.bulk-upload .form-and-info .form textarea {
  width: 360px;
  height: 80px;
}
.bulk-upload .form-and-info .pull-left {
  width: 40%;
  max-width: 600px;
}
.bulk-upload .form-and-info .tips {
  margin-top: 20px;
}
.bulk-upload .support-note {
  clear: both;
}
.bulk-upload h3 {
  font-weight: 600;
  font-weight: var(--fontWeightBold);
  border-bottom: dotted 1px #bbb;
  line-height: 24px;
}
.bulk-upload input[type='file'] {
  margin-top: 15px;
}
.bulk-upload .loading {
  margin-top: 20px;
  display: none;
}
.bulk-upload .analyzed {
  display: none;
}
.bulk-upload .lead-data {
  display: none;
}
.bulk-upload .lead-data li {
  display: none;
}
.bulk-upload .cols-description li {
  list-style-type: circle;
}
.bulk-upload .not-recognized {
  color: darkred;
}
.bulk-upload .table-horizontally-striped thead th:nth-child(odd),
.bulk-upload .table-horizontally-striped tbody th:nth-child(odd),
.bulk-upload .table-horizontally-striped thead td:nth-child(odd),
.bulk-upload .table-horizontally-striped tbody td:nth-child(odd) {
  background-color: #f9f9f9;
  background-color: var(--surfaceBackgroundMedium);
}
.bulk-upload .import-preview-container {
  overflow: auto;
  margin-bottom: 16px;
}
.bulk-upload .import-preview-container::-webkit-scrollbar {
  -webkit-appearance: active;
}
.bulk-upload .import-preview-container::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 11px;
  height: 11px;
}
.bulk-upload .import-preview-container::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.5);
}
.bulk-upload .import-preview-container::-webkit-scrollbar-thumb:hover,
.bulk-upload .import-preview-container::-webkit-scrollbar-thumb:active {
  background-color: rgba(0, 0, 0, 0.6);
}
.bulk-upload .import-preview-container::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 1px 1px 0 #eee, inset 0 5px 11px white;
}
.bulk-upload table.import-preview {
  margin-bottom: 4px;
  width: auto;
  max-width: none;
}
.bulk-upload table.import-preview .header-wrapper {
  min-width: 150px;
  white-space: nowrap;
  /* weird */
}
.bulk-upload table.import-preview .header-wrapper p {
  font-weight: normal;
}
.bulk-upload table.import-preview .header-wrapper span.selector-title {
  font-weight: 600;
  font-weight: var(--fontWeightBold);
}
.bulk-upload table.import-preview .header-wrapper label.checkbox {
  padding-right: 8px;
}
.bulk-upload table.import-preview th {
  background-color: #dff0d8;
}
.bulk-upload table.import-preview th:nth-child(odd) {
  background-color: #dff0d8;
}
.bulk-upload table.import-preview td.error {
  font-weight: 600;
  font-weight: var(--fontWeightBold);
  background-color: #ffeeee;
}
.bulk-upload table.import-preview th.warning {
  background-color: #f2dede;
}
.bulk-upload table.import-preview th.warning select {
  border: 1px solid #f66;
}
.bulk-upload table.import-preview th:nth-child(odd).warning {
  background-color: #f2dede;
}
.bulk-upload table.import-preview th:nth-child(odd).warning select {
  border: 1px solid #f66;
}
.bulk-upload table.import-preview .skip {
  color: #999;
  background-color: #f9f9f9;
  background-color: var(--surfaceBackgroundMedium);
}
.bulk-upload table.import-preview .skip:nth-child(odd) {
  background-color: #f3f3f3;
}
.bulk-upload .extra-info {
  width: 375px;
  float: right;
}
.bulk-upload .dupe-warning {
  font-weight: 600;
  font-weight: var(--fontWeightBold);
  color: darkred;
}
.bulk-upload .table-wrapper {
  max-height: 294px;
  overflow-y: auto;
  padding-right: 15px;
}
.bulk-upload .table-wrapper .table td {
  text-align: center;
}
.bulk-upload .table-wrapper .table td:first-child {
  text-align: left;
}
.bulk-upload .table-wrapper .table td.success {
  color: darkgreen;
}
.bulk-upload .table-wrapper .table td.fail {
  color: darkred;
}
/*
@media (max-width: 1200px) {
  .bulk-upload .extra-info {
    float: left;
    margin: 10px 0 0;
    min-width: 600px;
  }
}
*/

.lead-chooser {
  /* TODO most of the following copied directly from search.less */
}
.lead-chooser form {
  margin: 0;
}
.lead-chooser input {
  margin: 0;
  width: 100%;
  border-radius: 4px 4px 0 0;
  box-sizing: border-box;
  padding: 0 6px;
  height: 30px;
}
.lead-chooser #results {
  border: solid 1px #ccc;
  margin: 0 0 20px 0;
  padding: 3px 3px 2px 3px;
  border-top: 0;
  max-height: 150px;
  overflow-y: auto;
}
.lead-chooser ul.list {
  margin: 0;
  list-style: none;
}
.lead-chooser ul.list li {
  position: relative;
  background-image: linear-gradient(#fcfcfc, #f9f9f9 50%, #eee);
  background-image: var(--defaultThreeColors);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  border: 1px solid #ddd;
  padding: 5px;
  margin: 0 0 2px 0;
  min-height: 26px;
}
.lead-chooser ul.list li > a {
  white-space: nowrap;
  display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden;
}
.lead-chooser ul.list li .status {
  font-size: 12px;
  color: #999;
  margin: 2px 2px 0 2px;
  margin-right: 0;
  text-align: right;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.lead-chooser ul.list li .contacts {
  display: block;
  color: #555;
}

:-webkit-full-screen {
  /* override stuff from scaffolding.less */
}
:fullscreen {
  /* override stuff from scaffolding.less */
}
:-webkit-full-screen .hide-in-full-screen {
  display: none;
}
:fullscreen .hide-in-full-screen {
  display: none;
}
:-webkit-full-screen .container .content-area-wrap {
  top: 0;
}
:fullscreen .container .content-area-wrap {
  top: 0;
}
:-webkit-full-screen .container .content-area-wrap .content-area {
  left: 0;
}
:fullscreen .container .content-area-wrap .content-area {
  left: 0;
}

div.audit-log > h1 {
  display: grid;
  grid-gap: 16px;
  grid-template-columns: max-content max-content;
  align-items: center;
}
div.audit-log ul.log {
  list-style: none;
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}
div.audit-log ul.log > li {
  border-width: 1px 1px 1px 8px;
  border-color: #e2e2e2;
  border-color: var(--borderDefault);
  border-style: solid;
  margin: 0 0 6px;
  border-radius: 3px;
  background: white;
  padding: 6px;
  position: relative;
  overflow: hidden;
}
div.audit-log ul.log > li[data-action='sent'],
div.audit-log ul.log > li[data-action='completed'],
div.audit-log ul.log > li[data-action='created'] {
  border-color: hsl(100, 33%, 66%);
}
div.audit-log ul.log > li[data-action='updated'] {
  border-color: hsl(200, 33%, 66%);
}
div.audit-log ul.log > li[data-action='deleted'] {
  border-color: hsl(0, 33%, 66%);
}
div.audit-log ul.log > li > div {
  font-size: 14px;
  color: #666;
}
div.audit-log ul.log > li > div.summary {
  margin: 0;
  position: relative;
  height: 32px;
  line-height: 32px;
  display: flex;
}
div.audit-log ul.log > li > div.summary.expandable {
  cursor: pointer;
}
div.audit-log ul.log > li > div.summary.open div.expand-icon {
  transform: rotate(180deg);
}
div.audit-log ul.log > li > div.summary div.expand-icon {
  font-size: 10px;
  width: 32px;
  text-align: center;
  color: #aaa;
}
div.audit-log ul.log > li > div.summary div.info {
  flex-shrink: 0;
  min-width: 460px;
}
div.audit-log ul.log > li > div.summary div.info .type {
  display: inline-block;
}
div.audit-log ul.log > li > div.summary div.info > span:not(.glyphicons):after {
  content: '\00a0';
}
div.audit-log ul.log > li > div.summary div.info > span.glyphicons {
  float: left;
  width: 32px;
  text-align: center;
  line-height: 32px;
  margin-right: 6px;
}
div.audit-log ul.log > li > div.summary div.info span.date {
  border-bottom: 1px dashed black;
}
div.audit-log ul.log > li > div.summary div.subject {
  flex-shrink: 1;
  flex-grow: 1;
  padding: 0 12px;
  color: #aaa;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-left: 50px;
}
div.audit-log ul.log > li > div.summary div.subject .recipient {
  margin-right: 20px;
  color: #666;
}
div.audit-log ul.log > li > div.summary div.user {
  flex-shrink: 0;
}
div.audit-log ul.log > li > div.summary div.user img {
  float: right;
  display: block;
  width: 32px;
  height: 32px;
  line-height: 32px;
  margin: 0 0 0 9px;
}
div.audit-log ul.log > li > div.full-info {
  background: #f3f3f3;
  border-radius: 3px;
  padding: 12px;
  margin-top: 6px;
}
div.audit-log ul.log > li > div.full-info h3 {
  margin: 0 0 6px;
  line-height: 34px;
}
div.audit-log pre.raw-json {
  padding: 6px;
  border: 1px solid #ccc;
  background: white;
  border-radius: 3px;
  white-space: pre-wrap;
}
div.audit-log table.changes {
  border-collapse: collapse;
  list-style: none;
  margin: 0;
  font-size: 12px;
  width: 100%;
  padding: 6px;
  border-radius: 3px;
  border: 1px solid #ccc;
  background: white;
}
div.audit-log table.changes tr:not(:first-child) td.field {
  border-top: 1px solid hsl(0, 0%, 80%);
}
div.audit-log table.changes tr:not(:first-child) td.old {
  border-top: 1px solid hsl(0, 30%, 80%);
}
div.audit-log table.changes tr:not(:first-child) td.new {
  border-top: 1px solid hsl(100, 30%, 80%);
}
div.audit-log table.changes tr td {
  padding: 6px 12px;
  vertical-align: top;
  line-height: 20px;
}
div.audit-log table.changes tr td.field {
  font-weight: 600;
  font-weight: var(--fontWeightBold);
  text-align: right;
  white-space: nowrap;
}
div.audit-log table.changes tr td.old,
div.audit-log table.changes tr td.new {
  font-family: monospace;
}
div.audit-log table.changes tr td.old {
  background: hsl(0, 60%, 90%);
}
div.audit-log table.changes tr td.new {
  background: hsl(100, 60%, 90%);
}
div.audit-log table.changes tr td pre {
  margin: 0;
  padding: 0;
  line-height: 20px;
  white-space: pre-wrap;
}
div.audit-log .loading {
  padding: 12px;
  text-align: center;
}

.Calendar {
  --defaultColor: #fff;
  --hoverColor: var(--bgMenuItemHover);
  --spanColor: var(--closeLightBlue);
  --selectedColor: var(--fillActive);
  --calendarSpacing: 2px;
}
.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: #2e2e2e;
  color: var(--colorTextDefault);
  border: none;
  background: var(--defaultColor);
}
.Calendar .CalendarDay__selected:hover,
.Calendar .CalendarDay__hovered_span:hover,
.Calendar .CalendarDay__selected_span:hover {
  color: #2e2e2e;
  color: var(--colorTextDefault);
  border: none;
  background: var(--defaultColor);
}
.Calendar .CalendarDay__selected .CalendarDay__dayWrapper,
.Calendar .CalendarDay__hovered_span .CalendarDay__dayWrapper,
.Calendar .CalendarDay__selected_span .CalendarDay__dayWrapper {
  background: var(--spanColor);
}
.Calendar .CalendarDay__selected .CalendarDay__dayWrapper--singleDate,
.Calendar .CalendarDay__hovered_span .CalendarDay__dayWrapper--singleDate,
.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 #e2e2e2;
  border: 2px solid var(--borderDefault);
}
.Calendar .CalendarDay__default {
  color: #2e2e2e;
  color: var(--colorTextDefault);
  border: none;
  background: var(--defaultColor);
}
.Calendar .CalendarDay__default.CalendarDay__outside {
  color: #919191;
  color: var(--gray-40);
}
.Calendar .CalendarDay__default:hover {
  border: none;
  background: var(--defaultColor);
}
.Calendar .CalendarDay__default:hover .CalendarDay__day {
  border-radius: 50%;
  background: var(--hoverColor);
}
.Calendar .CalendarDay__selected .CalendarDay__day,
.Calendar .CalendarDay__selected_end .CalendarDay__day,
.Calendar .CalendarDay__selected.CalendarDay__blocked_out_of_range:hover .CalendarDay__day,
.Calendar .CalendarDay__selected_end.CalendarDay__blocked_out_of_range:hover .CalendarDay__day {
  color: #ffffff;
  color: var(--surfaceBackgroundDefault);
  background: var(--selectedColor);
}
.Calendar .CalendarDay__selected:hover .CalendarDay__day,
.Calendar .CalendarDay__selected_end:hover .CalendarDay__day {
  background: color-mix(in srgb, #000 5%, var(--selectedColor));
}
.Calendar .CalendarDay__hovered_span:hover .CalendarDay__day,
.Calendar .CalendarDay__selected_span:hover .CalendarDay__day {
  background: color-mix(in srgb, #000 5%, var(--spanColor));
}
.Calendar .CalendarDay__selected_start .CalendarDay__dayWrapper {
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
  padding-left: 0;
  margin-left: var(--calendarSpacing);
}
.Calendar .CalendarDay__selected_start .CalendarDay__dayWrapper--startDateOnly,
.Calendar .CalendarDay__selected_start .CalendarDay__dayWrapper--singleDate {
  background: none;
}
.Calendar .CalendarDay__selected_start .CalendarDay__dayWrapper--startDateHoveredSpan {
  background: var(--spanColor);
}
.Calendar .CalendarDay__selected_end .CalendarDay__dayWrapper,
.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: rgba(46, 46, 46, 0.2);
}
@supports (color: color-mix(in lch, red, blue)){
.Calendar .CalendarDay__blocked_out_of_range {
  color: color-mix(in srgb, var(--colorTextDefault) 20%, transparent);
}
}
.Calendar .CalendarDay__blocked_out_of_range:hover .CalendarDay__day {
  color: inherit;
  background: var(--defaultColor);
}
.Calendar .CalendarDay__blocked_out_of_range.CalendarDay__selected_span .CalendarDay__day {
  color: inherit;
  background: var(--spanColor);
}
.Calendar .CalendarDay__blocked_out_of_range.CalendarDay__selected_span:hover .CalendarDay__day {
  color: inherit;
  background: var(--spanColor);
}
.Calendar .CalendarDay__blocked_out_of_range.CalendarDay__selected .CalendarDay__day,
.Calendar .CalendarDay__blocked_out_of_range.CalendarDay__selected_end .CalendarDay__day {
  color: #ffffff;
  color: var(--surfaceBackgroundDefault);
  background: var(--selectedColor);
}
.Calendar .CalendarDay__blocked_out_of_range.CalendarDay__selected:hover .CalendarDay__day,
.Calendar .CalendarDay__blocked_out_of_range.CalendarDay__selected_end:hover .CalendarDay__day {
  color: #ffffff;
  color: var(--surfaceBackgroundDefault);
  background: var(--selectedColor);
}
.Calendar .CalendarMonth_caption {
  padding: 0 0 14px;
}
.Calendar .CalendarMonth_table {
  margin-top: 25px;
}
.Calendar .DayPicker_weekHeader {
  top: 34px;
  text-transform: uppercase;
}
.Calendar .DayPicker_weekHeader small {
  display: block;
  color: #919191;
  color: var(--gray-40);
  font-size: 11px;
  font-weight: 600;
  font-weight: var(--fontWeightBold);
}
.Calendar .DayPicker_transitionContainer {
  transition: none;
}

/* Modals */
/* -------------------------------------------------- */
/* Background */
.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  z-index: var(--zindexModalBackdrop);
  background-color: #000;
  /* Fade for backdrop */
}
.modal-backdrop.fade {
  opacity: 0;
}
.modal-backdrop,
.modal-backdrop.fade.in {
  opacity: 0.8;
}
/* Base modal */
.modal {
  position: fixed;
  top: 10%;
  left: 50%;
  z-index: 1050;
  z-index: var(--zindexModal);
  width: 560px;
  margin-left: -280px;
  background-color: #ffffff;
  background-color: var(--surfaceBackgroundDefault);
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  border-radius: var(--modalBorderRadius);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  background-clip: padding-box;
  /* Remove focus outline from opened modal */
  outline: none;
}
@media (max-width: 600px) {
  .modal {
    margin: 0;
    width: calc(100vw - (12px * 2));
    width: calc(100vw - (var(--spacing-12) * 2));
    left: 12px;
    left: var(--spacing-12);
    right: 12px;
    right: var(--spacing-12);
  }
}
.modal.fade {
  transition: opacity 0.3s linear, top 0.3s ease-out;
  top: -25%;
}
.modal.fade.in {
  top: 10%;
}
.modal-header {
  padding: 16px;
  border-bottom: 1px solid #e2e2e2;
  border-bottom: 1px solid var(--borderDefault);
}
.modal-header h3 {
  margin: 0;
  line-height: 20px;
  font-size: 16px;
  font-weight: 700;
}
/* Body (where all modal content resides) */
.modal-body {
  position: relative;
  overflow-y: auto;
  max-height: 400px;
  padding: 16px;
  padding: var(--modalBodyPadding);
  line-height: 18px;
}
.modal-body .bbf-editor textarea {
  width: 97%;
}
/* Footer (for actions) */
.modal-footer {
  padding: 14px 15px 15px;
  margin-bottom: 0;
  text-align: right;
  /* right align buttons */
  background-color: #f9f9f9;
  background-color: var(--surfaceBackgroundMedium);
  border-radius: 0 0 10px 10px;
  border-radius: 0 0 var(--modalBorderRadius) var(--modalBorderRadius);
  border-top: 1px solid #e2e2e2;
  border-top: 1px solid var(--borderDefault);
  /* clear it in case folks use .pull-* classes on buttons */
  /* clearfix copied from bootstrap */
  *zoom: 1;
  /* Properly space out buttons */
  /* Handle button groups */
  /* TODO: only used (outside of React) in saved_search_modal_view */
}
.modal-footer:before,
.modal-footer:after {
  display: table;
  content: '';
  line-height: 0;
}
.modal-footer:after {
  clear: both;
}
.modal-footer .Btn + .Btn {
  margin-left: 5px;
  margin-bottom: 0;
  /* account for input[type="submit"] which gets the bottom margin like all other inputs */
}
.modal-footer .BtnGroup > .Btn + .Btn {
  margin-left: -1px;
}
.modal-footer .modalDeleteBtn {
  display: block;
  float: left;
  height: 22px;
  margin-left: -6px;
  margin-right: 6px;
  box-shadow: none;
  border: none;
  background: none;
  position: relative;
}
.SequencesInvalidPlanModal__body,
.BulkEmailInvalidPlanModal__body {
  text-align: center;
}
.BulkEmailInvalidPlanModal__basicPlanCopy,
.SequencesInvalidPlanModal__basicPlanCopy {
  margin-bottom: 24px;
  font-size: 16px;
}
.CantCallModal .modal-body {
  text-align: center;
}
.CantCallModal .modal-body-rounded {
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
}
.CantCallModal .modal-footer {
  background-color: #e1e1e1;
}
.CantCallModal__basicPlanCopy {
  margin-bottom: 24px;
  font-size: 16px;
}
.CantCallModal__basicPlanSubCopy {
  margin: 24px 0 -8px;
  font-size: 13px;
  color: #5e5e5e;
  color: var(--colorTextMedium);
}
.CantCallModal__ctas {
  display: flex;
  margin: 40px -16px -16px;
  /* Eat through modal body padding */
}
.CantCallModal__cta {
  display: flex;
  padding-top: 12px;
  padding-bottom: 16px;
  flex: 1;
  border-top: 1px solid #d8d8d8;
  background-color: #f3f3f3;
  align-items: center;
  color: #2e2e2e;
  color: var(--colorTextDefault);
}
.CantCallModal__cta:not(:first-child) {
  border-left: 1px solid #d8d8d8;
}
.CantCallModal__cta:hover,
.CantCallModal__cta:focus {
  color: #2e2e2e;
  color: var(--colorTextDefault);
  -webkit-text-decoration: none;
  text-decoration: none;
}
.CantCallModal__cta:hover .CantCallModal__ctaCopyMain,
.CantCallModal__cta:focus .CantCallModal__ctaCopyMain {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}
.CantCallModal__cta::after {
  content: '\2192';
  /* Represents &rarr; */
  display: block;
  padding-right: 16px;
  flex: 1;
  text-align: right;
  font-size: 20px;
  color: #bbb;
}
.CantCallModal__cta--centered {
  /* Adding this pseudoelement makes the copy truly centered. */
}
.CantCallModal__cta--centered::before {
  content: '\00a0';
  /* Represents &nbps; */
  display: block;
  padding-left: 16px;
  flex: 1;
}
.CantCallModal__cta--centered .CantCallModal__ctaCopy {
  padding-left: 0;
  text-align: center;
}
.CantCallModal__ctaCopy {
  padding-left: 16px;
  flex: 0 0 auto;
  text-align: left;
}
.CantCallModal__ctaCopySub {
  display: block;
  margin-bottom: 2px;
  color: #666;
  font-size: 14px;
}
.CantCallModal__ctaCopyMain {
  display: block;
  font-size: 18px;
}
.CantCallModal__telLabel {
  float: left;
  margin: 0;
}
.CantCallModal__telLearnMore {
  float: right;
}

.loader {
  background-image: url(data:image/gif;base64,R0lGODlhIAAgAPMLALy8vMbGxoSEhLa2tpqamjY2NlZWVtjY2OTk5AQEBB4eHv///wAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCgALACwAAAAAIAAgAEAE5nDJSSlJpOo6SsmToSiChgwTAgzsIQlwDG/0wt4DgEjn4E6Blo0lue1qlZECJUk4JysfckLwMKeLH/YgxEZzx1o0fKMEr9NBieJMmInYSWG0bhdZYZrB4zFokTg6cYNDgXmEFX8aZywAU1wpX4oVUT9lEpWECIorjohTCgkKiYc1CCMGbE88jYQCIwUTdlmtiANKO3ZcAwEUu2FVfUwBCiA1jLwaA3t8cbuTJmufFQEEMjOEODcA1dfS04+Dz6ZfnljIvRO7YBMDpbvpEgcrpRQ9TJe75s61hSmXcVjE8+erniZBcSIAACH5BAUKAAsALAAAAAAYABcAAARycMlJqxo161lUqQKxiZRiUkWSaMVXnhKhKmwLTCYtKaqgES0DDiaYbRaGFim3OKgSpE3LxTSoXE2B4IbCUmSBCUCrPUgOBcyRMiCHEOvNwe2Lb8aCsP2o3vvjCAADg4R/C4KEhX+BiYOGj5CRkpNHensRACH5BAUKAAsALAEAAAAdAA4AAARycMlJ5yg1671MMdnATQdQFShlKMooCYI4oZg0sPUIC8ecSgWWSwLY+XK4oYQAMy1oCwRLIZsgNgfjMyVggSaCRIKAGAB6E2ZM01oqxAneYA64RgWBUaAAT9QCc3N5Sn1UFAgAgU4uYXFYc2hDBpFYShwRACH5BAUKAAsALAcAAAAZABEAAARpcMm5ggg0600Eyd+2IEcmnFlRiMOATadAqeLSDgiMSoYaaocWQCdbEFSG2gLQKi1iEtVKibhJoAtaRqEYUAJNzaDgHHMVYmfNcFYklZv2lOKFG7l2uCCX7/s1CYGCCj99gocJfwuICYQRACH5BAUKAAsALA4AAAASABgAAARl8JCzqr14ELwA5QshXoQggOFYHeYJilvVAihcAS2axu33jgNTrEIoFFABAcJiMBaGIIrzqKtMDbSq9anter8VhXhM1Y3PiipaURiAvQJfV5BIuLr1ugKKLOQTZVUECnl3WnQJbhEAIfkEBQoACwAsDgAAABIAHgAABIAQAbSqvRgMgAO+QwgSxFeFw0WmJmoNpNeKS0CW5uIud36KNgKrAhAIDqbD8GA0cnwIQlOA802PPkvAmcUMu+BsYUw2fD/kdEGsNoTfFsqboFDA6/XCOWnAK9wmAgkyAwV4JgYJCWsXhiYIiglVXYIJdm8KigJvA5FwBYpyYVQmEQAh+QQFCgALACwPAAEAEQAfAAAEe3DJuQ6iGIcxskcc4GUAd4zUEaIUN1xsxQUpB1P3gpQmu7k0lGsAyHlUg1NMolw6PYKolBCESq+oa5T67DoHhQLBGQ4bnuXCiKCgGMpjikChOE/G6kViL6ErOh57CRN0eRmCEwV0I4iEi4d8EwaPGI0tHgoJbU4ECXFLEQAh+QQFCgALACwIAA4AGAASAAAEbHDJSesaOANk+8wg4Hkgto1oig4qGgiC2FpwfcwUQtQCMQ+F2+LAky0CCUGnUKgAYMJFIZEwLBRYCbM5IlATHKxCQmBaPQqq8pqVGJg+GnUsEVO2nXQizqZPmB1UXHVtE3wVOxUFCoM4H34qEQAh+QQFCgALACwCABIAHQAOAAAEeHDJSatd59JjtD3DkF1CkggeBYQDgFCDYpopFbBDIBVzUuiegOC1QKxCh5JJQZAcmJaBQNCcHFYIggk1MSgUqIJYMhWMLMRJ7LsbLwDl2qTAbhcmhClAvvje7VZxNXQKA3NuEnlcKV8dh38TAGcehhUGBY58cpA1EQAh+QQFCgALACwAAA8AGQARAAAEZ5CoROu6OOtbe9pgJnlfaJ7oiQgpqihECxbvK2dGrRjoMWy1wu8i3PgGgczApikULoLoZUBFoJzPRZS1OAJOBmdMK70AqIcQwcmDlhcI6nCWdXMvAWrIqdlqDlZqGgQCYzcaAQJJGxEAIfkEBQoACwAsAQAIABEAGAAABFxwpCSWvfiKmRTJ4FJwSRGEGKGQaLZRbXZUcW3feK7vKFEUNoDh96sRgYeW72e4IAQn0O9zIQgEg8Vgi5pdLdts6CoAgLkgAPkSHl+TZ7ELi2mDDnILYGC+IQAIEQAh+QQFCgALACwAAAIADgAdAAAEcnDJuYigeKZUMt7J4E3CpoyTsl0oAR5pRxWbkSpKIS5BwkoGHM4A8wwKwhNqgSMsF4jncmAoWK+Zq1ZGoW650vAOBRAIAqODee2xrAlRTNlMQEsG8YVaAKAEBgNFHgiAYx4AgIIZB4B9ZIB5RgN2KAiKEQA7);
  background-size: 16px 16px;
  width: 16px;
  height: 16px;
  display: inline-block;
  margin-right: 2px;
  vertical-align: -3px;
  background-position: center center;
  background-repeat: no-repeat;
}
.loader.fullscreen {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -8px;
}

.alert,
.alert-info,
.alert-warning,
.alert-danger,
.alert-error,
.alert-success {
  color: #464a55;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.alert.alert-info,
.alert-info {
  background-color: #ebf6fa;
}
.alert.alert-warning,
.alert-warning {
  background-color: #fffbcf;
}
.alert.alert-danger,
.alert.alert-error,
.alert-danger,
.alert-error {
  background-color: #fbe6e8;
}

@media screen and (max-width: 767px) {
  .LeadSidebar .Card {
    margin-bottom: 8px;
    margin-bottom: var(--spacing-8);
  }
  .LeadSidebar .Card.expanded .Card__title:before {
    border: 5px solid transparent;
    border-top: 5px solid currentColor;
    top: 3px;
  }
  .LeadSidebar .Card.expanded .Card__content {
    display: block;
  }
  .LeadSidebar .Card .Task__actions {
    position: relative;
    background-color: #ffffff;
    background-color: var(--surfaceBackgroundDefault);
  }
  .LeadSidebar .Card .Task__actions::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: -34px;
    background-color: #ffffff;
    background-color: var(--surfaceBackgroundDefault);
    box-shadow: -10px 0px 10px 1px #fff;
  }
  .LeadSidebar .Card .Task__editButton {
    display: flex;
  }
  .LeadSidebar .Card .Contact__dragger {
    display: none !important;
  }
  .LeadSidebar .Card .Contact__moreMenu {
    right: 0;
    left: auto;
  }
  .LeadSidebar .Card .CustomField__actions {
    display: flex;
    box-shadow: none;
    background-color: transparent;
    background-color: initial;
  }
  .LeadSidebar .Card .CustomField__key {
    flex-basis: 120px;
    white-space: normal;
  }
  .LeadSidebar .Card .CustomField__value {
    margin-right: 44px;
  }
  .LeadSidebar .Card__title {
    cursor: pointer;
  }
  .LeadSidebar .Card__title:before {
    content: '';
    display: inline-block;
    position: relative;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-left: 5px solid currentColor;
    margin-right: 8px;
  }
  .LeadSidebar .Card__content {
    display: none;
  }
  .activities-list:before {
    display: none;
  }
  .activities-list li.activity {
    min-height: 20px;
  }
  .activities-list li.activity .timeline-icon,
  .activities-list li.activity .timeline-icon-mobile {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 24px;
    width: var(--activityIconWidthMobile);
    height: 24px;
    height: var(--activityIconWidthMobile);
    margin: 4px 4px 4px 12px;
    margin: 4px 4px 4px var(--activityHorizontalGutter);
    /* We need the z-index here for mobile version of legacy email activity
           See https://github.com/closeio/close-ui/pull/4742 */
    z-index: 1;
  }
  .activities-list li.activity .timeline-icon .glyphicons,
  .activities-list li.activity .timeline-icon-mobile .glyphicons {
    font-size: 14px;
    margin: 5px;
  }
  .activities-list li.activity .timeline-icon:before,
  .activities-list li.activity .timeline-icon-mobile:before {
    display: none;
  }
  .activities-list li.activity .activity-inner {
    margin: 0;
    border-radius: 0;
  }
  .activities-list li.activity .emailthread-items .emailthread-item .preview {
    line-height: 36px;
  }
  .activities-list li.activity .delete-thread,
  .activities-list li.activity .hover-action {
    display: inline;
  }
  .activities-list li.activity-emailthread .timeline-icon {
    display: none;
  }
  .activities-list li.activity-emailthread .timeline-icon-mobile {
    margin: -4px 12px 0;
  }
  .activities-list ul.activities-list-content::before {
    margin-left: calc(12px + 24px / 2);
    margin-left: calc(var(--activityHorizontalGutter) + var(--activityIconWidthMobile) / 2);
  }
  .activities-list .salesrep .user-img {
    /* Not sure where extra 1px is coming from... */
    margin-right: calc(12px - 1px);
    margin-right: calc(var(--activityHorizontalGutter) - 1px);
  }
}
.edit-custom-field-modal .cf-fields ul {
  /* drop display:grid on mobile */
  display: block;
}
.edit-custom-field-modal .ChoicesCustomField__container {
  flex-direction: column;
}
.edit-custom-field-modal .ChoicesCustomField__add,
.edit-custom-field-modal .ChoicesCustomField__list {
  padding: 0;
}

@media screen and (max-width: 767px) {
  .list-view > .page-search {
    max-width: 100vw;
    margin: 0;
    position: relative;
    box-sizing: border-box;
  }
  .list-view > .page-search .loader {
    margin: 15px 0 0 15px;
  }
  .list-view > .page-search .list-leads {
    margin-top: 0;
    max-width: 100vw;
    overflow-x: auto;
    margin-bottom: 10px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
  }
  .list-view > .page-search .list-leads .table {
    min-width: 100%;
    width: auto;
    border-radius: 0;
    border: 0;
    margin: 0;
  }
  .list-view > .page-search .list-leads .table th,
  .list-view > .page-search .list-leads .table td {
    border-radius: 0;
  }
  .list-view > .page-search .list-leads .table th:first-child,
  .list-view > .page-search .list-leads .table td:first-child {
    border-left: 0;
  }
  .list-view > .page-search .btn-dialer {
    display: none;
  }
  .list-view > .page-search .row,
  .list-view > .page-search .search-main {
    margin: 0;
  }
  .list-view > .page-search .search-main-inner {
    min-height: calc(100vh - 150px);
    padding: 0;
    box-sizing: border-box;
  }
}

@media screen and (max-width: 767px) {
  .inbox-page {
    /* TODO: this needs to be added because it's removed from .app-content at
       the same breakpoint. Other views are wrapped in <Screen/> which overrides
       that padding. Preferably the inbox page is also wrapped in Screen once
       more has been Reactized. */
    padding: 16px 16px 24px;
    padding: var(--spacing-16) var(--spacing-16) var(--spacing-24);
  }
  .inbox-page .action {
    margin: 0;
  }
  .inbox-page .no-results,
  .inbox-page .results-loader.big-msg {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
  .inbox-page .no-results {
    margin: 0 calc(-1 * 16px);
    margin: 0 calc(-1 * var(--spacing-16));
  }
  .inbox-page .results-loader.big-msg {
    margin: 0;
    width: 100%;
  }
  .inbox-page .inbox-list .item {
    border-left: none;
    border-right: none;
  }
  .inbox-page .inbox-list .item:last-child {
    border-radius: 0;
  }
  .inbox-page .inbox-list .item.expanded {
    padding: 12px 0;
    padding: var(--spacing-12) 0;
  }
  .inbox-page .inbox-list .item.active > :first-child:before {
    content: none;
  }
  .inbox-page .inbox-list .item.checked:not(.expanded) > div {
    background-color: #eef7fb;
    background-color: var(--closeLightBlue);
  }
  .inbox-page.hide-edit-controls .item:first-child {
    border-radius: 0;
  }
  .inbox-page.hide-edit-controls .results-loader.big-msg {
    border-top: none;
  }
}

@media screen and (max-width: 767px) {
  body #main,
  body #main > .container {
    position: fixed;
    top: 0;
    left: 0;
  }
  body .container {
    min-width: 100vw;
    /* All of the pages below aren't responsive and hence need a min-width. */
  }
  body .container .content-area-wrap .content-area {
    margin-left: -100vw;
    overflow-x: auto;
  }
  body .container .content-area-wrap .content-area .app-content {
    padding: 0;
    max-width: 100vw;
  }
  body .container .opportunities-page,
  body .container .SequenceForm,
  body .container .reporting,
  body .container .audit-log,
  body .container .DialerCallingMultipleLeadsScreenWrapper {
    margin: 0;
    padding: 20px;
    min-width: 960px;
    box-sizing: border-box;
  }
  body .container .DialerCallingMultipleLeadsScreenWrapper {
    padding: 0;
  }
  body .container .settingsGlobalStyles {
    min-width: 720px;
  }
}


/*# sourceMappingURL=https://srcmaps.close.com/srcmaps/hydrate_main~24120820.1c90f9d678d21cd863d8.js.map*/