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

Salesforce Lightning Design System

/*! Lightning Design System 2.8.0 */
@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; }

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; }

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

::placeholder {
  color: #3e3e3c;
  font-weight: 400;
  font-size: 0.8125rem; }

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

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

html {
  font-family: "Salesforce Sans", Arial, sans-serif;
  font-size: 100%;
  line-height: 1.5;
  background: #fafaf9;
  color: #080707;
  -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: #006dcc;
  text-decoration: none;
  transition: color 0.1s linear; }

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

a:active {
  color: #005fb2; }

a,
button {
  cursor: pointer; }

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

mark {
  background-color: #fff03f;
  color: #080707; }

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 #dddbda;
  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: white;
  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 #dddbda;
  padding: 0.75rem 1rem;
  background-color: #f3f2f2;
  box-shadow: 0 -2px 4px #F9F9FA; }

/**
 * @summary Create each activity timeline item in a list
 *
 * @selector .slds-timeline__media
 * @restrict .slds-media
 * @deprecated
 */
.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: #dddbda;
  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;
  top: 2px; }

/**
 * @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: white;
  z-index: 2; }

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

/**
 * @name call
 * @selector .slds-timeline__media_call
 * @restrict .slds-timeline__media
 * @deprecated
 */
.slds-timeline__media_call:before,
.slds-timeline__media--call:before {
  background: #48c3cc; }

/**
 * @name email
 * @selector .slds-timeline__media_email
 * @restrict .slds-timeline__media
 * @deprecated
 */
.slds-timeline__media_email:before,
.slds-timeline__media--email:before {
  background: #95aec5; }

/**
 * @name event
 * @selector .slds-timeline__media_event
 * @restrict .slds-timeline__media
 * @deprecated
 */
.slds-timeline__media_event:before,
.slds-timeline__media--event:before {
  background: #eb7092; }

/**
 * @name task
 * @selector .slds-timeline__media_task
 * @restrict .slds-timeline__media
 * @deprecated
 */
.slds-timeline__media_task:before,
.slds-timeline__media--task:before {
  background: #4bc076; }

/**
 * @summary Create each expandable activity timeline item in a list
 *
 * @name base
 * @selector .slds-timeline__item_expandable
 * @restrict div
 * @support dev-ready
 * @variant
 */
.slds-timeline__item_expandable {
  position: relative;
  padding-bottom: 1rem;
  /**
   * @summary Changes the layout of actions to become inlined with the title of a timeline item.
   * @selector .slds-timeline__actions_inline
   * @restrict .slds-timeline__actions
   */
  /**
   * @summary Class to show and hide details
   * @selector .slds-timeline__item_details
   * @restrict .slds-timeline__item_expandable article
   */
  /**
   * @name expand
   * @summary Toggles the visibility of the timeline item
   * @selector .slds-is-open
   * @restrict .slds-timeline__item_expandable
   * @modifier
   * @group visibility
   */ }

.slds-timeline__item_expandable:before {
  content: '';
  background: #dddbda;
  height: 100%;
  width: 2px;
  position: absolute;
  left: 2.25rem;
  top: 0;
  bottom: 0;
  margin-left: 1px; }

.slds-timeline__item_expandable .slds-media__figure {
  margin-right: 0.25rem;
  z-index: 1; }

.slds-timeline__item_expandable .slds-media__figure .slds-button_icon {
  margin-right: 0.5rem; }

.slds-timeline__item_expandable .slds-media__body {
  padding: 0 0.25rem; }

.slds-timeline__item_expandable .slds-checkbox {
  margin-right: 0.25rem; }

.slds-timeline__item_expandable .slds-timeline__actions_inline {
  -ms-flex-flow: row nowrap;
      flex-flow: row nowrap;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-left: 0.5rem; }

.slds-timeline__item_expandable .slds-timeline__actions_inline .slds-timeline__date {
  padding-right: 0.5rem;
  margin-bottom: 0; }

.slds-timeline__item_expandable .slds-timeline__item_details {
  visibility: hidden;
  opacity: 0;
  height: 0;
  padding: 0; }

.slds-timeline__item_expandable.slds-is-open .slds-timeline__item_details {
  visibility: visible;
  opacity: 1;
  height: auto;
  padding: 1rem; }

.slds-timeline__item_expandable.slds-is-open .slds-timeline__details-action-icon {
  transform: rotate(0);
  transform-origin: 45%; }

/**
 * @summary Applies line connector for a call timeline item
 * @selector .slds-timeline__item_call
 * @restrict .slds-timeline__item_expandable
 */
.slds-timeline__item_call:before {
  background: #48c3cc; }

/**
 * @summary Applies line connector for an email timeline item
 * @selector .slds-timeline__item_email
 * @restrict .slds-timeline__item_expandable
 */
.slds-timeline__item_email:before {
  background: #95aec5; }

/**
 * @summary Applies line connector for an event timeline item
 * @selector .slds-timeline__item_event
 * @restrict .slds-timeline__item_expandable
 */
.slds-timeline__item_event:before {
  background: #eb7092; }

/**
 * @summary Applies line connector for a task timeline item
 * @selector .slds-timeline__item_task
 * @restrict .slds-timeline__item_expandable
 */
.slds-timeline__item_task:before {
  background: #4bc076; }

/*
 * @summary Provides hover feedback on each timeline item
 * @selector .slds-timeline__trigger
 * @restrict .slds-timeline__media_expandable div
 */
.slds-timeline__trigger {
  padding: 0.25rem; }

.slds-timeline__trigger:hover {
  background-color: #f4f6f9; }

/**
 * @summary Icon associated with timeline item
 * @selector .slds-timeline__icon
 * @restrict .slds-timeline__item_expandable .slds-icon_container
 */
.slds-timeline__icon {
  border: 2px solid #fff; }

/**
 * @summary Container for date and action overflow on the right of a timeline item
 * @selector .slds-timeline__actions
 * @restrict .slds-timeline__trigger div
 */
.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; }

/**
 * @summary Styles the date inside `.slds-timeline__actions`
 * @selector .slds-timeline__date
 * @restrict .slds-timeline__actions p
 */
.slds-timeline__date {
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  color: #3e3e3c; }

/**
 * @summary Icon inside of actionable button within an expandable timeline item
 * @selector .slds-timeline__details-action-icon
 * @restrict .slds-timeline__item_expandable svg
 */
.slds-timeline__details-action-icon {
  transform: rotate(-90deg); }

/**
 * @summary Create badge component
 *
 * @name base
 * @selector .slds-badge
 * @restrict span
 * @support dev-ready
 * @variant
 */
.slds-badge {
  background-color: #ecebea;
  padding: 0.25rem 0.5rem;
  border-radius: 15rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: normal;
  color: #080707;
  white-space: nowrap; }

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

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

/**
 * @summary Change badge color to a dark with light text
 * @name inverse
 * @selector .slds-badge_inverse
 * @restrict .slds-badge
 * @modifier
 * @group color
 */
.slds-badge_inverse {
  background-color: #706e6b;
  color: white; }

/**
 * @summary Change badge color to white with normal text
 * @name lightest
 * @selector .slds-badge_lightest
 * @restrict .slds-badge
 * @modifier
 * @group color
 */
.slds-badge_lightest {
  border: 1px solid #dddbda;
  background-color: white;
  font-size: 0.75rem;
  text-transform: none;
  letter-spacing: normal; }

/**
 * @summary Adds an icon to badge
 * @name icon-container
 * @selector .slds-badge__icon
 * @restrict .slds-badge span
 * @modifier
 */
.slds-badge__icon {
  color: #706e6b;
  vertical-align: middle;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  line-height: 1;
  /**
   * @summary Change badge icon fill color to inverse
   * @name icon-inverse
   * @selector .slds-badge__icon_inverse
   * @restrict .slds-badge__icon
   * @modifier
   * @group color
   */ }

.slds-badge__icon.slds-badge__icon_inverse {
  color: currentColor; }

/**
 * @summary Adds an icon to the left of the badge text
 * @name icon-left
 * @selector .slds-badge__icon_left
 * @restrict .slds-badge__icon
 * @modifier
 * @group spacing
 */
.slds-badge__icon_left {
  margin-right: 0.25rem; }

/**
 * @summary Adds an icon to the right of the badge text
 * @name icon-right
 * @selector .slds-badge__icon_right
 * @restrict .slds-badge__icon
 * @modifier
 * @group spacing
 */
.slds-badge__icon_right {
  margin-left: 0.25rem; }

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

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

.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: ''; }

.slds-breadcrumb .slds-dropdown-trigger {
  margin-right: 0.5rem; }

/**
 * @summary Creates button group container that provides spacing between each button
 *
 * @name row
 * @selector .slds-button-group-row
 * @restrict div, ul
 * @support dev-ready
 * @variant
 */
.slds-button-group-row {
  display: -ms-inline-flexbox;
  display: inline-flex;
  /**
   * @summary Each item inside of a button group row that needs spacing applied to it
   * @selector .slds-button-group-item
   * @restrict .slds-button-group-row li, .slds-button-group-row div
   */ }

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

.slds-button-group-row .slds-button-group-item .slds-button {
  margin: 0; }

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

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

.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 .slds-button_brand + .slds-button_last .slds-button_icon-brand,
.slds-button-group .slds-button_brand + .slds-button--last .slds-button_icon-brand,
.slds-button-group-list li:last-child .slds-button_icon-brand {
  box-shadow: inset 1px 0 0 white; }

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

/**
 * @summary If the last button in the group is required to be wrapped in a div, apply this class to the div
 * @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; }

/**
 * @summary Explicitly style the first button in a button group
 * @selector .slds-button_first
 * @restrict .slds-button
 */
.slds-button.slds-button_first.slds-button_first {
  border-right: 0;
  border-radius: 0.25rem 0 0 0.25rem; }

/**
 * @summary Explicitly style buttons in the middle (i.e., not first or last) in a button group
 * @selector .slds-button_middle
 * @restrict .slds-button
 */
.slds-button.slds-button_middle.slds-button_middle {
  border-radius: 0;
  margin-left: -1px; }

/**
 * @summary Explicitly style the last button in a button group
 * @selector .slds-button_last
 * @restrict .slds-button
 */
.slds-button.slds-button_last.slds-button_last {
  border-radius: 0 0.25rem 0.25rem 0;
  margin-left: -1px; }

.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; }

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

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

/**
 * @summary This neutralizes all the base styles making it look like a text link
 * @name base
 * @selector .slds-button
 * @restrict button, a, span
 * @support dev-ready
 * @variant
 */
.slds-button {
  position: relative;
  display: inline-block;
  padding: 0;
  background: transparent;
  background-clip: border-box;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  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; }

.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: #005fb2; }

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

.slds-button[disabled] *, .slds-button:disabled * {
  pointer-events: none; }

.slds-button a {
  color: currentColor; }

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

.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,
a.slds-button--inverse:focus {
  outline: none;
  box-shadow: 0 0 3px #ecebea;
  border: 1px solid #ecebea; }

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

/**
 * @name neutral
 * @summary 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 #dddbda;
  transition: border 0.15s linear;
  border-color: #dddbda;
  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,
.slds-button--neutral[disabled],
.slds-button--neutral:disabled {
  background-color: white;
  cursor: default; }

/**
 * @name brand
 * @summary 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;
  border: 1px solid #dddbda;
  transition: border 0.15s linear;
  background-color: #0070d2;
  border-color: #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;
  border-color: #005fb2;
  color: white; }

.slds-button_brand:active,
.slds-button--brand:active {
  background-color: #005fb2;
  border-color: #005fb2; }

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

/**
 * @name outline-brand
 * @summary Creates the outlined button with the brand color
 * @selector .slds-button_outline-brand
 * @restrict .slds-button
 * @modifier
 * @group theme
 */
.slds-button_outline-brand {
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #dddbda;
  transition: border 0.15s linear;
  border-color: #dddbda;
  background-color: white;
  border-color: #0070d2; }

.slds-button_outline-brand:hover, .slds-button_outline-brand:focus {
  background-color: #f4f6f9; }

.slds-button_outline-brand:active {
  background-color: #eef1f6; }

.slds-button_outline-brand[disabled], .slds-button_outline-brand:disabled {
  border-color: #dddbda;
  color: #dddbda;
  background-color: white; }

/**
 * @name inverse
 * @summary 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 #dddbda;
  transition: border 0.15s linear;
  background-color: transparent;
  border-color: #dddbda; }

.slds-button_inverse[disabled], .slds-button_inverse:disabled,
.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: #ecebea; }

.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 #ecebea;
  border: 1px solid #ecebea; }

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

/**
 * @name destructive
 * @summary 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;
  border: 1px solid #dddbda;
  transition: border 0.15s linear;
  background-color: #c23934;
  border-color: #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,
.slds-button--destructive[disabled],
.slds-button--destructive:disabled {
  background: #c9c7c5;
  border-color: #c9c7c5;
  color: white; }

/**
 * @name text-destructive
 * @summary Creates a neutral button with red text
 * @selector .slds-button_text-destructive
 * @restrict .slds-button
 * @modifier
 * @group theme
 */
.slds-button_text-destructive {
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #dddbda;
  transition: border 0.15s linear;
  border-color: #dddbda;
  background-color: white;
  color: #c23934; }

.slds-button_text-destructive:hover, .slds-button_text-destructive:focus {
  background-color: #f4f6f9; }

.slds-button_text-destructive:active {
  background-color: #eef1f6; }

.slds-button_text-destructive:focus, .slds-button_text-destructive:hover {
  color: #a12b2b; }

.slds-button_text-destructive[disabled], .slds-button_text-destructive:disabled {
  color: #dddbda;
  background-color: white; }

/**
 * @name success
 * @summary 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;
  border: 1px solid #dddbda;
  transition: border 0.15s linear;
  background-color: #4bca81;
  border-color: #4bca81;
  color: #080707; }

.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: #080707; }

.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; }

.slds-button_success[disabled], .slds-button_success:disabled,
.slds-button--success[disabled],
.slds-button--success:disabled {
  background: #c9c7c5;
  border-color: #c9c7c5;
  color: white; }

/**
 * @name with-icon
 * @summary Sizing for icon that sits inside button__icon
 * @selector .slds-button__icon
 * @restrict .slds-button svg
 * @support dev-ready
 * @variant
 */
.slds-button__icon {
  width: 0.875rem;
  height: 0.875rem;
  fill: currentColor; }

/**
 * @name large
 * @summary Large size button icon svg
 * @selector .slds-button__icon_large
 * @restrict .slds-button__icon
 * @modifier
 * @group size
 */
.slds-button__icon_large,
.slds-button__icon--large {
  width: 1.5rem;
  height: 1.5rem; }

/**
 * @name small
 * @summary Small size button icon svg
 * @selector .slds-button__icon_small
 * @restrict .slds-button__icon
 * @modifier
 * @group size
 */
.slds-button__icon_small,
.slds-button__icon--small {
  width: 0.75rem;
  height: 0.75rem; }

/**
 * @name x-small
 * @summary X-Small size button icon svg
 * @selector .slds-button__icon_x-small
 * @restrict .slds-button__icon
 * @modifier
 * @group size
 */
.slds-button__icon_x-small,
.slds-button__icon--x-small {
  width: 0.5rem;
  height: 0.5rem; }

/**
 * @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
 */
.slds-button__icon_left,
.slds-button__icon--left {
  margin-right: 0.5rem; }

/**
 * @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
 */
.slds-button__icon_right,
.slds-button__icon--right {
  margin-left: 0.5rem; }

/**
 * @summary Creates a button style for full width that resets styling
 * @selector .slds-button_full-width
 * @restrict .slds-button
 * @modifier
 * @group size
 */
.slds-button_full-width {
  font-size: inherit;
  color: inherit;
  line-height: inherit;
  padding: 0;
  background: transparent;
  border: 0;
  text-align: inherit;
  width: 100%;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-positive: 1;
      flex-grow: 1;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: justify;
      justify-content: space-between; }

.slds-button_full-width:focus {
  box-shadow: none; }

/**
 * @summary Creates a button style for 100% width that maintains current styling
 * @selector .slds-button_stretch
 * @restrict .slds-button
 * @modifier
 * @group size
 */
.slds-button_stretch {
  width: 100%; }

/**
 * @summary Icon modifier for stateful buttons
 * @selector .slds-button__icon_stateful
 * @deprecated
 */
.slds-button__icon_stateful,
.slds-button__icon--stateful {
  width: 0.75rem;
  height: 0.75rem;
  fill: currentColor; }

/**
 * @summary Initiates a stateful button
 * @name stateful
 * @selector .slds-button_stateful
 * @restrict button
 * @support dev-ready
 * @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-color: #dddbda;
  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_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 {
  /**
   * @summary Shown text when button is selected
   * @selector .slds-text-selected
   * @restrict .slds-button_stateful span
   */
  /**
   * @summary Shown text when button is selected and focused
   * @selector .slds-text-selected-focus
   * @restrict .slds-button_stateful span
   */
  /**
   * @summary Shown text when button is not selected - default state
   * @selector .slds-text-not-selected
   * @restrict .slds-button_stateful span
   */ }

.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; }

/**
 * @summary 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; }

/**
 * @summary 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; }

/**
 * @summary Initiates a dual stateful button
 * @name dual-stateful
 * @selector .slds-button_dual-stateful
 * @restrict button
 * @support dev-ready
 * @variant
 */
.slds-button_dual-stateful {
  /**
   * @summary Shown text when button is not pressed - default state
   * @selector .slds-text-not-pressed
   * @restrict .slds-button_dual-stateful span
   */
  /**
   * @summary Shown text when button is pressed
   * @selector .slds-text-pressed
   * @restrict .slds-button_dual-stateful span
   */ }

.slds-button_dual-stateful .slds-text-not-pressed {
  display: block; }

.slds-button_dual-stateful .slds-text-pressed {
  display: none; }

/**
 * @summary When button is in pressed state
 * @selector .slds-is-pressed
 * @restrict .slds-button_dual-stateful
 * @notes This class should be toggled with JavaScript
 * @modifier
 * @group interaction
 */
.slds-button_dual-stateful.slds-is-pressed {
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #dddbda;
  transition: border 0.15s linear;
  background-color: #0070d2;
  border-color: #0070d2;
  color: white; }

.slds-button_dual-stateful.slds-is-pressed:link, .slds-button_dual-stateful.slds-is-pressed:visited, .slds-button_dual-stateful.slds-is-pressed:active {
  color: white; }

.slds-button_dual-stateful.slds-is-pressed:hover, .slds-button_dual-stateful.slds-is-pressed:focus {
  background-color: #005fb2;
  border-color: #005fb2;
  color: white; }

.slds-button_dual-stateful.slds-is-pressed:active {
  background-color: #005fb2;
  border-color: #005fb2; }

.slds-button_dual-stateful.slds-is-pressed[disabled], .slds-button_dual-stateful.slds-is-pressed:disabled {
  background: #c9c7c5;
  border-color: #c9c7c5;
  color: white; }

.slds-button_dual-stateful.slds-is-pressed .slds-text-not-pressed {
  display: none; }

.slds-button_dual-stateful.slds-is-pressed .slds-text-pressed {
  display: block; }

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

/**
 * @summary Creates a button that looks like a plain icon
 *
 * @name base
 * @selector .slds-button_icon
 * @restrict button
 * @support dev-ready
 * @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: #706e6b; }

/**
 * @summary Default width + height for button icon with containers
 * @selector .slds-button_icon-container
 * @restrict .slds-button_icon
 */
.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-brand,
.slds-button_icon-more,
.slds-button--icon-more,
.slds-button_icon-container-more,
.slds-button--icon-container-more {
  width: 2rem;
  height: 2rem; }

/**
 * @summary Transparent themed button icon - Button icon has a border with a transparent background
 * @selector .slds-button_icon-border
 * @restrict .slds-button_icon
 */
.slds-button_icon-border-filled,
.slds-button--icon-border-filled,
.slds-button_icon-border,
.slds-button--icon-border {
  line-height: 1;
  vertical-align: middle;
  color: #706e6b;
  border: 1px solid #dddbda;
  transition: border 0.15s linear;
  border-color: #dddbda; }

.slds-button_icon-border-filled[disabled], .slds-button_icon-border-filled:disabled,
.slds-button--icon-border-filled[disabled],
.slds-button--icon-border-filled:disabled,
.slds-button_icon-border[disabled],
.slds-button_icon-border:disabled,
.slds-button--icon-border[disabled],
.slds-button--icon-border:disabled {
  color: #dddbda; }

/**
 * @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
 */
.slds-button_icon-border-inverse,
.slds-button--icon-border-inverse {
  background-color: transparent;
  border-color: #dddbda; }

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

/**
 * @summary Branded button icon - Button icon has a filled background with the brand color
 * @selector .slds-button_icon-brand
 * @restrict .slds-button_icon
 */
.slds-button_icon-brand {
  background-color: #0070d2;
  border-color: #0070d2;
  color: white; }

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

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

.slds-button_icon-brand:active {
  background-color: #005fb2;
  border-color: #005fb2; }

.slds-button_icon-brand[disabled], .slds-button_icon-brand:disabled {
  background: #c9c7c5;
  border-color: #c9c7c5;
  color: white; }

/**
 * @summary Neutral themed button icon - Button icon has a border with a filled background
 * @selector .slds-button_icon-border-filled
 * @restrict .slds-button_icon
 */
.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,
.slds-button--icon-border-filled[disabled],
.slds-button--icon-border-filled:disabled {
  border-color: #dddbda;
  background-color: white; }

/**
 * @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
 */
.slds-button_icon-inverse,
.slds-button--icon-inverse,
.slds-button_icon-border-inverse,
.slds-button--icon-border-inverse {
  color: white; }

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

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

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

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

/**
 * @summary Error state - Typically used in conjunction with an error toolip
 * @selector .slds-button_icon-error
 * @restrict .slds-button_icon
 */
.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; }

/**
 * @summary Apply the current color to the icon contained within
 * @selector .slds-button_icon-current-color
 * @restrict .slds-button_icon
 */
.slds-button_icon-current-color {
  color: currentColor; }

/**
 * @summary Changes a button icon container to be 24x24px
 * @name small
 * @selector .slds-button_icon-small
 * @restrict .slds-button_icon
 * @group size
 */
.slds-button_icon-small,
.slds-button--icon-small {
  width: 1.5rem;
  height: 1.5rem; }

/**
 * @summary Changes a button icon container to be 20x20px
 * @name x-small
 * @selector .slds-button_icon-x-small
 * @restrict .slds-button_icon
 * @group size
 */
.slds-button_icon-x-small,
.slds-button--icon-x-small {
  width: 1.25rem;
  height: 1.25rem;
  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; }

/**
 * @summary Changes a button icon container to be 16x16px
 * @name xx-small
 * @selector .slds-button_icon-xx-small
 * @restrict .slds-button_icon
 * @group size
 */
.slds-button_icon-xx-small,
.slds-button--icon-xx-small {
  width: 1rem;
  height: 1rem;
  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 Creates a button menu icon container that has borders and a filled background
 * @selector .slds-button_icon-more
 * @restrict .slds-button_icon
 */
.slds-button_icon-more,
.slds-button--icon-more {
  width: auto;
  line-height: 1.875rem;
  padding: 0 0.5rem;
  background-color: white;
  border-color: #dddbda;
  color: #706e6b; }

.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: #005fb2; }

.slds-button_icon-more[disabled], .slds-button_icon-more:disabled,
.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,
.slds-button--icon-more[disabled] .slds-button__icon,
.slds-button--icon-more:disabled .slds-button__icon {
  fill: #dddbda; }

/**
 * @summary Creates a button menu icon container that has no borders
 * @selector .slds-button_icon-container-more
 * @restrict .slds-button_icon
 */
.slds-button_icon-container-more,
.slds-button--icon-container-more {
  width: auto;
  line-height: 1.875rem;
  padding: 0 0.5rem;
  vertical-align: middle; }

/**
 * @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
 */
.slds-button__icon_hint,
.slds-button__icon--hint {
  fill: #b0adab; }

/**
 * @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
 */
.slds-button__icon_inverse-hint,
.slds-button__icon--inverse-hint {
  fill