/* Blue 10 */
$palette-blue-10: rgb(0, 22, 57) !default;
/* Blue 65 */
$palette-blue-65: rgb(87, 163, 253) !default;
/* Blue 15 */
$palette-blue-15: rgb(3, 35, 77) !default;
/* Blue 90 */
$palette-blue-90: rgb(216, 230, 254) !default;
/* Blue 80 */
$palette-blue-80: rgb(170, 203, 255) !default;
/* Blue 70 */
$palette-blue-70: rgb(120, 176, 253) !default;
/* Blue 60 */
$palette-blue-60: rgb(27, 150, 255) !default;
/* Blue 50 */
$palette-blue-50: rgb(1, 118, 211) !default;
/* Blue 40 */
$palette-blue-40: rgb(11, 92, 171) !default;
/* Blue 95 */
$palette-blue-95: rgb(238, 244, 255) !default;
/* Blue 30 */
$palette-blue-30: rgb(1, 68, 134) !default;
/* Blue 20 */
$palette-blue-20: rgb(3, 45, 96) !default;
/* Cloud Blue 90 */
$palette-cloud-blue-90: rgb(207, 233, 254) !default;
/* Cloud Blue 80 */
$palette-cloud-blue-80: rgb(144, 208, 254) !default;
/* Cloud Blue 70 */
$palette-cloud-blue-70: rgb(26, 185, 255) !default;
/* Cloud Blue 60 */
$palette-cloud-blue-60: rgb(13, 157, 218) !default;
/* Cloud Blue 50 */
$palette-cloud-blue-50: rgb(16, 124, 173) !default;
/* Cloud Blue 40 */
$palette-cloud-blue-40: rgb(5, 98, 138) !default;
/* Cloud Blue 95 */
$palette-cloud-blue-95: rgb(234, 245, 254) !default;
/* Cloud Blue 30 */
$palette-cloud-blue-30: rgb(8, 73, 104) !default;
/* Cloud Blue 20 */
$palette-cloud-blue-20: rgb(2, 50, 72) !default;
/* Cloud Blue 10 */
$palette-cloud-blue-10: rgb(0, 26, 40) !default;
/* Cloud Blue 65 */
$palette-cloud-blue-65: rgb(8, 171, 237) !default;
/* Cloud Blue 15 */
$palette-cloud-blue-15: rgb(10, 38, 54) !default;
/* Green 15 */
$palette-green-15: rgb(12, 41, 18) !default;
/* Green 90 */
$palette-green-90: rgb(205, 239, 196) !default;
/* Green 80 */
$palette-green-80: rgb(145, 219, 139) !default;
/* Green 70 */
$palette-green-70: rgb(69, 198, 90) !default;
/* Green 60 */
$palette-green-60: rgb(59, 167, 85) !default;
/* Green 50 */
$palette-green-50: rgb(46, 132, 74) !default;
/* Green 40 */
$palette-green-40: rgb(57, 101, 71) !default;
/* Green 95 */
$palette-green-95: rgb(235, 247, 230) !default;
/* Green 30 */
$palette-green-30: rgb(25, 78, 49) !default;
/* Green 20 */
$palette-green-20: rgb(28, 51, 38) !default;
/* Green 10 */
$palette-green-10: rgb(7, 27, 18) !default;
/* Green 65 */
$palette-green-65: rgb(65, 182, 88) !default;
/* Hot Orange 90 */
$palette-hot-orange-90: rgb(255, 222, 213) !default;
/* Hot Orange 80 */
$palette-hot-orange-80: rgb(254, 185, 165) !default;
/* Hot Orange 70 */
$palette-hot-orange-70: rgb(255, 144, 110) !default;
/* Hot Orange 60 */
$palette-hot-orange-60: rgb(255, 93, 45) !default;
/* Hot Orange 50 */
$palette-hot-orange-50: rgb(216, 58, 0) !default;
/* Hot Orange 40 */
$palette-hot-orange-40: rgb(170, 48, 1) !default;
/* Hot Orange 95 */
$palette-hot-orange-95: rgb(254, 241, 237) !default;
/* Hot Orange 30 */
$palette-hot-orange-30: rgb(126, 38, 0) !default;
/* Hot Orange 20 */
$palette-hot-orange-20: rgb(74, 36, 19) !default;
/* Hot Orange 10 */
$palette-hot-orange-10: rgb(40, 18, 2) !default;
/* Hot Orange 65 */
$palette-hot-orange-65: rgb(255, 120, 79) !default;
/* Hot Orange 15 */
$palette-hot-orange-15: rgb(66, 22, 4) !default;
/* Indigo 90 */
$palette-indigo-90: rgb(224, 229, 248) !default;
/* Indigo 80 */
$palette-indigo-80: rgb(190, 199, 246) !default;
/* Indigo 70 */
$palette-indigo-70: rgb(158, 169, 241) !default;
/* Indigo 60 */
$palette-indigo-60: rgb(127, 140, 237) !default;
/* Indigo 50 */
$palette-indigo-50: rgb(88, 103, 232) !default;
/* Indigo 40 */
$palette-indigo-40: rgb(58, 73, 218) !default;
/* Indigo 95 */
$palette-indigo-95: rgb(241, 243, 251) !default;
/* Indigo 30 */
$palette-indigo-30: rgb(47, 44, 183) !default;
/* Indigo 20 */
$palette-indigo-20: rgb(50, 29, 113) !default;
/* Indigo 10 */
$palette-indigo-10: rgb(32, 6, 71) !default;
/* Indigo 65 */
$palette-indigo-65: rgb(142, 155, 239) !default;
/* Indigo 15 */
$palette-indigo-15: rgb(31, 9, 116) !default;
/* Neutral 90 */
$palette-neutral-90: rgb(229, 229, 229) !default;
/* Neutral 80 */
$palette-neutral-80: rgb(201, 201, 201) !default;
/* Neutral 70 */
$palette-neutral-70: rgb(174, 174, 174) !default;
/* Neutral 100 */
$palette-neutral-100: rgb(255, 255, 255) !default;
/* Neutral 60 */
$palette-neutral-60: rgb(147, 147, 147) !default;
/* Neutral 50 */
$palette-neutral-50: rgb(116, 116, 116) !default;
/* Neutral 40 */
$palette-neutral-40: rgb(92, 92, 92) !default;
/* Neutral 95 */
$palette-neutral-95: rgb(243, 243, 243) !default;
/* Neutral 30 */
$palette-neutral-30: rgb(68, 68, 68) !default;
/* Neutral 20 */
$palette-neutral-20: rgb(46, 46, 46) !default;
/* Neutral 10 */
$palette-neutral-10: rgb(24, 24, 24) !default;
/* Orange 90 */
$palette-orange-90: rgb(254, 223, 208) !default;
/* Orange 80 */
$palette-orange-80: rgb(255, 186, 144) !default;
/* Orange 70 */
$palette-orange-70: rgb(254, 147, 57) !default;
/* Orange 60 */
$palette-orange-60: rgb(221, 122, 1) !default;
/* Orange 50 */
$palette-orange-50: rgb(169, 100, 4) !default;
/* Orange 40 */
$palette-orange-40: rgb(130, 81, 1) !default;
/* Orange 95 */
$palette-orange-95: rgb(255, 241, 234) !default;
/* Orange 30 */
$palette-orange-30: rgb(95, 62, 2) !default;
/* Orange 20 */
$palette-orange-20: rgb(62, 43, 2) !default;
/* Orange 10 */
$palette-orange-10: rgb(32, 22, 0) !default;
/* Orange 65 */
$palette-orange-65: rgb(243, 131, 3) !default;
/* Orange 15 */
$palette-orange-15: rgb(55, 30, 3) !default;
/* Pink 50 */
$palette-pink-50: rgb(227, 6, 106) !default;
/* Pink 40 */
$palette-pink-40: rgb(182, 5, 84) !default;
/* Pink 95 */
$palette-pink-95: rgb(254, 240, 243) !default;
/* Pink 30 */
$palette-pink-30: rgb(138, 3, 62) !default;
/* Pink 20 */
$palette-pink-20: rgb(97, 2, 42) !default;
/* Pink 65 */
$palette-pink-65: rgb(254, 114, 152) !default;
/* Pink 10 */
$palette-pink-10: rgb(55, 1, 20) !default;
/* Pink 15 */
$palette-pink-15: rgb(75, 6, 32) !default;
/* Pink 90 */
$palette-pink-90: rgb(253, 221, 227) !default;
/* Pink 80 */
$palette-pink-80: rgb(253, 182, 197) !default;
/* Pink 70 */
$palette-pink-70: rgb(254, 138, 167) !default;
/* Pink 60 */
$palette-pink-60: rgb(255, 83, 138) !default;
/* Purple 15 */
$palette-purple-15: rgb(48, 11, 96) !default;
/* Purple 90 */
$palette-purple-90: rgb(236, 225, 249) !default;
/* Purple 80 */
$palette-purple-80: rgb(215, 191, 242) !default;
/* Purple 70 */
$palette-purple-70: rgb(194, 158, 241) !default;
/* Purple 60 */
$palette-purple-60: rgb(173, 123, 238) !default;
/* Purple 50 */
$palette-purple-50: rgb(144, 80, 233) !default;
/* Purple 40 */
$palette-purple-40: rgb(117, 38, 227) !default;
/* Purple 95 */
$palette-purple-95: rgb(246, 242, 251) !default;
/* Purple 30 */
$palette-purple-30: rgb(90, 27, 169) !default;
/* Purple 20 */
$palette-purple-20: rgb(64, 16, 117) !default;
/* Purple 10 */
$palette-purple-10: rgb(36, 6, 67) !default;
/* Purple 65 */
$palette-purple-65: rgb(183, 141, 239) !default;
/* Red 90 */
$palette-red-90: rgb(254, 222, 216) !default;
/* Red 80 */
$palette-red-80: rgb(254, 184, 171) !default;
/* Red 70 */
$palette-red-70: rgb(254, 143, 125) !default;
/* Red 60 */
$palette-red-60: rgb(254, 92, 76) !default;
/* Red 50 */
$palette-red-50: rgb(234, 0, 30) !default;
/* Red 95 */
$palette-red-95: rgb(254, 241, 238) !default;
/* Red 40 */
$palette-red-40: rgb(186, 5, 23) !default;
/* Red 30 */
$palette-red-30: rgb(142, 3, 15) !default;
/* Red 20 */
$palette-red-20: rgb(100, 1, 3) !default;
/* Red 10 */
$palette-red-10: rgb(48, 12, 1) !default;
/* Red 65 */
$palette-red-65: rgb(254, 119, 101) !default;
/* Red 15 */
$palette-red-15: rgb(74, 12, 4) !default;
/* Teal 15 */
$palette-teal-15: rgb(7, 40, 37) !default;
/* Teal 90 */
$palette-teal-90: rgb(172, 243, 228) !default;
/* Teal 80 */
$palette-teal-80: rgb(4, 225, 203) !default;
/* Teal 70 */
$palette-teal-70: rgb(1, 195, 179) !default;
/* Teal 60 */
$palette-teal-60: rgb(6, 165, 154) !default;
/* Teal 50 */
$palette-teal-50: rgb(11, 130, 124) !default;
/* Teal 40 */
$palette-teal-40: rgb(5, 103, 100) !default;
/* Teal 95 */
$palette-teal-95: rgb(222, 249, 243) !default;
/* Teal 30 */
$palette-teal-30: rgb(2, 77, 76) !default;
/* Teal 20 */
$palette-teal-20: rgb(2, 52, 52) !default;
/* Teal 10 */
$palette-teal-10: rgb(7, 27, 18) !default;
/* Teal 65 */
$palette-teal-65: rgb(3, 180, 167) !default;
/* Violet 15 */
$palette-violet-15: rgb(61, 1, 87) !default;
/* Violet 90 */
$palette-violet-90: rgb(242, 222, 254) !default;
/* Violet 80 */
$palette-violet-80: rgb(229, 185, 254) !default;
/* Violet 70 */
$palette-violet-70: rgb(216, 146, 254) !default;
/* Violet 60 */
$palette-violet-60: rgb(203, 101, 255) !default;
/* Violet 50 */
$palette-violet-50: rgb(186, 1, 255) !default;
/* Violet 40 */
$palette-violet-40: rgb(150, 2, 199) !default;
/* Violet 95 */
$palette-violet-95: rgb(249, 240, 255) !default;
/* Violet 30 */
$palette-violet-30: rgb(115, 3, 148) !default;
/* Violet 20 */
$palette-violet-20: rgb(72, 26, 84) !default;
/* Violet 10 */
$palette-violet-10: rgb(46, 0, 57) !default;
/* Violet 65 */
$palette-violet-65: rgb(209, 125, 254) !default;
/* Yellow 70 */
$palette-yellow-70: rgb(228, 162, 1) !default;
/* Yellow 60 */
$palette-yellow-60: rgb(202, 133, 1) !default;
/* Yellow 50 */
$palette-yellow-50: rgb(168, 100, 3) !default;
/* Yellow 40 */
$palette-yellow-40: rgb(140, 75, 2) !default;
/* Yellow 95 */
$palette-yellow-95: rgb(251, 243, 224) !default;
/* Yellow 30 */
$palette-yellow-30: rgb(111, 52, 0) !default;
/* Yellow 20 */
$palette-yellow-20: rgb(79, 33, 0) !default;
/* Yellow 10 */
$palette-yellow-10: rgb(40, 18, 2) !default;
/* Yellow 65 */
$palette-yellow-65: rgb(215, 147, 4) !default;
/* Yellow 15 */
$palette-yellow-15: rgb(46, 34, 4) !default;
/* Yellow 90 */
$palette-yellow-90: rgb(249, 227, 182) !default;
/* Yellow 80 */
$palette-yellow-80: rgb(252, 192, 3) !default;
/* Used as the background color for the active state on rows or items on list-like components. */
$color-background-row-active: rgb(243, 243, 243) !default;
/* Light variant of COLOR_BACKGROUND. */
$color-background-light: rgb(255, 255, 255) !default;
/* Used as the background color for the hover state on rows or items on list-like components. */
$color-background-row-hover: rgb(243, 243, 243) !default;
/* Dark color for UI elements related to errors. Accessible with white text. */
$color-background-error-dark: rgb(186, 5, 23) !default;
/* Background color for UI elements related to providing neutral information (not error, success, or warning). */
$color-background-info: rgb(116, 116, 116) !default;
/* Alternative background color for dark portions of the app. */
$color-background-alt-inverse: rgb(3, 45, 96) !default;
/* Used as the background color for the new state on rows or items on list-like components. */
$color-background-row-new: rgb(205, 239, 196) !default;
/* Dark color for UI elements that have to do with success. Accessible with white text. */
$color-background-success-dark: rgb(46, 132, 74) !default;
/* Used as background for loading stencils on white background. */
$color-background-stencil: rgb(243, 243, 243) !default;
/* Color for UI elements that have to do with warning. */
$color-background-warning: rgb(254, 147, 57) !default;
/* Background color for highlighting text in search results. */
$color-background-highlight-search: rgb(255, 240, 63) !default;
/* Hover color for UI elements related to destructive actions. */
$color-background-destructive-hover: rgb(142, 3, 15) !default;
/* Default background color for the whole app. */
$color-background: rgb(243, 243, 243) !default;
/* Our product brand blue, darkened to meet accessibility color contrast ratios with white text. */
$color-brand-dark: rgb(1, 118, 211) !default;
/* The color of the mask overlay that appears when you enter a modal state. */
$color-background-backdrop: rgba(255, 255, 255, 0.75) !default;
/* Dark variant of COLOR_BACKGROUND. */
$color-background-dark: rgb(243, 243, 243) !default;
/* Our product brand blue. */
$color-brand: rgb(27, 150, 255) !default;
/* Color for UI elements related to destructive actions. */
$color-background-destructive: rgb(186, 5, 23) !default;
/* Color for UI elements that have to do with success. */
$color-background-success: rgb(69, 198, 90) !default;
/* Dark Color for UI elements that have to do with warning. */
$color-background-warning-dark: rgb(254, 147, 57) !default;
/* Color for UI elements related to the offline state. */
$color-background-offline: rgb(68, 68, 68) !default;
/* Used as an alternate background for loading stencils on gray backgrounds. */
$color-background-stencil-alt: rgb(243, 243, 243) !default;
/* Light variant of COLOR_BACKGROUND_INVERSE. */
$color-background-inverse-light: rgb(3, 45, 96) !default;
/* Background color for UI elements related to the concept of an external user or customer. */
$color-background-customer: rgb(254, 147, 57) !default;
/* Color for UI elements related to errors. */
$color-background-error: rgb(254, 92, 76) !default;
/* Second default background color for the app. */
$color-background-alt: rgb(255, 255, 255) !default;
/* Darker color for UI elements that have to do with success. Accessible with white text. */
$color-background-success-darker: rgb(25, 78, 49) !default;
/* Used as the background color for selected rows or items on list-like components. */
$color-background-row-selected: rgb(243, 243, 243) !default;
/* Our product brand blue, darkened even further. */
$color-brand-darker: rgb(1, 68, 134) !default;
/* Background color for text selected with a mouse. */
$color-background-selection: rgb(216, 230, 254) !default;
/* Active color for UI elements related to destructive actions. */
$color-background-destructive-active: rgb(142, 3, 15) !default;
/* Default background color for dark portions of the app (like Stage Left or tooltips). */
$color-background-inverse: rgb(0, 22, 57) !default;
/* Background color for highlighting UI elements. */
$color-background-highlight: rgb(250, 255, 189) !default;
/* Dark alternative border color for UI elements related to errors. */
$color-border-error-dark: rgb(254, 143, 125) !default;
/* Our product brand blue, darkened to meet accessibility color contrast ratios with white text. */
$color-border-brand-dark: rgb(1, 68, 134) !default;
/* Border color for UI elements related to providing neutral information (not error, success, or warning). */
$color-border-info: rgb(116, 116, 116) !default;
/* Border color for UI elements that have to do with warnings. */
$color-border-warning: rgb(254, 147, 57) !default;
/* Hover border color for UI elements that have to do with destructive actions. */
$color-border-destructive-hover: rgb(186, 5, 23) !default;
/* Default border color for UI elements. */
$color-border: rgb(201, 201, 201) !default;
/* Dark alternative border color for UI elements that have to do with success. */
$color-border-success-dark: rgb(46, 132, 74) !default;
/* Border color for UI elements that have to do with destructive actions. */
$color-border-destructive: rgb(234, 0, 30) !default;
/* Darkest separator color - used as an alternate separator color when more differentiation is desired. */
$color-border-separator-alt-2: rgb(201, 201, 201) !default;
/* Border color for UI elements related to the offline state. */
$color-border-offline: rgb(68, 68, 68) !default;
/* Border color for UI elements that have to do with success. */
$color-border-success: rgb(145, 219, 139) !default;
/* Lightest separator color - used as default separator on white backgrounds. */
$color-border-separator: rgb(243, 243, 243) !default;
/* Our product brand blue. */
$color-border-brand: rgb(27, 150, 255) !default;
/* Used to delineate the boundary of a component that is being clicked. Specific to builders. */
$color-border-selection-active: rgb(243, 243, 243) !default;
/* Border color for UI elements that have to do with errors. */
$color-border-error: rgb(234, 0, 30) !default;
/* Used to delineate the boundary of a component that is being hovered over. Specific to builders. */
$color-border-selection-hover: rgb(27, 150, 255) !default;
/* Used as the border color for the hover state on selected rows or items on list-like components. */
$color-border-row-selected-hover: rgb(27, 150, 255) !default;
/* Border color for UI elements related to the concept of an external user or customer. */
$color-border-customer: rgb(254, 147, 57) !default;
/* Used to delineate the boundary of a selected component. Specific to builders. */
$color-border-selection: rgb(1, 118, 211) !default;
/* Used as the border color for selected rows or items on list-like components. */
$color-border-row-selected: rgb(1, 118, 211) !default;
/* Medium separator color - used as default separator on light gray backgrounds. */
$color-border-separator-alt: rgb(201, 201, 201) !default;
/* Border color to match UI elements using color-background-inverse. */
$color-border-inverse: rgb(0, 22, 57) !default;
/* Active border color for UI elements that have to do with destructive actions. */
$color-border-destructive-active: rgb(142, 3, 15) !default;
/* Alternative border color for UI elements related to errors. */
$color-border-error-alt: rgb(254, 143, 125) !default;
/* Used as a separator on dark backgrounds, such as stage left navigation. */
$color-border-separator-inverse: rgb(3, 45, 96) !default;
$border-radius-small: 0.125rem !default;
/* Icons in lists, record home icon, unbound input elements */
$border-radius-medium: 0.25rem !default;
$border-radius-large: 0.5rem !default;
/* Circle for global use, action icon bgd shape */
$border-radius-circle: 50% !default;
$border-width-thin: 1px !default;
$border-width-thick: 2px !default;
/* Shadow for active states on interactive elements. */
$shadow-active: 0 0 2px #0176d3 !default;
/* Shadow for drag-n-drop. */
$shadow-drag: 0 2px 4px 0 rgba(0, 0, 0, 0.40) !default;
/* Shadow for drop down. */
$shadow-drop-down: 0 2px 3px 0 rgba(0, 0, 0, 0.16) !default;
/* 0 seconds, 0 frames */
$duration-instantly: 0s !default;
/* 0.05 seconds, 3 frames */
$duration-immediately: 0.05s !default;
/* 0.1 seconds, 6 frames */
$duration-quickly: 0.1s !default;
/* 0.2 seconds, 12 frames */
$duration-promptly: 0.2s !default;
/* 0.4 seconds, 24 frames */
$duration-slowly: 0.4s !default;
/* 3.2 seconds, 192 frames */
$duration-paused: 3.2s !default;
/* Default font-family for Salesforce applications */
$font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default;
$font-family-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default;
$font-family-monospace: Consolas, Menlo, Monaco, Courier, monospace !default;
/* Constant typography token for font size 1 */
$font-size-1: 0.625rem !default;
/* Constant typography token for font size 2 */
$font-size-2: 0.75rem !default;
/* Constant typography token for font size 3 */
$font-size-3: 0.8125rem !default;
/* Variable typography token for font size 10 */
$var-font-size-10: 2rem !default;
/* Constant typography token for font size 4 */
$font-size-4: 0.875rem !default;
/* Variable typography token for font size 11 */
$var-font-size-11: 2.625rem !default;
/* Constant typography token for font size 5 */
$font-size-5: 1rem !default;
/* Constant typography token for font size 6 */
$font-size-6: 1.125rem !default;
/* Constant typography token for font size 7 */
$font-size-7: 1.25rem !default;
/* Constant typography token for font size 8 */
$font-size-8: 1.5rem !default;
/* Variable typography token for font size 1 */
$var-font-size-1: 0.625rem !default;
/* Constant typography token for font size 9 */
$font-size-9: 1.75rem !default;
/* Variable typography token for font size 2 */
$var-font-size-2: 0.75rem !default;
/* Variable typography token for font size 3 */
$var-font-size-3: 0.8125rem !default;
/* Constant typography token for font size 10 */
$font-size-10: 2rem !default;
/* Variable typography token for font size 4 */
$var-font-size-4: 0.875rem !default;
/* Constant typography token for font size 11 */
$font-size-11: 2.625rem !default;
/* Variable typography token for font size 5 */
$var-font-size-5: 1rem !default;
/* Variable typography token for font size 6 */
$var-font-size-6: 1.125rem !default;
/* Variable typography token for font size 7 */
$var-font-size-7: 1.25rem !default;
/* Variable typography token for font size 8 */
$var-font-size-8: 1.5rem !default;
/* Variable typography token for font size 9 */
$var-font-size-9: 1.75rem !default;
/* Use for large headings only. */
$font-weight-light: 300 !default;
/* Most all body copy. */
$font-weight-regular: 400 !default;
/* Used sparingly for emphasized text within regular body copy. */
$font-weight-bold: 700 !default;
/* Unitless line-heights for reusability */
$line-height-heading: 1.25 !default;
/* Unitless line-heights for reusability */
$line-height-text: 1.5 !default;
/* Remove extra leading. Unitless line-heights for reusability */
$line-height-reset: 1 !default;
/* Variable unitless line-heights for reusability */
$var-line-height-text: 1.5 !default;
/* 50% transparency of an element */
$opacity-5: 0.5 !default;
/* 80% transparency of an element */
$opacity-8: 0.8 !default;
/* Disabled state of BRAND_HEADER_CONTRAST_WEAK */
$brand-header-contrast-weak-disabled: rgba(166, 166, 166, 0.25) !default;
/* Gray Color 11 */
$color-gray-11: rgb(62, 62, 60) !default;
/* Transparent value of BRAND_PRIMARY at 10% */
$brand-primary-transparent-10: rgba(21, 137, 238, 0.1) !default;
/* Gray Color 12 */
$color-gray-12: rgb(43, 40, 38) !default;
/* These RGBA values need to be updated if BRAND_BACKGROUND_DARK changes, solves webkit bug */
$brand-background-dark-transparent: rgba(221, 219, 218, 0) !default;
/* Gray Color 13 */
$color-gray-13: rgb(8, 7, 7) !default;
/* Background color a branded app header */
$brand-header: rgb(255, 255, 255) !default;
/* Active / Hover state of BRAND_LIGHT */
$brand-light-active: rgb(227, 229, 237) !default;
/* Variant of BRAND_HEADER_CONTRAST that provides a warm color */
$brand-header-contrast-warm: rgb(186, 5, 23) !default;
/* Disabled state of BRAND_HEADER_ICON */
$brand-header-icon-disabled: rgba(145, 145, 145, 0.25) !default;
/* Active / Hover state of BRAND_HEADER_CONTRAST */
$brand-header-contrast-active: rgb(80, 80, 80) !default;
/* Primary page background color */
$brand-background-primary: rgb(250, 250, 249) !default;
/* Primary brand color */
$brand-primary: rgb(27, 150, 255) !default;
/* Active / Hover state of BRAND_HEADER_CONTRAST_WEAK */
$brand-header-contrast-weak-active: rgb(129, 129, 129) !default;
/* Active / Hover state of BRAND_CONTRAST */
$brand-contrast-active: rgb(13, 14, 18) !default;
/* Variant of BRAND_HEADER_CONTRAST that provides a cool color */
$brand-header-contrast-cool: rgb(1, 68, 134) !default;
/* Variant of BRAND_HEADER that is accessible with BRAND_HEADER */
$brand-header-contrast-inverse: rgb(255, 255, 255) !default;
/* Dark variant of BRAND that is accessible with light colors */
$brand-dark: rgb(1, 118, 211) !default;
/* Dark variant of BRAND that is accessible with white */
$brand-accessible: rgb(1, 118, 211) !default;
/* Dark variant of BRAND_BACKGROUND_PRIMARY, used within gradient of background color */
$brand-background-dark: rgb(232, 232, 232) !default;
/* Active / Hover state of BRAND_TEXT_LINK */
$brand-text-link-active: rgb(1, 68, 134) !default;
/* Gray Color 1 */
$color-gray-1: rgb(255, 255, 255) !default;
/* Gray Color 2 */
$color-gray-2: rgb(250, 250, 249) !default;
/* Active / Hover state of BRAND_HEADER_ICON */
$brand-header-icon-active: rgb(129, 129, 129) !default;
/* Gray Color 3 */
$color-gray-3: rgb(243, 242, 242) !default;
/* Icons of BRAND_HEADER that is accessible with BRAND_HEADER */
$brand-header-icon: rgb(145, 145, 145) !default;
/* Disabled state of BRAND_A11Y */
$brand-disabled: rgb(201, 199, 197) !default;
/* Primary text link brand color */
$brand-text-link: rgb(11, 92, 171) !default;
/* Gray Color 4 */
$color-gray-4: rgb(236, 235, 234) !default;
/* Gray Color 5 */
$color-gray-5: rgb(221, 219, 218) !default;
/* Gray Color 6 */
$color-gray-6: rgb(201, 199, 197) !default;
/* Active / Hover state of BRAND_A11Y */
$brand-accessible-active: rgb(1, 68, 134) !default;
/* Gray Color 7 */
$color-gray-7: rgb(176, 173, 171) !default;
/* Active / Hover state of BRAND_DARK */
$brand-dark-active: rgb(37, 48, 69) !default;
/* Gray Color 8 */
$color-gray-8: rgb(150, 148, 146) !default;
/* Active / Hover state of BRAND_HEADER_CONTRAST */
$brand-header-contrast-inverse-active: rgb(238, 238, 238) !default;
/* Active / Hover state of BRAND_HEADER_CONTRAST_COOL */
$brand-header-contrast-cool-active: rgb(1, 68, 134) !default;
/* Gray Color 9 */
$color-gray-9: rgb(112, 110, 107) !default;
/* Variant of BRAND that is accessible with BRAND */
$brand-contrast: rgb(26, 27, 30) !default;
/* Weak contrast ratio, useful for iconography */
$brand-header-contrast-weak: rgb(145, 145, 145) !default;
/* Active / Hover state of BRAND_PRIMARY */
$brand-primary-active: rgb(1, 118, 211) !default;
/* These RGBA values need to be updated if BRAND_BACKGROUND_PRIMARY changes, solves webkit bug */
$brand-background-primary-transparent: rgba(176, 196, 223, 0) !default;
/* Variant of BRAND_HEADER that is accessible with BRAND_HEADER */
$brand-header-contrast: rgb(94, 94, 94) !default;
/* Transparent value of BRAND_PRIMARY */
$brand-primary-transparent: rgba(21, 137, 238, 0.1) !default;
/* Active / Hover state of BRAND_HEADER_CONTRAST_WARM */
$brand-header-contrast-warm-active: rgb(186, 5, 23) !default;
/* Transparent value of BRAND_PRIMARY at 40% */
$brand-primary-transparent-40: rgba(21, 137, 238, 0.4) !default;
/* Light variant of BRAND that is accessible with dark colors */
$brand-light: rgb(244, 246, 254) !default;
/* Gray Color 10 */
$color-gray-10: rgb(81, 79, 77) !default;
/* Generic sizing token scale for UI components. */
$size-x-small: 12rem !default;
/* Generic sizing token scale for UI components. */
$size-xxx-small: 3rem !default;
/* Large utility icon without border. */
$square-icon-utility-large: 1.5rem !default;
/* Generic sizing token scale for UI components. */
$size-xx-small: 6rem !default;
/* Search Results: Outer colored tile */
$square-icon-small-boundary: 1.5rem !default;
/* Generic sizing token scale for UI components. */
$size-small: 15rem !default;
/* Medium utility icon without border. */
$square-icon-utility-medium: 1.25rem !default;
/* Very small icon button boundary. */
$square-icon-x-small-boundary: 1.25rem !default;
/* Small utility icon without border. */
$square-icon-utility-small: 1rem !default;
/* Stage left & actions: Outer colored tile */
$square-icon-medium-boundary: 2rem !default;
/* Anchor: Icon content (white shape) */
$square-icon-large-content: 2rem !default;
/* Anchor: Outer colored tile */
$square-icon-large-boundary: 3rem !default;
/* Generic sizing token scale for UI components. */
$size-medium: 20rem !default;
/* Stage left & actions: Icon content (white shape) */
$square-icon-medium-content: 1rem !default;
/* Generic sizing token scale for UI components. */
$size-x-large: 40rem !default;
/* Very small icons in icon buttons. */
$square-icon-x-small-content: 0.5rem !default;
/* Variable medium boundary for square icons */
$var-square-icon-medium-boundary: 2rem !default;
/* Icon button boundary. */
$square-icon-medium-boundary-alt: 2.25rem !default;
/* Generic sizing token scale for UI components. */
$size-xx-large: 60rem !default;
/* Anchor: avatar */
$square-icon-large-boundary-alt: 5rem !default;
/* Generic sizing token scale for UI components. */
$size-large: 25rem !default;
/* Search Results: Icon content (white shape) */
$square-icon-small-content: 0.75rem !default;
/* Very very small icon button boundary. */
$square-icon-xx-small-boundary: 1rem !default;
/* Alternate medium tap target size */
$square-icon-medium-content-alt: 0.875rem !default;
/* Variable spacing token for size X Large */
$var-spacing-x-large: 2rem !default;
/* Variable horizontal spacing token for size Small */
$var-spacing-horizontal-small: 0.75rem !default;
/* Variable horizontal spacing token for size XX Large */
$var-spacing-horizontal-xx-large: 3rem !default;
/* Constant spacing token for size X small */
$spacing-x-small: 0.5rem !default;
/* Constant spacing token for size XXX small */
$spacing-xxx-small: 0.125rem !default;
/* Constant spacing token for size XX small */
$spacing-xx-small: 0.25rem !default;
/* Variable vertical spacing token for size Large */
$var-spacing-vertical-large: 1.5rem !default;
/* Variable spacing token for size Large */
$var-spacing-large: 1.5rem !default;
/* Variable spacing token for size Medium */
$var-spacing-medium: 1rem !default;
/* Variable vertical spacing token for size Medium */
$var-spacing-vertical-medium: 1rem !default;
/* Variable vertical spacing token for size X Small */
$var-spacing-vertical-x-small: 0.5rem !default;
/* Constant spacing token for size Small */
$spacing-small: 0.75rem !default;
/* Variable vertical spacing token for size XXX Small */
$var-spacing-vertical-xxx-small: 0.125rem !default;
/* Variable spacing token for size X Small */
$var-spacing-x-small: 0.5rem !default;
/* Variable spacing token for size XXX Small */
$var-spacing-xxx-small: 0.125rem !default;
/* Variable horizontal spacing token for size X Large */
$var-spacing-horizontal-x-large: 2rem !default;
/* Variable horizontal spacing token for size XX Small */
$var-spacing-horizontal-xx-small: 0.25rem !default;
/* Variable spacing token for size XX Large */
$var-spacing-xx-large: 3rem !default;
/* Constant spacing token for size Medium */
$spacing-medium: 1rem !default;
/* Variable vertical spacing token for size XX Large */
$var-spacing-vertical-xx-large: 3rem !default;
/* Variable vertical spacing token for size Small */
$var-spacing-vertical-small: 0.75rem !default;
/* Variable spacing token for size Small */
$var-spacing-small: 0.75rem !default;
/* Constant spacing token for 0 */
$spacing-none: 0 !default;
/* Variable horizontal spacing token for size Large */
$var-spacing-horizontal-large: 1.5rem !default;
/* Constant spacing token for size X Large */
$spacing-x-large: 2rem !default;
/* Constant spacing token for size XX Large */
$spacing-xx-large: 3rem !default;
/* Variable horizontal spacing token for size XXX Small */
$var-spacing-horizontal-xxx-small: 0.125rem !default;
/* Variable horizontal spacing token for size X Small */
$var-spacing-horizontal-x-small: 0.5rem !default;
/* Variable spacing token for size XX Small */
$var-spacing-xx-small: 0.25rem !default;
/* Variable horizontal spacing token for size Medium */
$var-spacing-horizontal-medium: 1rem !default;
/* Variable vertical spacing token for size XX Small */
$var-spacing-vertical-xx-small: 0.25rem !default;
/* Variable vertical spacing token for size X Large */
$var-spacing-vertical-x-large: 2rem !default;
/* Constant spacing token for size Large */
$spacing-large: 1.5rem !default;
/* Action label text color */
$color-text-action-label: rgb(116, 116, 116) !default;
/* Link color on dark background */
$color-text-link-inverse: rgb(255, 255, 255) !default;
/* Link color on dark background - active state */
$color-text-link-inverse-active: rgba(255, 255, 255, 0.5) !default;
/* Action label active text color */
$color-text-action-label-active: rgb(3, 45, 96) !default;
/* Color for texts or icons that are related to warnings on a dark background. */
$color-text-warning: rgb(254, 147, 57) !default;
/* Focus link text */
$color-text-link-focus: rgb(1, 68, 134) !default;
/* Text color for destructive actions - hover state */
$color-text-destructive-hover: rgb(186, 5, 23) !default;
/* Disabled link text */
$color-text-link-disabled: rgb(3, 45, 96) !default;
/* Body text color */
$color-text-default: rgb(3, 45, 96) !default;
/* Text color for destructive actions */
$color-text-destructive: rgb(234, 0, 30) !default;
/* Hover link text */
$color-text-link-hover: rgb(1, 68, 134) !default;
/* Text color for success text. */
$color-text-success: rgb(46, 132, 74) !default;
/* Color for text that is purposefully de-emphasized to create visual hierarchy. */
$color-text-weak: rgb(116, 116, 116) !default;
/* Input placeholder text on dark backgrounds. */
$color-text-placeholder-inverse: rgb(243, 243, 243) !default;
/* Link text (508) */
$color-text-link: rgb(1, 118, 211) !default;
/* Color for texts that are related to warnings on a light background. */
$color-text-warning-alt: rgb(140, 75, 2) !default;
/* Default icon color. */
$color-text-icon-default: rgb(116, 116, 116) !default;
/* Our product brand blue. */
$color-text-brand: rgb(27, 150, 255) !default;
/* Error text for inputs and error misc */
$color-text-error: rgb(234, 0, 30) !default;
/* Customer text used in anchor subtitle */
$color-text-customer: rgb(254, 147, 57) !default;
/* Text color found on any primary brand color */
$color-text-brand-primary: rgb(255, 255, 255) !default;
/* Active link text */
$color-text-link-active: rgb(3, 45, 96) !default;
/* Color of required field marker. */
$color-text-required: rgb(234, 0, 30) !default;
/* Link color on dark background - disabled state */
$color-text-link-inverse-disabled: rgba(255, 255, 255, 0.15) !default;
/* Inverse text color for dark backgrounds */
$color-text-inverse: rgb(255, 255, 255) !default;
/* Input placeholder text. */
$color-text-placeholder: rgb(116, 116, 116) !default;
/* Weak inverse text color for dark backgrounds */
$color-text-inverse-weak: rgb(174, 174, 174) !default;
/* Link color on dark background - hover state */
$color-text-link-inverse-hover: rgba(255, 255, 255, 0.75) !default;
/* Text color for success text on dark backgrounds. */
$color-text-success-inverse: rgb(69, 198, 90) !default;
/* Text color for field labels. */
$color-text-label: rgb(116, 116, 116) !default;
/* Tap target size for elements that rely on width and height dimensions */
$square-tappable: 2.75rem !default;
/* Small tap target size for elements that rely on width and height dimensions */
$square-tappable-small: 2rem !default;
/* X-small tap target size for elements that rely on width and height dimensions */
$square-tappable-x-small: 1.5rem !default;
/* Xx-small tap target size for elements that rely on width and height dimensions */
$square-tappable-xx-small: 1.25rem !default;
/* Tap target size for elements that rely on height or line-height */
$height-tappable: 2.75rem !default;
/* Small tap target size for elements that rely on height or line-height */
$height-tappable-small: 2rem !default;
/* Dropdown */
$z-index-dropdown: 7000 !default;
/* Docked element */
$z-index-docked: 4 !default;
/* Notifications under modals */
$z-index-reminder: 8500 !default;
/* Spinner */
$z-index-spinner: 9050 !default;
/* Default */
$z-index-default: 1 !default;
/* Deep dive */
$z-index-deepdive: -99999 !default;
/* Toasts */
$z-index-toast: 10000 !default;
/* Dialog */
$z-index-dialog: 6000 !default;
/* Popup */
$z-index-popup: 5000 !default;
/* Modal */
$z-index-modal: 9000 !default;
/* Stickied element */
$z-index-sticky: 100 !default;
/* Overlay */
$z-index-overlay: 8000 !default;
/* Brandable modal header */
$color-background-modal-brand: rgb(1, 68, 134) !default;
/* Background color for notification list item. */
$color-background-notification: rgb(255, 255, 255) !default;
/* Notifications badge background color. */
$color-background-notification-badge-active: rgb(3, 45, 96) !default;
/* Notifications badge background color. */
$color-background-notification-badge-hover: rgb(1, 68, 134) !default;
$color-contrast-primary: rgb(243, 243, 243) !default;
$color-foreground-primary: rgb(255, 255, 255) !default;
/* The color of the mask overlay that appears when you enter a modal state. */
$color-background-temp-modal-tint: rgba(126, 140, 153, 0.8) !default;
/* Color of the indicator dot. */
$color-background-indicator-dot: rgb(3, 45, 96) !default;
/* Used when further differentiation is needed because colorBackground and colorBackgroundAlt are both being used in close proximity. */
$color-background-alt-2: rgb(243, 243, 243) !default;
/* Hover color for utility bar item. */
$color-background-utility-bar-hover: rgb(243, 243, 243) !default;
/* Brand hover fill color */
$fill-brand-hover: rgb(1, 68, 134) !default;
/* Brand fill color */
$fill-brand: rgb(1, 118, 211) !default;
/* Background color for default desktop chrome (ex. global header) */
$color-background-chrome-desktop: rgb(255, 255, 255) !default;
/* Active button backgrounds on modal headers */
$color-background-modal-button-active: rgba(0, 0, 0, 0.16) !default;
/* Selected checkboxes */
$color-background-input-checkbox-selected: rgb(27, 150, 255) !default;
/* Default checkboxes */
$color-background-input-checkbox: rgb(255, 255, 255) !default;
$color-background-primary: rgb(255, 255, 255) !default;
/* The color of the mask overlay that appears when you enter a modal state. */
$color-background-temp-modal-tint-alt: rgba(255, 255, 255, 0.75) !default;
$color-background-brand-primary-focus: rgb(1, 68, 134) !default;
$color-background-brand-primary-active: rgb(3, 45, 96) !default;
$color-background-brand-primary-hover: rgb(1, 68, 134) !default;
/* Background color for default mobile chrome (ex. global header) */
$color-background-chrome-mobile: rgb(1, 118, 211) !default;
/* Background color for search input fields. */
$color-background-input-search: rgba(0, 0, 0, 0.16) !default;
$color-contrast-secondary: rgb(255, 255, 255) !default;
/* Secondary top bar background color (child browser, file preview, etc.) */
$color-background-browser: rgb(116, 116, 116) !default;
$color-background-brand-primary: rgb(1, 118, 211) !default;
/* Used as the default background color for temporary dialog elements, such as the progress spinner background. */
$color-background-temp-modal: rgba(126, 140, 153, 0.8) !default;
/* Used as gray background when more contrast is desired. */
$color-background-shade: rgb(243, 243, 243) !default;
/* Standard modal header */
$color-background-modal: rgb(255, 255, 255) !default;
/* Hovered active toggle background color. */
$color-background-toggle-active-hover: rgb(1, 68, 134) !default;
/* Background color for payloads in the feed. */
$color-background-payload: rgb(243, 243, 243) !default;
/* Button backgrounds on modal headers */
$color-background-modal-button: rgba(0, 0, 0, 0.07) !default;
/* Brand active fill color */
$fill-brand-active: rgb(3, 45, 96) !default;
/* Active color for utility bar item. */
$color-background-utility-bar-active: rgb(27, 150, 255) !default;
/* Stage left org switcher dropdown arrow background color. */
$color-background-org-switcher-arrow: rgb(0, 22, 57) !default;
/* Active toggle background color. */
$color-background-toggle-active: rgb(1, 68, 134) !default;
/* Alternative color for UI elements related to errors. */
$color-background-error-alt: rgb(254, 143, 125) !default;
/* Winter 18 token, this has been deprecated. Please use BRAND_BACKGROUND_PRIMARY instead. */
$page-color-background-primary: rgb(255, 255, 255) !default;
/* Used as gray background in conjunction with Shade when more contrast is desired. */
$color-background-shade-dark: rgb(201, 201, 201) !default;
/* Notifications badge background color. */
$color-background-notification-badge-focus: rgb(1, 68, 134) !default;
/* Background for utility icons that live in the action bar on mobile. */
$color-background-actionbar-icon-utility: rgb(116, 116, 116) !default;
$color-background-secondary: rgb(243, 243, 243) !default;
/* The borders to create the checkmark */
$color-border-input-checkbox-selected-checkmark: rgb(255, 255, 255) !default;
/* Disabled stroke color. */
$color-stroke-disabled: rgb(243, 243, 243) !default;
/* Active stroke color for our product brand blue. */
$color-stroke-brand-active: rgb(3, 45, 96) !default;
$color-border-primary: rgb(201, 201, 201) !default;
$color-border-brand-primary-focus: rgb(1, 118, 211) !default;
$color-border-brand-primary-hover: rgb(1, 118, 211) !default;
/* Border color for brandable primary button */
$color-border-button-brand: rgb(1, 118, 211) !default;
$color-border-brand-primary-active: rgb(3, 45, 96) !default;
$color-border-brand-primary: rgb(27, 150, 255) !default;
$color-border-button-focus-inverse: rgb(243, 243, 243) !default;
/* Used to delineate the boundary of a selected canvas element that is being hovered over. Specific to builders. */
$color-border-canvas-element-selection-hover: rgb(1, 68, 134) !default;
/* Used to delineate the boundary of a selected canvas element. Specific to builders. */
$color-border-canvas-element-selection: rgb(26, 185, 255) !default;
/* Hover stroke color for our product brand blue. */
$color-stroke-brand-hover: rgb(1, 118, 211) !default;
/* Stroke color for our global header buttons. */
$color-stroke-header-button: rgb(174, 174, 174) !default;
$color-border-link-focus-inverse: rgb(243, 243, 243) !default;
/* Our product brand blue. */
$color-stroke-brand: rgb(1, 118, 211) !default;
/* Used to delineate the boundary of a specific region. Specific to builders. */
$color-border-hint: rgb(3, 45, 96) !default;
/* Deprecated */
$elevation-32: 32 !default;
/* Deprecated */
$elevation-shadow-16: 0 16px 16px 0 rgba(0, 0, 0, 0.16) !default;
/* Deprecated */
$elevation-inverse-shadow-0: none !default;
/* Custom glow for focus states on UI link elements with explicit containers on dark or vibrantly colored backgrounds. */
$shadow-link-focus-inverse: 0 0 3px #f3f3f3 !default;
/* Deprecated: Use SHADOW_DOCKED */
$elevation-inverse-shadow-2: 0 -2px 2px 0 rgba(0, 0, 0, 0.16) !default;
/* Deprecated */
$elevation-inverse-shadow-4: 0 -4px 4px 0 rgba(0, 0, 0, 0.16) !default;
/* Deprecated */
$elevation-16: 16 !default;
/* Deprecated */
$elevation-shadow-3-below: 0 3px 3px 0 rgba(0, 0, 0, 0.16) inset !default;
$shadow-soft-primary-hover: none !default;
/* Deprecated */
$elevation-inverse-shadow-8: 0 -8px 8px 0 rgba(0, 0, 0, 0.16) !default;
/* Soft dropshadow found on general UI elements such as containers */
$shadow-soft-primary: none !default;
/* Deprecated */
$elevation-inverse-shadow-32: 0 -32px 32px 0 rgba(0, 0, 0, 0.16) !default;
/* Hard dropshadow found on general UI elements such as containers */
$shadow-hard-primary: none !default;
/* Shadow above overflow menu close bar. */
$shadow-action-overflow-footer: 0 -2px 4px #f3f3f3 !default;
/* Deprecated */
$elevation-0: 0 !default;
/* Deprecated */
$elevation-3-inset: -3 !default;
/* Deprecated */
$elevation-2: 2 !default;
/* Shadow for overlays. */
$shadow-overlay: 0 -2px 4px rgba(0, 0, 0, 0.07) !default;
/* Shadow for buttons. */
$shadow-button: 0 1px 1px 0 rgba(0, 0, 0, 0.05) !default;
/* Deprecated */
$elevation-4: 4 !default;
/* Deprecated */
$elevation-shadow-0: none !default;
/* Deprecated */
$elevation-inverse-shadow-16: 0 -16px 16px 0 rgba(0, 0, 0, 0.16) !default;
/* Deprecated */
$elevation-shadow-2: 0 2px 2px 0 rgba(0, 0, 0, 0.16) !default;
/* Deprecated */
$elevation-8: 8 !default;
/* Deprecated */
$elevation-shadow-4: 0 4px 4px 0 rgba(0, 0, 0, 0.16) !default;
/* Inset shadow for editable grid */
$shadow-focus-inset: 0 0 2px 2px #1b96ff inset !default;
/* Deprecated */
$elevation-inverse-shadow-3-below: 0 -3px 3px 0 rgba(0, 0, 0, 0.16) inset !default;
$shadow-soft-primary-active: none !default;
/* Deprecated */
$elevation-shadow-8: 0 8px 8px 0 rgba(0, 0, 0, 0.16) !default;
/* Shadow on images. */
$shadow-image: 0 1px 1px rgba(0, 0, 0, 0.16) !default;
/* Deprecated */
$elevation-shadow-32: 0 32px 32px 0 rgba(0, 0, 0, 0.16) !default;
/* Medium headings. */
$font-size-heading-medium: 1.125rem !default;
$font-size-medium: 1rem !default;
/* Small body text. */
$font-size-text-small: 0.8125rem !default;
$font-size-medium-a: 1.125rem !default;
$font-size-x-large: 1.5rem !default;
$font-size-x-large-a: 1.57rem !default;
/* Extra large headings. */
$font-size-heading-x-large: 1.75rem !default;
$font-size-xx-large: 2rem !default;
/* Extra extra small text. */
$font-size-text-xx-small: 0.625rem !default;
$font-size-large: 1.25rem !default;
/* Large headings. */
$font-size-heading-large: 1.5rem !default;
/* Extra large body text. */
$font-size-text-x-large: 1.25rem !default;
$font-size-x-small: 0.625rem !default;
/* Extra Extra small headings. */
$font-size-heading-xx-small: 0.625rem !default;
/* Extra small headings. */
$font-size-heading-x-small: 0.75rem !default;
/* Large body text. */
$font-size-text-large: 1.125rem !default;
$font-size-small: 0.875rem !default;
/* Medium body text. */
$font-size-text-medium: 1rem !default;
/* Extra small body text. */
$font-size-text-x-small: 0.75rem !default;
/* Small headings. */
$font-size-heading-small: 0.875rem !default;
/* Deprecated: use FONT_FAMILY instead for regular body text and FONT_FAMILY_HEADING for headings. */
$font-family-text: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default;
/* Use squareIconMediumBoundary */
$square-icon-medium: 2.375rem !default;
/* Small tap target size */
$square-icon-small: 1rem !default;
/* Very small icons to replace force font with temporary override. */
$square-icon-xx-small-content: .875rem !default;
/* Large tap target size. */
$square-icon-large: 3.125rem !default;
$component-spacing-margin: 0 !default;
$component-spacing-padding: 1rem !default;
/* Hovered icon color for a button that has a parent element that has a hover state */
$color-text-icon-inverse-hint-hover: rgba(255, 255, 255, 0.75) !default;
/* Color for text on a selected tab in a tab group. */
$color-text-tab-label-selected: rgb(1, 118, 211) !default;
/* Icon color for a button that has a parent element that has a hover state on a dark background. This is the default text/icon color for that button before its parent has been hovered over. */
$color-text-icon-inverse-hint: rgba(255, 255, 255, 0.5) !default;
/* Color for disabled text in a tab group. */
$color-text-tab-label-disabled: rgb(243, 243, 243) !default;
/* Tertiary body text color */
$color-text-tertiary: rgb(116, 116, 116) !default;
/* Active state on a standalone link on a dark background. */
$color-text-inverse-active: rgb(26, 185, 255) !default;
/* Primary body text color */
$color-text-primary: rgb(3, 45, 96) !default;
$color-text-link-primary-focus: rgb(1, 118, 211) !default;
/* Color for text in focus state in a tab group. */
$color-text-tab-label-focus: rgb(1, 68, 134) !default;
/* Icon color for a button that has a parent element that has a hover state. This is the default text/icon color for that button before its parent has been hovered over. */
$color-text-icon-default-hint-borderless: rgb(243, 243, 243) !default;
/* Text color for pills. */
$color-text-pill: rgb(1, 118, 211) !default;
$color-text-link-primary-hover: rgb(1, 118, 211) !default;
/* Color for text in active state in a tab group. */
$color-text-tab-label-active: rgb(3, 45, 96) !default;
/* Color for text in hover state in a tab group. */
$color-text-tab-label-hover: rgb(1, 68, 134) !default;
/* Color for text on toast messages. */
$color-text-toast: rgb(243, 243, 243) !default;
/* Color for disabled toggles */
$color-text-toggle-disabled: rgb(201, 201, 201) !default;
/* Top bar icon color */
$color-text-browser: rgb(255, 255, 255) !default;
$color-text-link-primary-active: rgb(3, 45, 96) !default;
$color-text-link-primary: rgb(1, 118, 211) !default;
/* Top bar active icon color */
$color-text-browser-active: rgba(0, 0, 0, 0.4) !default;
/* Color for non-interactive icons that represent a selected item in a list */
$color-text-icon-brand: rgb(1, 118, 211) !default;
/* Hover state on a standalone link on a dark background. */
$color-text-inverse-hover: rgb(174, 174, 174) !default;
/* Modal header title */
$color-text-modal: rgb(255, 255, 255) !default;
/* Modal header button text color */
$color-text-modal-button: rgb(116, 116, 116) !default;
/* Color for interactive utility icons */
$color-text-icon-utility: rgb(174, 174, 174) !default;
/* Secondary body text color */
$color-text-secondary: rgb(116, 116, 116) !default;
/* Text in stage left navigation. */
$color-text-stage-left: rgb(243, 243, 243) !default;
/* Default value for text-transform */
$text-transform: none !default;
/* Background color for a new notification list item. */
$color-background-notification-new: rgb(243, 243, 243) !default;
/* Focused header button icon color */
$fill-header-button-focus: rgb(1, 118, 211) !default;
/* Background color for reminder notification on hover */
$color-background-reminder-hover: rgb(255, 255, 255) !default;
/* Notifications badge background color. */
$color-background-notification-badge: rgb(234, 0, 30) !default;
/* Hovered header button icon color */
$fill-header-button-hover: rgb(1, 68, 134) !default;
/* Disabled input */
$color-background-input-disabled: rgb(243, 243, 243) !default;
/* Hovered toggle background color. */
$color-background-toggle-hover: rgb(147, 147, 147) !default;
/* Background color for reminder notification */
$color-background-reminder: rgb(243, 243, 243) !default;
/* Hovered background color for success buttons */
$color-background-button-success-hover: rgb(46, 132, 74) !default;
/* Header button icon color */
$fill-header-button: rgb(174, 174, 174) !default;
/* Toggle background color. */
$color-background-toggle: rgb(174, 174, 174) !default;
/* Background color for success buttons */
$color-background-button-success: rgb(69, 198, 90) !default;
/* Disabled checkboxes */
$color-background-input-checkbox-disabled: rgb(201, 201, 201) !default;
/* Background color for pills. */
$color-background-pill: rgb(255, 255, 255) !default;
/* Color of the spinner dot. */
$color-background-spinner-dot: rgb(174, 174, 174) !default;
/* The color of the mask overlay that provides user feedback on interaction. */
$color-background-backdrop-tint: rgb(243, 243, 243) !default;
/* Selected input field (when user has clicked or tabbed into field) */
$color-background-input-active: rgb(255, 255, 255) !default;
/* The background color of an internal scrollbar. */
$color-background-scrollbar: rgb(243, 243, 243) !default;
/* Disabled toggle background color. */
$color-background-toggle-disabled: rgb(174, 174, 174) !default;
/* Background color for toast messaging. */
$color-background-toast: rgb(116, 116, 116) !default;
/* Background color of comment posts in the feed. */
$color-background-post: rgb(243, 243, 243) !default;
/* Default input field */
$color-background-input: rgb(255, 255, 255) !default;
/* Background color for success toast messaging. */
$color-background-toast-success: rgb(46, 132, 74) !default;
/* Color of mask overlay that sits on top of an image when text is present. */
$color-background-image-overlay: rgba(0, 0, 0, 0.4) !default;
/* Active background color for success buttons */
$color-background-button-success-active: rgb(46, 132, 74) !default;
/* Background color for error toast messaging. */
$color-background-toast-error: rgb(234, 0, 30) !default;
/* The background color of an internal scrollbar track. */
$color-background-scrollbar-track: rgb(201, 201, 201) !default;
/* Background color for input field that has encountered an error. */
$color-background-input-error: rgb(253, 221, 227) !default;
/* Border color for disabled inverse button. */
$color-border-button-inverse-disabled: rgba(255, 255, 255, 0.15) !default;
/* Hovered border color for a button with an icon that has a parent element that has a hover state */
$color-border-icon-inverse-hint-hover: rgba(255, 255, 255, 0.75) !default;
/* Border color for a button with an icon that has a parent element that has a hover state */
$color-border-icon-inverse-hint: rgba(255, 255, 255, 0.5) !default;
/* Border color for an active tab. */
$color-border-tab-active: rgb(255, 255, 255) !default;
/* Border color on disabled form elements. */
$color-border-input-disabled: rgb(201, 201, 201) !default;
/* Border color on notification reminders. */
$color-border-reminder: rgb(243, 243, 243) !default;
/* Border color for brandable primary button - disabled state */
$color-border-button-brand-disabled: rgba(0, 0, 0, 0) !default;
/* Border color for default secondary button */
$color-border-button-default: rgb(201, 201, 201) !default;
/* Border color on active form elements. */
$color-border-input-active: rgb(27, 150, 255) !default;
/* Border color on form elements. */
$color-border-input: rgb(201, 201, 201) !default;
/* These borders create the faux checkmark when the checkbox toggle is in the checked state. */
$color-border-toggle-checked: rgb(255, 255, 255) !default;
/* Border color for a selected tab in a tab group. */
$color-border-tab-selected: rgb(1, 118, 211) !default;
$border-stroke-width-thin: 1px !default;
$border-stroke-width-thick: 2px !default;
/* Shadow for notifications that should be elevated above other components but under modals. */
$shadow-reminder: 0 2px 3px 0 rgba(0, 0, 0, 0.20) !default;
/* Custom glow for focus states on UI elements with explicit containers. */
$shadow-button-focus: 0 0 3px #0176d3 !default;
/* Custom glow for focus states on UI button elements with explicit containers on dark or vibrantly colored backgrounds. */
$shadow-button-focus-inverse: 0 0 3px #f3f3f3 !default;
/* Shadow to make inline edit card pop out. */
$shadow-inline-edit: 0 2px 4px 4px rgba(0, 0, 0, 0.16) !default;
/* Shadow on elements that are docked to the bottom of the viewport. */
$shadow-docked: 0 -2px 2px 0 rgba(0, 0, 0, 0.16) !default;
/* Shadow for header. */
$shadow-header: 0 2px 4px rgba(0, 0, 0, 0.07) !default;
/* 4.8 seconds */
$duration-toast-short: 4.8s !default;
/* 9.6 seconds */
$duration-toast-medium: 9.6s !default;
$illustration-empty-state-assistant: "/assets/images/illustrations/empty-state-assistant.svg" !default;
$illustration-empty-state-events: "/assets/images/illustrations/empty-state-events.svg" !default;
$illustration-empty-state-tasks: "/assets/images/illustrations/empty-state-tasks.svg" !default;
$banner-user-default-image: "" !default;
$banner-group-default-image: "" !default;
$user-default-avatar: "/profile_avatar_200.png" !default;
$user-default-avatar-medium: "/profile_avatar_160.png" !default;
$user-default-avatar-small: "/profile_avatar_96.png" !default;
$group-default-avatar: "/group_avatar_200.png" !default;
$group-default-avatar-medium: "/group_avatar_160.png" !default;
$group-default-avatar-small: "/group_avatar_96.png" !default;
/* Line heights for tabs */
$line-height-tab: 2.5rem !default;
$border-radius-pill: 15rem !default;
/* Minimum height of a pill. */
$height-pill: 1.625rem !default;
/* Brand header. Phone 44px; Tablet 50px */
$height-header: 2.75rem !default;
/* Action footer menu. Phone 44px; Tablet 50px */
$height-footer: 3.75rem !default;
/* Text input height */
$height-input: 1.875rem !default;
/* Stage left for desktop when closed (showing icons only). */
$width-stage-left-collapsed: 4rem !default;
/* Stage left for desktop when open. */
$width-stage-left-expanded: 15rem !default;
/* Maximum width for action overflow menu so that it's not full-screen for tablet. */
$max-width-action-overflow-menu: 512px !default;
/* Default amount of line breaks before text is truncated */
$line-clamp: 3 !default;
/* Icon color on dark background */
$color-text-icon-inverse: rgb(255, 255, 255) !default;
/* Text color for a button that has a parent element that has a hover state. This is the default text/icon color for that button before its parent has been hovered over. */
$color-text-button-inverse-disabled: rgba(255, 255, 255, 0.5) !default;
/* Input icon */
$color-text-input-icon: rgb(174, 174, 174) !default;
/* Icon color on dark background - active state */
$color-text-icon-inverse-active: rgb(255, 255, 255) !default;
/* Text color for default secondary button - hover state */
$color-text-button-default-hover: rgb(1, 118, 211) !default;
/* Input disabled text */
$color-text-input-disabled: rgb(116, 116, 116) !default;
/* Text color for default secondary button */
$color-text-button-default: rgb(1, 118, 211) !default;
/* Default icon color - disabled state */
$color-text-icon-default-disabled: rgb(201, 201, 201) !default;
/* Text color for brandable primary button - disabled state */
$color-text-button-brand-disabled: rgb(255, 255, 255) !default;
/* Text color for brandable primary button - hover state */
$color-text-button-brand-hover: rgb(255, 255, 255) !default;
/* Default icon color - hover state. */
$color-text-icon-default-hover: rgb(1, 118, 211) !default;
/* Text color for brandable primary button */
$color-text-button-brand: rgb(255, 255, 255) !default;
/* Text color for default secondary button - disabled state */
$color-text-button-default-disabled: rgb(201, 201, 201) !default;
/* Color for default text in a tab group. */
$color-text-tab-label: rgb(3, 45, 96) !default;
/* Default icon color - active state. */
$color-text-icon-default-active: rgb(3, 45, 96) !default;
/* Icon color for a button that has a parent element that has a hover state. This is the default text/icon color for that button before its parent has been hovered over. */
$color-text-icon-default-hint: rgb(174, 174, 174) !default;
/* Text color for brandable primary button - active state */
$color-text-button-brand-active: rgb(255, 255, 255) !default;
/* Text color for a button that has a parent element that has a hover state. This is the default text/icon color for that button before its parent has been hovered over. */
$color-text-button-inverse: rgb(243, 243, 243) !default;
/* Text color for default secondary button - active state */
$color-text-button-default-active: rgb(1, 118, 211) !default;
/* Icon color on dark background - disabled state */
$color-text-icon-inverse-disabled: rgba(255, 255, 255, 0.15) !default;
/* Text color for a button that has a parent element that has a hover state. This is the default text/icon color for that button before its parent has been hovered over. */
$color-text-button-default-hint: rgb(174, 174, 174) !default;
/* Icon color on dark background - hover state */
$color-text-icon-inverse-hover: rgb(255, 255, 255) !default;
/* Typed input text */
$color-text-input-focus-inverse: rgb(3, 45, 96) !default;
/* White avatar group background color. */
$avatar-group-color-background-lightest: rgb(255, 255, 255) !default;
/* Dark gray avatar group background color. */
$avatar-group-color-background-inverse: rgb(116, 116, 116) !default;
/* White badge background color. */
$badge-color-background-lightest: rgb(255, 255, 255) !default;
/* Dark gray badge background color. */
$badge-color-background-inverse: rgb(116, 116, 116) !default;
$brand-band-default-image: "" !default;
$brand-band-color-background-primary: rgba(0, 0, 0, 0) !default;
$brand-band-color-background-primary-transparent: rgba(0, 0, 0, 0) !default;
$brand-band-color-background-secondary: rgba(0, 0, 0, 0) !default;
$brand-band-color-background-secondary-transparent: rgba(0, 0, 0, 0) !default;
$brand-band-image-height-small: 6rem !default;
$brand-band-image-height-medium: 12.5rem !default;
$brand-band-image-height-large: 18.75rem !default;
$brand-band-scrim-height: 3.125rem !default;
$template-gutters: 0 !default;
$template-profile-gutters: 0 !default;
$button-icon-color-border-primary: rgb(255, 255, 255) !default;
$button-icon-boundary-touch: 2.75rem !default;
$button-color-border-primary: rgb(243, 243, 243) !default;
$button-color-border-brand-primary: rgb(1, 118, 211) !default;
$button-color-border-secondary: rgba(255, 255, 255, 0.8) !default;
$button-border-radius: .25rem !default;
/* Default secondary button - focus state */
$color-background-button-default-focus: rgb(243, 243, 243) !default;
/* Use BRAND_ACCESSIBLE to pick up theming capabilities */
$button-color-background-brand-primary: rgb(1, 118, 211) !default;
/* Disabled button backgrounds on inverse/dark backgrounds */
$color-background-button-inverse-disabled: rgba(0, 0, 0, 0) !default;
/* Default secondary button - hover state */
$color-background-button-default-hover: rgb(243, 243, 243) !default;
/* Default secondary button */
$color-background-button-default: rgb(255, 255, 255) !default;
/* Background color for icon-only button - disabled state */
$color-background-button-icon-disabled: rgb(255, 255, 255) !default;
/* Background color for icon-only button - focus state */
$color-background-button-icon-focus: rgb(243, 243, 243) !default;
$button-color-background-secondary: rgba(255, 255, 255, 0.8) !default;
/* Brandable primary button - disabled state */
$color-background-button-brand-disabled: rgb(243, 243, 243) !default;
/* Brandable primary button - hover state */
$color-background-button-brand-hover: rgb(1, 68, 134) !default;
/* Active button backgrounds on inverse backgrounds on mobile */
$color-background-button-inverse-active: rgba(0, 0, 0, 0.24) !default;
/* Background color for icon-only button - hover state */
$color-background-button-icon-hover: rgb(243, 243, 243) !default;
/* Brandable primary button */
$color-background-button-brand: rgb(1, 118, 211) !default;
/* Background color for icon-only button */
$color-background-button-icon: rgba(0, 0, 0, 0) !default;
/* Default secondary button - disabled state */
$color-background-button-default-disabled: rgb(255, 255, 255) !default;
/* Background color for icon-only button - active state */
$color-background-button-icon-active: rgb(243, 243, 243) !default;
/* Brandable primary button - active state */
$color-background-button-brand-active: rgb(3, 45, 96) !default;
/* Button backgrounds on inverse/dark backgrounds */
$color-background-button-inverse: rgba(0, 0, 0, 0) !default;
$button-color-background-primary: rgb(255, 255, 255) !default;
/* Default secondary button - active state */
$color-background-button-default-active: rgb(243, 243, 243) !default;
/* Line heights for regular buttons */
$line-height-button: 1.875rem !default;
/* Line heights for small buttons */
$line-height-button-small: 1.75rem !default;
/* Line height for touch screens */
$button-line-height-touch: 2.65rem !default;
$button-color-text-primary: rgb(255, 255, 255) !default;
/* Default Card component background color. */
$card-color-background: rgb(255, 255, 255) !default;
$card-color-border: rgb(201, 201, 201) !default;
$card-footer-color-border: rgba(0, 0, 0, 0) !default;
$card-shadow: none !default;
/* Use for active tab. */
$card-font-weight: 400 !default;
$card-footer-margin: 0.75rem !default;
$card-body-padding: 0 1rem !default;
$card-wrapper-spacing: 1rem !default;
$card-header-padding: 0.75rem 1rem 0 !default;
$card-spacing-large: 1.5rem !default;
$card-header-margin: 0 0 0.75rem !default;
/* Use for vertical spacing between cards */
$card-spacing-margin: 1rem !default;
$card-footer-padding: 0 1rem 0.75rem !default;
$card-spacing-small: 0.75rem !default;
$card-footer-text-align: right !default;
/* Default background for carousel card */
$carousel-color-background: rgb(255, 255, 255) !default;
/* Default background for carousel navigation indicators */
$carousel-indicator-color-background: rgb(255, 255, 255) !default;
/* Default hover background for carousel navigation indicators */
$carousel-indicator-color-background-hover: rgb(243, 243, 243) !default;
/* Default focus background for carousel navigation indicators */
$carousel-indicator-color-background-focus: rgb(1, 68, 134) !default;
/* Default background for active state on carousel navigation indicators */
$carousel-indicator-color-background-active: rgb(1, 118, 211) !default;
/* Default width for carousel indicator width */
$carousel-indicator-width: 1rem !default;
/* Inbound chat message background color. */
$chat-message-color-background-inbound: rgb(243, 243, 243) !default;
/* Outbound chat message background color. */
$chat-message-color-background-outbound: rgb(1, 68, 134) !default;
/* Outbound agent chat message background color. */
$chat-message-color-background-outbound-agent: rgb(116, 116, 116) !default;
/* Status chat message background color. */
$chat-message-color-background-status: rgb(255, 255, 255) !default;
/* Line heights for toggle buttons */
$line-height-toggle: 1.3rem !default;
/* Slider size for toggle. */
$square-toggle-slider: 1.25rem !default;
/* Slider width. */
$width-toggle: 3rem !default;
/* Slider height. */
$height-toggle: 1.5rem !default;
$color-picker-slider-thumb-color-background: rgb(243, 243, 243) !default;
$color-picker-slider-thumb-border-color: rgb(68, 68, 68) !default;
$color-picker-swatch-shadow: inset 0 0 1px rgba(0,0,0,0.4) !default;
$color-picker-input-custom-hex-font-size: 0.75rem !default;
$color-picker-selector-width: 14rem !default;
$color-picker-swatches-width: 13.3rem !default;
$color-picker-range-height: 5rem !default;
$color-picker-slider-height: 1.5rem !default;
$color-picker-thumb-width: 0.375rem !default;
$color-picker-range-indicator-size: 0.75rem !default;
$color-picker-input-custom-hex-width: 4.2rem !default;
$color-picker-swatch-size: 1.25rem !default;
/* Alternating row background color for tables */
$table-color-background-stripes: rgb(243, 243, 243) !default;
/* Default background color for table headers */
$table-color-background-header: rgb(255, 255, 255) !default;
/* Hover state for table header cells */
$table-color-background-header-hover: rgb(243, 243, 243) !default;
/* Focused state for table header cells */
$table-color-background-header-focus: rgb(255, 255, 255) !default;
/* Resizable handle color for table header cells */
$table-color-background-header-resizable-handle: rgb(174, 174, 174) !default;
$table-border-radius: 0 !default;
$table-cell-spacing: 0.5rem !default;
$table-color-text-header: rgb(68, 68, 68) !default;
$datepicker-color-text-day-adjacent-month: rgb(116, 116, 116) !default;
/* Docked panel header’s background color. */
$color-background-docked-panel-header: rgb(255, 255, 255) !default;
/* Docked panel’s background color when open. */
$color-background-docked-panel: rgb(255, 255, 255) !default;
/* Height of the docked bar. */
$height-docked-bar: 2.5rem !default;
/* Utility bar notifications badge background color. */
$utility-bar-color-background-notification-badge: rgb(254, 92, 76) !default;
/* Utility bar notifications focus background color. */
$utility-bar-color-background-notification-focus: rgb(201, 201, 201) !default;
$drop-zone-slot-height: 0.25rem !default;
/* Default color for animated icon waffle for app switcher. */
$color-background-icon-waffle: rgb(116, 116, 116) !default;
/* Default background color for a typing icon dot. */
$typing-icon-dot-color-background-gray: rgb(201, 201, 201) !default;
/* Active background color for a typing icon dot when animcating. */
$typing-icon-dot-color-background-gray-dark: rgb(201, 201, 201) !default;
/* Brand fill color */
$global-action-fill-hover: rgb(1, 68, 134) !default;
/* Global action icon size */
$global-action-icon-size: 1.5rem !default;
/* Typing icon size */
$typing-icon-dot-size: .5rem !default;
$einstein-header-background: "/einstein-headers/einstein-header-background.svg" !default;
$einstein-header-figure: "/einstein-headers/einstein-figure.svg" !default;
/* Background color for Einstein header */
$einstein-header-background-color: rgb(144, 208, 254) !default;
/* Text shadow color for Einstein header background to make text more readable */
$einstein-header-text-shadow: #cfe9fe !default;
$files-z-index-hover: 5 !default;
$form-label-font-size: 0.75rem !default;
/* Global Header background color */
$global-header-color-background: rgb(255, 255, 255) !default;
$brand-logo-image: "/logo-noname.svg" !default;
/* Global identity icon size. */
$square-icon-global-identity-icon: 1.25rem !default;
/* Hovered context bar item background color. */
$color-background-context-bar-item-hover: rgb(255, 255, 255) !default;
/* Active context bar item background color. */
$color-background-context-bar-item-active: rgb(255, 255, 255) !default;
/* Default context bar background color. */
$color-background-context-bar: rgb(255, 255, 255) !default;
/* Context TAB bar item background color. */
$color-background-context-tab-bar-item: rgb(255, 255, 255) !default;
/* Hovered context bar item background color. */
$color-background-context-bar-inverse-item-hover: rgba(255, 255, 255, 0.2) !default;
/* A Gradient used for putting shadows on the bottom when box-shadow is not possible. */
$color-background-context-bar-shadow: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0, rgba(0, 0, 0, 0) 100%) !default;
/* Active context bar item background color. */
$color-background-context-bar-inverse-item-active: rgba(255, 255, 255, 0.4) !default;
/* Brand color in context bar for default theme */
$color-background-context-bar-brand-accent: rgb(13, 157, 218) !default;
/* Highlight for context bar action (hover and focus states). */
$color-background-context-bar-action-highlight: rgba(255, 255, 255, 0.2) !default;
/* Divider in context bar */
$color-border-context-bar-divider: rgba(255, 255, 255, 0.2) !default;
/* Border color in context bar */
$color-border-context-bar-item: rgba(0, 0, 0, 0.2) !default;
/* Border color in context bar on dark background */
$color-border-context-bar-inverse-item: rgba(255, 255, 255, 0.2) !default;
/* Border color in context bar for default theme */
$color-border-context-bar-theme-default: rgb(13, 157, 218) !default;
/* Alternate border color in context bar for default theme */
$color-border-context-bar-theme-default-alt: rgb(243, 243, 243) !default;
/* Hovered border color in context bar for default theme */
$color-border-context-bar-theme-default-hover: rgb(50, 29, 113) !default;
/* Active border color in context bar for default theme */
$color-border-context-bar-theme-default-active: rgb(243, 243, 243) !default;
/* Context bar height. */
$height-context-bar: 2.5rem !default;
/* Context bar tab accent height when tab is active. */
$globalnavigation-item-height-accent-active: 3px !default;
/* Context bar tab accent height when tab is focused. */
$globalnavigation-item-height-accent-focus: 4px !default;
/* Context bar text color */
$color-text-context-bar: rgb(68, 68, 68) !default;
/* Context bar text color on a dark background */
$color-text-context-bar-inverse: rgb(255, 255, 255) !default;
/* Context bar action trigger text color */
$color-text-context-bar-action-trigger: rgba(255, 255, 255, 0.4) !default;
/* Primary color for illustrations */
$illustration-color-primary: rgb(144, 208, 254) !default;
/* Secondary color for illustrations */
$illustration-color-secondary: rgb(207, 233, 254) !default;
$input-static-font-size: 0.8125rem !default;
$input-static-font-weight: 400 !default;
$input-readonly-font-weight: 400 !default;
$input-static-color: rgb(24, 24, 24) !default;
/* Default Page Header background color */
$page-header-color-background: rgb(243, 243, 243) !default;
/* Secondary Page Header background color */
$page-header-color-background-alt: rgb(255, 255, 255) !default;
/* Use COLOR_BACKGROUND_PAGE_HEADER instead. */
$color-background-anchor: rgb(243, 243, 243) !default;
/* Page Header background color */
$color-background-page-header: rgb(255, 255, 255) !default;
$page-header-color-border: rgba(0, 0, 0, 0) !default;
$page-header-joined-color-border: rgb(201, 201, 201) !default;
$page-header-border-radius: 0 !default;
$page-header-shadow: none !default;
$page-header-title-font-size: 1.125rem !default;
$page-header-title-font-weight: 400 !default;
/* Page header Entity Icon size */
$page-header-icon-size: 2.25rem !default;
$page-header-spacing-margin: 0 !default;
$page-header-spacing-padding: 1rem !default;
$page-header-spacing-row: 0.75rem 1rem !default;
/* Dropshadow found on docked UI panels when positioned to the left of a viewport */
$panel-docked-left-shadow: 1px 0 3px rgba(0,0,0,0.25) !default;
/* Dropshadow found on docked UI panels when positioned to the left of a viewport */
$panel-docked-right-shadow: -1px 0 3px 0 rgba(0,0,0,0.25) !default;
/* The hover background color for Salespath stages that have not been completed. */
$color-background-path-incomplete-hover: rgb(201, 201, 201) !default;
/* The background color for the step action arrow that are the active stage */
$color-background-path-step-action-active: rgb(0, 22, 57) !default;
/* The background color for Salespath stages that have not been completed. */
$color-background-path-incomplete: rgb(243, 243, 243) !default;
/* The hover background color for Salespath stages that are the active stage. */
$color-background-path-active-hover: rgb(3, 45, 96) !default;
/* The background color for the final stage of a Salespath when it has been lost. */
$color-background-path-lost: rgb(234, 0, 30) !default;
/* The background color for Salespath stages that are the active stage. */
$color-background-path-active: rgb(1, 68, 134) !default;
/* The background color for Salespath guidance coaching section. */
$color-background-guidance: rgb(255, 255, 255) !default;
/* The background color for the final stage of a Salespath when it has been lost. */
$color-background-path-won: rgb(46, 132, 74) !default;
/* The hover background color for Salespath stages that are the current stage. */
$color-background-path-current-hover: rgb(255, 255, 255) !default;
/* The background color for Salespath stages that are the current stage. */
$color-background-path-current: rgb(255, 255, 255) !default;
/* The hover background color for Salespath stages that are complete. */
$color-background-path-complete-hover: rgb(46, 132, 74) !default;
/* The background color for Salespath stages that are complete. */
$color-background-path-complete: rgb(59, 167, 85) !default;
/* The background color for the step action arrow that are the current stage */
$color-background-path-step-action-current: rgb(1, 68, 134) !default;
/* The background color for the overall Salespath coaching section. */
$color-background-path-expanded: rgb(255, 255, 255) !default;
/* Used as a separator between dark colors like the stages of salespath. */
$color-border-path-divider: rgb(255, 255, 255) !default;
/* Used as a border color for the active Path step. */
$color-border-path-current: rgb(1, 68, 134) !default;
/* Used as a border color for the current path step on hover. */
$color-border-path-current-hover: rgb(3, 45, 96) !default;
/* Line heights for salespath */
$line-height-salespath: 1.5rem !default;
/* Height of Path */
$height-sales-path: 2rem !default;
/* Width of action button to right */
$path-button-width-fixed: 13rem !default;
/* Border width of current stage for path item */
$width-path-border-current: 0.125rem !default;
/* Used as a text color for the active Path step. */
$color-text-path-current: rgb(1, 68, 134) !default;
/* Used as a text hover color for the active Path step. */
$color-text-path-current-hover: rgb(3, 45, 96) !default;
/* The default background color for Popover Walkthrough */
$popover-walkthrough-color-background: rgb(0, 22, 57) !default;
/* The default background color for Popover Walkthrough Header */
$popover-walkthrough-header-color-background: rgb(3, 45, 96) !default;
/* The default background color for alternative Popover Walkthrough */
$popover-walkthrough-color-background-alt: rgb(1, 118, 211) !default;
$popover-walkthrough-header-image: "" !default;
$popover-walkthrough-alt-image: "" !default;
/* The background color for nubbins on the bottom of alternate walkthrough popovers */
$popover-walkthrough-alt-nubbin-color-background: rgb(1, 118, 211) !default;
/* Tooltip nubbin square size */
$nubbin-size-default: 1rem !default;
/* Tooltip nubbin offset for branded popovers */
$nubbin-triangle-offset: -0.1875rem !default;
/* The default border width for Branded Popover */
$popover-brand-border-width: 0.25rem !default;
/* Text color for step counter in walkthrough variant of popovers */
$popover-color-text: rgb(201, 201, 201) !default;
/* The default background color for Progress Indicator */
$progress-color-background: rgb(255, 255, 255) !default;
/* The shaded background color for Progress Indicator */
$progress-color-background-shade: rgb(243, 243, 243) !default;
/* The background color for the Progress Bar */
$progress-bar-color-background: rgb(201, 201, 201) !default;
/* The background color of the fill for the Progress Bar */
$progress-bar-color-background-fill: rgb(26, 185, 255) !default;
/* The success background color of the fill for the Progress Bar */
$progress-bar-color-background-fill-success: rgb(46, 132, 74) !default;
/* Borders of each indicator item within the Progress Indicator */
$progress-color-border: rgb(255, 255, 255) !default;
/* Shaded borders of each indicator item within the Progress Indicator */
$progress-color-border-shade: rgb(243, 243, 243) !default;
/* Hovered border color of each indicator item within the Progress Indicator */
$progress-color-border-hover: rgb(1, 118, 211) !default;
/* Active border color of each indicator item within the Progress Indicator */
$progress-color-border-active: rgb(27, 150, 255) !default;
/* Height of the Progress Bar */
$progress-bar-height: 0.125rem !default;
/* Inner color for progress ring component */
$color-background-progress-ring-content: rgb(255, 255, 255) !default;
/* Thickness of the Progress Ring's ring */
$progress-ring-width: 0.1875rem !default;
/* Line height for touch screens */
$radio-button-group-line-height-touch: 2.69rem !default;
/* Dark notification component background color. */
$notification-color-background-inverse: rgb(116, 116, 116) !default;
$slider-handle-color-background: rgb(27, 150, 255) !default;
$slider-handle-color-background-hover: rgb(1, 118, 211) !default;
$slider-handle-color-background-focus: rgb(1, 118, 211) !default;
$slider-handle-color-background-active: rgb(1, 118, 211) !default;
$slider-track-color-background: rgb(243, 243, 243) !default;
$slider-track-color-background-fill: rgb(27, 150, 255) !default;
$slider-color-background-disabled: rgb(243, 243, 243) !default;
$slider-handle-shadow: rgba(0, 0, 0, 0.16) 0 2px 3px !default;
$slider-handle-size: 1rem !default;
$slider-track-height: 4px !default;
$slider-track-width: 100% !default;
/* Spinner size for xx-small modifier */
$spinner-size-xx-small: 0.5rem !default;
/* Spinner size for x-small modifier */
$spinner-size-x-small: 1rem !default;
/* Spinner size for small modifier */
$spinner-size-small: 1.25rem !default;
/* Spinner size for medium modifier */
$spinner-size-medium: 2rem !default;
/* Spinner size for large modifier */
$spinner-size-large: 2.75rem !default;
/* Split View background color. */
$split-view-color-background: rgb(243, 243, 243) !default;
/* Split View background color on row hover. */
$split-view-color-background-row-hover: rgb(255, 255, 255) !default;
/* Row dividers in Split View list */
$split-view-color-border: rgb(201, 201, 201) !default;
/* Default width for split view container */
$split-view-width: 25rem !default;
/* Use for active tab. */
$tabs-font-weight: 400 !default;
/* Vertical navigation shaded background color on row hover. */
$vertical-navigation-color-background-shade-row-hover: rgb(243, 243, 243) !default;
/* Vertical navigation shaded background color on row active. */
$vertical-navigation-color-background-shade-row-active: rgb(243, 243, 243) !default;
/* Text color for the Info section */
$welcome-mat-text-color-info: rgb(3, 45, 96) !default;
/* Background Image Path for the Welcome Mat Info section */
$welcome-mat-background-image-info: "/welcome-mat/bg-info@2x.png" !default;
/* Background overflow color for the Welcome Mat Info section */
$welcome-mat-background-color-info: rgb(207, 233, 254) !default;
/* Progress Bar background is white */
$welcome-mat-color-background-progress-bar: rgb(255, 255, 255) !default;
/* Box Shadow declaration */
$welcome-mat-color-action-shadow: rgba(0, 0, 0, 0.05) !default;
/* Completed icon color for the Welcome Mat Boxes */
$welcome-mat-color-icon-complete: rgb(201, 201, 201) !default;
/* Font size for the info title */
$welcome-mat-font-size-info-title: 2.625rem !default;
/* Welcome Mat Width */
$welcome-mat-width: 52.0625rem !default;
/* Min height for Overlay */
$welcome-mat-min-height: 25rem !default;
/* Max height for Overlay */
$welcome-mat-max-height: 37.5rem !default;
/* Welcome Mat Progress Bar width */
$welcome-mat-width-progress-bar: 12.5rem !default;
/* Size of the green completed check mark */
$welcome-mat-complete-icon-size: 1.25rem !default;
/* Size of the check mark in the green icon */
$welcome-mat-check-size: 0.625rem !default;
/* Bottom spacing (safe area) for background image */
$welcome-mat-spacing-info: 7.75rem !default;