@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.css

Salesforce Lightning Design System

/*! Lightning Design System 2.3.1 */
@charset "UTF-8";
/*!
 * 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.
 */
@font-face {
  font-family: 'Salesforce Sans';
  src: url("../fonts/webfonts/SalesforceSans-Light.woff2") format("woff2"), url("../fonts/webfonts/SalesforceSans-Light.woff") format("woff");
  font-weight: 300; }

@font-face {
  font-family: 'Salesforce Sans';
  src: url("../fonts/webfonts/SalesforceSans-LightItalic.woff2") format("woff2"), url("../fonts/webfonts/SalesforceSans-LightItalic.woff") format("woff");
  font-style: italic;
  font-weight: 300; }

@font-face {
  font-family: 'Salesforce Sans';
  src: url("../fonts/webfonts/SalesforceSans-Regular.woff2") format("woff2"), url("../fonts/webfonts/SalesforceSans-Regular.woff") format("woff");
  font-weight: 400; }

@font-face {
  font-family: 'Salesforce Sans';
  src: url("../fonts/webfonts/SalesforceSans-Italic.woff2") format("woff2"), url("../fonts/webfonts/SalesforceSans-Italic.woff") format("woff");
  font-style: italic;
  font-weight: 400; }

@font-face {
  font-family: 'Salesforce Sans';
  src: url("../fonts/webfonts/SalesforceSans-Bold.woff2") format("woff2"), url("../fonts/webfonts/SalesforceSans-Bold.woff") format("woff");
  font-weight: 700; }

@font-face {
  font-family: 'Salesforce Sans';
  src: url("../fonts/webfonts/SalesforceSans-BoldItalic.woff2") format("woff2"), url("../fonts/webfonts/SalesforceSans-BoldItalic.woff") format("woff");
  font-style: italic;
  font-weight: 700; }

/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

body {
  margin: 0; }

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block; }

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline; }

audio:not([controls]) {
  display: none;
  height: 0; }

[hidden],
template {
  display: none; }

a {
  background-color: transparent; }

a:active,
a:hover {
  outline: 0; }

abbr[title] {
  border-bottom: 1px dotted; }

b,
strong {
  font-weight: bold; }

dfn {
  font-style: italic; }

h1 {
  font-size: 2em;
  margin: 0.67em 0; }

mark {
  background: #ff0;
  color: #000; }

small {
  font-size: 80%; }

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

img {
  border: 0; }

svg:not(:root) {
  overflow: hidden; }

figure {
  margin: 1em 40px; }

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0; }

pre {
  overflow: auto; }

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em; }

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0; }

button {
  overflow: visible; }

button,
select {
  text-transform: none; }

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer; }

button[disabled],
html input[disabled] {
  cursor: default; }

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

input {
  line-height: normal; }

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0; }

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto; }

input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box; }

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

legend {
  border: 0;
  padding: 0; }

textarea {
  overflow: auto; }

optgroup {
  font-weight: bold; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

td,
th {
  padding: 0; }

*,
*:before,
*:after {
  box-sizing: border-box; }

::-webkit-input-placeholder {
  color: #54698d;
  font-weight: 400;
  font-size: 0.8125rem; }

:-ms-input-placeholder {
  color: #54698d;
  font-weight: 400;
  font-size: 0.8125rem; }

::placeholder {
  color: #54698d;
  font-weight: 400;
  font-size: 0.8125rem; }

::-moz-selection {
  background: #d8edff;
  text-shadow: none;
  color: #16325c; }

::selection {
  background: #d8edff;
  text-shadow: none;
  color: #16325c; }

html {
  font-family: "Salesforce Sans", Arial, sans-serif;
  font-size: 100%;
  line-height: 1.5;
  background: #fdfdfd;
  color: #16325c;
  -webkit-tap-highlight-color: transparent; }

body {
  font-size: 0.8125rem;
  background: transparent; }

h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul,
dl,
fieldset {
  margin: 0;
  padding: 0; }

dd,
figure {
  margin: 0; }

abbr[title] {
  text-decoration: none; }

abbr[title],
fieldset,
hr {
  border: 0; }

hr {
  padding: 0; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: inherit;
  font-size: 1em; }

ol,
ul {
  list-style: none; }

a {
  color: #0070d2;
  text-decoration: none;
  transition: color 0.1s linear; }

a:hover, a:focus {
  text-decoration: underline;
  color: #005fb2; }

a:active {
  color: #00396b; }

a,
button {
  cursor: pointer; }

b,
strong,
dfn {
  font-weight: 700; }

mark {
  background-color: #fff03f;
  color: #16325c; }

abbr[title] {
  cursor: help; }

input[type="search"] {
  box-sizing: border-box; }

table {
  width: 100%; }

caption,
th,
td {
  text-align: left; }

hr {
  display: block;
  margin: 2rem 0;
  border-top: 1px solid #d8dde6;
  height: 1px;
  clear: both; }

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle; }

img {
  max-width: 100%;
  height: auto; }

.slds-modal_form .slds-modal__header,
.slds-modal_form .slds-modal__content:last-child,
.slds-modal--form .slds-modal__header,
.slds-modal--form .slds-modal__content:last-child {
  border-radius: 0;
  box-shadow: none; }

.slds-modal_form .slds-modal__container,
.slds-modal--form .slds-modal__container {
  margin: 0;
  padding: 0; }

.slds-modal_form .slds-modal__header .slds-text-heading_medium,
.slds-modal_form .slds-modal__header .slds-text-heading--medium,
.slds-modal--form .slds-modal__header .slds-text-heading_medium,
.slds-modal--form .slds-modal__header .slds-text-heading--medium {
  line-height: 1.5; }

.slds-modal_form .slds-modal__header .slds-button,
.slds-modal--form .slds-modal__header .slds-button {
  display: inline-block;
  width: auto; }

.slds-modal_form .slds-modal__header .slds-button:first-child,
.slds-modal--form .slds-modal__header .slds-button:first-child {
  float: left;
  margin-right: 0.5rem; }

.slds-modal_form .slds-modal__header .slds-button:first-child + .slds-button,
.slds-modal--form .slds-modal__header .slds-button:first-child + .slds-button {
  float: right;
  margin-top: 0;
  margin-left: 0.5rem; }

.slds-action-overflow_touch,
.slds-action-overflow--touch {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9001; }

.slds-action-overflow_touch__container,
.slds-action-overflow--touch__container {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: end;
      justify-content: flex-end;
  height: 100%; }

.slds-action-overflow_touch__content,
.slds-action-overflow--touch__content {
  padding-top: 33.33333333333333%;
  overflow: hidden;
  overflow-y: auto; }

.slds-action-overflow_touch__body,
.slds-action-overflow--touch__body {
  position: relative;
  top: 2rem;
  background: #fdfdfd;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.07); }

.slds-action-overflow_touch__footer,
.slds-action-overflow--touch__footer {
  position: relative;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  border-top: 1px solid #d8dde6;
  padding: 0.75rem 1rem;
  background-color: #f4f6f9;
  box-shadow: 0 -2px 4px #F4F6F9; }

/**
 * @summary Create each activity timeline item in a list
 *
 * @name base
 * @selector .slds-timeline__media
 * @restrict .slds-media
 * @support dev-ready
 * @variant
 */
.slds-timeline__media,
.slds-media_timeline,
.slds-media--timeline {
  position: relative;
  padding-bottom: 1.5rem; }

.slds-timeline__media:before,
.slds-media_timeline:before,
.slds-media--timeline:before {
  content: '';
  background: #d8dde6;
  height: 100%;
  width: 2px;
  position: absolute;
  left: 0.75rem;
  top: 0;
  bottom: 0;
  margin-left: -1px;
  z-index: -1; }

.slds-timeline__media:before,
.slds-media_timeline:before,
.slds-media--timeline:before {
  margin-left: 1px; }

/**
 * @selector .slds-timeline__title
 * @restrict .slds-timeline__media h3
 * @deprecated
 */
.slds-timeline__title {
  position: relative; }

.slds-timeline__title-content {
  position: relative;
  top: -1px;
  padding-right: 1rem;
  background: #fdfdfd;
  z-index: 2; }

.slds-timeline__title:after {
  position: absolute;
  right: 0;
  bottom: 0.5rem;
  left: 0;
  border-bottom: 1px dashed #d8dde6;
  content: ' ';
  z-index: 1; }

.slds-timeline {
  /**
   * Icon associated with timeline item
   *
   * @selector .slds-timeline__icon
   * @restrict .slds-timeline__media .slds-media__figure
   */
  /**
   * Container for date and action overflow on the right of a timeline item
   *
   * @selector .slds-timeline__actions
   * @restrict .slds-timeline__item 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
   */
  /**
   * @name call
   * @selector .slds-timeline__media_call
   * @restrict .slds-timeline__media
   * @variant
   */
  /**
   * @name email
   * @selector .slds-timeline__media_email
   * @restrict .slds-timeline__media
   * @variant
   */
  /**
   * @name event
   * @selector .slds-timeline__media_event
   * @restrict .slds-timeline__media
   * @variant
   */
  /**
   * @name task
   * @selector .slds-timeline__media_task
   * @restrict .slds-timeline__media
   * @variant
   */ }

.slds-timeline__icon {
  margin-top: -0.75rem;
  border: 2px solid #fff;
  border-top-width: 0.75rem;
  border-bottom-width: 0.75rem; }

.slds-timeline__actions {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: column nowrap;
      flex-flow: column nowrap;
  -ms-flex-align: end;
      align-items: flex-end; }

.slds-timeline__date {
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  color: #54698d; }

.slds-timeline__media_call:before, .slds-timeline__media--call:before {
  background: #48c3cc; }

.slds-timeline__media_email:before, .slds-timeline__media--email:before {
  background: #95aec5; }

.slds-timeline__media_event:before, .slds-timeline__media--event:before {
  background: #eb7092; }

.slds-timeline__media_task:before, .slds-timeline__media--task:before {
  background: #4bc076; }

/**
 * @summary Create badge component
 *
 * @name base
 * @selector .slds-badge
 * @restrict span
 * @variant
 */
.slds-badge {
  background-color: #e0e5ee;
  padding: 0.25rem 0.5rem;
  border-radius: 15rem;
  font-size: 0.625rem;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.0625em;
  color: #16325c;
  vertical-align: middle;
  white-space: nowrap; }

.slds-badge + .slds-badge {
  margin-left: 0.5rem; }

.slds-badge:empty {
  padding: 0; }

/**
 * @summary Create breadcrumbs component
 *
 * @name base
 * @selector .slds-breadcrumb
 * @restrict ol
 * @support dev-ready
 * @variant
 */
.slds-breadcrumb {
  /**
   * Item of the breadcrumb list
   *
   * @selector .slds-breadcrumb__item
   * @restrict .slds-breadcrumb li
   * @required
   */ }

.slds-breadcrumb .slds-list__item, .slds-breadcrumb__item {
  position: relative; }

.slds-breadcrumb .slds-list__item:before, .slds-breadcrumb__item:before {
  content: '\003E';
  position: absolute;
  left: -0.25rem; }

.slds-breadcrumb .slds-list__item > a, .slds-breadcrumb__item > a {
  display: block;
  padding: 0 0.5rem; }

.slds-breadcrumb .slds-list__item > a:hover, .slds-breadcrumb__item > a:hover {
  text-decoration: none; }

.slds-breadcrumb .slds-list__item:first-child > a, .slds-breadcrumb__item:first-child > a {
  padding-left: 0; }

.slds-breadcrumb .slds-list__item:first-child:before, .slds-breadcrumb__item:first-child:before {
  content: ''; }

/**
 * @summary Creates button group container
 *
 * @name base
 * @selector .slds-button-group
 * @restrict div
 * @variant
 */
.slds-button-group,
.slds-button-group-list {
  display: -ms-flexbox;
  display: flex; }

.slds-button-group .slds-button,
.slds-button-group-list .slds-button {
  border-radius: 0; }

.slds-button-group .slds-button:focus,
.slds-button-group-list .slds-button:focus {
  z-index: 1; }

.slds-button-group .slds-button + .slds-button,
.slds-button-group .slds-button + .slds-button_last .slds-button,
.slds-button-group .slds-button + .slds-button--last .slds-button,
.slds-button-group-list li + li .slds-button {
  margin-left: -1px; }

.slds-button-group-list li:first-child .slds-button,
.slds-button-group .slds-button:first-child {
  border-radius: 0.25rem 0 0 0.25rem; }

/**
 * 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
 */
.slds-button-group .slds-button:last-child,
.slds-button-group-list li:last-child .slds-button,
.slds-button-group .slds-button_last .slds-button,
.slds-button-group .slds-button--last .slds-button,
.slds-button-group .slds-button.slds-button_last,
.slds-button-group .slds-button.slds-button--last,
.slds-button-group .slds-button_last .slds-button:only-child,
.slds-button-group .slds-button--last .slds-button:only-child,
.slds-button-group .slds-button.slds-button_last,
.slds-button-group .slds-button.slds-button--last {
  border-radius: 0 0.25rem 0.25rem 0; }

.slds-button-group .slds-button:only-child,
.slds-button-group-list li:only-child .slds-button {
  border-radius: 0.25rem; }

.slds-button-group + .slds-button-group,
.slds-button-group + .slds-button-group-list,
.slds-button-group + .slds-button,
.slds-button-group-list + .slds-button-group-list,
.slds-button-group-list + .slds-button-group,
.slds-button-group-list + .slds-button {
  margin-left: 0.25rem; }

/**
 * The base `.slds-button` looks like a plain text link. It removes all the
 * styling of the native button. It’s typically used to trigger a modal or
 * display a “like” link. All button variations are built by adding another
 * class to `.slds-button`.
 *
 * Add the `.slds-button--neutral` class to create a neutral button, which
 * has a white background and gray border.
 *
 * Use a neutral icon button is for buttons with an icon on the left or
 * right (not for stateful buttons). Add the `.slds-button--neutral` class
 * to `.slds-button`.
 *
 * The SVG inside receives the `.slds-button__icon` class. You can position
 * the icon on the right or the left using `.slds-button__icon--right` or
 * `.slds-button__icon--left` , which apply the correct amount of space
 * between the icon and the text.
 *
 * To create the brand button, add the `.slds-button--brand` class to
 * the `.slds-button` class.
 *
 * To create the destructive button, add the `.slds-button--destructive`
 * class to the `.slds-button` class.
 *
 * Use the inverse button on dark backgrounds. Add the `.slds-button--inverse`
 * class to the `.slds-button` class.
 *
 * @summary This neutralizes all the base styles making it look like a text link
 *
 * @name base
 * @selector .slds-button
 * @restrict button, a, span
 * @variant
 */
.slds-button {
  position: relative;
  display: inline-block;
  padding: 0;
  background: transparent;
  background-clip: border-box;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  line-height: 1.875rem;
  text-decoration: none;
  color: #0070d2;
  -webkit-appearance: none;
  white-space: normal;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  transition: color 0.05s linear, background-color 0.05s linear; }

.slds-button:hover, .slds-button:focus, .slds-button:active, .slds-button:visited {
  text-decoration: none; }

.slds-button:hover, .slds-button:focus {
  color: #005fb2; }

.slds-button:focus {
  outline: 0;
  box-shadow: 0 0 3px #0070D2; }

.slds-button:active {
  color: #00396b; }

.slds-button[disabled] {
  color: #d8dde6; }

.slds-button:hover .slds-button__icon, .slds-button:focus .slds-button__icon, .slds-button:active .slds-button__icon, .slds-button[disabled] .slds-button__icon {
  fill: currentColor; }

.slds-button + .slds-button-group,
.slds-button + .slds-button-group-list {
  margin-left: 0.25rem; }

.slds-button + .slds-button {
  margin-left: 0.25rem; }

a.slds-button {
  text-align: center; }

a.slds-button:focus {
  outline: 0;
  box-shadow: 0 0 3px #0070D2; }

a.slds-button--inverse:focus {
  outline: none;
  box-shadow: 0 0 3px #E0E5EE; }

/**
 * Resets attributes of .slds-button back to the browser default
 *
 * @selector .slds-button_reset
 * @restrict button
 * @modifier
 */
.slds-button_reset,
.slds-button--reset {
  font-size: inherit;
  color: inherit;
  line-height: inherit;
  padding: 0;
  background: transparent;
  border: 0;
  text-align: inherit; }

/**
 * Creates the gray border with white background default style
 *
 * @selector .slds-button_neutral
 * @restrict .slds-button
 * @modifier
 * @group theme
 */
.slds-button_neutral,
.slds-button--neutral {
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #d8dde6;
  background-color: white; }

.slds-button_neutral:hover, .slds-button_neutral:focus,
.slds-button--neutral:hover,
.slds-button--neutral:focus {
  background-color: #f4f6f9; }

.slds-button_neutral:active,
.slds-button--neutral:active {
  background-color: #eef1f6; }

.slds-button_neutral[disabled],
.slds-button--neutral[disabled] {
  background-color: white;
  cursor: default; }

/**
 * Creates the brand blue Salesforce style
 *
 * @selector .slds-button_brand
 * @restrict .slds-button
 * @modifier
 * @group theme
 */
.slds-button_brand,
.slds-button--brand {
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
  vertical-align: middle;
  background-color: #0070d2;
  border: 1px solid #0070d2;
  color: white; }

.slds-button_brand:link, .slds-button_brand:visited, .slds-button_brand:active,
.slds-button--brand:link,
.slds-button--brand:visited,
.slds-button--brand:active {
  color: white; }

.slds-button_brand:hover, .slds-button_brand:focus,
.slds-button--brand:hover,
.slds-button--brand:focus {
  background-color: #005fb2;
  color: white; }

.slds-button_brand:active,
.slds-button--brand:active {
  background-color: #00396b; }

.slds-button_brand[disabled],
.slds-button--brand[disabled] {
  background: #e0e5ee;
  border-color: transparent;
  color: white; }

/**
 * Creates the inverse style for dark backgrounds
 *
 * @selector .slds-button_inverse
 * @restrict .slds-button
 * @modifier
 * @group theme
 */
.slds-button_inverse,
.slds-button--inverse {
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #d8dde6;
  background-color: transparent; }

.slds-button_inverse:hover, .slds-button_inverse:focus,
.slds-button--inverse:hover,
.slds-button--inverse:focus {
  background-color: #f4f6f9; }

.slds-button_inverse:active,
.slds-button--inverse:active {
  background-color: #eef1f6; }

.slds-button_inverse[disabled],
.slds-button--inverse[disabled] {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.15); }

.slds-button_inverse, .slds-button_inverse:link, .slds-button_inverse:visited,
.slds-button--inverse,
.slds-button--inverse:link,
.slds-button--inverse:visited,
.slds-button_icon-border-inverse,
.slds-button_icon-border-inverse:link,
.slds-button_icon-border-inverse:visited,
.slds-button--icon-border-inverse,
.slds-button--icon-border-inverse:link,
.slds-button--icon-border-inverse:visited {
  color: #e0e5ee; }

.slds-button_inverse:hover, .slds-button_inverse:focus, .slds-button_inverse:active,
.slds-button--inverse:hover,
.slds-button--inverse:focus,
.slds-button--inverse:active,
.slds-button_icon-border-inverse:hover,
.slds-button_icon-border-inverse:focus,
.slds-button_icon-border-inverse:active,
.slds-button--icon-border-inverse:hover,
.slds-button--icon-border-inverse:focus,
.slds-button--icon-border-inverse:active {
  color: #0070d2; }

.slds-button_inverse:focus,
.slds-button--inverse:focus,
.slds-button_icon-border-inverse:focus,
.slds-button--icon-border-inverse:focus {
  outline: none;
  box-shadow: 0 0 3px #E0E5EE; }

.slds-button_inverse[disabled],
.slds-button--inverse[disabled],
.slds-button_icon-border-inverse[disabled],
.slds-button--icon-border-inverse[disabled] {
  color: rgba(255, 255, 255, 0.15); }

/**
 * Creates a red button style
 *
 * @selector .slds-button_destructive
 * @restrict .slds-button
 * @group theme
 * @modifier
 */
.slds-button_destructive,
.slds-button--destructive {
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
  vertical-align: middle;
  background-color: #c23934;
  border: 1px solid #c23934;
  color: white; }

.slds-button_destructive:link, .slds-button_destructive:visited, .slds-button_destructive:active,
.slds-button--destructive:link,
.slds-button--destructive:visited,
.slds-button--destructive:active {
  color: white; }

.slds-button_destructive:hover, .slds-button_destructive:focus,
.slds-button--destructive:hover,
.slds-button--destructive:focus {
  background-color: #a61a14;
  color: white; }

.slds-button_destructive:active,
.slds-button--destructive:active {
  background-color: #870500;
  border-color: #870500; }

.slds-button_destructive[disabled],
.slds-button--destructive[disabled] {
  background: #e0e5ee;
  border-color: transparent;
  color: white; }

/**
 * Creates a green button style
 *
 * @selector .slds-button_success
 * @restrict .slds-button
 * @group theme
 * @modifier
 */
.slds-button_success,
.slds-button--success {
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
  vertical-align: middle;
  background-color: #4bca81;
  border: 1px solid #4bca81;
  color: #16325c; }

.slds-button_success:link, .slds-button_success:visited, .slds-button_success:active,
.slds-button--success:link,
.slds-button--success:visited,
.slds-button--success:active {
  color: #16325c; }

.slds-button_success:hover, .slds-button_success:focus,
.slds-button--success:hover,
.slds-button--success:focus {
  background-color: #04844b;
  border-color: #04844b;
  color: white; }

.slds-button_success:active,
.slds-button--success:active {
  background-color: #04844b;
  border-color: #04844b; }

/**
 * Creates a smaller button style
 *
 * @selector .slds-button_small
 * @restrict .slds-button
 * @deprecated
 */
.slds-button_small,
.slds-button--small {
  line-height: 1.75rem;
  min-height: 2rem; }

/**
 * @selector .slds-button-space-left
 * @deprecated
 */
.slds-button-space-left {
  margin-left: 0.25rem; }

.slds-button_hint,
.slds-button--hint {
  color: #9faab5; }

.slds-button_hint:hover, .slds-button_hint:focus, .slds-button_hint:active,
.slds-button--hint:hover,
.slds-button--hint:focus,
.slds-button--hint:active {
  color: #0070d2; }

.slds-hint-parent:hover .slds-button--hint, .slds-hint-parent:focus .slds-button--hint {
  color: #0070d2; }

.slds-button__icon_left,
.slds-button__icon--left {
  margin-right: 0.5rem; }

.slds-button__icon_right,
.slds-button__icon--right {
  margin-left: 0.5rem; }

/**
 * The stateful button requires the `.slds-button--neutral` class in addition to the `.slds-button` class.
 *
 * The stateful inverse button works just like the stateful button. It requires the `.slds-button--inverse` class in addition to the `.slds-button` class.
 *
 * It uses the class `.slds-not-selected` in its initial state. When the user activates the button, use JavaScript to toggle the class to `.slds-is-selected`. The button contains three spans with classes that hide or show the content of the spans based on the class on the button. Each span contains text and a corresponding icon. The SVG will have the `.slds-button__icon--stateful` class as well as the `.slds-button__icon--left` class setting the icon on the left.
 *
 * Stateful icons can be toggled on and off and retain their state. Like stateful buttons, the initial state is `.slds-not-selected`, and JavaScript is used to toggle it to `.slds-is-selected` when activated.
 *
 * #### Accessibility
 *
 * For accessibility, include the attribute `aria-live="assertive"` on the button. The `aria-live="assertive"` attribute means the value of the `<span>` inside the button will be spoken whenever it changes.
 *
 * @summary Initiates a stateful button
 *
 * @name stateful
 * @selector .slds-button_stateful
 * @restrict .slds-button
 * @variant
 */
.slds-button_neutral.slds-is-selected,
.slds-button--neutral.slds-is-selected {
  border-color: transparent;
  background-color: transparent; }

.slds-button_neutral.slds-is-selected:hover:not([disabled]), .slds-button_neutral.slds-is-selected:focus:not([disabled]),
.slds-button--neutral.slds-is-selected:hover:not([disabled]),
.slds-button--neutral.slds-is-selected:focus:not([disabled]) {
  border: 1px solid #d8dde6;
  background-color: #f4f6f9; }

.slds-button_neutral.slds-is-selected:active:not([disabled]),
.slds-button--neutral.slds-is-selected:active:not([disabled]) {
  background-color: #eef1f6; }

.slds-button__icon_stateful,
.slds-button__icon--stateful {
  width: 0.75rem;
  height: 0.75rem;
  fill: currentColor; }

.slds-button_inverse.slds-is-selected,
.slds-button--inverse.slds-is-selected {
  border-color: transparent; }

/**
 * 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
 */
.slds-not-selected .slds-text-selected {
  display: none; }

.slds-not-selected .slds-text-selected-focus {
  display: none; }

.slds-not-selected .slds-text-not-selected {
  display: block; }

/**
 * 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
 */
.slds-is-selected-clicked .slds-text-selected,
.slds-is-selected[disabled] .slds-text-selected,
.slds-is-selected[disabled]:hover .slds-text-selected,
.slds-is-selected[disabled]:focus .slds-text-selected {
  display: block; }

.slds-is-selected-clicked .slds-text-selected-focus,
.slds-is-selected[disabled] .slds-text-selected-focus,
.slds-is-selected[disabled]:hover .slds-text-selected-focus,
.slds-is-selected[disabled]:focus .slds-text-selected-focus {
  display: none; }

.slds-is-selected-clicked .slds-text-not-selected,
.slds-is-selected[disabled] .slds-text-not-selected,
.slds-is-selected[disabled]:hover .slds-text-not-selected,
.slds-is-selected[disabled]:focus .slds-text-not-selected {
  display: none; }

/**
 * 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
 */
.slds-is-selected .slds-text-not-selected {
  display: none; }

.slds-is-selected .slds-text-selected {
  display: block; }

.slds-is-selected .slds-text-selected-focus {
  display: none; }

.slds-is-selected:hover .slds-text-not-selected, .slds-is-selected:focus .slds-text-not-selected {
  display: none; }

.slds-is-selected:hover .slds-text-selected, .slds-is-selected:focus .slds-text-selected {
  display: none; }

.slds-is-selected:hover .slds-text-selected-focus, .slds-is-selected:focus .slds-text-selected-focus {
  display: block; }

/**
 * Sizing for icon that sits inside button--icon
 *
 * @name with-icon
 * @selector .slds-button__icon
 * @restrict .slds-button svg
 * @variant
 */
.slds-button__icon {
  width: 0.875rem;
  height: 0.875rem;
  fill: currentColor;
  /**
   * Large size button icon svg
   *
   * @selector .slds-button__icon_large
   * @restrict .slds-button__icon
   * @modifier
   * @group icon-size
   */
  /**
   * Small size button icon svg
   *
   * @selector .slds-button__icon_small
   * @restrict .slds-button__icon
   * @modifier
   * @group icon-size
   */
  /**
   * x-small size button icon svg
   *
   * @selector .slds-button__icon_x-small
   * @restrict .slds-button__icon
   * @modifier
   * @group icon-size
   */ }

.slds-button__icon_large, .slds-button__icon--large {
  width: 1.5rem;
  height: 1.5rem; }

.slds-button__icon_small, .slds-button__icon--small {
  width: 0.75rem;
  height: 0.75rem; }

.slds-button__icon_x-small, .slds-button__icon--x-small {
  width: 0.5rem;
  height: 0.5rem; }

/**
* @summary Creates a button that looks like a plain icon
*
* @name base
* @selector .slds-button_icon
* @restrict button
* @variant
*/
.slds-button_icon,
.slds-button--icon,
.slds-button_icon-inverse,
.slds-button--icon-inverse,
.slds-button_icon-container,
.slds-button--icon-container,
.slds-button_icon-border,
.slds-button--icon-border,
.slds-button_icon-border-filled,
.slds-button--icon-border-filled,
.slds-button_icon-border-inverse,
.slds-button--icon-border-inverse,
.slds-button_icon-more,
.slds-button--icon-more,
.slds-button_icon-error,
.slds-button--icon-error {
  line-height: 1;
  vertical-align: middle;
  color: #54698d; }

.slds-button_icon-bare,
.slds-button--icon-bare {
  line-height: 1;
  vertical-align: middle;
  color: #54698d; }

/**
 * Default width + height for button icon with containers
 *
 * @selector .slds-button_icon-container
 * @restrict .slds-button_icon
 * @modifier
 */
.slds-button_icon-container,
.slds-button--icon-container,
.slds-button_icon-border,
.slds-button--icon-border,
.slds-button_icon-border-filled,
.slds-button--icon-border-filled,
.slds-button_icon-border-inverse,
.slds-button--icon-border-inverse {
  width: 2rem;
  height: 2rem; }

/**
 * Creates an icon button with a border
 *
 * @selector .slds-button_icon-border
 * @restrict .slds-button_icon
 * @modifier
 * @group borders
 */
.slds-button_icon-border-filled,
.slds-button--icon-border-filled,
.slds-button_icon-border,
.slds-button--icon-border {
  border: 1px solid #d8dde6; }

.slds-button_icon-border-filled:hover, .slds-button_icon-border-filled:focus,
.slds-button--icon-border-filled:hover,
.slds-button--icon-border-filled:focus,
.slds-button_icon-border:hover,
.slds-button_icon-border:focus,
.slds-button--icon-border:hover,
.slds-button--icon-border:focus {
  background-color: #f4f6f9; }

.slds-button_icon-border-filled:active,
.slds-button--icon-border-filled:active,
.slds-button_icon-border:active,
.slds-button--icon-border:active {
  background-color: #eef1f6; }

.slds-button_icon-border-filled[disabled]:hover, .slds-button_icon-border-filled[disabled]:focus,
.slds-button--icon-border-filled[disabled]:hover,
.slds-button--icon-border-filled[disabled]:focus,
.slds-button_icon-border[disabled]:hover,
.slds-button_icon-border[disabled]:focus,
.slds-button--icon-border[disabled]:hover,
.slds-button--icon-border[disabled]:focus {
  background-color: transparent; }

/**
 * Gives a white icon color on a dark background
 *
 * @selector .slds-button_icon-border-inverse
 * @restrict .slds-button_icon
 * @modifier
 * @group borders
 */
.slds-button_icon-border-inverse,
.slds-button--icon-border-inverse {
  border: 1px solid #d8dde6;
  background-color: transparent;
  color: white; }

.slds-button_icon-border-inverse:hover, .slds-button_icon-border-inverse:focus,
.slds-button--icon-border-inverse:hover,
.slds-button--icon-border-inverse:focus {
  background-color: #f4f6f9; }

.slds-button_icon-border-inverse:active,
.slds-button--icon-border-inverse:active {
  background-color: #eef1f6; }

.slds-button_icon-border-inverse[disabled],
.slds-button--icon-border-inverse[disabled] {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.15); }

/**
 * Button icon with background
 *
 * @selector .slds-button_icon-border-filled
 * @restrict .slds-button_icon
 * @modifier
 * @group borders
 */
.slds-button_icon-border-filled,
.slds-button--icon-border-filled {
  background-color: white; }

.slds-button_icon-border-filled[disabled],
.slds-button--icon-border-filled[disabled] {
  border: 1px solid #d8dde6;
  background-color: white; }

/**
 * Button icon on inversed background
 *
 * @selector .slds-button_icon-inverse
 * @restrict .slds-button_icon
 * @modifier
 * @group color
 */
.slds-button_icon-inverse,
.slds-button--icon-inverse {
  color: white; }

.slds-button_icon-inverse:hover, .slds-button_icon-inverse:focus,
.slds-button--icon-inverse:hover,
.slds-button--icon-inverse:focus {
  color: rgba(255, 255, 255, 0.75); }

.slds-button_icon-inverse:focus,
.slds-button--icon-inverse:focus {
  outline: none;
  box-shadow: 0 0 3px #E0E5EE; }

.slds-button_icon-inverse:active,
.slds-button--icon-inverse:active {
  color: rgba(255, 255, 255, 0.5); }

.slds-button_icon-inverse[disabled],
.slds-button--icon-inverse[disabled] {
  color: rgba(255, 255, 255, 0.15); }

/**
 * Button icon for errors
 *
 * @selector .slds-button_icon-error
 * @restrict .slds-button_icon
 * @modifier
 * @group color
 */
.slds-button_icon-error, .slds-button_icon-error:hover, .slds-button_icon-error:active, .slds-button_icon-error:focus,
.slds-button--icon-error,
.slds-button--icon-error:hover,
.slds-button--icon-error:active,
.slds-button--icon-error:focus {
  color: #c23934; }

.slds-button_icon-container.slds-is-selected,
.slds-button--icon-container.slds-is-selected,
.slds-button_icon-border.slds-is-selected,
.slds-button--icon-border.slds-is-selected {
  background-color: #0070d2;
  border: 1px solid #0070d2;
  color: white; }

.slds-button_icon-container.slds-is-selected:link, .slds-button_icon-container.slds-is-selected:visited, .slds-button_icon-container.slds-is-selected:active,
.slds-button--icon-container.slds-is-selected:link,
.slds-button--icon-container.slds-is-selected:visited,
.slds-button--icon-container.slds-is-selected:active,
.slds-button_icon-border.slds-is-selected:link,
.slds-button_icon-border.slds-is-selected:visited,
.slds-button_icon-border.slds-is-selected:active,
.slds-button--icon-border.slds-is-selected:link,
.slds-button--icon-border.slds-is-selected:visited,
.slds-button--icon-border.slds-is-selected:active {
  color: white; }

.slds-button_icon-container.slds-is-selected:hover, .slds-button_icon-container.slds-is-selected:focus,
.slds-button--icon-container.slds-is-selected:hover,
.slds-button--icon-container.slds-is-selected:focus,
.slds-button_icon-border.slds-is-selected:hover,
.slds-button_icon-border.slds-is-selected:focus,
.slds-button--icon-border.slds-is-selected:hover,
.slds-button--icon-border.slds-is-selected:focus {
  background-color: #005fb2;
  color: white; }

.slds-button_icon-container.slds-is-selected:active,
.slds-button--icon-container.slds-is-selected:active,
.slds-button_icon-border.slds-is-selected:active,
.slds-button--icon-border.slds-is-selected:active {
  background-color: #00396b; }

.slds-button_icon-container.slds-is-selected .slds-button__icon,
.slds-button--icon-container.slds-is-selected .slds-button__icon,
.slds-button_icon-border.slds-is-selected .slds-button__icon,
.slds-button--icon-border.slds-is-selected .slds-button__icon {
  fill: white; }

/**
 * Button icon container - size small modifier
 *
 * @selector .slds-button_icon-small
 * @restrict .slds-button_icon
 * @modifier
  * @group size
 */
.slds-button_icon-small,
.slds-button--icon-small {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.125rem; }

/**
 * Button icon container - size x-small modifier
 *
 * @selector .slds-button_icon-x-small
 * @restrict .slds-button_icon
 * @modifier
  * @group size
 */
.slds-button_icon-x-small,
.slds-button--icon-x-small {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.125rem;
  line-height: 1; }

.slds-button_icon-x-small .slds-button__icon,
.slds-button--icon-x-small .slds-button__icon {
  width: 0.75rem;
  height: 0.75rem; }

/**
 * Button icon container - size xx-small modifier
 *
 * @selector .slds-button_icon-xx-small
 * @restrict .slds-button_icon
 * @modifier
 * @group size
 */
.slds-button_icon-xx-small,
.slds-button--icon-xx-small {
  width: 1rem;
  height: 1rem;
  border-radius: 0.125rem;
  line-height: 1; }

.slds-button_icon-xx-small .slds-button__icon,
.slds-button--icon-xx-small .slds-button__icon {
  width: 0.5rem;
  height: 0.5rem; }

/**
 * @summary Button icon with dropdown
 *
 * @name icon-with-dropdown
 * @selector .slds-button_icon-more
 * @restrict .slds-button_icon
 * @variant
 */
.slds-button_icon-more,
.slds-button--icon-more {
  line-height: 1.875rem;
  padding: 0 0.5rem;
  vertical-align: middle;
  border: 1px solid #d8dde6; }

.slds-button_icon-more-filled,
.slds-button--icon-more-filled {
  background-color: white; }

.slds-button_icon-more:hover, .slds-button_icon-more:focus,
.slds-button--icon-more:hover,
.slds-button--icon-more:focus {
  border: 1px solid #d8dde6; }

.slds-button_icon-more:hover:hover, .slds-button_icon-more:hover:focus, .slds-button_icon-more:focus:hover, .slds-button_icon-more:focus:focus,
.slds-button--icon-more:hover:hover,
.slds-button--icon-more:hover:focus,
.slds-button--icon-more:focus:hover,
.slds-button--icon-more:focus:focus {
  background-color: #f4f6f9; }

.slds-button_icon-more:hover:active, .slds-button_icon-more:focus:active,
.slds-button--icon-more:hover:active,
.slds-button--icon-more:focus:active {
  background-color: #eef1f6; }

.slds-button_icon-more:hover .slds-button__icon, .slds-button_icon-more:focus .slds-button__icon,
.slds-button--icon-more:hover .slds-button__icon,
.slds-button--icon-more:focus .slds-button__icon {
  fill: #0070d2; }

.slds-button_icon-more:active .slds-button__icon,
.slds-button--icon-more:active .slds-button__icon {
  fill: #00396b; }

.slds-button_icon-more[disabled],
.slds-button--icon-more[disabled] {
  cursor: default; }

.slds-button_icon-more[disabled] .slds-button__icon,
.slds-button--icon-more[disabled] .slds-button__icon {
  fill: #d8dde6; }

.slds-button_icon-container-more,
.slds-button--icon-container-more {
  line-height: 1.875rem;
  padding: 0 0.5rem;
  vertical-align: middle; }

/**
 * 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
 */
.slds-button--icon-container.slds-is-selected,
.slds-button--icon-border.slds-is-selected {
  background-color: #0070d2;
  border: 1px solid #0070d2;
  color: white; }

.slds-button--icon-container.slds-is-selected:link, .slds-button--icon-container.slds-is-selected:visited, .slds-button--icon-container.slds-is-selected:active,
.slds-button--icon-border.slds-is-selected:link,
.slds-button--icon-border.slds-is-selected:visited,
.slds-button--icon-border.slds-is-selected:active {
  color: white; }

.slds-button--icon-container.slds-is-selected:hover, .slds-button--icon-container.slds-is-selected:focus,
.slds-button--icon-border.slds-is-selected:hover,
.slds-button--icon-border.slds-is-selected:focus {
  background-color: #005fb2;
  color: white; }

.slds-button--icon-container.slds-is-selected:active,
.slds-button--icon-border.slds-is-selected:active {
  background-color: #00396b; }

.slds-button--icon-container.slds-is-selected .slds-button__icon,
.slds-button--icon-border.slds-is-selected .slds-button__icon {
  fill: white; }

.slds-button--icon-container.slds-is-selected:hover .slds-button__icon, .slds-button--icon-container.slds-is-selected:focus .slds-button__icon,
.slds-button--icon-border.slds-is-selected:hover .slds-button__icon,
.slds-button--icon-border.slds-is-selected:focus .slds-button__icon {
  fill: white; }

/**
 * @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.
 *
 * @name icon-with-hint-hover
 * @selector .slds-button__icon_hint
 * @restrict .slds-button_icon .slds-button__icon
 * @variant
 */
.slds-button__icon_hint,
.slds-button__icon--hint {
  fill: #9faab5; }

/**
 * 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
 */
.slds-button__icon_inverse-hint,
.slds-button__icon--inverse-hint {
  fill: rgba(255, 255, 255, 0.5); }

.slds-hint-parent .slds-button_icon-border-inverse,
.slds-hint-parent .slds-button--icon-border-inverse {
  border-color: rgba(255, 255, 255, 0.5); }

.slds-hint-parent .slds-button_icon-border-inverse:focus,
.slds-hint-parent .slds-button--icon-border-inverse:focus {
  border-color: rgba(255, 255, 255, 0.75); }

.slds-hint-parent:hover .slds-button_icon-border-inverse,
.slds-hint-parent:hover .slds-button--icon-border-inverse, .slds-hint-parent:focus .slds-button_icon-border-inverse,
.slds-hint-parent:focus .slds-button--icon-border-inverse {
  border-color: rgba(255, 255, 255, 0.75); }

.slds-hint-parent:hover .slds-button__icon_hint,
.slds-hint-parent:hover .slds-button__icon--hint, .slds-hint-parent:focus .slds-button__icon_hint,
.slds-hint-parent:focus .slds-button__icon--hint {
  fill: #54698d; }

.slds-hint-parent:hover .slds-button__icon_inverse-hint,
.slds-hint-parent:hover .slds-button__icon--inverse-hint, .slds-hint-parent:focus .slds-button__icon_inverse-hint,
.slds-hint-parent:focus .slds-button__icon--inverse-hint {
  fill: rgba(255, 255, 255, 0.75); }

/**
 * @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
 */
.slds-icon_container,
.slds-icon__container {
  display: inline-block;
  border-radius: 0.25rem;
  /**
   * @summary Circle container for icons
   *
   * @selector .slds-icon_container_circle
   * @restrict .slds-icon_container
   */ }

.slds-icon_container_circle, .slds-icon_container--circle,
.slds-icon__container_circle,
.slds-icon__container--circle {
  padding: 0.5rem;
  border-radius: 50%; }

[class*='slds-icon-action-'] {
  padding: 0.5rem;
  border-radius: 50%; }

.slds-icon-action-change-owner {
  background-color: #54698d; }

.slds-icon-action-share {
  background-color: #54698d; }

.slds-icon-action-info {
  background-color: #54698d; }

.slds-icon-action-upload {
  background-color: #54698d; }

.slds-icon-action-change-record-type {
  background-color: #54698d; }

.slds-icon-action-check {
  background-color: #54698d; }

.slds-icon-action-download {
  background-color: #54698d; }

.slds-icon-action-edit-relationship {
  background-color: #1dccbf; }

.slds-icon-action-freeze-user {
  background-color: #54698d; }

.slds-icon-action-manage-perm-sets {
  background-color: #54698d; }

.slds-icon-action-password-unlock {
  background-color: #54698d; }

.slds-icon-action-refresh {
  background-color: #54698d; }

.slds-icon-action-remove {
  background-color: #54698d; }

.slds-icon-action-reset-password {
  background-color: #54698d; }

.slds-icon-action-user-activation {
  background-color: #54698d; }

.slds-icon-action-add-contact {
  background-color: #a094ed; }

.slds-icon-action-approval {
  background-color: #00c6b7; }

.slds-icon-action-canvas {
  background-color: #8199af; }

.slds-icon-action-goal {
  background-color: #56aadf; }

.slds-icon-action-opportunity-competitor {
  background-color: #fcb95b; }

.slds-icon-action-opportunity-line-item {
  background-color: #fcb95b; }

.slds-icon-action-opportunity-team-member {
  background-color: #fcb95b; }

.slds-icon-action-question-post-action {
  background-color: #32af5c; }

.slds-icon-action-quote {
  background-color: #88c651; }

.slds-icon-action-reject {
  background-color: #00c6b7; }

.slds-icon-action-social-post {
  background-color: #ea74a2; }

.slds-icon-action-fallback {
  background-color: #9895ee; }

.slds-icon-action-edit {
  background-color: #1dccbf; }

.slds-icon-action-delete {
  background-color: #e6717c; }

.slds-icon-action-clone {
  background-color: #6ca1e9; }

.slds-icon-action-follow {
  background-color: #31b9f8; }

.slds-icon-action-following {
  background-color: #7dcf64; }

.slds-icon-action-join-group {
  background-color: #779ef2; }

.slds-icon-action-leave-group {
  background-color: #f39e58; }

.slds-icon-action-edit-groups {
  background-color: #34becd; }

.slds-icon-action-share-post {
  background-color: #65cae4; }

.slds-icon-action-user {
  background-color: #65cae4; }

.slds-icon-action-share-file {
  background-color: #baac93; }

.slds-icon-action-new-task {
  background-color: #4bc076; }

.slds-icon-action-new-contact {
  background-color: #a094ed; }

.slds-icon-action-new-opportunity {
  background-color: #fcb95b; }

.slds-icon-action-new-case {
  background-color: #f2cf5b; }

.slds-icon-action-new-lead {
  background-color: #f88962; }

.slds-icon-action-share-thanks {
  background-color: #e9696e; }

.slds-icon-action-share-link {
  background-color: #7a9ae6; }

.slds-icon-action-share-poll {
  background-color: #699be1; }

.slds-icon-action-new-event {
  background-color: #eb7092; }

.slds-icon-action-new-child-case {
  background-color: #fa975c; }

.slds-icon-action-log-a-call {
  background-color: #48c3cc; }

.slds-icon-action-new-note {
  background-color: #e6d478; }

.slds-icon-action-new {
  background-color: #33bce7; }

.slds-icon-action-filter {
  background-color: #fd90b5; }

.slds-icon-action-sort {
  background-color: #fab9a5; }

.slds-icon-action-description {
  background-color: #7dc37d; }

.slds-icon-action-defer {
  background-color: #ef7ead; }

.slds-icon-action-update {
  background-color: #81b4d6; }

.slds-icon-action-log-this-event {
  background-color: #eb7092; }

.slds-icon-action-email {
  background-color: #95aec5; }

.slds-icon-action-dial-in {
  background-color: #8b9ae3; }

.slds-icon-action-map {
  background-color: #76c6ee; }

.slds-icon-action-call {
  background-color: #1fcaa0; }

.slds-icon-action-google-news {
  background-color: #f5675b; }

.slds-icon-action-web-link {
  background-color: #56aadf; }

.slds-icon-action-submit-for-approval {
  background-color: #50cc7a; }

.slds-icon-action-search {
  background-color: #48adeb; }

.slds-icon-action-close {
  background-color: #ef6e64; }

.slds-icon-action-back {
  background-color: #0dc2d9; }

.slds-icon-action-office-365 {
  background-color: #ff8041; }

.slds-icon-action-concur {
  background-color: #4cc3c7; }

.slds-icon-action-dropbox {
  background-color: #52aef9; }

.slds-icon-action-evernote {
  background-color: #86c86f; }

.slds-icon-action-docusign {
  background-color: #5080db; }

.slds-icon-action-more {
  background-color: #62b7ed; }

.slds-icon-action-notebook {
  background-color: #e6d478; }

.slds-icon-action-new-notebook {
  background-color: #e6d478; }

.slds-icon-action-preview {
  background-color: #7f8de1; }

.slds-icon-action-priority {
  background-color: #fbb439; }

.slds-icon-action-default-custom-object {
  background-color: #8199af; }

.slds-icon-action-new-custom-object {
  background-color: #a7d44d; }

.slds-icon-action-lead-convert {
  background-color: #f88962; }

.slds-icon-action-new-account {
  background-color: #7f8de1; }

.slds-icon-action-new-person-account {
  background-color: #7f8de1; }

.slds-icon-action-new-campaign {
  background-color: #f49756;