:root {
  /* Red Colors */
  --colorRed01: #fffbfb;
  --colorRed02: #fff7f6;
  --colorRed05: #ffece9;
  --colorRed10: #ffd8d3;
  --colorRed20: #ffafa6;
  --colorRed30: #ff8075;
  --colorRed40: #fa4442;
  --colorRed50: #dd0f21;
  --colorRed60: #a62927;
  --colorRed70: #702d29;
  --colorRed80: #4a201c;
  --colorRed90: #24110f;

  /* Green Colors */
  --colorGreen01: #f7fff7;
  --colorGreen02: #efffee;
  --colorGreen05: #dffadc;
  --colorGreen10: #c9f4c5;
  --colorGreen20: #8eda8d;
  --colorGreen30: #70c770;
  --colorGreen40: #4cb24d;
  --colorGreen50: #418a42;
  --colorGreen60: #306d31;
  --colorGreen70: #235224;
  --colorGreen80: #173617;
  --colorGreen90: #0d1a0d;

  /* Gold/Yellow Colors */
  --colorGold01: #fffdf3;
  --colorGold02: #fffae1;
  --colorGold05: #f9f2cd;
  --colorGold10: #f9e9a1;
  --colorGold20: #fccc0b;
  --colorGold30: #d7af1b;
  --colorGold40: #af8d00;
  --colorGold50: #907400;
  --colorGold60: #735b00;
  --colorGold70: #564400;
  --colorGold80: #3a2d00;
  --colorGold90: #1d1500;

  /* Blue Colors */
  --colorBlue01: #fbfcff;
  --colorBlue02: #f6f9ff;
  --colorBlue05: #eaf1ff;
  --colorBlue10: #d4e3ff;
  --colorBlue20: #a9c7ff;
  --colorBlue30: #7daaff;
  --colorBlue40: #598df2;
  --colorBlue50: #2b6cf0;
  --colorBlue60: #245bc6;
  --colorBlue70: #2d4572;
  --colorBlue80: #1c2e4f;
  --colorBlue90: #0e1625;

  /* Cyan Colors */
  --colorCyan01: #fafdff;
  --colorCyan02: #f4faff;
  --colorCyan05: #e5f3ff;
  --colorCyan10: #c9e7ff;
  --colorCyan20: #90cfff;
  --colorCyan30: #4bb2f8;
  --colorCyan40: #2e99de;
  --colorCyan50: #007ebf;
  --colorCyan60: #006499;
  --colorCyan70: #144a6d;
  --colorCyan80: #08314c;
  --colorCyan90: #00182a;

  /* Purple Colors */
  --colorPurple01: #fcfcff;
  --colorPurple02: #f9f8ff;
  --colorPurple05: #f1eeff;
  --colorPurple10: #e4ddff;
  --colorPurple20: #cabbff;
  --colorPurple30: #b297ff;
  --colorPurple40: #9c6fff;
  --colorPurple50: #854beb;
  --colorPurple60: #6e20d4;
  --colorPurple70: #493c6d;
  --colorPurple80: #31274b;
  --colorPurple90: #18112a;

  /* Orange Colors */
  --colorOrange01: #fffbf9;
  --colorOrange02: #fff8f3;
  --colorOrange05: #ffede1;
  --colorOrange10: #ffdbc1;
  --colorOrange20: #ffb47c;
  --colorOrange30: #f19041;
  --colorOrange40: #d3751e;
  --colorOrange50: #b25d00;
  --colorOrange60: #8e4900;
  --colorOrange70: #663914;
  --colorOrange80: #462508;
  --colorOrange90: #260f00;

  /* Teal Colors */
  --colorTeal01: #f4fffe;
  --colorTeal02: #e8fffe;
  --colorTeal05: #d4fdfb;
  --colorTeal10: #b3f4f1;
  --colorTeal20: #69dcd9;
  --colorTeal30: #4ac0be;
  --colorTeal40: #25a5a2;
  --colorTeal50: #008987;
  --colorTeal60: #006c6b;
  --colorTeal70: #005150;
  --colorTeal80: #003635;
  --colorTeal90: #001b1b;

  /* Magenta Colors */
  --colorMagenta01: #fffbfc;
  --colorMagenta02: #fff7f9;
  --colorMagenta05: #ffebf0;
  --colorMagenta10: #ffd6e1;
  --colorMagenta20: #ffabc2;
  --colorMagenta30: #ff78a5;
  --colorMagenta40: #ef4889;
  --colorMagenta50: #d0266f;
  --colorMagenta60: #ac0057;
  --colorMagenta70: #6e2c43;
  --colorMagenta80: #481f2c;
  --colorMagenta90: #270b15;

  /* Gray Colors */
  --colorWhite: #ffffff;
  --colorGray01: #fcfcfc;
  --colorGray02: #f9f9f9;
  --colorGray05: #f1f1f1;
  --colorGray10: #e2e2e2;
  --colorGray20: #c6c6c6;
  --colorGray30: #ababab;
  --colorGray40: #919191;
  --colorGray50: #767676;
  --colorGray60: #5e5e5e;
  --colorGray70: #474747;
  --colorGray80: #2e2e2e;
  --colorGray85: #222222;
  --colorGray88: #1e1e1e;
  --colorGray90: #191919;
  --colorGray92: #111111;
  --colorBlack: #000000;

  /* Brand Colors */
  --colorBrandBlue: #1463ff;
  --colorBrandRed: #d61549;
  --colorBrandGreen: #4ec375;
  --colorBrandGold: #fccc0b;
}

:root {
  /*Texts and Links*/
  --colorTextDefault: var(--colorGray80);
  --colorTextMedium: var(--colorGray60);
  --colorTextLight: var(--colorGray50);
  --colorTextDanger: var(--colorRed50);
  --colorTextWarn: var(--colorGold60);
  --colorTextSuccess: var(--colorGreen60);
  --colorTextInformational: var(--colorCyan60);
  --colorTextDiscount: var(--colorRed50);
  --colorTextNeutralWhite: var(--colorWhite);
  --colorTextNeutralBlack: var(--colorGray80);
  --colorTextNeutralInvert: var(--colorWhite);

  /* TODO: update all link colors to new theme */
  --colorLinkDefault: #3781b8;
  --colorLinkHover: #3274a6;

  /* TODO: [darkmode] once all links are themed, replace and drop these */
  --colorLinkDefaultNext: var(--colorBlue60);
  --colorLinkHoverNext: var(--colorBlue60);

  /*Icons*/
  --colorIconDefault: var(--colorGray70);
  --colorIconLight: var(--colorGray40);
  --colorIconNeutralWhite: var(--colorWhite);
  --colorIconNeutralBlack: var(--colorGray70);

  /*Surfaces and main Backgrounds*/
  --surfaceBackgroundDefault: var(--colorWhite);
  --surfaceBackgroundLight: var(--colorGray01);
  --surfaceBackgroundMedium: var(--colorGray02);
  --surfaceBackgroundDark: var(--colorGray05);

  /*Card Backgrounds*/
  --bgCardBase: var(--colorWhite);
  --bgCardLight: var(--colorGray01);
  --bgCardMedium: var(--colorGray02);
  --bgCardDark: var(--colorGray05);
  --bgCardHover: var(--colorWhite);
  --bgCardDrag: var(--colorWhite);

  /* Tooltip */
  --colorBgTooltip: var(--colorGray70);
  --colorBgTooltipKey: var(--colorGray60);

  /*Other Backgrounds*/
  --bgLight: var(--colorWhite);
  --bgDefault: var(--colorGray10);
  --bgInformational: var(--colorCyan50);
  --bgInformationalMuted: var(--colorCyan05);
  --bgWarn: var(--colorGold20);
  --bgWarnMuted: var(--colorGold05);
  --bgDanger: var(--colorRed50);
  --bgDangerMuted: var(--colorRed05);
  --bgSuccess: var(--colorGreen20);
  --bgSuccessMuted: var(--colorGreen05);
  --bgActive: var(--colorBlue50);
  --bgActiveMuted: var(--colorBlue05);

  /*Borders*/
  --borderDefault: var(--colorGray10);
  --borderLight: var(--colorGray05);
  --borderHover: var(--colorGray20);
  --borderDanger: var(--colorRed50);
  --borderSuccess: var(--colorGreen40);
  --borderWarn: var(--colorGold40);
  --borderActive: var(--colorBlue40);
  --borderFocused: var(--colorBlue40);
  --borderDangerMuted: var(--colorRed10);
  --borderSuccessMuted: var(--colorGreen10);
  --borderWarnMuted: var(--colorGold10);
  --borderInformationalMuted: var(--colorCyan10);
  --borderActiveMuted: var(--colorBlue10);

  /*Forms e.g. Text areas, Selects, Input Fields*/
  --formBackground: var(--colorWhite);
  --formBackgroundDisabled: var(--colorGray02);
  --formBorder: var(--colorGray10);
  --formBorderFocused: var(--colorBlue40);
  --formBorderDanger: var(--colorRed50);

  /*Form Controls e.g. Switches, Radio buttons, Checkboxes*/
  --bgFormControlEnabledUnchecked: var(--colorWhite);
  --bgFormControlEnabledChecked: var(--colorBlue50);
  --bgFormControlDisabled: var(--colorGray10);
  --bgFormControlToggleEnabledUnchecked: var(--colorGray20);
  --borderFormControlEnabledUnchecked: var(--colorGray10);
  --fillFormControlEnabled: var(--colorWhite);
  --fillFormControlDisabled: var(--colorGray40);

  /*Menus and Popovers*/
  --bgPopover: var(--colorWhite);
  --bgMenuItemDefault: var(--colorWhite);
  --bgMenuItemHover: var(--colorGray05);
  --bgMenuItemActive: var(--colorBlue50);
  --bgMenuItemDangerHover: var(--colorRed50);

  /*Modals*/
  --bgModalHeader: var(--colorWhite);
  --bgModalContent: var(--colorWhite);
  --bgModalFooter: var(--colorGray05);

  /*Search*/
  --bgSearchEnabled: var(--colorGray05);
  --bgSearchHover: var(--colorGray05);
  --bgSearchActive: var(--colorWhite);
  --borderSearchActive: var(--colorGray10);

  /*Skeleton Loader*/
  --bgSkeleton: var(--colorGray05);

  /*Tables*/
  --bgTableHeaderDefault: var(--colorGray02);
  --bgTableHeaderHover: var(--colorGray05);
  --bgTableHeaderHighlighted: var(--colorBlue05);
  --bgTableCellDefault: var(--colorWhite);
  --bgTableCellHover: var(--colorGray01);
  --bgTableCellHighlighted: var(--colorBlue02);

  /*Tokens*/
  --bgTokenDefault: var(--colorBlue05);
  --bgTokenHover: var(--colorBlue10);
  --bgTokenPressed: var(--colorBlue20);
  --bgTokenConditionDefault: var(--colorBlue20);
  --bgTokenConditionPressed: var(--colorBlue30);

  /*Lead Sidebar*/
  --bgSidebarHeader: var(--colorGray02);
  --bgSidebarBodyPrimary: var(--colorWhite);
  --bgSidebarBodySecondary: var(--colorGray02);

  /*Primary Button*/
  --bgButtonPrimaryEnabled: var(--colorBlue50);
  /* --bgButtonPrimaryHover: color-mix(in srgb, var(--colorBlue50) 90%, #000000); */
  --bgButtonPrimaryHover: rgb(39, 97, 216);
  /* --bgButtonPrimaryPressed: color-mix(in srgb, var(--colorBlue50) 85%, #000000); */
  --bgButtonPrimaryPressed: rgb(37, 92, 204);
  /* --borderButtonPrimary: color-mix(in srgb, var(--colorBlue50) 80%, #000000); */
  --borderButtonPrimary: rgb(34, 86, 192);

  /*Default Button*/
  --bgButtonDefaultEnabled: var(--colorWhite);
  --bgButtonDefaultHover: var(--colorGray05);
  --bgButtonDefaultPressed: var(--colorGray05);
  --borderButtonDefaultEnabled: var(--colorGray10);
  --borderButtonDefaultHover: var(--colorGray10);

  /*Danger Button*/
  --bgButtonDangerEnabled: var(--colorWhite);
  --bgButtonDangerHover: var(--colorRed50);
  /* --bgButtonDangerPressed: color-mix(in srgb, var(--colorRed50) 85%, #000000); */
  --bgButtonDangerPressed: rgb(188, 13, 28);
  /* --borderButtonDanger: color-mix(in srgb, var(--colorRed50) 80%, #000000); */
  --borderButtonDanger: rgb(177, 12, 26);

  /*Borderless Button*/
  --bgButtonBorderlessEnabled: transparent;
  --bgButtonBorderlessHover: rgba(0, 0, 0, 0.1);
  --bgButtonBorderlessPressed: rgba(0, 0, 0, 0.15);

  /*Fills for Avatars, Datepickers*/
  --fillActive: var(--colorBlue50);
  --fillInformational: var(--colorCyan40);
  --fillDanger: var(--colorRed50);
  --fillWarn: var(--colorGold20);
  --fillSuccess: var(--colorGreen40);
  --fillLight: var(--colorWhite);

  /* Pill Tabs */
  --colorBgTabPillPrimaryActive: var(--colorBlue50);
  --colorBgTabPillPrimaryHovered: var(--colorBlue05);
  --colorBgTabPillSecondaryActive: var(--colorGray05);
  --colorBgTabPillSecondaryHovered: var(--colorGray02);

  /*Colors for Reporting Charts and Graphs*/
  --fillDataVisCategorical1: var(--colorPurple60);
  --fillDataVisCategorical2: var(--colorCyan40);
  --fillDataVisCategorical3: var(--colorTeal50);
  --fillDataVisCategorical4: var(--colorMagenta40);
  --fillDataVisCategorical5: var(--colorRed50);
  --fillDataVisCategorical6: var(--colorRed20);
  --fillDataVisCategorical7: var(--colorGreen30);
  --fillDataVisCategorical8: var(--colorBlue50);
  --fillDataVisCategorical9: var(--colorMagenta60);
  --fillDataVisCategorical10: var(--colorGold40);
  --fillDataVisCategorical11: var(--colorTeal30);
  --fillDataVisCategorical12: var(--colorCyan20);
  --fillDataVisCategorical13: var(--colorOrange40);
  --fillDataVisCategorical14: var(--colorPurple30);

  /*Left Navigation Sidebar*/
  --bgNavSidebar: var(--colorGray90);
  --bgNavSidebarMenuitemHover: var(--colorGray80);
  --bgNavSidebarMenuitemActive: var(--colorGray80);

  /* Activity Icons */
  --colorBgActivityCall: var(--colorGreen10);
  --colorIconActivityCall: var(--colorGreen70);

  --colorBgActivityOpportunity: var(--colorGreen10);
  --colorIconActivityOpportunity: var(--colorGreen70);

  --colorBgActivityNote: var(--colorGold10);
  --colorIconActivityNote: var(--colorGold70);

  --colorBgActivityCustomActivity: var(--colorGold10);
  --colorIconActivityCustomActivity: var(--colorGold70);

  --colorBgActivityLeadUpdate: var(--colorGray10);
  --colorIconActivityLeadUpdate: var(--colorGray70);

  --colorBgActivityTrigger: var(--colorGray10);
  --colorIconActivityTrigger: var(--colorGray70);

  --colorBgActivityTask: var(--colorOrange10);
  --colorIconActivityTask: var(--colorOrange70);

  --colorBgActivityAssignUser: var(--colorOrange10);
  --colorIconActivityAssignUser: var(--colorOrange70);

  --colorBgActivityMeeting: var(--colorPurple10);
  --colorIconActivityMeeting: var(--colorPurple70);

  --colorBgActivityEmail: var(--colorCyan10);
  --colorIconActivityEmail: var(--colorCyan70);

  --colorBgActivitySMS: var(--colorTeal10);
  --colorIconActivitySMS: var(--colorTeal70);

  --colorBgActivityMissedCall: var(--colorRed10);
  --colorIconActivityMissedCall: var(--colorRed50);

  /* Empty State */
  --colorGradientEmptyState: linear-gradient(
    180deg,
    #f2f3f9 -7.99%,
    rgba(242, 243, 249, 0) 20.37%
  );
}

body.sb-theme-dark,
:root[data-color-mode='dark'] {
  /* Texts and Links */
  --colorTextDefault: var(--colorGray10);
  --colorTextMedium: var(--colorGray30);
  --colorTextLight: var(--colorGray40);
  --colorTextDanger: var(--colorRed30);
  --colorTextWarn: var(--colorGold20);
  --colorTextSuccess: var(--colorGreen20);
  --colorTextInformational: var(--colorCyan20);
  --colorTextDiscount: var(--colorWhite);
  --colorTextNeutralWhite: var(--colorWhite);
  --colorTextNeutralBlack: var(--colorGray80);
  --colorTextNeutralInvert: var(--colorGray80);

  --colorLinkDefault: var(--colorBlue40);
  --colorLinkHover: var(--colorBlue40);

  /* TODO: [darkmode] update light-mode link color and then drop these */
  --colorLinkDefaultNext: var(--colorLinkDefault);
  --colorLinkHoverNext: var(--colorLinkHover);

  /* Icons */
  --colorIconDefault: var(--colorGray20);
  --colorIconLight: var(--colorGray50);
  --colorIconNeutralWhite: var(--colorWhite);
  --colorIconNeutralBlack: var(--colorGray70);

  /* Surfaces and main Backgrounds */
  --surfaceBackgroundDefault: var(--colorGray90);
  --surfaceBackgroundLight: var(--colorGray92);
  --surfaceBackgroundMedium: var(--colorGray92);
  --surfaceBackgroundDark: var(--colorGray92);

  /* Card Backgrounds */
  --bgCardBase: var(--colorGray90);
  --bgCardLight: var(--colorGray88);
  --bgCardMedium: var(--colorGray92);
  --bgCardDark: var(--colorGray85);
  --bgCardHover: var(--colorGray88);
  --bgCardDrag: var(--colorGray85);

  /* Tooltip */
  --colorBgTooltip: var(--colorGray70);
  --colorBgTooltipKey: var(--colorGray60);

  /* Other Backgrounds */
  --bgLight: var(--colorGray90);
  --bgDefault: var(--colorGray80);
  --bgInformationalMuted: var(--colorCyan80);
  --bgWarn: var(--colorGold10);
  --bgWarnMuted: var(--colorGold80);
  --bgDanger: var(--colorRed40);
  --bgDangerMuted: var(--colorRed80);
  --bgSuccess: var(--colorGreen10);
  --bgSuccessMuted: var(--colorGreen80);
  --bgActive: var(--colorBlue50);
  --bgActiveMuted: var(--colorBlue80);

  /* Borders */
  --borderDefault: var(--colorGray80);
  --borderLight: var(--colorGray85);
  --borderHover: var(--colorGray70);
  --borderDanger: var(--colorRed30);
  --borderSuccess: var(--colorGreen20);
  --borderWarn: var(--colorGold20);
  --borderActive: var(--colorBlue40);
  --borderFocused: var(--colorBlue40);
  --borderDangerMuted: var(--colorRed70);
  --borderSuccessMuted: var(--colorGreen70);
  --borderWarnMuted: var(--colorGold70);
  --borderInformationalMuted: var(--colorCyan70);
  --borderActiveMuted: var(--colorBlue70);

  /* Forms e.g. Text areas, Selects, Input Fields */
  --formBackground: var(--colorGray90);
  --formBackgroundDisabled: var(--colorGray88);
  --formBorder: var(--colorGray80);
  --formBorderFocused: var(--colorBlue40);
  --formBorderDanger: var(--colorRed30);

  /* Form Controls e.g. Switches, Radio buttons, Checkboxes */
  --bgFormControlEnabledUnchecked: var(--colorGray90);
  --bgFormControlEnabledChecked: var(--colorBlue40);
  --bgFormControlDisabled: var(--colorGray80);
  --bgFormControlToggleEnabledUnchecked: var(--colorGray80);
  --borderFormControlEnabledUnchecked: var(--colorGray80);
  --fillFormControlEnabled: var(--colorWhite);
  --fillFormControlDisabled: var(--colorGray50);

  /* Menus and Popovers */
  --bgPopover: var(--colorGray88);
  --bgMenuItemDefault: var(--colorGray88);
  --bgMenuItemHover: var(--colorGray80);
  --bgMenuItemActive: var(--colorBlue50);
  --bgMenuItemDangerHover: var(--colorRed60);

  /* Modals */
  --bgModalHeader: var(--colorGray90);
  --bgModalContent: var(--colorGray90);
  --bgModalFooter: var(--colorGray85);

  /* Search */
  --bgSearchEnabled: var(--colorGray80);
  --bgSearchHover: var(--colorGray80);
  --bgSearchActive: var(--colorGray90);
  --borderSearchActive: var(--colorGray80);

  /* Skeleton Loader */
  --bgSkeleton: var(--colorGray85);

  /* Tables */
  --bgTableHeaderDefault: var(--colorGray88);
  --bgTableHeaderHover: var(--colorGray85);
  --bgTableHeaderHighlighted: var(--colorBlue80);
  --bgTableCellDefault: var(--colorGray90);
  --bgTableCellHover: var(--colorGray88);
  --bgTableCellHighlighted: var(--colorBlue90);

  /* Tokens */
  --bgTokenDefault: var(--colorBlue80);
  --bgTokenHover: var(--colorBlue70);
  --bgTokenPressed: var(--colorBlue60);
  --bgTokenConditionDefault: var(--colorBlue60);
  --bgTokenConditionPressed: var(--colorBlue50);

  /* Left Navigation Sidebar */
  --bgNavSidebar: var(--colorGray92);
  --bgNavSidebarMenuitemHover: var(--colorGray85);
  --bgNavSidebarMenuitemActive: var(--colorGray85);

  /* Primary Button */
  --bgButtonPrimaryEnabled: var(--colorBlue50);
  --bgButtonPrimaryHover: color-mix(in srgb, var(--colorBlue50) 90%, #000000);
  --bgButtonPrimaryPressed: color-mix(in srgb, var(--colorBlue50) 85%, #000000);
  --borderButtonPrimary: color-mix(in srgb, var(--colorBlue50) 80%, #000000);

  /* Default Button */
  --bgButtonDefaultEnabled: var(--colorGray90);
  --bgButtonDefaultHover: var(--colorGray85);
  --bgButtonDefaultPressed: var(--colorGray85);
  --borderButtonDefaultEnabled: var(--colorGray80);
  --borderButtonDefaultHover: var(--colorGray70);

  /* Danger Button */
  --bgButtonDangerEnabled: var(--colorGray90);
  --bgButtonDangerHover: var(--colorRed40);
  --bgButtonDangerPressed: color-mix(in srgb, var(--colorRed40) 85%, #000000);
  --borderButtonDanger: color-mix(in srgb, var(--colorRed40) 80%, #000000);

  /* Borderless Button */
  --bgButtonBorderlessEnabled: transparent;
  --bgButtonBorderlessHover: var(--colorGray85);
  --bgButtonBorderlessPressed: var(--colorGray80);

  /* Fills for Avatars, Datepickers */
  --fillActive: var(--colorBlue50);
  --fillInformational: var(--colorCyan30);
  --fillDanger: var(--colorRed30);
  --fillWarn: var(--colorGold20);
  --fillSuccess: var(--colorGreen30);
  --fillLight: var(--colorGray90);

  /* Pill Tabs */
  --colorBgTabPillPrimaryActive: var(--colorBlue50);
  --colorBgTabPillPrimaryHovered: var(--colorBlue80);
  --colorBgTabPillSecondaryActive: var(--colorGray80);
  --colorBgTabPillSecondaryHovered: var(--colorGray85);

  /* Colors for Reporting Charts and Graphs */
  --fillDataVisCategorical1: var(--colorPurple50);
  --fillDataVisCategorical2: var(--colorCyan40);
  --fillDataVisCategorical3: var(--colorTeal50);
  --fillDataVisCategorical4: var(--colorMagenta30);
  --fillDataVisCategorical5: var(--colorRed40);
  --fillDataVisCategorical6: var(--colorRed20);
  --fillDataVisCategorical7: var(--colorGreen30);
  --fillDataVisCategorical8: var(--colorBlue40);
  --fillDataVisCategorical9: var(--colorMagenta50);
  --fillDataVisCategorical10: var(--colorGold40);
  --fillDataVisCategorical11: var(--colorTeal30);
  --fillDataVisCategorical12: var(--colorCyan20);
  --fillDataVisCategorical13: var(--colorOrange40);
  --fillDataVisCategorical14: var(--colorPurple30);

  /* Left Navigation Sidebar */
  --bgNavSidebar: var(--colorGray92);
  --bgNavSidebarMenuitemHover: var(--colorGray85);
  --bgNavSidebarMenuitemActive: var(--colorGray85);

  /* Dark Mode */
  --colorBgActivityCall: var(--colorGreen70);
  --colorIconActivityCall: var(--colorGreen10);

  --colorBgActivityOpportunity: var(--colorGreen70);
  --colorIconActivityOpportunity: var(--colorGreen10);

  --colorBgActivityNote: var(--colorGold70);
  --colorIconActivityNote: var(--colorGold10);

  --colorBgActivityCustomActivity: var(--colorGold70);
  --colorIconActivityCustomActivity: var(--colorGold10);

  --colorBgActivityLeadUpdate: var(--colorGray70);
  --colorIconActivityLeadUpdate: var(--colorGray10);

  --colorBgActivityTrigger: var(--colorGray70);
  --colorIconActivityTrigger: var(--colorGray10);

  --colorBgActivityTask: var(--colorOrange70);
  --colorIconActivityTask: var(--colorOrange10);

  --colorBgActivityAssignUser: var(--colorOrange70);
  --colorIconActivityAssignUser: var(--colorOrange10);

  --colorBgActivityMeeting: var(--colorPurple70);
  --colorIconActivityMeeting: var(--colorPurple10);

  --colorBgActivityEmail: var(--colorCyan70);
  --colorIconActivityEmail: var(--colorCyan10);

  --colorBgActivitySMS: var(--colorTeal70);
  --colorIconActivitySMS: var(--colorTeal10);

  --colorBgActivityMissedCall: var(--colorRed70);
  --colorIconActivityMissedCall: var(--colorRed40);

  /* Empty State */
  --colorGradientEmptyState: linear-gradient(
    180deg,
    rgba(242, 243, 249, 0.1) -7.99%,
    rgba(242, 243, 249, 0) 20.37%
  );
}

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

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

.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 */
  /* If button is in a group and has no label, give the first and last one */
  /* a bit more breathing room */
  /* On hover/focus/active, bring the proper btn to front */
}
.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;
}
.BtnGroup > .Btn--iconOnly:not(:only-child) {
  /* 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:not(:only-child).Btn--small:first-child,
.BtnGroup > .Btn--iconOnly:not(:only-child).Btn--small:last-child {
  width: 30px;
}
.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;
}

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

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


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