<aura:tokens>
  <aura:import name="force:mqCommons" />
  <aura:import name="force:fontCommons" />
  <aura:token name="borderWidthThin" value="1px" property="top,right,bottom,left,margin*,padding*,border*,*width,*height,box-shadow,stroke,stroke-width" />
  <aura:token name="borderWidthThick" value="2px" property="top,right,bottom,left,margin*,padding*,border*,*width,*height,box-shadow,stroke,stroke-width" />
  <aura:token name="borderStrokeWidthThin" value="1px" property="top,right,bottom,left,margin*,padding*,border*,*width,*height,box-shadow,stroke,stroke-width" />
  <aura:token name="borderStrokeWidthThick" value="2px" property="top,right,bottom,left,margin*,padding*,border*,*width,*height,box-shadow,stroke,stroke-width" />
  <aura:token name="spacingNone" value="0" property="top,right,bottom,left,margin*,padding*,border*,*width,*height,box-shadow,stroke,stroke-width" />
  <aura:token name="spacingXxxSmall" value="0.125rem" property="top,right,bottom,left,margin*,padding*,border*,*width,*height,box-shadow,stroke,stroke-width" />
  <aura:token name="spacingXxSmall" value="0.25rem" property="top,right,bottom,left,margin*,padding*,border*,*width,*height,box-shadow,stroke,stroke-width" />
  <aura:token name="spacingXSmall" value="0.5rem" property="top,right,bottom,left,margin*,padding*,border*,*width,*height,box-shadow,stroke,stroke-width" />
  <aura:token name="spacingSmall" value="0.75rem" property="top,right,bottom,left,margin*,padding*,border*,*width,*height,box-shadow,stroke,stroke-width" />
  <aura:token name="spacingMedium" value="1rem" property="top,right,bottom,left,margin*,padding*,border*,*width,*height,box-shadow,stroke,stroke-width" />
  <aura:token name="spacingLarge" value="1.5rem" property="top,right,bottom,left,margin*,padding*,border*,*width,*height,box-shadow,stroke,stroke-width" />
  <aura:token name="spacingXLarge" value="2rem" property="top,right,bottom,left,margin*,padding*,border*,*width,*height,box-shadow,stroke,stroke-width" />
  <aura:token name="spacingXxLarge" value="3rem" property="top,right,bottom,left,margin*,padding*,border*,*width,*height,box-shadow,stroke,stroke-width" />
  <aura:token name="sizeXxSmall" value="6rem" property="font,font-size,*width,*height,flex,top,right,bottom,left,margin*,padding*,transform" />
  <aura:token name="sizeXSmall" value="12rem" property="font,font-size,*width,*height,flex,top,right,bottom,left,margin*,padding*,transform" />
  <aura:token name="sizeSmall" value="15rem" property="font,font-size,*width,*height,flex,top,right,bottom,left,margin*,padding*,transform" />
  <aura:token name="sizeMedium" value="20rem" property="font,font-size,*width,*height,flex,top,right,bottom,left,margin*,padding*,transform" />
  <aura:token name="sizeLarge" value="25rem" property="font,font-size,*width,*height,flex,top,right,bottom,left,margin*,padding*,transform" />
  <aura:token name="sizeXLarge" value="40rem" property="font,font-size,*width,*height,flex,top,right,bottom,left,margin*,padding*,transform" />
  <aura:token name="sizeXxLarge" value="60rem" property="font,font-size,*width,*height,flex,top,right,bottom,left,margin*,padding*,transform" />
  <aura:token name="squareIconUtilitySmall" value="1rem" property="font,font-size,*width,*height,flex,top,right,bottom,left,margin*,padding*,transform" />
  <aura:token name="squareIconUtilityMedium" value="1.25rem" property="font,font-size,*width,*height,flex,top,right,bottom,left,margin*,padding*,transform" />
  <aura:token name="squareIconUtilityLarge" value="1.5rem" property="font,font-size,*width,*height,flex,top,right,bottom,left,margin*,padding*,transform" />
  <aura:token name="squareIconLargeBoundary" value="3rem" property="font,font-size,*width,*height,flex,top,right,bottom,left,margin*,padding*,transform" />
  <aura:token name="squareIconLargeBoundaryAlt" value="5rem" property="font,font-size,*width,*height,flex,top,right,bottom,left,margin*,padding*,transform" />
  <aura:token name="squareIconLargeContent" value="2rem" property="font,font-size,*width,*height,flex,top,right,bottom,left,margin*,padding*,transform" />
  <aura:token name="squareIconMedium" value="2.375rem" property="font,font-size,*width,*height,flex,top,right,bottom,left,margin*,padding*,transform" />
  <aura:token name="squareIconMediumBoundary" value="2rem" property="font,font-size,*width,*height,flex,top,right,bottom,left,margin*,padding*,transform" />
  <aura:token name="squareIconMediumBoundaryAlt" value="2.25rem" property="font,font-size,*width,*height,flex,top,right,bottom,left,margin*,padding*,transform" />
  <aura:token name="squareIconMediumContent" value="1rem" property="font,font-size,*width,*height,flex,top,right,bottom,left,margin*,padding*,transform" />
  <aura:token name="squareIconMediumContentAlt" value="0.875rem" property="font,font-size,*width,*height,flex,top,right,bottom,left,margin*,padding*,transform" />
  <aura:token name="squareIconSmall" value="1rem" property="font,font-size,*width,*height,flex,top,right,bottom,left,margin*,padding*,transform" />
  <aura:token name="squareIconSmallBoundary" value="1.5rem" property="font,font-size,*width,*height,flex,top,right,bottom,left,margin*,padding*,transform" />
  <aura:token name="squareIconSmallContent" value=".75rem" property="font,font-size,*width,*height,flex,top,right,bottom,left,margin*,padding*,transform" />
  <aura:token name="squareIconXSmallBoundary" value="1.25rem" property="font,font-size,*width,*height,flex,top,right,bottom,left,margin*,padding*,transform" />
  <aura:token name="squareIconXSmallContent" value=".5rem" property="font,font-size,*width,*height,flex,top,right,bottom,left,margin*,padding*,transform" />
  <aura:token name="squareIconXxSmallBoundary" value="1rem" property="font,font-size,*width,*height,flex,top,right,bottom,left,margin*,padding*,transform" />
  <aura:token name="squareIconXxSmallContent" value=".875rem" property="font,font-size,*width,*height,flex,top,right,bottom,left,margin*,padding*,transform" />
  <aura:token name="squareIconLarge" value="3.125rem" property="font,font-size,*width,*height,flex,top,right,bottom,left,margin*,padding*,transform" />
  <aura:token name="heightPill" value="1.625rem" property="font,font-size,*width,*height,flex,top,right,bottom,left,margin*,padding*,transform" />
  <aura:token name="fillBrand" value="rgb(0, 112, 210)" property="background,color,fill" />
  <aura:token name="fillBrandHover" value="rgb(0, 95, 178)" property="background,color,fill" />
  <aura:token name="fillBrandActive" value="rgb(22, 50, 92)" property="background,color,fill" />
  <aura:token name="fillHeaderButton" value="rgb(159, 170, 181)" property="background,color,fill" />
  <aura:token name="fillHeaderButtonHover" value="rgb(0, 95, 178)" property="background,color,fill" />
  <aura:token name="fontWeightLight" value="300" property="font,font-weight" />
  <aura:token name="fontWeightRegular" value="400" property="font,font-weight" />
  <aura:token name="fontWeightBold" value="700" property="font,font-weight" />
  <aura:token name="fontSizeXSmall" value="0.625rem" property="font,font-size" />
  <aura:token name="fontSizeSmall" value="0.875rem" property="font,font-size" />
  <aura:token name="fontSizeMedium" value="1rem" property="font,font-size" />
  <aura:token name="fontSizeMediumA" value="1.125rem" property="font,font-size" />
  <aura:token name="fontSizeLarge" value="1.25rem" property="font,font-size" />
  <aura:token name="fontSizeXLarge" value="1.5rem" property="font,font-size" />
  <aura:token name="fontSizeXLargeA" value="1.57rem" property="font,font-size" />
  <aura:token name="fontSizeXxLarge" value="2rem" property="font,font-size" />
  <aura:token name="fontSizeTextXxSmall" value=".625rem" property="font,font-size" />
  <aura:token name="fontSizeTextXSmall" value=".75rem" property="font,font-size" />
  <aura:token name="fontSizeTextSmall" value=".8125rem" property="font,font-size" />
  <aura:token name="fontSizeTextMedium" value="1rem" property="font,font-size" />
  <aura:token name="fontSizeTextLarge" value="1.125rem" property="font,font-size" />
  <aura:token name="fontSizeTextXLarge" value="1.25rem" property="font,font-size" />
  <aura:token name="fontSizeHeadingXxSmall" value=".625rem" property="font,font-size" />
  <aura:token name="fontSizeHeadingXSmall" value=".75rem" property="font,font-size" />
  <aura:token name="fontSizeHeadingSmall" value=".875rem" property="font,font-size" />
  <aura:token name="fontSizeHeadingMedium" value="1.125rem" property="font,font-size" />
  <aura:token name="fontSizeHeadingLarge" value="1.5rem" property="font,font-size" />
  <aura:token name="fontSizeHeadingXLarge" value="2rem" property="font,font-size" />
  <aura:token name="lineHeightHeading" value="1.25" property="font,*height" />
  <aura:token name="lineHeightText" value="1.375" property="font,*height" />
  <aura:token name="lineHeightReset" value="1" property="font,*height" />
  <aura:token name="lineHeightTab" value="2.5rem" property="font,*height" />
  <aura:token name="fontFamily" value="'Salesforce Sans', Arial, sans-serif" property="font,font-family" />
  <aura:token name="fontFamilyText" value="'Salesforce Sans', Arial, sans-serif" property="font,font-family" />
  <aura:token name="fontFamilyHeading" value="'Salesforce Sans', Arial, sans-serif" property="font,font-family" />
  <aura:token name="borderRadiusSmall" value=".125rem" property="border*radius" />
  <aura:token name="borderRadiusMedium" value=".25rem" property="border*radius" />
  <aura:token name="borderRadiusLarge" value=".5rem" property="border*radius" />
  <aura:token name="borderRadiusPill" value="15rem" property="border*radius" />
  <aura:token name="borderRadiusCircle" value="50%" property="border*radius" />
  <aura:token name="colorBorder" value="rgb(216, 221, 230)" property="border*,box-shadow,background*" />
  <aura:token name="colorBorderBrand" value="rgb(21, 137, 238)" property="border*,box-shadow,outline,outline-color" />
  <aura:token name="colorBorderBrandDark" value="rgb(0, 112, 210)" property="border*,box-shadow" />
  <aura:token name="colorBorderCustomer" value="rgb(255, 154, 60)" property="border*,box-shadow" />
  <aura:token name="colorBorderDestructive" value="rgb(194, 57, 52)" property="border*,box-shadow" />
  <aura:token name="colorBorderDestructiveHover" value="rgb(166, 26, 20)" property="border*,box-shadow" />
  <aura:token name="colorBorderDestructiveActive" value="rgb(135, 5, 0)" property="border*,box-shadow" />
  <aura:token name="colorBorderInfo" value="rgb(84, 105, 141)" property="border*,box-shadow" />
  <aura:token name="colorBorderError" value="rgb(194, 57, 52)" property="border*,box-shadow" />
  <aura:token name="colorBorderErrorAlt" value="rgb(234, 130, 136)" property="border*,box-shadow" />
  <aura:token name="colorBorderErrorDark" value="rgb(234, 130, 136)" property="border*,box-shadow" />
  <aura:token name="colorBorderOffline" value="rgb(68, 68, 68)" property="border*,box-shadow" />
  <aura:token name="colorBorderSuccess" value="rgb(75, 202, 129)" property="border*,box-shadow" />
  <aura:token name="colorBorderSuccessDark" value="rgb(4, 132, 75)" property="border*,box-shadow" />
  <aura:token name="colorBorderWarning" value="rgb(255, 183, 93)" property="border*,box-shadow" />
  <aura:token name="colorBorderInverse" value="rgb(6, 28, 63)" property="border*,box-shadow" />
  <aura:token name="colorBorderTabSelected" value="rgb(0, 112, 210)" property="border*,box-shadow" />
  <aura:token name="colorBorderTabActive" value="rgb(255, 255, 255)" property="border*,box-shadow" />
  <aura:token name="colorBorderSeparator" value="rgb(244, 246, 249)" property="border*,box-shadow" />
  <aura:token name="colorBorderSeparatorAlt" value="rgb(216, 221, 230)" property="border*,box-shadow" />
  <aura:token name="colorBorderSeparatorAlt2" value="rgb(168, 183, 199)" property="border*,box-shadow" />
  <aura:token name="colorBorderSeparatorInverse" value="rgb(42, 66, 108)" property="border*,box-shadow" />
  <aura:token name="colorBorderRowSelected" value="rgb(0, 112, 210)" property="border*,box-shadow" />
  <aura:token name="colorBorderRowSelectedHover" value="rgb(21, 137, 238)" property="border*,box-shadow" />
  <aura:token name="colorBorderHint" value="rgb(42, 66, 108)" property="border*,box-shadow" />
  <aura:token name="colorBorderSelection" value="rgb(0, 112, 210)" property="border*,box-shadow" />
  <aura:token name="colorBorderSelectionHover" value="rgb(21, 137, 238)" property="border*,box-shadow" />
  <aura:token name="colorBorderSelectionActive" value="rgb(244, 246, 249)" property="border*,box-shadow" />
  <aura:token name="colorBorderCanvasElementSelection" value="rgb(94, 180, 255)" property="border*,box-shadow" />
  <aura:token name="colorBorderCanvasElementSelectionHover" value="rgb(0, 95, 178)" property="border*,box-shadow" />
  <aura:token name="colorBorderIconInverseHint" value="rgba(255, 255, 255, 0.5)" property="border*,box-shadow" />
  <aura:token name="colorBorderIconInverseHintHover" value="rgba(255, 255, 255, 0.75)" property="border*,box-shadow" />
  <aura:token name="colorBorderButtonBrand" value="rgb(0, 112, 210)" property="border*,box-shadow" />
  <aura:token name="colorBorderButtonBrandDisabled" value="rgba(0, 0, 0, 0)" property="border*,box-shadow" />
  <aura:token name="colorBorderButtonDefault" value="rgb(216, 221, 230)" property="border*,box-shadow" />
  <aura:token name="colorBorderButtonInverseDisabled" value="rgba(255, 255, 255, 0.15)" property="border*,box-shadow" />
  <aura:token name="colorBorderInput" value="rgb(216, 221, 230)" property="border*,box-shadow" />
  <aura:token name="colorBorderInputActive" value="rgb(21, 137, 238)" property="border*,box-shadow" />
  <aura:token name="colorBorderInputDisabled" value="rgb(168, 183, 199)" property="border*,box-shadow" />
  <aura:token name="colorBorderInputCheckboxSelectedCheckmark" value="rgb(255, 255, 255)" property="border*,box-shadow" />
  <aura:token name="colorBorderToggleChecked" value="rgb(255, 255, 255)" property="border*,box-shadow" />
  <aura:token name="colorStrokeBrand" value="rgb(0, 112, 210)" property="stroke" />
  <aura:token name="colorStrokeBrandHover" value="rgb(0, 112, 210)" property="stroke" />
  <aura:token name="colorStrokeBrandActive" value="rgb(22, 50, 92)" property="stroke" />
  <aura:token name="colorStrokeDisabled" value="rgb(224, 229, 238)" property="stroke" />
  <aura:token name="colorStrokeHeaderButton" value="rgb(159, 170, 181)" property="stroke" />
  <aura:token name="colorBackground" value="rgb(244, 246, 249)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundAlt" value="rgb(253, 253, 253)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundAlt2" value="rgb(238, 241, 246)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundAltInverse" value="rgb(22, 50, 92)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundRowHover" value="rgb(244, 246, 249)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundRowActive" value="rgb(238, 241, 246)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundRowSelected" value="rgb(240, 248, 252)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundRowNew" value="rgb(217, 255, 223)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundInverse" value="rgb(6, 28, 63)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundBrowser" value="rgb(84, 105, 141)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundChromeMobile" value="rgb(0, 112, 210)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundChromeDesktop" value="rgb(255, 255, 255)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundCustomer" value="rgb(255, 154, 60)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundHighlight" value="rgb(250, 255, 189)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundHighlightSearch" value="rgb(255, 240, 63)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundSelection" value="rgb(216, 237, 255)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundActionbarIconUtility" value="rgb(84, 105, 141)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundIndicatorDot" value="rgb(22, 50, 92)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundSpinnerDot" value="rgb(159, 170, 181)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundModal" value="rgb(255, 255, 255)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundModalBrand" value="rgb(0, 112, 210)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundNotificationBadge" value="rgb(194, 57, 52)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundNotificationBadgeHover" value="rgb(0, 95, 178)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundNotificationBadgeFocus" value="rgb(0, 95, 178)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundNotificationBadgeActive" value="rgb(0, 57, 107)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundNotification" value="rgb(255, 255, 255)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundNotificationNew" value="rgb(240, 248, 252)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundOrgSwitcherArrow" value="rgb(6, 28, 63)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundPayload" value="rgb(244, 246, 249)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundPost" value="rgb(247, 249, 251)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundUtilityBarHover" value="rgb(224, 229, 238)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundUtilityBarActive" value="rgb(21, 137, 238)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundShade" value="rgb(224, 229, 238)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundShadeDark" value="rgb(216, 221, 230)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundStencil" value="rgb(238, 241, 246)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundStencilAlt" value="rgb(224, 229, 238)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundTempModal" value="rgba(126, 140, 153, 0.8)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundTempModalTint" value="rgba(126, 140, 153, 0.8)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundTempModalTintAlt" value="rgba(255, 255, 255, 0.75)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundBackdrop" value="rgba(255, 255, 255, 0.75)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundBackdropTint" value="rgba(240, 248, 252, 0.75)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundScrollbar" value="rgb(224, 229, 238)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundScrollbarTrack" value="rgb(168, 183, 199)" property="background*,border*,box-shadow" />
  <aura:token name="colorBrand" value="rgb(21, 137, 238)" property="background*,border*,box-shadow" />
  <aura:token name="colorBrandDark" value="rgb(0, 112, 210)" property="background*,border*,box-shadow" />
  <aura:token name="colorBrandDarker" value="rgb(0, 95, 178)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundToggle" value="rgb(159, 170, 181)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundToggleDisabled" value="rgb(159, 170, 181)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundToggleHover" value="rgb(126, 140, 153)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundToggleActive" value="rgb(0, 112, 210)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundToggleActiveHover" value="rgb(0, 95, 178)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundModalButton" value="rgba(0, 0, 0, 0.07)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundModalButtonActive" value="rgba(0, 0, 0, 0.16)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundInput" value="rgb(255, 255, 255)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundInputActive" value="rgb(255, 255, 255)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundInputCheckbox" value="rgb(255, 255, 255)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundInputCheckboxDisabled" value="rgb(216, 221, 230)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundInputCheckboxSelected" value="rgb(21, 137, 238)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundInputDisabled" value="rgb(224, 229, 238)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundInputError" value="rgb(255, 221, 225)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundInputSearch" value="rgba(0, 0, 0, 0.16)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundPill" value="rgb(255, 255, 255)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundImageOverlay" value="rgba(0, 0, 0, 0.4)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundDestructive" value="rgb(194, 57, 52)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundDestructiveHover" value="rgb(166, 26, 20)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundDestructiveActive" value="rgb(135, 5, 0)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundInfo" value="rgb(84, 105, 141)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundError" value="rgb(212, 80, 76)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundErrorDark" value="rgb(194, 57, 52)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundErrorAlt" value="rgb(234, 130, 136)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundOffline" value="rgb(68, 68, 68)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundSuccess" value="rgb(75, 202, 129)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundSuccessDark" value="rgb(4, 132, 75)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundToast" value="rgba(84, 105, 141, 0.95)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundToastSuccess" value="rgb(4, 132, 75)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundToastError" value="rgba(194, 57, 52, 0.95)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundWarning" value="rgb(255, 183, 93)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundButtonSuccess" value="rgb(75, 202, 129)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundButtonSuccessHover" value="rgb(4, 132, 75)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundButtonSuccessActive" value="rgb(4, 132, 75)" property="background*,border*,box-shadow" />
  <aura:token name="shadowActionOverflowFooter" value="0 -2px 4px #F4F6F9" property="box-shadow" />
  <aura:token name="shadowOverlay" value="0 -2px 4px rgba(0, 0, 0, 0.07)" property="box-shadow" />
  <aura:token name="shadowDrag" value="0 2px 4px 0 rgba(0, 0, 0, 0.40)" property="box-shadow" />
  <aura:token name="shadowDropDown" value="0 2px 3px 0 rgba(0, 0, 0, 0.16)" property="box-shadow" />
  <aura:token name="shadowHeader" value="0 2px 4px rgba(0, 0, 0, 0.07)" property="box-shadow" />
  <aura:token name="shadowButton" value="0 1px 1px 0 rgba(0, 0, 0, 0.05)" property="box-shadow" />
  <aura:token name="shadowButtonFocus" value="0 0 3px #0070D2" property="box-shadow" />
  <aura:token name="shadowButtonFocusInverse" value="0 0 3px #E0E5EE" property="box-shadow" />
  <aura:token name="shadowInlineEdit" value="0 2px 4px 4px rgba(0, 0, 0, 0.16)" property="box-shadow" />
  <aura:token name="shadowFocusInset" value="0 0 2px 2px #1589EE inset" property="box-shadow" />
  <aura:token name="shadowDocked" value="0 -2px 2px 0 rgba(0, 0, 0, 0.16)" property="box-shadow" />
  <aura:token name="shadowImage" value="0 1px 1px rgba(0, 0, 0, 0.16)" property="box-shadow" />
  <aura:token name="elevation3Inset" value="-3" property="box-shadow" />
  <aura:token name="elevation0" value="0" property="box-shadow" />
  <aura:token name="elevation2" value="2" property="box-shadow" />
  <aura:token name="elevation4" value="4" property="box-shadow" />
  <aura:token name="elevation8" value="8" property="box-shadow" />
  <aura:token name="elevation16" value="16" property="box-shadow" />
  <aura:token name="elevation32" value="32" property="box-shadow" />
  <aura:token name="elevationShadow3Below" value="0 3px 3px 0 rgba(0, 0, 0, 0.16) inset" property="box-shadow" />
  <aura:token name="elevationShadow0" value="none" property="box-shadow" />
  <aura:token name="elevationShadow2" value="0 2px 2px 0 rgba(0, 0, 0, 0.16)" property="box-shadow" />
  <aura:token name="elevationShadow4" value="0 4px 4px 0 rgba(0, 0, 0, 0.16)" property="box-shadow" />
  <aura:token name="elevationShadow8" value="0 8px 8px 0 rgba(0, 0, 0, 0.16)" property="box-shadow" />
  <aura:token name="elevationShadow16" value="0 16px 16px 0 rgba(0, 0, 0, 0.16)" property="box-shadow" />
  <aura:token name="elevationShadow32" value="0 32px 32px 0 rgba(0, 0, 0, 0.16)" property="box-shadow" />
  <aura:token name="elevationInverseShadow3Below" value="0 -3px 3px 0 rgba(0, 0, 0, 0.16) inset" property="box-shadow" />
  <aura:token name="elevationInverseShadow0" value="none" property="box-shadow" />
  <aura:token name="elevationInverseShadow2" value="0 -2px 2px 0 rgba(0, 0, 0, 0.16)" property="box-shadow" />
  <aura:token name="elevationInverseShadow4" value="0 -4px 4px 0 rgba(0, 0, 0, 0.16)" property="box-shadow" />
  <aura:token name="elevationInverseShadow8" value="0 -8px 8px 0 rgba(0, 0, 0, 0.16)" property="box-shadow" />
  <aura:token name="elevationInverseShadow16" value="0 -16px 16px 0 rgba(0, 0, 0, 0.16)" property="box-shadow" />
  <aura:token name="elevationInverseShadow32" value="0 -32px 32px 0 rgba(0, 0, 0, 0.16)" property="box-shadow" />
  <aura:token name="colorTextActionLabel" value="rgb(84, 105, 141)" property="color,fill" />
  <aura:token name="colorTextActionLabelActive" value="rgb(22, 50, 92)" property="color,fill" />
  <aura:token name="colorTextBrand" value="rgb(21, 137, 238)" property="color,fill" />
  <aura:token name="colorTextBrowser" value="rgb(255, 255, 255)" property="color,fill" />
  <aura:token name="colorTextBrowserActive" value="rgba(0, 0, 0, 0.4)" property="color,fill" />
  <aura:token name="colorTextCustomer" value="rgb(255, 154, 60)" property="color,fill" />
  <aura:token name="colorTextDefault" value="rgb(22, 50, 92)" property="color,fill" />
  <aura:token name="colorTextError" value="rgb(194, 57, 52)" property="color,fill" />
  <aura:token name="colorTextInputDisabled" value="rgb(84, 105, 141)" property="color,fill" />
  <aura:token name="colorTextInputFocusInverse" value="rgb(22, 50, 92)" property="color,fill" />
  <aura:token name="colorTextInputIcon" value="rgb(159, 170, 181)" property="color,fill" />
  <aura:token name="colorTextInverse" value="rgb(255, 255, 255)" property="color,fill" />
  <aura:token name="colorTextInverseWeak" value="rgb(159, 170, 181)" property="color,fill" />
  <aura:token name="colorTextInverseActive" value="rgb(94, 180, 255)" property="color,fill" />
  <aura:token name="colorTextInverseHover" value="rgb(159, 170, 181)" property="color,fill" />
  <aura:token name="colorTextLink" value="rgb(0, 112, 210)" property="color,fill" />
  <aura:token name="colorTextLinkActive" value="rgb(0, 57, 107)" property="color,fill" />
  <aura:token name="colorTextLinkDisabled" value="rgb(22, 50, 92)" property="color,fill" />
  <aura:token name="colorTextLinkFocus" value="rgb(0, 95, 178)" property="color,fill" />
  <aura:token name="colorTextLinkHover" value="rgb(0, 95, 178)" property="color,border*" />
  <aura:token name="colorTextLinkInverse" value="rgb(255, 255, 255)" property="color,fill" />
  <aura:token name="colorTextLinkInverseHover" value="rgba(255, 255, 255, 0.75)" property="color,fill" />
  <aura:token name="colorTextLinkInverseActive" value="rgba(255, 255, 255, 0.5)" property="color,fill" />
  <aura:token name="colorTextLinkInverseDisabled" value="rgba(255, 255, 255, 0.15)" property="color,fill" />
  <aura:token name="colorTextModal" value="rgb(255, 255, 255)" property="color,fill" />
  <aura:token name="colorTextModalButton" value="rgb(84, 105, 141)" property="color,fill" />
  <aura:token name="colorTextStageLeft" value="rgb(224, 229, 238)" property="color,fill" />
  <aura:token name="colorTextTabLabel" value="rgb(22, 50, 92)" property="color,fill" />
  <aura:token name="colorTextTabLabelSelected" value="rgb(0, 112, 210)" property="color,fill" />
  <aura:token name="colorTextTabLabelHover" value="rgb(0, 95, 178)" property="color,fill" />
  <aura:token name="colorTextTabLabelFocus" value="rgb(0, 95, 178)" property="color,fill" />
  <aura:token name="colorTextTabLabelActive" value="rgb(0, 57, 107)" property="color,fill" />
  <aura:token name="colorTextTabLabelDisabled" value="rgb(224, 229, 238)" property="color,fill" />
  <aura:token name="colorTextToast" value="rgb(224, 229, 238)" property="color,fill" />
  <aura:token name="colorTextWarning" value="rgb(255, 183, 93)" property="color,fill" />
  <aura:token name="colorTextWarningAlt" value="rgb(132, 72, 0)" property="color,fill" />
  <aura:token name="colorTextWeak" value="rgb(84, 105, 141)" property="color,fill" />
  <aura:token name="colorTextIconBrand" value="rgb(0, 112, 210)" property="color,fill" />
  <aura:token name="colorTextIconUtility" value="rgb(159, 170, 181)" property="color,fill" />
  <aura:token name="colorTextToggleDisabled" value="rgb(216, 221, 230)" property="color,fill" />
  <aura:token name="colorTextButtonBrand" value="rgb(255, 255, 255)" property="color,fill" />
  <aura:token name="colorTextButtonBrandHover" value="rgb(255, 255, 255)" property="color,fill" />
  <aura:token name="colorTextButtonBrandActive" value="rgb(255, 255, 255)" property="color,fill" />
  <aura:token name="colorTextButtonBrandDisabled" value="rgb(255, 255, 255)" property="color,fill" />
  <aura:token name="colorTextButtonDefault" value="rgb(0, 112, 210)" property="color,fill" />
  <aura:token name="colorTextButtonDefaultHover" value="rgb(0, 112, 210)" property="color,fill" />
  <aura:token name="colorTextButtonDefaultActive" value="rgb(0, 112, 210)" property="color,fill" />
  <aura:token name="colorTextButtonDefaultDisabled" value="rgb(216, 221, 230)" property="color,fill" />
  <aura:token name="colorTextButtonDefaultHint" value="rgb(159, 170, 181)" property="color,fill" />
  <aura:token name="colorTextButtonInverse" value="rgb(224, 229, 238)" property="color,fill" />
  <aura:token name="colorTextButtonInverseDisabled" value="rgba(255, 255, 255, 0.15)" property="color,fill" />
  <aura:token name="colorTextIconDefault" value="rgb(84, 105, 141)" property="color,fill" />
  <aura:token name="colorTextIconDefaultHint" value="rgb(159, 170, 181)" property="color,fill" />
  <aura:token name="colorTextIconInverseHint" value="rgba(255, 255, 255, 0.5)" property="color,fill" />
  <aura:token name="colorTextIconDefaultHintBorderless" value="rgb(224, 229, 238)" property="color,fill" />
  <aura:token name="colorTextIconDefaultHover" value="rgb(0, 112, 210)" property="color,fill" />
  <aura:token name="colorTextIconDefaultActive" value="rgb(0, 57, 107)" property="color,fill" />
  <aura:token name="colorTextIconDefaultDisabled" value="rgb(216, 221, 230)" property="color,fill" />
  <aura:token name="colorTextIconInverse" value="rgb(255, 255, 255)" property="color,fill" />
  <aura:token name="colorTextIconInverseHover" value="rgb(255, 255, 255)" property="color,fill" />
  <aura:token name="colorTextIconInverseActive" value="rgb(255, 255, 255)" property="color,fill" />
  <aura:token name="colorTextIconInverseDisabled" value="rgba(255, 255, 255, 0.15)" property="color,fill" />
  <aura:token name="colorTextIconInverseHintHover" value="rgba(255, 255, 255, 0.75)" property="color,fill" />
  <aura:token name="colorTextLabel" value="rgb(84, 105, 141)" property="color,fill" />
  <aura:token name="colorTextPlaceholder" value="rgb(84, 105, 141)" property="color,fill" />
  <aura:token name="colorTextPlaceholderInverse" value="rgb(224, 229, 238)" property="color,fill" />
  <aura:token name="colorTextRequired" value="rgb(194, 57, 52)" property="color,fill" />
  <aura:token name="colorTextPill" value="rgb(0, 112, 210)" property="color,fill" />
  <aura:token name="colorTextSuccess" value="rgb(2, 128, 72)" property="color,fill" />
  <aura:token name="colorTextSuccessInverse" value="rgb(75, 202, 129)" property="color,fill" />
  <aura:token name="textTransform" value="none" property="text-transform" />
  <aura:token name="opacity5" value="0.5" property="opacity" />
  <aura:token name="opacity8" value="0.8" property="opacity" />
  <aura:token name="durationInstantly" value="0s" property="animation*,transition*" />
  <aura:token name="durationImmediately" value="0.05s" property="animation*,transition*" />
  <aura:token name="durationQuickly" value="0.1s" property="animation*,transition*" />
  <aura:token name="durationPromptly" value="0.2s" property="animation*,transition*" />
  <aura:token name="durationSlowly" value="0.4s" property="animation*,transition*" />
  <aura:token name="durationPaused" value="3.2s" property="animation*,transition*" />
  <aura:token name="durationToastShort" value="4.8s" property="animation*,transition*" />
  <aura:token name="durationToastMedium" value="9.6s" property="animation*,transition*" />
  <aura:token name="zIndexToast" value="10000" property="z-index" />
  <aura:token name="zIndexModal" value="9000" property="z-index" />
  <aura:token name="zIndexOverlay" value="8000" property="z-index" />
  <aura:token name="zIndexDropdown" value="7000" property="z-index" />
  <aura:token name="zIndexDialog" value="6000" property="z-index" />
  <aura:token name="zIndexPopup" value="5000" property="z-index" />
  <aura:token name="zIndexSticky" value="100" property="z-index" />
  <aura:token name="zIndexDefault" value="1" property="z-index" />
  <aura:token name="zIndexDocked" value="4" property="z-index" />
  <aura:token name="zIndexDeepdive" value="-99999" property="z-index" />
  <aura:token name="colorBackgroundButtonBrand" value="rgb(0, 112, 210)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundButtonBrandActive" value="rgb(0, 57, 107)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundButtonBrandHover" value="rgb(0, 95, 178)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundButtonBrandDisabled" value="rgb(224, 229, 238)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundButtonDefault" value="rgb(255, 255, 255)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundButtonDefaultHover" value="rgb(244, 246, 249)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundButtonDefaultFocus" value="rgb(244, 246, 249)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundButtonDefaultActive" value="rgb(238, 241, 246)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundButtonDefaultDisabled" value="rgb(255, 255, 255)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundButtonIcon" value="rgba(0, 0, 0, 0)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundButtonIconHover" value="rgb(244, 246, 249)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundButtonIconFocus" value="rgb(244, 246, 249)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundButtonIconActive" value="rgb(238, 241, 246)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundButtonIconDisabled" value="rgb(255, 255, 255)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundButtonInverse" value="rgba(0, 0, 0, 0)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundButtonInverseActive" value="rgba(0, 0, 0, 0.24)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundButtonInverseDisabled" value="rgba(0, 0, 0, 0)" property="background*,border*,box-shadow" />
  <aura:token name="lineHeightButton" value="1.875rem" property="font,*height,bottom" />
  <aura:token name="lineHeightButtonSmall" value="1.75rem" property="font,*height" />
  <aura:token name="cardColorBackground" value="rgb(255, 255, 255)" property="background*,border*,box-shadow" />
  <aura:token name="cardSpacingSmall" value="0.75rem" property="top,right,bottom,left,margin*,padding*,border*,*width,*height,box-shadow" />
  <aura:token name="cardSpacingMedium" value="1rem" property="top,right,bottom,left,margin*,padding*,border*,*width,*height,box-shadow" />
  <aura:token name="cardSpacingLarge" value="1.5rem" property="top,right,bottom,left,margin*,padding*,border*,*width,*height,box-shadow" />
  <aura:token name="lineHeightToggle" value="1.3rem" property="font,*height" />
  <aura:token name="squareToggleSlider" value="1.25rem" property="font,font-size,*width,*height,flex,top,right,bottom,left,margin*,padding*,transform" />
  <aura:token name="widthToggle" value="3rem" property="font,font-size,*width,*height,flex,top,right,bottom,left,margin*,padding*,transform" />
  <aura:token name="heightToggle" value="1.5rem" property="font,font-size,*width,*height,flex,top,right,bottom,left,margin*,padding*,transform" />
  <aura:token name="tableSpacingXSmall" value="0.5rem" property="top,right,bottom,left,margin*,padding*,border*,*width,*height,box-shadow" />
  <aura:token name="colorBackgroundDockedPanelHeader" value="rgb(247, 249, 251)" property="background*,border*,box-shadow" />
  <aura:token name="heightDockedBar" value="2.5rem" property="font,font-size,*width,*height,flex,top,right,bottom,left,margin*,padding*,transform" />
  <aura:token name="utilityBarColorBackgroundNotificationBadge" value="rgb(212, 80, 76)" property="background*,border*,box-shadow" />
  <aura:token name="utilityBarColorBackgroundNotificationFocus" value="rgb(168, 183, 199)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundIconWaffle" value="rgb(84, 105, 141)" property="background*,border*,box-shadow" />
  <aura:token name="squareIconGlobalIdentityIcon" value="1.25rem" property="font,font-size,*width,*height,flex,top,right,bottom,left,margin*,padding*,transform" />
  <aura:token name="colorBackgroundContextBar" value="rgb(255, 255, 255)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundContextBarBrandAccent" value="rgb(0, 161, 223)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundContextBarItemHover" value="rgb(247, 249, 251)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundContextBarItemActive" value="rgb(247, 249, 251)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundContextTabBarItem" value="rgb(255, 255, 255)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundContextBarInverseItemHover" value="rgba(255, 255, 255, 0.2)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundContextBarInverseItemActive" value="rgba(255, 255, 255, 0.4)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundContextBarShadow" value="linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0, rgba(0, 0, 0, 0) 100%)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundContextBarActionHighlight" value="rgba(255, 255, 255, 0.2)" property="background*,border*,box-shadow" />
  <aura:token name="colorBorderContextBarDivider" value="rgba(255, 255, 255, 0.2)" property="border*,box-shadow" />
  <aura:token name="colorBorderContextBarItem" value="rgba(0, 0, 0, 0.2)" property="border*,box-shadow" />
  <aura:token name="colorBorderContextBarInverseItem" value="rgba(255, 255, 255, 0.2)" property="border*,box-shadow" />
  <aura:token name="colorBorderContextBarThemeDefault" value="rgb(0, 161, 223)" property="border*,box-shadow" />
  <aura:token name="colorBorderContextBarThemeDefaultAlt" value="rgb(228, 233, 243)" property="border*,box-shadow" />
  <aura:token name="colorBorderContextBarThemeDefaultHover" value="rgb(11, 35, 153)" property="border*,box-shadow" />
  <aura:token name="colorBorderContextBarThemeDefaultActive" value="rgb(228, 233, 243)" property="border*,box-shadow" />
  <aura:token name="heightContextBar" value="2.5rem" property="font,font-size,*width,*height,flex,top,right,bottom,left,margin*,padding*,transform" />
  <aura:token name="colorTextContextBar" value="rgb(84, 105, 141)" property="color,fill" />
  <aura:token name="colorTextContextBarInverse" value="rgb(255, 255, 255)" property="color,fill" />
  <aura:token name="colorTextContextBarActionTrigger" value="rgba(255, 255, 255, 0.4)" property="color,fill" />
  <aura:token name="colorBackgroundAnchor" value="rgb(244, 246, 249)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundPageHeader" value="rgb(247, 249, 251)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundPathComplete" value="rgb(75, 202, 129)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundPathCompleteHover" value="rgb(4, 132, 75)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundPathCurrent" value="rgb(0, 112, 210)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundPathCurrentHover" value="rgb(0, 95, 178)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundPathIncomplete" value="rgb(224, 229, 238)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundPathIncompleteHover" value="rgb(216, 221, 230)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundPathLost" value="rgb(194, 57, 52)" property="background*,border*,box-shadow" />
  <aura:token name="colorBackgroundGuidance" value="rgb(250, 250, 251)" property="background*,border*,box-shadow" />
  <aura:token name="colorBorderPathDivider" value="rgb(255, 255, 255)" property="border*,box-shadow" />
  <aura:token name="lineHeightSalespath" value="1.5rem" property="font,*height" />
  <aura:token name="heightSalesPath" value="2rem" property="*width,*height,*flex*,top,right,bottom,left,margin*,padding*,transform" />
  <aura:token name="progressColorBackground" value="rgb(255, 255, 255)" property="background*,border*,box-shadow" />
  <aura:token name="progressColorBackgroundShade" value="rgb(244, 246, 249)" property="background*,border*,box-shadow" />
  <aura:token name="progressBarColorBackground" value="rgb(216, 221, 230)" property="background*,border*,box-shadow" />
  <aura:token name="progressBarColorBackgroundFill" value="rgb(94, 180, 255)" property="background*,border*,box-shadow" />
  <aura:token name="progressColorBorder" value="rgb(255, 255, 255)" property="border*,box-shadow" />
  <aura:token name="progressColorBorderShade" value="rgb(244, 246, 249)" property="border*,box-shadow" />
  <aura:token name="progressColorBorderHover" value="rgb(0, 112, 210)" property="border*,box-shadow" />
  <aura:token name="progressColorBorderActive" value="rgb(21, 137, 238)" property="border*,box-shadow" />
  <aura:token name="progressBarHeight" value="0.125rem" property="*width,*height,*flex*,top,right,bottom,left,margin*,padding*,transform" />
  <aura:token name="splitViewColorBackground" value="rgb(228, 233, 243)" property="background*,border*,box-shadow" />
  <aura:token name="splitViewColorBackgroundRowHover" value="rgb(238, 241, 246)" property="background*,border*,box-shadow" />
  <aura:token name="splitViewColorBorder" value="rgb(206, 213, 225)" property="border*,box-shadow" />
  <aura:token name="verticalNavigationColorBackgroundShadeRowHover" value="rgb(238, 241, 246)" property="background*,border*,box-shadow" />
  <aura:token name="verticalNavigationColorBackgroundShadeRowActive" value="rgb(232, 236, 243)" property="background*,border*,box-shadow" />
</aura:tokens>