/** * ATTENTION: This file is generated by running 'pnpm gen:theme'. * Do not edit this file directly. * To make changes, update: * * js/theme/ThemeColors.ts (and/or) * * js/theme/BaseColors.ts * and run 'pnpm gen:theme'. */ :root { --colorRed01: #fffbfb; --colorRed02: #fff7f6; --colorRed05: #ffece9; --colorRed10: #ffd8d3; --colorRed20: #ffafa6; --colorRed30: #ff8075; --colorRed40: #fa4442; --colorRed50: #dd0f21; --colorRed60: #a62927; --colorRed70: #702d29; --colorRed80: #4a201c; --colorRed90: #24110f; --colorGreen01: #f7fff7; --colorGreen02: #efffee; --colorGreen05: #dffadc; --colorGreen10: #c9f4c5; --colorGreen20: #8eda8d; --colorGreen30: #70c770; --colorGreen40: #4cb24d; --colorGreen50: #418a42; --colorGreen60: #306d31; --colorGreen70: #235224; --colorGreen80: #173617; --colorGreen90: #0d1a0d; --colorGold01: #fffdf3; --colorGold02: #fffae1; --colorGold05: #f9f2cd; --colorGold10: #f9e9a1; --colorGold20: #fccc0b; --colorGold30: #d7af1b; --colorGold40: #af8d00; --colorGold50: #907400; --colorGold60: #735b00; --colorGold70: #564400; --colorGold80: #3a2d00; --colorGold90: #1d1500; --colorBlue01: #fbfcff; --colorBlue02: #f6f9ff; --colorBlue05: #eaf1ff; --colorBlue10: #d4e3ff; --colorBlue20: #a9c7ff; --colorBlue30: #7daaff; --colorBlue40: #598df2; --colorBlue50: #2b6cf0; --colorBlue60: #245bc6; --colorBlue70: #2d4572; --colorBlue80: #1c2e4f; --colorBlue90: #0e1625; --colorCyan01: #fafdff; --colorCyan02: #f4faff; --colorCyan05: #e5f3ff; --colorCyan10: #c9e7ff; --colorCyan20: #90cfff; --colorCyan30: #4bb2f8; --colorCyan40: #2e99de; --colorCyan50: #007ebf; --colorCyan60: #006499; --colorCyan70: #144a6d; --colorCyan80: #08314c; --colorCyan90: #00182a; --colorPurple01: #fcfcff; --colorPurple02: #f9f8ff; --colorPurple05: #f1eeff; --colorPurple10: #e4ddff; --colorPurple20: #cabbff; --colorPurple30: #b297ff; --colorPurple40: #9c6fff; --colorPurple50: #854beb; --colorPurple60: #6e20d4; --colorPurple70: #493c6d; --colorPurple80: #31274b; --colorPurple90: #18112a; --colorOrange01: #fffbf9; --colorOrange02: #fff8f3; --colorOrange05: #ffede1; --colorOrange10: #ffdbc1; --colorOrange20: #ffb47c; --colorOrange30: #f19041; --colorOrange40: #d3751e; --colorOrange50: #b25d00; --colorOrange60: #8e4900; --colorOrange70: #663914; --colorOrange80: #462508; --colorOrange90: #260f00; --colorTeal01: #f4fffe; --colorTeal02: #e8fffe; --colorTeal05: #d4fdfb; --colorTeal10: #b3f4f1; --colorTeal20: #69dcd9; --colorTeal30: #4ac0be; --colorTeal40: #25a5a2; --colorTeal50: #008987; --colorTeal60: #006c6b; --colorTeal70: #005150; --colorTeal80: #003635; --colorTeal90: #001b1b; --colorMagenta01: #fffbfc; --colorMagenta02: #fff7f9; --colorMagenta05: #ffebf0; --colorMagenta10: #ffd6e1; --colorMagenta20: #ffabc2; --colorMagenta30: #ff78a5; --colorMagenta40: #ef4889; --colorMagenta50: #d0266f; --colorMagenta60: #ac0057; --colorMagenta70: #6e2c43; --colorMagenta80: #481f2c; --colorMagenta90: #270b15; --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; --colorBrandBlue: #1463ff; --colorBrandRed: #d61549; --colorBrandGreen: #4ec375; --colorBrandGold: #fccc0b; --colorTransparentBlack02: rgba(0, 0, 0, 0.02); --colorTransparentBlack05: rgba(0, 0, 0, 0.05); --colorTransparentBlack10: rgba(0, 0, 0, 0.1); --colorTransparentBlack20: rgba(0, 0, 0, 0.2); --colorTransparentWhite02: rgba(255, 255, 255, 0.02); --colorTransparentWhite05: rgba(255, 255, 255, 0.05); --colorTransparentWhite10: rgba(255, 255, 255, 0.1); --colorTransparentWhite20: rgba(255, 255, 255, 0.2); } :root, .themeLight { /** * ATTENTION: This file is generated by running 'pnpm gen:theme'. * Do not edit this file directly. * To make changes, update: * * js/theme/ThemeColors.ts (and/or) * * js/theme/BaseColors.ts * and run 'pnpm gen:theme'. */ --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); --colorTextAiGradientForeground: var(--colorPurple70); --colorLinkDefault: var(--colorBlue60); --colorLinkHover: var(--colorBlue60); --colorLogoText: var(--colorBlack); --colorIconDefault: var(--colorGray70); --colorIconLight: var(--colorGray40); --colorIconNeutralWhite: var(--colorWhite); --colorIconNeutralBlack: var(--colorGray70); --colorIconInformational: var(--colorCyan60); --bgRichIconRed: var(--colorRed10); --bgRichIconOrange: var(--colorOrange10); --bgRichIconGold: var(--colorGold10); --bgRichIconGreen: var(--colorGreen10); --bgRichIconTeal: var(--colorTeal10); --bgRichIconCyan: var(--colorCyan10); --bgRichIconBlue: var(--colorBlue10); --bgRichIconPurple: var(--colorPurple10); --bgRichIconMagenta: var(--colorMagenta10); --bgRichIconGray: var(--colorGray10); --colorRichIconRed: var(--colorRed70); --colorRichIconOrange: var(--colorOrange70); --colorRichIconGold: var(--colorGold70); --colorRichIconGreen: var(--colorGreen70); --colorRichIconTeal: var(--colorTeal70); --colorRichIconCyan: var(--colorCyan70); --colorRichIconBlue: var(--colorBlue70); --colorRichIconPurple: var(--colorPurple70); --colorRichIconMagenta: var(--colorMagenta70); --colorRichIconGray: var(--colorGray70); --bgInvertedRichIcon: var(--colorWhite); --colorInvertedRichIconRed: var(--colorRed50); --colorInvertedRichIconOrange: var(--colorOrange50); --colorInvertedRichIconGold: var(--colorGold50); --colorInvertedRichIconGreen: var(--colorGreen50); --colorInvertedRichIconTeal: var(--colorTeal50); --colorInvertedRichIconCyan: var(--colorCyan50); --colorInvertedRichIconBlue: var(--colorBlue50); --colorInvertedRichIconPurple: var(--colorPurple50); --colorInvertedRichIconMagenta: var(--colorMagenta50); --colorInvertedRichIconGray: var(--colorGray50); --surfaceBackgroundDefault: var(--colorWhite); --surfaceBackgroundLight: var(--colorGray01); --surfaceBackgroundMedium: var(--colorGray02); --surfaceBackgroundDark: var(--colorGray05); --bgCardBase: var(--colorWhite); --bgCardLight: var(--colorGray01); --bgCardMedium: var(--colorGray02); --bgCardDark: var(--colorGray05); --bgCardHover: var(--colorWhite); --bgCardDrag: var(--colorWhite); --colorBgCardEdit: var(--colorCyan02); --colorBgTooltip: var(--colorGray70); --colorBgTooltipKey: var(--colorGray60); --bgLight: var(--colorWhite); --bgLightMuted: var(--colorGray02); --bgDefault: var(--colorGray10); --bgDefaultMuted: var(--colorGray05); --bgDefaultMutedHover: 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); --bgHighlightMatch: rgba(249, 233, 161, 0.4); --bgHighlightMatchSelected: var(--colorGold10); --colorBgBackdrop: rgba(0, 0, 0, 0.5); --borderDefault: var(--colorGray10); --borderLight: var(--colorGray05); --borderHover: var(--colorGray20); --borderDanger: var(--colorRed50); --borderSuccess: var(--colorGreen40); --borderWarn: var(--colorGold40); --borderActive: var(--colorBlue40); --borderFocused: var(--colorBlue20); --borderDangerMuted: var(--colorRed10); --borderSuccessMuted: var(--colorGreen10); --borderWarnMuted: var(--colorGold10); --borderInformationalMuted: var(--colorCyan10); --borderActiveMuted: var(--colorBlue10); --borderSms: var(--colorTeal20); --borderSmsHover: var(--colorTeal30); --borderSmsMuted: var(--colorTeal10); --borderSmsMutedHover: var(--colorTeal20); --borderWhatsApp: var(--colorGreen40); --borderWhatsAppHover: var(--colorGreen50); --borderWhatsAppMuted: var(--colorGreen10); --borderWhatsAppMutedHover: var(--colorGreen20); --formBackground: var(--colorWhite); --formBackgroundDisabled: var(--colorGray02); --formBorder: var(--colorGray10); --formBorderFocused: var(--colorBlue40); --formBorderDanger: var(--colorRed50); --bgFormControlEnabledUnchecked: var(--colorWhite); --bgFormControlEnabledChecked: var(--colorBlue50); --bgFormControlDisabled: var(--colorGray10); --bgFormControlToggleEnabledUnchecked: var(--colorGray20); --borderFormControlEnabledUnchecked: var(--colorGray10); --fillFormControlEnabled: var(--colorWhite); --fillFormControlDisabled: var(--colorGray40); --bgPopover: var(--colorWhite); --bgMenuItemDefault: var(--colorWhite); --bgMenuItemHover: var(--colorGray05); --bgMenuItemActive: var(--colorBlue50); --bgMenuItemDangerHover: var(--colorRed50); --colorBgBottomsheet: var(--colorWhite); --colorBgEmailEditor: var(--colorWhite); --colorBorderAIDraft: var(--colorPurple10); --bgModalHeader: var(--colorWhite); --bgModalContent: var(--colorWhite); --bgModalFooter: var(--colorGray05); --bgSearchEnabled: var(--colorGray05); --bgSearchHover: var(--colorGray05); --bgSearchActive: var(--colorWhite); --borderSearchActive: var(--colorGray10); --bgSkeleton: var(--colorGray05); --bgTableHeaderDefault: var(--colorGray02); --bgTableHeaderHover: var(--colorGray05); --bgTableHeaderHighlighted: var(--colorBlue05); --bgTableCellDefault: var(--colorWhite); --bgTableCellHover: var(--colorGray01); --bgTableCellHighlighted: var(--colorBlue02); --bgTokenDefault: var(--colorBlue05); --bgTokenHover: var(--colorBlue10); --bgTokenPressed: var(--colorBlue20); --bgTokenConditionDefault: var(--colorBlue20); --bgTokenConditionPressed: var(--colorBlue30); --bgTokenOutlined: var(--colorWhite); --bgTokenOutlinedHover: var(--colorGray05); --bgTokenOutlinedPressed: var(--colorGray10); --bgTokenDanger: var(--colorRed05); --bgTokenDangerHover: var(--colorRed10); --bgTokenDangerPressed: var(--colorRed20); --bgSidebarHeader: var(--colorGray02); --bgSidebarBodyPrimary: var(--colorWhite); --bgSidebarBodySecondary: var(--colorGray02); --bgButtonPrimaryEnabled: var(--colorBlue50); --bgButtonPrimaryHover: rgb(39, 97, 216); --bgButtonPrimaryPressed: rgb(37, 92, 204); --borderButtonPrimary: rgb(34, 86, 192); --bgButtonDefaultEnabled: var(--colorWhite); --bgButtonDefaultHover: var(--colorGray05); --bgButtonDefaultPressed: var(--colorGray05); --borderButtonDefaultEnabled: var(--colorGray10); --borderButtonDefaultHover: var(--colorGray10); --bgButtonDangerEnabled: var(--colorWhite); --bgButtonDangerHover: color-mix(in srgb, var(--colorRed50) 90%, #000000); --bgButtonDangerPressed: rgb(188, 13, 28); --borderButtonDanger: rgb(177, 12, 26); --bgButtonBorderlessEnabled: transparent; --bgButtonBorderlessHover: rgba(0, 0, 0, 0.1); --bgButtonBorderlessPressed: rgba(0, 0, 0, 0.15); --bgButtonOAuthMicrosoft: var(--colorGray80); --bgButtonLowConfidence: var(--colorRed05); --bgButtonLowConfidenceHover: var(--colorRed10); --bgButtonLowConfidenceActive: var(--colorRed20); --fillActive: var(--colorBlue50); --fillInformational: var(--colorCyan40); --fillDanger: var(--colorRed50); --fillWarn: var(--colorGold20); --fillSuccess: var(--colorGreen40); --fillLight: var(--colorWhite); --colorFillTransparent02: var(--colorTransparentBlack02); --colorFillTransparent05: var(--colorTransparentBlack05); --colorFillTransparent10: var(--colorTransparentBlack10); --colorFillTransparent20: var(--colorTransparentBlack20); --colorBgTabPillPrimaryActive: var(--colorBlue50); --colorBgTabPillPrimaryHovered: var(--colorBlue05); --colorBgTabPillSecondaryActive: var(--colorGray05); --colorBgTabPillSecondaryHovered: var(--colorGray02); --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); --bgNavSidebar: var(--colorGray90); --bgNavSidebarMenuitemHover: var(--colorGray80); --bgNavSidebarMenuitemActive: var(--colorGray80); --bgNavSidebarProfilemenuDefault: var(--colorBlack); --bgNavSidebarProfilemenuHover: var(--colorGray80); --borderNavSidebar: var(--colorGray90); --bgSettingsNavSidebar: var(--colorGray02); --colorBgBadgeMeetingMuted: var(--colorPurple05); --colorTextBadgeMeetingMuted: var(--colorPurple50); --colorBgMeetingBar: var(--colorPurple30); --colorBgActivityCall: var(--colorGreen10); --colorIconActivityCall: var(--colorGreen70); --colorBgActivityOpportunity: var(--colorGreen10); --colorIconActivityOpportunity: var(--colorGreen70); --colorBgActivityNote: var(--colorGold10); --colorIconActivityNote: var(--colorGold70); --colorBgActivityCustomActivity: var(--colorGold10); --colorIconActivityCustomActivity: var(--colorGold70); --colorBgActivityDefault: var(--colorWhite); --colorIconActivityDefault: 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); --colorBgActivitySMSMuted: var(--colorTeal02); --colorIconActivitySMS: var(--colorTeal70); --colorIconActivityMissedCall: var(--colorRed50); --colorBgActivityWhatsApp: var(--colorGreen10); --colorBgActivityWhatsAppMuted: var(--colorGreen01); --colorBgAvatarRed: var(--colorRed05); --colorFillAvatarRed: var(--colorRed60); --colorBgAvatarGold: var(--colorGold02); --colorFillAvatarGold: var(--colorGold50); --colorBgAvatarBlue: var(--colorBlue05); --colorFillAvatarBlue: var(--colorBlue60); --colorBgAvatarGreen: var(--colorGreen05); --colorFillAvatarGreen: var(--colorGreen50); --colorBgAvatarOrange: var(--colorOrange05); --colorFillAvatarOrange: var(--colorOrange50); --colorBgAvatarCyan: var(--colorCyan05); --colorFillAvatarCyan: var(--colorCyan50); --colorBgAvatarMagenta: var(--colorMagenta02); --colorFillAvatarMagenta: var(--colorMagenta60); --colorBgAvatarTeal: var(--colorTeal02); --colorFillAvatarTeal: var(--colorTeal50); --colorBgAvatarPurple: var(--colorPurple05); --colorFillAvatarPurple: var(--colorPurple50); --colorBgAvatarGray: var(--colorGray02); --colorFillAvatarGray: var(--colorGray50); --colorBgRichTextHighlightRed: #ffcfcf; --colorBgRichTextHighlightYellow: #ffff75; --colorBgRichTextHighlightGreen: #e0f9ab; --colorBgRichTextHighlightBlue: #e2f2fb; --colorBgRichTextHighlightPurple: #ecdbfc; --colorGradientEmptyStateStart: var(--bgDefaultMuted); --colorGradientEmptyStateEnd: rgba(242, 243, 249, 0); --colorBorderMessageMeeting: var(--colorPurple10); --colorBgMessageMeeting: var(--colorPurple05); --colorBorderMessageTask: var(--colorOrange10); --colorBgMessageTask: var(--colorOrange05); --colorBgBadgeMeeting: var(--colorPurple50); --colorBgBadgeTask: var(--colorOrange50); --colorBgNextLead: var(--colorGray90); --colorIconDuotoneFillGold: var(--colorGold20); --colorIconDuotoneStrokeGold: var(--colorGold70); --colorIconDuotoneFillBlue: var(--colorBlue20); --colorIconDuotoneStrokeBlue: var(--colorBlue70); --colorIconDuotoneFillCyan: var(--colorCyan20); --colorIconDuotoneStrokeCyan: var(--colorCyan70); --colorIconDuotoneFillRed: var(--colorRed20); --colorIconDuotoneStrokeRed: var(--colorRed70); --colorIconDuotoneFillPurple: var(--colorPurple20); --colorIconDuotoneStrokePurple: var(--colorPurple70); --colorIconDuotoneFillGreen: var(--colorGreen20); --colorIconDuotoneStrokeGreen: var(--colorGreen70); --colorBgCardAttachmentDefault: var(--colorGray02); --colorBgCardAttachmentHover: var(--colorGray05); --colorBgLoginAsLeftNav: var(--colorMagenta80); --colorLoginAsSurface: var(--colorMagenta05); --colorLoginAsButton: var(--colorRed10); --colorLoginAsButtonBorder: var(--colorRed20); --colorStepperBlank: var(--colorGray10); --colorFillScrubBarDefault: var(--colorGray05); --colorFillScrubBarLoaded: var(--colorGray20); --colorFillScrubBarPlayed: var(--colorGray70); --colorSpeakerLabelDotBorder: var(--colorGray05); --shadowLevel1: 0px 1px 4px 0px rgba(0, 0, 0, 0.04); --shadowLevel2: 0px 3px 5px 0px rgba(0, 0, 0, 0.05); --shadowLevel3: 0px 8px 12px 0px rgba(0, 0, 0, 0.1); --shadowLevel4: 0px 15px 25px 0px rgba(0, 0, 0, 0.15); --colorLinearGradientAi: linear-gradient(167deg, var(--fillInformational) 0%, var(--fillDanger) 100%); --colorLinearGradientAiBackground: linear-gradient(135deg, color-mix(in srgb, var(--fillInformational) 5%, #fff) 0%, color-mix(in srgb, var(--fillDanger) 5%, #fff) 100%); } body.sb-theme-dark, html[data-color-mode='dark'] { /* catch default browser styles */ color-scheme: dark; } body.sb-theme-dark, html[data-color-mode='dark'], .themeDark { /** * ATTENTION: This file is generated by running 'pnpm gen:theme'. * Do not edit this file directly. * To make changes, update: * * js/theme/ThemeColors.ts (and/or) * * js/theme/BaseColors.ts * and run 'pnpm gen:theme'. */ --colorTextDefault: var(--colorGray10); --colorTextMedium: var(--colorGray30); --colorTextLight: var(--colorGray40); --colorTextDanger: var(--colorRed30); --colorTextWarn: var(--colorGold20); --colorTextSuccess: var(--colorGreen20); --colorTextInformational: var(--colorCyan20); --colorTextDiscount: var(--colorRed30); --colorTextNeutralWhite: var(--colorWhite); --colorTextNeutralBlack: var(--colorGray80); --colorTextNeutralInvert: var(--colorGray80); --colorTextAiGradientForeground: var(--colorPurple10); --colorLinkDefault: var(--colorBlue40); --colorLinkHover: var(--colorBlue40); --colorLogoText: var(--colorWhite); --colorIconDefault: var(--colorGray20); --colorIconLight: var(--colorGray50); --colorIconNeutralWhite: var(--colorWhite); --colorIconNeutralBlack: var(--colorGray70); --colorIconInformational: var(--colorCyan20); --bgRichIconRed: var(--colorRed70); --bgRichIconOrange: var(--colorOrange70); --bgRichIconGold: var(--colorGold70); --bgRichIconGreen: var(--colorGreen70); --bgRichIconTeal: var(--colorTeal70); --bgRichIconCyan: var(--colorCyan70); --bgRichIconBlue: var(--colorBlue70); --bgRichIconPurple: var(--colorPurple70); --bgRichIconMagenta: var(--colorMagenta70); --bgRichIconGray: var(--colorGray70); --colorRichIconRed: var(--colorRed10); --colorRichIconOrange: var(--colorOrange10); --colorRichIconGold: var(--colorGold10); --colorRichIconGreen: var(--colorGreen10); --colorRichIconTeal: var(--colorTeal10); --colorRichIconCyan: var(--colorCyan10); --colorRichIconBlue: var(--colorBlue10); --colorRichIconPurple: var(--colorPurple10); --colorRichIconMagenta: var(--colorMagenta10); --colorRichIconGray: var(--colorGray10); --bgInvertedRichIcon: var(--colorGray88); --colorInvertedRichIconRed: var(--colorRed40); --colorInvertedRichIconOrange: var(--colorOrange40); --colorInvertedRichIconGold: var(--colorGold40); --colorInvertedRichIconGreen: var(--colorGreen40); --colorInvertedRichIconTeal: var(--colorTeal40); --colorInvertedRichIconCyan: var(--colorCyan40); --colorInvertedRichIconBlue: var(--colorBlue40); --colorInvertedRichIconPurple: var(--colorPurple40); --colorInvertedRichIconMagenta: var(--colorMagenta40); --colorInvertedRichIconGray: var(--colorGray40); --surfaceBackgroundDefault: var(--colorGray90); --surfaceBackgroundLight: var(--colorGray92); --surfaceBackgroundMedium: var(--colorGray92); --surfaceBackgroundDark: var(--colorGray92); --bgCardBase: var(--colorGray90); --bgCardLight: var(--colorGray88); --bgCardMedium: var(--colorGray92); --bgCardDark: var(--colorGray85); --bgCardHover: var(--colorGray88); --bgCardDrag: var(--colorGray85); --colorBgCardEdit: var(--colorGray88); --colorBgTooltip: var(--colorGray70); --colorBgTooltipKey: var(--colorGray60); --bgLight: var(--colorGray90); --bgLightMuted: var(--colorGray85); --bgDefault: var(--colorGray80); --bgDefaultMuted: var(--colorGray85); --bgDefaultMutedHover: var(--colorGray80); --bgInformational: var(--colorCyan50); --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); --bgHighlightMatch: rgba(249, 233, 161, 0.8); --bgHighlightMatchSelected: var(--colorGold10); --colorBgBackdrop: rgba(0, 0, 0, 0.5); --borderDefault: var(--colorGray80); --borderLight: var(--colorGray85); --borderHover: var(--colorGray70); --borderDanger: var(--colorRed30); --borderSuccess: var(--colorGreen20); --borderWarn: var(--colorGold20); --borderActive: var(--colorBlue40); --borderFocused: var(--colorBlue70); --borderDangerMuted: var(--colorRed70); --borderSuccessMuted: var(--colorGreen70); --borderWarnMuted: var(--colorGold70); --borderInformationalMuted: var(--colorCyan70); --borderActiveMuted: var(--colorBlue70); --borderSms: var(--colorTeal60); --borderSmsHover: var(--colorTeal50); --borderSmsMuted: var(--colorTeal70); --borderSmsMutedHover: var(--colorTeal60); --borderWhatsApp: var(--colorGreen20); --borderWhatsAppHover: var(--colorGreen10); --borderWhatsAppMuted: var(--colorGreen70); --borderWhatsAppMutedHover: var(--colorGreen60); --formBackground: var(--colorGray90); --formBackgroundDisabled: var(--colorGray88); --formBorder: var(--colorGray80); --formBorderFocused: var(--colorBlue40); --formBorderDanger: var(--colorRed30); --bgFormControlEnabledUnchecked: var(--colorGray90); --bgFormControlEnabledChecked: var(--colorBlue40); --bgFormControlDisabled: var(--colorGray80); --bgFormControlToggleEnabledUnchecked: var(--colorGray70); --borderFormControlEnabledUnchecked: var(--colorGray70); --fillFormControlEnabled: var(--colorWhite); --fillFormControlDisabled: var(--colorGray50); --bgPopover: var(--colorGray88); --bgMenuItemDefault: var(--colorGray88); --bgMenuItemHover: var(--colorGray80); --bgMenuItemActive: var(--colorBlue50); --bgMenuItemDangerHover: var(--colorRed60); --colorBgBottomsheet: var(--colorGray88); --colorBgEmailEditor: var(--colorGray10); --colorBorderAIDraft: var(--colorPurple80); --bgModalHeader: var(--colorGray90); --bgModalContent: var(--colorGray90); --bgModalFooter: var(--colorGray85); --bgSearchEnabled: var(--colorGray80); --bgSearchHover: var(--colorGray80); --bgSearchActive: var(--colorGray90); --borderSearchActive: var(--colorGray80); --bgSkeleton: var(--colorGray85); --bgTableHeaderDefault: var(--colorGray88); --bgTableHeaderHover: var(--colorGray85); --bgTableHeaderHighlighted: var(--colorBlue80); --bgTableCellDefault: var(--colorGray90); --bgTableCellHover: var(--colorGray88); --bgTableCellHighlighted: var(--colorBlue90); --bgTokenDefault: var(--colorBlue80); --bgTokenHover: var(--colorBlue70); --bgTokenPressed: var(--colorBlue60); --bgTokenConditionDefault: var(--colorBlue60); --bgTokenConditionPressed: var(--colorBlue50); --bgTokenOutlined: var(--colorGray90); --bgTokenOutlinedHover: var(--colorGray80); --bgTokenOutlinedPressed: var(--colorGray70); --bgTokenDanger: var(--colorRed80); --bgTokenDangerHover: var(--colorRed70); --bgTokenDangerPressed: var(--colorRed60); --bgSidebarHeader: var(--colorGray92); --bgSidebarBodyPrimary: var(--colorGray90); --bgSidebarBodySecondary: var(--colorGray92); --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); --bgButtonDefaultEnabled: var(--colorGray90); --bgButtonDefaultHover: var(--colorGray85); --bgButtonDefaultPressed: var(--colorGray85); --borderButtonDefaultEnabled: var(--colorGray80); --borderButtonDefaultHover: var(--colorGray70); --bgButtonDangerEnabled: var(--colorGray90); --bgButtonDangerHover: color-mix(in srgb, var(--colorRed40) 90%, #000000); --bgButtonDangerPressed: color-mix(in srgb, var(--colorRed40) 85%, #000000); --borderButtonDanger: color-mix(in srgb, var(--colorRed40) 80%, #000000); --bgButtonBorderlessEnabled: transparent; --bgButtonBorderlessHover: rgba(255, 255, 255, 0.1); --bgButtonBorderlessPressed: rgba(255, 255, 255, 0.15); --bgButtonOAuthMicrosoft: var(--colorGray80); --bgButtonLowConfidence: var(--colorRed80); --bgButtonLowConfidenceHover: var(--colorRed70); --bgButtonLowConfidenceActive: var(--colorRed60); --fillActive: var(--colorBlue50); --fillInformational: var(--colorCyan30); --fillDanger: var(--colorRed30); --fillWarn: var(--colorGold20); --fillSuccess: var(--colorGreen30); --fillLight: var(--colorGray90); --colorFillTransparent02: var(--colorTransparentWhite02); --colorFillTransparent05: var(--colorTransparentWhite05); --colorFillTransparent10: var(--colorTransparentWhite10); --colorFillTransparent20: var(--colorTransparentWhite20); --colorBgTabPillPrimaryActive: var(--colorBlue50); --colorBgTabPillPrimaryHovered: var(--colorBlue80); --colorBgTabPillSecondaryActive: var(--colorGray80); --colorBgTabPillSecondaryHovered: var(--colorGray85); --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); --bgNavSidebar: var(--colorGray92); --bgNavSidebarMenuitemHover: var(--colorGray85); --bgNavSidebarMenuitemActive: var(--colorGray85); --bgNavSidebarProfilemenuDefault: var(--colorBlack); --bgNavSidebarProfilemenuHover: var(--colorGray85); --borderNavSidebar: var(--colorGray80); --bgSettingsNavSidebar: var(--colorGray88); --colorBgBadgeMeetingMuted: var(--colorPurple70); --colorTextBadgeMeetingMuted: var(--colorPurple20); --colorBgMeetingBar: var(--colorPurple60); --colorBgActivityCall: var(--colorGreen70); --colorIconActivityCall: var(--colorGreen10); --colorBgActivityOpportunity: var(--colorGreen70); --colorIconActivityOpportunity: var(--colorGreen10); --colorBgActivityNote: var(--colorGold70); --colorIconActivityNote: var(--colorGold10); --colorBgActivityCustomActivity: var(--colorGold70); --colorIconActivityCustomActivity: var(--colorGold10); --colorBgActivityDefault: var(--colorGray88); --colorIconActivityDefault: 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); --colorBgActivitySMSMuted: var(--colorTeal80); --colorIconActivitySMS: var(--colorTeal10); --colorIconActivityMissedCall: var(--colorRed40); --colorBgActivityWhatsApp: var(--colorGreen70); --colorBgActivityWhatsAppMuted: var(--colorGreen80); --colorBgAvatarRed: var(--colorRed70); --colorFillAvatarRed: var(--colorRed20); --colorBgAvatarGold: var(--colorGold70); --colorFillAvatarGold: var(--colorGold20); --colorBgAvatarBlue: var(--colorBlue70); --colorFillAvatarBlue: var(--colorBlue20); --colorBgAvatarGreen: var(--colorGreen70); --colorFillAvatarGreen: var(--colorGreen10); --colorBgAvatarOrange: var(--colorOrange70); --colorFillAvatarOrange: var(--colorOrange20); --colorBgAvatarCyan: var(--colorCyan70); --colorFillAvatarCyan: var(--colorCyan20); --colorBgAvatarMagenta: var(--colorMagenta70); --colorFillAvatarMagenta: var(--colorMagenta10); --colorBgAvatarTeal: var(--colorTeal70); --colorFillAvatarTeal: var(--colorTeal20); --colorBgAvatarPurple: var(--colorPurple70); --colorFillAvatarPurple: var(--colorPurple20); --colorBgAvatarGray: var(--colorGray70); --colorFillAvatarGray: var(--colorGray20); --colorBgRichTextHighlightRed: #963f38; --colorBgRichTextHighlightYellow: #7a7a1d; --colorBgRichTextHighlightGreen: #2b6b2b; --colorBgRichTextHighlightBlue: #254a8d; --colorBgRichTextHighlightPurple: #562d8d; --colorGradientEmptyStateStart: var(--bgDefaultMuted); --colorGradientEmptyStateEnd: rgba(242, 243, 249, 0); --colorBorderMessageMeeting: var(--colorPurple70); --colorBgMessageMeeting: var(--colorPurple80); --colorBorderMessageTask: var(--colorOrange70); --colorBgMessageTask: var(--colorOrange80); --colorBgBadgeMeeting: var(--colorPurple50); --colorBgBadgeTask: var(--colorOrange50); --colorBgNextLead: var(--colorGray70); --colorIconDuotoneFillGold: var(--colorGold20); --colorIconDuotoneStrokeGold: var(--colorGold20); --colorIconDuotoneFillBlue: var(--colorBlue20); --colorIconDuotoneStrokeBlue: var(--colorBlue20); --colorIconDuotoneFillCyan: var(--colorCyan20); --colorIconDuotoneStrokeCyan: var(--colorCyan20); --colorIconDuotoneFillRed: var(--colorRed20); --colorIconDuotoneStrokeRed: var(--colorRed20); --colorIconDuotoneFillPurple: var(--colorPurple20); --colorIconDuotoneStrokePurple: var(--colorPurple20); --colorIconDuotoneFillGreen: var(--colorGreen20); --colorIconDuotoneStrokeGreen: var(--colorGreen20); --colorBgCardAttachmentDefault: var(--colorGray85); --colorBgCardAttachmentHover: var(--colorGray85); --colorBgLoginAsLeftNav: var(--colorMagenta80); --colorLoginAsSurface: var(--colorMagenta90); --colorLoginAsButton: var(--colorRed80); --colorLoginAsButtonBorder: var(--colorRed70); --colorStepperBlank: var(--colorGray70); --colorFillScrubBarDefault: var(--colorGray80); --colorFillScrubBarLoaded: var(--colorGray70); --colorFillScrubBarPlayed: var(--colorGray20); --colorSpeakerLabelDotBorder: var(--colorGray80); --shadowLevel1: 0px 1px 4px 0px rgba(0, 0, 0, 0.1); --shadowLevel2: 0px 3px 5px 0px rgba(0, 0, 0, 0.15); --shadowLevel3: 0px 8px 12px 0px rgba(0, 0, 0, 0.4); --shadowLevel4: 0px 15px 25px 0px rgba(0, 0, 0, 0.4); --colorLinearGradientAi: linear-gradient(167deg, var(--fillInformational) 0%, var(--fillDanger) 100%); --colorLinearGradientAiBackground: linear-gradient(135deg, color-mix(in srgb, var(--fillInformational) 10%, #000) 0%, color-mix(in srgb, var(--fillDanger) 10%, #000) 100%); } @layer reset,base,atom; :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 */ --surfaceBackgroundDefault: var(--white); --discountColor: var(--colorBrandRed); /** * 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 * ------------------------- */ /* Tables */ /* @see https://github.com/closeio/close-ui/issues/17993 and https://github.com/closeio/close-ui/pull/18163#issue-3184163482 */ --tableShadow: none; --tableBorderRadius: 5px; /* Base */ --baseFontFamily: -apple-system, system-ui, '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; --baseInputBorderRadius: 7px; /* Border Radius */ --baseBorderRadius: 3px; /* Deprecated */ --borderRadiusSmall: 3px; --borderRadiusMedium: 7px; /* Fonts */ --headingSizeSuper: 30px; --headingSizeDisplay: 24px; --headingSizeLarge: 18px; --headingSizeMedium: 16px; --fontSizeBase: 14px; --fontSizeSmall: 13px; --fontSizeTiny: 12px; --fontWeightRegular: 400; --fontWeightMedium: 500; --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); /* 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 */ --topNavHeight: 56px; --leftNavWidth: 256px; --loginAsColor: var(--colorMagenta10); --loginAsHover: rgba(0, 0, 0, 0.2); /* Modals */ --modalBodyPadding: var(--spacing-16); --modalBorderRadius: 10px; /* z-indices */ --zindexDockedElement: 101; --zindexFloatingUI: 1030; --zindexModalBackdrop: 1040; --zindexModal: 1050; --zindexOverlays: 2000; --zIndexTooltips: 10000; /* Command Palette needs to appear above popovers (which are at 10000) */ --zindexCommandPalette: 11000; /* Forms */ --inputHeightTiny: 26px; --inputHeightSmall: 32px; --inputHeightLarge: 50px; --inputFontSizeTiny: 13px; --inputFontSizeSmall: inherit; --inputFontSizeLarge: 20px; /* If applying a height to an input, don't apply vertical padding too! */ --inputVerticalPaddingTiny: 3px; --inputVerticalPaddingSmall: 4px; --inputVerticalPaddingLarge: 8px; --inputHorizontalPaddingTiny: 8px; --inputHorizontalPaddingSmall: 12px; --inputHorizontalPaddingLarge: 16px; /* 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; /* 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; --activitySectionHeight: 40px; --activityMaxWidth: 100%; --activityMaxWidthLargeScreens: 100%; --activityHeaderHeight: 72px; --appFilterBarHeight: 48px; } /* 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: 40px; /* 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 var(--borderButtonDefaultEnabled); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05); text-align: center; text-shadow: none; border-radius: var(--btnBaseRadius); background: var(--surfaceBackgroundDefault); font-size: 14px; font-weight: 400; 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: var(--bgButtonDefaultHover); color: var(--colorTextDefault); border-color: var(--borderButtonDefaultHover); } .Btn.Btn:focus-visible { box-shadow: 0 0 0 3px var(--colorButtonFocusRingDefault); outline: unset; } .Btn:active, .Btn:active:hover { 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: var(--disabledOpacity) !important; cursor: not-allowed !important; background-image: none !important; text-shadow: none !important; } /* Color variants */ /* -------------------------------------------------- */ .Btn.Btn--primary, .Btn.Btn--danger { font-weight: var(--fontWeightBold); } /* Button Primary / Danger */ .Btn--primary, .Btn--primary:focus, .Btn--primary[disabled]:hover { background-color: var(--bgButtonPrimaryEnabled); border-color: var(--borderButtonPrimary); color: var(--colorIconNeutralWhite); } .Btn--primary .Btn__icon { color: var(--colorIconNeutralWhite); } .Btn--primary:hover { color: var(--colorIconNeutralWhite); background-color: var(--bgButtonPrimaryHover); border-color: var(--borderButtonPrimary); } :is(.Btn--primary:active:not([disabled]),.Btn--primary.Btn--active), :is(.Btn--primary:active:not([disabled]),.Btn--primary.Btn--active):hover, :is(.Btn--primary:active:not([disabled]),.Btn--primary.Btn--active):focus { background-color: var(--bgButtonPrimaryPressed); } .Btn--danger, .Btn--danger:focus, .Btn--danger[disabled]:hover { background-color: var(--bgButtonDangerEnabled); border-color: var(--borderButtonDanger); color: var(--colorTextDanger); } .Btn--danger .Btn__icon { color: var(--colorTextDanger); } .Btn--danger:focus-visible { box-shadow: 0 0 0 3px var(--colorButtonFocusRingDefault); outline: unset; } .Btn--danger:hover { background-color: var(--bgButtonDangerHover); color: var(--surfaceBackgroundDefault); border-color: var(--borderButtonDanger); } .Btn--danger:active, .Btn--danger.Btn--active, .Btn--danger:active:hover, .Btn--danger.Btn--active:hover { background-color: var(--bgButtonDangerPressed); color: var(--surfaceBackgroundDefault); } .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; color: var(--colorIconDefault); top: 50%; transform: translateY(-50%); } .Btn__icon + .Btn__text { margin-left: 20px; } .Btn__icon.iconEnd { left: auto; } .Btn__icon.iconEnd + .Btn__text { margin: 0 20px 0 0; } /* double &'s to ensure specificity since these are otherwise overridden by Button.module.css styles */ /* TODO: is Button `iconColor` aligned with Design / Figma? */ .Btn__icon.Btn__icon.iconSuccess { color: var(--fillSuccess); } .Btn__icon.Btn__icon.iconDanger { color: var(--fillDanger); } .Btn__icon.Btn__icon.iconInformational { color: var(--colorIconInformational); } .Btn__icon svg { width: 16px; height: 16px; } /* Sizes */ /* -------------------------------------------------- */ .Btn--mini { line-height: 12px; font-size: 11px; padding: 3px 6px; } .Btn--mini .Btn__icon { width: 22px; height: 20px; } :is(.Btn--mini .Btn__icon) + .Btn__text { margin-left: 14px; } .iconEnd:is(.Btn--mini .Btn__icon) + .Btn__text { margin: 0 14px 0 0; } .Btn--mini .Btn__icon svg { width: 12px; height: 12px; } .Btn--small { line-height: 16px; font-size: 13px; padding: 4px 12px; } .Btn--small .Btn__icon { width: 30px; height: 24px; } :is(.Btn--small .Btn__icon) + .Btn__text { margin-left: 16px; } .iconEnd:is(.Btn--small .Btn__icon) + .Btn__text { margin: 0 16px 0 0; } .Btn--small .Btn__icon svg { width: 14px; height: 14px; } .Btn--large { line-height: 20px; font-size: 18px; padding: 9px 16px; border-radius: calc(var(--btnLargeSize) / 2); } :is(.Btn--large .Btn__icon) + .Btn__text { margin-left: 18px; } .iconEnd:is(.Btn--large .Btn__icon) + .Btn__text { margin: 0 18px 0 0; } .Btn--wide { padding: 6px 24px; } .Btn--fullWidth { display: flex; justify-content: center; width: 100%; } .Btn--fullWidth:has(.iconEnd) { flex-direction: row-reverse; } .Btn--fullWidth .Btn__icon { height: auto; position: static; width: auto; top: 0; transform: none; } :is(.Btn--fullWidth .Btn__icon:not(.iconEnd)) + .Btn__text { margin-left: var(--spacing-8); } :is(.Btn--fullWidth .Btn__icon.iconEnd) + .Btn__text { margin: 0 var(--spacing-8) 0 0; } .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); } /* 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--large { width: 40px; height: 40px; } .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: var(--colorIconDefault); 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: var(--colorTextDefault); background: rgba(0, 0, 0, 0.05); } .SidebarActionBtn.disabled { color: var(--colorIconDefault); opacity: 0.5; } .SidebarActionBtn.disabled:hover { cursor: not-allowed; } /* 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; } .Gap_root_9a2 { position: relative; display: flex; flex-grow: 0; flex-shrink: 0; } .structure_utils_pt-0_711 { padding-top: 0px; } .structure_utils_pr-0_dad { padding-right: 0px; } .structure_utils_pb-0_b79 { padding-bottom: 0px; } .structure_utils_pl-0_95e { padding-left: 0px; } .structure_utils_gap-0_4c5 { gap: 0px; } .structure_utils_width-0_ae1 { width: 0px; } .structure_utils_height-0_c3d { height: 0px; } .structure_utils_mt-0_816 { margin-top: 0px; } .structure_utils_mr-0_adf { margin-right: 0px; } .structure_utils_mb-0_61e { margin-bottom: 0px; } .structure_utils_ml-0_736 { margin-left: 0px; } .structure_utils_pt-4_9fb { padding-top: 4px; } .structure_utils_pr-4_9f0 { padding-right: 4px; } .structure_utils_pb-4_fe5 { padding-bottom: 4px; } .structure_utils_pl-4_34c { padding-left: 4px; } .structure_utils_gap-4_f16 { gap: 4px; } .structure_utils_width-4_41c { width: 4px; } .structure_utils_height-4_efa { height: 4px; } .structure_utils_mt-4_7c9 { margin-top: 4px; } .structure_utils_mr-4_706 { margin-right: 4px; } .structure_utils_mb-4_bbc { margin-bottom: 4px; } .structure_utils_ml-4_bd5 { margin-left: 4px; } .structure_utils_pt-8_484 { padding-top: 8px; } .structure_utils_pr-8_20d { padding-right: 8px; } .structure_utils_pb-8_8a3 { padding-bottom: 8px; } .structure_utils_pl-8_620 { padding-left: 8px; } .structure_utils_gap-8_c47 { gap: 8px; } .structure_utils_width-8_a6e { width: 8px; } .structure_utils_height-8_fc6 { height: 8px; } .structure_utils_mt-8_944 { margin-top: 8px; } .structure_utils_mr-8_172 { margin-right: 8px; } .structure_utils_mb-8_4a4 { margin-bottom: 8px; } .structure_utils_ml-8_453 { margin-left: 8px; } .structure_utils_pt-12_0ce { padding-top: 12px; } .structure_utils_pr-12_5b4 { padding-right: 12px; } .structure_utils_pb-12_8f6 { padding-bottom: 12px; } .structure_utils_pl-12_a8c { padding-left: 12px; } .structure_utils_gap-12_05c { gap: 12px; } .structure_utils_width-12_faa { width: 12px; } .structure_utils_height-12_76c { height: 12px; } .structure_utils_mt-12_a02 { margin-top: 12px; } .structure_utils_mr-12_641 { margin-right: 12px; } .structure_utils_mb-12_26a { margin-bottom: 12px; } .structure_utils_ml-12_99e { margin-left: 12px; } .structure_utils_pt-16_766 { padding-top: 16px; } .structure_utils_pr-16_880 { padding-right: 16px; } .structure_utils_pb-16_f49 { padding-bottom: 16px; } .structure_utils_pl-16_7b9 { padding-left: 16px; } .structure_utils_gap-16_18e { gap: 16px; } .structure_utils_width-16_dee { width: 16px; } .structure_utils_height-16_451 { height: 16px; } .structure_utils_mt-16_103 { margin-top: 16px; } .structure_utils_mr-16_741 { margin-right: 16px; } .structure_utils_mb-16_78a { margin-bottom: 16px; } .structure_utils_ml-16_756 { margin-left: 16px; } .structure_utils_pt-20_3f3 { padding-top: 20px; } .structure_utils_pr-20_6c1 { padding-right: 20px; } .structure_utils_pb-20_707 { padding-bottom: 20px; } .structure_utils_pl-20_ac1 { padding-left: 20px; } .structure_utils_gap-20_2d8 { gap: 20px; } .structure_utils_width-20_7e1 { width: 20px; } .structure_utils_height-20_bb0 { height: 20px; } .structure_utils_mt-20_a06 { margin-top: 20px; } .structure_utils_mr-20_fa0 { margin-right: 20px; } .structure_utils_mb-20_96b { margin-bottom: 20px; } .structure_utils_ml-20_2cb { margin-left: 20px; } .structure_utils_pt-24_758 { padding-top: 24px; } .structure_utils_pr-24_aff { padding-right: 24px; } .structure_utils_pb-24_7c7 { padding-bottom: 24px; } .structure_utils_pl-24_3b5 { padding-left: 24px; } .structure_utils_gap-24_7e4 { gap: 24px; } .structure_utils_width-24_049 { width: 24px; } .structure_utils_height-24_ccd { height: 24px; } .structure_utils_mt-24_b82 { margin-top: 24px; } .structure_utils_mr-24_9a7 { margin-right: 24px; } .structure_utils_mb-24_5d4 { margin-bottom: 24px; } .structure_utils_ml-24_dc6 { margin-left: 24px; } .structure_utils_pt-32_488 { padding-top: 32px; } .structure_utils_pr-32_2ec { padding-right: 32px; } .structure_utils_pb-32_8d8 { padding-bottom: 32px; } .structure_utils_pl-32_4af { padding-left: 32px; } .structure_utils_gap-32_9b3 { gap: 32px; } .structure_utils_width-32_ff5 { width: 32px; } .structure_utils_height-32_0fe { height: 32px; } .structure_utils_mt-32_b9a { margin-top: 32px; } .structure_utils_mr-32_b04 { margin-right: 32px; } .structure_utils_mb-32_849 { margin-bottom: 32px; } .structure_utils_ml-32_ca4 { margin-left: 32px; } .structure_utils_pt-40_1af { padding-top: 40px; } .structure_utils_pr-40_cc4 { padding-right: 40px; } .structure_utils_pb-40_c4a { padding-bottom: 40px; } .structure_utils_pl-40_22e { padding-left: 40px; } .structure_utils_gap-40_d56 { gap: 40px; } .structure_utils_width-40_805 { width: 40px; } .structure_utils_height-40_a40 { height: 40px; } .structure_utils_mt-40_fbb { margin-top: 40px; } .structure_utils_mr-40_ac7 { margin-right: 40px; } .structure_utils_mb-40_020 { margin-bottom: 40px; } .structure_utils_ml-40_531 { margin-left: 40px; } .structure_utils_pt-48_2d1 { padding-top: 48px; } .structure_utils_pr-48_c0c { padding-right: 48px; } .structure_utils_pb-48_447 { padding-bottom: 48px; } .structure_utils_pl-48_fe5 { padding-left: 48px; } .structure_utils_gap-48_666 { gap: 48px; } .structure_utils_width-48_f41 { width: 48px; } .structure_utils_height-48_d36 { height: 48px; } .structure_utils_mt-48_dce { margin-top: 48px; } .structure_utils_mr-48_946 { margin-right: 48px; } .structure_utils_mb-48_d2e { margin-bottom: 48px; } .structure_utils_ml-48_1bd { margin-left: 48px; } .structure_utils_pt-64_70b { padding-top: 64px; } .structure_utils_pr-64_460 { padding-right: 64px; } .structure_utils_pb-64_bcb { padding-bottom: 64px; } .structure_utils_pl-64_02e { padding-left: 64px; } .structure_utils_gap-64_92b { gap: 64px; } .structure_utils_width-64_879 { width: 64px; } .structure_utils_height-64_b70 { height: 64px; } .structure_utils_mt-64_c6a { margin-top: 64px; } .structure_utils_mr-64_c6f { margin-right: 64px; } .structure_utils_mb-64_aad { margin-bottom: 64px; } .structure_utils_ml-64_7fc { margin-left: 64px; } @media screen and (min-width: 768px) { .structure_utils_pt-0-medium-up_a9f { padding-top: 0px; } .structure_utils_pr-0-medium-up_4d7 { padding-right: 0px; } .structure_utils_pb-0-medium-up_355 { padding-bottom: 0px; } .structure_utils_pl-0-medium-up_c09 { padding-left: 0px; } .structure_utils_gap-0-medium-up_e13 { gap: 0px; } .structure_utils_width-0-medium-up_252 { width: 0px; } .structure_utils_height-0-medium-up_0e9 { height: 0px; } .structure_utils_mt-0-medium-up_14b { margin-top: 0px; } .structure_utils_mr-0-medium-up_0a7 { margin-right: 0px; } .structure_utils_mb-0-medium-up_713 { margin-bottom: 0px; } .structure_utils_ml-0-medium-up_0dd { margin-left: 0px; } } @media screen and (min-width: 768px) { .structure_utils_pt-4-medium-up_624 { padding-top: 4px; } .structure_utils_pr-4-medium-up_57b { padding-right: 4px; } .structure_utils_pb-4-medium-up_2b8 { padding-bottom: 4px; } .structure_utils_pl-4-medium-up_d0d { padding-left: 4px; } .structure_utils_gap-4-medium-up_41f { gap: 4px; } .structure_utils_width-4-medium-up_f29 { width: 4px; } .structure_utils_height-4-medium-up_7af { height: 4px; } .structure_utils_mt-4-medium-up_e9b { margin-top: 4px; } .structure_utils_mr-4-medium-up_702 { margin-right: 4px; } .structure_utils_mb-4-medium-up_ebd { margin-bottom: 4px; } .structure_utils_ml-4-medium-up_add { margin-left: 4px; } } @media screen and (min-width: 768px) { .structure_utils_pt-8-medium-up_37d { padding-top: 8px; } .structure_utils_pr-8-medium-up_9e1 { padding-right: 8px; } .structure_utils_pb-8-medium-up_b72 { padding-bottom: 8px; } .structure_utils_pl-8-medium-up_52a { padding-left: 8px; } .structure_utils_gap-8-medium-up_d60 { gap: 8px; } .structure_utils_width-8-medium-up_daf { width: 8px; } .structure_utils_height-8-medium-up_a0f { height: 8px; } .structure_utils_mt-8-medium-up_458 { margin-top: 8px; } .structure_utils_mr-8-medium-up_348 { margin-right: 8px; } .structure_utils_mb-8-medium-up_951 { margin-bottom: 8px; } .structure_utils_ml-8-medium-up_c5a { margin-left: 8px; } } @media screen and (min-width: 768px) { .structure_utils_pt-12-medium-up_188 { padding-top: 12px; } .structure_utils_pr-12-medium-up_7c3 { padding-right: 12px; } .structure_utils_pb-12-medium-up_f8b { padding-bottom: 12px; } .structure_utils_pl-12-medium-up_9aa { padding-left: 12px; } .structure_utils_gap-12-medium-up_618 { gap: 12px; } .structure_utils_width-12-medium-up_e81 { width: 12px; } .structure_utils_height-12-medium-up_7fa { height: 12px; } .structure_utils_mt-12-medium-up_31e { margin-top: 12px; } .structure_utils_mr-12-medium-up_08f { margin-right: 12px; } .structure_utils_mb-12-medium-up_0e9 { margin-bottom: 12px; } .structure_utils_ml-12-medium-up_308 { margin-left: 12px; } } @media screen and (min-width: 768px) { .structure_utils_pt-16-medium-up_03f { padding-top: 16px; } .structure_utils_pr-16-medium-up_0a1 { padding-right: 16px; } .structure_utils_pb-16-medium-up_316 { padding-bottom: 16px; } .structure_utils_pl-16-medium-up_82d { padding-left: 16px; } .structure_utils_gap-16-medium-up_d99 { gap: 16px; } .structure_utils_width-16-medium-up_f78 { width: 16px; } .structure_utils_height-16-medium-up_5a5 { height: 16px; } .structure_utils_mt-16-medium-up_3e5 { margin-top: 16px; } .structure_utils_mr-16-medium-up_49d { margin-right: 16px; } .structure_utils_mb-16-medium-up_41f { margin-bottom: 16px; } .structure_utils_ml-16-medium-up_3d7 { margin-left: 16px; } } @media screen and (min-width: 768px) { .structure_utils_pt-20-medium-up_152 { padding-top: 20px; } .structure_utils_pr-20-medium-up_1cc { padding-right: 20px; } .structure_utils_pb-20-medium-up_b06 { padding-bottom: 20px; } .structure_utils_pl-20-medium-up_289 { padding-left: 20px; } .structure_utils_gap-20-medium-up_1ed { gap: 20px; } .structure_utils_width-20-medium-up_334 { width: 20px; } .structure_utils_height-20-medium-up_e08 { height: 20px; } .structure_utils_mt-20-medium-up_fdf { margin-top: 20px; } .structure_utils_mr-20-medium-up_bf2 { margin-right: 20px; } .structure_utils_mb-20-medium-up_dbd { margin-bottom: 20px; } .structure_utils_ml-20-medium-up_a5b { margin-left: 20px; } } @media screen and (min-width: 768px) { .structure_utils_pt-24-medium-up_6a9 { padding-top: 24px; } .structure_utils_pr-24-medium-up_3e7 { padding-right: 24px; } .structure_utils_pb-24-medium-up_2c6 { padding-bottom: 24px; } .structure_utils_pl-24-medium-up_cb5 { padding-left: 24px; } .structure_utils_gap-24-medium-up_6e6 { gap: 24px; } .structure_utils_width-24-medium-up_335 { width: 24px; } .structure_utils_height-24-medium-up_14c { height: 24px; } .structure_utils_mt-24-medium-up_7a5 { margin-top: 24px; } .structure_utils_mr-24-medium-up_6dd { margin-right: 24px; } .structure_utils_mb-24-medium-up_eaa { margin-bottom: 24px; } .structure_utils_ml-24-medium-up_d4a { margin-left: 24px; } } @media screen and (min-width: 768px) { .structure_utils_pt-32-medium-up_d8d { padding-top: 32px; } .structure_utils_pr-32-medium-up_840 { padding-right: 32px; } .structure_utils_pb-32-medium-up_599 { padding-bottom: 32px; } .structure_utils_pl-32-medium-up_d12 { padding-left: 32px; } .structure_utils_gap-32-medium-up_3b0 { gap: 32px; } .structure_utils_width-32-medium-up_2c9 { width: 32px; } .structure_utils_height-32-medium-up_412 { height: 32px; } .structure_utils_mt-32-medium-up_ce5 { margin-top: 32px; } .structure_utils_mr-32-medium-up_861 { margin-right: 32px; } .structure_utils_mb-32-medium-up_049 { margin-bottom: 32px; } .structure_utils_ml-32-medium-up_fc1 { margin-left: 32px; } } @media screen and (min-width: 768px) { .structure_utils_pt-40-medium-up_e75 { padding-top: 40px; } .structure_utils_pr-40-medium-up_8b9 { padding-right: 40px; } .structure_utils_pb-40-medium-up_534 { padding-bottom: 40px; } .structure_utils_pl-40-medium-up_280 { padding-left: 40px; } .structure_utils_gap-40-medium-up_662 { gap: 40px; } .structure_utils_width-40-medium-up_97a { width: 40px; } .structure_utils_height-40-medium-up_d43 { height: 40px; } .structure_utils_mt-40-medium-up_b3a { margin-top: 40px; } .structure_utils_mr-40-medium-up_23a { margin-right: 40px; } .structure_utils_mb-40-medium-up_755 { margin-bottom: 40px; } .structure_utils_ml-40-medium-up_de5 { margin-left: 40px; } } @media screen and (min-width: 768px) { .structure_utils_pt-48-medium-up_4b1 { padding-top: 48px; } .structure_utils_pr-48-medium-up_baa { padding-right: 48px; } .structure_utils_pb-48-medium-up_646 { padding-bottom: 48px; } .structure_utils_pl-48-medium-up_450 { padding-left: 48px; } .structure_utils_gap-48-medium-up_3a5 { gap: 48px; } .structure_utils_width-48-medium-up_933 { width: 48px; } .structure_utils_height-48-medium-up_1a3 { height: 48px; } .structure_utils_mt-48-medium-up_2cd { margin-top: 48px; } .structure_utils_mr-48-medium-up_066 { margin-right: 48px; } .structure_utils_mb-48-medium-up_c3f { margin-bottom: 48px; } .structure_utils_ml-48-medium-up_ab5 { margin-left: 48px; } } @media screen and (min-width: 768px) { .structure_utils_pt-64-medium-up_b3c { padding-top: 64px; } .structure_utils_pr-64-medium-up_12d { padding-right: 64px; } .structure_utils_pb-64-medium-up_25d { padding-bottom: 64px; } .structure_utils_pl-64-medium-up_a62 { padding-left: 64px; } .structure_utils_gap-64-medium-up_7fe { gap: 64px; } .structure_utils_width-64-medium-up_81d { width: 64px; } .structure_utils_height-64-medium-up_d01 { height: 64px; } .structure_utils_mt-64-medium-up_407 { margin-top: 64px; } .structure_utils_mr-64-medium-up_071 { margin-right: 64px; } .structure_utils_mb-64-medium-up_7d8 { margin-bottom: 64px; } .structure_utils_ml-64-medium-up_6e8 { margin-left: 64px; } } @media screen and (min-width: 1120px) { .structure_utils_pt-0-large-up_f85 { padding-top: 0px; } .structure_utils_pr-0-large-up_877 { padding-right: 0px; } .structure_utils_pb-0-large-up_fc0 { padding-bottom: 0px; } .structure_utils_pl-0-large-up_12f { padding-left: 0px; } .structure_utils_gap-0-large-up_a26 { gap: 0px; } .structure_utils_width-0-large-up_676 { width: 0px; } .structure_utils_height-0-large-up_548 { height: 0px; } .structure_utils_mt-0-large-up_429 { margin-top: 0px; } .structure_utils_mr-0-large-up_297 { margin-right: 0px; } .structure_utils_mb-0-large-up_976 { margin-bottom: 0px; } .structure_utils_ml-0-large-up_2df { margin-left: 0px; } } @media screen and (min-width: 1120px) { .structure_utils_pt-4-large-up_d88 { padding-top: 4px; } .structure_utils_pr-4-large-up_fe4 { padding-right: 4px; } .structure_utils_pb-4-large-up_071 { padding-bottom: 4px; } .structure_utils_pl-4-large-up_b50 { padding-left: 4px; } .structure_utils_gap-4-large-up_499 { gap: 4px; } .structure_utils_width-4-large-up_ce5 { width: 4px; } .structure_utils_height-4-large-up_4bc { height: 4px; } .structure_utils_mt-4-large-up_804 { margin-top: 4px; } .structure_utils_mr-4-large-up_5fc { margin-right: 4px; } .structure_utils_mb-4-large-up_7b9 { margin-bottom: 4px; } .structure_utils_ml-4-large-up_e7b { margin-left: 4px; } } @media screen and (min-width: 1120px) { .structure_utils_pt-8-large-up_ed7 { padding-top: 8px; } .structure_utils_pr-8-large-up_3ef { padding-right: 8px; } .structure_utils_pb-8-large-up_203 { padding-bottom: 8px; } .structure_utils_pl-8-large-up_a22 { padding-left: 8px; } .structure_utils_gap-8-large-up_ea8 { gap: 8px; } .structure_utils_width-8-large-up_1fa { width: 8px; } .structure_utils_height-8-large-up_5df { height: 8px; } .structure_utils_mt-8-large-up_06f { margin-top: 8px; } .structure_utils_mr-8-large-up_e76 { margin-right: 8px; } .structure_utils_mb-8-large-up_86b { margin-bottom: 8px; } .structure_utils_ml-8-large-up_80a { margin-left: 8px; } } @media screen and (min-width: 1120px) { .structure_utils_pt-12-large-up_fc4 { padding-top: 12px; } .structure_utils_pr-12-large-up_488 { padding-right: 12px; } .structure_utils_pb-12-large-up_837 { padding-bottom: 12px; } .structure_utils_pl-12-large-up_515 { padding-left: 12px; } .structure_utils_gap-12-large-up_ae6 { gap: 12px; } .structure_utils_width-12-large-up_524 { width: 12px; } .structure_utils_height-12-large-up_70f { height: 12px; } .structure_utils_mt-12-large-up_687 { margin-top: 12px; } .structure_utils_mr-12-large-up_f53 { margin-right: 12px; } .structure_utils_mb-12-large-up_9ec { margin-bottom: 12px; } .structure_utils_ml-12-large-up_047 { margin-left: 12px; } } @media screen and (min-width: 1120px) { .structure_utils_pt-16-large-up_85c { padding-top: 16px; } .structure_utils_pr-16-large-up_833 { padding-right: 16px; } .structure_utils_pb-16-large-up_239 { padding-bottom: 16px; } .structure_utils_pl-16-large-up_45b { padding-left: 16px; } .structure_utils_gap-16-large-up_cff { gap: 16px; } .structure_utils_width-16-large-up_566 { width: 16px; } .structure_utils_height-16-large-up_dd5 { height: 16px; } .structure_utils_mt-16-large-up_862 { margin-top: 16px; } .structure_utils_mr-16-large-up_c65 { margin-right: 16px; } .structure_utils_mb-16-large-up_1ad { margin-bottom: 16px; } .structure_utils_ml-16-large-up_722 { margin-left: 16px; } } @media screen and (min-width: 1120px) { .structure_utils_pt-20-large-up_330 { padding-top: 20px; } .structure_utils_pr-20-large-up_9ea { padding-right: 20px; } .structure_utils_pb-20-large-up_9d9 { padding-bottom: 20px; } .structure_utils_pl-20-large-up_ff0 { padding-left: 20px; } .structure_utils_gap-20-large-up_8bf { gap: 20px; } .structure_utils_width-20-large-up_ae0 { width: 20px; } .structure_utils_height-20-large-up_f2a { height: 20px; } .structure_utils_mt-20-large-up_750 { margin-top: 20px; } .structure_utils_mr-20-large-up_997 { margin-right: 20px; } .structure_utils_mb-20-large-up_c6d { margin-bottom: 20px; } .structure_utils_ml-20-large-up_965 { margin-left: 20px; } } @media screen and (min-width: 1120px) { .structure_utils_pt-24-large-up_7d1 { padding-top: 24px; } .structure_utils_pr-24-large-up_114 { padding-right: 24px; } .structure_utils_pb-24-large-up_60b { padding-bottom: 24px; } .structure_utils_pl-24-large-up_e28 { padding-left: 24px; } .structure_utils_gap-24-large-up_db9 { gap: 24px; } .structure_utils_width-24-large-up_e25 { width: 24px; } .structure_utils_height-24-large-up_016 { height: 24px; } .structure_utils_mt-24-large-up_148 { margin-top: 24px; } .structure_utils_mr-24-large-up_82c { margin-right: 24px; } .structure_utils_mb-24-large-up_905 { margin-bottom: 24px; } .structure_utils_ml-24-large-up_b42 { margin-left: 24px; } } @media screen and (min-width: 1120px) { .structure_utils_pt-32-large-up_2a4 { padding-top: 32px; } .structure_utils_pr-32-large-up_ead { padding-right: 32px; } .structure_utils_pb-32-large-up_109 { padding-bottom: 32px; } .structure_utils_pl-32-large-up_36b { padding-left: 32px; } .structure_utils_gap-32-large-up_ecc { gap: 32px; } .structure_utils_width-32-large-up_37a { width: 32px; } .structure_utils_height-32-large-up_a6c { height: 32px; } .structure_utils_mt-32-large-up_266 { margin-top: 32px; } .structure_utils_mr-32-large-up_74a { margin-right: 32px; } .structure_utils_mb-32-large-up_034 { margin-bottom: 32px; } .structure_utils_ml-32-large-up_ffc { margin-left: 32px; } } @media screen and (min-width: 1120px) { .structure_utils_pt-40-large-up_2f9 { padding-top: 40px; } .structure_utils_pr-40-large-up_232 { padding-right: 40px; } .structure_utils_pb-40-large-up_163 { padding-bottom: 40px; } .structure_utils_pl-40-large-up_9f6 { padding-left: 40px; } .structure_utils_gap-40-large-up_64c { gap: 40px; } .structure_utils_width-40-large-up_adf { width: 40px; } .structure_utils_height-40-large-up_432 { height: 40px; } .structure_utils_mt-40-large-up_3fa { margin-top: 40px; } .structure_utils_mr-40-large-up_6db { margin-right: 40px; } .structure_utils_mb-40-large-up_850 { margin-bottom: 40px; } .structure_utils_ml-40-large-up_277 { margin-left: 40px; } } @media screen and (min-width: 1120px) { .structure_utils_pt-48-large-up_231 { padding-top: 48px; } .structure_utils_pr-48-large-up_ab4 { padding-right: 48px; } .structure_utils_pb-48-large-up_75b { padding-bottom: 48px; } .structure_utils_pl-48-large-up_abb { padding-left: 48px; } .structure_utils_gap-48-large-up_c99 { gap: 48px; } .structure_utils_width-48-large-up_6a6 { width: 48px; } .structure_utils_height-48-large-up_fd3 { height: 48px; } .structure_utils_mt-48-large-up_37e { margin-top: 48px; } .structure_utils_mr-48-large-up_9ab { margin-right: 48px; } .structure_utils_mb-48-large-up_ed4 { margin-bottom: 48px; } .structure_utils_ml-48-large-up_6e7 { margin-left: 48px; } } @media screen and (min-width: 1120px) { .structure_utils_pt-64-large-up_dcd { padding-top: 64px; } .structure_utils_pr-64-large-up_1eb { padding-right: 64px; } .structure_utils_pb-64-large-up_102 { padding-bottom: 64px; } .structure_utils_pl-64-large-up_e58 { padding-left: 64px; } .structure_utils_gap-64-large-up_367 { gap: 64px; } .structure_utils_width-64-large-up_132 { width: 64px; } .structure_utils_height-64-large-up_bae { height: 64px; } .structure_utils_mt-64-large-up_526 { margin-top: 64px; } .structure_utils_mr-64-large-up_f18 { margin-right: 64px; } .structure_utils_mb-64-large-up_bbf { margin-bottom: 64px; } .structure_utils_ml-64-large-up_a5f { margin-left: 64px; } } .structure_utils_root_fd0 { position: relative; display: flex; /* Set basis and min-width* to zero so that all Flex rows will expand to */ /* equal sizes within their containers. Don't set min-height: 0, as it can */ /* cause layouts to collapse into a 1px tall box. */ /* min-width is not set to zero when flex-grow is 0 to prevent the Flex */ /* from not respecting the content min width and overflowing when used along another element with grow={true} */ flex: 0 1 0; } .structure_utils_flexGrow_cfb { flex-grow: 1; min-width: 0; } .structure_utils_align-center_41f { align-items: center; } .structure_utils_align-start_bdc { align-items: flex-start; } .structure_utils_align-end_5e2 { align-items: flex-end; } .structure_utils_justify-center_44f { justify-content: center; } .structure_utils_justify-end_360 { justify-content: flex-end; } .structure_utils_justify-space-around_f41 { justify-content: space-around; } .structure_utils_justify-space-between_b21 { justify-content: space-between; } .structure_utils_justify-space-evenly_330 { justify-content: space-evenly; } .structure_utils_justify-start_22e { justify-content: flex-start; } .structure_utils_direction-row-row-col_5e3 { flex-direction: row; } @media screen and (min-width: 1120px) { .structure_utils_direction-row-row-col_5e3 { flex-direction: column; } } .structure_utils_direction-row-col_cd7 { flex-direction: row; } @media screen and (min-width: 768px) { .structure_utils_direction-row-col_cd7 { flex-direction: column; } } .structure_utils_direction-col-col-row_ce9 { flex-direction: column; } @media screen and (min-width: 1120px) { .structure_utils_direction-col-col-row_ce9 { flex-direction: row; } } .structure_utils_direction-col-row_1de { flex-direction: column; } @media screen and (min-width: 768px) { .structure_utils_direction-col-row_1de { flex-direction: row; } } .structure_utils_direction-col_76c { flex-direction: column; } .structure_utils_direction-row_91b { flex-direction: row; } .structure_utils_wrap-true_f54 { flex-wrap: wrap; } @media screen and (max-width: 767px) { .structure_utils_wrap-when-small_2b4 { flex-wrap: wrap; } } @media screen and (min-width: 768px) { .structure_utils_when-small_cf7 { display: none; } } @media screen and (max-width: 767px) { .structure_utils_when-medium-up_f7c { display: none; } } @media screen and (max-width: 1119px) { .structure_utils_when-large-up_9b4 { display: none; } } .Divider_default_220 { --dividerColor: var(--borderDefault); } .Divider_light_b1c { --dividerColor: var(--borderLight); } .Divider_none_565 { --dividerColor: transparent; } .Divider_horizontal_f4a { border-top: 1px solid var(--dividerColor, --borderDefault); } .Divider_horizontal_f4a.Divider_dashed_a0c { border-top-style: dashed; } .Divider_vertical_d08 { border-left: 1px solid var(--dividerColor, --borderDefault); /* Add a small gap above and below vertical dividers. */ margin-bottom: var(--spacing-4); margin-top: var(--spacing-4); } @media screen and (max-width: 767px) { .Divider_horizontal-vertical_21b { border-top: 1px solid var(--dividerColor, --borderDefault); } .Divider_horizontal-vertical_21b.Divider_dashed_a0c { border-top-style: dashed; } } @media screen and (min-width: 768px) { .Divider_horizontal-vertical_21b { border-left: 1px solid var(--dividerColor, --borderDefault); /* Add a small gap above and below vertical dividers. */ margin-bottom: var(--spacing-4); margin-top: var(--spacing-4); } } @media screen and (max-width: 767px) { .Divider_vertical-horizontal_9e4 { border-left: 1px solid var(--dividerColor, --borderDefault); /* Add a small gap above and below vertical dividers. */ margin-bottom: var(--spacing-4); margin-top: var(--spacing-4); } } @media screen and (min-width: 768px) { .Divider_vertical-horizontal_9e4 { border-top: 1px solid var(--dividerColor, --borderDefault); } .Divider_vertical-horizontal_9e4.Divider_dashed_a0c { border-top-style: dashed; } } .Split_first_7c9, .Split_second_7c1 { display: flex; flex: 1 1 0; min-width: 0; } .KeyboardShortcut_KeyboardShortcut_key_97e { background-color: var(--bgDefault); border-radius: var(--baseBorderRadius); color: var(--colorTextDefault); font-size: var(--fontSizeTiny); font-weight: var(--fontWeightBold); line-height: 12px; padding: var(--spacing-4); text-transform: uppercase; } .KeyboardShortcut_KeyboardShortcut_dark_d4f { background-color: var(--colorBgTooltipKey); color: var(--colorTextNeutralWhite); } .Tooltip_tooltip_a57 { width: max-content; word-wrap: break-word; opacity: 0.95; z-index: var(--zIndexTooltips); } .Tooltip_tooltip_a57[data-placement^='bottom'] .Tooltip_arrow_622 { top: -2px; } .Tooltip_tooltip_a57[data-placement^='top'] .Tooltip_arrow_622 { bottom: -2px; } .Tooltip_tooltip_a57[data-placement^='left'] .Tooltip_arrow_622 { right: -2px; } .Tooltip_tooltip_a57[data-placement^='right'] .Tooltip_arrow_622 { left: -2px; } .Tooltip_tooltip_a57[data-reference-hidden='true'] { visibility: hidden; } .Tooltip_content_810 { font-size: 11px; line-height: 1.5; padding: 7px; border-radius: 3px; color: var(--colorTextNeutralWhite); background: var(--colorBgTooltip); text-align: center; max-width: 100%; display: flex; flex-direction: column; text-wrap: balance; } .Tooltip_content_810 a { color: inherit; } .Tooltip_arrow_622 { fill: var(--colorBgTooltip); } .Tooltip_TruncateText_truncated_51b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* so dots have correct color */ color: currentColor; } @layer atom { .Badge_outer_d44 { display: inline-flex; justify-content: center; align-items: center; box-sizing: border-box; border-radius: 50px; line-height: 12px; max-width: 100%; min-height: 20px; } .Badge_outer_d44 * { box-sizing: border-box; } .Badge_outer_d44.Badge_noShrink_e77 { flex-shrink: 0; } .Badge_root_153 { --bgColor: var(--bgDefault); --color: var(--colorTextDefault); --borderColor: var(--bgColor); } .Badge_badge_eae { font-size: 11px; text-transform: uppercase; letter-spacing: 0.25px; font-weight: var(--fontWeightBold); color: var(--colorTextDefault); /* We don't want any default text-shadows to be set on the Badge. Remove any shadow set by eg. Message component */ text-shadow: none; } .Badge_badge_eae .Badge_inner_7ae { min-width: 20px; } .Badge_inner_7ae { border: 1px solid var(--borderColor); background-color: var(--bgColor); color: var(--color); border-radius: 50px; } .Badge_inner_7ae.Badge_hasPrefix_dbf { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: none; } .Badge_icon_bab { margin-right: 4px; display: inline-block; height: 12px; } .Badge_icon_bab svg { width: 12px; height: 12px; vertical-align: bottom; } .Badge_padded_ad5 { padding: 3px 7px; } .Badge_small_93e { font-size: 10px; min-width: 16px; line-height: 10px; min-height: 16px; } .Badge_small_93e .Badge_inner_7ae { min-height: 16px; min-width: 16px; } .Badge_small_93e .Badge_padded_ad5 { padding: 2px 4px; } .Badge_small_93e .Badge_icon_bab { margin-right: 5px; height: 10px; } .Badge_small_93e .Badge_icon_bab svg { width: 10px; height: 10px; } .Badge_isCircle_3b7 { text-align: center; } .Badge_isCircle_3b7 .Badge_padded_ad5 { padding: 3px 1px; } .Badge_isCircle_3b7.Badge_small_93e .Badge_padded_ad5 { padding: 2px; } .Badge_isCircle_3b7 .Badge_icon_bab { margin: 0; } .Badge_default_89d { --bgColor: var(--borderDefault); /* only default & inverted style supports an outline atm */ } .Badge_default_89d.Badge_outlined_e1a { --bgColor: var(--bgLight); --borderColor: var(--borderDefault); } .Badge_inner_7ae, .Badge_prefix_ae7 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 50%; max-width: max-content; } .Badge_prefix_ae7 { color: var(--colorTextDefault); background-color: var(--surfaceBackgroundDefault); border-top-left-radius: 50px; border-bottom-left-radius: 50px; border: 1px solid var(--borderDefault); border-right: 0; } .Badge_default_89d { --bgColor: var(--bgDefault); } .Badge_info_fad, .Badge_danger_de0 { --color: var(--colorTextNeutralWhite); } .Badge_info_fad { --bgColor: var(--bgInformational); } .Badge_info_fad.Badge_outlined_e1a { --borderColor: var(--surfaceBackgroundDefault); } .Badge_warning_bff { --bgColor: var(--bgWarn); --color: var(--colorTextNeutralBlack); } .Badge_warningLight_61e { --bgColor: var(--bgWarn); --color: var(--colorTextNeutralInvert); } .Badge_danger_de0 { --bgColor: var(--bgDanger); } .Badge_success_853 { --bgColor: var(--bgSuccess); --color: var(--colorTextNeutralBlack); } .Badge_successLight_12a { --bgColor: var(--bgSuccess); --color: var(--colorTextNeutralInvert); } .Badge_defaultMuted_385 { --bgColor: var(--bgDefaultMuted); } .Badge_infoMuted_ef6 { --bgColor: var(--bgInformationalMuted); --color: var(--colorTextInformational); } .Badge_warningMuted_665 { --bgColor: var(--bgWarnMuted); --color: var(--colorTextWarn); } .Badge_dangerMuted_99f { --bgColor: var(--bgDangerMuted); --color: var(--colorTextDanger); } .Badge_successMuted_a5c { --bgColor: var(--bgSuccessMuted); --color: var(--colorTextSuccess); } .Badge_active_dd0 { --bgColor: var(--bgActive); --color: var(--colorTextNeutralWhite); } .Badge_activeMuted_b22 { --bgColor: var(--bgActiveMuted); --color: var(--colorLinkDefault); } .Badge_inverted_896 { --bgColor: var(--bgLight); } .Badge_inverted_896.Badge_outlined_e1a { --borderColor: var(--borderDefault); } .Badge_task_33b { --bgColor: var(--colorBgBadgeTask); --color: var(--colorTextNeutralWhite); } .Badge_meeting_e69 { --bgColor: var(--colorBgBadgeMeeting); --color: var(--colorTextNeutralWhite); } .Badge_active-opportunity_6f7 { --bgColor: var(--bgWarn); --color: var(--colorTextNeutralBlack); } .Badge_won-opportunity_41f { --bgColor: var(--bgSuccess); --color: var(--colorTextNeutralBlack); } .Badge_lost-opportunity_9f5 { --bgColor: var(--bgDefault); } } .Icon_icon_416 * { fill: inherit; } .Icon_BaseIcon_root_b54 { display: inline-block; fill: currentColor; flex: none; transition-property: fill; transition-timing-function: var(--easeInOutQuad); transition-duration: 100ms; } .Icon_BaseIcon_root_b54 > svg { display: block; height: inherit; width: inherit; } .Icon_BaseIcon_block_262 { display: block; } .Icon_BaseIcon_noPointerEvents_939 { pointer-events: none; } .Modal_backdrop_377 { position: fixed; display: flex; flex-direction: column; align-items: center; top: 0; right: 0; bottom: 0; left: 0; z-index: var(--zindexModalBackdrop); background-color: rgba(0, 0, 0, 0); transition: background-color 200ms; /* duration must match closeTimeoutMS prop */ } .Modal_backdropAfterOpen_af5 { background-color: rgba(0, 0, 0, 0.8); transition-timing-function: ease-out; } .Modal_backdropBeforeClose_6d6 { background-color: rgba(0, 0, 0, 0); transition-timing-function: ease-in; } .Modal_body_6cc { position: relative; overflow-y: auto; } .Modal_body_6cc.Modal_globalPadding_244 { padding: var(--modalBodyPadding); } /* If there is no modal footer, match a border radius so overflown content doesn't cause sharp corners */ .Modal_body_6cc:last-child { border-bottom-left-radius: var(--modalBorderRadius); border-bottom-right-radius: var(--modalBorderRadius); } .Modal_bodyContainer_5de { opacity: 0; scale: 0.95; transition: scale 200ms, opacity 200ms; /* duration must match closeTimeoutMS prop */ } .Modal_bodyContainerAfterOpen_ea1 { opacity: 1; scale: 1; transition-timing-function: ease-out; } .Modal_bodyContainerBeforeClose_845 { opacity: 0; scale: 0.95; transition-timing-function: ease-in; } .Modal_modal_1e0 { position: relative; display: flex; flex-direction: column; z-index: var(--zindexModal); width: 560px; max-height: 80vh; margin-top: 10vh; background-color: var(--bgModalContent); border: 1px solid rgba(0, 0, 0, 0.3); 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; /* smaller screen height: give more vertical space */ } @media (max-height: 600px) { .Modal_modal_1e0 { margin-top: var(--spacing-32); max-height: calc(100vh - (var(--spacing-32) * 2)); } } /* mobile: size12 around whole modal */ @media (max-width: 600px) { .Modal_modal_1e0 { width: calc(100vw - (var(--spacing-12) * 2)); margin-top: var(--spacing-12); max-height: calc(100vh - (var(--spacing-12) * 2)); } } @keyframes Loader_LoaderSvg_svgLoader_30e { 0% { opacity: 1; } 42% { opacity: 0.3; } 100% { opacity: 0.3; } } /* A negative animation-delay causes the animation to begin immediately, but partway through its cycle, this prevents loader bars staying on their start frame (opacity 1) when the loader first appears: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay */ .Loader_LoaderSvg_svg_15a path { animation: Loader_LoaderSvg_svgLoader_30e 1200ms infinite linear; } .Loader_LoaderSvg_svg_15a path:nth-child(1) { animation-delay: -1100ms; } .Loader_LoaderSvg_svg_15a path:nth-child(2) { animation-delay: -1000ms; } .Loader_LoaderSvg_svg_15a path:nth-child(3) { animation-delay: -900ms; } .Loader_LoaderSvg_svg_15a path:nth-child(4) { animation-delay: -800ms; } .Loader_LoaderSvg_svg_15a path:nth-child(5) { animation-delay: -700ms; } .Loader_LoaderSvg_svg_15a path:nth-child(6) { animation-delay: -600ms; } .Loader_LoaderSvg_svg_15a path:nth-child(7) { animation-delay: -500ms; } .Loader_LoaderSvg_svg_15a path:nth-child(8) { animation-delay: -400ms; } .Loader_LoaderSvg_svg_15a path:nth-child(9) { animation-delay: -300ms; } .Loader_LoaderSvg_svg_15a path:nth-child(10) { animation-delay: -200ms; } .Loader_LoaderSvg_svg_15a path:nth-child(11) { animation-delay: -100ms; } /* * Styles that are common to all buttons * https://www.figma.com/design/eflpAcOSTsb5Gbm0eizgJzSf/%F0%9F%A7%B1-Components?node-id=2234-71 */ .Button_Button_base_cfa { --bgDefaultMutedHover: color-mix(in srgb, var(--bgDefaultMuted) 95%, #000000); --bgInformationalMutedHover: color-mix( in srgb, var(--bgInformationalMuted) 95%, #000000 ); --bgWarnMutedHover: color-mix(in srgb, var(--bgWarnMuted) 95%, #000000); --bgSuccessMutedHover: color-mix(in srgb, var(--bgSuccessMuted) 95%, #000000); --bgDangerMutedHover: color-mix( in srgb, var(--borderButtonDanger) 95%, #000000 ); --buttonIconColor: inherit; border-radius: 32px; /* Let us avoid styling borders to match background, if the background changes (hover, active) */ background-clip: border-box; /* Override .Btn properties that we control here */ border: 1px solid transparent; box-shadow: none; } .Button_Button_base_cfa:hover { color: var(--buttonHoverTextColor); border-color: var(--buttonHoverBorderColor, transparent); background-color: var(--buttonHoverBackgroundColor); } .Button_Button_base_cfa:active:not([disabled]), .Button_Button_base_cfa:active:not([disabled]):hover, .Button_Button_base_cfa:active:not([disabled]):focus { background-color: var(--buttonActiveBackgroundColor); } .Button_Button_base_cfa .Button_Button_icon_1ec { color: var(--buttonIconColor); } /* Priority styles */ .Button_Button_priorityPrimary_596 { font-weight: 600; } .Button_Button_priorityTertiary_74d { font-weight: 400; } .Button_Button_themeDestructive_1ed { font-weight: 500; } /** Compound */ .Button_Button_themeDefaultPriorityPrimary_426 { color: var(--colorTextNeutralWhite); background-color: var(--bgButtonPrimaryEnabled); --buttonIconColor: var(--colorTextNeutralWhite); --buttonHoverTextColor: var(--colorIconNeutralWhite); --buttonHoverBackgroundColor: var(--bgButtonPrimaryHover); --buttonActiveBackgroundColor: var(--bgButtonPrimaryPressed); /* default/primary buttons don't have a border so we need to add a separator for button groups */ /* TODO: revisit once global BtnGroup CSS has been module-ified */ } .BtnGroup .Button_Button_themeDefaultPriorityPrimary_426:not(:first-child) { border-left-color: var(--surfaceBackgroundDefault); } .BtnGroup .Button_Button_themeDefaultPriorityPrimary_426:not(:last-child) { border-right-color: var(--surfaceBackgroundDefault); } .Button_Button_themeDefaultPrioritySecondary_208 { color: var(--colorTextDefault); background-color: var(--surfaceBackgroundDefault); border-color: var(--borderDefault); --buttonHoverTextColor: var(--colorTextDefault); --buttonHoverBorderColor: var(--borderDefault); --buttonHoverBackgroundColor: var(--bgDefaultMuted); --buttonActiveBackgroundColor: var(--bgButtonDefaultPressed); /** This secondary/tertiary buttons have a different icon color. */ --buttonIconColor: var(--colorIconDefault); } .Button_Button_themeDefaultPriorityTertiary_b61 { color: var(--colorTextDefault); background-color: var(--bgButtonBorderlessEnabled); --buttonHoverTextColor: var(--colorTextDefault); --buttonHoverBackgroundColor: var(--bgButtonBorderlessHover); --buttonActiveBackgroundColor: var(--bgButtonBorderlessPressed); /** This secondary/tertiary buttons have a different icon color. */ --buttonIconColor: var(--colorIconDefault); /** NOTE: disabled+hover styles are difficult while we support the older themes Once https://github.com/closeio/close-ui/issues/16814 we can add a blanket :hover:not([disabled]) styles in one place. */ } .Button_Button_themeDefaultPriorityTertiary_b61:disabled:hover { background-color: var(--bgButtonBorderlessEnabled); } .Button_Button_themeDestructivePriorityPrimary_cde { color: var(--colorTextNeutralWhite); background-color: var(--bgDanger); border-color: var(--borderButtonDanger); --buttonHoverTextColor: var(--colorIconNeutralWhite); --buttonHoverBackgroundColor: var(--bgButtonDangerHover); --buttonActiveBackgroundColor: var(--bgButtonDangerPressed); } .Button_Button_themeDestructivePrioritySecondary_6cc { color: var(--colorTextDanger); background-color: var(--surfaceBackgroundDefault); border-color: var(--borderDefault); --buttonHoverBorderColor: var(--borderDefault); --buttonHoverBackgroundColor: var(--bgButtonDefaultHover); --buttonHoverTextColor: var(--colorTextDanger); } .Button_Button_themeDestructivePriorityTertiary_32a { color: var(--colorTextDanger); background-color: var(--bgButtonBorderlessEnabled); --buttonHoverBackgroundColor: var(--bgButtonBorderlessHover); --buttonHoverTextColor: var(--colorTextDanger); } .Button_Button_themeContrastPriorityPrimary_097 { color: var(--colorTextDanger); background-color: var(--colorTextNeutralWhite); --buttonHoverTextColor: var(--colorTextDanger); } .Button_Button_themeContrastPrioritySecondary_424 { color: var(--colorTextNeutralWhite); background-color: var(--bgDanger); --buttonHoverTextColor: var(--colorTextNeutralWhite); --buttonHoverBackgroundColor: var(--bgButtonDangerHover); --buttonActiveBackgroundColor: var(--bgButtonDangerHover); } .Button_Button_themeMutedPriorityTertiary_b9c { color: var(--colorTextMedium); background-color: var(--bgDefaultMuted); font-weight: 500; --buttonHoverTextColor: var(--colorTextMedium); --buttonHoverBackgroundColor: var(--bgDefaultMutedHover); --buttonActiveBackgroundColor: var(--bgDefaultMutedHover); } .Button_Button_themeInformationalPriorityTertiary_f49 { color: var(--colorTextInformational); background-color: var(--bgInformationalMuted); --buttonHoverTextColor: var(--colorTextInformational); --buttonHoverBackgroundColor: var(--bgInformationalMutedHover); --buttonActiveBackgroundColor: var(--bgInformationalMutedHover); } .Button_Button_themeWarnPriorityTertiary_ccf { color: var(--colorTextWarn); background-color: var(--bgWarnMuted); --buttonHoverTextColor: var(--colorTextWarn); --buttonHoverBackgroundColor: var(--bgWarnMutedHover); --buttonActiveBackgroundColor: var(--bgWarnMutedHover); } .Button_Button_themeSuccessPriorityTertiary_124 { color: var(--colorTextSuccess); background-color: var(--bgSuccessMuted); --buttonHoverTextColor: var(--colorTextSuccess); --buttonHoverBackgroundColor: var(--bgSuccessMutedHover); --buttonActiveBackgroundColor: var(--bgSuccessMutedHover); } /** * There's a lot of interesting CSS stuff going on in here to get the effect * of both the border having a gradient, and having a border radius. * * For the border gradient with radius, which is not directly supported, I was * inspired by https://dev.to/afif/border-with-gradient-and-radius-387f */ .Button_Button_themeGradientPrimary_68a { --gradient: linear-gradient(to right, #2e99de, #dd0f21); --buttonHoverBackgroundColor: var(--bgDefaultMuted); --buttonActiveBackgroundColor: var(--bgDefault); font-weight: 400; /* Allow the ::before pseudo-element to position itself absolutely. */ position: relative; background-color: transparent; } .Button_Button_themeGradientPrimary_68a::before { content: ''; /* Completely fill the area the actual component fills. */ position: absolute; inset: 0; /* A bit of negative margin to push the border out to where it would be * if it were a real border. */ margin: -1px; /* Match the border radius of button */ border-radius: 32px; /* A bit of padding so the background can show. */ padding: 1px; /* The background is exposed a bit on the edges to simulate a border. */ background: var(--gradient); /* Mask away the inner part of the button so the background doesn't show. */ -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } /* needs specificity to override UnstyledButton */ button.Button_LinkButton_linkButton_9c6 { /* for the outline */ border-radius: 2px; text-underline-offset: 3px; white-space: nowrap; } button.Button_LinkButton_linkButton_9c6.Button_LinkButton_inline_a18 { color: var(--colorLinkDefault); } button.Button_LinkButton_linkButton_9c6.Button_LinkButton_inline_a18:hover:not([disabled]) { -webkit-text-decoration: underline; text-decoration: underline; color: var(--colorLinkHover); } button.Button_LinkButton_linkButton_9c6.Button_LinkButton_secondary_0d0 { color: var(--colorTextLight); } button.Button_LinkButton_linkButton_9c6.Button_LinkButton_secondary_0d0:hover:not([disabled]) { color: var(--colorLinkHover); -webkit-text-decoration: underline; text-decoration: underline; } button.Button_LinkButton_linkButton_9c6.Button_LinkButton_contrast_d07 { color: var(--colorTextDefault); -webkit-text-decoration: underline; text-decoration: underline; } button.Button_LinkButton_linkButton_9c6.Button_LinkButton_contrast_d07:hover:not([disabled]) { color: var(--colorLinkHover); } button.Button_LinkButton_linkButton_9c6[disabled] { cursor: not-allowed; } button.Button_LinkButton_linkButton_9c6.Button_LinkButton_small_eb4 { font-size: var(--fontSizeSmall); } button.Button_LinkButton_linkButton_9c6.Button_LinkButton_smallest_2a0 { font-size: var(--fontSizeTiny); } button.Button_LinkButton_linkButton_9c6:focus { outline-color: var(--borderFocused); } @layer atom { .Button_UnstyledButton_button_308 { font: inherit; margin: 0; line-height: normal; vertical-align: inherit; border: none; padding: 0; width: auto; overflow: visible; background: transparent; text-align: inherit; color: inherit; /* Corrects font smoothing for webkit */ -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; /* Corrects inability to style clickable `input` types in iOS */ -webkit-appearance: none; } } .modules_utils_visuallyHidden_455 { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; opacity: 0; } .Loader_fullscreen_a5d { display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 3; /* above lead page stuff and below search input */ } .Loader_svgLoader_6af { width: 16px; height: 16px; display: inline-block; margin-right: 2px; vertical-align: -3px; } .subcomponents_footerComponents_footer_412 { padding: 14px 15px 15px; margin-bottom: 0; background-color: var(--bgModalFooter); border-radius: 0 0 var(--modalBorderRadius) var(--modalBorderRadius); border-top: 1px solid var(--borderDefault); display: flex; text-align: left; align-items: center; } @media screen and (max-width: 767px) { .subcomponents_footerComponents_footer_412 { flex-direction: column; align-items: stretch; padding-bottom: 0; } } .subcomponents_footerComponents_subActions_d3a { display: flex; align-items: center; gap: var(--spacing-4); } @media screen and (max-width: 767px) { .subcomponents_footerComponents_subActions_d3a { order: 2; border-top: 1px solid var(--borderDefault); justify-content: center; padding: var(--spacing-16) 0; } } .subcomponents_footerComponents_actions_e1c { display: flex; gap: var(--spacing-4); margin-left: auto; } @media screen and (max-width: 767px) { .subcomponents_footerComponents_actions_e1c { order: 1; padding: 0 0 var(--spacing-16) 0; } } .subcomponents_footerComponents_actionsLoader_b26 { display: inline-block; margin-right: 10px; } .subcomponents_footerComponents_disabledButton_69f { /* We need this so that a tooltip works properly over a disabled button. Workaround for https://github.com/facebook/react/issues/4251 */ pointer-events: none; } @layer atom { .IconSVG { line-height: 0; vertical-align: middle; } .IconSVG--inlineBlock { display: inline-block; vertical-align: text-bottom; } .IconSVG--tiny svg { width: 8px; } .IconSVG--mini svg { width: 12px; } .IconSVG--small svg { width: 14px; } .IconSVG--regular svg { width: 16px; } .IconSVG--large svg { width: 20px; } .IconSVG--fluid svg { width: 100%; } } .HintIcon_hintIcon_680 { margin: 0 var(--spacing-4); align-self: center; color: var(--colorIconDefault); }.HintIcon_hintIcon_680.HintIcon_light_4e9 { color: var(--colorIconLight); }.HintIcon_hintIcon_680.HintIcon_error_789 { color: var(--colorTextDanger); } /* Colors */ .Typography_defaultColor_913 { color: var(--colorTextDefault); } .Typography_mediumColor_366 { color: var(--colorTextMedium); } .Typography_lightColor_c84 { color: var(--colorTextLight); } .Typography_errorColor_5c9 { color: var(--colorTextDanger); } .Typography_linkColor_354 { color: var(--colorLinkDefault); } .Typography_invertedColor_12c { color: var(--colorTextNeutralInvert); } .Typography_aiGradientColor_8e9 { background-image: var(--colorLinearGradientAi); color: transparent; -webkit-background-clip: text; background-clip: text; } /* Weights */ .Typography_defaultWeight_1e7 { font-weight: normal; } .Typography_mediumWeight_c61 { font-weight: var(--fontWeightMedium); } .Typography_boldWeight_34c { font-weight: var(--fontWeightBold); } .Typography_displayText_ae0 { margin: 0; font-weight: 700; } .Typography_displayText_ae0.Typography_medium_368, .Typography_displayText_ae0.Typography_large_00c { font-size: var(--headingSizeDisplay); line-height: 32px; } @media screen and (min-width: 768px) { .Typography_displayText_ae0.Typography_large_00c { font-size: var(--headingSizeSuper); line-height: 40px; } } .Typography_heading_f6b { margin: 0; } .Typography_heading_f6b.Typography_small_250 { font-size: var(--fontSizeBase); line-height: 18px; font-weight: var(--fontWeightBold); } .Typography_heading_f6b.Typography_medium_368 { font-size: var(--headingSizeMedium); line-height: 20px; font-weight: 700; } .Typography_heading_f6b.Typography_large_00c { font-size: var(--headingSizeLarge); line-height: 24px; font-weight: 700; } .Typography_caption_570 { line-height: 16px; } .Typography_caption_570.Typography_small_250 { font-size: var(--fontSizeTiny); /* uiText smallest */ } .Typography_caption_570.Typography_medium_368 { font-size: var(--fontSizeSmall); } .Typography_uiText_1ae { line-height: 16px; } .Typography_uiText_1ae.Typography_x-small_769 { font-size: 11px; } .Typography_uiText_1ae.Typography_smallest_34b { font-size: 12px; } .Typography_uiText_1ae.Typography_small_250 { font-size: 13px; } .Typography_uiText_1ae.Typography_base_7c8 { font-size: 14px; } /* when text is uppercase, it renders at smaller sizes */ .Typography_uiText_1ae.Typography_uppercase_d36 { text-transform: uppercase; letter-spacing: 0.25px; font-feature-settings: 'pnum' on, 'lnum' on, 'cv09' on; } .Typography_uiText_1ae.Typography_uppercase_d36.Typography_x-small_769 { font-size: 9px; } .Typography_uiText_1ae.Typography_uppercase_d36.Typography_smallest_34b { font-size: 10px; } .Typography_uiText_1ae.Typography_uppercase_d36.Typography_small_250 { font-size: 11px; } .Typography_uiText_1ae.Typography_uppercase_d36.Typography_base_7c8 { font-size: 12px; } .Typography_uiText_1ae.Typography_regularWeight_cb9 { font-weight: var(--fontWeightRegular); } .Typography_uiText_1ae.Typography_mediumWeight_c61 { font-weight: var(--fontWeightMedium); } .Typography_uiText_1ae.Typography_boldWeight_34c { font-weight: var(--fontWeightBold); } .Typography_uiText_1ae.Typography_italic_012 { font-style: italic; } .Typography_uiText_1ae.Typography_underline_59a { -webkit-text-decoration: underline; text-decoration: underline; } .Typography_uiText_1ae.Typography_noWrap_96f { white-space: nowrap; } .Typography_uiText_1ae.Typography_breakWord_dfa { word-break: break-word; } .Typography_uiText_1ae.Typography_numeric_482 { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; } .Typography_uiText_1ae.Typography_balanced_6ed { text-wrap: balance; } .Typography_overflowEllipsis_861 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .Typography_pointerCursor_0ad { cursor: pointer; } /* BodyText https://www.figma.com/design/VnqOXvCvPMLQbBCrZs4eLdYf/%F0%9F%94%A0-Typography?node-id=11-3&m=dev */ .Typography_bodyText_fbd { line-height: 1.5; margin: 0; } .Typography_bodyText_fbd.Typography_large_00c { font-size: var(--headingSizeLarge); } .Typography_bodyText_fbd.Typography_base_7c8 { font-size: var(--fontSizeBase); } .Typography_bodyText_fbd.Typography_small_250 { font-size: var(--fontSizeSmall); } .Typography_bodyText_fbd.Typography_smallest_34b { font-size: var(--fontSizeTiny); } .Typography_bodyText_fbd.Typography_regularWeight_cb9 { font-weight: var(--fontWeightRegular); } .Typography_bodyText_fbd.Typography_boldWeight_34c { font-weight: var(--fontWeightBold); } .subcomponents_ModalBanner_main_1dd { padding: var(--spacing-16); display: flex; align-items: flex-start; } .subcomponents_ModalBanner_main_1dd.subcomponents_ModalBanner_info_04e { background: var(--bgInformationalMuted); } .subcomponents_ModalBanner_main_1dd.subcomponents_ModalBanner_danger_47b { background: var(--bgDangerMuted); } .subcomponents_ModalBanner_main_1dd.subcomponents_ModalBanner_bottomBorder_115 { border-bottom: 1px solid var(--borderDefault); } .subcomponents_ModalBanner_main_1dd.subcomponents_ModalBanner_noVerticalPadding_321 { padding-bottom: 0; padding-top: 0; } .subcomponents_ModalBanner_main_1dd.subcomponents_ModalBanner_withIllustration_aee { padding-bottom: 0; } .subcomponents_ModalBanner_main_1dd.subcomponents_ModalBanner_ignoreGlobalPadding_3fe { margin: calc(var(--modalBodyPadding) * -1); } .subcomponents_ModalBanner_main_1dd.subcomponents_ModalBanner_ignoreGlobalPadding_3fe:has(+ *) { margin-bottom: var(--modalBodyPadding); } .subcomponents_ModalBanner_icon_a35 { flex: 0 0 auto; display: grid; place-items: center; background: var(--bgLight); border-radius: 50%; width: 40px; height: 40px; margin-right: 12px; } .subcomponents_ModalBanner_content_609 { flex: 0 1 100%; } .subcomponents_ModalBanner_headerTooltip_cb6 { /* Nudge the tooltip into place. */ display: inline-flex; position: relative; top: 3px; } .subcomponents_ModalBanner_body_fe0 { color: var(--colorTextMedium); /* If there is a prior sibling (eg a title), we want a little extra spacing before the body */ } .subcomponents_ModalBanner_body_fe0:not(:first-child) { margin-top: 2px; } .subcomponents_ModalBanner_withIllustration_aee .subcomponents_ModalBanner_body_fe0:not(:first-child) { padding-bottom: var(--spacing-16); } .subcomponents_ModalBanner_illustration_cdf { align-self: flex-end; line-height: 0; padding-left: var(--spacing-16); width: var(--illustrationWidth, 105px); } .subcomponents_ModalForm_form_e8f { box-sizing: border-box; /* override global */ margin: 0; /* fill height so child components behave as though this extra element wasn't there */ display: flex; flex-direction: column; min-height: 0; } .subcomponents_ModalHeader_header_e03 { border-bottom: 1px solid var(--borderDefault); background-color: var(--bgModalHeader); border-top-left-radius: var(--modalBorderRadius); border-top-right-radius: var(--modalBorderRadius); } .subcomponents_ModalHeader_header_e03 h3 { margin: 0; line-height: 20px; font-size: 16px; font-weight: 700; } .subcomponents_ModalHeader_header_e03 .Modal__closeCrossBtn { margin-top: 0; } .subcomponents_ModalHeader_headerInner_80c { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-12) var(--modalBodyPadding); } .subcomponents_ModalHeader_closeButton_d3d { color: var(--colorIconLight); } .subcomponents_ModalHeader_closeButton_d3d:disabled { pointer-events: none; } .subcomponents_ModalHeader_closeButton_d3d:disabled:hover, .subcomponents_ModalHeader_closeButton_d3d:disabled:focus { opacity: 0.2; /* keep opacity the same as if un-hovered */ } .subcomponents_ModalHeader_tabsContainer_7cc { padding: 0 var(--modalBodyPadding); margin-bottom: -1px; /* merge bottom borders of tabs and header */ } @layer atom { .SearchInput_search_55f { position: relative; } .SearchInput_search_55f .SearchInput_searchInput_73a.SearchInput_searchInput_73a { background-color: var(--bgSearchEnabled); border: 1px solid transparent; box-shadow: none; } .SearchInput_search_55f .SearchInput_searchInput_73a.SearchInput_searchInput_73a.SearchInput_themeBright_143 { background-color: var(--bgSearchActive); border-color: var(--borderDefault); } .SearchInput_search_55f .SearchInput_searchInput_73a.SearchInput_searchInput_73a:hover { background-color: var(--bgSearchHover); } .SearchInput_search_55f .SearchInput_searchInput_73a.SearchInput_searchInput_73a:focus { background-color: var(--bgSearchActive); border-color: var(--borderFocused); } .SearchInput_search_55f .SearchInput_searchInput_73a.SearchInput_searchInput_73a[aria-invalid='true'] { border-color: var(--borderDanger); } .SearchInput_searchIcon_7ba { color: var(--colorIconDefault); cursor: pointer; /* allow clicks to pass through & focus the input */ pointer-events: none; } .SearchInput_clearIcon_a90 { cursor: pointer; color: var(--colorIconDefault); opacity: 0.8; } .SearchInput_clearIcon_a90:hover { opacity: 1; } .SearchInput_searchInput_73a:placeholder-shown + *:has(.SearchInput_clearIcon_a90) > .SearchInput_clearIcon_a90 { display: none; } } @layer atom { .Input_fieldContainer_879 { width: 100%; position: relative; /* Large size */ --fontSize: var(--inputFontSizeLarge); --inputHeight: var(--inputHeightLarge); --verticalPadding: var(--inputVerticalPaddingLarge); --horizontalPadding: var(--inputHorizontalPaddingLarge); --prefixSuffixGap: 12px; /* Defaults */ --iconWidth: 16px; --paddingLeft: var(--horizontalPadding); --paddingRight: var(--horizontalPadding); } .Input_fieldContainerSmall_9cc { --fontSize: var(--inputFontSizeSmall); --inputHeight: var(--inputHeightSmall); --verticalPadding: var(--inputVerticalPaddingSmall); --horizontalPadding: var(--inputHorizontalPaddingSmall); --prefixSuffixGap: 8px; } .Input_fieldContainerSmall_9cc .Input_textarea_812 { height: inherit; } .Input_fieldContainerTiny_4f1 { --fontSize: var(--inputFontSizeTiny); --inputHeight: var(--inputHeightTiny); --verticalPadding: var(--inputVerticalPaddingTiny); --horizontalPadding: var(--inputHorizontalPaddingTiny); --prefixSuffixGap: 6px; } .Input_fieldContainerTiny_4f1 .Input_textarea_812 { height: inherit; } .Input_fieldPrefix_905, .Input_fieldSuffix_a90 { position: absolute; top: 0; bottom: 0; display: flex; justify-content: center; align-items: center; font-weight: normal; box-sizing: border-box; font-size: var(--fontSize); color: var(--colorTextLight); } .Input_fieldPrefix_905 { width: var(--iconWidth); left: var(--horizontalPadding); pointer-events: none; } .Input_fieldSuffix_a90 { /* we have some suffixes bigger than the default size, i.e. "seconds" */ min-width: var(--iconWidth); right: var(--horizontalPadding); } .Input_fieldSuffix_a90.Input_nonInteractive_30e { pointer-events: none; } .Input_fieldContainerWithPrefix_f83 .Input_input_30e { --paddingLeft: calc( var(--horizontalPadding) + var(--iconWidth) + var(--prefixSuffixGap) ); } .Input_fieldContainerWithSuffix_372 .Input_input_30e { --paddingRight: calc( var(--horizontalPadding) + var(--iconWidth) + var(--prefixSuffixGap) ); } .Input_textarea_812, .Input_input_30e { width: 100%; margin: 0; box-sizing: border-box; display: block; text-align: inherit; font-size: var(--fontSize); height: var(--inputHeight); /* Deliberately don't assign padding to fixed height inputs */ padding: 0 var(--paddingRight) 0 var(--paddingLeft); color: var(--colorTextDefault); background-color: var(--formBackground); border-radius: var(--baseInputBorderRadius); border: 1px solid var(--borderDefault); box-shadow: none; } .Input_textarea_812[aria-invalid='true'], .Input_input_30e[aria-invalid='true'] { border-color: var(--borderDanger); } .Input_textarea_812:focus, .Input_input_30e:focus { outline: 0; border-color: var(--borderFocused); } .Input_textarea_812[disabled], .Input_input_30e[disabled] { cursor: not-allowed; background-color: var(--formBackgroundDisabled); } .Input_textarea_812 { /* Assign vertical padding to textareas only */ padding-top: var(--verticalPadding); padding-bottom: var(--verticalPadding); } .Input_input_30e[type='number']::-webkit-outer-spin-button, .Input_input_30e[type='number']::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .Input_input_30e[type='number'] { -moz-appearance: textfield; /* Firefox */ } .Input_inlineInputWrapper_e11 { position: relative; } .Input_inlineInputWrapper_e11 > .Input_fieldPrefix_905 { z-index: 1; } .Input_inlineInputWrapper_e11 input.Input_inlineInput_f51 { border: none; height: 20px; padding: 0; border-radius: 0px; } .Input_inlineInputWrapper_e11 input.Input_inlineInput_f51.Input_withPrefix_818 { padding-left: calc(var(--iconWidth) + var(--prefixSuffixGap)); } .Input_inlineInputLarge_f07 input.Input_inlineInput_f51 { font-size: var(--fontSizeBase); font-weight: var(--fontWeightBold); --prefixSuffixGap: 14px; } .Input_inlineInputLarge_f07 > .Input_fieldPrefix_905 { font-size: var(--fontSizeBase); font-weight: var(--fontWeightBold); } .Input_inlineInputSmall_58a input.Input_inlineInput_f51 { font-size: var(--fontSizeSmall); --prefixSuffixGap: 10px; } .Input_inlineInputSmall_58a > .Input_fieldPrefix_905 { font-size: var(--fontSizeSmall); } .Input_textareaWrapper_67c { position: relative; } .Input_characterCounter_05f { position: absolute; bottom: 8px; right: 8px; pointer-events: none; } } :root { /* Global vars so subcomponents can be used independently of wrapper */ --switchToggleWidth: 30px; --switchToggleHeight: 16px; --switchToggleDotSize: 12px; --switchToggleDotOffset: 1px; } .Switch_wrapper_837 { display: inline-flex; padding: 6px 0; line-height: var(--switchToggleHeight); } .Switch_wrapper_837.Switch_noPadding_3da { padding: 0; } .Switch_label_658 { display: inline-flex; margin: 0; gap: 8px; line-height: var(--switchToggleHeight); } .Switch_label_658.Switch_disabled_b61 { opacity: var(--disabledOpacity); cursor: not-allowed; } .Switch_labelText_64b { display: flex; align-items: center; } .Switch_inputWrapper_4f3 { display: block; position: relative; height: var(--switchToggleHeight); min-width: var(--switchToggleWidth); width: var(--switchToggleWidth); border-radius: var(--switchToggleHeight); background-color: var(--bgFormControlToggleEnabledUnchecked); border: 1px solid transparent; box-sizing: border-box; } .Switch_inputWrapper_4f3:focus-within { border-color: var(--formBorderFocused); box-shadow: 0 0 0 2px color-mix(in srgb, transparent 50%, var(--formBorderFocused)); } .Switch_inputWrapper_4f3::before, .Switch_inputWrapper_4f3::after { content: ''; position: absolute; display: block; transition: 200ms var(--standardCurve); } .Switch_inputWrapper_4f3::before { height: var(--switchToggleHeight); width: var(--switchToggleHeight); top: -1px; left: -1px; border-radius: var(--switchToggleHeight); } .Switch_inputWrapper_4f3::after { height: var(--switchToggleDotSize); width: var(--switchToggleDotSize); top: var(--switchToggleDotOffset); left: var(--switchToggleDotOffset); border-radius: var(--switchToggleDotSize); background: var(--fillFormControlEnabled); } .Switch_inputWrapper_4f3.Switch_checked_a34::before { width: var(--switchToggleWidth); background: var(--bgFormControlEnabledChecked); } .Switch_inputWrapper_4f3.Switch_checked_a34::after { left: calc(var(--switchToggleWidth) - var(--switchToggleDotSize) - 3px); } .Switch_input_5bb { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; margin: 0; padding: 0; } @keyframes Skeletons_skeleton_d15 { 0% { background-color: var(--fromBg); } 100% { background-color: var(--toBg); } } .Skeletons_skeleton_d15 { --fromBg: var(--colorFillTransparent02); --toBg: var(--colorFillTransparent05); /* keep in sync with useStaggeredAnimation */ --animationLength: 0.5s; border-radius: 3px; background-color: var(--fromBg); animation: Skeletons_skeleton_d15 var(--animationLength) infinite alternate; animation-delay: inherit; } .Skeletons_skeleton_d15.Skeletons_dark_b4c { --fromBg: var(--colorFillTransparent05); --toBg: var(--colorFillTransparent10); } /** * Box/Text */ .Skeletons_box_52e { display: block; max-width: 100%; height: 1.2em; font-size: 1rem; } .Skeletons_box_52e:not(:last-child):not(.Skeletons_inline_fd4) { margin-bottom: 0.25em; } .Skeletons_fullWidth_b53 { width: 100%; } /** * Icon */ .Skeletons_icon_d49 { display: block; } .Skeletons_rounded_604 { border-radius: 50%; } /** * Common */ .Skeletons_inline_fd4 { display: inline-block; vertical-align: middle; } .Popover_popover_723 { --popoverBorderRadius: 7px; background-clip: padding-box; border-radius: var(--popoverBorderRadius); border: 1px solid var(--borderDefault); box-shadow: var(--shadowLevel3); display: flex; flex-direction: column; color: var(--colorTextDefault); line-height: 20px; background-color: var(--bgPopover); max-height: 70vh; position: relative; z-index: 10000; } .Popover_popover_723.Popover_overflowHidden_cb6 { overflow: hidden; } /* the element to which the popover is attached has left the viewport */ .Popover_popover_723[data-reference-hidden='true'], .Popover_popover_723[data-eager-hidden='true'] { visibility: hidden; /* ensure hidden popovers do not impact layout */ position: fixed !important; } .Popover_scrollContainer_e27 { position: relative; z-index: 2; overflow-y: auto; } .Popover_contentWithPadding_0fa { padding: 8px 14px; } .Popover_popoverHeader_542, .Popover_popoverFooter_a37 { /* let popover content dictate how wide header/footer should be */ width: min-content; min-width: 100%; position: relative; box-sizing: border-box; z-index: 2; font-size: 14px; font-weight: normal; line-height: 18px; } .Popover_headerWithPadding_933, .Popover_footerWithPadding_e2a { padding: 8px 14px; } .Popover_popoverHeader_542 { border-bottom: 1px solid var(--borderDefault); border-top-left-radius: calc(var(--popoverBorderRadius) - 1px); border-top-right-radius: calc(var(--popoverBorderRadius) - 1px); } .Popover_popoverHeader_542.Popover_whiteBackground_087 { background-color: var(--bgPopover); } .Popover_popoverHeader_542.Popover_grayBackground_c23 { /* TODO [darkmode] this ends up darker than the BG in dark mode * /* TODO this is used only once, in the phone settings popover */ background-color: var(--surfaceBackgroundMedium); } .Popover_popoverFooter_a37 { border-top: 1px solid var(--borderDefault); border-bottom-left-radius: calc(var(--popoverBorderRadius) - 1px); border-bottom-right-radius: calc(var(--popoverBorderRadius) - 1px); } .Popover_popoverFooter_a37.Popover_noBorder_871 { border-top: none; } .Popover_backdrop_ab4 { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0, 0, 0, 0); z-index: 102; /* in front of left nav, behind filter sidebar */ } .DropdownMenu_menuContainer_c3d { display: flex; flex-direction: column; overflow: hidden; max-height: var(--menuMaxHeight); /* ensures does not go taller than its container */ min-height: 0; /* don't show focus ring on iOS */ } .DropdownMenu_menuContainer_c3d:focus { outline: none; } .DropdownMenu_menu_34b { display: flex; flex-direction: column; position: relative; z-index: 2; flex: 1; min-height: 0; } .DropdownMenu_list_50d { width: 100%; height: 100%; margin: 0; padding: 4px 0; background-color: var(--bgPopover); overflow-y: auto; overflow-x: hidden; border-radius: var(--popoverBorderRadius); } .DropdownMenu_rootSearch_3cd + .DropdownMenu_list_50d { border-top-left-radius: 0; border-top-right-radius: 0; } .DropdownMenu_list_50d:focus { outline: none; } .DropdownMenu_item_699 { position: relative; display: flex; padding: 6px 16px; line-height: 16px; cursor: pointer; -webkit-user-select: none; user-select: none; gap: var(--spacing-8); } @media screen and (max-width: 767px) { .DropdownMenu_item_699 { padding: 8px 16px; } } .DropdownMenu_item_699 svg { fill: var(--colorIconDefault); } .DropdownMenu_item_699.DropdownMenu_withIcon_0ac { display: grid; column-gap: var(--spacing-8); grid-template-columns: var(--spacing-16) 1fr; } .DropdownMenu_item_699.DropdownMenu_withIcon_0ac.DropdownMenu_withFullSizeIcon_40d { align-items: center; column-gap: var(--spacing-16); grid-template-columns: var(--spacing-24) 1fr; } .DropdownMenu_item_699.DropdownMenu_isDisabled_9c2 { cursor: not-allowed; color: var(--colorTextLight); } .DropdownMenu_item_699.DropdownMenu_isDisabled_9c2 svg { fill: currentColor; } .DropdownMenu_item_699 a { display: block; color: inherit; -webkit-text-decoration: none; text-decoration: none; } .DropdownMenu_submenuArrow_df8 { position: absolute; right: var(--spacing-16); color: var(--colorIconLight); top: calc(50% - var(--spacing-8)); /* 16x tall & centered */ } .DropdownMenu_isHighlighted_53f .DropdownMenu_submenuArrow_df8 { color: var(--colorIconDefault); } .DropdownMenu_itemInner_b5f { width: 100%; } .DropdownMenu_itemTitle_231 { margin-bottom: 4px; } .DropdownMenu_itemTitle_231.DropdownMenu_smallMargin_4a0 { margin-bottom: 2px; } .DropdownMenu_subtext_06d { margin-left: auto; margin-right: var(--spacing-8); white-space: nowrap; } .DropdownMenu_typeDefault_1a7.DropdownMenu_isHighlighted_53f:not(.DropdownMenu_isDisabled_9c2), .DropdownMenu_typeLink_76d.DropdownMenu_isHighlighted_53f:not(.DropdownMenu_isDisabled_9c2) { background: var(--bgMenuItemHover); } .DropdownMenu_linkAnchor_bf9:hover, .DropdownMenu_linkAnchor_bf9:focus, .DropdownMenu_linkAnchor_bf9:active { -webkit-text-decoration: none; text-decoration: none; outline: none; } .DropdownMenu_typeLink_76d { color: var(--colorTextDefault); } .DropdownMenu_typeLink_76d.DropdownMenu_isHighlighted_53f { -webkit-text-decoration: none; text-decoration: none; } .DropdownMenu_typeDanger_e5d { color: var(--colorTextDanger); } .DropdownMenu_typeDanger_e5d svg { fill: currentColor; } .DropdownMenu_typeDanger_e5d.DropdownMenu_isHighlighted_53f:not(.DropdownMenu_isDisabled_9c2) { color: var(--colorTextNeutralWhite); background: var(--bgDanger); } /* While setting these on the item itself and allowing the color to cascade to the icon is convenient it stops the icon from being composable, so some explicit duplication here decouples the icon from the list item */ .DropdownMenu_icon_bf9.DropdownMenu_typeDefault_1a7, .DropdownMenu_icon_bf9.DropdownMenu_typeLink_76d { color: var(--colorIconDefault); } .DropdownMenu_icon_bf9.DropdownMenu_typeDefault_1a7.DropdownMenu_isHighlighted_53f:not(.DropdownMenu_isDisabled_9c2), .DropdownMenu_icon_bf9.DropdownMenu_typeLink_76d.DropdownMenu_isHighlighted_53f:not(.DropdownMenu_isDisabled_9c2) { color: var(--colorTextDefault); } .DropdownMenu_icon_bf9.DropdownMenu_typeDanger_e5d { color: var(--fillDanger); } .DropdownMenu_icon_bf9.DropdownMenu_typeDanger_e5d.DropdownMenu_isHighlighted_53f:not(.DropdownMenu_isDisabled_9c2) { color: var(--colorIconNeutralWhite); } .DropdownMenu_divider_a9c { display: block; margin: 4px 0; border-bottom: 1px solid var(--borderDefault); /* don't show two dividers next to each other */ } .DropdownMenu_divider_a9c:first-child, .DropdownMenu_divider_a9c:last-child, .DropdownMenu_divider_a9c + .DropdownMenu_divider_a9c { display: none; } .DropdownMenu_card_370 { padding: 4px 8px; /* prevents extraneous padding in Safari Desktop */ list-style-type: none; } .DropdownMenu_submenuBar_185 { border-bottom: 1px solid var(--borderDefault); } .DropdownMenu_submenuHeading_d8a { display: grid; grid-template-columns: 16px auto 16px; justify-items: center; padding: var(--spacing-8) var(--spacing-16); } .DropdownMenu_submenuSearch_2ad { padding: 0 var(--spacing-8) var(--spacing-8); } /* NOTE: It's the same padding as in Select's GroupHeading. Make sure to sync */ .DropdownMenu_subtitle_425 { display: flex; align-items: center; padding: 8px 32px 8px 16px; line-height: 16px; } .DropdownMenu_rootSearch_3cd { border-top-left-radius: var(--popoverBorderRadius); border-top-right-radius: var(--popoverBorderRadius); border-bottom: 1px solid var(--borderDefault); padding: var(--spacing-8); } .DropdownMenu_backIcon_5e5 { cursor: pointer; color: var(--colorIconLight); } .DropdownMenu_backIcon_5e5:hover { color: var(--colorIconDefault); } .DropdownMenu_emptyState_557 { padding: var(--spacing-8); } .Table_table_d42 { background: transparent; border-collapse: separate; border-radius: var(--tableBorderRadius); border-spacing: 0; border: 1px solid var(--borderDefault); box-shadow: var(--tableShadow); box-sizing: border-box; position: relative; transition: opacity 200ms var(--standardCurve); width: 100%; } .Table_table_d42 thead { position: relative; } .Table_table_d42 thead tr { /* Fixes FF border issue */ background-color: transparent; } .Table_table_d42.Table_stickyHeader_6bc { border-top-width: 0; } .Table_table_d42.Table_stickyHeader_6bc thead th { border-top: 1px solid var(--borderDefault); position: sticky; top: 0; z-index: 1; } .Table_table_d42.Table_fullWidth_62f { --tableBorderRadius: 0; border-left-width: 0; border-right-width: 0; } .Table_table_d42 * { box-sizing: border-box; } .Table_loading_719 { opacity: 0.5; } .Table_th_10a { background: var(--bgTableHeaderDefault); border-bottom: 1px solid var(--borderDefault); font-weight: var(--fontWeightBold); /* Includes border height */ height: 41px; padding: var(--spacing-8) var(--spacing-12); text-align: left; white-space: nowrap; /* Fixes Tooltip positioning */ } .Table_th_10a > span { align-items: center; display: inline-flex; height: 100%; vertical-align: middle; /* Fixes FF cell height issue */ } .Table_th_10a:first-child { border-top-left-radius: var(--tableBorderRadius); } .Table_th_10a.Table_canSelectAll_2b0:nth-child(2) { padding-left: 0; } .Table_th_10a.Table_fullWidth_62f:first-child { padding-left: var(--spacing-16); } @media screen and (min-width: 768px) { .Table_th_10a.Table_fullWidth_62f:first-child { padding-left: var(--spacing-24); } } .Table_th_10a.Table_fullWidth_62f:last-child { padding-right: var(--spacing-12); } @media screen and (min-width: 768px) { .Table_th_10a.Table_fullWidth_62f:last-child { padding-right: var(--spacing-24); } } .Table_th_10a:last-child { border-top-right-radius: var(--tableBorderRadius); } .Table_th_10a[role='button'] { cursor: not-allowed; /* enabled below when not .loading */ } .Table_table_d42:not(.Table_loading_719) .Table_th_10a[role='button'] { cursor: pointer; } .Table_table_d42:not(.Table_loading_719) .Table_th_10a[role='button']:hover { background-color: var(--bgTableHeaderHover); } .Table_table_d42:not(.Table_loading_719) .Table_th_10a[role='button']:hover .Table_nextSortOptionIcon_f27 { display: block; } .Table_table_d42:not(.Table_loading_719) .Table_th_10a[role='button']:hover .Table_currentSortOptionIcon_61d { display: none; } .Table_headerContent_98b { align-items: center; display: inline-flex; gap: var(--spacing-8); } .Table_sortIcon_6ff { margin: -0.5px 0; height: var(--spacing-16); width: var(--spacing-16); } .Table_nextSortOptionIcon_f27 { color: var(--colorIconLight); display: none; } .Table_icon_e24 { display: flex; align-items: center; gap: var(--spacing-8); } .Table_td_0c9 { height: 40px; padding: var(--spacing-8) var(--spacing-12); } .Table_td_0c9.Table_fullWidth_62f:first-child { padding-left: var(--spacing-16); } @media screen and (min-width: 768px) { .Table_td_0c9.Table_fullWidth_62f:first-child { padding-left: var(--spacing-24); } } .Table_td_0c9.Table_fullWidth_62f:last-child { padding-right: var(--spacing-12); } @media screen and (min-width: 768px) { .Table_td_0c9.Table_fullWidth_62f:last-child { padding-right: var(--spacing-24); } } .Table_td_0c9.Table_canSelect_21b:nth-child(2) { padding-left: 0; } .Table_legacyMinHeight_06f { height: unset; min-height: 40px; } .Table_tr_ef8 { background: var(--bgTableCellDefault); } .Table_tr_ef8:not(:last-child) .Table_td_0c9 { border-bottom: 1px solid var(--borderDefault); } .Table_tr_ef8:last-child .Table_td_0c9:first-child { border-bottom-left-radius: var(--tableBorderRadius); } .Table_tr_ef8:last-child .Table_td_0c9:last-child { border-bottom-right-radius: var(--tableBorderRadius); } .Table_tr_ef8.Table_clickable_089 { cursor: pointer; } .Table_tr_ef8.Table_selected_d78 { background: var(--bgTableCellHighlighted); } .Table_tr_ef8.Table_selected_d78:not(:last-child) .Table_td_0c9 { border-bottom-color: var(--borderActiveMuted); } .Table_tr_ef8.Table_selected_d78.Table_hover_434:hover { background: var(--bgTableCellHighlighted); } .Table_align-right_462 { text-align: right; } .Table_align-center_52a { text-align: center; } .Table_tr_ef8.Table_hover_434:hover { background: var(--bgTableCellHover); } .Table_cover_937 { padding-top: var(--spacing-24); padding-bottom: var(--spacing-24); text-align: center; } .Table_moreIcon_6ee { width: var(--spacing-16); padding: var(--spacing-4); box-sizing: content-box; background: none; border: none; outline: none; color: var(--colorIconLight); display: inline-flex; } .Table_moreIcon_6ee:hover { color: var(--colorTextDefault); } .Table_moreIcon_6ee svg { width: 100%; } .Table_hideHeader_c08 tr:first-child td:first-child { border-top-left-radius: var(--tableBorderRadius); } .Table_hideHeader_c08 tr:first-child td:last-child { border-top-right-radius: var(--tableBorderRadius); } .Table_selectionHeader_0f0 { align-items: center; display: flex; gap: var(--spacing-12); } .Table_selectionButton_fb0 { align-items: center; display: flex; height: 26px; justify-content: center; margin: -4px -6px; width: 26px; } .Table_selectionSeparator_84f { border-left: 1px solid var(--borderDefault); height: 16px; } .Table_selectionAction_7fd { margin: -4px 0; } .Table_actionMenu_daf { margin: -3px 0; } .Table_selectAll_679 { /* increase checkbox clickable area without affecting the layout */ padding: var(--spacing-12) var(--spacing-12); margin: calc(-1 * var(--spacing-12)) calc(-1 * var(--spacing-12)); } .Table_selectAll_679.Table_fullWidth_62f { padding-left: var(--spacing-16); margin-left: calc(-1 * var(--spacing-16)); } @media screen and (min-width: 768px) { .Table_selectAll_679.Table_fullWidth_62f { padding-left: var(--spacing-24); margin-left: calc(-1 * var(--spacing-24)); } } .Table_selectCell_2fa { container-name: select-cell; container-type: size; height: 100%; /* Width of checkbox */ /* We have to apply this because of the container-type: size */ width: 14px; } .Table_selectInner_f36 { align-items: center; display: flex; /* Single line cells we want to align in the center of the cell */ /* Checkboxes are misaligned by 1px */ height: calc(100% - 1px); } /* 40px + 1px border is the height of a single line cell */ @container select-cell (height > 41px) { .Table_selectInner_f36 { /* Multi-line cells we want to align with the first line of text */ /* 18px is our line height and checkboxes are misaligned by 1px */ height: 17px; } } /* Stacked tables */ .Table_table_d42:has(+ .Table_table_d42) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .Table_table_d42:has(+ .Table_table_d42) tr:last-child td:first-child { border-bottom-left-radius: 0; } .Table_table_d42:has(+ .Table_table_d42) tr:last-child td:last-child { border-bottom-right-radius: 0; } .Table_table_d42 + .Table_table_d42 { border-top-left-radius: 0; border-top-right-radius: 0; border-top: 0; } .Table_table_d42 + .Table_table_d42 thead th { border-top: 0; } .Table_table_d42 + .Table_table_d42 thead th:first-child { border-top-left-radius: 0; } .Table_table_d42 + .Table_table_d42 thead th:last-child { border-top-right-radius: 0; } .Table_SelectionHeaderCollapsed_root_0a9 { align-items: center; background-color: var(--surfaceBackgroundMedium); border-top: solid 1px var(--borderDefault); bottom: 0; display: grid; gap: var(--spacing-8); grid-template-columns: auto 1fr auto; left: 0; padding: var(--spacing-12) var(--spacing-16); position: fixed; right: 0; z-index: 1; } /* If you change something here, also check CheckboxCard.module.css * that overrides some styles here. */ .Checkbox { --focusedBorderColor: rgba(82, 168, 236, 0.8); cursor: pointer; position: relative; display: flex; margin: 0; padding: 0; font-size: 14px; line-height: 16px; -webkit-user-select: none; user-select: none; } .Checkbox--isLoading { opacity: var(--disabledOpacity); } .Checkbox__label { cursor: pointer; color: var(--colorTextDefault); display: flex; align-items: flex-start; font-weight: normal; max-width: 100%; position: relative; /** * The checkbox "box" * Colors are defined state by state below */ } .Checkbox__label::before { content: ''; position: relative; top: 1px; border-width: 1px; border-style: solid; border-radius: 3px; width: 14px; height: 14px; transition: border 80ms ease-in-out, background 80ms ease-in-out; margin-right: 12px; flex: 0 0 14px; box-sizing: border-box; } /** * The checkbox checkmark * Colors are defined state by state below */ .Checkbox__label::after { content: ''; display: none; position: absolute; width: 3px; height: 6px; top: 3px; left: 5px; border-style: solid; border-width: 0 2px 2px 0; transform: rotate3d(0, 0, 1, 45deg); } .Checkbox__label:empty { /* the label should only take the size of the checkbox when it's empty */ width: 14px; } .Checkbox__label:hover { color: var(--colorTextDefault); } .Checkbox__label.is-disabled { color: var(--colorTextMedium); } .Checkbox__label.is-bold { font-weight: var(--fontWeightBold); } .Checkbox__label--isMobile { pointer-events: none; /* mobile: otherwise the label doesn't check the box */ } .Checkbox__label--halfChecked::after { display: block; transform: none; top: calc(50% - 6px); left: 4px; width: 6px; border-width: 0 0 2px 0; } .Checkbox__label--left::before { margin-right: 0; margin-left: 12px; order: 1; } .Checkbox__label--left::after { right: 4px; left: unset; } .Checkbox__input { position: absolute; opacity: 0; pointer-events: none; } .Checkbox__input:disabled ~ .Checkbox__label { color: var(--colorTextMedium); cursor: not-allowed; } /** * Default (enabled unchecked) */ /* box */ .Checkbox__label::before { background-color: var(--bgFormControlEnabledUnchecked); border-color: var(--borderFormControlEnabledUnchecked); } /** * Disabled unchecked */ /* box */ .Checkbox__input:disabled ~ .Checkbox__label::before, .Checkbox__input:disabled ~ .Checkbox__label--halfChecked::before { background: var(--bgFormControlDisabled); border-color: var(--bgFormControlDisabled); } /* box */ .Checkbox__input:disabled ~ .Checkbox__label::after, .Checkbox__input:disabled ~ .Checkbox__label--halfChecked::after { border-color: var(--fillFormControlDisabled); } /** * Enabled checked/halfchecked */ /* box */ .Checkbox__input:checked ~ .Checkbox__label::before, .Checkbox__label--halfChecked::before { border-color: var(--bgFormControlEnabledChecked); background: var(--bgFormControlEnabledChecked); } /* mark */ .Checkbox__input:checked ~ .Checkbox__label::after, .Checkbox__label--halfChecked::after { display: flex; border-color: var(--fillFormControlEnabled); } /** * Disabled checked/halfchecked */ /* box */ .Checkbox__input:disabled:checked ~ .Checkbox__label::before, .Checkbox__input:disabled:checked ~ .Checkbox__label--halfChecked::before { background: var(--bgFormControlDisabled); border-color: var(--bgFormControlDisabled); } .Checkbox__input:disabled:checked ~ .Checkbox__label::after, .Checkbox__input:disabled:checked ~ .Checkbox__label--halfChecked::after { border-color: var(--fillFormControlDisabled); } /* focus */ .Checkbox__input:focus ~ .Checkbox__label::before { border-color: var(--focusedBorderColor); box-shadow: 0 0 0 3px color-mix(in srgb, transparent 50%, var(--colorBrandBlue)); } .FeatureFlagOverrideModal_modal_5ca { width: unset; max-width: 100vw; min-width: 80vw; } .FeatureFlagOverrideModal_description_bfe { padding: var(--spacing-16); } .ReactRoot_DevWidget_widget_351 { position: fixed; font-family: monospace; z-index: 1000; cursor: pointer; align-items: center; display: flex; gap: var(--spacing-8); } .loader { 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; } .close { float: right; font-size: 20px; font-weight: var(--fontWeightBold); line-height: 20px; color: var(--colorTextDefault); text-shadow: 0 1px 0 #ffffff; opacity: 0.2; filter: alpha(opacity=20); } .close:hover, .close:focus { color: var(--colorTextDefault); -webkit-text-decoration: none; text-decoration: none; cursor: pointer; opacity: 0.4; filter: alpha(opacity=40); } button.close { padding: 0; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; } body { margin: 0; font-family: var(--baseFontFamily); color: var(--colorTextDefault); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } label, input, button, select, textarea { font-size: var(--fontSizeBase); font-weight: normal; line-height: 20px; } input, button, select, textarea { font-family: var(--baseFontFamily); } ul { padding: 0; } /* Mimic Bootstrap styles for links, inputs and buttons */ a { color: var(--colorLinkDefault); -webkit-text-decoration: none; text-decoration: none; } a:hover { -webkit-text-decoration: underline; text-decoration: underline; } /* Override Checkbox disabled style solely for Signup app */ .Checkbox__label.is-disabled { opacity: var(--disabledOpacity); } .signup_App_app_6de { display: flex; min-height: 100vh; } .signup_App_lowerRightScreenWrapper_29e { position: fixed; right: 32px; bottom: 32px; display: flex; flex-direction: column-reverse; align-items: flex-end; z-index: 102; /* 1 above LeftNav's z-index */ gap: var(--spacing-12); } .Toast_main_a90 { background-color: var(--surfaceBackgroundDefault); border: 1px solid var(--borderLight); border-radius: var(--baseInputBorderRadius); box-shadow: var(--shadowLevel2); max-width: 400px; } @media screen and (max-width: 767px) { .Toast_main_a90 { max-width: calc(100vw - 64px); } } .Toast_default_e22 { background-color: var(--surfaceBackgroundDefault); border-color: var(--borderLight); } .Toast_success_24e { background-color: var(--bgSuccessMuted); border-color: var(--borderSuccessMuted); } .Toast_warning_3b3 { background-color: var(--bgWarnMuted); border-color: var(--borderWarnMuted); } .Toast_danger_432 { background-color: var(--bgDangerMuted); border-color: var(--borderDangerMuted); } .Toast_informational_4cf { background-color: var(--bgInformationalMuted); border-color: var(--borderInformationalMuted); } .Toast_icon_858 { height: 16px; position: relative; top: 5px; /* Center the icon vertically in the first line of text */ width: 16px; } .Toast_default_e22 .Toast_icon_858 { color: var(--colorIconDefault); } .Toast_success_24e .Toast_icon_858 { color: var(--fillSuccess); } .Toast_warning_3b3 .Toast_icon_858 { color: var(--fillWarn); } .Toast_danger_432 .Toast_icon_858 { color: var(--fillDanger); } .Toast_informational_4cf .Toast_icon_858 { color: var(--fillInformational); } .Toast_text_ee6 { font-size: var(--fontSizeBase); flex: 1; text-overflow: ellipsis; overflow: hidden; padding: 3px 0; /* Center the first line of text vertically with the close icon when single or multi-line */ } .Toast_close_51a { background-color: var(--bgButtonBorderlessEnabled); border-radius: 100%; box-sizing: border-box; color: var(--colorIconDefault); cursor: pointer; display: flex; flex: 0 0 auto; width: 26px; height: 26px; justify-content: center; align-items: center; border: 0; outline: 0; padding: var(--spacing-4); } .Toast_close_51a:hover { background-color: var(--bgButtonBorderlessHover); } .Toast_close_51a:active { background-color: var(--bgButtonBorderlessPressed); } .ToastManager_toast_dd7 { flex: 1 0 auto; } .MainLoader_MainLoader_685 { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .Main_main_d05 { display: flex; justify-content: center; padding: 20px; overflow: hidden; max-width: 994px; position: relative; flex: 0 1 100%; } @media screen and (min-width: 768px) { .Main_main_d05 { flex: 0 1 72%; padding-top: 100px; } } .Main_content_9b6 { width: 100%; max-width: 600px; } .OnboardingForm_title_0a4 { color: var(--colorTextDefault); padding-bottom: var(--spacing-24); display: flex; flex-direction: row; align-items: center; } .OnboardingForm_badgeContainer_df8 { display: flex; margin-left: var(--spacing-16); margin-top: 2px; } .OnboardingForm_full_5ea { display: flex; flex: 1; flex-direction: column; } .OnboardingForm_content_283 { display: flex; flex: 1; flex-direction: column; min-height: 0; } @media (max-width: 768px) { .OnboardingForm_content_283 { overflow: scroll; } } .OnboardingForm_mainContent_c65 { margin-top: var(--spacing-32); overflow: auto; flex: 1; } .OnboardingFrame_splitScreen_6ac { display: flex; height: 100vh; flex: 1; flex-direction: row; } .OnboardingFrame_fullScreenCenter_295 { display: flex; flex: 1; padding: var(--spacing-40) 56px; justify-content: center; flex-direction: column; align-items: center; } .OnboardingFrame_left_cce { flex: 0.5; display: flex; flex-direction: column; padding: var(--spacing-40) 56px 0px 56px; } .OnboardingFrame_formContent_41d { flex: 1; display: flex; flex-direction: column; font-size: 13px; min-height: 0; } .OnboardingFrame_right_5ad { flex: 0.5; background: linear-gradient(180deg, #eaf1ff 0%, #fff 100%), #fff; display: flex; } @media (max-width: 768px) { .OnboardingFrame_right_5ad { display: none; } .OnboardingFrame_left_cce { flex: 1; max-width: calc(100vw - (32px * 2)); padding: var(--spacing-40) 32px 0px 32px; overflow: hidden; } } .OnboardingFrame_logo_43a { width: 102px; margin-bottom: var(--spacing-48); } .OnboardingFrame_formContainer_d04 { flex: 1; display: flex; flex-direction: column; min-height: 0; } .OnboardingFrame_form_47e { display: flex; flex: 1; min-height: 0; } .OnboardingImage_center_b68 { display: flex; flex: 1; align-items: center; justify-content: center; } .OnboardingImage_image_159 { width: 480px; max-width: 50%; } .Field_Field_643.Field_withMargin_938 { margin-bottom: 20px; } .Field_content_ebe { display: flex; align-items: center; } .Field_content_ebe.Field_errorBottom_23a { flex-direction: column; align-items: inherit; } div.Field_label_771, label.Field_label_771 { /* TODO: remove hardcoded value and set on consumer container https://github.com/closeio/closeio/issues/18925 this could then be set to 100% all the time */ width: 340px; margin: 0; font-size: 14px; } div.Field_label_771.Field_disabled_2b1, label.Field_label_771.Field_disabled_2b1 { cursor: default; } div.Field_label_771.Field_fullWidth_2b3, label.Field_label_771.Field_fullWidth_2b3 { width: 100%; } .Field_labelText_575 { display: flex; align-items: center; width: 100%; margin-bottom: 8px; line-height: 16px; font-weight: var(--fontWeightBold); } .Field_disabled_2b1 > .Field_labelText_575 { opacity: 0.5; } .Field_description_66c { margin-top: 8px; color: var(--colorTextMedium); line-height: 16px; overflow-wrap: break-word; word-break: break-word; } .Field_error_3b7 { color: var(--colorTextDanger); padding-left: 20px; } .Field_error_3b7.Field_rightWithLabel_e26 { margin-top: 24px; } .Field_error_3b7.Field_bottom_07b { margin-top: 5px; width: 100%; padding: 0; } .Field_errorIcon_71e { margin-right: 5px; } .Field_required_0c2 { color: var(--colorTextDanger); } .FormikAdapter_FormikField_input_bb1, .FormikAdapter_FormikField_input_bb1[type] { /* We don't want input elements to have margins themselves by default. Margins can be added on the Field level, or if necessary by passing inputComponentClassName to FormikField with a margin in place */ margin: 0; /* Always stretch inputs to 100% of the FormikField by default. */ box-sizing: border-box; width: 100%; /* Bootstrap isn't applying border-box which means we have to also tweak the default height to accommodate this. */ }[type='text']:is(.FormikAdapter_FormikField_input_bb1,.FormikAdapter_FormikField_input_bb1[type]), [type='password']:is(.FormikAdapter_FormikField_input_bb1,.FormikAdapter_FormikField_input_bb1[type]), [type='datetime']:is(.FormikAdapter_FormikField_input_bb1,.FormikAdapter_FormikField_input_bb1[type]), [type='datetime-local']:is(.FormikAdapter_FormikField_input_bb1,.FormikAdapter_FormikField_input_bb1[type]), [type='date']:is(.FormikAdapter_FormikField_input_bb1,.FormikAdapter_FormikField_input_bb1[type]), [type='month']:is(.FormikAdapter_FormikField_input_bb1,.FormikAdapter_FormikField_input_bb1[type]), [type='time']:is(.FormikAdapter_FormikField_input_bb1,.FormikAdapter_FormikField_input_bb1[type]), [type='week']:is(.FormikAdapter_FormikField_input_bb1,.FormikAdapter_FormikField_input_bb1[type]), [type='number']:is(.FormikAdapter_FormikField_input_bb1,.FormikAdapter_FormikField_input_bb1[type]), [type='email']:is(.FormikAdapter_FormikField_input_bb1,.FormikAdapter_FormikField_input_bb1[type]), [type='url']:is(.FormikAdapter_FormikField_input_bb1,.FormikAdapter_FormikField_input_bb1[type]), [type='search']:is(.FormikAdapter_FormikField_input_bb1,.FormikAdapter_FormikField_input_bb1[type]), [type='tel']:is(.FormikAdapter_FormikField_input_bb1,.FormikAdapter_FormikField_input_bb1[type]), [type='color']:is(.FormikAdapter_FormikField_input_bb1,.FormikAdapter_FormikField_input_bb1[type]) { height: var(--inputHeightSmall); } .AutoTextarea_FormikAutoTextarea_textarea_85f { width: 100%; min-height: calc( var(--inputHeightSmall) * 2 - var(--inputVerticalPaddingSmall) * 2 ); margin-bottom: 0; box-sizing: border-box; } .subComponents_SelectLabel_root_d35 { position: relative; padding: 4px 16px 4px 40px; /* 24px total height */ font-size: var(--fontSizeBase); } .subComponents_SelectLabel_icon_49f { position: absolute; display: flex; align-items: flex-start; justify-content: center; left: 0; width: 40px; padding-top: 2px; } /* This wrapper moves the item "top" – as used when computing the position needed to scroll the item into view. This prevents keyboard navigation from scrolling items to a point underneath a sticky search input. TODO: once compute-scroll-into-view (used by downshift) supports the `scroll-margin-top` css prop, use that instead. https://github.com/scroll-into-view/compute-scroll-into-view/issues/831 */ .subComponents_SelectRow_root_753 { position: relative; pointer-events: none; padding-top: var(--select-menu-fixed-header-height, 0); margin-top: calc(-1 * var(--select-menu-fixed-header-height, 0)); } .subComponents_SelectRow_root_753 .subComponents_SelectRow_inner_f1b { pointer-events: auto; position: relative; text-overflow: ellipsis; overflow: hidden; cursor: pointer; } .subComponents_SelectRow_root_753 .subComponents_SelectRow_inner_f1b.subComponents_SelectRow_highlighted_116 { background-color: var(--bgMenuItemHover); } .subComponents_SelectRow_root_753 .subComponents_SelectRow_inner_f1b.subComponents_SelectRow_disabled_f80 { cursor: not-allowed; opacity: var(--disabledOpacity); -webkit-user-select: none; user-select: none; } .BottomSheet_backdrop_497 { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: var(--zindexModalBackdrop); background-color: transparent; transition: background-color 300ms ease-in-out; } .BottomSheet_backdrop_497.BottomSheet_afterOpen_f89 { background-color: var(--colorBgBackdrop); } .BottomSheet_backdrop_497.BottomSheet_beforeClose_671 { background-color: transparent; } .BottomSheet_sheet_b1a { position: fixed; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; z-index: var(--zIndexModal); background-color: var(--colorBgBottomsheet); border-radius: 7px 7px 0 0; transform: translate3d(0, 100%, 0); transition: transform 400ms cubic-bezier(0.28, 0.03, 0.25, 1); /* always leave some room for the backdrop */ max-height: calc(100vh - 120px); } .BottomSheet_sheet_b1a:focus { outline: none; } .BottomSheet_sheet_b1a.BottomSheet_afterOpen_f89 { transform: translate3d(0, 0, 0); } .BottomSheet_sheet_b1a.BottomSheet_beforeClose_671 { transform: translate3d(0, 100%, 0); } .BottomSheet_fixedHeight_193 { height: calc(100vh - 120px); } .BottomSheet_header_51c { padding: var(--spacing-16); border-bottom: 1px solid var(--borderDefault); } .BottomSheet_headerUpper_197 { display: flex; gap: var(--spacing-8); align-items: center; } .BottomSheet_title_6f7 { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: auto; } .BottomSheet_scrollContainer_66d { min-height: 0; overflow-y: auto; } .BottomSheet_scrollContainerInner_ac9 { padding: var(--spacing-8) 0 var(--spacing-32); } .BottomSheet_scrollContainerInner_ac9.BottomSheet_withFooter_dd7 { padding-bottom: 0; } .subComponents_SelectInlineButton_wrapper_121 { position: relative; } .subComponents_SelectInlineButton_button_52a { cursor: pointer; box-sizing: border-box; width: 100%; padding: 3px 24px 3px 8px; border: 1px solid transparent; border-radius: var(--baseBorderRadius); color: var(--colorTextDefault); display: flex; align-items: center; white-space: nowrap; text-overflow: ellipsis; white-space: nowrap; /* button reset */ appearance: none; background: transparent; box-shadow: none; text-align: left; } .subComponents_SelectInlineButton_button_52a.subComponents_SelectInlineButton_tiny_10f { font-size: var(--inputFontSizeTiny); line-height: 20px; } .subComponents_SelectInlineButton_button_52a.subComponents_SelectInlineButton_small_08e { font-size: 14px; line-height: 23px; } .subComponents_SelectInlineButton_button_52a.subComponents_SelectInlineButton_placeholder_9b3 { color: var(--colorTextLight); } .subComponents_SelectInlineButton_button_52a.subComponents_SelectInlineButton_isOpen_359, .subComponents_SelectInlineButton_button_52a:hover { border: 1px solid var(--borderDefault); background-color: var(--surfaceBackgroundDefault); } .subComponents_SelectInlineButton_button_52a::after { content: ''; position: absolute; bottom: 0; left: 6px; right: 6px; width: calc(100% - 12px); border-top: 1px solid var(--borderDefault); } .subComponents_SelectInlineButton_button_52a.subComponents_SelectInlineButton_isDisabled_a01 { cursor: not-allowed; color: var(--colorTextLight); background-color: var(--formBackgroundDisabled); } .subComponents_SelectInlineButton_icon_e7b { position: absolute; z-index: 2; top: 50%; right: 6px; transform: translateY(-50%); pointer-events: none; color: var(--colorIconDefault); } @layer atom { .subComponents_SelectInput_inputWrap_9e1 { --iconGap: 32px; position: relative; } .subComponents_SelectInput_flex_d6a { display: flex; flex: 1 1 0; min-width: 0; } .subComponents_SelectInput_selectInput_5fa[type='search'] { background-color: var(--formBackground); /* TODO [darkmode] needs an alias, or --borderFocus needs updating */ --colorButtonFocusRingDefault: var(--colorBlue20); padding-right: var(--iconGap); padding-left: 10px; /* Match the content of the select */ -webkit-appearance: none; /* Fix border-radius issue on Mobile Safari */ cursor: pointer; /* special styles for Select inputs that are embedded in elements that render */ /* their own border and padding, e.g. the compose form (Send As & Templates) */ } .subComponents_SelectInput_selectInput_5fa.subComponents_SelectInput_noBorder_8d9[type='search'] { width: auto; border: 1px solid transparent; box-shadow: none; width: 100%; transition: none; background-color: transparent; /* override */ } .subComponents_SelectInput_selectInput_5fa.subComponents_SelectInput_noBorder_8d9[type='search']:focus { outline: none !important; /* match buttons */ /* TODO: move be the default focus styles for all selects */ border-color: var(--formBorderFocused); } .subComponents_SelectInput_selectInput_5fa.subComponents_SelectInput_hasError_66a[type='search'] { border-color: var(--formBorderDanger); } .subComponents_SelectInput_selectInput_5fa[type='search']:disabled { background-color: var(--formBackgroundDisabled); } /* hide placeholder text when disabled */ .subComponents_SelectInput_selectInput_5fa[type='search']:disabled, .subComponents_SelectInput_selectInput_5fa[type='search']:disabled::placeholder { color: transparent; } /* By default, readonly inputs get a grey BG (global stylesheet) */ /* which we don't want. But we do want disabled readonly inputs to get that BG. */ .subComponents_SelectInput_selectInput_5fa[type='search'][readonly]:not(:disabled) { background-color: var(--formBackground); } .subComponents_SelectInput_tiny_589 .subComponents_SelectInput_selectInput_5fa[type='search'] { height: var(--inputHeightTiny); padding-left: var(--inputHorizontalPaddingTiny); font-size: var(--inputFontSizeTiny); } .subComponents_SelectInput_small_70c .subComponents_SelectInput_selectInput_5fa[type='search'] { height: 32px; font-size: 14px; } .subComponents_SelectInput_medium_bc1 .subComponents_SelectInput_selectInput_5fa[type='search'] { height: 52px; } .subComponents_SelectInput_large_a54 .subComponents_SelectInput_selectInput_5fa[type='search'] { height: 64px; font-size: 16px; } .subComponents_SelectInput_selectInput_5fa[type='search']:focus { outline: none; box-shadow: none; /* color: transparent; // no cursor when focused and not open */ } /** * The element using the .inputTrigger class must completely cover the element using the .selectInput class (z-axis-wise). * Otherwise, users can directly click the .selectInput element which causes issues with the Popover not opening. * Issue reference: https://github.com/closeio/close-ui/issues/11293 */ .subComponents_SelectInput_inputTrigger_79d { border: 1px solid transparent; background: var(--formBackground); /** * `background-clip: content-box` makes the background color not apply to borders. This * is important for letting the .selectInput element's border show while only letting * users click the .inputTrigger element. */ background-clip: content-box; position: absolute; z-index: 1; /* Cover the .selectInput element completely so no users can directly click on it */ top: 0; left: 0; right: 0; bottom: 0; border-radius: var(--baseInputBorderRadius); box-sizing: border-box; display: flex; align-items: center; cursor: pointer; padding: 1px var(--iconGap) 0 10px; color: var(--colorTextDefault); } .subComponents_SelectInput_inputTrigger_79d:disabled, .subComponents_SelectInput_inputTrigger_79d[aria-disabled='true'] { background: transparent; color: var(--colorTextLight); cursor: not-allowed; } .subComponents_SelectInput_tiny_589 .subComponents_SelectInput_inputTrigger_79d { padding-top: 0; padding-left: var(--inputHorizontalPaddingTiny); font-size: var(--inputFontSizeTiny); } .subComponents_SelectInput_small_70c .subComponents_SelectInput_inputTrigger_79d { font-size: 14px; } .subComponents_SelectInput_large_a54 .subComponents_SelectInput_inputTrigger_79d { font-size: 16px; } .subComponents_SelectInput_inputTrigger_79d.subComponents_SelectInput_isOpen_6fa { display: none; } /* account for extra icon here so ellipses don't overlap */ .subComponents_SelectInput_inputTrigger_79d.subComponents_SelectInput_withClearButton_a43 { padding-right: calc(var(--iconGap) + 16px); } .subComponents_SelectInput_triggerText_ef1 { width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .subComponents_SelectInput_triggerText_ef1[data-placeholder='true'] { color: var(--colorTextLight); } .subComponents_SelectInput_inputIcon_e5d { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); right: var(--spacing-12); pointer-events: none; color: var(--colorIconDefault); } .subComponents_SelectInput_inputIcon_e5d.subComponents_SelectInput_faded_d7a { color: var(--colorIconLight); } .subComponents_SelectInput_closeIcon_ebc { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); right: 32px; cursor: pointer; } .subComponents_SelectInput_closeIcon_ebc:hover { color: var(--colorIconLight); } } .subComponents_SelectMenu_menu_453 { overflow-y: auto; /* push in front of popover arrow */ position: relative; /* Inherit border radius from popover component */ border-top-left-radius: inherit; border-top-right-radius: inherit; z-index: 2; /* this will be used by both the fixed header itself (if it exists), and by individual items, so that they can be positioned in a way that prevents `scrollIntoView` from placing them under the fixed header. */ --select-menu-fixed-header-height: 0; /* Prevent the menu from outgrowing the viewport. */ } @media screen and (min-width: 768px) { .subComponents_SelectMenu_menu_453 { max-width: calc(100vw - var(--spacing-24)); } } .subComponents_SelectMenu_menu_453:focus { outline: none; } .subComponents_SelectMenu_menu_453.subComponents_SelectMenu_hasFixedInlineSearch_33d { --select-menu-fixed-header-height: 48px; } .subComponents_SelectMenu_menuItems_3b6 { /* use margin instead of padding, so that it collapses with margins of child elements */ margin: 4px 0; } /* NOTE: item heights are also hardcoded in SelectMenu for the purposes of virtualization. */ .subComponents_Divider_divider_1a8 { border-top: 1px solid var(--borderDefault); margin: 4px 0; /* don't show two next to each other, */ /* don't show if it follows the hidden search input, */ /* don't show if all items above divider have been filtered out */ /* dont' show a divider if it's the last item rendered */ } .subComponents_Divider_divider_1a8 + .subComponents_Divider_divider_1a8, .subComponents_Divider_divider_1a8:first-child, .subComponents_Divider_divider_1a8:last-child { display: none; } .subComponents_GroupHeading_groupItemWrap_061 { overflow: hidden; } /* NOTE: item heights are also hardcoded in SelectMenu for the purposes of virtualization. */ /* Also it's the same padding as in DropdownMenu's Subtitle. Make sure to sync */ .subComponents_GroupHeading_groupItem_b10 { margin: 0; position: relative; padding: 8px 32px 8px 16px; line-height: 16px; } .subComponents_GroupHeading_multiGroupItem_a02 { padding-left: 16px; } .subComponents_GroupHeading_groupToggle_99f { position: absolute; display: flex; top: 0; right: var(--spacing-4); bottom: 0; padding: 0 var(--spacing-8); cursor: pointer; } .subComponents_GroupHeading_count_17d { margin-left: 8px; display: flex; align-self: center; } .subComponents_GroupHeading_groupLabel_b66 { display: flex; align-items: center; cursor: pointer; } .subComponents_GroupHeading_groupLabel_b66.subComponents_GroupHeading_withCount_7ca { min-width: 184px; /* give some extra space on right side for "x selected" label */ } .subComponents_GroupHeading_minimal_288 .subComponents_GroupHeading_groupLabel_b66, .subComponents_GroupHeading_minimal_288 .subComponents_GroupHeading_groupToggle_99f { cursor: default; } .subComponents_InlineSearch_cloakedSearchWrap_a4f { position: absolute; height: 0; overflow: hidden; } .subComponents_InlineSearch_inlineSearchWrap_e10 { position: sticky; top: 0; box-sizing: border-box; height: var(--select-menu-fixed-header-height, 0); overflow: hidden; padding: var(--spacing-8) 0; background-color: var(--bgPopover); border-bottom: 1px solid var(--borderDefault); border-radius: inherit; z-index: 1; } /* Can't use SearchInput here as this maintains the same styles while focussed */ .subComponents_InlineSearch_inlineSearchInput_92f[type='search'], .subComponents_InlineSearch_inlineSearchInput_92f[type='search']:focus { border: none; background-color: var(--bgSearchEnabled); min-width: 200px; } .subComponents_SelectItem_checkbox_38d { /* adjust left padding because there is no checkmark icon to offset from */ /* adjust top & bottom to maintain consistent height (`Checkbox` has a custom non-20px line-height) */ padding: 6px 24px 6px 16px; } .subComponents_SelectItem_checkIcon_fb2 { color: var(--colorIconLight); /* TODO [darkmode] maybe-temporary opacity treatment until we settle on an alias */ opacity: 0; } .subComponents_SelectItem_checkIcon_fb2.subComponents_SelectItem_iconHovered_99b { opacity: 0.3; } .subComponents_SelectItem_checkIcon_fb2.subComponents_SelectItem_iconActive_c88 { color: var(--bgFormControlEnabledChecked); opacity: 1; } .subComponents_SelectPopover_flexWrapper_078 { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; } .subComponents_ConfirmationFooter_footer_155 { /* shared with Popover.Footer */ width: min-content; min-width: 100%; position: relative; box-sizing: border-box; z-index: 2; border-top: 1px solid var(--borderDefault); border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; padding: 12px 16px; display: flex; justify-content: flex-end; gap: 12px; } .Message_root_3a2 { border: 1px solid var(--borderDefault); box-sizing: border-box; color: var(--colorTextDefault); container: message / inline-size; display: flex; font-size: var(--fontSizeBase); position: relative; width: 100%; } .Message_inner_ada { display: flex; flex: 1; gap: var(--spacing-8); } .Message_inner_ada .Message_spacer_b58 { display: none; } .Message_inner_ada.Message_center_7ce { align-items: center; } .Message_inner_ada.Message_top_34a { align-items: flex-start; } @container message (max-width: 500px) { .Message_inner_ada.Message_withRightControls_326 { align-items: flex-start; flex-direction: column; } } @container message (max-width: 500px) { .Message_inner_ada.Message_withRightControlsAndIcon_40f { align-items: flex-start; display: grid; grid-template-columns: auto 1fr; gap: var(--spacing-8); } .Message_inner_ada.Message_withRightControlsAndIcon_40f .Message_spacer_b58 { display: block; } /* * Makes up for line height difference in icon and text * we can't center since this can only be centered with first * line of text */ .Message_inner_ada.Message_withRightControlsAndIcon_40f.Message_iconIsNode_80f svg { padding-top: 2px; } /** * When we are showing the icon in a circle, we need to adjust the * icon's position to be centered with first line of the text */ .Message_inner_ada.Message_withRightControlsAndIcon_40f .Message_icon_e72 { margin-top: -2px; } } .Message_children_864 { flex: 1; } /** Message Variants */ .Message_message_975 { border-radius: var(--baseInputBorderRadius); } .Message_message_975.Message_basePadding_a3f { padding: 11px var(--spacing-16); } .Message_message_975.Message_narrowPadding_610 { padding: var(--spacing-8) var(--spacing-12); } .Message_message_975.Message_dismissible_847.Message_basePadding_a3f { /** base padding plus close button width **/ padding-right: calc(var(--spacing-16) + 30px); } .Message_message_975.Message_dismissible_847.Message_narrowPadding_610 { /** narrow padding plus close button width **/ padding-right: calc(var(--spacing-12) + 40px); } .Message_message_975.Message_dismissible_847.Message_narrowPadding_610 .Message_close_b66 { right: var(--spacing-8); } .Message_bar_d65 { border-left: none; border-right: none; } .Message_bar_d65 .Message_withRightControls_326 { gap: var(--spacing-12); } .Message_bar_d65.Message_basePadding_a3f { padding: var(--spacing-12) var(--spacing-24); } .Message_bar_d65.Message_basePadding_a3f .Message_close_b66 { top: calc(50% - 14px); } @container message (max-width: 500px) { .Message_bar_d65.Message_basePadding_a3f .Message_close_b66 { top: 7px; } } .Message_bar_d65.Message_narrowPadding_610 .Message_close_b66 { right: var(--spacing-8); top: calc(50% - 15px); } @container message (max-width: 500px) { .Message_bar_d65.Message_narrowPadding_610 .Message_close_b66 { top: 3px; } } .Message_bar_d65.Message_basePadding_a3f { padding: var(--spacing-12) var(--spacing-24); } .Message_bar_d65.Message_narrowPadding_610 { padding: var(--spacing-8) var(--spacing-12); } .Message_bar_d65.Message_dismissible_847.Message_basePadding_a3f { /** base padding plus close button width **/ padding-right: calc(var(--spacing-24) + 30px); } .Message_bar_d65.Message_dismissible_847.Message_narrowPadding_610 { /** narrow padding plus close button width **/ padding-right: calc(var(--spacing-12) + 40px); } .Message_bar_d65.Message_dismissible_847.Message_narrowPadding_610 .Message_close_b66 { right: 0; } .Message_banner_862 { border-left: none; border-right: none; border-top: none; /* banner variant does not support `narrow` padding */ } .Message_banner_862 .Message_close_b66 { right: var(--spacing-16); top: 22px; } .Message_banner_862.Message_basePadding_a3f { padding: var(--spacing-24); } /** end Message Variants */ /** Message Types */ .Message_warning_075 { background-color: var(--bgWarnMuted); border-color: var(--borderWarnMuted); } .Message_danger_704 { background-color: var(--bgDangerMuted); border-color: var(--borderDangerMuted); } .Message_info_442 { background-color: var(--bgInformationalMuted); border-color: var(--borderInformationalMuted); } .Message_success_20e { background-color: var(--bgSuccessMuted); border-color: var(--borderSuccessMuted); } .Message_task_ccf { background-color: var(--colorBgMessageTask); border-color: var(--colorBorderMessageTask); } /** end Message Types */ .Message_borderless_228 { border-color: transparent; border-width: 0; } .Message_invisible_79e { display: none; } .Message_close_b66 { color: var(--colorIconDefault); position: absolute; right: var(--spacing-12); top: 10px; } .Message_dismissible_847 { padding-right: var(--spacing-48); } .Message_icon_e72 { align-items: center; background-color: var(--bgLight); border-radius: 50%; color: var(--colorIconDefault); display: inline-flex; height: 24px; justify-content: center; width: 24px; } .Message_rightControls_156 { align-items: center; display: flex; gap: var(--spacing-16); } .MainBody_MainBody_eb8 { flex: 0 1 100%; } .MainContent_MainContent_cec { box-sizing: border-box; display: flex; flex-direction: column; height: 100%; font-size: 13px; line-height: 20px; } .DotSeparator_dotSeparator_ce0 { -webkit-user-select: none; user-select: none; display: inline-block; color: var(--colorIconLight); } .MainFooter_MainFooter_d64 { display: flex; flex-direction: column-reverse; padding: 0; font-size: 13px; line-height: 16px; } @media screen and (min-width: 768px) { .MainFooter_MainFooter_d64 { display: flex; flex-direction: row; align-items: center; border-top: 1px solid rgba(0, 0, 0, 0.1); padding: 34px 0 24px; } } .MainFooter_MainFooter_d64 a { color: #767676; margin: 0 8px; } .MainFooter_MainFooter_d64 a:first-child { margin-left: 0; } .MainFooter_MainFooter_d64 a:last-child { margin-right: 0; } .MainFooter_MainFooter__links_748 { white-space: nowrap; padding-top: 16px; margin: 32px 0 20px; border-top: 1px solid rgba(0, 0, 0, 0.1); } @media screen and (min-width: 768px) { .MainFooter_MainFooter__links_748 { padding: 0; border-top: none; margin: 0; } } .MainFooter_MainFooter__actions_55c { flex: 0 1 100%; display: flex; justify-content: flex-end; } @media screen and (max-width: 767px) { .MainFooter_MainFooter__actions_55c > * { width: 100%; } } .RebrandHeading_heading_c3f { font-weight: 700; font-size: 28px; line-height: 120%; letter-spacing: -0.03em; color: var(--black); }.RebrandHeading_heading_c3f.RebrandHeading_centered_511 { text-align: center; }.RebrandHeading_heading_c3f em { font-style: normal; color: color-mix(in srgb, #fff 60%, var(--black)); }.RebrandHeading_heading_c3f.RebrandHeading_noMargin_c79 { margin: 0; } .OnboardingYourCompany_formIntro_f4e { margin-bottom: 32px; } .OnboardingYourCompany_formIntro_f4e .OnboardingYourCompany_subHeading_828 { margin: 8px 0 0; font-weight: 400; font-size: 14px; line-height: 20px; color: var(--colorMako); } .OnboardingYourCompany_formFields_dc7 { flex: 0 1 100%; display: grid; row-gap: 25px; align-content: flex-start; } @media screen and (min-width: 768px) { .OnboardingYourCompany_formFields_dc7 { grid-template-columns: 1fr 1fr; column-gap: 40px; row-gap: 32px; } } .OnboardingYourCompany_industryLabelMainText_1c3 { font-weight: var(--fontWeightBold); } .LineSeparator_lineSeparator_739 { margin: 0; border-top: 1px solid var(--borderDefault); border-bottom: 0 none; } .LineSeparator_hasSpacing_043 { margin: 24px 0; } .OnboardingProgress_container_fd1 { display: flex; height: 80px; margin-top: var(--spacing-32); flex-direction: row; align-items: center; gap: var(--spacing-16); align-self: stretch; } .OnboardingProgress_logoutContainer_839 { padding: var(--spacing-8) 0 var(--spacing-32) 0; display: flex; flex-direction: row; align-items: center; } .OnboardingProgress_progressBarContainer_c4f { display: flex; flex: 1; } .OnboardingProgress_progressBar_975 { display: flex; width: 192px; justify-content: space-between; height: 10px; background-color: #f2f2f2; border-radius: 5px; overflow: hidden; } .OnboardingProgress_progress_0b6 { background-color: var(--bgInformational); border-radius: 5px; } .OnboardingProgress_actionButtons_3e4 { display: flex; flex-direction: row; } .OnboardingProgress_skip_c34 { margin-left: 16px; cursor: pointer; } .OnboardingProgress_buttonSkeleton_705 { background-color: var(--bgSkeleton); height: 32px; width: 93px; border-radius: 100px; } .AboutCompany_container_6b1 { display: flex; flex: 1; flex-direction: column; }.AboutCompany_container_6b1 > :not(:first-child) { margin-top: 24px; } .Checkbox_CheckboxCard_checkboxCard_085 .Checkbox { padding: var(--spacing-12) var(--spacing-16); border: 1px solid var(--borderDefault); border-radius: var(--baseInputBorderRadius); box-sizing: border-box; background: var(--bgLight); }.Checkbox_CheckboxCard_checkboxCard_085.Checkbox_CheckboxCard_small_727 .Checkbox { padding: var(--spacing-8); }.Checkbox_CheckboxCard_checkboxCard_085.Checkbox_CheckboxCard_small_727 .Checkbox__label { padding-left: 22px; /* 8px from the 16px checkbox */ }.Checkbox_CheckboxCard_checkboxCard_085 .Checkbox:has(input[type='checkbox']:checked:not(:disabled)) { background: var(--bgActiveMuted); border-color: var(--borderActive); }.Checkbox_CheckboxCard_checkboxCard_085 .Checkbox:has(input[type='checkbox']:disabled) { cursor: not-allowed; }.Checkbox_CheckboxCard_checkboxCard_085 .Checkbox:hover:has(input[type='checkbox']:not(:checked)) { border-color: var(--borderHover); background: var(--bgLightMuted); }.Checkbox_CheckboxCard_checkboxCard_085 .Checkbox:has(input[type='checkbox']:focus-visible) { box-shadow: 0px 0px 0px 2px var(--borderFocused); }.Checkbox_CheckboxCard_checkboxCard_085 .Checkbox__label { display: block; line-height: 20px; width: 100%; padding-left: 30px; /* 16px from the 16px checkbox */ }.Checkbox_CheckboxCard_checkboxCard_085 .Checkbox__label::before { margin-left: 0; left: 0; position: absolute; top: 3px; }.Checkbox_CheckboxCard_checkboxCard_085 .Checkbox__label::after { position: absolute; left: 16px; top: 16px; transform: rotate3d(0, 0, 1, 45deg) translateX(-16px); } .RadioGroup_RadioCard_radioCard_5ae { position: relative; padding: var(--spacing-16); border: 1px solid var(--borderDefault); border-radius: var(--baseInputBorderRadius); box-sizing: border-box; background: var(--bgLight); cursor: pointer; } .RadioGroup_RadioCard_radioCard_5ae input { position: absolute; opacity: 0; } .RadioGroup_RadioCard_radioCard_5ae.RadioGroup_RadioCard_small_da3 { padding: var(--spacing-8); } .RadioGroup_RadioCard_radioCard_5ae:has(input:checked) { background: var(--bgActiveMuted); border-color: var(--borderActive); } .RadioGroup_RadioCard_radioCard_5ae:has(input:focus) { border-color: var(--borderActive); } label.RadioGroup_RadioItem_label_9ee { display: flex; align-items: center; margin-bottom: 0; } label.RadioGroup_RadioItem_label_9ee.RadioGroup_RadioItem_positionLeft_9b9 { justify-content: flex-start; } label.RadioGroup_RadioItem_label_9ee.RadioGroup_RadioItem_positionCenter_977 { width: 100%; justify-content: center; } input[type='radio'].RadioGroup_RadioItem_radio_1c5 { display: block; width: 14px; height: 14px; margin: 0 14px 0 0; flex: 0 0 auto; } input.RadioGroup_RadioItem_radio_1c5.RadioGroup_RadioItem_alignTop_c51[type='radio'] { align-self: baseline; margin-top: var(--spacing-4); } .RadioGroup_RadioItem_labelContainer_b41 { flex: 0 1 auto; } label.RadioGroup_LabelWithBorder_label_385 { cursor: pointer; box-sizing: border-box; border-radius: 7px; border: 1px solid var(--borderDefault); }label.RadioGroup_LabelWithBorder_label_385:hover { border-color: var(--borderHover); }label.RadioGroup_LabelWithBorder_label_385.isSelected { background: var(--bgActiveMuted); border-color: var(--borderFocused); } .RadioGroup_RadioButton_input_758 { display: none; } .RadioGroup_RadioButton_button_975 { position: relative; color: var(--colorTextDefault); } .RadioGroup_RadioButton_button_975 .Btn__icon { color: var(--colorIconLight); } .RadioGroup_RadioButton_button_975.isSelected { color: var(--colorTextDefault); } .RadioGroup_RadioButton_button_975.isSelected .Btn__icon { color: var(--colorIconDefault); } .OnboardingAboutYourself_formIntro_a7f { margin-bottom: 32px; } .OnboardingAboutYourself_formIntro_a7f .OnboardingAboutYourself_subHeading_d2f { margin: 8px 0 0; font-weight: 400; font-size: 14px; line-height: 20px; color: var(--colorTextMedium); } .OnboardingAboutYourself_formFields_c4c { flex: 0 1 100%; display: grid; row-gap: 25px; align-content: flex-start; } @media screen and (min-width: 768px) { .OnboardingAboutYourself_formFields_c4c { grid-template-columns: 1fr 1fr; column-gap: 40px; row-gap: 32px; } } .OnboardingAboutYourself_cardGroupContainer_56f { grid-column: 1/3; } .OnboardingAboutYourself_cardGroup_ca3 { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; margin-top: var(--spacing-8); } @media screen and (max-width: 767px) { .OnboardingAboutYourself_cardGroup_ca3 { grid-template-columns: 1fr; } } .OnboardingAboutYourself_cardField_91e { height: 100%; } .OnboardingAboutYourself_cardFieldContainer_fe6 { height: 100%; align-items: center; } .OnboardingAboutYourself_trialIntentButton_166 { margin-top: var(--spacing-4); padding: var(--spacing-4) 0; font-size: var(--fontSizeSmall); color: var(--colorTextMedium); cursor: pointer; } .AboutYourself_container_1ef { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 16px; row-gap: 24px; max-width: 600px; } @media screen and (max-width: 1119px) { .AboutYourself_container_1ef { grid-template-columns: 1fr; } } .AboutYourself_spanHalf_1cf { grid-column: span 1; } .AboutYourself_spanFull_7cd { grid-column: span 2; } @media screen and (max-width: 1119px) { .AboutYourself_spanFull_7cd { grid-column: span 1; } } .AboutYourself_cardGroupContainer_35a { grid-column: 1/3; } @media screen and (max-width: 1119px) { .AboutYourself_cardGroupContainer_35a { grid-template-columns: 1fr; } } .AboutYourself_cardGroup_0b2 { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; margin-top: var(--spacing-8); } @media screen and (max-width: 1119px) { .AboutYourself_cardGroup_0b2 { grid-template-columns: 1fr; } } .AboutYourself_buttonGroup_690 { display: flex; gap: 8px; } .AboutYourself_checkboxGroup_3f4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } @media screen and (max-width: 1119px) { .AboutYourself_checkboxGroup_3f4 { grid-template-columns: 1fr; } } @media (max-width: 600px) { .AboutYourself_checkboxGroup_3f4 { grid-template-columns: 1fr; } } .ExternalLink_externalLink_2bd { display: inline-flex; align-items: center; } .ExternalLink_externalLinkIcon_1e9 { margin-left: 8px; } .ConnectAccountForm_alternativeLink_45c { display: flex; align-items: center; } .ConnectAccountForm_alternativeLink_45c a { font-size: var(--fontSizeSmall); color: var(--colorTextMedium); } .ConnectAccountForm_privacyPolicy_579 { font-size: var(--fontSizeSmall); color: var(--colorTextMedium); } .ConnectAccountForm_privacyPolicyLink_339 a { color: var(--colorTextMedium); font-size: var(--fontSizeSmall); -webkit-text-decoration: underline; text-decoration: underline; } .Form_hiddenSubmit_19a { /* We can't use "display: none" as implicit form submit would NOT work in Safari if there is a readonly element. See https://stackoverflow.com/questions/47559991/html-form-onsubmit-fails-to-fire-on-certain-browsers-with-hidden-submit-button-a */ opacity: 0; visibility: hidden; position: absolute; left: -3000px; } .Form_fetcherForm_2c9 { /* base form have 20px of bottom margin */ margin: 0; } .OptionSwitch_description_a02 { display: block; margin-left: 40px; } .OptionSwitch_disabled_87f { opacity: 0.5; } .ConnectedAccountsModal_StepAddEmailCustom_note_e46 { margin-bottom: 15px; } .ConnectedAccountsModal_StepAddEmailCustom_form_728 { display: grid; grid-gap: 15px; grid-template-columns: 1fr; } @media screen and (min-width: 768px) { .ConnectedAccountsModal_StepAddEmailCustom_form_728 { grid-template-columns: 1fr 1fr; } } .ConnectedAccountsModal_StepAddEmailCustom_syncing_d15 { opacity: 0; transition: opacity 200ms var(--standardCurve); pointer-events: none; } .ConnectedAccountsModal_StepAddEmailCustom_syncing_d15.ConnectedAccountsModal_StepAddEmailCustom_isVisible_3ce { opacity: 1; pointer-events: auto; } .ConnectedAccountsModal_StepAddEmailCustom_manual_647 { font-size: 13px; padding: 0; /* cancel button's default padding */ cursor: pointer; } .ConnectAccountForm_OnboardingConnectWithCustomAccount_connectEmailButton_051 { width: 180px; }.ConnectAccountForm_OnboardingConnectWithCustomAccount_connectEmailButton_051 > span { /* One-off customization agreed with designers to have the button label bold */ font-weight: var(--fontWeightBold); } .Button_OAuthButton_parent_87d { display: inline-flex; padding: 0 !important; } .Button_OAuthButton_text_73a { font-size: 14px; line-height: var(--spacing-16); color: var(--colorTextDefault); border-radius: 0 var(--spacing-16) var(--spacing-16) 0; margin: 0; padding: 6px var(--spacing-16) 6px var(--spacing-4); } .Button_OAuthButton_text_73a.Button_OAuthButton_bold_d78 { font-weight: var(--fontWeightBold); } .Button_OAuthButton_button_a6b { display: grid; grid-template-columns: 36px min-content; align-items: center; } .Button_OAuthButton_button_a6b.Button_OAuthButton_fullWidth_0ef { grid-template-columns: 36px 1fr; width: 100%; } .Button_OAuthButton_button_a6b .Button_OAuthButton_icon_210 { position: unset; } .Button_OAuthButton_button_a6b.Button_OAuthButton_dark_0be .Button_OAuthButton_text_73a { color: var(--colorTextNeutralWhite); padding: 6px var(--spacing-16) 6px var(--spacing-8); } .Button_OAuthButton_button_a6b.Button_OAuthButton_dark_0be.Button_OAuthButton_google_a33 .Button_OAuthButton_text_73a { background: #4285f4; } .Button_OAuthButton_button_a6b.Button_OAuthButton_dark_0be.Button_OAuthButton_microsoft_573 .Button_OAuthButton_text_73a { background: #2f2f2f; } .Button_OAuthButton_centered_b43.Button_OAuthButton_button_a6b { display: flex; justify-content: center; } .Button_OAuthButton_large_bb3 { border-radius: 100px !important; } .Button_OAuthButton_large_bb3 .Button_OAuthButton_button_a6b { height: 44px; } .Button_OAuthButton_large_bb3 .Button_OAuthButton_button_a6b .Button_OAuthButton_text_73a { border-radius: 0 100px 100px 0; font-weight: var(--fontWeightBold); font-size: 16px; line-height: 130%; } .Button_OAuthButton_large_bb3 .Button_OAuthButton_button_a6b .Button_OAuthButton_icon_210 svg { width: 24px; height: 24px; } .LeadAvatar_avatarContainer_b16 { position: relative; display: flex; flex-shrink: 0; box-sizing: border-box; -webkit-user-select: none; user-select: none; } .LeadAvatar_avatarContainer_b16 * { box-sizing: border-box; } .LeadAvatar_avatarContainer_b16.LeadAvatar_mini_7d3 { width: 16px; height: 16px; font-size: 8px; line-height: 8px; } .LeadAvatar_avatarContainer_b16.LeadAvatar_small_1db { width: 20px; height: 20px; font-size: 10px; line-height: 10px; } .LeadAvatar_avatarContainer_b16.LeadAvatar_medium_6fc { width: 32px; height: 32px; font-size: 12px; line-height: 12px; } .LeadAvatar_avatarContainer_b16.LeadAvatar_large_0ed { width: 48px; height: 48px; font-size: 18px; line-height: 24px; } .LeadAvatar_image_d36 { width: 100%; height: 100%; visibility: hidden; } .LeadAvatar_imageLoaded_2dd { border-radius: var(--baseBorderRadius); visibility: visible; } .LeadAvatar_fallback_42b { display: flex; /* removes the element from the flow, preventing the letter to be underlined when used inside a link */ position: absolute; inset: 0; width: 100%; height: 100%; align-items: center; justify-content: center; overflow: hidden; font-weight: var(--fontWeightBold); letter-spacing: 0; text-align: center; text-transform: uppercase; color: var(--colorFillAvatarGray); } .LeadAvatar_fallbackCircle_33e { border-radius: 100%; border: 1px solid var(--colorFillTransparent10); background: var(--surfaceBackgroundDefault); background-color: var(--colorBgAvatarGray); } .LeadAvatar_fallbackIcon_f3a { width: 70%; height: 70%; } .OnboardingCreateLeads_OnboardingCreateLeadsSuggestion_OnboardingCreateLeadsSuggestion_b04 { display: grid; align-items: center; grid-gap: 12px; grid-template-columns: 32px 1fr 14px; } @media screen and (min-width: 768px) { .OnboardingCreateLeads_OnboardingCreateLeadsSuggestion_OnboardingCreateLeadsSuggestion_b04 { grid-gap: 24px; } } .OnboardingCreateLeads_OnboardingCreateLeadsSuggestion_OnboardingCreateLeadsSuggestion__detail_b75 { overflow: hidden; } .OnboardingCreateLeads_OnboardingCreateLeadsSuggestion_OnboardingCreateLeadsSuggestion__name_24e { color: var(--colorTextDefault); word-break: break-word; font-weight: var(--fontWeightBold); font-size: 13px; line-height: 20px; } @media screen and (min-width: 768px) { .OnboardingCreateLeads_OnboardingCreateLeadsSuggestion_OnboardingCreateLeadsSuggestion__name_24e { font-size: 16px; line-height: 20px; } } .OnboardingCreateLeads_OnboardingCreateLeadsSuggestion_OnboardingCreateLeadsSuggestion__email_c0b { color: #767676; overflow: hidden; text-overflow: ellipsis; font-size: 13px; line-height: 20px; } .OnboardingCreateLeads_OnboardingCreateLeadsSuggestion_OnboardingCreateLeadsSuggestion__checkbox_bba { font-size: 13px; line-height: 20px; color: var(--colorTextMedium); pointer-events: none; /* Disable pointer events since container controls select state */ } .components_CenterScroll_centerScroll_25c { display: flex; flex-direction: column; width: 100%; height: 100%; } .components_CenterScroll_header_e24 { flex-shrink: 0; padding-bottom: var(--spacing-16) } .components_CenterScroll_footer_169 { flex-shrink: 0; padding-top: var(--spacing-16) } .components_CenterScroll_content_e45 { flex-grow: 1; overflow-y: auto; } .CreateLeads_selectAll_b3b { cursor: pointer; display: flex; justify-content: flex-end; padding: var(--spacing-12) var(--spacing-16) var(--spacing-12) 0px; -webkit-user-select: none; user-select: none; border-bottom: solid 1px var(--borderLight); } .CreateLeads_selectAllCheckbox_ec5 { pointer-events: none; } .CreateLeads_suggestions_682 { overflow: hidden; list-style: none; padding: 0; margin: 0; margin-top: 0; } .CreateLeads_suggestions_682 > li { cursor: pointer; border-bottom: solid 1px var(--borderLight); padding: 12px; } @media screen and (min-width: 768px) { .CreateLeads_suggestions_682 > li { padding: var(--spacing-12) var(--spacing-16) var(--spacing-12) 0px; } } .CreateLeads_suggestions_682 > li:hover { background: var(--surfaceBackgroundDark); } .MainSubHeadingAlt_MainSubHeadingAlt_567 { font-size: 16px; line-height: 24px; font-weight: 100; margin: 16px 0; color: var(--colorTextDefault); } .CreateLeads_LeadSuggestionsErrorMessage_header_188 { text-align: center; margin-bottom: var(--spacing-24); } @media screen and (min-width: 768px) { .CreateLeads_LeadSuggestionsErrorMessage_header_188 { margin-bottom: var(--spacing-48); } } .CreateLeads_LeadSuggestionsErrorMessage_importActions_1d2 { margin-top: var(--spacing-48); display: grid; grid-gap: var(--spacing-16); } @media screen and (min-width: 768px) { .CreateLeads_LeadSuggestionsErrorMessage_importActions_1d2 { margin-top: var(--spacing-16); display: inline-grid; grid-auto-flow: column; grid-gap: var(--spacing-8); } } .JoinOrCreateOrg_organizationName_f27 { min-width: 0; } .JoinOrCreateOrg_organizationNameWrapper_a60 { min-width: 0; display: flex; flex-grow: 1; align-items: flex-start; gap: var(--spacing-8); } .JoinOrCreateOrg_organizationRow_7c9 { padding: var(--spacing-12) 0; } .JoinOrCreateOrg_createNewOrganization_719 { padding: var(--spacing-16) 0; } .LeadSource_spanFull_fb1 { grid-column: span 2; } @media (max-width: 600px) { .LeadSource_spanFull_fb1 { grid-column: span 1; } } .LeadSource_cardGroupContainer_cd0 { grid-column: 1/3; } .LeadSource_cardGroup_26c { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; margin-top: var(--spacing-8); } @media screen and (max-width: 767px) { .LeadSource_cardGroup_26c { grid-template-columns: 1fr; } } .LeadSource_helpTextContainer_70a { margin-top: var(--spacing-8); } .TeamSignup_roundedArea_e58 { background-color: var(--colorGray02); border-radius: var(--baseInputBorderRadius); padding: var(--spacing-16); } .TeamSignup_subtext_0ca { line-height: 20px; } .TeamSignup_field_baf { flex: 1; } .VerifyEmail_title_983 { margin-top: 32px; } .VerifyEmail_center_02f { display: flex; flex: 1; align-items: center; justify-content: center; flex-direction: column; } .VerifyEmail_section_fb9 { margin-top: var(--spacing-16); margin-bottom: var(--spacing-16); display: flex; align-items: center; justify-content: center; text-align: center; } .CloseLogo_theme_0e6 { color: var(--colorLogoText); } .CloseLogo_white_a9b { color: var(--colorWhite); } .CloseLogo_black_2b5 { color: var(--colorBlack); } .Sidebar_sidebar_df8 { display: none; } @media screen and (min-width: 768px) { .Sidebar_sidebar_df8 { position: sticky; top: 0; height: 100vh; min-height: 580px; overflow: hidden; display: flex; flex-direction: column; align-items: center; flex-basis: 28%; min-width: 240px; max-width: 400px; background: linear-gradient( 180deg, #f8f8f8 0%, rgba(248, 248, 248, 0) 100% ); } } .Sidebar_logo_197 { margin-top: 100px; width: 124px; } .Sidebar_main_e8d { flex: 0 1 100%; display: flex; align-items: center; justify-content: center; position: relative; padding: 40px 55px; z-index: 1; } .Sidebar_mainAlt_6ef { align-items: flex-end; padding-bottom: 82px; } .Sidebar_vector1_fe6, .Sidebar_vector2_c51 { position: absolute; bottom: 0; } .Sidebar_vector1_fe6 { opacity: 0.05; filter: drop-shadow(0 -10px 10px rgba(0, 0, 0, 0.25)); } .Sidebar_vector2_c51 { filter: drop-shadow(0 -5px 10px rgba(0, 0, 0, 0.05)); } .Sidebar_TrustedByCompanies_headline_74e { margin: 0 0 24px; color: var(--gray-50); font-size: 13px; line-height: 15px; font-weight: normal; line-height: 20px; } .Sidebar_TrustedByCompanies_logosRow_9f4 { margin: 0 0 24px; display: flex; justify-content: center; } .Sidebar_TrustedByCompanies_logosRow_9f4:last-child { margin-bottom: 0; } .Sidebar_TrustedByCompanies_logosRowFirst_847, .Sidebar_TrustedByCompanies_logosRowSecond_96c { justify-content: space-around; } .Sidebar_TrustedByCompanies_logo_8e3 { color: var(--colorIconDefault); } .Sidebar_TrustedByCompanies_hipcamp_3a8 svg { width: 114px; height: 16px; } .Sidebar_TrustedByCompanies_studi_7c1 svg { width: 69px; height: 20px; } .Sidebar_TrustedByCompanies_toggl_c2c svg { width: 69px; height: 16px; } .Sidebar_TrustedByCompanies_winit_023 svg { width: 75px; height: 16px; } .Sidebar_TrustedByCompanies_hownd_483 svg { width: 77px; height: 20px; } .OnboardingConnectAccount_subHeader_b13 { font-size: 18px; font-weight: 400; line-height: 24px; margin: 32px 0 0; } .OnboardingConnectAccount_subHeader2_1cd { margin: 8px 0 0; } .OnboardingConnectAccount_illustrationContainer_56e { margin: 34px -22px 20px; } .OnboardingConnectAccount_connectUI_a28 { display: inline-grid; grid-auto-columns: auto; grid-gap: 10px; margin-bottom: 40px; color: #767676; } .OnboardingConnectAccount_connectUI_a28 a { color: inherit; -webkit-text-decoration: underline; text-decoration: underline; } .OnboardingCreateLeads_OnboardingCreateLeads__header_0f7 { text-align: center; margin-bottom: 24px; } @media screen and (min-width: 768px) { .OnboardingCreateLeads_OnboardingCreateLeads__header_0f7 { margin-bottom: 52px; } } @keyframes OnboardingCreateLeads_fadeIn_1d0 { from { opacity: 0; } to { opacity: 1; } } .OnboardingCreateLeads_OnboardingCreateLeads__suggestionsView_b40 { opacity: 0; animation: OnboardingCreateLeads_fadeIn_1d0 1s ease forwards; display: flex; flex-direction: column; } .OnboardingCreateLeads_OnboardingCreateLeads__selectAll_6e4 { cursor: pointer; align-self: flex-end; margin-right: 12px; -webkit-user-select: none; user-select: none; } @media screen and (min-width: 768px) { .OnboardingCreateLeads_OnboardingCreateLeads__selectAll_6e4 { margin-right: 24px; } } .OnboardingCreateLeads_OnboardingCreateLeads__selectAllCheckbox_264 { pointer-events: none; } .OnboardingCreateLeads_OnboardingCreateLeads__selectAllLabel_87f { color: #767676; } .OnboardingCreateLeads_OnboardingCreateLeads__suggestions_8c4 { overflow: hidden; list-style: none; padding: 0; } .OnboardingCreateLeads_OnboardingCreateLeads__suggestions_8c4 > li { cursor: pointer; border-bottom: solid 1px var(--borderLight); padding: 12px; } @media screen and (min-width: 768px) { .OnboardingCreateLeads_OnboardingCreateLeads__suggestions_8c4 > li { padding: 18px 24px; } } .OnboardingCreateLeads_OnboardingCreateLeads__suggestions_8c4 > li:hover { background: var(--surfaceBackgroundDark); } .OnboardingCreateLeads_OnboardingCreateLeads__footer_fd7 { margin: 40px 0; color: #767676; } @media screen and (min-width: 768px) { .OnboardingCreateLeads_OnboardingCreateLeads__footer_fd7 { margin-bottom: 60px; text-align: center; } } .OnboardingCreateLeads_OnboardingCreateLeads__footer_fd7 a { color: #767676; } .OnboardingCreateLeads_OnboardingCreateLeads_error_140 { margin: var(--spacing-16) 0; } @keyframes OnboardingCreateLeads_OnboardingCreateLeadsAnimation_fadeIn_8c5 { from { opacity: 0; } to { opacity: 1; } } @keyframes OnboardingCreateLeads_OnboardingCreateLeadsAnimation_fadeOut_98b { from { opacity: 1; } to { opacity: 0; } } @keyframes OnboardingCreateLeads_OnboardingCreateLeadsAnimation_colorChange_c28 { 0% { background: #f4b563; transform: rotateY(180deg); } 25% { background: #47b178; transform: rotateY(0deg); } 50% { background: #2f577e; transform: rotateY(180deg); } 75% { background: #5cafcd; transform: rotateY(0deg); } 100% { background: #f4b563; transform: rotateY(180deg); } } @keyframes OnboardingCreateLeads_OnboardingCreateLeadsAnimation_dot_f4b { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes OnboardingCreateLeads_OnboardingCreateLeadsAnimation_searchPositionOne_d6b { from { transform: translate3d(0, 0, 0); visibility: visible; } to { transform: translate3d(375%, 0, 0); } } @keyframes OnboardingCreateLeads_OnboardingCreateLeadsAnimation_searchPositionTwo_3f0 { from { transform: translate3d(375%, 0, 0); visibility: visible; } to { transform: translate3d(0, 240%, 0); } } @keyframes OnboardingCreateLeads_OnboardingCreateLeadsAnimation_searchPositionThree_fd4 { from { transform: translate3d(0, 240%, 0); visibility: visible; } to { transform: translate3d(375%, 240%, 0); } } @keyframes OnboardingCreateLeads_OnboardingCreateLeadsAnimation_searchPositionFour_73d { from { transform: translate3d(375%, 240%, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } } @keyframes OnboardingCreateLeads_OnboardingCreateLeadsAnimation_trackAnimationEnd_43e { /* this animation is used purely for isolating when the animation is complete. */ from { color: currentColor; } to { color: currentColor; } } .OnboardingCreateLeads_OnboardingCreateLeadsAnimation_OnboardingCreateLeadsAnimation_983 { display: flex; align-items: center; justify-content: center; position: relative; height: 100%; width: 100%; animation: OnboardingCreateLeads_OnboardingCreateLeadsAnimation_trackAnimationEnd_43e 35.5s; /* this animation is used purely for isolating when the animation is complete. */ } .OnboardingCreateLeads_OnboardingCreateLeadsAnimation_OnboardingCreateLeadsAnimation__setupInbox_868 { position: absolute; max-width: 100%; display: block; text-align: center; animation: OnboardingCreateLeads_OnboardingCreateLeadsAnimation_fadeOut_98b 0.5s ease 14s forwards; } @media screen and (min-width: 768px) { .OnboardingCreateLeads_OnboardingCreateLeadsAnimation_OnboardingCreateLeadsAnimation__setupInbox_868 { padding-bottom: 80px; } } .OnboardingCreateLeads_OnboardingCreateLeadsAnimation_OnboardingCreateLeadsAnimation__inboxIcon_2d5 { opacity: 0; display: inline-block; padding: 32px; border-radius: 50%; animation: OnboardingCreateLeads_OnboardingCreateLeadsAnimation_fadeIn_8c5 1s ease 1s forwards, OnboardingCreateLeads_OnboardingCreateLeadsAnimation_colorChange_c28 8s infinite 1s; } .OnboardingCreateLeads_OnboardingCreateLeadsAnimation_OnboardingCreateLeadsAnimation__inboxIcon_2d5 svg { width: 32px; height: 32px; } .OnboardingCreateLeads_OnboardingCreateLeadsAnimation_OnboardingCreateLeadsAnimation__setupInboxHeading_f38 { font-size: 24px; line-height: 32px; font-weight: 400; opacity: 0; animation: OnboardingCreateLeads_OnboardingCreateLeadsAnimation_fadeIn_8c5 1s ease 1s forwards; } @media screen and (min-width: 768px) { .OnboardingCreateLeads_OnboardingCreateLeadsAnimation_OnboardingCreateLeadsAnimation__setupInboxHeading_f38 { line-height: 40px; } } .OnboardingCreateLeads_OnboardingCreateLeadsAnimation_OnboardingCreateLeadsAnimation__setupInboxHeadingDotOne_bbd, .OnboardingCreateLeads_OnboardingCreateLeadsAnimation_OnboardingCreateLeadsAnimation__setupInboxHeadingDotTwo_199, .OnboardingCreateLeads_OnboardingCreateLeadsAnimation_OnboardingCreateLeadsAnimation__setupInboxHeadingDotThree_96a { opacity: 0; animation: OnboardingCreateLeads_OnboardingCreateLeadsAnimation_dot_f4b 1s ease-in-out infinite; } .OnboardingCreateLeads_OnboardingCreateLeadsAnimation_OnboardingCreateLeadsAnimation__setupInboxHeadingDotOne_bbd { animation-delay: 0s; } .OnboardingCreateLeads_OnboardingCreateLeadsAnimation_OnboardingCreateLeadsAnimation__setupInboxHeadingDotTwo_199 { animation-delay: 0.25s; } .OnboardingCreateLeads_OnboardingCreateLeadsAnimation_OnboardingCreateLeadsAnimation__setupInboxHeadingDotThree_96a { animation-delay: 0.5s; } .OnboardingCreateLeads_OnboardingCreateLeadsAnimation_OnboardingCreateLeadsAnimation__findLeads_f9b { position: absolute; width: 604px; max-width: 100%; opacity: 0; text-align: center; animation: OnboardingCreateLeads_OnboardingCreateLeadsAnimation_fadeIn_8c5 1s ease 14.5s forwards, OnboardingCreateLeads_OnboardingCreateLeadsAnimation_fadeOut_98b 1s ease 34.5s forwards; } @media screen and (min-width: 768px) { .OnboardingCreateLeads_OnboardingCreateLeadsAnimation_OnboardingCreateLeadsAnimation__findLeads_f9b { padding-bottom: 80px; } } .OnboardingCreateLeads_OnboardingCreateLeadsAnimation_OnboardingCreateLeadsAnimation__findLeadsHeading_96e { font-size: 24px; line-height: 32px; font-weight: 400; opacity: 0; animation: OnboardingCreateLeads_OnboardingCreateLeadsAnimation_fadeIn_8c5 1s ease 16s forwards; } @media screen and (min-width: 768px) { .OnboardingCreateLeads_OnboardingCreateLeadsAnimation_OnboardingCreateLeadsAnimation__findLeadsHeading_96e { line-height: 40px; } } .OnboardingCreateLeads_OnboardingCreateLeadsAnimation_OnboardingCreateLeadsAnimation__findLeadsSubheading_b4d { font-size: 16px; line-height: 24px; font-weight: 100; opacity: 0; animation: OnboardingCreateLeads_OnboardingCreateLeadsAnimation_fadeIn_8c5 1s ease 17.5s forwards; } .OnboardingCreateLeads_OnboardingCreateLeadsAnimation_OnboardingCreateLeadsAnimation__inboxAnimation_b00 { position: relative; margin-top: 40px; opacity: 0; animation: OnboardingCreateLeads_OnboardingCreateLeadsAnimation_fadeIn_8c5 1s ease 19s forwards; max-width: 100%; } .OnboardingCreateLeads_OnboardingCreateLeadsAnimation_OnboardingCreateLeadsAnimation__inboxAnimation_b00 svg { max-width: 100%; } .OnboardingCreateLeads_OnboardingCreateLeadsAnimation_OnboardingCreateLeadsAnimation__inbox_4c6 { opacity: 0; animation: OnboardingCreateLeads_OnboardingCreateLeadsAnimation_fadeIn_8c5 1s ease 19s forwards; } .OnboardingCreateLeads_OnboardingCreateLeadsAnimation_OnboardingCreateLeadsAnimation__search_c81 { position: absolute; top: 28%; left: 5%; opacity: 0; width: 7%; animation: OnboardingCreateLeads_OnboardingCreateLeadsAnimation_fadeIn_8c5 1s ease 20.5s forwards, OnboardingCreateLeads_OnboardingCreateLeadsAnimation_searchPositionOne_d6b 0.75s ease 22s forwards, OnboardingCreateLeads_OnboardingCreateLeadsAnimation_searchPositionTwo_3f0 0.75s ease 23s forwards, OnboardingCreateLeads_OnboardingCreateLeadsAnimation_searchPositionThree_fd4 0.75s ease 24s forwards, OnboardingCreateLeads_OnboardingCreateLeadsAnimation_searchPositionFour_73d 0.75s ease 25s forwards, OnboardingCreateLeads_OnboardingCreateLeadsAnimation_searchPositionOne_d6b 0.75s ease 26s forwards, OnboardingCreateLeads_OnboardingCreateLeadsAnimation_searchPositionTwo_3f0 0.75s ease 27s forwards, OnboardingCreateLeads_OnboardingCreateLeadsAnimation_searchPositionThree_fd4 0.75s ease 28s forwards, OnboardingCreateLeads_OnboardingCreateLeadsAnimation_searchPositionFour_73d 0.75s ease 29s forwards, OnboardingCreateLeads_OnboardingCreateLeadsAnimation_searchPositionOne_d6b 0.75s ease 30s forwards, OnboardingCreateLeads_OnboardingCreateLeadsAnimation_searchPositionTwo_3f0 0.75s ease 31s forwards, OnboardingCreateLeads_OnboardingCreateLeadsAnimation_searchPositionThree_fd4 0.75s ease 32s forwards, OnboardingCreateLeads_OnboardingCreateLeadsAnimation_fadeOut_98b 1s ease 33.5s forwards; } .OnboardingJoinCreateOrganization_subHeading_c16 { margin: 0; font-weight: 400; font-size: 14px; line-height: 20px; color: var(--colorTextLight); } .Onboarding_OnboardingStepTextIndicators_indicators_d0a { padding: 0; align-self: flex-start; margin: 147px 0 0; display: grid; grid-auto-flow: row; grid-gap: 36px; list-style: none; font-size: 14px; line-height: 20px; /* min-width must be slightly more than enough to fit the largest indicator. Without this when the widest indicator is selected the x position will shift due to wider bold text. */ width: 120px; } .Onboarding_OnboardingStepTextIndicators_indicator_031 { display: flex; align-items: center; gap: var(--spacing-8); white-space: nowrap; font-weight: 400; transition: opacity 0.3s; } .Onboarding_OnboardingStepTextIndicators_completed_ed4 { color: var(--colorBrandGreen); } .Onboarding_OnboardingStepTextIndicators_active_476 { color: var(--colorIconDefault); } .Onboarding_OnboardingStepTextIndicators_upcoming_9f0 { color: var(--colorIconLight); } .OnboardingTeamSignup_roundedArea_8c6 { background-color: var(--colorGray02); border-radius: var(--baseInputBorderRadius); padding: var(--spacing-16); } .OnboardingTeamSignup_subtext_f0a { line-height: 20px; } .OnboardingVerifyEmail_verifyEmail_633 { display: flex; flex-direction: column; height: 85%; justify-content: center; } .OnboardingVerifyEmail_verifyEmailImage_dde { display: flex; margin-bottom: 50px; } .OnboardingVerifyEmail_verifyEmailImage_dde > svg { width: 162px; margin: auto; } .OnboardingVerifyEmail_failedVerificationImage_7ed { display: flex; margin: 0 auto 50px; width: 96px; } .OnboardingVerifyEmail_body_913 { color: var(--colorTextMedium); text-align: center; font-size: 14px; line-height: 20px; } .OnboardingVerifyEmail_resend_cb2 { margin-top: 50px; transition: opacity 0.3s; opacity: 1; } .OnboardingVerifyEmail_resendDisabled_18d { opacity: 0; } .LegacyBox_box_2ca { box-sizing: border-box; }.LegacyBox_box_2ca *, .LegacyBox_box_2ca *::before, .LegacyBox_box_2ca *::after { box-sizing: border-box; } .layout_main_fb1 { --boxShadow: 0px 10px 50px rgba(43, 46, 51, 0.05); --logoHeight: 80px; display: flex; width: 100vw; } .layout_content_0f8 { background: var(--white); flex: 0 1 100%; display: flex; flex-direction: column; } @media screen and (min-width: 768px) { .layout_content_0f8 { flex: 0 1 40%; } } .layout_logoContainer_5d3 { background: var(--white); box-shadow: var(--boxShadow); } @media screen and (min-width: 768px) { .layout_logoContainer_5d3 { box-shadow: unset; height: var(--logoHeight); } } .layout_logo_56a { flex: 0 1 var(--logoHeight); width: 100px; margin: 26px auto; color: var(--black); } @media screen and (min-width: 768px) { .layout_logo_56a { margin-left: var(--spacing-64); } } .layout_form_f86 { margin: auto 20px; padding: 0 16px; display: flex; justify-content: center; align-items: center; flex: 1; } @media screen and (min-width: 768px) { .layout_form_f86 { max-width: 324px; margin: 20px auto calc(20px + var(--logoHeight)); } } .layout_illustration_3d3 { background: linear-gradient(180deg, #f8f8f8 0%, var(--white) 100%); display: none; } @media screen and (min-width: 768px) { .layout_illustration_3d3 { flex: 0 1 60%; display: flex; flex-direction: column; } } .layout_illustrationContent_1bf { display: flex; flex-direction: column; justify-content: center; align-items: center; flex: 0 1 100%; } .layout_illustrationContent_1bf.layout_ilustrationWithLogin_6af { flex: 0 1 calc(100% - var(--logoHeight)); margin-bottom: var(--logoHeight); } .layout_loginLink_8f1 { font-weight: var(--fontWeightBold); font-size: 14px; text-align: right; flex: 0 1 80px; margin: 31px 64px; } .layout_loginLink_8f1 a { color: var(--black); } .AlreadyUser_loginLink_3f9 { font-weight: var(--fontWeightBold); font-size: 14px; flex: 0 1 80px; }.AlreadyUser_loginLink_3f9.AlreadyUser_alignRight_7c3 { text-align: right; }.AlreadyUser_loginLink_3f9.AlreadyUser_alignCenter_38c { text-align: center; }.AlreadyUser_loginLink_3f9 a { color: var(--black); }.AlreadyUser_loginLink_3f9 strong { margin-left: 16px; } .RegistrationScreen_subtitle_8af { margin: var(--spacing-8) 0 0; font-size: 14px; line-height: 20px; text-align: center; } .RegistrationScreen_terms_7cb { margin: 24px 0 0; } .RegistrationScreen_terms_7cb a { color: inherit; -webkit-text-decoration: underline; text-decoration: underline; } @media screen and (min-width: 768px) { .RegistrationScreen_terms_7cb.RegistrationScreen_withMargin_42d { margin-top: 40px; } } .RegistrationScreen_logo_b9e { margin-bottom: 32px; width: 124px; } @media screen and (min-width: 768px) { .RegistrationScreen_logo_b9e { display: none; } } .RegistrationScreen_withGoogleSSO_943 { max-width: 358px; margin: 0 auto; } @media screen and (min-width: 768px) { .RegistrationScreen_withGoogleSSO_943 { margin: 0; } } .RegistrationScreen_arrowRightCircle_696 { background: var(--colorBrandGreen); width: 48px; height: 48px; border-radius: 24px; display: flex; justify-content: center; align-items: center; margin: 30px auto; } .RegistrationScreen_arrowRightCircle_696 svg { width: 30px; height: 30px; display: block; fill: var(--colorIconNeutralWhite); } .RegistrationScreen_loginLinkMobile_2e7 { position: sticky; bottom: 0; height: 50px; background: var(--white); border-top: 1px solid rgba(0, 0, 0, 0.05); text-align: center; box-sizing: border-box; margin-top: var(--spacing-16); } @media screen and (min-width: 768px) { .RegistrationScreen_loginLinkMobile_2e7 { display: none; } } .RegistrationScreen_SignUpForm_main_0ec { margin-top: 40px; } @media screen and (min-width: 768px) { .RegistrationScreen_SignUpForm_main_0ec { margin-top: 32px; } } .RegistrationScreen_SignUpForm_inputs_4a7 { max-width: 100%; } @media screen and (min-width: 768px) { .RegistrationScreen_SignUpForm_inputs_4a7 { max-width: 320px; } .RegistrationScreen_SignUpForm_inputs_4a7.RegistrationScreen_SignUpForm_fluid_584 { max-width: unset; } } .RegistrationScreen_SignUpForm_checkbox_06d { font-size: 13px; line-height: 16px; color: var(--colorTextMedium); } .RegistrationScreen_SignUpForm_cta_070 { display: flex; align-items: center; margin: 32px 0; } .RegistrationScreen_SignUpForm_cta_070 button { width: 100%; } .RegistrationScreen_SignUpForm_or_2c8 { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; grid-column-gap: var(--spacing-16); margin: var(--spacing-16) 0; font-weight: 400; } .RegistrationScreen_SignUpForm_or_2c8 .RegistrationScreen_SignUpForm_text_589 { font-size: 12px; color: color-mix(in srgb, #fff 60%, var(--black)); } .InputField_label_f59, .InputField_error_532 { font-size: 11px; line-height: 140%; } .InputField_label_f59 { display: flex; flex-direction: column; } .InputField_labelText_abe { color: color-mix(in srgb, #fff 40%, var(--black)); margin-bottom: 4px; } .InputField_fieldContainer_822 { display: flex; } .InputField_input_e92 { --inputBg: #f8f8f8; width: auto; background: var(--inputBg); border-radius: var(--baseInputBorderRadius); padding: var(--spacing-12) var(--spacing-16); border: 1px solid var(--inputBg); box-shadow: none; outline: none; } .InputField_input_e92:focus { border: 1px solid var(--colorBrandBlue); } .InputField_input_e92.InputField_inputError_c35 { border: 1px solid var(--borderDanger); } .InputField_error_532 { color: var(--failurePrimaryColor); margin-top: var(--spacing-4); } .StatusPageWidget_indicator_602 { font-size: 13px; color: var(--colorTextDefault); }.StatusPageWidget_indicator_602::before { content: ''; border-radius: 100%; width: 8px; height: 8px; display: inline-block; background-color: var(--borderDefault); margin-right: 8px; }.StatusPageWidget_indicator_602.StatusPageWidget_indicatorNone_952::before { background-color: var(--fillSuccess); }.StatusPageWidget_indicator_602.StatusPageWidget_indicatorMinor_4a4::before { background-color: var(--fillWarn); }.StatusPageWidget_indicator_602.StatusPageWidget_indicatorMajor_de8::before, .StatusPageWidget_indicator_602.StatusPageWidget_indicatorCritical_451::before { background-color: var(--fillDanger); } .ErrorPage_ErrorPageSimple_fullHeight_4ac { height: 100%; } .ErrorPage_ErrorPageSimple_page_f57 { /* TODO [darkmode] need a theme-specific gradient */ --gradientStartColor: #f2f3f9; --gradientEndColor: rgba(242, 243, 249, 0); position: relative; background: var(--surfaceBackgroundDefault); display: flex; flex-direction: column; flex: 1 1 auto; justify-content: center; align-items: center; /* eat through .app-content */ } @media screen and (min-width: 768px) { .ErrorPage_ErrorPageSimple_page_f57:not(.ErrorPage_ErrorPageSimple_noAppContent_736) { margin: calc(-1 * var(--spacing-24)); } } /* very similar to EmptyState! */ .ErrorPage_ErrorPageSimple_page_f57::before { content: ' '; position: absolute; bottom: 0; left: 0; right: 0; height: 58%; clip-path: polygon(0% 45px, 100% 0, 100% 100%, 0% 100%); background: linear-gradient( 180deg, var(--gradientStartColor) -8%, var(--gradientEndColor) 20% ); } .ErrorPage_ErrorPageSimple_content_9e9 { position: relative; z-index: 1; max-width: 486px; padding: var(--spacing-32); text-align: center; } .RegistrationScreen_RegistrationWithInviteScreen_container_307 { width: 100%; } .RegistrationScreen_RegistrationWithInviteScreen_logo_e3d { width: 130px; } /*# sourceMappingURL=https://srcmaps.close.com/srcmaps/signup~f075b844.a6fb315b0f23b489ed13.js.map*/