fonteva-design-guide/force-app/main/default/staticresources/PFM_Base/css/styles.css

## Dev, Build and Test

@charset "UTF-8";
/*! Lightning Design System 2.6.2 */
/*!
 * Copyright (c) 2015-present, Salesforce.com, Inc. - All rights reserved.
 * Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
 * - Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
 * - Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
 * - Neither the name of the Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */
.pfm {
  /*! normalize.css v3.0.2 | MIT License | git.io/normalize */
  /**
 * @summary Create each activity timeline item in a list
 *
 * @selector .slds-timeline__media
 * @restrict .slds-media
 * @support dev-ready
 */
  /**
 * @selector .slds-timeline__title
 * @restrict .slds-timeline__media h3
 * @deprecated
 */
  /**
 * @name call
 * @selector .slds-timeline__media_call
 * @restrict .slds-timeline__media
 */
  /**
 * @name email
 * @selector .slds-timeline__media_email
 * @restrict .slds-timeline__media
 */
  /**
 * @name event
 * @selector .slds-timeline__media_event
 * @restrict .slds-timeline__media
 */
  /**
 * @name task
 * @selector .slds-timeline__media_task
 * @restrict .slds-timeline__media
 */
  /**
 * @summary Create each expandable activity timeline item in a list
 *
 * @name base
 * @selector .slds-timeline__item_expandable
 * @restrict .slds-timeline div
 * @variant
 */
  /**
 * @selector .slds-timeline__item_call
 * @restrict .slds-timeline__item_expandable
 */
  /**
 * @selector .slds-timeline__item_email
 * @restrict .slds-timeline__item_expandable
 */
  /**
 * @selector .slds-timeline__item_event
 * @restrict .slds-timeline__item_expandable
 */
  /**
 * @selector .slds-timeline__item_task
 * @restrict .slds-timeline__item_expandable
 */
  /*
 * @selector .slds-timeline__trigger
 * @restrict .slds-timeline__media_expandable div
 */
  /**
 * Icon associated with timeline item
 *
 * @selector .slds-timeline__icon
 * @restrict .slds-timeline__media .slds-media__figure, .slds-timeline__media .slds-icon_container, .slds-timeline__item_expandable .slds-icon_container
 */
  /**
 * Container for date and action overflow on the right of a timeline item
 *
 * @selector .slds-timeline__actions
 * @restrict .slds-timeline__item div, .slds-timeline__trigger div
 * @notes This is directly inside the `.slds-media--reverse` > `.slds-media__figure`
 */
  /**
 * Styles the date inside `.slds-timeline__actions`
 *
 * @selector .slds-timeline__date
 * @restrict .slds-timeline__actions p
 */
  /**
 * @summary Icon inside of actionable button within an expandable timeline item
 *
 * @selector .slds-timeline__details-action-icon
 * @restrict .slds-timeline__item_expandable svg
 */
  /**
 * @summary Create badge component
 *
 * @name base
 * @selector .slds-badge
 * @restrict span
 * @variant
 */
  /**
 * @summary Inverse badge component
 *
 * @name inverse
 * @selector .slds-badge_inverse
 * @restrict .slds-badge
 */
  /**
 * @summary Light badge with icon
 *
 * @name lightest
 * @selector .slds-badge_lightest
 * @restrict .slds-badge
 */
  /**
 * @summary Create breadcrumbs component
 *
 * @name base
 * @selector .slds-breadcrumb
 * @restrict ol
 * @support dev-ready
 * @variant
 */
  /**
 * @summary Creates button group container
 *
 * @name base
 * @selector .slds-button-group
 * @restrict div
 * @variant
 */
  /**
 * These selectors must remain in long hand in order to zero out borders that
 * we don't want on last-child or :only-child wrapped buttons
 *
 * @selector .slds-button_last
 * @restrict .slds-button-group div, .slds-button-group-list div
 */
  /**
 * @selector .slds-button-space-left
 * @deprecated
 */
  /**
 * @summary This neutralizes all the base styles making it look like a text link
 *
 * @name base
 * @selector .slds-button
 * @restrict button, a, span
 * @variant
 */
  /**
 * Resets attributes of .slds-button back to the browser default
 *
 * @selector .slds-button_reset
 * @restrict button
 * @modifier
 */
  /**
 * Creates the gray border with white background default style
 *
 * @selector .slds-button_neutral
 * @restrict .slds-button
 * @modifier
 * @group theme
 */
  /**
 * Creates the brand blue Salesforce style
 *
 * @selector .slds-button_brand
 * @restrict .slds-button
 * @modifier
 * @group theme
 */
  /**
 * Creates the outlined button with the brand color
 *
 * @selector .slds-button_outline-brand
 * @restrict .slds-button
 * @modifier
 * @group theme
 */
  /**
 * Creates the inverse style for dark backgrounds
 *
 * @selector .slds-button_inverse
 * @restrict .slds-button
 * @modifier
 * @group theme
 */
  /**
 * Creates a red button style
 *
 * @selector .slds-button_destructive
 * @restrict .slds-button
 * @group theme
 * @modifier
 */
  /**
 * Creates a green button style
 *
 * @selector .slds-button_success
 * @restrict .slds-button
 * @group theme
 * @modifier
 */
  /**
 * Creates a smaller button style
 *
 * @selector .slds-button_small
 * @restrict .slds-button
 * @deprecated
 */
  /**
 * @summary Sizing for icon that sits inside button__icon
 * @selector .slds-button__icon
 * @restrict .slds-button svg
 */
  /**
 * @summary Position of icon when sitting to the left side of the text when inside a button
 * @selector .slds-button__icon_left
 * @restrict .slds-button__icon, .slds-button__icon_stateful
 */
  /**
 * @summary Position of icon when sitting to the right side of the text when inside a button
 * @selector .slds-button__icon_right
 * @restrict .slds-button__icon, .slds-button__icon_stateful
 */
  /**
 * @summary Initiates a stateful button
 *
 * @name stateful
 * @selector .slds-button_stateful
 * @restrict button, a, span
 * @variant
 */
  /**
 * Default state of a stateful button
 *
 * @selector .slds-not-selected
 * @restrict .slds-button_stateful
 * @notes This class should be toggled with JavaScript
 * @modifier
 * @group interaction
 */
  /**
 * When button is selected and still has focus from click
 *
 * @selector .slds-is-selected-clicked
 * @restrict .slds-button_stateful
 * @notes This class should be toggled with JavaScript
 * @modifier
 * @group interaction
 */
  /**
 * When button is pressed and selected
 *
 * @selector .slds-is-selected
 * @restrict .slds-button_stateful
 * @notes This class should be toggled with JavaScript
 * @modifier
 * @group interaction
 */
  /**
 * @summary Creates a button that looks like a plain icon
 *
 * @name base
 * @selector .slds-button_icon
 * @restrict button
 * @variant
 */
  /**
 * @summary Default width + height for button icon with containers
 * @selector .slds-button_icon-container
 * @restrict .slds-button_icon
 */
  /**
 * @summary Transparent themed button icon - Button icon has a border with a transparent background
 * @selector .slds-button_icon-border
 * @restrict .slds-button_icon
 */
  /**
 * @summary Button icon with border and transparent background, to be used on an inversed background
 * @selector .slds-button_icon-border-inverse
 * @restrict .slds-button_icon
 */
  /**
 * @summary Branded button icon - Button icon has a filled background with the brand color
 * @selector .slds-button_icon-brand
 * @restrict .slds-button_icon
 */
  /**
 * @summary Neutral themed button icon - Button icon has a border with a filled background
 * @selector .slds-button_icon-border-filled
 * @restrict .slds-button_icon
 */
  /**
 * @summary Bare button icon with no border or background, to be used on an inversed background
 * @selector .slds-button_icon-inverse
 * @restrict .slds-button_icon
 */
  /**
 * @summary Error state - Typically used in conjunction with an error toolip
 * @selector .slds-button_icon-error
 * @restrict .slds-button_icon
 */
  /**
 * @summary Changes a button icon container to be 24x24px
 * @name small
 * @selector .slds-button_icon-small
 * @restrict .slds-button_icon
 * @group size
 */
  /**
 * @summary Changes a button icon container to be 20x20px
 * @name x-small
 * @selector .slds-button_icon-x-small
 * @restrict .slds-button_icon
 * @group size
 */
  /**
 * @summary Changes a button icon container to be 16x16px
 * @name xx-small
 * @selector .slds-button_icon-xx-small
 * @restrict .slds-button_icon
 * @group size
 */
  /**
 * @summary Creates a button menu icon container that has borders and a filled background
 * @selector .slds-button_icon-more
 * @restrict .slds-button_icon
 */
  /**
 * @summary Creates a button menu icon container that has no borders
 * @selector .slds-button_icon-container-more
 * @restrict .slds-button_icon
 */
  /**
 * @summary A parent class must be put on anything that contains a .slds-button__icon_hint so that the child reacts when the parent is hovered.
 * @selector .slds-button__icon_hint
 * @restrict .slds-button_icon .slds-button__icon
 */
  /**
 * @summary A parent class must be put on anything that contains a .slds-button__icon_inverse-hint so that the child reacts when the parent is hovered. This is for a dark background.
 * @selector .slds-button__icon_inverse-hint
 * @restrict .slds-button_icon .slds-button__icon
 */
  /**
 * @summary Creates a brand button icon
 *
 * @name brand
 * @selector .slds-button_icon-brand
 * @restrict button
 * @variant
 */
  /**
 * The stateful button requires the `.slds-button--icon-border` class in addition to the `.slds-button` class.
 *
 * The stateful inverse button works just like the stateful button. It requires the `.slds-button--icon-border-inverse` class in addition to the `.slds-button` class.
 *
 * Stateful icons can be toggled on and off and retain their state. JavaScript is used to add the `.slds-is-selected` class to the button when activated.
 *
 * #### Accessibility
 *
 * For accessibility, implement the [ARIA Toggle Button](http://w3c.github.io/aria-practices/#button) concept.
 * - Similar to a mute button, the button represents a pressed or unpressed state.
 * - Button text doesn't change per state
 * - `aria-pressed` is set to `true` or `false`, depending its state
 *
 * @summary Stateful Button Icon
 * @name stateful
 * @selector .slds-is-selected
 * @restrict .slds-button_icon
 * @variant
 */
  /**
 * The base variant is the fully featured color picker, with a direct text
 * input, and a button-triggered popover, which has tabs with both a list
 * of predefined color options (swatches), as well as an interactive tool
 * for custom color configuration.
 *
 * @summary Fully featured color picker, with swatches and a custom color config
 *
 * @variant
 * @name base
 * @selector .slds-color-picker
 * @restrict div
 */
  /**
 * @summary 'Summary' element for color selection.
 *
 * @selector .slds-color-picker__summary
 * @restrict .slds-color-picker > div
 */
  /**
 * @summary Label for summary input
 *
 * @selector .slds-color-picker__summary-label
 * @restrict .slds-color-picker__summary > label
 */
  /**
 * @summary Button that toggles the Color Picker Selector
 *
 * @selector .slds-color-picker__button
 * @restrict .slds-color-picker__summary .slds-button
 */
  /**
 * @summary Input field for summary UI
 *
 * @selector .slds-color-picker__summary-input
 * @restrict .slds-color-picker__summary > div
 */
  /**
 * @summary The selector subcomponent. Extends upon a .slds-popover
 *
 * @selector .slds-color-picker__selector
 * @restrict .slds-color-picker div, .slds-color-picker section
 */
  /**
 * @summary Swatch container
 *
 * @selector .slds-color-picker__swatches
 * @restrict .slds-color-picker__selector ul
 */
  /**
 * @summary Color Picker swatch
 *
 * @selector .slds-color-picker__swatch
 * @restrict .slds-color-picker__swatches li
 */
  /**
 * @summary Custom picker selection container
 *
 * @selector .slds-color-picker__custom
 * @restrict .slds-color-picker__selector div
 */
  /**
 * @summary Custom picker range element
 *
 * @selector .slds-color-picker__custom-range
 * @restrict .slds-color-picker__custom div
 */
  /**
 * @summary
 *
 * @selector .slds-color-picker__range-indicator
 * @restrict .slds-color-picker__custom-range > a
 */
  /**
 * @summary Container element for the hue slider and preview swatch
 *
 * @selector .slds-color-picker__hue-and-preview
 * @restrict .slds-color-picker__custom div
 */
  /**
 * @summary The slide input that controls the hue
 *
 * @selector .slds-color-picker__hue-slider
 * @restrict .slds-color-picker__hue-and-preview input
 */
  /**
 * @summary The group of direct input elements
 *
 * @selector .slds-color-picker__custom-inputs
 * @restrict .slds-color-picker__custom > div
 */
  /**
 * @summary Footer for the Color Selector Picker
 *
 * @selector .slds-color-picker__selector-footer
 * @restrict .slds-color-picker__selector div
 */
  /**
 * @summary A swatch
 *
 * @selector .slds-swatch
 * @restrict .slds-color-picker__swatch span, .slds-color-picker__summary-button span, .slds-color-picker__hue-and-preview span
 */
  /**
 * The Custom-Only variant should only render the custom color selection tool
 * in the Color Picker popover. It should not be inside a tabset.
 *
 * @summary Swatches Only UI
 *
 * @name custom-only
 * @selector .slds-color-picker_custom-only
 * @restrict .slds-color-picker
 * @variant
 */
  /**
 * The Predefined Only variant should only render the predefined colors
 * selection in the Color Picker popover. It should not be inside a tabset.
 *
 * @summary Swatches Only UI
 *
 * @name predefined-only
 * @selector .slds-color-picker_predefined-only
 * @restrict .slds-color-picker
 * @variant
 */
  /**
 * The Swatches Only variant should only render a group of individual swatches.
 * It should not render any of the main chrome of the color picker UI (no Summary
 * section, no Popover, no Tabset), it should only render the Color Picker swatches
 * selector. This component should be rendered inside a menu.
 *
 * ### Accessibility Notes
 *
 * The accessibility requirements for this Variant are slightly different from
 * the others:
 *
 * #### `.slds-color-picker__swatches`
 *
 * This element _needs_ a `role` of `menu`.
 *
 * #### `.slds-color-picker__swatch-trigger`
 *
 * This element _needs_ a `role` of `option`
 *
 * @summary Swatches Only UI
 *
 * @name swatches-only
 * @selector .slds-color-picker_swatches-only
 * @restrict .slds-color-picker
 * @variant
 */
  /**
 * @summary Container for icons
 *
 * @name base
 * @selector .slds-icon_container
 * @restrict span, div
 * @notes Used when an icon with a background color is accompanied by `.slds-assistive-text` and also receives a `background-color` class
 * @variant
 */
  /**
 * @selector .slds-icon
 * @restrict .slds-icon_container svg, svg
 */
  /**
 * @selector .slds-icon_xx-small
 * @restrict .slds-icon
 * @modifier
 * @group size
 */
  /**
 * @selector .slds-icon_x-small
 * @restrict .slds-icon
 * @modifier
 * @group size
 */
  /**
 * @selector .slds-icon_small
 * @restrict .slds-icon
 * @modifier
 * @group size
 */
  /**
 * @selector .slds-icon_large
 * @restrict .slds-icon
 * @modifier
 * @group size
 */
  /**
 * @selector .slds-icon-text-default
 * @restrict .slds-icon
 * @modifier
 * @group color
 */
  /**
 * @selector .slds-icon-text-warning
 * @restrict .slds-icon
 * @modifier
 * @group color
 */
  /**
 * @selector .slds-icon-text-error
 * @restrict .slds-icon
 * @modifier
 * @group color
 */
  /**
 * @selector .slds-icon-text-light
 * @restrict .slds-icon, svg
 * @modifier
 * @group color
 */
  /**
 * @selector .slds-current-color
 * @restrict *
 * @modifier
 * @group color
 */
  /**
 * @summary Initializes an accordion list with more than one section that will have its display toggled by invoking an interaction on the summary title
 *
 * @name base
 * @selector .slds-accordion
 * @restrict ul
 * @variant
 * @required
 * @support dev-ready
 */
  /**
 * List item for each accordion section
 *
 * @selector .slds-accordion__list-item
 * @restrict .slds-accordion li
 * @required
 */
  /**
 * Summary title for each expandable panel inside of an accordion
 *
 * @selector .slds-accordion__summary
 * @restrict .slds-accordion__section div
 * @required
 */
  /**
 * Summary title for each expandable panel inside of an accordion
 *
 * @selector .slds-accordion__summary-heading
 * @restrict .slds-accordion__section h3
 * @required
 */
  /**
 * Actionable button inside of accordion summary that would toggle the visibility of each section
 *
 * @selector .slds-accordion__summary-action
 * @restrict .slds-accordion__summary button
 * @required
 */
  /**
 * Icon inside of actionable button within an accordion section
 *
 * @selector .slds-accordion__summary-action-icon
 * @restrict .slds-accordion__summary-action svg
 * @required
 */
  /**
 * Each expandable panel inside of an accordion
 *
 * @selector .slds-accordion__section
 * @restrict .slds-accordion section
 * @required
 */
  /**
 * Each expandable panel inside of an accordion
 *
 * @selector .slds-accordion__content
 * @restrict .slds-accordion__section div
 * @required
 */
  /**
 * Toggle visibility of accordion section + rotate icon
 *
 * @selector .slds-is-open
 * @restrict .slds-accordion__section
 * @modifier
 */
  /**
 * @name ellie
 * @selector .slds-icon-ellie
 * @restrict span
 * @variant
 */
  /**
 * @name eq
 * @selector .slds-icon-eq
 * @restrict div
 * @variant
 */
  /**
 * @summary Vertical bar for equalizer icon
 *
 * @selector .slds-icon-eq__bar
 * @restrict .slds-icon-eq div
 */
  /**
 * @summary Initializes score icon
 *
 * @name score
 * @selector .slds-icon-score
 * @restrict span
 * @variant
 */
  /**
 * @summary Positive score icon
 *
 * @selector .slds-icon-score__positive
 * @restrict .slds-icon-score svg
 */
  /**
 * @summary Negative score icon
 *
 * @selector .slds-icon-score__negative
 * @restrict .slds-icon-score svg
 */
  /**
 * @summary Initializes strength icon
 *
 * @name strength
 * @selector .slds-icon-strength
 * @restrict span
 * @variant
 */
  /**
 * @summary Initializes trend icon
 *
 * @name trend
 * @selector .slds-icon-trend
 * @restrict span
 * @variant
 */
  /**
 * @summary Arrow element inside of trend icon
 *
 * @selector .slds-icon-trend__arrow
 * @restrict .slds-icon-trend path
 */
  /**
 * @summary Circle element inside of trend icon
 *
 * @selector .slds-icon-trend__circle
 * @restrict .slds-icon-trend circle
 */
  /**
 * @summary Containing actionable element that holds the waffle icon
 *
 * @name waffle
 * @selector .slds-icon-waffle_container
 * @restrict button
 * @variant
 */
  /**
 * @summary Element container circles for the waffle icon
 *
 * @selector .slds-icon-waffle
 * @restrict .slds-icon-waffle_container > span
 */
  /**
 * @summary Hover and click animations for help icon
 *
 * @variant
 * @name global-action-help
 * @selector .slds-icon-help
 * @restrict button, a
 */
  /**
 * @summary Modifies hover effect of global help icon
 * @selector .slds-icon-help_hover
 * @restrict .slds-icon-help circle
 */
  /**
 * @summary Modifies focus effect of global help icon
 * @selector .slds-icon-help_focus
 * @restrict .slds-icon-help circle
 */
  /**
 * @summary Initializes typing icon
 *
 * @name typing
 * @selector .slds-icon-typing
 * @restrict span
 * @variant
 */
  /**
 * @summary Dots within the typing icon
 *
 * @selector .slds-icon-typing__dot
 * @restrict .slds-icon-typing span
 */
  /**
 * @summary Initiates a carousel component
 * @name base
 * @selector .slds-carousel
 * @restrict div
 * @variant
 */
  /**
 * @summary Main stage for carousel's tab-panels and tab-list inidicators
 * @selector .slds-carousel__stage
 * @restrict .slds-carousel div
 */
  /**
 * @summary Tabpanel region that contains all carousel panels
 * @selector .slds-carousel__panels
 * @restrict .slds-carousel__stage div
 */
  /**
 * @summary Tabpanel region that contains all carousel panels
 * @selector .slds-carousel__panels
 * @restrict .slds-carousel__stage div
 */
  /**
 * @summary Actionable element that contains the carousel's tab-panel content
 * @selector .slds-carousel__panel-action
 * @restrict .slds-carousel__stage a
 */
  /**
 * @summary Element that contains the image inside the carousel's tab-panel
 * @selector .slds-carousel__image
 * @restrict .slds-carousel__panel-action div
 */
  /**
 * @summary Element that contains the content inside the carousel's tab-panel
 * @selector .slds-carousel__content
 * @restrict .slds-carousel__panel-action div
 */
  /**
 * @summary Heading element that contains the title of the carousel's tab-panel
 * @selector .slds-carousel__content-title
 * @restrict .slds-carousel__content h2
 */
  /**
 * @summary List element that contains the carousel's tab-list inidicators
 * @selector .slds-carousel__indicators
 * @restrict .slds-carousel ul
 */
  /**
 * @summary Carousel's tab-list inidicator items
 * @selector .slds-carousel__indicator
 * @restrict .slds-carousel__indicators li
 */
  /**
 * @summary Actionable element inside of each tab-list indicator
 * @selector .slds-carousel__indicator-action
 * @restrict .slds-carousel__indicator a
 */
  /**
 * @summary Element that contains the auto-play button icon to toggle on/off
 * @selector .slds-carousel__autoplay
 * @restrict .slds-carousel__stage span
 */
  /**
* @summary Initializes card
*
* @name base
* @selector .slds-card
* @restrict article, div, section
* @variant
*/
  /**
* @summary Actionable element within card footer
* @selector .slds-card__footer-action
* @restrict .slds-card__footer a
*/
  /**
 * Use class if card consumes any form of a tile
 *
 * @selector .slds-card__tile
 * @restrict .slds-tile
 */
  /**
 * @summary Used to combine several cards into a single card look
 *
 * @name wrapper
 * @selector .slds-card-wrapper
 * @restrict div
 * @variant
 */
  /**
 * This class allows default tabs to appear to be in a card
 *
 * .slds-tabs_card
 * .slds-tabs_default
 */
  /**
 * This component is used to display a current or past chat session between a customer and a service agent.
 * It appears in the form of a "Log"
 *
 * @summary Root container of a chat session
 *
 * @name base
 * @selector .slds-chat
 * @restrict section[role="log"]
 * @variant
 */
  /**
 * The chat payload should be displayed in the form of a list. Each item in the list has a number of vertical and horizontal spacing rules based on its type
 *
 * @summary Handles the display of chat items within a list
 *
 * @selector .slds-chat-list
 * @restrict .slds-chat ul
 */
  /**
 * @summary Handles spacing and direction of items in the list
 *
 * @selector .slds-chat-listitem
 * @restrict .slds-chat-list li
 */
  /**
 * @summary Modifier used to style outbound message list items
 *
 * @selector .slds-chat-listitem_outbound
 * @restrict .slds-chat-listitem
 * @modifier
 */
  /**
 * @summary Modifier used to style inbound message list items
 *
 * @selector .slds-chat-listitem_inbound
 * @restrict .slds-chat-listitem
 * @modifier
 */
  /**
 * @summary Selector to style sibling, same type message list items
 *
 * @selector .slds-chat-listitem_inbound + .slds-chat-listitem_inbound, .slds-chat-listitem_outbound + .slds-chat-listitem_outbound
 */
  /**
 * @summary Modifier used for spacing bookend items
 *
 * @selector .slds-chat-listitem_bookend
 * @restrict .slds-chat-listitem
 * @modifier
 */
  /**
 * @summary Modifier used for spacing event items
 *
 * @selector .slds-chat-listitem_event
 * @restrict .slds-chat-listitem
 * @modifier
 */
  /**
 * @summary Used to style icons with a chat log
 *
 * @selector .slds-chat-icon
 * @restrict .slds-chat-message__text .slds-icon_container, .slds-chat-event__body .slds-icon_container, .slds-chat-bookend .slds-icon_container, .slds-chat-message__action .slds-icon_container
 */
  /**
 * Chat logs are mainly made up of chat messages between an agent and a customer
 *
 * @summary styles the outter part of a chat message
 *
 * @selector .slds-chat-message
 * @restrict .slds-chat-listitem div
 */
  /**
 * @summary Used for when customer avatars are used in consequtive inbound messages to align the message body with the previous message
 *
 * @selector .slds-chat-message_faux-avatar
 * @restrict .slds-chat-message
 * @modifier
 */
  /**
 * @summary Used to style avatars in chat logs
 *
 * @selector .slds-chat-avatar
 * @restrict .slds-chat-message .slds-avatar
 */
  /**
 * @summary Used to style the avatar intials for chat
 *
 * @selector .slds-chat-avatar__intials
 * @restrict .slds-chat-avatar .slds-avatar__initials
 * @deprecated
 */
  /**
 * @summary Used to contain and align chat messages with their avatars
 *
 * @selector .slds-chat-message__body
 * @restrict .slds-chat-message div
 */
  /**
 * @summary Used to style the chat text from agent or customer
 *
 * @selector .slds-chat-message__text
 * @restrict .slds-chat-message__body div
 */
  /**
 * @summary Used for any specific inbound text styling
 *
 * @selector .slds-chat-message__text_inbound
 * @restrict .slds-chat-message__text
 * @modifier
 */
  /**
 * @summary Used for any specific outbound text styling
 *
 * @selector .slds-chat-message__text_outbound
 * @restrict .slds-chat-message__text
 * @modifier
 */
  /**
 * @summary Used for any specific outbound (from another agent) text styling
 *
 * @selector .slds-chat-message__text_outbound-agent
 * @restrict .slds-chat-message__text
 * @modifier
 */
  /**
 * @summary Used for an inbound message that is not a supported message type
 *
 * @selector .slds-chat-message__text_unsupported-type
 * @restrict .slds-chat-message__text
 * @modifier
 */
  /**
 * @summary Used for an inbound message that fails to deliver
 *
 * @selector .slds-chat-message__text_delivery-failure
 * @restrict .slds-chat-message__text
 * @modifier
 */
  /**
 * @summary Used when sneak peek is enabled for customer messages
 *
 * @selector .slds-chat-message__text_sneak-peek
 * @restrict .slds-chat-message__text
 * @modifier
 */
  /**
 * @summary Used to style chat message meta data
 *
 * @selector .slds-chat-message__meta
 * @restrict .slds-chat-message div
 */
  /**
 * @summary Used to style chat message resend action
 *
 * @selector .slds-chat-message__action
 * @restrict .slds-chat-message .slds-button
 */
  /**
 * During any chat, certain events can occur which need to be displayed to the user
 *
 * @selector .slds-chat-event
 * @restrict .slds-chat-listitem div
 */
  /**
  * @summary Used to style the horizontal rules on an event
  *
  * @selector .slds-chat-event__rule
  * @restrict .slds-chat-event div
  */
  /**
  * @summary Used for styling the event body text
  *
  * @selector .slds-chat-event__body
  * @restrict .slds-chat-event div
  */
  /**
  * @summary Used to style any messages from an agent in the event
  *
  * @selector .slds-chat-event__agent-message
  * @restrict .slds-chat-event div
  */
  /**
 * Chat sessions are started and stopped with bookends to the conversation
 *
 * @summary Used to style a chat bookend
 *
 * @selector .slds-chat-bookend
 * @restrict .slds-chat-listitem div
 */
  /**
 * @summary Modifier for bookends which stop a chat session
 *
 * @selector .slds-chat-bookend_stop
 * @restrict .slds-chat-bookend
 * @modifier
 */
  /**
 *  Past chat logs are displayed differently for ease of scanning
 *
 * @summary Apply when displaying chat logs that appeared in the past
 *
 * @variant
 * @name past
 * @selector .slds-chat_past
 * @restrict section[role="log"]
 */
  /**
 * @summary Creates layout for a form element
 *
 * @name base
 * @selector .slds-form-element
 * @restrict div, fieldset, li
 * @variant
 */
  /**
 * Fixed text that sits to the left or right of an input
 *
 * @selector .slds-form-element__addon
 * @restrict .slds-form-element span
 */
  /**
 * Read-only components are used to display immutable data within a form
 *
 * @summary Initializes read-only form element
 *
 * @selector .slds-form-element__static
 * @restrict .slds-form-element span, .slds-form-element div
 */
  /**
 * Required Star
 *
 * @selector .slds-required
 * @restrict .slds-form-element abbr, abbr
 */
  /**
 * Error styles for form element
 *
 * @selector .slds-has-error
 * @restrict .slds-form-element
 * @modifier
 * @group feedback
 */
  /**
 * @summary Initializes text input
 *
 * @name base
 * @selector .slds-input
 * @restrict input
 * @required
 * @variant
 */
  /**
 * @summary Modifier to allow a [readonly] input to have borders
 *
 * @selector .slds-input_borders
 * @restrict .slds-input
 */
  /**
 * @summary Modifier if text input has svg icon adjacent to input
 *
 * @selector .slds-input-has-icon
 * @restrict .slds-form-element div
 */
  /**
 * @summary Positions two items (icons and/or spinners) on one side or the other of the input
 *
 * @selector .slds-input__icon-group
 * @restrict .slds-input-has-icon div
 */
  /**
 * @summary Positions the close icon and spinner on the right side of the input while searching
 *
 * @selector .slds-input__icon-group_right
 * @restrict .slds-input__icon-group
 */
  /**
 * @summary Use on input container to let it know there is fixed text to the left or right of the input
 *
 * @selector .slds-input-has-fixed-addon
 * @restrict .slds-form-element .slds-form-element__control
 */
  /**
 * @summary Positions decrement button within counter input field
 *
 * @selector .slds-input__button_decrement
 * @restrict button
 */
  /**
 * @summary Positions increment button within counter input field
 *
 * @selector .slds-input__button_increment
 * @restrict button
 */
  /**
 * @summary Initialize textarea
 *
 * @name base
 * @selector .slds-textarea
 * @restrict textarea
 * @required
 * @variant
 */
  /**
 * @summary Initializes radio button
 *
 * @name base
 * @selector .slds-radio
 * @restrict span
 * @variant
 */
  /**
 * @summary Initializes radio button
 *
 * @name base
 * @selector .slds-radio_button-group
 * @restrict div
 * @required
 * @variant
 */
  /**
 * @selector .slds-radio_button
 * @restrict .slds-radio_button-group span
 */
  /**
 * Label element inside of a radio button
 *
 * @selector .slds-radio_button__label
 * @restrict .slds-radio_button label
 */
  /**
 * @summary Initializes checkbox
 *
 * @name base
 * @selector .slds-checkbox
 * @restrict span, label
 * @required
 * @variant
 */
  /**
 * @summary Initializes checkbox toggle
 *
 * @name base
 * @selector .slds-checkbox_toggle
 * @restrict label
 * @variant
 */
  /**
 * @summary Initializes checkbox add button
 *
 * @name base
 * @selector .slds-checkbox_add-button
 * @restrict div
 * @variant
 */
  /**
 * @summary Initializes checkbox button group
 *
 * @name base
 * @selector .slds-checkbox_button-group
 * @restrict div, span
 * @required
 * @variant
 */
  /**
 * Initializes checkbox inside a button group
 *
 * @selector .slds-checkbox_button
 * @restrict .slds-checkbox_button-group span
 * @required
 */
  /**
 * @summary Initializes select
 *
 * @name base
 * @selector .slds-select
 * @restrict select
 * @required
 * @variant
 */
  /**
 * @name base
 * @selector .slds-form
 * @restrict form, div, fieldset
 * @variant
 */
  /**
 * Vertically aligns form label and control, provides spacing between form elements
 *
 * @selector .slds-form_stacked
 * @restrict .slds-form:not(.slds-form_compound)
 * @modifier
 * @group layout
 */
  /**
 * Horizontally aligns a single form label and control on the same line
 *
 * @selector .slds-form_horizontal
 * @restrict .slds-form:not(.slds-form_compound)
 * @modifier
 * @group layout
 */
  /**
 * Horizontally align multiple form elements on the same axis
 *
 * @selector .slds-form_inline
 * @restrict .slds-form
 * @modifier
 */
  /**
 * @summary Aligns the legend properly when there is an info tooltip
 *
 * @selector .slds-form-element__legend_has-tooltip
 * @restrict .slds-form-element__legend
 */
  /**
 * @summary Creates a form that consists of multiple form groups
 *
 * @name compound
 * @selector .slds-form_compound
 * @restrict .slds-form
 * @variant
 */
  /**
 * The popover should be positioned with JavaScript.
 *
 * When errors are found within a form, the user will be notified with a popover
 * with the page-level errors listed out. Please provide a contextually specific
 * title for the dialog with the aria-label attribute. e.g. "Acme Global edit
 * form errors"
 *
 * @summary Creates a docked form footer
 *
 * @name base
 * @selector .slds-docked-form-footer
 * @restrict div
 * @required
 * @variant
 */
  /**
 * @summary Initializes slider component
 *
 * @name base
 * @selector .slds-slider
 * @restrict div
 * @variant
 */
  /**
 * @summary Range track for slider
 *
 * @selector .slds-slider__range
 * @restrict input
 */
  /**
 * @summary Element that contains value of input range
 *
 * @selector .slds-slider__value
 * @restrict .slds-slider span
 */
  /**
 * @summary Contains the label and range for the slider label - not required
 *
 * @selector .slds-slider-label
 * @restrict span
 */
  /**
 * @summary Contains the label for the slider and adds a hook for adding `.slds-assistive-text` class to visually hide the label, but not the range
 *
 * @selector .slds-slider-label__label
 * @restrict .slds-slider-label span
 */
  /**
 * @summary Contains the range for the slider
 *
 * @selector .slds-slider-label__range
 * @restrict .slds-slider-label span
 */
  /**
 * @summary Modifier that makes the slider vertical
 *
 * @selector .slds-slider_vertical
 * @restrict .slds-slider
 * @modifier
 */
  /**
 * @name base
 * @selector .slds-file-selector
 * @restrict div
 * @variant
 */
  /**
 * Region that a file can be dropped within
 *
 * @selector .slds-file-selector__dropzone
 * @restrict .slds-file-selector div
 * @required
 */
  /**
 * Hidden input element
 *
 * @selector .slds-file-selector__input
 * @restrict .slds-file-selector input
 * @required
 */
  /**
 * Faux button
 *
 * @selector .slds-file-selector__button
 * @restrict .slds-file-selector button, .slds-file-selector span
 * @required
 */
  /**
 * Modifications based on context
 *
 * Single Line
 * Dedicated dropzone when there are multiple dropzones in the form or when
 * the input is positioned among other form inputs.
 *
 * @selector .slds-file-selector_files
 * @restrict .slds-file-selector
 * @required
 */
  /**
 * Multi Line / Image
 *
 * Use as a dedicated dropzone for image files only. May require a
 * cropping control.
 *
 * @name image
 * @selector .slds-file-selector_images
 * @restrict .slds-file-selector
 * @required
 * @variant
 */
  /**
 * Invisible Dropzone (Container)
 *
 * Use when an entire container should be droppable.
 * The container should have a visible boundary, like a modal, composer, or page.
 *
 * @name integrated
 * @selector .slds-file-selector_integrated
 * @restrict .slds-file-selector
 * @required
 * @variant
 */
  /**
 * Specific to integrated file selector — region that a file can be dropped within
 *
 * @selector .slds-file-selector__dropzone_integrated
 * @restrict .slds-file-selector_integrated div
 * @required
 */
  /**
 * Specific to integrated file selector — container for file selector
 * content, specifically within the dropzone
 *
 * @selector .slds-file-selector__body_integrated
 * @restrict .slds-file-selector_integrated label
 * @required
 */
  /**
 * Specific to integrated file selector — Descriptive call back text
 *
 * @selector .slds-file-selector__text_integrated
 * @restrict .slds-file-selector_integrated span
 * @required
 */
  /**
 * The page header is a masthead that contains the Title of the page, and supporting details. For large form factors, it may include actions.
 *
 * @summary Initializes page header
 *
 * @variant
 * @name base
 * @selector .slds-page-header
 * @restrict div
 * @support dev-ready
 */
  /**
 * Page title (header text).
 *
 * @selector .slds-page-header__title
 * @restrict .slds-page-header h1
 */
  /**
 * Page header record home contains up to four
 * compact layout fields. They're contained in the `.slds-page-header__detail-row` div.
 * That div contains the top and bottom spacing needed for this version of the page header.
 *
 * When text is truncated, the full text should be placed in
 * a tooltip on hover (currently shown in the title
 * attribute). One line truncation is created by using the
 * `.slds-truncate` class. Two line truncation must be achieved
 * using JavaScript.
 *
 * The page header is located at the top of every record home. It includes the record title and compact layout for a record. Excluding the title, the page header displays 4 compact layout fields. Similar data types can be rolled up and be displayed as a single field.
 *
 * **Record Title**
 *
 * - Display Record Type icon to the left of the title
 * - Record Type is displayed above the title
 * - When required, follow action is displayed to the right of the record title
 * - Display one line of text, truncate when the length conflicts with the page level actions
 *
 * As shown in Field 3, web addresses and email addresses should be parsed and displayed as hyperlinks linking to the appropriate mailto: or web url. Do not modify the user's input, display as intended.
 *
 * When text is truncated, display full field text in browser tooltip on hover.
 *
 * Display addresses in two lines. Street address on first line, City, State and Postal Code on line 2. For lengthy addresses, truncate each line individually based on the available width of the area using the `.slds-truncate` class. Display the full address via browser tooltip.
 *
 * @summary Bottom section containing record details
 *
 * @variant
 * @name record-home
 * @selector .slds-page-header__detail
 * @restrict .slds-page-header div
 * @support dev-ready
 * @required
 */
  /**
 * Vertical page header record home contains up to seven compact layout fields. They're contained in the `.slds-page-header__detail-row` div.
 * The heading does not truncate. This is typically used in more compact layouts where more vertical space is desired.
 *
 * @summary Initializes vertical page header
 *
 * @variant
 * @name record-home-vertical
 * @selector .slds-page-header_vertical
 * @restrict .slds-page-header
 * @support dev-ready
 */
  /**
 * The title for the Object Home page header is sorting component.
 * The `.slds-text-focus` class is placed on the media object that
 * contains the title and down icon to simulate a hover and
 * focus state of a link.
 *
 * This component is created entirely of existing components
 * like grids, buttons, button groups, and
 * icons.
 *
 * @summary Initializes object home page header
 *
 * @variant
 * @name object-home
 * @selector .slds-page-header_object-home
 * @restrict .slds-page-header
 * @support dev-ready
 */
  /**
 * @variant
 * @name base
 * @selector .slds-brand-band
 * @restrict div
 * @support dev-ready
 */
  /**
 * @summary Panel component
 *
 * @name base
 * @selector .slds-panel
 * @restrict div
 * @variant
 */
  /**
 * @summary Header element of a panel
 * @selector .slds-panel__header
 * @restrict .slds-panel div
 */
  /**
 * @summary Modifier that notifies panel header that something other than a title and close button exist
 * @selector .slds-panel__header_custom
 * @restrict .slds-panel__header
 * @modifier
 */
  /**
 * @summary Close button of a panel
 * @selector .slds-panel__close
 * @restrict .slds-panel .slds-button
 */
  /**
 * @summary Body element of a panel
 * @selector .slds-panel__body
 * @restrict .slds-panel div
 */
  /**
 * @summary Modifier that changes the display of a panel to dock to the viewport
 * @selector .slds-panel_docked
 * @restrict .slds-panel
 * @modifier
 */
  /**
 * @summary Modifier that changes the position of a panel to the left
 * @selector .slds-panel_docked-left
 * @restrict .slds-panel_docked
 * @modifier
 */
  /**
 * @summary Modifier that changes the position of a panel to the right
 * @selector .slds-panel_docked-right
 * @restrict .slds-panel_docked
 * @modifier
 */
  /**
 * @name filtering
 * @selector .slds-panel_filters
 * @restrict .slds-panel
 * @variant
 * @s1 false
 */
  /**
 * @selector .slds-filters
 * @restrict .slds-panel_filters div
 * @required
 */
  /**
 * Filters Header
 *
 * @selector .slds-filters__header
 * @restrict .slds-panel_filters div
 * @required
 */
  /**
 * Filters Body
 *
 * @selector .slds-filters__body
 * @restrict .slds-panel_filters div
 * @required
 */
  /**
 * Filters Footer
 *
 * @selector .slds-filters__footer
 * @restrict .slds-panel_filters div
 * @required
 */
  /**
 * Filterable Item
 *
 * @selector .slds-filters__item
 * @restrict .slds-panel_filters li div
 * @required
 */
  /**
 * A dialog popover, `.slds-popover`, can be applied to all variants of a dialog
 * popover. It initiates the styles of the popover and enables `.slds-nubbin` to be applied.
 *
 * A dialog popover requires at least one focusable element.
 *
 * @name base
 * @selector .slds-popover
 * @restrict [role="dialog"], [role="tooltip"]
 * @variant
 */
  /**
 * @name panels
 * @selector .slds-popover_panel
 * @restrict .slds-popover
 * @variant
 */
  /**
   * @selector .slds-nubbin_top
   * @restrict .slds-popover, .slds-dropdown
   * @modifier
   * @group nubbins
   */
  /**
   * @selector .slds-nubbin_top-left
   * @restrict .slds-popover, .slds-dropdown
   * @modifier
   * @group nubbins
   */
  /**
   * @selector .slds-nubbin_top-right
   * @restrict .slds-popover, .slds-dropdown
   * @modifier
   * @group nubbins
   */
  /**
   * @selector .slds-nubbin_bottom
   * @restrict .slds-popover, .slds-dropdown
   * @modifier
   * @group nubbins
   */
  /**
   * @selector .slds-nubbin_bottom-left
   * @restrict .slds-popover, .slds-dropdown
   * @modifier
   * @group nubbins
   */
  /**
   * @selector .slds-nubbin_bottom-right
   * @restrict .slds-popover, .slds-dropdown
   * @modifier
   * @group nubbins
   */
  /**
   * @selector .slds-nubbin_left
   * @restrict .slds-popover, .slds-dropdown
   * @modifier
   * @group nubbins
   */
  /**
   * @selector .slds-nubbin_left-top
   * @restrict .slds-popover, .slds-dropdown
   * @modifier
   * @group nubbins
   */
  /**
   * @selector .slds-nubbin_left-bottom
   * @restrict .slds-popover, .slds-dropdown
   * @modifier
   * @group nubbins
   */
  /**
   * @selector .slds-nubbin_right
   * @restrict .slds-popover, .slds-dropdown
   * @modifier
   * @group nubbins
   */
  /**
   * @selector .slds-nubbin_right-top
   * @restrict .slds-popover, .slds-dropdown
   * @modifier
   * @group nubbins
   */
  /**
   * @selector .slds-nubbin_right-bottom
   * @restrict .slds-popover, .slds-dropdown
   * @modifier
   * @group nubbins
   */
  /**
 * Walkthrough components are used to provide an interactive and educational prospect experience for setup.
 *
 * @summary Initializes a walkthrough non-modal dialog
 *
 * @name walkthrough
 * @selector .slds-popover_walkthrough
 * @restrict .slds-popover
 * @variant
 */
  /**
 * Alternate background for walkthrough non-modal dialog
 *
 * @selector .slds-popover_walkthrough-alt
 * @restrict .slds-popover_walkthrough
 * @modifier
 */
  /**
 * Einstein components are used to provide an interactive experience with Einstein features
 *
 * @summary Initializes a Einstein non-modal dialog
 *
 * @name einstein
 * @selector .slds-popover_einstein
 * @restrict [role="dialog"], [role="tooltip"]
 * @variant
 */
  /**
 * Error popovers are used to notify the user of errors on the page
 *
 * If the elements within the error popover exceed 150px, use the `.slds-popover__body_scrollable`  modifier on the body element.
 *
 * In some cases, such as displaying a list of menu items, padding may not be necessary in the popover body. To remove the padding, add the `slds-p-around_none" utility class to the body element.
 *
 * @summary Initializes an error non-modal dialog
 *
 * @name error
 * @selector .slds-popover_error
 * @restrict .slds-popover
 * @variant
 */
  /**
 * Warning popovers are used to warn the user about information on the page that deserves caution
 *
 * If the elements within the error popover exceed 150px, use the `.slds-popover__body_scrollable` modifier on the body element.
 *
 * In some cases, such as displaying a list of menu items, padding may not be necessary in the popover body. To remove the padding, add the `slds-p-around_none" utility class to the body element.
 *
 * @summary Initializes an warning non-modal dialog
 *
 * @name warning
 * @selector .slds-popover_warning
 * @restrict .slds-popover
 * @variant
 */
  /**
 * The tooltip should be positioned with JavaScript.
 *
 * You can include inline help tooltips for form elements and any focusable items, such as anchor links, buttons, etc. If your tooltips are available on hover, also make sure that they’re available on keyboard focus. To allow screen readers to access the tooltip, the HTML form field element must  have an `aria-describedby` attribute that points to the tooltip `ID` of the tooltip.
 *
 * @summary Initializes a tooltip
 *
 * @variant
 * @name base
 * @selector .slds-popover_tooltip
 * @restrict [role="tooltip"]
 * @support dev-ready
 */
  /**
 * @selector .slds-rise-from-ground
 * @restrict .slds-popover_tooltip
 * @modifier
 * @group toggle
 */
  /**
 * @selector .slds-fall-into-ground
 * @restrict .slds-popover_tooltip
 * @modifier
 * @group toggle
 */
  /**
 *
 * @summary Initializes a trigger element around the dropdown
 * @name dropdown
 * @selector .slds-dropdown-trigger
 * @restrict div, span, li
 * @variant
 */
  /**
 * @summary Initializes dropdown
 * @selector .slds-dropdown
 * @restrict .slds-dropdown-trigger div, .slds-dropdown-trigger ul, .slds-docked-composer_overflow div
 * @notes Applies positioning and container styles, by default, dropdown appears below and center of target
 */
  /**
 * @name submenu
 * @summary
 * @selector .slds-has-submenu
 * @restrict .slds-dropdown__item
 * @release 2.5.0
 */
  /**
 * @name base
 * @selector .slds-combobox-picklist
 * @restrict div
 * @variant
 * @s1 false
 */
  /**
   * Read-only input element for picklist
   *
   * @selector .slds-picklist__input
   * @restrict .slds-picklist .slds-form-element__control
   * @required
   */
  /**
 * A Combobox is a composite widget that lets a user select one or more optons, from a
 * predefined or autocompleted searchable list. The result of that selection
 * is then shown as the value of an input, inside the Combobox widget.
 *
 * The multi-select Combobox can have more than one selected option.
 * When more than one option has been selected, the value of the input should
 * be updated with the total number of selected items, such as "3 options selected".
 * When a Combobox with multiple selected options is closed,
 * a listbox of pills is also used to represent those selected options.
 * The listbox of pills is positioned below the read-only input, each pill represents a selected option.
 * This allows a user to easily see and remove selected items from the Combobox.
 *
 * The Combobox comes with 2 distinct variations of functionality. A "Read-Only and an "Autocomplete" Combobox.
 * A read-only Combobox allows a user to select an option from a pre-defined list of options. It does not allow
 * free form user input, nor does it allow the user to modify the selected value.
 * An autocomplete Combobox also allows a user to select an option from a list
 * but, that list can be affected by what the user types into the input of the Combobox. This can be
 * useful when the