@layer reset,base,atom; /** * 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(--colorGray70); --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); --colorBgOpportunityActive: var(--colorGold20); --colorTextOpportunityActive: var(--colorGray80); --colorBgOpportunityWon: var(--colorGreen20); --colorTextOpportunityWon: var(--colorGray80); --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(--colorGreen30); --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); --colorBgOpportunityActive: var(--colorGold80); --colorTextOpportunityActive: var(--colorGold20); --colorBgOpportunityWon: var(--colorGreen80); --colorTextOpportunityWon: var(--colorGreen20); --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%); } :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 { 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 { 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); } .Btn--primary:active:not([disabled]), .Btn--primary:active:not([disabled]):hover, .Btn--primary:active:not([disabled]):focus { background-color: var(--bgButtonPrimaryPressed); } .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; } #main, #main > .container { width: 100%; height: 100%; } .container { display: flex; flex-direction: column; } .container .content-area-wrap { display: flex; flex-direction: row; flex: 1 1 auto; overflow: hidden; /* necessary for Firefox scrolling to work */ } .container .content-area-wrap .content-area { display: flex; flex-direction: column; flex: 1 1 auto; background: var(--surfaceBackgroundMedium); min-width: 0; position: relative; } .container .content-area-wrap .content-area .top-shadow { position: relative; display: flex; flex-direction: column; width: 100%; flex: 0 0 auto; box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.05); } .container .content-area-wrap .content-area .app-top { flex: 0 0 auto; } .container .content-area-wrap .content-area .app-top .active-call, .container .content-area-wrap .content-area .app-top .error-message { /* See active-call.less for nested styles for active call bar */ font-size: 16px; line-height: 37px; padding: 0 20px; } .container .content-area-wrap .content-area .app-top .error-message { background: var(--bgDangerMuted); color: var(--colorTextDanger); border-bottom: 1px solid var(--borderDangerMuted); } .container .content-area-wrap .content-area .app-top .error-message .Btn { margin-top: 4px; } .container .content-area-wrap .content-area .app-content { display: flex; flex-direction: column; flex: 1 1 auto; position: relative; overflow-y: auto; -webkit-overflow-scrolling: touch; /* for iPad */ overscroll-behavior-y: none; /* prevent scroll bounce on Safari */ height: 100%; padding: 24px; } /* For pages that don't include the full app layout, such as login, register, etc. */ .external { box-sizing: border-box; padding: 35px; } .page-search .list-keyboard-navigable tr.active > :first-child:before { width: 2px; } .page-search .list-leads .loader { margin-top: 5px; } .page-search .list-leads table { border: none; margin-bottom: 10px; table-layout: fixed; font-size: 13px; } .page-search .list-leads table td { cursor: pointer; background: var(--bgTableCellDefault); } .page-search .list-leads table td.lead-link { color: var(--colorLinkDefault); } .page-search .list-leads table td.numeric { text-align: right; } .page-search .list-leads table td > .users-loading { color: #777; } .page-search .list-leads table td, .page-search .list-leads table th { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; border-color: var(--borderLight); } .page-search .list-leads table th { border-bottom: solid 1px var(--borderDefault); } .page-search .list-leads table tr:first-child td { border-top-width: 0; } .page-search .list-leads table tr td:first-child, .page-search .list-leads table tr th:first-child { /* overwrite bootstrap defaults */ border-left: none; border-radius: 0 !important; } .page-search .list-leads table th:not(.contact-buttons), .page-search .list-leads table td:not(.contact-buttons) { padding-right: 16px; padding-left: 16px; } .page-search .list-leads table td:not(.contact-buttons) { padding-top: 6px; padding-bottom: 6px; } .page-search .list-leads table th { font-weight: var(--fontWeightBold); font-size: 14px; line-height: 24px; background-image: none; } .page-search .list-leads table .sortable { --sorting-space: 12px; cursor: pointer; /* If sorting in descending order, centerize the downwards arrow and hide the other one. */ /* If sorting in ascending order, centerize the upwards arrow and hide the other one. */ } .page-search .list-leads table .sortable.is-narrow .sortable-value { padding-right: 0; } .page-search .list-leads table .sortable.is-narrow .sortable-value::before, .page-search .list-leads table .sortable.is-narrow .sortable-value::after { display: none; } .page-search .list-leads table .sortable.is-narrow:hover .sortable-value { /* Make space for sort arrows. */ padding-right: var(--sorting-space); } .page-search .list-leads table .sortable.is-narrow:hover .sortable-value::before, .page-search .list-leads table .sortable.is-narrow:hover .sortable-value::after { display: block; } .page-search .list-leads table .sortable.is-narrow.is-sortingAsc .sortable-value { /* Make space for sort arrows. */ padding-right: var(--sorting-space); } .page-search .list-leads table .sortable.is-narrow.is-sortingAsc .sortable-value::after { display: block; } .page-search .list-leads table .sortable.is-narrow.is-sortingAsc .sortable-value::before { display: none; } .page-search .list-leads table .sortable.is-narrow.is-sortingDesc .sortable-value { /* Make space for sort arrows. */ padding-right: var(--sorting-space); } .page-search .list-leads table .sortable.is-narrow.is-sortingDesc .sortable-value::after { display: none; } .page-search .list-leads table .sortable.is-narrow.is-sortingDesc .sortable-value::before { display: block; } .page-search .list-leads table .sortable.is-sortingAsc .sortable-value::before { display: none; } .page-search .list-leads table .sortable.is-sortingAsc .sortable-value::after { top: 10px; } .page-search .list-leads table .sortable.is-sortingDesc .sortable-value::before { top: 10px; } .page-search .list-leads table .sortable.is-sortingDesc .sortable-value::after { display: none; } .page-search .list-leads table .sortable.is-sortingAsc .sortable-value::before, .page-search .list-leads table .sortable.is-sortingDesc .sortable-value::before, .page-search .list-leads table .sortable:hover .sortable-value::before { border-top-color: #111; } .page-search .list-leads table .sortable.is-sortingAsc .sortable-value::after, .page-search .list-leads table .sortable.is-sortingDesc .sortable-value::after, .page-search .list-leads table .sortable:hover .sortable-value::after { border-bottom-color: #111; } .page-search .list-leads table .sortable .sortable-value { display: block; position: relative; padding-right: 12px; /* Make space for sort arrows. */ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; /* Sort arrows. before */ } .page-search .list-leads table .sortable .sortable-value::before, .page-search .list-leads table .sortable .sortable-value::after { content: ''; position: absolute; right: 0; display: inline-block; width: 0; height: 0; border-right: 4px solid transparent; border-left: 4px solid transparent; } .page-search .list-leads table .sortable .sortable-value::before { top: 13px; border-top: 4px solid var(--colorIconLight); } .page-search .list-leads table .sortable .sortable-value::after { top: 7px; border-bottom: 4px solid var(--colorIconLight); } .settingsGlobalStyles .phone-settings .phone-settings-alert { display: none; } .settingsGlobalStyles .phone-settings ul.list { margin-left: 0px; } .settingsGlobalStyles .phone-settings ul.list li { list-style: none; margin-top: 10px; } .settingsGlobalStyles .phone-settings h4 { line-height: 26px; /* 17.5px from Bootstrap */ width: 402px; } .settingsGlobalStyles .phone-settings p { width: 402px; margin-bottom: 25px; } .settingsGlobalStyles .phone-settings hr { margin-top: 30px; margin-bottom: 30px; border-top-color: rgba(0, 0, 0, 0.1); } .settingsGlobalStyles .phone-settings .popover { width: 500px; } .settingsGlobalStyles .phone-settings .popover p { width: auto; } .settingsGlobalStyles .phone-settings label { margin-top: 5px; } .settingsGlobalStyles .phone-settings .hangup-recording-upload { position: relative; } .settingsGlobalStyles .phone-settings .hangup-recording-upload input[type='file'] { height: auto; line-height: 1; } .settingsGlobalStyles .phone-settings .group-numbers-empty-state:not(:empty) { margin-bottom: 16px; } .settingsGlobalStyles .phone-settings .microcopy { font-size: 13px; color: var(--colorTextMedium); } .settingsGlobalStyles .phone-settings .loading { margin-top: 20px; display: none; } .settingsGlobalStyles .phone-settings .phone-number { width: 400px; border: solid 1px var(--borderDefault); border-radius: 7px; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05); padding: 0; } .settingsGlobalStyles .phone-settings .phone-number:hover { box-shadow: var(--shadowLevel2); } .settingsGlobalStyles .phone-settings .phone-number .phoneLabelAndNumber { display: flex; gap: 6px; height: 20px; align-items: center; } .settingsGlobalStyles .phone-settings .phone-number .phoneLabelAndNumber .phoneLabel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; color: #303030; /* Heading/H5 */ font-size: 14px; font-style: normal; font-weight: 600; line-height: 18px; } .settingsGlobalStyles .phone-settings .phone-number .phoneLabelAndNumber .phoneNumber { color: #303030; /* UI / Base - Regular */ font-size: 14px; font-style: normal; font-weight: 400; line-height: 16px; } .settingsGlobalStyles .phone-settings .phone-number .phoneNumberSpace { flex-grow: 1; } .settingsGlobalStyles .phone-settings .phone-number .js-navigate-to-edit { cursor: pointer; } .settingsGlobalStyles .phone-settings .phone-number:hover .edit-link, .settingsGlobalStyles .phone-settings .phone-number:hover .edit-label, .settingsGlobalStyles .phone-settings .phone-number:hover .edit-page-icon { display: inline-block !important; } .settingsGlobalStyles .phone-settings .phone-number .header { height: 45px; border-bottom: solid 1px var(--borderDefault); padding: 0 16px; margin-bottom: 0; border-radius: 4px 4px 0 0; display: flex; flex-direction: row; align-items: center; } .settingsGlobalStyles .phone-settings .phone-number .header h5 { display: inline; margin-bottom: 0; } .settingsGlobalStyles .phone-settings .phone-number .header .edit-label, .settingsGlobalStyles .phone-settings .phone-number .header .edit-page-icon, .settingsGlobalStyles .phone-settings .phone-number .header .delete-number { outline: 0; color: #bbb; position: relative; /* for each vertical icon position tweaks without affecting header height */ } .settingsGlobalStyles .phone-settings .phone-number .header .edit-label:hover, .settingsGlobalStyles .phone-settings .phone-number .header .edit-page-icon:hover, .settingsGlobalStyles .phone-settings .phone-number .header .delete-number:hover { color: #777; } .settingsGlobalStyles .phone-settings .phone-number .header .delete-number-disabled { color: #d8d8d8; } .settingsGlobalStyles .phone-settings .phone-number .header .edit-label, .settingsGlobalStyles .phone-settings .phone-number .header .edit-page-icon { display: none; margin: 0 5px; top: 1px; /* tweak icon position */ } .settingsGlobalStyles .phone-settings .phone-number .no-config { font-size: 13px; padding: 16px; } .settingsGlobalStyles .phone-settings .phone-number .config { border-radius: 0 0 7px 7px; padding: 16px; } .settingsGlobalStyles .phone-settings .phone-number .config > div:not(:last-child) { margin-bottom: 12px; } .settingsGlobalStyles .phone-settings .phone-number .config > div, .settingsGlobalStyles .phone-settings .phone-number .config > div h6 { color: #303030; font-size: 14px; font-style: normal; font-weight: 400; line-height: 16px; } .settingsGlobalStyles .phone-settings .phone-number .config > div h6 { margin: 2px 0 0 0; display: inline-block; } .settingsGlobalStyles .phone-settings .phone-number .config > div .enable-link { margin-left: 3px; } .settingsGlobalStyles .phone-settings .phone-number .config > div .edit-link { display: none; margin-left: 5px; color: #bbb; } .settingsGlobalStyles .phone-settings .phone-number .config > div .edit-link:hover { color: #777; } .settingsGlobalStyles .phone-settings .phone-number .config > div > p { margin-bottom: 5px; } .settingsGlobalStyles .phone-settings .phone-number .config > div.group-number-members { display: flex; align-items: center; } .settingsGlobalStyles .phone-settings .phone-number .config > div.group-number-members .pic { display: inline-block; vertical-align: -5px; } .settingsGlobalStyles .phone-settings .phone-number .config > div.group-number-members .pic:first-of-type { margin-left: 3px; } .settingsGlobalStyles .phone-settings .phone-number .config > div.sms-mms-disabled-warning { margin-top: 3px; } .settingsGlobalStyles .phone-settings .phone-number .config > div.byoc-info { margin-top: 3px; } .settingsGlobalStyles .phone-settings .phone-number em { font-style: normal; font-weight: normal; margin-left: 5px; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .settingsGlobalStyles .phone-settings .phone-number audio { margin: 0 10px 5px 10px; width: calc(100% - 20px); } .label-append { margin-left: 5px; font-style: normal; font-weight: normal; color: var(--colorTextMedium); } .no-permission-modal-header { border-bottom: 0; } .no-permission-modal-footer { border-top: 0; } .settingsGlobalStyles { /* TODO: use component when migrating the screen to React */ /* adapted from http://css-tricks.com/css3-progress-bars/ */ } .settingsGlobalStyles h3 { margin: 0 0 8px 0; font-size: 18px; line-height: 24px; font-weight: var(--fontWeightBold); } .settingsGlobalStyles h3 + p { color: var(--gray-50); } .settingsGlobalStyles .manage-organizations li { line-height: 30px; } .settingsGlobalStyles .manage-organizations .leave { margin: -5px 0 0 15px; } .settingsGlobalStyles .org-settings { position: relative; } .settingsGlobalStyles .org-settings .integration-links .table { width: auto; } .settingsGlobalStyles .org-settings .integration-links .add-button { margin-bottom: 10px; } .settingsGlobalStyles .audio-level { position: relative; margin: 6px 0; background: #999; border-radius: 12px; padding: 1px; width: 220px; } .settingsGlobalStyles .audio-level .meter { height: 12px; position: relative; background: var(--surfaceBackgroundDefault); border-radius: 12px; box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3); } .settingsGlobalStyles .audio-level .meter > span { display: block; height: 100%; border-top-right-radius: 12px; border-bottom-right-radius: 12px; border-top-left-radius: 12px; border-bottom-left-radius: 12px; box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4); position: relative; overflow: hidden; } .settingsGlobalStyles .audio-level .yellow > span { background-color: #ff3; background-image: linear-gradient(#ff3, #cc3); } .settingsGlobalStyles .audio-level .red > span { background-color: #ff0; background-image: linear-gradient(#f99, #f33); } .settingsGlobalStyles .audio-level .green > span { background-color: #6f6; background-image: linear-gradient(#6f6, #393); } .settingsGlobalStyles .audio-volume input[type='range'] { margin-top: -4px; margin-bottom: 6px; width: 220px; } .settingsGlobalStyles .audio-volume input[type='range'] input[type='range'] { -webkit-appearance: none !important; background: red; height: 4px; background-color: #ccc; border: 1px solid #999; border-radius: 12px; } .settingsGlobalStyles .audio-volume input[type='range'] input[type='range']::-webkit-slider-thumb { -webkit-appearance: none !important; height: 16px; width: 16px; border: 1px solid #999; box-shadow: 0 0 3px #000; border-radius: 14px; background-color: white; } .settingsGlobalStyles .audio-adjust { display: none; } .settingsGlobalStyles .audio-adjust label { font-weight: normal; } .settingsGlobalStyles .audio-adjust input { margin-top: -4px; } .sortable-dragging { border-radius: 5px; border: solid 1px #ccc; } .opportunities-page .filters { display: flex; margin-bottom: 10px; } .opportunities-page .filters .filter { margin-right: 4px; } .opportunities-page .filters .filter.groupByFilter, .opportunities-page .filters .filter.sortByFilter { display: inline-block; } .opportunities-page .filters .divider-left { display: inline-block; margin-left: 5px !important; padding-left: 8px; } .opportunities-page .filters .pull-right { margin-left: auto; } .opportunities-page .opportunities-page-filter-message { margin-bottom: 20px; } .opportunities-page .opportunities { --tableBorderRadius: 4px; } .opportunities-page .opportunities h4 { margin-top: 20px; } .opportunities-page .opportunities .table-wrapper { position: relative; /* use this to position the "..." button inside the last column header */ /* but do it this way instead of sticking the element inside the */ /* so that the dropdown isn't cut off inside the overflow: hidden; */ } .opportunities-page .opportunities .table-wrapper .customize-columns { position: absolute; top: 6px; right: 5px; } .opportunities-page .opportunities .table { border-radius: var(--tableBorderRadius); margin-bottom: 25px; table-layout: fixed; } .opportunities-page .opportunities .table th:nth-child(1) { width: 30%; } .opportunities-page .opportunities .table small { color: var(--colorTextMedium); display: inline-block; width: 100%; overflow: hidden; text-overflow: ellipsis; } .opportunities-page .opportunities .table td, .opportunities-page .opportunities .table th { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .opportunities-page .opportunities .table-bordered thead:first-child tr:first-child > th:first-child, .opportunities-page .opportunities .table-bordered tbody:first-child tr:first-child > td:first-child, .opportunities-page .opportunities .table-bordered tbody:first-child tr:first-child > th:first-child { border-top-left-radius: var(--tableBorderRadius); } .opportunities-page .opportunities .table-bordered thead:first-child tr:first-child > th:last-child, .opportunities-page .opportunities .table-bordered tbody:first-child tr:first-child > td:last-child, .opportunities-page .opportunities .table-bordered tbody:first-child tr:first-child > th:last-child { border-top-right-radius: var(--tableBorderRadius); } .opportunities-page .opportunities .progress { position: relative; border: solid 1px var(--borderDefault); margin: 0; background-image: none; background: var(--bgDefaultMuted); box-shadow: none; } .opportunities-page .opportunities .progress .bar { background: var(--bgInformational); box-shadow: none; } .opportunities-page .opportunities .progress span { font-size: 12px; line-height: 15px; font-weight: var(--fontWeightBold); display: block; position: absolute; text-align: center; background: rgba(255, 255, 255, 0.8); color: var(--colorTextNeutralBlack); border-radius: 4px; left: 50%; width: 36px; margin: 2px 0 0 -18px; } .opportunities-page .opportunities .value-boxes { /* clearfix copied from bootstrap */ *zoom: 1; background: var(--bgInformationalMuted); color: var(--colorTextDefault); line-height: 1.4; border-radius: 8px; margin: 0 0 5px 0; } .opportunities-page .opportunities .value-boxes:before, .opportunities-page .opportunities .value-boxes:after { display: table; content: ''; line-height: 0; } .opportunities-page .opportunities .value-boxes:after { clear: both; } .opportunities-page .opportunities .value-boxes .value-box { float: left; min-width: 210px; padding: 10px; font-size: 1.2em; white-space: nowrap; } .opportunities-page .opportunities .value-boxes .value-box.first { width: 170px; } .opportunities-page .opportunities .value-boxes .value-box strong { font-weight: normal; font-size: 1.2em; } .opportunities-page .opportunities .value-boxes .value-box.first strong { font-size: 3.3em; line-height: 1; padding-left: 3px; } .opportunities-page .opportunities .value-boxes .value-box .annualized { border-top: 1px dotted var(--colorIconLight); margin-top: 5px; } .opportunities-page .opportunities .value-boxes.top { background: var(--bgDefault); border-radius: 8px; } .faux-select-wrapper { position: relative; } .faux-select-wrapper select { opacity: 0; } .faux-select-wrapper .faux-select { display: block; position: absolute; top: 0; /** important is needed otherwise the colors do not change when switching between dark and light mode due to the inline styles */ color: var(--colorTextDefault) !important; padding-left: 8px; box-sizing: border-box; border: 1px solid var(--borderDefault); border-radius: 5px; background: var(--formBackground); pointer-events: none; overflow: hidden; } .faux-select-wrapper .faux-select:active { border-color: var(--borderActive); } .faux-select-wrapper .faux-select::before { content: '▾'; float: right; margin-right: 5px; color: var(--colorIconDefault); } .reporting h2 { margin: 10px 0 5px; } .reporting h3 { line-height: 25px; margin: 5px 0; border-bottom: dotted 1px var(--borderDefault); } .reporting caption { text-align: left; /* overriding browser default center for table captions */ } .reporting .filters select { margin: 0; } .reporting .filters .filter { display: inline-block; } .reporting .box { margin: 10px 0 15px 0; vertical-align: top; } .reporting .box a { -webkit-text-decoration: none; text-decoration: none; color: #06a; } .reporting .box table { border-collapse: separate; border-spacing: 1px; } .reporting .box table td { font-size: 2.8em; color: var(--colorTextDefault); text-align: center; line-height: 100%; } .reporting .box table td, .reporting .box table th { border-right: dotted 1px #bbb; vertical-align: top; } .reporting .box table td:last-child, .reporting .box table th:last-child { border: none; } .reporting .box h3 > a { color: inherit; } .email-reporting .box table { width: 100%; table-layout: fixed; } .custom-reporting { /* charts */ } .custom-reporting .highcharts-scrollbar-button, .custom-reporting .highcharts-scrollbar-arrow { display: none; } .custom-reporting h1 { display: inline-block; } .custom-reporting .highcharts-container .highcharts-background { fill: transparent; } .custom-reporting .highcharts-container .highcharts-grid path { stroke: var(--colorTextLight); stroke-dasharray: 1, 2; } .custom-reporting .highcharts-container .highcharts-series path { opacity: 0.6; } .custom-reporting .highcharts-container .highcharts-series rect { stroke-width: 0; } .custom-reporting .highcharts-container .highcharts-axis text { font-size: 13px; } .custom-reporting .highcharts-container .highcharts-axis-title, .custom-reporting .highcharts-container .highcharts-legend-navigation, .custom-reporting .highcharts-container .highcharts-breadcrumbs-button.highcharts-button-pressed text { /** highcharts styles this with inline styles 🫠 */ color: var(--colorTextDefault) !important; fill: var(--colorTextDefault) !important; } .custom-reporting .highcharts-container .highcharts-axis-labels text { /** highcharts styles this with inline styles 🫠 */ color: var(--colorTextMedium) !important; fill: var(--colorTextMedium) !important; } .custom-reporting .highcharts-container .highcharts-legend-item text, .custom-reporting .highcharts-container .highcharts-drilldown-axis-label, .custom-reporting .highcharts-container .highcharts-drilldown-axis-label span, .custom-reporting .highcharts-container path.highcharts-legend-nav-active, .custom-reporting .highcharts-container .highcharts-breadcrumbs-button.highcharts-button-normal text { /** highcharts styles this with inline styles 🫠 */ color: var(--colorLinkDefault) !important; fill: var(--colorLinkDefault) !important; } .custom-reporting .highcharts-container .highcharts-legend-item text:hover, .custom-reporting .highcharts-container .highcharts-drilldown-axis-label:hover, .custom-reporting .highcharts-container .highcharts-drilldown-axis-label span:hover, .custom-reporting .highcharts-container path.highcharts-legend-nav-active:hover, .custom-reporting .highcharts-container .highcharts-breadcrumbs-button.highcharts-button-normal text:hover { color: var(--colorLinkHover) !important; fill: var(--colorLinkHover) !important; } .custom-reporting .highcharts-container .highcharts-markers path { stroke: var(--colorGray02); stroke-width: 1px; } .custom-reporting .highcharts-container .highcharts-tooltip > span > p.links { text-align: center; margin-top: 10px; margin-bottom: 5px; } .custom-reporting .chart { min-width: 310px; margin: 0 auto; } .custom-reporting select:focus { outline: 0; border: solid 1px #aabbd3; } .custom-reporting .form { margin: 15px 0 15px 0; } .custom-reporting .form form { margin: 0; } .custom-reporting .form form ul { margin: 0; list-style-type: none; } .custom-reporting .form .big-field { width: 33.3%; margin: 0; float: left; box-sizing: border-box; padding-left: 19px; } .custom-reporting .form .big-field label { font-size: 18px; color: var(--colorTextMedium); font-weight: normal; margin: 0 6px 0 0; float: left; line-height: 49px; cursor: default; } .custom-reporting .form .big-field .form-field { overflow: hidden; position: relative; } .custom-reporting .form .big-field .form-field select { height: 50px; width: 100%; margin-bottom: 3px; } .custom-reporting .form .big-field .form-field .faux-select-wrapper .faux-select { width: 100% !important; } .custom-reporting .form .big-field .form-field > .faux-select-wrapper .faux-select { font-size: 18px !important; } .custom-reporting .form .big-field .form-field select { opacity: 0; } .custom-reporting .form .big-field .form-field select[name='filter'], .custom-reporting .form .big-field .form-field input[name='interval'] { display: block; width: 100%; box-sizing: border-box; margin: 0; font-size: 12px; line-height: 14px; height: 28px; min-height: 28px; color: var(--colorTextDefault); } .custom-reporting .form .big-field .form-field .small-field { position: relative; padding-left: 20px; } .custom-reporting .form .big-field .form-field .small-field::before { content: ''; display: block; border: solid 1px var(--borderDefault); width: 9px; height: 17px; position: absolute; left: 10px; top: -3px; z-index: 0; border-width: 0 0 1px 1px; } .custom-reporting .form .big-field.field-y { padding-left: 0; } .custom-reporting .secondary-params { float: right; clear: left; } .custom-reporting .secondary-params select, .custom-reporting .secondary-params input[type='text'] { display: block; width: 100%; box-sizing: border-box; margin: 0; height: 27px; min-height: 27px; font-size: 13px; } .custom-reporting .secondary-params .field { float: right; margin-right: 5px; } .custom-reporting .secondary-params .field.field-transform_y { width: 90px; margin-right: 4px; } .custom-reporting .chart-border { padding: 5px 0 20px 0; background: var(--surfaceBackgroundDefault); border: solid 1px var(--borderDefault); border-radius: 6px; } .custom-reporting .chart-border .secondary-params { margin: 1px; } .custom-reporting .chart-border .chart, .custom-reporting .chart-border .chart-big-msg { clear: both; padding: 10px 10px 0 10px; height: 400px; } .custom-reporting .chart-border .chart-big-msg { clear: both; font-size: 90px; /* TODO: find a proper way to darken the color or define a color in the DS */ color: #ededed; text-align: center; height: 400px; line-height: 370px; } .custom-reporting .chart-border .chart-big-msg div { display: inline-block; vertical-align: middle; line-height: 1; } .custom-reporting .chart-border .chart-big-msg p { line-height: 1; font-size: 13px; color: #999; margin-top: 25px; } .custom-reporting .chart-tools a { margin: 2px 5px 0 8px; float: right; color: #a8a8a8; font-size: 13px; display: flex; align-items: center; gap: var(--spacing-4); } .custom-reporting .summary { margin-top: 28px; color: #888; font-size: 28px; } .custom-reporting .summary .summary-metric { font-size: 40px; color: #555; } .custom-reporting .table { margin-top: 15px; width: auto; min-width: 300px; } .custom-reporting .table th, .custom-reporting .table td { font-weight: normal; color: var(--colorTextDefault); font-size: 18px; line-height: 15px; padding-right: 30px; } .custom-reporting .table th.metric, .custom-reporting .table td.metric { text-align: right; padding-right: 8px; padding-left: 30px; } .custom-reporting .table th.metric .transform, .custom-reporting .table td.metric .transform { display: block; color: var(--colorTextMedium); font-size: 12px; line-height: 14px; } .custom-reporting .table th.textcenter, .custom-reporting .table td.textcenter { text-align: center; padding-right: 8px; } .custom-reporting .table tr.aggregate td, .custom-reporting .table tr.aggregate th { font-size: 22px; line-height: 24px; } .custom-reporting .table tr.aggregate td.metric, .custom-reporting .table tr.aggregate th.metric { font-size: 24px; } .custom-reporting .table td { background: var(--surfaceBackgroundDefault); } .custom-reporting .table th { line-height: 30px; } /* Sortable table styles */ .by-status th.sortable { cursor: pointer; position: relative; } .by-status th.sortable:hover { background-color: rgba(0, 0, 0, 0.05); } .by-status th .sort-icon { float: right; margin-left: 5px; font-family: 'Arial'; /* Handles good look of the icon */ } .by-status th .sort-icon.asc { transform: rotate(180deg); } .inbox-page { --inboxHeaderPlusPaddings: 81px; display: flex; min-height: 100%; /* Action buttons like Archive, etc. (for both overall list and single item in expanded mode) */ /* are hidden by default and then shown below based on which "view" is active. */ /* Reuse the same div/elements for the big initial loader (&.big-msg) */ /* and the infinity scroll loader, and style them differently. */ /* Char counter used in the inbox (replying to SMS) */ } @media screen and (min-width: 768px) { .inbox-page { max-height: 100%; } } .inbox-page .inbox-content { flex: 1; min-width: 0; } .inbox-page .upcoming-meetings { flex: 0 0 0%; margin: -24px -24px -24px 24px; z-index: 102; /* same as popover */ } .inbox-page .action { display: none; margin-right: 5px; } .inbox-page .inbox-only, .inbox-page .future-only, .inbox-page .archive-only { display: none; } .inbox-page.view-inbox .action-archive, .inbox-page.view-inbox .action-archive-selected { display: inline-block; } .inbox-page.view-inbox .inbox-only { display: inherit; } .inbox-page.view-archive .action-inbox, .inbox-page.view-archive .action-inbox-selected { display: inline-block; } .inbox-page.view-archive .archive-only { display: inherit; } .inbox-page.view-future .action-inbox, .inbox-page.view-future .action-inbox-selected, .inbox-page.view-future .action-archive, .inbox-page.view-future .action-archive-selected, .inbox-page.view-future .follow-up-view { display: inline-block; } .inbox-page.view-future .future-only { display: inherit; } .inbox-page .follow-up-view { margin-left: 0; } .inbox-page .prefix { vertical-align: 9px; padding-right: 2px; } .inbox-page .inbox-scroller { overflow-y: auto; margin: 0 calc(-1 * var(--spacing-16)); max-height: calc(100% - var(--inboxHeaderPlusPaddings)); } @media screen and (min-width: 768px) { .inbox-page .inbox-scroller { margin: 0 calc(-1 * var(--spacing-24)); } } @media screen and (max-width: 767px) { .inbox-page .inbox-scroller { padding-top: calc(var(--inboxHeaderPlusPaddings) + var(--spacing-4)); } .inbox-page .inbox-scroller.shrink { max-height: calc(100% - calc(var(--inboxHeaderPlusPaddings) + var(--spacing-48))); } } .inbox-page .inbox-list .item { overflow: hidden; border-bottom: 1px solid var(--borderDefault); cursor: pointer; } .inbox-page .inbox-list .item:has(> .expanded) { display: block; padding: var(--spacing-16); background: var(--surfaceBackgroundMedium); overflow: initial; cursor: initial; } .inbox-page .inbox-list .item:has(> .expanded) .loader { padding: var(--spacing-8); } .inbox-page .big-msg { border-bottom: 1px solid var(--borderDefault); margin: 0 calc(var(--spacing-24) * -1); background: var(--surfaceBackgroundDefault); text-align: center; padding: 40px 0; min-height: 110px; } .inbox-page .big-msg h3 { margin: 0; } .inbox-page .big-msg p { color: var(--colorTextLight); margin: 0; } .inbox-page .results-loader { margin: var(--spacing-12) var(--spacing-16); } .inbox-page .results-loader.big-msg { margin: 0; } .inbox-page .results-loader.big-msg .loader-text { display: block; font-weight: normal; color: var(--colorTextMedium); font-size: 18px; line-height: 40px; } .inbox-page .big-msg .loader { vertical-align: baseline; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(to right, var(--surfaceBackgroundDefault) 10%, var(--borderDefault) 42%); position: relative; animation: loader 0.8s infinite linear; } .inbox-page .big-msg .loader:before { width: 50%; height: 50%; background: var(--surfaceBackgroundDefault); border-radius: 100% 0 0 0; position: absolute; top: 0; left: 0; content: ''; } .inbox-page .big-msg .loader:after { background: var(--surfaceBackgroundDefault); width: 80%; height: 80%; border-radius: 50%; content: ''; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } @keyframes loader { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .inbox-page .item-type-incoming_sms .char-counter { color: var(--colorTextLight); margin-left: 10px; line-height: 20px; vertical-align: -1px; display: inline-block; } .inbox-page .item-type-incoming_sms .char-counter.exceeded { color: var(--colorTextDanger); } .inbox-page.hide-edit-controls .check-all, .inbox-page.hide-edit-controls .action:not(.followup-date) { display: none !important; } .inbox-page.hide-edit-controls .results-loader { border-radius: 7px; } .bulk-upload .lead-importer-stepper-standalone { margin: -20px -20px 20px -20px; /* remove top, left, right margins so it's "conntected" to the UI */ } .bulk-upload p.error { font-weight: var(--fontWeightBold); } .bulk-upload .pull-left { max-width: 25%; } .bulk-upload .pull-left.first { max-width: 65%; margin-right: 7%; } .bulk-upload .form-and-info .form label[for='attachment'] { display: none; } .bulk-upload .form-and-info .form li.field-attachment { margin-bottom: 16px; } .bulk-upload .form-and-info .form form { margin-bottom: 0; } .bulk-upload .form-and-info .form textarea { width: 360px; height: 80px; } .bulk-upload .form-and-info .pull-left { width: 40%; max-width: 600px; } .bulk-upload .form-and-info .tips { margin-top: 20px; } .bulk-upload .support-note { clear: both; } .bulk-upload h3 { font-weight: var(--fontWeightBold); border-bottom: dotted 1px #bbb; line-height: 24px; } .bulk-upload input[type='file'] { margin-top: 15px; } .bulk-upload .loading { margin-top: 20px; display: none; } .bulk-upload .analyzed { display: none; } .bulk-upload .lead-data { display: none; } .bulk-upload .lead-data li { display: none; } .bulk-upload .cols-description li { list-style-type: circle; } .bulk-upload .not-recognized { color: darkred; } .bulk-upload .table-horizontally-striped thead th:nth-child(odd), .bulk-upload .table-horizontally-striped tbody th:nth-child(odd), .bulk-upload .table-horizontally-striped thead td:nth-child(odd), .bulk-upload .table-horizontally-striped tbody td:nth-child(odd) { background-color: var(--surfaceBackgroundMedium); } .bulk-upload .import-preview-container { overflow: auto; margin-bottom: 16px; } .bulk-upload .import-preview-container::-webkit-scrollbar { -webkit-appearance: active; } .bulk-upload .import-preview-container::-webkit-scrollbar { -webkit-appearance: none; width: 11px; height: 11px; } .bulk-upload .import-preview-container::-webkit-scrollbar-thumb { border-radius: 6px; background-color: rgba(0, 0, 0, 0.5); } .bulk-upload .import-preview-container::-webkit-scrollbar-thumb:hover, .bulk-upload .import-preview-container::-webkit-scrollbar-thumb:active { background-color: rgba(0, 0, 0, 0.6); } .bulk-upload .import-preview-container::-webkit-scrollbar-track { -webkit-box-shadow: inset 1px 1px 0 #eee, inset 0 5px 11px white; } .bulk-upload table.import-preview { margin-bottom: 4px; width: auto; max-width: none; } .bulk-upload table.import-preview .header-wrapper { min-width: 150px; white-space: nowrap; /* weird */ } .bulk-upload table.import-preview .header-wrapper p { font-weight: normal; } .bulk-upload table.import-preview .header-wrapper span.selector-title { font-weight: var(--fontWeightBold); } .bulk-upload table.import-preview .header-wrapper label.checkbox { padding-right: 8px; } .bulk-upload table.import-preview th { background-color: #dff0d8; } .bulk-upload table.import-preview th:nth-child(odd) { background-color: #dff0d8; } .bulk-upload table.import-preview td.error { font-weight: var(--fontWeightBold); background-color: #ffeeee; } .bulk-upload table.import-preview th.warning { background-color: #f2dede; } .bulk-upload table.import-preview th.warning select { border: 1px solid #f66; } .bulk-upload table.import-preview th:nth-child(odd).warning { background-color: #f2dede; } .bulk-upload table.import-preview th:nth-child(odd).warning select { border: 1px solid #f66; } .bulk-upload table.import-preview .skip { color: #999; background-color: var(--surfaceBackgroundMedium); } .bulk-upload table.import-preview .skip:nth-child(odd) { background-color: #f3f3f3; } .bulk-upload .extra-info { width: 375px; float: right; } .bulk-upload .dupe-warning { font-weight: var(--fontWeightBold); color: darkred; } .bulk-upload .table-wrapper { max-height: 294px; overflow-y: auto; padding-right: 15px; } .bulk-upload .table-wrapper .table td { text-align: center; } .bulk-upload .table-wrapper .table td:first-child { text-align: left; } .bulk-upload .table-wrapper .table td.success { color: darkgreen; } .bulk-upload .table-wrapper .table td.fail { color: darkred; } /* @media (max-width: 1200px) { .bulk-upload .extra-info { float: left; margin: 10px 0 0; min-width: 600px; } } */ :-webkit-full-screen { /* override stuff from scaffolding.less */ } :fullscreen { /* override stuff from scaffolding.less */ } :-webkit-full-screen .hide-in-full-screen { display: none; } :fullscreen .hide-in-full-screen { display: none; } :-webkit-full-screen .container .content-area-wrap { top: 0; } :fullscreen .container .content-area-wrap { top: 0; } :-webkit-full-screen .container .content-area-wrap .content-area { left: 0; } :fullscreen .container .content-area-wrap .content-area { left: 0; } .drag-to-sort-container { position: relative; } .drag-to-sort-container .drag-to-sort-handle-wrapper { position: absolute; opacity: 0; left: -21px; padding-right: 5px; cursor: move; height: 30px; } .drag-to-sort-container .drag-to-sort-handle-wrapper .drag-to-sort-handle { cursor: inherit; -webkit-text-decoration: none; text-decoration: none; padding: 5px; margin-top: 5px; font-size: 8px; vertical-align: middle; outline: none; border-radius: 50%; background: white; border: solid 1px #eaeaea; color: #808080; } .drag-to-sort-container .drag-to-sort-handle-wrapper.sorting { opacity: 0 !important; } .drag-to-sort-container:only-child .drag-to-sort-handle-wrapper { display: none; } .drag-to-sort-container.hover .drag-to-sort-handle-wrapper, .drag-to-sort-container.sortable-chosen .drag-to-sort-handle-wrapper { opacity: 1; } .drag-to-sort-container.sortable-ghost { opacity: var(--disabledOpacity); } .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; } /** * Setup a --fillDataVisCategorical semantic token that * always uses the first color, but will use other colors * if within an element with a data-vis-categorical attribute. */ :root { --fillDataVisCategorical: var(--fillDataVisCategorical1); } :root [data-vis-categorical='1'] { --fillDataVisCategorical: var(--fillDataVisCategorical1); } :root [data-vis-categorical='2'] { --fillDataVisCategorical: var(--fillDataVisCategorical2); } :root [data-vis-categorical='3'] { --fillDataVisCategorical: var(--fillDataVisCategorical3); } :root [data-vis-categorical='4'] { --fillDataVisCategorical: var(--fillDataVisCategorical4); } :root [data-vis-categorical='5'] { --fillDataVisCategorical: var(--fillDataVisCategorical5); } :root [data-vis-categorical='6'] { --fillDataVisCategorical: var(--fillDataVisCategorical6); } :root [data-vis-categorical='7'] { --fillDataVisCategorical: var(--fillDataVisCategorical7); } :root [data-vis-categorical='8'] { --fillDataVisCategorical: var(--fillDataVisCategorical8); } :root [data-vis-categorical='9'] { --fillDataVisCategorical: var(--fillDataVisCategorical9); } :root [data-vis-categorical='10'] { --fillDataVisCategorical: var(--fillDataVisCategorical10); } :root [data-vis-categorical='11'] { --fillDataVisCategorical: var(--fillDataVisCategorical11); } :root [data-vis-categorical='12'] { --fillDataVisCategorical: var(--fillDataVisCategorical12); } :root [data-vis-categorical='13'] { --fillDataVisCategorical: var(--fillDataVisCategorical13); } :root [data-vis-categorical='14'] { --fillDataVisCategorical: var(--fillDataVisCategorical14); } @media screen and (max-width: 767px) { .list-view > .page-search { max-width: 100vw; margin: 0; position: relative; box-sizing: border-box; } .list-view > .page-search .loader { margin: 15px 0 0 15px; } .list-view > .page-search .list-leads { margin-top: 0; max-width: 100vw; overflow-x: auto; margin-bottom: 10px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } .list-view > .page-search .list-leads .table { min-width: 100%; width: auto; border-radius: 0; border: 0; margin: 0; } .list-view > .page-search .list-leads .table th, .list-view > .page-search .list-leads .table td { border-radius: 0; } .list-view > .page-search .list-leads .table th:first-child, .list-view > .page-search .list-leads .table td:first-child { border-left: 0; } .list-view > .page-search .btn-dialer { display: none; } .list-view > .page-search .row, .list-view > .page-search .search-main { margin: 0; } .list-view > .page-search .search-main-inner { min-height: calc(100vh - 150px); padding: 0; box-sizing: border-box; } } @media screen and (max-width: 767px) { .inbox-page { /* TODO: this needs to be added because it's removed from .app-content at the same breakpoint. Other views are wrapped in which overrides that padding. Preferably the inbox page is also wrapped in Screen once more has been Reactized. */ padding: 0 var(--spacing-16) 0; } .inbox-page .action { margin: 0; } .inbox-page .no-results, .inbox-page .results-loader.big-msg { border-left: 0; border-right: 0; border-radius: 0; } .inbox-page .no-results { margin: 0 calc(-1 * var(--spacing-16)); } .inbox-page .results-loader.big-msg { margin: 0; width: 100%; } .inbox-page .inbox-list .item { border-left: none; border-right: none; } .inbox-page .inbox-list .item:last-child { border-radius: 0; } .inbox-page .inbox-list .item:has(> .expanded) { padding: var(--spacing-12) 0; } .inbox-page .inbox-list .item.active > :first-child:before { content: none; } .inbox-page .inbox-list .item.checked:not(.expanded) { border-bottom-color: var(--borderActiveMuted); } .inbox-page .inbox-list .item.checked:not(.expanded) > div { background-color: var(--bgActiveMuted); } .inbox-page.hide-edit-controls .item:first-child { border-radius: 0; } .inbox-page.hide-edit-controls .results-loader.big-msg { border-top: none; } } @media screen and (max-width: 767px) { body #main, body #main > .container { position: fixed; top: 0; left: 0; } body .container { min-width: 100vw; /* All of the pages below aren't responsive and hence need a min-width. */ } body .container .content-area-wrap .content-area { margin-left: -100vw; overflow-x: auto; } body .container .content-area-wrap .content-area .app-content { padding: 0; max-width: 100vw; } body .container .opportunities-page, body .container .reporting, body .container .audit-log, body .container .DialerCallingMultipleLeadsScreenWrapper { margin: 0; padding: 20px; min-width: 960px; box-sizing: border-box; } body .container .DialerCallingMultipleLeadsScreenWrapper { padding: 0; } body .container .settingsGlobalStyles { min-width: 720px; } } /*! * Bootstrap v2.0.4 * * Copyright 2012 Twitter, Inc * Licensed under the Apache License v2.0 * http://www.apache.org/licenses/LICENSE-2.0 * * Designed and built with all the love in the world @twitter by @mdo and @fat. */ @layer reset { article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]) { display: none; } html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } a:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } a:hover, a:active { outline: 0; } sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { /* Responsive images (ensure images don't scale beyond their parents) */ max-width: 100%; /* Part 1: Set a maximum relative to the parent */ width: auto\9; /* IE7-8 need help adjusting responsive images */ height: auto; /* Part 2: Scale the height according to the width, otherwise you get stretching */ vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic; } #map_canvas img, .google-maps img { max-width: none; } button, input, select, textarea { margin: 0; font-size: 100%; vertical-align: middle; } button, input { *overflow: visible; line-height: normal; } button::-moz-focus-inner, input::-moz-focus-inner { padding: 0; border: 0; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } label, select, button, input[type='button'], input[type='reset'], input[type='submit'], input[type='radio'], input[type='checkbox'] { cursor: pointer; } input[type='search'] { box-sizing: content-box; -webkit-appearance: textfield; } input[type='search']::-webkit-search-decoration, input[type='search']::-webkit-search-cancel-button { -webkit-appearance: none; } textarea { overflow: auto; vertical-align: top; } @media print { * { text-shadow: none !important; color: #000 !important; background: transparent !important; box-shadow: none !important; } a, a:visited { -webkit-text-decoration: underline; text-decoration: underline; } a[href]:after { content: ' (' attr(href) ')'; } abbr[title]:after { content: ' (' attr(title) ')'; } .ir a:after, a[href^='javascript:']:after, a[href^='#']:after { content: ''; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } } .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { display: table; content: ''; line-height: 0; } .clearfix:after { clear: both; } .hide-text { font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; } .input-block-level { display: block; width: 100%; min-height: 32px; box-sizing: border-box; } @layer base { body { margin: 0; font-family: -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; font-size: 14px; line-height: 20px; color: var(--colorTextDefault); background-color: var(--surfaceBackgroundMedium); } a { color: var(--colorLinkDefault); -webkit-text-decoration: none; text-decoration: none; } a:hover, a:focus { color: var(--colorLinkHover); -webkit-text-decoration: underline; text-decoration: underline; } .img-rounded { border-radius: 6px; } .img-polaroid { padding: 4px; background-color: var(--surfaceBackgroundDefault); border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .img-circle { border-radius: 500px; } } @layer base { p { margin: 0 0 10px; } .lead { margin-bottom: 20px; font-size: 21px; font-weight: 200; line-height: 30px; } small { font-size: 85%; } strong { font-weight: var(--fontWeightBold); } em { font-style: italic; } cite { font-style: normal; } h1, h2, h3, h4, h5, h6 { margin: 10px 0; font-family: inherit; font-weight: bold; line-height: 20px; color: inherit; text-rendering: optimizelegibility; } h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-weight: normal; line-height: 1; color: var(--iconLight); } h1, h2, h3 { line-height: 40px; } h1 { font-size: 38.5px; } h2 { font-size: 31.5px; } h3 { font-size: 24.5px; } h4 { font-size: 17.5px; } h5 { font-size: 14px; } h6 { font-size: 11.9px; } h1 small { font-size: 24.5px; } h2 small { font-size: 17.5px; } h3 small { font-size: 14px; } h4 small { font-size: 14px; } ul, ol { padding: 0; margin: 0 0 10px 25px; } ul ul, ul ol, ol ol, ol ul { margin-bottom: 0; } li { line-height: 20px; } ul.unstyled, ol.unstyled { margin-left: 0; list-style: none; } ul.inline, ol.inline { margin-left: 0; list-style: none; } ul.inline > li, ol.inline > li { display: inline-block; *display: inline; /* IE7 inline-block hack */ *zoom: 1; padding-left: 5px; padding-right: 5px; } dl { margin-bottom: 20px; } dt, dd { line-height: 20px; } dt { font-weight: var(--fontWeightBold); } dd { margin-left: 10px; } .dl-horizontal { *zoom: 1; } .dl-horizontal:before, .dl-horizontal:after { display: table; content: ''; line-height: 0; } .dl-horizontal:after { clear: both; } .dl-horizontal dt { float: left; width: 160px; clear: left; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dl-horizontal dd { margin-left: 180px; } hr { margin: 20px 0; border: 0; border-top: 1px solid var(--borderDefault); border-bottom: 1px solid var(--surfaceBackgroundDefault); } abbr[title], abbr[data-original-title] { cursor: help; border-bottom: 1px dotted var(--borderDefault); } abbr.initialism { font-size: 90%; text-transform: uppercase; } blockquote { padding: 0 0 0 15px; margin: 0 0 20px; border-left: 5px solid var(--borderDefault); } blockquote p { margin-bottom: 0; font-size: 17.5px; font-weight: 300; line-height: 1.25; } q:before, q:after, blockquote:before, blockquote:after { content: ''; } address { display: block; margin-bottom: 20px; font-style: normal; line-height: 20px; } } @layer base { form { margin: 0 0 20px; } fieldset { padding: 0; margin: 0; border: 0; } label, input, button, select, textarea { font-size: 14px; font-weight: normal; line-height: 20px; } input, button, select, textarea { font-family: -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; } label { display: block; margin-bottom: 5px; } select, textarea, .GlobalInput { display: inline-block; height: 20px; padding: 4px 6px; margin-bottom: 10px; font-size: 14px; line-height: 20px; color: var(--colorTextMedium); border-radius: 7px; vertical-align: middle; } input, textarea { width: 206px; } textarea { height: auto; } textarea, .GlobalInput { background-color: var(--surfaceBackgroundDefault); border: 1px solid var(--borderDefault); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); transition: border linear .2s, box-shadow linear .2s; } textarea:focus, .GlobalInput:focus { border-color: var(--borderFocused); outline: 0; outline: thin dotted \9; /* IE6-9 */ } input[type='radio'], input[type='checkbox'] { margin: 4px 0 0; *margin-top: 0; /* IE7 */ margin-top: 1px \9; /* IE8-9 */ line-height: normal; } input[type='file'], input[type='image'], input[type='submit'], input[type='reset'], input[type='button'], input[type='radio'], input[type='checkbox'] { width: auto; } select, input[type='file'] { height: 32px; /* In IE7, the height of the select element cannot be changed by height, only font-size */ *margin-top: 4px; /* For IE7, add top margin to align select with labels */ line-height: 32px; } select { width: 220px; border: 1px solid var(--borderDefault); background-color: var(--surfaceBackgroundDefault); } select[multiple], select[size] { height: auto; } select:focus, input[type='file']:focus, input[type='radio']:focus, input[type='checkbox']:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } input::placeholder, textarea::placeholder { color: var(--colorTextLight); } .radio, .checkbox { min-height: 20px; padding-left: 20px; } .radio input[type='radio'], .checkbox input[type='checkbox'] { float: left; margin-left: -20px; } .controls > .radio:first-child, .controls > .checkbox:first-child { padding-top: 5px; } .radio.inline, .checkbox.inline { display: inline-block; padding-top: 5px; margin-bottom: 0; vertical-align: middle; } .radio.inline + .radio.inline, .checkbox.inline + .checkbox.inline { margin-left: 10px; } .input-mini { width: 60px; } .input-small { width: 90px; } .input-medium { width: 150px; } .input-large { width: 210px; } .input-xlarge { width: 270px; } .input-xxlarge { width: 530px; } input[class*="span"], select[class*="span"], textarea[class*="span"], .row-fluid input[class*="span"], .row-fluid select[class*="span"], .row-fluid textarea[class*="span"] { float: none; margin-left: 0; } .row-fluid input[class*='span'], .row-fluid select[class*='span'], .row-fluid textarea[class*='span'] { display: inline-block; } input, textarea { margin-left: 0; } .controls-row [class*='span'] + [class*='span'] { margin-left: 20px; } input.span12, textarea.span12 { width: 926px; } input.span11, textarea.span11 { width: 846px; } input.span10, textarea.span10 { width: 766px; } input.span9, textarea.span9 { width: 686px; } input.span8, textarea.span8 { width: 606px; } input.span7, textarea.span7 { width: 526px; } input.span6, textarea.span6 { width: 446px; } input.span5, textarea.span5 { width: 366px; } input.span4, textarea.span4 { width: 286px; } input.span3, textarea.span3 { width: 206px; } input.span2, textarea.span2 { width: 126px; } input.span1, textarea.span1 { width: 46px; } .controls-row { *zoom: 1; } .controls-row:before, .controls-row:after { display: table; content: ''; line-height: 0; } .controls-row:after { clear: both; } .controls-row [class*="span"], .row-fluid .controls-row [class*="span"] { float: left; } .controls-row .checkbox[class*='span'], .controls-row .radio[class*='span'] { padding-top: 5px; } input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] { cursor: not-allowed; background-color: var(--formBackgroundDisabled); } input[type='radio'][disabled], input[type='checkbox'][disabled], input[type='radio'][readonly], input[type='checkbox'][readonly] { background-color: transparent; } .control-group.warning .control-label, .control-group.warning .help-block, .control-group.warning .help-inline { color: #c09853; } .control-group.warning .checkbox, .control-group.warning .radio, .control-group.warning input, .control-group.warning select, .control-group.warning textarea { color: #c09853; } .control-group.warning input, .control-group.warning select, .control-group.warning textarea { border-color: #c09853; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .control-group.warning input:focus, .control-group.warning select:focus, .control-group.warning textarea:focus { border-color: #a47e3c; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e; } .control-group.error .control-label, .control-group.error .help-block, .control-group.error .help-inline { color: #b94a48; } .control-group.error .checkbox, .control-group.error .radio, .control-group.error input, .control-group.error select, .control-group.error textarea { color: #b94a48; } .control-group.error input, .control-group.error select, .control-group.error textarea { border-color: #b94a48; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .control-group.error input:focus, .control-group.error select:focus, .control-group.error textarea:focus { border-color: #953b39; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; } .control-group.success .control-label, .control-group.success .help-block, .control-group.success .help-inline { color: #468847; } .control-group.success .checkbox, .control-group.success .radio, .control-group.success input, .control-group.success select, .control-group.success textarea { color: #468847; } .control-group.success input, .control-group.success select, .control-group.success textarea { border-color: #468847; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .control-group.success input:focus, .control-group.success select:focus, .control-group.success textarea:focus { border-color: #356635; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b; } .control-group.info .control-label, .control-group.info .help-block, .control-group.info .help-inline { color: #3a87ad; } .control-group.info .checkbox, .control-group.info .radio, .control-group.info input, .control-group.info select, .control-group.info textarea { color: #3a87ad; } .control-group.info input, .control-group.info select, .control-group.info textarea { border-color: #3a87ad; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .control-group.info input:focus, .control-group.info select:focus, .control-group.info textarea:focus { border-color: #2d6987; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3; } .GlobalInput:focus:invalid, textarea:focus:invalid, select:focus:invalid { color: #b94a48; border-color: #ee5f5b; } .GlobalInput:focus:invalid:focus, textarea:focus:invalid:focus, select:focus:invalid:focus { border-color: #e9322d; box-shadow: 0 0 6px #f8b9b7; } .form-actions { padding: 19px 20px 20px; margin-top: 20px; margin-bottom: 20px; background-color: #f5f5f5; border-top: 1px solid #e5e5e5; *zoom: 1; } .form-actions:before, .form-actions:after { display: table; content: ''; line-height: 0; } .form-actions:after { clear: both; } .help-block, .help-inline { color: #455367; } .help-block { display: block; margin-bottom: 10px; } .help-inline { display: inline-block; *display: inline; /* IE7 inline-block hack */ *zoom: 1; vertical-align: middle; padding-left: 5px; } input.search-query { padding-right: 14px; padding-right: 4px \9; padding-left: 14px; padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */ margin-bottom: 0; border-radius: 15px; } .form-search input, .form-inline input, .form-horizontal input, .form-search textarea, .form-inline textarea, .form-horizontal textarea, .form-search select, .form-inline select, .form-horizontal select, .form-search .help-inline, .form-inline .help-inline, .form-horizontal .help-inline { display: inline-block; *display: inline; /* IE7 inline-block hack */ *zoom: 1; margin-bottom: 0; vertical-align: middle; } .form-search .hide, .form-inline .hide, .form-horizontal .hide { display: none; } .form-search label, .form-inline label, .form-search .btn-group, .form-inline .btn-group { display: inline-block; } .form-search .radio, .form-search .checkbox, .form-inline .radio, .form-inline .checkbox { padding-left: 0; margin-bottom: 0; vertical-align: middle; } .form-search .radio input[type='radio'], .form-search .checkbox input[type='checkbox'], .form-inline .radio input[type='radio'], .form-inline .checkbox input[type='checkbox'] { float: left; margin-right: 3px; margin-left: 0; } .control-group { margin-bottom: 10px; } legend + .control-group { margin-top: 20px; -webkit-margin-top-collapse: separate; } .form-horizontal .control-group { margin-bottom: 20px; *zoom: 1; } .form-horizontal .control-group:before, .form-horizontal .control-group:after { display: table; content: ''; line-height: 0; } .form-horizontal .control-group:after { clear: both; } .form-horizontal .control-label { float: left; width: 160px; padding-top: 5px; text-align: right; } .form-horizontal .controls { *display: inline-block; *padding-left: 20px; margin-left: 180px; *margin-left: 0; } .form-horizontal .controls:first-child { *padding-left: 180px; } .form-horizontal .help-block { margin-bottom: 0; } .form-horizontal input + .help-block, .form-horizontal select + .help-block, .form-horizontal textarea + .help-block { margin-top: 10px; } .form-horizontal .form-actions { padding-left: 180px; } } @layer base { .table { width: 100%; margin-bottom: 20px; border-collapse: collapse; } .table th, .table td { padding: 8px; line-height: 20px; text-align: left; vertical-align: top; border-top: 1px solid var(--borderDefault); } .table th { font-weight: var(--fontWeightBold); } .table thead th { vertical-align: bottom; } .table caption + thead tr:first-child th, .table caption + thead tr:first-child td, .table colgroup + thead tr:first-child th, .table colgroup + thead tr:first-child td, .table thead:first-child tr:first-child th, .table thead:first-child tr:first-child td { border-top: 0; } .table-bordered { border: 1px solid var(--borderDefault); border-collapse: separate; border-spacing: 0; border-left: 0; border-radius: 3px; } .table-bordered th, .table-bordered td { border-left: 1px solid var(--borderDefault); } .table-bordered caption + thead tr:first-child th, .table-bordered caption + tbody tr:first-child th, .table-bordered caption + tbody tr:first-child td, .table-bordered colgroup + thead tr:first-child th, .table-bordered colgroup + tbody tr:first-child th, .table-bordered colgroup + tbody tr:first-child td, .table-bordered thead:first-child tr:first-child th, .table-bordered tbody:first-child tr:first-child th, .table-bordered tbody:first-child tr:first-child td { border-top: 0; } .table-bordered thead:first-child tr:first-child > th:first-child, .table-bordered tbody:first-child tr:first-child > td:first-child, .table-bordered tbody:first-child tr:first-child > th:first-child { border-top-left-radius: 3px; } .table-bordered thead:first-child tr:first-child > th:last-child, .table-bordered tbody:first-child tr:first-child > td:last-child, .table-bordered tbody:first-child tr:first-child > th:last-child { border-top-right-radius: 3px; } .table-bordered thead:last-child tr:last-child > th:first-child, .table-bordered tbody:last-child tr:last-child > td:first-child, .table-bordered tbody:last-child tr:last-child > th:first-child, .table-bordered tfoot:last-child tr:last-child > td:first-child, .table-bordered tfoot:last-child tr:last-child > th:first-child { border-bottom-left-radius: 3px; } .table-bordered thead:last-child tr:last-child > th:last-child, .table-bordered tbody:last-child tr:last-child > td:last-child, .table-bordered tbody:last-child tr:last-child > th:last-child, .table-bordered tfoot:last-child tr:last-child > td:last-child, .table-bordered tfoot:last-child tr:last-child > th:last-child { border-bottom-right-radius: 3px; } .table-bordered tfoot + tbody:last-child tr:last-child td:first-child { border-bottom-left-radius: 0; } .table-bordered tfoot + tbody:last-child tr:last-child td:last-child { border-bottom-right-radius: 0; } .table-bordered caption + thead tr:first-child th:first-child, .table-bordered caption + tbody tr:first-child td:first-child, .table-bordered colgroup + thead tr:first-child th:first-child, .table-bordered colgroup + tbody tr:first-child td:first-child { border-top-left-radius: 3px; } .table-bordered caption + thead tr:first-child th:last-child, .table-bordered caption + tbody tr:first-child td:last-child, .table-bordered colgroup + thead tr:first-child th:last-child, .table-bordered colgroup + tbody tr:first-child td:last-child { border-top-right-radius: 3px; } .table-hover tbody tr:hover > td, .table-hover tbody tr:hover > th { background-color: #fafbfb; } } .dropup, .dropdown { position: relative; } .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; list-style: none; background-color: var(--surfaceBackgroundDefault); border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); *border-right-width: 2px; *border-bottom-width: 2px; border-radius: 6px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } .dropdown-menu.pull-right { right: 0; left: auto; } .fade { opacity: 0; transition: opacity 0.15s linear; } .fade.in { opacity: 1; } .collapse { position: relative; height: 0; overflow: hidden; transition: height 0.35s ease; } .collapse.in { height: auto; } .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; } @keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } .progress { overflow: hidden; height: 20px; margin-bottom: 20px; background-color: #f7f7f7; background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); border-radius: 3px; } .progress .bar { width: 0%; height: 100%; color: var(--surfaceBackgroundDefault); float: left; font-size: 12px; text-align: center; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #0e90d2; background-image: linear-gradient(to bottom, #149bdf, #0480be); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); box-sizing: border-box; transition: width 0.6s ease; } .progress .bar + .bar { box-shadow: inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15); } .progress-striped .bar { background-color: #149bdf; background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-size: 40px 40px; } .progress.active .bar { animation: progress-bar-stripes 2s linear infinite; } .progress-danger .bar, .progress .bar-danger { background-color: #dd514c; background-image: linear-gradient(to bottom, #ee5f5b, #c43c35); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffc43c35', GradientType=0); } .progress-danger.progress-striped .bar, .progress-striped .bar-danger { background-color: #ee5f5b; background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .progress-success .bar, .progress .bar-success { background-color: #5eb95e; background-image: linear-gradient(to bottom, #62c462, #57a957); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff57a957', GradientType=0); } .progress-success.progress-striped .bar, .progress-striped .bar-success { background-color: #62c462; background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .progress-info .bar, .progress .bar-info { background-color: #4bb1cf; background-image: linear-gradient(to bottom, #5bc0de, #339bb9); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff339bb9', GradientType=0); } .progress-info.progress-striped .bar, .progress-striped .bar-info { background-color: #5bc0de; background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .progress-warning .bar, .progress .bar-warning { background-color: #faa732; background-image: linear-gradient(to bottom, #fbb450, #f89406); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0); } .progress-warning.progress-striped .bar, .progress-striped .bar-warning { background-color: #fbb450; background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .pull-right { float: right; } .pull-left { float: left; } .hide { display: none; } .show { display: block; } .invisible { visibility: hidden; } .affix { position: fixed; } /* Override Bootstrap variables – keep in sync with globals.css */ @media print { a[href]:after { content: ''; } html, body { overflow: visible !important; height: auto !important; } .top-shadow, .LeftNav, .TopNav, .app-top, .reporting .filters, .opportunities-page .filters, .LeadOverview__AddMissing { display: none !important; } /* Mobile sets the position. */ #main, #main > .container { height: auto !important; position: static !important; } /* Mobile sets that margin. */ .container .content-area-wrap .content-area { margin-left: 0 !important; } .container .content-area-wrap .content-area .app-content { max-width: none !important; height: auto !important; } .content-area-wrap .content-area { border: 0 !important; } .app-content { position: static !important; } .search-main-inner { padding-right: 20px !important; } .opportunities-page .opportunities .value-boxes { border: 0 !important; } } #nocss { display: none; } /* email/phone icons in old (text-based) search results table */ table td.contact-buttons .call, table th.contact-buttons .call, table td.contact-buttons .email, table th.contact-buttons .email { display: inline-flex; align-items: center; justify-content: center; } table td.contact-buttons .call svg, table th.contact-buttons .call svg, table td.contact-buttons .email svg, table th.contact-buttons .email svg { width: 14px; height: 14px; } @layer base { body { height: 100%; /* The following line does two things: 1) disables scroll elasticity for the native app web view (can also be done in cocoa) 2) fixes issue where quickly scrolling an overflow auto element would try to scroll the body both in the app, and in browsers (chrome) */ overflow: hidden; } body.app-is-loading { background: var(--surfaceBackgroundMedium); } .clear { clear: both; } .hide { display: none !important; } .textcenter { text-align: center; } .closeio-employee-only { display: none !important; } body.closeio-employee .closeio-employee-only { display: inherit !important; } ul.noui { margin-left: 0; list-style-type: none; } small, .small { font-size: 0.9em; } code { display: inline-block; padding-left: 3px; padding-right: 3px; font-family: monospace; font-size: 90%; color: #474a54; border: 1px solid #cecece; border-radius: 3px; background-color: #eaeaea; } hr { border-top-color: #ccc; border-bottom-color: transparent; } h1, h2, h3, h4 { margin: 0 0 10px 0; font-weight: normal; color: var(--colorTextDefault); } h1 { font-size: 29px; } h2 { font-size: 24px; } h3 { font-size: 22px; } h3 { font-size: 18px; } h5 { margin: 0 0 10px 0; } /** Standardize the outline appearance across browsers / platforms e.g. the desktop app natively has Electron's orange outline color. */ a:focus-visible, button:focus-visible, div:focus-visible { outline: 2px solid color-mix(in srgb, var(--colorBrandBlue) 50%, transparent); } .error { color: var(--failurePrimaryColor); } .success { color: darkgreen; } form .help-block { color: var(--failurePrimaryColor); } form .actions { *zoom: 1; } form .actions:before, form .actions:after { display: table; content: ''; line-height: 0; } form .actions:after { clear: both; } form .msg { display: none; } form.form-horizontal .control-group { margin-bottom: 0; } form input[type='file'] { line-height: inherit; height: auto; } .editable-model-view .edit-side { display: none; } .editable-model-view.editing .view-side { display: none; } .editable-model-view.editing .edit-side { display: block; } body.login_as .content-area { background: #fee !important; } h1 sup { color: #9a9aad; } .hint-box { margin-bottom: 20px; background-color: var(--bgCardLight); border: 1px solid var(--borderDefault); border-radius: var(--baseBorderRadius); margin-top: 25px; padding: 10px 20px; } .hint-box h3 span { color: #3790b9; } .hint-box a.grey-link { color: var(--colorTextDefault); border-bottom: dotted 1px var(--borderDefault); } .hint-box a.grey-link:hover { -webkit-text-decoration: none; text-decoration: none; } .sortable-ghost { border: dotted 1px #888 !important; opacity: 0.6; } .sortable-ghost * { visibility: hidden; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { display: none; margin: 0; } .inline-help-icon { width: 16px; height: 16px; margin-top: -2px; margin-left: 3px; padding: 0; display: inline-block; font-size: 13px; color: var(--colorTextMedium); } .inline-help-icon:hover { color: var(--colorTextDefault); } .divider-left { border-left: solid 1px var(--borderDefault); padding-left: 6px; margin-left: 6px; line-height: 1; } .table-bordered th { padding-top: 4px; padding-bottom: 4px; line-height: 23px; font-weight: normal; background-color: var(--bgTableHeaderDefault); } table th.sorting-asc::before, table th.sorting-desc::before { float: right; font-family: 'Arial'; position: relative; right: -2px; } table th.sorting-asc::before { /*content: '▲';*/ /*content: '▴';*/ content: '▾'; top: 1px; transform: rotate(180deg); } table th.sorting-desc::before { /*content: '▼';*/ content: '▾'; } .saved-search-modal-form input[name='query'], .saved-search-modal-form input[name='name'] { width: calc(100% - 12px); max-width: 500px; } .saved-search-modal-form .field-shared_with { display: none; } .saved-search-delete { position: relative; top: 5px; color: #bd362f; } .BtnGroup.customize-columns { float: right; } .BtnGroup.customize-columns .header { border-bottom: solid 1px #ddd; padding: 7px; background: #f3f3f3; } .BtnGroup.customize-columns .header h4 { margin: 0; font-size: 16px; } .BtnGroup.customize-columns ul { list-style-type: none; margin: 0; max-height: 315px; overflow-y: scroll; padding: 5px 10px; } .BtnGroup.customize-columns .actions { padding: 5px; border-top: solid 1px #ddd; } .list-keyboard-navigable tr > :first-child, .list-keyboard-navigable .item > :first-child { position: relative; } .list-keyboard-navigable tr.active, .list-keyboard-navigable .item.active { outline: none; } .list-keyboard-navigable tr.active > :first-child:before, .list-keyboard-navigable .item.active > :first-child:before { content: ''; width: 2px; background: var(--colorIconInformational); position: absolute; left: 0; top: 0; bottom: 0; } table td.contact-buttons, table th.contact-buttons { padding: 0; font-size: 0; text-overflow: clip !important; overflow: visible; white-space: nowrap; } table td.contact-buttons .call, table th.contact-buttons .call, table td.contact-buttons .email, table th.contact-buttons .email { display: inline-block; position: relative; vertical-align: top; width: 16px; text-align: center; height: 32px; padding: 0 12px; color: var(--colorTextMedium); font-size: 12.25px; line-height: 32px; } table td.contact-buttons .call.inactive, table th.contact-buttons .call.inactive, table td.contact-buttons .email.inactive, table th.contact-buttons .email.inactive { color: #ccc; } table td.contact-buttons .email, table th.contact-buttons .email { border-right: solid 1px var(--borderLight); color: var(--colorTextMedium); } table td.contact-buttons a.call:hover, table th.contact-buttons a.call:hover, table td.contact-buttons a.email:hover, table th.contact-buttons a.email:hover { background-color: var(--surfaceBackgroundDefault); color: var(--colorLinkDefault); -webkit-text-decoration: none; text-decoration: none; } table td.contact-buttons a.call:active, table th.contact-buttons a.call:active, table td.contact-buttons a.email:active, table th.contact-buttons a.email:active { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); } table th.contact-buttons .call, table th.contact-buttons .email { height: 32px; line-height: 32px; } select, textarea, .GlobalInput { padding: 4px 12px; color: var(--colorTextDefault); border: 1px solid var(--formBorder); border-radius: var(--baseInputBorderRadius); box-shadow: none; transition: none; } select:focus, textarea:focus, .GlobalInput:focus { border-color: var(--borderFocused); box-shadow: none !important; outline: 0 !important; transition: none; } select:invalid:focus, textarea:invalid:focus, .GlobalInput:invalid:focus { color: var(--colorTextDefault); border: 1px solid var(--borderFocused); } select { box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05); } } .modules_utils_visuallyHidden_455 { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; opacity: 0; } @media screen and (min-width: 768px) { .modules_responsive_hideForMedium_a9b { display: none !important; } } @media screen and (max-width: 1119px) { .modules_responsive_showForLarge_0c4 { display: none !important; } } /*# sourceMappingURL=https://srcmaps.close.com/srcmaps/entry~24120820.885e92def7f6167922cb.js.map*/